/* frontend/kaiten.css — the KAITEN board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Dibs / Gulls / Thin Ice precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's VECTOR palette (docs/design/Batch6/KaitenV2.dc.html, the
 * `.sk-flat` block). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD — the setup card sits outside
 * `.ka-root`. Seats are SHAPE + LETTER first (circle / triangle / square / diamond / star), never colour
 * alone, and the RED belt carries a hatched band AND a "RED" tag, so every frame reads in greyscale.
 *
 * ── 🎨 THE PIXEL STYLE COMES LATER, AS A TOGGLE (mock F12) ───────────────────
 * Radii, fonts, borders and colours are all variables, so the pixel scheme is a second `:root`-style block
 * and no markup change. ⛔ The die FACES need no redraw for it: the renderer already rasterises a symbol
 * path onto a pixel skin's 12×12 grid ([[predicely_dice_skin_base]]).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements. Desktop is a FIXED 1280 × 553 box (BoardFit scales it as one unit — no
 * transform in here); the phone is a stack that runs unscaled below 1000 px. Every slot is reserved at its
 * final size from frame one: a belt always shows the round's full count of slots, the tray always shows four
 * lanes of the round's draw, and the token boxes are sized for two digits (the sim peaks at 11 menus,
 * 12 chopsticks, 24 puddings). Feedback changes colour, glow or a 1 px nudge — never size or spacing.
 *
 * ⛔ NO position:fixed inside the board: `.ka-layer` holds the screen-level siblings (the slide callout,
 * the scoring scrim and card) and is absolutely positioned against `.ka-root`.
 */

#kaiten-game-screen, .ka-root {
  --ka-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --ka-panel: rgba(255, 255, 255, .04); --ka-panel2: rgba(255, 255, 255, .025);
  --ka-line: rgba(255, 255, 255, .075); --ka-line2: rgba(255, 255, 255, .16);
  --ka-txt: #e9e8e4; --ka-dim: #8d8f95; --ka-dim2: #62656c;
  --ka-gold: oklch(.80 .15 85); --ka-goldBg: oklch(.80 .15 85 / .15); --ka-goldGlow: oklch(.80 .15 85 / .45); --ka-goldInk: #1d1604;
  --ka-good: oklch(.76 .13 152); --ka-goodBg: oklch(.76 .13 152 / .14); --ka-goodGlow: oklch(.76 .13 152 / .5);
  --ka-hot: oklch(.71 .15 32); --ka-hotBg: oklch(.71 .15 32 / .15); --ka-hotGlow: oklch(.71 .15 32 / .5); --ka-hotInk: #1c0904;
  --ka-cool: oklch(.76 .08 235); --ka-coolBg: oklch(.76 .08 235 / .13);
  --ka-belt: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, rgba(255,255,255,0) 2px 18px), rgba(0,0,0,.22);
  --ka-redHatch: repeating-linear-gradient(135deg, oklch(.71 .15 32 / .55) 0 5px, rgba(0,0,0,0) 5px 10px);
  --ka-ghost: rgba(255, 255, 255, .14);
  --ka-dieOff: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, rgba(255,255,255,0) 6px 12px);
  --ka-dieVeil: rgba(16, 17, 21, .58);
  --ka-btn: linear-gradient(180deg, #333841, #22252b);
  --ka-primary: linear-gradient(180deg, oklch(.84 .14 85), oklch(.72 .14 80));
  --ka-off: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, rgba(255,255,255,0) 6px 12px);
  --ka-scrim: rgba(7, 8, 10, .64); --ka-card: #1b1d22;
  --ka-shIn: #16171b; --ka-shOut: #e9e8e4;
  --ka-ui: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --ka-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ka-r1: 14px; --ka-r2: 10px; --ka-r3: 7px; --ka-rDie: 18%; --ka-rPill: 999px; --ka-bw: 1px;
}

