/* Shell styling only — the game itself renders to canvas.
   The page exists to get out of the way of the play surface. */

:root {
  --bg: #05080d;
  --panel: #101822;
  --panel-2: #16212d;
  --line: #26333f;
  --ink: #e6eef6;
  --ink-dim: #93a6b8;
  --accent: #00d0ff;
  --accent-ink: #04222c;
  --focus: #7cf67c;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Full-bleed canvas. The old build boxed this in a 900px card. */
#game {
  display: block;
  width: 100vw;
  height: 100dvh;
  touch-action: none;
  cursor: crosshair;
  outline: none;
}

.chrome {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  z-index: 10;
}

.icon-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(16, 24, 34, .72);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .15s, border-color .15s, transform .15s;
}
.icon-btn:hover { background: rgba(0, 208, 255, .16); border-color: var(--accent); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.icon-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* A finger is not a mouse pointer. 44px is the floor; coarse pointers get
   more, and more room between targets so a thumb cannot catch two. */
@media (pointer: coarse) {
  .icon-btn { width: 54px; height: 54px; }
  .chrome { gap: 12px; }
}

/* ── Volume ──────────────────────────────────────────────────────────────
   The speaker and its slider are one control: the slider unfurls out of the
   button rather than sitting on screen permanently, which is what keeps a
   persistent chrome bar down to icons.

   Width, not display, is what animates — a slider that appears at full size
   pops, and one that grows reads as coming out of the button it belongs to.
   It stays open while focused so the keyboard route is not a thing that
   vanishes the moment you tab to it. */
.volume {
  display: flex;
  align-items: center;
  background: rgba(16, 24, 34, .72);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .18s ease;
}
.volume:hover, .volume:focus-within { border-color: var(--accent); }

/* The button inside loses its own shell — the wrapper is the shell now. */
.volume .icon-btn {
  background: none;
  border: 0;
  border-radius: 10px;
}
.volume .icon-btn:hover { background: rgba(0, 208, 255, .16); }

.volume-slider {
  width: 0;
  opacity: 0;
  margin: 0;
  height: 30px;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
  transition: width .2s ease, opacity .2s ease, margin .2s ease;
}
.volume:hover .volume-slider,
.volume:focus-within .volume-slider,
.volume.open .volume-slider {
  width: 92px;
  opacity: 1;
  margin: 0 14px 0 2px;
}

/* Track and thumb have to be styled per-engine; there is no shorthand that
   reaches both. Same two colours in each, so they cannot drift apart. */
.volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill, 100%),
                              rgba(255, 255, 255, .22) var(--fill, 100%));
}
.volume-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .22);
}
.volume-slider::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.volume-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
}
.volume-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
}
.volume-slider:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* A finger has no hover. On a touch device the speaker opens the slider and a
   second tap mutes, so both actions stay reachable from one control. */
@media (pointer: coarse) {
  .volume:hover .volume-slider { width: 0; opacity: 0; margin: 0; }
  .volume.open .volume-slider { width: 108px; opacity: 1; margin: 0 16px 0 2px; }
}

/* Muted is a state worth seeing without reading the icon. */
.volume.is-muted { border-color: rgba(255, 255, 255, .18); }
.volume.is-muted .icon-btn { color: rgba(242, 246, 253, .5); }

/* Which speaker shows is decided in main.js by toggling `hidden`, not here.
   Three sibling icons switched by CSS have a failure mode that is much worse
   than the thing they do: if the stylesheet is missing, stale, or still in
   flight, every rule that says `display: none` is missing with it and all
   three render at once, stacked down the button. `hidden` is in the markup, so
   the icons are correct with no stylesheet at all. */

/* The pause button shows what pressing it will do, not what state you are in —
   a play triangle while paused, two bars while running. */
#pauseBtn .i-play { display: none; }
#pauseBtn[aria-pressed="true"] .i-pause { display: none; }
#pauseBtn[aria-pressed="true"] .i-play { display: block; }

/* ── Rotate prompt ───────────────────────────────────────────────────── */

.rotate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  background: var(--bg);
  color: var(--ink);
}
.rotate svg { color: var(--accent); }
.rotate-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.rotate-body {
  margin: 0;
  max-width: 34ch;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* Only where it is actually needed: portrait, and too narrow to deliver the
   three-second lookahead the game promises everyone else. */
@media (orientation: portrait) and (max-width: 700px) {
  .rotate { display: grid; }
  .chrome { display: none; }
}

/* ── Settings dialog ─────────────────────────────────────────────────── */

dialog#settings {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  max-width: min(480px, calc(100vw - 32px));
  width: 100%;
}
dialog#settings::backdrop {
  background: rgba(3, 6, 10, .72);
  backdrop-filter: blur(4px);
}

.sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}

.sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.sheet header h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.sheet header .icon-btn {
  width: 32px; height: 32px;
  font-size: 1.3rem; line-height: 1;
  background: transparent; border-color: transparent;
}

.sheet section { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sheet section:last-of-type { border-bottom: none; }
.sheet h3 {
  margin: 0 0 10px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.row-label { flex: 1; min-width: 0; display: grid; gap: 1px; }
.row-label span { font-size: .9rem; }
.row-label small { font-size: .72rem; color: var(--ink-dim); line-height: 1.35; }

.row input[type="range"] {
  width: 128px;
  accent-color: var(--accent);
  flex: none;
}
.row output {
  font: 600 .78rem ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--ink-dim);
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.row select {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}

/* Switch — state is carried by position, label text AND colour, never colour alone. */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px 3px 4px;
  cursor: pointer;
  color: var(--ink-dim);
  font: inherit;
  font-size: .8rem;
  transition: background .15s, color .15s, border-color .15s;
}
.toggle .knob {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: background .15s, transform .15s;
}
.toggle.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.toggle.on .knob { background: var(--accent-ink); transform: translateX(2px); }
.toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sheet footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 18px;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
}
.sheet footer button {
  font: inherit;
  font-size: .87rem;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--line);
}
.sheet footer .ghost { background: transparent; color: var(--ink-dim); }
.sheet footer .ghost:hover { color: var(--ink); border-color: var(--ink-dim); }
.sheet footer .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
.sheet footer .primary:hover { filter: brightness(1.1); }
.sheet footer button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Utility ─────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  background: var(--bg);
  padding: 24px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}