/* frontend/scuffle.css — SCUFFLE board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock (docs/design/batch8/Pounce.dc.html l.121–164): CLASSIC
 * (charcoal) by default, ARCADE (the Blue scheme) 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 it.
 * Players are SHAPE + TEXTURE first (▲ on a plain plate = you, ■ on a hatched plate = the bot, and at 3 players
 * ● on a DOTTED plate = the second bot, in --sf-third), a fox is a double
 * ring, a move is a solid arrow, a fall is a dashed one ending in ✕, a hold is a bar. The owner is colourblind.
 *
 * ── Geometry is scuffle.js's (sfGeo = the mock's G()) ──────────────────────
 * Every element is ABSOLUTE in `.sf-root` and placed once per layout. This file never sizes a slot — except the
 * root itself: 1280 × 553 on desktop (three copies agree: here, SF_FIT_* and board-fit.js), the phone's
 * measured height below 1000px. Feedback changes colour, glow or a 1px transform — never size or spacing.
 */

#scuffle-game-screen, .sf-root {
  --sf-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --sf-ink: #16181d; --sf-panel: rgba(255, 255, 255, .035); --sf-line: rgba(255, 255, 255, .1);
  --sf-txt: #e9e8e4; --sf-dim: #8f9299; --sf-btn: linear-gradient(180deg, #3a3e46, #2a2d33); --sf-btnTxt: #f1f0ec;
  --sf-you: #6fb3ff; --sf-rival: #ffab40; --sf-third: #c9a0ff; --sf-hi: #ffd166; --sf-hiInk: #1b1508; --sf-warn: #ff7a6b;
  --sf-burrow: rgba(0, 0, 0, .26); --sf-burrowBd: rgba(255, 255, 255, .11);
  --sf-hatch: repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 3px, rgba(255, 255, 255, 0) 3px 7px);
  --sf-dots: radial-gradient(circle, rgba(255, 255, 255, .22) 1.4px, rgba(255, 255, 255, 0) 1.8px) 0 0 / 6px 6px;
  --sf-font: 'Outfit', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sf-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sf-r: 14px; --sf-cr: 10px; --sf-bw: 1px; --sf-wt: 650; --sf-caps: none;
  /* ⛔ NOT 'none': this var ends every turn / hold ring's shadow LIST, and 'none' inside a list makes the whole
     box-shadow invalid — on Classic the whose-turn ring never showed until 2026-09-25 (found by the 3p hold ring) */
  --sf-sh: 0 0 0 0 transparent;
}
/* ARCADE — the mock's Blue arcade scheme (l.136, 158–164); recolour only. */
#scuffle-game-screen.gm-arcade, .gm-arcade .sf-root {
  --sf-bg: radial-gradient(135% 120% at 50% -10%, #0c1a3a 0%, #14285e 45%, #1e3a8a 100%);
  --sf-ink: #0c1a3a; --sf-panel: rgba(0, 0, 0, .24); --sf-line: rgba(96, 165, 250, .38);
  --sf-txt: #ffffff; --sf-dim: rgba(255, 255, 255, .72); --sf-btn: #60a5fa; --sf-btnTxt: #161616;
  --sf-you: #60a5fa; --sf-rival: #f472b6; --sf-third: #a3e635; --sf-hi: #facc15; --sf-warn: #ff6b6b;
  --sf-burrow: rgba(0, 0, 0, .3); --sf-burrowBd: rgba(255, 255, 255, .17);
  --sf-hatch: repeating-linear-gradient(45deg, rgba(255, 255, 255, .17) 0 3px, rgba(255, 255, 255, 0) 3px 7px);
  --sf-dots: radial-gradient(circle, rgba(255, 255, 255, .26) 1.4px, rgba(255, 255, 255, 0) 1.8px) 0 0 / 6px 6px;
  --sf-font: 'Poppins', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sf-r: 18px; --sf-cr: 12px; --sf-bw: 2px; --sf-wt: 800; --sf-caps: uppercase; --sf-sh: 0 10px 24px -14px rgba(0, 0, 0, .7);
}

@keyframes sf-impact { 0% { opacity: .75; transform: scale(.55) } 100% { opacity: 0; transform: scale(1.1) } }
@keyframes sf-bannerin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.86) } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) } }
@keyframes sf-capfade { 0% { opacity: .9 } 100% { opacity: 0 } }

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

