:root {
  color-scheme: dark;
  --bg: #05070d;
  --panel: rgba(10, 14, 24, 0.82);
  --accent-a: #ff5470;
  --accent-b: #29c5ff;
  --text: #eef2ff;
  --muted: #93a0c2;
  /* Glass material: a translucent, blurred surface with a thin bright rim
     light along its top edge — the standard "liquid glass" look. */
  --glass-fill: rgba(255, 255, 255, 0.10);
  --glass-fill-active: rgba(255, 255, 255, 0.22);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-blur: blur(22px) saturate(180%);
  /* Spring: a slight overshoot-then-settle, like iOS's UIKit spring
     animations. Ease: a plain fast-out-slow-in for fades/size changes that
     shouldn't bounce. */
  --spring: cubic-bezier(0.33, 1.25, 0.4, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --spring: linear; --ease: linear; }
}

* { box-sizing: border-box; }

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pop-in {
  from { opacity: 0; transform: translate(-50%, 6px) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

#camera-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  transform: scale(var(--zoom, 1));
}

#hud-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  transform: scale(var(--zoom, 1));
}

#topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: env(safe-area-inset-top, 10px) 10px 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.05) 75%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  pointer-events: none;
}

.scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 8px 16px;
  max-width: 520px;
  margin: 0 auto;
  pointer-events: auto;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  animation: drop-in 0.5s var(--spring) both;
}

.player { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.player .name { outline: none; min-width: 3ch; }
.player .wins {
  min-width: 1.6em;
  text-align: center;
  font-size: 1.2em;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 2px 6px;
}
.swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.6);
}
#swatch-a { background: var(--accent-a); }
#swatch-b { background: var(--accent-b); }
.vs { color: var(--muted); font-size: 0.85em; font-weight: 700; }

#status-line {
  width: fit-content;
  margin: 8px auto 0;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 5px 16px;
  font-size: 0.8em;
  color: var(--muted);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background 0.2s var(--ease);
}

#event-toast {
  position: absolute;
  top: 90px;
  left: 50%;
  background: var(--glass-fill-active);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 1.05em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 32px -16px rgba(0, 0, 0, 0.75);
  animation: pop-in 0.45s var(--spring) both;
  transition: opacity 0.2s var(--ease);
}
#event-toast.hidden { opacity: 0; pointer-events: none; animation: none; }

#countdown-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 40;
  padding: 20px;
}
#countdown-overlay[hidden] { display: none; }
/* Every direct child shares the same single grid cell, so the ring and the
   number stack centered on top of each other instead of sitting side by
   side — later children (the text) paint over earlier ones (the ring). */
#countdown-overlay > * { grid-area: 1 / 1; }

#countdown-ring {
  width: 46vmin;
  height: 46vmin;
  max-width: 280px;
  max-height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.55) 0%, rgba(255, 210, 63, 0.22) 45%, rgba(255, 210, 63, 0) 72%);
  animation: countdown-ring-pulse 0.55s var(--ease) both;
}
#countdown-ring.phrase {
  background: radial-gradient(circle, rgba(255, 84, 112, 0.6) 0%, rgba(255, 84, 112, 0.25) 45%, rgba(255, 84, 112, 0) 72%);
  animation-duration: 0.6s;
}

@keyframes countdown-ring-pulse {
  from { opacity: 0; transform: scale(0.25); }
  55% { opacity: 1; }
  to { opacity: 0; transform: scale(1.45); }
}

#countdown-text {
  font-size: clamp(3.5em, 22vw, 7em);
  font-weight: 800;
  color: #ffd23f;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.4), 0 0 34px rgba(255, 210, 63, 0.55), 0 6px 18px rgba(0, 0, 0, 0.7);
  animation: countdown-pop 0.5s var(--spring) both;
}
#countdown-text.phrase {
  font-size: clamp(1.8em, 11vw, 3.2em);
  color: #ff5470;
  text-shadow: 0 0 10px rgba(255, 84, 112, 0.45), 0 0 34px rgba(255, 84, 112, 0.6), 0 6px 18px rgba(0, 0, 0, 0.7);
}

