.page-hero{
    padding:72px 0 28px;
}

.page-hero-box{
    padding:32px;
}

.page-content{
    padding:24px 0 80px;
}

.form-card{
    max-width:620px;
    margin:0 auto;
}

.form-grid{
    display:grid;
    gap:16px;
}

.form-group{
    display:grid;
    gap:8px;
}

.form-label{
    font-weight:700;
    color:var(--text);
}

.form-input{
    width:100%;
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 16px;
    outline:none;
}

@media (max-width: 1235px){
    .form-input{
        font-size: 16px;
    }
}

.form-input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(198,154,87,.12);
}

.form-input.is-invalid{
    border-color:#d46f6f;
    box-shadow:0 0 0 3px rgba(212,111,111,.12);
}

.form-feedback{
    border-radius:14px;
    padding:14px 16px;
    font-weight:600;
    border:1px solid transparent;
}

.form-feedback.is-error{
    color:#ffd5d5;
    background:rgba(160,33,33,.18);
    border-color:rgba(212,111,111,.25);
}

.form-feedback.is-success{
    color:#dcffe0;
    background:rgba(35,125,54,.18);
    border-color:rgba(88,196,115,.28);
}

.form-feedback.is-warning{
    color:#ffe9ae;
    background:rgba(176,124,22,.18);
    border-color:rgba(234,190,91,.28);
}

.form-error{
    min-height:18px;
    font-size:13px;
    color:#ffb3b3;
}

.checkbox-row{
    display:flex;
    align-items:center;
    gap:12px;
    width:fit-content;
    min-height:52px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(255,255,255,.03);
    color:var(--text);
    font-weight:700;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.checkbox-row:hover{
    border-color:rgba(198,154,87,.22);
    background:rgba(198,154,87,.06);
}

.checkbox-row span{
    color:var(--text);
    line-height:1.4;
}

.checkbox-row input{
    appearance:none;
    -webkit-appearance:none;
    width:22px;
    height:22px;
    margin:0;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:7px;
    background:rgba(255,255,255,.03);
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
    cursor:pointer;
}

.checkbox-row input::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:3px;
    background:linear-gradient(135deg, var(--gold-soft), var(--gold));
    transform:scale(0);
    transition:transform .16s ease;
}

.checkbox-row input:checked{
    border-color:rgba(198,154,87,.42);
    background:rgba(198,154,87,.14);
}

.checkbox-row input:checked::before{
    transform:scale(1);
}

.checkbox-row input:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(198,154,87,.16);
}

.turnstile-box{
    display:flex;
    justify-content:flex-start;
    min-height:66px;
    max-width:100%;
    overflow:hidden;
    pointer-events:none;
    touch-action:pan-y;
}

.turnstile-box[data-widget-rendered="1"]{
    pointer-events:auto;
    touch-action:auto;
}

.auth-recovery-note{
    margin-top:6px;
}

.page-sections{
    display:grid;
    gap:24px;
}