/* ── the board root (phone first) ───────────────────────────────────────── */
.sf-root {
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--sf-phone-h, 700px);
  background: var(--sf-bg); color: var(--sf-txt); font-family: var(--sf-font);
  border-radius: var(--sf-r);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.sf-root *, .sf-root *::before, .sf-root *::after { box-sizing: border-box; }
.sf-root > * { position: absolute; }
.sf-root i { font-style: normal; }

.sf-panel { background: var(--sf-panel); border: var(--sf-bw) solid var(--sf-line); border-radius: var(--sf-r); box-shadow: var(--sf-sh); transition: box-shadow .2s; }
/* whose turn: a RING, never a thicker border (a border would move nothing here, but it would change the box) */
#sf-dock[data-turn="1"] { box-shadow: inset 0 0 0 2px var(--sf-you), 0 0 0 3px color-mix(in srgb, var(--sf-you) 22%, transparent), var(--sf-sh); }
#sf-riv[data-turn="1"] { box-shadow: inset 0 0 0 2px var(--sf-rival), 0 0 0 3px color-mix(in srgb, var(--sf-rival) 25%, transparent), var(--sf-sh); }
#sf-riv-2[data-turn="1"] { box-shadow: inset 0 0 0 2px var(--sf-third), 0 0 0 3px color-mix(in srgb, var(--sf-third) 25%, transparent), var(--sf-sh); }
/* PO-3P b: an opponent whose foxes are all out and STANDING — a dashed warning ring (a ring, so no box moves) */
#sf-riv[data-hold="1"], #sf-riv-2[data-hold="1"] { box-shadow: inset 0 0 0 2px var(--sf-warn), 0 0 0 4px color-mix(in srgb, var(--sf-warn) 30%, transparent), 0 0 22px 2px color-mix(in srgb, var(--sf-warn) 35%, transparent), var(--sf-sh); }
.sf-sub[data-hold="1"] { color: var(--sf-warn); font-weight: var(--sf-wt); }

/* text boxes: fixed, one line, ellipsis — a value never moves a neighbour */
.sf-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; display: block; }
.sf-pillt { font-size: 11px; line-height: 24px; font-weight: var(--sf-wt); letter-spacing: .06em; text-transform: uppercase; }
.sf-count { font-size: 14px; line-height: 17px; font-weight: var(--sf-wt); text-align: right; font-variant-numeric: tabular-nums; }
.sf-countl { font: 700 9px/12px var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-dim); text-align: right; }
.sf-foxes { font-size: 13px; line-height: 40px; text-align: right; color: var(--sf-dim); font-variant-numeric: tabular-nums; white-space: pre; }
.sf-name { font-size: 14px; line-height: 18px; font-weight: var(--sf-wt); }
.sf-sub { font-size: 11px; line-height: 15px; color: var(--sf-dim); }
.sf-plab, .sf-flab, .sf-ptitle { font: 700 9.5px/12px var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-dim); }
.sf-phead { font-size: 13px; line-height: 18px; font-weight: var(--sf-wt); }
.sf-psub { font-size: 11px; line-height: 15px; color: var(--sf-dim); }
.sf-lg { font-size: 12.5px; line-height: 30px; color: var(--sf-dim); }
.sf-lg[data-on="1"] { color: var(--sf-txt); }
.sf-fa { font-size: 12.5px; line-height: 17px; font-weight: 500; color: var(--sf-dim); }
.sf-fa[data-top="1"] { font-weight: var(--sf-wt); color: var(--sf-txt); }
.sf-fb { font-size: 11px; line-height: 15px; color: var(--sf-dim); }
.sf-fn { font: 10px/17px var(--sf-mono); color: var(--sf-dim); text-align: right; }
.sf-fdiv { background: var(--sf-line); opacity: 0; }
.sf-fdiv[data-on="1"] { opacity: .6; }

