/* frontend/ricochet.css — RICOCHET (id `ricochet`) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Ring Out precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The palette is the mock's (docs/design/Batch 15/ricochet/Ricochet.dc.html L339–388, charcoal) — CLASSIC by default,
 * ARCADE when GameTheme puts `gm-arcade` on the screen (recolour only). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE
 * BOARD: the setup card sits outside `.rc-root`.
 * ⭐ RC-F2 — the four SEAT colours are a FIXED set spread 0.10 apart in OKLCH lightness (.92 / .82 / .72 / .62; the
 * mock's were within 0.09, and Bot 1 = Bot 3 at L .78), every one lighter than the always-dark floor, and never the only
 * mark: every ball, trail, paddle badge, king badge and chip carries its owner's SHAPE (● ▲ ■ ◆), and on a phone a
 * glyph chip rides beside every ball.
 *
 * ── Geometry is the mock's ──────────────────────────────────────────────────
 * Phone first (384 × 812: header 28 · chips 50 · arena · feed 40 · controls 64, L127–181), then the desktop design box
 * 1280 × 553 (the mock's 637 less its 84 px chat strip; rails 288, feed 132, readout 78, timer 92 + READY 64, L43–108).
 * The collapsed chat pill hands the ARENA 40 px: the board declares 593 (`--rc-fit-h`, data-bf-h).
 * The arena is ONE svg in arena units (width 1; height 1 square / √3⁄2 triangle) — the drawn dice, paddles and balls are
 * the physics' own boxes, capsules and circles (RC-F6, RC-M5). Tags are HTML in the `.rc-tags` layer (crisp text).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements. Every row is a FIXED size except the ARENA. Feedback changes colour, glow or a 1–2 px
 * transform — never size or spacing. The banners sit OFF the arena (RC-F4) in space reserved for nothing else.
 */

