/* Run or Rumble — base theme. Deliberately neutral/dark; restyle freely. */
:root {
  --bg: #0e1116;
  --panel: #171b22;
  --panel-2: #1f2530;
  --ink: #e8edf4;
  --muted: #95a1b3;
  --accent: #ffc107;
  --accent-2: #e0457b;
  --good: #4ade80;
  --line: #2a3140;
  --radius: 14px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html, body { overflow-x: hidden; }        /* never allow sideways scroll on the app */
main { width: 100%; }
.panel, .member, .count-opt, .setup-actions { max-width: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1b2230 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-mode="race"] body {
  background:
    radial-gradient(900px 360px at 50% -16%, rgba(255,242,181,.95), transparent 68%),
    linear-gradient(180deg, #f3f1dc 0%, #cfe2b5 34%, #8abb96 100%);
  color: #302a36;
}
html[data-mode="race"] .topbar {
  background: rgba(255,252,244,.9);
  border-bottom-color: rgba(115,92,52,.22);
}
html[data-mode="race"] .stage-title {
  color: #655b48;
}
html[data-mode="race"] .ghost-btn {
  color: #302a36;
  border-color: rgba(115,92,52,.36);
}
html[data-mode="race"] .ghost-btn:hover {
  border-color: #c17a3a;
  color: #7a4324;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(14,17,22,.82); backdrop-filter: blur(8px); z-index: 20;
}
.brand { font-weight: 800; font-size: 20px; letter-spacing: .3px; }
.brand span { color: var(--accent); font-style: italic; }
.mode-pills { display: flex; gap: 6px; background: var(--panel); padding: 4px; border-radius: 999px; border: 1px solid var(--line); }
.pill {
  border: 0; background: transparent; color: var(--muted); font-weight: 700;
  padding: 7px 18px; border-radius: 999px; cursor: pointer; font-size: 14px;
}
.pill.active { background: var(--accent); color: #1a1300; }
/* The header mode chooser is only for setup — hidden once a match is on stage. */
.mode-pills.hidden { display: none; }
.ghost-btn.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ---------- screens ---------- */
main { max-width: 1040px; margin: 0 auto; padding: 22px 16px 60px; }
.screen { display: none; }
.screen.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
h1 { margin: 0 0 4px; font-size: 26px; }
.sub { color: var(--muted); margin: 0 0 20px; }

/* ---------- saved groups ---------- */
.groups {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 0 0 16px;
}
.groups-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.groups-label { font-weight: 700; color: var(--ink); font-size: 14px; }
.groups-auth input[type="email"] {
  flex: 1 1 180px; min-width: 0; background: #0f131a; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 14px;
}
.groups-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.groups-list:empty { display: none; }
.groups-list li {
  display: flex; align-items: center; gap: 10px; background: #0f131a;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 6px 12px;
}
.groups-list .g-name { font-weight: 700; color: var(--ink); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groups-list .g-count {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #1a1300; background: var(--accent);
}
.groups-list .g-del { background: transparent; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; flex: 0 0 auto; }
.groups-list .g-del:hover { color: var(--accent-2); }

/* ---------- roster ---------- */
.roster { display: flex; flex-direction: column; gap: 10px; }
/* Flex row (consistent at every width): num · name · headshot · colour · balls · ✕ */
.member {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.member .num { color: var(--muted); font-weight: 700; text-align: center; flex: 0 0 18px; }
.member .m-name { flex: 1 1 140px; min-width: 110px; }
.member input[type="text"], .member input[type="number"] {
  background: #0f131a; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 10px; font-size: 14px; width: 100%;
}
/* headshot character picker button — branded yellow chip */
.member .m-char {
  flex: 0 0 46px; height: 44px; padding: 0; cursor: pointer;
  background: var(--accent); border: 2px solid #1a1300; border-radius: 8px;
  display: grid; place-items: center; overflow: hidden;
}
.member .m-char:hover { filter: brightness(1.05); }
.member .m-char img { height: 38px; width: auto; display: block; }
.member input[type="color"] {
  flex: 0 0 44px; height: 36px; padding: 2px; cursor: pointer;
  background: #0f131a; border: 1px solid var(--line); border-radius: 8px;
}
.member input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.member input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
.member .balls { display: none; flex: 0 0 70px; }
.weighted-on .member .balls { display: block; }
.member .remove { background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; flex: 0 0 auto; }
.member .remove:hover { color: var(--accent-2); }

/* headshot picker popover */
.char-picker {
  position: absolute; z-index: 1000; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.char-picker[hidden] { display: none; }
.cp-opt {
  width: 56px; height: 56px; padding: 0; cursor: pointer; background: var(--accent);
  border: 2px solid transparent; border-radius: 10px; display: grid; place-items: center;
}
.cp-opt img { height: 46px; width: auto; display: block; }
.cp-opt:hover { border-color: rgba(0,0,0,.45); }
.cp-opt.sel { border-color: #1a1300; }   /* black border marks the chosen one */

.ghost-btn {
  margin-top: 12px; background: transparent; color: var(--ink); border: 1px dashed var(--line);
  border-radius: 10px; padding: 10px 16px; cursor: pointer; font-weight: 600;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }
.ghost-btn.small { margin: 0; padding: 7px 12px; border-style: solid; font-size: 13px; }

/* ---------- competitor count slider ---------- */
.count-opt {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 16px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px;
}
.count-opt .count-head { font-weight: 700; color: var(--ink); font-size: 14px; }
.count-opt input[type="range"] { flex: 1; accent-color: var(--accent); }
.count-opt input[type="range"]:disabled { opacity: .5; cursor: not-allowed; }
.count-label {
  min-width: 34px; text-align: center; font-weight: 800; font-size: 16px;
  color: #1a1300; background: var(--accent); border-radius: 8px; padding: 4px 8px;
}

/* ---------- options ---------- */
.options { margin: 18px 0; display: flex; flex-direction: column; gap: 12px; }
.opt { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.duration-opt input[type="range"] { flex: 1; max-width: 320px; accent-color: var(--accent); }
.duration-label { color: var(--ink); font-weight: 700; min-width: 56px; }

.setup-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#match-title { flex: 1; min-width: 200px; background: #0f131a; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.primary-btn {
  background: linear-gradient(180deg, var(--accent), #e0a800); color: #1a1300; border: 0;
  border-radius: 10px; padding: 13px 26px; font-weight: 800; font-size: 15px; cursor: pointer;
}
.primary-btn:hover { filter: brightness(1.06); }

/* ---------- stage ---------- */
.stage-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.match-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; color: var(--accent); }
.stage-title { color: var(--muted); font-weight: 600; }
.arena {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  height: 60vh; min-height: 420px; overflow: hidden;
}
/* The rumble ring SVG stretches to fill the stage (keeps fighters aligned to the
   mat), so the arena is locked to the ring's 1000:600 aspect — otherwise a tall,
   narrow phone viewport stretched the ring into an odd shape. */
html[data-mode="rumble"] .arena {
  height: auto; aspect-ratio: 1280 / 800; min-height: 300px; max-height: 72vh;
}
/* rumble ring */
.stage {
  position: absolute; inset: 0;
  container-type: size; container-name: stage;
}
/* The ring is now drawn by buildRumbleRing() (mat + ropes + posts as layered
   SVG around the fighters); the old flat striped mat is retired. */
.stage.ring::before { content: none; }
/* layered wrestling ring: back = mat/apron/far-ropes (behind fighters),
   front = near-ropes/posts (over fighters). Stretched to fill the stage. */
.ring-layer { position: absolute; inset: 0; pointer-events: none; }
.ring-layer svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ring-back { z-index: 0; }            /* mat, back/side ropes + back posts: behind fighters */
.ring-front { z-index: 1000; }        /* near ropes + front posts: OVER fighters */
.fx-word { z-index: 1200; }           /* hit words stay above the ropes */
/* race track lanes */
.stage.track {
  background:
    linear-gradient(180deg, #67b866 0 4%, #3f8b57 4% 6%, #d8ae72 6% 8.5%, #b96d4f 8.5%, #9e513f 100%);
}
.stage.track::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 8.2%, rgba(255,245,220,.46) 8.3% 8.8%, transparent 9%),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,.06) 58px 60px),
    radial-gradient(900px 260px at 50% 108%, rgba(70,35,25,.38), transparent 72%);
  opacity: .9;
}
.stage.track::after {
  content: ""; position: absolute; left: 0; right: 0; top: 1.5%; height: 22px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(67,78,58,.16) 0 32%, rgba(92,78,54,.5) 32% 45%, rgba(255,245,220,.5) 45% 58%, transparent 58%);
  opacity: .82;
}
.track-lines { position: absolute; inset: 0; }
.track-lines .lane {
  position: absolute; left: 0; right: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 36%, rgba(80,35,25,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 12px, transparent 12px 32px);
  border-top: 2px solid rgba(255,240,220,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.track-lines .lane.alt {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 38%, rgba(80,35,25,.14)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 12px, transparent 12px 32px),
    rgba(255,214,126,.06);
}
.track-lines .finish {
  position: absolute; top: 8.5%; bottom: 0; width: 12px; transform: translateX(-50%);
  background:
    repeating-conic-gradient(#fff 0 25%, #1b1b1b 0 50%) 0 0 / 12px 12px;
  opacity: .95;
  box-shadow: 0 0 0 3px rgba(255,255,255,.24), 0 0 22px rgba(255,255,255,.38);
}
.track-lines .finish::before,
.track-lines .finish::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: #f4d35e; border: 3px solid #7a4a28; box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.track-lines .finish::before { top: -18px; }
.track-lines .finish::after { bottom: -12px; }
.track-lines .startline {
  position: absolute; top: 8.5%; bottom: 0; width: 6px; transform: translateX(-50%);
  background: rgba(255,246,220,.9);
  box-shadow: 0 0 0 2px rgba(126,74,42,.25), 0 0 16px rgba(255,255,255,.25);
}
.track-lines .startline::before {
  content: "START"; position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  font-size: 10px; font-weight: 900; color: #5b2f1f; letter-spacing: 0;
  background: #ffe8a3; border: 2px solid rgba(126,74,42,.55); border-radius: 6px;
  padding: 3px 7px; box-shadow: 0 2px 0 rgba(0,0,0,.12);
}

/* live board (race standings / rumble ring status) — a panel BELOW the arena,
   using the wide space. Rows are chips: place · headshot · name, wrapping. */
.live-board { margin-top: 12px; }
.live-board:empty { display: none; }
.race-board {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px;
}
.race-board-h {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.race-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.race-board-list li {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px 5px 6px; transition: opacity .3s ease; animation: rb-in .3s ease;
}
.race-board-list .rb-place {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #1a1300;
  background: var(--rb-color, #ffc107); box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.race-board-list .rb-face { flex: 0 0 auto; width: 30px; height: 30px; object-fit: contain; }
.race-board-list .rb-name { white-space: nowrap; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.race-board-list li.done { opacity: .65; }                       /* place locked (finished / eliminated) */
.race-board-list li.waiting { opacity: .45; }                    /* not yet entered (rumble) */
@keyframes rb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- actor ---------- */
.actor {
  /* height is set inline (cqh, per-character stageScale); width derives from
     the actor box aspect-ratio set per animation. (left, top) is the feet anchor. */
  position: absolute; width: auto; transform-origin: center bottom;
  transition: left .5s ease, top .5s ease;
}
.actor-sprite {
  width: 100%; height: 100%; background-position: center bottom;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45));
  position: relative; isolation: isolate;   /* contain the recolour blend */
}
/* CSS-only outfit recolour: a solid team-colour layer, masked to the outfit
   region, blended over the neutral-grey base so the fabric shading is kept. */
.actor-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--team-color, #888);
  mix-blend-mode: color;
}
.actor-sprite.bob { animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Running hop — a small bob SYNCED to the stride. The run cycle is 6 frames at
   12fps = a 0.5s loop with two foot-strikes, so the bob period is 0.25s (one per
   stride). Subtle and rotation-free, so it reinforces the run instead of fighting
   it (a big out-of-sync hop is what made running read as "funny"). */
.actor.racing .actor-sprite { animation: runhop .25s ease-in-out infinite !important; }
@keyframes runhop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
/* Health bar above the head — only shown in the Rumble (.show-health). */
.actor-health { display: none; }
.actor.show-health .actor-health {
  display: block; position: absolute; left: 50%; bottom: 102%;
  transform: translateX(-50%) scaleX(var(--flip,1)); transform-origin: center bottom;
  width: 72%; min-width: 30px; max-width: 110px; height: 6px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(0,0,0,.55);
  border-radius: 4px; overflow: hidden; pointer-events: none;
}
.actor-health > i {
  display: block; height: 100%; width: 100%; background: var(--good);
  border-radius: 3px; transition: width .25s linear, background-color .25s linear;
}
.actor-health.flash { animation: hp-flash .25s ease; }
@keyframes hp-flash { 50% { filter: brightness(1.9); } }
.actor-tag {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%) scaleX(var(--flip,1));
  background: var(--tag-color, #555); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,.4);
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis;   /* long names don't overflow the stage */
}
/* Eliminated fighters are visibly TOSSED out of the ring — they slide off the
   edge and the arena clips them. They must NOT just fade away in place. */
.actor.eliminated { transition: left .9s cubic-bezier(.3,-0.1,.7,.3), top .9s cubic-bezier(.2,-0.5,.6,.3); }
.actor.attacking .actor-sprite { animation: lunge .3s ease; }
@keyframes lunge { 50% { transform: translateX(8px) scale(1.04); } }
.actor.hurt .actor-sprite { animation: shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.fx-word {
  position: absolute; font-weight: 900; font-size: 22px; color: var(--accent);
  text-shadow: 2px 2px 0 #000; pointer-events: none; animation: pop .7s ease forwards;
}
@keyframes pop { 0%{transform:scale(.4);opacity:0} 30%{transform:scale(1.1);opacity:1} 100%{transform:translateY(-30px) scale(1);opacity:0} }

/* ---------- ticker ---------- */
.ticker { margin-top: 12px; height: 24px; color: var(--muted); font-size: 14px; font-weight: 600; }

/* ---------- standings / results ---------- */
/* ---------- post-match results (revealed in place below the stage) ---------- */
.post-match {
  margin-top: 16px; padding: 22px 24px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.post-match.show { animation: pm-rise .45s cubic-bezier(.2,.9,.3,1) both; }
@keyframes pm-rise {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

.winner-banner { font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 16px; }
.winner-banner .name { color: var(--accent); }
.standings { list-style: none; counter-reset: rank; padding: 0; margin: 0 0 20px; }
.standings li {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px;
}
.standings li .rank { font-weight: 800; color: var(--muted); width: 30px; }
.standings li.first { border-color: var(--accent); }
.standings li.first .rank { color: var(--accent); }
.standings li .swatch { width: 14px; height: 14px; border-radius: 4px; }
.standings li .who { font-weight: 700; }
.standings li .char { color: var(--muted); font-size: 13px; margin-left: auto; }
.standings li .char-face { margin-left: auto; width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }

/* primary action bar: replay / new match */
.pm-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pm-bar .primary-btn, .pm-bar .ghost-btn { margin: 0; }

/* "run again, same crew" quick-start row */
.pm-again {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 12px;
}
.pm-again-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.pm-again .ghost-btn { margin: 0; }

/* share block */
.pm-share { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.pm-share-label {
  display: block; margin-bottom: 10px;
  color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.share-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; font-weight: 700; font-size: 14px;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn svg { width: 18px; height: 18px; fill: currentColor; }
.share-btn.net-x:hover      { background: #000;     border-color: #000;     color: #fff; }
.share-btn.net-fb:hover     { background: #1877f2;  border-color: #1877f2;  color: #fff; }
.share-btn.net-wa:hover     { background: #25d366;  border-color: #25d366;  color: #07310f; }
.share-btn.net-native:hover { background: var(--accent); border-color: var(--accent); color: #1a1300; }
.share-btn.net-copy:hover   { border-color: var(--accent); color: var(--accent); }

.share-hint { text-align: center; color: var(--good); margin-top: 12px; font-weight: 600; }

/* ---------- coin flip ---------- */
/* coin-toss stage: a warm spotlight on the coin's arc over a rich purple "show"
   gradient, with a soft floor the contestants stand on. */
.stage.flip {
  background:
    radial-gradient(42% 56% at 50% 26%, rgba(255,224,130,.26) 0%, rgba(255,224,130,.06) 34%, transparent 64%),
    radial-gradient(80% 46% at 50% 104%, rgba(120,92,210,.34) 0%, transparent 70%),
    radial-gradient(150% 130% at 50% -16%, #4b3d75 0%, #2c2446 40%, #171024 100%);
}
.stage.flip::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 7%; height: 16%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.10), transparent 72%);
  pointer-events: none; z-index: 0;
}
/* contestant names are the headline in a flip — make them big and bold. */
.stage.flip .actor-tag {
  font-family: var(--font-display, inherit); font-size: 22px; font-weight: 800;
  padding: 6px 18px; border-radius: 12px; bottom: -34px;
  box-shadow: 0 4px 0 rgba(0,0,0,.28); letter-spacing: .01em;
}
.flip-wrap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 6vw, 80px); padding: 20px;
}
.flip-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: clamp(110px, 18vw, 170px); padding: 14px 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px;
  opacity: .9; transition: transform .3s, box-shadow .3s, border-color .3s;
}
.flip-card .flip-port {
  width: clamp(70px, 11vw, 110px); aspect-ratio: 1; border-radius: 50%;
  background-size: cover; background-position: center top;
  border: 3px solid var(--card-color, #888); background-color: #0f131a;
}
.flip-card .flip-name { font-weight: 800; }
.flip-card .flip-side { color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.flip-card.win {
  transform: translateY(-6px) scale(1.05);
  border-color: var(--accent); box-shadow: 0 0 28px rgba(255,193,7,.35); opacity: 1;
}

/* Big centred winner announcement once the coin lands. Sits above the contestants
   but below nothing — pops in with a spring so it lands like a stamp. */
.win-banner {
  position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%);
  z-index: 20; text-align: center; pointer-events: none; width: 90%;
  animation: fw-pop .5s cubic-bezier(.2,1.3,.3,1) both;
}
/* radial flash behind the name */
.win-banner .fw-flash {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 120%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,193,7,.45) 0%, rgba(255,193,7,.12) 35%, transparent 65%);
  animation: fw-flash 0.7s ease-out both;
}
.win-banner .fw-eyebrow {
  font-weight: 800; font-size: clamp(12px, 1.6vw, 16px); letter-spacing: .14em;
  text-transform: uppercase; color: #fff; margin-bottom: 4px;
  /* readable on the light race track AND the dark ring */
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.5);
}
.win-banner .fw-name {
  font-weight: 900; font-size: clamp(44px, 8vw, 92px); line-height: .98;
  color: #fff; letter-spacing: -.01em;
  text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 38px rgba(255,193,7,.45);
}
.win-banner .fw-sub {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 6px;
  font-weight: 900; font-size: clamp(26px, 4.5vw, 52px); letter-spacing: .06em;
  color: var(--accent); text-shadow: 0 2px 0 rgba(0,0,0,.35);
  -webkit-text-stroke: 1px rgba(0,0,0,.25);
}
.win-banner .fw-char {
  -webkit-text-stroke: 0; text-shadow: none;
  font-size: clamp(13px, 1.7vw, 18px); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #1a1300;
  background: var(--accent); padding: 5px 12px; border-radius: 999px;
}
@keyframes fw-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fw-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

/* confetti burst raining from the winner call-out */
.fw-confetti { position: absolute; inset: 0; z-index: 19; pointer-events: none; overflow: hidden; }
.fw-confetti i {
  position: absolute; top: 24%; border-radius: 2px; opacity: 0;
  animation: fw-fall 1.5s cubic-bezier(.2,.6,.4,1) both;
}
@keyframes fw-fall {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,60vh)) rotate(var(--rot,360deg)); }
}

.coin-box { perspective: 800px; }
.coin {
  position: relative; width: clamp(54px, 9vw, 84px); aspect-ratio: 1;
  transform-style: preserve-3d; transform: rotateX(0deg);
}
.coin-face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* brushed SILVER coin: bright sheen up top, steely grey toward the rim */
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #eef1f5 30%, #c5cdd6 66%, #97a3b0 100%);
  border: 4px solid #6f7b88;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.45),     /* inner highlight ring */
    inset 0 0 0 7px rgba(120,132,146,.55),     /* engraved rim line — reads as a coin */
    inset 0 8px 14px rgba(255,255,255,.45),    /* top sheen */
    inset 0 -12px 20px rgba(90,100,112,.5),    /* bottom shade */
    0 8px 22px rgba(0,0,0,.45);
}
.coin-face.tails { transform: rotateX(180deg); }
/* the animal medallion sits dead-centre in the coin */
.coin-face .coin-port {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68%; aspect-ratio: 1;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}

/* coin floats between the two full-body contestants */
.stage.flip .coin-box.flip-center {
  position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); z-index: 5;
}

/* TOSS ARC: launched from hand height, up to an apex, then falls and lands on the
   floor between the fighters with a small settling bounce. Per-keyframe easing
   shapes the parabola (decelerate up, accelerate down). Driven inline with a
   duration that matches the engine's flip time. */
@keyframes coin-toss {
  0%   { top: 60%; animation-timing-function: cubic-bezier(.12,.62,.30,1); }   /* launch, slow toward apex */
  34%  { top: 7%;  animation-timing-function: cubic-bezier(.55,0,.78,.46); }   /* apex, accelerate down */
  74%  { top: 74%; animation-timing-function: cubic-bezier(.3,0,.2,1); }       /* first impact — coin BOTTOM meets the feet line */
  82%  { top: 67%; animation-timing-function: cubic-bezier(.5,0,.8,.5); }      /* bounce up */
  90%  { top: 74%; animation-timing-function: cubic-bezier(.3,0,.2,1); }       /* land again */
  95%  { top: 71%; }
  100% { top: 74%; }                                                           /* at rest, sitting at foot level */
}
/* SPIN: the coin tumbles end-over-end and decelerates onto its landing face.
   The final angle (--coin-final) decides Heads (multiple of 360) vs Tails
   (…+180); `both` holds that face once it settles. */
@keyframes coin-spin {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(var(--coin-final, 1800deg)); }
}
/* ground contact shadow — tightens and darkens as the coin nears the floor */
.coin-shadow {
  position: absolute; left: 50%; top: 84%; z-index: 4;
  width: clamp(54px, 9vw, 84px); height: 18px; transform: translate(-50%, -50%) scale(.4);
  border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
  pointer-events: none;
}
@keyframes coin-shadow {
  0%   { transform: translate(-50%,-50%) scale(.45); opacity: .18; }
  34%  { transform: translate(-50%,-50%) scale(.30); opacity: .10; }
  74%  { transform: translate(-50%,-50%) scale(1);   opacity: .45; }
  82%  { transform: translate(-50%,-50%) scale(.85); opacity: .35; }
  100% { transform: translate(-50%,-50%) scale(1);   opacity: .45; }
}
.coin-face.landed {
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.5), inset 0 0 0 7px rgba(120,132,146,.55),
    inset 0 -12px 20px rgba(90,100,112,.5), 0 0 30px rgba(220,230,240,.8);
}

/* ===================================================================== */
/* Responsive — phones & small tablets                                   */
/* ===================================================================== */
@media (max-width: 600px) {
  .panel { padding: 16px; }
  h1 { font-size: 22px; }

  /* roster row already flexes; tighten gaps and let the name shrink fully so the
     row can never overflow on the narrowest phones */
  .member { gap: 7px; padding: 8px; }
  .member .m-name { flex-basis: 70px; min-width: 0; }
  .panel { padding: 14px; }

  .setup-actions { flex-direction: column; align-items: stretch; }
  #match-title { min-width: 0; }
  .primary-btn { width: 100%; }

  .count-opt { flex-wrap: wrap; }

  /* stage chrome */
  .stage-head { flex-wrap: wrap; gap: 8px; }
  .match-clock { font-size: 18px; }
  #skip-btn { margin-left: auto; }

  /* live board below the arena: slightly tighter chips on phones */
  .race-board { padding: 10px 12px; }
  .race-board-list li { font-size: 13px; padding: 4px 10px 4px 5px; }
  .race-board-list .rb-face { width: 26px; height: 26px; }

  /* topbar: let it wrap and shrink so brand + mode pills never overflow */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .brand { font-size: 16px; }
  .brand__wm { font-size: 18px; }
  .pill { padding: 6px 12px; font-size: 13px; }
  .mode-pills { gap: 4px; }

  /* share buttons: icon-only on phones (labels were squishing/wrapping) */
  .share-btn span { display: none; }

  /* arena can be a touch shorter on small portrait phones */
  .arena { min-height: 300px; }
  html[data-mode="rumble"] .arena { min-height: 0; }
}

/* very small phones */
@media (max-width: 400px) {
  main { padding: 16px 10px 48px; }
  .member .m-name { flex-basis: 100%; }       /* name on its own row when very tight */
}

/* wide desktop: cap the arena + give the column more breathing room */
@media (min-width: 1200px) {
  .arena { max-height: 600px; }
  html[data-mode="rumble"] .arena { max-height: 600px; }
}