/* ═══════════════════════════════════════════════════════════════════════════
   Hooked — deep ink · teal · amber.  #071317 / #02a0a0 / #ffbd65
   The play screen is a fixed 100dvh grid: no page scroll, no reaching for a
   control below the fold. Everything else scrolls normally.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ink:#071317; --ink-2:#0a191f; --surface:#0d2129; --surface-2:#113039; --surface-3:#17414c;
  --line:rgba(2,160,160,.18); --line-2:rgba(255,255,255,.07);
  --tx:#eaf6f6; --tx-2:#9db9bc; --tx-3:#6f8f95;
  --teal:#02a0a0; --teal-hi:#16c8c4; --teal-lo:#017373;
  --teal-soft:rgba(2,160,160,.13); --teal-glow:rgba(2,160,160,.38);
  --amber:#ffbd65; --amber-hi:#ffd193; --amber-lo:#d99441; --amber-soft:rgba(255,189,101,.12);
  --ok:#35d6a4; --bad:#ff7a6e; --spotify:#1db954;
  --on-teal:#04181c; --on-amber:#2b1a05;
  --disp:'Secular One','Rubik',system-ui,sans-serif;
  --ui:'Rubik','Heebo',system-ui,-apple-system,sans-serif;
  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:30px;
  --sh:0 18px 44px rgba(0,0,0,.55); --sh-sm:0 6px 18px rgba(0,0,0,.38);
  --sh-teal:0 10px 30px rgba(2,160,160,.3);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:62px;
  --e-out:cubic-bezier(.22,.9,.28,1); --e-spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ink)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{color:var(--tx);font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:radial-gradient(760px 520px at 88% -12%,rgba(2,160,160,.17),transparent 64%),
             radial-gradient(620px 460px at -10% 108%,rgba(255,189,101,.09),transparent 62%),var(--ink);
  background-attachment:fixed}
#app{height:100dvh}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:var(--teal-hi)}
h1,h2,h3,.big{font-family:var(--disp);font-weight:400}
.num{font-variant-numeric:tabular-nums}
.shell{height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.scroll{flex:1;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-t) + 8px) 15px calc(var(--nav-h) + var(--safe-b) + 20px)}
.scroll.no-nav{padding-bottom:calc(var(--safe-b) + 22px)}
.wrap{max-width:560px;margin:0 auto;width:100%}
.grow{flex:1;min-width:0}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.stack{display:grid;gap:10px}
.mt{margin-top:12px}.mb{margin-bottom:10px}.ctr{text-align:center}.blk{display:block}
.mut{color:var(--tx-2);font-size:14px}
.mut-3{color:var(--tx-3);font-size:12.5px}
.gold{color:var(--amber)}.teal{color:var(--teal-hi)}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eyebrow{font-size:11px;letter-spacing:1.3px;color:var(--teal-hi);text-transform:uppercase;font-weight:600}
.ic{display:block;flex:none}

.page{animation:fade .24s var(--e-out) both}
.page.push{animation:pushIn .3s var(--e-out) both}
.page.pop{animation:popIn .3s var(--e-out) both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pushIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.rise>*{animation:rise .36s var(--e-out) both}
.rise>:nth-child(1){animation-delay:.02s}.rise>:nth-child(2){animation-delay:.06s}
.rise>:nth-child(3){animation-delay:.1s}.rise>:nth-child(4){animation-delay:.14s}
.rise>:nth-child(5){animation-delay:.18s}.rise>:nth-child(6){animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* splash */
.splash{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:radial-gradient(60% 50% at 50% 42%,#0e2830,var(--ink) 74%)}
.splash.out{animation:splashOut .45s ease-in both}
@keyframes splashOut{to{opacity:0;transform:scale(1.06);visibility:hidden}}
.splash .mark{animation:markPop .65s var(--e-spring) both}
.splash .wordmark{margin-top:14px;font-family:var(--disp);font-size:28px;text-align:center}
.splash .wordmark small{display:block;font-family:var(--ui);font-size:13px;color:var(--tx-3);margin-top:2px}
@keyframes markPop{0%{opacity:0;transform:scale(.5) rotate(-12deg)}100%{opacity:1;transform:none}}
.hk-logo{display:grid;place-items:center;border-radius:30%;
  background:linear-gradient(155deg,#14555c,#02a0a0 46%,#016d70);color:#04191d;
  box-shadow:var(--sh-teal),inset 0 1px 0 rgba(255,255,255,.34)}

/* primitives */
.card{background:linear-gradient(168deg,var(--surface),var(--ink-2));border:1px solid var(--line);
  border-radius:var(--r-lg);padding:15px;box-shadow:var(--sh-sm)}
.card.amber{border-color:rgba(255,189,101,.22)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 18px;
  border-radius:15px;font-weight:600;width:100%;transition:transform .15s var(--e-out),opacity .15s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.42;pointer-events:none}
.btn:focus-visible{outline:3px solid var(--teal-hi);outline-offset:2px}
.btn.pri{background:linear-gradient(160deg,var(--teal-hi),var(--teal) 55%,var(--teal-lo));color:var(--on-teal);box-shadow:var(--sh-teal)}
.btn.ghost{background:var(--surface-2);color:var(--tx);border:1px solid var(--line)}
.btn.quiet{background:none;color:var(--tx-2);min-height:44px}
.btn.sm{min-height:44px;font-size:15px}
.btn.spot{background:var(--spotify);color:#04140a}
.btn.danger{background:none;color:var(--bad);border:1px solid rgba(255,122,110,.3)}
.iconbtn{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--tx-2);transition:transform .15s var(--e-out)}
.iconbtn:active{transform:scale(.92)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--teal-soft);color:var(--teal-hi);font-size:13px;font-weight:600;border:1px solid var(--line)}
.field{display:block;margin-bottom:11px}
.field>span{display:block;font-size:13px;color:var(--tx-2);margin-bottom:5px}
.inp{width:100%;min-height:52px;padding:0 14px;border-radius:14px;background:var(--ink-2);
  border:1.5px solid var(--line);color:var(--tx);transition:border-color .18s,box-shadow .18s}
.inp:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.inp.big{min-height:56px;font-size:17px;text-align:center}
.err{color:var(--bad);font-size:13.5px;display:flex;align-items:center;gap:6px}
.skel{background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:220% 100%;animation:shim 1.4s linear infinite;border-radius:var(--r)}
@keyframes shim{to{background-position:-120% 0}}
.empty{text-align:center;padding:34px 18px;color:var(--tx-2)}
.empty .ic{margin:0 auto 10px;color:var(--tx-3)}
.empty b{display:block;color:var(--tx)}

.top{display:flex;align-items:center;gap:10px;padding:4px 0 13px}
.top .name{font-family:var(--disp);font-size:18px;line-height:1.15}
.top .sub{font-size:12px;color:var(--tx-3)}
.wallet{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;flex:none;
  background:linear-gradient(150deg,rgba(255,189,101,.18),rgba(255,189,101,.06));
  border:1px solid rgba(255,189,101,.28);color:var(--amber);font-weight:700}
.wallet i{font-style:normal}

.nav{height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;flex:none;
  background:rgba(8,22,27,.86);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-top:1px solid var(--line)}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--tx-3);font-size:10.5px;font-weight:600;position:relative;transition:color .2s}
