:root {
  --bg: #0d1016;
  --panel: #161b25;
  --edge: #262d3b;
  --ink: #e8ecf4;
  --dim: #9aa3b8;
  --accent: #ffd23f;
}

* { box-sizing: border-box; }

/* [hidden] lives in the browser's own stylesheet, and ANY author rule that sets display
   beats it outright — author styles always win over user-agent styles, whatever the
   specificity. #overlay sets display:grid, so hiding it did nothing and the panel stayed
   over the game. This one line is what makes `element.hidden = true` mean what it says. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

#stage { position: relative; width: 100%; height: 100%; }

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

/* The stream MediaPipe reads. Never shown; the visible copies are the two below. */
#camera { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- overlay */

#overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 0%, #1a2130 0%, var(--bg) 70%);
  overflow: auto;
}

#panel {
  width: min(560px, 100%);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 28px;
}

h1 {
  margin: 0 0 18px;
  font-size: 21px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede { margin: 0 0 8px; font-size: 19px; font-weight: 600; }

/* Sits under the opening line on the first screen only, so it reads as a
   credit rather than a permanent header. */
.byline {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0.85;
}
p { margin: 0 0 14px; color: var(--dim); }
.fineprint { font-size: 13px; color: #6c7488; }
b { color: var(--ink); }

button {
  appearance: none;
  border: 0;
  border-radius: 9px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin: 6px 8px 0 0;
}

.primary { background: var(--accent); color: #17181d; }
.primary:disabled { background: #3a4152; color: #7d8698; cursor: default; }
.ghost { background: transparent; color: var(--dim); border: 1px solid var(--edge); }

/* ------------------------------------------------------------ calibration */

#preview-wrap {
  position: relative;
  margin: 4px 0 16px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
}

#preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mirrored, so moving left on screen matches moving left in real life. */
  transform: scaleX(-1);
}

#countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 64px;
  font-weight: 700;
  text-shadow: 0 3px 18px #000;
  pointer-events: none;
}

#countdown.hold { font-size: 30px; color: var(--accent); }

#face-warning {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px;
  text-align: center;
  background: #b3261e;
  font-size: 13px;
}

#checklist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 18px;
  padding: 0;
  font-size: 14px;
  color: var(--dim);
}

#checklist li { display: flex; align-items: center; gap: 7px; }
#checklist .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #39404f;
}
#checklist .current { color: var(--ink); }
#checklist .current .dot { background: var(--accent); }
#checklist .done { color: #59c17a; }
#checklist .done .dot { background: #59c17a; }

/* ----------------------------------------------------------------- ready */

#live-readout { margin: 0 0 16px; }
#live-label {
  display: inline-block;
  min-width: 90px;
  font-size: 20px;
  font-weight: 700;
}
#live-bar {
  height: 8px;
  margin-top: 8px;
  border-radius: 4px;
  background: #262d3b;
  overflow: hidden;
}
#live-bar i { display: block; height: 100%; width: 0; transition: width 0.12s linear; }

#progress {
  height: 3px;
  margin: 20px 0 10px;
  border-radius: 2px;
  background: #262d3b;
  overflow: hidden;
}
#progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }

#status { margin: 0; font-size: 13px; color: #6c7488; min-height: 1.2em; }

/* ------------------------------------------------------- in-game camera */

/* Stands in for the Unity WebcamView, which is switched off in the web build so the
   page can hold the one camera stream. Positioned to match where it sat in game. */
#hud {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: clamp(180px, 19vw, 300px);
  pointer-events: none;
}

/* The overlay swallows clicks while it is up, so this only ever needs to be live in
   game. The rest of #hud stays click-through so it cannot eat a keypress. */
#hud-recalibrate {
  display: block;
  margin: 0 0 6px auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: auto;
  cursor: pointer;
}

#hud-recalibrate:hover { background: rgba(0, 0, 0, 0.8); border-color: var(--accent); }

#hud-frame {
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
}

#hud-mirror { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

#hud-caption {
  margin-top: 4px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 640px) {
  #panel { padding: 20px; }
  #hud { width: 34vw; right: 10px; bottom: 10px; }
}