/* ── the setup card ───────────────────────────────────────────────────────── */
.ka-setup-card { max-width: 640px; margin: 0 auto; text-align: left; }
.ka-setup-eyebrow { font-family: var(--ka-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ka-gold); }
.ka-setup-title { margin: 6px 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.ka-setup-blurb { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ka-dim); text-wrap: pretty; }
.ka-setup-blurb b { color: var(--ka-txt); }
.ka-setup-row { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.ka-setup-lab { font-family: var(--ka-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ka-dim); min-width: 74px; }
.ka-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ka-opt {
  min-width: 44px; padding: 8px 14px; border-radius: var(--ka-r2); cursor: pointer;
  border: var(--ka-bw) solid var(--ka-line2); background: var(--ka-panel2); color: var(--ka-dim);
  font-family: var(--ka-ui); font-weight: 800; font-size: 13px;
  transition: color .12s, border-color .12s, background .12s, box-shadow .12s;
}
.ka-opt:hover { color: var(--ka-txt); border-color: var(--ka-gold); }
.ka-opt[data-on="1"] { color: var(--ka-gold); border-color: var(--ka-gold); background: var(--ka-goldBg); box-shadow: 0 0 14px -5px var(--ka-goldGlow); }
/* ⭐ Both notes are always in the box (the inactive one hidden), so the card keeps the taller height and
   never jumps when you switch — the Thin Ice playtest-1 fix. */
.ka-setup-note { position: relative; display: grid; margin: 4px 0 14px; padding: 10px 12px; border-radius: var(--ka-r2); background: var(--ka-panel2); border: var(--ka-bw) solid var(--ka-line); }
.ka-setup-note > span { grid-area: 1 / 1; font-size: 13px; line-height: 1.55; color: var(--ka-dim); }
.ka-setup-note > span[data-on="0"] { visibility: hidden; }
.ka-setup-note b { color: var(--ka-txt); }
.ka-setup-hint { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--ka-dim2); }
.ka-start {
  width: 100%; padding: 14px; border: 0; border-radius: var(--ka-r2); cursor: pointer;
  background: var(--ka-primary); color: var(--ka-goldInk); font-family: var(--ka-ui); font-weight: 800;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase; transition: filter .12s, transform .08s;
}
.ka-start:hover { filter: brightness(1.08); }
.ka-start:active { transform: translateY(1px); filter: brightness(.92); }

/* ── the board shell ──────────────────────────────────────────────────────── */
.ka-root {
  position: relative; box-sizing: border-box; margin: 0 auto; overflow: hidden;
  background: var(--ka-bg); color: var(--ka-txt); font-family: var(--ka-ui);
  font-variant-numeric: tabular-nums; display: flex; flex-direction: column;
}
.ka-root * { box-sizing: border-box; }
.ka-ico { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.ka-spacer { flex: 1 1 auto; }
.ka-lbl { font-family: var(--ka-mono); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ka-dim); white-space: nowrap; font-size: 10px; }
.ka-lbl.dim { color: var(--ka-dim2); }

/* header */
.ka-top { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; height: 40px; }
.ka-brand { display: flex; align-items: center; gap: 8px; color: var(--ka-gold); }
.ka-brand > span { font-size: 15px; font-weight: 800; letter-spacing: .2em; color: var(--ka-txt); }
.ka-rule { width: 1px; height: 22px; background: var(--ka-line2); flex: 0 0 auto; }
.ka-hlab { font-family: var(--ka-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--ka-dim); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ka-hlab b { font-size: 15px; color: var(--ka-txt); letter-spacing: .02em; }
.ka-order { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ka-olab { font-family: var(--ka-mono); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--ka-dim2); }
.ka-pip { position: relative; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border-radius: var(--ka-r3); border: 1px solid transparent; }
.ka-pipname { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--ka-dim); white-space: nowrap; }
.ka-pip.now { border-color: var(--ka-cool); background: var(--ka-coolBg); }
.ka-pip.now.you { border-color: var(--ka-gold); background: var(--ka-goldBg); }
.ka-pip.now .ka-pipname { color: var(--ka-txt); }
.ka-pip.done { opacity: .55; }
.ka-pipdone { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: #1b1d22; color: var(--ka-txt); display: flex; align-items: center; justify-content: center; }
.ka-piparrow { color: var(--ka-dim2); display: flex; }
.ka-redflag { color: var(--ka-hot); display: flex; }
.ka-turn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 32px; min-width: 300px; padding: 0 16px; border-radius: var(--ka-rPill); font-family: var(--ka-mono); font-weight: 800; font-size: 11.5px; letter-spacing: .12em; white-space: nowrap; }
.ka-turn.gold { background: var(--ka-goldBg); color: var(--ka-gold); border: 1px solid var(--ka-gold); }
.ka-turn.cool { background: var(--ka-coolBg); color: var(--ka-cool); border: 1px solid var(--ka-cool); }
.ka-turn.dim { background: var(--ka-panel2); color: var(--ka-dim); border: 1px solid var(--ka-line2); }