/* the pill + the shapes (▲ you, ■ the bot) */
.sf-pill { border-radius: 999px; border: 2px solid var(--sf-you); background: color-mix(in srgb, var(--sf-you) 16%, transparent); }
.sf-pill[data-o="1"] { border-color: var(--sf-rival); background: color-mix(in srgb, var(--sf-rival) 16%, transparent); }
.sf-pill[data-o="2"] { border-color: var(--sf-third); background: color-mix(in srgb, var(--sf-third) 16%, transparent); }
.sf-pill[data-lock="1"] { border-style: dashed; }
.sf-shape { display: block; pointer-events: none; }
.sf-shape[data-o="0"] { background: var(--sf-you); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sf-shape[data-o="1"] { background: var(--sf-rival); border-radius: calc(var(--sf-cr) * .15); }
.sf-shape[data-o="2"] { background: var(--sf-third); border-radius: 50%; }
.sf-shape[data-o=""] { background: transparent; }
.sf-fsh[data-o="1"], .sf-fsh[data-o="0"], .sf-fsh[data-o="2"] { opacity: .8; }
.sf-av { border-radius: 50%; border: 1.5px dashed var(--sf-line); }
.sf-av[data-o="0"] { background: color-mix(in srgb, var(--sf-you) 14%, transparent); }
.sf-av[data-o="1"] { background: color-mix(in srgb, var(--sf-rival) 14%, transparent); }
.sf-av[data-o="2"] { background: color-mix(in srgb, var(--sf-third) 14%, transparent); }
.sf-av .sf-shape { position: absolute; right: -2px; bottom: -2px; width: 36%; height: 36%; }
.sf-tag { border-radius: 4px; font: 800 9.5px/18px var(--sf-mono); letter-spacing: .1em; text-align: center; color: var(--sf-ink); opacity: 0; transition: opacity .2s; }
.sf-tag[data-o="0"] { background: var(--sf-you); }
.sf-tag[data-o="1"] { background: var(--sf-rival); }
.sf-tag[data-o="2"] { background: var(--sf-third); }
.sf-tag[data-on="1"] { opacity: 1; }
.sf-root[data-lay="phone"] #sf-rname, .sf-root[data-lay="phone"] #sf-rname-2 { font-size: 12.5px; }
.sf-root[data-lay="phone"] #sf-rtag, .sf-root[data-lay="phone"] #sf-rtag-2 { font-size: 8.5px; letter-spacing: .06em; }

.sf-menu { display: none; border-radius: 9px; border: 1px solid var(--sf-line); background: var(--sf-panel); color: var(--sf-txt); font-size: 15px; cursor: pointer; padding: 0; }
.sf-root[data-lay="phone"] .sf-menu { display: block; }

/* ── burrows ── */
.sf-cell { margin: 0; padding: 0; border-radius: var(--sf-cr); background: var(--sf-burrow); border: 1.5px solid var(--sf-burrowBd); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .22); cursor: default; z-index: 2; transition: box-shadow .12s, filter .12s, transform .08s, background .12s; }
.sf-cell > i { position: absolute; left: 26%; top: 42%; width: 48%; height: 32%; border-radius: 50%; background: rgba(0, 0, 0, .16); }
.sf-cell[data-st="rest"] { cursor: pointer; }
.sf-cell[data-st="hover"], .sf-cell[data-st="armed"] { cursor: pointer; background: color-mix(in srgb, var(--sf-you) 18%, var(--sf-burrow)); box-shadow: inset 0 0 0 2px var(--sf-you), 0 0 16px -3px var(--sf-you); }
.sf-cell[data-st="armed"] { box-shadow: inset 0 0 0 3px var(--sf-you), 0 0 20px -2px var(--sf-you); }
.sf-cell[data-st="rest"]:active, .sf-cell[data-st="hover"]:active, .sf-cell[data-st="armed"]:active { background: color-mix(in srgb, var(--sf-you) 28%, var(--sf-burrow)); box-shadow: inset 0 0 0 2px var(--sf-you), inset 0 5px 10px rgba(0, 0, 0, .45); transform: translateY(1px); }
.sf-cell[data-st="locked"] { cursor: not-allowed; filter: saturate(.3) brightness(.72); border-style: dashed; }
.sf-cell[data-st="occ"] { cursor: not-allowed; }

/* ── pool sockets (always eight a side) ── */
.sf-sock { border-radius: var(--sf-cr); border: 1.5px dashed var(--sf-line); background: var(--sf-burrow); opacity: .75; }
.sf-sock[data-o="1"], .sf-sock[data-o="2"] { border-width: 1px; opacity: .7; }

