/* frontend/sumo.css — RING OUT (id `sumo`) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The palette is the mock's (docs/design/batch8/Dice Sumo.dc.html l.19, charcoal) — CLASSIC by default, ARCADE
 * when GameTheme puts `gm-arcade` on the screen (recolour only: same box, same sizes). ⛔ THE SCREEN CARRIES THE
 * PALETTE, NOT ONLY THE BOARD: the setup card sits outside `.su-root`.
 * ⭐ DS-M5 — the PLAYER colours are a FIXED set (Okabe–Ito: sky, vermilion, yellow, reddish purple — four
 * different greys too), never the theme's accent, and never the only mark: every piece carries its owner's SHAPE
 * (● ▲ ■ ◆), and the chips, marks and arrows carry the same shape.
 *
 * ── ⭐ THE LOOK PASS (owner, 2026-09-24) ─────────────────────────────────────
 * • ROUND PUCKS AT THE HITBOX: a piece is a circle of EXACTLY the physics radius (SU_DR) — the .su-die box is
 *   2·DR across and the puck svg paints to its edge and no further (body r 46.5 + half its 7 stroke = 50 of 100).
 *   The old square die (corners 41% past the hitbox) on a 1.55× plate made two pieces that rested touching LOOK
 *   overlapped, and a near-miss look like a hit. sumo-board.test.html §1b measures it. No DieRenderer, no skins.
 * • THE ARENA: Classic = a floodlit STADIUM MAT (painted rings, a hatched danger band at the rim, a white edge
 *   line); Arcade = a black RINK with a glowing rim. Both are DARK so all four player colours and every arrow read
 *   in greyscale (the owner is colourblind) — a light clay dohyō was mocked and lost the orange/pink arrows.
 *   The surface layers never take a z-index: arrows are 3, pucks 4, sparks 6.
 * • CHIPS are colour-coded too: a seat-colour stripe + tint on each player's card (box-shadow and background only —
 *   no size changes, locked layout).
 *
 * ── Geometry is the mock's ──────────────────────────────────────────────────
 * Phone first (the mock's 384 × 812 column: header 28 · chips 50 · ring · feed 40 · controls 64, l.157–257),
 * then the desktop design box at 1280 × 553 — the mock's 637 less its 84px chat strip (rails 288, feed 132,
 * readout 78, timer 88 + READY 64, l.43, 112–141). The ring is 84% of its square box (radius 42%, `P(v)`).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements. Every row is a FIXED size except the RING. Every text box is a fixed width or
 * fills its slot. Feedback changes colour, glow or a 1–2px transform — never size or spacing.
 */

#sumo-game-screen, .su-root {
  --su-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --su-mid: #141519;
  --su-txt: #e9e8e4; --su-dim: #83858b; --su-panel: rgba(255, 255, 255, .022); --su-line: rgba(255, 255, 255, .075);
  --su-seat: rgba(255, 255, 255, .025); --su-track: rgba(233, 232, 228, .14);
  --su-btn: linear-gradient(180deg, #2d3036, #22242a); --su-btnTxt: #f1f0ec;
  --su-bubbleBg: #2b2d33; --su-bubbleTxt: #f1f0ec;
  --su-void: rgba(0, 0, 0, .8);
  /* the STADIUM MAT: two painted rings (0.25 r and 0.6 r), a floodlight, the mat */
  --su-mat: radial-gradient(circle, transparent 0 24.4%, rgba(242, 244, 247, .5) 24.6% 25.4%, transparent 25.6%),
    radial-gradient(circle, transparent 0 59.4%, rgba(242, 244, 247, .28) 59.6% 60.4%, transparent 60.6%),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .12), transparent 62%),
    radial-gradient(circle, #34404f 0%, #2a3440 65%, #222a34 100%);
  --su-rim: #f2f4f7; --su-rimW: clamp(2px, .55cqw, 4px); --su-rimGlow: 0 0 0 transparent;
  --su-ringSide: linear-gradient(180deg, #1a2029, #07090c);
  /* the DANGER band from 0.84 r to the edge; stripes sized off the puck, so they scale with the ring */
  --su-band: repeating-linear-gradient(45deg, rgba(242, 244, 247, .22) 0 calc(var(--su-die) * .26), rgba(0, 0, 0, .18) calc(var(--su-die) * .26) calc(var(--su-die) * .52));
  --su-pkEdge: #0b0c10; --su-pkInk: #121318;
  --su-spark: #fff4c2; --su-scrim: rgba(0, 0, 0, .45);
  --su-p0: #56b4e9; --su-p1: #e0691a; --su-p2: #f0e442; --su-p3: #cc79a7;
  --su-ui: 'Outfit', system-ui, sans-serif;
  --su-rad: 14px;
}
#sumo-game-screen.gm-arcade, .gm-arcade .su-root {
  --su-bg: radial-gradient(135% 120% at 50% -10%, #1a1530 0%, #12101f 60%, #0a0814 100%);
  --su-mid: #12101f;
  --su-txt: #f4f2fb; --su-dim: rgba(244, 242, 251, .55); --su-panel: rgba(255, 255, 255, .07); --su-line: rgba(131, 56, 236, .45);
  --su-seat: rgba(0, 0, 0, .22); --su-track: rgba(244, 242, 251, .16);
  --su-btn: linear-gradient(180deg, #8338EC, #6f2bd0); --su-btnTxt: #fff;
  --su-bubbleBg: #3A86FF; --su-bubbleTxt: #fff;
  /* the RINK: black polished table, a faint grid, one painted ring, a glowing rim you fall off of */
  --su-mat: radial-gradient(circle, transparent 0 24.4%, rgba(160, 210, 255, .35) 24.6% 25.4%, transparent 25.6%),
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .10), transparent 45%),
    repeating-linear-gradient(0deg, rgba(150, 140, 255, .09) 0 1px, transparent 1px calc(var(--su-die) * 1.05)),
    repeating-linear-gradient(90deg, rgba(150, 140, 255, .09) 0 1px, transparent 1px calc(var(--su-die) * 1.05)),
    radial-gradient(circle, #151b2c 0%, #0e1220 70%, #0a0d18 100%);
  --su-rim: #dff1ff; --su-rimW: clamp(2px, .5cqw, 4px);
  --su-rimGlow: inset 0 0 22px rgba(110, 190, 255, .55), 0 0 22px rgba(110, 190, 255, .45);
  --su-ringSide: linear-gradient(180deg, #1c2440, #04050a);
  --su-band: none;
  --su-ui: 'Poppins', system-ui, sans-serif;
  --su-rad: 18px;
}

@keyframes su-spark { 0% { opacity: 0 } 12% { opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0 } }
@keyframes su-pop { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-25deg) } 28% { transform: translate(-50%, -50%) scale(1.35) rotate(8deg) } 100% { transform: translate(-50%, -50%) scale(.95) rotate(40deg) } }
@keyframes su-ringout { 0% { transform: translate(-50%, -50%) scale(.2); opacity: .95 } 100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0 } }
@keyframes su-bump { 0%, 100% { filter: none } 40% { filter: drop-shadow(0 0 10px var(--su-pc)) brightness(1.2) } }
@keyframes su-pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* ── setup card (on the screen's palette) ───────────────────────────────── */
#sumo-game-screen { background: var(--su-bg); color: var(--su-txt); }
.su-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--su-ui); background: var(--su-panel); color: var(--su-txt); border: 1px solid var(--su-line); }
.su-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--su-dim); font-weight: 700; }
.su-setup-title { margin: 0; font-size: 30px; }
.su-setup-blurb, .su-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.su-setup-hint { color: var(--su-dim); font-size: 12.5px; }
.su-setup-row { display: flex; align-items: center; gap: 12px; }
.su-setup-lab { width: 64px; font-weight: 700; font-size: 13px; color: var(--su-dim); }
.su-opts { display: flex; gap: 6px; }
.su-opt { min-width: 52px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--su-line); background: var(--su-panel); color: var(--su-txt); font: 700 14px var(--su-ui); cursor: pointer; }
.su-opt[data-on="1"] { background: var(--su-btn); color: var(--su-btnTxt); box-shadow: 0 0 0 2px var(--su-txt); }
.su-start { margin-top: 6px; height: 48px; border-radius: 12px; border: 1px solid var(--su-line); background: var(--su-btn); color: var(--su-btnTxt); font: 800 17px var(--su-ui); letter-spacing: .04em; cursor: pointer; }
.su-start:active, .su-opt:active { transform: translateY(1px); }
@media (hover: hover) { .su-start:hover { filter: brightness(1.12); } .su-opt:hover { box-shadow: 0 0 0 2px var(--su-txt); } }

/* ── the board root (phone first) ───────────────────────────────────────── */
.su-root {
  --su-pad: 12px; --su-gap: 8px; --su-chipH: 50px; --su-rowH: 16px; --su-avS: 28px; --su-fsName: 13px; --su-fsSmall: 10px; --su-statW: 66px;
  --su-feedH: 40px; --su-ctrlH: 64px; --su-timerS: 60px; --su-fsTimer: 20px; --su-readyW: 124px; --su-readyH: 56px; --su-fsReady: 17px;
  --su-die: 27px;
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--su-phone-h, 700px); padding: var(--su-pad);
  display: flex; flex-direction: column; gap: var(--su-gap);
  background: var(--su-bg); color: var(--su-txt); font-family: var(--su-ui);
  user-select: none; -webkit-user-select: none;
}
.su-root *, .su-root *::before, .su-root *::after { box-sizing: border-box; }
.su-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.su-root i, .su-root em { font-style: normal; }
[data-o="0"] { --su-pc: var(--su-p0); } [data-o="1"] { --su-pc: var(--su-p1); }
[data-o="2"] { --su-pc: var(--su-p2); } [data-o="3"] { --su-pc: var(--su-p3); }
/* the VIEWER's colour (online you are not always seat 0): the power bars and the meter are yours */
.su-root { --su-me: var(--su-p0); } .su-root[data-me="1"] { --su-me: var(--su-p1); }
.su-root[data-me="2"] { --su-me: var(--su-p2); } .su-root[data-me="3"] { --su-me: var(--su-p3); }
.su-shape { color: var(--su-pc); font-family: system-ui, sans-serif; line-height: 1; }

/* ── left: header + chips ───────────────────────────────────────────────── */
.su-left { flex: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.su-head { flex: none; height: 28px; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.su-htitle { flex: none; width: 170px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; }
.su-hsub { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--su-dim); overflow: hidden; text-overflow: ellipsis; text-align: right; }
.su-menu { flex: none; width: 30px; height: 24px; border: 1px solid var(--su-line); border-radius: 999px; cursor: pointer; font-size: 13px; background: var(--su-panel); color: var(--su-txt); }
.su-menu:active { transform: translateY(1px); }
.su-chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
/* ⭐ COLOUR-CODED: a BORDER of the seat colour all the way round + an even tint of it — paint only, never a size (the
   border colour + an inset shadow, the tint a background). Owner's soccer playtest 2026-10-04: "skip the left sided card
   highlights … maybe instead use a border" — the look pass's 5px left stripe (+ a left-heavy tint) is gone on BOTH maps
   (one chip). Yours is the thicker ring with a soft glow. */
.su-chip { height: var(--su-chipH); display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px; border-radius: var(--su-rad); border: 1px solid var(--su-pc); min-width: 0;
  background: linear-gradient(color-mix(in srgb, var(--su-pc) 13%, transparent), color-mix(in srgb, var(--su-pc) 13%, transparent)), var(--su-seat);
  box-shadow: inset 0 0 0 1px var(--su-pc); }
.su-chip[data-you="1"] { box-shadow: inset 0 0 0 2px var(--su-pc), 0 0 12px -3px var(--su-pc); }
.su-chip[data-out="1"] { opacity: .5; }
/* the chip's avatar IS that seat's puck (the same svg as on the ring) */
.su-av { position: relative; flex: none; width: var(--su-avS); height: var(--su-avS); border-radius: 50%; display: block; }
.su-cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.su-crow { height: var(--su-rowH); display: flex; justify-content: space-between; align-items: center; gap: 4px; min-width: 0; line-height: var(--su-rowH); }
/* ⛔ FIXED row heights: "✓ Ready" and the shape marks come from a fallback font whose line box is 1px taller than
   "… Planning" — the chip rows grew and moved on every status change (the §6 walk, all three sizes). */
.su-cname { font-size: var(--su-fsName); white-space: nowrap; }
.su-cbouts { flex: none; font-size: var(--su-fsSmall); color: var(--su-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.su-marks { height: var(--su-rowH); display: flex; align-items: center; gap: 2px; font-size: 12px; line-height: var(--su-rowH); font-family: system-ui, sans-serif; overflow: hidden; }
.su-marks i { width: 1.1em; text-align: center; color: var(--su-pc); }
.su-marks i[data-on="0"] { color: var(--su-dim); opacity: .6; }
.su-cstat { flex: none; height: var(--su-rowH); width: var(--su-statW); text-align: right; font-size: var(--su-fsSmall); font-weight: 600; color: var(--su-dim); white-space: nowrap; overflow: hidden; }
.su-chip[data-ready="1"] .su-cstat { color: var(--su-txt); }

/* ── the ring (the ONE flexible row on a phone) ─────────────────────────── */
.su-mid { flex: 1 1 0; min-height: 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; container-type: size; }
.su-ring { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; touch-action: none; }
.su-root[data-lock="0"] .su-ring { cursor: crosshair; }
.su-void, .su-side, .su-top, .su-centre { position: absolute; pointer-events: none; border-radius: 50%; }
/* the DROP: a shadow pooled under the ring (void) + the ring's own side wall showing below its lip (side) */
.su-void { inset: 2%; background: radial-gradient(closest-side, transparent 88%, var(--su-void) 94%, transparent 100%); }
.su-side { inset: 8%; transform: translateY(2.2%); background: var(--su-ringSide); }
/* ⛔ .su-top's radius IS the rules' radius 1 (inset 8% of the square box → radius 42%, the mock's P(v)) */
.su-top { inset: 8%; background: var(--su-mat); box-shadow: inset 0 0 0 var(--su-rimW) var(--su-rim), var(--su-rimGlow); }
.su-top::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--su-band);
  -webkit-mask: radial-gradient(closest-side, transparent 83.5%, #000 84%); mask: radial-gradient(closest-side, transparent 83.5%, #000 84%); }
.su-centre { left: 50%; top: 50%; width: 2.2%; height: 2.2%; transform: translate(-50%, -50%); background: var(--su-rim); }
.su-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.su-arrow { color: var(--su-pc); }
.su-shaft { stroke: var(--su-pc); stroke-width: .026; stroke-linecap: round; }
.su-head { fill: var(--su-pc); }
.su-tick { stroke: var(--su-pc); stroke-width: .014; stroke-linecap: round; }
/* a thin dark outline on every arrow: the yellow one would otherwise vanish on the pale danger band */
.su-arrow { filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, .95)); }
.su-arrow[data-kind="you"] { filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, .95)) drop-shadow(0 0 4px var(--su-pc)); }
.su-arrow[data-kind="rival"] .su-shaft { stroke-dasharray: .05 .032; }
.su-grab { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .4); stroke-width: .006; stroke-dasharray: .02 .014; }

/* ── ⚽ THE SOCCER MAP (slice 3) — owner's BUILD STOP 2026-10-03: the dark RINK surface in BOTH themes, goal mouths in
   the seat's colour + symbol, glowing corner bumpers. The pitch is in the ring's units (sumo.js suPitchSvg): .su-pbg is
   the surface, clipped to the map's polygon; .su-pitch draws walls / bumpers / posts / each seat's crease, net and mouth.
   No z-index on either (arrows 3, pucks 4, sparks 6 sit above). ─────────────────────────────────────────────────── */
.su-ring[data-map="soccer"] {
  --su-pitch: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .08), transparent 45%),
    repeating-linear-gradient(0deg, rgba(150, 140, 255, .08) 0 1px, transparent 1px calc(var(--su-die) * 1.05)),
    repeating-linear-gradient(90deg, rgba(150, 140, 255, .08) 0 1px, transparent 1px calc(var(--su-die) * 1.05)),
    radial-gradient(circle, #151b2c 0%, #0e1220 70%, #0a0d18 100%);
  --su-pline: rgba(160, 210, 255, .32);
  --su-wallC: #dff1ff; --su-wallGlow: drop-shadow(0 0 3px rgba(110, 190, 255, .8));
  --su-bumpC: #8ff0ff;
  --su-ball: #eef0f3;
}
.su-pbg { position: absolute; inset: 0; pointer-events: none; background: var(--su-pitch); }
.su-pitch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.su-pmark { fill: none; stroke: var(--su-pline); stroke-width: .012; }
.su-pspot { fill: var(--su-pline); }
.su-wall { stroke: var(--su-wallC); stroke-width: .03; stroke-linecap: round; filter: var(--su-wallGlow); }
.su-bump { stroke: var(--su-bumpC); stroke-width: .05; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--su-bumpC)); }
.su-post { fill: var(--su-wallC); stroke: #0b0c10; stroke-width: .008; }
.su-crease { fill: color-mix(in srgb, var(--su-pc) 9%, transparent); stroke: color-mix(in srgb, var(--su-pc) 60%, transparent); stroke-width: .01; }
.su-net { fill: color-mix(in srgb, var(--su-pc) 20%, #05060a); stroke: var(--su-pc); stroke-width: .012; }
.su-netl { stroke: color-mix(in srgb, var(--su-pc) 45%, transparent); stroke-width: .006; }
.su-nsym .su-pk-sym { fill: var(--su-pc); }
.su-csym .su-pk-sym { fill: var(--su-pc); opacity: .42; }
.su-gline { stroke: var(--su-pc); stroke-width: .034; stroke-linecap: butt; filter: drop-shadow(0 0 3px var(--su-pc)); }
/* the BALL: neutral (no seat colour, no symbol) — the palest piece on the pitch, a dark pentagon + seams */
[data-o="b"] { --su-pc: var(--su-ball, #eef0f3); }
.su-bl-body { fill: var(--su-ball, #eef0f3); stroke: var(--su-pkEdge, #0b0c10); stroke-width: 7; }
.su-bl-patch { fill: #15161b; }
.su-bl-seam { stroke: #15161b; stroke-width: 4; stroke-linecap: round; }
/* ⚽ the LAST TOUCHER (sumo.js suSetLt → data-lt; owner's playtest 2026-10-04): a ring of that seat's colour inside
   the dark edge, a glow of it on the rink, and that seat's SYMBOL where the pentagon was (the greyscale backup) */
.su-die[data-lt="0"] { --su-lt: var(--su-p0); } .su-die[data-lt="1"] { --su-lt: var(--su-p1); }
.su-die[data-lt="2"] { --su-lt: var(--su-p2); } .su-die[data-lt="3"] { --su-lt: var(--su-p3); }
.su-bl-ring { fill: none; stroke: transparent; }
.su-die[data-lt="0"] .su-bl-ring, .su-die[data-lt="1"] .su-bl-ring, .su-die[data-lt="2"] .su-bl-ring, .su-die[data-lt="3"] .su-bl-ring { stroke: var(--su-lt); }
.su-die[data-lt="0"] .su-ballsvg, .su-die[data-lt="1"] .su-ballsvg, .su-die[data-lt="2"] .su-ballsvg, .su-die[data-lt="3"] .su-ballsvg { filter: drop-shadow(0 0 5px var(--su-lt)); }
.su-bl-sym { display: none; }
.su-bl-sym .su-pk-sym { fill: #15161b; }
.su-die[data-lt="0"] .su-bl-sym[data-s="0"], .su-die[data-lt="1"] .su-bl-sym[data-s="1"],
.su-die[data-lt="2"] .su-bl-sym[data-s="2"], .su-die[data-lt="3"] .su-bl-sym[data-s="3"] { display: inline; }
.su-die[data-lt="0"] .su-bl-patch, .su-die[data-lt="1"] .su-bl-patch, .su-die[data-lt="2"] .su-bl-patch, .su-die[data-lt="3"] .su-bl-patch { display: none; }
/* a BENCHED puck: in its own net at 3/4 size (sumo.js SU_BENCH_SC), dimmed, a pip per turn it still sits out */
.su-die[data-bench="1"] .su-face { opacity: .55; filter: saturate(.55); }
.su-pips { display: none; position: absolute; left: 0; right: 0; bottom: 6%; justify-content: center; gap: 10%; pointer-events: none; }
.su-die[data-bench="1"] .su-pips { display: flex; }
.su-pips b { width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #0b0c10; }
/* the kickoff / a bench return glides (the net's 3/4 size grows back too); the 2nd ball drops in; a bumper flashes */
.su-root[data-travel="1"] .su-ring[data-map="soccer"] .su-die { transition: left .6s cubic-bezier(.3, .1, .25, 1), top .6s cubic-bezier(.3, .1, .25, 1), transform .6s cubic-bezier(.3, .1, .25, 1), opacity .35s; }
@keyframes su-drop { 0% { transform: scale(1.9); opacity: 0 } 60% { transform: scale(.92); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
.su-die[data-drop="1"] .su-face { animation: su-drop .5s cubic-bezier(.3, 1.3, .5, 1); }
.su-kick .su-sring { width: calc(var(--su-die) * 1.4); height: calc(var(--su-die) * 1.4); border-color: var(--su-bumpC, #8ff0ff); box-shadow: 0 0 12px var(--su-bumpC, #8ff0ff); }

/* ── 🕳️ THE POCKETS MAP (2026-10-06; owner picked B · POND from the mock-directions gallery): a deep-navy pond surface
   in BOTH themes (darker than all four Okabe–Ito colours — never green felt), a pale steel RAIL band outside the play
   line, and black HOLES with a pale lip. sumo.js suPocketsSvg paints them at the physics geometry: the hole IS the
   capture circle, the lip sits outside it. No z-index (arrows 3, pucks 4, sparks 6 sit above). ── */
.su-ring[data-map="pockets"] {
  --su-pitch: radial-gradient(circle at 38% 30%, rgba(160, 200, 255, .10), transparent 48%),
    repeating-radial-gradient(circle at 50% 50%, rgba(170, 205, 255, .05) 0 1px, transparent 1px calc(var(--su-die) * .9)),
    radial-gradient(circle, #16233a 0%, #101a2d 70%, #0b1322 100%);
  --su-pline: rgba(160, 200, 255, .16);
  --su-railC: #9fb3c8; --su-pkLip: rgba(200, 225, 255, .85);
}
.su-rail { fill: var(--su-railC); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); }
.su-railline { fill: none; stroke: rgba(0, 0, 0, .6); stroke-width: .008; }
.su-pk-rim { fill: none; stroke: var(--su-pkLip); }
.su-pk-hole { fill: #020306; }
.su-pk-throat { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: .012; }

/* ── a PUCK: the box IS the hitbox (2·DR across) · halo (aim state) · the puck svg, painted to the box's edge ── */
.su-die { position: absolute; width: var(--su-die); height: var(--su-die); transform: translate(-50%, -50%); z-index: 4; pointer-events: none; }
.su-root[data-travel="1"] .su-die { transition: left .6s cubic-bezier(.3, .1, .25, 1), top .6s cubic-bezier(.3, .1, .25, 1), opacity .35s; }
.su-face { position: absolute; inset: 0; border-radius: 50%; }
.su-puck { display: block; width: 100%; height: 100%; }
/* ⛔ body r 46.5 + stroke 7 / 2 = 50 of the 100 viewBox: the painted edge is the hitbox, to the pixel (§1b) */
.su-pk-body { fill: var(--su-pc); stroke: var(--su-pkEdge, #0b0c10); stroke-width: 7; }
.su-pk-lip { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 3.5; }
.su-pk-sym { fill: var(--su-pkInk, #121318); }
.su-halo { position: absolute; inset: calc(var(--su-die) * -.5); border-radius: 50%; display: none; }
.su-die[data-st="unaimed"] .su-halo { display: block; border: 1.5px dashed var(--su-txt); opacity: .75; }
.su-die[data-st="hover"] .su-halo { display: block; border: 1.5px dashed var(--su-txt); box-shadow: 0 0 10px var(--su-txt); background: color-mix(in srgb, var(--su-txt) 12%, transparent); }
.su-die[data-st="aimed"] .su-halo { display: block; border: 2px solid var(--su-pc); box-shadow: 0 0 8px var(--su-pc); }
.su-die[data-st="aimedHover"] .su-halo { display: block; border: 2px solid var(--su-pc); box-shadow: 0 0 14px var(--su-pc); background: color-mix(in srgb, var(--su-pc) 22%, transparent); }
.su-die[data-st="drag"] .su-halo { display: block; border: 2px solid var(--su-pc); box-shadow: 0 0 18px var(--su-pc); background: color-mix(in srgb, var(--su-pc) 30%, transparent); }
.su-die[data-st="locked"] .su-halo { display: block; border: 1.5px dashed var(--su-dim); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 6px); }
.su-die[data-st="lockedAimed"] .su-halo { display: block; border: 2px solid var(--su-dim); opacity: .9; }
.su-die[data-fall="1"] { z-index: 2; }
.su-die[data-fall="1"] .su-face { box-shadow: 0 8px 10px rgba(0, 0, 0, .6); }
.su-die[data-bump="1"] { animation: su-bump .5s ease-out 2; }
.su-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
/* the hit burst (owner: "flashier"): a star that POPS and turns + a ring that blows out, both sized by how hard the
   hit was (--su-str 0…1). The layer is a zero-size anchor at the contact point; its children centre on it. */
.su-spark { --su-str: .5; position: absolute; width: 0; height: 0; animation: su-spark .45s ease-out forwards; }
.su-sstar { position: absolute; left: 0; top: 0; font-size: calc(var(--su-die) * (.55 + .85 * var(--su-str))); line-height: 1; color: var(--su-spark);
  text-shadow: 0 0 10px var(--su-spark), 0 0 22px var(--su-spark); font-family: system-ui, sans-serif; animation: su-pop .45s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.su-sring { position: absolute; left: 0; top: 0; width: calc(var(--su-die) * (.8 + 1.1 * var(--su-str))); height: calc(var(--su-die) * (.8 + 1.1 * var(--su-str)));
  border-radius: 50%; border: 2px solid var(--su-spark); box-shadow: 0 0 10px var(--su-spark); animation: su-ringout .4s ease-out forwards; }
.su-spark-big .su-sring { border-width: 3px; }
.su-spk { position: absolute; width: calc(var(--su-die) * .22); height: calc(var(--su-die) * .22); border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--su-spark), 0 0 3px #fff; pointer-events: none; }
/* a streak (look pass): a tiny white-hot spark that keeps its speed */
.su-streak { width: calc(var(--su-die) * .12); height: calc(var(--su-die) * .12); background: #fff; box-shadow: 0 0 6px var(--su-spark), 0 0 2px #fff; }
.su-meter { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: rgba(10, 10, 14, .88); border: 1px solid var(--su-me); color: #fff; z-index: 7; pointer-events: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.su-meter[data-on="0"] { display: none; }
.su-meter b { width: 32px; }
.su-bars { display: flex; align-items: flex-end; gap: 2px; }
.su-bars i { width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--su-txt) 20%, transparent); }
.su-bars i:nth-child(1) { height: 5px; } .su-bars i:nth-child(2) { height: 8px; } .su-bars i:nth-child(3) { height: 11px; }
.su-bars i[data-on="1"] { background: var(--su-me); box-shadow: 0 0 5px var(--su-me); }
.su-bars-big i { width: 8px; } .su-bars-big i:nth-child(1) { height: 7px; } .su-bars-big i:nth-child(2) { height: 11px; } .su-bars-big i:nth-child(3) { height: 15px; }

/* ── right: feed + controls ─────────────────────────────────────────────── */
.su-right { flex: none; display: flex; flex-direction: column; gap: var(--su-gap); min-width: 0; }
.su-gap { display: none; }
.su-feed { height: var(--su-feedH); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; overflow: hidden; }
.su-feedt { display: none; }
/* ⛔ a FIXED line height — a line holding "✸"/"→"/"–" from a fallback font was 1px taller (the §6 walk) */
.su-feedl { flex: none; height: 16px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-feedl[data-old="1"] { color: var(--su-dim); font-weight: 400; }
.su-feedl[data-old="0"][data-tone="accent"] { color: var(--su-txt); font-weight: 800; }
.su-ctrl { height: var(--su-ctrlH); display: flex; align-items: center; gap: 10px; }
.su-actions { display: contents; }
.su-timer { order: 0; position: relative; flex: none; width: var(--su-timerS); height: var(--su-timerS); }
.su-tring { position: absolute; inset: 0; border-radius: 50%; opacity: .9; }
.su-tin { position: absolute; inset: 6px; border-radius: 50%; background: var(--su-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.su-tin b { font-size: var(--su-fsTimer); font-weight: 700; font-variant-numeric: tabular-nums; }
.su-tin em { font-size: 9px; color: var(--su-dim); margin-top: 2px; letter-spacing: .04em; }
.su-timer[data-low="1"] .su-tin b { animation: su-pulse 1s ease-in-out infinite; }
.su-readout { order: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.su-rtitle { font-size: 11px; color: var(--su-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-rrow { display: flex; align-items: flex-end; gap: 8px; }
.su-rword { width: 40px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.su-ready { order: 2; flex: none; width: var(--su-readyW); height: var(--su-readyH); border-radius: 14px; background: var(--su-btn); color: var(--su-btnTxt); border: 1px solid var(--su-line);
  font-size: var(--su-fsReady); font-weight: 800; letter-spacing: .06em; cursor: pointer; white-space: nowrap; overflow: hidden; padding: 0 6px;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7); transition: filter .12s, transform .12s, box-shadow .12s; }
.su-ready:active:not(:disabled) { filter: brightness(.88); transform: translateY(2px); }
@media (hover: hover) { .su-ready:hover:not(:disabled) { filter: brightness(1.14); box-shadow: 0 0 0 3px var(--su-txt); } .su-menu:hover { box-shadow: 0 0 0 2px var(--su-txt); } }
.su-ready:disabled { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); color: var(--su-dim); border: 2px dashed var(--su-line);
  font-size: 12px; font-weight: 700; letter-spacing: 0; cursor: not-allowed; box-shadow: none; }

/* ── screen-level layers INSIDE the root (never position:fixed) ─────────── */
.su-scrim { position: absolute; inset: 0; background: var(--su-scrim); z-index: 20; opacity: 0; pointer-events: none; transition: opacity .25s; }
.su-scrim[data-on="1"] { opacity: 1; }
.su-banner { position: absolute; left: 50%; transform: translateX(-50%); z-index: 21; pointer-events: none; display: none; bottom: 128px; }
.su-banner[data-on="1"] { display: block; }
.su-banner[data-kind="bout"], .su-banner[data-kind="goal"] { bottom: auto; top: 40%; transform: translate(-50%, -50%); }
/* ⚽ the GOAL card: the bout card's place, no scrim (the board it holds is the point), the seat-neutral spark colour */
.su-banner[data-kind="goal"] .su-btag { color: var(--su-spark); opacity: 1; }
/* …COLOUR-CODED when it has a seat (owner's playtest 2026-10-04): data-o = the scorer (or, nobody scoring, the seat that
   conceded) → a border + glow of that colour, the tag as a pill in it, and the seat's symbol beside the title */
.su-banner[data-kind="goal"][data-o] .su-bcard { box-shadow: 0 0 0 3px var(--su-pc), 0 0 26px 2px color-mix(in srgb, var(--su-pc) 55%, transparent), 0 16px 36px -10px rgba(0, 0, 0, .7); }
.su-banner[data-kind="goal"][data-o] .su-btag { background: var(--su-pc); color: #0b0c10; padding: 1px 8px; border-radius: 999px; }
.su-brow { display: flex; align-items: center; gap: 8px; }
.su-bsym { display: block; width: 28px; height: 28px; flex: none; }
.su-bsym:empty { display: none; }
.su-bsym svg { width: 100%; height: 100%; display: block; }
/* ⚽ confetti out of the net (sumo.js suConfetti): ends inside SU_FX.goalHold */
.su-conf { position: absolute; width: calc(var(--su-die) * .2); height: calc(var(--su-die) * .38); border-radius: 2px; transform: translate(-50%, -50%); pointer-events: none; z-index: 6; }
.su-conf.su-conf-sq { height: calc(var(--su-die) * .2); border-radius: 50%; }
/* ⏱ the turn clock warns (sumo.js suPaintHead): amber "3 turns left" / "2 turns left", red + a pulse on the final turn
   and in overtime — colour and a 1.0→1.06 scale only (the header's slots never change) */
.su-htitle[data-clk="late"] { color: #ffb347; }
.su-htitle[data-clk="last"] { color: #ff6b5e; animation: su-clk 1s ease-in-out infinite; transform-origin: left center; }
@keyframes su-clk { 50% { transform: scale(1.06); } }
.su-bcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 18px; border-radius: 16px; background: var(--su-bubbleBg); color: var(--su-bubbleTxt); box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .7); white-space: nowrap; text-align: center; }
.su-btag { font-size: 10px; font-weight: 700; letter-spacing: .14em; opacity: .75; }
.su-btitle { font-size: 20px; font-weight: 800; }
.su-bsub { font-size: 12px; opacity: .85; }

/* ── end screen rows ────────────────────────────────────────────────────── */
.su-endrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.su-endrow[data-win="1"] { font-weight: 800; }
.su-endnm { display: flex; align-items: center; gap: 8px; }
.su-endnm .su-shape { font-size: 16px; width: 1.2em; text-align: center; }
.su-endst { font-size: 13px; opacity: .8; }
.su-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .su-root *, .su-root *::before, .su-root *::after { animation: none !important; transition: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  /* the REVEAL callout sits ON the feed row as one line (the mock's phone placement, l.607) — drawn two lines
     tall above it, it covered YOUR dice at the bottom of the ring for the whole beat (360 × 740, 4 players) */
  .su-banner[data-kind="reveal"] { bottom: calc(var(--su-pad) + var(--su-ctrlH) + var(--su-gap)); }
  .su-banner[data-kind="reveal"] .su-bcard { height: var(--su-feedH); flex-direction: row; align-items: center; gap: 8px; padding: 0 16px; }
  .su-banner[data-kind="reveal"] .su-btitle { font-size: 17px; }
  .su-banner[data-kind="reveal"] .su-bsub { display: none; }
  #sumo-game-screen.su-playing .wrap { padding: 0 2px; max-width: none; }
  #sumo-game-screen.su-playing .topbar { display: none; }
  #sumo-game-screen.su-playing.su-topbar-open .topbar { display: flex; }
}
/* the mock's 360 × 740 floor: same slots, a little tighter */
@media (max-width: 370px) {
  .su-root { --su-pad: 10px; --su-gap: 6px; --su-chipH: 46px; --su-avS: 24px; --su-fsName: 12px; --su-statW: 60px; --su-readyW: 112px; --su-readyH: 52px; --su-fsReady: 16px; --su-timerS: 56px; }
  .su-htitle { width: 158px; font-size: 14px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 637 less the 84px chat strip) ── */
@media (min-width: 1000px) {
  #sumo-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .su-root {
    --su-pad: 16px; --su-gap: 10px; --su-chipH: 64px; --su-rowH: 20px; --su-avS: 38px; --su-fsName: 15px; --su-fsSmall: 12px; --su-statW: 112px;
    --su-feedH: 132px; --su-timerS: 88px; --su-fsTimer: 30px; --su-readyH: 64px; --su-fsReady: 19px;
    width: 1280px; height: 553px; flex-direction: row; gap: 16px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .su-left, .su-right { width: 288px; min-height: 0; }
  .su-left { gap: 10px; }
  .su-head { height: auto; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: var(--su-rad); background: var(--su-panel); border: 1px solid var(--su-line); }
  .su-htitle { width: 100%; font-size: 19px; }
  .su-hsub { flex: none; width: 100%; text-align: left; font-size: 13px; }
  .su-menu { display: none; }
  .su-chips { display: flex; flex-direction: column; gap: 10px; }
  .su-chip { padding: 0 14px 0 18px; gap: 10px; }
  .su-marks { font-size: 15px; gap: 4px; }
  .su-cbody { gap: 5px; }
  .su-feed { justify-content: flex-start; gap: 7px; padding: 12px 14px; border-radius: var(--su-rad); background: var(--su-panel); border: 1px solid var(--su-line); }
  .su-feedt { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--su-dim); }
  .su-feedl { height: 18px; font-size: 13px; line-height: 18px; }
  .su-gap { display: block; flex: 1; }
  .su-ctrl { height: auto; flex-direction: column; align-items: stretch; gap: 10px; }
  .su-readout { order: 0; flex: none; height: 78px; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--su-rad); background: var(--su-panel); border: 1px solid var(--su-line); }
  .su-rtitle { font-size: 12px; }
  .su-rrow { gap: 12px; }
  .su-rword { width: 80px; font-size: 15px; }
  .su-actions { order: 1; display: flex; align-items: center; gap: 12px; height: 92px; }
  .su-tin { inset: 8px; }
  .su-tin em { font-size: 11px; margin-top: 3px; letter-spacing: .06em; }
  .su-ready { flex: 1; width: auto; font-size: var(--su-fsReady); }
  .su-ready:disabled { font-size: 15px; }
  .su-banner { bottom: auto; top: 22px; }
  .su-bcard { padding: 12px 26px; }
  .su-btag { font-size: 11px; }
  .su-btitle { font-size: 26px; }
  .su-bsub { font-size: 14px; }
  .su-meter { font-size: 13px; padding: 6px 10px; }
}