/* frontend/fleeced.css — FLEECED board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Pippily precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * The chrome is the mock's CLASSIC charcoal (Fleeced.dc.html L120) by default, ARCADE when GameTheme puts `gm-arcade`
 * on the screen (recolour only: same box, same sizes). The MEADOW keeps its own dusk palette in both (the mock's
 * --fc-* block, L20) — it must look nothing like Sheepdog's green field. ⛔ THE SCREEN CARRIES THE PALETTE: the setup
 * card sits outside `.fc-root`.
 * ⭐ COLOURBLIND (the owner): you = a dashed ring + ▲ YOU (on the strip, a ◆); your target = brackets + a chip; a
 *    sprint = a tail + a chip + hop arcs; a last move = SHAPE (a bar, then chevrons); every state carries a label,
 *    ✓, ✕, dashes or a stripe — never a recolour alone.
 *
 * ── Geometry ────────────────────────────────────────────────────────────────
 * Desktop: ONE design box 1280 × 553 — the mock's 637 less its 84px chat strip — scaled as a unit by BoardFit. The
 * chat PILL gives the MEADOW its 40 px: collapsed, the root is 593 tall (fleeced.js declares it through data-bf-h).
 * Rail 236 · strip 26 · meadow 1010 × 387 (427 collapsed) · panel 100 [L345–346].
 * Phone: unscaled, 384 × 812 down to the 360 × 740 floor: head 44 · players 50 · feed 34 · strip 18 | meadow (the one
 * flexible row) · panel 128 in two rows [L347–348]; FL-F4 the dog button is 106 px.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every slot is a FIXED size except the meadow on a phone. Every text box is a fixed width or fills its slot.
 * Feedback changes colour, glow or a transform — never size or spacing. The pending chip, the callout, the ◆ COVER
 * badges and the banner exist from the first frame and only fade.
 */

#fleeced-game-screen, .fc-root {
  --fc-bg: radial-gradient(135% 120% at 50% -10%, #1c1e24 0%, #141519 55%, #0d0e11 100%);
  --fc-solid: #141519;
  --fc-panel: rgba(255, 255, 255, .035); --fc-line: rgba(255, 255, 255, .11);
  --fc-txt: #e9e8e4; --fc-dim: #9a9da5;
  --fc-acc: oklch(.74 .14 152); --fc-accTxt: #0e1f15;
  --fc-p2: color-mix(in srgb, #e9e8e4 7%, transparent);
  --fc-ui: 'Outfit', system-ui, sans-serif;
  --fc-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fc-rad: 12px;
  /* the meadow (both schemes) */
  --fc-ground: #2d3160; --fc-row1: #343a6c; --fc-row2: #2c305c; --fc-start: #24284d; --fc-st1: #4b3b62; --fc-st2: #43355a;
  --fc-path: rgba(255, 190, 130, .09); --fc-flower: #ffb56b; --fc-fence: #d6a46a; --fc-fenceDk: #6b4529;
  --fc-penFloor: #4d3d50; --fc-hay: rgba(235, 195, 125, .14); --fc-glow: rgba(255, 196, 120, .30);
  --fc-tag: #1f1830; --fc-tagTxt: #ffffff; --fc-target: #ffe08a; --fc-ink: #1b1530; --fc-bub: #fff7ea; --fc-bubTxt: #2a1f33;
  --fc-dog: #c8793d; --fc-dogDk: #7c4424;
}
#fleeced-game-screen.gm-arcade, .gm-arcade .fc-root {
  --fc-bg: radial-gradient(135% 120% at 50% -10%, #1a1530 0%, #12101f 60%, #0a0814 100%);
  --fc-solid: #12101f;
  --fc-panel: rgba(255, 255, 255, .05); --fc-line: rgba(131, 56, 236, .45);
  --fc-txt: #f4f2fb; --fc-dim: rgba(244, 242, 251, .64);
  --fc-acc: #ff4fa0; --fc-accTxt: #ffffff;
  --fc-ui: 'Poppins', system-ui, sans-serif;
  --fc-rad: 16px;
}

/* ── FL-F7: our own keyframes, at the mock's durations ─────────────────────── */
@keyframes fc-pulse { 0%, 100% { opacity: .5; transform: scale(.94) } 50% { opacity: .9; transform: scale(1.04) } }   /* 1.1s [L432] */
@keyframes fc-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }                         /* .5s [L452] */
/* ⛔ the pop keyframes animate the `scale` PROPERTY, never `transform` — the chip's position IS its inline transform */
@keyframes fc-glow { 0%, 100% { box-shadow: 0 0 0 1px var(--fc-target), 0 0 6px rgba(255, 224, 138, .25) } 50% { box-shadow: 0 0 0 2px var(--fc-target), 0 0 18px rgba(255, 224, 138, .6) } }  /* 1.6s [L573] */
@keyframes fc-pop { 0% { scale: .6; opacity: 0 } 100% { scale: 1; opacity: 1 } }

