/* Trigger Button */
.btn {
    padding: 12px 30px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

.btn:hover {
    background: #333;
}

/* Hidden checkbox to toggle modal */
#modal-toggle {
    display: none;
}

/* Modal overlay (fullscreen, always on top) */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(3px);
}

/* Modal visible state (handled by JS) */
.modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal box (centered card) */
.modal-box {
    background: #fff;
    width: 460px;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s ease;
}

/* Animate modal box when visible */
.modal.active .modal-box {
    transform: translateY(0);
    opacity: 1;
}

#modal-toggle:checked+.modal {
    opacity: 1;
    pointer-events: auto;
}


@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-logo {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

h2 {
    margin-bottom: 20px;
    font-size: 22px;
    letter-spacing: 0.5px;
}

/* Tabs */
.tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    border-bottom: 2px solid #ddd;
}

.tab {
    width: 50%;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    font-weight: 600;
    transition: color 0.3s;
}

input[name="tab-control"] {
    display: none;
}


input[name="tab-control-edit"] {
    display: none;
}

input[name="tab-control-ladder"] {
    display: none;
}

/* Active tab underline */
input#tab-login:checked~.tabs label[for="tab-login"],
input#tab-signup:checked~.tabs label[for="tab-signup"] {}

/* Form panels */
.tab-content {
    display: none;
    text-align: left;
    animation: fade 0.4s ease;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

input#tab-login:checked~.content .login-panel {
    display: flex;
    flex-direction: column;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


input#tab-signup:checked~.content .signup-panel {
    display: block;
}

.ak-content-block input#tab-compte:checked~.tabs label[for="tab-compte"],
.ak-content-block input#tab-play:checked~.tabs label[for="tab-play"],
.ak-content-block input#tab-vote:checked~.tabs label[for="tab-vote"] {}

.ak-content-block input#tab-compte:checked~.content .compte-panel,
.ak-content-block input#tab-play:checked~.content .play-panel,
.ak-content-block input#tab-vote:checked~.content .vote-panel {
    display: block
}


.ak-content-block input#tab-pvm:checked~.tabs label[for="tab-pvm"],
.ak-content-block input#tab-prestige:checked~.tabs label[for="tab-prestige"],
.ak-content-block input#tab-guilds:checked~.tabs label[for="tab-guilds"] {}

.ak-content-block input#tab-pvm:checked~.content .pvm-panel,
.ak-content-block input#tab-prestige:checked~.content .prestige-panel,
.ak-content-block input#tab-guilds:checked~.content .guilds-panel {
    display: block
}

.input-group {
    margin-bottom: 15px;
    width: 100%;
}

.input-group label {
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 30px;
    background: #f0f0f0;
    font-size: 14px;
}

.login-btn {
    width: 100%;
    padding: 12px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    margin-top: 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.login-btn:hover {
    background: #333;
}

.login-btn:disabled {
    background: #706e6e64;
    pointer-events: none;
}

.close-btn {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
}

.main-header {
    width: 60%;
}

.video-desktop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute
}

.toast-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-container.top-left {
    top: 20px;
    left: 20px;
    align-items: flex-start;
}

.toast-container.top-right {
    top: 20px;
    right: 20px;
    align-items: flex-end;
}

.toast-container.bottom-left {
    bottom: 20px;
    left: 20px;
    align-items: flex-start;
}

.toast-container.bottom-right {
    bottom: 20px;
    right: 20px;
    align-items: flex-end;
}

/* Toast styles */
.toast {
    min-width: 200px;
    max-width: 300px;
    padding: 12px 16px;
    border-radius: 5px;
    color: #fff;
    font-family: sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

/* Toast types */
.toast.success {
    background-color: #4CAF50;
}

.toast.error {
    background-color: #f44336;
}

.toast.warning {
    background-color: #ff9800;
}

/* Show animation */
.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.account-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* background: #1e1e2f; */
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
}

.account-tabs-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 1.9rem;
    color: #d1d5db;
    cursor: pointer;
    padding: 1.6rem 3.2rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.account-tabs-item svg {
    width: 18px;
    height: 18px;
}

