/* =========================================================
   JKT48 GAMES — HUB
   Semua UI khusus homepage/hub.
   Theme dasar ada di shared/style.css.
   ========================================================= */

/* ========================= HUB THEME ========================= */

[data-theme="dark"] {
    --gradient-hero:
        radial-gradient(circle at 20% 20%,rgba(148,137,121,.10),transparent 35%),
        radial-gradient(circle at 80% 30%,rgba(223,208,184,.06),transparent 30%),
        linear-gradient(to bottom,#222831,#1a1f27);

    --gradient-about:
        radial-gradient(circle at 40% 30%,rgba(148,137,121,.08),transparent 40%),
        radial-gradient(circle at 70% 70%,rgba(223,208,184,.05),transparent 35%),
        linear-gradient(to bottom,#1a1f27,#222831);

    --gradient-picks:
        radial-gradient(circle at 40% 20%,rgba(231,111,81,.06),transparent 40%),
        radial-gradient(circle at 60% 80%,rgba(148,137,121,.05),transparent 35%),
        linear-gradient(to bottom,#1a1f27,#222831,#1a1f27);

    --gradient-quiz:
        radial-gradient(circle at 50% 30%,rgba(223,208,184,.12),transparent 40%),
        radial-gradient(circle at 30% 70%,rgba(223,208,184,.06),transparent 35%),
        linear-gradient(to bottom,#222831,#1e242c);

    --gradient-sorter:
        radial-gradient(circle at 50% 30%,rgba(148,137,121,.14),transparent 40%),
        radial-gradient(circle at 70% 70%,rgba(223,208,184,.06),transparent 35%),
        linear-gradient(to bottom,#272d36,#222831);

    --nav-bg:rgba(34,40,49,.75);
    --nav-border:rgba(148,137,121,.25);
    --nav-glow:rgba(148,137,121,.12);
    --menu-bg:rgba(34,40,49,.92);

    --footer-bg:#1a1f27;
    --footer-border:rgba(148,137,121,.15);

    --star-opacity-1:.12;
    --star-opacity-2:.08;

    --float-color:rgba(253,240,213,.28);
    --float-glow:rgba(253,240,213,.22);
    --float-rose:rgba(231,111,81,.20);
    --float-rose-glow:rgba(231,111,81,.16);
    --float-fire:rgba(231,111,81,.18);
    --float-fire-glow:rgba(231,111,81,.14);
    --float-star:rgba(148,137,121,.26);
    --float-star-glow:rgba(148,137,121,.20);

    --title-color:#DFD0B8;
    --title-shadow:3px 3px #948979,6px 6px #1a1f27;
    --tagline-color:rgba(223,208,184,.50);

    --about-tag-bg:rgba(148,137,121,.12);
    --about-tag-border:rgba(148,137,121,.25);
    --about-tag-color:#DFD0B8;

    --play-bg:#393E46;
    --play-border:#222831;
    --play-shadow:6px 6px #1a1f27;
    --play-shadow-hover:8px 8px #1a1f27;

    --picks-card-bg:linear-gradient(145deg,rgba(30,35,42,.96),rgba(42,32,42,.94));
    --picks-border:rgba(148,137,121,.20);
    --picks-glow:rgba(148,137,121,.10);
    --picks-dialog-bg:rgba(223,208,184,.06);
    --picks-dialog-border:rgba(223,208,184,.10);

    --cf-card-bg:#1f2430;
    --cf-card-glow:rgba(223,208,184,.12);
    --cf-title-glow:rgba(223,208,184,.20);
    --cf-play-bg:linear-gradient(90deg,#DFD0B8,#E76F51);
    --cf-dot-active:#DFD0B8;
    --cf-dot-glow:rgba(223,208,184,.60);

    --trisha-filter:drop-shadow(0 0 12px rgba(223,208,184,.20));
    --game-logo-glow:drop-shadow(0 0 20px rgba(223,208,184,.20)) drop-shadow(0 0 40px rgba(223,208,184,.08));
    --game-sub-color:rgba(223,208,184,.55);
}

[data-theme="light"] {
    --gradient-hero:
        radial-gradient(circle at 20% 20%,rgba(233,196,106,.08),transparent 45%),
        radial-gradient(circle at 80% 30%,rgba(231,111,81,.06),transparent 35%),
        linear-gradient(to bottom,#28A99A,#1E8B7E);

    --gradient-about:
        radial-gradient(circle at 40% 30%,rgba(233,196,106,.06),transparent 45%),
        radial-gradient(circle at 70% 70%,rgba(231,111,81,.05),transparent 35%),
        linear-gradient(to bottom,#1E8B7E,#249D8F);

    --gradient-picks:
        radial-gradient(circle at 40% 20%,rgba(231,111,81,.07),transparent 45%),
        radial-gradient(circle at 60% 80%,rgba(233,196,106,.05),transparent 35%),
        linear-gradient(to bottom,#1E8B7E,#249D8F,#1E8B7E);

    --gradient-quiz:
        radial-gradient(circle at 50% 30%,rgba(233,196,106,.10),transparent 45%),
        radial-gradient(circle at 30% 70%,rgba(233,196,106,.05),transparent 35%),
        linear-gradient(to bottom,#249D8F,#1E8B7E);

    --gradient-sorter:
        radial-gradient(circle at 50% 30%,rgba(231,111,81,.08),transparent 45%),
        radial-gradient(circle at 70% 70%,rgba(233,196,106,.05),transparent 35%),
        linear-gradient(to bottom,#27A899,#249D8F);

    --nav-bg:rgba(36,157,143,.80);
    --nav-border:rgba(253,240,213,.18);
    --nav-glow:rgba(253,240,213,.06);
    --menu-bg:rgba(36,157,143,.95);

    --footer-bg:#1E8B7E;
    --footer-border:rgba(253,240,213,.10);

    --star-opacity-1:.08;
    --star-opacity-2:.05;

    --float-color:rgba(253,240,213,.28);
    --float-glow:rgba(253,240,213,.22);
    --float-rose:rgba(231,111,81,.25);
    --float-rose-glow:rgba(231,111,81,.18);
    --float-fire:rgba(231,111,81,.22);
    --float-fire-glow:rgba(231,111,81,.16);
    --float-star:rgba(233,196,106,.30);
    --float-star-glow:rgba(233,196,106,.22);

    --title-color:#E9C46A;
    --title-shadow:3px 3px #E76F51,6px 6px rgba(0,0,0,.15);
    --tagline-color:rgba(253,240,213,.45);

    --about-tag-bg:rgba(233,196,106,.18);
    --about-tag-border:rgba(233,196,106,.35);
    --about-tag-color:#E9C46A;

    --play-bg:#E76F51;
    --play-border:#C75B3A;
    --play-shadow:6px 6px #C75B3A;
    --play-shadow-hover:8px 8px #C75B3A;

    --picks-card-bg:linear-gradient(145deg,rgba(30,139,126,.92),rgba(36,157,143,.90));
    --picks-border:rgba(253,240,213,.18);
    --picks-glow:rgba(253,240,213,.06);
    --picks-dialog-bg:rgba(253,240,213,.08);
    --picks-dialog-border:rgba(253,240,213,.12);

    --cf-card-bg:#1E8B7E;
    --cf-card-glow:rgba(233,196,106,.10);
    --cf-title-glow:rgba(233,196,106,.15);
    --cf-play-bg:linear-gradient(90deg,#E76F51,#E9C46A);
    --cf-dot-active:#E9C46A;
    --cf-dot-glow:rgba(233,196,106,.50);

    --trisha-filter:drop-shadow(0 0 12px rgba(253,240,213,.15));
    --game-logo-glow:drop-shadow(0 0 20px rgba(233,196,106,.15)) drop-shadow(0 0 40px rgba(231,111,81,.08));
    --game-sub-color:rgba(253,240,213,.55);
}

/* ========================= LIGHT OVERRIDES ========================= */

[data-theme="dark"] .ff,
[data-theme="light"] .ff{
    filter:grayscale(1) brightness(2.5) opacity(.68);
    text-shadow:none;
}

[data-theme="light"] .fl,
[data-theme="light"] .fs{
    color:var(--float-color);
    text-shadow:0 0 12px var(--float-glow);
}

[data-theme="light"] .nav-logo{
    filter:drop-shadow(0 0 6px rgba(253,240,213,.30));
}

[data-theme="light"] .hero-logo{
    filter:drop-shadow(0 0 15px rgba(233,196,106,.25))
           drop-shadow(0 0 30px rgba(231,111,81,.12));
}

[data-theme="light"] .game-logo-img{
    filter:drop-shadow(0 0 20px rgba(233,196,106,.18))
           drop-shadow(0 0 40px rgba(231,111,81,.10));
}

[data-theme="light"] .play-btn{
    color:#fff;
    box-shadow:var(--play-shadow),0 0 0 4px rgba(255,255,255,.15) inset;
}

[data-theme="light"] .play-btn::before{border-color:#E9C46A}

[data-theme="light"] .play-btn:hover{
    background:#E9C46A;
    color:#1E3A34;
    box-shadow:8px 8px #C4A035,0 0 12px rgba(233,196,106,.35);
}

[data-theme="light"] .play-btn.gold-btn{
    background:#E9C46A;
    color:#1E3A34;
    border-color:#C4A035;
    box-shadow:6px 6px #C4A035,0 0 0 4px rgba(30,58,52,.10) inset;
}

[data-theme="light"] .play-btn.gold-btn::before{border-color:#E76F51}

[data-theme="light"] .play-btn.gold-btn:hover{
    background:#E76F51;
    color:#fff;
    box-shadow:8px 8px #C75B3A,0 0 12px rgba(231,111,81,.35);
}

[data-theme="light"] .coverflow-play{color:#fff}
[data-theme="light"] .carousel-dot.dot-gold{
    background:#E76F51;
    box-shadow:0 0 8px rgba(231,111,81,.40);
}

/* ========================= SECTIONS ========================= */

.section{
    position:relative;
    width:100%;
    overflow:hidden;
    transition:background .4s;
}

.section-full{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:60px 0 20px;
}

.section-compact{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:80px 0 60px;
}

.bg-dark{background:var(--gradient-hero)}
.bg-about{background:var(--gradient-about)}
.bg-picks{background:var(--gradient-picks)}

.bg-game{
    background:var(--gradient-hero);
    transition:background .6s;
}

.bg-game.quiz-active{background:var(--gradient-quiz)}
.bg-game.sorter-active{background:var(--gradient-sorter)}

/* ========================= STARS ========================= */

.stars{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.layer1{
    background-image:
        radial-gradient(2px 2px white,transparent),
        radial-gradient(2px 2px var(--accent-1),transparent);
    background-size:120px 120px;
    animation:starsMove 120s linear infinite;
    opacity:var(--star-opacity-1);
}

.layer2{
    background-image:
        radial-gradient(2px 2px var(--accent-1),transparent),
        radial-gradient(2px 2px var(--accent-2),transparent);
    background-size:200px 200px;
    animation:starsMove 200s linear infinite;
    opacity:var(--star-opacity-2);
}

@keyframes starsMove{
    from{transform:translateY(0)}
    to{transform:translateY(-1000px)}
}

/* ========================= FLOATING NOTES ========================= */

.floating-notes{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:2;
}

.floating-notes span{
    position:absolute;
    display:block;
    pointer-events:none;
    will-change:transform;
    transition:color .4s,text-shadow .4s;
}

.fm{color:var(--float-color);text-shadow:0 0 12px var(--float-glow)}
.fl{color:var(--float-rose);text-shadow:0 0 12px var(--float-rose-glow)}
.ff{color:var(--float-fire);text-shadow:0 0 12px var(--float-fire-glow)}
.fs{color:var(--float-star);text-shadow:0 0 12px var(--float-star-glow)}

.i1{top:8%;left:88%;font-size:52px;opacity:.50;animation:fa 5s ease-in-out infinite}
.i2{top:18%;left:4%;font-size:68px;opacity:.28;filter:blur(2px);animation:fb 7s ease-in-out infinite}
.i3{top:32%;left:92%;font-size:24px;opacity:.45;animation:fc 6s ease-in-out infinite}
.i4{top:45%;left:10%;font-size:56px;opacity:.22;filter:blur(2px);animation:fd 8s ease-in-out infinite}
.i5{top:58%;left:85%;font-size:32px;opacity:.38;animation:fa 9s ease-in-out infinite}
.i6{top:72%;left:6%;font-size:42px;opacity:.32;animation:fb 10s ease-in-out infinite}
.i7{top:82%;left:78%;font-size:48px;opacity:.20;filter:blur(2px);animation:fc 7s ease-in-out infinite}
.i8{top:12%;left:35%;font-size:22px;opacity:.48;animation:fd 11s ease-in-out infinite}
.i9{top:55%;left:45%;font-size:60px;opacity:.16;filter:blur(2px);animation:fa 8s ease-in-out infinite}
.i10{top:38%;left:70%;font-size:34px;opacity:.35;animation:fb 6s ease-in-out infinite}
.i11{top:88%;left:25%;font-size:28px;opacity:.40;animation:fc 9s ease-in-out infinite}
.i12{top:65%;left:55%;font-size:18px;opacity:.52;animation:fd 5s ease-in-out infinite}

@keyframes fa{
    0%,100%{transform:translateY(0) translateX(0) rotate(0)}
    50%{transform:translateY(-14px) translateX(5px) rotate(4deg)}
}

@keyframes fb{
    0%,100%{transform:translateY(0) translateX(0) rotate(0)}
    50%{transform:translateY(12px) translateX(-7px) rotate(-5deg)}
}

@keyframes fc{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-10px) scale(1.1)}
}

@keyframes fd{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(16px) rotate(8deg)}
}

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

.top-nav{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:600px;
    height:56px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-radius:999px;
    background:var(--nav-bg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--nav-border);
    box-shadow:0 0 18px var(--nav-glow);
    z-index:99999;
}

.nav-logo{
    height:36px;
    filter:drop-shadow(0 0 6px rgba(255,255,255,.15));
}

.nav-extras{
    display:flex;
    gap:8px;
    align-items:center;
}

.theme-toggle{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--toggle-bg);
    border:1px solid var(--toggle-border);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    box-shadow:0 0 10px var(--nav-glow);
    transition:.3s;
}

.theme-toggle:hover{transform:scale(1.08)}

.burger-btn{
    position:relative;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--toggle-bg);
    border:1px solid var(--toggle-border);
    cursor:pointer;
    box-shadow:0 0 10px var(--nav-glow);
}

.burger-btn span{
    position:absolute;
    left:50%;
    width:16px;
    height:2px;
    background:var(--accent-1);
    border-radius:999px;
    transform:translateX(-50%);
    transition:.3s;
}

.burger-btn span:nth-child(1){top:15px}
.burger-btn span:nth-child(2){top:21px}
.burger-btn span:nth-child(3){top:27px}

.burger-btn.active span:nth-child(1){
    top:21px;
    transform:translateX(-50%) rotate(45deg);
}

.burger-btn.active span:nth-child(2){opacity:0}

.burger-btn.active span:nth-child(3){
    top:21px;
    transform:translateX(-50%) rotate(-45deg);
}

/* ========================= SIDE MENU ========================= */

.side-menu{
    position:fixed;
    top:84px;
    left:50%;
    transform:translateX(-50%) translateY(-10px) scale(.96);
    width:80%;
    max-width:400px;
    padding:14px;
    background:var(--menu-bg);
    backdrop-filter:blur(16px);
    border-radius:24px;
    border:1px solid var(--nav-border);
    box-shadow:0 0 20px var(--nav-glow);
    display:flex;
    flex-direction:column;
    gap:4px;
    z-index:99998;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1);
}

.side-menu.show{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0) scale(1);
}

.side-menu a{
    display:block;
    padding:14px 10px;
    color:var(--text);
    font-size:9px;
    letter-spacing:1px;
    text-decoration:none;
    border-bottom:1px solid var(--text-dim);
    border-radius:8px;
}

.side-menu a:last-child{border-bottom:0}

.side-menu a:hover{
    color:var(--accent-1);
    padding-left:16px;
    background:var(--accent-1-dim);
}

/* ========================= HERO ========================= */

.hero-content{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    padding:0 20px;
    margin-top:-20px;
    animation:fadeIn .8s ease forwards;
}

@keyframes fadeIn{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}

.hero-logo{
    width:240px;
    max-width:70%;
    animation:logoFloat 5s ease-in-out infinite;
}

[data-theme="dark"] .hero-logo{
    filter:drop-shadow(0 0 20px rgba(223,208,184,.15))
           drop-shadow(0 0 35px rgba(148,137,121,.10));
}

@keyframes logoFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
}

.hero-content h1{
    font-size:22px;
    line-height:1.4;
    color:var(--title-color);
    text-shadow:var(--title-shadow);
}

.hero-content .tagline{
    font-size:7px;
    letter-spacing:2px;
    color:var(--tagline-color);
}

.hero-play-btn{
    margin-top:8px;
    font-size:10px;
    padding:14px 24px;
}

.scroll-hint{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
    text-align:center;
    animation:hintPulse 2s ease-in-out infinite;
}

.scroll-hint .arrow{
    display:block;
    margin-bottom:6px;
    font-size:18px;
    color:var(--text-dim);
}

.scroll-hint span{
    font-size:7px;
    color:var(--text-dim);
    letter-spacing:2px;
}

@keyframes hintPulse{
    0%,100%{opacity:.3;transform:translateX(-50%) translateY(0)}
    50%{opacity:.7;transform:translateX(-50%) translateY(6px)}
}

/* ========================= ABOUT ========================= */

.about-content{
    position:relative;
    z-index:5;
    width:100%;
    max-width:420px;
    padding:0 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.section-title{
    font-size:18px;
    text-align:center;
    margin-bottom:4px;
}

.section-title.cyan{
    color:var(--accent-1);
    text-shadow:0 0 10px var(--accent-1-glow);
}

.about-card{
    width:100%;
    padding:28px 22px;
    border-radius:24px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    box-shadow:0 0 30px var(--card-glow);
}

.about-text{
    color:var(--text-secondary);
    font-size:9px;
    line-height:2.2;
    text-align:center;
}

.about-tags{
    margin-top:22px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

.about-tag{
    padding:7px 10px;
    border-radius:999px;
    background:var(--about-tag-bg);
    border:1px solid var(--about-tag-border);
    color:var(--about-tag-color);
    font-size:6px;
}

.stats-row{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.stat-card{
    padding:16px 8px;
    border-radius:18px;
    text-align:center;
    background:var(--card-bg);
    border:1px solid var(--card-border);
}

.stat-num{
    display:block;
    font-size:17px;
    color:var(--accent-1);
    margin-bottom:8px;
}

.stat-lbl{
    font-size:5px;
    color:var(--text-muted);
}

/* =========================================================
   TRISHA DAILY PICKS
   Visual coverflow 3D.
   Logic lagu tetap ditangani shared/main.js.
   ========================================================= */

.daily-picks-card{
    position:relative;
    z-index:5;
    width:calc(100% - 32px);
    max-width:400px;
    margin:0 auto;
    padding:28px 16px 30px;
    border:1px solid var(--picks-border);
    border-radius:28px;
    background:var(--picks-card-bg);
    box-shadow:0 0 35px var(--picks-glow);
}

/* HEADER */

.daily-picks-header{
    margin-bottom:14px;
    text-align:center;
}

.daily-picks-small{
    margin-bottom:8px;
    color:var(--accent-1);
    font-size:11px;
    line-height:1.6;
    letter-spacing:1px;
    text-shadow:0 0 8px var(--accent-1-glow);
}

.daily-picks-title{
    color:var(--accent-2);
    font-size:7px;
    line-height:1.7;
    letter-spacing:1px;
}

/* =========================
   COVERFLOW
   ========================= */

.daily-coverflow{
    position:relative;
    width:100%;
    height:250px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    perspective:1000px;
    -webkit-perspective:1000px;
    cursor:grab;
    touch-action:pan-y;
}

.daily-coverflow:active{
    cursor:grabbing;
}

.coverflow-track{
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
}

.coverflow-card{
    position:absolute;
    top:50%;
    left:50%;
    width:150px;
    height:188px;
    overflow:hidden;
    border-radius:19px;
    background:var(--cf-card-bg);
    transform-origin:center center;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform,opacity,filter;
    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        opacity .45s ease,
        filter .45s ease,
        width .55s cubic-bezier(.22,1,.36,1),
        height .55s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;
}

.coverflow-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}

/* CENTER — cover utama */

.coverflow-card.active{
    z-index:10;
    width:182px;
    height:228px;
    opacity:1;
    filter:brightness(1) saturate(1);
    transform:
        translate(-50%,-50%)
        translate3d(0,0,70px)
        rotateY(0deg)
        rotateZ(0deg)
        scale(1);
    box-shadow:
        0 18px 30px rgba(0,0,0,.28),
        0 0 26px var(--cf-card-glow);
}

/* LEFT — kecil, gelap, miring ke tengah */

.coverflow-card.prev{
    z-index:4;
    opacity:.54;
    filter:brightness(.64) saturate(.76) blur(.25px);
    transform:
        translate(-50%,-50%)
        translate3d(-142px,7px,-65px)
        rotateY(31deg)
        rotateZ(-1.5deg)
        scale(.84);
    box-shadow:-12px 14px 24px rgba(0,0,0,.24);
}

/* RIGHT — kecil, gelap, miring ke tengah */

.coverflow-card.next{
    z-index:4;
    opacity:.54;
    filter:brightness(.64) saturate(.76) blur(.25px);
    transform:
        translate(-50%,-50%)
        translate3d(142px,7px,-65px)
        rotateY(-31deg)
        rotateZ(1.5deg)
        scale(.84);
    box-shadow:12px 14px 24px rgba(0,0,0,.24);
}

/* Cover lain tidak terlihat */

.coverflow-card.hidden-card{
    z-index:0;
    opacity:0;
    pointer-events:none;
    filter:brightness(.45) saturate(.6);
    transform:
        translate(-50%,-50%)
        translate3d(0,0,-150px)
        scale(.62);
}

/* Sedikit efek saat preview diputar */

.coverflow-card.active.playing{
    box-shadow:
        0 18px 30px rgba(0,0,0,.28),
        0 0 20px var(--cf-dot-glow),
        0 0 34px var(--cf-card-glow);
}

/* DOTS */

.coverflow-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:8px;
}

.coverflow-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--text-dim);
    cursor:pointer;
    transition:.25s;
}

.coverflow-dot.active{
    background:var(--cf-dot-active);
    box-shadow:0 0 10px var(--cf-dot-glow);
    transform:scale(1.25);
}

/* SONG INFORMATION */

.coverflow-info{
    margin-top:15px;
    text-align:center;
}

.coverflow-title{
    color:var(--accent-1);
    font-size:13px;
    line-height:1.65;
    text-shadow:0 0 10px var(--cf-title-glow);
}

.coverflow-setlist{
    margin-top:5px;
    color:var(--text-muted);
    font-size:6px;
    line-height:1.6;
    text-transform:uppercase;
}

.coverflow-play{
    margin-top:13px;
    padding:12px 20px;
    border:0;
    border-radius:999px;
    background:var(--cf-play-bg);
    color:#222831;
    font-family:var(--font);
    font-size:7px;
    cursor:pointer;
    transition:transform .2s,box-shadow .2s;
}

.coverflow-play:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 14px rgba(0,0,0,.18);
}

.coverflow-play:active{
    transform:translateY(1px);
}

/* TRISHA COMMENT */

.daily-trisha-comment{
    width:100%;
    margin-top:20px;
    display:grid;
    grid-template-columns:78px 1fr;
    gap:12px;
    align-items:end;
}

.daily-picks-trisha{
    width:78px;
    height:auto;
    align-self:end;
    object-fit:contain;
    filter:var(--trisha-filter);
}

.daily-picks-dialog{
    min-height:76px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    border:1px solid var(--picks-dialog-border);
    border-radius:19px;
    background:var(--picks-dialog-bg);
    color:var(--text-secondary);
    font-size:8px;
    line-height:1.9;
    text-align:left;
}

/* DAILY PICKS LIGHT MODE */

[data-theme="light"] .daily-picks-small{
    color:#FDF0D5;
}

[data-theme="light"] .daily-picks-title{
    color:#FF8A6D;
}

[data-theme="light"] .coverflow-play{
    color:#fff;
}

/* ========================= GAME CAROUSEL ========================= */

.game-page{
    position:relative;
    z-index:5;
    width:100%;
    max-width:420px;
    padding:0 20px;
}

.game-carousel{
    position:relative;
    overflow:hidden;
    width:100%;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    touch-action:pan-y;
}

.game-carousel:active{cursor:grabbing}

.game-track{
    display:flex;
    transition:transform .5s cubic-bezier(.22,1,.36,1);
    will-change:transform;
}

.game-slide{
    min-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
    padding:0 4px;
}

.game-logo-wrap{position:relative}

.game-logo-img{
    width:300px;
    max-width:80%;
    object-fit:contain;
    animation:gameLogoFloat 5s ease-in-out infinite;
}

[data-theme="dark"] .game-logo-img{
    filter:var(--game-logo-glow);
}

@keyframes gameLogoFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

.game-subtitle{
    max-width:300px;
    color:var(--game-sub-color);
    font-size:9px;
    line-height:2;
}

/* ========================= PLAY BUTTON ========================= */

.play-btn{
    position:relative;
    display:inline-block;
    padding:16px 28px;
    background:var(--play-bg);
    color:var(--accent-1);
    border:4px solid var(--play-border);
    box-shadow:var(--play-shadow),0 0 0 4px var(--accent-1) inset;
    font-family:var(--font);
    font-size:12px;
    text-decoration:none;
    cursor:pointer;
    transition:.1s;
}

.play-btn::before{
    content:'';
    position:absolute;
    inset:-4px;
    border:2px solid var(--pink);
    z-index:-1;
}

.play-btn:hover{
    background:var(--accent-1);
    color:#1a1a1a;
    box-shadow:var(--play-shadow-hover),0 0 12px var(--accent-1);
}

.play-btn:active{
    transform:translate(4px,4px);
    box-shadow:0 0 var(--play-border);
}

.play-btn.gold-btn{
    color:var(--accent-2);
    box-shadow:var(--play-shadow),0 0 0 4px var(--accent-2) inset;
}

.play-btn.gold-btn:hover{
    background:var(--accent-2);
    color:#1a1a1a;
    box-shadow:var(--play-shadow-hover),0 0 12px var(--accent-2);
}

.carousel-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:16px;
}

.carousel-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--text-dim);
    cursor:pointer;
    transition:.3s;
}

.carousel-dot.active{transform:scale(1.2)}

.carousel-dot.dot-accent{
    background:var(--accent-1);
    box-shadow:0 0 8px var(--accent-1);
}

.carousel-dot.dot-gold{
    background:var(--accent-2);
    box-shadow:0 0 8px var(--accent-2);
}

.swipe-hint{
    margin-top:14px;
    color:var(--text-dim);
    font-size:7px;
    letter-spacing:1px;
    text-align:center;
    animation:fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut{
    0%,100%{opacity:.3}
    50%{opacity:.7}
}

/* ========================= FOOTER ========================= */

.main-footer{
    position:relative;
    z-index:5;
    padding:32px 20px 30px;
    text-align:center;
    background:var(--footer-bg);
    border-top:1px solid var(--footer-border);
}

.footer-title{
    margin-bottom:12px;
    color:var(--accent-1);
    font-size:10px;
    letter-spacing:1.5px;
    text-shadow:0 0 8px var(--accent-1-glow);
}

.footer-text{
    max-width:430px;
    margin:0 auto;
    color:var(--text-muted);
    font-size:6.5px;
    line-height:2;
}

.footer-credit{
    margin-top:10px;
    color:var(--text-dim);
    font-size:5.5px;
    line-height:1.8;
}

.footer-credit::first-letter{
    color:var(--accent-2);
}

/* ========================= AUTH BUTTON ========================= */

.auth-btn{
    padding:8px 14px;
    background:var(--toggle-bg);
    color:var(--accent-1);
    border:1px solid var(--toggle-border);
    border-radius:8px;
    font-family:var(--font);
    font-size:6px;
    cursor:pointer;
    white-space:nowrap;
}

.auth-btn:hover{
    border-color:var(--accent-1-border);
    background:var(--accent-1-dim);
}

.auth-btn.logged-in{
    background:var(--accent-1-dim);
    border-color:var(--accent-1-border);
    color:var(--gold);
}

/* ========================= AUTH MODAL ========================= */

.auth-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.70);
    backdrop-filter:blur(8px);
}

.auth-card{
    position:relative;
    width:100%;
    max-width:340px;
    padding:32px 28px;
    background:var(--card-bg);
    border:2px solid var(--card-border);
    border-radius:24px;
    backdrop-filter:blur(16px);
    animation:fadeIn .3s ease;
}

.auth-close{
    position:absolute;
    top:14px;
    right:16px;
    border:0;
    background:none;
    color:var(--text-dim);
    font-size:18px;
    cursor:pointer;
}

.auth-title{
    margin-bottom:6px;
    color:var(--accent-1);
    font-size:14px;
    text-align:center;
    text-shadow:0 0 10px var(--accent-1-glow);
}

.auth-subtitle{
    margin-bottom:20px;
    color:var(--text-muted);
    font-size:6px;
    line-height:2;
    text-align:center;
}

.auth-input{
    width:100%;
    margin-bottom:10px;
    padding:14px 16px;
    background:var(--input-bg);
    color:var(--text);
    border:2px solid var(--input-border);
    border-radius:14px;
    outline:none;
    font-size:7px;
}

.auth-input::placeholder{color:var(--text-dim)}

.auth-input:focus{
    border-color:var(--input-focus-border);
    box-shadow:0 0 12px var(--accent-1-glow);
}

.auth-error{
    min-height:16px;
    margin-bottom:8px;
    color:var(--pink);
    font-size:6px;
    text-align:center;
}

.auth-submit{
    width:100%;
    margin-bottom:16px;
    padding:14px;
    background:var(--play-bg);
    color:var(--accent-1);
    border:3px solid var(--play-border);
    border-radius:14px;
    box-shadow:var(--play-shadow),0 0 0 4px var(--accent-1) inset;
    font-size:10px;
    cursor:pointer;
}

.auth-submit:hover{
    background:var(--accent-1);
    color:#1a1a1a;
}

.auth-submit:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.auth-switch{
    color:var(--text-dim);
    font-size:6px;
    line-height:2;
    text-align:center;
}

.auth-switch a{
    color:var(--gold);
    text-decoration:none;
}

/* =========================================================
   TEBAK LAGU LOGO - HUB
   ========================================================= */

.quiz-hub-logo-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
}

.hub-quiz-logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hub-quiz-logo-main{
    color:#DFD0B8;
    font-family:'Press Start 2P',monospace;
    font-size:clamp(42px,10vw,64px);
    line-height:1;
    letter-spacing:2px;
    text-shadow:
        2px 2px 0 #c4b49d,
        4px 4px 0 #aa9a83,
        6px 6px 0 #877866,
        8px 8px 0 #665849,
        10px 10px 0 #493f35,
        12px 12px 0 #302921,
        0 0 18px rgba(223,208,184,.30),
        0 0 36px rgba(223,208,184,.14);
}

.hub-quiz-logo-sub{
    margin-top:24px;
    color:#A89780;
    font-family:'Press Start 2P',monospace;
    font-size:clamp(10px,3vw,15px);
    line-height:1.4;
    letter-spacing:5px;
    text-shadow:
        2px 2px 0 #6F6254,
        4px 4px 0 #493F35;
}

[data-theme="light"] .hub-quiz-logo-main{
    color:#FDF0D5;
}

[data-theme="light"] .hub-quiz-logo-sub{
    color:rgba(253,240,213,.72);
}

@media(max-width:600px){
    .hub-quiz-logo-main{
        font-size:48px;
        text-shadow:
            2px 2px 0 #c4b49d,
            4px 4px 0 #aa9a83,
            6px 6px 0 #877866,
            8px 8px 0 #665849,
            10px 10px 0 #493f35,
            0 0 16px rgba(223,208,184,.28),
            0 0 30px rgba(223,208,184,.12);
    }

    .hub-quiz-logo-sub{
        margin-top:20px;
        font-size:11px;
        letter-spacing:4px;
    }
}

@media(max-width:390px){
    .hub-quiz-logo-main{font-size:42px}

    .hub-quiz-logo-sub{
        margin-top:17px;
        font-size:9px;
        letter-spacing:3px;
    }
}

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

@media(min-width:768px){
    .hero-logo{width:300px}
    .hero-content h1{font-size:30px}
    .about-content{max-width:500px}
    .section-title{font-size:22px}

    /* DAILY PICKS */
    .daily-picks-card{max-width:440px}
    .daily-coverflow{height:270px}

    .coverflow-card{
        width:158px;
        height:198px;
    }

    .coverflow-card.active{
        width:196px;
        height:245px;
    }

    .coverflow-card.prev{
        transform:
            translate(-50%,-50%)
            translate3d(-158px,7px,-70px)
            rotateY(31deg)
            rotateZ(-1.5deg)
            scale(.84);
    }

    .coverflow-card.next{
        transform:
            translate(-50%,-50%)
            translate3d(158px,7px,-70px)
            rotateY(-31deg)
            rotateZ(1.5deg)
            scale(.84);
    }

    /* HUB GAMES */
    .game-page{max-width:500px}
    .game-logo-img{width:380px}
    .game-subtitle{font-size:10px}
    .play-btn{font-size:14px;padding:18px 32px}
    .hero-play-btn{font-size:11px;padding:15px 26px}
}

@media(min-width:1024px){
    .hero-logo{width:340px}
    .hero-content h1{font-size:36px}
    .about-content{max-width:560px}
    .about-card{padding:36px 28px}
    .section-title{font-size:26px}

    .daily-picks-card{max-width:460px}

    .game-page{max-width:560px}
    .game-logo-img{width:420px}
    .play-btn{font-size:16px;padding:20px 36px}
}

/* ========================= SMALL MOBILE ========================= */

@media(max-width:380px){
    .hero-logo{width:190px}
    .hero-content h1{font-size:18px}
    .section-title{font-size:15px}
    .about-text{font-size:8px;line-height:2}
    .section-compact{padding:60px 0 40px}

    /* DAILY PICKS */

    .daily-picks-card{
        width:calc(100% - 24px);
        padding:24px 11px 26px;
    }

    .daily-picks-small{font-size:9px}
    .daily-picks-title{font-size:6px}

    .daily-coverflow{
        height:225px;
    }

    .coverflow-card{
        width:128px;
        height:160px;
        border-radius:17px;
    }

    .coverflow-card.active{
        width:166px;
        height:208px;
        transform:
            translate(-50%,-50%)
            translate3d(0,0,65px)
            rotateY(0deg)
            scale(1);
    }

    .coverflow-card.prev{
        transform:
            translate(-50%,-50%)
            translate3d(-122px,6px,-55px)
            rotateY(32deg)
            rotateZ(-1.5deg)
            scale(.84);
    }

    .coverflow-card.next{
        transform:
            translate(-50%,-50%)
            translate3d(122px,6px,-55px)
            rotateY(-32deg)
            rotateZ(1.5deg)
            scale(.84);
    }

    .coverflow-title{font-size:11px}

    .daily-trisha-comment{
        grid-template-columns:60px 1fr;
        gap:9px;
    }

    .daily-picks-trisha{width:60px}

    .daily-picks-dialog{
        min-height:65px;
        padding:11px 12px;
        font-size:6.5px;
        line-height:1.8;
    }

    /* HUB GAMES */

    .game-logo-img{width:220px}
    .game-subtitle{font-size:8px;max-width:250px}
    .play-btn{font-size:10px;padding:14px 22px}
    .hero-play-btn{font-size:9px;padding:12px 20px}
}

/* =========================================================
   GAME PICKER — DYNAMIC GAME ATMOSPHERE
   Tebak Lagu = warm / music
   Song Sorter = cyan-magenta / battle
   ========================================================= */

#page-games{
    --game-accent:#DFD0B8;
    --game-accent-rgb:223,208,184;
    --game-second:#948979;
    --game-second-rgb:148,137,121;
    isolation:isolate;
    background:#1d242d;
    transition:background .6s cubic-bezier(.22,1,.36,1);
}

