/* =========================================================
   JKT48 SONG SORTER
   ========================================================= */

:root{
    --ss-font:'Press Start 2P',monospace;
    --ss-bg:#080b12;
    --ss-bg2:#111827;
    --ss-panel:rgba(15,23,42,.78);
    --ss-panel2:rgba(255,255,255,.045);
    --ss-text:#f8fafc;
    --ss-muted:#9ca3af;
    --ss-dim:#64748b;
    --ss-cyan:#00ffff;
    --ss-pink:#ff0080;
    --ss-gold:#ffe600;
    --ss-green:#4ade80;
    --ss-red:#ff5252;
    --ss-line:rgba(255,255,255,.12);
}

[data-theme="light"]{
    --ss-bg:#249d8f;
    --ss-bg2:#1d887d;
    --ss-panel:rgba(16,70,68,.52);
    --ss-panel2:rgba(255,255,255,.08);
    --ss-text:#fff8e8;
    --ss-muted:rgba(255,248,232,.72);
    --ss-dim:rgba(255,248,232,.48);
    --ss-line:rgba(255,255,255,.19);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100svh;
    overflow-x:hidden;
    font-family:var(--ss-font);
    color:var(--ss-text);
    background:
        radial-gradient(circle at 50% 12%,rgba(0,255,255,.07),transparent 32%),
        radial-gradient(circle at 20% 70%,rgba(255,0,128,.05),transparent 30%),
        linear-gradient(180deg,var(--ss-bg2),var(--ss-bg));
    transition:background .35s,color .35s;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.18;
    background-image:
        radial-gradient(1px 1px at 10% 20%,#fff 50%,transparent 52%),
        radial-gradient(1px 1px at 75% 30%,var(--ss-cyan) 50%,transparent 52%),
        radial-gradient(1px 1px at 30% 75%,var(--ss-pink) 50%,transparent 52%),
        radial-gradient(1px 1px at 85% 85%,#fff 50%,transparent 52%);
    background-size:170px 170px,230px 230px,260px 260px,310px 310px;
}

button,input{font-family:var(--ss-font)}
button{-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
.no-scroll{overflow:hidden!important}

.app{position:relative;z-index:1;width:100%;min-height:100svh}

.home-screen,.filter-screen,.quickpick-screen,.battle-screen,.result-screen{
    width:min(100% - 28px,720px);
    min-height:100svh;
    margin:0 auto;
    padding:92px 0 46px;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.sorter-nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:900;
    height:64px;
    padding:0 18px;
    display:grid;
    grid-template-columns:48px 1fr 48px;
    align-items:center;
    background:linear-gradient(180deg,rgba(8,11,18,.96),rgba(8,11,18,.76),transparent);
    transition:opacity .25s,transform .25s;
}

[data-theme="light"] .sorter-nav{
    background:linear-gradient(180deg,rgba(36,157,143,.96),rgba(36,157,143,.76),transparent);
}

.sorter-nav.reveal-hidden{
    opacity:0;
    transform:translateY(-100%);
    pointer-events:none;
}

.sorter-nav-title{
    text-align:center;
    font-size:8px;
    color:var(--ss-muted);
    letter-spacing:1.4px;
}

.sorter-nav-btn{
    width:42px;
    height:42px;
    padding:0;
    border:1px solid var(--ss-line);
    border-radius:13px;
    background:rgba(255,255,255,.045);
    color:var(--ss-text);
    cursor:pointer;
}

.sorter-back-btn{font-size:19px}

.sorter-menu-btn{
    justify-self:end;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.sorter-menu-btn span{
    width:17px;
    height:2px;
    border-radius:2px;
    background:var(--ss-text);
}

.sorter-menu{
    position:fixed;
    z-index:950;
    top:57px;
    right:16px;
    width:min(270px,calc(100vw - 32px));
    padding:8px;
    border:1px solid var(--ss-line);
    border-radius:17px;
    background:rgba(8,11,18,.97);
    box-shadow:0 16px 50px rgba(0,0,0,.45);
    backdrop-filter:blur(18px);
}

[data-theme="light"] .sorter-menu{background:rgba(24,116,108,.97)}

.sorter-menu-inner{display:flex;flex-direction:column;gap:5px}

.sorter-menu-account{
    padding:12px 11px;
    color:var(--ss-cyan);
    font-size:6px;
    line-height:1.7;
    border-bottom:1px solid var(--ss-line);
}

.sorter-menu-item{
    width:100%;
    padding:12px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--ss-text);
    font-size:6px;
    line-height:1.6;
    text-align:left;
    cursor:pointer;
}

.sorter-menu-item:hover{background:var(--ss-panel2)}


/* =========================================================
   HOME
   ========================================================= */

.home-screen{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.sorter-home-logo{
    width:min(430px,90%);
    margin:0 auto 20px;
}

.sorter-home-logo img{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 0 14px rgba(0,255,255,.18));
}

.sorter-home-copy{
    width:min(100%,530px);
    color:var(--ss-muted);
    font-size:7px;
    line-height:2.05;
}

.sorter-home-copy p{margin:0 0 11px}

.sorter-flow-preview{
    margin:18px 0 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
    color:var(--ss-dim);
    font-size:5.5px;
}

.sorter-flow-preview span{
    padding:9px 10px;
    border:1px solid var(--ss-line);
    border-radius:10px;
    background:var(--ss-panel2);
    color:var(--ss-cyan);
}

.sorter-flow-preview b{color:var(--ss-pink)}

.start-btn{
    border:2px solid var(--ss-cyan);
    border-radius:12px;
    padding:15px 22px;
    background:rgba(0,255,255,.08);
    color:var(--ss-cyan);
    font-size:8px;
    line-height:1.5;
    cursor:pointer;
    box-shadow:4px 4px 0 rgba(0,255,255,.22),0 0 18px rgba(0,255,255,.09);
}

.start-btn:disabled{opacity:.35;cursor:not-allowed}
.home-start-btn{min-width:220px}

.home-how-btn{
    margin-top:15px;
    padding:8px 10px;
    border:0;
    background:transparent;
    color:var(--ss-muted);
    font-size:5.5px;
    cursor:pointer;
}

.home-trisha{
    width:min(100%,450px);
    margin-top:28px;
    display:grid;
    grid-template-columns:72px 1fr;
    align-items:end;
    gap:12px;
}

.home-trisha-img{display:block;width:72px;height:auto}

.home-trisha-dialog{
    padding:13px 14px;
    border:1px solid var(--ss-line);
    border-radius:16px;
    background:var(--ss-panel);
    color:var(--ss-muted);
    font-size:6px;
    line-height:1.9;
    text-align:left;
}


/* =========================================================
   FILTER
   ========================================================= */

.filter-screen{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.game-logo{
    margin:6px 0 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.game-logo-main{
    color:var(--ss-cyan);
    font-size:27px;
    line-height:1;
    text-shadow:3px 3px 0 var(--ss-pink),0 0 16px rgba(0,255,255,.35);
}

.game-logo-sub{
    margin-top:13px;
    color:var(--ss-pink);
    font-size:9px;
    letter-spacing:2px;
    text-shadow:0 0 12px rgba(255,0,128,.4);
}

.filter-title{
    margin:0 0 8px;
    color:var(--ss-gold);
    font-size:13px;
}

.filter-desc{
    margin-bottom:18px;
    color:var(--ss-muted);
    font-size:6px;
    line-height:1.9;
}

.filter-options{
    width:min(100%,480px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.filter-check{
    min-height:54px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--ss-line);
    border-radius:13px;
    background:var(--ss-panel);
    cursor:pointer;
    text-align:left;
}

.filter-check input{display:none}

.check-box{
    width:17px;
    height:17px;
    flex:0 0 17px;
    border:2px solid var(--ss-dim);
    border-radius:5px;
    position:relative;
}

.filter-check input:checked + .check-box{
    border-color:var(--ss-cyan);
    background:rgba(0,255,255,.13);
}

.filter-check input:checked + .check-box::after{
    content:"✓";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--ss-cyan);
    font-size:8px;
}

.check-label{flex:1;color:var(--ss-text);font-size:6px;line-height:1.5}
.check-count{color:var(--ss-muted);font-size:5.5px}

.filter-bulk{
    margin-top:12px;
    display:flex;
    gap:8px;
}

.filter-bulk-btn{
    padding:9px 12px;
    border:1px solid var(--ss-line);
    border-radius:9px;
    background:var(--ss-panel2);
    color:var(--ss-muted);
    font-size:5px;
    cursor:pointer;
}

.filter-info{
    width:min(100%,480px);
    min-height:63px;
    margin:16px 0;
    padding:12px;
    border:1px dashed var(--ss-line);
    border-radius:12px;
    color:var(--ss-muted);
    font-size:6px;
    line-height:1.9;
}

.filter-start-btn{min-width:210px}

.filter-trisha{
    width:min(100%,450px);
    margin-top:25px;
    display:grid;
    grid-template-columns:68px 1fr;
    gap:11px;
    align-items:end;
}

.filter-trisha-img{width:68px;height:auto}

.filter-trisha-dialog{
    padding:12px 13px;
    border:1px solid var(--ss-line);
    border-radius:15px;
    background:var(--ss-panel);
    color:var(--ss-muted);
    font-size:5.7px;
    line-height:1.9;
    text-align:left;
}


/* =========================================================
   QUICK PICK
   ========================================================= */

.quickpick-screen{max-width:620px;text-align:center}

.qp-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.qp-round{
    color:var(--ss-cyan);
    font-size:10px;
    text-shadow:0 0 8px rgba(0,255,255,.35);
}

.qp-batch{color:var(--ss-muted);font-size:6px}

.qp-instruction{
    margin-bottom:15px;
    color:var(--ss-muted);
    font-size:6px;
    line-height:1.8;
}

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

.qp-card{
    position:relative;
    overflow:hidden;
    min-width:0;
    padding:0 0 10px;
    border:2px solid var(--ss-line);
    border-radius:14px;
    background:var(--ss-panel);
    color:var(--ss-text);
    cursor:pointer;
}

.qp-card.selected{
    border-color:var(--ss-cyan);
    box-shadow:0 0 18px rgba(0,255,255,.22);
}

.qp-card.selected::after{
    content:"✓";
    position:absolute;
    top:7px;
    right:7px;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--ss-cyan);
    color:#071013;
    font-size:9px;
}

.qp-cover-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#111;
}

.qp-cover-wrap img,.qp-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.qp-title,.qp-card-title{
    min-height:44px;
    padding:10px 8px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ss-text);
    font-size:5.5px;
    line-height:1.65;
}

.qp-card-check{display:none}

.qp-preview-btn{
    position:absolute;
    left:7px;
    bottom:7px;
    width:30px;
    height:30px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:50%;
    background:rgba(0,0,0,.72);
    color:#fff;
    cursor:pointer;
    z-index:3;
}

.qp-preview-btn.playing{
    border-color:var(--ss-cyan);
    color:var(--ss-cyan);
    box-shadow:0 0 10px rgba(0,255,255,.4);
}

.qp-counter{
    margin-top:13px;
    color:var(--ss-cyan);
    font-size:6px;
}

.qp-progress-wrap{
    width:100%;
    height:7px;
    margin-top:9px;
    overflow:hidden;
    border-radius:99px;
    background:rgba(255,255,255,.07);
}

.qp-progress-fill{
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--ss-cyan),var(--ss-pink));
}