.download-page{display:grid;gap:24px}
.download-section{padding:24px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(180deg,rgba(34,23,20,.9),rgba(18,12,10,.94));box-shadow:0 18px 50px rgba(0,0,0,.24)}
.download-section-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.download-section-head h2{margin:0 0 6px;color:var(--text);font-size:22px}
.download-section-head p{margin:0;color:var(--muted);line-height:1.55}
.download-section-mark{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border:1px solid rgba(198,154,87,.28);border-radius:6px;background:rgba(198,154,87,.1);color:var(--gold-soft);font-weight:900}
.download-requirements-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.download-requirement-card,.download-item-card{border:1px solid var(--border);border-radius:7px;background:linear-gradient(180deg,rgba(48,31,26,.72),rgba(27,19,17,.84));transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.download-requirement-card:hover,.download-item-card:hover{border-color:rgba(198,154,87,.36);box-shadow:inset 0 0 28px rgba(198,154,87,.08),0 12px 28px rgba(0,0,0,.2);transform:translateY(-2px)}
.download-requirement-card{display:flex;align-items:flex-start;gap:14px;padding:18px}
.download-requirement-card img,.download-item-title img{width:24px;height:24px;filter:invert(74%) sepia(27%) saturate(751%) hue-rotate(357deg) brightness(90%)}
.download-requirement-card h3,.download-item-card h3{margin:0;color:var(--text);font-size:14px;text-transform:uppercase}
.download-requirement-card p,.download-item-card p{margin:7px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.download-items-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.download-item-card{display:flex;flex-direction:column;gap:18px;padding:20px}
.download-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.download-item-top>span{color:var(--muted);font-size:11px;text-transform:uppercase;text-align:right}
.download-item-title{display:flex;align-items:center;gap:11px;min-width:0}
.download-item-card .btn{align-self:flex-start;min-width:140px;margin-top:auto}
.download-empty{grid-column:1/-1;padding:22px;border:1px dashed var(--border);border-radius:7px;color:var(--muted);text-align:center}
@media(max-width:1000px){.download-requirements-grid,.download-items-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.download-section{padding:18px}.download-requirements-grid,.download-items-grid{grid-template-columns:1fr}.download-item-top{flex-direction:column}.download-item-top>span{text-align:left}.download-item-card .btn{width:100%}}
@media(max-width:372px){
    .download-page{gap:16px}
    .download-section{min-width:0;padding:14px}
    .download-section-head{gap:10px}
    .download-section-mark{width:34px;height:34px;font-size:12px}
    .download-section-head>div,.download-requirement-card>div,.download-item-title{min-width:0}
    .download-section-head h2{font-size:18px;overflow-wrap:anywhere}
    .download-section-head p,.download-requirement-card p,.download-item-card p{font-size:13px;overflow-wrap:anywhere}
    .download-requirement-card,.download-item-card{min-width:0;padding:14px}
    .download-requirement-card{gap:10px}
    .download-requirement-card h3,.download-item-card h3{overflow-wrap:anywhere}
    .download-item-card .btn{min-width:0;padding-left:12px;padding-right:12px}
}

.section-head{
    margin-bottom:18px;
}

.section-head h2{
    margin:0 0 8px;
    font-size:24px;
    color:var(--text);
}

.section-head p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.table-wrap{
    width:100%;
    overflow-x:auto;
}

.download-table{
    width:100%;
    border-collapse:collapse;
    min-width:640px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
}

.download-table thead th{
    text-align:left;
    font-size:14px;
    font-weight:700;
    color:var(--gold-soft);
    background:rgba(255,255,255,.03);
    padding:16px 18px;
    border-bottom:1px solid var(--border);
}

.download-table tbody td{
    padding:16px 18px;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:var(--text);
    vertical-align:middle;
}

.download-table tbody tr:last-child td{
    border-bottom:none;
}

.download-table tbody tr:hover{
    background:rgba(255,255,255,.025);
}

.download-table td:first-child,
.download-table th:first-child{
    width:72px;
    text-align:center;
}

.download-table td:last-child,
.download-table th:last-child{
    width:180px;
}

.btn-download{
    min-width:140px;
}

.download-note{
    margin:18px 0 0;
    color:var(--muted);
    line-height:1.6;
    font-size:14px;
}

@media (max-width: 768px){
    .table-wrap{
        overflow:visible;
    }

    .download-table{
        min-width:unset;
        border:none;
        background:transparent;
    }

    .download-table thead{
        display:none;
    }

    .download-table tbody{
        display:flex;
        flex-direction:column;
        gap:14px;
    }

    .download-table tbody tr{
        display:flex;
        flex-direction:column;
        gap:12px;
        padding:16px;
        background:rgba(255,255,255,.03);
        border:1px solid var(--border);
        border-radius:16px;
    }

    .download-table tbody td{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        padding:0;
        border:none;
        width:100%;
        text-align:left !important;
    }

    .download-table tbody td:first-child{
        display:none;
    }

    .download-table tbody td:last-child{
        justify-content:stretch;
        margin-top:25px;
        width:100%;
    }

    .download-table tbody td:last-child .btn-download{
        width:100%;
    }

    .download-table tbody td::before{
        content:attr(data-label);
        font-size:13px;
        font-weight:700;
        color:var(--gold-soft);
        flex-shrink:0;
    }
}

.auth-modal-open{
    overflow:hidden;
}

.auth-modal-overlay{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(7,10,18,.88);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.auth-modal-overlay[hidden]{
    display:none !important;
}

.auth-modal{
    position:relative;
    width:min(100%, 520px);
    padding:28px;
    border-radius:24px;
    border:1px solid rgba(198,154,87,.22);
    background:
        radial-gradient(circle at top, rgba(198,154,87,.14), transparent 38%),
        linear-gradient(180deg, rgba(19,24,38,.96), rgba(12,16,27,.98));
    box-shadow:
        0 24px 80px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.03) inset;
    transform:translateZ(0);
    contain:layout paint;
}

.auth-modal-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid rgba(198,154,87,.24);
    background:rgba(198,154,87,.10);
    color:var(--gold-soft);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.auth-modal-title{
    margin:0 0 12px;
    color:var(--text);
    font-size:28px;
    line-height:1.2;
}

.auth-modal-text{
    margin:0;
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
}

.auth-modal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:26px;
}

.auth-modal-secondary{
    justify-content:center;
}

.auth-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    transition:all .2s ease;
}

