/* frontend/crownanchor.css — Crown & Anchor board, both layouts and both schemes.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Pachisi / Ramp precedent: a board
 * suite that slices its block out of style.css has broken on someone else's append
 * (the Senet "slice to END OF FILE" trap), and a stylesheet of its own can neither be
 * swallowed by nor swallow the next game's block.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable in the two scheme blocks, lifted from the mock's own
 * COLOUR IS DATA block. CLASSIC is worn canvas, faded ink and brass; ARCADE is the
 * same geometry in glass. The six --ca-sym-* inks are the glyph sheet's `ci` / `ai`
 * (CA_GLYPHS in crownanchor-rules.js) — the board suite asserts they agree.
 * ⛔ Game accents are LITERALS: `--pgr-accent` IS `--pgr-line` in Classic
 * (layout-schemes.js), so deriving from it goes invisible silently (the Senet finding).
 * ⛔ The Arcade hook is the CLASS `gm-arcade` that GameTheme.apply toggles on the
 * SCREEN — never `is-arcade`, never `[data-scheme]` (the Pachisi finding).
 * ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the celebration and the
 * rules sheet are siblings of `.wrap`, outside `.ca-root`, and a var() fallback is
 * not a scope (Pachisi again).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every band below has a FIXED height (or is the one flexible band, the cloth) in
 * every phase. Nothing is `display:none`'d between phases; only contents swap and
 * opacity changes. `min-height` is not a reservation.
 */