/* ── setup card (on the screen's palette) ───────────────────────────────── */
#fleeced-game-screen { background: var(--fc-bg); color: var(--fc-txt); }
.fc-setup-card { max-width: 560px; margin: 24px auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--fc-ui); background: var(--fc-panel); color: var(--fc-txt); border: 1px solid var(--fc-line); }
.fc-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fc-dim); font-weight: 700; }
.fc-setup-title { margin: 0; font-size: 30px; }
.fc-setup-blurb, .fc-setup-hint { margin: 0; line-height: 1.55; font-size: 14px; }
.fc-setup-hint { color: var(--fc-dim); font-size: 12.5px; }
.fc-setup-row { display: flex; align-items: center; gap: 12px; }
.fc-setup-lab { width: 64px; font-weight: 700; font-size: 13px; color: var(--fc-dim); }
.fc-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-opt { min-width: 52px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--fc-line); background: var(--fc-panel); color: var(--fc-txt); font: 700 14px var(--fc-ui); cursor: pointer; }
.fc-opt[data-on="1"] { background: var(--fc-acc); color: var(--fc-accTxt); box-shadow: 0 0 0 2px var(--fc-txt); }
.fc-start { margin-top: 6px; height: 48px; border-radius: 12px; border: 1px solid var(--fc-line); background: var(--fc-acc); color: var(--fc-accTxt); font: 800 17px var(--fc-ui); letter-spacing: .04em; cursor: pointer; }
.fc-start:active, .fc-opt:active { transform: translateY(1px); }
@media (hover: hover) { .fc-start:hover { filter: brightness(1.12); } .fc-opt:hover { box-shadow: 0 0 0 2px var(--fc-txt); } }

/* ── the root ───────────────────────────────────────────────────────────── */
.fc-root {
  position: relative; box-sizing: border-box; overflow: hidden;
  background: var(--fc-bg); color: var(--fc-txt); font-family: var(--fc-ui);
  user-select: none; -webkit-user-select: none;
}
.fc-root *, .fc-root *::before, .fc-root *::after { box-sizing: border-box; }
.fc-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.fc-root i, .fc-root em { font-style: normal; }
.fc-box { background: var(--fc-panel); border: 1px solid var(--fc-line); border-radius: var(--fc-rad); }
.fc-ph-only { display: none; }