/* ── pieces: a plate in the owner's colour, the die centred on it, the owner badge at its corner ── */
.sf-pcs { left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.sf-pc { position: absolute; transform-origin: 50% 50%; pointer-events: none; }
.sf-pc.sf-flying { z-index: 3; }
.sf-hop { position: absolute; inset: 0; display: block; }
.sf-plate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--sf-cr);
  border: max(2px, calc(var(--sf-ps) * .05)) solid var(--sf-you); background: color-mix(in srgb, var(--sf-you) 30%, var(--sf-ink)); transition: box-shadow .15s, filter .15s; }
.sf-pc[data-o="1"] .sf-plate { border-color: var(--sf-rival); background: var(--sf-hatch), color-mix(in srgb, var(--sf-rival) 30%, var(--sf-ink)); }
.sf-pc[data-o="2"] .sf-plate { border-color: var(--sf-third); background: var(--sf-dots), color-mix(in srgb, var(--sf-third) 30%, var(--sf-ink)); }
/* a FOX: the double ring (mock l.298) — ink, then the owner's colour */
.sf-pc[data-k="f"] .sf-plate { box-shadow: 0 0 0 max(1.6px, calc(var(--sf-ps) * .04)) var(--sf-ink), 0 0 0 max(3.6px, calc(var(--sf-ps) * .09)) var(--sf-you); }
.sf-pc[data-o="1"][data-k="f"] .sf-plate { box-shadow: 0 0 0 max(1.6px, calc(var(--sf-ps) * .04)) var(--sf-ink), 0 0 0 max(3.6px, calc(var(--sf-ps) * .09)) var(--sf-rival); }
.sf-pc[data-o="2"][data-k="f"] .sf-plate { box-shadow: 0 0 0 max(1.6px, calc(var(--sf-ps) * .04)) var(--sf-ink), 0 0 0 max(3.6px, calc(var(--sf-ps) * .09)) var(--sf-third); }
.sf-dice { display: block; position: relative; line-height: 0; }
.sf-dice > span { display: block; }
.sf-pc[data-k="c"] .sf-die6, .sf-pc[data-k="f"] .sf-die1 { display: none; }
.sf-badge { position: absolute; left: 1px; top: 1px; width: max(6px, calc(var(--sf-ps) * .22)); height: max(6px, calc(var(--sf-ps) * .22)); background: var(--sf-you); clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 1px var(--sf-ink)); }
.sf-pc[data-o="1"] .sf-badge { background: var(--sf-rival); clip-path: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--sf-ink); }
.sf-pc[data-o="2"] .sf-badge { background: var(--sf-third); clip-path: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--sf-ink); }
.sf-pipdie { display: block; width: 22px; height: 22px; background: #efe9dc; color: #1d1f25; border-radius: 5px; font: 800 13px/22px var(--sf-font); text-align: center; }
/* ALL 8 OUT: your pieces on the meadow are the buttons */
.sf-pc[data-pick="1"] { pointer-events: auto; cursor: pointer; }
.sf-pc[data-pick="1"]:hover .sf-plate { box-shadow: 0 0 0 3px var(--sf-hi), 0 0 18px 2px var(--sf-hi); }
.sf-pc[data-pick="1"][data-k="f"]:hover .sf-plate { box-shadow: 0 0 0 max(1.6px, calc(var(--sf-ps) * .04)) var(--sf-ink), 0 0 0 max(3.6px, calc(var(--sf-ps) * .09)) var(--sf-you), 0 0 0 7px var(--sf-hi), 0 0 18px 2px var(--sf-hi); }
.sf-pc[data-dim="1"] { opacity: .6; }

/* ── overlays (the preview, the capsules, rings, letters) ── */
.sf-ovU, .sf-ovO, .sf-fx { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.sf-ovU { z-index: 4; }
.sf-ovO { z-index: 8; }
.sf-fx { z-index: 9; }
.sf-ovU > i, .sf-ovO > i, .sf-fx > i { position: absolute; display: block; }
.sf-arr { transform-origin: 0 50%; border-radius: 3px; background: var(--sf-txt); box-shadow: 0 0 0 1.5px var(--sf-ink); }
.sf-arr.sf-dash { box-shadow: none; background: repeating-linear-gradient(90deg, var(--sf-txt) 0 6px, transparent 6px 10px); }
.sf-arr[data-col="warn"].sf-dash { background: repeating-linear-gradient(90deg, var(--sf-warn) 0 6px, transparent 6px 10px); }
.sf-head { transform-origin: 100% 50%; clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--sf-txt); }
.sf-head[data-col="warn"] { background: var(--sf-warn); }
.sf-bar { height: 4px; border-radius: 2px; background: var(--sf-txt); box-shadow: 0 0 0 1.5px var(--sf-ink); }
.sf-x { border-radius: 50%; background: var(--sf-warn); color: #1a0706; font-weight: 900; text-align: center; box-shadow: 0 0 0 2px var(--sf-ink); }
.sf-dest { border-radius: var(--sf-cr); border: 2px dashed var(--sf-txt); opacity: .8; }
.sf-fallring { border-radius: var(--sf-cr); border: 2.5px dashed var(--sf-warn); }
.sf-a8ring { border-radius: var(--sf-cr); border: 2px dashed var(--sf-hi); }
.sf-ghost { border-radius: var(--sf-cr); border: max(2px, calc(var(--sf-ps) * .05)) dashed var(--sf-you); background: color-mix(in srgb, var(--sf-you) 30%, var(--sf-ink)); opacity: .55; }
.sf-ghost[data-k="f"] { box-shadow: 0 0 0 2px var(--sf-ink), 0 0 0 4px var(--sf-you); }
.sf-ghost .sf-badge { position: absolute; }
.sf-cap { border-radius: 999px; border: 3px solid var(--sf-hi); background: color-mix(in srgb, var(--sf-hi) 14%, transparent); }
.sf-cap[data-dash="1"] { border-style: dashed; }
.sf-cap[data-glow="1"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-hi) 40%, transparent), 0 0 26px 4px color-mix(in srgb, var(--sf-hi) 55%, transparent); }
.sf-cap[data-li] { pointer-events: auto; cursor: pointer; }
.sf-cap-fade { animation: sf-capfade .56s ease-out forwards; }
.sf-letter { border-radius: 50%; background: var(--sf-hi); color: var(--sf-hiInk); font-weight: 900; text-align: center; box-shadow: 0 0 0 2px var(--sf-ink); font-family: var(--sf-font); }
.sf-impact { border-radius: 50%; border: 3px solid var(--sf-hi); animation: sf-impact .5s ease-out forwards; }