.auth-modal-close:hover{
    border-color:rgba(198,154,87,.35);
    background:rgba(198,154,87,.10);
    color:var(--gold-soft);
}

@media (max-width: 640px){
    .auth-modal{
        padding:22px;
        border-radius:20px;
    }

    .auth-modal-title{
        font-size:23px;
    }

    .auth-modal-actions{
        grid-template-columns:1fr;
    }
}

.account-card{
    overflow:hidden;
}

.account-tabs{
    display:grid;
    gap:24px;
}

.account-tab-input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.account-tab-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:22px;
    background:rgba(255,255,255,.03);
}

.account-tab-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border-radius:16px;
    color:var(--muted);
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.account-tab-link:hover{
    color:var(--text);
    background:rgba(255,255,255,.04);
}

#account-tab-info:checked ~ .account-tab-nav label[for="account-tab-info"],
#account-tab-security:checked ~ .account-tab-nav label[for="account-tab-security"],
#account-tab-purchases:checked ~ .account-tab-nav label[for="account-tab-purchases"]{
    border:1px solid rgba(198,154,87,.24);
    background:rgba(198,154,87,.12);
    color:var(--gold-soft);
}

.account-tab-panels{
    min-width:0;
}

.account-tab-panel{
    display:none;
}

#account-tab-info:checked ~ .account-tab-panels .account-tab-panel--info,
#account-tab-security:checked ~ .account-tab-panels .account-tab-panel--security,
#account-tab-purchases:checked ~ .account-tab-panels .account-tab-panel--purchases{
    display:grid;
    gap:24px;
}

.account-card-body{
    padding:28px;
}

.account-overview{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.account-profile{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}

.account-avatar{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:linear-gradient(135deg, rgba(198,154,87,.22), rgba(198,154,87,.08));
    border:1px solid rgba(198,154,87,.22);
    color:var(--gold-soft);
    font-size:28px;
    font-weight:800;
}

.account-profile-copy{
    min-width:0;
}

.account-profile-copy h2{
    margin:0;
    color:var(--text);
    font-size:28px;
    line-height:1.2;
}

.account-profile-copy p{
    margin:6px 0 0;
    color:var(--muted);
    word-break:break-word;
}

.account-eyebrow{
    display:inline-block;
    margin-bottom:8px;
    color:var(--gold-soft);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.account-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
}

.account-badge,
.account-summary-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-size:13px;
    font-weight:700;
}

.account-badge--accent{
    border-color:rgba(198,154,87,.22);
    background:rgba(198,154,87,.10);
    color:var(--gold-soft);
}

.account-stats-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.account-stat-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:168px;
    padding:22px;
    border-radius:20px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
}

.account-stat-card--coins{
    justify-content:space-between;
}

.account-stat-label,
.character-label,
.character-stat span{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.account-stat-value{
    color:var(--text);
    font-size:32px;
    line-height:1.15;
}

.account-stat-value--small{
    font-size:22px;
    word-break:break-word;
}

.account-stat-meta{
    color:var(--muted);
    line-height:1.6;
}

.account-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.account-summary-pills{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
}

.account-empty-state{
    padding:28px;
    border-radius:20px;
    border:1px dashed rgba(255,255,255,.12);
    background:rgba(255,255,255,.02);
}

.account-empty-state h3{
    margin:0 0 8px;
    color:var(--text);
    font-size:22px;
}

.account-empty-state p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.remote-data-state{
    padding:18px 20px;
    border-radius:18px;
    border:1px solid rgba(198,154,87,.14);
    background:rgba(255,255,255,.03);
    color:var(--muted);
    line-height:1.7;
}

.remote-data-state--loading,
.remote-inline-loading{
    display:flex;
    align-items:center;
    gap:12px;
}

.remote-data-spinner{
    width:24px;
    height:24px;
    border-radius:999px;
    border:3px solid rgba(198,154,87,.16);
    border-top-color:var(--gold-soft);
    animation:remoteDataSpin .9s linear infinite;
    flex-shrink:0;
}

.remote-inline-loading .remote-data-spinner{
    width:18px;
    height:18px;
    border-width:2px;
}

@keyframes remoteDataSpin{
    to{
        transform:rotate(360deg);
    }
}

.remote-data-state.is-error{
    border-color:rgba(212,111,111,.2);
    background:rgba(160,33,33,.12);
    color:#ffd5d5;
}

.account-characters-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.character-card{
    padding:22px;
    border-radius:22px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
}

.character-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.character-card-top h3{
    margin:6px 0 0;
    color:var(--text);
    font-size:24px;
    line-height:1.2;
    word-break:break-word;
}

.character-level-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(198,154,87,.22);
    background:rgba(198,154,87,.10);
    color:var(--gold-soft);
    font-weight:800;
    white-space:nowrap;
}

