@import url("/static/brand/tokens.css");

:root {
  --room-scale: 1;
  color-scheme: dark;
  --bg: var(--leap-charcoal);
  --fg: var(--leap-off-white);
  --muted: var(--leap-taupe);
  --card: var(--leap-slate);
  --accent: var(--leap-rust);
  --ok: var(--leap-sand);
  --bad: var(--leap-clay);
  --a: var(--leap-rust);
  --b: var(--leap-clay);
  --c: var(--leap-sand);
  --d: var(--leap-taupe);
  --choice-fg: var(--leap-white);
  --choice-fg-on-sand: var(--leap-charcoal);
  --font-title: var(--leap-font-title);
  --font-body: var(--leap-font-body);
}

/* LEAP sand — 26_leap_cvi light terminal. Rust accent, not clay. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--leap-term-light-bg);
  --fg: var(--leap-term-light-fg);
  --muted: var(--leap-taupe);
  --card: var(--leap-warm-gray);
  --accent: var(--leap-term-light-cursor);
  --ok: var(--leap-term-light-green);
  --bad: var(--leap-term-light-magenta);
  --a: var(--leap-term-light-red);
  --b: var(--leap-term-light-magenta);
  --c: var(--leap-term-light-blue);
  --d: var(--leap-taupe);
  --choice-fg: var(--leap-off-white);
  --choice-fg-on-sand: var(--leap-off-white);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  touch-action: manipulation;
}
.choice, button, a { touch-action: manipulation; }
html { transition: background-color 0.45s ease, color 0.45s ease; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
  transition: background-color 0.45s ease, color 0.45s ease;
}
body.theme-flash::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background: radial-gradient(circle at 80% 20%, var(--leap-rust), transparent 55%);
  animation: theme-flash 0.7s ease forwards;
}
h1, .wordmark-sub, .timer, .rank {
  font-family: var(--font-title);
}
.wrap {
  max-width: 52rem;
  margin: 0 auto;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  position: relative;
  z-index: 1;
}
.host .wrap { max-width: 72rem; }
body.screen .wrap { max-width: min(90rem, 96vw); }
h1 { font-size: clamp(1.4rem, 4vw, 2.4rem); margin: 0 0 0.5rem; }
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
}
.sound-toggle { margin-left: 0.4rem; }
.fullscreen-toggle {
  margin-left: 0.4rem;
  font-size: 1.05rem;
  padding: 0.65rem 1.15rem;
}
.theme-toggle {
  margin-left: auto;
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.7rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle.leap { animation: host-leap 0.45s ease; }
.wordmark img {
  height: 2.6rem;
  width: auto;
  display: block;
  animation: wordmark-bob 3.6s ease-in-out infinite;
}
.wordmark-sub {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leap-sand);
}
html[data-theme="light"] .wordmark-sub { color: var(--leap-rust); }
.sub { color: var(--muted); margin-bottom: 1rem; }
input, button {
  font: inherit;
  border-radius: 0.75rem;
  border: 0;
  padding: 0.85rem 1rem;
}
input { width: 100%; background: var(--card); color: var(--fg); margin-bottom: 0.75rem; }
button {
  background: var(--accent);
  color: var(--leap-off-white);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
button:hover { filter: brightness(1.08); }
button.ghost { background: var(--card); color: var(--fg); }
button.hold-confirm {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
button.hold-confirm.holding {
  animation: hold-confirm-fill 1s linear forwards;
}
button.hold-confirm.hold-nudge {
  outline: 3px solid var(--leap-rust);
}
button.hold-confirm.held {
  animation: hold-confirm-flash 0.4s ease;
}
@keyframes hold-confirm-fill {
  from { box-shadow: inset 0 0 0 0 var(--accent); }
  to { box-shadow: inset 24rem 0 0 0 var(--accent); color: var(--leap-off-white); }
}
@keyframes hold-confirm-flash {
  0% { filter: brightness(1.45); transform: scale(0.96); }
  100% { filter: none; transform: none; }
}
button.mode {
  background: var(--card);
  color: var(--fg);
  font-weight: 600;
}
button.mode.on { outline: 3px solid var(--leap-rust); }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 640px) { .choices { grid-template-columns: 1fr; gap: 0.85rem; } }
body:not(.host) #prompt {
  max-height: 28vh;
  overflow-y: auto;
}
.q-image {
  margin: 0.4rem 0 0.85rem;
  text-align: center;
}
.q-image:empty { display: none; }
.estimate {
  display: flex;
  gap: 0.55rem;
  margin: 0.4rem 0 1rem;
}
.estimate input {
  flex: 1;
  margin: 0;
  font-size: 1.3rem;
}
.estimate-hint, .estimate-reveal {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 700;
  margin: 0.4rem 0 1rem;
}
.q-image img {
  max-width: min(100%, 42rem);
  max-height: 36vh;
  object-fit: contain;
  border-radius: 0.65rem;
  background: var(--card);
}
#prompt code, #notes code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  background: var(--card);
  padding: 0.05em 0.35em;
  border-radius: 0.3rem;
}
#prompt .math, #notes .math {
  font-style: italic;
  font-family: "Times New Roman", Times, serif;
}
#prompt strong, #notes strong { font-weight: 800; }
body.screen:not(.phase-lobby) #prompt,
body.host:not(.phase-lobby) #prompt {
  font-size: calc(1.7rem * var(--room-scale));
}
body.screen:not(.phase-lobby) .choice,
body.host:not(.phase-lobby) .choice {
  font-size: calc(1.35rem * var(--room-scale));
  min-height: calc(5rem * var(--room-scale));
}
body.screen:not(.phase-lobby) .estimate-hint,
body.screen:not(.phase-lobby) .estimate-reveal,
body.host:not(.phase-lobby) .estimate-hint,
body.host:not(.phase-lobby) .estimate-reveal {
  font-size: calc(1.5rem * var(--room-scale));
}

.choice {
  min-height: 5rem;
  padding: 1.05rem 1.1rem;
  text-align: left;
  font-size: 1.2rem;
  color: var(--choice-fg);
}
.choice.leap-in {
  animation: choice-leap 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.choice[data-i="0"] {
  background-color: var(--a);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0.7rem, transparent 0.7rem);
}
.choice.leap-in[data-i="0"] { animation-delay: 0.02s; }
.choice[data-i="1"] {
  background-color: var(--b);
  background-image: radial-gradient(rgba(0, 0, 0, 0.34) 1.5px, transparent 1.7px);
  background-size: 0.7rem 0.7rem;
  color: var(--choice-fg-on-sand);
}
.choice.leap-in[data-i="1"] { animation-delay: 0.1s; }
.choice[data-i="2"] {
  background-color: var(--c);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.24) 0 0.28rem,
    transparent 0.28rem 0.62rem
  );
  color: var(--choice-fg-on-sand);
}
.choice.leap-in[data-i="2"] { animation-delay: 0.18s; }
.choice[data-i="3"] {
  background-color: var(--d);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.24) 0 0.22rem,
    transparent 0.22rem 0.62rem
  );
}
.choice.leap-in[data-i="3"] { animation-delay: 0.26s; }
.choice:hover:not(:disabled) { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 0 -4px rgba(47, 49, 54, 0.25); }
.choice:disabled { opacity: 0.7; }
.choice:active { transform: scale(0.96); }
.choice.correct {
  outline: 4px solid var(--ok);
  animation: choice-win 0.55s ease;
}
.choice.wrong { outline: 4px solid var(--bad); animation: choice-miss 0.4s ease; }
.timer {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 800;
  color: var(--accent);
  animation: timer-idle 1.8s ease-in-out infinite;
}
.timer.urgent {
  animation: rust-pulse 0.55s ease-in-out infinite;
  text-shadow: 0 0 18px var(--leap-rust);
}
.board { list-style: none; padding: 0; }
.board li {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  background: var(--card); padding: 0.7rem 1rem; margin: 0.4rem 0; border-radius: 0.6rem;
  animation: board-in 0.45s ease both;
  font-size: 1.2rem;
  font-weight: 650;
}
.board li strong {
  font-size: 1.15em;
}
body.screen .board li {
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  padding: 0.9rem 1.2rem;
  margin: 0.5rem 0;
}
.roster-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.ghost.tiny { padding: 0.2rem 0.55rem; font-size: 0.8rem; }
.board li:nth-child(1) { animation-delay: 0.02s; }
.board li:nth-child(2) { animation-delay: 0.08s; }
.board li:nth-child(3) { animation-delay: 0.14s; }
.board li:nth-child(4) { animation-delay: 0.2s; }
.board li:nth-child(5) { animation-delay: 0.26s; }
.qr {
  width: min(22rem, 72vw);
  background: #fff;
  padding: 0.5rem;
  border-radius: 0.75rem;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.qr.hidden { display: none; }
.qr.fade-out { opacity: 0; }
.lobby-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
  margin: 0.5rem 0 1rem;
}
body.screen .lobby-join {
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}
.lobby-stage {
  display: block;
}
body.phase-lobby .lobby-stage {
  display: grid;
  grid-template-columns: minmax(14rem, auto) minmax(16rem, 1fr);
  gap: 1.25rem 2rem;
  align-items: start;
}
body.screen.phase-lobby .lobby-stage {
  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
  width: 100%;
}
body.phase-lobby .lobby-stage .board {
  margin: 0;
}
@media (max-width: 720px) {
  body.phase-lobby .lobby-stage {
    grid-template-columns: 1fr;
  }
}
.howto {
  max-width: 36rem;
  padding: 1.15rem 1.5rem;
  background: var(--card);
  border-radius: 0.85rem;
}
.howto ol {
  margin: 0;
  padding-left: 1.45rem;
}
.howto li {
  margin: 0.4rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}
body.screen .howto {
  flex: none;
  width: 100%;
  max-width: none;
  padding: 1.2rem 1.6rem 1.35rem;
  margin: 0 0 1rem;
  box-sizing: border-box;
}
body.screen .howto ol,
body.screen .howto-scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.screen .howto li {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
}
body.screen .howto ol {
  counter-reset: howto;
}
body.screen .howto ol li {
  counter-increment: howto;
}
body.screen .howto ol li::before {
  content: counter(howto) ". ";
  font-weight: 800;
}
.howto-scores {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 2px solid color-mix(in srgb, var(--fg) 20%, transparent);
}
.howto-scores li {
  margin: 0.45rem 0;
}
body.screen .howto-scores {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}
body.screen .howto-scores li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}
body.screen #howtoFast::before { content: "⚡"; }
body.screen #howtoLate::before { content: "🐢"; }
body.screen #howtoMiss::before { content: "❌"; }
body.screen #howtoFirst::before { content: "🥇"; }
.hidden { display: none; }
body.screen.cursor-gone,
body.screen.cursor-gone * { cursor: none; }
.err { color: var(--bad); min-height: 1.2rem; }
.waiting { color: var(--muted); font-weight: 600; margin: 0.4rem 0 0.8rem; }
.join-url { font-size: 1.25rem; word-break: break-all; user-select: all; }
.join-code {
  margin: 0.2rem 0 0.6rem;
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
}
.join-code::before {
  content: "Room Code";
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.2;
}
body.screen .join-code::before {
  font-size: clamp(0.95rem, 2.2vw, 1.45rem);
  margin-bottom: 0.22em;
}
body.screen .join-code {
  font-size: clamp(4.2rem, 16vw, 10rem);
  text-align: left;
}
body.screen .join-url#joinHost {
  font-size: clamp(1.5rem, 4.2vw, 2.6rem);
  font-weight: 700;
}
body.screen .qr {
  flex: 0 0 auto;
  width: min(28rem, 38vw, 46vh);
}
.host-join-code { font-size: 2.1rem; }
.board li.idle { opacity: 0.4; }
.host-qr { width: min(16rem, 48vw); margin: 0.4rem 0 0.8rem; }
.confirm {
  background: var(--card);
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.confirm p { margin: 0 0 0.6rem; color: var(--muted); }
.rank {
  font-weight: 700;
  color: var(--accent);
  margin: 0.5rem 0;
  animation: rank-slide 0.5s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.scoring-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.65rem;
  margin: 0.3rem 0 0.5rem;
  padding: 0.4rem 0.55rem;
  background: var(--card);
  border-radius: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.3;
  font-weight: 600;
}
.scoring-hint.hidden { display: none; }
.scoring-hint button {
  flex: 0 0 auto;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}
.scoring-hint-show {
  margin: 0.15rem 0 0.45rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}
.scoring-hint-show.hidden { display: none; }
.live-points {
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 0.15rem 0 0.55rem;
}
.live-points.hidden { display: none; }
.leave {
  margin-top: 1.1rem;
  width: 100%;
}
.board li.tease {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 0.65rem 0;
}
body.screen .board li.tease {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
}
.hotkeys {
  margin: 0.8rem 0 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border-radius: 0.75rem;
  max-width: 28rem;
}
.hotkeys h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.hotkeys dl { margin: 0 0 0.7rem; }
.hotkeys dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0;
}
.hotkeys dt { font-weight: 700; color: var(--accent); }
.hotkeys dd { margin: 0; color: var(--muted); }
#prompt { animation: prompt-in 0.4s ease both; }
.host-notes,
.review-notes {
  margin: 0.4rem 0 0.8rem;
  padding: 0.65rem 0.8rem;
  background: var(--card);
  border-radius: 0.65rem;
  color: var(--muted);
  font-weight: 600;
}
.review-missed {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-weight: 700;
}
.react-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.7rem 0 0.2rem;
}
.react-btn {
  position: relative;
  overflow: hidden;
  font-size: 1.7rem;
  line-height: 1;
  padding: 0.45rem 0.65rem;
  border-radius: 0.75rem;
}
.react-bar.react-cool {
  pointer-events: none;
}
.react-bar.react-cool .react-btn {
  opacity: 0.55;
}
.react-bar.react-cool .react-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--fg) 28%, transparent);
  transform-origin: left center;
  animation: react-cool 1s linear forwards;
}
@keyframes react-cool {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
.react-float {
  position: fixed;
  bottom: 8%;
  z-index: 25;
  font-size: clamp(2rem, 7vw, 4.2rem);
  pointer-events: none;
  animation: react-up 1.5s ease-out forwards;
}
.react-tally {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 25;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 0.75rem;
  background: var(--card);
  font-weight: 700;
}
@keyframes react-up {
  to { transform: translateY(-68vh) scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .react-float { animation: none; display: none; }
  .react-bar.react-cool .react-btn::after { animation: none; opacity: 0.2; }
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-weight: 600;
}
.toggle input { width: auto; margin: 0; }
#dummyN { width: 4rem; }
.jump-to select,
.pack-pick select {
  background: var(--card);
  color: var(--fg);
  border: 0;
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  max-width: 16rem;
}
.pack-pick select { max-width: 28rem; }
.pack-hint {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
}
.q-progress {
  margin: 0.55rem 0 0.15rem;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.25rem;
}
.q-progress:empty { display: none; }
.screen-link { margin: 0.5rem 0 1rem; }
.screen-link a { color: var(--accent); }
body.screen .row.controls { display: none; }
body.screen .confirm { display: none; }

.jumper-stage {
  position: relative;
  width: min(11rem, 46vw);
  aspect-ratio: 475 / 483;
  margin: 0 0 1rem;
  transform-origin: 55% 85%;
  animation: leap-land 5.2s ease-in-out infinite;
  cursor: pointer;
}
.jumper-hero {
  display: block;
  width: min(9rem, 38vw);
  height: auto;
  margin: 0 0 1rem;
  filter: invert(1) sepia(0.2);
  opacity: 0.92;
  transform-origin: 55% 85%;
  animation: leap-land 5.2s ease-in-out infinite;
  cursor: pointer;
}
div.jumper-hero {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 475 / 483;
  margin: 0;
  animation: none;
  cursor: inherit;
  background: var(--jumper-c, #2f3136);
  -webkit-mask: url("/static/brand/jumper.svg") center / contain no-repeat;
  mask: url("/static/brand/jumper.svg") center / contain no-repeat;
}
div.jumper-hero.tinted { filter: none; opacity: 1; }
.jumper-stage [data-kit], .jumper-chip [data-kit] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: none center / contain no-repeat;
}
.jumper-stage [data-kit="outfit"], .jumper-chip [data-kit="outfit"] { z-index: 1; }
.jumper-stage [data-kit="outfit"][data-v="tutu"],
.jumper-chip [data-kit="outfit"][data-v="tutu"] { z-index: 3; }
.jumper-stage [data-kit="shoes"], .jumper-chip [data-kit="shoes"] { z-index: 3; }
.jumper-stage [data-kit="hands"], .jumper-chip [data-kit="hands"] { z-index: 4; }
.jumper-stage [data-kit="hat"], .jumper-chip [data-kit="hat"] { z-index: 5; }
[data-kit="hat"][data-v="helmet"] { background-image: url("/static/brand/kit/hat-helmet.svg"); }
[data-kit="hat"][data-v="horns"] { background-image: url("/static/brand/kit/hat-horns.svg"); }
[data-kit="hat"][data-v="mohawk"] { background-image: url("/static/brand/kit/hat-mohawk.svg"); }
[data-kit="hat"][data-v="headphones"] { background-image: url("/static/brand/kit/hat-headphones.svg"); }
[data-kit="hat"][data-v="astro"] { background-image: url("/static/brand/kit/hat-astro.svg"); }
[data-kit="hat"][data-v="cap"] { background-image: url("/static/brand/kit/hat-cap.svg"); }
[data-kit="shoes"][data-v="boots"] { background-image: url("/static/brand/kit/shoes-boots.svg"); }
[data-kit="shoes"][data-v="skis"] { background-image: url("/static/brand/kit/shoes-skis.svg"); }
[data-kit="shoes"][data-v="skates"] { background-image: url("/static/brand/kit/shoes-skates.svg"); }
[data-kit="shoes"][data-v="bare"] { background-image: url("/static/brand/kit/shoes-bare.svg"); }
[data-kit="outfit"][data-v="backpack"] { background-image: url("/static/brand/kit/outfit-backpack.svg"); }
[data-kit="outfit"][data-v="cape"] { background-image: url("/static/brand/kit/outfit-cape.svg"); }
[data-kit="outfit"][data-v="tutu"] { background-image: url("/static/brand/kit/outfit-tutu.svg"); }
[data-kit="outfit"][data-v="wings"] { background-image: url("/static/brand/kit/outfit-wings.svg"); }
[data-kit="hands"][data-v="claws"] { background-image: url("/static/brand/kit/hands-claws.svg"); }
[data-kit="hands"][data-v="rope"] { background-image: url("/static/brand/kit/hands-rope.svg"); }
[data-kit="hands"][data-v="poles"] { background-image: url("/static/brand/kit/hands-poles.svg"); }
[data-kit="hands"][data-v="skateboard"] { background-image: url("/static/brand/kit/hands-skateboard.svg"); }
.jumper-chip {
  position: relative;
  display: inline-block;
  width: 1.7rem;
  height: 1.75rem;
  vertical-align: middle;
  margin-right: 0.4rem;
}
.jumper-chip .jumper-hero {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  animation: none;
  cursor: default;
  opacity: 1;
  filter: none;
}
.kit-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.7rem;
  margin: 0.6rem 0 0.2rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.kit-picker label { display: flex; flex-direction: column; gap: 0.2rem; }
.kit-picker select {
  background: var(--card);
  color: var(--fg);
  border: 0;
  border-radius: 0.5rem;
  padding: 0.4rem 0.5rem;
}
.jumper-hero.flip, .jumper-stage.flip {
  transform-origin: 50% 46%;
  animation: jumper-flip 0.95s cubic-bezier(0.4, 0.0, 0.2, 1);
}
html[data-theme="light"] .jumper-hero { filter: none; }
.falling-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  color: var(--leap-sand);
  opacity: 0.28;
  transition: opacity 0.6s ease;
}
html[data-theme="light"] .falling-sky { color: var(--leap-charcoal); opacity: 0.2; }
.sky-dust {
  position: absolute;
  inset: 0;
}
.sky-dust i {
  position: absolute;
  bottom: -12px;
  border-radius: 50%;
  background: currentColor;
  animation-name: sky-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes sky-rise {
  from { transform: translate3d(0, 10vh, 0); }
  to { transform: translate3d(var(--sky-drift, 0), -110vh, 0); }
}
body.phase-question .falling-sky { opacity: 0.12; }
html[data-theme="light"] body.phase-question .falling-sky { opacity: 0.08; }
body.phase-lobby .falling-sky,
body.phase-reveal .falling-sky,
body.intermission .falling-sky { opacity: 0.34; }
html[data-theme="light"] body.phase-lobby .falling-sky,
html[data-theme="light"] body.phase-reveal .falling-sky,
html[data-theme="light"] body.intermission .falling-sky { opacity: 0.24; }
body.phase-done .falling-sky { opacity: 0.4; }
html[data-theme="light"] body.phase-done .falling-sky { opacity: 0.28; }

.jumper-air {
  display: none;
}
body.screen .jumper-air {
  display: block;
  position: absolute;
  right: 4vw;
  top: 12vh;
  width: min(18rem, 36vw);
  pointer-events: none;
  z-index: 0;
  filter: blur(0.7px);
  opacity: 0.85;
  transform: scale(0.92);
  transform-origin: 55% 85%;
  transition: transform 0.9s ease, filter 0.8s ease, opacity 0.8s ease;
}
body.screen .jumper-hero {
  width: min(18rem, 36vw);
  position: absolute;
  right: 4vw;
  top: 12vh;
  opacity: 0.22;
  pointer-events: none;
  animation: leap-land 6s ease-in-out infinite;
}
body.screen .jumper-air .jumper-hero {
  width: 100%;
  position: relative;
  right: auto;
  top: auto;
  z-index: 1;
}
body.screen.phase-lobby .jumper-air,
body.screen.phase-reveal .jumper-air,
body.screen.intermission .jumper-air {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}
body.screen.phase-lobby .jumper-hero,
body.screen.phase-reveal .jumper-hero,
body.screen.intermission .jumper-hero {
  opacity: 0.58;
}
body.screen.phase-done .jumper-air {
  filter: blur(0.4px);
  opacity: 0.72;
  transform: scale(0.42) translate(6vw, -10vh);
}
body.screen.phase-done .jumper-hero { opacity: 0.4; }
.parachute {
  position: absolute;
  left: -22%;
  top: -48%;
  width: 144%;
  aspect-ratio: 4 / 3;
  background: var(--leap-ink);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: url("/static/brand/parachute.svg") center / contain no-repeat;
  mask: url("/static/brand/parachute.svg") center / contain no-repeat;
  transition: opacity 1.15s ease 0.2s;
}
html[data-theme="light"] .parachute { background: var(--leap-charcoal); }
body.screen.phase-done .parachute { opacity: 0.5; }
.watermark {
  position: fixed;
  inset: auto -6vw 4vh auto;
  width: min(42vw, 28rem);
  height: min(42vw, 28rem);
  background: var(--leap-ink);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: url("/static/brand/jumper.svg") center / contain no-repeat;
  mask: url("/static/brand/jumper.svg") center / contain no-repeat;
  animation: watermark-drift 8s ease-in-out infinite;
}
html[data-theme="light"] .watermark { background: var(--leap-charcoal); opacity: 0.12; }
body.phase-lobby .watermark { opacity: 0.22; }
html[data-theme="light"] body.phase-lobby .watermark { opacity: 0.16; }
body.phase-board .watermark,
body.phase-done .watermark { opacity: 0.2; }

#start.leap {
  animation: host-leap 0.45s ease;
}

.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}
.confetti i {
  position: absolute;
  left: var(--x);
  bottom: -8%;
  width: var(--s);
  height: calc(var(--s) * 1.02);
  background: var(--c);
  -webkit-mask: url("/static/brand/jumper.svg") center / contain no-repeat;
  mask: url("/static/brand/jumper.svg") center / contain no-repeat;
  animation: leap-arc var(--t) ease-out forwards;
  transform: rotate(var(--r));
}

@keyframes choice-leap {
  from { opacity: 0; transform: translate(-18px, 28px) rotate(-6deg) scale(0.86); }
  to { opacity: 1; transform: none; }
}
@keyframes choice-win {
  0% { transform: scale(1); }
  40% { transform: scale(1.06) translateY(-6px); box-shadow: 0 0 0 6px var(--leap-rust); }
  100% { transform: scale(1); }
}
@keyframes choice-miss {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes rust-pulse {
  0%, 100% { color: var(--leap-rust); transform: scale(1); }
  50% { color: var(--leap-clay); transform: scale(1.08); }
}
@keyframes timer-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@keyframes leap-land {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  40% { transform: translate(2px, -8px) rotate(-3deg); }
  55% { transform: translate(1px, 2px) rotate(1deg); }
  72% { transform: translate(0, 0) rotate(0); }
}
@keyframes jumper-flip {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  20% { transform: translate3d(0, -20px, 0) rotate(72deg); }
  40% { transform: translate3d(0, -38px, 0) rotate(144deg); }
  60% { transform: translate3d(0, -38px, 0) rotate(216deg); }
  80% { transform: translate3d(0, -16px, 0) rotate(288deg); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}
@keyframes wordmark-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes host-leap {
  0% { transform: translateY(0); box-shadow: none; }
  40% { transform: translateY(-10px); box-shadow: 0 0 0 4px var(--leap-rust); }
  100% { transform: translateY(0); }
}
@keyframes leap-arc {
  0% { transform: translate(0, 0) rotate(var(--r)) scale(0.55); opacity: 1; }
  40% { transform: translate(var(--dx), -48vh) rotate(calc(var(--r) + 22deg)) scale(1.15); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.35), -6vh) rotate(calc(var(--r) + 52deg)) scale(0.7); opacity: 0; }
}
@keyframes watermark-drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-3vw, -4vh) rotate(-4deg); }
}
@keyframes board-in {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}
@keyframes rank-slide {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes prompt-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes theme-flash {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

body.event-clock {
  overflow: hidden;
}
body.event-clock .wrap {
  max-width: 96rem;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.event-clock .jumper-hero {
  width: min(22rem, 40vw);
  top: 8vh;
  opacity: 0.28;
  animation: leap-land 5s ease-in-out infinite;
}
body.event-clock.urgent .jumper-hero,
body.event-clock.final-minute .jumper-hero {
  animation-duration: 1.1s;
  opacity: 0.4;
}
body.event-clock.landed .jumper-hero {
  animation: host-leap 0.7s ease infinite;
  opacity: 0.55;
}
.clock-when {
  font-family: var(--font-title);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: clamp(0.9rem, 2.4vw, 1.4rem);
  margin: 0 0 1.2rem;
}
.clock-live {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 5vw, 3rem);
  color: var(--accent);
  margin: 0 0 1rem;
  animation: rank-slide 0.5s cubic-bezier(0.22, 1.15, 0.36, 1);
}
.clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.45rem, 2vw, 1.4rem);
  margin: 0 0 1.5rem;
}
.clock-unit {
  background: var(--card);
  border-radius: 1.1rem;
  padding: clamp(0.7rem, 2vw, 1.5rem) 0.35rem 0.85rem;
  text-align: center;
  box-shadow: 0 0 0 4px var(--leap-rust);
  animation: prompt-in 0.5s ease both;
}
.clock-unit:nth-child(1) { animation-delay: 0.04s; }
.clock-unit:nth-child(2) { animation-delay: 0.1s; }
.clock-unit:nth-child(3) { animation-delay: 0.16s; }
.clock-unit:nth-child(4) { animation-delay: 0.22s; }
.clock-unit .value {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 13vw, 8.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  color: var(--accent);
}
.clock-unit .value.tick {
  animation: clock-tick 0.42s cubic-bezier(0.22, 1.25, 0.36, 1);
}
.clock-unit .label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: clamp(0.65rem, 1.5vw, 0.95rem);
  margin-top: 0.55rem;
}
body.event-clock.urgent .clock-unit {
  box-shadow: 0 0 24px color-mix(in srgb, var(--leap-rust) 45%, transparent);
}
body.event-clock.final-minute .clock-unit .value {
  animation: rust-pulse 0.55s ease-in-out infinite;
}
body.event-clock.landed .clock-unit .value {
  color: var(--ok);
}
@media (max-width: 720px) {
  .clock { grid-template-columns: 1fr 1fr; }
}

.badge-line {
  margin: 0.35rem 0 0.15rem;
  font-weight: 750;
  animation: finale-in 0.8s ease both;
}
.badge-line:nth-child(1) { animation-delay: 0.08s; }
.badge-line:nth-child(2) { animation-delay: 0.2s; }
.badge-line:nth-child(3) { animation-delay: 0.32s; }
.badge-pill {
  margin-left: 0.45rem;
  font-style: normal;
  font-size: 0.75em;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.recap-link {
  display: inline-block;
  margin: 0.65rem 0 0.25rem;
  color: var(--accent);
  font-family: var(--font-title);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.recap-when { color: var(--muted); user-select: all; }
.finale-rest { animation: finale-in 0.8s ease both; }
.finale-first { animation: finale-in 0.8s ease both; }
@keyframes finale-in {
  from { opacity: 0; transform: translateY(0.4rem); }
  to { opacity: 1; transform: none; }
}

.wifi-hint {
  margin: 0.4rem 0 0.8rem;
  max-width: 36rem;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 600;
}
.wifi-qrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 2rem;
  align-items: start;
  width: 100%;
  max-width: 48rem;
}
.wifi-qr-card {
  margin: 0;
  text-align: center;
}
.wifi-qr-card figcaption {
  margin: 0 0 0.55rem;
  font-weight: 750;
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  letter-spacing: 0.02em;
}
.wifi-qr {
  width: min(16rem, 70vw);
  margin: 0 auto;
}
body.screen .wifi-qrs { max-width: 56rem; }
body.screen .wifi-qr { width: min(22rem, 36vw, 42vh); }
body.host .wifi-qr { width: min(11rem, 42vw); }
body.wifi-help .lobby-join { display: none; }
body.wifi-help.phase-lobby .lobby-stage { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .wifi-qrs { grid-template-columns: 1fr; max-width: 18rem; }
}

.break-fact {
  margin: 0.75rem 0 0;
  max-width: 38rem;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 650;
  line-height: 1.35;
  animation: break-in 0.45s ease;
}
body.screen .break-fact {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  max-width: 46rem;
}
@keyframes break-in {
  from { opacity: 0; transform: translateY(0.45rem); }
  to { opacity: 1; transform: none; }
}
body.intermission #prompt {
  font-family: var(--font-title);
  font-weight: 800;
}

@keyframes clock-tick {
  0% { transform: translateY(22px) rotate(-8deg) scale(0.82); opacity: 0.35; }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .choice, .timer, .timer.urgent, #start.leap, .theme-toggle.leap,
  .jumper-hero, .jumper-hero.flip, .jumper-stage, .jumper-stage.flip, body.screen .jumper-hero, .confetti i, .qr,
  .board li, .rank, #prompt, .wordmark img, .watermark, body.theme-flash::after,
  .badge-line, .finale-rest, .finale-first,
  .break-fact,
  .clock-unit, .clock-unit .value, .clock-unit .value.tick, .clock-live,
  body.event-clock .jumper-hero, body.event-clock.landed .jumper-hero,
  .falling-sky, .sky-dust, .sky-dust i, .jumper-air, .parachute {
    animation: none !important;
    transition: none !important;
  }
  /* HDMI is the room — keep dust rising even if the laptop has Reduce Motion. */
  body.screen .sky-dust i {
    animation-name: sky-rise !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  html, body { transition: none !important; }
  .choice:active, .choice:hover:not(:disabled), .theme-toggle:hover { transform: none; }
}