#ricochet-game-screen, .rc-root {
  --rc-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --rc-mid: #141519;
  --rc-txt: #e9e8e4; --rc-dim: #83858b; --rc-panel: rgba(255, 255, 255, .022); --rc-line: rgba(255, 255, 255, .075);
  --rc-seat: rgba(255, 255, 255, .025);
  --rc-btn: linear-gradient(180deg, #2d3036, #22242a); --rc-btnTxt: #f1f0ec;
  --rc-bubbleBg: #2b2d33; --rc-bubbleTxt: #f1f0ec;
  --rc-floor: color-mix(in oklch, #141519 22%, #05060a);
  --rc-block: color-mix(in oklch, #141519 40%, #15171d);
  --rc-wall: rgba(236, 236, 240, .62); --rc-wallGlow: rgba(150, 200, 255, .18);
  --rc-spark: #fff4c2;
  /* RC-F2: 0.10 L apart, all far lighter than the floor */
  --rc-p0: oklch(.82 .13 175); --rc-p1: oklch(.72 .16 35); --rc-p2: oklch(.92 .15 95); --rc-p3: oklch(.62 .15 300);
  --rc-ui: 'Outfit', system-ui, sans-serif;
  --rc-rad: 14px;
}
#ricochet-game-screen.gm-arcade, .gm-arcade .rc-root {
  --rc-bg: radial-gradient(135% 120% at 50% -10%, #1a1530 0%, #12101f 60%, #0a0814 100%);
  --rc-mid: #12101f;
  --rc-txt: #f4f2fb; --rc-dim: rgba(244, 242, 251, .55); --rc-panel: rgba(255, 255, 255, .07); --rc-line: rgba(131, 56, 236, .45);
  --rc-seat: rgba(0, 0, 0, .22);
  --rc-btn: linear-gradient(180deg, #8338EC, #6f2bd0); --rc-btnTxt: #fff;
  --rc-bubbleBg: #3A86FF; --rc-bubbleTxt: #fff;
  --rc-floor: color-mix(in oklch, #12101f 22%, #05060a);
  --rc-block: color-mix(in oklch, #12101f 40%, #15171d);
  --rc-wall: color-mix(in oklch, #8338EC 55%, #fff); --rc-wallGlow: rgba(131, 56, 236, .35);
  --rc-ui: 'Poppins', system-ui, sans-serif;
  --rc-rad: 18px;
}

@keyframes rc-pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

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

/* ── the board root (phone first) ───────────────────────────────────────── */
.rc-root {
  --rc-pad: 12px; --rc-gap: 8px; --rc-chipH: 50px; --rc-rowH: 15px; --rc-avS: 28px; --rc-fsName: 13px; --rc-fsSmall: 11px; --rc-statW: 38px;
  --rc-mkS: 12px; --rc-fsMk: 8px; --rc-ptsW: 24px; --rc-fsPts: 15px;
  --rc-feedH: 40px; --rc-ctrlH: 64px; --rc-timerS: 60px; --rc-fsTimer: 21px; --rc-readyW: 124px; --rc-readyH: 56px; --rc-fsReady: 17px;
  --rc-inset: 10px;
  --rc-h: 1;
  --rc-me: var(--rc-p0);
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--rc-phone-h, 700px); padding: var(--rc-pad);
  display: flex; flex-direction: column; gap: var(--rc-gap);
  background: var(--rc-bg); color: var(--rc-txt); font-family: var(--rc-ui);
  user-select: none; -webkit-user-select: none;
}
.rc-root[data-kind="tri"] { --rc-h: .8660254; }
.rc-root *, .rc-root *::before, .rc-root *::after { box-sizing: border-box; }
.rc-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.rc-root i, .rc-root em { font-style: normal; }
.rc-root [data-o="0"] { --rc-pc: var(--rc-p0); } .rc-root [data-o="1"] { --rc-pc: var(--rc-p1); }
.rc-root [data-o="2"] { --rc-pc: var(--rc-p2); } .rc-root [data-o="3"] { --rc-pc: var(--rc-p3); }
.rc-shape[data-o="0"] { color: var(--rc-p0); } .rc-shape[data-o="1"] { color: var(--rc-p1); }
.rc-shape[data-o="2"] { color: var(--rc-p2); } .rc-shape[data-o="3"] { color: var(--rc-p3); }
.rc-shape { font-family: system-ui, sans-serif; line-height: 1; }

/* ── left: header + chips ───────────────────────────────────────────────── */
.rc-left { flex: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-head { flex: none; height: 28px; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.rc-htop { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-htitle { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-hsub { display: none; }
.rc-pill { flex: none; padding: 3px 9px; border-radius: 8px; background: #fff; color: #0b0c10; font: 800 11px ui-monospace, Menlo, monospace; letter-spacing: .1em; box-shadow: 0 0 14px rgba(255, 255, 255, .45); opacity: 0; }
.rc-pill[data-on="1"] { opacity: 1; }
.rc-menu { flex: none; width: 30px; height: 24px; border: 1px solid var(--rc-line); border-radius: 999px; cursor: pointer; font-size: 13px; background: var(--rc-panel); color: var(--rc-txt); }
.rc-menu:active { transform: translateY(1px); }
.rc-chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.rc-chip { position: relative; height: var(--rc-chipH); display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: var(--rc-rad); border: 1px solid var(--rc-line); min-width: 0; background: var(--rc-seat); }
.rc-chip[data-you="1"] { box-shadow: inset 0 0 0 2px var(--rc-pc); }
/* a KING HIT on the cards (rcChipReact; owner, 2026-09-30 — replaces the KING HIT card): the attacker glows in its colour
   (::before), the victim flashes red (::after). Opacity-only layers: nothing moves the layout. */
.rc-chip::before, .rc-chip::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; }
.rc-chip::before { opacity: var(--rc-kglow, 0); box-shadow: 0 0 18px 3px var(--rc-pc), inset 0 0 0 2px var(--rc-pc), inset 0 0 16px color-mix(in oklch, var(--rc-pc) 45%, transparent); }
.rc-chip::after { opacity: var(--rc-kred, 0); box-shadow: 0 0 18px 3px rgba(255, 60, 60, .85), inset 0 0 0 2px #ff4646, inset 0 0 18px rgba(255, 60, 60, .5); }   /* no flat tint: it would sit OVER the card's text */
.rc-av { position: relative; flex: none; width: var(--rc-avS); height: var(--rc-avS); border-radius: 50%; background: var(--rc-panel); border: 1px dashed var(--rc-dim); display: block; }
.rc-badge { position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px; border-radius: 50%; background: rgba(12, 12, 16, .9); border: 2px solid var(--rc-pc); color: #fff; font: 400 10px/15px system-ui, sans-serif; text-align: center; }
.rc-cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* ⛔ FIXED row heights (the Ring Out lesson: a fallback-font glyph makes a line box 1 px taller) */
.rc-crow { height: var(--rc-rowH); display: flex; justify-content: space-between; align-items: center; gap: 4px; min-width: 0; line-height: var(--rc-rowH); }
.rc-cname { font-size: var(--rc-fsName); white-space: nowrap; overflow: hidden; }
.rc-cstat { flex: none; width: var(--rc-statW); height: var(--rc-rowH); text-align: right; font-size: var(--rc-fsSmall); font-weight: 600; color: var(--rc-dim); white-space: nowrap; overflow: hidden; }
.rc-chip[data-hot="1"] .rc-cstat { color: var(--rc-txt); }
.rc-marks { display: flex; gap: 2px; flex: none; }
.rc-mk { width: var(--rc-mkS); height: var(--rc-mkS); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: var(--rc-fsMk); font-weight: 700; line-height: 1; background: var(--rc-pc); color: #0b0c10; }
.rc-mk[data-on="0"] { background: transparent; color: var(--rc-dim); border: 1px dashed var(--rc-dim); }
.rc-cpips { display: none; font-size: 12px; color: var(--rc-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-cpts { flex: none; width: var(--rc-ptsW); text-align: right; line-height: 1; }
.rc-cpts b { display: block; font-size: var(--rc-fsPts); font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-cpts em { display: none; font-size: 10px; color: var(--rc-dim); letter-spacing: .08em; font-weight: 700; margin-top: 3px; }
/* ⛔ a FIXED box (locked layout): "+2" appearing must not change its size */
.rc-gain { position: absolute; right: 4px; top: -9px; width: 30px; height: 18px; border-radius: 8px; background: var(--rc-spark); color: #0b0c10; font: 800 12px/18px ui-monospace, Menlo, monospace; text-align: center; box-shadow: 0 0 12px var(--rc-spark); opacity: 0; pointer-events: none; }
.rc-gain[data-on="1"] { opacity: 1; }

/* ── the arena (the ONE flexible row on a phone) ───────────────────────── */
.rc-mid { flex: 1 1 0; min-height: 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; container-type: size; }
.rc-arena { position: relative; flex: none; width: min(calc(100cqw - var(--rc-inset)), calc((100cqh - var(--rc-inset)) / var(--rc-h))); aspect-ratio: 1 / var(--rc-h); touch-action: none; isolation: isolate; }   /* the haze blends inside the arena only (a bounded blend group) */
.rc-root[data-kind="square"] .rc-arena { border-radius: 8px; box-shadow: 0 0 18px 4px var(--rc-wallGlow); }
.rc-root[data-lock="0"] .rc-arena { cursor: crosshair; }
.rc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.rc-tags { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
/* the floor: always dark; a faint 8×8 grid */
.rc-floor { fill: var(--rc-floor); }
.rc-grid { fill: url(#rc-grid); }
.rc-gridl { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: .0015; }
/* the WALL sits OUTSIDE the floor (the playable edge is the floor edge): a stroke centred 0.004 out */
.rc-wall { fill: none; stroke: var(--rc-wall); stroke-width: .008; stroke-linejoin: round; }
.rc-wallglow { fill: none; stroke: var(--rc-wallGlow); stroke-width: .03; stroke-linejoin: round; }
.rc-rim { fill: none; stroke: #fff; stroke-width: .006; opacity: .9; }
.rc-block rect { fill: var(--rc-block); stroke: var(--rc-wall); stroke-width: .005; }
.rc-block text { fill: var(--rc-dim); font: 700 .02px ui-monospace, Menlo, monospace; letter-spacing: .1em; text-anchor: middle; dominant-baseline: central; }
.rc-track { fill: none; stroke: color-mix(in oklch, var(--rc-pc) 42%, transparent); stroke-width: .0028; stroke-dasharray: .012 .008; }
/* dice — the drawn rounded box IS the collider (RC-F6) */
.rc-dbody { fill: var(--rc-pc); }
.rc-pip { fill: rgba(0, 0, 0, .55); }
.rc-dhit { fill: none; stroke: var(--rc-spark); stroke-width: .004; }
.rc-die[data-st="crumble"] { opacity: .4; }
.rc-die[data-st="kingHit"] .rc-dbody { stroke: #fff; stroke-width: .006; }
.rc-rubble { fill: none; stroke: color-mix(in oklch, var(--rc-pc) 50%, transparent); stroke-width: .0025; stroke-dasharray: .005 .004; }
.rc-frag { fill: var(--rc-pc); }
.rc-kring { fill: none; stroke: var(--rc-floor); stroke-width: .004; }
.rc-kbadge circle { fill: rgba(8, 9, 12, .92); stroke: var(--rc-pc); stroke-width: .0028; }
.rc-kbadge path { fill: #fff; }
.rc-reticle { fill: none; stroke: var(--rc-txt); stroke-width: .0035; stroke-dasharray: .01 .007; opacity: .7; }
.rc-reticle[data-hot="1"] { stroke: #fff; opacity: 1; stroke-dasharray: none; }
/* paddles: a round-capped arc, the collider's own capsule (RC-M5) */
.rc-paddle { fill: none; stroke: var(--rc-pc); stroke-width: .0217; stroke-linecap: round; }
.rc-paddle[data-st="hover"] { stroke: color-mix(in oklch, var(--rc-pc) 75%, #fff); }
.rc-paddle[data-st="drag"] { stroke: color-mix(in oklch, var(--rc-pc) 60%, #fff); }
.rc-paddle[data-st="locked"] { stroke: var(--rc-dim); opacity: .75; }
.rc-paddle[data-st="clang"] { stroke: #fff; }
.rc-ghost { fill: none; stroke: var(--rc-pc); stroke-width: .0217; stroke-linecap: round; opacity: .2; }
.rc-qchip circle { fill: rgba(8, 9, 12, .8); stroke: color-mix(in oklch, var(--rc-pc) 60%, transparent); stroke-width: .0025; stroke-dasharray: .005 .004; }
.rc-qchip text { fill: var(--rc-dim); font: 700 .018px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.rc-sbadge circle { fill: rgba(8, 9, 12, .92); stroke: var(--rc-pc); stroke-width: .003; }
.rc-sbadge[data-clang="1"] circle { stroke: #fff; }
.rc-sbadge path { fill: #fff; }
/* YOUR aim */
.rc-aim { --rc-ac: var(--rc-me); }
.rc-aim[data-st="locked"] { --rc-ac: var(--rc-dim); }
.rc-guide { stroke: var(--rc-ac); stroke-width: .007; stroke-dasharray: .012 .012; }
.rc-ldot { fill: var(--rc-ac); }
.rc-gstop circle { fill: none; stroke: var(--rc-ac); stroke-width: .003; }
.rc-halo { fill: color-mix(in oklch, var(--rc-txt) 5%, transparent); stroke: color-mix(in oklch, var(--rc-txt) 45%, transparent); stroke-width: .0018; stroke-dasharray: .006 .004; }
.rc-handle circle { fill: #0a0b0e; stroke: var(--rc-me); stroke-width: .0055; }
.rc-handle text { fill: #fff; font: 700 .02px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.rc-handle[data-st="hover"] circle { fill: color-mix(in oklch, var(--rc-me) 25%, #0a0b0e); }
.rc-handle[data-st="drag"] circle { fill: color-mix(in oklch, var(--rc-me) 45%, #0a0b0e); }
.rc-handle[data-st="drag"] { transform: translateY(.0025px); }
.rc-handle[data-st="locked"] circle { fill: #15161b; stroke: var(--rc-dim); stroke-dasharray: .005 .004; }
.rc-handle[data-kind="shield"] text { font-size: .018px; }
/* balls — the ring at the TRUE radius, the owner shape inside, a soft glow */
.rc-bglow { fill: var(--rc-pc); opacity: .22; }
.rc-bring { fill: none; stroke: var(--rc-pc); stroke-width: .002; opacity: .6; }
.rc-bglyph { fill: var(--rc-pc); }
.rc-ball[data-spent="1"] .rc-bglow { opacity: 0; }
.rc-ball[data-spent="1"] .rc-bring { opacity: .35; }
.rc-ball[data-spent="1"] .rc-bglyph { fill: color-mix(in oklch, var(--rc-pc) 45%, #333); }
.rc-trail { fill: var(--rc-pc); }
.rc-tick { fill: var(--rc-pc); }
.rc-kflash { fill: url(#rc-kfl); }
.rc-kfs { stop-color: var(--rc-spark); }
.rc-spark { fill: var(--rc-spark); font: 400 .032px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.rc-spark[data-big="1"] { font-size: .05px; }
.rc-clang { fill: #fff; font: 400 .044px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.rc-fizz circle { fill: none; stroke: var(--rc-dim); stroke-width: .0035; stroke-dasharray: .008 .006; }
.rc-fizz .rc-fizz2 { stroke-width: .002; stroke-dasharray: .002 .004; }
/* HTML tags (RC-F5: flipped + clamped by rcPaintTags) */
.rc-tag { position: absolute; font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .72); border-radius: 4px; white-space: nowrap; }
.rc-tag-strong { background: var(--rc-spark); color: #0b0c10; box-shadow: 0 0 10px var(--rc-spark); }

/* ── JUICE (owner, 2026-09-30) — the reactions (both looks) and the NEON look ────────────────────────────
 * Layers inside the arena, bottom → top: .rc-floorbg (neon floor) · #rc-cvlo (neon grid, ribbons, glows, splashes) ·
 * the SVG (the collider-exact pieces) · .rc-kings (YOUR king's dice skin) · #rc-cvhi (sparks, shockwaves) · .rc-tags.
 * The canvases are paint only (pointer-events none) and sized in JS to the arena's layout px × devicePixelRatio. */
.rc-floorbg, .rc-cv, .rc-kings { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.rc-floorbg { display: none; }
.rc-cv { display: block; }
#rc-cvhi { z-index: 2; }
/* HAZE (experiment, 2026-09-30): two SMALL bloom canvases the compositor stretches over the arena and ADDS (plus-lighter;
   screen where that is missing) — the browser's smoothing on the stretch is half the blur, for free */
.rc-bloom { display: none; z-index: 3; mix-blend-mode: screen; }
@supports (mix-blend-mode: plus-lighter) { .rc-bloom { mix-blend-mode: plus-lighter; } }
.rc-root[data-look="neon"][data-haze="1"] .rc-bloom { display: block; }
/* THE GPU LAYER (2026-09-30): sparks + rings + a real bloom on one WebGL canvas, opaque black, ADDED over the arena. When
   it is live the 2D spark canvas and the 2D haze step aside (data-gl="1"); a lost context flips back to them. */
.rc-glcv { display: none; z-index: 3; mix-blend-mode: screen; }
@supports (mix-blend-mode: plus-lighter) { .rc-glcv { mix-blend-mode: plus-lighter; } }
.rc-root[data-gl="1"] .rc-glcv { display: block; }
.rc-root[data-look="neon"][data-haze="1"][data-gl="1"] .rc-bloom, .rc-root[data-gl="1"] #rc-cvhi { display: none; }   /* must out-rank the haze rule above */
/* the speed readout (?rcfps=1): layout-free, top-left of the arena */
.rc-fps { display: none; position: absolute; left: 4px; top: 4px; z-index: 5; pointer-events: none; font: 600 10px/1.3 ui-monospace, monospace; color: #cfe; background: rgba(0, 0, 0, .55); padding: 2px 5px; border-radius: 4px; }
.rc-kings { z-index: auto; }   /* UNDER the svg: your king's owner badge (svg) stays on top of the skin */
.rc-kskin { position: absolute; line-height: 0; }
.rc-dhalo, .rc-phalo { display: none; }
/* a wall imprint: the rim blooms in the ball's colour where it hit (wide soft glow + a bright core, round ends) */
.rc-wimp line { fill: none; stroke-linecap: round; }
.rc-wimp-glow { stroke: var(--rc-pc); stroke-width: .03; opacity: .45; }
.rc-wimp-core { stroke: color-mix(in oklch, var(--rc-pc) 65%, #fff); stroke-width: .009; }
.rc-phalo { fill: none; stroke: var(--rc-pc); stroke-width: .05; stroke-linecap: round; }
/* YOUR ball on YOUR die / through YOUR shield: RED (+ the shake the JS gives it — it reads in greyscale too) */
.rc-dred { fill: rgba(255, 60, 60, .55); stroke: #ff4646; stroke-width: .004; }
.rc-pred { fill: none; stroke: #ff4646; stroke-width: .026; stroke-linecap: round; }
/* ⛔ YOUR king's SVG body must stay see-through in EVERY look — the skin sits UNDER the svg (so the badge shows), and the
   neon die fill (same specificity, later) painted over it */
.rc-root .rc-die[data-skin="1"] .rc-dbody { fill: transparent !important; stroke: none !important; }
.rc-die[data-skin="1"] .rc-dhalo { display: none !important; }

/* ── NEON: glow outlines, additive light (the canvases), a warping grid — the arena is always dark ── */
.rc-root[data-look="neon"] .rc-floorbg { display: block; background: radial-gradient(120% 100% at 50% 40%, #0a0d24 0%, #05060f 70%, #020308 100%); }
.rc-root[data-look="neon"][data-kind="tri"] .rc-floorbg { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rc-root[data-look="neon"] .rc-floor, .rc-root[data-look="neon"] .rc-grid { display: none; }
.rc-root[data-look="neon"] .rc-wall { stroke: #cfd8ff; stroke-width: .006; }
.rc-root[data-look="neon"] .rc-wallglow { stroke: rgba(110, 140, 255, .35); stroke-width: .03; }
.rc-root[data-look="neon"][data-kind="square"] .rc-arena { box-shadow: 0 0 0 1px rgba(170, 190, 255, .5), 0 0 30px 6px rgba(90, 120, 255, .35); }
.rc-root[data-look="neon"] .rc-dbody { fill: color-mix(in oklch, var(--rc-pc) 16%, #04050c); stroke: var(--rc-pc); stroke-width: .0032; }
.rc-root[data-look="neon"] .rc-dhalo { display: block; fill: none; stroke: var(--rc-pc); stroke-width: .015; opacity: .42; }
.rc-root[data-look="neon"] .rc-pip { fill: color-mix(in oklch, var(--rc-pc) 70%, #fff); }
.rc-root[data-look="neon"] .rc-kring { stroke: color-mix(in oklch, var(--rc-pc) 55%, #fff); stroke-width: .0022; }
.rc-root[data-look="neon"] .rc-die[data-st="kingHit"] .rc-dbody { fill: color-mix(in oklch, var(--rc-pc) 45%, #fff); }
.rc-root[data-look="neon"] .rc-rubble { stroke: color-mix(in oklch, var(--rc-pc) 45%, transparent); }
.rc-root[data-look="neon"] .rc-track { stroke: color-mix(in oklch, var(--rc-pc) 55%, transparent); }
.rc-root[data-look="neon"] .rc-phalo { display: block; }
/* ⛔ the paddle keeps the COLLIDER's width (TH) in every look — the glow is the halo underneath, never a thinner core */
.rc-root[data-look="neon"] .rc-paddle { stroke: color-mix(in oklch, var(--rc-pc) 70%, #fff); }
/* a clang LIFTS the seat colour rather than going white (owner, 2026-09-30: the purple paddle "reading mostly white" —
   under the GPU bloom, which adds on top, a white core blows out) */
.rc-root[data-look="neon"] .rc-paddle[data-st="clang"] { stroke: color-mix(in oklch, var(--rc-pc) 55%, #fff); }
.rc-root[data-look="neon"] .rc-ghost { opacity: .3; }
.rc-root[data-look="neon"] .rc-bglow { display: none; }   /* the canvas glow replaces it */
.rc-root[data-look="neon"] .rc-bglyph { fill: color-mix(in oklch, var(--rc-pc) 70%, #fff); }   /* was 45%: read white */
.rc-root[data-look="neon"] .rc-trail { display: none; }   /* the canvas ribbons replace the glyph trail (the glyph rides the ball) */
.rc-root[data-look="neon"] .rc-spark, .rc-root[data-look="neon"] .rc-clang, .rc-root[data-look="neon"] .rc-tick { display: none; }   /* particles + splashes */
.rc-root[data-look="neon"] .rc-guide { filter: none; }
.rc-root[data-look="neon"] .rc-block rect { fill: #080a18; stroke: #9fb0ff; }

/* ── right: feed + controls ─────────────────────────────────────────────── */
.rc-right { flex: none; display: flex; flex-direction: column; gap: var(--rc-gap); min-width: 0; }
.rc-gap { display: none; }
.rc-feed { height: var(--rc-feedH); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; overflow: hidden; }
.rc-feedt { display: none; }
.rc-feedl { flex: none; height: 16px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-feedl[data-old="1"] { color: var(--rc-dim); font-weight: 400; }
.rc-ctrl { height: var(--rc-ctrlH); display: flex; align-items: center; gap: 10px; }
.rc-actions { display: contents; }
.rc-timer { order: 0; position: relative; flex: none; width: var(--rc-timerS); height: var(--rc-timerS); }
.rc-tring { position: absolute; inset: 0; border-radius: 50%; opacity: .9; --rc-frac: 0%; background: conic-gradient(var(--rc-txt) var(--rc-frac), color-mix(in oklch, var(--rc-txt) 14%, transparent) 0); }
.rc-root[data-last="1"] .rc-tring { background: conic-gradient(#fff var(--rc-frac), color-mix(in oklch, var(--rc-txt) 14%, transparent) 0); box-shadow: 0 0 18px rgba(255, 255, 255, .35); }
.rc-tin { position: absolute; inset: 6px; border-radius: 50%; background: var(--rc-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.rc-tin b { font-size: var(--rc-fsTimer); font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-tin em { font-size: 9px; color: var(--rc-dim); margin-top: 2px; letter-spacing: .04em; }
.rc-timer[data-low="1"] .rc-tin b { animation: rc-pulse 1s ease-in-out infinite; }
.rc-readout { order: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-rtag { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--rc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 13px; line-height: 13px; }
.rc-rmain { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; height: 17px; line-height: 17px; }
.rc-rsub { display: none; }
.rc-ready { order: 2; flex: none; width: var(--rc-readyW); height: var(--rc-readyH); border-radius: 14px; background: var(--rc-btn); color: var(--rc-btnTxt); border: 1px solid var(--rc-line);
  font-size: var(--rc-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; }
.rc-ready:active:not(:disabled) { filter: brightness(.88); transform: translateY(2px); }
@media (hover: hover) { .rc-ready:hover:not(:disabled) { filter: brightness(1.14); box-shadow: 0 0 0 3px var(--rc-txt); } .rc-menu:hover { box-shadow: 0 0 0 2px var(--rc-txt); } }
.rc-ready:disabled { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); color: var(--rc-dim); border: 2px dashed var(--rc-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) ─────────── */
/* ⭐ RC-F4: a banner NEVER covers the arena — phone: over the chip grid (one line, the chip row's height) */
.rc-banner { position: absolute; z-index: 21; pointer-events: none; display: none; left: var(--rc-pad); right: var(--rc-pad); top: calc(var(--rc-pad) + 28px + 8px); height: var(--rc-chipH); }
.rc-banner[data-on="1"] { display: flex; align-items: center; justify-content: center; }
.rc-bcard { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; height: 100%; width: 100%; padding: 0 14px; border-radius: 14px; background: var(--rc-bubbleBg); color: var(--rc-bubbleTxt); box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .7); white-space: nowrap; text-align: center; overflow: hidden; }
.rc-banner[data-hot="1"] .rc-bcard { background: #fff; color: #0b0c10; box-shadow: 0 0 30px rgba(255, 255, 255, .45); }
.rc-btag { font-size: 10px; font-weight: 700; letter-spacing: .14em; opacity: .75; }
.rc-btitle { font-size: 18px; font-weight: 800; }
.rc-bsub { display: none; font-size: 12px; opacity: .85; }
.rc-fly { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.rc-plus { position: absolute; transform: translate(-50%, -50%); padding: 2px 7px; border-radius: 8px; background: var(--rc-spark); color: #0b0c10; font: 800 14px ui-monospace, Menlo, monospace; box-shadow: 0 0 14px var(--rc-spark); }

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

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

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #ricochet-game-screen.rc-playing .wrap { padding: 0 2px; max-width: none; }
  #ricochet-game-screen.rc-playing .topbar { display: none; }
  #ricochet-game-screen.rc-playing.rc-topbar-open .topbar { display: flex; }
  /* the notch: the hidden .topbar carried the safe-area inset (predicely_notch_safe_area; test/_safe_area_top.test.js).
     ⛔ PADDING, never margin (a margin collapses through the screen div). */
  #ricochet-game-screen.rc-playing:not(.rc-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
  /* 2 players: one chip row, so the banner is one row tall */
}
/* the mock's 360 × 740 floor: same slots, a little tighter */
@media (max-width: 370px) {
  .rc-root { --rc-pad: 10px; --rc-gap: 6px; --rc-chipH: 46px; --rc-avS: 24px; --rc-fsName: 12px; --rc-statW: 30px; --rc-mkS: 11px;
    --rc-readyW: 112px; --rc-readyH: 52px; --rc-fsReady: 16px; --rc-timerS: 56px; --rc-inset: 8px; }
  .rc-htitle { font-size: 15px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 637 less the 84 px chat strip) ── */
@media (min-width: 1000px) {
  #ricochet-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .rc-root {
    --rc-pad: 16px; --rc-gap: 10px; --rc-chipH: 70px; --rc-rowH: 18px; --rc-avS: 40px; --rc-fsName: 15px; --rc-fsSmall: 12px; --rc-statW: 96px;
    --rc-mkS: 16px; --rc-fsMk: 10px; --rc-ptsW: 46px; --rc-fsPts: 26px;
    --rc-feedH: 132px; --rc-timerS: 92px; --rc-fsTimer: 32px; --rc-readyH: 64px; --rc-fsReady: 19px;
    --rc-inset: 16px;
    width: 1280px; height: var(--rc-fit-h, 553px); flex-direction: row; gap: 16px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .rc-left, .rc-right { width: 288px; min-height: 0; }
  .rc-left { gap: 10px; }
  .rc-head { height: auto; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; border-radius: var(--rc-rad); background: var(--rc-panel); border: 1px solid var(--rc-line); }
  .rc-htitle { font-size: 20px; }
  .rc-hsub { display: block; height: 16px; font-size: 13px; color: var(--rc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-menu { display: none; }
  .rc-chips { display: flex; flex-direction: column; gap: 10px; }
  .rc-chip { padding: 0 14px; gap: 10px; }
  .rc-cbody { gap: 6px; }
  .rc-marks { gap: 3px; }
  .rc-crow + .rc-crow { justify-content: flex-start; gap: 8px; }
  .rc-cpips { display: block; }
  .rc-cpts em { display: block; }
  .rc-gain { right: 8px; }
  .rc-root[data-kind="square"] .rc-arena { border-radius: 10px; box-shadow: 0 0 26px 6px var(--rc-wallGlow); }
  .rc-feed { justify-content: flex-start; gap: 7px; padding: 12px 14px; border-radius: var(--rc-rad); background: var(--rc-panel); border: 1px solid var(--rc-line); }
  .rc-feedt { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--rc-dim); height: 14px; }
  .rc-feedl { height: 18px; font-size: 13px; line-height: 18px; }
  .rc-gap { display: block; flex: 1; }
  .rc-ctrl { height: auto; flex-direction: column; align-items: stretch; gap: 10px; }
  .rc-readout { order: 0; flex: none; height: 78px; justify-content: center; gap: 3px; padding: 8px 14px; border-radius: var(--rc-rad); background: var(--rc-panel); border: 1px solid var(--rc-line); }
  .rc-rtag { font-size: 11px; }
  .rc-rmain { font-size: 16px; height: 20px; line-height: 20px; }
  .rc-rsub { display: block; font-size: 12px; color: var(--rc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 16px; line-height: 16px; }
  .rc-actions { order: 1; display: flex; align-items: center; gap: 12px; height: 96px; }
  .rc-tin { inset: 8px; }
  .rc-tin em { font-size: 11px; margin-top: 3px; letter-spacing: .06em; }
  .rc-ready { flex: 1; width: auto; font-size: var(--rc-fsReady); }
  .rc-ready:disabled { font-size: 15px; }
  /* RC-F4 on a PC: the banner lives in the right rail's free space (between the feed and the readout) */
  .rc-banner { left: auto; right: 16px; width: 288px; top: 170px; height: 104px; }
  .rc-bcard { flex-direction: column; gap: 2px; padding: 12px 18px; }
  .rc-btag { font-size: 11px; }
  .rc-btitle { font-size: 24px; }
  .rc-bsub { display: block; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .rc-plus { font-size: 16px; }
}