/* frontend/stackers.css — STACKERS (column draughts) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Slices / Corrals precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's CLASSIC charcoal skin (docs/design/batch 16/Stackers.dc.html, the
 * root's style + PIECE). 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) and the highlight takes the
 * palette's third accent (--pgr-gold). Player colours come from PlayerColours (`--stk-rim0` = you, `--stk-rim1` = the
 * opponent, set by stackers.js) as the RIM; the BODY is the greyscale cue — light ivory = you, charcoal = the opponent
 * — in every palette, so a mixed column reads as light v dark bands even in greyscale (the owner is colourblind). A
 * state change is never a recolour alone: a halo, a lift, a ring, a dashed box, ⊘ or ★.
 *
 * ── Geometry is the mock's ──────────────────────────────────────────────────
 * PC design box 1280 × 553 (scaled as ONE unit by BoardFit); 593 with the chat pill — only the board slot grows. Rails
 * 272 px: cards 84, turn 56, feed 243 (9 lines), status 96, buttons 52, inspector 329 (22 rows). Phone (384 × 812,
 * survives 360 × 740): players 52 · status 36 · BOARD (the only elastic slot) · inspector 60 · feed 40 · controls 48.
 * The board itself is drawn by stackers.js in px from ONE number, the cell width S (frame 15b's geo('persp')).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every slot is a FIXED size except the board, on BOTH boards (only the cell size changes between QUICK and FULL). 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. Controls disable, never hide.
 */