/* ── CLASSIC ─────────────────────────────────────────────────────────────── */
#crownanchor-game-screen, .ca-root {
  --ca-bg: linear-gradient(180deg, #1e1b16, #141210);
  --ca-panel: rgba(238, 228, 205, .055);
  --ca-track: rgba(0, 0, 0, .45);
  --ca-line: rgba(233, 222, 198, .16);
  --ca-txt: #efe7d4;
  --ca-dim: rgba(239, 231, 212, .58);
  --ca-tile: linear-gradient(180deg, #d5c3a2, #c4ad88);
  --ca-tilebd: rgba(52, 42, 26, .34);
  --ca-tilewin: linear-gradient(180deg, #eddfbe, #dbc79f);
  --ca-clothdim: rgba(59, 50, 34, .6);
  --ca-brass: #b0893f;
  --ca-win: #b0893f;
  --ca-winglow: rgba(176, 137, 63, .55);
  --ca-wintxt: #1c1508;
  --ca-loss: #96382f;
  --ca-paywin: #6f5116;
  --ca-youchip: radial-gradient(circle at 34% 28%, #f0d799, #c39a45 60%, #95702b);
  --ca-youchiptxt: #241c0c;
  --ca-btn: linear-gradient(180deg, #bd9855, #9c7a37);
  --ca-btntxt: #241c0c;
  --ca-ban-idle: rgba(238, 228, 205, .05);
  --ca-ban-win: rgba(176, 137, 63, .2);
  --ca-ban-lose: rgba(150, 56, 47, .18);
  --ca-ban-lock: rgba(238, 228, 205, .09);
  --ca-sym-crown: #a87c2e;
  --ca-sym-anchor: #3c5670;
  --ca-sym-heart: #95372e;
  --ca-sym-spade: #2f2b24;
  --ca-sym-club: #42563c;
  --ca-sym-diamond: #a45c2c;
  /* The history row and settlement strip sit on the dark PANEL, not on the canvas tile,
   * so Classic's near-black spade needs a lighter ink there. Same hue family. */
  --ca-hsym-spade: #cdbf9f;
  --ca-p-you: #d9b45c;
  --ca-p-house: #8d5b7a;
}

/* ── ARCADE — the same cloth, glassy ─────────────────────────────────────── */
#crownanchor-game-screen.gm-arcade, .gm-arcade .ca-root {
  --ca-bg: radial-gradient(125% 115% at 50% -12%, #33146b 0%, #1a0a3d 55%, #0b0520 100%);
  --ca-panel: rgba(255, 255, 255, .07);
  --ca-track: rgba(0, 0, 0, .4);
  --ca-line: rgba(255, 255, 255, .18);
  --ca-txt: #f4f0ff;
  --ca-dim: rgba(244, 240, 255, .62);
  --ca-tile: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
  --ca-tilebd: rgba(255, 255, 255, .24);
  --ca-tilewin: linear-gradient(180deg, oklch(.86 .18 96 / .32), rgba(255, 255, 255, .06));
  --ca-clothdim: rgba(244, 240, 255, .66);
  --ca-brass: oklch(.86 .18 96);
  --ca-win: oklch(.86 .18 96);
  --ca-winglow: oklch(.86 .18 96 / .6);
  --ca-wintxt: #1c1508;
  --ca-loss: oklch(.66 .21 18);
  --ca-paywin: oklch(.86 .18 96);
  --ca-youchip: radial-gradient(circle at 34% 28%, #fff2b8, oklch(.82 .18 92) 58%, oklch(.62 .17 78));
  --ca-youchiptxt: #1c1206;
  --ca-btn: linear-gradient(180deg, oklch(.72 .2 22), oklch(.6 .2 18));
  --ca-btntxt: #fff4f2;
  --ca-ban-idle: rgba(255, 255, 255, .06);
  --ca-ban-win: oklch(.86 .18 96 / .22);
  --ca-ban-lose: oklch(.66 .21 18 / .22);
  --ca-ban-lock: rgba(255, 255, 255, .1);
  --ca-sym-crown: oklch(.87 .17 92);
  --ca-sym-anchor: oklch(.82 .14 212);
  --ca-sym-heart: oklch(.7 .21 20);
  --ca-sym-spade: oklch(.9 .04 285);
  --ca-sym-club: oklch(.83 .15 165);
  --ca-sym-diamond: oklch(.78 .19 340);
  --ca-hsym-spade: oklch(.9 .04 285);
  --ca-p-you: oklch(.85 .17 92);
  --ca-p-house: oklch(.72 .19 330);
}

/* symbol ink — one mapping, both schemes */
#crownanchor-game-screen [data-sym="crown"]   { --ca-sym: var(--ca-sym-crown); }
#crownanchor-game-screen [data-sym="anchor"]  { --ca-sym: var(--ca-sym-anchor); }
#crownanchor-game-screen [data-sym="heart"]   { --ca-sym: var(--ca-sym-heart); }
#crownanchor-game-screen [data-sym="spade"]   { --ca-sym: var(--ca-sym-spade); }
#crownanchor-game-screen [data-sym="club"]    { --ca-sym: var(--ca-sym-club); }
#crownanchor-game-screen [data-sym="diamond"] { --ca-sym: var(--ca-sym-diamond); }
#crownanchor-game-screen .ca-cell[data-sym="spade"], #crownanchor-game-screen .ca-hg[data-sym="spade"],
#crownanchor-game-screen .ca-cel-g[data-sym="spade"] { --ca-sym: var(--ca-hsym-spade); }
#crownanchor-game-screen .ca-g, #crownanchor-game-screen .ca-cel-g { color: var(--ca-sym); display: block; flex: none; }

/* ── the shell (MOBILE first — unscaled, a separate arrangement) ─────────── */
.ca-root {
  --ca-die: 62px;
  position: relative;
  box-sizing: border-box;
  height: var(--ca-phone-h, 780px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 10px 7px;
  background: var(--ca-bg);
  color: var(--ca-txt);
  border: 1px solid var(--ca-line);
  border-radius: 24px;
  overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.ca-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.ca-root button { font-family: inherit; }
.ca-cap { font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--ca-dim); white-space: nowrap; }
.ca-dsk { display: none; }

/* On a phone the three columns dissolve into the root's single column. */
.ca-body, .ca-colL, .ca-colC, .ca-colR { display: contents; }
.ca-head      { order: 0; }
.ca-pstrip    { order: 1; }
.ca-diceband  { order: 2; }
.ca-banner    { order: 3; }
.ca-cloth     { order: 4; }
.ca-strip     { order: 5; }
.ca-clock     { order: 6; }
.ca-controls  { order: 7; }
.ca-hist      { order: 8; }
.ca-roster    { display: none; }

/* head */
.ca-head { flex: none; height: 26px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ca-title { font: 800 15px/1 Georgia, 'Times New Roman', serif; letter-spacing: .01em; white-space: nowrap; }
.ca-title b { color: var(--ca-brass); font-weight: 800; }
.ca-tbadge { font: 800 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; padding: 5px 6px; border-radius: 5px;
  border: 1px solid var(--ca-line); color: var(--ca-dim); white-space: nowrap; }
.ca-seatline { display: none; }
.ca-headspace { flex: 1; }
.ca-hbal { font: 700 14px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-menu { display: none; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ca-line); background: var(--ca-panel);
  color: var(--ca-dim); font: 700 13px/1 system-ui, sans-serif; cursor: pointer; padding: 0; }
.ca-info { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ca-line); background: var(--ca-panel);
  color: var(--ca-dim); font: 700 13px/1 Georgia, serif; cursor: pointer; padding: 0; }

/* player strip (phone) */
.ca-pstrip { flex: none; height: 44px; display: flex; gap: 5px; }
.ca-pcell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ca-pcell b { font: 600 8px/1 system-ui, sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-pcell small { font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ca-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ca-panel); border: 2px solid var(--ca-line);
  display: flex; align-items: center; justify-content: center; font: 700 10px/1 system-ui, sans-serif; color: var(--ca-txt); }
.ca-av[data-kind="seat"] { border-color: var(--ca-p-you); }
.ca-av[data-kind="house"] { border-color: var(--ca-p-house); font-size: 14px; }
.ca-av[data-kind="stat"] { border-style: dashed; color: var(--ca-dim); }

/* dice band */
.ca-diceband { flex: none; height: 80px; position: relative; border-radius: 16px; background: var(--ca-panel); border: 1px solid var(--ca-line);
  display: flex; align-items: center; justify-content: center; gap: 14px; }
.ca-dicelab { position: absolute; top: 8px; left: 12px; font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--ca-dim); }
.ca-slot { flex: none; width: var(--ca-die); height: var(--ca-die); border-radius: 22%; display: flex; align-items: center; justify-content: center;
  transition: opacity .25s, box-shadow .25s; }
.ca-slot[data-dim="1"] { opacity: .38; }
.ca-slot[data-empty="1"] { border: 2px dashed var(--ca-line); }
.ca-slot[data-die="match"] { box-shadow: 0 0 0 3px var(--ca-win), 0 0 18px 2px var(--ca-winglow); }
.ca-slot > * { flex: none; }

/* result banner */
.ca-banner { flex: none; height: 34px; border-radius: 10px; background: var(--ca-ban-idle); border: 1px solid var(--ca-line);
  display: flex; align-items: center; padding: 0 10px; gap: 8px; min-width: 0; }
.ca-banner[data-tone="win"] { background: var(--ca-ban-win); }
.ca-banner[data-tone="lose"] { background: var(--ca-ban-lose); }
.ca-banner[data-tone="lock"] { background: var(--ca-ban-lock); }
.ca-bantxt { flex: 1; min-width: 0; font: 700 11px/1.1 system-ui, sans-serif; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-bannet { flex: none; font: 800 16px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ca-dim); }
.ca-banner[data-tone="win"] .ca-bannet { color: var(--ca-win); }
.ca-banner[data-tone="lose"] .ca-bannet { color: var(--ca-loss); }
.ca-banner[data-tone="even"] .ca-bannet { color: var(--ca-txt); }

/* the cloth — the one flexible band */
.ca-cloth { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ca-area { position: relative; min-width: 0; min-height: 0; border-radius: 14px; background: var(--ca-tile); border: 2px solid var(--ca-tilebd);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; padding: 0;
  cursor: pointer; color: inherit; transition: opacity .2s; touch-action: manipulation; }
.ca-area:disabled { cursor: default; }
.ca-areag { width: 42px; height: 42px; }
.ca-areanm { font: 700 9px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; color: var(--ca-clothdim); }
.ca-area[data-state="win"] { border-color: var(--ca-win); background: var(--ca-tilewin); animation: caGlow 1.7s ease-in-out infinite; }
.ca-area[data-state="lose"] { opacity: .46; }
/* Landed on a symbol you did not back: the tie to the dice without the payout glow. */
.ca-area[data-state="landed"] { border-color: var(--ca-win); }
.ca-area[data-state="landed"] .ca-badge-m { background: var(--ca-panel); color: var(--ca-clothdim); box-shadow: inset 0 0 0 1.5px var(--ca-win); }
.ca-area[data-state="locked"] { border-style: dashed; }
.ca-badge-m { position: absolute; top: 6px; right: 7px; background: var(--ca-win); color: var(--ca-wintxt); font: 800 11px/1 system-ui, sans-serif;
  padding: 4px 6px; border-radius: 6px; }
.ca-badge-m:empty { visibility: hidden; }
.ca-payline { position: absolute; top: 7px; left: 8px; font: 800 11px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ca-payline[data-tone="win"] { color: var(--ca-paywin); }
.ca-payline[data-tone="lose"] { color: var(--ca-loss); }
.ca-you { position: absolute; left: 7px; bottom: 7px; width: 31px; height: 31px; border-radius: 50%; background: var(--ca-youchip);
  border: 2px dashed rgba(255, 255, 255, .85); color: var(--ca-youchiptxt); display: flex; align-items: center; justify-content: center;
  font: 800 10px/1 system-ui, sans-serif; letter-spacing: -.02em; box-shadow: 0 3px 7px rgba(0, 0, 0, .35); }
.ca-you[data-on="0"] { visibility: hidden; }
/* Reserved for the MP arm's opponent discs (bottom-right). Empty in solo. */
.ca-others { position: absolute; right: 7px; bottom: 8px; width: 72px; height: 21px; }

/* ── 🌐 MP (2026-09-19) — other seats' discs, seat colours, the roller. Every one of these lives INSIDE a
 * slot solo already reserves at its final size (`.ca-others`, the roster rows, the phone strip), so the
 * LOCKED LAYOUT holds: nothing here adds a band or changes a height. Seat 0 in display order is YOU
 * (--ca-p-you); the seven others take fixed hues that read on both schemes. */
#crownanchor-game-screen { --ca-p1: #6fa8dc; --ca-p2: #e06666; --ca-p3: #93c47d; --ca-p4: #c27ba0; --ca-p5: #f6b26b; --ca-p6: #76d7c4; --ca-p7: #b4a7d6; }
.ca-av[data-p="0"] { border-color: var(--ca-p-you); }
.ca-av[data-p="1"], .ca-od[data-p="1"] { --ca-seat: var(--ca-p1); }
.ca-av[data-p="2"], .ca-od[data-p="2"] { --ca-seat: var(--ca-p2); }
.ca-av[data-p="3"], .ca-od[data-p="3"] { --ca-seat: var(--ca-p3); }
.ca-av[data-p="4"], .ca-od[data-p="4"] { --ca-seat: var(--ca-p4); }
.ca-av[data-p="5"], .ca-od[data-p="5"] { --ca-seat: var(--ca-p5); }
.ca-av[data-p="6"], .ca-od[data-p="6"] { --ca-seat: var(--ca-p6); }
.ca-av[data-p="7"], .ca-od[data-p="7"] { --ca-seat: var(--ca-p7); }
.ca-av[data-kind="opp"] { border-color: var(--ca-seat, var(--ca-line)); }
.ca-av[data-roller="1"] { box-shadow: 0 0 0 2px var(--ca-brass); }
.ca-others { display: flex; align-items: center; justify-content: flex-end; gap: 2px; pointer-events: none; }
.ca-od { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--ca-seat, var(--ca-dim)); border: 2px solid rgba(0, 0, 0, .35);
  color: #111; font: 800 9px/1 system-ui, sans-serif; font-style: normal; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.ca-odx { flex: none; font: 800 9px/1 system-ui, sans-serif; color: var(--ca-clothdim); margin-left: 1px; }
.ca-pcell[data-kind="empty"] { visibility: hidden; }
.ca-pcell[data-left="1"], .ca-row[data-left="1"] { opacity: .45; }
.ca-rolls { font-style: normal; font-size: 11px; }
.ca-clock[data-low="1"] .ca-clockbar i { background: var(--ca-loss); }
.ca-clock[data-low="1"] .ca-clockval { color: var(--ca-loss); }
/* the MP dice label is two short lines on a phone (caMpDiceLabel) — boxed to the room left of the dice */
.ca-root[data-mp="1"] .ca-dicelab { white-space: pre-line; line-height: 1.3; width: 64px; max-height: 32px; overflow: hidden; }
.ca-tbadge[data-badge="cash"] { background: var(--ca-brass); color: #1c1508; border-color: transparent; }

/* settlement strip */
.ca-strip { flex: none; height: 34px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.ca-cell { border-radius: 8px; background: var(--ca-panel); border: 1px solid var(--ca-line); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.ca-cellg { width: 13px; height: 13px; }
.ca-cell span { font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ca-dim); }
.ca-cell[data-hit="1"] span { color: var(--ca-win); }

/* the countdown ROW — no clock in solo (owner ruling); it shows the bank on the cloth */
.ca-clock { flex: none; height: 14px; display: flex; align-items: center; gap: 8px; }
.ca-clocklab { font: 700 8px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--ca-dim); white-space: nowrap;
  width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ca-clockbar { flex: 1; height: 6px; border-radius: 3px; background: var(--ca-track); overflow: hidden; }
.ca-clockbar i { display: block; height: 100%; width: 0; background: var(--ca-brass); transition: width .2s; }
.ca-clockval { font: 800 13px/1 ui-monospace, Menlo, Consolas, monospace; min-width: 40px; text-align: right; }

/* controls */
.ca-controls { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 40px;
  grid-template-areas: "chips stake" "btns btns"; gap: 7px 6px; transition: opacity .2s; }
.ca-controls[data-dis="1"] { opacity: .42; filter: saturate(.5); }
.ca-stake { grid-area: stake; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.ca-stake b { font: 800 19px/1.15 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ca-bal { display: none; }
.ca-chips { grid-area: chips; display: flex; align-items: center; gap: 6px; }
.ca-chip { flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px dashed rgba(255, 255, 255, .75);
  display: flex; align-items: center; justify-content: center; font: 800 13px/1 system-ui, sans-serif; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); transition: transform .12s, box-shadow .12s, opacity .12s; }
.ca-chip[data-denom="1"]   { background: radial-gradient(circle at 34% 28%, #f2ece0, #cdc4b2 62%, #9e968a); }
.ca-chip[data-denom="5"]   { background: radial-gradient(circle at 34% 28%, #d4695c, #a63a2e 62%, #7c2820); }
.ca-chip[data-denom="10"]  { background: radial-gradient(circle at 34% 28%, #6d9ec4, #3a6b93 62%, #284d6c); }
.ca-chip[data-denom="25"]  { background: radial-gradient(circle at 34% 28%, #79ab7d, #3f7a48 62%, #2b5733); }
.ca-chip[data-denom="100"] { background: radial-gradient(circle at 34% 28%, #4a4a52, #26262c 62%, #15151a); }
.ca-chip[data-sel="1"] { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--ca-win), 0 6px 12px rgba(0, 0, 0, .4); }
.ca-chip:disabled { opacity: .35; cursor: default; }
.ca-btns { grid-area: btns; display: flex; gap: 6px; }
.ca-btn { flex: 1 1 0; min-width: 0; height: 40px; border-radius: 11px; border: 1px solid var(--ca-line); background: var(--ca-panel);
  color: var(--ca-txt); font: 700 11px/1 system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; padding: 0 4px; white-space: nowrap; }
.ca-btn:disabled { opacity: .45; cursor: default; }
.ca-primary { flex: 1.1 1 0; border: 0; background: var(--ca-btn); color: var(--ca-btntxt); font-weight: 800; letter-spacing: .08em; }

/* history */
.ca-hist { flex: none; height: 32px; display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--ca-line); padding-top: 5px; min-width: 0; overflow: hidden; }
.ca-histlist { display: flex; gap: 6px; min-width: 0; }
/* ⭐ FIXED width, filled or empty: three 12px glyphs + two 2px gaps + padding + border = 52.
 * A placeholder sized by its own padding was 48 and every roll widened the row. */
.ca-hrow { flex: none; display: flex; align-items: center; gap: 2px; width: 52px; height: 22px; padding: 0 5px; border-radius: 7px; background: var(--ca-panel); border: 1px solid var(--ca-line); }
.ca-hrow:nth-child(n+6) { display: none; }   /* the phone row holds five */
.ca-hrow[data-empty="1"] { border-style: dashed; background: transparent; }
.ca-hago, .ca-hrow b { display: none; }
.ca-hdice { display: flex; gap: 2px; }
.ca-hg { width: 12px; height: 12px; }

/* celebration + end screen */
@keyframes caGlow { 0%, 100% { box-shadow: 0 0 0 2px var(--ca-win), 0 0 16px -2px var(--ca-winglow); } 50% { box-shadow: 0 0 0 3px var(--ca-win), 0 0 30px 2px var(--ca-winglow); } }
@keyframes caPop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.ca-celebrate { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(0, 0, 0, .38); }
.ca-cel-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; animation: caPop .3s ease;
  min-width: 260px; padding: 26px 34px; border-radius: 18px; border: 1px solid var(--ca-line);
  background: radial-gradient(70% 60% at 50% 45%, var(--ca-winglow), transparent 75%), var(--ca-bg); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.ca-cel-glyphs { display: flex; gap: 10px; }
.ca-cel-g { width: 46px; height: 46px; }
.ca-cel-net { font: 800 34px/1 Georgia, serif; color: var(--ca-win); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.ca-cel-txt { font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .18em; color: var(--ca-txt); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.ca-endstats { display: flex; flex-direction: column; gap: 6px; }
.ca-endstat { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.ca-endstat-l { font-size: 13px; opacity: .75; }
.ca-endstat-v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── settlement flourish (owner request 2026-09-12; crownanchor.js caFxRun) ──
 * Opacity, colour and transform only — nothing here moves a band (LOCKED LAYOUT). The
 * JS never sets data-fx under reduced motion, so these need no reduce block. */
.ca-area::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ca-loss); opacity: 0; pointer-events: none; }
@keyframes caLoseArea { 0%, 42% { opacity: 1; border-color: var(--ca-loss); } 100% { opacity: .46; } }
@keyframes caLoseTint { 0% { opacity: 0; } 16%, 42% { opacity: .34; } 100% { opacity: 0; } }
@keyframes caLoseInk { 0%, 46% { color: var(--ca-loss); } 100% { color: var(--ca-sym); } }
.ca-area[data-fx="lose"] { animation: caLoseArea .75s ease both; }
.ca-area[data-fx="lose"]::after { animation: caLoseTint .75s ease both; }
.ca-area[data-fx="lose"] .ca-areag { animation: caLoseInk .75s ease both; }
/* the flying pieces live on <body>, outside the scheme — their colours are inlined */
@keyframes caFxLoseChip { 0%, 50% { box-shadow: 0 0 0 3px var(--ca-fx-loss), 0 0 16px 2px var(--ca-fx-loss); } 100% { box-shadow: 0 0 0 2px var(--ca-fx-loss); } }
body > .ca-fx.ca-fx-lose { animation: caFxLoseChip .42s ease both; }
@keyframes caTick { 0% { transform: scale(1); } 40% { transform: scale(1.24); color: var(--ca-win); } 100% { transform: scale(1); } }
.ca-row[data-pay="1"] .ca-rval, .ca-pcell[data-pay="1"] small { animation: caTick .34s ease; }
.ca-row[data-pay="1"], .ca-pcell[data-pay="1"] .ca-av { box-shadow: 0 0 0 2px var(--ca-win), 0 0 14px -2px var(--ca-winglow); }

@media (prefers-reduced-motion: reduce) {
  .ca-area[data-state="win"] { animation: none; box-shadow: 0 0 0 3px var(--ca-win); }
  .ca-cel-inner { animation: none; }
}

/* ── PHONE — unscaled. caFitPhone() measures the height the screen actually has. */
@media (max-width: 999px) {
  /* ⛔ `.wrap`'s gutter on a phone is width the cloth needs. */
  #crownanchor-game-screen .wrap { padding: 0; }
  /* ⭐ The page topbar is 45px the cloth needs: at 390×844 with the chat bar up it is
   * the difference between 106px cloth rows and 91. Hidden in play, and ☰ in the
   * board's head brings the REAL one back (the Daldøs · Craps · Dice Poker pattern —
   * never a bespoke copy of its controls). Nothing gates it on a setup card: this
   * screen has none, and ☰ is on the board from its first paint. */
  #crownanchor-game-screen.ca-playing .topbar { display: none; }
  #crownanchor-game-screen.ca-playing.ca-topbar-open .topbar { display: flex; }
  .ca-menu { display: inline-flex; align-items: center; justify-content: center; }
}
/* ⭐ SHORT PHONES (iPhone SE; any iPhone in Safari with the bottom toolbar, ~390×664): the fixed bands give
 * back ~34px so the one flexible band — the cloth — keeps thumb-sized rows while the board still ends
 * above the chat bar. Every band keeps a FIXED height here too (locked layout); only the numbers shrink. */
@media (max-width: 999px) and (max-height: 760px) {
  .ca-root { --ca-die: 50px; gap: 5px; padding-top: 5px; padding-bottom: 5px; }
  .ca-diceband { height: 62px; }
  .ca-pstrip { height: 40px; }
  .ca-controls { grid-template-rows: 38px 36px; gap: 6px 6px; }
  .ca-chip { width: 38px; height: 38px; font-size: 12px; }
  .ca-btn { height: 36px; }
  .ca-hist { height: 28px; padding-top: 4px; }
}

/* ── DESKTOP — one design box, scaled as a unit by BoardFit. ⛔ Three copies of
 * 1220 × 620: here, CA_FIT_W/CA_FIT_H in crownanchor.js, and board-fit.js.
 * ⛔ 620 IS A MEASUREMENT — the right column's natural height (clock, controls, six
 * history rows) is 523 and sets the body; the mock's 700 included the overlay strip
 * chat.css reserves on the screen instead. BoardFit charges scale for slack. */
@media (min-width: 1000px) {
  #crownanchor-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .ca-root {
    --ca-die: 84px;
    width: 1220px;
    height: 620px;
    padding: 18px;
    gap: 12px;
    border-radius: 20px;
  }
  .ca-mob { display: none; }
  .ca-dsk { display: inline; }
  .ca-cap { font-size: 8px; letter-spacing: .14em; }

  .ca-head { height: 44px; gap: 12px; }
  .ca-title { font-size: 26px; }
  .ca-tbadge { font-size: 9px; letter-spacing: .14em; padding: 6px 8px; border-radius: 6px; }
  .ca-seatline { display: inline; font: 600 13px/1 system-ui, sans-serif; color: var(--ca-dim); white-space: nowrap; }
  .ca-hbal { display: none; }
  .ca-info { width: 32px; height: 32px; font-size: 16px; }
  /* The banner lives in the head row on desktop (the mock), in a slot of fixed width. */
  .ca-banner { position: absolute; top: 23px; right: 62px; width: 470px; height: 34px; padding: 0 14px; gap: 12px; border-radius: 9px; }
  .ca-bantxt { font-size: 13px; letter-spacing: .03em; }
  .ca-bannet { font-size: 19px; }

  .ca-body { display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 18px; }
  .ca-colL, .ca-colR { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  .ca-colC { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
  .ca-colR { gap: 11px; }
  .ca-pstrip { display: none; }
  .ca-menu { display: none; }

  .ca-roster { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .ca-rhead { font: 700 9px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; color: var(--ca-dim); padding-bottom: 4px; }
  .ca-row { flex: none; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 11px; border-radius: 12px;
    background: var(--ca-panel); border: 1px solid var(--ca-line); min-width: 0; }
  .ca-row[data-kind="stat"] { background: transparent; border-style: dashed; }
  .ca-row .ca-av { width: 34px; height: 34px; font-size: 11px; background: var(--ca-track); }
  .ca-row .ca-av[data-kind="house"] { font-size: 16px; }
  .ca-rtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .ca-rtxt b { font: 700 13px/1 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ca-rtxt small { font: 600 10px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ca-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ca-rval { flex: none; font: 700 13px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ca-dim); }
  .ca-row[data-kind="seat"] .ca-rval { color: var(--ca-txt); }
  /* 🌐 MP: an unfilled chair holds its 56px as a dashed outline — eight rows are the design box. */
  .ca-row[data-kind="empty"] { background: transparent; border-style: dashed; opacity: .5; }
  .ca-row[data-roller="1"] { border-color: var(--ca-brass); }
  .ca-od { width: 25px; height: 25px; font-size: 10px; }
  .ca-root[data-mp="1"] .ca-dicelab { width: auto; max-height: none; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .ca-diceband { height: 130px; gap: 22px; }
  .ca-dicelab { top: 10px; left: 14px; font-size: 9px; letter-spacing: .16em; }
  .ca-cloth { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ca-area { border-radius: 16px; gap: 7px; }
  .ca-areag { width: 56px; height: 56px; }
  .ca-areanm { font-size: 10px; letter-spacing: .2em; }
  .ca-badge-m { top: 8px; right: 9px; font-size: 13px; padding: 5px 8px; border-radius: 7px; }
  .ca-payline { top: 9px; left: 11px; font-size: 13px; }
  .ca-you { left: 10px; bottom: 10px; width: 38px; height: 38px; font-size: 12px; }
  .ca-others { right: 10px; bottom: 11px; width: 116px; height: 25px; }
  .ca-strip { height: 44px; gap: 8px; }
  .ca-cell { flex-direction: row; gap: 7px; border-radius: 10px; }
  .ca-cellg { width: 17px; height: 17px; }
  .ca-cell span { font-size: 11px; }

  .ca-clock { height: 18px; gap: 10px; }
  .ca-clocklab { font-size: 9px; width: 132px; }
  .ca-clockbar { height: 8px; border-radius: 4px; }
  .ca-clockval { font-size: 17px; min-width: 48px; }

  .ca-controls { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 34px 48px 42px 48px;
    grid-template-areas: "stake bal" "chips chips" "btns btns" "btns btns"; gap: 10px 8px;
    padding: 12px; border-radius: 14px; background: var(--ca-panel); border: 1px solid var(--ca-line); }
  .ca-stake { align-items: flex-start; justify-content: space-between; }
  .ca-stake b { font-size: 24px; line-height: 1; }
  .ca-bal { grid-area: bal; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
  .ca-bal b { font: 800 20px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ca-dim); }
  .ca-chips { gap: 7px; }
  .ca-chip { width: 48px; height: 48px; font-size: 14px; }
  .ca-btns { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 42px 48px; gap: 10px 8px; }
  .ca-btn { height: auto; background: var(--ca-track); }
  .ca-primary { grid-column: 1 / -1; font-size: 13px; letter-spacing: .1em; border-radius: 12px; background: var(--ca-btn); }

  .ca-hist { flex: 1 1 auto; height: auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 7px; padding: 11px;
    border-radius: 14px; background: var(--ca-panel); border: 1px solid var(--ca-line); }
  .ca-histcap { font-size: 9px; letter-spacing: .14em; }
  .ca-histlist { flex-direction: column; gap: 7px; }
  .ca-hrow, .ca-hrow:nth-child(n+6) { display: flex; align-items: center; gap: 9px; width: auto; height: 30px; padding: 0; border: 0; background: transparent; }
  .ca-hrow[data-empty="1"] { width: auto; height: 30px; border-bottom: 1px dashed var(--ca-line); border-radius: 0; }
  .ca-hago { display: inline; font: 700 9px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ca-dim); width: 26px; }
  .ca-hdice { gap: 5px; }
  .ca-hg { width: 17px; height: 17px; }
  .ca-hrow b { display: inline; margin-left: auto; font: 700 11px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  .ca-hrow[data-tone="win"] b { color: var(--ca-win); }
  .ca-hrow[data-tone="lose"] b { color: var(--ca-loss); }
}