.qp-bottom-actions{
    margin-top:14px;
    display:grid;
    grid-template-columns:100px 1fr;
    gap:9px;
}

.qp-undo-btn{
    border:1px solid var(--ss-line);
    border-radius:11px;
    background:var(--ss-panel);
    color:var(--ss-muted);
    font-size:5.5px;
    cursor:pointer;
}

.qp-undo-btn:disabled{opacity:.3;cursor:not-allowed}
.qp-next-btn{width:100%}

.qp-trisha{
    width:min(100%,440px);
    margin:18px auto 0;
    display:grid;
    grid-template-columns:62px 1fr;
    gap:10px;
    align-items:end;
}

.qp-trisha-img{width:62px;height:auto}

.qp-trisha-dialog{
    padding:11px 12px;
    border:1px solid var(--ss-line);
    border-radius:14px;
    background:var(--ss-panel);
    color:var(--ss-muted);
    font-size:5.5px;
    line-height:1.85;
    text-align:left;
}


/* =========================================================
   BATTLE
   ========================================================= */

.battle-screen{
    max-width:760px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.battle-head{width:min(100%,620px);margin-bottom:14px}

.battle-counter{
    margin-bottom:9px;
    color:var(--ss-cyan);
    font-size:7px;
    text-align:center;
}

.battle-progress-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.progress-container{
    flex:1;
    height:8px;
    overflow:hidden;
    border-radius:99px;
    background:rgba(255,255,255,.07);
}

#progress-bar{
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--ss-cyan),var(--ss-pink));
}