#stackers-game-screen, .stk-root {
  --stk-page: #101114;
  --stk-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --stk-solid: #17181d; --stk-panel: rgba(255, 255, 255, .03); --stk-line: rgba(255, 255, 255, .08);
  --stk-txt: #e9e8e4; --stk-dim: #9a9ca2;
  --stk-btn: linear-gradient(180deg, #3a3e46, #2a2d33); --stk-btnTxt: #f1f0ec;
  --stk-rad: 14px;
  --stk-hl: oklch(.84 .15 85); --stk-hlInk: #1a1508;
  --stk-sqPlay: #3a3e47; --stk-sqVoid: #1a1b20; --stk-coord: rgba(236, 233, 226, .5);
  /* the pieces: BODY = the greyscale cue, fixed in every palette (Design's PIECE) */
  --stk-yBody: #ece5d3; --stk-yEdge: #a99f88; --stk-yInk: #1f2025;
  --stk-rBody: #2b2d34; --stk-rEdge: #0c0d10; --stk-rInk: #f4f0e6;
  --stk-rim0: #4fe07c; --stk-rim1: #ff5c5c;      /* overwritten per seat by PlayerColours.apply */
  --stk-f: 'Outfit', system-ui, sans-serif;
}
/* ARCADE — the shell recolours from the equipped Arcade palette (GameTheme sets --pgr-* on the screen) */
#stackers-game-screen.gm-arcade, .gm-arcade .stk-root {
  --stk-bg: var(--pgr-bg, radial-gradient(135% 120% at 50% -10%, #0c1a3a 0%, #14285e 45%, #1e3a8a 100%));
  --stk-solid: color-mix(in oklch, var(--pgr-sel, #60a5fa) 14%, #0a0f22);
  --stk-panel: rgba(0, 0, 0, .24);
  --stk-line: color-mix(in oklch, var(--pgr-sel, #60a5fa) 42%, transparent);
  --stk-txt: #ffffff; --stk-dim: rgba(255, 255, 255, .74);
  --stk-btn: var(--pgr-sel, #60a5fa); --stk-btnTxt: #0b0c0f;
  --stk-rad: 16px;
  --stk-hl: var(--pgr-gold, #fbbf24); --stk-hlInk: #14151a;
  --stk-sqPlay: #2d3242; --stk-sqVoid: rgba(0, 0, 0, .5); --stk-coord: rgba(255, 255, 255, .6);
  --stk-f: 'Poppins', system-ui, sans-serif;
}

@keyframes stk-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes stk-settle { 0% { transform: translateY(-2px) } 55% { transform: translateY(1px) } 100% { transform: none } }
@keyframes stk-tuckin { 0% { transform: translate(var(--stk-tdx), var(--stk-tdy)) scale(.92); opacity: .6 } 100% { transform: none; opacity: 1 } }
@keyframes stk-tuckup { 0% { transform: translateY(var(--stk-rise)) } 55% { transform: translateY(var(--stk-rise)) } 80% { transform: translateY(1px) } 100% { transform: none } }
@keyframes stk-reveal { 0% { box-shadow: 0 0 0 0 transparent } 25%, 80% { box-shadow: 0 0 0 3px var(--stk-txt), 0 0 14px var(--stk-txt) } 100% { box-shadow: 0 0 0 0 transparent } }
@keyframes stk-pop { 0% { transform: none } 45% { transform: translateY(calc(var(--stk-S) * -.1)) scale(1.04) } 100% { transform: none } }
@keyframes stk-flip { 0% { transform: rotateX(0) } 50% { transform: translateY(-6px) rotateX(90deg) } 100% { transform: rotateX(0) } }
@keyframes stk-starin { 0%, 50% { opacity: 0 } 100% { opacity: 1 } }
@keyframes stk-shake { 0%, 100% { translate: 0 0 } 25% { translate: -2px 0 } 75% { translate: 2px 0 } }
@keyframes stk-arc {
  0% { transform: translateY(var(--stk-lift)) scale(1); animation-timing-function: ease-out }
  50% { transform: translateY(var(--stk-apex)) scale(var(--stk-arcs)); animation-timing-function: ease-in }
  100% { transform: translateY(0) scale(1) }
}
@keyframes stk-callin { 0% { opacity: 0; transform: scale(.86) } 100% { opacity: 1; transform: none } }
@keyframes stk-fadein { 0% { opacity: 0 } 100% { opacity: 1 } }

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

/* ── the root (phone first: 384 × 812; data-sz="sm" is the 360-wide floor) ── */
.stk-root {
  position: relative; box-sizing: border-box; overflow: hidden; isolation: isolate;
  width: 100%; height: var(--stk-phone-h, 694px); padding: 8px;
  display: grid; gap: 6px;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  grid-template-rows: 52px 36px minmax(0, 1fr) 60px 40px 48px;
  background: var(--stk-bg); color: var(--stk-txt); font-family: var(--stk-f);
  user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased;
}
.stk-root *, .stk-root *::before, .stk-root *::after { box-sizing: border-box; }
.stk-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.stk-root i { font-style: normal; }
/* the phone order: the rails dissolve into the root's grid (display: contents), every slot placed by its AREA */
.stk-railL, .stk-railR, .stk-opp, .stk-you { display: contents; }
.stk-spacer { display: none; }
.stk-you > .stk-card { grid-row: 1; grid-column: 1; }
.stk-turn { grid-row: 1; grid-column: 2; }
.stk-opp > .stk-card { grid-row: 1; grid-column: 3; }
.stk-status { grid-row: 2; grid-column: 1 / -1; }
.stk-slot { grid-row: 3; grid-column: 1 / -1; }
.stk-insp { grid-row: 4; grid-column: 1 / -1; }
.stk-feed { grid-row: 5; grid-column: 1 / -1; }
.stk-btns { grid-row: 6; grid-column: 1 / -1; }

/* the player marks: the body colour (greyscale cue) + the rim colour (PlayerColours) */
.stk-root [data-o="y"] { --stk-body: var(--stk-yBody); --stk-edge: var(--stk-yEdge); --stk-ink: var(--stk-yInk); --stk-rim: var(--stk-rim0); }
.stk-root [data-o="r"] { --stk-body: var(--stk-rBody); --stk-edge: var(--stk-rEdge); --stk-ink: var(--stk-rInk); --stk-rim: var(--stk-rim1); }
.stk-mini { position: relative; flex: none; width: 13px; height: 9px; border-radius: 50%; background: var(--stk-body); border: 1.5px solid var(--stk-rim); }
.stk-mini[data-off="1"]::after { content: ''; position: absolute; left: 22%; top: 8%; width: 56%; height: 84%; background: var(--stk-ink); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }

/* ── players' cards ─────────────────────────────────────────────────────── */
.stk-card { min-width: 0; height: 52px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-radius: var(--stk-rad); background: var(--stk-panel); border: 1px solid var(--stk-line); transition: box-shadow .2s; }
.gm-arcade .stk-card, .gm-arcade .stk-turn, .gm-arcade .stk-feed, .gm-arcade .stk-status, .gm-arcade .stk-insp { border-width: 2px; }
.stk-card[data-act="1"] { box-shadow: inset 0 0 0 2px var(--stk-rim), 0 0 18px -4px var(--stk-rim); }
.stk-card[data-s] { --stk-rim: var(--stk-rim1); }
.stk-you .stk-card { --stk-rim: var(--stk-rim0); }
.stk-av { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--stk-dim); background: rgba(255, 255, 255, .05); }
.stk-cardt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stk-namerow { display: flex; align-items: center; gap: 5px; min-width: 0; }
.stk-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ST-M9: the match — a pip per game won (first to 2), in the seat's rim colour */
.stk-pips { flex: none; display: inline-flex; gap: 3px; }
.stk-pips i { width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--stk-rim); }
.stk-pips i[data-on="1"] { background: var(--stk-rim); }
.stk-cico { width: 14px; flex: none; font-size: 11px; font-weight: 900; text-align: center; }
.stk-csub { display: none; }
.stk-cmob { font-size: 11px; color: var(--stk-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stk-cstats { display: none; }
/* the turn box (phone: TURN / n / ◷ q/30) */
.stk-turn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: var(--stk-rad); background: var(--stk-panel); border: 1px solid var(--stk-line); min-width: 0; }
.stk-turnk { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--stk-dim); }
.stk-turnno { font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-turnno .stk-tw { display: none; }
.stk-quiet { font-size: 9px; font-weight: 600; color: var(--stk-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-quiet .stk-qw { display: none; }

/* ── status ─────────────────────────────────────────────────────────────── */
.stk-status { min-width: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: var(--stk-rad); background: var(--stk-panel); border: 1px solid var(--stk-line); transition: box-shadow .2s, border-color .2s; }
.stk-status[data-kind="must"] { border: 2px solid var(--stk-hl); box-shadow: 0 0 14px -6px var(--stk-hl); }
.stk-sico { width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; background: rgba(255, 255, 255, .08); color: var(--stk-txt); border: 1.5px solid var(--stk-line); }
.stk-status[data-kind="must"] .stk-sico { background: var(--stk-hl); color: var(--stk-hlInk); border-color: var(--stk-hl); }
.stk-status[data-kind="bot"] .stk-sico { opacity: .8; }
.stk-stext { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.stk-stext b { flex: none; font-size: 14px; font-weight: 800; white-space: nowrap; }
.stk-stext span { flex: 1; min-width: 0; font-size: 12px; color: var(--stk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.stk-btns { display: flex; gap: 8px; min-width: 0; }
.stk-btn { height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--stk-rad); font-size: 15px; font-weight: 800; white-space: nowrap; cursor: pointer; border: 2px solid transparent; transition: box-shadow .12s, filter .12s, transform .08s; }
.stk-btnL { width: 112px; flex: none; background: var(--stk-panel); color: var(--stk-txt); border-color: var(--stk-line); }
.stk-btnR { flex: 1; min-width: 0; background: var(--stk-btn); color: var(--stk-btnTxt); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6); overflow: hidden; text-overflow: ellipsis; }
.stk-btn:disabled { cursor: not-allowed; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 6px, transparent 6px 12px); color: var(--stk-dim); border: 2px dashed var(--stk-line); box-shadow: none; }
@media (hover: hover) { .stk-btn:not(:disabled):hover { box-shadow: 0 0 0 3px color-mix(in oklch, var(--stk-hl) 70%, transparent); } }
.stk-btn:not(:disabled):active { transform: translateY(1px); filter: brightness(.82); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }

/* ── inspector (phone: one line + the strip of 22 chips, top → bottom) ── */
.stk-insp { min-width: 0; height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 10px; border-radius: var(--stk-rad); background: var(--stk-panel); border: 1px solid var(--stk-line); overflow: hidden; }
.stk-ihead { display: none; }
.stk-ititle { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; min-width: 0; }
.stk-ititle b { flex: none; font-size: 13px; font-weight: 800; }
.stk-ititle span { flex: 1; min-width: 0; font-size: 11px; color: var(--stk-dim); overflow: hidden; text-overflow: ellipsis; }
.stk-irows { display: none; }
.stk-ichips { height: 14px; display: flex; align-items: center; gap: 1px; }
.stk-itop { width: 24px; flex: none; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--stk-dim); }
.stk-ic { position: relative; flex: none; width: 12px; height: 8px; border-radius: 50%; visibility: hidden; background: var(--stk-body); border: 1.5px solid var(--stk-rim); }
.stk-ic[data-on="1"] { visibility: visible; }
.stk-ic[data-band="1"] { margin-left: 5px; }
.stk-root[data-sz="sm"] .stk-ic { width: 11px; }
.stk-ic[data-off="1"]::after { content: ''; position: absolute; left: 22%; top: 6%; width: 56%; height: 88%; background: var(--stk-ink); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }

/* ── feed (phone: the newest two) ───────────────────────────────────────── */
.stk-feed { min-width: 0; height: 40px; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; border-radius: var(--stk-rad); background: var(--stk-panel); border: 1px solid var(--stk-line); overflow: hidden; }
.stk-feedk { display: none; }
.stk-feedrows { display: flex; flex-direction: column; }
.stk-fl { height: 17px; flex: none; font-size: 12px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--stk-dim); }
.stk-fl[data-age="0"] { color: var(--stk-txt); font-weight: 700; }
.stk-fl:nth-child(n+3) { display: none; }

/* ══ THE BOARD — perspective wells (frame 15b), every px from S (stackers.js stkGeoFor) ══ */
.stk-slot { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.stk-board {
  position: relative; flex: none; isolation: isolate;
  background: color-mix(in oklch, var(--stk-sqVoid) 70%, var(--stk-sqPlay));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 var(--stk-lip, 10px) 0 color-mix(in oklch, var(--stk-sqVoid) 70%, #000), 0 calc(var(--stk-lip, 10px) + 22px) 44px -16px rgba(0, 0, 0, .8);
}
.stk-cells { position: absolute; inset: 0; }
.stk-cell { position: absolute; overflow: visible; cursor: default; -webkit-tap-highlight-color: transparent; }
.stk-well, .stk-wellhl, .stk-dot, .stk-ring, .stk-target, .stk-insring { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
.stk-well { background: var(--stk-sqPlay); box-shadow: inset 0 calc(var(--stk-S) * .07) calc(var(--stk-S) * .05) rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .08); }
.stk-wellhl { background: color-mix(in oklch, var(--stk-hl) 16%, transparent); opacity: 0; transition: opacity .12s; }
.stk-dot { background: var(--stk-hl); display: none; }
.stk-ring { border-style: solid; border-color: var(--stk-hl); display: none; }
.stk-ring > i { position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; margin: -9% 0 0 -9%; border-radius: 50%; background: var(--stk-hl); }
.stk-target { border-style: dashed; border-color: var(--stk-hl); display: none; z-index: 3; }
.stk-insring { border-style: dotted; border-color: var(--stk-txt); display: none; z-index: 3; }
.stk-cell[data-land="dot"] .stk-dot, .stk-cell[data-land="ring"] .stk-ring { display: block; }
.stk-cell[data-target="1"] .stk-target { display: block; }
.stk-cell[data-insp="1"] .stk-insring { display: block; }
.stk-cell[data-land]:not([data-land=""]) { cursor: pointer; }
@media (hover: hover) {
  .stk-cell[data-land]:not([data-land=""]):hover .stk-wellhl { opacity: 1; }
  .stk-cell[data-land="dot"]:hover .stk-dot, .stk-cell[data-land="ring"]:hover .stk-ring { filter: drop-shadow(0 0 calc(var(--stk-S) * .15) var(--stk-hl)); }
}
.stk-cell[data-land]:not([data-land=""]):active .stk-wellhl { opacity: 1; background: color-mix(in oklch, var(--stk-hl) 30%, transparent); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45); }
/* coordinates in the margin */
.stk-coordn, .stk-coordl { position: absolute; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--stk-coord); line-height: 1; pointer-events: none; }
.stk-coordn { top: 0; height: 100%; }
.stk-coordl { left: 0; width: 100%; }
.stk-coordfree.stk-coordn { height: auto; }

/* the column: discs as short cylinders, the commander's face on top */
.stk-stack { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stk-cell[data-tap]:not([data-tap="0"]) .stk-stack { pointer-events: auto; }
.stk-disc, .stk-face, .stk-chip, .stk-halo, .stk-shadow { position: absolute; display: block; }
.stk-disc { background: linear-gradient(90deg, var(--stk-edge), var(--stk-body) 28%, var(--stk-body) 58%, var(--stk-edge)); border-style: solid; border-color: var(--stk-rim); transition: translate .12s ease-out, opacity .2s; }
.stk-disc[data-j="0"] { box-shadow: 0 calc(var(--stk-S) * .04) calc(var(--stk-S) * .07) rgba(0, 0, 0, .55); }
.stk-face { border-radius: 50%; background: radial-gradient(closest-side, var(--stk-body) 0 54%, var(--stk-edge) 56% 64%, var(--stk-body) 66%); border-style: solid; border-color: var(--stk-rim); transition: translate .12s ease-out, opacity .2s; }
.stk-star { position: absolute; left: 30.5%; top: 22%; width: 39%; height: 56%; background: var(--stk-ink); display: block; }
.stk-chip { display: flex; align-items: center; justify-content: center; padding: 0 3px; background: var(--stk-body); color: var(--stk-ink); border: 1px solid var(--stk-rim); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; z-index: 2; transition: translate .12s ease-out; }
.stk-halo { border-radius: 50%; border-style: solid; border-color: var(--stk-hl); display: none; }
.stk-shadow { border-radius: 50%; background: rgba(0, 0, 0, .5); filter: blur(2px); opacity: 0; transition: opacity .12s; }
.stk-used { position: absolute; left: 4%; top: 4%; z-index: 5; border-radius: 50%; background: var(--stk-hl); color: var(--stk-hlInk); display: none; align-items: center; justify-content: center; font-weight: 900; line-height: 1; pointer-events: none; }
.stk-used[data-on="1"] { display: flex; }
.stk-no { position: absolute; right: 3%; top: 3%; z-index: 6; border-radius: 50%; border: 1.5px solid var(--stk-txt); background: rgba(0, 0, 0, .55); color: var(--stk-txt); display: none; align-items: center; justify-content: center; font-weight: 900; line-height: 1; pointer-events: none; }
/* the NEW TOP tag fades in AND out (owner playtest 2: no blink) — opacity + a 3 px drift, never display */
.stk-tag { position: absolute; left: 50%; top: calc(var(--stk-S) * -.12); transform: translateX(-50%); z-index: 7; padding: 1px 6px; border-radius: 6px; background: var(--stk-hl); color: var(--stk-hlInk); font-weight: 900; letter-spacing: .06em; white-space: nowrap; line-height: 1.15; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); pointer-events: none;
  opacity: 0; visibility: hidden; translate: 0 3px; transition: opacity .22s ease-in, translate .22s ease-in, visibility 0s linear .22s; }
.stk-tag[data-on="1"] { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .16s ease-out, translate .16s ease-out, visibility 0s; }

/* states — glow, lift, press, dim; never size */
.stk-cell[data-tap="mine"], .stk-cell[data-tap="confirm"], .stk-cell[data-tap="insp"] { cursor: pointer; }
.stk-cell[data-tap="locked"] { cursor: not-allowed; }
.stk-cell[data-sel="1"] .stk-halo, .stk-cell[data-must="1"] .stk-halo { display: block; box-shadow: 0 0 calc(var(--stk-S) * .18) var(--stk-hl); }
.stk-cell[data-must="1"] .stk-halo { box-shadow: 0 0 calc(var(--stk-S) * .18) var(--stk-hl), 0 0 0 calc(var(--stk-S) * .06) color-mix(in oklch, var(--stk-hl) 30%, transparent); animation: stk-pulse 1.2s ease-in-out infinite; }
.stk-cell[data-sel="1"] :is(.stk-disc, .stk-face, .stk-chip), .stk-cell[data-lift="1"] :is(.stk-disc, .stk-face, .stk-chip) { translate: 0 calc(var(--stk-S) * -.1); }
.stk-cell[data-lift="1"] :is(.stk-disc, .stk-face, .stk-chip) { translate: 0 calc(var(--stk-S) * -.2); }
.stk-cell[data-sel="1"] .stk-shadow, .stk-cell[data-lift="1"] .stk-shadow { opacity: 1; }
@media (hover: hover) {
  .stk-cell:is([data-tap="mine"], [data-tap="confirm"]):not([data-sel="1"]):hover :is(.stk-disc, .stk-face, .stk-chip) { translate: 0 calc(var(--stk-S) * -.06); }
  .stk-cell:is([data-tap="mine"], [data-tap="confirm"]):hover .stk-halo { display: block; box-shadow: 0 0 calc(var(--stk-S) * .18) var(--stk-hl); }
  .stk-cell[data-tap="locked"]:hover .stk-no { display: flex; }
  .stk-cell[data-tap="insp"]:hover .stk-insring { display: block; }
}
.stk-cell:is([data-tap="mine"], [data-tap="confirm"], [data-tap="insp"]):active .stk-face { filter: brightness(.74); }
.stk-cell:is([data-tap="mine"], [data-tap="confirm"]):active :is(.stk-disc, .stk-face, .stk-chip) { translate: 0 0; }
.stk-cell[data-dim="1"] :is(.stk-disc, .stk-face, .stk-chip) { opacity: .4; }
.stk-root[data-lock="1"] .stk-cell { cursor: default; }
.stk-root[data-lock="1"] .stk-cell[data-tap="insp"] { cursor: pointer; }

/* ── the landing beats (ST-M2: stagger on the LANDING only) ── */
.stk-cell[data-fx="settle"] :is(.stk-disc, .stk-face) { animation: stk-settle 120ms ease-out calc(var(--j) * 25ms) backwards; }
.stk-cell[data-fx="tuck"] .stk-disc[data-j="0"] { animation: stk-tuckin 220ms ease-out both; }
.stk-cell[data-fx="tuck"] :is(.stk-disc:not([data-j="0"]), .stk-face) { animation: stk-tuckup 260ms ease-out calc(var(--j) * 15ms) backwards; }
.stk-cell:is([data-fx="reveal"], [data-fx="freed"]) .stk-face { animation: stk-reveal 1200ms ease-out; }
.stk-pop { animation: stk-pop 360ms ease-out calc(var(--pj) * 25ms) backwards !important; }
.stk-cell[data-fx="freed"] .stk-face { animation: stk-reveal 1200ms ease-out, stk-pop 360ms ease-out calc(var(--pj, 0) * 25ms) backwards !important; }
.stk-cell[data-fx="flip"] .stk-face { animation: stk-flip 300ms ease-in-out; }
.stk-cell[data-fx="flip"] .stk-star { animation: stk-starin 300ms linear; }
.stk-cell[data-fx="unflip"] .stk-face { animation: stk-flip 220ms ease-in-out; }
.stk-cell[data-fx="lock"] .stk-stack { animation: stk-shake 180ms ease-in-out var(--stk-lockd, 0ms) 2 backwards; }
.stk-cell[data-fx="lock"] .stk-no { display: flex; }
.stk-cell[data-fx="rise"] :is(.stk-disc, .stk-face, .stk-chip) { translate: 0 calc(var(--stk-S) * -.1); transition: translate 240ms ease-out; }
.stk-cell[data-fx="rise"] .stk-halo { display: block; border-color: var(--stk-rim0); box-shadow: 0 0 calc(var(--stk-S) * .18) var(--stk-rim0); }

/* the path overlay + the fly layer (TriGammon's tg-fly) — inside the board box, never fixed */
.stk-svg { position: absolute; z-index: 40; pointer-events: none; overflow: visible; }
.stk-fly { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.stk-flyer { position: absolute; }
.stk-flyin { position: absolute; inset: 0; }
.stk-flyer.stk-lifting .stk-flyin { transform: translateY(var(--stk-lift)); transition: transform 120ms ease-out; }
.stk-flyer.stk-lifted .stk-flyin { transform: translateY(var(--stk-lift)); }
.stk-flyer.stk-arcing .stk-flyin { animation: stk-arc var(--stk-arcms, 260ms) linear forwards; }

/* callouts: SCREEN-LEVEL siblings of the board, absolute in the root, clamped inside it by stackers.js */
.stk-callouts { position: absolute; inset: 0; z-index: 80; pointer-events: none; }
.stk-callout { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border-radius: 14px; background: var(--stk-hl); color: var(--stk-hlInk); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .75), 0 0 0 3px color-mix(in oklch, var(--stk-hl) 35%, transparent); white-space: nowrap; animation: stk-callin .18s ease-out; transition: opacity .22s ease-in, translate .22s ease-in; }
/* its exit (stkCallout adds .stk-out for the last STK_FX.calloutOut ms) */
.stk-callout.stk-out { opacity: 0; translate: 0 -6px; }
.stk-callout b { font-size: 17px; font-weight: 900; letter-spacing: .04em; line-height: 1.05; }
.stk-cosm { font-size: 10px; font-weight: 700; letter-spacing: .14em; opacity: .8; }
.stk-callout-big { padding: 12px 22px; }
.stk-callout-big b { font-size: 28px; }

/* the end card's rows */
.stk-endrows { display: flex; flex-direction: column; gap: 6px; }
.stk-endrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.stk-endrow[data-win="1"] { font-weight: 800; }
.stk-enddisc { width: 18px; height: 12px; border-radius: 50%; border: 2px solid; }
.stk-enddisc[data-o="y"] { background: #ece5d3; border-color: #4fe07c; }
.stk-enddisc[data-o="r"] { background: #2b2d34; border-color: #ff5c5c; }
.stk-endpart { font-size: 12px; opacity: .75; white-space: nowrap; }
.stk-endnote { margin-top: 8px; font-size: 12px; opacity: .7; line-height: 1.45; }

/* the 360-wide floor */
.stk-root[data-sz="sm"] { padding: 7px; gap: 5px; }
.stk-root[data-sz="sm"] .stk-card { gap: 5px; padding: 0 7px; }
.stk-root[data-sz="sm"] .stk-av { width: 24px; height: 24px; }

/* ── PHONE chrome ───────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #stackers-game-screen.stk-playing .wrap { padding: 0; max-width: none; }
  #stackers-game-screen.stk-playing .topbar { display: none; }
  /* 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. No ☰ here (the chat bar carries Leave). */
  #stackers-game-screen.stk-playing > .wrap { padding-top: env(safe-area-inset-top, 0px); }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (1280 × 553; 593 with the chat pill) ── */
@media (min-width: 1000px) {
  #stackers-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  #stackers-game-screen.bf-fit .wrap { overflow: visible; }
  .stk-root {
    width: 1280px; height: var(--stk-fit-h, 553px); padding: 16px; gap: 16px;
    grid-template-columns: 272px minmax(0, 1fr) 272px; grid-template-rows: minmax(0, 1fr);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  /* ARCADE: the cabinet (12 px inset, 2 px accent border, 28 px radius, shadow) — the board absorbs it */
  .gm-arcade .stk-root { padding: 26px; border-radius: 28px; box-shadow: inset 0 0 0 2px var(--pgr-sel, #60a5fa), 0 22px 46px rgba(0, 0, 0, .4); }
  .stk-railL, .stk-railR { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
  .stk-railL { grid-column: 1; grid-row: 1; }
  .stk-railR { grid-column: 3; grid-row: 1; }
  .stk-slot { grid-column: 2; grid-row: 1; }
  .stk-opp, .stk-you { display: block; flex: none; }
  .stk-spacer { display: block; flex: 1; min-height: 0; }
  .stk-card { height: 84px; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 0 14px; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; }
  .stk-av { width: 36px; height: 36px; grid-row: 1; grid-column: 1; align-self: center; }
  .stk-cardt { grid-row: 1; grid-column: 2; gap: 2px; }
  .stk-cstats { grid-row: 2; grid-column: 1 / -1; display: flex; gap: 12px; font-size: 12px; color: var(--stk-dim); white-space: nowrap; }
  .stk-cst:first-child { width: 92px; }
  .stk-cst b { font-size: 16px; color: var(--stk-txt); font-variant-numeric: tabular-nums; }
  .stk-mini { width: 16px; height: 11px; }
  .stk-name { font-size: 16px; }
  .stk-cico { display: none; }
  .stk-csub { display: block; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--stk-dim); }
  .stk-card[data-act="1"] .stk-csub { color: var(--stk-txt); }
  .stk-cmob { display: none; }
  .stk-turn { height: 56px; flex: none; flex-direction: row; justify-content: space-between; gap: 10px; padding: 0 14px; }
  .stk-turnk { display: none; }
  .stk-turnno { font-size: 22px; }
  .stk-turnno .stk-tw { display: inline; }
  .stk-quiet { width: 118px; text-align: right; font-size: 12px; }
  .stk-quiet .stk-qw { display: inline; }
  .stk-quiet .stk-qm { display: none; }
  .stk-feed { height: 243px; flex: none; justify-content: flex-start; gap: 6px; padding: 12px 14px; }
  .stk-feedk { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--stk-dim); }
  .stk-fl { height: 21px; font-size: 13px; line-height: 21px; }
  .stk-fl:nth-child(n+3) { display: block; }
  .stk-status { height: 96px; flex: none; gap: 12px; padding: 0 14px; }
  .stk-status[data-kind="must"] { box-shadow: 0 0 18px -6px var(--stk-hl); }
  .stk-sico { width: 38px; height: 38px; font-size: 18px; }
  .stk-stext { flex-direction: column; align-items: stretch; gap: 4px; }
  .stk-stext b { font-size: 19px; }
  .stk-stext span { font-size: 13px; line-height: 1.35; height: 53px; white-space: normal; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .stk-btns { height: 52px; flex: none; gap: 10px; }
  .stk-btn { height: 52px; font-size: 16px; }
  .stk-btnL { width: 108px; }
  .stk-insp { height: 329px; flex: none; justify-content: flex-start; gap: 8px; padding: 12px 14px; }
  .stk-ihead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .stk-ik, .stk-ihow { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--stk-dim); white-space: nowrap; }
  .stk-ihow { font-weight: 600; letter-spacing: 0; }
  .stk-ititle { flex-direction: column; align-items: stretch; gap: 2px; height: 40px; flex: none; }
  .stk-ititle b { font-size: 17px; }
  .stk-ititle span { font-size: 12px; white-space: nowrap; }
  .stk-irows { display: grid; height: 231px; flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(11, 21px); grid-auto-flow: column; column-gap: 6px; }
  .stk-ir { height: 21px; display: flex; align-items: center; gap: 3px; font-size: 12px; white-space: nowrap; overflow: hidden; visibility: hidden; }
  .stk-ir[data-on="1"] { visibility: visible; }
  .stk-ir[data-band="1"] { border-top: 1px dashed var(--stk-line); }
  .stk-irn { width: 12px; flex: none; text-align: right; font-size: 11px; color: var(--stk-dim); font-variant-numeric: tabular-nums; }
  .stk-ir .stk-mini { width: 16px; height: 11px; }
  .stk-ir b { flex: none; font-weight: 700; }
  .stk-irr { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--stk-dim); font-size: 10.5px; }
  .stk-ichips { display: none; }
  .stk-callout { padding: 8px 16px; }
  .stk-callout b { font-size: 22px; }
  .stk-callout-big { padding: 16px 34px; }
  .stk-callout-big b { font-size: 40px; }
}

/* reduced motion: no arcs, no stagger, the tuck an instant re-stack — the reveal ring STAYS */
@media (prefers-reduced-motion: reduce) {
  .stk-cell[data-fx] :is(.stk-disc, .stk-face, .stk-stack), .stk-pop, .stk-cell[data-must="1"] .stk-halo { animation: none !important; }
  .stk-cell:is([data-fx="reveal"], [data-fx="freed"]) .stk-face { animation: stk-reveal 1200ms ease-out !important; }
  .stk-disc, .stk-face, .stk-chip { transition: none; }
  /* callouts + tags: a fade only, no scale, no drift */
  .stk-callout { animation-name: stk-fadein; }
  .stk-callout.stk-out, .stk-tag, .stk-tag[data-on="1"] { translate: none; }
}