:root {
  --bg: #0a0612;
  --ink: #e9e0ff;
  --accent: #b48dff;
  --hp: #ff4762;
  --hp-low: #ff2030;
  --good: #7af5c0;
}
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Iowan Old Style', 'Palatino', 'Cormorant Garamond', Georgia, serif;
  overflow: hidden;
  user-select: none;
  cursor: none; /* hidden — wand IS the cursor */
}
body.use-mouse { cursor: crosshair; }
#canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
}
/* Camera preview + status chip cluster. Status chip sits directly above
   the video; SVG overlay sits on top of the video so we can render
   per-landmark dots that follow the user's hand on the preview. */
#camera-frame {
  position: fixed;
  bottom: 12px; right: 12px;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}
#cam-stage {
  position: relative;
  width: 100%;
  height: 158px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(180,141,255,0.4);
  background: #000;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
/* Mirrored video — landmark x is also flipped, see input layer. */
#video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: scaleX(-1);
  opacity: 0.75;
  pointer-events: none;
  display: block;
}
#video.hidden { display: none; }

/* Hand-tracking overlay drawn on top of the (already mirrored) video.
   Coords are pushed in via JS as 0..100 of the SVG box, matching the
   visible position of each landmark on the mirrored frame. */
#cam-overlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 220ms ease;
}
#cam-overlay.show { opacity: 1; }
#cam-overlay #cam-bone {
  stroke: rgba(180,141,255,0.85);
  stroke-width: 1.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(180,141,255,0.9));
}
#cam-overlay circle {
  transition: fill 180ms ease, r 180ms ease;
}
#cam-overlay #cam-tip {
  fill: #b48dff;
  filter: drop-shadow(0 0 4px rgba(180,141,255,1));
}
#cam-overlay #cam-base {
  fill: rgba(180,141,255,0.7);
}
#cam-overlay #cam-thumb {
  fill: rgba(255,200,120,0.9);
  filter: drop-shadow(0 0 3px rgba(255,180,80,0.9));
}
#cam-overlay #cam-pinch {
  fill: none;
  stroke: rgba(122,245,192,0);
  stroke-width: 1.4;
  transition: stroke 180ms ease, r 180ms ease;
}
#cam-overlay.pinching #cam-pinch {
  stroke: rgba(122,245,192,0.95);
  filter: drop-shadow(0 0 5px rgba(122,245,192,0.9));
}
#cam-overlay.pinching #cam-tip {
  fill: #7af5c0;
  filter: drop-shadow(0 0 6px rgba(122,245,192,1));
}

/* HUD */
#hud {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.hud-tl, .hud-tr, .hud-bc, .hud-tc {
  position: absolute;
  color: var(--ink);
  text-shadow: 0 0 12px rgba(180,141,255,0.6);
}
.hud-tl { top: 18px; left: 22px; }
.hud-tr { top: 18px; right: 22px; text-align: right; }
.hud-tc { top: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; opacity: 0.6; }
.hud-bc { bottom: 22px; left: 50%; transform: translateX(-50%); text-align: center; }

