/* frontend/safecracker.css — SAFECRACKER board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Dibs / Gulls precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from mock V2's VECTOR / FLAT skin (docs/design/Batch6/SafecrackerV2.dc.html,
 * `.sk-flat`). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card sits outside `.sc-root`.
 * Crackers are SHAPE + LETTER first, never colour; ● vs ○ is filled vs hollow; caught adds hatch + an icon + a word.
 *
 * ── 🎨 THE PIXEL SKIN COMES LATER, AS A TOGGLE (mock F10) ────────────────────
 * Radii, borders and fonts are variables (`--sc-r*`, `--sc-font`): the mock's `.sk-pixel` is a class that redefines
 * them and colours, and NOTHING ELSE.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements. Desktop: three fixed columns in the 1280 × 553 box. Phone: `.sc-body` and its columns are
 * `display: contents`, so every panel is a cell of ONE grid; the HISTORY | NOTEPAD band is the one flexible row.
 * Every text box is a fixed width or fills its slot; 10 history rows and 4 cracker slots always exist. Feedback
 * changes colour, glow or a transform — never size or spacing. A disabled die is dimmed by a layer ABOVE its slot,
 * never a filter on the renderer's face.
 */

#safecracker-game-screen, .sc-root {
  --sc-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --sc-panel: rgba(255, 255, 255, .04); --sc-panel2: rgba(255, 255, 255, .025); --sc-line: rgba(255, 255, 255, .075); --sc-line2: rgba(255, 255, 255, .16);
  --sc-txt: #e9e8e4; --sc-dim: #8d8f95; --sc-dim2: #62656c;
  --sc-gold: oklch(.80 .15 85); --sc-goldBg: oklch(.80 .15 85 / .15); --sc-goldGlow: oklch(.80 .15 85 / .45); --sc-goldInk: #1d1604;
  --sc-good: oklch(.76 .13 152); --sc-goodBg: oklch(.76 .13 152 / .14);
  --sc-risk: oklch(.71 .15 32); --sc-riskBg: oklch(.71 .15 32 / .15); --sc-riskGlow: oklch(.71 .15 32 / .5);
  --sc-steel1: #2a2d34; --sc-steel2: #1a1c21; --sc-bezel: #454a54; --sc-bezel2: #0f1013;
  --sc-dieVeil: rgba(16, 17, 21, .58); --sc-ghost: rgba(255, 255, 255, .14);
  --sc-btn: linear-gradient(180deg, #333841, #22252b); --sc-btnTxt: #e9e8e4;
  --sc-primary: linear-gradient(180deg, oklch(.84 .14 85), oklch(.72 .14 80));
  --sc-openBtn: linear-gradient(180deg, oklch(.74 .15 32), oklch(.62 .15 30));
  --sc-off: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
  --sc-scrim: rgba(7, 8, 10, .62); --sc-card: #1b1d22; --sc-hatch: repeating-linear-gradient(135deg, rgba(0, 0, 0, .35) 0 5px, rgba(0, 0, 0, 0) 5px 10px);
  --sc-font: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --sc-r1: 14px; --sc-r2: 10px; --sc-r3: 7px; --sc-rDie: 8px; --sc-rDial: 18px; --sc-rPill: 999px; --sc-shadow: 0 8px 22px -12px rgba(0, 0, 0, .8);
}