#progress-text{
    width:38px;
    color:var(--ss-muted);
    font-size:5px;
    text-align:right;
}

.battle-question{
    margin:8px 0 18px;
    color:var(--ss-muted);
    font-size:6px;
    line-height:1.7;
    text-align:center;
}

.battle-area{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
    align-items:center;
    gap:12px;
}

.battle-card{
    min-width:0;
    overflow:hidden;
    border:2px solid var(--ss-line);
    border-radius:18px;
    background:var(--ss-panel);
    cursor:pointer;
}

.battle-cover-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#111;
}

.battle-cover-wrap img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.battle-preview-btn{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:4;
    width:39px;
    height:39px;
    border:2px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:10px;
    cursor:pointer;
}

.battle-preview-btn.playing{
    border-color:var(--ss-cyan);
    color:var(--ss-cyan);
    box-shadow:0 0 14px rgba(0,255,255,.5);
}

.battle-name{
    min-height:70px;
    padding:13px 11px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ss-text);
    font-size:6.5px;
    line-height:1.75;
    text-align:center;
    overflow-wrap:anywhere;
}

.vs-text{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    border:2px solid var(--ss-pink);
    border-radius:50%;
    color:var(--ss-pink);
    font-size:9px;
    background:rgba(255,0,128,.07);
}

