/* frontend/slices.css — SLICES ("I cut, you choose" on dice) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Acorns / Corrals precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's CLASSIC charcoal skin (docs/design/batch 16/Slices.dc.html, the
 * root's style; SL-M5: vector only, the pixel direction is not built). CLASSIC by default; ARCADE when GameTheme puts
 * `gm-arcade` on the screen — the SHELL recolours from the equipped Arcade palette's `--pgr-*` tokens (the scheme
 * engine, never forked). Player colours come from PlayerColours (`--slc-p0/1`, set by slices.js) PLUS a SHAPE
 * (● you, ▲ the opponent) on every mark that names a player. The owner is colourblind: every state reads in
 * greyscale — a turn is ▶ + a ring + a chip, a lead is ♛ / ♛=, an EAT die is a dashed ring + a hatch + "EAT ↓".
 *
 * ── Geometry is the mock's ──────────────────────────────────────────────────
 * PC design box 1120 × 553 (scaled as ONE unit by BoardFit; ×1.072 with the chat pill). Head 28 · cake 144 · then a
 * 666 px left column (prize strip 44, two panels) beside the controls (status + the 9-slot plate, the two buttons,
 * the feed). Phone column (384 × 812, survives 360 × 740): head 22 · strip 44 · opponent 66 · cake 92 · status +
 * plate 91 · buttons 42 · you 66 · feed (the ONLY elastic slot). The cake row is Design's: a die is 100/11 % of the
 * row, a gap 100/44 %; 8 gap boxes tile the row (≈ 41 px at 384, 39 at 360) and stand 77 px tall.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every row is a FIXED size except the feed. Every text box is a fixed width or fills its slot with an ellipsis.
 * Feedback changes colour, glow or a transform — never size or spacing.
 */