.hearts-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(255,58,85,0.55));
}
.hearts-row .heart {
  width: 38px; height: 38px;
  display: block;
}
.hearts-row.hit {
  animation: heartsHit 220ms ease-out;
}
@keyframes heartsHit {
  0%   { transform: translateX(0)   scale(1); }
  20%  { transform: translateX(-4px) scale(1.06); filter: drop-shadow(0 0 12px #ff3a55); }
  60%  { transform: translateX(3px)  scale(1.02); }
  100% { transform: translateX(0)   scale(1); }
}

.wave { font-size: 14px; letter-spacing: 0.25em; opacity: 0.85; }
.score { font-size: 26px; letter-spacing: 0.05em; margin-top: 2px; font-variant-numeric: tabular-nums; }

.hint {
  font-size: 12px; letter-spacing: 0.1em;
  opacity: 0.55;
  text-transform: lowercase;
}

/* Overlay screens */
.screen {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,12,32,0.78), rgba(6,3,12,0.96));
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 100;
  text-align: center;
  pointer-events: auto;
}
.screen.hidden { display: none; }
.screen { cursor: default; }
.screen .btn { cursor: pointer; }
.screen h1 {
  font-size: 64px; margin: 0 0 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(180,141,255,0.65), 0 0 48px rgba(180,141,255,0.4);
}
.screen h2 {
  font-size: 18px; margin: 0 0 28px;
  letter-spacing: 0.2em; opacity: 0.7;
  text-transform: uppercase;
}
.screen p {
  max-width: 540px; line-height: 1.6; opacity: 0.78;
  margin: 8px auto 16px;
  font-size: 14px;
}
.screen ul {
  text-align: left;
  list-style: none; padding: 0;
  font-size: 13px; opacity: 0.78;
  line-height: 1.8;
  max-width: 480px;
}
.screen ul li::before { content: "✦  "; color: var(--accent); }
.btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 32px;
  border: 1px solid var(--accent);
  background: rgba(180,141,255,0.08);
  color: var(--ink);
  font: inherit;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 200ms ease;
}
.btn:hover { background: rgba(180,141,255,0.22); }
.status { font-size: 12px; opacity: 0.6; margin-top: 18px; min-height: 18px; }
.err   { color: #ff8a8a; }

/* ── Title stack ─────────────────────────────────────────────── */
.title-stack { display: flex; flex-direction: column; align-items: center; }
.title-eyebrow {
  font-size: 11px; letter-spacing: 0.5em;
  text-transform: uppercase; opacity: 0.55;
  margin-bottom: 14px;
  color: var(--accent);
}

/* ── Wand Select ─────────────────────────────────────────────── */
#wand-select {
  background:
    radial-gradient(ellipse 70% 60% at 50% 20%, rgba(180,141,255,0.12), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255,138,60,0.08), transparent 70%),
    radial-gradient(ellipse at center, rgba(20,12,32,0.85), rgba(4,2,8,0.98));
  justify-content: space-between;
  padding: 60px 40px;
}
.ws-bg-runes {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(180,141,255,0.18) 0, transparent 1px),
    radial-gradient(circle at 82% 22%, rgba(180,141,255,0.14) 0, transparent 1px),
    radial-gradient(circle at 35% 78%, rgba(255,138,60,0.15) 0, transparent 1px),
    radial-gradient(circle at 70% 85%, rgba(122,245,192,0.15) 0, transparent 1px);
  background-size: 380px 380px, 420px 420px, 500px 500px, 460px 460px;
  opacity: 0.6;
  pointer-events: none;
  animation: drift 60s linear infinite;
}
@keyframes drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 380px 380px, -420px 420px, 500px -500px, -460px -460px; }
}
.ws-header { text-align: center; max-width: 720px; }
.ws-title {
  font-size: 56px; margin: 0 0 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(180,141,255,0.5), 0 0 40px rgba(180,141,255,0.25);
}
.ws-sub { font-size: 13px; opacity: 0.6; letter-spacing: 0.08em; margin: 0; }