/* ── the prompt: legend icons, the ALL 8 OUT legend, the line buttons, Place ── */
.sf-lgi { display: block; }
.sf-lgi[data-show="0"], .sf-a8i[data-show="0"] { visibility: hidden; }
.sf-lgi[data-on="0"] { opacity: .45; }
.sf-lgi[data-kd="mv"] { background: linear-gradient(var(--sf-txt), var(--sf-txt)) 2px 50%/14px 3px no-repeat; }
.sf-lgi[data-kd="mv"]::after { content: ''; position: absolute; left: 13px; top: 6px; width: 9px; height: 9px; background: var(--sf-txt); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sf-lgi[data-kd="x"] { background: repeating-linear-gradient(90deg, var(--sf-warn) 0 5px, transparent 5px 8px) 0 50%/11px 3px no-repeat; }
.sf-lgi[data-kd="x"]::after { content: '✕'; position: absolute; left: 10px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--sf-warn); color: #1a0706; font: 900 9px/14px var(--sf-font); text-align: center; }
.sf-lgi[data-kd="bar"]::after { content: ''; position: absolute; left: 9px; top: 3px; width: 4px; height: 16px; border-radius: 2px; background: var(--sf-txt); box-shadow: 0 0 0 1.5px var(--sf-ink); }
.sf-lgi[data-kd="warn"]::after { content: '!'; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: var(--sf-warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); color: #1a0706; font: 900 10px/22px var(--sf-font); text-align: center; }
.sf-a8i { border-radius: 50%; background: var(--sf-hi); color: var(--sf-hiInk); font: 900 13px/22px var(--sf-font); text-align: center; }

.sf-lb { margin: 0; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-radius: var(--sf-cr); border: 2px solid var(--sf-line); background: color-mix(in srgb, var(--sf-panel) 60%, transparent); color: var(--sf-txt); font: var(--sf-wt) 13px var(--sf-font); cursor: pointer; white-space: nowrap; overflow: hidden; transition: filter .12s, box-shadow .12s, transform .08s; }
.sf-lb > b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sf-hi); color: var(--sf-hiInk); font-size: 12px; line-height: 22px; text-align: center; }
.sf-lb[data-st="off"] { visibility: hidden; }
.sf-lb[data-st="hover"] { filter: brightness(1.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-hi) 50%, transparent), 0 0 16px -4px var(--sf-hi); }
.sf-lb:active { transform: translateY(1px); filter: brightness(.86); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); }
.sf-root[data-lay="phone"] .sf-lb { padding: 0; justify-content: center; border-color: var(--sf-hi); background: color-mix(in srgb, var(--sf-hi) 22%, transparent); }
.sf-root[data-lay="phone"] .sf-lb[data-dash="1"] { border-style: dashed; }
.sf-root[data-lay="phone"] .sf-lb > b { width: auto; height: auto; background: none; color: var(--sf-txt); font-size: 16px; }
.sf-root[data-lay="phone"] .sf-lb > span { display: none; }