.battle-actions{
    margin-top:17px;
    display:flex;
    justify-content:center;
    gap:9px;
}

.tie-btn,.undo-btn{
    min-width:112px;
    padding:11px 14px;
    border:1px solid var(--ss-line);
    border-radius:11px;
    background:var(--ss-panel);
    color:var(--ss-muted);
    font-size:5.5px;
    cursor:pointer;
}

.undo-btn:disabled{opacity:.3;cursor:not-allowed}

.battle-tip{
    margin-top:12px;
    color:var(--ss-dim);
    font-size:4.8px;
    line-height:1.7;
    text-align:center;
}


/* =========================================================
   REVEAL FULL SCREEN
   ========================================================= */

#reveal-screen{
    position:fixed!important;
    inset:0!important;
    z-index:2000!important;
    width:100vw!important;
    height:100svh!important;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#000;
    transition:background 1s ease;
}


/* COUNTDOWN */

#reveal-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    background:#000;
}

.countdown-label{
    padding:0 20px;
    color:#ffe600;
    font-size:11px;
    text-align:center;
    text-shadow:0 0 10px #ffe600,0 0 20px #ff0080;
    animation:countdownPulse 1.2s infinite;
}

.countdown-sub{
    padding:0 20px;
    color:rgba(255,255,255,.65);
    font-size:8px;
    letter-spacing:1px;
    text-align:center;
}

#timer{
    color:#00ffff;
    font-size:60px;
    text-shadow:0 0 10px #00ffff,4px 4px #ff0080;
}

@keyframes countdownPulse{
    0%,100%{opacity:.55;transform:scale(.96)}
    50%{opacity:1;transform:scale(1.04)}
}


/* BG */

#reveal-bg{
    position:fixed;
    inset:0;
    z-index:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .8s ease;
}

#reveal-bg.show{opacity:.4}

#reveal-bg img,#reveal-bg-img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(25px) brightness(.6);
    transform:scale(1.3);
}


/* CONTENT */

#reveal-content{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:min(90vw,520px);
    text-align:center;
}

#reveal-rank{
    margin-bottom:10px;
    color:gold;
    font-size:42px;
    letter-spacing:4px;
    opacity:0;
    transform:scale(.8);
    text-shadow:0 0 8px gold;
}

.reveal-title{
    max-width:300px;
    margin-top:12px;
    color:#fff;
    font-size:12px;
    line-height:1.6;
    word-break:break-word;
    text-align:center;
    opacity:0;
    transform:translateY(10px);
    text-shadow:0 0 6px #fff;
}


/* =========================================================
   ORIGINAL VINYL — LOCKED
   ========================================================= */

.vinyl-wrapper{
    position:relative;
    width:240px;
    height:240px;
    margin:0 auto 8px;
}