.nav button.on{color:var(--teal-hi)}
.nav button.on::before{content:'';position:absolute;top:0;width:32px;height:3px;border-radius:0 0 4px 4px;
  background:var(--teal-hi);box-shadow:0 0 12px var(--teal-glow)}

/* auth / onboarding */
.auth-hero{text-align:center;padding:16px 0 18px}
.auth-hero .hk-logo{width:80px;height:80px;margin:0 auto 14px;animation:markPop .65s var(--e-spring) both}
.auth-hero h1{font-size:31px;margin:0 0 5px}
.auth-hero p{color:var(--tx-2);margin:0 0 12px;font-size:14.5px}
.sep{display:flex;align-items:center;gap:12px;color:var(--tx-3);font-size:13px;margin:6px 0}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--line-2)}
.switcher{display:flex;background:var(--ink-2);border:1px solid var(--line-2);border-radius:14px;padding:4px}
.switcher button{flex:1;min-height:42px;border-radius:10px;color:var(--tx-3);font-weight:600;transition:all .2s var(--e-out)}
.switcher button.on{background:var(--surface-2);color:var(--tx);box-shadow:var(--sh-sm)}
.ref-note{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:14px;margin-bottom:12px;
  background:var(--amber-soft);border:1px solid rgba(255,189,101,.24);color:var(--amber-hi);font-size:14px}