.sf-place { margin: 0; padding: 0; border-radius: var(--sf-cr); border: 2px solid var(--sf-line); background: color-mix(in srgb, var(--sf-panel) 60%, transparent); color: var(--sf-txt); font: var(--sf-wt) 14px var(--sf-font); text-transform: var(--sf-caps); cursor: pointer; transition: filter .12s, box-shadow .12s, transform .08s; }
.sf-place[data-armed="1"] { border-color: var(--sf-txt); background: var(--sf-btn); color: var(--sf-btnTxt); }
.sf-place:disabled { opacity: .4; filter: saturate(.2); border-style: dashed; cursor: not-allowed; }
.sf-place[data-hide="1"] { visibility: hidden; }
.sf-place:not(:disabled):active { transform: translateY(1px); filter: brightness(.86); }

/* ── the cub / fox toggle ── */
.sf-tog { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--sf-cr); border: 2px solid var(--sf-line); background: color-mix(in srgb, var(--sf-panel) 60%, transparent); color: var(--sf-txt); font: var(--sf-wt) 15px var(--sf-font); text-transform: var(--sf-caps); cursor: pointer; white-space: nowrap; transition: filter .12s, box-shadow .12s, transform .08s; }
.sf-radio { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; }
.sf-tog[data-sel="1"] { border-color: var(--sf-txt); background: var(--sf-btn); color: var(--sf-btnTxt); }
.sf-tog[data-sel="1"] .sf-radio { background: currentColor; }
.sf-togn { font-variant-numeric: tabular-nums; }
.sf-tog:disabled { opacity: .4; filter: saturate(.2); border-style: dashed; cursor: not-allowed; }
.sf-tog:not(:disabled):active { transform: translateY(1px); filter: brightness(.86); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); }
@media (hover: hover) {
  .sf-tog:not(:disabled):hover, .sf-place:not(:disabled):hover { filter: brightness(1.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-you) 50%, transparent), 0 0 16px -4px var(--sf-you); }
  .sf-menu:hover { box-shadow: 0 0 0 2px var(--sf-hi); }
}
.sf-root[data-lay="phone"] .sf-tog { flex-direction: column; gap: 0; font-size: 10.5px; letter-spacing: .06em; line-height: 1.1; }
.sf-root[data-lay="phone"] .sf-tog .sf-radio { display: none; }
.sf-root[data-lay="phone"] .sf-togn { font-size: 14px; }
.sf-root[data-lay="phone"] .sf-tog[data-sel="1"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; border-radius: 2px; background: currentColor; }

