@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(./space-grotesk-vietnamese-wght-normal-D0rl6rjA.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(./space-grotesk-latin-ext-wght-normal-D9tNdqV9.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(./space-grotesk-latin-wght-normal-BhU9QXUp.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#0d0a17;
  --surface:#181226e6;
  --surface-2:#221a36;
  --line:#332a4d;
  --text:#f2eefb;
  --muted:#9b92b8;
  --amber:#ffb454;
  --pink:#ff7ac6;
  --amber-soft:#ffb45426;
  --mint:#7be0ad;
  --red:#f27e7e;
  --grad:linear-gradient(120deg,var(--amber),var(--pink));
  --radius:18px;
  --shadow:0 18px 40px -18px #000c;
  --font:"Space Grotesk Variable",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--text);font-family:var(--font);line-height:1.5;
  background:
    radial-gradient(60vw 40vh at 85% -5%,#ff7ac622,transparent 65%),
    radial-gradient(70vw 50vh at 10% 0%,#ffb45418,transparent 60%),
    radial-gradient(90vw 70vh at 50% 115%,#3b2a6b66,transparent 70%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh
}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
.app{max-width:600px;margin:0 auto;padding:24px 16px calc(56px + env(safe-area-inset-bottom))}
.app-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.app-head h1{
  font-size:1.45rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent
}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px var(--pink),0 0 6px var(--amber);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.home-tagline{color:var(--muted);margin:0 0 22px;font-size:1.02rem}
.home-tagline em{color:var(--amber);font-style:normal;font-family:var(--mono)}
.playlist-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.playlist-grid{grid-template-columns:1fr 1fr}}
.playlist-card{
  width:100%;height:100%;text-align:left;display:grid;gap:3px;align-content:start;padding:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  position:relative;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.playlist-card:before{
  content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;
  background:var(--grad);opacity:0;transition:opacity .2s ease
}
.playlist-card:hover{border-color:#ffb45480;transform:translateY(-2px);box-shadow:0 22px 44px -18px #000e}
.playlist-card:hover:before{opacity:1}
.playlist-card:active{transform:translateY(0) scale(.985)}
.playlist-name{font-size:1.1rem;font-weight:700}
.playlist-desc{color:var(--muted);font-size:.9rem}
.playlist-count{
  justify-self:start;margin-top:10px;padding:3px 10px;border-radius:999px;
  color:var(--amber);background:var(--amber-soft);border:1px solid #ffb45440;
  font-family:var(--mono);font-size:.78rem
}
.game{display:grid;gap:16px}
.game-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.game-playlist{font-weight:700}
.game-round{color:var(--muted);font-family:var(--mono);font-size:.85rem}
.video-card{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--surface-2);aspect-ratio:16/9;box-shadow:var(--shadow)
}
.video-mount,.video-mount iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cover{
  position:absolute;inset:0;display:grid;place-content:center;gap:16px;
  background:radial-gradient(ellipse at 50% 130%,#ff7ac62e,transparent 55%),radial-gradient(ellipse at 50% -30%,#ffb4541f,transparent 55%),var(--surface-2)
}
.wave{display:flex;align-items:center;gap:4px;height:80px}
.wave span{width:6px;border-radius:4px;background:var(--line);transition:background .3s ease}
.wave.is-playing span{background:var(--amber);background:linear-gradient(180deg,var(--amber),var(--pink));animation:bounce .9s ease-in-out infinite alternate}
@keyframes bounce{to{transform:scaleY(.4)}}
.cover-hint{margin:0;text-align:center;color:var(--muted);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vol{display:flex;align-items:center;gap:8px;flex:none}
.vol-icon{font-size:1rem;line-height:1;width:1.2em;text-align:center}
.vol input[type=range]{
  -webkit-appearance:none;appearance:none;width:96px;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--amber),var(--pink));background-color:var(--surface-2);
  outline:none;cursor:pointer
}
.vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--text);border:0;box-shadow:0 2px 8px #0008;cursor:pointer
}
.vol input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--text);border:0;
  box-shadow:0 2px 8px #0008;cursor:pointer
}
@media(max-width:420px){
  .vol{width:100%;justify-content:flex-end}
  .vol input[type=range]{flex:1;width:auto;max-width:180px}
}
.play-btn{
  flex:none;width:60px;height:60px;border-radius:50%;border:0;
  background:var(--grad);color:#1a1023;display:grid;place-content:center;
  box-shadow:0 8px 24px -6px #ff9a8a66;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease
}
.play-btn:hover:enabled{transform:scale(1.06);box-shadow:0 10px 28px -6px #ff9a8a99}
.play-btn:active:enabled{transform:scale(.96)}
.play-btn:disabled{filter:grayscale(.8) brightness(.6);cursor:default;box-shadow:none}
.tape{position:relative;flex:1;display:flex;gap:4px;height:16px}
.tape-seg{min-width:6px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line)}
.tape-seg.is-unlocked{background:var(--amber-soft);border-color:#ffb45480}
.tape-fill{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--grad);opacity:.45;pointer-events:none;transition-property:width;transition-timing-function:linear}
.tape-time{flex:none;font-family:var(--mono);font-size:.9rem;color:var(--amber);min-width:3.6em;text-align:right}
.guess-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.guess{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:12px;
  border:1px dashed var(--line);color:var(--muted);font-size:.94rem;background:#18122666
}
.guess.is-wrong,.guess.is-skip{border-style:solid;background:var(--surface);color:var(--text)}
.guess.is-wrong{border-color:#f27e7e59}
.guess.is-current{border-style:solid;border-color:var(--amber);box-shadow:0 0 0 1px #ffb45440 inset}
.guess-icon{font-family:var(--mono);color:var(--red)}
.guess.is-skip .guess-icon{color:var(--muted)}
.guess-slot{font-family:var(--mono);font-size:.8rem}
.search{position:relative}
.search input{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font:inherit;font-size:16px;
  box-shadow:var(--shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px #ffb45426}
.search-results{
  position:absolute;z-index:5;inset:auto 0 calc(100% + 8px) 0;list-style:none;margin:0;padding:6px;
  background:#221a36f2;border:1px solid var(--line);border-radius:14px;max-height:290px;overflow-y:auto;
  box-shadow:0 18px 40px #000a;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.search-results button{width:100%;text-align:left;padding:12px;border:0;border-radius:9px;background:none;min-height:44px}
.search-results button:hover{background:var(--amber-soft)}
.search-results strong{font-weight:700;color:var(--amber)}
.search-empty{margin:8px 2px 0;color:var(--muted);font-size:.85rem}
.game-actions{display:flex;justify-content:center}
.btn{
  padding:12px 20px;min-height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);transition:border-color .15s ease,transform .15s ease
}
.btn:hover:enabled{border-color:var(--amber)}
.btn:active:enabled{transform:scale(.97)}
.btn-primary{background:var(--grad);border:0;color:#1a1023;font-weight:700;box-shadow:0 8px 22px -8px #ff9a8a88}
.btn-primary:hover:enabled{filter:brightness(1.08)}
.btn-quiet{background:none;border-color:transparent;color:var(--muted);box-shadow:none}
.btn-quiet:hover:enabled{color:var(--text)}
.banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  border-radius:14px;border:1px solid var(--red);background:#f27e7e14
}
.banner p{margin:0;font-size:.9rem}
.result{
  display:grid;gap:10px;justify-items:center;text-align:center;padding:24px 18px;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.result.is-won{border-color:#7be0ad80;box-shadow:0 0 0 1px #7be0ad33 inset,0 18px 44px -16px #7be0ad2e}
.result.is-lost{border-color:#f27e7e59}
.result-verdict{margin:0;color:var(--muted);font-size:.92rem}
.result.is-won .result-verdict{color:var(--mint)}
.result-song{margin:0;font-size:1.35rem;font-weight:700}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.result-stats{margin:6px 0 0;color:var(--muted);font-family:var(--mono);font-size:.8rem}
@media(max-width:420px){
  .app{padding:18px 12px calc(48px + env(safe-area-inset-bottom))}
  .app-head h1{font-size:1.25rem}
  .playlist-card{padding:16px}
  .play-btn{width:56px;height:56px}
  .result-actions .btn{flex:1 1 100%;max-width:280px}
}
@media(min-width:768px){
  .app{max-width:640px;padding-top:40px}
}
@media(prefers-reduced-motion:reduce){
  .rec-dot,.wave.is-playing span{animation:none}
  .tape-fill{transition:none!important}
  .playlist-card:hover,.play-btn:hover:enabled{transform:none}
}