.account-tabs-item:hover {
    background: #2a2a40;
    color: #fff;
}

.account-tabs-item.active {
    background: #2a2a40;
    color: #fff;
    /* box-shadow: 0 0 28.5rem rgba(79, 70, 229, 0.4); */
}

.card {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background-color: #f9f9f9;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cardvv {
    /* background-color: #e0e0e0; */
    border: 1px solid #b0b0b0;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    /* max-width: 400px; */
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
}

.card-header {
    padding: 2rem 1.5rem 1rem 1.5rem;
}

.card-header svg {
    width: 64px;
    height: 64px;
    color: #520e0ed9;
    margin-bottom: 1rem;
}

.card-title {
    font-size: 2rem;
    font-weight: 900;
    color: #333;
    margin-bottom: 0.5rem;
}

.card-description {
    font-size: 1rem;
    font-weight: 600;
    color: #555;
}

.card-body {
    padding: 1.5rem;
}

.vote-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: #520e0ed9;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    max-width: 250px;
}

.vote-button svg {
    width: 24px;
    height: 24px;
}

.vote-button:hover {
    background-color: #d97706;
}

.reward-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #555;
    margin-top: 1rem;
}

.reward-info img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* play accounts */

.myp-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

/* Table styling */
.myp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

/* Table header */
.myp-table thead {
    background-color: #1a1a1a;
    color: #fff;
    text-align: left;
}

.myp-table th,
.myp-table td {
    padding: 12px 15px;
    border: 1px solid #333;
}

/* Alternating row colors */
.myp-table tbody tr:nth-child(even) {
    background-color: #f4f4f4;
}

.myp-table tbody tr:nth-child(odd) {
    background-color: #fff;
}

/* Hover effect */
.myp-table tbody tr:hover {
    background-color: #d1e7ff;
}

/* Status badges */
.myp-banned {
    color: #fff;
    background-color: #e74c3c;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    display: inline-block;
}

