/* Battle table (js/battle-table.js): the lobby, the 3-2-1, the arena and the
   result. The table is the playmat (the same neoprene as the pack opening);
   each lane is a player's stretch of it: a header (avatar, name) over the
   stage, and under the cards their total on a strip of thermal paper. Everything
   inside a .tb-stage belongs to the reveal engine (css/battle-reveal.css). */

.tb {
  --tb-lane-gap: 10px;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.tb-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- Top line: back, status, invite ---------------------------------------- */
.tb-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  min-height: 44px; margin: -10px 0 12px;
}
.tb-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-right: 6px;
  color: var(--ink-2); font-weight: 560; text-decoration: none;
}
.tb-back:hover { color: var(--ink); }
.tb-top-mid { flex: 1; min-width: 0; }
.tb-top-right { display: flex; align-items: center; }
.tb-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums;
}
.tb-status.is-live { color: var(--ink-2); }
.tb-status.is-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.tb-status.is-warn { color: var(--ink-2); }
.tb-link-btn, .tb-text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
  background: none; border: 0; color: var(--ink); font: inherit; font-weight: 560; cursor: pointer;
}
.tb-link-btn span, .tb-text-link {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint);
}
.tb-link-btn:hover span, .tb-text-link:hover { text-decoration-color: var(--ink); }
.tb-top .ghost.sm { gap: 6px; display: inline-flex; align-items: center; min-height: 44px; }
.tb-invite-field { flex-basis: 100%; display: grid; gap: 4px; padding-bottom: 6px; }
.tb-invite-field input {
  min-height: 44px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); font: inherit; font-size: 14px;
}
.tb-invite-field span { font-size: 13px; color: var(--muted); }

/* ---- Heading ------------------------------------------------------------ */
.tb-head { margin: 0 0 18px; }
.tb-head .page-title { margin: 0 0 8px; }
.tb-lede { margin: 0; max-width: 54ch; color: var(--ink-2); }
.tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.tb-row .solid, .tb-row .ghost, .tb-dock .solid, .tb-dock .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.tb-quiet { margin: 14px 2px 0; color: var(--muted); font-size: 13px; }

/* The slim round header floats under the site header once the page scrolls
   past it (js/battle-table.js updateFloats: sticky can't engage here). */
.tb-head.is-float .tb-round {
  position: fixed; top: var(--tb-top, 0px); left: 0; right: 0; z-index: 25;
  padding: 8px max(var(--gutter), calc((100vw - 1100px) / 2)) 10px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line), 0 12px 24px -12px rgb(0 0 0 / 0.6);
}
.tb-dock-slot.is-float .tb-dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar) + 12px); z-index: 25; margin: 0;
}
.tb-round-main {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
}
.tb-round-art { width: 30px; height: 42px; display: grid; place-items: center; }
.tb-round-art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.5)); }
.tb-round-copy { display: grid; min-width: 0; line-height: 1.25; }
.tb-round-copy b, .tb-round-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-round-copy b { font-size: 15px; font-weight: 650; }
.tb-round-copy span { font-size: 13px; color: var(--muted); }
.tb-round-count { display: grid; justify-items: end; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-round-count b { font-size: 15px; font-weight: 650; }
.tb-round-count b span { color: var(--muted); font-weight: 500; }
.tb-next { font-size: 13px; color: var(--muted); }
.tb-track { display: flex; gap: 3px; height: 3px; margin-top: 10px; }
.tb-round.is-dense .tb-track { gap: 1px; }
.tb-track i { position: relative; flex: 1; overflow: hidden; border-radius: 2px; background: var(--line-2); }
.tb-track i.is-done { background: rgb(var(--hl) / 0.62); }
.tb-track i.is-now b {
  position: absolute; inset: 0; background: var(--ink); transform-origin: left center;
  transform: scaleX(0); animation: tb-fill var(--d, 6000ms) linear var(--delay, 0ms) forwards;
}
@keyframes tb-fill { to { transform: scaleX(1); } }

/* ---- The table ---------------------------------------------------------- */
.tb-table {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 14px;
  border-radius: 18px;
  background: url("../assets/textures/neoprene.png"), var(--mat);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 4px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.tb-table::after { /* the stitched edge */
  content: ""; position: absolute; inset: 5px; z-index: -1; border: 1px dashed rgba(220, 220, 214, 0.22); border-radius: 14px; pointer-events: none;
}
.tb-table::before { /* the pendant's pool, low over the lanes */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 52% 62% at 50% 50%, rgba(255, 224, 178, 0.07), transparent 72%);
}
.tb[data-view="error"] .tb-table { display: none; }
.tb[data-view="cancelled"] .tb-lanes { display: none; }
.tb[data-view="cancelled"] .tb-pot { margin: 0; padding-bottom: 4px; border-bottom: 0; }

/* The pot: the lineup's real wrappers, fanned like chips in the middle. */
.tb-pot { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; padding: 6px 4px 16px; border-bottom: 1px solid rgba(220, 220, 214, 0.16); }
.tb-pot:empty { display: none; }
.tb-pot-art { display: flex; align-items: flex-end; flex: none; padding: 0 8px 0 4px; }
.tb-pot-item { position: relative; height: 76px; margin-left: -16px; transform: rotate(var(--r, 0deg)); }
.tb-pot-item:first-child { margin-left: 0; }
.tb-pot-item img { display: block; height: 100%; width: auto; max-width: 96px; object-fit: contain; filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.55)); }
.tb-qty, .tb-pot-more {
  display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--ink); color: var(--black); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Bottom left: the next item in the fan overlaps this one's right edge. */
