/* ═══════════════════════════════════════════════════════════════════════
   RWF · V2 THE TABLE — board.css
   The poker-table × track-and-field battle surface.

   Layers, top to bottom:
     0 · tokens        — bd-* slot defaults (board theme re-points them)
     1 · shell         — app frame, headers, screens
     2 · POPPING       — .pop-btn: chunky offset solid shadows, 120ms press
     3 · the table     — felt, vignette, rail, lanes, finish line
     4 · tokens        — player chips ON the track (comeback ⚡ glow)
     5 · the kitty     — centre medallion + denomination chip stacks
     6 · CARDS         — poker-fanned hand; deal / hover / play / expiry
                         (CSS 3D — perspective + preserve-3d, no libs)
     7 · panels        — race positions, commentary feed, fx dock
     8 · sheets        — log sheet, toasts, card detail
     9 · screens       — home, setup, create, draft, result, squad
    10 · responsive    — 390px phone → desktop grid
   Everything reads theme slots (var(--…)) so the app re-skins under any
   design/themes.css skin; the [data-theme="board"] block pins the flagship
   felt-green + gold look (chip colours, card backs, chunky radii).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0 · board slot defaults (any theme gets a sane table) ─────────── */
:root {
  --felt: color-mix(in srgb, var(--success) 14%, var(--bg));
  --felt-deep: color-mix(in srgb, var(--bg) 72%, #000);
  --felt-line: color-mix(in srgb, var(--text) 16%, transparent);
  --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;

  --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);
  --speed: 0.9s; /* token travel along the track */
}