.vinyl-disc{
    position:relative;
    width:240px;
    height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:
        radial-gradient(circle at center,
            #111 0%,#1a1a1a 14%,#0d0d0d 15%,
            #1a1a1a 24%,#111 25%,#1a1a1a 34%,
            #0d0d0d 35%,#1a1a1a 49%,#111 50%,
            #1a1a1a 64%,#0d0d0d 65%,#1a1a1a 79%,
            #111 80%,#1a1a1a 94%,#222 100%);
    box-shadow:
        0 0 0 3px #333,
        0 0 0 6px #111,
        0 0 50px rgba(0,0,0,.9),
        inset 0 0 40px rgba(0,0,0,.5);
    opacity:0;
    transform:scale(.4);
    transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
}

.vinyl-disc.visible{opacity:1;transform:scale(1)}
.vinyl-disc.spinning{animation:vinylSpin 1.8s linear infinite}
.vinyl-disc.stopping{animation:vinylStop 2s cubic-bezier(.15,.85,.35,1) forwards}
.vinyl-disc.stopped{animation:none}

@keyframes vinylSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

@keyframes vinylStop{
    0%{transform:rotate(0)}
    50%{transform:rotate(140deg)}
    80%{transform:rotate(172deg)}
    100%{transform:rotate(180deg)}
}

.vinyl-groove{
    position:absolute;
    border:1px solid rgba(255,255,255,.025);
    border-radius:50%;
    pointer-events:none;
}

.vinyl-groove:nth-child(1){width:90%;height:90%}
.vinyl-groove.vg2{width:75%;height:75%}
.vinyl-groove.vg3{width:60%;height:60%}

.vinyl-shine{
    position:absolute;
    width:100%;
    height:100%;
    z-index:3;
    border-radius:50%;
    background:linear-gradient(135deg,transparent 28%,rgba(255,255,255,.05) 42%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.05) 58%,transparent 72%);
    pointer-events:none;
}

.vinyl-label{
    position:relative;
    z-index:2;
    width:40%;
    height:40%;
    overflow:hidden;
    border-radius:50%;
    background:#222;
    box-shadow:0 0 0 3px #444,0 0 0 5px #111,inset 0 0 12px rgba(0,0,0,.6);
}

.vinyl-label img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
}

.vinyl-hole{
    position:absolute;
    top:50%;
    left:50%;
    z-index:4;
    width:12px;
    height:12px;
    transform:translate(-50%,-50%);
    border:2px solid #444;
    border-radius:50%;
    background:#000;
}


/* TONEARM */

.vinyl-arm{
    position:absolute;
    top:-14px;
    right:-24px;
    z-index:10;
    transform-origin:12px 12px;
    transform:rotate(-30deg);
    transition:transform .9s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
}

.vinyl-arm.on-record{transform:rotate(-2deg)}

.arm-base{
    position:absolute;
    top:0;
    right:0;
    width:22px;
    height:22px;
    border:2px solid #666;
    border-radius:50%;
    background:radial-gradient(circle at 40% 35%,#888,#444);
    box-shadow:0 0 10px rgba(0,0,0,.6);
}

.arm-stick{
    position:absolute;
    top:10px;
    right:8px;
    width:5px;
    height:130px;
    border-radius:3px;
    background:linear-gradient(to bottom,#999,#555);
    transform:rotate(28deg);
    transform-origin:top center;
    box-shadow:2px 2px 6px rgba(0,0,0,.4);
}

.arm-stick::after{
    content:'';
    position:absolute;
    bottom:-8px;
    left:50%;
    width:10px;
    height:16px;
    transform:translateX(-50%);
    border:1px solid #555;
    border-radius:2px 2px 4px 4px;
    background:linear-gradient(to bottom,#666,#333);
}


/* #1 GOLD */

#reveal-screen.rank-one-mode .vinyl-disc{
    box-shadow:
        0 0 0 3px #ffd700,
        0 0 0 7px #b8860b,
        0 0 50px rgba(255,215,0,.5),
        0 0 100px rgba(255,165,0,.25),
        inset 0 0 40px rgba(255,215,0,.1);
}

#reveal-screen.rank-one-mode .vinyl-label{
    box-shadow:
        0 0 0 3px #ffd700,
        0 0 0 6px #b8860b,
        0 0 25px rgba(255,215,0,.5);
}


/* TRISHA */

.reveal-trisha{
    display:flex;
    align-items:center;
    gap:10px;
    max-width:280px;
    margin-top:14px;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.06);
}

.reveal-trisha-img{width:40px;height:auto;flex-shrink:0}

.reveal-trisha-msg{
    color:rgba(255,255,255,.75);
    font-size:8px;
    line-height:1.8;
}


/* SKIP */

#skip-countdown-btn,#skip-song-btn{
    position:fixed!important;
    left:50%!important;
    bottom:max(24px,env(safe-area-inset-bottom))!important;
    z-index:100000!important;
    min-width:170px;
    padding:12px 20px;
    transform:translateX(-50%)!important;
    border:3px solid #000;
    background:#0a0a0a;
    color:#ff4d4d;
    font-size:8px;
    letter-spacing:1px;
    cursor:pointer;
    box-shadow:
        4px 4px #000,
        0 0 0 2px #ff4d4d,
        0 0 14px rgba(255,80,80,.35);
    white-space:nowrap;
}