@keyframes sc-drop { 0% { transform: translateY(-26px); opacity: 0 } 65% { transform: translateY(3px); opacity: 1 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes sc-tick { 0% { opacity: 0; transform: translateY(-6px) } 60% { opacity: 1; transform: translateY(1px) } 100% { opacity: 1; transform: translateY(0) } }
@keyframes sc-think { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes sc-flip { 0% { transform: perspective(700px) rotateX(-88deg); opacity: .2 } 70% { transform: perspective(700px) rotateX(8deg); opacity: 1 } 100% { transform: perspective(700px) rotateX(0); opacity: 1 } }
@keyframes sc-rise { 0% { opacity: 0; transform: translateY(14px) } 100% { opacity: 1; transform: translateY(0) } }
@keyframes sc-alarm { 0%, 100% { box-shadow: 0 0 0 2px var(--sc-risk), 0 0 6px -2px var(--sc-riskGlow) } 50% { box-shadow: 0 0 0 2px var(--sc-risk), 0 0 26px 2px var(--sc-riskGlow) } }
@keyframes sc-roll { 0% { transform: translateX(-110%); opacity: .2 } 100% { transform: translateX(0); opacity: 1 } }
@keyframes sc-pop { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } }
@keyframes sc-door { 0% { transform: perspective(500px) rotateY(0) } 60% { transform: perspective(500px) rotateY(-68deg) } 100% { transform: perspective(500px) rotateY(-50deg) } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.sc-setup-card { max-width: 540px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.sc-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.sc-setup-title { margin: 0; font-size: 28px; }
.sc-setup-blurb, .sc-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.sc-setup-hint { opacity: .75; font-size: 13px; }
.sc-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-setup-lab { font-weight: 700; font-size: 13px; min-width: 72px; }
.sc-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-opt { width: 40px; height: 36px; border-radius: 10px; border: 1px solid rgba(128, 128, 128, .4); background: rgba(255, 255, 255, .06); color: inherit; font-weight: 800; cursor: pointer; }
.sc-opt[data-on="1"] { border-color: #d9a54a; color: #d9a54a; box-shadow: 0 0 12px -4px #d9a54a; }
.sc-opt-wide { width: auto; padding: 0 14px; }
.sc-setup-note { flex: 1 1 220px; font-size: 12.5px; opacity: .75; line-height: 1.4; }
.sc-gdot { color: oklch(.76 .13 152); }
.sc-start { height: 48px; border: 0; border-radius: 12px; background: var(--sc-primary); color: var(--sc-goldInk); font-weight: 800; font-size: 16px; cursor: pointer; }
@media (hover: hover) { .sc-start:hover, .sc-opt:hover { filter: brightness(1.1); } }

/* ══ THE BOARD ROOT — phone first (the mock's 384 × 694 arrangement) ═══════ */
.sc-root {
  --sc-pad: 10px; --sc-gap: 8px; --sc-headH: 34px; --sc-stripH: 60px; --sc-feedH: 20px; --sc-ctlH: 40px; --sc-lockH: 84px;
  --sc-diceH: 50px; --sc-submitH: 46px; --sc-plateW: 64px; --sc-dialGap: 6px; --sc-noteW: 152px; --sc-segW: 160px;
  --sc-trayDie: 44px; --sc-dialDie: 44px; --sc-miniDie: 16px; --sc-cellH: 23px; --sc-rowGap: 2px; --sc-promptFs: 11px; --sc-feedFs: 11.5px;
  --sc-resTop: calc(var(--sc-pad) + var(--sc-headH) + var(--sc-stripH) + var(--sc-feedH) + 3 * var(--sc-gap));
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--sc-phone-h, 694px); padding: var(--sc-pad);
  display: grid; gap: var(--sc-gap);
  grid-template-columns: minmax(0, 1fr) var(--sc-noteW);
  grid-template-rows: var(--sc-headH) var(--sc-stripH) var(--sc-feedH) var(--sc-ctlH) var(--sc-lockH) var(--sc-diceH) var(--sc-submitH) minmax(0, 1fr);
  grid-template-areas: "head head" "strip strip" "feed feed" "ctl ctl" "lock lock" "tray tray" "submit submit" "hist note";
  background: var(--sc-bg); color: var(--sc-txt); font-family: var(--sc-font); font-variant-numeric: tabular-nums;
  border-radius: var(--sc-r1); box-shadow: inset 0 0 0 1px var(--sc-line);
  user-select: none; -webkit-user-select: none;
}
.sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; }
.sc-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; color: inherit; }
.sc-root i, .sc-root em { font-style: normal; }
.sc-body, .sc-colA, .sc-colB, .sc-colC { display: contents; }
.sc-ico { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: middle; }
.sc-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-dim); white-space: nowrap; }
.sc-pnl { background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: var(--sc-r1); min-width: 0; min-height: 0; }
.sc-pnlhead { height: 14px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sc-good { color: var(--sc-good); } .sc-bad { color: var(--sc-risk); }

/* ── header ─────────────────────────────────────────────────────────────── */
.sc-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; position: relative; }
/* ⏱ MP round clock — an ABSOLUTE line under the head (reserved offline, never moves layout); shrinks from the right. */
.sc-clock { position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; border-radius: 2px; background: var(--sc-goldBg); overflow: hidden; visibility: hidden; pointer-events: none; }
.sc-clock[data-on="1"] { visibility: visible; }
.sc-clockbar { display: block; width: 100%; height: 100%; background: var(--sc-gold); transform-origin: left center; transform: scaleX(0); transition: transform .25s linear; }
.sc-clock[data-low="1"] .sc-clockbar { background: var(--sc-risk); }
/* MP — a seat that LEFT: dimmed, hatched and crossed (SCM5) */
.sc-crk[data-st="left"] .sc-crkin { filter: grayscale(1) brightness(.5); }
.sc-crk[data-st="left"]::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: var(--sc-risk); background: var(--sc-hatch); pointer-events: none; }
.sc-stat[data-st="left"], .sc-stat[data-st="passed"] { color: var(--sc-risk); }
.sc-brand { display: flex; align-items: center; gap: 8px; color: var(--sc-gold); }
.sc-brand .sc-ico { width: 16px; height: 16px; }
.sc-brand b { display: none; font-size: 15px; font-weight: 800; letter-spacing: .2em; color: var(--sc-txt); }
.sc-sep { display: none; width: 1px; height: 22px; background: var(--sc-line2); }
.sc-safelbl { display: flex; align-items: center; gap: 5px; letter-spacing: .1em; }
.sc-safeof { display: none; font-size: 15px; color: var(--sc-txt); letter-spacing: .04em; }
.sc-safes { display: flex; gap: 3px; }
.sc-safen { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--sc-r3); border: 1.5px solid var(--sc-line2); color: var(--sc-dim); font-size: 9.5px; font-weight: 800; }
.sc-safen .sc-ico { width: 10px; height: 10px; }
.sc-safen[data-st="cur"] { background: var(--sc-gold); border-color: var(--sc-gold); color: var(--sc-goldInk); }
.sc-safen[data-st="done"] { background: var(--sc-line2); }
/* solo plays ONE safe: the other pills keep their boxes (locked layout) and just stop showing */
.sc-safen[data-st="off"] { visibility: hidden; }
.sc-roundlbl { letter-spacing: .1em; }
.sc-rlong { display: none; }
.sc-roundn { display: inline-block; width: 16px; color: var(--sc-txt); font-size: 12px; }
.sc-hsp { flex: 1 1 auto; }
.sc-drops { display: none; }
.sc-lootpill { position: relative; flex: none; height: calc(var(--sc-headH) - 6px); display: flex; align-items: center; gap: 5px; padding: 0 10px 0 7px; border-radius: var(--sc-rPill); background: var(--sc-goldBg); border: 1px solid var(--sc-gold); color: var(--sc-gold); }
.sc-lootn { display: inline-block; width: 22px; text-align: right; font-size: 19px; font-weight: 800; color: var(--sc-gold); }
.sc-lootw { display: none; color: var(--sc-gold); }
.sc-ticks10 { display: flex; gap: 2px; margin-left: 2px; }
.sc-tick { display: block; width: 4px; height: 12px; border-radius: 2px; background: var(--sc-gold); transition: background .3s, box-shadow .3s; }
.sc-tick[data-on="0"] { background: transparent; box-shadow: inset 0 0 0 1px var(--sc-goldGlow); }
.sc-menu { flex: none; width: 34px; height: 28px; border: 1px solid var(--sc-line2) !important; border-radius: 999px; cursor: pointer; font-size: 14px; background: var(--sc-panel) !important; }
@media (hover: hover) { .sc-menu:hover { box-shadow: 0 0 0 2px var(--sc-gold); } }
.sc-menu:active { transform: translateY(1px); }