.steps{display:flex;gap:6px;margin-bottom:18px}
.steps i{flex:1;height:4px;border-radius:3px;background:var(--surface-2)}
.steps i.on{background:var(--teal);box-shadow:0 0 10px var(--teal-glow)}
.onb h2{font-size:25px;margin:0 0 5px}
.onb .lead{color:var(--tx-2);margin:0 0 18px}
.pickgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pick{min-height:78px;border-radius:var(--r);background:var(--surface);border:1.5px solid var(--line-2);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:12px 14px;
  text-align:start;transition:all .2s var(--e-out);position:relative}
.pick .t{font-weight:600;font-size:15.5px}
.pick .s{font-size:12.5px;color:var(--tx-3)}
.pick .ic{color:var(--tx-3)}
.pick.on{border-color:var(--teal);background:linear-gradient(160deg,rgba(2,160,160,.16),var(--surface))}
.pick.on .ic,.pick.on .t{color:var(--teal-hi)}

/* dashboard */
.cat-card{display:flex;align-items:center;gap:13px;width:100%;text-align:start;padding:14px;margin-bottom:10px;
  border-radius:var(--r-lg);background:linear-gradient(168deg,var(--surface),var(--ink-2));
  border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .16s var(--e-out)}
.cat-card:active{transform:scale(.985)}
.cat-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--teal-soft);color:var(--teal-hi);border:1px solid var(--line)}
.cat-card b{display:block;font-family:var(--disp);font-size:17px}
.cat-card small{display:block;color:var(--tx-3);font-size:12px}
.cat-bar{display:block;height:5px;border-radius:3px;background:var(--surface-3);margin:7px 0 5px;overflow:hidden}
.cat-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal-hi),var(--amber));transition:width .5s var(--e-out)}
.mini-ring{flex:none;transform:rotate(-90deg)}
.mini-ring circle{fill:none;stroke-width:4}
.mini-ring .t{stroke:var(--surface-3)}
.mini-ring .v{stroke:var(--teal-hi);stroke-linecap:round;transition:stroke-dashoffset .6s var(--e-out)}

/* stage list */
.stage-list{display:grid;gap:9px}
.stage-row{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:13px 14px;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);transition:transform .16s var(--e-out)}
.stage-row:active{transform:scale(.985)}
.stage-row.locked{opacity:.5}
.stage-row.full{border-color:rgba(53,214,164,.35);background:linear-gradient(160deg,rgba(53,214,164,.1),var(--surface))}
.st-n{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--surface-2);color:var(--teal-hi);font-family:var(--disp);font-size:16px}
.stage-row.full .st-n{background:rgba(53,214,164,.16);color:var(--ok)}
.stage-row b{display:block;font-size:14.5px}
.stage-row small{display:block;color:var(--tx-3);font-size:11.5px}
.lock{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--tx-3);flex:none}
.lock small{font-size:10px}
.done-tick{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(53,214,164,.16);color:var(--ok)}

