/* reset */
[hidden]{display:none!important}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
:root{
    color-scheme:dark;
    --bg:#07060b;
    --panel:#12101b;
    --panel-2:#1b1828;
    --line:#2b2642;
    --ink:#f6f3ff;
    --mute:#a39cc2;
    --pink:#ff4fa8;
    --purple:#b940f5;
    --blue:#4a5cff;
    --cyan:#2ee6ff;
    --gold:#ffd84a;
    --marker:"Permanent Marker","Comic Sans MS","Chalkboard SE",cursive;
    --ui:"Chakra Petch","Trebuchet MS",system-ui,sans-serif;
    box-sizing:border-box;
    height:100%;
  }
  *,*::before,*::after{box-sizing:border-box}
  body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:15px;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
  button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
  button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
  #app{position:relative;height:100%;overflow:hidden}
  #bg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:16px}

  /* ---------- Tela inicial ---------- */
  #scr-title{justify-content:space-between;padding-block:max(20px,4vh) max(24px,5vh)}
  .title-art{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.2vh,22px);text-align:center;width:100%}
  .welcome{margin:0;display:flex;flex-direction:column;align-items:center;font-family:var(--marker);color:var(--ink);line-height:.95;letter-spacing:.04em}
  .welcome .w1{font-size:clamp(64px,min(22vw,15vh),150px)}
  .welcome .w2{font-size:clamp(42px,min(14vw,9.5vh),100px);letter-spacing:.14em}
  .welcome .w3{font-size:clamp(38px,min(12.5vw,8.5vh),92px);letter-spacing:.1em}
  h1{margin:clamp(8px,3vh,36px) 0 0;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,2vh,20px);font-family:var(--marker);font-weight:400;line-height:.95}
  .kpop{font-size:clamp(64px,min(22vw,14vh),150px);color:var(--purple);text-shadow:0 0 18px rgba(185,64,245,.55),0 0 42px rgba(185,64,245,.35);letter-spacing:.06em}
  .music{font-size:clamp(54px,min(18vw,12vh),128px);color:var(--blue);text-shadow:0 0 16px rgba(74,92,255,.7),0 0 40px rgba(74,92,255,.4);letter-spacing:.12em}
  .welcome span,.kpop,.music{display:inline-block;animation:bob 3.2s ease-in-out infinite}
  .w2{animation-delay:-.4s!important}.w3{animation-delay:-.8s!important}.kpop{animation-delay:-1.2s!important}.music{animation-delay:-1.8s!important}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
  .kpop{animation:bob 3.2s ease-in-out infinite,flick 5s steps(1) infinite}
  @keyframes flick{0%,92%,96%{opacity:1}94%{opacity:.55}}

  .btn-main{position:relative;width:min(100%,420px);padding:18px 24px;border-radius:14px;font-family:var(--ui);font-weight:700;font-size:20px;letter-spacing:.16em;color:#fff;
    background:linear-gradient(100deg,var(--pink),var(--purple) 45%,var(--blue));box-shadow:0 0 0 2px rgba(255,255,255,.08) inset,0 10px 30px -8px rgba(185,64,245,.7);transition:transform .12s,filter .12s}
  .btn-main:hover{filter:brightness(1.12)}
  .btn-main:active{transform:scale(.97)}
  .btn-main:disabled{filter:grayscale(.8) brightness(.6);cursor:not-allowed}
  .pulse{animation:pulse 1.8s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.08) inset,0 10px 30px -8px rgba(185,64,245,.7)}50%{box-shadow:0 0 0 2px rgba(255,255,255,.2) inset,0 10px 44px -4px rgba(185,64,245,1)}}
  .hint{margin:12px 0 0;color:var(--mute);font-size:13px;text-align:center;letter-spacing:.04em}
  .hint kbd{font-family:var(--ui);font-weight:700;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:1px 7px;margin:0 1px}

  /* ---------- Seleção ---------- */
  #scr-select{gap:14px}
  .wrap{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px;min-height:0;flex:1}
  .sel-head{display:flex;align-items:center;gap:12px}
  .sel-head h2{margin:0;font-family:var(--marker);font-weight:400;font-size:clamp(26px,7vw,36px);letter-spacing:.04em;text-wrap:balance}
  .btn-ghost{padding:8px 12px;border-radius:10px;border:1px solid var(--line);color:var(--mute);font-weight:600;font-size:14px}
  .btn-ghost:hover{color:var(--ink);border-color:var(--mute)}
  .song-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:2px;margin:-2px}
  .song{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--panel);border:2px solid var(--line);text-align:left;transition:border-color .15s,background .15s,transform .1s}
  .song:hover{border-color:#453d6a}
  .song:active{transform:scale(.99)}
  .song[aria-pressed="true"]{border-color:var(--sc);background:linear-gradient(90deg,color-mix(in srgb,var(--sc) 16%,var(--panel)),var(--panel) 70%);box-shadow:0 0 22px -6px var(--sc)}
  .cover{width:64px;height:64px;border-radius:10px;display:grid;place-items:center;font-family:var(--marker);font-size:34px;color:#fff;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 40%),linear-gradient(135deg,var(--c1),var(--c2));text-shadow:0 2px 0 rgba(0,0,0,.25)}
  .meta{display:flex;flex-direction:column;gap:3px;min-width:0}
  .meta .name{font-weight:700;font-size:18px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .meta .grp{color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
  .best{text-align:right;font-size:11px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;font-variant-numeric:tabular-nums}
  .best b{display:block;font-size:15px;color:var(--ink);letter-spacing:.02em}
  .diff{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
  .diff button{padding:10px 4px;border-radius:10px;font-weight:700;letter-spacing:.1em;font-size:13px;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:2px}
  .diff button small{font-weight:500;letter-spacing:.04em;font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}
  .diff button[aria-checked="true"]{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 -3px 0 var(--dc)}
  .sel-foot{display:flex;flex-direction:column;align-items:center}

  /* ---------- Jogo ---------- */
  #scr-game{padding:0}
  #cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
  .hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px;pointer-events:none}
  .hud > *{pointer-events:auto}
  .score small,.songname small{display:block;font-size:10px;letter-spacing:.2em;color:var(--mute)}
  .score b{font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .songname{text-align:center;font-weight:600;font-size:13px;letter-spacing:.06em;padding-top:4px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #btn-pause{width:44px;height:44px;border-radius:12px;background:rgba(27,24,40,.85);border:1px solid var(--line);font-weight:700;letter-spacing:.1em;display:grid;place-items:center}
  #btn-pause svg{width:18px;height:18px;fill:var(--ink)}
  .combo{position:absolute;left:50%;top:22%;transform:translateX(-50%);text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center}
  .combo b{font-size:clamp(40px,11vw,64px);line-height:1;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 18px rgba(185,64,245,.8)}
  .combo small{font-size:12px;letter-spacing:.3em;color:var(--mute);margin-top:2px}
  .combo i{font-style:normal;font-weight:700;margin-top:6px;font-size:14px;padding:2px 10px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);color:var(--gold)}
  .combo.bump b{animation:bump .18s ease-out}
  @keyframes bump{0%{transform:scale(1.25)}100%{transform:scale(1)}}

  .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(7,6,11,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 20px;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center;max-height:100%;overflow-y:auto}
  .card h3{margin:0 0 4px;font-family:var(--marker);font-weight:400;font-size:34px;letter-spacing:.05em}
  .btn-sec{padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);font-weight:700;letter-spacing:.12em;font-size:15px}
  .btn-sec:hover{border-color:var(--mute)}
  .grade{font-family:var(--marker);font-size:96px;line-height:1;margin:0;background:linear-gradient(160deg,var(--pink),var(--purple) 50%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(185,64,245,.5))}
  .r-song{color:var(--mute);font-size:13px;letter-spacing:.08em}
  .r-score{font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .newbest{display:inline-block;align-self:center;padding:3px 12px;border-radius:99px;background:var(--gold);color:#1a1300;font-weight:700;font-size:12px;letter-spacing:.14em}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0}
  .stats div{background:var(--panel-2);border-radius:10px;padding:8px 2px;display:flex;flex-direction:column;gap:2px}
  .stats small{font-size:9.5px;letter-spacing:.1em;color:var(--mute)}
  .stats b{font-size:18px;font-variant-numeric:tabular-nums}
  .r-line{display:flex;justify-content:space-between;color:var(--mute);font-size:14px;padding:0 4px;font-variant-numeric:tabular-nums}
  .r-line b{color:var(--ink)}

  @media (prefers-reduced-motion: reduce){
    .welcome span,.kpop,.music,.pulse{animation:none!important}
  }