.ws-rack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  width: min(1200px, 95vw);
  align-items: stretch;
}
.wand-card {
  position: relative;
  border: 1px solid rgba(180,141,255,0.18);
  border-radius: 4px;
  padding: 22px 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(180,141,255,0.04) 60%, rgba(180,141,255,0.08));
  cursor: pointer;
  transition: transform 380ms cubic-bezier(.2,.7,.2,1.1), border-color 300ms, background 300ms, box-shadow 400ms;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 360px;
}
.wand-card::before {
  content: '';
  position: absolute; inset: -1px;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, var(--card-tint, #b48dff), transparent 70%);
  opacity: 0; transition: opacity 380ms;
  pointer-events: none;
  mix-blend-mode: screen;
}
.wand-card:hover, .wand-card.selected {
  transform: translateY(-6px);
  border-color: var(--card-tint, #b48dff);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), color-mix(in oklab, var(--card-tint, #b48dff) 12%, transparent) 100%);
  box-shadow: 0 12px 60px -10px var(--card-tint, #b48dff), inset 0 0 30px -8px var(--card-tint, #b48dff);
}
.wand-card:hover::before, .wand-card.selected::before { opacity: 0.35; }
.wand-card.selected {
  transform: translateY(-10px) scale(1.02);
}

.wc-runeframe {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  margin-bottom: 16px;
}
.wc-runeframe svg { width: 100%; height: 100%; display: block; }
.wc-runeframe .wc-svg-wand { animation: wandSway 6s ease-in-out infinite; transform-origin: 50% 92%; }
.wand-card:hover .wc-runeframe .wc-svg-wand,
.wand-card.selected .wc-runeframe .wc-svg-wand {
  animation: wandFloat 3.4s ease-in-out infinite;
}
@keyframes wandSway {
  0%,100% { transform: rotate(-2deg) translateY(0); }
  50%     { transform: rotate(2deg) translateY(-3px); }
}
@keyframes wandFloat {
  0%,100% { transform: rotate(-3deg) translateY(0); }
  50%     { transform: rotate(3deg) translateY(-12px); }
}
.wc-runeframe .wc-aura {
  transform-origin: 50% 50%;
  animation: auraPulse 4.5s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes auraPulse {
  0%,100% { transform: scale(0.95); opacity: 0.5; }
  50%     { transform: scale(1.08); opacity: 0.85; }
}
.wc-runeframe .wc-rune-ring {
  transform-origin: 50% 50%;
  animation: ringSpin 28s linear infinite;
  opacity: 0.4;
}
.wand-card:hover .wc-runeframe .wc-rune-ring,
.wand-card.selected .wc-runeframe .wc-rune-ring { opacity: 0.85; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

.wc-name {
  font-size: 18px; letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  margin-bottom: 4px;
}
.wc-aff {
  font-size: 10px; letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  color: var(--card-tint, #b48dff);
  opacity: 0.85;
  margin-bottom: 12px;
}
.wc-lore {
  font-size: 12px; line-height: 1.55;
  text-align: center;
  opacity: 0.7;
  margin: 0;
  font-style: italic;
}

.ws-footer {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  min-height: 90px;
}
.ws-pickname {
  font-size: 13px; letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.55;
  min-height: 18px;
}
.ws-confirm:disabled {
  opacity: 0.35; cursor: not-allowed;
  border-color: rgba(180,141,255,0.3);
}
.ws-confirm:not(:disabled) {
  box-shadow: 0 0 30px -8px var(--accent);
}

/* Choose-screen reveal flash */
.ws-flash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  background: radial-gradient(circle at 50% 55%, var(--flash-color, #b48dff) 0%, transparent 55%);
  opacity: 0;
}
.ws-flash.go {
  animation: wsFlash 900ms ease-out forwards;
}
@keyframes wsFlash {
  0%   { opacity: 0; transform: scale(0.6); }
  25%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(2.2); }
}

#impact-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
  mix-blend-mode: screen;
}
#impact-flash.go {
  animation: impactFlashAnim 380ms ease-out forwards;
}
@keyframes impactFlashAnim {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Tracking status chip — top-left, always-on indicator */
.track-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(20, 12, 32, 0.72);
  border: 1px solid rgba(180, 141, 255, 0.35);
  backdrop-filter: blur(4px);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: border-color 250ms ease, background 250ms ease;
}
.track-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #888;
  box-shadow: 0 0 8px currentColor;
}
.track-icon { font-size: 16px; line-height: 1; }
.track-text { white-space: nowrap; }

/* States */
.track-chip[data-state="loading"]   { border-color: rgba(180,141,255,0.35); }
.track-chip[data-state="loading"]   .track-dot { background: #b48dff; color: #b48dff; animation: trackPulse 1.4s ease-in-out infinite; }

.track-chip[data-state="searching"] { border-color: rgba(255, 200, 90, 0.55); }
.track-chip[data-state="searching"] .track-dot { background: #ffc85a; color: #ffc85a; animation: trackPulse 1.0s ease-in-out infinite; }

.track-chip[data-state="lost"]      { border-color: rgba(255, 80, 100, 0.75); background: rgba(60, 12, 22, 0.85); animation: trackShake 1.4s ease-in-out infinite; }
.track-chip[data-state="lost"]      .track-dot { background: #ff5064; color: #ff5064; animation: trackPulse 0.6s ease-in-out infinite; }

.track-chip[data-state="ready"]     { border-color: rgba(122, 245, 192, 0.65); }
.track-chip[data-state="ready"]     .track-dot { background: #7af5c0; color: #7af5c0; }

.track-chip[data-state="drawing"]   { border-color: rgba(180, 141, 255, 0.85); background: rgba(40, 28, 68, 0.85); }
.track-chip[data-state="drawing"]   .track-dot { background: #c8a8ff; color: #c8a8ff; animation: trackPulse 0.45s ease-in-out infinite; }

@keyframes trackPulse {
  0%, 100% { transform: scale(1);   filter: brightness(1); }
  50%      { transform: scale(1.35); filter: brightness(1.5); }
}
@keyframes trackShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* Game-over screen */
.go-stats {
  display: flex; gap: 56px;
  margin: 8px 0 28px;
}
.go-stat { text-align: center; min-width: 90px; }
.go-stat-label {
  font-size: 11px; letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.55; margin-bottom: 6px;
  color: var(--accent);
}
.go-stat-val {
  font-size: 36px; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(180,141,255,0.45);
}
.go-actions { display: flex; gap: 16px; justify-content: center; }
.go-actions .btn { margin-top: 0; }

#fps {
  position: fixed;
  top: 8px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11px;
  background: rgba(0,0,0,0.5);
  padding: 4px 10px; border-radius: 4px;
  color: #aef;
  z-index: 8;
  pointer-events: none;
  display: none;
}
#fps.show { display: block; }

/* Praise banner — large, joyful feedback after each cast attempt.
   Sits above the hearts row, fades in then drifts up and out. */
#praise-banner {
  position: fixed;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  font-family: 'Iowan Old Style', 'Palatino', Georgia, serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 9;
  text-shadow:
    0 0 16px rgba(180,141,255,0.55),
    0 2px 6px rgba(0,0,0,0.85);
}
#praise-banner.show {
  animation: praise-pop 1.6s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes praise-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.85); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1.08); }
  35%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.0);  }
  85%  { opacity: 1; transform: translateX(-50%) translateY(-22px) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-44px) scale(0.95); }
}
#praise-banner.kind-success-great { color: #ffe4a8; text-shadow: 0 0 22px rgba(255,196,90,0.75), 0 2px 6px rgba(0,0,0,0.9); }
#praise-banner.kind-success-good  { color: #cfe9ff; text-shadow: 0 0 18px rgba(140,195,255,0.7),  0 2px 6px rgba(0,0,0,0.9); }
#praise-banner.kind-success-low   { color: #d8c8ff; text-shadow: 0 0 14px rgba(180,141,255,0.6),  0 2px 6px rgba(0,0,0,0.9); font-size: 36px; }
#praise-banner.kind-fizzle        { color: #ffc0c8; text-shadow: 0 0 14px rgba(255,90,120,0.55),  0 2px 6px rgba(0,0,0,0.9); font-size: 32px; font-style: italic; }
@media (max-width: 720px) {
  #praise-banner { font-size: 30px; }
  #praise-banner.kind-success-low { font-size: 26px; }
  #praise-banner.kind-fizzle      { font-size: 24px; }
}