#page-games::before,
#page-games::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    transition:opacity .6s ease,background .6s ease;
}

/* ========================= GAME 1 — TEBAK LAGU ========================= */

#page-games.quiz-active{
    --game-accent:#DFD0B8;
    --game-accent-rgb:223,208,184;
    --game-second:#E9C46A;
    --game-second-rgb:233,196,106;

    background:
        radial-gradient(circle at 50% 34%,rgba(223,208,184,.15),transparent 27%),
        radial-gradient(circle at 18% 63%,rgba(233,196,106,.07),transparent 28%),
        radial-gradient(circle at 88% 75%,rgba(148,137,121,.08),transparent 30%),
        linear-gradient(180deg,#242c36 0%,#202731 48%,#1b222b 100%);
}

#page-games.quiz-active::before{
    opacity:1;
    background:
        radial-gradient(circle at 50% 47%,rgba(223,208,184,.08),transparent 24%),
        repeating-linear-gradient(
            90deg,
            transparent 0 48px,
            rgba(223,208,184,.012) 49px 50px
        );
}

#page-games.quiz-active::after{
    opacity:.65;
    background:
        radial-gradient(circle at 15% 22%,rgba(255,255,255,.06) 0 1px,transparent 2px),
        radial-gradient(circle at 77% 32%,rgba(223,208,184,.12) 0 1px,transparent 2px),
        radial-gradient(circle at 35% 82%,rgba(233,196,106,.09) 0 1px,transparent 2px);
    background-size:140px 140px,190px 190px,220px 220px;
}