.character-stats-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.character-stat{
    display:grid;
    gap:8px;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
}

.character-stat strong{
    color:var(--text);
    font-size:16px;
    line-height:1.4;
    word-break:break-word;
}

.account-panels-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}

.account-panel-card{
    height:100%;
}

.account-panel-head{
    margin-bottom:20px;
}

.account-form-note{
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:var(--muted);
    line-height:1.6;
    font-size:14px;
}

.account-form-actions{
    display:flex;
    justify-content:flex-start;
    gap:12px;
}

.account-form-note, .form-feedback{
    margin-bottom: 15px;
}

.account-purchase-table-wrap{
    overflow:auto;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.02);
}

.account-purchase-tabs{
    display:grid;
    gap:18px;
}

.account-purchase-tab-input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.account-purchase-tab-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.025);
}

.account-purchase-tab-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 16px;
    border-radius:14px;
    color:var(--muted);
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.account-purchase-tab-link:hover{
    color:var(--text);
    background:rgba(255,255,255,.04);
}

#account-purchase-tab-coins:checked ~ .account-purchase-tab-nav label[for="account-purchase-tab-coins"],
#account-purchase-tab-premium:checked ~ .account-purchase-tab-nav label[for="account-purchase-tab-premium"]{
    border:1px solid rgba(198,154,87,.24);
    background:rgba(198,154,87,.12);
    color:var(--gold-soft);
}

.account-purchase-tab-panel{
    display:none;
}

#account-purchase-tab-coins:checked ~ .account-purchase-tab-panels .account-purchase-tab-panel--coins,
#account-purchase-tab-premium:checked ~ .account-purchase-tab-panels .account-purchase-tab-panel--premium{
    display:block;
}

.account-purchase-table{
    width:100%;
    border-collapse:collapse;
    min-width:620px;
}

.account-purchase-table th,
.account-purchase-table td{
    padding:16px 18px;
    border-bottom:1px solid rgba(255,255,255,.06);
    text-align:left;
}

.account-purchase-table th{
    color:var(--gold-soft);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:rgba(198,154,87,.06);
}

.account-purchase-table td{
    color:var(--muted);
}

.account-purchase-table td strong{
    color:#98f0aa;
}

.account-purchase-table tr:last-child td{
    border-bottom:0;
}

.text-success{
    color:#98f0aa !important;
}

.text-muted-soft{
    color:var(--muted) !important;
}

[data-auth-dialog][hidden]{
    display:none !important;
}

.auth-modal--wide{
    width:min(100%, 560px);
}

.auth-modal-header{
    padding-right:30px;
}

.auth-modal-header p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
}

.auth-modal-note{
    margin-top:4px;
}

.auth-inline-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:4px;
}

.auth-text-button{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:12px 16px;
    border:1px solid rgba(198,154,87,.28);
    border-radius:14px;
    background:rgba(255,255,255,.02);
    color:var(--gold-soft);
    font:inherit;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
    transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    font-size: 0.8em;
}

