:root { color-scheme: dark; --blue:#69ceff; --pink:#ff91bd; --muted:#91a0bb; }
* { box-sizing:border-box; }
body { margin:0; background:#10131b; color:#eff2fa; font:14px/1.6 system-ui,"Microsoft YaHei",sans-serif; }
button,input { font:inherit; } button { cursor:pointer; } button:disabled { opacity:.45; cursor:default; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.game-shell { display:grid; grid-template-columns:minmax(180px,1fr) minmax(320px,480px) minmax(200px,1fr); gap:36px; width:min(1380px,calc(100% - 72px)); min-height:600px; height:calc(100dvh - 92px); max-height:1000px; margin:32px auto 16px; }
.info { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:5px 0 0; }
.eyebrow { color:#a4b5d2; font-size:12px; letter-spacing:.1em; font-weight:600; }
.live-tag { color:var(--blue); font-size:10px; letter-spacing:.12em; margin-top:7px; }
h1 { font-size:clamp(28px,3vw,42px); line-height:1.2; margin:28px 0 10px; letter-spacing:.03em; }
.artist { margin:0; color:#b3c0d6; font-size:13px; }
.meta { margin:18px 0 0; font-size:12px; color:var(--muted); }
.scoreboard { width:100%; margin:27px 0 23px; font-variant-numeric:tabular-nums; }
.scoreboard span { display:block; font-size:11px; letter-spacing:.09em; color:var(--muted); }
.scoreboard strong { display:block; line-height:1.2; font-weight:600; }
.combo strong { font-size:48px; margin-top:5px; }
.small-scores { display:flex; gap:40px; margin-top:17px; }
.small-scores strong { font-size:24px; margin-top:4px; }
.actions { width:min(100%,235px); display:flex; flex-wrap:wrap; gap:8px; }
.primary,.secondary { border-radius:6px; padding:9px 13px; border:1px solid #374359; font-size:12px; font-weight:600; }
.primary { color:#122036; background:#e5edff; border-color:#e5edff; flex:1; }
.secondary { color:#b9c7df; background:#20283a; }
button:hover:not(:disabled) { filter:brightness(1.12); }
.speed-setting { width:min(100%,235px); margin-top:22px; }
.speed-setting label { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:#b7c5df; }
.speed-setting output { color:#e5edff; font-variant-numeric:tabular-nums; }
input[type=range] { display:block; width:100%; margin:11px 0 3px; accent-color:var(--blue); cursor:pointer; }
.range-labels { display:flex; justify-content:space-between; font-size:10px; color:#7687a2; }
.fullscreen { margin-top:13px; }
.instructions { font-size:11px; color:#8e9db7; margin-top:13px; }
.instructions p { margin:8px 0; }
.blue { color:var(--blue); } .pink { color:var(--pink); }
.status { font-size:11px; color:#a3b4d0; margin-top:auto; padding-top:10px; max-width:240px; overflow-wrap:anywhere; }
.track-panel { min-width:0; min-height:0; display:flex; flex-direction:column; }
.stage { flex:1; min-height:280px; position:relative; background:#171e2d; border:1px solid #303b51; border-radius:7px; overflow:hidden; }
#game { width:100%; height:100%; display:block; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; background:#10131bba; }
.overlay>span { color:#9aafce; font-size:10px; letter-spacing:.18em; }
.overlay h2 { font-size:23px; font-weight:600; margin:11px 0; }
.overlay p { color:#acbdd7; font-size:12px; white-space:pre-line; margin:0; line-height:1.9; }
.progress { height:3px; background:#293348; margin-top:13px; border-radius:2px; overflow:hidden; }
#progress { width:0; height:100%; background:var(--blue); }
.track-footer { display:flex; justify-content:space-between; gap:8px; color:#93a6c5; font-size:10px; margin-top:10px; font-variant-numeric:tabular-nums; }
.companion { align-self:end; min-width:0; padding-bottom:4px; }
.cat-caption { color:#a0b3d1; font-weight:600; font-size:11px; margin-bottom:14px; }
#cat { display:block; width:100%; height:auto; }
.companion>p { color:#71849f; text-align:right; font-size:10px; margin:10px 0 0; }
footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; width:min(1380px,calc(100% - 72px)); margin:0 auto 12px; font-size:10px; color:#63758f; }
footer a { color:#8394af; text-decoration:none; } footer a:hover { color:#c7d7ef; }
.game-shell:fullscreen { width:100vw; height:100dvh; max-height:none; margin:0; padding:24px 36px; background:#10131b; }
.touch-keys { display:none; }
[hidden] { display:none!important; }
@media(max-height:780px) and (min-width:821px) {
  .game-shell { min-height:500px; margin-top:18px; height:calc(100dvh - 65px); gap:26px; }
  h1 { margin-top:18px; } .scoreboard { margin:16px 0; } .combo strong { font-size:36px; } .small-scores { margin-top:10px; }
  .speed-setting { margin-top:13px; } .instructions { margin-top:7px; } .status { padding-top:2px; margin-bottom:0; }
}
@media(max-width:1000px) { .game-shell { gap:22px; width:calc(100% - 36px); grid-template-columns:180px minmax(280px,1fr) 200px; } footer { width:calc(100% - 36px); } }
@media(max-width:820px) {
  .game-shell { width:calc(100% - 24px); height:auto; min-height:0; max-height:none; margin:18px auto; grid-template-columns:145px minmax(0,1fr); gap:16px; }
  .info { grid-row:1 / 3; } h1 { font-size:28px; margin-top:21px; } .artist { font-size:11px; } .meta { font-size:10px; }
  .scoreboard { margin:22px 0; } .small-scores { gap:26px; } .combo strong { font-size:38px; }
  .track-panel { height:62dvh; min-height:390px; } .companion { grid-column:2; width:min(100%,260px); justify-self:end; } .cat-caption { margin-bottom:6px; }
  .companion>p { display:none; } .actions { gap:6px; } .actions button { padding:8px 10px; } .status { margin-top:16px; font-size:10px; }
  footer { width:calc(100% - 24px); font-size:9px; }
  .game-shell:fullscreen { width:100vw; height:100dvh; padding:14px; overflow:auto; align-content:start; }
}
@media(pointer:coarse) {
  .touch-keys { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:12px; }
  .touch-keys button { background:#212b3e; border:1px solid #3b4860; border-radius:5px; padding:7px 1px; font-size:12px; font-weight:600; touch-action:none; user-select:none; }
  .touch-keys button.active.blue { background:var(--blue); color:#112336; } .touch-keys button.active.pink { background:var(--pink); color:#351c2c; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }