/* frontend/sandcastles.css — SANDCASTLES (id `sandcastles`, prefix `sx`) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Skyline precedent.
 * ⛔ `sx-flip-in`, `sx-flip-out`, `sx-fold`, `sx-unfold` belong to screen-transition.js (style.css) — never reuse them.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The SHELL and every panel read the player's board scheme (GameTheme's --pgr-* tokens), Arcade through `gm-arcade` on
 * the screen. The BEACH ART is Design's (Sandcastles.dc.html L17–60: dusk wet sand, pale towers, buckets) per scheme.
 * PLAYER colours are NOT here: sandcastles.js writes --sx-p0…2 from frontend/player-colours.js (the ONE source a later
 * Settings colourblind mode feeds). Crabs keep Design's SHAPES + symbols (● round · ■ square · ◆ diamond) — house rule 5.
 * The THREAT RING is --sx-ring = SX_RING (sandcastles.js), a colour no seat takes (SC-F7). Towers are NEUTRAL: pale sand
 * + an ivory die slot in the viewer's equipped skin; the height also reads from the slabs and (SC-M2) the height chip.
 *
 * ── Geometry is the mock's (the FEEL SPEC in docs/design/batch16-sandcastles-mock-review.md) ─────────
 * DESKTOP: ONE design box 1280 × 553 (the mock's 637 less its 84 px chat strip), scaled as a unit by BoardFit. Pad 12,
 * gap 8: the left column 300 (header 34 · player rows 64 · the match block), the BEACH a square = the box height − 24
 * (529; 569 when the chat collapses — the root declares 593), the right column (banner 112 · undo 52 · the log).
 * PHONE (384 × 812, survives 360 × 740): one column, unscaled — header 28 · rows 36 · the BEACH (width-limited) ·
 * banner + UNDO side by side · the log takes what's left. Tight (< 780 tall): pad 8, header 26, rows 34.
 * The beach is 5.6 cells square (a 0.3-cell coordinate gutter): --c = one cell, from container units.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every slot is at its final size from the first frame. Feedback changes colour, glow or a ≤ 3% translate — never size
 * or spacing. UNDO disables (dashed ⊘ / hatched), never hides. Callouts, the wave and the score card are SCREEN-LEVEL
 * siblings in `.sx-layer` (never inside the BoardFit target, never position:fixed).
 */