.auth-text-button:hover{
    border-color:rgba(198,154,87,.42);
    background:rgba(198,154,87,.08);
    color:var(--text);
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.auth-text-button:focus-visible{
    outline:none;
    border-color:rgba(198,154,87,.42);
    box-shadow:0 0 0 3px rgba(198,154,87,.14);
}

.auth-text-button:active{
    transform:translateY(0);
}

.login-inline-row{
    display:grid;
    grid-template-columns:minmax(220px, 220px) minmax(0, 1fr);
    align-items:start;
    gap:16px;
}

.login-remember-box{
    width:100%;
    min-height:66px;
    justify-content:flex-start;
}

.login-turnstile-group{
    margin:0;
}

.login-turnstile-group .turnstile-box{
    min-height:66px;
    align-items:flex-start;
}

.auth-loading-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(8,8,10,.88);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.auth-effects-enhanced .auth-modal-overlay{
    background:rgba(7,10,18,.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.auth-effects-enhanced .auth-loading-overlay{
    background:rgba(8,8,10,.72);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.auth-loading-box{
    width:min(100%, 420px);
    padding:28px 24px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg, rgba(34,26,18,.96), rgba(20,15,11,.96));
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    text-align:center;
    transform:translateZ(0);
    contain:layout paint;
}

.auth-loading-spinner{
    width:54px;
    height:54px;
    margin:0 auto 18px;
    border-radius:50%;
    border:4px solid rgba(255,255,255,.12);
    border-top-color:var(--gold);
    animation:authSpin .85s linear infinite;
}

.auth-loading-title{
    margin:0 0 10px;
    color:var(--text);
    font-size:24px;
    line-height:1.2;
}

.auth-loading-text{
    margin:0;
    color:var(--muted);
    line-height:1.6;
    font-size:15px;
}

.auth-loading-overlay[hidden]{
    display:none !important;
}

@keyframes authSpin{
    to{
        transform:rotate(360deg);
    }
}

.ranking-layout{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:24px;
    align-items:start;
}

.ranking-sidebar{
    position:sticky;
    top:110px;
}

.ranking-sidebar-head{
    margin-bottom:18px;
}

.ranking-sidebar-head h2{
    margin:0 0 8px;
    color:var(--text);
    font-size:22px;
}

.ranking-sidebar-head p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.ranking-mobile-select{
    display:none;
    margin-bottom:16px;
}

.ranking-category-list{
    display:grid;
    gap:10px;
}

.ranking-category-button{
    width:100%;
    text-align:left;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--text);
    border-radius:16px;
    padding:14px 16px;
    cursor:pointer;
    transition:.2s ease;
    display:grid;
    gap:4px;
}

.ranking-category-button:hover,
.ranking-category-button[aria-current="true"]{
    border-color:rgba(198,154,87,.35);
    background:rgba(198,154,87,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.ranking-category-button small{
    color:var(--muted);
    font-size:12px;
}

.ranking-main{
    display:grid;
    gap:24px;
}

.ranking-toolbar-body{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

.ranking-current-title{
    margin:0 0 8px;
    color:var(--text);
    font-size:26px;
}

.ranking-current-subtitle{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.ranking-search{
    width:min(100%, 360px);
}

.ranking-table-wrap{
    width:100%;
    overflow-x:auto;
}

.ranking-table{
    width:100%;
    border-collapse:collapse;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:rgba(255,255,255,.02);
}

.ranking-table th,
.ranking-table td{
    padding:16px 18px;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:var(--text);
    text-align:left;
    vertical-align:middle;
}

.ranking-table th{
    color:var(--gold-soft);
    font-size:14px;
    font-weight:700;
    background:rgba(255,255,255,.03);
}

.ranking-table tbody tr:hover{
    background:rgba(255,255,255,.025);
}

.ranking-table tbody tr:last-child td{
    border-bottom:none;
}

.ranking-table th:first-child,
.ranking-table td:first-child{
    width:72px;
    text-align:center;
}

.ranking-empty{
    margin-top:18px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    color:var(--muted);
    text-align:center;
    background:rgba(255,255,255,.03);
}

.ranking-feedback{
    margin-bottom:18px;
    border-radius:14px;
    padding:14px 16px;
    font-weight:600;
    border:1px solid transparent;
}

.ranking-feedback.is-error{
    color:#ffd5d5;
    background:rgba(160,33,33,.18);
    border-color:rgba(212,111,111,.25);
}

.ranking-pagination{
    margin-top:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.ranking-pagination-pages{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
}

.ranking-page-button{
    min-width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--text);
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
    padding:0 10px;
    flex:0 0 auto;
}

.ranking-page-button:hover,
.ranking-page-button.is-active{
    border-color:rgba(198,154,87,.35);
    background:rgba(198,154,87,.12);
}

@media (max-width: 991px){
    .ranking-layout{
        grid-template-columns:1fr;
    }

    .ranking-sidebar{
        position:static;
    }

    .ranking-mobile-select{
        display:block;
    }

    .ranking-category-list{
        display:none;
    }
}

@media (max-width: 768px){
    .ranking-toolbar-body{
        align-items:stretch;
    }

    .ranking-search{
        width:100%;
    }

    .ranking-table{
        min-width:640px;
    }

        .ranking-pagination{
        flex-wrap:nowrap;
        gap:6px;
        justify-content:center;
    }

    .ranking-pagination .btn{
        min-width:36px;
        height:36px;
        padding:0 10px;
        border-radius:10px;
        flex:0 0 auto;
    }

    .ranking-pagination-pages{
        flex-wrap:nowrap;
        gap:4px;
        overflow:hidden;
    }

    .ranking-page-button{
        min-width:34px;
        height:34px;
        padding:0 6px;
        border-radius:10px;
        font-size:13px;
    }
}

.ranking-position-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-weight:800;
}

.ranking-row-top td{
    font-weight:700;
}

.ranking-row-top-1{
    background:rgba(255, 215, 0, .10);
}

.ranking-row-top-2{
    background:rgba(192, 192, 192, .10);
}

.ranking-row-top-3{
    background:rgba(205, 127, 50, .12);
}

.ranking-position-badge.is-top-1{
    border-color:rgba(255, 215, 0, .45);
    background:rgba(255, 215, 0, .18);
    color:#ffe27a;
}

.ranking-position-badge.is-top-2{
    border-color:rgba(192, 192, 192, .45);
    background:rgba(192, 192, 192, .16);
    color:#f1f1f1;
}

.ranking-position-badge.is-top-3{
    border-color:rgba(205, 127, 50, .45);
    background:rgba(205, 127, 50, .18);
    color:#f2bf8a;
}

.ranking-toolbar-body{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

.ranking-toolbar-meta{
    min-width:0;
    flex:1 1 320px;
}

.ranking-toolbar-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    flex:0 1 360px;
    width:min(100%, 360px);
}

.ranking-current-title{
    margin:0 0 8px;
    color:var(--text);
    font-size:26px;
}

.ranking-current-subtitle{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.ranking-search{
    width:100%;
}

.ranking-reset-timer{
    display:inline-flex;
    align-items:center;
    justify-content: space-between;
    gap:8px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(198,154,87,.22);
    background:rgba(198,154,87,.08);
    color:var(--gold-soft);
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    width:100%;
    text-align:right;
}

.ranking-reset-timer strong{
    color:var(--text);
    font-weight:800;
}

@media (max-width: 1235px){
    .ranking-toolbar-body{
        align-items:stretch;
    }

    .ranking-toolbar-actions{
        width:100%;
        flex:1 1 100%;
        align-items:stretch;
    }

    .ranking-reset-timer{
        width:100%;
        justify-content:space-between;
        text-align:left;
    }

    .ranking-search{
        width:100%;
    }

    .ranking-table{
        min-width:640px;
    }
}

.ranking-board-switch{
    margin-top:20px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.ranking-board-button{
    min-width:140px;
    height:46px;
    padding:0 18px;
    border-radius:14px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--text);
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.ranking-board-button:hover,
.ranking-board-button[aria-current="true"]{
    border-color:rgba(198,154,87,.35);
    background:rgba(198,154,87,.12);
}

.ranking-layout.is-guild-mode{
    grid-template-columns:minmax(0,1fr);
}

.ranking-layout.is-guild-mode .ranking-sidebar{
    display:none;
}

@media (max-width: 768px){
    .ranking-board-switch{
        gap:10px;
    }

    .ranking-board-button{
        flex:1 1 0;
        min-width:0;
    }
}

.shop-switch{
    display:flex;
    gap:12px;
    margin-bottom:24px;
    flex-wrap:wrap;
}

.shop-panel{
    overflow:visible;
}

.shop-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:24px;
    flex-wrap:wrap;
}

.shop-panel-head h2{
    margin:0 0 8px;
    color:var(--text);
    font-size:28px;
}

.shop-panel-head p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.shop-provider-badge,
.shop-balance-card{
    min-width:220px;
    padding:16px 18px;
    border-radius:18px;
    border:1px solid rgba(198,154,87,.22);
    background:rgba(255,255,255,.03);
    display:grid;
    gap:4px;
}

.shop-provider-badge span,
.shop-balance-card span{
    font-size:13px;
    color:var(--muted);
}

.shop-provider-badge strong,
.shop-balance-card strong{
    color:var(--text);
    font-size:22px;
    font-weight:800;
}

.shop-package-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.shop-premium-flow .shop-package-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.shop-package-card{
    position:relative;
    border:1px solid var(--border);
    border-radius:22px;
    background:rgba(255,255,255,.025);
    padding:22px;
    display:grid;
    gap:18px;
    transition:.2s ease;
}

.shop-package-card:hover{
    border-color:rgba(198,154,87,.35);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.shop-package-card.is-featured{
    border-color:rgba(198,154,87,.35);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.shop-package-badge{
    position:absolute;
    top:14px;
    right:14px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(198,154,87,.18);
    border:1px solid rgba(198,154,87,.28);
    color:var(--gold-soft);
    font-size:12px;
    font-weight:800;
}

.shop-package-coins{
    display:grid;
    gap:6px;
}

.shop-package-old{
    color:var(--muted);
    text-decoration:line-through;
    font-size:15px;
}

.shop-package-main{
    color:var(--text);
    font-size:34px;
    font-weight:900;
    line-height:1.1;
}

.shop-package-sub{
    color:#9bc34b;
    font-weight:700;
}

.shop-package-price{
    color:var(--gold-soft);
    font-size:28px;
    font-weight:900;
}

.shop-package-promo{
    padding:10px 12px;
    border-radius:12px;
    background:rgba(155,195,75,.10);
    border:1px solid rgba(155,195,75,.20);
    color:#b8db69;
    font-size:14px;
    font-weight:700;
}

.shop-buy-button{
    width:100%;
}

.shop-premium-flow{
    display:grid;
    gap:22px;
}

.shop-premium-steps{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(220px, .8fr);
    gap:12px;
    align-items:stretch;
    padding:10px;
    border:1px solid var(--border);
    border-radius:22px;
    background:rgba(255,255,255,.03);
}

.shop-premium-step{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:12px 14px;
    border:1px solid transparent;
    border-radius:16px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    text-align:left;
    transition:.2s ease;
}

.shop-premium-step:disabled{
    cursor:not-allowed;
    opacity:.55;
}

.shop-premium-step:not(:disabled):hover,
.shop-premium-step.is-active{
    border-color:rgba(198,154,87,.28);
    background:rgba(198,154,87,.10);
    color:var(--text);
}

.shop-premium-step span{
    width:32px;
    height:32px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:1px solid rgba(198,154,87,.24);
    color:var(--gold-soft);
    font-weight:900;
}

.shop-premium-step strong{
    font-size:14px;
}

.shop-premium-selected{
    display:grid;
    gap:4px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}

.shop-premium-selected span,
.shop-premium-package-summary span{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.shop-premium-selected strong,
.shop-premium-package-summary strong{
    color:var(--text);
    font-size:18px;
}

.shop-premium-step-panel{
    display:none;
}

.shop-premium-step-panel.is-active{
    display:block;
}

.shop-premium-intro-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(280px, .65fr);
    gap:18px;
    align-items:start;
}

.shop-character-card,
.shop-premium-benefits,
.shop-premium-package-summary{
    padding:22px;
    border-radius:22px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.025);
}

.shop-premium-section-head{
    margin-bottom:18px;
}

.shop-premium-section-head h3,
.shop-premium-benefits h3{
    margin:0 0 8px;
    color:var(--text);
    font-size:24px;
}

.shop-premium-section-head p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.shop-character-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-top:16px;
}

.shop-character-option{
    display:grid;
    gap:8px;
    min-height:128px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.03);
    color:var(--text);
    cursor:pointer;
    text-align:left;
    transition:.2s ease;
}

.shop-character-option:hover,
.shop-character-option.is-active{
    border-color:rgba(198,154,87,.46);
    background:rgba(198,154,87,.08);
    box-shadow:0 18px 42px rgba(198,154,87,.08);
}

.shop-character-option span{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.shop-character-option strong{
    color:var(--text);
    font-size:22px;
    line-height:1.2;
    word-break:break-word;
}

.shop-character-option small{
    color:var(--gold-soft);
    font-weight:800;
}

.shop-premium-flow-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:18px;
}

.shop-premium-benefits ul{
    display:grid;
    gap:12px;
    margin:16px 0 0;
    padding:0;
    list-style:none;
}

.shop-premium-benefits li{
    position:relative;
    padding-left:24px;
    color:var(--muted);
    line-height:1.65;
}

.shop-premium-benefits li::before{
    content:"";
    position:absolute;
    top:.72em;
    left:0;
    width:8px;
    height:8px;
    border-radius:999px;
    background:var(--gold-soft);
    box-shadow:0 0 18px rgba(198,154,87,.3);
}

.shop-premium-benefits-featured{
    padding:30px;
}

.shop-premium-benefits-featured h3{
    font-size:32px;
    line-height:1.18;
}

.shop-premium-benefits-featured ul{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    margin-top:22px;
}

.shop-premium-benefits-featured li{
    padding:16px 18px 16px 42px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
    color:var(--text);
}

.shop-premium-benefits-featured li::before{
    top:24px;
    left:20px;
}

.shop-premium-package-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.shop-premium-package-summary > div{
    display:grid;
    gap:4px;
}

.shop-premium-prices{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.shop-premium-price-box{
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    display:grid;
    gap:6px;
}

.shop-premium-price-box span{
    color:var(--muted);
    font-size:13px;
}

.shop-premium-price-box strong{
    color:var(--text);
    font-size:22px;
    font-weight:800;
}

.shop-premium-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.shop-premium-form{
    display:grid;
    gap:12px;
}

.shop-empty-state{
    grid-column:1 / -1;
    padding:24px;
    text-align:center;
    border:1px solid var(--border);
    border-radius:18px;
    color:var(--muted);
    background:rgba(255,255,255,.02);
}

.shop-status-card{
    max-width:900px;
    margin:0 auto;
}

.shop-status-body{
    display:flex;
    align-items:flex-start;
    gap:24px;
}

.shop-status-icon{
    width:74px;
    height:74px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    font-weight:900;
    flex:0 0 auto;
}

.shop-status-icon.is-success{
    background:rgba(120, 180, 90, .12);
    border:1px solid rgba(120, 180, 90, .25);
    color:#a6d67c;
}

.shop-status-icon.is-cancel{
    background:rgba(214,106,106,.12);
    border:1px solid rgba(214,106,106,.25);
    color:#f0a2a2;
}

.shop-status-content{
    display:grid;
    gap:16px;
}

.shop-status-content h2{
    margin:0;
    color:var(--text);
    font-size:30px;
}

.shop-status-content p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
}

.shop-status-note{
    padding:16px 18px;
    border-radius:16px;
    border:1px solid rgba(198,154,87,.18);
    background:rgba(255,255,255,.03);
    display:grid;
    gap:4px;
}

.shop-status-note[hidden]{
    display:none;
}

.shop-status-note strong{
    color:var(--text);
}

.shop-status-note span{
    color:var(--muted);
}

.shop-payment-summary{
    display:grid;
    gap:10px;
    padding:16px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}

.shop-payment-summary-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.shop-payment-summary-row:last-child{
    border-bottom:0;
}

.shop-payment-summary-row span{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.shop-payment-summary-row strong{
    color:var(--text);
    text-align:right;
    word-break:break-word;
}

.shop-payment-summary-row--coins strong{
    color:#98f0aa;
}

.shop-status-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media (max-width: 1100px){
    .shop-package-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .shop-premium-actions{
        grid-template-columns:1fr;
    }
}

@media (max-width: 768px){
    .shop-package-grid,
    .shop-premium-flow .shop-package-grid{
        grid-template-columns:1fr;
    }

    .shop-panel-head{
        flex-direction:column;
    }

    .shop-provider-badge,
    .shop-balance-card{
        width:100%;
        min-width:0;
    }

    .shop-premium-prices{
        grid-template-columns:1fr;
    }

    .shop-status-body{
        flex-direction:column;
    }

    .shop-status-actions{
        flex-direction:column;
    }

    .shop-status-actions .btn{
        width:100%;
    }

    .shop-payment-summary-row{
        flex-direction:column;
        gap:6px;
    }

    .shop-payment-summary-row strong{
        text-align:left;
    }
}

.shop-layout{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:24px;
    align-items:start;
}

.shop-methods-card{
    position:sticky;
    top:110px;
    height: 100%;
}

.shop-methods-head{
    margin-bottom:18px;
}

.shop-methods-head h3{
    margin:0 0 8px;
    color:var(--text);
    font-size:22px;
}

.shop-methods-head p{
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.shop-method-list{
    display:grid;
    gap:10px;
}

.shop-method-button{
    width:100%;
    text-align:left;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--text);
    border-radius:16px;
    padding:14px 16px;
    cursor:default;
    transition:.2s ease;
    display:flex;
    align-items:center;
    gap:12px;
}

.shop-method-button.is-active{
    border-color:rgba(198,154,87,.35);
    background:rgba(198,154,87,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.shop-method-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(198,154,87,.16);
    border:1px solid rgba(198,154,87,.26);
    color:var(--gold-soft);
    font-weight:900;
}

.shop-method-text{
    display:grid;
    gap:2px;
}

.shop-method-text strong{
    color:var(--text);
    font-size:15px;
}

.shop-method-text small{
    color:var(--muted);
    font-size:12px;
}

.shop-main{
    min-width:0;
}

.shop-character-card{
    margin-bottom:20px;
}

@media (max-width: 991px){
    .shop-layout{
        grid-template-columns:1fr;
    }

    .shop-methods-card{
        position:static;
    }
}

.shop-hero-switch{
    margin-top:20px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.shop-hero-switch-button{
    min-width:140px;
    height:46px;
    padding:0 18px;
    border-radius:14px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--text);
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.2s ease;
}

.shop-hero-switch-button:hover,
.shop-hero-switch-button.is-active{
    border-color:rgba(198,154,87,.35);
    background:rgba(198,154,87,.12);
}

@media (max-width: 768px){
    .shop-hero-switch{
        gap:10px;
    }

    .shop-hero-switch-button{
        flex:1 1 0;
        min-width:0;
    }
}