/* ========================= GAME 2 — SONG SORTER ========================= */

#page-games.sorter-active{
    --game-accent:#00ffff;
    --game-accent-rgb:0,255,255;
    --game-second:#ff0080;
    --game-second-rgb:255,0,128;

    background:
        radial-gradient(circle at 50% 32%,rgba(0,255,255,.13),transparent 28%),
        radial-gradient(circle at 17% 68%,rgba(255,0,128,.09),transparent 29%),
        radial-gradient(circle at 87% 76%,rgba(0,255,255,.06),transparent 31%),
        linear-gradient(180deg,#0d1420 0%,#090e17 50%,#070a10 100%);
}

#page-games.sorter-active::before{
    opacity:1;
    background:
        linear-gradient(rgba(0,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,255,255,.018) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:linear-gradient(to bottom,transparent 4%,#000 30%,#000 78%,transparent);
    -webkit-mask-image:linear-gradient(to bottom,transparent 4%,#000 30%,#000 78%,transparent);
}

#page-games.sorter-active::after{
    opacity:.78;
    background:
        radial-gradient(circle at 15% 24%,rgba(0,255,255,.18) 0 1px,transparent 2px),
        radial-gradient(circle at 75% 32%,rgba(255,0,128,.16) 0 1px,transparent 2px),
        radial-gradient(circle at 39% 80%,rgba(0,255,255,.12) 0 1px,transparent 2px);
    background-size:135px 135px,180px 180px,230px 230px;
}

/* ========================= KEEP CONTENT ABOVE BG ========================= */

#page-games > .stars,
#page-games > .floating-notes,
#page-games > .game-page{
    position:relative;
}