/* three columns */
.ka-body { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; padding-top: 6px; }
.ka-colA { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; min-height: 0; }
.ka-colB { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
.ka-colC { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; min-height: 0; }
.ka-lanes { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }

/* rival lanes — INERT except in chopsticks mode */
.ka-lane { border-radius: var(--ka-r2); background: var(--ka-panel); border: var(--ka-bw) solid var(--ka-line); padding: 6px 8px; }
.ka-lane.act { border-color: var(--ka-cool); background: linear-gradient(90deg, var(--ka-coolBg), var(--ka-panel) 70%); }
/* ⛔ FIXED HEIGHT AND NO WRAP. The RED tag travels one seat every pick, so a head row that grew when it
   arrived moved every slot below it — the board suite caught that at 360. The tag slots are reserved on
   every lane (`.ghost`) and the row can never become two. */
.ka-lanehead { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; height: 17px; flex-wrap: nowrap; overflow: hidden; }
.ka-redtag.ghost, .ka-tag.ghost { visibility: hidden; }
.ka-lanename { font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.ka-lanestat { display: flex; align-items: center; gap: 4px; font-family: var(--ka-mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--ka-dim2); }
.ka-lanestat.think { color: var(--ka-cool); }
.ka-lanestat.done { color: var(--ka-dim); }
.ka-lanestat.you { color: var(--ka-gold); }
.ka-lanepts { margin-left: auto; font-family: var(--ka-mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--ka-dim); }
.ka-lanepts b { font-size: 13px; color: var(--ka-txt); margin-right: 3px; }
.ka-redtag, .ka-tag { display: flex; align-items: center; gap: 3px; height: 16px; padding: 0 5px; border-radius: var(--ka-r3); font-family: var(--ka-mono); font-size: 8.5px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.ka-redtag { border: 1px solid var(--ka-hot); background: var(--ka-hotBg); color: var(--ka-txt); }
.ka-tag { border: 1px solid var(--ka-line2); color: var(--ka-dim); }
.ka-lanebody { display: flex; align-items: flex-start; gap: 8px; }
.ka-laneblt { position: relative; display: flex; align-items: flex-start; gap: 3px; padding: 3px; border-radius: var(--ka-r3); background: var(--ka-belt); border: var(--ka-bw) solid var(--ka-line); flex: 1 1 auto; min-width: 0; }
.ka-laneblt.red { border-color: var(--ka-hot); }
.ka-laneblt.red::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ka-redHatch); border-radius: var(--ka-r3) var(--ka-r3) 0 0; }
.ka-lanesum { flex: 0 0 128px; display: flex; flex-direction: column; gap: 1px; font-family: var(--ka-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .04em; color: var(--ka-dim); }
.ka-lanesum span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ka-lanesum i { display: inline-block; width: 40px; color: var(--ka-dim2); font-style: normal; }
.ka-lanesum b.ok { color: var(--ka-good); }

/* action feed */
.ka-feed { flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: var(--ka-r2); background: var(--ka-panel2); border: var(--ka-bw) solid var(--ka-line); padding: 6px 8px; }
.ka-feedlab { font-family: var(--ka-mono); font-size: 8.5px; font-weight: 800; letter-spacing: .14em; color: var(--ka-dim2); margin-bottom: 4px; }
.ka-feedline { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ka-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0; }
.ka-feedline.top { color: var(--ka-txt); font-weight: 700; }
.ka-feedline.hot { color: var(--ka-hot); }

/* your belt */
.ka-youhead { display: flex; align-items: center; gap: 8px; height: 26px; flex: 0 0 auto; }
.ka-youname { font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.ka-trail { font-family: var(--ka-mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--ka-dim2); white-space: nowrap; }
.ka-beltpanel { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; padding: 8px 10px; border-radius: var(--ka-r2); background: var(--ka-panel); border: var(--ka-bw) solid var(--ka-line); }
.ka-belthead { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ka-belt { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex: 1 1 auto; min-height: 0; padding: 8px; border-radius: var(--ka-r3); background: var(--ka-belt); border: var(--ka-bw) solid var(--ka-line); }
.ka-belt.red { border-color: var(--ka-hot); }
.ka-belt.red::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ka-redHatch); border-radius: var(--ka-r3) var(--ka-r3) 0 0; }
.ka-belt.sliding { animation: ka-glide .9s cubic-bezier(.4, .05, .3, 1); }
@keyframes ka-glide { 0% { transform: translateX(46px); opacity: .25; } 60% { transform: translateX(-3px); opacity: 1; } 100% { transform: translateX(0); } }
.ka-diewrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto; }
.ka-tb { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 13px; padding: 0 4px; font-family: var(--ka-mono); font-size: 8px; font-weight: 800; letter-spacing: .06em; color: var(--ka-dim); border: 1px solid var(--ka-line2); border-radius: var(--ka-r3); background: var(--ka-panel2); white-space: nowrap; }
.ka-tb.hi { color: var(--ka-gold); border-color: var(--ka-gold); }

/* dice slots — meaning goes AROUND a die, never on its face */
.ka-die { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: var(--ka-rDie); transition: filter .12s, box-shadow .12s, transform .08s; }
.ka-die.rival { width: 26px; height: 26px; }
.ka-die.tray { width: 30px; height: 30px; }
.ka-die.mine { cursor: pointer; }
.ka-die.mine:hover { box-shadow: 0 0 0 2px var(--ka-line2), 0 0 14px -3px var(--ka-goldGlow); }
.ka-die.mine:active { transform: translateY(1px); filter: brightness(.9); }
.ka-die.sel { box-shadow: 0 0 0 3px var(--ka-gold), 0 0 18px -2px var(--ka-goldGlow); }
.ka-die.tgt { cursor: pointer; box-shadow: 0 0 0 3px var(--ka-hot), 0 0 18px -2px var(--ka-hotGlow); }
.ka-die.x3 { box-shadow: 0 0 0 2px var(--ka-good); }
.ka-die.swipe { animation: ka-pulse 1.1s ease-in-out infinite; }
@keyframes ka-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--ka-hot); } 50% { box-shadow: 0 0 0 2px var(--ka-hot), 0 0 22px 1px var(--ka-hotGlow); } }
.ka-die.gone { animation: ka-lift .42s ease-in forwards; }
@keyframes ka-lift { to { transform: translateY(-28px) scale(.8); opacity: 0; } }
/* ⛔ NOT-YOUR-PICK dims the SLOT with a layer ABOVE the die — the renderer's own face is never filtered. */
.ka-die.off { cursor: not-allowed; }
.ka-die.off::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--ka-dieOff), var(--ka-dieVeil); }
.ka-die.off:hover { box-shadow: none; transform: none; }
.ka-diefallback { display: flex; align-items: center; justify-content: center; background: #eceae4; color: #17181c; border-radius: var(--ka-rDie); }
.ka-slot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--ka-rDie); border: 1.5px dashed var(--ka-ghost); display: flex; align-items: center; justify-content: center; color: var(--ka-dim2); font-family: var(--ka-mono); font-size: 8px; font-weight: 800; }
.ka-slot.open { border-color: var(--ka-good); color: var(--ka-good); }
.ka-slot.rival { width: 26px; height: 26px; }
.ka-mark { position: absolute; right: -6px; top: -6px; min-width: 17px; height: 17px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-radius: var(--ka-rPill); font-family: var(--ka-mono); font-size: 9px; font-weight: 800; }
.ka-mark.x { background: var(--ka-good); color: #06180d; }
.ka-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); height: 15px; padding: 0 6px; display: flex; align-items: center; border-radius: var(--ka-r3); background: var(--ka-gold); color: var(--ka-goldInk); font-family: var(--ka-mono); font-size: 8.5px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }

