:root{--bg: #0b0b1a;--bg-elev: #16122b;--surface: rgba(124, 58, 237, .08);--primary: #7c3aed;--primary-soft: #a78bfa;--accent: #f43f5e;--cyan: #22d3ee;--warn: #fbbf24;--fg: #e2e8f0;--fg-dim: #94a3b8;--border: rgba(167, 139, 250, .28);--radius: 14px;--shadow-neon: 0 0 24px rgba(124, 58, 237, .35);color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(1100px 700px at 50% -10%,#241a4d 0%,transparent 60%),var(--bg);color:var(--fg);font-family:Poppins,system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.5;overflow:hidden}#app{height:100%}.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.screen{height:100%;display:flex;flex-direction:column}.screen[hidden]{display:none}.btn{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--fg);font:inherit;font-weight:600;padding:.7rem 1.4rem;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:transform .16s ease,background .16s ease,border-color .16s ease}.btn:hover{background:#7c3aed2e;border-color:var(--primary-soft)}.btn:active{transform:scale(.97)}.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}.btn--primary{background:linear-gradient(120deg,var(--primary),var(--accent));border-color:transparent;box-shadow:var(--shadow-neon)}.btn--ghost{background:transparent}kbd{display:inline-block;min-width:1.7em;margin:0 2px;padding:.1em .35em;border:1px solid var(--border);border-bottom-width:3px;border-radius:6px;background:#1b1636;font-family:inherit;font-size:.8em;text-align:center}.label{font-size:.68rem;letter-spacing:.14em;color:var(--fg-dim);text-transform:uppercase;font-weight:600}.chip{border:1px solid var(--border);border-radius:999px;padding:.1rem .6rem;font-size:.72rem;font-weight:600;letter-spacing:.08em}.eyebrow{margin:0;color:var(--primary-soft);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;font-weight:600}.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.6rem;border-bottom:1px solid var(--border)}.bar h2{margin:0;font-family:Righteous,Poppins,sans-serif;font-weight:400;letter-spacing:.04em}.screen--title{align-items:center;justify-content:center;text-align:center}.title-card{max-width:640px;padding:2rem}.logo{font-family:Righteous,Poppins,sans-serif;font-weight:400;font-size:clamp(2.6rem,7vw,4.6rem);margin:.4rem 0 .2rem;letter-spacing:.02em;background:linear-gradient(100deg,var(--cyan),var(--primary-soft) 45%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(124,58,237,.35)}.logo span{color:var(--accent);-webkit-text-fill-color:currentColor}.tagline{color:var(--fg-dim);margin:0 0 1.8rem}.title-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}.hint{margin-top:2rem;color:var(--fg-dim);font-size:.86rem}.select-body{flex:1;display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,420px);gap:1.4rem;padding:1.4rem 1.6rem;overflow:hidden}.song-list{list-style:none;margin:0;padding:0;overflow-y:auto;display:grid;gap:.8rem;align-content:start}.song-card{width:100%;display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:center;text-align:left;padding:.9rem 1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:inherit;font:inherit;cursor:pointer;transition:transform .16s ease,border-color .16s ease}.song-card:hover{transform:translateY(-2px);border-color:var(--primary-soft)}.song-card[aria-selected=true]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}.song-card__cover{width:64px;height:64px;border-radius:10px;display:grid;place-items:center;font-family:Righteous,sans-serif;font-size:1.4rem;color:#fff}.song-card__title{margin:0;font-weight:600}.song-card__meta{margin:0;color:var(--fg-dim);font-size:.82rem}.song-detail{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);padding:1.4rem;overflow-y:auto}.song-detail h3{font-family:Righteous,sans-serif;font-weight:400;margin:.2rem 0 .4rem;font-size:1.6rem}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1rem;margin:1rem 0}.detail-grid div{border-top:1px solid var(--border);padding-top:.4rem}.detail-grid dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}.detail-grid dd{margin:0;font-weight:600}.diff-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 1.4rem}.diff-btn{border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:10px;padding:.5rem .9rem;font:inherit;font-weight:600;cursor:pointer;display:grid;gap:.1rem;justify-items:center;min-width:84px}.diff-btn small{color:var(--fg-dim);font-weight:500}.diff-btn[aria-pressed=true]{background:linear-gradient(120deg,#7c3aed80,#f43f5e66);border-color:var(--primary-soft)}.diff-btn:disabled{opacity:.38;cursor:not-allowed}.screen--game{padding:.6rem .9rem .4rem;gap:.5rem}.hud-top{display:grid;grid-template-columns:1fr minmax(260px,2fr);align-items:center;gap:1rem;padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;background:#0b0b1ab8}.hud-song{display:flex;align-items:center;gap:.6rem;padding-left:.6rem;min-width:0}.hud-song strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-progress{display:flex;align-items:center;gap:.7rem}.progress{flex:1;height:6px;border-radius:999px;background:#e2e8f024;overflow:hidden}.progress__fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--primary-soft))}.hud-score{display:flex;align-items:baseline;gap:.5rem;padding-right:.8rem}.hud-score strong{font-size:1.2rem}.stage{flex:1;display:grid;grid-template-columns:minmax(180px,250px) minmax(340px,620px) minmax(180px,250px);justify-content:center;gap:1.4rem;min-height:0}.rail{display:flex;flex-direction:column;gap:.9rem;padding:.6rem .2rem}.rail--right{align-items:stretch}.performer__art{height:clamp(140px,22vh,230px);border-radius:18px;background:radial-gradient(60% 50% at 50% 25%,rgba(244,63,94,.5),transparent 70%),linear-gradient(180deg,#7c3aed80,#0b0b1a1a);border:1px solid var(--border)}.performer__name{margin:.5rem 0 0;font-weight:600}.performer__passive{margin:0;color:var(--fg-dim);font-size:.78rem}.meter__track{height:10px;border-radius:999px;background:#e2e8f024;overflow:hidden;margin-top:.3rem}.meter__fill{height:100%;width:50%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .12s linear}.meter--concert .meter__fill{background:linear-gradient(90deg,var(--cyan),var(--primary-soft))}.rank-badge,.mult,.acc{display:flex;flex-direction:column;gap:.1rem}.rank-badge strong{font-family:Righteous,sans-serif;font-size:2rem;line-height:1}.mult strong{font-family:Righteous,sans-serif;font-size:1.4rem}.counts{color:var(--fg-dim);font-size:.8rem}.playfield{position:relative;min-height:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}#playfield{display:block;width:100%;height:100%}.countdown{position:absolute;inset:0;display:grid;place-items:center;font-family:Righteous,sans-serif;font-size:5rem;color:var(--cyan);text-shadow:0 0 30px rgba(34,211,238,.6);pointer-events:none}.countdown[hidden]{display:none}.pause-veil{position:absolute;inset:0;display:grid;place-content:center;gap:1.2rem;justify-items:center;background:#0b0b1ad1;backdrop-filter:blur(6px)}.pause-veil[hidden]{display:none}.pause-veil p{font-family:Righteous,sans-serif;font-size:2.4rem;margin:0}.game-hint{margin:0;text-align:center;color:var(--fg-dim);font-size:.74rem}.screen--results{align-items:center;justify-content:center}.results-card{width:min(940px,94vw);border:1px solid var(--border);border-radius:22px;background:var(--bg-elev);padding:2.4rem 2.6rem;box-shadow:var(--shadow-neon);text-align:center}.results-card h2{font-family:Righteous,sans-serif;font-weight:400;font-size:2rem;margin:.2rem 0 1.4rem}.results-grid{display:grid;grid-template-columns:208px minmax(0,1fr) 168px;gap:2.2rem;align-items:center;text-align:left;margin-bottom:2rem}.rank-big{display:grid;justify-items:center;gap:.6rem}.rank-ring{width:168px;height:168px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) calc(var(--acc, 0) * 360deg),rgba(148,163,184,.18) 0);padding:8px}.rank-ring:before{content:"";grid-area:1 / 1;width:100%;height:100%;border-radius:50%;background:var(--bg-elev)}.rank-big strong{grid-area:1 / 1;font-family:Righteous,sans-serif;font-size:4.4rem;line-height:1;padding:0 .12em;background:linear-gradient(120deg,var(--cyan),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.results-stats{margin:0;display:grid;gap:.4rem}.results-stats div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border);padding-bottom:.25rem}.results-stats dt{color:var(--fg-dim);font-size:.86rem}.results-stats dd{margin:0;font-weight:600}.judge-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.9rem}.judge-list li{display:grid;grid-template-columns:10px 1fr auto;gap:.6rem;align-items:center}.dot{width:10px;height:10px;border-radius:50%}.dot--perfect{background:var(--cyan)}.dot--great{background:var(--primary-soft)}.dot--good{background:var(--warn)}.dot--miss{background:var(--accent)}.settings-body{flex:1;overflow-y:auto;padding:1.4rem 1.6rem 3rem;display:grid;gap:1.4rem;max-width:780px;width:100%;margin:0 auto}fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem 1.4rem;background:var(--surface)}legend{padding:0 .5rem;font-weight:600;color:var(--primary-soft)}.field{display:grid;gap:.35rem;margin-bottom:.9rem}.field--row{grid-template-columns:auto 1fr;align-items:center;gap:.6rem}.field input[type=range]{width:100%;accent-color:var(--primary-soft)}.field select{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:.5rem .7rem;font:inherit}.help{color:var(--fg-dim);font-size:.82rem;margin:0 0 .9rem}.keymap{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem;margin-bottom:1rem}.keymap button{border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);border-radius:10px;padding:.5rem;font:inherit;cursor:pointer;display:grid;gap:.1rem;justify-items:center}.keymap button b{font-family:Righteous,sans-serif;font-size:1.1rem}.keymap button small{color:var(--fg-dim)}.keymap button[data-black=true]{border-color:#f43f5e80}.keymap button[data-listening=true]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}.rail--left{justify-content:flex-start}.rail--right{gap:1.1rem}.score-block{display:flex;flex-direction:column;gap:.1rem}.score-block strong{font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.05;font-family:Righteous,Poppins,sans-serif;font-weight:400}.streak{display:flex;flex-direction:column;gap:.05rem;padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease}.streak strong{font-family:Righteous,Poppins,sans-serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}.streak small{color:var(--fg-dim);font-size:.72rem}.streak[data-hot=true]{border-color:var(--cyan);box-shadow:0 0 20px #22d3ee47}.rail-row{display:flex;gap:1.2rem}.super-state{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.super-state strong{font-weight:600}.super-state small{color:var(--fg-dim);font-size:.72rem;line-height:1.35}.super-state[data-ready=true]{border-color:var(--cyan);box-shadow:0 0 18px #22d3ee40}.super-state[data-ready=true] strong{color:var(--cyan)}.super-state[data-active=true]{border-color:var(--warn);box-shadow:0 0 18px #fbbf244d}.super-state[data-active=true] strong{color:var(--warn)}.loading,.countdown{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;pointer-events:none;background:radial-gradient(60% 50% at 50% 50%,#080816cc,#08081640)}.loading[hidden],.countdown[hidden]{display:none}.loading p,.countdown__hint{margin:0;color:var(--fg-dim);letter-spacing:.08em;font-size:.86rem}.loading__ring{width:46px;height:46px;border-radius:50%;border:3px solid rgba(167,139,250,.25);border-top-color:var(--cyan);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.countdown__ring{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(34,211,238,.35);background:radial-gradient(circle,rgba(34,211,238,.14),transparent 68%);background-image:conic-gradient(var(--cyan) calc(var(--progress, 1) * 360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%)}.countdown__ring span{font-family:Righteous,sans-serif;font-size:3.4rem;color:var(--fg);-webkit-mask:none;mask:none}.countdown__num{position:absolute}.chip--info{border-color:#22d3ee80;color:var(--cyan)}.acc strong{font-size:1.1rem}.counts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.86rem}.counts li{display:flex;align-items:center;gap:.35rem}.record{display:inline-block;margin:-.8rem 0 1.2rem;padding:.25rem .9rem;border-radius:999px;background:linear-gradient(120deg,var(--cyan),var(--accent));color:#0b0b1a;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}.record[hidden]{display:none}.song-loading{display:flex;align-items:center;gap:.7rem;color:var(--fg-dim);padding:1rem}.song-loading .loading__ring{width:20px;height:20px;border-width:2px}.song-card__badges{display:flex;gap:.4rem;margin-top:.35rem;flex-wrap:wrap}.badge{border:1px solid var(--border);border-radius:6px;padding:.05rem .45rem;font-size:.7rem;font-weight:600;color:var(--fg-dim)}.badge--best{border-color:#22d3ee73;color:var(--cyan)}.diff-btn small.best{color:var(--cyan)}.detail-hint{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;padding:.6rem .8rem;border-radius:10px;background:#22d3ee14;border:1px solid rgba(34,211,238,.25);color:var(--fg-dim);font-size:.8rem}@media (max-width: 1080px){.stage{grid-template-columns:128px 1fr 128px}.performer__art{height:104px}}@media (max-width: 820px){.stage{grid-template-columns:1fr}.rail{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.performer__art{display:none}.select-body{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}