.tb-qty { position: absolute; z-index: 2; left: -6px; bottom: -4px; }
.tb-pot-more { align-self: center; margin-left: 8px; background: var(--surface-3); color: var(--ink); }
.tb-pot-copy { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.tb-pot-label { font-size: 13px; color: var(--ink-2); }
.tb-pot-copy b {
  font-size: 15px; font-weight: 650;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tb-pot-copy > span:last-child { font-size: 14px; color: var(--ink-2); }

/* Lanes: a match, not a list. */
.tb-lanes-grid { display: grid; gap: 14px var(--tb-lane-gap); }
.tb-lanes-grid.p2 {
  grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
  column-gap: calc(var(--tb-lane-gap) / 2);
}
.tb-lanes-grid.p3, .tb-lanes-grid.p4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-lanes-grid.p3 > .tb-lane:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--tb-lane-gap) / 2); }
.tb-lanes-grid.teams { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tb-team { display: grid; gap: 8px; }
.tb-team-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-lane-gap); }
.tb-team-head {
  display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 2px;
  font-size: 14px; transition: opacity 0.5s ease;
}
.tb-team-head b { font-weight: 650; }
.tb-team-score { margin-left: auto; }
.tb-team-head .tb-crown { position: static; display: none; width: 16px; height: 16px; translate: none; }
.tb-team.is-leader > .tb-team-head .tb-crown, .tb-team.is-winner > .tb-team-head .tb-crown { display: block; }
.tb-team.is-loser .tb-team-head { opacity: 0.45; }

.tb-vs {
  display: grid; place-items: center; align-self: center; justify-self: center; z-index: 3;
  width: 36px; height: 36px; margin-top: 44px;
  color: var(--ink-2); font-size: 14px; font-weight: 800; font-variation-settings: "opsz" 96; line-height: 1;
}
.tb[data-view="intro"] .tb-vs { opacity: 0; }
.tb-lanes-grid.teams > .tb-vs { margin: -2px 0; width: 32px; height: 32px; font-size: 13px; }