@keyframes countdown-pop {
  from { opacity: 0; transform: scale(0.4) rotate(-6deg); }
  60% { transform: scale(1.15) rotate(2deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

#controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  transition: padding 0.4s var(--ease), background 0.4s var(--ease);
}

/* Collapsed: shrink the footer down to just the toggle handle so the rest
   of the camera view (and taps on it, e.g. tracing the stadium rim) is
   free of both the buttons and the footer's own background/click area. */
#controls.collapsed {
  padding-top: 26px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: none;
  /* The footer's own box would otherwise still swallow taps meant for the
     camera view underneath, even fully transparent — only the handle
     itself should stay tappable. */
  pointer-events: none;
}

/* A grid track animates smoothly to any actual content height (unlike
   max-height, which snaps open/closed near-instantly once the animated
   cap crosses the real content height, then sits idle for the rest of the
   transition — the "jump, then pause" look). 1fr -> 0fr interpolates the
   row size continuously regardless of what's inside it; the inner element
   (min-height:0, overflow:hidden) is what actually gets clipped as the
   track shrinks. */
#controls-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.4s var(--ease), opacity 0.3s var(--ease);
}
#controls-body-inner {
  min-height: 0;
  overflow: hidden;
}
#controls.collapsed #controls-body {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s var(--ease), opacity 0.2s var(--ease);
}
#controls.collapsed #btn-toggle-controls { pointer-events: auto; }

#btn-toggle-controls {
  position: absolute;
  top: 0;
  left: 50%;
  width: 56px;
  height: 22px;
  padding: 0;
  border-radius: 0 0 14px 14px;
  border-top: none;
  background: var(--glass-fill);
  font-size: 0.7em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) rotate(0deg);
  transition: transform 0.35s var(--spring), background 0.2s var(--ease);
  will-change: transform;
}
#controls.collapsed #btn-toggle-controls { transform: translateX(-50%) rotate(180deg); }
#btn-toggle-controls:active { transform: translateX(-50%) scale(0.9); }
#controls.collapsed #btn-toggle-controls:active { transform: translateX(-50%) rotate(180deg) scale(0.9); }

.step-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 6px;
}

button {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.82em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s var(--spring), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  will-change: transform;
}
button:active {
  transform: scale(0.94);
  background: var(--glass-fill-active);
  transition: transform 0.15s var(--ease), background 0.1s var(--ease);
}
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.armed {
  border-color: #ffd23f;
  color: #ffd23f;
  box-shadow: inset 0 1px 0 rgba(255, 210, 63, 0.35), 0 0 0 1px rgba(255, 210, 63, 0.15), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
}

#camera-select {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.82em;
  font-weight: 600;
  max-width: 260px;
}
#camera-select[hidden] { display: none; }

#tolerance-row {
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78em;
}
#tolerance-row[hidden] { display: none; }
#tolerance-label { white-space: nowrap; }
#tolerance-slider { flex: 1; max-width: 220px; }

#zoom-row[hidden] { display: none; }
#zoom-row { align-items: center; }
#zoom-label {
  min-width: 3.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 600;
}
#btn-zoom-in, #btn-zoom-out {
  font-size: 1.1em;
  font-weight: 700;
  min-width: 2.6em;
  padding: 6px 10px;
}

#help-text {
  text-align: center;
  font-size: 0.75em;
  color: var(--muted);
  min-height: 1.4em;
}

#log-panel {
  max-height: 78px;
  overflow-y: auto;
  font-size: 0.72em;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .scoreboard { max-width: 620px; }
  button { font-size: 0.9em; }
}

/* ---------- First-open walkthrough ---------- */

#walkthrough {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 4, 9, 0.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: opacity 0.2s ease;
}
#walkthrough[hidden] { display: none; }

.walkthrough-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: rgba(24, 28, 42, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  animation: drop-in 0.5s var(--spring) both;
}

.walkthrough-content {
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.walkthrough-content.switching {
  opacity: 0;
  transform: translateY(4px);
}

.walkthrough-skip {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 600;
  padding: 6px 8px;
}
.walkthrough-skip:active { transform: none; opacity: 0.7; }

.walkthrough-icon {
  width: 52px;
  height: 52px;
  margin: 4px auto 16px;
  border-radius: 50%;
  background: rgba(255, 210, 63, 0.12);
  border: 1px solid rgba(255, 210, 63, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.walkthrough-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}
.walkthrough-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
}
.walkthrough-dots span.active {
  background: #ffd23f;
  transform: scale(1.3);
}

.walkthrough-card h2 {
  font-size: 1.1em;
  margin: 0 0 10px;
}

.walkthrough-card p {
  color: var(--muted);
  font-size: 0.88em;
  line-height: 1.55;
  margin: 0 0 22px;
}

.walkthrough-actions {
  display: flex;
  gap: 10px;
}
.walkthrough-actions button { flex: 1; padding: 11px 12px; }

.walkthrough-primary {
  background: #ffd23f;
  border-color: #ffd23f;
  color: #1a1400;
}

.walkthrough-secondary[hidden] { display: none; }