:root {
  --bg: #0a0f1e;
  --tile-bg: #161d33;
  --text: #ffffff;
  --text-muted: #b8c0d4;
  --accent: #2f9bff;
  --stage-center: #3a3a3e;
  --stage-mid: #2b2c30;
  --stage-edge: #1c1d1f;
  /* 1% of board height: 10.8px at 1080p, 21.6px at 2160p */
  --u: min(1vh, calc(100vw * 9 / 16 / 100));
  --gap: calc(var(--u) * 0.7);
  --radius: calc(var(--u) * 0.9);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }
button { font: inherit; color: inherit; }

.board { position: fixed; inset: 0; display: grid; place-items: center; }
.grid {
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: var(--gap);
  padding: var(--gap);
}

/* ---------- Center stage ---------- */
.stage {
  grid-row: 2 / 5;
  grid-column: 2 / 5;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 35%, var(--stage-center) 0%, var(--stage-mid) 50%, var(--stage-edge) 100%);
}
.stage-video, .poster { position: absolute; inset: 0; }
.stage-video iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.local-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.stage[data-source="file"] .stage-video iframe,
.stage:not([data-source="file"]) .local-video { visibility: hidden; }
.stage[data-mode="attract"] .stage-video { visibility: hidden; }
/* Local intro: Attract rests on the video's last frame instead of the poster image. */
.stage[data-intro="file"][data-mode="attract"] .local-video { visibility: visible; }
.stage[data-intro="file"] .poster img { display: none; }

.poster { display: flex; justify-content: center; align-items: flex-end; transition: opacity .4s; }
.poster img {
  height: 100%;
  width: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.stage:not([data-mode="attract"]) .poster { opacity: 0; pointer-events: none; }

.prompt {
  position: absolute; left: 5%; top: 50%; translate: 0 -50%;
  width: 25%; margin: 0;
  font-size: calc(var(--u) * 2.6); line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.logo { position: absolute; right: 5%; top: 6%; max-width: 20%; max-height: 14%; object-fit: contain; }

.start {
  position: absolute; left: 50%; top: 48%; translate: -50% -50%;
  width: calc(var(--u) * 12); height: calc(var(--u) * 12);
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #111;
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 3) rgba(0, 0, 0, .45);
  cursor: pointer; transition: transform .2s;
}
.start svg { width: 45%; height: 45%; margin-left: 8%; fill: currentColor; }
.start:hover, .start:focus-visible { transform: scale(1.08); }
.start:focus-visible { outline: calc(var(--u) * .5) solid var(--accent); outline-offset: calc(var(--u) * .5); }

.stage:not([data-mode="attract"]) :is(.prompt, .logo, .start) { display: none; }

.status {
  position: absolute; top: 4%; left: 50%; translate: -50% 0;
  padding: var(--u) calc(var(--u) * 2.4);
  border-radius: 999px; background: rgba(0, 0, 0, .7);
  font-size: calc(var(--u) * 2.4);
}
.sound {
  position: absolute; top: 4%; right: 3%;
  padding: var(--u) calc(var(--u) * 2.4);
  border: 0; border-radius: 999px; background: #fff; color: #111;
  font-size: calc(var(--u) * 2.4); font-weight: 600; cursor: pointer;
}
.stage[data-mode="attract"] .sound { display: none; }

/* ---------- Controls ---------- */
.controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 2.5) calc(var(--u) * 2);
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .8));
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.stage:not([data-mode="attract"]).show-controls .controls,
.stage:not([data-mode="attract"]):not(.playing) .controls,
.stage:not([data-mode="attract"]) .controls:focus-within { opacity: 1; pointer-events: auto; }
.stage[data-mode="attract"] .controls { visibility: hidden; }

.title { margin: 0 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 3); font-weight: 700; }
.bar { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.ctl {
  flex: none; width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6);
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); cursor: pointer;
}
.ctl:hover { background: rgba(255, 255, 255, .28); }
.ctl:focus-visible { outline: calc(var(--u) * .4) solid var(--accent); outline-offset: 2px; }
.ctl svg { width: 55%; height: 55%; fill: currentColor; }
.ctl svg .stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ctl .alt { display: none; }
#btn-play[data-state="playing"] .main, #btn-mute[data-state="muted"] .main { display: none; }
#btn-play[data-state="playing"] .alt, #btn-mute[data-state="muted"] .alt { display: block; }
.stage:not([data-mode="solution"]) #btn-home { display: none; }

.progress {
  position: relative; flex: 1; height: calc(var(--u) * 1.2);
  overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .25); cursor: pointer;
}
.progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); }
.progress:focus-visible { outline: calc(var(--u) * .4) solid var(--accent); outline-offset: 2px; }
.time { min-width: calc(var(--u) * 13); text-align: right; font-size: calc(var(--u) * 2.3); font-variant-numeric: tabular-nums; }

/* ---------- Tiles ---------- */
.tile {
  position: relative; overflow: hidden; padding: 0;
  border: 0; border-radius: var(--radius);
  background: var(--tile-bg); text-align: left; cursor: pointer;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tile:hover img { transform: scale(1.05); }
.tile-label {
  position: absolute; top: calc(var(--u) * .8); left: calc(var(--u) * .8);
  max-width: calc(100% - var(--u) * 1.6);
  padding: calc(var(--u) * .5) calc(var(--u) * .9);
  border-radius: calc(var(--u) * .5); background: rgba(8, 12, 26, .8);
  font-size: calc(var(--u) * 2.3); font-weight: 600; line-height: 1.25;
}
.tile-label small { font-size: .8em; font-weight: 400; color: var(--text-muted); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: box-shadow .2s; }
.tile:focus-visible { outline: none; }
.tile:focus-visible::after { box-shadow: inset 0 0 0 calc(var(--u) * .6) #fff; }
.tile.active::after { box-shadow: inset 0 0 0 calc(var(--u) * .6) var(--accent); }
.tile.active:focus-visible::after { box-shadow: inset 0 0 0 calc(var(--u) * .6) var(--accent), inset 0 0 0 calc(var(--u) * 1.1) #fff; }

.tile--unavailable { cursor: not-allowed; }
.tile--unavailable img { filter: grayscale(1); opacity: .35; }
.tile--brand { display: grid; place-items: center; cursor: default; }
.tile--brand img { object-fit: contain; padding: 18%; }
.tile--brand img + .tile-label { display: none; }
.tile--brand .tile-label { position: static; background: none; text-align: center; font-size: calc(var(--u) * 2.6); }

@keyframes tile-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.grid.pulse .tile { animation: tile-pulse .9s ease-in-out calc(var(--i) * 45ms) 1; }

/* ---------- Toast & fatal ---------- */
.toast {
  position: fixed; left: 50%; bottom: 8%; translate: -50% 0; z-index: 10;
  padding: calc(var(--u) * 1.4) calc(var(--u) * 3);
  border-radius: 999px; background: rgba(0, 0, 0, .88);
  font-size: calc(var(--u) * 2.4);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.toast.show { opacity: 1; }
.fatal { position: fixed; inset: 0; z-index: 20; padding: 8vh 8vw; background: var(--bg); font-size: calc(var(--u) * 2.6); line-height: 1.5; }
.fatal h1 { margin: 0 0 calc(var(--u) * 2); font-size: calc(var(--u) * 4.4); }

@media (prefers-reduced-motion: reduce) {
  .grid.pulse .tile { animation: none; }
  .tile img, .poster, .controls, .toast { transition: none; }
}