.tb-lane {
  display: grid; align-content: start; gap: 8px; min-width: 0;
  transition: transform 0.6s var(--ease-spring), opacity 0.5s ease;
}
.tb-lane-head { position: relative; z-index: 4; display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 40px; padding: 0 2px; }
.tb-lane-head .bt-avatar { --size: 34px; }
.tb-lane-avatar { position: relative; display: grid; flex: none; }
.tb-lane-id { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.tb-lane-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 14px; font-weight: 650; }
.tb-lane-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-lane-name small, .tb-st-name small { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tb-lane-sub { font-size: 13px; color: var(--muted); }

.tb-unbot {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -6px -10px -6px 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer;
}
.tb-unbot:hover { color: var(--ink); background: var(--surface-2); }

/* The crown: ink, not gold. It rides on the leader's avatar. */
.tb-crown {
  position: absolute; top: -11px; left: 50%; width: 18px; height: 18px; translate: -50% 0;
  color: var(--ink); opacity: 0; transform: translateY(5px) scale(0.5);
  transition: opacity 0.3s ease, transform 0.45s var(--ease-spring);
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.6));
}
.tb-crown .bt-icon { width: 100%; height: 100%; fill: currentColor; }
.tb-lane.is-leader .tb-crown, .tb-lane.is-winner .tb-crown,
.tb-team.is-leader > .tb-team-head .tb-crown, .tb-team.is-winner > .tb-team-head .tb-crown { opacity: 1; transform: none; }
.tb-team .tb-lane .tb-crown { display: none; }

/* Stage frame: the stage itself belongs to the reveal; the ring is ours. */
.tb-stage-frame { position: relative; }
.tb-stage {
  position: relative; width: 100%; aspect-ratio: 7 / 10;
  border-radius: var(--r); background: rgb(0 0 0 / 0.2); box-shadow: inset 0 0 0 1px rgba(220, 220, 214, 0.13);
}
.tb-ring {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: var(--r);
  box-shadow: 0 0 0 1.5px rgb(var(--hl) / 0.78);
  opacity: 0; transition: opacity 0.35s ease;
}
.tb-lane.is-leader .tb-ring, .tb-lane.is-winner .tb-ring { opacity: 1; }
.tb-lane.is-hit .tb-ring { animation: tb-flash 1.1s ease-out; }
.tb-lane.is-chase .tb-ring { animation: tb-flash 1.4s ease-out; }
.tb-lane.is-chase .tb-lane-avatar { animation: tb-bump 0.6s var(--ease-spring); }
@keyframes tb-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: var(--rest, 0); } }
.tb-lane.is-leader { --rest: 1; }
@keyframes tb-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* The result: winners lift, everyone else steps back. */
.tb-lane.is-winner { transform: translateY(-6px); }
.tb-lane-head, .tb-stage { transition: opacity 0.5s ease; }
.tb-lane.is-loser .tb-lane-head { opacity: 0.55; }
.tb-lane.is-loser .tb-stage { opacity: 0.45; }

/* The lane's total, printed on a strip of till paper under the cards. It prints
   inverted for the player in front or the one who took the pot, the way a hit's
   row does on the pack receipt (css/opening.css .receipt). */
.tb-total {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 2px 0 8px; padding: 7px 12px 8px;
  background: var(--thermal); color: var(--print);
  font-family: var(--receipt-font); font-size: 13px; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 14px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, color 0.3s ease;
}
.tb-total::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px;
  background:
    linear-gradient(135deg, var(--thermal) 50%, transparent 50%) 0 0 / 8px 8px repeat-x,
    linear-gradient(225deg, var(--thermal) 50%, transparent 50%) 0 0 / 8px 8px repeat-x;
  transition: opacity 0.3s ease;
}
.tb-score { font-size: 19px; }
.tb-lane.is-leader .tb-total, .tb-lane.is-winner .tb-total { background: var(--print); color: var(--thermal); }
.tb-lane.is-leader .tb-total::after, .tb-lane.is-winner .tb-total::after {
  background:
    linear-gradient(135deg, var(--print) 50%, transparent 50%) 0 0 / 8px 8px repeat-x,
    linear-gradient(225deg, var(--print) 50%, transparent 50%) 0 0 / 8px 8px repeat-x;
}
.tb-lane.is-loser .tb-total { opacity: 0.55; }