/* song grid */
.song-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sg{display:block;text-align:center;transition:transform .16s var(--e-out)}
.sg:active{transform:scale(.95)}
.sg-art{position:relative;display:block;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--sh-sm)}
.sg-art img{width:100%;height:100%;object-fit:cover;display:block}
.sg:not(.got) .sg-art img{filter:blur(15px) saturate(1.5) contrast(1.15);transform:scale(1.7)}
.sg-blur{position:absolute;inset:0;background:linear-gradient(160deg,rgba(7,19,23,.5),rgba(7,19,23,.78))}
.sg-n{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:24px;
  color:var(--tx);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.sg-tick{position:absolute;inset-block-start:6px;inset-inline-end:6px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--ok);color:var(--on-teal)}
.sg.got .sg-art{border-color:rgba(53,214,164,.4)}
.sg-cap{display:block;margin-top:6px;font-size:11.5px;color:var(--tx-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sg.got .sg-cap{color:var(--tx-2)}

/* leaderboard / profile */
.lb-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-2)}
.lb-row.me{border-color:var(--teal);background:linear-gradient(150deg,rgba(2,160,160,.14),var(--surface))}
.lb-row .rank{width:26px;text-align:center;font-family:var(--disp);color:var(--tx-3);flex:none}
.rank.top1{color:var(--amber)}.rank.top2{color:#cfd8dc}.rank.top3{color:#c98f5e}
.lb-row small{display:block;color:var(--tx-3);font-size:11.5px}
.avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--line)}
.avatar.sm{width:36px;height:36px;border-width:1px}
.avatar.ph{display:grid;place-items:center;background:var(--surface-2);color:var(--teal-hi)}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.stat{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 8px;text-align:center}
.stat b{display:block;font-family:var(--disp);font-size:22px}
.stat span{font-size:11px;color:var(--tx-3)}
.stat.teal b{color:var(--teal-hi)}.stat.gold b{color:var(--amber)}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.ach{padding:12px 7px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);
  text-align:center;opacity:.36;filter:grayscale(1);transition:all .3s var(--e-out)}
.ach.on{opacity:1;filter:none;border-color:rgba(255,189,101,.3);
  background:linear-gradient(160deg,rgba(255,189,101,.13),var(--surface))}
.ach .ic{margin:0 auto 6px;color:var(--amber)}
.ach b{display:block;font-size:12px;line-height:1.2}
.ach span{display:block;font-size:10px;color:var(--tx-3);margin-top:2px;line-height:1.3}
.refbox{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;
  background:var(--ink-2);border:1.5px dashed var(--line)}
.refbox code{flex:1;font-family:var(--disp);font-size:20px;letter-spacing:3px;color:var(--amber)}

/* ═══ PLAY — one screen, never scrolls ═══════════════════════════════════ */
.play{height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  padding:calc(var(--safe-t) + 6px) 12px calc(var(--safe-b) + 8px);gap:6px}
.pl-top{display:flex;align-items:center;gap:10px;flex:none}
.pl-title{flex:1;min-width:0;text-align:center}
.pl-title b{display:block;font-family:var(--disp);font-size:15px;line-height:1.15}
.pl-title span{font-size:11.5px;color:var(--tx-3)}

.pl-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.pl-art{position:relative;aspect-ratio:1;height:100%;max-height:38dvh;max-width:min(78vw,300px);
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh);background:var(--surface-2);
  display:grid;place-items:center;flex:0 1 auto}
