/* frontend/caravan.css — CARAVAN board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Skewers / Cee-lo / Toad Toss / Line Up precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's palette (docs/design/Batch 5/Caravan.dc.html,
 * `:root`). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card sits outside
 * `.cv-root`. Racers are SHAPE first (`.cv-g[data-r]` clip-paths), colour second.
 *
 * ── 🎨 THE PIXEL SKIN COMES LATER, AS A TOGGLE (mock F11) ─────────────────────
 * Radii and fonts are variables (`--cv-r*`, `--cv-ui`, `--cv-mono`): the pixel direction is a class
 * that redefines them and colours, and NOTHING ELSE.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * ONE DOM, two arrangements by CSS grid areas. Every row and column is a FIXED size except the
 * track (desktop: the `1fr` row; phone: the `1fr` row, two lanes of 8). Every text box FILLS its slot
 * (a centred text box is a moving box — the Toad Toss finding). Feedback changes colour, glow or a
 * transform — never size or spacing.
 */

#caravan-game-screen, .cv-root {
  --cv-bg: #14120e; --cv-panel: #1d1a14; --cv-panel2: #26221a; --cv-cell: #201c15; --cv-cellBd: #342e23;
  --cv-line: #352f24; --cv-ink: #f1ead9; --cv-dim: #a49b88; --cv-dimmer: #736c5d;
  --cv-gold: #e3b552; --cv-coin: #f0c94a; --cv-ok: #7cc79b; --cv-bad: #e0827a; --cv-dark: #17140d;
  --cv-r0: #e8a33d; --cv-r1: #6fb6e8; --cv-r2: #74c8a4; --cv-r3: #b49ae8; --cv-r4: #e4837a;
  --cv-btnBg: #241f18; --cv-btnBd: #3c3529; --cv-btnHov: #2f281e; --cv-btnAct: #1a1610; --cv-off: #1b1812; --cv-offBd: #2c2720;
  --cv-ui: system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --cv-mono: ui-monospace, Menlo, Consolas, monospace;
  --cv-r1x: 4px; --cv-r2x: 8px;
}

