/* frontend/corrals.css — CORRALS (Dots and Boxes on a farm) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Acorns / Fives precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's FLAT skin (docs/design/Batch 15/Corrals.dc.html L19–40; CR-M5:
 * Flat only, the pixel skin is not built). CLASSIC by default; ARCADE when GameTheme puts `gm-arcade` on the screen —
 * the SHELL recolours from the equipped Arcade palette's `--pgr-*` tokens (the scheme engine, never forked); the
 * pasture keeps Design's palette (the High Ground valley call). Player colours come from PlayerColours (`--crl-p0..3`,
 * set by corrals.js) PLUS Design's second, third and fourth channels: badge SHAPE (circle / square / diamond /
 * hexagon), HATCH (rising / falling / dots / bands) and LETTER. A risky gap is a DASHED amber line, never a recolour.
 * The owner is colourblind: every state reads in greyscale.
 *
 * ── Geometry is the mock's ──────────────────────────────────────────────────
 * PC design box 1280 × 553 (the mock's 637 less its 84 px chat strip), 593 with the pill — the FIELD grows (pen 77 →
 * 85, field 471 → 511). Seats 320 · field · the side column flexes. Phone column: head 26 · seats 46 · field 326
 * (pen 50, post 9; the floor at 360 × 740 is pen 45, post 8 → 293) · readouts 62 · fence panel 116 · log (flex).
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every row is a FIXED size except the PC field (two fixed sizes, pill-driven) and the log. Every text box is a fixed
 * width or fills its slot with an ellipsis. Feedback changes colour, glow or a transform — never size or spacing.
 */