#slices-game-screen, .slc-root {
  --slc-page: #101114;
  --slc-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --slc-solid: #17181d; --slc-seat: rgba(255, 255, 255, .025); --slc-panel: rgba(255, 255, 255, .022);
  --slc-line: rgba(255, 255, 255, .075); --slc-txt: #e9e8e4; --slc-dim: #83858b;
  --slc-sel: oklch(.74 .14 152); --slc-btn: linear-gradient(180deg, #2d3036, #22242a); --slc-btnTxt: #f1f0ec;
  --slc-crown: oklch(.86 .14 92); --slc-backA: rgba(0, 0, 0, .5); --slc-backB: rgba(255, 255, 255, .09);
  --slc-tray: color-mix(in oklch, var(--slc-txt) 7%, transparent); --slc-knife: var(--slc-txt);
  --slc-f: 'Outfit', system-ui, sans-serif;
  --slc-p0: oklch(.74 .14 152); --slc-p1: oklch(.83 .12 70);
}
/* ARCADE — the shell recolours from the equipped Arcade palette (GameTheme sets --pgr-* on the screen) */
#slices-game-screen.gm-arcade, .gm-arcade .slc-root {
  --slc-bg: var(--pgr-bg, radial-gradient(135% 120% at 50% -10%, #0c1a3a 0%, #14285e 45%, #1e3a8a 100%));
  --slc-solid: color-mix(in oklch, var(--pgr-sel, #60a5fa) 14%, #0a0f22);
  --slc-seat: rgba(0, 0, 0, .22); --slc-panel: rgba(255, 255, 255, .07);
  --slc-line: color-mix(in oklch, var(--pgr-sel, #60a5fa) 42%, transparent);
  --slc-txt: #ffffff; --slc-dim: rgba(255, 255, 255, .62);
  --slc-sel: var(--pgr-sel, #60a5fa);
  --slc-btn: linear-gradient(180deg, color-mix(in oklch, var(--pgr-sel, #60a5fa) 70%, #000), color-mix(in oklch, var(--pgr-sel, #60a5fa) 50%, #000));
  --slc-btnTxt: #ffffff;
  --slc-tray: rgba(255, 255, 255, .08);
  --slc-f: 'Poppins', system-ui, sans-serif;
}

@keyframes slc-knife { 0% { translate: 0 -3px } 100% { translate: 0 0 } }
@keyframes slc-blade { 0% { scale: 1 0 } 100% { scale: 1 1 } }
@keyframes slc-shake { 0%, 100% { translate: 0 0 } 20% { translate: -4px 0 } 40% { translate: 4px 0 } 60% { translate: -3px 0 } 80% { translate: 3px 0 } }
@keyframes slc-crown { 0% { translate: -14px -8px; opacity: .3 } 60% { translate: 0 -3px; opacity: 1 } 100% { translate: 0 0; opacity: 1 } }
@keyframes slc-toastin { 0% { opacity: 0; translate: 0 -8px } 100% { opacity: 1; translate: 0 0 } }
@keyframes slc-in { 0% { opacity: 0 } 100% { opacity: 1 } }

/* ── setup card ─────────────────────────────────────────────────────────── */
#slices-game-screen { background: var(--slc-page); color: var(--slc-txt); }
.slc-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--slc-f); background: var(--slc-solid); color: var(--slc-txt); border: 1px solid var(--slc-line); border-radius: 18px; }
.slc-setup-eyebrow { font: 700 11px/1.3 var(--slc-f); letter-spacing: .2em; text-transform: uppercase; color: var(--slc-crown); }
.slc-setup-title { margin: 0; font-size: 30px; }
.slc-setup-blurb, .slc-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.slc-setup-hint { color: var(--slc-dim); font-size: 12.5px; }
.slc-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
.slc-setup-lab { font: 700 11px var(--slc-f); letter-spacing: .14em; text-transform: uppercase; color: var(--slc-dim); min-width: 84px; }
.slc-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.slc-opt { min-width: 64px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--slc-line); background: var(--slc-panel); color: var(--slc-txt); font: 700 13px var(--slc-f); cursor: pointer; transition: background .12s, box-shadow .12s, transform .1s; }
.slc-opt[data-on="1"] { background: var(--slc-sel); color: #0b0c0f; border-color: var(--slc-sel); }
.slc-opt:active { transform: translateY(1px); }
.slc-start { height: 48px; margin-top: 6px; border: 2px solid var(--slc-sel); border-radius: 12px; background: var(--slc-btn); color: var(--slc-btnTxt); font: 800 16px var(--slc-f); letter-spacing: .04em; cursor: pointer; transition: filter .12s, transform .1s, box-shadow .12s; }
.slc-start:active { transform: translateY(2px); filter: brightness(.86); }
@media (hover: hover) { .slc-start:hover { box-shadow: 0 0 0 3px color-mix(in oklch, var(--slc-sel) 50%, transparent), 0 0 20px -4px var(--slc-sel); } .slc-opt:hover { box-shadow: 0 0 0 2px var(--slc-sel); } }

/* ── the root (phone first: 384 × 812; data-sz="sm" is the 360-wide floor) ── */
.slc-root {
  --slc-pad: 8px; --slc-gap: 6px; --slc-headH: 22px; --slc-stripH: 44px; --slc-panelH: 66px; --slc-cakeH: 92px;
  --slc-statusH: 30px; --slc-trayH: 56px; --slc-btnH: 42px; --slc-kp: 36px;
  --slc-plate: 34px; --slc-pgap: 4px; --slc-ffw: 50px; --slc-ffh: 54px; --slc-ffd: 20px; --slc-ffgap: 5px;
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--slc-phone-h, 694px); padding: var(--slc-pad);
  display: flex; flex-direction: column; gap: var(--slc-gap);
  background: var(--slc-bg); color: var(--slc-txt); font-family: var(--slc-f);
  border-radius: 0; user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased;
}
.slc-root *, .slc-root *::before, .slc-root *::after { box-sizing: border-box; }
.slc-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.slc-root i { font-style: normal; }
/* the phone order: the two columns dissolve into the root's column (display: contents).
   ⛔ The panels are ordered by their SLOT (.slc-opp / .slc-you), never by seat id: online I can be seat 1, and my
   panel must still be the lower one (SLB1 / SMP9). */
.slc-lower, .slc-colL, .slc-colR, .slc-opp, .slc-you { display: contents; }
@media (max-width: 999px) {
  .slc-head { order: 1; } .slc-strip { order: 2; } .slc-opp > .slc-panel { order: 3; } .slc-cakebox { order: 4; }
  .slc-ctl { order: 5; } .slc-btns { order: 6; } .slc-you > .slc-panel { order: 7; } .slc-feed { order: 8; }
}

/* the player marks: colour + SHAPE */
.slc-root [data-s="0"] { --slc-pc: var(--slc-p0); }
.slc-root [data-s="1"] { --slc-pc: var(--slc-p1); }
.slc-glyph, .slc-fg, .slc-pzlead i, .slc-oc { color: var(--slc-pc, var(--slc-dim)); }

/* head: Cake N of 6 · track · (PC) cakes to come · ORDER ✂ + the four turns · ☰ (phone) */
.slc-head { flex: none; height: var(--slc-headH); display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow: hidden; }
.slc-headl, .slc-headr { display: flex; align-items: center; gap: 7px; min-width: 0; }
.slc-headr { gap: 4px; }
.slc-cakeno { flex: none; font-size: 14px; font-weight: 700; white-space: nowrap; min-width: 82px; }
.slc-track { display: flex; gap: 3px; }
.slc-tk { width: 12px; height: 7px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--slc-dim); }
.slc-tk[data-st="done"] { background: var(--slc-dim); opacity: .5; box-shadow: none; }
.slc-tk[data-st="now"] { background: var(--slc-txt); box-shadow: 0 0 8px var(--slc-txt); }
.slc-tnote, .slc-ordk { display: none; }
.slc-oc { flex: none; height: 18px; min-width: 18px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--slc-line); }
.slc-oc[data-st="now"] { box-shadow: 0 0 0 2px var(--slc-pc), 0 0 12px -2px var(--slc-pc); }
.slc-oc[data-st="done"] { opacity: .35; text-decoration: line-through; box-shadow: none; }
.slc-oc[data-st="off"] { visibility: hidden; }
.slc-menu { flex: none; width: 28px; height: 22px; margin-left: 4px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--slc-txt); font-size: 13px; cursor: pointer; }

/* ── the cake ─────────────────────────────────────────────────────────────── */
.slc-cakebox { flex: none; position: relative; height: var(--slc-cakeH); }
/* SL-F7: the phone row is inset 4 px a side, so an edge tray's hover ring never clips */
.slc-row { position: relative; width: calc(100% - 8px); margin: var(--slc-kp) 4px 0; aspect-ratio: 11 / 1; }
.slc-tray { position: absolute; top: -7px; bottom: -7px; z-index: 1; border-radius: 9px; background: var(--slc-tray); box-shadow: inset 0 0 0 1px var(--slc-line); transform: translateX(var(--sx, 0px)) translateY(var(--ly, 0px)); transition: transform .2s ease-out, box-shadow .15s, opacity .3s; cursor: default; }
.slc-tray[data-st="off"] { display: none; }
.slc-tray[data-st="lit"] { cursor: pointer; box-shadow: 0 0 0 2px var(--slc-p0), 0 0 18px -6px var(--slc-p0); }
@media (hover: hover) { .slc-tray[data-st="lit"]:hover { --ly: -3px; box-shadow: 0 0 0 3px var(--slc-p0), 0 0 26px -2px var(--slc-p0); } }
.slc-tray[data-st="lit"]:active { --ly: 1px; }
.slc-tray[data-st="locked"] { cursor: not-allowed; }
.slc-tray[data-st="taken"], .slc-tray[data-st="plate"] { background: transparent; box-shadow: none; border: 1.5px dashed var(--slc-pc, var(--slc-line)); }
.slc-tray[data-st="plate"] { --slc-pc: var(--slc-p0); }
.slc-tray[data-st="empty"] { background: transparent; box-shadow: none; border: 1.5px dashed var(--slc-line); }
.slc-tray[data-st="gone"] { opacity: .25; }
.slc-die { position: absolute; top: 0; aspect-ratio: 1; z-index: 2; pointer-events: none; line-height: 0; border-radius: 18%; transform: translateX(var(--sx, 0px)); transition: transform .2s ease-out, opacity .26s, translate .26s ease-out; }
.slc-die > * { width: 100% !important; height: 100% !important; }
.slc-die[data-st="unlaid"] { opacity: 0; translate: 0 -10px; transition: none; }
.slc-die[data-st="ghost"] > * { visibility: hidden; }
.slc-die[data-st="ghost"] { box-shadow: inset 0 0 0 1.5px var(--slc-line); border-radius: 18%; }
.slc-die[data-st="gone"] { opacity: .2; transition: opacity .36s; }
/* the gaps: 8 boxes tiling the row, live only on YOUR cut (dice never take a pointer) */
.slc-gap { position: absolute; top: calc(-1 * var(--slc-kp)); bottom: -8px; z-index: 0; pointer-events: none; border-radius: 8px; transition: background .12s; }
.slc-gap[data-live="1"] { z-index: 4; pointer-events: auto; cursor: pointer; }
@media (hover: hover) { .slc-gap[data-live="1"]:hover { background: color-mix(in oklch, var(--slc-txt) 10%, transparent); } }
.slc-gap[data-live="1"]:active { background: color-mix(in oklch, var(--slc-txt) 18%, transparent); }
.slc-handle { position: absolute; top: 3px; left: 50%; width: 12px; margin-left: -6px; height: calc(var(--slc-kp) - 14px); border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--slc-line); opacity: .7; }
.slc-gap[data-live="1"] .slc-handle { box-shadow: inset 0 0 0 1.5px var(--slc-dim); opacity: 1; border: 0; background: repeating-linear-gradient(180deg, transparent 0 3px, color-mix(in oklch, var(--slc-dim) 30%, transparent) 3px 5px); }
.slc-gap[data-cut="1"] .slc-handle { background: var(--slc-knife); box-shadow: none; opacity: .45; }
.slc-gap[data-cut="1"][data-live="1"] .slc-handle { opacity: 1; box-shadow: 0 0 10px -2px var(--slc-knife); }
.slc-blade { display: none; position: absolute; left: 50%; width: 3px; margin-left: -1.5px; top: calc(var(--slc-kp) - 8px); bottom: 6px; border-radius: 2px; background: var(--slc-knife); opacity: .4; transform-origin: 50% 0; }
.slc-gap[data-cut="1"] .slc-blade { display: block; }
.slc-gap[data-cut="1"][data-live="1"] .slc-blade { opacity: 1; box-shadow: 0 0 8px var(--slc-knife); }
.slc-gap[data-fresh="1"] .slc-handle { animation: slc-knife .16s ease-out both; }
.slc-gap[data-fresh="1"] .slc-blade { animation: slc-blade .16s ease-out both; }
/* SL-F4: a 4th cut is REFUSED — the gap shakes, the count stays */
.slc-gap[data-refuse="1"] { animation: slc-shake .32s ease-in-out; background: color-mix(in oklch, #ff5c5c 18%, transparent); }
.slc-tlab { position: absolute; top: calc(100% + 9px); z-index: 1; text-align: center; font-size: 10px; font-weight: 600; color: var(--slc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateX(var(--sx, 0px)); transition: transform .2s ease-out; pointer-events: none; }
.slc-tlab[data-st="off"] { display: none; }
.slc-tlab[data-st="lit"] { color: var(--slc-txt); font-weight: 800; }
.slc-tlab[data-st="taken"], .slc-tlab[data-st="plate"] { color: var(--slc-pc); }
.slc-tlab[data-st="plate"] { --slc-pc: var(--slc-p0); }
/* SL-F3: the end-scoring banner sits in the EMPTY cake slot */
.slc-banner { position: absolute; inset: 4px 10px; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; background: color-mix(in oklch, var(--slc-solid) 88%, transparent); box-shadow: 0 0 0 1.5px var(--slc-crown); text-align: center; pointer-events: none; }
.slc-banner[data-on="1"] { display: flex; animation: slc-in .2s ease-out both; }
.slc-banner b { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--slc-crown); }
.slc-banner span { font-size: 10.5px; font-weight: 700; color: var(--slc-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── the prize strip (SL-F1: the leader slot is FIXED for two shapes) ───────── */
.slc-strip { flex: none; height: var(--slc-stripH); display: grid; grid-template-columns: 70px repeat(6, minmax(0, 1fr)); align-items: center; padding: 0 6px; border-radius: 10px; background: var(--slc-panel); box-shadow: inset 0 0 0 1px var(--slc-line); overflow: hidden; }
.slc-stripk { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.slc-stripk b { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.slc-stripk span { font-size: 9px; color: var(--slc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slc-pz { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px; border-radius: 8px; min-width: 0; overflow: hidden; transition: box-shadow .15s, opacity .2s; }
.slc-pz[data-st="fly"] { box-shadow: 0 0 0 2px var(--slc-crown), 0 0 18px -4px var(--slc-crown); }
.slc-pz[data-st="landed"] { opacity: .5; }
.slc-pz1, .slc-pz2 { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.slc-pzface { flex: none; width: 15px; height: 15px; line-height: 0; }
.slc-pzface > *, .slc-colface > *, .slc-ffd > *, .slc-psd > *, .slc-cell > * { width: 100% !important; height: 100% !important; }
.slc-pzn { font-size: 13px; font-weight: 800; line-height: 1; }
.slc-pz2 { height: 12px; line-height: 12px; font-size: 9.5px; color: var(--slc-dim); }
/* the count takes the slack, so the leader slot is anchored at the cell's right edge whatever the number (locked) */
.slc-pzleft { flex: 1 1 0; min-width: 0; overflow: hidden; font-variant-numeric: tabular-nums; }
.slc-pzlead { flex: none; width: 18px; height: 100%; display: flex; align-items: center; gap: 1px; overflow: hidden; font-weight: 800; line-height: 1; }
.slc-pzlead i[data-s="-1"] { color: var(--slc-dim); }

/* ── the panels ───────────────────────────────────────────────────────────── */
.slc-panel { flex: none; height: var(--slc-panelH); display: grid; grid-template-columns: 70px repeat(6, minmax(0, 1fr)); align-items: center; padding: 4px 6px; border-radius: 10px; background: var(--slc-seat); box-shadow: inset 0 0 0 1px var(--slc-line); transition: box-shadow .16s; overflow: hidden; }
.slc-panel[data-act="1"] { box-shadow: 0 0 0 2px var(--slc-pc), 0 0 22px -6px var(--slc-pc); }
.slc-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.slc-avatar { display: none; }
.slc-whotext { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.slc-namerow { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; min-width: 0; }
.slc-prefix { flex: none; width: 8px; font-size: 9px; color: var(--slc-txt); }
.slc-glyph { flex: none; font-size: 12px; }
.slc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.slc-chips { display: flex; gap: 3px; align-items: center; height: 13px; }
.slc-chip { flex: none; height: 13px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border-radius: 4px; font-size: 8px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; box-shadow: inset 0 0 0 1px transparent; color: transparent; }
.slc-chip[data-on="1"] { box-shadow: inset 0 0 0 1px var(--slc-txt); color: var(--slc-txt); }
.slc-turnchip { min-width: 42px; }
.slc-turnchip[data-on="1"] { box-shadow: inset 0 0 0 1.5px var(--slc-pc); color: var(--slc-pc); }
/* SL-F5: the phone's ✂ SERVER chip is ICON-ONLY (the word never wraps a 70 px column) */
.slc-srv { min-width: 14px; }
.slc-pilerow { display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--slc-dim); white-space: nowrap; min-width: 0; }
.slc-pileic { position: relative; flex: none; width: 14px; height: 10px; display: none; }
.slc-pileic i { position: absolute; width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); background: repeating-linear-gradient(45deg, var(--slc-backA) 0 3px, var(--slc-backB) 3px 6px), var(--slc-panel); }
.slc-pileic i:first-child { left: 0; top: 1px; } .slc-pileic i:last-child { left: 5px; top: 0; }
.slc-pile { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.slc-col { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.slc-colhead { height: 13px; display: flex; align-items: center; gap: 2px; white-space: nowrap; }
/* SL-M4: the phone's 10 px face beside each column's count */
.slc-colface { flex: none; width: 10px; height: 10px; line-height: 0; }
.slc-count { flex: none; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.slc-count[data-z="1"] { color: var(--slc-dim); }
/* SL-M3: ♛ sole · "♛=" tie — the slot is sized for the tie */
.slc-crown { flex: none; height: 12px; min-width: 15px; display: inline-flex; align-items: center; font-size: 9.5px; line-height: 1; font-weight: 800; color: var(--slc-crown); white-space: nowrap; }
.slc-crown[data-st="new"] { animation: slc-crown .35s ease-out both; text-shadow: 0 0 10px var(--slc-crown), 0 0 2px var(--slc-crown); }
.slc-crown[data-st="ghost"] { color: var(--slc-dim); opacity: .35; }
.slc-crown[data-st="fly"], .slc-crown[data-st="prize"] { font-size: 8.5px; padding: 1px 2px; border-radius: 4px; color: #111; background: var(--slc-crown); }
.slc-crown[data-st="fly"] { translate: 0 -7px; box-shadow: 0 0 14px var(--slc-crown); }
.slc-grid { display: grid; grid-template-columns: repeat(3, 9px); grid-auto-rows: 9px; gap: 2px; height: 42px; align-content: start; }
.slc-cell { display: block; border-radius: 2px; line-height: 0; background: color-mix(in oklch, var(--slc-txt) 6%, transparent); }
.slc-cell[data-on="1"] { background: none; }

/* ── the controls: status, the plate / forfeit row, the buttons ─────────────── */
.slc-ctl { flex: none; display: flex; flex-direction: column; gap: 5px; }
.slc-status { flex: none; height: var(--slc-statusH); font-size: 11.5px; line-height: 1.3; overflow: hidden; color: var(--slc-dim); }
.slc-status b { color: var(--slc-txt); }
.slc-status[data-tone="you"] b { color: var(--slc-p0); }
.slc-tray2 { flex: none; position: relative; height: var(--slc-trayH); }
.slc-plate, .slc-ff { display: flex; gap: var(--slc-pgap); }
.slc-ff { gap: var(--slc-ffgap); }
.slc-plate[data-on="0"], .slc-ff[data-on="0"] { display: none; }
.slc-ps { flex: none; width: var(--slc-plate); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.slc-psd { position: relative; display: block; width: var(--slc-plate); height: var(--slc-plate); line-height: 0; border-radius: 6px; transition: box-shadow .12s, transform .1s, opacity .2s; }
.slc-ps[data-st="empty"] .slc-psd { box-shadow: inset 0 0 0 1.5px var(--slc-line); opacity: .55; }
.slc-ps[data-st="arriving"] .slc-psd { opacity: 0; }
.slc-ps[data-st="keep"] .slc-psd, .slc-ps[data-st="eat"] .slc-psd { cursor: pointer; outline: 2px solid var(--slc-p0); outline-offset: 2px; }
/* SL-M1: an EAT die keeps its FACE, dimmed under the hatch, a dashed ring + "EAT ↓" */
.slc-ps[data-st="eat"] .slc-psd { outline-style: dashed; }
.slc-ps[data-st="eat"] .slc-psd > * { filter: brightness(.5) saturate(.6); }
.slc-ps[data-st="eat"] .slc-psd::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: repeating-linear-gradient(45deg, var(--slc-backA) 0 3px, transparent 3px 6px); }
@media (hover: hover) { .slc-root[data-lock="0"] .slc-ps[data-st="keep"] .slc-psd:hover, .slc-root[data-lock="0"] .slc-ps[data-st="eat"] .slc-psd:hover { box-shadow: 0 0 0 2px var(--slc-p0), 0 0 18px -2px var(--slc-p0); } }
.slc-ps[data-st="keep"] .slc-psd:active, .slc-ps[data-st="eat"] .slc-psd:active { transform: translateY(2px); }
.slc-psl { height: 12px; font-size: 9.5px; letter-spacing: .06em; font-weight: 600; color: var(--slc-dim); white-space: nowrap; }
.slc-ps[data-st="eat"] .slc-psl { font-weight: 800; color: var(--slc-txt); }
.slc-ffo { flex: none; width: var(--slc-ffw); height: var(--slc-ffh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--slc-line); cursor: pointer; transition: box-shadow .12s, transform .1s; }
.slc-ffo[data-st="none"] { box-shadow: none; outline: 1.5px dashed var(--slc-line); outline-offset: -1.5px; opacity: .4; cursor: not-allowed; }
.slc-ffo[data-st="sel"] { box-shadow: 0 0 0 2px var(--slc-p0), 0 0 18px -4px var(--slc-p0); }
@media (hover: hover) { .slc-ffo[data-st="live"]:hover { box-shadow: 0 0 0 2px var(--slc-p0); } }
.slc-ffo[data-st="live"]:active, .slc-ffo[data-st="sel"]:active { transform: translateY(2px); }
.slc-ffd { width: var(--slc-ffd); height: var(--slc-ffd); line-height: 0; }
.slc-fft { font-size: 10px; font-weight: 700; white-space: nowrap; }
.slc-btns { flex: none; height: var(--slc-btnH); display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.slc-btn { height: 100%; min-width: 0; padding: 0 10px; border-radius: 12px; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: not-allowed; background: transparent; color: var(--slc-dim); border: 1.5px dashed var(--slc-line); transition: box-shadow .12s, transform .1s, filter .12s; }
.slc-btnL[data-live="1"] { cursor: pointer; color: var(--slc-txt); border: 1.5px solid color-mix(in oklch, var(--slc-txt) 45%, transparent); }
.slc-btnR[data-live="1"] { cursor: pointer; color: var(--slc-btnTxt); background: var(--slc-btn); border: 2px solid var(--slc-sel); }
@media (hover: hover) {
  .slc-btnR[data-live="1"]:hover { box-shadow: 0 0 0 3px color-mix(in oklch, var(--slc-sel) 50%, transparent), 0 0 20px -4px var(--slc-sel); }
  .slc-btnL[data-live="1"]:hover { box-shadow: 0 0 0 3px color-mix(in oklch, var(--slc-txt) 30%, transparent); }
}
.slc-btn[data-live="1"]:active { transform: translateY(2px); filter: brightness(.86); }

/* ── the feed (the only elastic slot) + the toast over it (SL-F3) ──────────── */
.slc-feed { flex: 1 1 0; min-height: 30px; overflow: hidden; padding: 5px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--slc-line); display: flex; flex-direction: column; gap: 2px; }
.slc-fl { flex: none; height: 15px; display: flex; gap: 4px; font-size: 11px; line-height: 15px; white-space: nowrap; color: var(--slc-dim); min-width: 0; }
.slc-fl[data-age="0"] { color: var(--slc-txt); }
.slc-fg { flex: none; width: 12px; }
.slc-ft { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.slc-toast { position: absolute; z-index: 22; display: none; padding: 9px 12px; text-align: center; border-radius: 14px; background: var(--slc-txt); color: #111; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .6), 0 0 0 2px var(--slc-pc, transparent); pointer-events: none; }
.slc-toast[data-on="1"] { display: block; animation: slc-toastin .16s ease-out both; }

/* ── layers inside the root (absolute, never fixed — board-fit.js's rule) ── */
.slc-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.slc-fly { position: absolute; left: 0; top: 0; line-height: 0; }
.slc-flyf, .slc-flyb { position: absolute; inset: 0; }
.slc-flyf > * { width: 100% !important; height: 100% !important; }
.slc-flyb { display: none; border-radius: 18%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); background: repeating-linear-gradient(45deg, var(--slc-backA) 0 3px, var(--slc-backB) 3px 6px), #26282e; }
.slc-fly[data-back="1"] .slc-flyf { display: none; }
.slc-fly[data-back="1"] .slc-flyb { display: block; }
.slc-pchip { position: absolute; left: 0; top: 0; margin: -11px 0 0 -16px; min-width: 32px; height: 22px; padding: 0 7px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #111; background: var(--slc-crown); box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .6), 0 0 14px var(--slc-crown); }
.slc-dief { display: flex; align-items: center; justify-content: center; background: #f2efe5; color: #20262a; border-radius: 4px; font-size: 10px; }

/* locked: controls stay in place, greyed, no pointer events */
.slc-root[data-lock="1"] .slc-tray, .slc-root[data-lock="1"] .slc-ps, .slc-root[data-lock="1"] .slc-ffo { pointer-events: none; }

/* the end-screen rows — ⛔ the end screen is appended to <body>, so NO --slc-* token reaches it: literals only */
.slc-endrows { display: flex; flex-direction: column; gap: 4px; }
.slc-endrow { display: grid; grid-template-columns: 22px 1fr 44px; gap: 2px 8px; align-items: center; font-size: 14px; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.slc-endrow > b { grid-column: 3; grid-row: 1; }
.slc-endrow[data-win="1"] { font-weight: 800; font-size: 16px; }
.slc-endglyph { font-size: 16px; text-align: center; }
.slc-endglyph[data-s="0"] { color: #4fe07c; } .slc-endglyph[data-s="1"] { color: #ffb84d; }
.slc-endpart { grid-column: 2 / 4; grid-row: 2; font-size: 11.5px; opacity: .75; font-weight: 600; }
.slc-endrow b { text-align: right; font-variant-numeric: tabular-nums; }
.slc-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

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

/* the 360-wide floor: a hair smaller where the column is tightest */
.slc-root[data-sz="sm"] { --slc-pad: 7px; --slc-gap: 5px; }
.slc-root[data-sz="sm"] .slc-strip, .slc-root[data-sz="sm"] .slc-panel { grid-template-columns: 66px repeat(6, minmax(0, 1fr)); }
.slc-root[data-sz="sm"] .slc-colhead { gap: 1px; }

/* ── PHONE chrome ───────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #slices-game-screen.slc-playing .wrap { padding: 0 2px; max-width: none; }
  #slices-game-screen.slc-playing .topbar { display: none; }
  #slices-game-screen.slc-playing.slc-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. */
  #slices-game-screen.slc-playing:not(.slc-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (1120 × 553; ×1.072 with the chat pill) ── */
@media (min-width: 1000px) {
  #slices-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .slc-root {
    --slc-headH: 28px; --slc-stripH: 44px; --slc-cakeH: 144px; --slc-statusH: 36px; --slc-trayH: 66px; --slc-btnH: 44px;
    --slc-plate: 38px; --slc-pgap: 5px; --slc-ffw: 54px; --slc-ffh: 62px; --slc-ffd: 26px; --slc-ffgap: 7px;
    width: 1120px; height: 553px; padding: 12px 14px; gap: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .slc-lower { display: grid; flex: 1 1 0; min-height: 0; grid-template-columns: 666px minmax(0, 1fr); gap: 14px; }
  .slc-colL { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .slc-colR { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
  .slc-opp, .slc-you { display: flex; flex: 1 1 0; min-height: 0; }
  .slc-opp > .slc-panel, .slc-you > .slc-panel { flex: 1 1 0; height: auto; }
  .slc-head { gap: 12px; }
  .slc-headl { gap: 12px; }
  .slc-headr { gap: 7px; }
  .slc-cakeno { font-size: 17px; min-width: 112px; }
  .slc-track { gap: 5px; }
  .slc-tk { width: 22px; height: 9px; }
  .slc-tnote { display: block; font-size: 12.5px; color: var(--slc-dim); min-width: 130px; white-space: nowrap; }
  .slc-ordk { display: block; font-size: 11px; color: var(--slc-dim); letter-spacing: .1em; margin-right: 4px; }
  .slc-oc { height: 24px; min-width: 24px; padding: 0 5px; font-size: 13px; }
  .slc-menu { display: none; }
  .slc-cakebox { border-radius: 18px; background: var(--slc-panel); box-shadow: inset 0 0 0 1px var(--slc-line); }
  .slc-row { width: 860px; margin: var(--slc-kp) auto 0; }
  .slc-tray { border-radius: 14px; }
  .slc-handle { width: 14px; margin-left: -7px; }
  .slc-tlab { top: calc(100% + 12px); font-size: 13px; }
  .slc-banner { inset: 18px 120px; border-radius: 16px; gap: 6px; }
  .slc-banner b { font-size: 24px; }
  .slc-banner span { font-size: 13px; }
  .slc-strip { grid-template-columns: 168px repeat(6, minmax(0, 1fr)); padding: 0 10px; border-radius: 12px; }
  .slc-stripk b { font-size: 11px; letter-spacing: .12em; }
  .slc-stripk span { font-size: 11px; }
  .slc-pz { padding: 3px 5px; }
  .slc-pz1, .slc-pz2 { gap: 6px; }
  .slc-pzface { width: 22px; height: 22px; }
  .slc-pzn { font-size: 17px; }
  .slc-pz2 { height: 15px; line-height: 15px; font-size: 11px; }
  .slc-pzlead { width: 24px; gap: 2px; }
  .slc-panel { grid-template-columns: 168px repeat(6, minmax(0, 1fr)); padding: 6px 10px; border-radius: 14px; }
  .slc-avatar { display: flex; flex: none; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--slc-panel); box-shadow: inset 0 0 0 1.5px var(--slc-pc); color: var(--slc-pc); font-size: 15px; }
  .slc-whotext { gap: 4px; }
  .slc-namerow { gap: 5px; font-size: 15px; }
  .slc-prefix { width: 12px; font-size: 12px; }
  .slc-glyph { font-size: 13px; }
  .slc-panel[data-s="0"] .slc-glyph { font-size: 14px; }
  .slc-chips { gap: 5px; height: 18px; }
  .slc-chip { height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10px; letter-spacing: .07em; min-width: 58px; }
  .slc-chip[data-on="1"] { box-shadow: inset 0 0 0 1.5px var(--slc-txt); }
  .slc-turnchip[data-on="1"] { box-shadow: inset 0 0 0 1.5px var(--slc-pc); }
  .slc-pilerow { gap: 6px; font-size: 12px; }
  .slc-pileic { display: block; width: 20px; height: 14px; }
  .slc-pileic i { width: 12px; height: 12px; }
  .slc-pileic i:first-child { top: 2px; } .slc-pileic i:last-child { left: 6px; }
  .slc-col { gap: 3px; }
  .slc-colhead { height: 16px; gap: 5px; }
  .slc-colface { display: none; }
  .slc-count { font-size: 13px; }
  .slc-crown { height: 16px; min-width: 28px; font-size: 15px; }
  .slc-crown[data-st="fly"], .slc-crown[data-st="prize"] { font-size: 10px; padding: 1px 4px; }
  .slc-grid { grid-template-columns: repeat(3, 18px); grid-auto-rows: 18px; gap: 3px; height: 81px; }
  .slc-cell { border-radius: 3px; }
  .slc-ctl { padding: 10px 12px; gap: 8px; border-radius: 14px; background: var(--slc-panel); box-shadow: inset 0 0 0 1px var(--slc-line); }
  .slc-status { font-size: 13px; line-height: 1.38; }
  .slc-ps { gap: 4px; }
  .slc-psl { height: 14px; font-size: 10.5px; }
  .slc-fft { font-size: 11px; }
  .slc-btns { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
  .slc-btn { font-size: 15px; padding: 0 12px; }
  .slc-feed { padding: 8px 12px; gap: 4px; border-radius: 14px; }
  .slc-fl { height: 18px; gap: 6px; font-size: 13px; line-height: 18px; }
  .slc-fg { width: 14px; }
  .slc-toast { font-size: 15px; padding: 10px 18px; border-radius: 999px; }
}