:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090718;
  color: #f8f5ff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #090718; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

#game-shell { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, #211345 0, #090718 62%); }
#game-canvas { width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

.hud { position: absolute; z-index: 4; top: max(14px, env(safe-area-inset-top)); left: 18px; right: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; pointer-events: none; }
.hud > div { display: flex; flex-direction: column; gap: 2px; }
.hud-center { text-align: center; align-items: center; }
.hud-right { text-align: right; align-items: flex-end; }
.label { color: #aaa0c5; font-size: 10px; letter-spacing: .18em; font-weight: 700; }
.hud strong { font-size: clamp(16px, 4.8vw, 24px); font-variant-numeric: tabular-nums; }
.pace { position: absolute; z-index: 4; top: max(52px, calc(env(safe-area-inset-top) + 38px)); left: 0; right: 0; text-align: center; color: rgba(218,211,238,.72); font-size: 9px; font-weight: 800; letter-spacing: .18em; pointer-events: none; }

.judgement { position: absolute; z-index: 5; left: 0; right: 0; top: 67%; text-align: center; font-size: clamp(18px, 6vw, 34px); letter-spacing: .12em; font-weight: 900; text-shadow: 0 0 24px currentColor; pointer-events: none; }

.pads { position: absolute; z-index: 6; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); height: 18vh; min-height: 112px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
.pad { border: 1px solid rgba(255,255,255,.18); border-radius: 22px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 28px rgba(255,255,255,.025); backdrop-filter: blur(8px); touch-action: none; }
.pad span { font-size: 24px; font-weight: 900; opacity: .7; }
.pad.left { border-color: rgba(55, 224, 255, .34); }
.pad.right { border-color: rgba(255, 77, 209, .34); }
.pad.pressed.left { background: rgba(55, 224, 255, .25); box-shadow: 0 0 30px rgba(55, 224, 255, .28); }
.pad.pressed.right { background: rgba(255, 77, 209, .25); box-shadow: 0 0 30px rgba(255, 77, 209, .28); }

.panel { position: absolute; z-index: 10; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; background: rgba(7, 5, 20, .82); backdrop-filter: blur(12px); }
.panel .eyebrow { margin: 0 0 12px; color: #46eaff; letter-spacing: .22em; font-size: 11px; font-weight: 800; }
.panel h1, .panel h2 { margin: 0; font-size: clamp(58px, 18vw, 94px); line-height: .82; letter-spacing: -.06em; }
.panel h2 { font-size: clamp(46px, 14vw, 78px); }
.panel p:not(.eyebrow) { margin: 24px 0; color: #c5bdd7; line-height: 1.55; }
.panel button { min-width: 230px; min-height: 58px; border: 0; border-radius: 999px; background: linear-gradient(120deg, #3ce7ff, #ff4dd1); color: #11081d; font-weight: 900; letter-spacing: .08em; box-shadow: 0 10px 45px rgba(106, 85, 255, .36); }
.panel small { margin-top: 14px; color: #817793; }

html[data-mode="desktop"] .hud,
html[data-mode="desktop"] .judgement,
html[data-mode="desktop"] .pace,
html[data-mode="desktop"] .pads,
html[data-mode="desktop"] #game-canvas { display: none; }

@media (prefers-reduced-motion: reduce) {
  .panel, .pad { backdrop-filter: none; }
}