:root {
  color-scheme: dark;
  --background: #100b16;
  --surface: #191220;
  --text: #faf2e7;
  --muted: #cabbd0;
  --accent: #e6f58a;
  --warm: #ffd0a9;
  --line: #48364c;
  font: 16px/1.4 system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: radial-gradient(ellipse at 50% 30%, #2a192a, var(--background) 75%); }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.cabinet {
  display: grid; grid-template-rows: auto minmax(340px, 1fr) auto; gap: 12px;
  width: min(100%, 1180px); min-height: 100vh; min-height: 100svh; margin: auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 46px; gap: 12px; }
.arcade { display: inline-flex; width: fit-content; align-items: center; gap: 9px; text-decoration: none; color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .13em; min-height: 44px; }
.arcade > span:first-child { color: var(--warm); font-size: 1.2rem; font-weight: 400; }
.arcade b { color: var(--text); }
.arcade:hover { color: var(--text); }
.scores { display: flex; gap: 20px; text-align: center; }
.scores div { min-width: 48px; }
.scores span { display: block; font: 750 1.45rem/1.03 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.scores div:first-child span { color: var(--accent); }
.scores small { font-size: .59rem; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
#sound { width: 44px; height: 44px; justify-self: end; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
#sound:hover { border-color: var(--warm); }
#sound svg { width: 20px; height: 20px; }
#sound .slash, #sound[aria-pressed="true"] .waves { display: none; }
#sound[aria-pressed="true"] .slash { display: inline; }
.arena { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #322236; text-align: center; }
.room, canvas, .play-surface { position: absolute; inset: 0; width: 100%; height: 100%; }
.room { background: url("art/room.svg") center center / 100% 100% no-repeat; }
.play-surface { border: 0; background: transparent; cursor: pointer; touch-action: none; user-select: none; -webkit-touch-callout: none; }
.play-surface:focus-visible { outline-offset: -5px; border-radius: inherit; }
.intro, .result, .feedback, .action { position: absolute; left: 0; right: 0; pointer-events: none; padding-inline: 12px; }
.intro, .result { top: 23%; text-shadow: 0 2px 28px #1d0e21; }
.edition { display: inline-flex; gap: 9px; align-items: center; color: var(--warm); font-size: clamp(.61rem, 2vw, .73rem); font-weight: 750; letter-spacing: .23em; }
.edition i { width: 5px; height: 5px; border: 1px solid currentColor; transform: rotate(45deg); }
h1, h2, p { margin: 0; }
h1, h2 { margin-block: 3px 8px; font-weight: 850; line-height: .98; letter-spacing: -.078em; }
h1 { font-size: clamp(3.6rem, 11vw, 8rem); }
h1 span { color: var(--accent); font-style: italic; padding-right: .09em; }
h2 { font-size: clamp(2.75rem, 8vw, 5.5rem); }
.intro p, .result p { font-size: clamp(.85rem, 2.5vw, 1.05rem); color: #f1dbe4; }
.feedback { top: 30%; color: var(--accent); font-size: clamp(1.4rem, 5vw, 3.1rem); font-weight: 850; letter-spacing: -.045em; text-shadow: 0 3px 20px #211024; }
.action { bottom: 4%; display: grid; justify-items: center; gap: 9px; }
#cue { padding: 6px 13px; border-radius: 24px; background: #201522ee; color: var(--text); font-size: .78rem; font-weight: 720; letter-spacing: .03em; }
.arena[data-phase="window"] #cue, .arena[data-phase="charging"][data-sweet="true"] #cue { background: var(--accent); color: #1d2311; }
.meter { display: none; position: relative; overflow: hidden; width: min(52%, 230px); height: 9px; border-radius: 20px; border: 1px solid #baa0b3; background: #1d1420; }
.arena[data-phase="charging"] .meter { display: block; }
#fill { width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: #e9ba97; }
.sweet { position: absolute; top: 0; bottom: 0; left: var(--sweet-start, 69%); width: var(--sweet-width, 13%); border-inline: 1px solid #f6ffb9; background: #d4eb8050; }
.arena[data-sweet="true"] #fill { background: var(--accent); }
.arena[data-hot="true"] #fill { background: #ff9b9a; }
.controls { min-height: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px 10px; color: var(--muted); font-size: .73rem; }
.controls b { color: var(--text); font-size: .66rem; letter-spacing: .09em; }
.controls i { width: 3px; height: 3px; border-radius: 50%; background: var(--warm); }
.keyboard { margin-left: 12px; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--text); font-size: .62rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 560px) {
  .cabinet { padding-inline: max(8px, env(safe-area-inset-left), env(safe-area-inset-right)); gap: 7px; }
  .bar { padding-inline: 4px; }
  .arcade { letter-spacing: .08em; font-size: .62rem; gap: 5px; }
  .arcade b { display: block; }
  .scores { gap: 6px; }
  .arena { border-radius: 17px; }
}
@media (pointer: coarse) { .keyboard { display: none; } }
@media (max-height: 470px) and (orientation: landscape) {
  .cabinet { grid-template-rows: auto minmax(205px, 1fr) auto; gap: 3px; padding-block: 3px; }
  .intro, .result { top: 16%; }
  h1 { font-size: clamp(2.4rem, 14vh, 4rem); }
  h2 { font-size: clamp(2rem, 10vh, 3.2rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .arena[data-impact="face"] .room { animation: camera-kick .22s ease-out; }
  .arena[data-impact="face"] .result { animation: reveal-result .16s .17s both; }
  @keyframes camera-kick {
    0%, 100% { transform: none; }
    26% { transform: translate(3px, 5px) scale(1.025); }
    55% { transform: translate(-2px, -2px) scale(1.015); }
  }
  @keyframes reveal-result { from { opacity: 0; } to { opacity: 1; } }
}