/* ── crackers (INERT cards — SC-M11: no pointer, no hover) ──────────────── */
.sc-crewhead { display: none; }
.sc-crew { grid-area: strip; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.sc-crk { position: relative; min-width: 0; overflow: hidden; border-radius: var(--sc-r2); background: var(--sc-panel); border: 1px solid var(--sc-line); cursor: default; }
.sc-crk[data-you="1"] { border-color: var(--sc-line2); background: linear-gradient(90deg, var(--sc-goldBg), var(--sc-panel) 60%); }
.sc-crk[data-empty="1"] { background: transparent; border: 1.5px dashed var(--sc-line2); display: flex; align-items: center; justify-content: center; }
.sc-emptyw { color: var(--sc-dim2); font-size: 8.5px; font-weight: 800; letter-spacing: .1em; }
.sc-crkin { position: absolute; inset: 0; }
.sc-crkin.sc-flipping { animation: sc-flip .6s ease-out both; }
.sc-crk[data-st="caught"] .sc-crkin { filter: grayscale(1) brightness(.62); }
.sc-crk[data-st="caught"]::after { content: ""; position: absolute; inset: 0; background: var(--sc-hatch); pointer-events: none; }
.sc-crk[data-st="opened"] { box-shadow: 0 0 0 2px var(--sc-good); }
.sc-crk[data-alarm="1"] { animation: sc-alarm 1.1s ease-in-out 2; }
.sc-av { display: none; position: absolute; border-radius: 50%; background: linear-gradient(160deg, #4a4e57, #2c2f36); border: 1px solid var(--sc-line2); }
.sc-shape { display: block; flex: none; }
.sc-shapeg { fill: #16171b; stroke: #e9e8e4; stroke-width: 1.6; }
.sc-shape text { fill: #e9e8e4; font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; }
.sc-crkshape { position: absolute; left: 5px; top: 5px; width: 18px; height: 18px; }
.sc-crkname { position: absolute; left: 27px; top: 7px; right: 30px; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; overflow: hidden; }
.sc-youtag { display: none; }
.sc-crklootw { position: absolute; right: 5px; top: 4px; width: 24px; text-align: right; }
.sc-crklootw small { display: none; }
.sc-crkloot { display: inline-block; font-size: 15px; font-weight: 800; color: var(--sc-gold); }
.sc-crkloot[data-pop="1"] { animation: sc-pop .45s ease-out; }
/* ⭐ LOCKED: the chip spans its card (left + right), so THINKING → LOCKED IN → CAUGHT never changes its box */
.sc-stat { position: absolute; left: 5px; right: 5px; top: 26px; overflow: hidden; display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--sc-txt); }
.sc-stat .sc-ico { width: 11px; height: 11px; }
.sc-stat[data-st="think"] { color: var(--sc-dim); }
.sc-stat[data-st="think"] .sc-ico { animation: sc-think 1.2s ease-in-out infinite; }
.sc-stat[data-st="opened"] { color: var(--sc-good); }
.sc-stat[data-st="caught"], .sc-stat[data-st="out"] { color: var(--sc-risk); }
.sc-stat[data-st="done"] { color: var(--sc-dim); }
.sc-crkcaught { position: absolute; left: 5px; bottom: 5px; display: flex; align-items: center; gap: 3px; color: var(--sc-dim); font-size: 9.5px; font-weight: 800; }
.sc-crkcaught .sc-ico { width: 10px; height: 10px; }

/* ── feed ───────────────────────────────────────────────────────────────── */
.sc-feed { grid-area: feed; display: flex; flex-direction: column; background: none; border: 0; border-radius: 0; padding: 0 4px; overflow: hidden; }
.sc-feedt { display: none; }
.sc-feedl { height: var(--sc-feedH); flex: none; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; color: var(--sc-dim); font-size: var(--sc-feedFs); }
.sc-feedl[data-top="1"] { color: var(--sc-txt); }
.sc-feedl ~ .sc-feedl { display: none; }
.sc-feedl span { overflow: hidden; text-overflow: ellipsis; }
.sc-feedl .sc-ico { width: 12px; height: 12px; }
.sc-feedl[data-tone="good"] { color: var(--sc-good); }
.sc-feedl[data-tone="risk"] { color: var(--sc-risk); }

/* ── PROBE / OPEN + prompt ──────────────────────────────────────────────── */
.sc-ctl { grid-area: ctl; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-seg { flex: none; width: var(--sc-segW); height: 100%; display: flex; border-radius: var(--sc-r2); border: 1px solid var(--sc-line2); background: var(--sc-panel2); padding: 3px; gap: 3px; }
.sc-segb { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: calc(var(--sc-r2) - 3px); font-weight: 800; letter-spacing: .1em; font-size: 12px; color: var(--sc-dim) !important; cursor: pointer; border: 1px solid transparent !important; background: transparent; transition: filter .12s, box-shadow .12s, transform .08s, background .12s; }
.sc-segb .sc-ico { width: 13px; height: 13px; }
@media (hover: hover) { .sc-seg[data-off="0"] .sc-segb[data-on="0"]:hover { color: var(--sc-txt) !important; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--sc-line2); } }
.sc-seg[data-off="0"] .sc-segb:active { transform: translateY(1px); background: rgba(0, 0, 0, .25); }
.sc-segb[data-on="1"] { background: var(--sc-goldBg); color: var(--sc-gold) !important; border-color: var(--sc-gold) !important; box-shadow: 0 0 14px -5px var(--sc-goldGlow); }
.sc-segb.sc-risk[data-on="1"] { background: var(--sc-riskBg); color: var(--sc-risk) !important; border-color: var(--sc-risk) !important; box-shadow: 0 0 14px -5px var(--sc-riskGlow); }
.sc-seg[data-off="1"] .sc-segb { cursor: not-allowed; opacity: .45; background: var(--sc-off); box-shadow: none; transform: none; }
.sc-seg[data-off="1"] .sc-segb[data-on="1"] { border-style: dashed !important; }
.sc-prompt { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; font-size: var(--sc-promptFs); line-height: 1.25; color: var(--sc-txt); overflow: hidden; }
.sc-prompt[data-tone="risk"] { color: var(--sc-risk); }

/* ── the lock ───────────────────────────────────────────────────────────── */
.sc-lock { grid-area: lock; min-width: 0; }
.sc-lockhead { display: none; }
.sc-lockrow { height: 100%; display: flex; gap: var(--sc-gap); }
.sc-dials { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-dialGap); }
.sc-lock[data-roll="1"] .sc-dials { animation: sc-roll .5s ease-out; }
.sc-dial { position: relative; min-width: 0; border-radius: var(--sc-rDial); background: radial-gradient(circle at 50% 38%, var(--sc-steel1), var(--sc-steel2) 72%); border: 2px solid var(--sc-bezel); box-shadow: inset 0 0 0 5px var(--sc-bezel2), inset 0 0 0 6px var(--sc-line2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: filter .12s, box-shadow .12s, transform .08s; }
@media (hover: hover) { .sc-root[data-lock="0"] .sc-dial[data-kind="empty"]:hover, .sc-root[data-lock="0"][data-mode="probe"] .sc-dial[data-kind="die"]:hover { box-shadow: inset 0 0 0 5px var(--sc-bezel2), inset 0 0 0 6px var(--sc-gold), 0 0 18px -6px var(--sc-goldGlow); } }
.sc-root[data-lock="0"][data-mode="probe"] .sc-dial:active { transform: translateY(1px); filter: brightness(.85); }
.sc-dial[data-target="1"] { box-shadow: inset 0 0 0 5px var(--sc-bezel2), inset 0 0 0 6px var(--sc-gold); }
.sc-dial[data-off="1"] { cursor: not-allowed; filter: saturate(.3) brightness(.8); box-shadow: inset 0 0 0 5px var(--sc-bezel2), inset 0 0 0 6px var(--sc-line); }
.sc-root[data-mode="open"] .sc-dial { cursor: default; }
.sc-ticks { position: absolute; inset: 9px; border-radius: calc(var(--sc-rDial) - 6px); background: repeating-conic-gradient(from 0deg, var(--sc-line2) 0 2deg, transparent 2deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 87%); mask: radial-gradient(closest-side, transparent 86%, #000 87%); opacity: .55; pointer-events: none; }
.sc-dno { position: absolute; left: 6px; top: 4px; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; color: var(--sc-dim); pointer-events: none; }
.sc-dnolong { display: none; font-weight: 800; }
.sc-dialdie, .sc-dialempty { position: relative; display: none; width: var(--sc-dialDie); height: var(--sc-dialDie); pointer-events: none; }
.sc-dialdie[data-drop="1"] { animation: sc-drop .4s ease-out both; }
/* ⭐ PT0922-SC-1 — last round's die leaving its dial (safecracker.js scDialExit): a copy over the slot, absolute so
   nothing reflows, shrinking and spinning away. `both` holds the first frame through the stagger delay. */
.sc-dialgone { position: absolute; left: 50%; top: 50%; width: var(--sc-dialDie); height: var(--sc-dialDie); margin: calc(var(--sc-dialDie) / -2) 0 0 calc(var(--sc-dialDie) / -2); pointer-events: none; z-index: 2; animation: sc-gone .38s cubic-bezier(.5, 0, .75, .3) both; }
@keyframes sc-gone { 0% { transform: scale(1) rotate(0); opacity: 1 } 100% { transform: scale(.15) rotate(-140deg); opacity: 0 } }
/* ⭐ PT0922-SC-2 — a set die can be dragged OFF its dial (to another dial = swap, to the tray = back). While it is
   in the air its dial shows it lifted; `touch-action: none` so a finger drag moves the die instead of the page —
   only on a dial that HOLDS a die in probe mode, so an empty dial still scrolls the page. */
.sc-root[data-mode="probe"] .sc-dial[data-kind="die"] { touch-action: none; }
.sc-dial[data-lift="1"] .sc-dialdie { opacity: .25; }
.sc-dialempty { border: 2px dashed var(--sc-ghost); border-radius: var(--sc-rDie); }
.sc-dial[data-kind="die"] .sc-dialdie, .sc-dial[data-kind="empty"] .sc-dialempty { display: block; }
.sc-picker { position: absolute; inset: 3px; display: none; grid-template-rows: 1fr 1fr; }
.sc-dial[data-kind="num"] .sc-picker { display: grid; }
.sc-step { display: flex; align-items: flex-start; justify-content: center; padding-top: 2px !important; color: var(--sc-dim) !important; background: transparent; border: 0; border-radius: var(--sc-r3); cursor: pointer; transition: background .12s, color .12s; }
.sc-step.sc-dn { align-items: flex-end; padding: 0 0 2px !important; }
.sc-step .sc-ico { width: 14px; height: 14px; }
@media (hover: hover) { .sc-step:not(:disabled):hover { background: rgba(255, 255, 255, .07); color: var(--sc-gold) !important; } }
.sc-step:not(:disabled):active { background: rgba(0, 0, 0, .3); }
.sc-step:disabled { cursor: not-allowed; opacity: .35; }
.sc-bignum { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 30px; font-weight: 800; line-height: 1; color: var(--sc-txt); pointer-events: none; }

/* the answer plate */
.sc-plate { flex: none; width: var(--sc-plateW); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 4px 2px; border-radius: var(--sc-r2); background: var(--sc-panel2); border: 1px solid var(--sc-line2); }
.sc-platelbl { font-size: 7.5px; letter-spacing: .12em; }
.sc-platemsg { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--sc-dim2); text-align: center; line-height: 1.2; }
.sc-plate[data-st="ans"] .sc-platemsg { display: none; }
.sc-plate[data-st="pend"] .sc-platemsg { color: var(--sc-gold); animation: sc-think 1.2s infinite; }
.sc-plate[data-st="alarm"] .sc-platemsg { color: var(--sc-risk); letter-spacing: .1em; }
.sc-mks { display: grid; grid-template-columns: repeat(2, 14px); gap: 6px; }
.sc-plate[data-st="alarm"] .sc-mks { display: none; }
.sc-plate.sc-ticking .sc-mks, .sc-plate.sc-ticking .sc-platew { animation: sc-tick .45s .5s both; }
.sc-siren { display: none; color: var(--sc-risk); }
.sc-siren .sc-ico { width: 22px; height: 22px; }
.sc-plate[data-st="alarm"] .sc-siren { display: block; }
.sc-platew { font-size: 9.5px; font-weight: 700; color: var(--sc-txt); text-align: center; line-height: 1.3; white-space: nowrap; }
.sc-platew b { font-weight: 800; }
.sc-plate:not([data-st="ans"]) .sc-platew { display: none; }
.sc-mk { display: block; width: 14px; height: 14px; border-radius: 50%; }
.sc-mk[data-k="b"] { background: var(--sc-txt); box-shadow: 0 0 0 2px var(--sc-txt); }
.sc-mk[data-k="w"] { background: transparent; box-shadow: inset 0 0 0 2.5px var(--sc-txt); }
/* SC3 hints: a right dial that was right before — filled green (a ● in the count, never located) */
.sc-mk[data-k="g"] { background: var(--sc-good); box-shadow: 0 0 0 2px var(--sc-good); }
.sc-mk[data-k="e"] { background: transparent; box-shadow: inset 0 0 0 1px var(--sc-dim2); opacity: .55; }

/* ── your dice ──────────────────────────────────────────────────────────── */
.sc-tray { grid-area: tray; min-width: 0; }
.sc-trayhead { display: none; }
.sc-trayrow { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-gap); }
.sc-dice { display: flex; gap: 10px; padding-left: 2px; }
.sc-die { position: relative; flex: none; width: var(--sc-trayDie); height: var(--sc-trayDie); border-radius: var(--sc-rDie); cursor: pointer; touch-action: none; transition: box-shadow .12s, transform .08s; }
.sc-dief { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sc-diefb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--sc-rDie); background: #eceae4; color: #17181c; font-weight: 800; }
@media (hover: hover) { .sc-root[data-lock="0"] .sc-die[data-st="loose"]:hover { box-shadow: 0 0 0 2px var(--sc-line2), 0 0 14px -3px var(--sc-goldGlow); } }
.sc-root[data-lock="0"] .sc-die[data-st="loose"]:active { transform: translateY(1px); }
.sc-die[data-sel="1"] { box-shadow: 0 0 0 3px var(--sc-gold), 0 0 18px -2px var(--sc-goldGlow) !important; }
.sc-die[data-st="off"], .sc-die[data-st="placed"] { cursor: not-allowed; }
.sc-die[data-st="off"]::after { content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; background: var(--sc-off), var(--sc-dieVeil); pointer-events: none; }
.sc-die[data-st="placed"] .sc-dief { visibility: hidden; }
.sc-ghost { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: var(--sc-rDie); border: 2px dashed var(--sc-ghost); color: var(--sc-dim2); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.sc-die[data-st="placed"] .sc-ghost { display: flex; }
/* ⛔ z-index 3 — DieRenderer's `.dr-die` is z-index 2 (Dibs playtest 1) */
.sc-rrbadge { position: absolute; right: -8px; top: -8px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; background: var(--sc-gold); color: var(--sc-goldInk); display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--sc-steel2); pointer-events: none; }
.sc-rrbadge .sc-ico { width: 12px; height: 12px; }
.sc-die[data-rr="1"] .sc-rrbadge { display: flex; }
.sc-dragghost { position: absolute; left: 0; top: 0; width: var(--sc-trayDie); height: var(--sc-trayDie); display: flex; align-items: center; justify-content: center; opacity: .9; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.sc-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: var(--sc-r2); border: 1px solid var(--sc-line2) !important; background: var(--sc-btn); color: var(--sc-btnTxt) !important; font-weight: 800; letter-spacing: .06em; cursor: pointer; user-select: none; white-space: nowrap; transition: filter .12s, box-shadow .12s, transform .08s; }
.sc-btnl { display: flex; align-items: center; gap: 6px; }
.sc-btnl .sc-ico, .sc-btnl i .sc-ico { width: 15px; height: 15px; }
.sc-btn small { font-size: 9px; font-weight: 700; letter-spacing: .08em; opacity: .78; }
@media (hover: hover) { .sc-btn[data-off="0"]:hover, .sc-btn:not([data-off]):hover { filter: brightness(1.2); box-shadow: 0 0 0 1px var(--sc-gold), 0 0 16px -4px var(--sc-goldGlow); } }
.sc-btn[data-off="0"]:active, .sc-btn:not([data-off]):active { transform: translateY(1px); filter: brightness(.86); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); }
.sc-btn.sc-pri, .sc-submit[data-kind="probe"] { background: var(--sc-primary); color: var(--sc-goldInk) !important; border-color: transparent !important; }
.sc-btn.sc-opn, .sc-submit[data-kind="open"] { background: var(--sc-openBtn); color: #1c0904 !important; border-color: transparent !important; }
.sc-btn[data-off="1"] { cursor: not-allowed; filter: saturate(.2); opacity: .5; background: var(--sc-off), var(--sc-panel2); color: var(--sc-dim) !important; border: 1px dashed var(--sc-line2) !important; box-shadow: none; transform: none; }
.sc-reroll { flex: 1 1 auto; min-width: 0; height: 100%; font-size: 12px; }
.sc-submit { grid-area: submit; width: 100%; flex-direction: row; gap: 8px; font-size: 14px; }
.sc-submit small { font-size: 9.5px; }

/* ── history + notepad ──────────────────────────────────────────────────── */
.sc-hist { grid-area: hist; display: flex; flex-direction: column; gap: 4px; padding: 6px; overflow: hidden; }
.sc-hist .sc-lbl { font-size: 9px; }
.sc-histc { font-size: 9.5px; font-weight: 800; color: var(--sc-dim); }
.sc-hrows { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: repeat(10, minmax(0, 1fr)); gap: var(--sc-rowGap); }
.sc-hrow { display: flex; align-items: center; gap: 6px; padding: 0 5px; min-height: 0; overflow: hidden; border-radius: var(--sc-r3); background: var(--sc-panel2); border: 1px solid var(--sc-line); }
.sc-hrow[data-kind="empty"] { background: transparent; border: 1px dashed var(--sc-line); }
.sc-hrow[data-kind="alarm"] { border-color: var(--sc-risk); background: var(--sc-riskBg); }
.sc-hrow[data-kind="pend"] { border-color: var(--sc-gold); }
.sc-hrow.sc-ticking { border-color: var(--sc-line2); background: rgba(255, 255, 255, .06); }
.sc-hrow.sc-ticking .sc-hans { animation: sc-tick .45s .5s both; }
.sc-hn { flex: none; width: 14px; text-align: right; font-size: 9.5px; font-weight: 800; color: var(--sc-dim2); }
.sc-hfaces { flex: none; display: flex; gap: 3px; }
.sc-hdie { display: flex; width: var(--sc-miniDie); height: var(--sc-miniDie); }
.sc-hnum { display: flex; align-items: center; justify-content: center; width: var(--sc-miniDie); height: var(--sc-miniDie); border-radius: 4px; border: 1px solid var(--sc-risk); color: var(--sc-risk); font-size: calc(var(--sc-miniDie) * .7); font-weight: 800; }
.sc-hrow[data-kind="pend"] .sc-hnum { border-color: var(--sc-gold); color: var(--sc-gold); }
.sc-hans { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.sc-hmks { display: grid; grid-template-columns: repeat(2, 6px); gap: 2px; }
.sc-hmks .sc-mk { width: 6px; height: 6px; }
.sc-hmks .sc-mk[data-k="b"] { box-shadow: 0 0 0 1px var(--sc-txt); }
.sc-hmks .sc-mk[data-k="w"] { box-shadow: inset 0 0 0 1.5px var(--sc-txt); }
.sc-hmks .sc-mk[data-k="g"] { box-shadow: 0 0 0 1px var(--sc-good); }
.sc-hw { font-size: 10px; font-weight: 800; color: var(--sc-txt); }
.sc-halarm { display: flex; align-items: center; gap: 5px; color: var(--sc-risk); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.sc-halarm .sc-ico { width: 11px; height: 11px; }
.sc-hpend { color: var(--sc-gold); font-size: 9px; font-weight: 800; letter-spacing: .08em; animation: sc-think 1.2s infinite; }

.sc-note { grid-area: note; display: flex; flex-direction: column; gap: 4px; padding: 6px; overflow: hidden; }
.sc-note .sc-lbl { font-size: 9px; }
.sc-hint { display: none; align-items: center; gap: 3px; font-size: 10.5px; color: var(--sc-dim); }
.sc-hint .sc-ico { width: 11px; height: 11px; }
.sc-npgrid { display: grid; grid-template-columns: 18px repeat(6, minmax(0, 1fr)); gap: 2px; align-items: center; }
.sc-nph { text-align: center; font-size: 10px; font-weight: 800; color: var(--sc-dim); }
.sc-npd { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: var(--sc-dim); }
.sc-cell { height: var(--sc-cellH); display: flex; align-items: center; justify-content: center; border-radius: var(--sc-r3); background: var(--sc-panel2); border: 1px solid var(--sc-line) !important; cursor: pointer; transition: background .12s, box-shadow .12s, transform .08s; }
.sc-cell .sc-ico { width: 11px; height: 11px; }
.sc-cell[data-m="o"] .sc-ico { width: 13px; height: 13px; }
@media (hover: hover) { .sc-cell:hover { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px var(--sc-gold); } }
.sc-cell:active { transform: translateY(1px); background: rgba(0, 0, 0, .3); }
.sc-cell[data-m="x"] { color: var(--sc-dim) !important; }
.sc-cell[data-m="o"] { color: var(--sc-gold) !important; background: var(--sc-goldBg); }
.sc-root[data-phase="over"] .sc-cell { cursor: not-allowed; opacity: .4; background: var(--sc-off); }

/* ── layers: scrim, confirm, safe result, coins — ABSOLUTE inside the scaled root ── */
.sc-scrim { position: absolute; inset: 0; z-index: 5; background: var(--sc-scrim); display: none; }
.sc-scrim[data-on="1"] { display: block; }
.sc-ovwrap { position: absolute; z-index: 6; display: none; align-items: center; justify-content: center; pointer-events: none; }
.sc-ovwrap[data-on="1"] { display: flex; }
/* ⛔ SC-M2: the WRAPPER centres; the rise animation (a transform) runs on the inner card only */
.sc-ovcard { pointer-events: auto; position: relative; background: var(--sc-card); border: 1px solid var(--sc-line2); border-radius: var(--sc-r1); box-shadow: 0 22px 60px -20px rgba(0, 0, 0, .9); color: var(--sc-txt); font-family: var(--sc-font); display: flex; flex-direction: column; }
.sc-ovwrap[data-on="1"] .sc-ovcard { animation: sc-rise .35s ease-out both; }
.sc-confirmw { inset: 0; }
.sc-confirm { width: calc(100% - 32px); height: 256px; padding: 16px; gap: 10px; border-color: var(--sc-risk); }
.sc-cfhead { display: flex; align-items: center; gap: 10px; color: var(--sc-risk); }
.sc-cfhead .sc-ico { width: 22px; height: 22px; }
.sc-cfhead b { font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--sc-txt); white-space: nowrap; }
.sc-cfchips { display: flex; gap: 10px; justify-content: center; }
.sc-cfchips .sc-chip { width: 46px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: var(--sc-r2); background: radial-gradient(circle at 50% 40%, var(--sc-steel1), var(--sc-steel2)); border: 2px solid var(--sc-bezel); font-size: 30px; font-weight: 800; }
.sc-cftext { flex: 1 1 auto; font-size: 12px; line-height: 1.45; color: var(--sc-dim); }
.sc-cftext b { color: var(--sc-txt); }
.sc-cftext b.sc-good { color: var(--sc-good); } .sc-cftext b.sc-bad { color: var(--sc-risk); }
.sc-cfbtns { display: flex; gap: 10px; }
.sc-cfbtns .sc-btn { flex: 1 1 0; height: 48px; flex-direction: row; gap: 6px; font-size: 13px; }
.sc-cfbtns .sc-btn .sc-ico { width: 16px; height: 16px; }

.sc-resultw { left: 14px; right: 14px; top: var(--sc-resTop); height: 300px; align-items: flex-start; }
.sc-result { width: 100%; height: 262px; padding: 14px; gap: 10px; border-color: var(--sc-good); }
.sc-resultw[data-final="1"] .sc-result { height: 300px; }
.sc-resultw[data-reason="caught"] .sc-result { border-color: var(--sc-risk); }
.sc-resultw[data-reason="empty"] .sc-result { border-color: var(--sc-line2); }
.sc-rshead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-rsico { display: inline-block; color: var(--sc-good); transform-origin: 20% 50%; }
.sc-resultw[data-on="1"][data-reason="opened"] .sc-rsico { animation: sc-door .9s .3s ease-out both; }
.sc-resultw[data-reason="caught"] .sc-rsico { color: var(--sc-risk); }
.sc-resultw[data-reason="empty"] .sc-rsico { color: var(--sc-dim); }
.sc-rsico .sc-ico { width: 30px; height: 30px; }
.sc-rstw { display: flex; flex-direction: column; min-width: 0; }
.sc-rstitle { font-size: 16px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rstw small { font-size: 12px; color: var(--sc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rscode { display: flex; align-items: center; gap: 8px; }
.sc-rshort { display: inline; }
.sc-rschips { display: flex; gap: 6px; }
.sc-rschips .sc-chip { width: 40px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: var(--sc-r3); background: var(--sc-steel2); border: 1.5px solid var(--sc-good); color: var(--sc-good); font-size: 26px; font-weight: 800; }
.sc-resultw[data-reason="caught"] .sc-rschips .sc-chip { border-color: var(--sc-risk); color: var(--sc-risk); }
.sc-resultw[data-reason="empty"] .sc-rschips .sc-chip { border-color: var(--sc-line2); color: var(--sc-txt); }
.sc-rslines { display: flex; flex-direction: column; gap: 6px; }
.sc-rsl { height: 18px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--sc-txt); }
.sc-rsl[data-tone="dim"] { color: var(--sc-dim); }
.sc-rsl[data-tone="risk"] { color: var(--sc-risk); }
.sc-rsl[data-tone="none"] { visibility: hidden; }
.sc-rsls .sc-shape { width: 18px; height: 18px; }
.sc-rslt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rsla { flex: none; width: 34px; text-align: right; color: var(--sc-gold); font-size: 15px; }
.sc-rsfoot { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.sc-rsfoot span { flex: 1 1 auto; font-size: 12px; line-height: 1.3; color: var(--sc-dim); }
.sc-rsfoot .sc-btn { flex: none; width: 128px; height: 40px; font-size: 13px; }

.sc-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.sc-coin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, oklch(.9 .12 90), var(--sc-gold) 60%, oklch(.6 .12 75)); box-shadow: 0 0 0 1.5px var(--sc-goldInk); }

/* ── end screen rows (the shared GameEndScreen) ─────────────────────────── */
.sc-endrow { display: grid; grid-template-columns: 1fr auto 3ch; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(128, 128, 128, .2); }
.sc-endrow[data-win="1"] { font-weight: 800; }
.sc-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sc-endshape { width: 20px; height: 20px; }
.sc-endst { font-size: 12px; opacity: .75; }
.sc-endsc { text-align: right; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.sc-endnote { margin-top: 8px; font-size: 12px; opacity: .75; line-height: 1.4; }
.sc-endbest { margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.sc-endbest[data-kind="record"], .sc-endbest[data-kind="first"] { color: var(--sc-green, #4cc38a); }

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

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #safecracker-game-screen.sc-playing .wrap { padding: 0 2px; max-width: none; }
  #safecracker-game-screen.sc-playing .topbar { display: none; }
  #safecracker-game-screen.sc-playing.sc-topbar-open .topbar { display: flex; }
}
/* the mock's short-phone step (below 760 px tall): same slots, same arrangement */
@media (max-width: 999px) and (max-height: 759px) {
  .sc-root { --sc-pad: 8px; --sc-gap: 6px; --sc-headH: 32px; --sc-stripH: 56px; --sc-feedH: 18px; --sc-ctlH: 38px; --sc-lockH: 78px; --sc-diceH: 46px; --sc-submitH: 44px;
    --sc-plateW: 58px; --sc-noteW: 146px; --sc-segW: 150px; --sc-trayDie: 40px; --sc-dialDie: 40px; --sc-miniDie: 13px; --sc-cellH: 21px; --sc-promptFs: 10.5px; --sc-feedFs: 10.5px; }
  .sc-crkname { font-size: 11.5px; left: 25px; }
  .sc-crkshape { width: 17px; height: 17px; }
  .sc-stat { top: 24px; font-size: 8.5px; }
  .sc-crkcaught { bottom: 4px; }
  .sc-crkloot { font-size: 14px; }
  .sc-bignum { font-size: 28px; }
  .sc-dice { gap: 8px; }
}
@media (max-width: 370px) {
  .sc-root { --sc-segW: 144px; }
  .sc-hn { width: 12px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 553) ── */
@media (min-width: 1000px) {
  #safecracker-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .sc-root {
    --sc-pad: 12px; --sc-headH: 40px; --sc-trayDie: 64px; --sc-dialDie: 64px; --sc-miniDie: 21px; --sc-cellH: 22px; --sc-rowGap: 3px;
    --sc-promptFs: 13.5px; --sc-feedFs: 12px; --sc-feedH: 20px; --sc-plateW: 92px; --sc-dialGap: 10px; --sc-segW: 236px;
    width: 1280px; height: 553px; padding: var(--sc-pad); border-radius: 16px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .sc-body { display: flex; flex-direction: row; gap: 12px; height: 479px; flex: none; }
  .sc-colA, .sc-colB, .sc-colC { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
  .sc-colA { width: 268px; } .sc-colB { width: 548px; } .sc-colC { width: 416px; }

  .sc-head { height: 40px; flex: none; gap: 14px; }
  .sc-brand .sc-ico { width: 20px; height: 20px; }
  .sc-brand b, .sc-sep, .sc-safeof, .sc-rlong, .sc-drops, .sc-lootw { display: inline-block; }
  .sc-rshort { display: none; }
  .sc-safelbl { gap: 8px; letter-spacing: .16em; }
  .sc-safes { gap: 4px; margin-left: 4px; }
  .sc-safen { width: 20px; height: 20px; font-size: 11px; }
  .sc-safen .sc-ico { width: 12px; height: 12px; }
  .sc-roundlbl { letter-spacing: .16em; }
  .sc-roundn { width: 22px; font-size: 15px; }
  .sc-lootpill { height: 36px; padding: 0 14px 0 10px; gap: 8px; }
  .sc-lootpill > .sc-ico { width: 18px; height: 18px; }
  .sc-lootn { width: 30px; font-size: 24px; }
  .sc-ticks10 { gap: 3px; margin-left: 4px; }
  .sc-tick { width: 6px; height: 16px; }
  .sc-menu { display: none; }

  .sc-crewhead { height: 18px; flex: none; display: flex; align-items: center; justify-content: space-between; }
  .sc-crewn { letter-spacing: .08em; }
  .sc-crew { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, 64px); gap: 8px; flex: none; }
  .sc-emptyw { font-size: 10.5px; letter-spacing: .14em; }
  .sc-av { display: block; left: 10px; top: 10px; width: 42px; height: 42px; }
  .sc-crkshape { left: 36px; top: 36px; width: 22px; height: 22px; }
  .sc-crkname { left: 68px; top: 9px; right: 76px; display: flex; align-items: center; gap: 7px; font-size: 15px; letter-spacing: .04em; }
  .sc-youtag { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .16em; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--sc-line2); color: var(--sc-txt); }
  .sc-stat { left: 68px; right: 76px; top: 37px; font-size: 11px; gap: 5px; letter-spacing: .09em; }
  .sc-stat .sc-ico { width: 13px; height: 13px; }
  .sc-crklootw { right: 12px; top: 6px; width: 56px; }
  .sc-crklootw small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .16em; color: var(--sc-dim); }
  .sc-crkloot { font-size: 22px; line-height: 1.05; }
  .sc-crkcaught { left: auto; right: 12px; bottom: auto; top: 43px; width: 56px; justify-content: flex-end; font-size: 11px; gap: 4px; }
  .sc-crkcaught .sc-ico { width: 13px; height: 13px; }

  .sc-note { flex: 1 1 auto; padding: 10px 12px; gap: 6px; }
  .sc-note .sc-lbl, .sc-hist .sc-lbl { font-size: 10.5px; }
  .sc-hint { display: flex; }
  .sc-npgrid { grid-template-columns: 26px repeat(6, 32px); gap: 4px; }
  .sc-nph { font-size: 12px; }
  .sc-npd { font-size: 10px; }
  .sc-cell .sc-ico { width: 13px; height: 13px; }
  .sc-cell[data-m="o"] .sc-ico { width: 16px; height: 16px; }

  .sc-ctl { height: 44px; flex: none; gap: 14px; }
  .sc-segb { font-size: 13px; gap: 7px; }
  .sc-segb .sc-ico { width: 15px; height: 15px; }

  .sc-lock { height: 237px; flex: none; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--sc-r1); border: 1px solid var(--sc-line); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); overflow: hidden; }
  .sc-lockhead { height: 18px; display: flex; align-items: center; justify-content: space-between; }
  .sc-lockmode[data-tone="risk"] { color: var(--sc-risk); }
  .sc-lockrow { height: 181px; flex: none; gap: 14px; }
  .sc-dials { flex: none; grid-template-columns: repeat(4, 96px); }
  .sc-dno { left: 9px; top: 7px; font-size: 10px; }
  .sc-dnolong { display: inline; }
  .sc-picker { inset: 6px; grid-template-rows: 44px 1fr 44px; }
  .sc-step, .sc-step.sc-dn { align-items: center; padding: 0 !important; }
  .sc-step.sc-dn { grid-row: 3; }
  .sc-step .sc-ico { width: 22px; height: 22px; }
  .sc-bignum { font-size: 52px; }
  .sc-plate { padding: 10px 6px; }
  .sc-platelbl { font-size: 9.5px; }
  .sc-platemsg { font-size: 11px; }
  .sc-mks { grid-template-columns: repeat(2, 24px); gap: 9px; }
  .sc-mks .sc-mk { width: 24px; height: 24px; }
  .sc-siren .sc-ico { width: 34px; height: 34px; }
  .sc-platew { font-size: 11px; }

  .sc-tray { height: 112px; flex: none; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-radius: var(--sc-r1); border: 1px solid var(--sc-line); background: var(--sc-panel); }
  .sc-trayhead { height: 16px; display: flex; align-items: center; }
  .sc-trayrow { height: 64px; flex: none; }
  .sc-dice { gap: 16px; }
  .sc-rrbadge { right: -9px; top: -9px; width: 22px; height: 22px; }
  .sc-rrbadge .sc-ico { width: 13px; height: 13px; }
  .sc-ghost { font-size: 10px; }
  .sc-reroll { flex: none; width: 170px; height: 56px; font-size: 14px; }
  .sc-reroll .sc-btnl .sc-ico { width: 16px; height: 16px; }
  .sc-reroll small { font-size: 10.5px; }

  .sc-submit { height: 56px; flex: none; flex-direction: column; gap: 1px; font-size: 17px; }
  .sc-submit .sc-btnl { gap: 8px; }
  .sc-submit .sc-btnl .sc-ico { width: 18px; height: 18px; }
  .sc-submit small { font-size: 11px; }

  .sc-hist { flex: 1 1 auto; padding: 10px 12px; gap: 8px; }
  .sc-histc { font-size: 11px; }
  .sc-hrow { gap: 10px; padding: 0 8px; }
  .sc-hn { width: 22px; font-size: 11px; }
  .sc-hmks { grid-template-columns: repeat(2, 8px); }
  .sc-hmks .sc-mk { width: 8px; height: 8px; }
  .sc-hans { gap: 9px; }
  .sc-hw { font-size: 12px; }
  .sc-halarm, .sc-hpend { font-size: 11px; }
  .sc-halarm .sc-ico { width: 13px; height: 13px; }

  .sc-feed { --sc-feedH: 19px; height: 110px; flex: none; padding: 6px 12px; gap: 1px; background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: var(--sc-r1); }
  .sc-feedt { display: block; height: 14px; margin-bottom: 2px; }
  .sc-feedl ~ .sc-feedl { display: flex; }
  .sc-feedl .sc-ico { width: 13px; height: 13px; }

  .sc-confirm { width: 460px; height: 262px; padding: 22px; gap: 12px; }
  .sc-cfhead b { font-size: 19px; }
  .sc-cfchips .sc-chip { width: 54px; height: 62px; font-size: 34px; }
  .sc-cftext { font-size: 13px; }
  .sc-cfbtns .sc-btn { font-size: 14px; }
  .sc-cfbtns .sc-opn { font-size: 15px; }

  /* the safe-result card sits over the LOCK COLUMN only, so the cracker cards (the payoff) stay visible */
  .sc-resultw { left: 292px; right: auto; width: 548px; top: 108px; height: 300px; }
  .sc-result { width: 520px; height: 272px; padding: 18px; }
  .sc-rstitle { font-size: 19px; }
  .sc-rsico .sc-ico { width: 36px; height: 36px; }
  .sc-rsl { font-size: 13.5px; }
  .sc-rsfoot .sc-btn { width: 150px; }
  .sc-rlong { display: inline; }
}