.pl-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(20px) saturate(1.5) contrast(1.15);transform:scale(1.8);transition:filter .7s var(--e-out),transform .7s var(--e-out)}
.pl-art.reveal img{filter:none;transform:none}
.pl-veil{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%,transparent,rgba(7,19,23,.55));pointer-events:none}
.pl-art.reveal .pl-veil{opacity:0;transition:opacity .6s}
.pl-noart{position:absolute;inset:0;background:conic-gradient(from 210deg,#0f333c,#123f49,#0b2830,#0f333c)}
.pl-clue{position:relative;z-index:2;text-align:center;padding:14px;max-width:92%}
.pl-clue b{display:block;font-family:var(--disp);font-size:clamp(17px,5vw,23px);margin:5px 0;line-height:1.25;
  text-shadow:0 2px 14px rgba(0,0,0,.8)}
.pl-clue small{color:var(--tx-3);font-size:11.5px}

.pl-play{position:relative;z-index:2;width:clamp(74px,20vw,94px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  transition:transform .18s var(--e-out)}
.pl-play:active{transform:scale(.94)}
.pl-core{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--teal-hi),var(--teal) 58%,var(--teal-lo));color:var(--on-teal);
  box-shadow:var(--sh-teal),inset 0 1px 0 rgba(255,255,255,.35)}
.pl-play.on .pl-core{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.94)}}
.pl-ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);transform:rotate(-90deg)}
.pl-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.pl-ring .t{stroke:rgba(255,255,255,.09)}
.pl-ring .r{stroke:var(--amber);filter:drop-shadow(0 0 6px rgba(255,189,101,.55))}

.pl-note{font-size:12.5px;color:var(--tx-3);text-align:center;flex:none}
.pl-note.bad{color:var(--bad)}
.pl-lyric{font-size:13.5px;color:var(--amber-hi);text-align:center;max-width:94%;
  display:none;padding:7px 11px;border-radius:11px;background:var(--amber-soft);border:1px solid rgba(255,189,101,.22)}
.pl-lyric.on{display:block}

.pl-answer{flex:none;display:flex;flex-direction:column;gap:9px}
.pl-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px}
.pl-slots.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.pw{display:flex;gap:3px}
.pc{width:var(--cw);height:calc(var(--cw) * 1.18);border-radius:8px;display:grid;place-items:center;
  font-family:var(--disp);font-size:calc(var(--cw) * .62);line-height:1;font-style:normal}
.pl-slots{--cw:34px}
.pl-slots[data-dense=sm]{--cw:30px}
.pl-slots[data-dense=xs]{--cw:25px;gap:3px 7px}
.pc.sl{background:var(--ink-2);border-bottom:2.5px solid var(--teal);color:var(--amber);
  transition:background .15s,border-color .15s,transform .12s}
.pc.sl.on{background:var(--teal-soft);border-color:var(--teal-hi);animation:pop .2s var(--e-spring)}
.pc.sl.lk{border-color:var(--ok);color:var(--ok)}
.pc.sl:active{transform:scale(.9)}
.pc.gv{background:rgba(53,214,164,.13);color:var(--ok);border-bottom:2.5px solid rgba(53,214,164,.5)}
.pc.fx{color:var(--tx-3);width:auto;min-width:10px}
@keyframes pop{0%{transform:scale(.7)}100%{transform:scale(1)}}

.pl-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tile{width:var(--tw);height:calc(var(--tw) * 1.1);border-radius:11px;font-family:var(--disp);
  font-size:calc(var(--tw) * .5);background:linear-gradient(165deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--line);color:var(--tx);box-shadow:var(--sh-sm);
  transition:transform .12s var(--e-out),opacity .15s}
.pl-pool{--tw:42px}
.pl-pool[data-dense=sm]{--tw:38px}
.pl-pool[data-dense=xs]{--tw:33px;gap:5px}
.tile:active{transform:scale(.9)}
.tile.used{opacity:.22;pointer-events:none;transform:scale(.86)}

.pl-hints{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.hint{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-2);font-size:12.5px;color:var(--tx-2)}
.hint .ic{color:var(--amber)}
.hint b{color:var(--amber);font-size:12px}
.hint:disabled{opacity:.42;pointer-events:none}
.hint:active{transform:scale(.95)}