/* rail: head · players · feed */
.fc-rail { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.fc-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 12px; flex: none; }
.fc-timer { --fc-frac: 0; position: relative; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--fc-acc) calc(var(--fc-frac) * 360deg), var(--fc-line) 0); }
.fc-timer[data-low="1"] { outline: 2px dashed var(--fc-txt); outline-offset: 2px; }
.fc-tin { position: absolute; border-radius: 50%; background: var(--fc-solid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.fc-tin b { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.3em; text-align: center; line-height: 1; }
.fc-tin em { font: 700 8.5px/1 var(--fc-mono); color: var(--fc-dim); letter-spacing: .1em; }
.fc-headtxt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fc-heat { font-weight: 800; white-space: nowrap; line-height: 1.1; }
.fc-phase { color: var(--fc-dim); white-space: nowrap; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.fc-dogs { display: flex; align-items: center; gap: 3px; align-self: flex-start; border-radius: 8px; background: rgba(0, 0, 0, .18); flex: none; }
.fc-dogs[data-last="1"] { background: color-mix(in srgb, #ffe08a 18%, transparent); animation: fc-glow 1.6s ease-in-out infinite; }
.fc-dogsl { font: 800 9px/1.1 var(--fc-mono); letter-spacing: .08em; color: var(--fc-dim); white-space: nowrap; width: 6.4em; }
.fc-dogs[data-last="1"] .fc-dogsl { color: var(--fc-txt); }
.fc-dslot { width: 11px; height: 11px; border-radius: 50%; border: 2px dashed var(--fc-dim); flex: none; }
.fc-dslot[data-on="1"] { background: var(--fc-dog); border: 2px solid var(--fc-dogDk); }
.fc-dslot[hidden] { display: none; }
.fc-dogs b { font-weight: 900; min-width: 10px; font-variant-numeric: tabular-nums; }
.fc-pend { font: 700 10px/1.2 var(--fc-mono); color: var(--fc-txt); padding: 2px 6px; border: 1px dashed var(--fc-dim); border-radius: 999px; white-space: nowrap; align-self: flex-start; opacity: 0; }
.fc-pend[data-on="1"] { opacity: 1; }
.fc-menu { display: none; }

.fc-players { display: flex; flex-direction: column; gap: 8px; flex: none; }
.fc-pl { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 60px; flex: none;
  background: var(--fc-panel); border: 1px solid var(--fc-line); border-radius: var(--fc-rad); }
.fc-pl[data-me="1"] { border-color: var(--fc-acc); }
.fc-pl[data-out="1"] { opacity: .62; border-style: dashed; }
.fc-av { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid var(--fc-line);
  background: repeating-linear-gradient(45deg, var(--fc-p2) 0 3px, transparent 3px 6px); }
.fc-pl[data-out="1"] .fc-av { filter: grayscale(1); }
.fc-avb { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 900 10px/1 var(--fc-ui); background: var(--fc-acc); color: var(--fc-accTxt); box-shadow: 0 0 0 1.5px var(--fc-solid); visibility: hidden; }
.fc-pl[data-ready="1"] .fc-avb, .fc-pl[data-out="1"] .fc-avb { visibility: visible; }
.fc-pl[data-out="1"] .fc-avb { background: #1b1530; color: #fff; }
.fc-plt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.fc-pln { font: 700 14px/1.1 var(--fc-ui); overflow: hidden; max-height: 2.2em; }
.fc-pls { font: 700 9.5px/1 var(--fc-mono); letter-spacing: .08em; color: var(--fc-dim); white-space: nowrap; }
.fc-plp { display: flex; align-items: baseline; gap: 3px; flex: none; width: 58px; justify-content: flex-end; }
.fc-plp b { font: 800 20px/1 var(--fc-ui); font-variant-numeric: tabular-nums; }
.fc-plp em { font: 500 11px/1 var(--fc-ui); color: var(--fc-dim); }

.fc-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; overflow: hidden; }
.fc-feedh { font: 800 9.5px/1 var(--fc-mono); letter-spacing: .12em; color: var(--fc-dim); }
.fc-feedl { font: 400 12.5px/1.35 var(--fc-ui); color: var(--fc-dim); }
.fc-feedl[data-first="1"] { font-weight: 600; color: var(--fc-txt); }
.fc-feedl:empty { display: none; }

/* main: strip · meadow · panel */
.fc-main { display: grid; min-width: 0; min-height: 0; }
.fc-strip { position: relative; overflow: hidden; }
.fc-sband { position: absolute; background: var(--fc-panel); border: 1px solid var(--fc-line); border-radius: 6px; }
.fc-sstretch { position: absolute; background: color-mix(in srgb, #ffb56b 22%, transparent); }
.fc-spen { position: absolute; background: color-mix(in srgb, #d6a46a 26%, transparent); border-radius: 0 6px 6px 0; }
.fc-stick { position: absolute; background: #ffb56b; }
.fc-stick-g { background: #d6a46a; }
.fc-swin { position: absolute; border: 2px solid var(--fc-txt); border-radius: 4px; opacity: .55; }
.fc-sdot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--fc-txt); opacity: .85; }
.fc-smore { position: absolute; font: 800 8px/1 var(--fc-mono); color: var(--fc-txt); }
.fc-syou { position: absolute; width: 10px; height: 10px; background: var(--fc-acc); transform: rotate(45deg); box-shadow: 0 0 0 1.5px var(--fc-solid); }
.fc-syoul { position: absolute; top: 2px; font: 900 9px/1 var(--fc-ui); color: var(--fc-acc); letter-spacing: .08em; }
.fc-slab { position: absolute; top: 8px; font: 700 9px/1 var(--fc-mono); color: var(--fc-dim); letter-spacing: .08em; }
.fc-slab-pen { color: var(--fc-txt); font-weight: 800; }
.fc-slab-l3 { top: 15px; font-size: 8.5px; }

/* ── the meadow ─────────────────────────────────────────────────────────── */
.fc-meadow { --fc-S: 36px; --fc-tagfs: 11px; position: relative; overflow: hidden; border-radius: var(--fc-rad); background: var(--fc-ground);
  box-shadow: inset 0 0 0 1px var(--fc-line), inset 0 0 40px rgba(10, 8, 30, .45); touch-action: manipulation; }
.fc-meadow[data-hover="1"] { cursor: pointer; }
.fc-bands, .fc-layer { position: absolute; inset: 0; pointer-events: none; }
.fc-band { position: absolute; }
.fc-band[data-k="start"] { background: var(--fc-start); } .fc-band[data-k="r1"] { background: var(--fc-row1); } .fc-band[data-k="r2"] { background: var(--fc-row2); }
.fc-band[data-k="st1"] { background: var(--fc-st1); } .fc-band[data-k="st2"] { background: var(--fc-st2); }
.fc-stepn { position: absolute; transform: translate(-50%, -50%); font: 700 9px/1 var(--fc-mono); color: rgba(255, 255, 255, .42); letter-spacing: .06em; }
.fc-path { position: absolute; background: repeating-linear-gradient(45deg, var(--fc-path) 0 3px, transparent 3px 10px); }
.fc-line { position: absolute; background: repeating-linear-gradient(180deg, var(--fc-flower) 0 7px, transparent 7px 12px); }
.fc-line-h { background: repeating-linear-gradient(90deg, var(--fc-flower) 0 7px, transparent 7px 12px); }
.fc-flowers { position: absolute; background-size: 12px 12px; background-repeat: repeat-y; background-position: 0 2px; }
.fc-flowers-h { background-repeat: repeat-x; background-position: 2px 0; }
.fc-bchip { position: absolute; white-space: nowrap; padding: 2px 6px; border-radius: 5px; font: 800 10px/1.2 var(--fc-mono); letter-spacing: .08em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.fc-bchip-stretch { background: var(--fc-flower); color: var(--fc-ink); }
.fc-bchip-gate { background: var(--fc-fence); color: var(--fc-ink); }
.fc-bchip-pen { background: rgba(0, 0, 0, .5); color: #fff1d9; }
.fc-pen { position: absolute; background: repeating-linear-gradient(135deg, var(--fc-hay) 0 2px, transparent 2px 7px), var(--fc-penFloor); }
.fc-fence { position: absolute; background: var(--fc-fence); box-shadow: 0 0 0 1.5px var(--fc-fenceDk); }
.fc-gate { position: absolute; transform-origin: 50% 0; background: repeating-linear-gradient(180deg, var(--fc-fence) 0 14px, var(--fc-fenceDk) 14px 17px);
  box-shadow: 0 0 0 2px var(--fc-fenceDk); opacity: .28; transform: scaleY(.2); transition: transform .3s ease-out, opacity .3s; }
.fc-gate-h { transform-origin: 0 50%; background: repeating-linear-gradient(90deg, var(--fc-fence) 0 14px, var(--fc-fenceDk) 14px 17px); transform: scaleX(.2); }
.fc-gate[data-shut="1"] { opacity: 1; transform: none; }
.fc-penword { position: absolute; transform: translate(-50%, -50%) rotate(90deg); font: 900 30px/1 var(--fc-ui); letter-spacing: .3em; color: rgba(255, 230, 190, .10); }
.fc-penword[data-pc="0"] { transform: translate(-50%, -50%); font-size: 22px; }

/* the flock: a body over its own ground shadow (a hop lifts the body, never the shadow) */
.fc-sh { position: absolute; left: 0; top: 0; width: var(--fc-S); height: var(--fc-S); will-change: transform; }
.fc-sh[data-on="0"], .fc-tag[data-on="0"], .fc-mark[data-on="0"], .fc-dog[data-on="0"], [data-on="0"].fc-wolf, [data-on="0"].fc-poof,
.fc-you[data-on="0"], .fc-hover[data-on="0"], .fc-tring2[data-on="0"], .fc-brk[data-on="0"], .fc-chip[data-on="0"], .fc-bubble[data-on="0"], .fc-bang[data-on="0"] { display: none; }
.fc-shadow { position: absolute; left: 6%; top: 18%; width: 92%; height: 84%; border-radius: 50%; background: rgba(8, 6, 24, .34); }
.fc-body { position: absolute; left: -20%; top: 0; width: 120%; height: 100%; background-image: var(--fc-sheep-art); background-size: 100% 100%; }
.fc-sh[data-tell="1"] .fc-body { background-image: var(--fc-tell-art); }
.fc-tag { position: absolute; left: 0; top: 0; min-width: calc(var(--fc-tagfs) + 6px); height: calc(var(--fc-tagfs) + 3px); padding: 0 2px; display: flex; align-items: center; justify-content: center;
  background: var(--fc-tag); color: var(--fc-tagTxt); font: 800 var(--fc-tagfs)/1 var(--fc-mono); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
.fc-tag[data-me="1"] { box-shadow: 0 0 0 1.5px var(--fc-acc); }
/* FL-M6: the last move in SHAPE — graze = a bar, amble / trot / sprint = one / two / three chevrons */
.fc-mark { position: absolute; left: 0; top: 0; height: 10px; font: 900 11px/10px var(--fc-mono); color: rgba(255, 255, 255, .62); letter-spacing: -2px; white-space: nowrap; }
.fc-mark[data-h="0"]::before { content: ''; display: block; width: 7px; height: 2.5px; margin-top: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.fc-mark[data-h="1"]::before { content: '›'; }
.fc-mark[data-h="2"]::before { content: '››'; }
.fc-mark[data-h="3"]::before { content: '›››'; color: var(--fc-target); }
.fc-you { position: absolute; left: 0; top: 0; width: calc(var(--fc-S) * 1.56); height: calc(var(--fc-S) * 1.32); border-radius: 50%;
  border: 2.5px dashed var(--fc-acc); background: color-mix(in srgb, var(--fc-acc) 26%, transparent); }
.fc-hover { position: absolute; left: 0; top: 0; width: calc(var(--fc-S) * 1.4); height: calc(var(--fc-S) * 1.4); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 14px rgba(255, 255, 255, .6); }
.fc-tring2 { position: absolute; left: 0; top: 0; width: calc(var(--fc-S) * 1.45); height: calc(var(--fc-S) * 1.45); }
.fc-tring2::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--fc-target), 0 0 16px 2px var(--fc-target); animation: fc-pulse 1.1s ease-in-out infinite; }
.fc-brk { position: absolute; left: 0; top: 0; width: calc(var(--fc-S) * .435); height: calc(var(--fc-S) * .435); border: 0 solid var(--fc-target); }
#fc-brk-0 { border-width: 3px 0 0 3px; } #fc-brk-1 { border-width: 3px 3px 0 0; } #fc-brk-2 { border-width: 0 0 3px 3px; } #fc-brk-3 { border-width: 0 3px 3px 0; }
.fc-dog { position: absolute; left: 0; top: 0; width: var(--fc-S); height: var(--fc-S); }
.fc-dogb { position: absolute; inset: 0; background-image: var(--fc-dog-art); background-size: 100% 100%; }
.fc-dog[data-bob="1"] .fc-dogb { animation: fc-bob .5s ease-in-out infinite; }
.fc-wolf { position: absolute; left: 0; top: 0; background-image: var(--fc-wolf-art); background-size: 100% 100%; }
.fc-penwolf { background-image: var(--fc-wolfN-art); animation: fc-pop .4s ease-out both; }
.fc-poof { position: absolute; left: 0; top: 0; width: calc(var(--fc-S) * .7); height: calc(var(--fc-S) * .7); border-radius: 50%; background: rgba(244, 238, 250, .85);
  box-shadow: calc(var(--fc-S) * -.5) calc(var(--fc-S) * -.2) 0 calc(var(--fc-S) * .05) rgba(214, 204, 232, .8), calc(var(--fc-S) * .5) calc(var(--fc-S) * -.3) 0 calc(var(--fc-S) * .05) rgba(214, 204, 232, .8),
    calc(var(--fc-S) * -.3) calc(var(--fc-S) * .45) 0 calc(var(--fc-S) * .05) rgba(214, 204, 232, .8), calc(var(--fc-S) * .4) calc(var(--fc-S) * .4) 0 calc(var(--fc-S) * .05) rgba(214, 204, 232, .8),
    0 calc(var(--fc-S) * -.55) 0 calc(var(--fc-S) * .05) rgba(214, 204, 232, .8), calc(var(--fc-S) * -.7) calc(var(--fc-S) * .2) 0 calc(var(--fc-S) * .05) rgba(214, 204, 232, .8),
    calc(var(--fc-S) * .75) calc(var(--fc-S) * .1) 0 calc(var(--fc-S) * .05) rgba(214, 204, 232, .8); }
.fc-traildot, .fc-arcdot { position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.fc-arcdot { background: var(--fc-target); opacity: .85; }
.fc-emptyring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .4); }
/* meadow chips (FL-F1: every one is clamped + flipped by flPlaceChip) */
.fc-chip { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 2px 6px; border-radius: 5px; font: 800 10px/1.2 var(--fc-mono); letter-spacing: .08em;
  background: var(--fc-target); color: var(--fc-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.fc-chip[data-cls="dark"], .fc-chip-back { background: rgba(0, 0, 0, .65); color: #fff; }
.fc-chip-you { background: var(--fc-acc); color: var(--fc-accTxt); border-radius: 999px; font: 900 11px/1.1 var(--fc-ui); letter-spacing: .08em; }
.fc-bubble { position: absolute; left: 0; top: 0; white-space: nowrap; background: var(--fc-bub); color: var(--fc-bubTxt); padding: 4px 9px; border-radius: 10px 10px 10px 2px;
  font: 900 14px/1 var(--fc-ui); letter-spacing: .04em; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
/* PT1: the dogs' words — "sniff…" / "WOOF!" in Sheepdog's white rising text (.sd-bark); fcPaintMeadow drives rise + fade by T */
.fc-say { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; font: 900 12px/1 var(--fc-ui); letter-spacing: .03em;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .9); }
.fc-say[data-on="0"] { display: none; }
.fc-dinner { font: 700 12px/1.2 var(--fc-ui); padding: 5px 9px; }
.fc-bang { position: absolute; left: 0; top: 0; font: 900 20px/1 var(--fc-ui); color: var(--fc-target); text-shadow: 0 2px 0 var(--fc-ink); }

/* ── the panel: die · cover · moves · dog · ready ─────────────────────────── */
.fc-panel { position: relative; display: grid; align-items: center; }
.fc-die { display: flex; align-items: center; justify-content: center; justify-self: center; border-radius: 12px;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ffe08a 60%, transparent); }
.fc-die[data-dim="1"] { box-shadow: 0 0 0 3px color-mix(in srgb, #ffe08a 20%, transparent); opacity: .55; }
.fc-diein { display: flex; line-height: 0; }
.fc-covtxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-covtxt em { font: 800 9.5px/1 var(--fc-mono); letter-spacing: .1em; color: var(--fc-dim); }
.fc-covsub { font: 500 11.5px/1.15 var(--fc-ui); color: var(--fc-dim); white-space: nowrap; }
.fc-covtxt b { font: 800 15px/1.1 var(--fc-ui); white-space: nowrap; }
.fc-moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.fc-mv { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 70px; min-width: 0;
  border-radius: 9px; border: 2px solid var(--fc-line); background: var(--fc-p2); color: var(--fc-txt); cursor: pointer; }
.fc-mv[data-k="3"] { border-color: color-mix(in srgb, #ffcf5c 70%, transparent); }
.fc-mv[data-sel="1"] { background: var(--fc-acc); color: var(--fc-accTxt); border-color: var(--fc-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-acc) 35%, transparent); }
.fc-mv:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .5); filter: brightness(.88); }
.fc-mv[data-st="dis"] { opacity: .38; border-style: dashed; filter: grayscale(1); cursor: not-allowed; box-shadow: none; }
.fc-mv[data-st="lock"] { opacity: .62; border-style: dashed; cursor: not-allowed; }
.fc-hazard { position: absolute; left: 3px; right: 3px; top: 2px; height: 5px; border-radius: 3px; background: repeating-linear-gradient(135deg, #ffcf5c 0 5px, #1b1530 5px 10px); }
.fc-mvn { font: 800 15px/1 var(--fc-ui); letter-spacing: .02em; white-space: nowrap; }
.fc-mvs { font: 600 11px/1 var(--fc-mono); opacity: .8; white-space: nowrap; }
.fc-cover { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 999px; background: #ffe08a; color: #1b1530;
  font: 900 9px/1.1 var(--fc-mono); letter-spacing: .1em; white-space: nowrap; box-shadow: 0 0 0 1.5px #1b1530; visibility: hidden; }
.fc-cover[data-on="1"] { visibility: visible; }
.fc-dogbtn { display: flex; align-items: center; gap: 10px; height: 70px; padding: 0 12px; min-width: 0; border-radius: 9px; border: 2px solid var(--fc-line);
  background: var(--fc-p2); color: var(--fc-txt); cursor: pointer; text-align: left; }
.fc-dogico { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; background-image: var(--fc-dog-art); background-size: 100% 100%; }
.fc-dogbtn[data-st="gone"] .fc-dogico { background: none; border: 2px dashed currentColor; opacity: .55; }
.fc-dogt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-dogt b { font: 800 13px/1 var(--fc-ui); letter-spacing: .05em; white-space: nowrap; }
.fc-dogt em { font: 500 11px/1.15 var(--fc-ui); opacity: .78; white-space: nowrap; }
.fc-dogbtn[data-st="sent"] { border-style: dashed; border-color: #ffe08a; background: color-mix(in srgb, #ffe08a 16%, transparent); }
.fc-dogbtn:disabled { cursor: not-allowed; }
.fc-dogbtn[data-st="gone"], .fc-dogbtn:disabled:not([data-st="sent"]) { opacity: .4; border-style: dashed; filter: grayscale(1); }
.fc-dogbtn[data-st="sent"]:disabled { opacity: .75; }
/* PT1: pressed first, it waits for a sheep */
.fc-dogbtn[data-arm="1"] { border-color: #ffe08a; box-shadow: 0 0 0 1px #ffe08a, 0 0 14px rgba(255, 224, 138, .35); }
.fc-ready { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 70px; min-width: 0; border-radius: 9px;
  border: 2px solid var(--fc-acc); background: var(--fc-acc); color: var(--fc-accTxt); cursor: pointer; }
.fc-ready b { font: 900 17px/1 var(--fc-ui); letter-spacing: .08em; white-space: nowrap; }
.fc-ready em { font: 600 10.5px/1 var(--fc-mono); opacity: .8; white-space: nowrap; min-height: 1em; }
.fc-ready:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .45); filter: brightness(.88); }
.fc-ready[data-st="done"] { background: transparent; color: var(--fc-txt); border-style: dashed; cursor: not-allowed; }
.fc-ready[data-st="dis"] { background: transparent; color: var(--fc-txt); opacity: .38; border-style: dashed; border-color: var(--fc-line); cursor: not-allowed; }
@media (hover: hover) {
  .fc-mv:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--fc-acc), 0 0 14px -2px var(--fc-acc); transform: translateY(-2px); }
  .fc-mv[data-sel="0"]:hover:not(:disabled) { background: color-mix(in srgb, var(--fc-txt) 14%, transparent); }
  .fc-dogbtn:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--fc-acc), 0 0 14px -2px var(--fc-acc); transform: translateY(-2px); }
  .fc-ready:hover:not(:disabled) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-acc) 45%, transparent), 0 0 18px -2px var(--fc-acc); transform: translateY(-2px); }
  .fc-menu:hover { box-shadow: 0 0 0 2px var(--fc-txt); }
}
.fc-callout { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font: 800 10px/1.2 var(--fc-mono); letter-spacing: .08em; background: #ffe08a; color: #1b1530; opacity: 0; pointer-events: none; }
.fc-callout[data-kind="out"] { background: #1b1530; color: #fff; box-shadow: 0 0 0 1.5px var(--fc-line); }
/* PT1: off your cover — dark with a yellow ring and yellow text (the last-dog callout is a yellow FILL) */
.fc-callout[data-kind="tip"] { background: #1b1530; color: #ffe08a; box-shadow: 0 0 0 1.5px #ffe08a; }
.fc-callout[data-on="1"] { opacity: 1; }
/* 🌐 ⚖️ B5 (slice B): found + only bots left — no plan panel. The slot KEEPS its box (locked layout): its contents go
   invisible and one line says why. The 3.5 s bar is the timer ring's own (the server's windowMs). */
.fc-watch { display: none; }
.fc-root[data-watch="1"] .fc-panel > :not(.fc-watch) { visibility: hidden; }
.fc-root[data-watch="1"] .fc-watch { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 0 12px;
  text-align: center; font: 700 14px/1.25 var(--fc-ui); letter-spacing: .03em; color: var(--fc-dim); pointer-events: none; }
/* ⚖️ B4: a seat that LEFT — its card reads ⊘ LEFT (fcPaintPlayers), dimmer than a found wolf */
.fc-pl[data-left="1"] { opacity: .45; }

/* ── screen-level beats: absolute layers of the root, never fixed ─────────── */
.fc-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 26px; background: var(--fc-solid); border: 2px solid var(--fc-acc); border-radius: 16px; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 5; }
.fc-banner[data-on="1"] { opacity: 1; }
.fc-banner b { font: 900 24px/1.1 var(--fc-ui); }
.fc-banner span { font: 600 14px/1.2 var(--fc-ui); color: var(--fc-dim); font-variant-numeric: tabular-nums; }
.fc-toast { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); padding: 8px 16px; background: #ffe08a; color: #1b1530; border-radius: 999px;
  font: 800 13px/1.1 var(--fc-ui); letter-spacing: .04em; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 5; }
.fc-toast[data-on="1"] { opacity: 1; }

/* ── the end screen rows ─────────────────────────────────────────────────── */
.fc-endrows { display: flex; flex-direction: column; gap: 6px; }
.fc-endrow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.fc-endrow[data-win="1"] { box-shadow: 0 0 0 2px currentColor; font-weight: 800; }
.fc-endnote { margin-top: 10px; font-size: 12px; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .fc-tring2::before, .fc-dog[data-bob="1"] .fc-dogb, .fc-dogs[data-last="1"], .fc-penwolf { animation: none !important; }
}

/* ══ PHONE (unscaled, 384 × 812 → 360 × 740): one column, the MEADOW the flexible row ══ */
@media (max-width: 999px) {
  #fleeced-game-screen.fc-playing .wrap { padding: 0 2px; max-width: none; }
  #fleeced-game-screen.fc-playing .topbar { display: none; }
  #fleeced-game-screen.fc-playing.fc-topbar-open .topbar { display: flex; }
  /* NOTCH SWEEP (predicely_notch_safe_area): the topbar carried the inset; hiding it, we carry it — PADDING, never margin */
  #fleeced-game-screen.fc-playing:not(.fc-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
  .fc-root { width: 100%; height: var(--fc-phone-h, 694px); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
  .fc-pc-only { display: none; }
  .fc-ph-only { display: inline; }
  .fc-rail { display: contents; }
  .fc-head { height: 44px; gap: 8px; padding: 0 6px 0 3px; }
  .fc-timer { width: 38px; height: 38px; }
  .fc-tin { inset: 3px; }
  .fc-tin b { font-size: 16px; }
  .fc-tin em { display: none; }
  .fc-headtxt { flex: 1; gap: 3px; }
  .fc-heat { font-size: 13px; }
  .fc-phase { font-size: 10.5px; }
  .fc-pend { position: absolute; left: 50px; top: 27px; font-size: 9px; padding: 0 5px; background: var(--fc-solid); }
  .fc-dogs { position: absolute; right: 40px; top: 5px; padding: 4px 6px; }
  .fc-dogsl { font-size: 8.5px; width: 7.2em; }
  .fc-dslot { width: 11px; height: 11px; }
  .fc-dogs b { font-size: 13px; }
  .fc-menu { display: flex; position: absolute; right: 5px; top: 7px; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px;
    border: 1px solid var(--fc-line); background: var(--fc-panel); color: var(--fc-txt); font-size: 14px; cursor: pointer; padding: 0; }
  .fc-players { flex-direction: row; gap: 5px; height: 50px; }
  .fc-pl { flex: 1 1 0; min-width: 0; height: 50px; gap: 5px; padding: 0 5px; }
  .fc-av { width: 22px; height: 22px; }
  .fc-avb { width: 12px; height: 12px; font-size: 8px; }
  .fc-plt { gap: 2px; }
  .fc-pln { font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
  .fc-pls { font-size: 8px; letter-spacing: .04em; }
  .fc-plp { display: none; }
  .fc-plx { font: 600 10.5px/1.1 var(--fc-ui); color: var(--fc-dim); white-space: nowrap; }
  .fc-feed { flex: none; height: 34px; gap: 2px; padding: 0 8px; justify-content: center; }
  .fc-feedh { display: none; }
  .fc-feedl { font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fc-main { flex: 1; min-height: 0; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 128px; gap: 6px; }
  .fc-strip { grid-column: 1; grid-row: 1; }
  .fc-sband { border-radius: 6px; }
  .fc-spen { border-radius: 6px 6px 0 0; }
  .fc-sdot { width: 3px; height: 3px; }
  .fc-syou { width: 9px; height: 9px; }
  .fc-slab-ph { left: 0; width: 18px; text-align: center; font: 800 8px/1 var(--fc-mono); color: var(--fc-txt); }
  .fc-meadow { grid-column: 2; grid-row: 1; }
  .fc-meadow .fc-chip { font-size: 9px; }
  .fc-chip-you { font-size: 10px !important; }
  .fc-bubble { font-size: 12px; }
  .fc-dinner { font-size: 11px; }
  .fc-bang { font-size: 16px; }
  .fc-bchip { font-size: 9px; }
  .fc-panel { grid-column: 1 / 3; grid-row: 2; grid-template-columns: 46px minmax(0, 1fr) 106px 78px; grid-template-rows: 52px 52px;
    grid-template-areas: "die cover dog ready" "moves moves moves moves"; column-gap: 7px; row-gap: 8px; padding: 8px; }
  .fc-die { grid-area: die; border-radius: 9px; width: 44px; height: 44px; }
  .fc-covtxt { grid-area: cover; gap: 2px; }
  .fc-covtxt em { font-size: 8.5px; }
  .fc-covsub { font-size: 10px; }
  .fc-covtxt b { font-size: 12.5px; }
  .fc-moves { grid-area: moves; gap: 6px; }
  .fc-mv { height: 52px; }
  .fc-mvn { font-size: 12px; }
  .fc-mvs { font-size: 10px; }
  .fc-dogbtn { grid-area: dog; height: 52px; gap: 5px; padding: 0 5px; }
  .fc-dogico { width: 24px; height: 24px; }
  .fc-dogt b { font-size: 11px; letter-spacing: .02em; }
  .fc-dogt em { font-size: 9.5px; }
  .fc-ready { grid-area: ready; height: 52px; }
  .fc-ready b { font-size: 14px; }
  .fc-ready em { font-size: 9px; }
  .fc-callout { top: -10px; font-size: 9px; }
  .fc-banner { top: 45%; padding: 10px 16px; }
  .fc-banner b { font-size: 17px; }
  .fc-banner span { font-size: 11.5px; }
  .fc-toast { top: 150px; font-size: 11px; padding: 6px 11px; }
}
@media (max-width: 370px) {
  .fc-root { padding: 6px; gap: 5px; }
  .fc-panel { grid-template-columns: 44px minmax(0, 1fr) 106px 70px; column-gap: 5px; padding: 8px 6px; }
  .fc-covsub { display: none; }
  .fc-dogsl { width: 6.6em; letter-spacing: .04em; }
}

/* ══ DESKTOP: ONE box, scaled by BoardFit ══ */
@media (min-width: 1000px) {
  #fleeced-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .fc-root { width: 1280px; height: var(--fc-fit-h, 553px); padding: 12px; display: flex; gap: 10px; }
  .fc-rail { width: 236px; flex: none; }
  .fc-head { height: 92px; }
  .fc-timer { width: 64px; height: 64px; }
  .fc-tin { inset: 4.5px; }
  .fc-tin b { font-size: 24px; }
  .fc-heat { font-size: 15px; }
  .fc-phase { font-size: 12px; }
  .fc-dogs { padding: 4px 5px; }
  .fc-head { gap: 10px; padding: 0 10px; }
  .fc-main { width: 1010px; flex: none; grid-template-rows: 26px minmax(0, 1fr) 100px; row-gap: 8px; }
  .fc-panel { grid-template-columns: 64px 128px minmax(0, 1fr) 176px 124px; column-gap: 14px; padding: 0 14px; }
  .fc-die { width: 60px; height: 60px; }
}