@keyframes cv-turn { 0%, 100% { box-shadow: 0 0 0 1px var(--cv-gold), 0 0 0 rgba(227, 181, 82, 0) } 50% { box-shadow: 0 0 0 1px var(--cv-gold), 0 0 14px -2px rgba(227, 181, 82, .7) } }
@keyframes cv-think { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes cv-pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes cv-fly { 0% { transform: translateY(10px) scale(.6); opacity: 0 } 25% { opacity: 1 } 100% { transform: translateY(-16px) scale(1); opacity: 0 } }
@keyframes cv-lit { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 181, 82, .4), 0 0 12px -6px rgba(227, 181, 82, .8) } 55% { box-shadow: 0 0 0 4px rgba(227, 181, 82, 0), 0 0 18px -4px rgba(227, 181, 82, .95) } }
@keyframes cv-flash { 0% { box-shadow: 0 0 0 2px var(--cv-gold), 0 0 22px -2px var(--cv-gold) } 100% { box-shadow: 0 0 0 0 rgba(227, 181, 82, 0) } }
@keyframes cv-rise { 0% { opacity: 0; transform: translate(-50%, 8px) } 100% { opacity: 1; transform: translate(-50%, 0) } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.cv-setup-card { max-width: 540px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.cv-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.cv-setup-title { margin: 0; font-size: 28px; }
.cv-setup-blurb, .cv-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.cv-setup-hint { opacity: .75; font-size: 13px; }
.cv-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cv-setup-lab { font-weight: 700; font-size: 13px; min-width: 52px; }
.cv-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-opt { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--cv-btnBd); background: var(--cv-btnBg); color: var(--cv-ink); font-weight: 800; cursor: pointer; }
.cv-opt[data-on="1"] { border-color: var(--cv-gold); background: var(--cv-btnHov); color: var(--cv-gold); box-shadow: 0 0 12px -4px var(--cv-gold); }
.cv-start { height: 48px; border: 0; border-radius: 12px; background: var(--cv-gold); color: var(--cv-dark); font-weight: 800; font-size: 16px; cursor: pointer; }
@media (hover: hover) { .cv-start:hover, .cv-opt:hover { filter: brightness(1.1); } }

/* ── the racer glyph: SHAPE is identity ─────────────────────────────────── */
.cv-g { display: inline-block; flex: none; width: var(--gs, 10px); height: var(--gs, 10px); background: var(--rc, var(--cv-dim)); font-style: normal; }
.cv-g[data-r="0"] { --rc: var(--cv-r0); clip-path: polygon(50% 4%, 98% 96%, 2% 96%); }
.cv-g[data-r="1"] { --rc: var(--cv-r1); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cv-g[data-r="2"] { --rc: var(--cv-r2); border-radius: 50%; }
.cv-g[data-r="3"] { --rc: var(--cv-r3); }
.cv-g[data-r="4"] { --rc: var(--cv-r4); clip-path: polygon(26% 0, 74% 0, 100% 50%, 74% 100%, 26% 100%, 0 50%); }

/* ── the board root (phone first: the mock's 384 × 812 arrangement) ─────── */
.cv-root {
  --cv-tokH: 18px; --cv-pitch: 19px; --cv-cellH: 26px; --cv-die: 28px;
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--cv-phone-h, 740px); padding: 8px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 24px 20px minmax(0, 1fr) 40px 52px 34px 46px 14px 52px;
  grid-template-areas: "head" "stand" "track" "dice" "legs" "bets" "seats" "status" "acts";
  gap: 5px;
  background: var(--cv-bg); color: var(--cv-ink); font-family: var(--cv-ui);
  border-radius: 14px; box-shadow: inset 0 0 0 1px var(--cv-line);
}
.cv-root *, .cv-root *::before, .cv-root *::after { box-sizing: border-box; }
.cv-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.cv-root i, .cv-root em { font-style: normal; }

.cv-head { grid-area: head; display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.cv-brand { flex: none; font: 800 12px/1 var(--cv-ui); letter-spacing: .14em; }
.cv-leg { flex: none; height: 17px; display: flex; align-items: center; padding: 0 6px; border-radius: var(--cv-r1x); background: var(--cv-panel2); border: 1px solid var(--cv-line); font: 800 9px/1 var(--cv-mono); color: var(--cv-gold); }
.cv-phase { display: none; }
.cv-you { margin-left: auto; flex: none; display: flex; align-items: baseline; gap: 5px; font: 700 9px/1 var(--cv-mono); color: var(--cv-dimmer); }
.cv-you b { display: inline-block; min-width: 3ch; text-align: right; font: 800 14px/1 var(--cv-mono); color: var(--cv-coin); }
.cv-menu { flex: none; width: 30px; height: 22px; border: 0; border-radius: 999px; cursor: pointer; font-size: 13px; background: var(--cv-panel2); color: var(--cv-ink); box-shadow: inset 0 0 0 1px var(--cv-line); }
@media (hover: hover) { .cv-menu:hover { box-shadow: inset 0 0 0 1px var(--cv-gold); color: var(--cv-gold); } }

.cv-stand { grid-area: stand; display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.cv-now { flex: none; font: 700 8px/1 var(--cv-mono); letter-spacing: .12em; color: var(--cv-dimmer); }
.cv-st { flex: none; display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 4px; border-radius: var(--cv-r1x); background: var(--cv-panel); border: 1px solid var(--cv-line); --gs: 8px; }
.cv-st[data-i="0"] { background: var(--cv-panel2); border-color: var(--cv-gold); }
.cv-st small { font: 800 8px/1 var(--cv-mono); color: var(--cv-dimmer); width: 2.6ch; }
.cv-st b { font: 800 9px/1 var(--cv-mono); color: var(--cv-ink); width: 3ch; }

/* ── seats (display, not controls) ─────────────────────────────────────── */
.cv-seats { grid-area: seats; display: flex; gap: 3px; min-width: 0; }
.cv-seat {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 1px;
  border-radius: var(--cv-r1x); background: var(--cv-panel); border: 1px solid var(--cv-line);
}
.cv-seat[data-empty="1"] { background: transparent; border: 1px dashed var(--cv-offBd); }
.cv-sopen { font: 700 0/1 var(--cv-mono); letter-spacing: .1em; color: #4c4740; }
.cv-sopen::before { content: "—"; font-size: 8px; }
.cv-tix small em { display: none; }
.cv-seat[data-turn="1"] { background: var(--cv-panel2); border-color: var(--cv-gold); animation: cv-turn 1.6s ease-in-out infinite; }
.cv-srow { display: contents; }
.cv-av { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2a2620; border: 1px solid var(--cv-line); font: 800 8px/1 var(--cv-mono); color: var(--cv-dim); }
.cv-seat[data-you="1"] .cv-av { background: #3a3226; border-color: var(--cv-gold); color: var(--cv-gold); }
.cv-smid { display: contents; }
.cv-sname { width: 100%; text-align: center; font: 700 7px/1 var(--cv-mono); color: var(--cv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-seat[data-turn="1"] .cv-sname { color: var(--cv-gold); }
.cv-sstate { display: none; }
.cv-scoinw { position: relative; display: flex; align-items: baseline; gap: 2px; }
.cv-scoins { display: inline-block; min-width: 3ch; text-align: center; font: 800 11px/1 var(--cv-mono); color: var(--cv-coin); }
.cv-sdelta { position: absolute; left: 50%; top: -12px; margin-left: -10px; width: 20px; text-align: center; font: 800 9px/1 var(--cv-mono); opacity: 0; pointer-events: none; }
.cv-sdelta[data-sign="up"] { color: var(--cv-ok); }
.cv-sdelta[data-sign="down"] { color: var(--cv-bad); }
.cv-sdelta[data-on="1"] { animation: cv-fly 1.4s ease-out both; }
.cv-sbets { display: none; }
.cv-sbetn { font: 700 7px/1 var(--cv-mono); color: var(--cv-dimmer); height: 8px; }

/* ── the track ─────────────────────────────────────────────────────────── */
.cv-track {
  grid-area: track; min-height: 0; position: relative; display: flex; flex-direction: column; gap: 5px; overflow: hidden;
  padding: 6px 7px; border-radius: var(--cv-r2x); background: var(--cv-panel); border: 1px solid var(--cv-line);
}
.cv-trackhead { flex: none; height: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-tracklbl { font: 700 8px/1 var(--cv-mono); letter-spacing: .12em; color: var(--cv-dimmer); white-space: nowrap; overflow: hidden; }
.cv-tracklbl em { display: none; }
/* the note FILLS its row: empty it measured 0px tall and grew when text arrived (the locked walk) */
.cv-tracknote { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: flex-end; text-align: right; font: 700 8px/1 var(--cv-mono); color: var(--cv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-tracknote[data-hot="1"] { color: var(--cv-gold); }
.cv-lane {
  flex: 1 1 auto; min-height: 0; display: grid; column-gap: 2px; row-gap: 6px;
  grid-template-columns: repeat(8, minmax(0, 1fr)) 22px; grid-template-rows: repeat(2, minmax(0, 1fr));
}
.cv-col { grid-column: var(--pc); grid-row: var(--pr); min-width: 0; min-height: 0; display: flex; flex-direction: column-reverse; gap: 1px; }
.cv-cell {
  position: relative; flex: none; height: var(--cv-cellH); display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--cv-r1x); background: var(--cv-cell); border: 1px solid var(--cv-cellBd);
  transition: background .13s, border-color .13s, box-shadow .13s, transform .08s;
}
.cv-num { position: absolute; top: 2px; left: 3px; font: 700 7px/1 var(--cv-mono); color: var(--cv-dimmer); }
.cv-tile { display: none; flex-direction: column; align-items: center; gap: 1px; font: 800 8px/1 var(--cv-mono); }
.cv-tile i { font: 800 9px/1 var(--cv-ui); }
.cv-tile em { display: none; font: 700 6px/1 var(--cv-mono); color: var(--cv-dim); }
.cv-cell[data-tile="boost"], .cv-cell[data-tile="trap"] { background: var(--cv-panel2); }
.cv-cell[data-tile="boost"] { border-color: var(--cv-ok); }
.cv-cell[data-tile="trap"] { border-color: var(--cv-bad); border-style: dashed; }
.cv-cell[data-tile="boost"] .cv-tile { display: flex; color: var(--cv-ok); }
.cv-cell[data-tile="trap"] .cv-tile { display: flex; color: var(--cv-bad); }
.cv-cell[data-flash="1"] { animation: cv-flash .9s ease-out both; }
/* L1 — a legal space for your tile: lit, pointer; the border WIDTH never changes */
.cv-cell[data-lit="1"], .cv-cell[data-lit="pick"] { cursor: pointer; border-color: var(--cv-gold); background: color-mix(in srgb, var(--cv-gold) 16%, var(--cv-cell)); animation: cv-lit 1.9s ease-in-out infinite; }
.cv-cell[data-lit="pick"] { background: color-mix(in srgb, var(--cv-gold) 30%, var(--cv-cell)); animation: none; box-shadow: 0 0 16px -2px var(--cv-gold); }
@media (hover: hover) { .cv-cell[data-lit="1"]:hover { background: color-mix(in srgb, var(--cv-gold) 28%, var(--cv-cell)); animation: none; box-shadow: 0 0 16px -3px var(--cv-gold); } }
.cv-cell[data-lit="1"]:active { transform: translateY(1px); }
.cv-track[data-mode="tile"] .cv-cell[data-lit="0"] { opacity: .55; }
.cv-stack { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column-reverse; gap: 1px; }
.cv-tok {
  flex: none; height: var(--cv-tokH); width: 100%; display: flex; align-items: center; gap: 3px; padding: 0 3px; overflow: hidden;
  border-radius: var(--cv-r1x); background: var(--rc, var(--cv-dim)); color: var(--cv-dark); box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  font: 800 8px/1 var(--cv-mono); --gs: 8px;
}
.cv-tok .cv-g { background: var(--cv-dark); }
.cv-tok[data-r="0"] { --rc: var(--cv-r0); } .cv-tok[data-r="1"] { --rc: var(--cv-r1); } .cv-tok[data-r="2"] { --rc: var(--cv-r2); }
.cv-tok[data-r="3"] { --rc: var(--cv-r3); } .cv-tok[data-r="4"] { --rc: var(--cv-r4); }
.cv-tok b { white-space: nowrap; overflow: hidden; }
.cv-tok[data-ghost="1"] { background: transparent; border: 1px dashed var(--cv-dimmer); opacity: .55; box-shadow: none; }
.cv-tok[data-hole="1"] { background: rgba(227, 181, 82, .08); border: 1px dashed var(--cv-gold); box-shadow: none; }
.cv-turnmark { grid-column: 9; grid-row: 1; align-self: end; height: var(--cv-cellH); display: flex; align-items: center; justify-content: center; font: 800 10px/1 var(--cv-mono); color: var(--cv-dimmer); }
.cv-fin { grid-column: 9; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column-reverse; gap: 1px; }
.cv-finbase { flex: none; height: var(--cv-cellH); border-radius: var(--cv-r1x); background: repeating-linear-gradient(45deg, var(--cv-ink) 0 4px, var(--cv-panel2) 4px 8px); opacity: .75; display: flex; align-items: flex-end; justify-content: center; }
.cv-finbase small { display: none; }
.cv-finstack { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column-reverse; gap: 1px; }
.cv-fin .cv-tok { justify-content: center; padding: 0; }
.cv-fin .cv-tok b { display: none; }

/* ── dice ──────────────────────────────────────────────────────────────── */
.cv-dice { grid-area: dice; display: flex; align-items: center; gap: 6px; padding: 0 7px; border-radius: var(--cv-r2x); background: var(--cv-panel); border: 1px solid var(--cv-line); min-width: 0; }
.cv-dlbl { display: none; }
.cv-dslot { flex: none; display: flex; align-items: center; gap: 3px; }
.cv-dbadge { flex: none; height: var(--cv-die); width: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 3px; border: 1px solid transparent; font: 800 7px/1 var(--cv-mono); color: var(--cv-dimmer); --gs: 8px; }
.cv-dslot[data-rolled="1"] .cv-dbadge, .cv-dslot[data-rolled="rolling"] .cv-dbadge { background: var(--cv-panel2); border-color: var(--cv-line); color: var(--cv-ink); }
.cv-dslot[data-rolled="rolling"] .cv-dbadge { border-color: var(--cv-gold); box-shadow: 0 0 10px -3px var(--cv-gold); }
/* the die is DISPLAY: no hover, no cursor; the renderer draws the skin into a fixed frame */
.cv-die { flex: none; width: var(--cv-die); height: var(--cv-die); display: flex; align-items: center; justify-content: center; }
.cv-ghostdie { display: block; width: 100%; height: 100%; border-radius: var(--cv-r1x); border: 1px dashed #3a342a; opacity: .6; }
.cv-diefb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--cv-r1x); background: #100e0a; color: var(--cv-ink); font-weight: 800; }
.cv-tix { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.cv-tix small { font: 700 7px/1 var(--cv-mono); letter-spacing: .1em; color: var(--cv-dimmer); white-space: nowrap; }
.cv-tix b { display: block; width: 9ch; text-align: right; font: 800 9px/1 var(--cv-mono); color: var(--cv-coin); white-space: nowrap; overflow: hidden; }

/* ── status + the four actions ─────────────────────────────────────────── */
.cv-status { grid-area: status; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cv-status i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cv-dim); animation: cv-pulse 1.1s ease-in-out infinite; }
.cv-status[data-you="1"] i { background: var(--cv-gold); animation: none; }
.cv-status span { flex: 1 1 auto; min-width: 0; font: 600 8.5px/1 var(--cv-mono); color: var(--cv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-status[data-you="1"] span { color: var(--cv-gold); }
/* 🌐 The online turn clock: an ABSOLUTE 2px bar along the status row's foot — it takes no layout room, so the
   locked layout is the same with the clock on, off, or solo (where it never shows). Shrinks by transform. */
.cv-status { position: relative; }
.cv-clock { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 1px; background: var(--cv-dim);
  transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none; }
.cv-clock[data-on="1"] { opacity: .9; transition: transform .25s linear; }
.cv-clock[data-mine="1"] { background: var(--cv-gold); }
.cv-clock[data-low="1"] { background: var(--cv-bad); }
/* 🌐 a seat that LEFT the table (CVM-LEAVER) — dimmed, never removed (its tile and leg bets still stand) */
.cv-seat[data-left="1"] { opacity: .45; }

.cv-acts { grid-area: acts; display: flex; gap: 5px; min-width: 0; }
.cv-act {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 3px;
  border-radius: var(--cv-r2x); background: var(--cv-btnBg); border: 1px solid var(--cv-btnBd); color: var(--cv-ink); cursor: pointer;
  transition: background .13s, border-color .13s, box-shadow .13s, transform .08s;
}
.cv-aico { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--cv-ui); color: var(--cv-gold); }
.cv-atxt { display: contents; }
.cv-atxt b { width: 100%; text-align: center; font: 800 9px/1 var(--cv-mono); letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.cv-atxt small { display: none; }
.cv-asub2 { width: 100%; height: 8px; text-align: center; font: 600 7.5px/1 var(--cv-mono); color: var(--cv-dimmer); white-space: nowrap; overflow: hidden; }
@media (hover: hover) { .cv-act:not(:disabled):hover { background: var(--cv-btnHov); border-color: var(--cv-gold); box-shadow: 0 0 14px -4px rgba(227, 181, 82, .75); } }
.cv-act:not(:disabled):active { background: var(--cv-btnAct); border-color: var(--cv-gold); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55); transform: translateY(1px); }
.cv-act[data-armed="1"] { background: var(--cv-btnAct); border-color: var(--cv-gold); box-shadow: inset 0 0 0 1px var(--cv-gold), 0 0 14px -4px var(--cv-gold); }
.cv-act:disabled { background: var(--cv-off); border-color: var(--cv-offBd); color: rgba(241, 234, 217, .38); cursor: not-allowed; }
.cv-act:disabled .cv-aico { color: rgba(227, 181, 82, .35); }
.cv-act:disabled .cv-asub2, .cv-atxt small[data-bad="1"] { color: var(--cv-bad); }

/* ── leg bet tiles ─────────────────────────────────────────────────────── */
.cv-legs { grid-area: legs; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 5px 6px; border-radius: var(--cv-r2x); background: var(--cv-panel); border: 1px solid var(--cv-line); min-width: 0; }
.cv-panelhead { display: none; }
.cv-lrow {
  min-width: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr) 18px; grid-template-rows: 16px 14px; column-gap: 3px; row-gap: 2px; align-items: center; padding: 2px;
  border-radius: 3px; background: var(--cv-panel2); border: 1px solid var(--cv-line); overflow: hidden; --gs: 9px;
  transition: background .13s, border-color .13s, box-shadow .13s;
}
.cv-lname { display: none; }
.cv-lab { font: 800 8px/1 var(--cv-mono); color: var(--cv-ink); white-space: nowrap; overflow: hidden; }
.cv-lnext { width: 18px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--cv-coin); color: var(--cv-dark); border: 1px solid #b8912f; font: 800 10px/1 var(--cv-mono); }
.cv-lrow[data-gone="1"] .cv-lnext { background: transparent; color: #5c564a; border: 1px dashed #3a342a; }
.cv-lheld { grid-column: 1 / span 3; height: 14px; display: flex; gap: 2px; overflow: hidden; }
.cv-held { flex: 1 1 0; min-width: 0; height: 12px; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: #262118; border: 1px solid var(--cv-line); font: 700 7px/1 var(--cv-mono); color: var(--cv-dim); overflow: hidden; white-space: nowrap; }
.cv-lrow[data-lit="1"] { cursor: pointer; border-color: var(--cv-gold); animation: cv-lit 1.9s ease-in-out infinite; }
@media (hover: hover) { .cv-lrow[data-lit="1"]:hover { background: var(--cv-btnHov); box-shadow: 0 0 14px -4px rgba(227, 181, 82, .75); animation: none; } }
.cv-lrow[data-lit="1"]:active { background: var(--cv-btnAct); }
.cv-lrow[data-flash="1"] { animation: cv-flash .9s ease-out both; }

/* ── race bets ─────────────────────────────────────────────────────────── */
.cv-bets { grid-area: bets; display: flex; align-items: center; gap: 6px; padding: 0 7px; border-radius: var(--cv-r2x); background: var(--cv-panel); border: 1px solid var(--cv-line); min-width: 0; }
.cv-piles { flex: none; display: flex; gap: 5px; }
.cv-pile { flex: none; height: 26px; display: flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: 3px; background: var(--cv-panel2); border: 1px solid var(--cv-line); }
.cv-pile[data-flash="1"] { animation: cv-flash .9s ease-out both; }
.cv-pname { display: flex; align-items: center; gap: 3px; font: 800 8px/1 var(--cv-mono); color: var(--cv-ink); }
.cv-pname i { font: 800 9px/1 var(--cv-ui); }
.cv-pbacks { display: none; }
.cv-pcount { display: inline-block; width: 8ch; font: 700 8px/1 var(--cv-mono); color: var(--cv-dim); white-space: nowrap; overflow: hidden; }
.cv-cardslbl { display: none; }
.cv-cards { flex: 1 1 auto; min-width: 0; display: flex; gap: 3px; justify-content: flex-end; }
.cv-card { flex: 1 1 0; max-width: 26px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--cv-panel2); border: 1px solid var(--cv-line); --gs: 9px; }
.cv-card small { display: none; }
.cv-card[data-used="win"], .cv-card[data-used="lose"], .cv-card[data-used="x"] { background: transparent; border-style: dashed; opacity: .55; }
.cv-card[data-used="win"] .cv-g, .cv-card[data-used="lose"] .cv-g { background: #5c564a; }

/* ── absolute layers INSIDE the root: flights, chooser, callout, sheet, payouts (L7) ── */
.cv-fx { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.cv-flyunit { position: absolute; display: flex; flex-direction: column-reverse; gap: 1px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); }
.cv-flycard { position: absolute; width: 14px; height: 20px; border-radius: 2px; background: #2f2a20; border: 1px solid #453d2f; }

.cv-tilepick {
  position: absolute; z-index: 20; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--cv-r2x);
  background: var(--cv-panel); border: 1px solid var(--cv-gold); box-shadow: 0 14px 30px -12px #000;
}
.cv-tilepick[data-on="0"] { visibility: hidden; }
.cv-tpb {
  height: 28px; padding: 0 9px; display: flex; align-items: center; gap: 5px; border-radius: var(--cv-r1x); cursor: pointer; white-space: nowrap;
  background: var(--cv-btnBg); border: 1px solid var(--cv-btnBd); color: var(--cv-ink); font: 800 10px/1 var(--cv-mono);
}
.cv-tpb[data-side="1"] i { color: var(--cv-ok); }
.cv-tpb[data-side="-1"] i { color: var(--cv-bad); }
.cv-tpx { width: 26px; height: 28px; border-radius: var(--cv-r1x); cursor: pointer; background: transparent; border: 1px solid var(--cv-line); color: var(--cv-dim); }
@media (hover: hover) { .cv-tpb:hover, .cv-tpx:hover { background: var(--cv-btnHov); border-color: var(--cv-gold); } }
.cv-tpb:active, .cv-tpx:active { background: var(--cv-btnAct); transform: translateY(1px); }

.cv-callout {
  position: absolute; left: 50%; top: 150px; z-index: 22; width: calc(100% - 16px); display: flex; flex-direction: column; gap: 3px; padding: 9px 12px;
  border-radius: var(--cv-r2x); background: var(--cv-gold); color: var(--cv-dark); box-shadow: 0 16px 40px -14px #000; transform: translateX(-50%);
}
.cv-callout[data-on="0"] { visibility: hidden; }
.cv-callout[data-on="1"] { animation: cv-rise .25s ease-out both; }
.cv-callout b { font: 800 10px/1 var(--cv-mono); letter-spacing: .12em; }
.cv-callout span { font: 700 11px/1.3 var(--cv-ui); }

.cv-scrim { position: absolute; inset: 0; z-index: 24; display: flex; align-items: center; justify-content: center; padding: 8px; background: rgba(9, 8, 5, .66); }
.cv-scrim[data-on="0"] { visibility: hidden; }
.cv-sheetcard, .cv-paycard {
  width: 100%; display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: var(--cv-r2x);
  background: var(--cv-panel); border: 1px solid var(--cv-gold); box-shadow: 0 34px 90px -22px #000;
}
.cv-shead { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 3px; }
.cv-shead b { font: 800 13px/1 var(--cv-ui); letter-spacing: .12em; color: var(--cv-gold); }
.cv-shead span { font: 600 10px/1.3 var(--cv-mono); color: var(--cv-dim); }
.cv-sstep { font: 700 8px/1 var(--cv-mono); letter-spacing: .14em; color: var(--cv-dimmer); }
.cv-scards { display: flex; gap: 5px; }
.cv-scard {
  flex: 1 1 0; min-width: 0; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
  border-radius: var(--cv-r1x); background: var(--cv-panel2); border: 1px solid var(--cv-line); color: var(--cv-ink); --gs: 16px;
  transition: background .13s, border-color .13s, box-shadow .13s, transform .08s;
}
.cv-scard b { font: 800 9px/1 var(--cv-mono); max-width: 100%; overflow: hidden; }
.cv-scard small { font: 700 7px/1 var(--cv-mono); color: var(--cv-dimmer); }
.cv-scard[data-st="sel"] { border-color: var(--cv-gold); box-shadow: 0 0 16px -4px rgba(227, 181, 82, .8); transform: translateY(-3px); }
.cv-scard[data-st="sel"] small { color: var(--cv-gold); }
.cv-scard[data-st="placed"] { background: transparent; border-style: dashed; opacity: .5; cursor: not-allowed; }
.cv-scard[data-st="placed"] .cv-g { background: #5c564a; }
@media (hover: hover) { .cv-scard[data-st="ready"]:hover { background: var(--cv-btnHov); border-color: var(--cv-gold); } }
.cv-spiles { display: flex; gap: 7px; }
.cv-spile {
  flex: 1 1 0; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  border-radius: var(--cv-r1x); background: var(--cv-panel2); border: 1px solid var(--cv-line); color: var(--cv-ink);
}
.cv-spile b { font: 800 12px/1 var(--cv-ui); }
.cv-spile small { font: 600 9px/1 var(--cv-mono); color: var(--cv-dim); }
.cv-spile[data-sel="1"] { border: 1px dashed var(--cv-gold); box-shadow: 0 0 18px -6px rgba(227, 181, 82, .7); }
@media (hover: hover) { .cv-spile:hover { background: var(--cv-btnHov); border-color: var(--cv-gold); } }
.cv-sfoot { display: flex; align-items: center; gap: 8px; }
.cv-sfoot span { flex: 1 1 auto; min-width: 0; font: 600 9px/1.45 var(--cv-mono); color: var(--cv-dim); }
.cv-sbtn { flex: none; height: 30px; padding: 0 12px; border-radius: var(--cv-r1x); cursor: pointer; background: var(--cv-gold); color: var(--cv-dark); border: 1px solid var(--cv-gold); font: 800 10px/1 var(--cv-mono); letter-spacing: .1em; }
.cv-sghost { background: var(--cv-btnBg); color: var(--cv-ink); border-color: var(--cv-btnBd); }
@media (hover: hover) { .cv-sbtn:not(:disabled):hover { filter: brightness(1.1); } }
.cv-sbtn:not(:disabled):active { transform: translateY(1px); filter: brightness(.9); }
.cv-sbtn:disabled { background: #221e17; color: #6b6455; border-color: #332d22; cursor: not-allowed; }

.cv-payrows { display: flex; flex-direction: column; gap: 3px; }
.cv-payrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, .7fr) 24px 24px; gap: 5px; align-items: center; height: 26px; padding: 0 6px; border-radius: var(--cv-r1x); border: 1px solid var(--cv-line); }
.cv-paycols { height: 12px; border-color: transparent; }
.cv-paycols span { font: 700 7px/1 var(--cv-mono); letter-spacing: .1em; color: var(--cv-dimmer); }
.cv-payrow[data-you="1"] { background: var(--cv-panel2); border-color: var(--cv-gold); }
.cv-payrow span { min-width: 0; font: 600 8.5px/1 var(--cv-mono); color: var(--cv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-payrow span[data-c="0"] { color: var(--cv-ink); font-weight: 800; }
.cv-payrow span[data-c="3"], .cv-payrow span[data-c="4"] { text-align: right; }
.cv-payrow span[data-c="4"] { font-weight: 800; color: var(--cv-ink); }
.cv-payrow span[data-d="up"] { color: var(--cv-ok); }
.cv-payrow span[data-d="down"] { color: var(--cv-bad); }

/* end screen rows (GameEndScreen html section) */
.cv-endrows { display: flex; flex-direction: column; gap: 5px; }
.cv-endrow { display: grid; grid-template-columns: 1fr auto 80px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.cv-endrow[data-win="1"] { background: rgba(124, 199, 155, .16); }
.cv-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.cv-endav { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; font-weight: 800; font-style: normal; }
.cv-endst { font-size: 12px; opacity: .75; }
.cv-endsc { text-align: right; font-weight: 800; font-size: 15px; }
.cv-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .cv-seat, .cv-cell, .cv-lrow, .cv-pile, .cv-status i, .cv-sdelta, .cv-callout { animation: none !important; }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #caravan-game-screen.cv-playing .wrap { padding: 0 2px; max-width: none; }
  #caravan-game-screen.cv-playing .topbar { display: none; }
  #caravan-game-screen.cv-playing.cv-topbar-open .topbar { display: flex; }
}
/* ⭐ A SHORT PHONE (iPhone SE 375×667; any iPhone in Safari, ~390×664): cvFitPhone gives the root the height
   the screen has (no longer a 610 floor), so the TRACK band is what shrinks — and a five-high stack at the
   normal 18px token no longer fits a lane. Smaller tokens + cells keep it whole: 5 × 14 + 4 = 74px of stack
   in a lane of ~107px at 390×664 (15px tokens measured 1px over — caravan-mp.test.html §8). Every other
   slot keeps its size (the locked layout). */
@media (max-width: 999px) and (max-height: 720px) {
  .cv-root { --cv-tokH: 14px; --cv-pitch: 15px; --cv-cellH: 21px; }
}
@media (max-width: 370px) {
  .cv-root { padding: 6px; }
  .cv-dice { gap: 4px; padding: 0 5px; }
  .cv-dslot { gap: 2px; }
  .cv-tix b { width: 7ch; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 553) ── */
@media (min-width: 1000px) {
  #caravan-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .cv-root {
    --cv-tokH: 30px; --cv-pitch: 31px; --cv-cellH: 44px; --cv-die: 42px;
    width: 1280px; height: 553px; padding: 10px 12px; border-radius: 10px;
    grid-template-columns: minmax(0, 1fr) 292px; column-gap: 12px; row-gap: 8px;
    grid-template-rows: 28px 52px minmax(0, 1fr) 64px 16px 72px;
    grid-template-areas: "head head" "seats seats" "track legs" "dice bets" "status bets" "acts bets";
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 60px -30px #000;
  }
  .cv-head { gap: 11px; }
  .cv-brand { font-size: 14px; letter-spacing: .16em; }
  .cv-leg { height: 20px; padding: 0 8px; font-size: 10px; letter-spacing: .1em; }
  .cv-phase { display: block; width: 300px; font: 600 10px/1 var(--cv-mono); letter-spacing: .06em; color: var(--cv-dim); white-space: nowrap; overflow: hidden; }
  .cv-you, .cv-menu { display: none; }
  .cv-stand { grid-area: head; justify-self: end; gap: 5px; overflow: visible; }
  .cv-now { font-size: 9px; letter-spacing: .16em; margin-right: 2px; }
  .cv-st { height: 22px; gap: 4px; padding: 0 6px; --gs: 10px; }
  .cv-st small { font-size: 9px; }
  .cv-st b { font-size: 10px; }

  .cv-seats { gap: 8px; }
  .cv-seat { align-items: stretch; justify-content: center; gap: 2px; padding: 4px 7px; border-radius: var(--cv-r2x); }
  .cv-seat[data-empty="1"] { align-items: center; }
  .cv-sopen { font-size: 8px; }
  .cv-sopen::before { content: none; }
  .cv-tix small em { display: inline; }
  .cv-srow { display: flex; align-items: center; gap: 6px; height: 24px; }
  .cv-av { width: 24px; height: 24px; font-size: 10px; }
  .cv-smid { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 2px; }
  .cv-sname { text-align: left; font: 700 10px/1 var(--cv-ui); color: var(--cv-ink); }
  .cv-seat[data-turn="1"] .cv-sname { color: var(--cv-ink); }
  .cv-sstate { display: block; width: 100%; font: 700 8px/1 var(--cv-mono); letter-spacing: .09em; color: var(--cv-dimmer); white-space: nowrap; overflow: hidden; }
  .cv-sstate[data-turn="you"], .cv-sstate[data-turn="bot"] { color: var(--cv-gold); }
  .cv-sstate[data-turn="bot"] { animation: cv-think 1.1s ease-in-out infinite; }
  .cv-scoinw { flex: none; }
  .cv-scoins { min-width: 3ch; text-align: right; font-size: 15px; }
  .cv-sdelta { top: -13px; font-size: 11px; }
  .cv-sbets { display: flex; height: 15px; gap: 3px; align-items: center; overflow: hidden; }
  .cv-chip { flex: none; height: 14px; display: flex; align-items: center; gap: 3px; padding: 0 4px; border-radius: 3px; background: #262118; border: 1px solid var(--cv-line); font: 800 8px/1 var(--cv-mono); color: var(--cv-ink); --gs: 7px; }
  .cv-chip.cv-tick { color: var(--cv-coin); }
  .cv-chip.cv-more { color: var(--cv-dim); }
  .cv-sbetn { display: none; }

  .cv-track { padding: 7px 9px; }
  .cv-trackhead { height: 13px; }
  .cv-tracklbl { font-size: 9px; letter-spacing: .16em; }
  .cv-tracklbl em { display: inline; }
  .cv-tracknote { font-size: 9px; letter-spacing: .08em; }
  .cv-lane {
    column-gap: 3px; row-gap: 0;
    grid-template-columns: repeat(16, 52px) 44px; grid-template-rows: minmax(0, 1fr);
    background-image: repeating-linear-gradient(to top, rgba(240, 234, 217, .055) 0 1px, transparent 1px 31px);
    background-position: 0 calc(100% - 45px); background-size: 100% 155px; background-repeat: no-repeat;
  }
  .cv-col { grid-column: var(--dc); grid-row: 1; }
  .cv-num { top: 3px; left: 4px; font-size: 8px; }
  .cv-tile { font-size: 9px; }
  .cv-tile i { font-size: 11px; }
  .cv-tile em { display: block; font-size: 7px; }
  .cv-tok { gap: 5px; padding: 0 5px; font-size: 10px; --gs: 12px; }
  .cv-turnmark { display: none; }
  .cv-fin { grid-column: 17; grid-row: 1; }
  .cv-finbase small { display: block; margin-bottom: 4px; padding: 1px 3px; border-radius: 2px; background: var(--cv-panel); font: 800 8px/1 var(--cv-mono); letter-spacing: .06em; color: var(--cv-dim); }
  .cv-fin .cv-tok { gap: 3px; }
  .cv-fin .cv-tok b { display: inline; font-size: 9px; }

  .cv-dice { gap: 9px; padding: 0 11px; }
  .cv-dlbl { display: flex; flex: none; width: 106px; flex-direction: column; gap: 5px; margin-right: 3px; }
  .cv-dlbl small { font: 700 9px/1 var(--cv-mono); letter-spacing: .13em; color: var(--cv-dimmer); }
  .cv-dlbl b { font: 800 12px/1 var(--cv-mono); color: var(--cv-ink); }
  .cv-dslot { gap: 6px; }
  .cv-dbadge { width: 30px; font-size: 9px; --gs: 11px; }
  .cv-tix { width: 150px; gap: 5px; }
  .cv-tix small { font-size: 9px; letter-spacing: .13em; }
  .cv-tix b { width: 100%; font-size: 12px; }

  .cv-status { gap: 8px; }
  .cv-status i { width: 8px; height: 8px; }
  .cv-status span { font-size: 10.5px; }

  .cv-acts { gap: 9px; }
  .cv-act { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 12px; }
  .cv-aico { width: 34px; height: 34px; border-radius: var(--cv-r1x); background: var(--cv-panel2); border: 1px solid var(--cv-line); font-size: 15px; }
  .cv-act:disabled .cv-aico { background: #231f18; border-color: var(--cv-offBd); }
  .cv-atxt { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 4px; text-align: left; }
  .cv-atxt b { text-align: left; font-size: 12px; letter-spacing: .08em; }
  .cv-atxt small { display: block; width: 100%; height: 12px; font: 600 9.5px/1.25 var(--cv-mono); color: var(--cv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cv-asub2 { display: none; }

  .cv-legs { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; }
  .cv-panelhead { display: flex; flex: none; height: 13px; align-items: center; justify-content: space-between; font: 700 9px/1 var(--cv-mono); letter-spacing: .14em; color: var(--cv-dimmer); white-space: nowrap; }
  .cv-lrow {
    flex: 1 1 0; min-height: 0; grid-template-columns: 13px 52px 26px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 7px; padding: 2px 4px;
    background: transparent; border: 1px solid transparent; border-top-color: var(--cv-line); border-radius: 3px; --gs: 13px;
  }
  .cv-lname { display: block; font: 700 11px/1 var(--cv-ui); color: var(--cv-ink); white-space: nowrap; overflow: hidden; }
  .cv-lab { display: none; }
  .cv-lnext { width: 26px; height: 30px; font-size: 13px; }
  .cv-lheld { grid-column: 4; height: 18px; justify-content: flex-end; gap: 3px; }
  .cv-held { flex: none; height: 18px; padding: 0 5px; font-size: 9px; }
  .cv-lrow[data-lit="1"] { background: var(--cv-panel2); }

  .cv-bets { flex-direction: column; align-items: stretch; gap: 6px; padding: 7px 9px; }
  .cv-piles { gap: 8px; }
  .cv-pile { flex: 1 1 0; min-width: 0; height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 14px 26px; grid-template-areas: "name name" "backs count"; align-items: center; column-gap: 6px; row-gap: 6px; padding: 6px 7px; }
  .cv-pname { grid-area: name; }
  .cv-pbacks { grid-area: backs; }
  .cv-pname { font-size: 10px; letter-spacing: .1em; }
  .cv-pname i { font-size: 10px; }
  /* sized for FIVE backs (14 + 4 × 7): an auto-width stack slid the count as cards went down (the locked walk) */
  .cv-pbacks { display: flex; width: 42px; height: 20px; }
  .cv-pbacks i { width: 14px; height: 20px; border-radius: 2px; background: #2f2a20; border: 1px solid #453d2f; box-shadow: 1px 0 0 rgba(0, 0, 0, .4); }
  .cv-pbacks i + i { margin-left: -7px; }
  .cv-pcount { grid-area: count; width: 100%; font-size: 9px; }
  .cv-cardslbl { display: block; flex: none; font: 700 9px/1 var(--cv-mono); letter-spacing: .14em; color: var(--cv-dimmer); }
  .cv-cards { flex: 1 1 auto; min-height: 0; gap: 4px; justify-content: stretch; }
  .cv-card { max-width: none; height: auto; flex-direction: column; gap: 3px; --gs: 13px; }
  .cv-card small { display: block; font: 700 7px/1 var(--cv-mono); color: var(--cv-dim); }
  .cv-card[data-used="win"] small, .cv-card[data-used="lose"] small { color: var(--cv-dimmer); }

  .cv-callout { top: 96px; width: auto; flex-direction: row; align-items: center; gap: 10px; height: 38px; padding: 0 16px; }
  .cv-callout b { font-size: 11px; letter-spacing: .14em; }
  .cv-callout span { font-size: 12px; }
  .cv-tpb { height: 30px; font-size: 11px; }
  .cv-tpx { height: 30px; }

  .cv-sheetcard { width: 620px; padding: 16px 18px; gap: 11px; }
  .cv-paycard { width: 820px; padding: 16px 18px; gap: 10px; }
  .cv-shead b { font-size: 15px; }
  .cv-shead span { font-size: 11px; }
  .cv-sstep { font-size: 9px; }
  .cv-scard { height: 74px; gap: 6px; --gs: 18px; }
  .cv-scard b { font-size: 10px; }
  .cv-scard small { font-size: 8px; }
  .cv-spile { height: 70px; }
  .cv-spile b { font-size: 13px; }
  .cv-spile small { font-size: 10px; }
  .cv-sfoot span { font-size: 11px; }
  .cv-sbtn { font-size: 11px; padding: 0 14px; }
  .cv-payrow { grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr) 50px 50px; gap: 8px; height: 30px; padding: 0 9px; }
  .cv-paycols { height: 14px; }
  .cv-paycols span { font-size: 9px; letter-spacing: .12em; }
  .cv-payrow span { font-size: 11px; }
  .cv-payrow span[data-c="4"] { font-size: 12px; }
}