#sandcastles-game-screen, .sx-root, .sx-layer {
  --sx-bg: var(--pgr-bg, radial-gradient(120% 100% at 50% -10%, #55405a 0%, #2f2536 52%, #1c1722 100%));
  --sx-panel: var(--pgr-panel, rgba(255, 236, 222, .08));
  --sx-panel2: var(--pgr-seat, rgba(255, 236, 222, .045));
  --sx-line: var(--pgr-line, rgba(255, 236, 222, .2));
  --sx-txt: var(--pgr-txt, #f7efe6); --sx-dim: var(--pgr-dim, rgba(247, 239, 230, .7));
  --sx-bgInk: var(--pgr-solid, #231a1c);
  --sx-font: var(--pgr-font, 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif);
  --sx-pill: color-mix(in oklch, var(--sx-txt) 10%, transparent);
  --sx-hatch: repeating-linear-gradient(135deg, color-mix(in oklch, var(--sx-txt) 13%, transparent) 0 3px, color-mix(in oklch, var(--sx-txt) 3%, transparent) 3px 7px);
  /* the beach (Design classic) */
  --sx-beachBg: radial-gradient(90% 70% at 30% 8%, rgba(255, 196, 160, .13), transparent 60%), repeating-linear-gradient(170deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px), oklch(.34 .03 50);
  --sx-wetHi: oklch(.39 .032 55); --sx-wetLine: rgba(20, 10, 5, .3); --sx-label: rgba(247, 239, 230, .62);
  --sx-t1: oklch(.7 .055 75); --sx-t2: oklch(.8 .05 80); --sx-t3: oklch(.9 .035 85); --sx-tEdge: oklch(.47 .05 58); --sx-tLine: rgba(70, 45, 20, .38);
  --sx-tSoft: 0 calc(var(--c, 90px) * .07) calc(var(--c, 90px) * .07) rgba(0, 0, 0, .3);
  --sx-bucket: oklch(.7 .02 250); --sx-bucketBand: oklch(.5 .03 250); --sx-bucketRim: oklch(.87 .015 250);
  --sx-ink: #241a1d; --sx-eye: #fffaf2;
  --sx-step: oklch(.86 .12 185); --sx-stepFill: oklch(.86 .12 185 / .14); --sx-stepFillHi: oklch(.86 .12 185 / .34);
  --sx-build: #fff3df; --sx-buildFill: rgba(255, 243, 223, .1); --sx-buildFillHi: rgba(255, 243, 223, .3);
  --sx-sel: #fff6e8; --sx-ok: oklch(.86 .12 185); --sx-okInk: #0e2628; --sx-okGlow: oklch(.86 .12 185 / .45);
  --sx-activeGlow: rgba(255, 236, 222, .16);
  --sx-sea: oklch(.58 .08 215 / .8); --sx-foam: rgba(246, 252, 255, .94); --sx-callBg: #fffaf2; --sx-callInk: #241a1d;
  --sx-radS: 6px; --sx-radM: 10px; --sx-radL: 16px; --sx-bd: 1px; --sx-bdBtn: 2px;
  --sx-shadow: 0 4px 14px rgba(0, 0, 0, .35); --sx-btnShadow: 0 3px 0 rgba(0, 0, 0, .3);
  --sx-rCell: 14%; --sx-rT: 20%;
  /* player colours — overwritten per seat by sandcastles.js from PlayerColours (pre-paint fallback only) */
  --sx-p0: #4fe07c; --sx-p1: #ff5c5c; --sx-p2: #ffd83d; --sx-ring: #ff6ad5;
  --sx-ringGlow: color-mix(in srgb, var(--sx-ring) 60%, transparent);
}
#sandcastles-game-screen.gm-arcade, #sandcastles-game-screen.gm-arcade .sx-root, #sandcastles-game-screen.gm-arcade .sx-layer {
  --sx-beachBg: radial-gradient(80% 60% at 70% 0%, rgba(120, 180, 255, .18), transparent 60%), repeating-linear-gradient(160deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 16px), oklch(.3 .05 268);
  --sx-wetHi: oklch(.35 .06 268); --sx-wetLine: rgba(140, 200, 255, .2); --sx-label: rgba(242, 246, 255, .64);
  --sx-t1: oklch(.7 .06 255); --sx-t2: oklch(.8 .05 252); --sx-t3: oklch(.91 .035 250); --sx-tEdge: oklch(.42 .08 268); --sx-tLine: rgba(20, 30, 80, .42);
  --sx-tSoft: 0 calc(var(--c, 90px) * .07) calc(var(--c, 90px) * .09) rgba(0, 0, 0, .45);
  --sx-bucket: oklch(.78 .02 270); --sx-bucketBand: oklch(.55 .04 270); --sx-bucketRim: oklch(.93 .01 270);
  --sx-ink: #0a0d24; --sx-eye: #ffffff;
  --sx-step: oklch(.85 .19 150); --sx-stepFill: oklch(.85 .19 150 / .14); --sx-stepFillHi: oklch(.85 .19 150 / .34);
  --sx-build: #ffffff; --sx-buildFill: rgba(255, 255, 255, .1); --sx-buildFillHi: rgba(255, 255, 255, .28);
  --sx-sel: oklch(.95 .08 200); --sx-ok: oklch(.85 .19 150); --sx-okInk: #04200f; --sx-okGlow: oklch(.85 .19 150 / .5);
  --sx-activeGlow: oklch(.84 .14 200 / .25);
  --sx-sea: oklch(.55 .14 240 / .8); --sx-foam: rgba(230, 250, 255, .96); --sx-callBg: #ffffff; --sx-callInk: #0a0d24;
  --sx-radS: 8px; --sx-radM: 14px; --sx-radL: 22px; --sx-bd: 2px;
  --sx-shadow: 0 8px 24px rgba(0, 0, 0, .5); --sx-btnShadow: 0 4px 0 rgba(0, 0, 0, .4);
  --sx-rCell: 18%; --sx-rT: 24%;
}

/* ── keyframes. ⛔ pops animate the `scale` / `translate` PROPERTIES, never `transform` (predicely_scale_keyframe_trap) ── */
@keyframes sx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7%; } }
@keyframes sx-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--sx-ringGlow); opacity: .75; } 50% { box-shadow: 0 0 calc(var(--c) * .2) calc(var(--c) * .04) var(--sx-ringGlow); opacity: 1; } }
@keyframes sx-fork { 0%, 100% { box-shadow: 0 0 0 0 var(--sx-ringGlow); scale: .96; } 50% { box-shadow: 0 0 calc(var(--c) * .32) calc(var(--c) * .08) var(--sx-ringGlow); scale: 1.04; } }
@keyframes sx-drop { 0% { translate: 0 -150%; opacity: 0; } 25% { opacity: 1; } 70% { translate: 0 0; } 82% { translate: 0 4%; scale: 1.08 .84; } 100% { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes sx-thud { 0%, 65% { scale: .4; opacity: 0; } 75% { opacity: .95; } 100% { scale: 1.5; opacity: 0; } }
@keyframes sx-scoop { 0% { translate: 0 -160%; scale: .6; opacity: 0; } 30% { opacity: 1; } 70% { translate: 0 0; scale: 1; opacity: 1; } 100% { translate: 0 10%; scale: 1.3 .3; opacity: 0; } }
@keyframes sx-rise { 0%, 60% { scale: .7; opacity: .2; } 85% { scale: 1.06; opacity: 1; } 100% { scale: 1; } }
@keyframes sx-hop { 0% { translate: var(--sx-hx) var(--sx-hy); } 45% { translate: calc(var(--sx-hx) * .5) calc(var(--sx-hy) * .5 - 45%); } 100% { translate: 0 0; } }
@keyframes sx-placein { 0% { translate: 0 -70%; opacity: 0; } 60% { translate: 0 4%; opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
@keyframes sx-flagpop { 0% { scale: 1 0; } 55% { scale: 1 1.1; } 100% { scale: 1 1; } }
@keyframes sx-sweep { 0% { translate: -110% 0; } 100% { translate: 460% 0; } }
@keyframes sx-callpop { 0% { scale: .6; opacity: 0; } 8% { scale: 1.08; opacity: 1; } 14%, 88% { scale: 1; opacity: 1; } 100% { scale: 1; opacity: 0; } }
@keyframes sx-cardin { 0% { opacity: 0; translate: 0 10px; } 100% { opacity: 1; translate: 0 0; } }

/* ── setup card (on the screen's palette) ───────────────────────────────── */
#sandcastles-game-screen { background: var(--sx-bg); color: var(--sx-txt); }
#sandcastles-area { position: relative; }
.sx-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--sx-font); background: var(--sx-panel); color: var(--sx-txt); border: 1px solid var(--sx-line); }
.sx-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sx-dim); font-weight: 700; }
.sx-setup-title { margin: 0; font-size: 30px; }
.sx-setup-blurb, .sx-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.sx-setup-hint { color: var(--sx-dim); font-size: 12.5px; }
.sx-setup-row { display: flex; align-items: center; gap: 12px; }
.sx-setup-lab { width: 72px; flex: none; font-weight: 700; font-size: 13px; color: var(--sx-dim); white-space: nowrap; }
.sx-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.sx-opt { min-width: 64px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--sx-line); background: var(--sx-panel2); color: var(--sx-txt); font: 700 14px var(--sx-font); cursor: pointer; transition: box-shadow .15s, transform .12s; }
.sx-opt[data-on="1"] { background: var(--sx-ok); color: var(--sx-okInk); border-color: transparent; }
.sx-opt:active { transform: translateY(1px); }
.sx-start { align-self: flex-start; margin-top: 6px; height: 46px; padding: 0 26px; border-radius: 12px; border: 1px solid var(--sx-line); background: var(--pgr-btn, linear-gradient(180deg, #4a3a4e, #35293a)); color: var(--pgr-btnTxt, #f7efe6); font: 800 16px var(--sx-font); cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); transition: filter .12s, transform .12s; }
.sx-start:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
@media (hover: hover) { .sx-start:hover { filter: brightness(1.12); } .sx-opt:hover { box-shadow: 0 0 0 2px var(--sx-txt); } }
/* the end screen's rows */
.sx-endrows { display: flex; flex-direction: column; gap: 6px; }
.sx-endrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; padding: 7px 12px; border-radius: 10px; border: 1.5px solid rgba(127, 127, 127, .35); }
.sx-endrow[data-head="1"] { border: none; padding: 0 12px; font-size: 11px; letter-spacing: .12em; opacity: .7; font-weight: 800; }
.sx-endrow[data-win="1"] { font-weight: 800; border-color: currentColor; }
.sx-endrow > span:last-child { text-align: right; }
.sx-endnote { margin-top: 10px; font-size: 12px; opacity: .7; }

/* ── the root ───────────────────────────────────────────────────────────── */
.sx-root {
  position: relative; box-sizing: border-box; overflow: hidden; display: flex;
  background: var(--sx-bg); color: var(--sx-txt); font-family: var(--sx-font);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.sx-root *, .sx-root *::before, .sx-root *::after, .sx-layer *, .sx-layer *::before, .sx-layer *::after { box-sizing: border-box; }
.sx-root button, .sx-layer button { font-family: inherit; margin: 0; padding: 0; color: inherit; }
.sx-root i, .sx-root em, .sx-root b { font-style: normal; }

/* left column: header, player rows, the match block */
.sx-side { flex: none; width: var(--sideW); display: flex; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; }
.sx-hdr { flex: none; height: var(--hdrH); display: flex; gap: var(--gap); min-width: 0; }
.sx-menu { display: none; flex: none; width: var(--hdrH); height: 100%; border-radius: var(--sx-radM); background: var(--sx-pill); border: var(--sx-bd) solid var(--sx-line); font-size: 15px; line-height: 1; cursor: pointer; opacity: .8; }
.sx-turnp { flex: none; width: var(--turnW); height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--sx-radM); background: var(--sx-pill); border: var(--sx-bd) solid var(--sx-line); font-size: var(--metaFs); font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.sx-turnp b { font-size: calc(var(--metaFs) + 4px); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: left; }
.sx-matchp { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: var(--sx-radM); background: var(--sx-panel); border: var(--sx-bd) solid var(--sx-line); font-size: var(--metaFs); font-weight: 800; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sx-players { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: var(--pH); gap: var(--pGap); }
.sx-pr { position: relative; display: grid; grid-template-columns: var(--avS) minmax(0, 1fr) var(--chipS) var(--tagW); align-items: center; gap: var(--rowGap); padding: 0 var(--rowPad); border-radius: var(--sx-radM); background: var(--sx-panel2); border: 2px solid var(--sx-line); min-width: 0; transition: box-shadow .2s, background .2s, border-color .2s; }
.sx-pr[data-on="0"] { display: none; }
.sx-pr[data-st="now"] { background: var(--sx-panel); border-color: var(--sx-txt); box-shadow: 0 0 0 3px var(--sx-activeGlow); }
.sx-pr[data-st="out"] { background: var(--sx-hatch); opacity: .62; }
.sx-pr[data-st="out"] .sx-pname { text-decoration: line-through; }
.sx-pr[data-st="out"] .sx-pchip { filter: grayscale(1); }
.sx-av { width: var(--avS); height: var(--avS); border-radius: 50%; background: var(--sx-pill); border: var(--sx-bd) dashed var(--sx-line); display: flex; align-items: center; justify-content: center; font-size: calc(var(--avS) * .4); font-weight: 800; color: var(--sx-dim); }
.sx-pnb { display: flex; flex-direction: var(--nbDir); align-items: var(--nbAlign); gap: 1px 8px; min-width: 0; overflow: hidden; }
.sx-pname { font-size: var(--nameFs); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-psub, .sx-pturns { font-size: var(--subFs); color: var(--sx-dim); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sx-psub:empty { display: none; }
/* the crab chip: Design's shape, ink rim + the seat colour + the symbol (house rule 5) */
.sx-pchip { position: relative; width: var(--chipS); height: var(--chipS); }
.sx-pchip i { position: absolute; inset: 6%; background: var(--sx-ink); }
.sx-pchip i::after { content: ''; position: absolute; inset: 13%; background: var(--sx-pc); border-radius: inherit; clip-path: inherit; }
.sx-pchip span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--chipS) * .36); color: var(--sx-ink); font-family: Arial, sans-serif; line-height: 1; }
.sx-pchip[data-v="0"] { --sx-pc: var(--sx-p0); } .sx-pchip[data-v="1"] { --sx-pc: var(--sx-p1); } .sx-pchip[data-v="2"] { --sx-pc: var(--sx-p2); }
.sx-pchip[data-v="0"] i { border-radius: 50%; }
.sx-pchip[data-v="1"] i { border-radius: 20%; }
.sx-pchip[data-v="2"] i { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sx-pchip[data-v="2"] i::after { inset: 17%; }
.sx-tag { height: calc(var(--tagFs) * 2.5); display: flex; align-items: center; justify-content: center; border-radius: var(--sx-radS); font-size: var(--tagFs); font-weight: 800; letter-spacing: .08em; white-space: nowrap; overflow: hidden; background: transparent; color: var(--sx-dim); border: var(--sx-bdBtn) dashed var(--sx-line); }
.sx-tag[data-st="now"] { background: var(--sx-txt); color: var(--sx-bgInk); border: var(--sx-bdBtn) solid var(--sx-txt); }
.sx-tag[data-st="win"] { background: var(--sx-ok); color: var(--sx-okInk); border: var(--sx-bdBtn) solid var(--sx-ok); }
.sx-tag[data-st="out"] { background: var(--sx-pill); color: var(--sx-dim); border: var(--sx-bdBtn) solid var(--sx-line); }
.sx-mblk { display: var(--matchD); flex: 1 1 0; min-height: 0; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--sx-radM); background: var(--sx-panel2); border: var(--sx-bd) solid var(--sx-line); overflow: hidden; }
.sx-mtitle { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--sx-dim); }
/* ⭐ LOCKED LAYOUT: the border is 2 px in every state — "now" changes its colour, "todo" its style (the mock's 1 → 2 px moved the slot below it) */
.sx-mslot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border-radius: var(--sx-radS); border: 2px solid var(--sx-line); background: var(--sx-panel2); }
.sx-mslot[data-st="now"] { border-color: var(--sx-txt); }
.sx-mslot[data-st="todo"] { border-style: dashed; }
.sx-ml { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--sx-dim); }
.sx-mw { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-mr { font-size: 12px; font-weight: 700; color: var(--sx-dim); white-space: nowrap; text-align: right; }
.sx-mnote { margin-top: auto; font-size: 11px; color: var(--sx-dim); line-height: 1.45; }

/* ── the beach ──────────────────────────────────────────────────────────── */
.sx-holder { container-type: size; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* isolation: the crabs' row-depth z-index (100–140) and the flag layer (300) must stay INSIDE the beach —
   unisolated they out-stacked the end card (.ges-overlay, 90) and the callout layer (20): phone playtest .662 */
.sx-beach { position: relative; flex: none; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); --c: calc(min(100cqw, 100cqh) / 5.6); border-radius: var(--sx-radL); background: var(--sx-beachBg); box-shadow: var(--sx-shadow); isolation: isolate; }
.sx-lbl { position: absolute; display: flex; align-items: center; justify-content: center; font-size: calc(var(--c) * .17); font-weight: 800; color: var(--sx-label); pointer-events: none; }
.sx-cell { position: absolute; cursor: default; }
.sx-root[data-my="1"] .sx-cell { cursor: not-allowed; }
.sx-root[data-my="1"] .sx-cell:not([data-lit=""]) { cursor: pointer; }
.sx-wet { position: absolute; inset: 2.5%; border-radius: var(--sx-rCell); background: var(--sx-wetHi); box-shadow: inset 0 0 0 1px var(--sx-wetLine); }
/* a slab per level — each paler, its own riser shadow (Design: inset 7 + 9 per level, lifted 1.6% per level) */
.sx-slab { display: none; position: absolute; border-radius: var(--sx-rT); border: calc(var(--c) * .014) solid var(--sx-tLine); box-shadow: 0 calc(var(--c) * .045) 0 var(--sx-tEdge), var(--sx-tSoft); }
.sx-slab[data-k="1"] { left: 7%; right: 7%; top: 5.4%; bottom: 8.6%; background: var(--sx-t1); }
.sx-slab[data-k="2"] { left: 16%; right: 16%; top: 12.8%; bottom: 19.2%; background: var(--sx-t2); }
.sx-slab[data-k="3"] { left: 25%; right: 25%; top: 20.2%; bottom: 29.8%; background: var(--sx-t3); }
.sx-cell[data-h="1"] .sx-slab[data-k="1"], .sx-cell[data-h="2"] .sx-slab[data-k="1"], .sx-cell[data-h="2"] .sx-slab[data-k="2"],
.sx-cell[data-h="3"] .sx-slab { display: block; }
/* the die slot: NEUTRAL, 38% of the cell, the face = the height (DieRenderer, the equipped skin); meaning goes AROUND it */
.sx-die { position: absolute; left: 31%; right: 31%; z-index: 2; display: none; align-items: center; justify-content: center; }
.sx-die[data-on="1"] { display: flex; }
.sx-cell[data-h="1"] .sx-die { top: 29.4%; bottom: 32.6%; }
.sx-cell[data-h="2"] .sx-die { top: 27.8%; bottom: 34.2%; }
.sx-cell[data-h="3"] .sx-die { top: 26.2%; bottom: 35.8%; }
.sx-dfb { font-size: calc(var(--c) * .2); color: var(--sx-ink); background: #fffaf0; border-radius: 20%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* the bucket on a capped 3 (and its ghost on a CAP build) */
.sx-bucket { display: none; position: absolute; left: 19%; top: 3.2%; width: 62%; height: 70%; z-index: 3; }
.sx-bucket[data-on="1"] { display: block; }
.sx-bucket[data-on="ghost"] { display: block; opacity: .45; }
.sx-bh { position: absolute; left: 24%; top: 0; width: 52%; height: 34%; border: calc(var(--c) * .03) solid var(--sx-ink); border-bottom: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.sx-bo { position: absolute; left: 6%; top: 14%; width: 88%; height: 80%; background: var(--sx-ink); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.sx-bi { position: absolute; left: 11%; top: 18%; width: 78%; height: 74%; background: linear-gradient(var(--sx-bucket) 0 42%, var(--sx-bucketBand) 42% 58%, var(--sx-bucket) 58%); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.sx-brim { position: absolute; left: 0; bottom: 0; width: 100%; height: 17%; background: var(--sx-bucketRim); border: calc(var(--c) * .025) solid var(--sx-ink); border-radius: 40%; }
/* threat rings: own = solid, pulsing; a FORK = both in sync, faster + wider; an Easy bot's = dashed + its symbol (SC-M3) */
.sx-ring { display: none; position: absolute; inset: -1%; border-radius: 50%; border: calc(var(--c) * .055) solid var(--sx-ring); z-index: 5; pointer-events: none; }
.sx-ring[data-on="own"] { display: block; animation: sx-pulse 1400ms ease-in-out infinite; }
.sx-ring[data-on="fork"] { display: block; animation: sx-fork 900ms ease-in-out infinite; }
.sx-ring[data-on="rival"] { display: block; border-style: dashed; animation: sx-pulse 1400ms ease-in-out infinite; }
.sx-rbadge { display: none; position: absolute; left: -4%; top: -4%; width: calc(var(--c) * .28); height: calc(var(--c) * .28); border-radius: 999px; background: var(--sx-ring); color: var(--sx-ink); border: calc(var(--c) * .015) solid var(--sx-ink); font-size: calc(var(--c) * .15); align-items: center; justify-content: center; z-index: 7; line-height: 1; font-family: Arial, sans-serif; pointer-events: none; }
.sx-rbadge[data-on="1"] { display: flex; }
/* lit cells: a STEP solid (teal), a BUILD dashed (cream), a placement solid; hover glows, press sinks — never a size change */
.sx-ov { display: none; position: absolute; inset: 3%; border-radius: var(--sx-rCell); z-index: 4; transition: box-shadow .12s, background .12s, translate .08s, filter .08s; }
.sx-cell[data-lit="step"] .sx-ov, .sx-cell[data-lit="place"] .sx-ov { display: block; border: calc(var(--c) * .05) solid var(--sx-step); background: var(--sx-stepFill); }
.sx-cell[data-lit="build"] .sx-ov { display: block; border: calc(var(--c) * .05) dashed var(--sx-build); background: var(--sx-buildFill); }
@media (hover: hover) {
  .sx-cell[data-lit="step"]:hover .sx-ov, .sx-cell[data-lit="place"]:hover .sx-ov { background: var(--sx-stepFillHi); box-shadow: 0 0 calc(var(--c) * .18) var(--sx-step); }
  .sx-cell[data-lit="build"]:hover .sx-ov { background: var(--sx-buildFillHi); box-shadow: 0 0 calc(var(--c) * .18) var(--sx-build); }
  .sx-cell[data-lit="build"]:hover .sx-bucket[data-on="ghost"] { opacity: .8; }
  /* illegal hover on my turn: ⊘ */
  .sx-root[data-my="1"] .sx-cell[data-lit=""]:hover .sx-nope { display: flex; }
}
.sx-cell:not([data-lit=""]):active .sx-ov { translate: 0 3%; filter: brightness(.78); }
.sx-ghost { display: none; position: absolute; left: 20%; top: 14%; width: 60%; height: 60%; border: calc(var(--c) * .03) dashed var(--sx-txt); border-radius: 50%; opacity: .6; z-index: 7; pointer-events: none; }
.sx-ghost[data-on="1"] { display: block; }
.sx-badge { position: absolute; right: 4%; top: 4%; min-width: calc(var(--c) * .3); height: calc(var(--c) * .24); padding: 0 calc(var(--c) * .04); border-radius: 999px; background: var(--sx-step); color: var(--sx-ink); font-size: calc(var(--c) * .14); font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 6; line-height: 1; font-family: Arial, sans-serif; border: calc(var(--c) * .012) solid var(--sx-ink); pointer-events: none; }
.sx-badge:empty { display: none; }
.sx-badge[data-kind="build"] { background: var(--sx-build); }
.sx-nope { display: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: calc(var(--c) * .34); height: calc(var(--c) * .34); border-radius: 999px; background: var(--sx-callBg); color: var(--sx-callInk); font-size: calc(var(--c) * .22); font-weight: 800; align-items: center; justify-content: center; z-index: 6; line-height: 1; opacity: .85; pointer-events: none; }
/* ⛔ SC-M2 — the HEIGHT CHIP: neutral (ink on pale sand), bottom-left, 1–3 bars + the digit; ≥ 14 px at 360 × 740 and
   clear of the crab box — the crab element ends at 74% of its cell, the chip starts at 74.5% (sandcastles-board.test.html MEASURES both). Only on a tower cell with a crab on it. */
.sx-hchip { display: none; position: absolute; left: 2.5%; bottom: 1.5%; height: 24%; min-width: 24%; padding: 0 calc(var(--c) * .035); gap: calc(var(--c) * .025); align-items: center; justify-content: center; border-radius: calc(var(--c) * .06); background: var(--sx-t3); border: calc(var(--c) * .014) solid var(--sx-ink); color: var(--sx-ink); z-index: 8; pointer-events: none; line-height: 1; }
.sx-hchip[data-n="1"], .sx-hchip[data-n="2"], .sx-hchip[data-n="3"] { display: flex; }
.sx-hbars { display: flex; flex-direction: column-reverse; gap: calc(var(--c) * .014); }
.sx-hbars b { display: block; width: calc(var(--c) * .075); height: calc(var(--c) * .028); border-radius: 1px; background: var(--sx-ink); opacity: .22; }
.sx-hchip[data-n="1"] .sx-hbars b:nth-child(-n+1), .sx-hchip[data-n="2"] .sx-hbars b:nth-child(-n+2), .sx-hchip[data-n="3"] .sx-hbars b:nth-child(-n+3) { opacity: 1; }
.sx-hchip em { font-size: calc(var(--c) * .17); font-weight: 800; font-family: Arial, sans-serif; }
/* one-shot flourishes on a cell: the scoop lands + the top slab pops; the bucket drops + squash + the foam ring */
.sx-cell.sx-scooped[data-h="1"] .sx-slab[data-k="1"], .sx-cell.sx-scooped[data-h="2"] .sx-slab[data-k="2"], .sx-cell.sx-scooped[data-h="3"] .sx-slab[data-k="3"] { animation: sx-rise 500ms ease-out 1 both; }
.sx-cell.sx-scooped::after { content: ''; position: absolute; left: 32%; top: 24%; width: 36%; height: 26%; border-radius: 50% 50% 42% 42%; background: var(--sx-t3); border: calc(var(--c) * .016) solid var(--sx-tLine); z-index: 9; pointer-events: none; animation: sx-scoop 500ms ease-in 1 both; }
.sx-cell.sx-dropped .sx-bucket { animation: sx-drop 520ms cubic-bezier(.5, 0, .6, 1) 1 both; }
.sx-cell.sx-dropped::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; border: calc(var(--c) * .05) solid var(--sx-foam); z-index: 9; pointer-events: none; animation: sx-thud 520ms ease-out 1 both; }
.sx-fxl { position: absolute; inset: 0; pointer-events: none; z-index: 300; }
.sx-flag { position: absolute; transform-origin: 68% 30%; animation: sx-flagpop 600ms ease-out 1 both; }
.sx-fpole { position: absolute; left: 66%; top: -26%; width: 5%; height: 62%; background: var(--sx-ink); }
.sx-fink { position: absolute; left: 70%; top: -26%; width: 30%; height: 28%; background: var(--sx-ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sx-fcol { position: absolute; left: 70%; top: -21%; width: 22%; height: 18%; background: var(--sx-pc); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sx-beach[data-wash="1"] .sx-cell { transition: none; }

/* ── the crabs (Design's art, L208–233; SHAPE per seat: ● round · ■ square · ◆ diamond) ── */
.sx-crab { position: absolute; width: 10.714%; height: 10.714%; display: none; cursor: default; }
.sx-crab[data-on="1"] { display: block; }
.sx-crab[data-v="0"] { --sx-pc: var(--sx-p0); } .sx-crab[data-v="1"] { --sx-pc: var(--sx-p1); } .sx-crab[data-v="2"] { --sx-pc: var(--sx-p2); }
.sx-crab[data-mine="1"] { cursor: pointer; }
.sx-root[data-my="1"] .sx-crab[data-mine="0"] { cursor: not-allowed; }
.sx-crab.sx-hopping { animation: sx-hop 450ms ease-out 1 both; }
.sx-crab.sx-placed { animation: sx-placein 450ms ease-out 1 both; }
.sx-cshadow { position: absolute; left: 12%; top: 76%; width: 76%; height: 24%; border-radius: 50%; background: rgba(0, 0, 0, .4); filter: blur(2px); }
.sx-crab[data-sel="1"] .sx-cshadow { background: rgba(0, 0, 0, .2); }
.sx-clift { position: absolute; inset: 0; transform: translateY(calc(var(--sx-lift, 0) * -1%)); transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), filter .12s; }
.sx-crab[data-sel="1"] .sx-clift { filter: drop-shadow(0 0 calc(var(--c) * .06) var(--sx-sel)) drop-shadow(0 0 calc(var(--c) * .02) var(--sx-sel)); }
@media (hover: hover) {
  .sx-crab[data-mine="1"][data-sel="0"]:hover .sx-clift { filter: drop-shadow(0 0 calc(var(--c) * .07) var(--sx-sel)); }
  .sx-root[data-my="1"] .sx-crab[data-mine="0"]:hover .sx-cbadge { display: flex; }
}
.sx-crab[data-mine="1"]:active .sx-clift { filter: brightness(.85) drop-shadow(0 0 calc(var(--c) * .05) var(--sx-sel)); }
.sx-cin { position: absolute; inset: 0; }
.sx-crab[data-sel="1"] .sx-cin { animation: sx-bob 1.6s ease-in-out infinite; }
.sx-leg { position: absolute; width: 22%; height: 6%; background: var(--sx-ink); border-radius: 2px; }
.sx-l1 { left: 0; top: 50%; transform: rotate(22deg); transform-origin: 100% 50%; }
.sx-l2 { left: -2%; top: 62%; }
.sx-l3 { left: 0; top: 74%; transform: rotate(-22deg); transform-origin: 100% 50%; }
.sx-r1 { right: 0; top: 50%; transform: rotate(-22deg); transform-origin: 0 50%; }
.sx-r2 { right: -2%; top: 62%; }
.sx-r3 { right: 0; top: 74%; transform: rotate(22deg); transform-origin: 0 50%; }
.sx-arm { position: absolute; top: 30%; width: 15%; height: 7%; background: var(--sx-ink); }
.sx-al { left: 13%; transform: rotate(38deg); } .sx-ar { right: 13%; transform: rotate(-38deg); }
.sx-claw, .sx-clawi { position: absolute; border-radius: 50%; }
.sx-cl { left: -6%; top: 2%; width: 32%; height: 32%; background: conic-gradient(from 8deg, transparent 0 58deg, var(--sx-ink) 58deg); }
.sx-cli { left: -2%; top: 6%; width: 24%; height: 24%; background: conic-gradient(from 8deg, transparent 0 58deg, var(--sx-pc) 58deg); }
.sx-cr { right: -6%; top: 2%; width: 32%; height: 32%; background: conic-gradient(from -66deg, transparent 0 58deg, var(--sx-ink) 58deg); }
.sx-cri { right: -2%; top: 6%; width: 24%; height: 24%; background: conic-gradient(from -66deg, transparent 0 58deg, var(--sx-pc) 58deg); }
.sx-stalk { position: absolute; top: 12%; width: 6%; height: 20%; background: var(--sx-ink); }
.sx-sl { left: 36%; } .sx-sr { left: 58%; }
.sx-body { position: absolute; left: 16%; top: 28%; width: 68%; height: 58%; background: var(--sx-ink); }
.sx-bodyi { position: absolute; inset: 8%; background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .4), transparent 46%), var(--sx-pc); }
.sx-crab[data-v="0"] .sx-body, .sx-crab[data-v="0"] .sx-bodyi { border-radius: 50%; }
.sx-crab[data-v="1"] .sx-body, .sx-crab[data-v="1"] .sx-bodyi { border-radius: 20%; }
.sx-crab[data-v="2"] .sx-body, .sx-crab[data-v="2"] .sx-bodyi { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sx-crab[data-v="2"] .sx-bodyi { inset: 11%; }
.sx-csym { position: absolute; left: 16%; top: 30%; width: 68%; height: 58%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--c) * .17); color: var(--sx-ink); font-family: Arial, sans-serif; line-height: 1; }
.sx-eye { position: absolute; top: 0; width: 22%; height: 22%; border-radius: 50%; background: var(--sx-eye); border: calc(var(--c) * .018) solid var(--sx-ink); overflow: hidden; }
.sx-el { left: 27%; } .sx-er { left: 51%; }
.sx-pupil { position: absolute; left: 30%; top: 28%; width: 42%; height: 42%; border-radius: 50%; background: var(--sx-ink); }
/* SC-M7: waiting crabs half-close their eyes (a colourblind-safe turn cue); SC-F6: a 2p stuck loser's are SHUT */
.sx-lid { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 56%; background: var(--sx-pc); border-bottom: calc(var(--c) * .018) solid var(--sx-ink); }
.sx-crab[data-eyes="sleepy"] .sx-lid { display: block; }
.sx-crab[data-eyes="shut"] .sx-lid { display: block; height: 100%; }
.sx-cbadge { display: none; position: absolute; right: -10%; top: -12%; width: calc(var(--c) * .26); height: calc(var(--c) * .26); border-radius: 999px; background: var(--sx-callBg); color: var(--sx-callInk); border: calc(var(--c) * .015) solid var(--sx-ink); font-size: calc(var(--c) * .17); font-weight: 800; align-items: center; justify-content: center; line-height: 1; z-index: 5; }

/* ── the controls: banner + chips, UNDO + hint, the beach log ───────────── */
.sx-ctrl { flex: 1 1 0; min-width: 0; min-height: var(--ctrlMinH); display: grid; grid-template-areas: var(--ctrlAreas); grid-template-columns: var(--ctrlCols); grid-template-rows: var(--ctrlRows); gap: var(--gap); }
.sx-ban { grid-area: ban; display: flex; flex-direction: var(--banDir); align-items: var(--banAlign); justify-content: center; gap: var(--banGap); padding: var(--banPad); border-radius: var(--sx-radM); background: var(--sx-panel); border: var(--sx-bd) solid var(--sx-line); box-shadow: var(--sx-shadow); min-width: 0; overflow: hidden; }
.sx-bant { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sx-banh { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-bang { flex: none; font-size: var(--banTFs); line-height: 1; }
.sx-bantt { font-size: var(--banTFs); font-weight: 800; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sx-bans { font-size: var(--banSFs); color: var(--sx-dim); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-chips { flex: none; order: var(--chipsOrder); display: flex; flex-direction: var(--chipsDir); gap: 4px; }
.sx-chip { width: var(--chipW); height: var(--chipH); display: flex; align-items: center; justify-content: center; border-radius: var(--sx-radS); font-size: var(--chipFs); font-weight: 800; letter-spacing: .08em; white-space: nowrap; background: transparent; color: var(--sx-dim); border: var(--sx-bdBtn) dashed var(--sx-line); }
.sx-chip[data-st="now"] { background: var(--sx-txt); color: var(--sx-bgInk); border: var(--sx-bdBtn) solid var(--sx-txt); }
.sx-chip[data-st="done"] { color: var(--sx-txt); border: var(--sx-bdBtn) solid var(--sx-line); }
.sx-undor { grid-area: undo; display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-undo { position: relative; flex: none; width: var(--undoW); height: var(--undoH); display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--sx-radM); font-size: var(--undoFs); font-weight: 800; letter-spacing: .06em; white-space: nowrap; transition: box-shadow .12s, transform .08s, filter .12s; }
.sx-undo[data-st="on"] { background: var(--sx-ok); color: var(--sx-okInk); border: var(--sx-bdBtn) solid var(--sx-ok); cursor: pointer; box-shadow: var(--sx-btnShadow); }
.sx-undo[data-st="on"]:active { transform: translateY(2px); filter: brightness(.82); }
@media (hover: hover) { .sx-undo[data-st="on"]:hover { box-shadow: 0 0 0 3px var(--sx-okGlow), 0 0 18px var(--sx-okGlow); } }
.sx-undo[data-st="off"] { background: transparent; color: var(--sx-dim); border: var(--sx-bdBtn) dashed var(--sx-line); cursor: not-allowed; }
.sx-undo[data-st="lock"] { background: var(--sx-hatch); color: var(--sx-dim); border: var(--sx-bdBtn) dashed var(--sx-line); cursor: not-allowed; }
.sx-hint { display: var(--hintD); flex: 1; min-width: 0; font-size: 12px; color: var(--sx-dim); font-weight: 700; line-height: 1.35; }
.sx-feed { grid-area: feed; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: var(--feedPad); border-radius: var(--sx-radM); background: var(--sx-panel2); border: var(--sx-bd) solid var(--sx-line); }
.sx-feedl { flex: none; display: var(--feedLblD); font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--sx-dim); }
.sx-flines { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.sx-fl { flex: none; min-height: calc(var(--feedFs) * 1.35); font-size: var(--feedFs); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--sx-dim); }
.sx-fl[data-age="0"] { font-weight: 800; color: var(--sx-txt); }
.sx-fl[data-on="0"] { visibility: hidden; }

/* ── the SCREEN-LEVEL layer: callouts (SC-F3), the wave, the score card ── */
.sx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; font-family: var(--sx-font); color: var(--sx-txt); overflow: hidden; }
.sx-call { display: none; position: absolute; padding: var(--callPad); border-radius: 999px; background: var(--sx-callBg); color: var(--sx-callInk); border: var(--sx-bdBtn) solid var(--sx-ink); font-size: var(--callFs); font-weight: 800; letter-spacing: .04em; white-space: nowrap; box-shadow: var(--sx-shadow); }
.sx-call[data-on="1"] { display: block; }
.sx-call[data-kind="fork"] { border-color: var(--sx-ring); box-shadow: 0 0 0 3px var(--sx-ringGlow), var(--sx-shadow); }
.sx-call.sx-popping { animation: sx-callpop 2600ms ease-out 1 both; }
.sx-wave { display: none; position: absolute; overflow: hidden; border-radius: var(--sx-radL); }
.sx-wave[data-on="1"] { display: block; }
.sx-wave::before { content: ''; position: absolute; left: 0; top: 0; width: 22%; height: 100%; translate: -110% 0;
  background: radial-gradient(circle at 70% 12%, var(--sx-foam) 0 6%, transparent 7%) 0 0 / 100% 18%, linear-gradient(90deg, transparent, var(--sx-sea) 30%, var(--sx-foam) 78%, transparent); }
.sx-wave.sx-sweeping::before { animation: sx-sweep 1800ms ease-in-out 1 both; }
.sx-card { display: none; position: absolute; transform: translate(-50%, -50%); width: var(--cardW); padding: 18px 16px; border-radius: var(--sx-radL); background: var(--sx-callBg); color: var(--sx-callInk); border: var(--sx-bdBtn) solid var(--sx-ink); box-shadow: var(--sx-shadow); flex-direction: column; align-items: center; gap: 6px; text-align: center; pointer-events: auto; cursor: pointer; }
.sx-card[data-on="1"] { display: flex; animation: sx-cardin 400ms ease-out 1 both; }
.sx-ck { font-size: 11px; font-weight: 800; letter-spacing: .2em; opacity: .7; }
.sx-ct { font-size: var(--cardT); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sx-cs { font-size: calc(var(--callFs) - 1px); font-weight: 800; letter-spacing: .06em; }
.sx-cline { font-size: 12px; font-weight: 700; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .sx-root .sx-ring, .sx-root .sx-cin, .sx-root .sx-flag, .sx-layer .sx-wave::before { animation: none !important; }
  .sx-cell.sx-scooped::after, .sx-cell.sx-dropped::before { display: none; }
}

/* ══ DESKTOP: ONE box (1280 × 553, 593 collapsed), scaled by BoardFit ══ */
@media (min-width: 1000px) {
  #sandcastles-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .sx-root, .sx-layer {
    --pad: 12px; --gap: 8px; --sideW: 300px; --hdrH: 34px; --turnW: 118px; --pH: 64px; --pGap: 8px; --avS: 40px; --nameFs: 15px; --subFs: 11px;
    --nbDir: column; --nbAlign: flex-start; --chipS: 34px; --tagW: 96px; --tagFs: 10px; --rowGap: 10px; --rowPad: 10px; --matchD: flex;
    --ctrlMinH: 0px; --ctrlAreas: "ban" "undo" "feed"; --ctrlCols: minmax(0, 1fr); --ctrlRows: 112px 52px minmax(0, 1fr);
    --banDir: column; --banAlign: stretch; --banPad: 0 16px; --banGap: 8px; --chipsOrder: 2; --chipsDir: row; --chipW: 96px; --chipH: 26px; --chipFs: 11px;
    --banTFs: 20px; --banSFs: 13px; --undoW: 172px; --undoH: 46px; --undoFs: 13px; --hintD: block; --feedFs: 13px; --feedLblD: block; --feedPad: 10px 14px;
    --metaFs: 11px; --callFs: 16px; --callPad: 8px 16px; --cardW: 330px; --cardT: 52px; }
  .sx-root { width: 1280px; height: var(--sx-fit-h, 553px); padding: var(--pad); flex-direction: row; gap: var(--gap); }
  .sx-holder { flex: none; width: calc(var(--sx-fit-h, 553px) - 24px); height: 100%; }
}

/* ══ PHONE (unscaled, 384 × 812 → 360 × 740): one column; the beach width-limited, the log takes what's left ══ */
@media (max-width: 999px) {
  #sandcastles-game-screen.sx-playing .wrap { padding: 0 2px; max-width: none; }
  #sandcastles-game-screen.sx-playing .topbar { display: none; }
  #sandcastles-game-screen.sx-playing.sx-topbar-open .topbar { display: flex; }
  /* NOTCH SWEEP (predicely_notch_safe_area): the topbar carried the inset; hiding it, we carry it — PADDING, never margin */
  #sandcastles-game-screen.sx-playing:not(.sx-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
  .sx-root, .sx-layer {
    --pad: 10px; --gap: 8px; --sideW: auto; --hdrH: 28px; --turnW: 84px; --pH: 36px; --pGap: 5px; --avS: 24px; --nameFs: 12px; --subFs: 10px;
    --nbDir: row; --nbAlign: baseline; --chipS: 22px; --tagW: 74px; --tagFs: 9px; --rowGap: 8px; --rowPad: 8px; --matchD: none;
    --ctrlMinH: 96px; --ctrlAreas: "ban undo" "feed feed"; --ctrlCols: minmax(0, 1fr) 96px; --ctrlRows: 54px minmax(34px, 1fr);
    --banDir: row; --banAlign: center; --banPad: 0 10px; --banGap: 10px; --chipsOrder: 0; --chipsDir: column; --chipW: 54px; --chipH: 20px; --chipFs: 9px;
    --banTFs: 13px; --banSFs: 11px; --undoW: 96px; --undoH: 54px; --undoFs: 11px; --hintD: none; --feedFs: 11px; --feedLblD: none; --feedPad: 6px 10px;
    --metaFs: 10px; --callFs: 13px; --callPad: 6px 11px; --cardW: 250px; --cardT: 38px; }
  .sx-root[data-tight="1"] { --pad: 8px; --gap: 6px; --hdrH: 26px; --pH: 34px; --ctrlRows: 50px minmax(30px, 1fr); --undoH: 50px; --ctrlMinH: 86px; }
  .sx-root { width: 100%; height: var(--sx-phone-h, 694px); padding: var(--pad); flex-direction: column; gap: var(--gap); }
  .sx-menu { display: block; }
  .sx-holder { flex: 0 1 var(--sx-basis, 340px); width: 100%; }
}