#page-games > .stars{z-index:1}
#page-games > .floating-notes{z-index:2}
#page-games > .game-page{z-index:5}

/* ========================= LOGO AURA ========================= */

#page-games .game-logo-wrap{
    position:relative;
    isolation:isolate;
}

#page-games .game-logo-wrap::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-45px -60px;
    opacity:0;
    filter:blur(25px);
    pointer-events:none;
    transition:opacity .45s ease,background .45s ease;
}

#page-games.quiz-active .game-slide:nth-child(1) .game-logo-wrap::before{
    opacity:.75;
    background:radial-gradient(circle,rgba(223,208,184,.15),transparent 67%);
}

#page-games.sorter-active .game-slide:nth-child(2) .game-logo-wrap::before{
    opacity:.85;
    background:
        radial-gradient(circle at 45% 50%,rgba(0,255,255,.15),transparent 53%),
        radial-gradient(circle at 62% 52%,rgba(255,0,128,.09),transparent 68%);
}

/* ========================= ACTIVE GAME LOGO GLOW ========================= */

#page-games.quiz-active .game-slide:nth-child(1) .game-logo-img{
    filter:
        drop-shadow(0 0 12px rgba(223,208,184,.22))
        drop-shadow(0 0 32px rgba(223,208,184,.10));
}