/* A losing stage after the finale: a ghost of its best pull and where the
   cards went (js/battle-table.js leaveGhosts). */
.tb-gone {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center;
  padding: 14% 10px 12px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line);
}
.tb-gone img {
  width: 52%; max-height: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4.5% / 3.2%;
  opacity: 0.32; filter: grayscale(0.7); transform: rotate(-4deg);
}
.tb-gone p {
  margin: 10px 0 0; max-width: 100%; text-align: center; text-wrap: balance;
  font-size: 13px; line-height: 1.3; color: var(--ink-2);
}
.tb-gone.is-anim { animation: tb-gone-in 0.6s var(--ease-out) both; }
@keyframes tb-gone-in { from { opacity: 0; transform: translateY(8px); } }

/* Open seat, the same size as a stage. */
.tb-lane.is-open .tb-lane-name { color: var(--ink-2); }
.tb-seat-open {
  display: grid; align-content: center; justify-items: center; gap: 10px;
  aspect-ratio: 7 / 10; padding: 12px; border-radius: var(--r); text-align: center;
  box-shadow: inset 0 0 0 1px rgba(220, 220, 214, 0.22);
}
.tb-seat-open p { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.tb-seat-btn {
  display: grid !important; grid-template-columns: auto auto; justify-content: center; align-items: center;
  column-gap: 6px; row-gap: 0; width: 100%; padding: 8px 10px; line-height: 1.2;
}
.tb-seat-btn small, .tb-seat-btn .tb-seat-cost { grid-column: 1 / -1; font-size: 12px; font-weight: 550; }
.tb-seat-btn small { color: var(--muted); }
.tb-seat-open .tb-link-btn { font-size: 14px; }

/* 3-2-1 over the table. */
.tb-intro {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none; border-radius: inherit;
}
.tb-intro-n {
  position: absolute; left: 50%; top: var(--intro-y, 50%); translate: -50% -50%;
  font-size: clamp(110px, 34vw, 190px); font-weight: 800; font-variation-settings: "opsz" 96;
  line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums;
  text-shadow: 0 12px 48px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.5);
}
.tb-intro-n.is-anim { animation: tb-count 0.95s var(--ease-out) both; will-change: transform, opacity; }
@keyframes tb-count {
  0% { opacity: 0; transform: scale(1.7); }
  28% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.92; transform: scale(0.9); }
}

/* While the numerals count down, the sealed packs wait a step back so the
   figure reads cleanly; they come forward as the first pack opens. */
.tb-lanes { transition: opacity 0.45s ease; }
.tb.is-counting .tb-lanes { opacity: 0.5; }

/* Rules, actions under the table. */
.tb-rules { margin: 12px 4px 0; font-size: 13px; color: var(--muted); }
.tb-rules:empty { display: none; }
.tb-below { margin-top: 8px; }
.tb-dock { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tb-dock .solid { min-width: 200px; }
.tb-on-rip { font-variant-numeric: tabular-nums; }
.tb-refund { color: var(--muted); font-weight: 500; }
.tb-refund .bt-coins { margin-left: 2px; }
.tb-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }

/* ---- Result ---------------------------------------------------------------- */
.tb-result .tb-eyebrow { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.tb-result .page-title { margin: 0 0 10px; }
.tb-pot-lines { display: grid; gap: 2px; }
.tb-pot-lines p { margin: 0; color: var(--ink-2); }
.tb-pot-lines p.is-me { color: var(--ink); font-weight: 560; }
.tb-result-actions { margin-top: 20px; }

.tb-section { margin-top: 44px; }
.tb-section h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -0.02em; }