#corrals-game-screen, .crl-root {
  --crl-page: #0d1210; --crl-bg: radial-gradient(120% 100% at 50% -10%, #1f2823 0%, #161d19 55%, #0d1210 100%);
  --crl-solid: #18201b; --crl-txt: #eaf1ea; --crl-dim: rgba(234, 241, 234, .58); --crl-onColor: #0d120f;
  --crl-panel: rgba(255, 255, 255, .05); --crl-line: rgba(234, 241, 234, .15);
  --crl-seat: rgba(255, 255, 255, .04); --crl-seatYou: rgba(110, 180, 255, .09);
  --crl-pasture: #33482e; --crl-pastureEdge: rgba(0, 0, 0, .5);
  --crl-mow: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 26px, rgba(0, 0, 0, .035) 26px 52px);
  --crl-postC: #d7c199; --crl-postEdge: rgba(0, 0, 0, .55);
  --crl-rail: #c09a63; --crl-ghost: rgba(255, 255, 255, .26);
  --crl-accent: oklch(.86 .13 200); --crl-accentGlow: rgba(104, 222, 235, .42); --crl-accentBg: rgba(104, 222, 235, .15);
  --crl-warn: oklch(.83 .15 62); --crl-warnGlow: rgba(246, 168, 82, .4); --crl-warnBg: rgba(246, 168, 82, .15);
  --crl-last: oklch(.93 .09 95);
  --crl-btn: linear-gradient(180deg, oklch(.86 .13 200), oklch(.72 .12 200)); --crl-btnTxt: #05242a; --crl-btnLine: oklch(.9 .1 200);
  --crl-off: rgba(255, 255, 255, .07);
  --crl-toastBg: linear-gradient(180deg, #26302a, #171e1a);
  --crl-r: 18px; --crl-cardR: 14px; --crl-laneR: 9px; --crl-bw: 1.5px; --crl-bw2: 2px;
  --crl-f: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --crl-p0: #4fe07c; --crl-p1: #ff5c5c; --crl-p2: #ffd83d; --crl-p3: #6f5fe8;
  /* 🌐 the ink on each seat's colour — a seat's colour follows the VIEWER online (me = the YOU colour), so its ink must
     follow it too: crlApplyColours writes these by lightness. The defaults are slice 1's (white on the purple only). */
  --crl-p0ink: #0d120f; --crl-p1ink: #0d120f; --crl-p2ink: #0d120f; --crl-p3ink: #fff;
}
/* ARCADE — the shell recolours from the equipped Arcade palette (GameTheme sets --pgr-* on the screen) */
#corrals-game-screen.gm-arcade, .gm-arcade .crl-root {
  --crl-bg: var(--pgr-bg, radial-gradient(135% 120% at 50% -10%, #0c1a3a 0%, #14285e 45%, #1e3a8a 100%));
  --crl-solid: color-mix(in oklch, var(--pgr-sel, #60a5fa) 14%, #0a0f22);
  --crl-panel: rgba(255, 255, 255, .08); --crl-line: color-mix(in oklch, var(--pgr-sel, #60a5fa) 42%, transparent);
  --crl-seat: rgba(0, 0, 0, .22); --crl-seatYou: color-mix(in oklch, var(--pgr-sel, #60a5fa) 20%, transparent);
  --crl-txt: #ffffff; --crl-dim: rgba(255, 255, 255, .7);
  --crl-accent: var(--pgr-sel, #60a5fa); --crl-accentGlow: color-mix(in oklch, var(--pgr-sel, #60a5fa) 50%, transparent);
  --crl-btn: linear-gradient(180deg, var(--pgr-sel, #60a5fa), color-mix(in oklch, var(--pgr-sel, #60a5fa) 75%, #000));
  --crl-btnTxt: #0b1020; --crl-btnLine: var(--pgr-sel, #60a5fa);
  --crl-toastBg: color-mix(in oklch, var(--pgr-sel, #60a5fa) 18%, #0a0f22);
  --crl-f: 'Poppins', system-ui, sans-serif;
}

@keyframes crl-bob { 0%, 100% { translate: 0 0 } 50% { translate: 0 -2px } }
@keyframes crl-drop { 0% { translate: 0 -8px; opacity: 0 } 70% { translate: 0 1px; opacity: 1 } 100% { translate: 0 0; opacity: 1 } }
@keyframes crl-land { 0% { translate: 0 -10px; scale: .55; opacity: 0 } 65% { translate: 0 1px; scale: 1.06; opacity: 1 } 100% { translate: 0 0; scale: 1; opacity: 1 } }
@keyframes crl-claim { 0% { scale: .4; opacity: 0 } 70% { scale: 1.18; opacity: 1 } 100% { scale: 1; opacity: 1 } }
@keyframes crl-lastp { 0%, 100% { outline-color: var(--crl-last); outline-offset: 2px } 50% { outline-color: transparent; outline-offset: 4px } }
@keyframes crl-tick { 0% { translate: 0 -4px } 64% { translate: 0 1px } 100% { translate: 0 0 } }
@keyframes crl-toastin { 0% { opacity: 0; translate: 0 -8px } 100% { opacity: 1; translate: 0 0 } }

/* ── setup card ─────────────────────────────────────────────────────────── */
#corrals-game-screen { background: var(--crl-page); color: var(--crl-txt); }
.crl-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--crl-f); background: var(--crl-solid); color: var(--crl-txt); border: 1px solid var(--crl-line); border-radius: var(--crl-r); }
.crl-setup-eyebrow { font: 700 11px/1.3 var(--crl-f); letter-spacing: .2em; text-transform: uppercase; color: var(--crl-warn); }
.crl-setup-title { margin: 0; font-size: 30px; }
.crl-setup-blurb, .crl-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.crl-setup-hint { color: var(--crl-dim); font-size: 12.5px; }
.crl-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
.crl-setup-lab { font: 700 11px var(--crl-f); letter-spacing: .14em; text-transform: uppercase; color: var(--crl-dim); min-width: 84px; }
.crl-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.crl-opt { min-width: 58px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--crl-line); background: var(--crl-panel); color: var(--crl-txt); font: 700 13px var(--crl-f); cursor: pointer; transition: background .12s, box-shadow .12s, transform .1s; }
.crl-opt[data-on="1"] { background: var(--crl-accent); color: var(--crl-btnTxt); border-color: var(--crl-accent); }
.crl-opt:active { transform: translateY(1px); }
.crl-start { height: 48px; margin-top: 6px; border: 0; border-radius: 12px; background: var(--crl-btn); color: var(--crl-btnTxt); font: 800 16px var(--crl-f); letter-spacing: .04em; cursor: pointer; transition: filter .12s, transform .1s; }
.crl-start:active { transform: translateY(2px); filter: brightness(.88); }
@media (hover: hover) { .crl-start:hover { filter: brightness(1.12); } .crl-opt:hover { box-shadow: 0 0 0 2px var(--crl-accent); } }

/* ── the root (phone first: 384 × 812; data-sz="sm" is the 360 × 740 floor) ── */
.crl-root {
  --crl-pad: 10px; --crl-gap: 7px; --crl-headH: 26px; --crl-seatsH: 46px; --crl-abH: 62px; --crl-cH: 116px;
  --crl-fsTiny: 9px; --crl-fsChip: 9.5px; --crl-fsStatus: 9.5px; --crl-fsBig: 24px; --crl-fsMid: 13px;
  --crl-fsName: 10px; --crl-fsScore: 16px; --crl-seatBadge: 16px; --crl-btnH: 44px; --crl-fsBtn: 13px; --crl-tipFs: 8.5px;
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--crl-phone-h, 740px); padding: var(--crl-pad);
  display: flex; flex-direction: column; gap: var(--crl-gap);
  background: var(--crl-bg); color: var(--crl-txt); font-family: var(--crl-f);
  border-radius: var(--crl-r); user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased;
}
.crl-root[data-sz="sm"] {
  --crl-pad: 9px; --crl-gap: 6px; --crl-headH: 24px; --crl-seatsH: 40px; --crl-abH: 58px; --crl-cH: 112px;
  --crl-fsTiny: 8.5px; --crl-fsChip: 9px; --crl-fsStatus: 9px; --crl-fsBig: 22px; --crl-fsMid: 12px;
  --crl-fsName: 9px; --crl-fsScore: 15px; --crl-seatBadge: 14px; --crl-fsBtn: 12px; --crl-tipFs: 8px;
}
.crl-root *, .crl-root *::before, .crl-root *::after { box-sizing: border-box; }
.crl-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.crl-root i { font-style: normal; }
.crl-panel { background: var(--crl-panel); box-shadow: 0 0 0 var(--crl-bw) var(--crl-line); border-radius: var(--crl-laneR); min-width: 0; overflow: hidden; }
.crl-k { font-size: var(--crl-fsTiny); font-weight: 800; letter-spacing: .14em; color: var(--crl-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crl-dim { font-size: var(--crl-fsTiny); font-weight: 800; color: var(--crl-dim); white-space: nowrap; }

/* the owner badge: colour + SHAPE + LETTER (Design's SHAPE, L341) */
.crl-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--crl-seatBadge); height: var(--crl-seatBadge); font-weight: 800; line-height: 1; color: var(--crl-onColor); font-size: calc(var(--crl-seatBadge) * .5); }
.crl-badge[data-s="0"] { background: var(--crl-p0); color: var(--crl-p0ink); border-radius: 50%; }
.crl-badge[data-s="1"] { background: var(--crl-p1); color: var(--crl-p1ink); border-radius: 3px; }
.crl-badge[data-s="2"] { background: var(--crl-p2); color: var(--crl-p2ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.crl-badge[data-s="3"] { background: var(--crl-p3); color: var(--crl-p3ink); clip-path: polygon(24% 3%, 76% 3%, 100% 50%, 76% 97%, 24% 97%, 0 50%); }
.crl-badge[data-s="-1"] { background: rgba(255, 255, 255, .06); border-radius: 50%; }

/* head: turn badge · CORRALS (PC) · status · chain chip (width RESERVED, CR-F2) · ☰ (phone) */
.crl-head { flex: none; height: var(--crl-headH); display: flex; align-items: center; gap: 8px; overflow: hidden; }
.crl-turnbadge { flex: none; width: 104px; text-align: center; font-size: var(--crl-fsTiny); font-weight: 800; letter-spacing: .1em; padding: 4px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, .06); color: var(--crl-dim); box-shadow: 0 0 0 var(--crl-bw) var(--crl-line); }
.crl-turnbadge[data-mine="1"] { background: var(--crl-accent); color: var(--crl-onColor); box-shadow: none; }
.crl-mark { display: none; flex: none; font-size: 16px; font-weight: 800; letter-spacing: .2em; color: var(--crl-dim); }
.crl-status { flex: 1 1 0; min-width: 0; font-size: var(--crl-fsStatus); font-weight: 700; color: var(--crl-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.crl-chain { flex: none; width: 112px; text-align: center; font-size: var(--crl-fsTiny); font-weight: 800; letter-spacing: .06em; padding: 4px 6px; border-radius: 99px; white-space: nowrap; overflow: hidden; color: var(--crl-dim); box-shadow: 0 0 0 var(--crl-bw) var(--crl-line); }
.crl-chain[data-on="1"] { color: var(--crl-accent); box-shadow: 0 0 0 var(--crl-bw2) var(--crl-accent); }
.crl-menu { flex: none; width: 30px; height: 100%; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--crl-txt); font-size: 14px; cursor: pointer; }

/* body */
.crl-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: var(--crl-gap); }

/* seats (phone: a strip of chips) */
.crl-seats { flex: none; height: var(--crl-seatsH); display: flex; gap: 6px; }
.crl-seat { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 7px; border-radius: var(--crl-laneR); background: var(--crl-seat); box-shadow: 0 0 0 var(--crl-bw) var(--crl-line); overflow: hidden; transition: box-shadow .14s; }
.crl-seat[data-me="1"] { background: var(--crl-seatYou); }
/* 🌐 CRB7 — a seat that LEFT or is OUT: dimmed, its sheep still counted */
.crl-seat[data-out="1"] { opacity: .55; }
.crl-seat[data-act="1"] { box-shadow: 0 0 0 var(--crl-bw2) var(--crl-pc), 0 0 16px rgba(0, 0, 0, .35); }
.crl-seat[data-s="0"] { --crl-pc: var(--crl-p0); } .crl-seat[data-s="1"] { --crl-pc: var(--crl-p1); } .crl-seat[data-s="2"] { --crl-pc: var(--crl-p2); } .crl-seat[data-s="3"] { --crl-pc: var(--crl-p3); }
.crl-seat1, .crl-seat2 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.crl-seat2 { align-items: baseline; }
.crl-seat2 i { flex: 1 1 0; }
.crl-sname { flex: 1 1 0; min-width: 0; font-size: var(--crl-fsName); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crl-skind { flex: none; font-size: var(--crl-fsTiny); font-weight: 800; letter-spacing: .08em; color: var(--crl-dim); }
.crl-seat[data-me="1"] .crl-skind { color: var(--crl-accent); }
.crl-skind:not([data-st=""]) { color: var(--crl-txt); }
.crl-sc { flex: none; width: 3ch; font-size: var(--crl-fsScore); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.crl-seat[data-act="1"] .crl-sc { color: var(--crl-pc); }
.crl-sc[data-tick="1"] { animation: crl-tick .22s ease-out; }
.crl-unit { flex: none; font-size: var(--crl-fsTiny); font-weight: 800; color: var(--crl-dim); }
.crl-pn { flex: none; font-size: var(--crl-fsTiny); font-weight: 800; color: var(--crl-dim); white-space: nowrap; }
.crl-flock, .crl-note { display: none; }
/* 3–4 farmers on a phone: the unit drops (Design L695), the bots' kind tag drops so the name keeps room; the badge
   + letter carry identity when the name truncates (CR-F8) */
.crl-root[data-n="3"] .crl-unit, .crl-root[data-n="4"] .crl-unit { display: none; }
.crl-root[data-n="4"] .crl-seat:not([data-me="1"]) .crl-skind[data-st=""] { display: none; }
.crl-root[data-n="4"] .crl-seat { padding: 4px 5px; }

/* the field */
.crl-fieldwrap { flex: none; display: flex; justify-content: center; }
.crl-field { position: relative; flex: none; width: var(--crl-fs); height: var(--crl-fs); border-radius: var(--crl-cardR); background-color: var(--crl-pasture); box-shadow: 0 0 0 var(--crl-bw2) var(--crl-pastureEdge), inset 0 0 40px rgba(0, 0, 0, .35); overflow: hidden; touch-action: manipulation; }
.crl-mow { position: absolute; inset: 0; background-image: var(--crl-mow); opacity: .9; pointer-events: none; }
/* CR-F9: on a rival's turn the PASTURE dims, never a die face */
.crl-dimmer { position: absolute; inset: 0; background: rgba(0, 0, 0, .26); opacity: 0; transition: opacity .25s; pointer-events: none; }
.crl-field[data-dim="1"] .crl-dimmer { opacity: 1; }
.crl-pen { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crl-pgap); overflow: hidden; }
/* a claimed pen: owner tint + HATCH (Design's PAT, L342–348) + badge + flock */
.crl-pen[data-own="0"] { --crl-pc: var(--crl-p0); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 3px, transparent 3px 9px); }
.crl-pen[data-own="1"] { --crl-pc: var(--crl-p1); background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 9px); }
.crl-pen[data-own="2"] { --crl-pc: var(--crl-p2); background-image: radial-gradient(circle at 3px 3px, rgba(255, 255, 255, .22) 1.7px, transparent 2.1px); background-size: 9px 9px; }
.crl-pen[data-own="3"] { --crl-pc: var(--crl-p3); background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .26) 0 3px, transparent 3px 9px); }
.crl-pen:not([data-own="-1"]) { background-color: color-mix(in srgb, var(--crl-pc) 30%, transparent); }
.crl-pen[data-fresh="1"] { box-shadow: inset 0 0 0 2px var(--crl-accent), inset 0 0 18px var(--crl-accentGlow); }
.crl-pb { position: absolute; left: 3px; top: 3px; z-index: 2; width: var(--crl-pbadge); height: var(--crl-pbadge); display: none; align-items: center; justify-content: center; font-size: calc(var(--crl-pbadge) * .62); font-weight: 800; line-height: 1; color: var(--crl-onColor); }
.crl-pb[data-s="0"] { display: flex; background: var(--crl-p0); color: var(--crl-p0ink); border-radius: 50%; }
.crl-pb[data-s="1"] { display: flex; background: var(--crl-p1); color: var(--crl-p1ink); border-radius: 3px; }
.crl-pb[data-s="2"] { display: flex; background: var(--crl-p2); color: var(--crl-p2ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.crl-pb[data-s="3"] { display: flex; background: var(--crl-p3); color: var(--crl-p3ink); clip-path: polygon(24% 3%, 76% 3%, 100% 50%, 76% 97%, 24% 97%, 0 50%); }
.crl-pen[data-fresh="1"] .crl-pb { animation: crl-claim .26s ease-out both; }
.crl-die { flex: none; width: var(--crl-die); height: var(--crl-die); }
.crl-diein { display: block; width: 100%; height: 100%; line-height: 0; opacity: 0; }
.crl-diein[data-on="1"] { opacity: 1; }
.crl-diein[data-land="1"] { animation: crl-land .26s ease-out both; }
.crl-diein > * { width: 100% !important; height: 100% !important; }
.crl-dief { display: flex; align-items: center; justify-content: center; background: #f2efe5; color: #20262a; border-radius: 6px; font-size: 12px; }
/* the flock band is RESERVED on every pen (a die never moves when sheep arrive — mock L1055) */
.crl-pf { flex: none; width: 100%; height: calc(var(--crl-sheep) + 3px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1px; overflow: hidden; font-size: var(--crl-sheep); font-weight: 800; line-height: 1; color: var(--crl-txt); }
.crl-pf b { font-size: var(--crl-sheep); margin-left: 1px; }
.crl-sh { flex: none; width: calc(var(--crl-sheep) * 1.3); height: var(--crl-sheep); }
.crl-pen[data-fresh="1"] .crl-pf { animation: crl-bob 1.1s ease-in-out infinite; }

/* fences: empty (a faint dash) · risky (a DASHED amber line) · built (a solid rail split lengthwise by owner) */
.crl-fence { position: absolute; z-index: 3; border-radius: 2px; pointer-events: none; }
.crl-fence::before { content: ''; position: absolute; left: 15%; right: 15%; top: 50%; height: 1.5px; margin-top: -.75px; background: color-mix(in srgb, var(--crl-ghost) 55%, transparent); }
.crl-fence[data-t="1"]::before { left: 50%; right: auto; width: 1.5px; margin-left: -.75px; top: 15%; bottom: 15%; height: auto; margin-top: 0; }
.crl-fence[data-st="risky"]::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--crl-warn) 70%, transparent) 0 3px, transparent 3px 6px); height: 2px; }
.crl-fence[data-t="1"][data-st="risky"]::before { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--crl-warn) 70%, transparent) 0 3px, transparent 3px 6px); width: 2px; height: auto; }
.crl-fence[data-st="built"]::before { display: none; }
.crl-rail { position: absolute; inset: 1px; border-radius: 2px; display: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); background: linear-gradient(180deg, color-mix(in srgb, var(--ra, var(--crl-rail)) 78%, var(--crl-rail)) 0 50%, color-mix(in srgb, var(--rb, var(--crl-rail)) 78%, var(--crl-rail)) 50% 100%); }
.crl-fence[data-t="1"] .crl-rail { background: linear-gradient(90deg, color-mix(in srgb, var(--ra, var(--crl-rail)) 78%, var(--crl-rail)) 0 50%, color-mix(in srgb, var(--rb, var(--crl-rail)) 78%, var(--crl-rail)) 50% 100%); }
.crl-fence[data-st="built"] .crl-rail { display: block; }
.crl-fence[data-drop="1"] .crl-rail { animation: crl-drop .2s cubic-bezier(.34, 1.45, .64, 1) both; }
/* hover (PC) / selected (phone): a SOLID ring + glow — accent, or warn when the gap is risky */
.crl-fence[data-pick="hov"], .crl-fence[data-pick="sel"] { box-shadow: 0 0 0 3px var(--crl-accent), 0 0 18px var(--crl-accentGlow); background: var(--crl-accentBg); }
.crl-fence[data-pick][data-st="risky"]:not([data-pick="0"]) { box-shadow: 0 0 0 3px var(--crl-warn), 0 0 18px var(--crl-warnGlow); background: var(--crl-warnBg); }
.crl-fence[data-pick="sel"]::before { background: var(--crl-accent); height: 2px; }
.crl-fence[data-t="1"][data-pick="sel"]::before { width: 2px; height: auto; }
.crl-fence[data-pick="sel"][data-st="risky"]::before { background: var(--crl-warn); }
/* CR-F4: the LAST fence — its own look: a DASHED gold outline that pulses (+ the LAST tag), never the selection ring */
.crl-fence[data-last="1"] { outline: 2px dashed var(--crl-last); outline-offset: 2px; animation: crl-lastp 1.2s ease-in-out infinite; }
.crl-posts { position: absolute; z-index: 5; pointer-events: none; filter: drop-shadow(0 1px 0 var(--crl-postEdge)); }
/* the tags (CR-F1: placed by their measured width) */
.crl-tip, .crl-lasttag, .crl-ftag { position: absolute; z-index: 8; display: none; padding: 3px 7px; border-radius: 4px; font-size: var(--crl-tipFs); font-weight: 800; letter-spacing: .03em; white-space: nowrap; pointer-events: none; background: rgba(0, 0, 0, .74); }
.crl-tip { color: var(--crl-warn); box-shadow: 0 0 0 1px var(--crl-warn); }
.crl-lasttag { color: var(--crl-last); letter-spacing: .08em; box-shadow: 0 0 0 1px var(--crl-last); }
.crl-ftag { left: 6px; top: 6px; color: var(--crl-warn); letter-spacing: .1em; }
.crl-tip[data-on="1"], .crl-lasttag[data-on="1"], .crl-ftag[data-on="1"] { display: block; }
.crl-hit { position: absolute; inset: 0; z-index: 9; }
.crl-root[data-lock="0"] .crl-hit { cursor: pointer; }

/* side column (phone: readouts row · fence panel · log) */
.crl-side { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--crl-gap); }
.crl-ab { flex: none; display: flex; flex-direction: row; gap: var(--crl-gap); }
.crl-left, .crl-turn { flex: 1 1 0; height: var(--crl-abH); padding: 6px 9px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.crl-leftrow { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.crl-leftrow i { flex: 1 1 0; }
.crl-big { flex: none; width: 3ch; font-size: var(--crl-fsBig); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.crl-bar { flex: none; height: 7px; border-radius: 2px; overflow: hidden; display: flex; gap: 1px; background: rgba(0, 0, 0, .3); }
.crl-barseg[data-s="0"] { background: var(--crl-p0) repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 3px, transparent 3px 9px); }
.crl-barseg[data-s="1"] { background: var(--crl-p1) repeating-linear-gradient(-45deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 9px); }
.crl-barseg[data-s="2"] { background: var(--crl-p2); }
.crl-barseg[data-s="3"] { background: var(--crl-p3) repeating-linear-gradient(0deg, rgba(0, 0, 0, .26) 0 3px, transparent 3px 9px); }
.crl-barleft { background: var(--crl-pasture); }
.crl-turn { gap: 3px; box-shadow: 0 0 0 var(--crl-bw2) var(--crl-line); }
.crl-turn[data-who="0"] { box-shadow: 0 0 0 var(--crl-bw2) var(--crl-p0); } .crl-turn[data-who="1"] { box-shadow: 0 0 0 var(--crl-bw2) var(--crl-p1); } .crl-turn[data-who="2"] { box-shadow: 0 0 0 var(--crl-bw2) var(--crl-p2); } .crl-turn[data-who="3"] { box-shadow: 0 0 0 var(--crl-bw2) var(--crl-p3); }
/* MY turn (online I can sit at any seat) — after the per-seat rings so it wins the tie */
.crl-turn[data-mine="1"] { background: var(--crl-seatYou); box-shadow: 0 0 0 var(--crl-bw2) var(--crl-accent); }
.crl-turnline { font-size: var(--crl-fsMid); font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crl-turn[data-mine="1"] .crl-turnline { color: var(--crl-accent); }
.crl-turnsub { font-size: var(--crl-fsTiny); font-weight: 700; color: var(--crl-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.crl-sel { flex: none; height: var(--crl-cH); padding: 6px 9px; display: flex; flex-direction: column; gap: 4px; }
.crl-sel[data-tone="sel"] { box-shadow: 0 0 0 var(--crl-bw) var(--crl-accent); }
.crl-sel[data-tone="warn"] { box-shadow: 0 0 0 var(--crl-bw) var(--crl-warn); }
.crl-selhead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crl-selhead i { flex: 1 1 0; }
.crl-warntog { flex: none; width: 112px; font-size: var(--crl-fsTiny); font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border: 0; border-radius: 99px; white-space: nowrap; cursor: pointer; background: transparent; color: var(--crl-dim); box-shadow: 0 0 0 var(--crl-bw) var(--crl-line); transition: filter .12s; }
.crl-warntog[data-on="1"] { color: var(--crl-warn); box-shadow: 0 0 0 var(--crl-bw) var(--crl-warn); background: var(--crl-warnBg); }
@media (hover: hover) { .crl-warntog:hover { filter: brightness(1.25); } }
.crl-warntog:active { transform: translateY(1px); }
.crl-sellabel { flex: none; font-size: var(--crl-fsChip); font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crl-selwarn { flex: none; font-size: var(--crl-fsTiny); font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--crl-dim); }
.crl-selwarn[data-tone="warn"] { color: var(--crl-warn); }
.crl-build { margin-top: auto; flex: none; height: var(--crl-btnH); border: 0; border-radius: var(--crl-laneR); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; background: var(--crl-off); color: var(--crl-txt); box-shadow: 0 0 0 var(--crl-bw) var(--crl-line); opacity: .38; filter: grayscale(1); cursor: default; transition: filter .12s, transform .1s, box-shadow .12s; }
.crl-build[data-live="1"] { background: var(--crl-btn); color: var(--crl-btnTxt); box-shadow: 0 0 0 var(--crl-bw2) var(--crl-btnLine); opacity: 1; filter: none; cursor: pointer; }
@media (hover: hover) { .crl-build[data-live="1"]:hover { filter: brightness(1.12); box-shadow: 0 0 0 var(--crl-bw2) var(--crl-accent), 0 0 20px var(--crl-accentGlow); } }
.crl-build[data-live="1"]:active { transform: translateY(1px); filter: brightness(.9); }
.crl-buildA { font-size: var(--crl-fsBtn); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.crl-buildB { font-size: var(--crl-fsTiny); font-weight: 700; letter-spacing: .04em; white-space: nowrap; opacity: .85; }

.crl-log { flex: 1 1 0; min-height: 0; padding: 6px 9px; display: flex; flex-direction: column; gap: 3px; }
.crl-ll { flex: none; display: flex; align-items: center; gap: 5px; min-width: 0; height: 13px; }
.crl-lb { --crl-seatBadge: 10px; font-size: 6px; }
.crl-lt { flex: 1 1 0; min-width: 0; font-size: var(--crl-fsTiny); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--crl-dim); }
.crl-ll[data-age="0"] .crl-lt { color: var(--crl-txt); }

/* ── layers inside the root (absolute, never fixed — board-fit.js's rule) ── */
.crl-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.crl-chip { position: absolute; left: 0; top: 0; margin: -11px 0 0 -18px; min-width: 36px; height: 22px; padding: 0 8px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--crl-onColor); background: var(--crl-pc, var(--crl-accent)); box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .6), 0 0 0 2px rgba(0, 0, 0, .25); }
.crl-chip[data-s="0"] { --crl-pc: var(--crl-p0); color: var(--crl-p0ink); } .crl-chip[data-s="1"] { --crl-pc: var(--crl-p1); color: var(--crl-p1ink); } .crl-chip[data-s="2"] { --crl-pc: var(--crl-p2); color: var(--crl-p2ink); } .crl-chip[data-s="3"] { --crl-pc: var(--crl-p3); color: var(--crl-p3ink); }
/* CR-F5: the claim toast is OFF the field (over the top of the side column) */
.crl-toast { position: absolute; z-index: 22; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--crl-abH); padding: 6px 12px; border-radius: 12px; background: var(--crl-toastBg); box-shadow: 0 16px 36px rgba(0, 0, 0, .55), 0 0 0 var(--crl-bw2) var(--crl-accent); pointer-events: none; text-align: center; }
.crl-toast[data-on="1"] { display: flex; animation: crl-toastin .16s ease-out both; }
.crl-toast b { font-size: var(--crl-fsMid); font-weight: 800; letter-spacing: .03em; color: var(--crl-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.crl-toast span { font-size: var(--crl-fsTiny); font-weight: 700; color: var(--crl-txt); white-space: nowrap; }
.crl-toast[data-s="1"] { box-shadow: 0 16px 36px rgba(0, 0, 0, .55), 0 0 0 var(--crl-bw2) var(--crl-p1); } .crl-toast[data-s="2"] { box-shadow: 0 16px 36px rgba(0, 0, 0, .55), 0 0 0 var(--crl-bw2) var(--crl-p2); } .crl-toast[data-s="3"] { box-shadow: 0 16px 36px rgba(0, 0, 0, .55), 0 0 0 var(--crl-bw2) var(--crl-p3); }

/* locked: controls stay in place, greyed, no pointer events (mock L759) */
.crl-root[data-lock="1"] .crl-hit { pointer-events: none; }

/* the end-screen rows — ⛔ the end screen is appended to <body>, so NO --crl-* token reaches it: literals only */
.crl-endrows { display: flex; flex-direction: column; gap: 4px; }
.crl-endrow { display: grid; grid-template-columns: 24px 1fr 64px 44px; gap: 8px; align-items: center; font-size: 14px; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.crl-endrow[data-win="1"] { font-weight: 800; font-size: 16px; }
.crl-endbadge { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #0d120f; border-radius: 50%; }
.crl-endbadge[data-s="1"] { border-radius: 3px; } .crl-endbadge[data-s="2"] { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .crl-endbadge[data-s="3"] { border-radius: 0; clip-path: polygon(24% 3%, 76% 3%, 100% 50%, 76% 97%, 24% 97%, 0 50%); }
.crl-endpens { font-size: 12px; opacity: .75; text-align: right; }
.crl-endrow b { text-align: right; font-variant-numeric: tabular-nums; }
.crl-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

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

/* ── PHONE chrome ───────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #corrals-game-screen.crl-playing .wrap { padding: 0 2px; max-width: none; }
  #corrals-game-screen.crl-playing .topbar { display: none; }
  #corrals-game-screen.crl-playing.crl-topbar-open .topbar { display: flex; }
  /* the notch: the hidden .topbar carried the safe-area inset (predicely_notch_safe_area; test/_safe_area_top.test.js).
     PADDING, never margin — a top margin collapses through the screen div. */
  #corrals-game-screen.crl-playing:not(.crl-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (1280 × 553; 593 with the chat pill — the field grows) ── */
@media (min-width: 1000px) {
  #corrals-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .crl-root {
    --crl-pad: 14px; --crl-gap: 10px; --crl-headH: 30px;
    --crl-fsTiny: 10px; --crl-fsChip: 11px; --crl-fsStatus: 12px; --crl-fsBig: 34px; --crl-fsMid: 17px;
    --crl-fsName: 13px; --crl-fsScore: 30px; --crl-seatBadge: 26px; --crl-btnH: 46px; --crl-fsBtn: 14px; --crl-tipFs: 10px;
    width: 1280px; height: var(--crl-fit-h, 553px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .crl-mark { display: block; }
  .crl-menu { display: none; }
  .crl-turnbadge { width: 150px; }
  .crl-chain { width: 214px; }          /* CR-F2: "CHAIN · 25 PENS · 150 SHEEP" fits; the status never moves */
  .crl-body { flex-direction: row; }
  .crl-seats { width: 320px; height: auto; flex-direction: column; gap: 8px; }
  .crl-seat { padding: 10px 12px; gap: 5px; }
  .crl-seat1 { gap: 8px; }
  .crl-skind { font-size: 10px; }
  .crl-flock { display: flex; flex: 1 1 0; min-height: 0; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 1px; padding: 5px; border-radius: 5px; background: rgba(51, 72, 46, .5); box-shadow: inset 0 0 0 1px rgba(234, 241, 234, .12); overflow: hidden; }
  .crl-fsh { flex: none; width: 17px; height: 13px; }
  .crl-more { font-size: 10px; font-weight: 800; color: var(--crl-dim); padding-left: 3px; align-self: flex-end; white-space: nowrap; }
  /* CR-F6: at 3–4 farmers the band becomes ONE sheep and a ×N count, on one line */
  .crl-flock[data-mode="count"] { flex: none; height: 26px; align-items: center; align-content: center; }
  .crl-flock[data-mode="count"] .crl-more { font-size: 13px; color: var(--crl-txt); align-self: center; }
  .crl-note { display: block; flex: none; height: 14px; overflow: hidden; font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; color: var(--crl-pc); }
  .crl-root[data-n="3"] .crl-unit, .crl-root[data-n="4"] .crl-unit { display: inline; }
  .crl-root[data-n="4"] .crl-seat:not([data-me="1"]) .crl-skind { display: inline; }
  .crl-root[data-n="4"] .crl-seat { padding: 6px 12px; gap: 3px; }
  .crl-fieldwrap { align-self: center; }
  .crl-ab { flex-direction: column; }
  .crl-left { flex: none; height: 92px; padding: 11px 13px; gap: 5px; }
  .crl-turn { flex: none; height: 78px; padding: 11px 13px; }
  .crl-sel { height: 132px; padding: 11px 13px; }
  .crl-log { padding: 11px 13px; }
  .crl-ll { height: 16px; }
  .crl-lb { --crl-seatBadge: 13px; font-size: 7px; }
  .crl-toast { height: 92px; }
  .crl-toast b { font-size: 22px; }
  .crl-toast span { font-size: 12px; }
  .crl-chip { height: 26px; font-size: 15px; margin: -13px 0 0 -20px; min-width: 40px; }
}