#page-games.sorter-active .game-slide:nth-child(2) .game-logo-img{
    filter:
        drop-shadow(0 0 12px rgba(0,255,255,.30))
        drop-shadow(4px 4px 0 rgba(255,0,128,.12))
        drop-shadow(0 0 34px rgba(0,255,255,.11));
}

/* ========================= SUBTITLE ========================= */

#page-games .game-subtitle{
    transition:color .45s ease,text-shadow .45s ease;
}

#page-games.quiz-active .game-slide:nth-child(1) .game-subtitle{
    color:rgba(223,208,184,.68);
    text-shadow:0 0 12px rgba(223,208,184,.08);
}

#page-games.sorter-active .game-slide:nth-child(2) .game-subtitle{
    color:rgba(180,235,238,.72);
    text-shadow:0 0 12px rgba(0,255,255,.10);
}

/* ========================= DOTS — GAME COLOR ========================= */

#page-games .carousel-dot{
    width:8px;
    height:8px;
    background:rgba(255,255,255,.18);
    box-shadow:none;
    transition:
        width .35s cubic-bezier(.22,1,.36,1),
        background .35s,
        box-shadow .35s,
        transform .35s;
}

#page-games .carousel-dot.active{
    width:22px;
    border-radius:999px;
    transform:none;
}