/* the type strip — the six faces the chosen die's TYPE can roll */
.ka-strip { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; height: 26px; padding: 0 8px; border-radius: var(--ka-r3); border: var(--ka-bw) solid var(--ka-line); background: var(--ka-panel2); }
.ka-striplab { font-family: var(--ka-mono); font-size: 8.5px; font-weight: 800; letter-spacing: .14em; color: var(--ka-dim2); }
.ka-stripname { height: 15px; padding: 0 6px; display: flex; align-items: center; border-radius: var(--ka-r3); border: 1px solid var(--ka-gold); color: var(--ka-gold); font-family: var(--ka-mono); font-size: 8.5px; font-weight: 800; letter-spacing: .06em; }
.ka-stripface { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--ka-r3); color: var(--ka-dim2); }
.ka-stripface.on { color: var(--ka-txt); background: var(--ka-panel); box-shadow: inset 0 0 0 1px var(--ka-line2); }
.ka-striphint { font-family: var(--ka-mono); font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: var(--ka-dim2); }

/* the preview card */
.ka-prev { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; height: 66px; padding: 0 16px; border-radius: var(--ka-r2); border: var(--ka-bw) solid var(--ka-line2); background: var(--ka-panel2); color: var(--ka-dim); }
.ka-prev.good { border-color: var(--ka-good); background: var(--ka-goodBg); color: var(--ka-txt); }
.ka-prev.arm { border-color: var(--ka-gold); background: var(--ka-goldBg); color: var(--ka-gold); }
.ka-prev.armH { border-color: var(--ka-hot); background: var(--ka-hotBg); color: var(--ka-hot); }
.ka-prevtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ka-prevtxt b { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--ka-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-prevtxt span { font-family: var(--ka-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--ka-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-prevpts { margin-left: auto; font-size: 26px; font-weight: 800; color: var(--ka-good); }
.ka-prevpts.dim { color: var(--ka-gold); }

/* buttons — hover/pressed = glow, brightness, a 1 px nudge. NEVER size or spacing. */
.ka-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.ka-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px; border-radius: var(--ka-r2); border: var(--ka-bw) solid var(--ka-line2); background: var(--ka-btn); color: var(--ka-txt); font-family: var(--ka-ui); font-weight: 800; cursor: pointer; white-space: nowrap; overflow: hidden; transition: filter .12s, box-shadow .12s, transform .08s; }
.ka-btn .bt { display: flex; align-items: center; gap: 6px; letter-spacing: .08em; font-size: 14px; }
.ka-btn .bs { font-family: var(--ka-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; opacity: .9; }
.ka-btn:hover { filter: brightness(1.2); box-shadow: 0 0 0 1px var(--ka-gold), 0 0 16px -4px var(--ka-goldGlow); }
.ka-btn:active { transform: translateY(1px); filter: brightness(.86); box-shadow: inset 0 2px 6px rgba(0,0,0,.45); }
.ka-btn.pri { background: var(--ka-primary); color: var(--ka-goldInk); border-color: transparent; }
.ka-btn.arm { background: var(--ka-goldBg); color: var(--ka-gold); border-color: var(--ka-gold); }
.ka-btn.armH { background: var(--ka-hotBg); color: var(--ka-hot); border-color: var(--ka-hot); }
.ka-btn.off, .ka-btn.off:hover, .ka-btn.off:active {
  cursor: not-allowed; filter: saturate(.2); opacity: .55; transform: none; box-shadow: none;
  background: var(--ka-off), var(--ka-panel2); color: var(--ka-dim); border: var(--ka-bw) dashed var(--ka-line2);
}

/* your tray */
.ka-trayhead { display: flex; align-items: center; gap: 8px; height: 22px; flex: 0 0 auto; }
.ka-tray { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; padding: 8px; border-radius: var(--ka-r2); background: var(--ka-panel); border: var(--ka-bw) solid var(--ka-line); }
/* ⛔ THE METERS GET THEIR OWN ROW AT EVERY SIZE. As a third flex child beside the label and the cells they
   ran 33 px past the board's right edge on DESKTOP — and the board suite never saw it, because its
   edge-crossing sweep only ran on the phone. Both are fixed: the row wraps here, and §1 now sweeps the
   desktop too. (The mock review's warning, exactly: the edge check misses what it is not pointed at.) */
/* ⛔⛔ A `min-height` IS NOT A RESERVED SLOT. These rows are FIXED and clipped, because a tray row that can
   grow is a board that moves: the suite caught this as a 1-in-6 FLAKE (+27 px at 360 after a round) and the
   trigger was never worth finding — content must not be able to set the height at all. The SETS row is the
   one that carries a second line, its three meters. */
.ka-traylane { display: flex; align-items: flex-start; gap: 8px; height: 38px; overflow: hidden; flex-wrap: wrap; }
.ka-traylane.sets { height: 60px; }
.ka-traylab { flex: 0 0 96px; display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.ka-traylab b { font-family: var(--ka-mono); font-size: 9px; font-weight: 800; letter-spacing: .12em; color: var(--ka-txt); }
.ka-traylab span { font-family: var(--ka-mono); font-size: 8px; font-weight: 700; letter-spacing: .04em; color: var(--ka-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-traycells { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.ka-traycells .ka-slot { width: 30px; height: 30px; }
/* ⛔ ONE ROW, ALWAYS. A set's points reach two digits (tempura 10, sashimi 13) and the third meter wrapped
   to a second line, which grew the tray by 27 px mid-round — the board suite caught it at 360. Fixed height,
   no wrap, and the meters shrink instead. */
.ka-meters { display: flex; gap: 4px; margin-top: 2px; height: 18px; flex: 1 0 100%; flex-wrap: nowrap; overflow: hidden; }
.ka-meter { min-width: 0; flex: 0 1 auto; }
.ka-meter { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--ka-r3); border: 1px solid var(--ka-line2); background: var(--ka-panel2); font-family: var(--ka-mono); font-size: 8px; font-weight: 800; letter-spacing: .06em; color: var(--ka-dim); }
.ka-meter i { display: flex; color: var(--ka-dim2); font-style: normal; }
.ka-pips { display: flex; gap: 2px; }
.ka-pips b { width: 5px; height: 5px; border-radius: 50%; background: var(--ka-line2); }
.ka-pips b.on { background: var(--ka-gold); }
.ka-meter u { text-decoration: none; color: var(--ka-txt); }

.ka-totals { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; padding: 8px 10px; border-radius: var(--ka-r2); background: var(--ka-panel2); border: var(--ka-bw) solid var(--ka-line); }
.ka-totrow { display: flex; align-items: center; justify-content: space-between; font-family: var(--ka-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--ka-dim); }
.ka-totrow b { font-size: 12px; color: var(--ka-txt); }
.ka-totrow.big { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--ka-line); color: var(--ka-txt); }
.ka-totrow.big b { font-size: 17px; color: var(--ka-gold); }
.ka-toks { display: flex; gap: 6px; flex: 0 0 auto; }
.ka-tok { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 46px; border-radius: var(--ka-r2); border: var(--ka-bw) solid var(--ka-line2); background: var(--ka-panel2); color: var(--ka-dim); }
.ka-tok b { font-size: 17px; color: var(--ka-txt); }
.ka-tok span { font-family: var(--ka-mono); font-size: 7.5px; font-weight: 800; letter-spacing: .08em; color: var(--ka-dim2); }

/* ── screen-level siblings ────────────────────────────────────────────────── */
.ka-layer { position: absolute; inset: 0; z-index: 5; }
.ka-callout { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border-radius: var(--ka-rPill); font-family: var(--ka-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; z-index: 6; animation: ka-rise .3s ease-out both; }
.ka-callout.c { background: var(--ka-card); color: var(--ka-txt); border: 1px solid var(--ka-line2); }
@keyframes ka-rise { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.ka-scrim { position: absolute; inset: 0; background: var(--ka-scrim); }
.ka-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(780px, 94%); padding: 18px 22px; border-radius: var(--ka-r1); background: var(--ka-card); border: var(--ka-bw) solid var(--ka-line2); box-shadow: 0 22px 60px -20px rgba(0,0,0,.9); animation: ka-pop .35s ease-out both; }
@keyframes ka-pop { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.ka-cardhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ka-cardhead h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.ka-tie { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-family: var(--ka-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--ka-gold); }
.ka-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ka-table th { padding: 5px 4px; font-family: var(--ka-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--ka-dim); text-align: center; border-bottom: 1px solid var(--ka-line); }
.ka-table th:first-child { text-align: left; }
.ka-table td { padding: 5px 4px; text-align: center; }
.ka-table td:first-child { text-align: left; font-family: var(--ka-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--ka-dim2); }
.ka-table td b { display: block; font-size: 15px; font-weight: 800; color: var(--ka-txt); }
.ka-table td i { display: block; height: 11px; font-style: normal; font-family: var(--ka-mono); font-size: 8px; color: var(--ka-dim2); }
.ka-table tr.next td b, .ka-table tr.next td:first-child { color: var(--ka-dim2); }
.ka-table tr.now { background: var(--ka-goldBg); outline: 1px solid var(--ka-gold); }
.ka-table tr.now td:first-child { color: var(--ka-gold); }
.ka-table tr.ka-sum td { border-top: 1px solid var(--ka-line); padding-top: 8px; }
.ka-table tr.ka-sum td b { font-size: 19px; }
.ka-table tr.ka-sum td i { color: var(--ka-gold); }
.ka-cardfoot { margin-top: 10px; font-family: var(--ka-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--ka-dim2); }

/* ── PHONE (the default; the board runs unscaled below 1000 px) ───────────── */
.ka-root { width: 100%; max-width: 480px; padding: 8px; border-radius: 12px; gap: 6px; }
.ka-root.ka-phone .ka-body { flex-direction: column; gap: 6px; }
.ka-root.ka-phone .ka-colA, .ka-root.ka-phone .ka-colC { flex: 0 0 auto; }
.ka-root.ka-phone .ka-top { height: 30px; gap: 6px; }
.ka-root.ka-phone .ka-brand, .ka-root.ka-phone .ka-rule, .ka-root.ka-phone .ka-olab, .ka-root.ka-phone .ka-pipname { display: none; }
.ka-root.ka-phone .ka-hlab { font-size: 9px; gap: 4px; }
.ka-root.ka-phone .ka-hlab b { font-size: 12px; }
.ka-root.ka-phone .ka-turn { min-width: 0; height: 28px; padding: 0 10px; font-size: 9.5px; letter-spacing: .08em; }
.ka-root.ka-phone .ka-lane { padding: 4px 6px; }
.ka-root.ka-phone .ka-lanebody { gap: 5px; }
.ka-root.ka-phone .ka-die.rival, .ka-root.ka-phone .ka-slot.rival { width: 24px; height: 24px; }
/* ⛔ KA-M8: the lane summary NEVER collapses away on the phone — a rival's chopsticks pile is the only
   warning you get before a swipe. It narrows, it does not vanish. */
.ka-root.ka-phone .ka-lanesum { flex: 0 0 96px; font-size: 7.5px; }
.ka-root.ka-phone .ka-lanesum i { width: 30px; }
/* ⛔ A FIXED HEIGHT, NOT A MAX. With `max-height` the feed was as tall as its content, so the first round
   that produced a shorter line shrank the whole left column by 1 px and shifted every slot below it — the
   board suite's locked-layout check caught exactly that at 360. The slot is reserved; the text scrolls off. */
.ka-root.ka-phone .ka-feed { flex: 0 0 auto; height: 46px; overflow: hidden; }
/* 5 seats on a phone: the pips alone fill the strip, so the arrows between them are what pushed it past the
   edge. The order is still readable — the pips are in order, and the current one is outlined. */
.ka-root.ka-phone .ka-piparrow { display: none; }
.ka-root.ka-phone .ka-pip { padding: 0 2px; gap: 2px; }
.ka-root.ka-phone .ka-order { flex: 0 1 auto; }
/* ⛔ KA-M9 AGAIN, ON THE PHONE. At 5 seats on a 360 the order strip ran past the edge, and an ancestor's
   `overflow: hidden` would have HIDDEN the last seat rather than fixed it — the same silent clip the mock
   review caught on PC. The marks shrink instead, so all five stay whole and readable. */
.ka-root.ka-phone .ka-pip .ka-ico { width: 14px; height: 14px; }
.ka-root.ka-phone[data-seats="5"] .ka-hlab { font-size: 8px; }
.ka-root.ka-phone[data-seats="5"] .ka-pip { padding: 0 1px; }
.ka-root.ka-phone[data-seats="5"] .ka-pip .ka-ico { width: 12px; height: 12px; }
.ka-root.ka-phone[data-seats="5"] .ka-redflag { display: none; }
/* The tray's column hint and the set meters both need their own room on a phone: the meters were a third
   flex child of a lane that only has width for two. */
.ka-root.ka-phone .ka-trayhead .ka-lbl.dim { display: none; }
.ka-root.ka-phone .ka-meters { margin-top: 3px; }
.ka-root.ka-phone .ka-meter { padding: 0 4px; font-size: 7.5px; }
.ka-root.ka-phone .ka-prev { height: 44px; padding: 0 12px; }
.ka-root.ka-phone .ka-prevtxt b { font-size: 12px; }
.ka-root.ka-phone .ka-prevpts { font-size: 21px; }
.ka-root.ka-phone .ka-btn { height: 46px; }
.ka-root.ka-phone .ka-btn .bt { font-size: 12.5px; gap: 4px; }
.ka-root.ka-phone .ka-btn .bs { font-size: 8.5px; }
.ka-root.ka-phone .ka-traylane { height: 23px; }
.ka-root.ka-phone .ka-traylane.sets { height: 45px; }
.ka-root.ka-phone .ka-traylab { flex: 0 0 62px; }
.ka-root.ka-phone .ka-die.tray, .ka-root.ka-phone .ka-traycells .ka-slot { width: 20px; height: 20px; }
.ka-root.ka-phone .ka-tok { height: 26px; flex-direction: row; gap: 5px; }
.ka-root.ka-phone .ka-tok b { font-size: 13px; }
.ka-root.ka-phone .ka-trail { display: none; }
/* The belt's long instruction line does not fit a phone header beside the die count. */
.ka-root.ka-phone .ka-belthead .ka-lbl.dim { display: none; }
.ka-root.ka-phone .ka-youhead { height: 22px; overflow: hidden; }
.ka-root.ka-phone .ka-lanehead { height: 15px; }
/* ⭐ THE TWO-ROW BELT: at 2 and 3 players a belt of 7–8 dice in one row would drop each die under the 44 px
   touch floor, so it wraps to two rows of four. Below that, a one-row belt keeps its dice big. */
.ka-root.ka-phone .ka-belt { flex-wrap: wrap; gap: 6px; }
.ka-root.ka-phone[data-seats="2"] .ka-belt, .ka-root.ka-phone[data-seats="3"] .ka-belt { max-width: 280px; margin: 0 auto; }

/* ── DESKTOP: ONE fixed box, scaled as a unit by BoardFit ─────────────────── */
/* ⛔ THREE COPIES MUST AGREE: this rule, KA_FIT_W/KA_FIT_H in kaiten.js and board-fit.js's entry.
   kaiten-board.test.html asserts it. */
@media (min-width: 1000px) {
  #kaiten-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .ka-root {
    width: 1280px; height: 553px; max-width: none; padding: 12px; border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 60px -30px #000;
  }
  /* The mock's three columns. ⛔ `min-width: 0` IS LOAD-BEARING, not tidying: a flex item's automatic
     minimum size is its MIN-CONTENT, so without it the tray column ignored its 400 px basis and took 584 —
     its widest row's min-content — and stole the belt column's width. (A `width` beside the basis masked
     that by giving the automatic minimum a specified suggestion to use instead, which is why removing the
     width as "redundant" broke the layout.) The belt column takes what is left:
     1280 − 24 pad − 24 gaps − 392 − 400 = 440. kaiten-board.test.html §1 pins all three against the mock
     and catches a 4 px drift in a basis. */
  .ka-colA { flex: 0 0 392px; min-width: 0; }
  .ka-colC { flex: 0 0 400px; min-width: 0; }
  .ka-colB { flex: 1 1 auto; min-width: 0; }
}