/* ═══════════════════════════════════════════════════════════════════════
   RWF · V3 THE BATTLE COURSE — v3.css
   The 3D battle surface: a full-viewport three.js course under a 2D HUD
   that speaks pure battle language.

   Layers, top to bottom:
     0 · tokens        — v3 slot defaults (night-stadium athletic)
     1 · shell         — app frame, headers, screens
     2 · POPPING       — .pop-btn: chunky offset solid shadows, 120ms press
                         (reused verbatim from v2 board.css)
     3 · THE COURSE    — canvas host, camera toggle, loading veil
     4 · HUD           — battle clock + DZ ramp, standings, feed, fx dock
     5 · CARDS         — fanned hand; deal / hover / play / expiry
                         (CSS 3D — v2 board card classes, reused verbatim)
     6 · sheets        — LOG REPS quick-log, draft-from-3, card detail
     7 · screens       — home, setup, create, result (3D podium), squad
     8 · responsive    — 390px phone → desktop grid
   Reads /design/tokens.css slots (--bg, --lime, --surface…) plus local
   v3 slots below. No shared theme file is modified.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0 · v3 slot defaults ─────────────────────────────────────────────── */
:root {
  --grass: #24422b;
  --grass-2: #1d3724;
  --track-surface: #33383f;
  --track-ink: #22262c;
  --track-line: rgba(232, 234, 237, 0.55);
  --sky-hi: #101a2c;
  --sky-lo: #27415e;
  --rail: color-mix(in srgb, var(--bg) 55%, #000);
  --rail-edge: color-mix(in srgb, var(--text) 10%, transparent);

  --chip-white: #f2eee2;
  --chip-red: #d8434e;
  --chip-blue: #3d7bd9;
  --chip-gold: #e8b54a;

  /* v2 card slots (same values the board theme pins) */
  --card-back-1: color-mix(in srgb, var(--lime) 20%, var(--bg));
  --card-back-2: color-mix(in srgb, var(--bg) 80%, #000);
  --card-face: color-mix(in srgb, var(--surface-2) 92%, var(--text) 8%);

  --rar-common: #9aa7a0;
  --rar-rare: #6ec1ff;
  --rar-epic: #b78cff;
  --rar-legendary: #ffc941;

  --pop-shadow: color-mix(in srgb, var(--lime) 42%, #000);
  --runner-ease: 0.95s; /* runner lerp along the course */
}

/* ── 1 · shell ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.v3-app {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* the quick bar owns the top 44px + the notch inset (viewport-fit=cover) */
  padding-top: calc(44px + env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
}
.v3-screen { animation: v3ScreenIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes v3ScreenIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ── 1b · THE QUICK BAR — persistent top nav (dashboard · cam · theme · sound)
   One tap from anywhere, mid-battle included. Sits above sheets (reachable
   while a sheet is open), below toasts. */
.v3-quick {
  position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 8px 0 6px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-bright);
}
.v3-quick__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line-bright); background: var(--surface);
  color: var(--text); cursor: pointer;
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 2px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s;
}
.v3-quick__btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--rail); }
.v3-quick__btn svg { width: 14px; height: 14px; }
.v3-quick__home { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 40%, transparent); }
.v3-quick__icon { width: 32px; justify-content: center; padding: 0; font-size: 14px; }
.v3-quick__spring { flex: 1; }
.v3-quick .v3-mute { width: 32px; height: 32px; border-radius: 999px; box-shadow: 0 2px 0 var(--rail); }
.v3-quick .v3-cam { position: static; padding: 0 11px; height: 32px; box-shadow: 0 2px 0 var(--rail); }
.v3-quick .v3-cam[hidden] { display: none; }