#page-games.quiz-active .carousel-dot.active{
    background:#DFD0B8;
    box-shadow:0 0 12px rgba(223,208,184,.55);
}

#page-games.sorter-active .carousel-dot.active{
    background:#00ffff;
    box-shadow:
        0 0 10px rgba(0,255,255,.65),
        0 0 22px rgba(255,0,128,.18);
}

/* ========================= SWIPE HINT ========================= */

#page-games .swipe-hint{
    transition:color .4s,text-shadow .4s;
}

#page-games.quiz-active .swipe-hint{
    color:rgba(223,208,184,.30);
}

#page-games.sorter-active .swipe-hint{
    color:rgba(0,255,255,.30);
    text-shadow:0 0 8px rgba(0,255,255,.10);
}

/* ========================= FLOATING DECORATION ========================= */

#page-games .floating-notes span{
    transition:color .55s,text-shadow .55s,opacity .55s,filter .55s;
}

#page-games.quiz-active .floating-notes .fm{
    color:rgba(223,208,184,.25);
    text-shadow:0 0 14px rgba(223,208,184,.16);
}

#page-games.quiz-active .floating-notes .fl{
    color:rgba(231,111,81,.14);
}

#page-games.quiz-active .floating-notes .fs{
    color:rgba(233,196,106,.20);
}