#skip-countdown-btn:hover,#skip-song-btn:hover{
    background:#ff4d4d;
    color:#000;
}


/* ANIMATIONS */

@keyframes rankImpact{
    0%{opacity:0;transform:scale(2.2);filter:blur(12px)}
    60%{opacity:1;transform:scale(.85);filter:blur(0)}
    100%{opacity:1;transform:scale(1)}
}

.rank-impact{animation:rankImpact .8s cubic-bezier(.22,1,.36,1) forwards}

@keyframes titleReveal{
    0%{opacity:0;transform:translateY(30px);letter-spacing:8px}
    100%{opacity:1;transform:translateY(0);letter-spacing:1px}
}

.title-reveal{animation:titleReveal .9s ease forwards}

@keyframes revealShake{
    0%{transform:translateX(0)}
    20%{transform:translateX(-4px)}
    40%{transform:translateX(4px)}
    60%{transform:translateX(-2px)}
    80%{transform:translateX(2px)}
    100%{transform:translateX(0)}
}

.reveal-shake{animation:revealShake .4s ease}

@keyframes glowPulse{
    0%,100%{filter:drop-shadow(0 0 5px gold)}
    50%{filter:drop-shadow(0 0 20px gold)}
}

.rank1-glow{animation:glowPulse 1.2s infinite}

#reveal-screen.rank-one-mode{
    background:radial-gradient(circle at center,#fff3a0 0%,#b46b00 35%,#1a0800 100%)!important;
}

#reveal-screen.rank-one-mode::before{
    content:'👑 YOUR #1 SONG 👑';
    position:absolute;
    top:50px;
    left:50%;
    z-index:20;
    width:100%;
    transform:translateX(-50%);
    color:#fff;
    font-size:10px;
    text-align:center;
    text-shadow:0 0 8px #000,0 0 18px gold;
}


/* =========================================================
   RESULT
   ========================================================= */

.result-screen{max-width:860px;min-height:100svh}

.result-header{width:100%;margin-bottom:16px}

.result-small-title{
    margin-bottom:9px;
    color:var(--ss-gold);
    font-size:8px;
    letter-spacing:1px;
}

.result-title-row{display:flex;align-items:center;gap:8px}

.ranking-name{
    flex:1;
    min-width:0;
    padding:0 0 7px;
    border:0;
    border-bottom:1px dashed var(--ss-line);
    outline:0;
    background:transparent;
    color:var(--ss-text);
    font-size:13px;
    line-height:1.7;
}

.edit-title-btn{
    width:35px;
    height:35px;
    flex:0 0 35px;
    border:1px solid var(--ss-line);
    border-radius:9px;
    background:var(--ss-panel);
    color:var(--ss-text);
    cursor:pointer;
}

.result-trisha-wrap{
    width:100%;
    margin-bottom:16px;
    padding:12px 14px;
    display:grid;
    grid-template-columns:68px 1fr;
    gap:12px;
    align-items:center;
    border:1px solid var(--ss-line);
    border-radius:16px;
    background:var(--ss-panel);
}

.result-trisha-img{
    width:68px;
    max-height:76px;
    object-fit:contain;
    border-radius:10px;
}

.result-trisha-caption{
    color:var(--ss-muted);
    font-size:6px;
    line-height:1.9;
}

.hero-top1{width:100%;margin-bottom:12px}

.top1-card{
    min-height:210px;
    padding:17px;
    display:grid;
    grid-template-columns:170px 1fr;
    gap:20px;
    align-items:center;
    border:2px solid rgba(255,230,0,.5);
    border-radius:19px;
    background:linear-gradient(135deg,rgba(255,230,0,.10),var(--ss-panel));
}

.top1-cover{width:170px;height:170px;object-fit:cover;border-radius:14px}
.top1-rank{color:var(--ss-gold);font-size:20px}
.top1-title{margin-top:13px;color:var(--ss-text);font-size:10px;line-height:1.8}

