:root {
  --bg: #0b0d17;
  --bg-2: #12152a;
  --card: #161a33;
  --line: #2a3060;
  --text: #eef0ff;
  --muted: #9aa0c8;
  --accent: #5ef2c2;
  --accent-2: #7c6cff;
  --warn: #ffb547;
  --bad: #ff5d7a;
  --coin: #ffd25e;
  --radius: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

.screen { display: none; }
body[data-screen="home"] #home,
body[data-screen="safety"] #safety,
body[data-screen="play"] #play,
body[data-screen="results"] #results { display: block; }
body[data-screen="protocol"] #protocol { display: block; }

/* ---------- home ---------- */

#home, #safety {
  max-width: 880px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 16px 48px;
}

.hero { text-align: center; padding: 24px 0 8px; }

.logo {
  font-weight: 900;
  font-size: clamp(44px, 11vw, 84px);
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo span { margin-left: 0.15em; }
.tagline { color: var(--muted); max-width: 520px; margin: 12px auto 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 16px;
}
.card h2 { margin: 0 0 14px; font-size: 18px; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.choice:has(input:checked) { border-color: var(--accent); background: rgba(94, 242, 194, 0.06); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { color: var(--muted); font-size: 14px; }
.choice svg { width: 100%; height: auto; background: var(--bg-2); border-radius: 8px; }
.choice .badge {
  position: absolute; top: 10px; right: 10px;
  font-style: normal; font-size: 12px; font-weight: 600;
  background: var(--accent); color: #062018;
  padding: 2px 8px; border-radius: 99px;
}
.choice:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.choice.disabled { opacity: 0.45; cursor: not-allowed; }
.note-inline { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

svg .floor { stroke: var(--line); stroke-width: 2; }
svg .device { fill: #222851; stroke: var(--accent-2); stroke-width: 2; }
svg .lens { fill: var(--accent); }
svg .ray { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
svg .body { fill: none; stroke: var(--text); stroke-width: 3; }
svg .body-line { fill: none; stroke: var(--text); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
svg .hint { fill: var(--muted); font-size: 11px; text-anchor: middle; }
svg .night { fill: #0a1230; }
svg .moon { fill: #e8eeff; }
svg .fly { fill: #f4ffd0; }
svg .fly-glow { fill: rgba(216, 255, 106, 0.3); }
svg .fly.gold { fill: #fff3c4; }
svg .fly-glow.gold { fill: rgba(255, 210, 94, 0.35); }
svg .jar { fill: rgba(190, 220, 255, 0.18); stroke: #dcefff; stroke-width: 2; }
svg .lid { fill: #c9a46a; }
svg .tunnel { fill: rgba(124, 108, 255, 0.12); stroke: var(--accent-2); stroke-width: 2; }
svg .gate { stroke: var(--accent-2); stroke-width: 6; stroke-linecap: round; }
svg .ball { fill: var(--accent); }

.settings { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.label { font-weight: 600; font-size: 14px; color: var(--muted); }
.label output { color: var(--text); margin-left: 6px; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 14px;
  transition: all 0.15s;
}
.seg input:checked + span { background: var(--accent); border-color: var(--accent); color: #062018; font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }

input[type="range"] { width: 100%; accent-color: var(--accent); }

.toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.toggle input { width: 20px; height: 20px; accent-color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

.btn {
  border: 0;
  border-radius: 99px;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: linear-gradient(90deg, var(--accent), #48d4f0); color: #062018; min-width: 200px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.small { padding: 8px 16px; font-size: 14px; }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.error { color: var(--bad); text-align: center; margin: 12px 0 0; }

.note ul { margin: 0; padding-left: 20px; color: var(--muted); }

.disclaimer { font-weight: 600; margin: 0 0 12px; }
.questions { margin: 12px 0 16px; padding-left: 22px; display: grid; gap: 14px; }
.questions li > span { display: block; margin-bottom: 8px; }
.note li { margin: 6px 0; }

.bests { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.bests div { background: var(--bg-2); border-radius: 12px; padding: 10px 14px; min-width: 120px; }
.bests .v { display: block; font-size: 24px; font-weight: 800; }
.bests .k { color: var(--muted); font-size: 13px; }
.history { list-style: none; margin: 0; padding: 0; }
.history li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.history li span:first-child { color: var(--muted); }

/* ---------- play ---------- */

#play {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #1b1f45 0%, var(--bg) 70%);
}

#game { position: absolute; inset: 0; width: 100%; height: 100%; }

.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: max(12px, env(safe-area-inset-top)) 16px 0;
  pointer-events: none;
}
.hud-left { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.hud-right { justify-self: end; }
.stat .k { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.stat .v { font-size: clamp(20px, min(4vw, 6vh), 34px); font-weight: 800; font-variant-numeric: tabular-nums; }
.combo {
  align-self: center;
  background: var(--accent-2);
  border-radius: 99px;
  padding: 4px 12px;
  font-weight: 800;
  font-size: 18px;
}

.hud-center { text-align: center; }
.timer {
  font-size: clamp(44px, min(12vw, 15vh), 104px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(94, 242, 194, 0.45);
}
.timer.done { color: var(--coin); text-shadow: 0 0 24px rgba(255, 210, 94, 0.5); }
.target-bar { width: clamp(160px, 30vw, 320px); height: 8px; background: var(--line); border-radius: 99px; margin: 8px auto 4px; overflow: hidden; }
.target-bar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--coin)); transition: width 0.2s linear; }
.target-label { font-size: 14px; color: var(--muted); }

.form {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  padding: 8px 14px; border-radius: 99px;
  font-weight: 700; font-size: clamp(14px, 2.4vw, 18px);
  max-width: 44vw;
}
.form i { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); flex: none; }
.form.ok i { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.form.bad i { background: var(--bad); box-shadow: 0 0 12px var(--bad); }
.form.bad { color: var(--bad); }

.cam {
  position: absolute;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: clamp(140px, 24vw, 280px);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #000;
  transition: all 0.35s ease;
}
.cam video, .cam canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transform: scaleX(-1); /* selfie view */
}
.cam.hidden { opacity: 0; pointer-events: none; }
/* During calibration the camera takes the stage so you can position yourself. */
#play.calibrating .cam {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: min(92vw, 120vh);
  max-height: 86vh;
  opacity: 1;
}
#play.calibrating #game, #play.calibrating .hud { opacity: 0.15; }

.center-msg {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 520px);
  text-align: center;
  background: rgba(11, 13, 23, 0.82);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 24px;
  backdrop-filter: blur(6px);
}
#play.calibrating .center-msg { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
.center-msg h3 { margin: 6px 0; font-size: clamp(22px, 4.5vw, 34px); }
.center-msg p { margin: 0; color: var(--muted); font-size: clamp(15px, 2.6vw, 19px); }
.center-msg.bad h3 { color: var(--bad); }

.ring { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 0.15s linear; }
.center-msg.bad .ring-fg { stroke: var(--bad); }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; font-weight: 900; }

.checklist { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.checklist li {
  font-size: 14px; padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted);
}
.checklist li::before { content: "○ "; }
.checklist li.ok { border-color: var(--accent); color: var(--accent); }
.checklist li.ok::before { content: "✓ "; }

.loading {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: rgba(11, 13, 23, 0.92);
}
.spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.debug {
  position: absolute; left: 12px; bottom: 60px;
  margin: 0; padding: 10px;
  background: rgba(0, 0, 0, 0.7); border-radius: 8px;
  font: 12px/1.4 ui-monospace, Menlo, monospace; color: #b8ffe6;
  max-width: 46vw; white-space: pre-wrap;
}

.play-controls {
  position: absolute;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  opacity: 0.7;
}
.play-controls:hover, .play-controls:focus-within { opacity: 1; }

/* ---------- results ---------- */

#results { padding: max(24px, env(safe-area-inset-top)) 16px 48px; }
.result-card {
  max-width: 640px; margin: 0 auto;
  text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 28px 20px;
}
.eyebrow { color: var(--muted); margin: 0; font-weight: 600; }
.big-time { font-size: clamp(64px, 18vw, 120px); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.res-sub { margin: 0 0 20px; color: var(--accent); font-weight: 700; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.res-grid div { background: var(--bg-2); border-radius: 12px; padding: 12px; }
.res-grid .v { display: block; font-size: 28px; font-weight: 800; }
.res-grid .k { color: var(--muted); font-size: 13px; }
.tip { color: var(--muted); margin: 18px 0 0; }

@media (max-width: 560px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-center { grid-column: 1 / -1; grid-row: 1; }
  .hud-left { grid-row: 2; margin-top: 8px; }
  .hud-right { grid-row: 2; margin-top: 8px; }
  .debug { max-width: 90vw; bottom: 64px; }
}

/* ---------- protocol (?protocol, Stage 0 field test) ---------- */
/* Read from the floor at 50–80 cm: everything during the run is big. */

#protocol {
  max-width: 880px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 16px 48px;
  /* width of the camera while calibrating; the text below it is laid out from it */
  --camw: min(92vw, calc((100vh - 330px) * 4 / 3), 640px);
}
a.btn { display: inline-block; text-decoration: none; }
.p-h { font-size: clamp(20px, 4.5vw, 26px); margin: 0 0 12px; }
.p-safety {
  border-left: 4px solid var(--warn);
  background: rgba(255, 181, 71, 0.08);
  padding: 10px 14px;
  border-radius: 8px;
}
.p-list { padding-left: 20px; color: var(--muted); }
.p-list li { margin: 6px 0; }
.p-list b { color: var(--text); }
.p-input {
  font: inherit;
  font-size: 18px;
  width: 100%;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
}
.p-input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.p-agree { margin-top: 16px; }
.p-back { margin-top: 16px; }

/* camera box: inline on the check step, a corner during the run, centre stage while calibrating */
.p-cam {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 4 / 3;
  margin: 0 auto 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #000;
}
.p-cam video, .p-cam canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transform: scaleX(-1); /* selfie view */
}
/* Kept rendered (not display:none) so the browser keeps delivering frames. */
.p-cam[data-size="off"] { position: fixed; width: 2px; height: 2px; opacity: 0; pointer-events: none; margin: 0; left: 0; top: 0; }
.p-cam[data-size="small"], .p-cam[data-size="big"] { position: fixed; z-index: 3; margin: 0; transition: all 0.3s ease; }
.p-cam[data-size="small"] {
  right: 12px;
  top: max(64px, calc(env(safe-area-inset-top) + 56px));
  width: clamp(96px, 22vw, 200px);
}
.p-cam[data-size="big"] {
  left: 50%;
  top: max(60px, calc(env(safe-area-inset-top) + 52px));
  transform: translateX(-50%);
  width: var(--camw);
}
.p-cam.ok { border-color: var(--accent); }
.p-cam.bad { border-color: var(--bad); }

.p-checks { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.p-checks li {
  display: grid;
  grid-template-columns: 28px 140px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.p-checks li::before { content: "…"; color: var(--muted); font-weight: 800; }
.p-checks li[data-state="ok"]::before { content: "✓"; color: var(--accent); }
.p-checks li[data-state="warn"]::before { content: "!"; color: var(--warn); }
.p-checks li[data-state="bad"]::before { content: "✗"; color: var(--bad); }
.p-checks b { font-weight: 600; }
.p-checks span { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }

/* run: full screen, hands-free */
.p-run {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 0%, #1b1f45 0%, var(--bg) 70%);
}
.p-run[hidden] { display: none; }
.p-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.p-count { font-weight: 800; font-size: clamp(16px, 3.4vw, 22px); color: var(--muted); }
.p-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.5vh, 24px);
  text-align: center;
}
.p-ring { width: min(56vmin, 340px); height: min(56vmin, 340px); flex: none; }
.p-ring span { font-size: min(24vmin, 150px); font-variant-numeric: tabular-nums; }
.p-ring.paused .ring-fg { stroke: var(--bad); }
.p-text { max-width: 760px; }
.p-phase { margin: 0; color: var(--accent); font-weight: 800; font-size: clamp(16px, 3.6vw, 24px); text-transform: uppercase; letter-spacing: 0.06em; }
.p-phase.bad { color: var(--bad); }
.p-title { margin: 4px 0; font-size: clamp(28px, 7vw, 54px); line-height: 1.1; }
.p-hint { margin: 0; color: var(--muted); font-size: clamp(17px, 3.8vw, 26px); }
.p-run.calibrating .p-ring { display: none; }
.p-run.calibrating .p-main { justify-content: flex-start; padding-top: calc(var(--camw) * 0.75 + 16px); }
#pr-form { max-width: none; white-space: nowrap; }

.p-meter { display: flex; align-items: center; gap: 10px; margin: 14px auto 0; width: min(92vw, 560px); color: var(--muted); font-weight: 700; }
.p-meter-track { position: relative; flex: 1; height: 20px; border-radius: 99px; background: var(--line); }
/* ±1 sits at 1/1.2 of the half-width: the control is clamped at ±1.2. */
.p-mark { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--muted); }
.p-mark[data-side="-1"] { left: calc(50% - 50% / 1.2); }
.p-mark[data-side="1"] { left: calc(50% + 50% / 1.2); }
.p-mark.hit { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.p-mark.target { background: var(--coin); box-shadow: 0 0 16px var(--coin); width: 10px; margin-left: -5px; }
#pr-dot {
  position: absolute; top: 50%; left: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
}

.p-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding-top: 8px; }
.btn.p-big {
  min-height: 64px;
  min-width: min(42vw, 240px);
  font-size: clamp(18px, 3.8vw, 22px);
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--line);
}
.btn.p-big[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.btn.armed { border-color: var(--bad); color: var(--bad); }

/* Phone on its side: ring left, text right, camera in the top-right corner. */
@media (orientation: landscape) and (max-height: 560px) {
  #protocol { --camw: min(46vw, calc((100vh - 150px) * 4 / 3)); --smallw: min(calc(30vh * 4 / 3), 150px); }
  .p-main { flex-direction: row; text-align: left; gap: 20px; padding-right: calc(var(--smallw) + 8px); }
  .p-ring { width: min(46vh, 220px); height: min(46vh, 220px); }
  .p-ring span { font-size: min(20vh, 100px); }
  .p-text { flex: 1; min-width: 0; }
  .p-title { font-size: clamp(22px, 7.5vh, 40px); }
  .p-hint { font-size: clamp(15px, 4.4vh, 20px); }
  .p-phase { font-size: clamp(14px, 4vh, 18px); }
  .p-meter { margin: 10px 0 0; width: 100%; }
  .p-cam[data-size="small"] { width: var(--smallw); top: max(52px, env(safe-area-inset-top)); }
  .p-cam[data-size="big"] { left: max(16px, env(safe-area-inset-left)); transform: none; top: 52px; }
  .p-run.calibrating .p-main { padding: 0 0 0 calc(var(--camw) + 24px); justify-content: center; }
  .p-buttons { flex-wrap: nowrap; }
  .btn.p-big { min-height: 52px; font-size: 18px; min-width: 0; padding: 10px 22px; }
}

.p-pauses { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.p-pauses li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-2);
}
.p-pauses .when { font-weight: 800; font-variant-numeric: tabular-nums; }
.p-pauses .what { color: var(--muted); }
.p-pauses .tag { font-size: 13px; color: var(--accent); margin-left: 6px; }
.p-pauses .toggle { grid-column: 1 / -1; font-weight: 600; min-height: 44px; }
.p-pauses .toggle input { width: 26px; height: 26px; }
.p-pauses .empty { grid-template-columns: 1fr; color: var(--muted); }
.p-questions small { display: block; color: var(--muted); font-size: 14px; }
.p-questions .seg span { padding: 10px 18px; font-size: 16px; min-width: 48px; text-align: center; }
.p-stopped { color: var(--warn); font-weight: 600; }
.p-file { font: 14px/1.4 ui-monospace, Menlo, monospace; color: var(--muted); overflow-wrap: anywhere; }
#p-summary { margin: 4px 0 16px; text-align: center; }

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