#page-games.sorter-active .floating-notes .fm{
    color:rgba(0,255,255,.20);
    text-shadow:0 0 14px rgba(0,255,255,.18);
}

#page-games.sorter-active .floating-notes .fl{
    color:rgba(255,0,128,.18);
    text-shadow:0 0 14px rgba(255,0,128,.16);
}

#page-games.sorter-active .floating-notes .fs{
    color:rgba(0,255,255,.17);
}

#page-games.sorter-active .floating-notes .ff{
    opacity:.20;
}

/* ========================= GAME LIGHT MODE ========================= */

[data-theme="light"] #page-games.quiz-active{
    background:
        radial-gradient(circle at 50% 32%,rgba(253,240,213,.14),transparent 29%),
        radial-gradient(circle at 18% 70%,rgba(233,196,106,.10),transparent 30%),
        linear-gradient(180deg,#2aa99a,#249d8f 52%,#208f84);
}

[data-theme="light"] #page-games.sorter-active{
    background:
        radial-gradient(circle at 50% 32%,rgba(0,255,255,.10),transparent 28%),
        radial-gradient(circle at 15% 70%,rgba(255,0,128,.09),transparent 30%),
        linear-gradient(180deg,#168f8a,#147e7c 55%,#116f70);
}

/* ========================= GAME MOBILE ========================= */

@media(max-width:480px){
    #page-games::before{filter:none}

    #page-games .game-logo-wrap::before{
        inset:-35px -35px;
        filter:blur(20px);
    }

    #page-games .carousel-dot.active{
        width:19px;
    }
}

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