.myp-active {
    color: #fff;
    background-color: #2ecc71;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Responsive text */
.myp-table td,
.myp-table th {
    white-space: nowrap;
}


.vote-button:disabled {
    background-color: #696969d9;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.vote-check {
    font-family: "rowdies-regular";
}

.text-center {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 21px;
}

.text-center .success {
    color: #229f40;
}

.text-center .error {
    color: #9f2222;
}

.rank {
    border-radius: 2px;
    display: inline-block;
    width: 33px;
    background: url(img/motif-N5ZDX55I.png) rgba(255, 255, 255, .5);
    box-shadow: 0 0 1px #00000080 inset;
    height: 33px;
    vertical-align: middle;
    line-height: 34px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    font-family: 'lexend';
    font-size: 20px;
}

.rank-1 {
    background: url(img/ranking-tab.png) #e3b63a;
}

.rank-2 {
    background: url(img/motif-N5ZDX55I.png) #ada99c;
}

.rank-3 {
    background: url(img/motif-N5ZDX55I.png) #cd805a;
}

.ak-breed-icon {
    display: inline-block;
    height: 35px;
    position: relative;
    width: 35px;
    background-image: url(img/breedsmap.jpg);
}


.ak-breed-icon.breed1_1 {
    background-position: 0 0
}

.ak-breed-icon.breed1_0 {
    background-position: 0 -35px
}

.ak-breed-icon.breed2_1 {
    background-position: -35px 0
}

.ak-breed-icon.breed2_0 {
    background-position: -35px -35px
}

.ak-breed-icon.breed3_1 {
    background-position: -70px 0
}

.ak-breed-icon.breed3_0 {
    background-position: -70px -35px
}

.ak-breed-icon.breed4_1 {
    background-position: -105px 0
}

.ak-breed-icon.breed4_0 {
    background-position: -105px -35px
}

.ak-breed-icon.breed5_1 {
    background-position: -140px 0
}

.ak-breed-icon.breed5_0 {
    background-position: -140px -35px
}

.ak-breed-icon.breed6_1 {
    background-position: -175px 0
}

.ak-breed-icon.breed6_0 {
    background-position: -175px -35px
}

.ak-breed-icon.breed7_1 {
    background-position: -210px 0
}

.ak-breed-icon.breed7_0 {
    background-position: -210px -35px
}

.ak-breed-icon.breed8_1 {
    background-position: -245px 0
}

.ak-breed-icon.breed8_0 {
    background-position: -245px -35px
}

.ak-breed-icon.breed9_1 {
    background-position: -280px 0
}

.ak-breed-icon.breed9_0 {
    background-position: -280px -35px
}

.ak-breed-icon.breed10_1 {
    background-position: -315px 0
}

.ak-breed-icon.breed10_0 {
    background-position: -315px -35px
}

.ak-breed-icon.breed11_1 {
    background-position: -350px 0
}

.ak-breed-icon.breed11_0 {
    background-position: -350px -35px
}

.ak-breed-icon.breed12_1 {
    background-position: -385px 0
}

.ak-breed-icon.breed12_0 {
    background-position: -385px -35px
}

.ak-breed-icon.breed13_1 {
    background-position: -420px 0
}

.ak-breed-icon.breed13_0 {
    background-position: -420px -35px
}

.ak-breed-icon.breed14_1 {
    background-position: -455px 0
}

.ak-breed-icon.breed14_0 {
    background-position: -455px -35px
}

.ak-breed-icon.breed15_1 {
    background-position: -490px 0
}

.ak-breed-icon.breed15_0 {
    background-position: -490px -35px
}

.ak-breed-icon.breed16_1 {
    background-position: -525px 0
}

.ak-breed-icon.breed16_0 {
    background-position: -525px -35px
}

.ak-breed-icon.breed17_0 {
    background-position: -560px -35px
}

.ak-breed-icon.breed17_1 {
    background-position: -560px 0
}

.ak-breed-icon.breed18_0 {
    background-position: -595px -35px
}

.ak-breed-icon.breed18_1 {
    background-position: -595px 0
}

.ak-breed-icon.breed20_0 {
    background-position: -630px -35px
}

.ak-breed-icon.breed20_1 {
    background-position: -630px 0
}

.ladder-name {
    font-weight: 700;
    color: #001fe499;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    font-size: 1.55rem;
    letter-spacing: 0.5px;
}

.ladder-breed {
    color: #102c2a;
    font-size: 1.4rem;
    font-style: normal;
}

.ladder-xp {
    font-weight: 600;
    color: #ffc857;
    text-shadow: 0 0 4px rgba(255, 200, 87, 0.3);
    font-family: "Consolas", "Roboto Mono", monospace;
}

.ladder-omega {
    background: url(img/omega.png) center center no-repeat;
    width: 42px;
    height: 27px;
    display: inline-block;
    text-align: center;
    line-height: 27px;
    text-indent: -2px;
    color: #222;
    font-size: 13px;
    font-weight: bold;
    margin: 0 2px;
    padding: 0;
}

.ladder-prestige {
    font-weight: 800;
    color: #ff5c8d;
    text-shadow: 0 0 6px rgba(255, 92, 141, 0.3);
}

.ladder-level {
    font-weight: 400;
    color: #2b87d3e8;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    font-size: 1.55rem;
    letter-spacing: 0.5px;
    font-family: 'bebas_neueregular';
}

.ladder {
    display: flex;
    /* left: 0; */
    position: flex;
    /* text-align: center; */
    /* top: 0; */
    background-size: 65px auto;
    background-image: url(img/sprite.png);
    background-repeat: no-repeat;
    width: 59px;
    height: 63px;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: 8px;
    margin-right: 21px;
}

.ladder-xp {
    background-position: 0 -1285px;
}

.ladder-guild {
    background-position: 0 -1200px
}

.img-modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
}

.img-modal img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: fadeIn 0.3s ease;
}

.close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close:hover {
    color: #f1c40f;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}