.top23-row{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.top23-card{
    min-width:0;
    padding:11px;
    display:grid;
    grid-template-columns:78px 1fr;
    gap:11px;
    align-items:center;
    border:1px solid var(--ss-line);
    border-radius:14px;
    background:var(--ss-panel);
}

.top23-cover{width:78px;height:78px;object-fit:cover;border-radius:10px}
.top23-rank{color:var(--ss-cyan);font-size:9px}
.top23-title{margin-top:7px;color:var(--ss-text);font-size:6px;line-height:1.7}

.rank-section-title{
    margin:21px 0 11px;
    color:var(--ss-muted);
    font-size:6px;
    letter-spacing:1px;
}

.rank-list{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

.rank-item{
    min-width:0;
    min-height:60px;
    padding:8px;
    display:grid;
    grid-template-columns:28px 43px minmax(0,1fr);
    gap:7px;
    align-items:center;
    border:1px solid var(--ss-line);
    border-radius:11px;
    background:var(--ss-panel);
}

.rank-number{color:var(--ss-dim);font-size:5px;text-align:center}
.rank-cover{width:43px;height:43px;object-fit:cover;border-radius:7px}
.rank-title{min-width:0;color:var(--ss-text);font-size:4.7px;line-height:1.55;overflow-wrap:anywhere}

.result-actions{
    margin-top:18px;
    display:flex;
    justify-content:center;
    gap:9px;
}

.glass-btn{
    min-width:145px;
    padding:12px 14px;
    border:1px solid var(--ss-line);
    border-radius:11px;
    background:var(--ss-panel);
    color:var(--ss-text);
    font-size:5.5px;
    cursor:pointer;
}

.result-footer-link{
    margin-top:14px;
    color:var(--ss-dim);
    font-size:5px;
    text-align:center;
}


/* DOWNLOAD RESULT */

#dl-capture-container .dl-top1{
    margin-bottom:10px;
    padding:10px;
    border:2px solid rgba(255,230,0,.5);
    border-radius:14px;
    text-align:center;
    background:rgba(255,230,0,.05);
}

#dl-capture-container .dl-top1-cover{
    width:130px;
    height:130px;
    object-fit:cover;
    border-radius:10px;
    border:2px solid #ffe600;
}

#dl-capture-container .dl-top1-title{
    margin-top:9px;
    color:#ffe600;
    font-size:9px;
    line-height:1.6;
}

#dl-capture-container .dl-top23-card{
    position:relative;
    min-height:145px;
    padding:10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    text-align:center;
}

#dl-capture-container .dl-top23-cover{
    width:78px;
    height:78px;
    object-fit:cover;
    border-radius:8px;
}

#dl-capture-container .dl-top23-title{
    margin-top:7px;
    font-size:6px;
    line-height:1.5;
}

#dl-capture-container .dl-top23-badge{
    margin-bottom:6px;
    font-size:7px;
}

#dl-capture-container .dl-item{
    min-width:0;
    height:38px;
    padding:4px;
    display:grid;
    grid-template-columns:22px 28px 1fr;
    gap:4px;
    align-items:center;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;
}

#dl-capture-container .dl-item-num{
    color:#ffe600;
    font-size:5px;
    text-align:center;
}

#dl-capture-container .dl-item-cover{
    width:28px;
    height:28px;
    object-fit:cover;
    border-radius:4px;
}

#dl-capture-container .dl-item-title{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:4px;
}


/* =========================================================
   POPUPS
   ========================================================= */

.popup,.milestone-popup{
    position:fixed;
    inset:0;
    z-index:3000;
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}

.how-card,.sorter-auth-card,.resume-card,.milestone-card{
    position:relative;
    width:min(100%,460px);
    max-height:90svh;
    overflow:auto;
    padding:25px 20px 21px;
    border:1px solid var(--ss-line);
    border-radius:20px;
    background:#0e1420;
    color:#fff;
}

.how-close{
    position:absolute;
    top:11px;
    right:11px;
    width:32px;
    height:32px;
    border:1px solid var(--ss-line);
    border-radius:9px;
    background:rgba(255,255,255,.04);
    color:#fff;
}

.how-title,.resume-title{
    margin-bottom:20px;
    color:var(--ss-cyan);
    font-size:11px;
    text-align:center;
}

.how-content{display:flex;flex-direction:column;gap:10px}

.how-step{
    padding:11px;
    display:grid;
    grid-template-columns:35px 1fr;
    gap:10px;
    border:1px solid var(--ss-line);
    border-radius:12px;
}