.pl-done{flex:none;display:flex;flex-direction:column;gap:11px;padding-top:4px}
.won{text-align:center}
.won-pts{display:block;font-family:var(--disp);font-size:34px;color:var(--amber);text-shadow:0 4px 22px rgba(255,189,101,.35)}
.won b{display:block;font-family:var(--disp);font-size:19px;margin-top:2px}
.won span{color:var(--tx-2);font-size:14px}
.won small{display:block;color:var(--tx-3);font-size:12px;margin-top:2px}
.yr{text-align:center}
.yr-row{display:flex;gap:7px;justify-content:center;margin-top:7px}
.yr-b{flex:1;max-width:88px;min-height:46px;border-radius:13px;background:var(--surface);
  border:1.5px solid var(--line-2);font-family:var(--disp);font-size:16px;transition:all .18s var(--e-out)}
.yr-b:active{transform:scale(.95)}
.yr-b.right{border-color:var(--ok);background:rgba(53,214,164,.14);color:var(--ok)}
.yr-b.wrong{border-color:var(--bad);background:rgba(255,122,110,.11);color:var(--bad);opacity:.6}
.yr-b:disabled{pointer-events:none}
.pl-cta{display:grid;gap:8px}

/* sheet + toast */
.scrim{position:fixed;inset:0;z-index:75;background:rgba(2,8,10,.68);backdrop-filter:blur(4px);animation:fadeIn .2s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:76;max-height:88dvh;overflow-y:auto;
  background:linear-gradient(180deg,var(--surface),var(--ink-2));border-radius:var(--r-xl) var(--r-xl) 0 0;
  border-top:1px solid var(--line);padding:8px 16px calc(var(--safe-b) + 18px);
  box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:sheetIn .3s var(--e-out) both}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
.sheet .grab{width:40px;height:4px;border-radius:3px;background:var(--surface-3);margin:6px auto 13px}
.sh-art{width:66px;height:66px;border-radius:var(--r-sm);object-fit:cover;flex:none;box-shadow:var(--sh-sm)}
.lyr-box{max-height:38dvh;overflow-y:auto;background:var(--ink-2);border-inline-start:3px solid var(--teal);
  border-radius:0 12px 12px 0;padding:11px 13px;color:var(--tx-2);font-size:14.5px;line-height:1.85}
:root[dir=rtl] .lyr-box{border-radius:12px 0 0 12px}
.lyr-box p{margin:0}
.listen{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.listen a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;border-radius:14px;
  text-decoration:none;font-weight:600;font-size:14.5px}
.listen a.sp{background:rgba(29,185,84,.13);color:#48d97b;border:1px solid rgba(29,185,84,.3)}
.listen a.yt{background:rgba(255,0,0,.1);color:#ff7b7b;border:1px solid rgba(255,0,0,.22)}
.tip{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r);text-decoration:none;color:inherit;
  background:linear-gradient(150deg,rgba(255,189,101,.12),rgba(255,189,101,.04));border:1px solid rgba(255,189,101,.22)}
.tip .ic{color:var(--amber)}
.tip b{display:block;font-size:14px}
.tip span{font-size:12px;color:var(--tx-3)}

.toast{position:fixed;inset-inline:16px;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);z-index:80;
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:15px;
  background:rgba(17,48,57,.96);border:1px solid var(--line);box-shadow:var(--sh);
  backdrop-filter:blur(14px);animation:toastIn .3s var(--e-spring) both;font-size:14px}
.toast.good .ic{color:var(--ok)}.toast.bad .ic{color:var(--bad)}.toast .ic{color:var(--amber)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}

/* short phones: give the answer area the room it needs */
@media (max-height:700px){
  .pl-art{max-height:26dvh}
  .pl-play{width:clamp(64px,17vw,78px)}
  .pl-slots{--cw:30px}
  .pl-pool{--tw:37px}
  .pl-lyric{font-size:12.5px}
}
@media (max-height:600px){
  .pl-art{max-height:19dvh}
  .pl-note{display:none}
  .pl-slots{--cw:26px}
  .pl-pool{--tw:33px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}