/* frontend/skewers.css — SKEWERS board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Salvage / Yut Nori precedent: a board suite
 * that slices its block out of style.css breaks on someone else's append.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's FLAT skin block (docs/design/Batch 5/
 * Skewers.dc.html, `[data-skin="flat"]`), renamed `--sk-*`. ⛔ THE SCREEN CARRIES THE PALETTE,
 * NOT ONLY THE BOARD: the setup card sits outside `.sk-root`, and a var() fallback is not a
 * scope. One barbecue for both schemes in slice 1.
 *
 * ── 🎨 THE PIXEL SKIN COMES LATER, AS A TOGGLE (owner 2026-09-13, the Canary / Salvage shape) ──
 * Radii, the font and the gradients are VARIABLES (`--sk-r*`, `--sk-font`, `--sk-g*`) so the
 * pixel direction (mock frame 9, `[data-skin="pixel"]`) is a class that redefines them and
 * NOTHING ELSE — a skin may change colour, radius, shadow and font; it may not move a box.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every band has a FIXED height in every phase (the roll panel is the one flexible band on the
 * phone). Buttons, the preview, every die socket, every tray group and every seat card hold
 * their space whether lit or not. Feedback changes colour, glow or a ring — never size.
 */

#skewers-game-screen, .sk-root {
  --sk-page: #0f0e0c; --sk-ink: #f5ecdf; --sk-dim: rgba(245, 236, 223, .58); --sk-dim2: rgba(245, 236, 223, .34);
  --sk-panel: rgba(255, 255, 255, .05); --sk-line: rgba(245, 236, 223, .15);
  --sk-ember: #f0863a; --sk-ember-soft: rgba(240, 134, 58, .20);
  --sk-chalk: #f7f0e0; --sk-chalk-soft: rgba(247, 240, 224, .20);
  --sk-danger: #e05e3c; --sk-danger-soft: rgba(224, 94, 60, .20);
  --sk-tile-ink: #2a231a; --sk-tile-ink2: rgba(42, 35, 26, .72); --sk-sausage: #a8532f;
  --sk-socket: rgba(0, 0, 0, .30); --sk-socket-line: rgba(245, 236, 223, .22); --sk-socket-ink: rgba(245, 236, 223, .34);
  --sk-out-ink: rgba(245, 236, 223, .46); --sk-out-line: rgba(245, 236, 223, .18);
  --sk-slab-line: rgba(0, 0, 0, .4); --sk-ghost: rgba(245, 236, 223, .20);
  --sk-card: rgba(255, 255, 255, .045); --sk-card-line: rgba(245, 236, 223, .14); --sk-card-on: rgba(240, 134, 58, .10); --sk-av: rgba(245, 236, 223, .14);
  --sk-chip: rgba(0, 0, 0, .34);
  --sk-roll-ink: #1d1207; --sk-roll-line: #f4ae6e; --sk-stop-ink: #1d1913; --sk-stop-line: rgba(255, 255, 255, .5);
  --sk-dis: rgba(255, 255, 255, .05); --sk-dis-ink: rgba(245, 236, 223, .40);
  --sk-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sk-r-box: 16px; --sk-r-tile: 7px; --sk-r-card: 10px; --sk-r-panel: 11px; --sk-r-btn: 11px; --sk-r-chip: 99px;
  --sk-g-board: radial-gradient(120% 95% at 50% -14%, #31261a 0%, #1d1711 56%, #12100c 100%);
  --sk-g-grate: repeating-linear-gradient(0deg, rgba(0, 0, 0, .34) 0 2px, rgba(0, 0, 0, 0) 2px 10px);
  --sk-g-tile: linear-gradient(180deg, #f0e3c7 0%, #dccaa6 100%);
  --sk-g-out: repeating-linear-gradient(45deg, rgba(245, 236, 223, .16) 0 3px, rgba(245, 236, 223, .03) 3px 7px);
  --sk-g-slab: linear-gradient(180deg, #d3c2a0, #ad9c7b);
  --sk-g-hatch: repeating-linear-gradient(45deg, rgba(224, 94, 60, .34) 0 3px, rgba(224, 94, 60, .05) 3px 7px);
  --sk-g-roll: linear-gradient(180deg, #f39340, #cf6a26);
  --sk-g-stop: linear-gradient(180deg, #f4edda, #d8ceb6);
  --sk-g-banner: linear-gradient(180deg, #33291d, #1e1811);
  --sk-die: 46px; --sk-gdie: 26px;
}

@keyframes sk-rise  { 0% { opacity: 0; transform: translateY(6px) } 100% { opacity: 1; transform: translateY(0) } }
@keyframes sk-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--sk-chalk-soft) } 50% { box-shadow: 0 0 0 6px rgba(247, 240, 224, .05) } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.sk-setup-card { max-width: 520px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.sk-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.sk-setup-title { margin: 0; font-size: 28px; }
.sk-setup-blurb, .sk-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.sk-setup-hint { opacity: .75; font-size: 13px; }
.sk-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sk-setup-lab { font-weight: 700; font-size: 13px; width: 64px; }
.sk-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.sk-opt { width: 44px; height: 40px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.sk-opt[data-on="1"] { background: var(--sk-ember); border-color: #cf6a26; color: var(--sk-roll-ink); }
.sk-start { height: 48px; border: 0; border-radius: 12px; background: var(--sk-ember); color: var(--sk-roll-ink); font-weight: 800; font-size: 16px; cursor: pointer; }
.sk-start:hover { filter: brightness(1.08); }

/* ── the board root (phone first) ───────────────────────────────────────── */
.sk-root {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  width: 100%; height: var(--sk-phone-h, 740px); padding: 8px;
  background: var(--sk-g-board); color: var(--sk-ink); font-family: var(--sk-font);
  border-radius: 10px;
}
.sk-root *, .sk-root *::before, .sk-root *::after { box-sizing: border-box; }
.sk-root button { font-family: var(--sk-font); -webkit-tap-highlight-color: transparent; }

.sk-head { flex: none; height: 26px; display: flex; align-items: center; gap: 8px; }
.sk-turnchip {
  /* a FIXED width — the label changes owner every turn and a content-sized chip moved the header */
  flex: none; width: 84px; text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 3px 4px; white-space: nowrap;
  border-radius: var(--sk-r-chip); border: 2px solid var(--sk-dim2); background: var(--sk-chip); color: var(--sk-dim);
}
.sk-turnchip[data-tone="ember"] { border-color: var(--sk-ember); background: var(--sk-ember-soft); color: var(--sk-ember); }
.sk-turnchip[data-tone="danger"] { border-color: var(--sk-danger); background: var(--sk-danger-soft); color: var(--sk-danger); }
.sk-brand { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; color: var(--sk-dim); white-space: nowrap; }
.sk-headspace { flex: 1; }
.sk-headr { flex: none; width: 112px; text-align: right; overflow: hidden; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--sk-dim); white-space: nowrap; }
.sk-menu, .sk-info {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--sk-line);
  background: var(--sk-panel); color: var(--sk-ink); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.sk-info { font-weight: 700; display: none; }
.sk-menu:hover, .sk-info:hover { border-color: var(--sk-ember); color: var(--sk-ember); }

/* ── the grill (two rows of eight on the phone) ─────────────────────────── */
.sk-grill {
  flex: none; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 4px 0;
  background: var(--sk-g-grate); border-radius: var(--sk-r-panel);
}
.sk-tile {
  height: 48px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden;
  border-radius: var(--sk-r-tile); background: var(--sk-g-tile); border: 2px solid rgba(0, 0, 0, .34); box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  color: var(--sk-tile-ink); transition: box-shadow .15s, border-color .15s, background .2s;
}
.sk-tnum { font-size: 16px; font-weight: 700; line-height: 1; }
.sk-saus { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sk-saus i { display: block; width: 10px; height: 3.5px; border-radius: 99px; background: var(--sk-sausage); }
.sk-tcnt { display: none; font-size: 9px; font-weight: 700; line-height: 1; color: var(--sk-tile-ink2); }
/* K4: no mark on the phone — it clipped at this width; the ring alone points */
.sk-tmark { display: none; }
.sk-tile[data-state="taken"] { background: var(--sk-socket); border: 2px dashed var(--sk-socket-line); box-shadow: none; color: var(--sk-socket-ink); }
.sk-tile[data-state="out"] { background: var(--sk-g-out); border: 2px solid var(--sk-out-line); box-shadow: none; color: var(--sk-out-ink); }
.sk-tile[data-state="taken"] .sk-saus, .sk-tile[data-state="out"] .sk-saus,
.sk-tile[data-state="back"] .sk-saus, .sk-tile[data-state="flip"] .sk-saus { display: none; }
.sk-tile[data-state="out"] .sk-tcnt, .sk-tile[data-state="taken"] .sk-tcnt { display: block; color: inherit; }
.sk-tile[data-state="target"] { border: 2px solid var(--sk-chalk); box-shadow: 0 0 0 4px var(--sk-chalk-soft), 0 2px 0 rgba(0, 0, 0, .4); }
.sk-tile[data-state="back"] { background: transparent; border: 2px dashed var(--sk-chalk); box-shadow: none; color: var(--sk-chalk); }
.sk-tile[data-state="back"] .sk-tcnt, .sk-tile[data-state="flip"] .sk-tcnt { display: block; color: inherit; }
.sk-tile[data-state="flip"] { background: var(--sk-g-out); border: 2px solid var(--sk-danger); box-shadow: 0 0 0 4px var(--sk-danger-soft); color: var(--sk-out-ink); }
.sk-tile[data-state="flip"] .sk-tcnt { color: var(--sk-danger); }

/* ── seats ───────────────────────────────────────────────────────────────── */
.sk-seats { flex: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sk-seat {
  width: calc((100% - 18px) / 4); height: 62px; flex: none; display: flex; flex-direction: column; gap: 3px; padding: 5px 6px; overflow: hidden;
  border-radius: var(--sk-r-card); background: var(--sk-card); border: 2px solid var(--sk-card-line);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.sk-seat[data-active="1"] { background: var(--sk-card-on); border: 2px solid var(--sk-ember); box-shadow: 0 0 0 3px var(--sk-ember-soft); }
.sk-seat[data-steal="1"] { border: 2px solid var(--sk-chalk); box-shadow: 0 0 0 4px var(--sk-chalk-soft); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-seathead { flex: none; display: flex; align-items: center; gap: 4px; min-width: 0; }
.sk-av {
  position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--sk-av);
  display: flex; align-items: center; justify-content: center; font-style: normal;
}
.sk-av b { font-size: 8px; font-weight: 700; color: var(--sk-ink); line-height: 1; }
/* the SHAPE badge — identity by shape, not colour (the mock's seven) */
.sk-av::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; background: var(--sk-ink); }
.sk-av[data-sh="sq"]::after { border-radius: 2px; }
.sk-av[data-sh="ci"]::after { border-radius: 50%; }
.sk-av[data-sh="tr"]::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sk-av[data-sh="di"]::after { border-radius: 1px; transform: rotate(45deg) scale(.85); }
.sk-av[data-sh="ri"]::after { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--sk-ink); }
.sk-av[data-sh="hx"]::after { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.sk-av[data-sh="cr"]::after { clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%); }
.sk-sname { flex: 1; min-width: 0; font-size: 9.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-sflag { flex: none; width: 10px; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--sk-ember); text-align: right; }
.sk-seat[data-steal="1"] .sk-sflag { color: var(--sk-chalk); }
.sk-seatmid { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 5px; }
.sk-stack { position: relative; flex: none; width: 34px; height: 34px; --off: 2px; --slabh: 3.5px; --toph: 20px; }
.sk-slabs i {
  position: absolute; left: 2px; right: 2px; bottom: calc(var(--k) * var(--off)); height: var(--slabh);
  border-radius: var(--sk-r-tile); background: var(--sk-g-slab); border: 1px solid var(--sk-slab-line);
}
.sk-top {
  position: absolute; left: 0; right: 0; bottom: calc(var(--k, 0) * var(--off)); height: var(--toph);
  display: flex; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--sk-r-tile); background: var(--sk-g-tile); border: 1.5px solid rgba(0, 0, 0, .34); box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}
.sk-top b { font-size: 11px; font-weight: 700; line-height: 1; color: var(--sk-tile-ink); }
.sk-dots { display: flex; flex-direction: column; gap: 1.5px; }
.sk-dots i { display: block; width: 2.5px; height: 2.5px; border-radius: 99px; background: var(--sk-sausage); }
.sk-stack[data-empty="1"] .sk-top { background: transparent; border: 1.5px dashed var(--sk-socket-line); box-shadow: none; }
.sk-seatnums { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.sk-ssaus { font-size: 14px; font-weight: 700; line-height: 1; }
.sk-slbl { display: none; }
.sk-sdeep { font-size: 8.5px; font-weight: 600; letter-spacing: .04em; color: var(--sk-dim); white-space: nowrap; }
.sk-smark { display: none; }
/* COMPACT phone cards for 5–7 seats: two rows, avatar · stack · sausages · flag */
.sk-root[data-seats="5"] .sk-seat, .sk-root[data-seats="6"] .sk-seat, .sk-root[data-seats="7"] .sk-seat {
  height: 44px; flex-direction: row; align-items: center; gap: 4px; padding: 4px 5px;
}
.sk-root[data-seats="5"] .sk-seathead, .sk-root[data-seats="6"] .sk-seathead, .sk-root[data-seats="7"] .sk-seathead { gap: 0; }
.sk-root[data-seats="5"] .sk-sname, .sk-root[data-seats="6"] .sk-sname, .sk-root[data-seats="7"] .sk-sname { display: none; }
.sk-root[data-seats="5"] .sk-seatmid, .sk-root[data-seats="6"] .sk-seatmid, .sk-root[data-seats="7"] .sk-seatmid { align-items: center; }
.sk-root[data-seats="5"] .sk-stack, .sk-root[data-seats="6"] .sk-stack, .sk-root[data-seats="7"] .sk-stack { width: 26px; height: 30px; --off: 1.4px; --toph: 17px; }
.sk-root[data-seats="5"] .sk-sdeep, .sk-root[data-seats="6"] .sk-sdeep, .sk-root[data-seats="7"] .sk-sdeep { display: none; }
.sk-root[data-seats="5"] .sk-seatnums, .sk-root[data-seats="6"] .sk-seatnums, .sk-root[data-seats="7"] .sk-seatnums { align-items: flex-end; justify-content: center; }
.sk-root[data-seats="5"] .sk-seathead .sk-sflag, .sk-root[data-seats="6"] .sk-seathead .sk-sflag, .sk-root[data-seats="7"] .sk-seathead .sk-sflag { display: none; }

/* ── the action area (a column on the phone) ────────────────────────────── */
.sk-act { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.sk-panel { border-radius: var(--sk-r-panel); background: var(--sk-panel); border: 1.5px solid var(--sk-line); }
.sk-plbl { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--sk-dim); white-space: nowrap; }
.sk-pnote { font-size: 9px; font-weight: 600; letter-spacing: .06em; color: var(--sk-dim); white-space: nowrap; }
.sk-prow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }

.sk-rollp { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.sk-rollp > .sk-plbl, .sk-rollp > .sk-phint { align-self: flex-start; }
.sk-phint { max-width: 100%; height: 12px; line-height: 12px; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--sk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-phint[data-hot="1"] { color: var(--sk-chalk); }
.sk-rollp[data-mine="0"] .sk-dgrid, .sk-asidep[data-mine="0"] .sk-groups { opacity: .55; }
.sk-dgrid { flex: none; display: grid; grid-template-columns: repeat(4, var(--sk-die)); gap: 7px; }
.sk-dslot {
  position: relative; width: var(--sk-die); height: var(--sk-die); border-radius: 10px; overflow: visible;
  border: 1.5px dashed var(--sk-ghost); transition: box-shadow .12s, filter .12s, transform .08s;
}
.sk-dslot[data-live="1"] { border-color: transparent; }
.sk-die { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sk-die-fallback { display: flex; align-items: center; justify-content: center; background: #f4efe4; color: #241f18; border-radius: 8px; font-weight: 800; }
.sk-hatch, .sk-used { display: none; position: absolute; pointer-events: none; font-style: normal; }
.sk-hatch { inset: 0; border-radius: 10px; background: var(--sk-g-hatch); border: 2px dashed var(--sk-danger); }
.sk-used { top: 2px; right: 3px; padding: 0 2px; border-radius: 2px; background: var(--sk-chip); font-size: 8px; font-weight: 700; color: var(--sk-danger); letter-spacing: .02em; }
.sk-dslot[data-used="1"] .sk-hatch, .sk-dslot[data-used="1"] .sk-used { display: block; }
.sk-dslot[data-used="1"] .sk-die { opacity: .8; }
.sk-dslot[data-pick="1"] { cursor: pointer; }
.sk-dslot[data-used="1"], .sk-rollp[data-mine="0"] .sk-dslot { cursor: not-allowed; }
/* hover rings EVERY die of that face (the tap sets aside the whole face) */
.sk-dslot[data-hot="1"] { box-shadow: 0 0 0 3px var(--sk-chalk), 0 0 16px -2px rgba(247, 240, 224, .55); }
.sk-dslot[data-pick="1"]:active { transform: translateY(1px); filter: brightness(.9); }

.sk-asidep { flex: none; padding: 7px 9px; display: flex; flex-direction: column; gap: 5px; }
.sk-groups { display: flex; gap: 5px; justify-content: center; }
.sk-grp {
  flex: 1 1 0; min-width: 0; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--sk-r-panel); background: transparent; border: 1.5px dashed rgba(245, 236, 223, .14);
}
.sk-grp[data-on="1"] { background: rgba(240, 134, 58, .10); border: 1.5px solid rgba(240, 134, 58, .45); }
.sk-gdie { width: var(--sk-gdie); height: var(--sk-gdie); flex: none; display: flex; border-radius: 6px; border: 1.5px dashed var(--sk-ghost); }
.sk-grp[data-on="1"] .sk-gdie { border-color: transparent; }
.sk-gn { font-size: 9.5px; font-weight: 700; line-height: 1; }
.sk-gpts { display: none; font-size: 9px; font-weight: 700; line-height: 1; color: var(--sk-dim); }

.sk-colC { flex: none; display: flex; flex-direction: column; gap: 6px; }
.sk-pvwrap { flex: none; height: 64px; display: flex; gap: 6px; }
.sk-totp { flex: none; width: 176px; padding: 8px 8px; display: flex; align-items: center; gap: 6px; }
.sk-total { flex: none; width: 1.3em; font-size: 28px; font-weight: 700; line-height: 1; text-align: left; }
.sk-totlbl { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.sk-totlbl small { font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--sk-dim); }
.sk-totlbl span { display: none; }
.sk-flamechip {
  /* a FIXED width: "NO FLAME" and "FLAME ✓" differ, and a content-sized chip moved the total beside it */
  flex: none; width: 76px; height: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0; white-space: nowrap;
  border-radius: var(--sk-r-chip); background: var(--sk-chip); border: 2px solid var(--sk-dim2); color: var(--sk-dim);
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
}
.sk-flamechip[data-on="1"] { background: var(--sk-ember-soft); border-color: var(--sk-ember); color: var(--sk-ember); }
.sk-flame { width: 12px; height: 12px; display: block; flex: none; }
.sk-flame path { fill: currentColor; }
.sk-preview {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 8px; overflow: hidden;
  border-radius: var(--sk-r-panel); background: var(--sk-panel); border: 2px solid var(--sk-line);
}
.sk-preview[data-kind="take"] { background: var(--sk-chalk-soft); border-color: var(--sk-chalk); }
.sk-preview[data-kind="steal"] { background: var(--sk-chalk-soft); border-color: var(--sk-chalk); }
.sk-preview[data-kind="none"] { background: var(--sk-danger-soft); border-color: var(--sk-danger); }
.sk-pvtile {
  flex: none; width: 26px; height: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--sk-r-tile); border: 1.5px dashed var(--sk-socket-line); color: var(--sk-dim);
}
.sk-pvtile b { font-size: 12px; font-weight: 700; line-height: 1; }
.sk-preview[data-kind="take"] .sk-pvtile, .sk-preview[data-kind="steal"] .sk-pvtile { background: var(--sk-g-tile); border: 1.5px solid rgba(0, 0, 0, .34); color: var(--sk-tile-ink); }
.sk-preview[data-kind="steal"] .sk-pvtile { border: 2.5px solid var(--sk-chalk); }
.sk-preview[data-kind="none"] .sk-pvtile { border: 2px dashed var(--sk-danger); color: var(--sk-danger); }
.sk-pvtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-pvtxt small { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: var(--sk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-pvtxt b { font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-pvtxt span { font-size: 9px; font-weight: 600; line-height: 1.3; color: var(--sk-dim); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sk-preview[data-kind="take"] small, .sk-preview[data-kind="steal"] small, .sk-preview[data-kind="steal"] .sk-pvtxt b { color: var(--sk-chalk); }
.sk-preview[data-kind="none"] small, .sk-preview[data-kind="none"] .sk-pvtxt b { color: var(--sk-danger); }

.sk-btns { flex: none; display: flex; gap: 8px; position: relative; }
/* 🌐 MP: the turn clock (2026-09-19, the Can't Stop bar) — an ABSOLUTE 3px bar just above the buttons, so it
 * can never move a box (locked layout). Off, and invisible, at every solo table. Ember = your clock, dim =
 * someone else's, danger under five seconds. */
.sk-clock {
  position: absolute; left: 0; right: 0; top: -5px; height: 3px; pointer-events: none;
  border-radius: 2px; transform-origin: left center; transform: scaleX(0); background: var(--sk-dim);
  opacity: 0; transition: opacity .18s linear;
}
.sk-clock[data-on="1"] { opacity: .85; }
.sk-clock[data-mine="1"] { background: var(--sk-ember); }
.sk-clock[data-low="1"] { background: var(--sk-danger); }
/* ⚖️ SKM6 — a seat that LEFT stays on the rail (its stack is still stealable), dimmed; colour is never alone —
 * the seat's mark says LEFT on desktop. The steal ring still shows at full strength over the dim. */
.sk-seat[data-left="1"] { opacity: .45; }
.sk-seat[data-left="1"][data-steal="1"] { opacity: 1; }
.sk-btn {
  flex: 1 1 0; min-width: 0; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  border-radius: var(--sk-r-btn); transition: filter .12s, box-shadow .12s, transform .08s;
}
.sk-btn b { font-size: 13px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.sk-btn small { font-size: 9px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; opacity: .85; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sk-btn[data-kind="roll"] { background: var(--sk-g-roll); border: 2px solid var(--sk-roll-line); color: var(--sk-roll-ink); }
.sk-btn[data-kind="stop"] { background: var(--sk-g-stop); border: 2px solid var(--sk-stop-line); color: var(--sk-stop-ink); }
@media (hover: hover) {
  .sk-btn:not(:disabled):hover { filter: brightness(1.08); box-shadow: 0 0 18px -2px rgba(240, 134, 58, .55); }
  .sk-btn[data-kind="stop"]:not(:disabled):hover { box-shadow: 0 0 18px -2px rgba(247, 240, 224, .55); }
}
.sk-btn:not(:disabled):active { transform: translateY(1px); filter: brightness(.9); }
/* ⛔ NOT YOUR TURN / NOT ALLOWED: dashed edge + dimmed ink, readable in greyscale — never a recolour alone */
/* ⛔ the SAME 2px border as the live states: flex-basis 0 shares the row AFTER borders, so a thinner
   disabled border moved both buttons half a pixel (skewers-board.test.html §10 caught it) */
.sk-btn:disabled { background: var(--sk-dis); border: 2px dashed var(--sk-socket-line); color: var(--sk-dis-ink); cursor: not-allowed; box-shadow: none; filter: none; }

.sk-feed {
  flex: none; height: 24px; display: flex; align-items: center; gap: 7px; padding: 0 9px; overflow: hidden;
  border-radius: var(--sk-r-panel); background: var(--sk-panel); border: 1.5px solid var(--sk-line);
}
.sk-feed small { flex: none; font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--sk-dim); }
.sk-feed span { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── flights + the bust banner: ABSOLUTE layers INSIDE the root, never fixed ── */
.sk-fx { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.sk-fly {
  position: absolute; width: 30px; height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transform: translate(-50%, -50%); transition-property: transform; transition-timing-function: cubic-bezier(.3, .1, .25, 1);
  border-radius: var(--sk-r-tile); background: var(--sk-g-tile); border: 1.5px solid rgba(0, 0, 0, .34); box-shadow: 0 0 0 3px rgba(12, 10, 8, .45), 0 10px 18px rgba(0, 0, 0, .5);
}
.sk-fly[data-steal="1"] { border: 2.5px solid var(--sk-chalk); box-shadow: 0 0 0 4px var(--sk-chalk-soft), 0 10px 18px rgba(0, 0, 0, .5); }
.sk-fly b { font-size: 14px; font-weight: 700; line-height: 1; color: var(--sk-tile-ink); }
.sk-fly span { display: flex; flex-direction: column; gap: 1.5px; }
.sk-fly i { display: block; width: 9px; height: 3px; border-radius: 99px; background: var(--sk-sausage); }
.sk-banner {
  /* phone: over the roll panel (the flexible band, mostly sockets during a bust), never the tray */
  position: absolute; left: 50%; top: 42%; width: calc(100% - 28px); max-width: 360px; transform: translate(-50%, -50%); z-index: 9; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--sk-r-panel); background: var(--sk-g-banner); border: 2px solid var(--sk-ember); box-shadow: 0 22px 54px rgba(0, 0, 0, .6);
}
.sk-banner[data-on="0"] { visibility: hidden; }
.sk-banner[data-on="1"] { animation: sk-rise .25s ease-out; }
.sk-banner[data-tone="danger"] { border-color: var(--sk-danger); }
.sk-banner b { flex: none; font-size: 17px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--sk-danger); white-space: nowrap; }
.sk-banner span { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 600; line-height: 1.35; color: var(--sk-ink); }
.sk-banner small { flex: none; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: var(--sk-dim); white-space: nowrap; }

/* end screen rows (GameEndScreen html section) */
.sk-endrows { display: flex; flex-direction: column; gap: 6px; }
.sk-endrow { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.sk-endrow[data-win="1"] { background: rgba(240, 134, 58, .16); }
.sk-endnm { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.sk-endnm .sk-av { width: 22px; height: 22px; background: rgba(127, 127, 127, .25); }
.sk-endnm .sk-av b { font-size: 10px; color: inherit; }
.sk-endnm .sk-av::after { background: currentColor; }
.sk-endst { font-size: 11px; opacity: .75; font-family: ui-monospace, monospace; }
.sk-endsc { text-align: right; font-weight: 800; font-size: 16px; }
.sk-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .sk-seat, .sk-banner { animation: none !important; }
  .sk-fly { transition: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  /* ⛔ The vertical gutter goes too (the Pachisi / Salvage finding), scoped to a live board. */
  #skewers-game-screen.sk-playing .wrap { padding: 0 2px; max-width: none; }
  #skewers-game-screen.sk-playing .topbar { display: none; }
  #skewers-game-screen.sk-playing.sk-topbar-open .topbar { display: flex; }
}
/* the 360 × 740 stress frame (mock `data-narrow`) */
@media (max-width: 999px) and (max-height: 760px) {
  .sk-root { --sk-die: 40px; --sk-gdie: 22px; gap: 5px; padding: 6px; }
  .sk-tile { height: 40px; }
  .sk-tnum { font-size: 15px; }
  .sk-seat { height: 57px; }
  .sk-root[data-seats="5"] .sk-seat, .sk-root[data-seats="6"] .sk-seat, .sk-root[data-seats="7"] .sk-seat { height: 40px; }
  .sk-grp { height: 38px; }
  .sk-pvwrap { height: 58px; }
  .sk-totp { width: 150px; gap: 5px; padding: 6px 7px; }
  .sk-total { font-size: 24px; }
  .sk-totlbl { visibility: hidden; }   /* 150px holds the number and the flame chip, not the word */
  .sk-flamechip { width: 74px; gap: 3px; letter-spacing: .02em; }
  .sk-btn { height: 40px; }
  .sk-feed { height: 20px; }
  .sk-dgrid { gap: 6px; }
}
/* ⛔⛔ SHORT PHONES (2026-09-19, the MP arm's chat-bar walk). Below ~660px of height the fit's floor (560) BOUND:
 * at 375×600 the board ended 25px under the bar and collapsing the bar grew nothing — solo too — because every
 * band here is fixed and the roll panel (the one flexible band) clips its dice below its content height. This
 * tier tightens every FIXED band so the board's minimum is ~500, and skFitPhone's floor follows it (SK_PHONE_MIN).
 * ⛔ Every value is a budget line: the suite asserts the dice are never clipped inside the roll panel. */
@media (max-width: 999px) and (max-height: 700px) {
  .sk-root { --sk-die: 32px; --sk-gdie: 18px; gap: 4px; padding: 5px; }
  .sk-head { height: 24px; }
  .sk-grill { gap: 3px; padding: 3px 0; }
  .sk-tile { height: 32px; gap: 1px; }
  .sk-tnum { font-size: 13px; }
  .sk-saus i { width: 8px; height: 3px; }
  .sk-seat { height: 50px; padding: 4px 5px; gap: 2px; }
  .sk-root[data-seats="5"] .sk-seat, .sk-root[data-seats="6"] .sk-seat, .sk-root[data-seats="7"] .sk-seat { height: 34px; padding: 3px 5px; }
  .sk-root[data-seats="5"] .sk-stack, .sk-root[data-seats="6"] .sk-stack, .sk-root[data-seats="7"] .sk-stack { height: 26px; --toph: 15px; }
  .sk-stack { width: 30px; height: 28px; --toph: 17px; }
  .sk-act { gap: 4px; }
  .sk-rollp { padding: 6px 8px; gap: 4px; }
  .sk-dgrid { gap: 5px; }
  .sk-asidep { padding: 5px 8px; gap: 3px; }
  .sk-grp { height: 30px; gap: 1px; }
  .sk-colC { gap: 4px; }
  .sk-pvwrap { height: 46px; gap: 4px; }
  .sk-totp { width: 140px; gap: 4px; padding: 4px 6px; }
  .sk-total { font-size: 22px; }
  .sk-totlbl { visibility: hidden; }
  .sk-flamechip { width: 72px; height: 20px; gap: 3px; letter-spacing: .02em; }
  .sk-preview { padding: 4px 6px; gap: 5px; }
  .sk-pvtile { height: 28px; }
  .sk-pvtxt span { -webkit-line-clamp: 1; }
  .sk-btn { height: 36px; }
  .sk-feed { height: 18px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit ─────────────── */
@media (min-width: 1000px) {
  #skewers-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .sk-root { width: 1280px; height: 553px; padding: 14px; gap: 10px; border-radius: var(--sk-r-box); --sk-die: 60px; --sk-gdie: 46px; }
  .sk-menu { display: none; }
  .sk-info { display: inline-flex; }
  .sk-head { height: 34px; }
  .sk-turnchip { width: 136px; font-size: 10px; padding: 4px 6px; }
  .sk-brand { font-size: 10.5px; }
  .sk-headr { width: 300px; font-size: 12px; letter-spacing: .12em; }

  /* the grill: sixteen in a row */
  .sk-grill { grid-template-columns: repeat(16, 1fr); gap: 5px; padding: 5px 0; }
  .sk-tile { height: 92px; gap: 3px; }
  .sk-tnum { font-size: 26px; }
  .sk-saus { gap: 3px; }
  .sk-saus i { width: 15px; height: 5px; }
  .sk-tcnt { display: block; font-size: 10px; }
  .sk-tmark { display: flex; height: 14px; align-items: center; font-size: 8px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; color: var(--sk-dim); }
  .sk-tile[data-state="target"] .sk-tmark, .sk-tile[data-state="back"] .sk-tmark { color: var(--sk-chalk); }
  .sk-tile[data-state="flip"] .sk-tmark { color: var(--sk-danger); }

  /* K1: 7 × 172 + 6 × 8 = 1252, the whole inner width — no wrap, no slack */
  .sk-seats { flex-wrap: nowrap; gap: 8px; }
  .sk-seat, .sk-root[data-seats] .sk-seat {
    width: 172px; height: 118px; padding: 10px; gap: 4px; flex-direction: column; align-items: stretch;
  }
  .sk-root[data-seats] .sk-seathead { gap: 5px; }
  .sk-av { width: 24px; height: 24px; }
  .sk-av b { font-size: 10px; }
  .sk-av::after { width: 11px; height: 11px; }
  .sk-av[data-sh="ri"]::after { box-shadow: inset 0 0 0 3px var(--sk-ink); }
  .sk-root[data-seats] .sk-sname { display: block; font-size: 13px; }
  .sk-root[data-seats] .sk-seathead .sk-sflag { display: block; }
  .sk-sflag { font-size: 13px; width: 14px; }
  .sk-root[data-seats] .sk-seatmid { align-items: flex-end; gap: 6px; }
  .sk-stack, .sk-root[data-seats] .sk-stack { width: 54px; height: 52px; --off: 3px; --slabh: 5px; --toph: 30px; }
  .sk-top b { font-size: 15px; }
  .sk-top { gap: 3px; }
  .sk-dots i { width: 4px; height: 4px; }
  .sk-root[data-seats] .sk-seatnums { align-items: flex-start; justify-content: flex-end; }
  .sk-ssaus { font-size: 21px; }
  .sk-slbl { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--sk-dim); white-space: nowrap; }
  .sk-root[data-seats] .sk-sdeep { display: block; font-size: 10px; letter-spacing: .06em; }
  .sk-smark { display: flex; flex: none; height: 14px; align-items: center; overflow: hidden; font-size: 8px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; color: var(--sk-dim2); }
  .sk-seat[data-active="1"] .sk-smark { color: var(--sk-ember); }
  .sk-seat[data-steal="1"] .sk-smark { color: var(--sk-chalk); }
  .sk-root[data-seats="7"] .sk-seat { width: 172px; }

  /* action row: 330 (flex) + 462 + 440 + 2 × 10 = 1252 */
  .sk-act { flex-direction: row; gap: 10px; }
  .sk-rollp { flex: 1 0 auto; width: 330px; padding: 12px; gap: 7px; }
  .sk-plbl { font-size: 10.5px; }
  .sk-phint { font-size: 10px; height: 13px; line-height: 13px; }
  .sk-dgrid { gap: 8px; }
  .sk-dslot { border-radius: 10px; }
  .sk-used { font-size: 10px; }
  .sk-asidep { width: 462px; padding: 12px; gap: 7px; justify-content: center; }
  .sk-pnote { font-size: 10px; }
  .sk-groups { gap: 8px; }
  .sk-grp { flex: none; width: 66px; height: 120px; gap: 5px; }
  .sk-gdie { border-radius: 10px; }
  .sk-gn { font-size: 10.5px; }
  .sk-gpts { display: block; font-size: 10px; }
  .sk-colC { width: 440px; gap: 10px; }
  .sk-pvwrap { flex: 1 1 auto; height: auto; min-height: 0; flex-direction: column; gap: 10px; }
  .sk-totp { width: auto; height: 54px; flex: none; padding: 0 12px; gap: 10px; }
  .sk-total { font-size: 40px; width: 1.25em; }
  .sk-totlbl small { font-size: 10px; letter-spacing: .16em; }
  .sk-totlbl span { display: block; font-size: 10px; font-weight: 600; color: var(--sk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sk-flamechip { width: 100px; height: 26px; font-size: 10px; gap: 5px; }
  .sk-flame { width: 13px; height: 13px; }
  .sk-preview { flex: 1 1 auto; min-height: 0; padding: 8px 12px; gap: 9px; }
  .sk-pvtile { width: 42px; height: 52px; gap: 3px; }
  .sk-pvtile b { font-size: 22px; }
  .sk-pvtile .sk-dots i { width: 4px; height: 4px; }
  .sk-pvtxt { gap: 3px; }
  .sk-pvtxt small { font-size: 10px; letter-spacing: .14em; }
  .sk-pvtxt b { font-size: 15px; }
  .sk-pvtxt span { font-size: 10px; -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; }
  .sk-btns { gap: 10px; }
  .sk-btn { height: 54px; }
  .sk-btn b { font-size: 15px; }
  .sk-btn small { font-size: 10px; }
  .sk-feed { height: 30px; }
  .sk-feed small { font-size: 10px; }
  .sk-feed span { font-size: 12px; }

  .sk-fly { width: 36px; height: 46px; }
  .sk-fly b { font-size: 16px; }
  .sk-banner { left: 14px; top: auto; bottom: 150px; width: 792px; max-width: none; transform: none; justify-content: flex-start; padding: 12px 16px; gap: 12px; }
  .sk-banner b { font-size: 24px; }
  .sk-banner span { font-size: 12px; }
  .sk-banner small { font-size: 10px; }
}