.how-step-num{color:var(--ss-pink);font-size:7px}
.how-step strong{display:block;color:#fff;font-size:6px;line-height:1.6}
.how-step p{margin:6px 0 0;color:var(--ss-muted);font-size:5.5px;line-height:1.9}
.how-ok-btn{display:block;min-width:130px;margin:18px auto 0}

.sorter-auth-note{
    margin-bottom:14px;
    color:var(--ss-muted);
    font-size:5.5px;
    line-height:1.8;
    text-align:center;
}

.sorter-auth-input{
    width:100%;
    margin-top:9px;
    padding:13px 12px;
    border:1px solid var(--ss-line);
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:#fff;
    font-size:6px;
}

.sorter-auth-error{min-height:22px;padding-top:8px;color:var(--ss-red);font-size:5px}
.sorter-auth-submit{width:100%;margin-top:5px}

.sorter-auth-switch{
    margin-top:14px;
    color:var(--ss-muted);
    font-size:5px;
    text-align:center;
}

.sorter-auth-switch button{
    border:0;
    background:transparent;
    color:var(--ss-cyan);
    font-size:5px;
}

.resume-info{
    padding:13px;
    border:1px solid var(--ss-line);
    border-radius:11px;
    color:var(--ss-muted);
    font-size:6px;
    line-height:1.9;
    text-align:center;
}

.resume-actions{
    margin-top:15px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.dialog-btn{
    padding:12px;
    border:1px solid var(--ss-line);
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:#fff;
    font-size:6px;
}

.dialog-btn.confirm{border-color:rgba(0,255,255,.4);color:var(--ss-cyan)}

.milestone-card{text-align:center}
.milestone-label{color:var(--ss-pink);font-size:6px}
.milestone-trisha{display:block;width:100px;max-height:115px;object-fit:contain;margin:12px auto}
.milestone-title{color:var(--ss-gold);font-size:9px;line-height:1.7}
.milestone-text{margin-top:10px;color:var(--ss-muted);font-size:6px;line-height:1.9}

.milestone-close{
    margin-top:17px;
    padding:11px 14px;
    border:1px solid var(--ss-cyan);
    border-radius:10px;
    background:rgba(0,255,255,.08);
    color:var(--ss-cyan);
    font-size:6px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:700px){
    .home-screen,.filter-screen,.quickpick-screen,.battle-screen,.result-screen{
        width:calc(100% - 24px);
        padding-top:82px;
    }

    .sorter-nav{
        height:58px;
        padding:0 12px;
        grid-template-columns:42px 1fr 42px;
    }

    .sorter-nav-btn{width:38px;height:38px}
    .sorter-nav-title{font-size:6.5px}

    .qp-grid{gap:7px}
    .qp-title,.qp-card-title{min-height:40px;padding:8px 5px 0;font-size:4.7px}

    .battle-area{
        grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);
        gap:7px;
    }

    .vs-text{width:38px;height:38px;font-size:7px}

    .battle-name{
        min-height:62px;
        padding:10px 7px;
        font-size:5.3px;
    }

    .rank-list{grid-template-columns:repeat(2,minmax(0,1fr))}

    .top1-card{
        min-height:160px;
        grid-template-columns:125px 1fr;
        gap:14px;
        padding:13px;
    }

    .top1-cover{width:125px;height:125px}
    .top1-rank{font-size:16px}
    .top1-title{font-size:7.5px}

    .top23-card{
        grid-template-columns:62px 1fr;
        padding:8px;
        gap:8px;
    }

    .top23-cover{width:62px;height:62px}
    .top23-title{font-size:5px}
}

@media(max-width:480px){
    .sorter-home-copy{font-size:6px}
    .filter-options{grid-template-columns:1fr}

    .battle-question{font-size:5px}

    .result-small-title{font-size:6.5px}
    .ranking-name{font-size:10px}

    .rank-item{
        min-height:55px;
        padding:6px;
        grid-template-columns:23px 36px minmax(0,1fr);
        gap:5px;
    }

    .rank-cover{width:36px;height:36px}
    .rank-title{font-size:4.1px}

    .result-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .glass-btn{
        min-width:0;
        width:100%;
        padding:11px 7px;
        font-size:4.8px;
    }
}

@media(max-width:420px){
    .vinyl-wrapper,.vinyl-disc{
        width:200px;
        height:200px;
    }

    .vinyl-label{width:38%;height:38%}
    .arm-stick{height:110px}
    #reveal-rank{font-size:36px}
    .reveal-title{max-width:270px;font-size:10px}
    #timer{font-size:56px}

    #skip-countdown-btn,#skip-song-btn{
        min-width:155px;
        padding:11px 15px;
        font-size:7px;
    }
}

/* Prevent Auto-Zoom on Mobile Inputs */
input[type="text"],
input[type="password"],
input[type="search"],
textarea,
select {
    font-size: 16px !important;
}