/* ── the win banner: a layer INSIDE the root, never fixed ── */
.sf-banner { left: 50%; top: 50%; z-index: 20; min-width: 300px; padding: 16px 26px; display: none; flex-direction: column; align-items: center; gap: 4px;
  background: var(--sf-ink); border: 3px solid var(--sf-hi); border-radius: var(--sf-r); transform: translate(-50%, -50%);
  box-shadow: 0 0 40px 6px color-mix(in srgb, var(--sf-hi) 45%, transparent), 0 20px 50px -20px #000; pointer-events: none; }
.sf-banner[data-on="1"] { display: flex; animation: sf-bannerin .3s ease-out; }
.sf-banner b { font-size: 20px; font-weight: 900; letter-spacing: .06em; color: var(--sf-hi); text-transform: uppercase; }
.sf-banner span { font-size: 13px; color: var(--sf-txt); }

/* ── 🌐 online (MP slice B): the move clock + SFM4's take-back button. Colour and opacity only — every box is placed
   once by sfRelayout (locked layout). The bar wears the colour of the seat ON the clock: yours, else the rival hue. ── */
.sf-clkbar { overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--sf-line) 70%, transparent); opacity: 0; transition: opacity .2s; pointer-events: none; }
.sf-clkbar[data-on="1"] { opacity: 1; }
.sf-clkf { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--sf-rival); transition: width .25s linear; }
.sf-clkbar[data-mine="1"] .sf-clkf { background: var(--sf-you); }
.sf-clkbar[data-low="1"] .sf-clkf { background: var(--sf-warn); }
.sf-clk { font: 700 12px/40px var(--sf-mono); letter-spacing: .04em; color: var(--sf-dim); font-variant-numeric: tabular-nums; }
.sf-clk[data-mine="1"] { color: var(--sf-txt); }
.sf-clk[data-low="1"] { color: var(--sf-warn); }
.sf-reclaim { margin: 0; padding: 0 6px; border-radius: var(--sf-cr); border: 2px solid var(--sf-txt); background: var(--sf-btn); color: var(--sf-btnTxt); font: var(--sf-wt) 14px/1.1 var(--sf-font); text-transform: var(--sf-caps); cursor: pointer; z-index: 6; transition: filter .12s, transform .08s; }
.sf-reclaim[data-show="0"] { visibility: hidden; }
.sf-reclaim:disabled { opacity: .5; cursor: progress; }
.sf-reclaim:not(:disabled):active { transform: translateY(1px); filter: brightness(.86); }
.sf-root[data-lay="phone"] .sf-reclaim { font-size: 11.5px; white-space: normal; }
@media (prefers-reduced-motion: reduce) { .sf-clkf { transition: none; } }

/* ── the rules card reads for the table you are at (owner 2026-09-26): .sf-r2 = 2 players only, .sf-r3 = 3 only ── */
#scuffle-rules-overlay:not([data-players="3"]) .sf-r3, #scuffle-rules-overlay[data-players="3"] .sf-r2 { display: none; }

/* ── end screen rows ── */
.sf-endrows { display: flex; flex-direction: column; gap: 6px; }
.sf-endrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.sf-endrow[data-win="1"] { box-shadow: inset 0 0 0 2px #ffd166; }
.sf-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 70px; }
.sf-endnm .sf-shape { width: 12px; height: 12px; }
.sf-endst { flex: 1; font-size: 12.5px; opacity: .75; }
.sf-endsc { font-weight: 800; }
.sf-endnote { margin-top: 8px; font-size: 12px; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .sf-impact, .sf-banner[data-on="1"], .sf-cap-fade { animation: none; }
}

/* ── phone ── */
@media (max-width: 999px) {
  #scuffle-game-screen.sf-playing .wrap { padding: 0 2px; max-width: none; }
  #scuffle-game-screen.sf-playing .topbar { display: none; }
  #scuffle-game-screen.sf-playing.sf-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 top margin collapses through the screen div). */
  #scuffle-game-screen.sf-playing:not(.sf-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
  .sf-root { border-radius: 14px; }
}

/* ── desktop: the design box (the mock's 1280 × 637 less its 84px chat strip) ── */
@media (min-width: 1000px) {
  #scuffle-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .sf-root {
    width: 1280px; height: 553px; border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .sf-pillt { font-size: 12.5px; line-height: 28px; }
  .sf-count { font-size: 14.5px; line-height: 40px; text-align: center; }
  .sf-name { font-size: 15px; line-height: 20px; }
  #sf-yname { font-size: 16px; line-height: 22px; }
  .sf-sub { font-size: 12px; line-height: 16px; }
  .sf-plab, .sf-flab { font-size: 9.5px; }
  .sf-ptitle { font-size: 10px; line-height: 14px; }
  .sf-phead { font-size: 15.5px; line-height: 24px; }
  .sf-psub { font-size: 12.5px; line-height: 18px; }
  .sf-fa { line-height: 18px; }
  .sf-fb { font-size: 11.5px; line-height: 16px; }
  .sf-fn { font-size: 10.5px; line-height: 18px; }
  .sf-banner { min-width: 330px; }
}