/* theme skins — the quick bar's ◐ cycles these (night needs no override) */
body[data-rwf-theme="court"] {
  --lime: #ff9432;
  --lime-dim: #cc7600;
  --lime-glow: rgba(255, 148, 50, 0.16);
  --on-accent: #221002;
  --pop-shadow: color-mix(in srgb, #ff9432 42%, #000);
  --card-back-1: color-mix(in srgb, #ff9432 20%, var(--bg));
  --sky-lo: #3a2f1c;
}
body[data-rwf-theme="ice"] {
  --lime: #6ec1ff;
  --lime-dim: #3d90cc;
  --lime-glow: rgba(110, 193, 255, 0.15);
  --on-accent: #04182b;
  --pop-shadow: color-mix(in srgb, #6ec1ff 42%, #000);
  --card-back-1: color-mix(in srgb, #6ec1ff 20%, var(--bg));
  --sky-lo: #22364c;
}

/* header — back · battle name · battle clock */
.v3-top {
  position: sticky; top: calc(44px + env(safe-area-inset-top)); z-index: 40; /* parks just under the quick bar */
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.v3-top__back {
  border: 1px solid var(--line-bright); background: var(--surface);
  color: var(--text); width: 38px; height: 38px; border-radius: 12px;
  font: 700 16px/1 var(--font-display); cursor: pointer;
  box-shadow: 0 3px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s;
}
.v3-top__back:active { transform: translateY(3px); box-shadow: 0 0 0 var(--rail); }
/* sound toggle (sfx.js mute — persisted at rwf.sfx.muted, shared w/ v1+v2) */
.v3-mute {
  border: 1px solid var(--line-bright); background: var(--surface);
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; padding: 0;
  box-shadow: 0 3px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.v3-mute:active { transform: translateY(3px); box-shadow: 0 0 0 var(--rail); }
.v3-mute[aria-pressed="true"] { opacity: 0.55; }
.v3-top__title { flex: 1; min-width: 0; }
.v3-top__kicker {
  margin: 0; font: 700 9.5px/1.2 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
.v3-top__name {
  margin: 1px 0 0; font: 400 17px/1.1 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v3-clock { text-align: right; }
.v3-clock__tag {
  font: 700 9.5px/1.2 var(--font-mono); letter-spacing: 0.14em;
  color: var(--faint); text-transform: uppercase;
}
.v3-clock__time {
  font: 700 17px/1.1 var(--font-mono); color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* danger-zone ramp on the battle clock (3h/1h/30min → gold/orange/red) */
.v3-clock[data-dz="1"] .v3-clock__time { color: var(--amber); }
.v3-clock[data-dz="2"] .v3-clock__time { color: var(--urgency); }
.v3-clock[data-dz="3"] .v3-clock__time { color: var(--danger); animation: v3Pulse 1s steps(2) infinite; }
@keyframes v3Pulse { 50% { opacity: 0.55; } }
.v3-dz {
  margin: 0; padding: 7px 12px;
  font: 700 11px/1 var(--font-mono); letter-spacing: 0.16em;
  text-transform: uppercase; text-align: center;
  color: var(--on-warn); background: var(--urgency);
  border-top: 1px solid color-mix(in srgb, var(--on-warn) 20%, transparent);
}
.v3-dz[data-dz="1"] { background: var(--amber); }
.v3-dz[data-dz="3"] { background: var(--danger); color: #fff; }

/* ── 2 · POPPING BUTTONS (reused from v2 board.css) ──────────────────── */
.pop-btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border: 0; cursor: pointer; user-select: none;
  border-radius: var(--radius-sm);
  background: var(--lime); color: var(--on-accent);
  font: 400 14px/1 var(--font-display);
  letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 6px 0 var(--pop-shadow), 0 9px 18px color-mix(in srgb, #000 35%, transparent);
  transform: translateY(0);
  transition: transform 0.12s cubic-bezier(0.3, 0.9, 0.4, 1),
              box-shadow 0.12s cubic-bezier(0.3, 0.9, 0.4, 1),
              background 0.12s, filter 0.12s;
}
.pop-btn:hover { filter: brightness(1.06); }
.pop-btn:active, .pop-btn.is-pressed {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--pop-shadow), 0 2px 6px color-mix(in srgb, #000 35%, transparent);
}
.pop-btn:disabled {
  filter: saturate(0.35) brightness(0.75); cursor: not-allowed;
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--pop-shadow);
}
.pop-btn--big { padding: 16px 26px; font-size: 16px; }
.pop-btn--sm { padding: 9px 13px; font-size: 11.5px; box-shadow: 0 4px 0 var(--pop-shadow); }
.pop-btn--sm:active { transform: translateY(4px); box-shadow: 0 0 0 var(--pop-shadow); }
.pop-btn--ghost {
  background: var(--surface-2); color: var(--text);
  box-shadow: 0 5px 0 var(--rail), 0 8px 16px color-mix(in srgb, #000 30%, transparent);
}
.pop-btn--ghost:active { transform: translateY(5px); box-shadow: 0 0 0 var(--rail); }
.pop-btn--danger { background: var(--danger); color: #fff; --pop-shadow: color-mix(in srgb, var(--danger) 45%, #000); }
.pop-btn--full { width: 100%; }

/* ── 3 · THE COURSE — full-viewport canvas + camera chrome ───────────── */
.v3-course {
  position: relative;
  min-height: 320px;
  background: radial-gradient(120% 80% at 50% 0%, var(--sky-lo) 0%, var(--bg) 78%);
  overflow: hidden;
  touch-action: none; /* the course owns gestures (orbit/follow drag) */
}
.v3-course__gl { position: absolute; inset: 0; }
.v3-course__gl canvas { display: block; width: 100%; height: 100%; }

.v3-cam {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line-bright);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px);
  color: var(--text); cursor: pointer;
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 3px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s;
}
.v3-cam:active { transform: translateY(3px); box-shadow: 0 0 0 var(--rail); }
.v3-cam__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.v3-cam[data-mode="table"] .v3-cam__dot { background: var(--lime); }
.v3-cam[data-mode="stadium"] .v3-cam__dot { background: var(--sky); }
.v3-cam[data-mode="follow"] .v3-cam__dot { background: var(--rar-legendary); }
.v3-cam__hint {
  position: absolute; top: 46px; right: 10px; z-index: 10;
  font: 700 9px/1.4 var(--font-mono); letter-spacing: 0.08em;
  color: var(--faint); text-transform: uppercase; text-align: right;
  pointer-events: none;
}

/* loading veil — placeholder capsules run while Geno + mocap stream in */
.v3-veil {
  position: absolute; inset: 0; z-index: 9;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 18px;
  pointer-events: none;
}
.v3-veil__tag {
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text); background: color-mix(in srgb, var(--bg) 68%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-bright); border-radius: 999px;
  padding: 8px 14px;
  animation: v3Pulse 1.4s ease-in-out infinite;
}

/* ── 4 · HUD — floats OVER the course (strip · feed · fx dock · actions) */
.v3-battle, .v3-result {
  display: flex; flex-direction: column;
  height: calc(100dvh - 44px); overflow: hidden; /* 44px = the quick bar */
}
.v3-battle .v3-course { flex: 1; min-height: 0; }
.v3-result .v3-course { flex: none; height: 46dvh; min-height: 260px; }
.v3-result .v3-pad { overflow-y: auto; flex: 1; min-height: 0; }
.v3-hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.v3-hud > * { pointer-events: auto; }

.v3-strip {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.v3-strip::-webkit-scrollbar { display: none; }
.v3-srow {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  font: 700 11px/1 var(--font-mono);
}
.v3-srow--you { border-color: color-mix(in srgb, var(--lime) 55%, transparent); }
.v3-srow__pos { color: var(--faint); }
.v3-srow__chip {
  width: 18px; height: 18px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 8.5px/1 var(--font-mono); color: #0b0c0e;
  background: var(--tier, var(--lime));
}
.v3-srow__name {
  color: var(--text); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; /* tap → toast with the full name (UX2 display fix) */
}
.v3-srow__ruf { margin-left: auto; } /* RUF pins right — tags never push it out */
.v3-srow__pct { color: var(--lime); font-variant-numeric: tabular-nums; }
.v3-srow__ruf { color: var(--faint); font-variant-numeric: tabular-nums; }
.v3-tag {
  font: 700 8px/1 var(--font-mono); letter-spacing: 0.08em;
  padding: 3px 5px; border-radius: 5px; text-transform: uppercase;
  border: 1px solid var(--line-bright); color: var(--muted);
}
.v3-tag--armed {
  color: var(--rar-legendary);
  border-color: color-mix(in srgb, var(--rar-legendary) 45%, transparent);
  background: color-mix(in srgb, var(--rar-legendary) 13%, transparent);
}
.v3-tag--lit {
  color: var(--rar-legendary);
  border-color: color-mix(in srgb, var(--rar-legendary) 45%, transparent);
  background: color-mix(in srgb, var(--rar-legendary) 18%, transparent);
}
.v3-tag--shield { color: var(--sky); border-color: color-mix(in srgb, var(--sky) 45%, transparent); }

.v3-feed {
  position: absolute; left: 10px; bottom: 10px; max-width: 52%;
  font: 500 11.5px/1.6 var(--font-body); color: var(--muted);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 10px; padding: 5px 9px;
  pointer-events: none;
}
.v3-feed b { color: var(--text); }

.v3-actions {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; gap: 8px;
}
.v3-actions .pop-btn { flex: 0 1 auto; }
.v3-actions #simBtn, .v3-actions #dealDrop { padding: 13px 14px; font-size: 11px; }

.v3-fxdockwrap {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 64px;
}

/* ── 5 · CARDS — fanned hand (v2 board card classes, reused) ─────────── */
.v3-dock {
  position: relative; z-index: 20;
  padding: 10px 12px 12px;
}
.bd-hand {
  position: relative; height: 132px;
  perspective: 900px;
  display: flex; align-items: flex-end; justify-content: center;
}
.bd-hand__slot {
  position: relative; width: 92px; height: 128px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); /* smooth re-fan */
}
.bd-hand .bd-hand__slot { margin: 0 -18px; } /* overlap fan */
.bd-hand .bd-hand__slot:nth-child(1) { transform: rotate(-7deg) translateY(8px); z-index: 1; }
.bd-hand .bd-hand__slot:nth-child(2) { transform: rotate(0deg); z-index: 2; }
.bd-hand .bd-hand__slot:nth-child(3) { transform: rotate(7deg) translateY(8px); z-index: 3; }
.bd-hand .bd-hand__slot:nth-child(4) { transform: rotate(13deg) translateY(16px); z-index: 4; }
.bd-hand .bd-hand__slot:nth-child(5) { transform: rotate(-13deg) translateY(16px); z-index: 0; }

.bd-card {
  position: absolute; inset: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s;
}
.bd-card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.bd-card__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.bd-card__face--front {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--card-face) 96%, var(--text) 10%) 0%,
      var(--card-face) 55%,
      color-mix(in srgb, var(--card-face) 85%, #000) 100%);
  border: 2px solid var(--rar);
  box-shadow: 0 8px 18px color-mix(in srgb, #000 45%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--rar) 30%, transparent);
  padding: 8px 8px 7px;
}
.bd-card__face--back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg,
      var(--card-back-1) 0 7px, var(--card-back-2) 7px 14px);
  border: 2px solid color-mix(in srgb, var(--lime) 35%, var(--bg));
  box-shadow: 0 8px 18px color-mix(in srgb, #000 45%, transparent);
  align-items: center; justify-content: center;
}
.bd-card__face--back::after {
  content: "R";
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 400 22px/1 var(--font-display);
  color: var(--on-accent); background: var(--lime);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #000 30%, transparent);
}
.bd-card__rar {
  align-self: flex-start;
  font: 700 7.5px/1 var(--font-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bg);
  background: var(--rar); border-radius: 5px; padding: 3px 5px;
}
.bd-card__icon { flex: 1; display: flex; align-items: center; justify-content: center; }
.bd-card__icon svg { width: 44px; height: 44px; }
.bd-card__name {
  font: 400 12.5px/1.05 var(--font-display); text-transform: uppercase;
  letter-spacing: 0.03em; margin: 0 0 3px; color: var(--text);
}
.bd-card__fx { font: 500 8.5px/1.3 var(--font-body); color: var(--muted); margin: 0 0 5px; }
.bd-card__cost {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 3px;
  font: 700 9px/1 var(--font-mono); color: var(--rar);
  border: 1px solid var(--rar); border-radius: 6px; padding: 3px 5px;
}

/* deal-in: slide up from the deck + flip to face */
.bd-card--deal { animation: bdDeal 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bd-card--deal .bd-card__inner { animation: bdDealFlip 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bdDeal {
  from { transform: translateY(130px) rotate(24deg); opacity: 0; }
  to { transform: translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes bdDealFlip {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(0deg); }
}
/* hover-lift (pointer devices) */
@media (hover: hover) {
  .bd-card:not(.is-playing):hover {
    transform: translateY(-16px) scale(1.07);
    filter: brightness(1.08);
    z-index: 9;
  }
}
/* selected (tap on touch, or keyboard focus) */
.bd-card.is-sel { transform: translateY(-14px) scale(1.07); z-index: 9; filter: brightness(1.08); }
.bd-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* PLAY: flip face-down, fly up, burst out */
.bd-card.is-playing { z-index: 30; }
.bd-card.is-playing .bd-card__inner {
  animation: bdPlayFlipFly 0.95s cubic-bezier(0.5, 0.05, 0.4, 1) forwards;
}
@keyframes bdPlayFlipFly {
  0% { transform: translate(0, 0) rotateY(0deg) scale(1); }
  38% { transform: translate(calc(var(--fly-dx, 0px) * 0.18), calc(var(--fly-dy, 0px) * 0.18 - 34px)) rotateY(180deg) scale(1.04); }
  74% { transform: translate(calc(var(--fly-dx, 0px) * 0.8), calc(var(--fly-dy, 0px) * 0.8)) rotateY(400deg) scale(0.6); opacity: 1; }
  100% { transform: translate(var(--fly-dx, 0px), var(--fly-dy, 0px)) rotateY(540deg) scale(0.12); opacity: 0; }
}
/* draft pick: fly to the hand dock position */
.bd-card.is-picking { z-index: 30; }
.bd-card.is-picking .bd-card__inner {
  animation: bdPickFly 0.7s cubic-bezier(0.4, 0.1, 0.3, 1) forwards;
}
@keyframes bdPickFly {
  0% { transform: rotateY(0deg) scale(1); }
  35% { transform: rotateY(180deg) scale(1.08) translateY(-20px); }
  100% { transform: rotateY(540deg) scale(0.2) translateY(-90px); opacity: 0; }
}
/* expiry burn: face-down fade + ember edge */
.bd-fx-expire {
  position: relative;
  animation: bdBurn 1.4s ease-in forwards;
}
@keyframes bdBurn {
  0% { filter: brightness(1) saturate(1); }
  55% { filter: brightness(1.25) saturate(1.4) hue-rotate(-12deg); }
  100% { filter: brightness(0.4) saturate(0.2); opacity: 0; transform: translateY(8px) scale(0.92); }
}

/* draft fan (the sheet's dealt three) */
.bd-draft {
  display: flex; justify-content: center; align-items: flex-end;
  height: 168px; perspective: 1000px;
  margin: 14px 0 6px;
}
.bd-draft .bd-hand__slot { width: 104px; height: 146px; margin: 0 -22px; }
.bd-draft .bd-hand__slot:nth-child(1) { transform: rotate(-9deg) translateY(12px); z-index: 1; }
.bd-draft .bd-hand__slot:nth-child(2) { transform: rotate(0deg) translateY(0); z-index: 2; }
.bd-draft .bd-hand__slot:nth-child(3) { transform: rotate(9deg) translateY(12px); z-index: 3; }

/* active-effect dock chips (lightning countdown ring, shield) */
.bd-fxdock { display: flex; gap: 8px; justify-content: center; margin-top: 8px; min-height: 40px; }
.bd-fx {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10.5px/1 var(--font-mono); color: var(--text);
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  border: 1px solid var(--line-bright); border-radius: 999px;
  padding: 4px 10px 4px 4px;
}
.bd-fx__ring {
  --p: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    conic-gradient(var(--rar-legendary) calc(var(--p) * 1turn),
      color-mix(in srgb, var(--bg) 70%, transparent) 0);
}
.bd-fx__ring span {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font: 400 12px/1 var(--font-body);
}

/* ── 6 · SHEETS — LOG REPS · draft-from-3 · card detail ──────────────── */
.bd-sheet { position: fixed; inset: auto 0 0 0; z-index: 60; }
.bd-sheet__veil {
  position: fixed; inset: 0; background: color-mix(in srgb, #000 55%, transparent);
  animation: bdVeilIn 0.25s ease both;
}
@keyframes bdVeilIn { from { opacity: 0; } to { opacity: 1; } }
.bd-sheet__panel {
  position: relative;
  background: var(--surface);
  border-top: 2px solid var(--line-bright);
  border-radius: 20px 20px 0 0;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
  transform: translateY(0);
  animation: bdSheetUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  box-shadow: 0 -12px 40px color-mix(in srgb, #000 50%, transparent);
}
@keyframes bdSheetUp { from { transform: translateY(102%); } to { transform: translateY(0); } }
.bd-sheet.is-closing .bd-sheet__panel { animation: bdSheetDown 0.22s ease-in both; }
.bd-sheet.is-closing .bd-sheet__veil { animation: bdVeilOut 0.22s ease-in both; }
@keyframes bdSheetDown { to { transform: translateY(102%); } }
@keyframes bdVeilOut { to { opacity: 0; } }
.bd-sheet__grab { width: 42px; height: 4px; border-radius: 2px; background: var(--line-bright); margin: 0 auto 12px; }
.bd-sheet__h {
  margin: 0 0 10px; font: 400 15px/1 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text);
}
.bd-exrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.bd-exchip {
  border: 1px solid var(--line-bright); background: var(--surface-2);
  color: var(--muted); border-radius: var(--pill);
  font: 700 10.5px/1 var(--font-mono); letter-spacing: 0.05em;
  padding: 8px 11px; cursor: pointer; text-transform: uppercase;
  transition: transform 0.12s, background 0.12s, color 0.12s;
}
.bd-exchip:active { transform: translateY(2px); }
.bd-exchip.is-on {
  background: var(--lime); color: var(--on-accent); border-color: var(--pop-shadow);
  box-shadow: 0 3px 0 var(--pop-shadow);
}
.bd-steprow { display: flex; gap: 6px; margin-bottom: 12px; }
.bd-step {
  flex: 1; border: 1px solid var(--line-bright); background: var(--surface-2);
  color: var(--text); border-radius: var(--radius-sm); cursor: pointer;
  font: 700 15px/1 var(--font-mono); padding: 13px 0;
  box-shadow: 0 4px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s;
}
.bd-step:active { transform: translateY(4px); box-shadow: 0 0 0 var(--rail); }
.bd-step.is-on { background: var(--lime); color: var(--on-accent); border-color: var(--pop-shadow); box-shadow: 0 4px 0 var(--pop-shadow); }

/* card detail sheet */
.bd-cdetail { display: flex; gap: 14px; align-items: stretch; }
.bd-cdetail__mini { flex: none; width: 104px; height: 146px; position: relative; perspective: 600px; }
.bd-cdetail__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bd-cdetail__name { margin: 0; font: 400 19px/1 var(--font-display); text-transform: uppercase; color: var(--text); }
.bd-cdetail__blurb { margin: 0; font: 500 12px/1.45 var(--font-body); color: var(--muted); }
.bd-cdetail__meta { display: flex; gap: 8px; margin-top: auto; align-items: center; flex-wrap: wrap; }
.bd-cdetail__rp { font: 700 11px/1 var(--font-mono); color: var(--faint); }

/* draft mates line */
.v3-draftmates { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.v3-dm {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px/1 var(--font-mono); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px;
}
.v3-dm i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* toasts */
.bd-toasts {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 80; display: flex; flex-direction: column; gap: 6px; width: min(92vw, 380px);
  pointer-events: none;
}
.bd-toast {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-bright);
  color: var(--text); font: 700 12px/1.3 var(--font-body);
  box-shadow: 0 6px 20px color-mix(in srgb, #000 45%, transparent);
  animation: bdToastIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bd-toast--ok { border-color: var(--success); }
.bd-toast--warn { border-color: var(--danger); }
.bd-toast.is-out { animation: bdToastOut 0.3s ease-in both; }
@keyframes bdToastIn { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bdToastOut { to { opacity: 0; transform: translateY(-12px) scale(0.96); } }

/* ── 7 · SCREENS ──────────────────────────────────────────────────────── */
.v3-pad { padding: 14px 14px 28px; }
.v3-h1 {
  margin: 6px 0 2px; font: 400 clamp(30px, 9vw, 44px)/0.95 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.01em;
}
.v3-h1 em { font-style: normal; color: var(--lime); }
.v3-sub { margin: 0 0 14px; color: var(--muted); font: 500 13px/1.5 var(--font-body); }
.v3-kicker {
  margin: 0; font: 700 10px/1 var(--font-mono); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--faint);
}
.v3-field { margin-bottom: 14px; }
.v3-input {
  width: 100%; padding: 13px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-bright); background: var(--surface-2);
  color: var(--text); font: 500 15px/1 var(--font-body);
}
.v3-input:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.v3-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-pick {
  border: 1px solid var(--line-bright); background: var(--surface-2);
  color: var(--text); border-radius: var(--radius-sm); cursor: pointer;
  padding: 10px 12px; min-width: 86px;
  box-shadow: 0 4px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s, border-color 0.12s;
}
.v3-pick:active { transform: translateY(4px); box-shadow: 0 0 0 var(--rail); }
.v3-pick.is-on {
  background: var(--lime); color: var(--on-accent); border-color: var(--pop-shadow);
  box-shadow: 0 4px 0 var(--pop-shadow);
}
.v3-pick__t { display: block; font: 400 14px/1.1 var(--font-display); text-transform: uppercase; }
.v3-pick__s { display: block; margin-top: 3px; font: 700 9px/1.3 var(--font-mono); color: var(--muted); }
.v3-pick.is-on .v3-pick__s { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }

/* home — battles list */
.v3-battles { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.v3-bcard {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  cursor: pointer; text-align: left; color: var(--text); width: 100%;
  box-shadow: 0 4px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.v3-bcard:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--rail); }
.v3-bcard__track {
  flex: none; width: 64px; height: 40px; border-radius: 8px;
  background: linear-gradient(180deg, var(--sky-lo), var(--grass));
  position: relative; overflow: hidden;
  border: 1px solid var(--line-bright);
}
.v3-bcard__track::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 7px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--track-line) 0 6px, transparent 6px 12px);
  opacity: 0.7;
}
.v3-bcard__track i {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  bottom: 4px; box-shadow: 0 0 6px currentColor;
}
.v3-bcard__name {
  margin: 0; font: 400 15px/1.1 var(--font-display); text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* long crew names never wrap-push */
}
.v3-bcard__meta {
  margin: 3px 0 0; font: 700 10px/1.4 var(--font-mono); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-bcard__status {
  flex: none; font: 700 9px/1 var(--font-mono); letter-spacing: 0.1em;
  padding: 6px 8px; border-radius: 999px; text-transform: uppercase;
  border: 1px solid var(--line-bright); color: var(--muted);
}
.v3-bcard__status--live {
  color: var(--on-accent); background: var(--lime); border-color: var(--pop-shadow);
}
.v3-bcard__status--done { color: var(--rar-legendary); border-color: color-mix(in srgb, var(--rar-legendary) 45%, transparent); }

/* result — the 3D podium screen */
.v3-result__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 8; }
.v3-result__confetti i {
  position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px;
  background: var(--c, var(--lime)); opacity: 0.9;
  animation: v3Confetti var(--dur, 2.6s) linear var(--delay, 0s) infinite;
  transform: rotate(var(--rot, 0deg));
}
@keyframes v3Confetti {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  8% { opacity: 0.95; }
  100% { transform: translateY(70vh) rotate(660deg); opacity: 0.75; }
}
.v3-resultbar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-bright);
}
.v3-resultbar__crown { font-size: 20px; line-height: 1; }
.v3-resultbar__name { flex: 1; min-width: 0; }
.v3-resultbar__t { margin: 0; font: 400 15px/1.1 var(--font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-resultbar__s { margin: 2px 0 0; font: 700 9.5px/1.3 var(--font-mono); color: var(--muted); }
.v3-resultbar__pot {
  font: 700 13px/1 var(--font-mono); color: var(--rar-legendary);
  border: 1px solid color-mix(in srgb, var(--rar-legendary) 45%, transparent);
  border-radius: 999px; padding: 7px 10px; white-space: nowrap;
}

/* squad ladder */
.v3-lad { width: 100%; border-collapse: collapse; margin-top: 10px; }
.v3-lad th, .v3-lad td {
  padding: 9px 8px; text-align: left; font: 700 11.5px/1 var(--font-mono);
  border-bottom: 1px solid var(--line); color: var(--muted);
}
.v3-lad th { color: var(--faint); font-size: 9.5px; letter-spacing: 0.14em; }
.v3-lad td:nth-child(n+3), .v3-lad th:nth-child(n+3) { text-align: right; }
.v3-lad tr.is-you td { color: var(--lime); }

/* ── 7b · UX2 — THE 3-CLICK ENTRY ────────────────────────────────────── */
.v3-entry { display: flex; flex-direction: column; min-height: calc(100dvh - 44px - env(safe-area-inset-top)); }
.v3-entry__brand { padding: 14px 16px 0; }
.v3-entry__pad { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; padding-bottom: 20px; }
.v3-entry__step { transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.v3-entry__step.is-wait { opacity: 0.5; }        /* next up — visible, dimmed */
.v3-entry__step.is-now { opacity: 1; }
.v3-entry__step.is-done { opacity: 0.85; }
.v3-entry__label {
  margin: 0 0 8px; font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
  display: flex; align-items: center; gap: 8px;
}
.v3-entry__label i {
  font-style: normal; width: 18px; height: 18px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); color: var(--on-accent); font-size: 10px;
}
.v3-input--big {
  font: 400 20px/1.2 var(--font-display); padding: 14px 14px;
  text-transform: none; letter-spacing: 0.01em;
}
.v3-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v3-tier {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 12px 11px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--line-bright); background: var(--surface);
  color: var(--text); text-align: left;
  box-shadow: 0 4px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
  min-height: 86px; /* big, forgiving tap targets — the × on the face */
}
.v3-tier:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--rail); }
.v3-tier:disabled { opacity: 0.45; cursor: not-allowed; }
.v3-tier__x { font: 400 22px/1 var(--font-display); color: var(--lime); }
.v3-tier__t { font: 700 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.v3-tier__s { font: 500 9.5px/1.3 var(--font-body); color: var(--muted); }
.v3-tier.is-on {
  border-color: var(--lime);
  background: color-mix(in srgb, var(--lime) 10%, var(--surface));
  box-shadow: 0 4px 0 var(--pop-shadow), 0 0 0 1px color-mix(in srgb, var(--lime) 50%, transparent);
}
.v3-entry__note { margin: 10px 2px 0; font: 500 11px/1.6 var(--font-body); color: var(--muted); }
.v3-entry__note b { color: var(--text); }

/* UX2 — THE HUB (home) */
.v3-hub__sub { margin: 9px 2px 10px; font: 500 11.5px/1.6 var(--font-body); color: var(--muted); }
.v3-hub__sub b { color: var(--text); }
.v3-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 700 11px/1 var(--font-mono); letter-spacing: 0.08em;
  color: var(--lime); text-transform: uppercase; text-decoration: underline;
}

/* UX2 — ⚙︎ HOUSE RULES — config as rule cards (the power-up teaser) */
.rule-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.rule-card {
  flex: 1 1 30%; min-width: 104px; position: relative;
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 10px 9px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-bright); background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 3px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
}
.rule-card:active { transform: translateY(3px); box-shadow: 0 0 0 var(--rail); }
.rule-card.is-on {
  border-color: var(--lime);
  background: color-mix(in srgb, var(--lime) 12%, var(--surface));
  box-shadow: 0 3px 0 var(--pop-shadow), 0 0 0 1px color-mix(in srgb, var(--lime) 50%, transparent);
}
.rule-card__t { font: 700 11px/1 var(--font-mono); letter-spacing: 0.06em; }
.rule-card__s { font: 500 9.5px/1.35 var(--font-body); color: var(--muted); }
.rule-card.is-on .rule-card__s { color: color-mix(in srgb, var(--text) 80%, transparent); }
.rule-card__note {
  flex-basis: 100%; font: 700 8.5px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  padding: 2px 2px 0;
}

/* UX2 — drag-to-look affordance (fades on first touch — JS adds .is-gone) */
.v3-orbit {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.v3-orbit span {
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text); background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-bright); border-radius: 999px;
  padding: 10px 15px;
  animation: v3OrbitFloat 2.6s ease-in-out 0.8s infinite;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@keyframes v3OrbitFloat { 50% { transform: translateY(-5px); } }
.v3-orbit.is-gone span { opacity: 0; transform: translateY(10px); animation: none; }

/* UX2 — 390×844 HUD stack: buttons own the bottom row, the feed stacks
   ABOVE them (was: feed under-ran the buttons and they covered text), the
   fx chips sit under the standings strip, the gesture hint lands above
   the feed on the right. No overlaps, no scroll, nothing covered. */
@media (max-width: 899px) {
  .v3-actions { left: 10px; }
  .v3-actions #logBtn { flex: 1; }        /* the primary action stretches */
  .v3-feed {
    left: 10px; right: 10px; bottom: 66px; max-width: none;
    font: 500 11px/1.5 var(--font-body);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .v3-fxdockwrap { top: 56px; bottom: auto; }  /* fx chips: under the strip */
  .v3-cam__hint { top: auto; bottom: 130px; }  /* gesture cheat-sheet above feed */
}

/* ── 8 · RESPONSIVE — phone floats → desktop side rails ──────────────── */
@media (min-width: 900px) {
  .v3-strip {
    top: 56px; left: 14px; right: auto; bottom: 190px;
    flex-direction: column; overflow-y: auto; max-width: 300px;
  }
  .v3-srow { width: max-content; min-width: 240px; }
  .v3-srow__name { max-width: none; }
  .v3-feed { left: 14px; bottom: 14px; max-width: 320px; }
  .v3-actions { right: 14px; bottom: 14px; }
  .v3-fxdockwrap { left: auto; transform: none; right: 14px; bottom: 74px; }
  .v3-cam { top: 14px; right: 14px; }
  .v3-cam__hint { top: 50px; right: 14px; }
}

/* narrow phones: the 5-card fan overlaps harder so it never exceeds 390 */
@media (max-width: 430px) {
  .bd-hand .bd-hand__slot { margin: 0 -24px; width: 90px; height: 126px; }
  .bd-hand { height: 128px; }
}

/* reduced motion — static course, no sheet/confetti/pulse animation */
@media (prefers-reduced-motion: reduce) {
  .v3-screen, .bd-sheet__panel, .bd-sheet__veil, .bd-card--deal, .bd-card--deal .bd-card__inner,
  .bd-card.is-playing .bd-card__inner, .bd-card.is-picking .bd-card__inner,
  .v3-veil__tag, .v3-clock[data-dz="3"] .v3-clock__time, .bd-fx-expire {
    animation: none !important;
  }
  .v3-result__confetti { display: none; }
  .bd-card, .bd-hand__slot, .pop-btn, .v3-quick__btn { transition: none !important; }
}