.tb-standings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tb-standings li {
  display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.tb-standings .bt-avatar { --size: 38px; }
.tb-rank { color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; }
.tb-standings li.is-win .tb-rank { color: var(--ink); }
.tb-st-name { display: grid; min-width: 0; line-height: 1.25; }
.tb-st-name b { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 650; }
.tb-st-name b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-st-name > span { font-size: 13px; color: var(--ink-2); }
.tb-standings .bt-coins { font-size: 15px; }
.tb-standings li.tb-st-team { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; padding-top: 16px; }

.tb-best { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
.tb-best-card { display: grid; align-content: start; gap: 8px; margin: 0; min-width: 0; }
.tb-best-face { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.tb-best-face .tcg { width: 100%; }
.tb-best-card figcaption { display: grid; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.3; }
.tb-best-card figcaption b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-best-val { display: flex; align-items: baseline; gap: 6px; }
.tb-best-val small { color: var(--muted); font-size: 12px; font-weight: 500; }
.tb-best-card figcaption > span:not(.tb-best-val) { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-best-ph { aspect-ratio: 63 / 88; border-radius: 4.5% / 3.2%; background: var(--surface); }
.tb-best-card.is-wait { animation: none; }

.tb-receipts { border-top: 1px solid var(--line); }
.tb-receipt { border-bottom: 1px solid var(--line); }
.tb-receipt > summary {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 12px; align-items: center; gap: 12px;
  min-height: 54px; list-style: none; cursor: pointer;
}
.tb-receipt > summary::-webkit-details-marker { display: none; }
.tb-receipt > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.tb-receipt[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.tb-rc-art { display: grid; place-items: center; height: 36px; }
.tb-rc-art img { max-width: 26px; max-height: 36px; object-fit: contain; }
.tb-rc-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tb-rc-title b { flex: none; font-weight: 650; }
.tb-rc-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.tb-rc-body { display: grid; gap: 16px; padding: 2px 0 18px; }
.tb-rc-who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tb-rc-who .bt-avatar { --size: 24px; }
.tb-rc-who b { font-weight: 600; }
.tb-rc-who .bt-coins { margin-left: auto; }
.tb-rc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px 6px; margin-top: 8px; }
.tb-thumb {
  display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; cursor: zoom-in;
  color: var(--muted); font-size: 11px; line-height: 1.2; font-variant-numeric: tabular-nums; text-align: center;
}
.tb-thumb img { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3px; background: var(--surface); }

/* ---- Loading ------------------------------------------------------------- */
.tb-skel { display: block; border-radius: var(--r-sm); background: var(--surface-2); animation: tb-pulse 1.2s ease-in-out infinite alternate; }
.tb-skel-title { width: min(360px, 70%); height: 42px; margin-bottom: 12px; }
.tb-skel-line { width: min(420px, 85%); height: 14px; }
.tb-skel-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.tb-skel-name { width: 55%; height: 12px; }
.tb-stage-skel { aspect-ratio: 7 / 10; border-radius: var(--r); }
.tb-lane.is-skel .tb-lane-head { gap: 9px; }
@keyframes tb-pulse { from { opacity: 0.4; } to { opacity: 0.9; } }

/* ---- Phones ------------------------------------------------------------- */
@media (max-width: 720px) {
  .tb-table { margin-inline: calc(-1 * var(--gutter) + 6px); padding: 12px 10px 14px; }
  .tb-pot { gap: 14px; }
  .tb-pot-item { height: 64px; }
  .tb-lane-head { gap: 8px; }
  .tb-lane-head .bt-avatar { --size: 32px; }
  .tb-dock-slot { margin-inline: -8px; }
  .tb-dock {
    padding: 8px; border-radius: var(--r);
    background: color-mix(in oklab, var(--bg) 90%, transparent);
  }
  .tb-dock-slot.is-float .tb-dock { box-shadow: 0 0 0 1px var(--line), 0 16px 32px -12px rgb(0 0 0 / 0.7); }
  .tb-dock > * { flex: 1 1 0; min-width: 0; }
  .tb-dock .solid { min-width: 0; }
  .tb-result-actions .solid, .tb-result-actions .ghost { flex: 1 1 0; }
  .tb-result-actions .tb-text-link { flex-basis: 100%; justify-content: center; }

  /* Three and four seats: a 2x2 table has to fit between the floating round
     header and the tab bar, so every lane's reveal is on screen at once. */
  .tb-lanes-grid.p3, .tb-lanes-grid.p4, .tb-lanes-grid.teams { row-gap: 10px; }
  .tb-lanes-grid.p3 .tb-lane, .tb-lanes-grid.p4 .tb-lane, .tb-lanes-grid.teams .tb-lane { gap: 6px; }
  .tb-lanes-grid.p3 .tb-stage, .tb-lanes-grid.p4 .tb-stage,
  .tb-lanes-grid.p3 .tb-seat-open, .tb-lanes-grid.p4 .tb-seat-open {
    aspect-ratio: auto;
    height: clamp(160px, calc((100vh - var(--tabbar) - 205px) / 2), 250px);
    height: clamp(160px, calc((100svh - var(--tabbar) - 205px) / 2), 250px);
  }
  .tb-lanes-grid.teams { gap: 6px; }
  .tb-lanes-grid.teams > .tb-vs { display: none; }
  .tb-team { gap: 4px; }
  .tb-lanes-grid.teams .tb-stage, .tb-lanes-grid.teams .tb-seat-open {
    aspect-ratio: auto;
    height: clamp(150px, calc((100vh - var(--tabbar) - 270px) / 2), 250px);
    height: clamp(150px, calc((100svh - var(--tabbar) - 270px) / 2), 250px);
  }
}

/* Wider screens: the lobby's actions float as a small bar at the foot of
   the window while their place is below the fold. */
@media (min-width: 721px) {
  .tb-dock-slot.is-float .tb-dock {
    left: 50%; right: auto; bottom: 20px; width: min(520px, calc(100vw - 48px)); translate: -50% 0;
    padding: 8px; border-radius: var(--r);
    background: color-mix(in oklab, var(--bg) 90%, white);
    box-shadow: 0 0 0 1px var(--line-2), 0 16px 32px -12px rgb(0 0 0 / 0.7);
  }
  .tb-dock-slot.is-float .tb-dock > * { flex: 1 1 0; min-width: 0; }
}

/* ---- Wider screens: lanes in a row, bigger stages ---------------------- */
@media (min-width: 900px) {
  .tb { --tb-lane-gap: 16px; }
  .tb-table { padding: 20px 22px 24px; }
  .tb-lanes-grid.p2 {
    grid-template-columns: minmax(0, 290px) 44px minmax(0, 290px);
    column-gap: 18px; justify-content: center;
  }
  .tb-lanes-grid.p3 { grid-template-columns: repeat(3, minmax(0, 270px)); justify-content: center; }
  .tb-lanes-grid.p3 > .tb-lane:nth-child(3) { grid-column: auto; width: auto; justify-self: stretch; }
  .tb-lanes-grid.p4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tb-lanes-grid.teams { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .tb[data-view="intro"] .tb-vs { opacity: 0; }
.tb-lanes-grid.teams > .tb-vs { align-self: center; margin: 36px 0 0; width: 40px; height: 40px; font-size: 14px; }
  .tb-vs { width: 44px; height: 44px; font-size: 15px; }
  .tb-best { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 16px; }
  .tb-lane-name { font-size: 15px; }
  .tb-score { font-size: 20px; }
}

/* ---- Calm: final states only -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tb *:not(.tb-stage, .tb-stage *), .tb *:not(.tb-stage, .tb-stage *)::after { animation: none !important; transition: none !important; }
  .tb-track i.is-now b { transform: scaleX(0.5); }
}
body.no-motion .tb *:not(.tb-stage, .tb-stage *),
body.no-motion .tb *:not(.tb-stage, .tb-stage *)::after { animation: none !important; transition: none !important; }
body.no-motion .tb-track i.is-now b { transform: scaleX(0.5); }