/* ── 1 · shell ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.bd-app {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
.bd-screen { animation: bdScreenIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bdScreenIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* header — back · title · race clock */
.bd-top {
  position: sticky; top: 0; z-index: 40;
  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);
}
.bd-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;
}
.bd-top__back:active { transform: translateY(3px); box-shadow: 0 0 0 var(--rail); }
.bd-top__title { flex: 1; min-width: 0; }
.bd-top__kicker {
  margin: 0; font: 700 9.5px/1.2 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
.bd-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;
}
.bd-clock { text-align: right; }
.bd-clock__lap {
  font: 700 9.5px/1.2 var(--font-mono); letter-spacing: 0.14em;
  color: var(--faint); text-transform: uppercase;
}
.bd-clock__time {
  font: 700 17px/1.1 var(--font-mono); color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* danger-zone ramp on the race clock (3h/1h/30min → gold/orange/red) */
.bd-clock[data-dz="1"] .bd-clock__time { color: var(--amber); }
.bd-clock[data-dz="2"] .bd-clock__time { color: var(--urgency); }
.bd-clock[data-dz="3"] .bd-clock__time { color: var(--danger); animation: bdPulse 1s steps(2) infinite; }
@keyframes bdPulse { 50% { opacity: 0.55; } }
.bd-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);
}
.bd-dz[data-dz="1"] { background: var(--amber); }
.bd-dz[data-dz="3"] { background: var(--danger); color: #fff; }

/* ── 2 · POPPING BUTTONS — the founder ask: buttons that pop ────────── */
.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 TABLE — felt, rail, lanes, finish ──────────────────────── */
.bd-tablewrap { padding: 12px 12px 0; }
.bd-table {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 30%,
      color-mix(in srgb, var(--felt) 88%, var(--text) 6%) 0%,
      var(--felt) 46%,
      var(--felt-deep) 100%);
  border-radius: 26px;
  box-shadow:
    inset 0 0 0 6px var(--rail),
    inset 0 0 0 8px var(--rail-edge),
    inset 0 14px 44px color-mix(in srgb, #000 45%, transparent),
    inset 0 -8px 30px color-mix(in srgb, #000 35%, transparent),
    0 3px 0 color-mix(in srgb, var(--rail) 80%, #000);
  aspect-ratio: 10 / 9;           /* phone: keep the hand above the fold */
  min-height: 240px;
  overflow: hidden;
}
@media (min-width: 480px) and (max-width: 879px) {
  .bd-table { aspect-ratio: 10 / 10; }
}
.bd-track { position: absolute; inset: 22px; pointer-events: none; }
.bd-lane {
  position: absolute; border-radius: 999px;
  border: 2px solid var(--felt-line);
}
.bd-lane:nth-child(odd) { border-style: solid; }
.bd-lane:nth-child(even) { border-style: dashed; border-color: color-mix(in srgb, var(--text) 10%, transparent); }
/* start / finish — checkered strip at the bottom of the track */
.bd-finish {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 14px; border-radius: 3px;
  background:
    repeating-conic-gradient(var(--text) 0% 25%, var(--felt-deep) 0% 50%)
    0 0 / 12px 7px;
  opacity: 0.85;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 25%, transparent);
}

/* ── 4 · TOKENS — player chips ON the track ─────────────────────────── */
.bd-token {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; margin: 0; padding: 0;
  border: 0; background: none; appearance: none;
  transform: translate(-200px, -200px); /* parked off-track until placed */
  transition: transform var(--speed) cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto; cursor: pointer; z-index: 5;
}
.bd-token__chip {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%,
      color-mix(in srgb, var(--tier, var(--lime)) 30%, #fff) 0%,
      var(--tier, var(--lime)) 58%,
      color-mix(in srgb, var(--tier, var(--lime)) 62%, #000) 100%);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, #fff 32%, transparent),
    inset 0 0 0 5px var(--tier, var(--lime)),
    inset 0 -4px 8px color-mix(in srgb, #000 40%, transparent),
    0 4px 8px color-mix(in srgb, #000 45%, transparent);
  display: flex; align-items: center; justify-content: center;
  font: 400 13px/1 var(--font-display); color: #10130f;
  text-shadow: 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}
.bd-token__chip svg { width: 22px; height: 22px; }
.bd-token__flag {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 3px; white-space: nowrap;
  font: 700 8.5px/1 var(--font-mono); letter-spacing: 0.08em;
  color: var(--text); text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  padding: 3px 5px; border-radius: 6px;
  border: 1px solid var(--felt-line);
}
.bd-token--you { z-index: 8; }
.bd-token--you .bd-token__chip {
  outline: 2px solid var(--text); outline-offset: 2px;
}
/* comeback ARMED → ⚡ electric glow */
.bd-token--armed .bd-token__chip {
  animation: bdArmed 1.6s ease-in-out infinite;
}
@keyframes bdArmed {
  0%, 100% {
    box-shadow:
      inset 0 0 0 3px color-mix(in srgb, #fff 32%, transparent),
      inset 0 0 0 5px var(--tier, var(--lime)),
      0 0 0 0 color-mix(in srgb, var(--amber) 70%, transparent);
  }
  50% {
    box-shadow:
      inset 0 0 0 3px color-mix(in srgb, #fff 32%, transparent),
      inset 0 0 0 5px var(--amber),
      0 0 14px 5px color-mix(in srgb, var(--amber) 55%, transparent);
  }
}
.bd-token--armed::after {
  content: "⚡"; position: absolute; top: -10px; right: -8px;
  font: 700 12px/1 var(--font-body);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--amber) 80%, transparent));
  animation: bdPulse 1.2s ease-in-out infinite;
}
/* lightning window → gold ring + live bolt badge */
.bd-token--lit .bd-token__chip {
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, #fff 32%, transparent),
    inset 0 0 0 5px var(--rar-legendary),
    0 0 12px 3px color-mix(in srgb, var(--rar-legendary) 55%, transparent);
}
.bd-token--shield .bd-token__chip {
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, #fff 32%, transparent),
    inset 0 0 0 5px var(--sky),
    0 0 10px 2px color-mix(in srgb, var(--sky) 45%, transparent);
}

/* ── 5 · THE KITTY — medallion + chip stacks ────────────────────────── */
.bd-kitty {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 118px; height: 118px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%,
      color-mix(in srgb, var(--felt) 70%, var(--text) 12%) 0%,
      var(--felt-deep) 78%);
  box-shadow:
    inset 0 0 0 3px var(--felt-line),
    inset 0 0 0 8px color-mix(in srgb, var(--rar-legendary) 30%, transparent),
    inset 0 0 0 9px var(--felt-line),
    0 6px 18px color-mix(in srgb, #000 50%, transparent);
}
.bd-kitty.is-bump { animation: bdKittyBump 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes bdKittyBump {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.bd-kitty__label {
  font: 700 9px/1 var(--font-mono); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--rar-legendary);
}
.bd-kitty__total {
  font: 400 30px/1 var(--font-display); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bd-kitty__pts { font: 700 8.5px/1 var(--font-mono); color: var(--faint); letter-spacing: 0.12em; }

/* denomination stacks tucked around the medallion */
.bd-stacks { position: absolute; inset: -14px; pointer-events: none; }
.bd-stack { position: absolute; display: flex; flex-direction: column-reverse; }
.bd-stack--gold { right: -6px; top: -8px; }
.bd-stack--blue { left: -8px; top: -4px; }
.bd-stack--red { right: 2px; bottom: -10px; }
.bd-stack--white { left: -2px; bottom: -8px; }
.bd-chip {
  width: 17px; height: 17px; border-radius: 50%;
  margin-top: -11px; /* stack overlap */
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 35%, transparent),
              inset 0 -2px 3px color-mix(in srgb, #000 35%, transparent),
              0 2px 3px color-mix(in srgb, #000 40%, transparent);
  animation: bdChipIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bd-stack .bd-chip:first-child { margin-top: 0; }
.bd-chip--white { background: var(--chip-white); }
.bd-chip--red { background: var(--chip-red); }
.bd-chip--blue { background: var(--chip-blue); }
.bd-chip--gold { background: var(--chip-gold); }
@keyframes bdChipIn {
  from { transform: translateY(-14px) scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.bd-stack__n {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font: 700 9px/1 var(--font-mono); color: var(--text);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border: 1px solid var(--felt-line); border-radius: 5px; padding: 2px 4px;
}

/* a chip flying from a token into the kitty on every log */
.bd-chipfly {
  position: absolute; z-index: 9; width: 15px; height: 15px; border-radius: 50%;
  pointer-events: none;
  background: var(--chip-red);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 40%, transparent),
              0 2px 4px color-mix(in srgb, #000 45%, transparent);
  animation: bdChipFly 0.85s cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}
@keyframes bdChipFly {
  0% { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(0, 0) scale(0.5); opacity: 0; }
}

/* card-play effect burst at the kitty */
.bd-burst {
  position: absolute; left: 50%; top: 50%; z-index: 7;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; pointer-events: none;
  border: 3px solid var(--burst, var(--lime));
  animation: bdBurst 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.bd-burst::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  border: 2px solid var(--burst, var(--lime));
  animation: bdBurst 0.7s 0.09s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes bdBurst {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(4.2); opacity: 0; }
}

/* ── 6 · POWER-UP CARDS — poker fan, CSS 3D ─────────────────────────── */
.bd-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 to the kitty, shrink 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); }
}

/* 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 {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line-bright);
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.06em;
  color: var(--text); text-transform: uppercase;
}
.bd-fx__ring {
  --p: 1; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--rar-legendary) calc(var(--p) * 1turn),
              color-mix(in srgb, var(--text) 10%, transparent) 0);
  display: grid; place-items: center;
}
.bd-fx__ring::after {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-2);
}
.bd-fx__ring span { position: relative; z-index: 1; font-size: 11px; }
.bd-fx.is-expiring { animation: bdBurn 1.4s ease-in forwards; }

/* ── 7 · PANELS — positions (the race read), commentary feed ────────── */
.bd-panels { padding: 10px 12px 0; display: grid; gap: 10px; }
.bd-positions { display: flex; flex-direction: column; gap: 6px; }
.bd-prow {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.bd-prow--you { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 7%, var(--surface)); }
.bd-prow__pos {
  font: 700 11px/1 var(--font-mono); color: var(--faint);
  width: 22px; flex: none;
}
.bd-prow__chip {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 400 10px/1 var(--font-display); color: #10130f;
  background: radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--tier, var(--lime)) 30%, #fff) 0%,
    var(--tier, var(--lime)) 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 30%, transparent);
}
.bd-prow__name {
  flex: 1; min-width: 0;
  font: 700 12px/1.1 var(--font-body); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-prow__tags { display: flex; gap: 4px; flex: none; }
.bd-tag {
  font: 700 8.5px/1 var(--font-mono); letter-spacing: 0.06em;
  padding: 3px 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
}
.bd-tag--lit { background: color-mix(in srgb, var(--rar-legendary) 16%, transparent); color: var(--rar-legendary); border-color: color-mix(in srgb, var(--rar-legendary) 40%, transparent); }
.bd-tag--shield { background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--sky); border-color: color-mix(in srgb, var(--sky) 40%, transparent); }
.bd-tag--lead { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.bd-prow__gap { font: 700 11px/1 var(--font-mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.bd-prow__rp { font: 700 10.5px/1 var(--font-mono); color: var(--muted); width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

.bd-feed { display: flex; flex-direction: column; gap: 4px; }
.bd-feed__row {
  display: flex; gap: 8px; align-items: baseline;
  font: 500 11.5px/1.35 var(--font-body); color: var(--muted);
  animation: bdFeedIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bd-feed__row b { color: var(--text); }
.bd-feed__lap {
  flex: none; font: 700 8.5px/1.6 var(--font-mono); color: var(--faint);
  letter-spacing: 0.08em;
}
@keyframes bdFeedIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* ── 8 · SHEETS — log sheet, toasts, card detail ────────────────────── */
.bd-actions {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px 4px;
}
.bd-actions .pop-btn { flex: 1; }

.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); }

/* 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); } }

/* ── 9 · SCREENS — home · setup · create · draft · result · squad ───── */
.bd-pad { padding: 14px 14px 28px; }
.bd-h1 {
  margin: 6px 0 2px; font: 400 clamp(30px, 9vw, 44px)/0.95 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.01em;
}
.bd-h1 em { font-style: normal; color: var(--lime); }
.bd-sub { margin: 0 0 14px; color: var(--muted); font: 500 13px/1.5 var(--font-body); }
.bd-kicker {
  margin: 0; font: 700 10px/1 var(--font-mono); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--faint);
}

/* home — tables list */
.bd-tables { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bd-tcard {
  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;
}
.bd-tcard:active { transform: translateY(4px); box-shadow: 0 0 0 var(--rail); }
.bd-tcard__felt {
  flex: none; width: 58px; height: 40px; border-radius: 999px;
  background: radial-gradient(circle at 50% 32%, var(--felt), var(--felt-deep));
  box-shadow: inset 0 0 0 2px var(--rail), inset 0 4px 10px color-mix(in srgb, #000 40%, transparent);
  position: relative; overflow: hidden;
}
.bd-tcard__felt i {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 30%, transparent);
}
.bd-tcard__name { font: 400 15px/1.1 var(--font-display); text-transform: uppercase; margin: 0 0 3px; }
.bd-tcard__meta { font: 600 10.5px/1 var(--font-mono); color: var(--faint); margin: 0; }
.bd-tcard__status {
  margin-left: auto; flex: none;
  font: 700 9px/1 var(--font-mono); letter-spacing: 0.1em;
  padding: 5px 8px; border-radius: 6px; text-transform: uppercase;
}
.bd-tcard__status--live { background: var(--success); color: var(--bg); }
.bd-tcard__status--open { background: var(--amber); color: var(--on-warn); }
.bd-tcard__status--done { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-bright); }

/* theme picker row */
.bd-themes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.bd-thbtn {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--line-bright);
  background: var(--sw);
  box-shadow: 0 3px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  padding: 0;
}
.bd-thbtn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--rail); }
.bd-thbtn.is-on { border-color: var(--text); outline: 2px solid var(--lime); outline-offset: 1px; }

/* setup / create — chips + inputs */
.bd-field { margin: 14px 0 4px; }
.bd-input {
  width: 100%; padding: 13px 14px;
  background: var(--surface-2); border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm); color: var(--text);
  font: 600 15px/1.2 var(--font-body);
  box-shadow: 0 3px 0 var(--rail);
}
.bd-input:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.bd-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-pick {
  border: 1px solid var(--line-bright); background: var(--surface-2);
  color: var(--muted); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer; text-align: left;
  box-shadow: 0 4px 0 var(--rail);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s, color 0.12s;
}
.bd-pick:active { transform: translateY(4px); box-shadow: 0 0 0 var(--rail); }
.bd-pick.is-on { background: var(--lime); color: var(--on-accent); border-color: var(--pop-shadow); box-shadow: 0 4px 0 var(--pop-shadow); }
.bd-pick__t { display: block; font: 700 12px/1.1 var(--font-body); }
.bd-pick__s { display: block; font: 600 9.5px/1.3 var(--font-mono); opacity: 0.75; margin-top: 2px; }

/* draft screen */
.bd-draft {
  display: flex; justify-content: center; gap: 4px;
  perspective: 1100px; margin: 18px 0 8px; height: 190px;
  align-items: center;
}
.bd-draft .bd-card { position: relative; width: 104px; height: 148px; flex: none; }
.bd-draft .bd-card:nth-child(1) { transform: rotate(-10deg) translate(8px, 8px); }
.bd-draft .bd-card:nth-child(2) { transform: translateY(-6px); z-index: 2; }
.bd-draft .bd-card:nth-child(3) { transform: rotate(10deg) translate(-8px, 8px); }
.bd-draft .bd-card.is-sel { transform: translateY(-22px) scale(1.1); z-index: 5; }
.bd-draftmates { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.bd-dm {
  display: flex; align-items: center; gap: 6px;
  font: 700 9.5px/1 var(--font-mono); color: var(--faint);
  border: 1px dashed var(--line-bright); border-radius: var(--pill); padding: 5px 9px;
  text-transform: uppercase;
}
.bd-dm i {
  width: 16px; height: 22px; border-radius: 3px; flex: none;
  background: repeating-linear-gradient(45deg, var(--card-back-1) 0 4px, var(--card-back-2) 4px 8px);
  border: 1px solid color-mix(in srgb, var(--lime) 30%, var(--bg));
}

/* result — podium ON the table */
.bd-podium {
  position: absolute; inset: auto 0 34px;
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  z-index: 8; pointer-events: none;
}
.bd-ped { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 84px; }
.bd-ped__who {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: 700 9px/1.1 var(--font-mono); color: var(--text); text-transform: uppercase;
  text-align: center;
}
.bd-ped__chip {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 400 11px/1 var(--font-display); color: #10130f;
  background: radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--tier, var(--lime)) 30%, #fff) 0%,
    var(--tier, var(--lime)) 100%);
  box-shadow: 0 3px 8px color-mix(in srgb, #000 45%, transparent);
}
.bd-ped__base {
  width: 100%; border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rar-legendary) 30%, var(--felt-deep)),
    var(--felt-deep));
  border: 1px solid var(--felt-line);
  display: flex; align-items: flex-start; justify-content: center;
  font: 400 18px/1 var(--font-display); color: var(--text); padding-top: 6px;
  height: var(--h, 48px);
  box-shadow: inset 0 6px 12px color-mix(in srgb, #000 35%, transparent);
}
.bd-ped--1 .bd-ped__base { --h: 72px; border-top: 3px solid var(--rar-legendary); }
.bd-ped--2 .bd-ped__base { --h: 50px; }
.bd-ped--3 .bd-ped__base { --h: 36px; }
.bd-ped { animation: bdPedPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.bd-ped--2 { animation-delay: 0.08s; } .bd-ped--3 { animation-delay: 0.16s; }
@keyframes bdPedPop {
  from { transform: translateY(26px) scale(0.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.bd-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 7; }
.bd-confetti i {
  position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px;
  background: var(--c, var(--lime)); opacity: 0.9;
  animation: bdConfetti var(--dur, 2.6s) linear var(--delay, 0s) infinite;
}
@keyframes bdConfetti {
  0% { transform: translateY(-14px) rotate(0deg); }
  100% { transform: translateY(360px) rotate(340deg); }
}

/* squad ladder */
.bd-lad { width: 100%; border-collapse: collapse; margin-top: 10px; }
.bd-lad th {
  text-align: left; font: 700 9.5px/1 var(--font-mono); letter-spacing: 0.12em;
  color: var(--faint); text-transform: uppercase; padding: 7px 8px;
  border-bottom: 1px solid var(--line);
}
.bd-lad td { padding: 10px 8px; border-bottom: 1px solid var(--line); font: 600 12.5px/1 var(--font-body); }
.bd-lad tr.is-you td { color: var(--lime); }

/* ── 10 · RESPONSIVE — 390px phone → desktop ────────────────────────── */
@media (min-width: 880px) {
  /* NOTE: no auto margins here — `margin: 0 auto` on a grid item defeats
     stretch and shrinks the column to content width (found via CDP probe) */
  .bd-tablewrap { max-width: none; margin: 0; padding: 18px 0 0; }
  .bd-table { aspect-ratio: 16 / 10; }
  .bd-stage { /* table + side panels */
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: 14px; max-width: 1080px; margin: 0 auto; padding: 14px 18px 0;
    align-items: start;
  }
  .bd-stage .bd-panels { padding: 0; }
  .bd-dock { max-width: 1080px; margin: 0 auto; }
  .bd-hand { height: 150px; }
  .bd-hand__slot { width: 102px; height: 142px; }
  .bd-kitty { width: 138px; height: 138px; }
  .bd-kitty__total { font-size: 36px; }
}
@media (max-width: 389px) {
  .bd-hand__slot { width: 84px; height: 118px; }
  .bd-token { width: 30px; height: 30px; }
  .bd-kitty { width: 104px; height: 104px; }
  .bd-kitty__total { font-size: 26px; }
}

/* accessibility — honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bd-token { transition-duration: 0.01s; }
  .bd-card--deal, .bd-card--deal .bd-card__inner,
  .bd-card.is-playing .bd-card__inner,
  .bd-card.is-picking .bd-card__inner { animation-duration: 0.01s; }
  .bd-confetti, .bd-token--armed .bd-token__chip, .bd-token--armed::after { animation: none; }
}