/* frontend/allfives.css — FIVES (id `allfives`, All Fives dominoes) board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Gulls / Swarm / Acorns precedent.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock (docs/design/Batch 15/Pips.dc.html vars(), L444–451): CLASSIC by
 * default, ARCADE when GameTheme puts `gm-arcade` on the screen — recolour only, from the equipped Arcade palette's
 * `--pgr-*` tokens (the mock's Blue/Science/… prop is NOT forked). Player colours come from PlayerColours
 * (`--pd-p0..3`, set by allfives.js), with Design's ● ▲ ■ ◆ as the second channel on avatars, track and reveal panel.
 * Spinner = ✦ badge + outline; scoring = ★ + glow + words; a lit end = solid border + glow + its number. 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: top bar 64, hand strip 136,
 * right rail 244, the board flexes (313 / 353 tall). Phone column (PP-M1/M5): rivals 52 · race 34 · board (flex) ·
 * ends/feed/boneyard 46 · HAND 72 (fixed, one row, scrolls sideways) · you + Draw 46.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every row is a FIXED size except the BOARD. 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 (house rule 2).
 */

#allfives-game-screen, .pd-root {
  --pd-page: #0d0e11; --pd-bg: radial-gradient(125% 120% at 50% -10%, #1c1e24 0%, #141519 58%, #0d0e11 100%);
  --pd-solid: #1d1f24; --pd-seat: rgba(255, 255, 255, .035); --pd-panel: rgba(255, 255, 255, .03); --pd-felt: rgba(255, 255, 255, .018);
  --pd-line: rgba(255, 255, 255, .085); --pd-txt: #e9e8e4; --pd-dim: #9a9ca2;
  --pd-sel: oklch(.76 .14 152); --pd-selBg: oklch(.34 .07 152 / .55);
  --pd-score: oklch(.86 .13 88); --pd-scoreTxt: #17140a;
  --pd-btn: linear-gradient(180deg, #2d3036, #22242a); --pd-btnTxt: #f1f0ec; --pd-btnOn: oklch(.76 .14 152); --pd-btnOnTxt: #0e1a13;
  --pd-tile: linear-gradient(180deg, #30333a, #25272d); --pd-tileBd: rgba(255, 255, 255, .14);
  --pd-back: linear-gradient(180deg, #3d4048, #2c2f35);
  --pd-panelBd: 1px solid var(--pd-line); --pd-r: 14px; --pd-rL: 18px; --pd-rS: 8px; --pd-shadow: none;
  --pd-f: 'Outfit', system-ui, sans-serif;
  --ha-color: var(--pd-sel); --ha-glow: color-mix(in srgb, var(--pd-sel) 55%, transparent);
  --eh-ink: var(--pd-txt); --eh-bg: color-mix(in srgb, var(--pd-solid) 85%, transparent); --eh-line: var(--pd-line);
}
/* ARCADE — recolour only, from the equipped Arcade palette (GameTheme sets --pgr-* on the screen); mock vars(), L445–447 */
#allfives-game-screen.gm-arcade, .gm-arcade .pd-root {
  --pd-bg: var(--pgr-bg, radial-gradient(135% 120% at 50% -10%, #0c1a3a 0%, #14285e 45%, #1e3a8a 100%));
  --pd-solid: color-mix(in oklch, var(--pgr-sel, #60a5fa) 14%, #0a0f22); --pd-seat: rgba(0, 0, 0, .22);
  --pd-panel: rgba(255, 255, 255, .07); --pd-felt: rgba(0, 0, 0, .2);
  --pd-line: color-mix(in oklch, var(--pgr-sel, #60a5fa) 42%, transparent); --pd-txt: #ffffff; --pd-dim: rgba(255, 255, 255, .7);
  --pd-sel: var(--pgr-sel, #60a5fa); --pd-selBg: color-mix(in oklch, var(--pgr-sel, #60a5fa) 24%, transparent);
  --pd-score: var(--pgr-gold, #facc15); --pd-scoreTxt: #161616;
  --pd-btn: rgba(255, 255, 255, .1); --pd-btnTxt: #ffffff; --pd-btnOn: var(--pgr-sel, #60a5fa); --pd-btnOnTxt: #0b1020;
  --pd-tile: rgba(255, 255, 255, .13); --pd-tileBd: color-mix(in oklch, var(--pgr-sel, #60a5fa) 55%, transparent);
  --pd-back: color-mix(in oklch, var(--pgr-sel, #60a5fa) 38%, #0b1020);
  --pd-panelBd: 2px solid var(--pgr-sel, #60a5fa); --pd-r: 16px; --pd-rL: 22px; --pd-rS: 10px; --pd-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);
  --pd-f: 'Poppins', system-ui, sans-serif;
}

@keyframes pd-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--pd-score), 0 0 22px 2px var(--pd-score) } 50% { box-shadow: 0 0 0 3px var(--pd-score), 0 0 8px 0 var(--pd-score) } }
@keyframes pd-turn { 0%, 100% { box-shadow: 0 0 0 2px var(--pd-sel), 0 0 18px -6px var(--pd-sel) } 55% { box-shadow: 0 0 0 2px var(--pd-sel), 0 0 26px -2px var(--pd-sel) } }
@keyframes pd-tick { 0% { translate: 0 -4px } 64% { translate: 0 1px } 100% { translate: 0 0 } }
@keyframes pd-slotin { 0% { opacity: 0; scale: .7 } 100% { opacity: 1; scale: 1 } }
@keyframes pd-flip { 0% { rotate: y 90deg } 100% { rotate: y 0deg } }
@keyframes pd-rise { 0% { opacity: 0; translate: 0 12px } 100% { opacity: 1; translate: 0 0 } }

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

/* ── the root (phone first: 384 × 812, checked at 360 × 740) ─────────── */
.pd-root {
  --pd-pad: 8px 10px; --pd-gap: 6px; --pd-tokS: 9px; --pd-die: 26px;
  position: relative; box-sizing: border-box; overflow: hidden;
  width: 100%; height: var(--pd-phone-h, 740px); padding: var(--pd-pad);
  display: flex; flex-direction: column; gap: var(--pd-gap);
  background: var(--pd-bg); color: var(--pd-txt); font-family: var(--pd-f);
  border-radius: 22px; user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased;
}
.pd-root *, .pd-root *::before, .pd-root *::after { box-sizing: border-box; }
.pd-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; margin: 0; }
.pd-root i, .pd-root em { font-style: normal; }
.pd-panel { background: var(--pd-panel); border: var(--pd-panelBd); border-radius: var(--pd-rS); box-shadow: var(--pd-shadow); min-width: 0; }
.pd-lbl { font-size: 10px; letter-spacing: .14em; font-weight: 600; color: var(--pd-dim); white-space: nowrap; }
.pd-back { display: inline-block; flex: none; width: 6px; height: 10px; border-radius: 1px; background: var(--pd-back); border: 1px solid var(--pd-tileBd); }

/* band 1: rivals (52) over H + race (34) on a phone; one 64 row on PC */
.pd-b1 { flex: none; display: flex; flex-wrap: wrap; gap: 6px; height: 92px; align-content: flex-start; }
.pd-rivals { order: 0; flex: 0 0 100%; height: 52px; display: flex; gap: 6px; min-width: 0; }
.pd-hno { order: 1; flex: none; width: 46px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 2px; position: relative; }
.pd-hno .pd-lbl { display: none; }
.pd-hno b { font-size: 13px; font-weight: 700; }
.pd-hno b::before { content: 'H'; font-size: 10px; color: var(--pd-dim); font-weight: 600; margin-right: 1px; }
/* the phone's ☰ — the WHOLE H panel is the tap target, and the glyph shows so you know it is one. It shipped opacity 0
   (.623) and the owner's phone playtest found no way out of a game (10-03). */
.pd-hno { padding-left: 15px; }
.pd-menu { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; color: var(--pd-dim); font-size: 13px; line-height: 1; text-align: left; padding: 0 0 0 6px; border-radius: inherit; }
.pd-menu:active { background: rgba(255, 255, 255, .08); }
.pd-race { order: 2; flex: 1 1 0; height: 34px; padding: 5px 12px; display: flex; flex-direction: column; }
.pd-racehead { display: none; }

.pd-rival { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--pd-panel); border: var(--pd-panelBd); border-radius: var(--pd-rS); box-shadow: var(--pd-shadow); transition: box-shadow .14s; }
.pd-rival[data-act="1"] { box-shadow: 0 0 0 2px var(--pd-txt), 0 0 16px -4px var(--pd-pc, var(--pd-txt)); }
.pd-rival[data-s="0"] { --pd-pc: var(--pd-p0); } .pd-rival[data-s="1"] { --pd-pc: var(--pd-p1); } .pd-rival[data-s="2"] { --pd-pc: var(--pd-p2); } .pd-rival[data-s="3"] { --pd-pc: var(--pd-p3); }
.pd-av { position: relative; flex: none; width: 28px; height: 28px; }
.pd-avc { width: 100%; height: 100%; border-radius: 50%; background: var(--pd-seat); border: 1px dashed var(--pd-dim); }
.pd-avs { position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; background: var(--pd-solid); border: 1px solid var(--pd-tileBd); color: var(--pd-pc, var(--pd-p0)); font-size: 9px; line-height: 13px; text-align: center; }
/* FVB1: my card's symbol takes MY seat's colour (online I may sit anywhere; a rival card may be seat 0) */
.pd-avs[data-s="0"] { color: var(--pd-p0); } .pd-avs[data-s="1"] { color: var(--pd-p1); } .pd-avs[data-s="2"] { color: var(--pd-p2); } .pd-avs[data-s="3"] { color: var(--pd-p3); }
.pd-rvt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* PP-F5(b): the name ellipsises; the status sits on the SECOND line in its own fixed slot */
.pd-rvn { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-rvl { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--pd-dim); white-space: nowrap; }
.pd-rvl b { font-weight: 600; min-width: 14px; font-variant-numeric: tabular-nums; }
.pd-rvst { width: 30px; overflow: hidden; text-overflow: ellipsis; }
.pd-rival[data-act="1"] .pd-rvst { color: var(--pd-txt); font-weight: 700; }
.pd-score { flex: none; width: 26px; text-align: right; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-score[data-tick="1"] { animation: pd-tick .22s ease-out; }

/* the race to 61 */
.pd-track { position: relative; flex: 1 1 0; }
.pd-tick { position: absolute; top: 25%; bottom: 25%; width: 1px; background: var(--pd-line); }
.pd-tick[data-major="1"] { top: 0; bottom: 0; }
.pd-finish { position: absolute; left: calc(100% - 3px); top: -2px; bottom: -2px; width: 4px; background: repeating-linear-gradient(180deg, var(--pd-txt) 0 3px, transparent 3px 6px); }
.pd-lane { position: absolute; left: 0; right: 0; top: var(--pd-lane); height: 0; }
.pd-lline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--pd-line); }
.pd-hops { position: absolute; inset: 0; }
.pd-hop { position: absolute; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; border: 1.5px solid var(--pd-score); opacity: .7; }
.pd-tok { position: absolute; top: calc(var(--pd-tokS) / -2); width: var(--pd-tokS); height: var(--pd-tokS); font-size: var(--pd-tokS); line-height: var(--pd-tokS); text-align: center; text-shadow: 0 0 3px rgba(0, 0, 0, .85); transition: left .3s; }
.pd-tok[data-s="0"] { color: var(--pd-p0); } .pd-tok[data-s="1"] { color: var(--pd-p1); } .pd-tok[data-s="2"] { color: var(--pd-p2); } .pd-tok[data-s="3"] { color: var(--pd-p3); }

/* band 2: the board (flex) + the rail (ends pill · feed · boneyard on a phone) */
.pd-b2 { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.pd-feltwrap { position: relative; flex: 1 1 0; min-height: 0; }
.pd-felt { position: absolute; inset: 0; overflow: hidden; background: var(--pd-felt); border: var(--pd-panelBd); border-radius: var(--pd-r); box-shadow: var(--pd-shadow); touch-action: none; }
.pd-felt[data-pan="0"] { touch-action: auto; }
.pd-felt[data-pan="1"] { cursor: grab; }
.pd-plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pd-tiles, .pd-marks { position: absolute; inset: 0; }
.pd-empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--pd-dim); font-size: 13px; pointer-events: none; }
.pd-empty[data-on="1"] { display: flex; }
.pd-root[data-lock="0"] .pd-empty { color: var(--pd-sel); }
.pd-bt { position: absolute; background: var(--pd-tile); border: 1px solid var(--pd-tileBd); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .55); }
.pd-bt[data-spin="1"] { outline: 2px solid var(--pd-score); outline-offset: 1px; }
.pd-bt[data-pulse="1"] { animation: pd-pulse .9s ease-in-out; box-shadow: 0 0 0 3px var(--pd-score), 0 0 22px 2px var(--pd-score); }
.pd-bd { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pd-bd > * { flex: none; }
.pd-dief { display: flex; align-items: center; justify-content: center; background: #dcd9d0; color: #1c1d21; border-radius: 3px; font-size: 9px; }
.pd-spinbadge { position: absolute; z-index: 2; border-radius: 50%; background: var(--pd-score); color: var(--pd-scoreTxt); text-align: center; font-weight: 700; box-shadow: 0 0 0 2px var(--pd-solid); pointer-events: none; }
.pd-stub { position: absolute; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--pd-dim) 0 2px, transparent 2px 5px); opacity: .55; pointer-events: none; }
/* the open ends: dashed and quiet → LIT (solid border + glow + its resulting count) → HOV (the ghost drops in) */
.pd-slot { position: absolute; box-sizing: border-box; border: 2px dashed color-mix(in oklch, var(--pd-txt) 40%, transparent); transition: box-shadow .14s, opacity .14s, filter .14s; }
.pd-slot[data-fresh="1"] { animation: pd-slotin .32s ease-out; }
.pd-slot[data-st="lit"] { border: 2px solid var(--pd-sel); background: var(--pd-selBg); box-shadow: 0 0 0 3px color-mix(in oklch, var(--pd-sel) 30%, transparent), 0 0 16px var(--pd-sel); cursor: pointer; }
.pd-slot[data-st="hov"] { border: 2px solid var(--pd-sel); box-shadow: 0 0 0 4px color-mix(in oklch, var(--pd-sel) 45%, transparent), 0 0 26px 2px var(--pd-sel); cursor: pointer; z-index: 3; }
.pd-slot[data-st="no"] { opacity: .3; }
.pd-slot[data-st="lit"]:active { filter: brightness(.8); box-shadow: inset 0 0 0 2px var(--pd-sel); }
.pd-need, .pd-res { position: absolute; display: flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; pointer-events: none; font-variant-numeric: tabular-nums; color: var(--pd-dim); }
.pd-slot[data-st="lit"] .pd-need { color: var(--pd-txt); }
.pd-res { color: var(--pd-txt); }
.pd-ghost { position: absolute; z-index: 2; background: var(--pd-tile); border: 2px dashed var(--pd-sel); box-shadow: 0 0 18px var(--pd-sel); opacity: .85; pointer-events: none; }
.pd-gd { z-index: 2; opacity: .8; }

/* the rail on a phone: ends pill 156 · feed (flex) · boneyard 50 — one 46 row */
.pd-rail { flex: none; height: 46px; display: flex; gap: 6px; min-width: 0; }
.pd-ends { flex: none; width: 156px; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; transition: box-shadow .2s; }
.pd-ends[data-mult="1"] { box-shadow: 0 0 0 2px var(--pd-score), 0 0 22px -4px var(--pd-score); }
.pd-endshead, .pd-endsrow, .pd-endsstat, .pd-prev { display: none; }
.pd-pill { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-pilleq { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pd-mline { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pd-dim); }
.pd-mline[data-tone="sel"] { color: var(--pd-sel); }
.pd-mline[data-tone="score"] { color: var(--pd-score); }
.pd-feed { order: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 8px; overflow: hidden; }
.pd-feed > .pd-lbl { display: none; }
.pd-fl { flex: none; display: flex; align-items: center; gap: 5px; min-width: 0; height: 14px; }
.pd-fl[data-age="1"], .pd-fl[data-age="2"], .pd-fl[data-age="3"] { color: var(--pd-dim); }
#pd-f-2 { display: none; }
.pd-fg { flex: none; width: 10px; text-align: center; font-size: 9px; color: var(--pd-dim); }
.pd-fg[data-s="0"] { color: var(--pd-p0); } .pd-fg[data-s="1"] { color: var(--pd-p1); } .pd-fg[data-s="2"] { color: var(--pd-p2); } .pd-fg[data-s="3"] { color: var(--pd-p3); }
.pd-ft { flex: 1 1 0; min-width: 0; font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-fl[data-age="0"] .pd-ft { font-weight: 600; color: var(--pd-txt); }
.pd-bone { order: 2; flex: none; width: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pd-boneart { display: flex; }
.pd-boneart .pd-back { width: 10px; height: 16px; border-radius: 2px; }
.pd-boneart .pd-back + .pd-back { display: none; }
.pd-bonet { display: flex; flex-direction: column; align-items: center; }
.pd-bonet .pd-lbl { display: none; }
.pd-bonet b { font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pd-bone .pd-draw { display: none; }
/* owner playtest 1 (2026-10-02): while you MUST draw / pass, the boneyard pulses in the button colour and its tiles
   nudge (glow + transform only — never size). The button you must press also gets the shared HintArrow (allfives.js). */
@keyframes pd-must { 0%, 100% { box-shadow: 0 0 0 2px var(--pd-btnOn), 0 0 10px -2px var(--pd-btnOn) } 50% { box-shadow: 0 0 0 3px var(--pd-btnOn), 0 0 26px 2px var(--pd-btnOn) } }
@keyframes pd-nudge { 0%, 100% { translate: 0 0 } 30% { translate: 0 -3px } 60% { translate: 0 1px } }
.pd-bone[data-must="1"] { animation: pd-must 1.1s ease-in-out infinite; }
.pd-bone[data-must="1"] .pd-boneart { animation: pd-nudge 1.1s ease-in-out infinite; }
.pd-drawm[data-must="1"] { animation: pd-must 1.1s ease-in-out infinite; }

/* band 3: the hand strip (72, FIXED, one row that scrolls — PP-M1) over you + Draw (46) */
.pd-b3 { flex: none; height: 124px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.pd-handp { order: 0; flex: 0 0 100%; height: 72px; display: flex; flex-direction: column; padding: 0; background: none; border: 0; box-shadow: none; }
.pd-msgrow { display: none; }
.pd-stripwrap { position: relative; flex: 1 1 0; min-height: 0; }
.pd-strip { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.pd-strip::-webkit-scrollbar { display: none; }
/* stride 34 = 26 die + 2 pad + 2 border + 4 gap (PP-F1 — never 33.3); centred while it fits, scrolls once it does not */
.pd-stripin { display: flex; align-items: flex-end; gap: 4px; height: 100%; padding: 12px 2px 2px; width: max-content; min-width: 100%; justify-content: center; }
.pd-ht {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 1px;
  background: var(--pd-tile); border: 1px solid var(--pd-tileBd); border-radius: var(--pd-rS); outline: none;
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s, filter .14s; cursor: default; color: inherit;
}
.pd-hd { display: block; width: var(--pd-die); height: var(--pd-die); line-height: 0; }
.pd-hd > * { width: 100% !important; height: 100% !important; }
/* the swatch row F8: playable (lifted + ring) · selected (higher + double ring + ▲) · can't play (your turn: dimmest) · locked */
.pd-ht[data-st="play"] { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--pd-sel), 0 10px 18px -8px var(--pd-sel); cursor: pointer; }
.pd-ht[data-st="sel"] { transform: translateY(-9px); box-shadow: 0 0 0 2px var(--pd-txt), 0 0 0 5px var(--pd-sel), 0 14px 24px -6px var(--pd-sel); cursor: pointer; }
.pd-ht[data-st="dead"] { opacity: .4; filter: saturate(.35); cursor: not-allowed; }
.pd-ht[data-st="lock"] { opacity: .6; filter: saturate(.5); cursor: not-allowed; }
@media (hover: hover) {
  .pd-ht[data-st="play"]:hover { filter: brightness(1.15); box-shadow: 0 0 0 3px var(--pd-sel), 0 14px 24px -6px var(--pd-sel); }
  .pd-ht[data-st="sel"]:hover { filter: brightness(1.08); }
}
.pd-ht[data-st="play"]:active { transform: translateY(-1px); filter: brightness(.88); }
.pd-ht[data-st="sel"]:active { transform: translateY(-4px); filter: brightness(.9); }
.pd-tag { position: absolute; left: 50%; translate: -50% 0; bottom: -12px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--pd-sel); line-height: 1.2; white-space: nowrap; pointer-events: none; }
.pd-tag:empty { display: none; }
.pd-ht[data-new="1"] .pd-tag { bottom: auto; top: -3px; font-size: 8px; padding: 1px 4px; border-radius: 3px; background: var(--pd-score); color: var(--pd-scoreTxt); }
.pd-ht[data-new="1"] { animation: pd-flip .18s ease-out; }
.pd-you { order: 1; flex: 1 1 0; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 8px; transition: box-shadow .14s; }
.pd-you[data-act="1"] { box-shadow: 0 0 0 2px var(--pd-sel), 0 0 18px -4px var(--pd-sel); }
.pd-youtop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd-you .pd-av { width: 30px; height: 30px; }
.pd-yout { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-youn { font-size: 13px; font-weight: 600; }
.pd-youst { font-size: 12px; color: var(--pd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-you[data-act="1"] .pd-youst { color: var(--pd-sel); font-weight: 700; }
.pd-yousc { display: flex; align-items: baseline; gap: 6px; }
.pd-yousc .pd-lbl { display: none; }
.pd-you .pd-score { width: 30px; font-size: 22px; }
.pd-draw {
  flex: none; width: 112px; height: 46px; border-radius: var(--pd-rS); border: var(--pd-panelBd); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; background: var(--pd-btn); color: var(--pd-btnTxt); opacity: .4; cursor: not-allowed;
  transition: filter .12s, transform .12s, box-shadow .12s;
}
.pd-draw[data-on="1"] { opacity: 1; background: var(--pd-btnOn); color: var(--pd-btnOnTxt); cursor: pointer; box-shadow: 0 0 0 3px color-mix(in oklch, var(--pd-btnOn) 35%, transparent), 0 0 18px -2px var(--pd-btnOn); }
@media (hover: hover) { .pd-draw[data-on="1"]:hover { filter: brightness(1.12); box-shadow: 0 0 0 4px color-mix(in oklch, var(--pd-btnOn) 45%, transparent), 0 0 24px 0 var(--pd-btnOn); } }
.pd-draw[data-on="1"]:active { transform: translateY(2px); filter: brightness(.88); }
.pd-drawm { order: 2; }
/* 🌐 FVB10: while a bot holds MY seat the Draw slot is "Take my seat back" — same box, smaller words on two lines */
.pd-root .pd-draw[data-held="1"] { font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; padding: 0 6px; }
/* 🌐 a rival that left / was retired (FVB10) dims; a held one keeps its colour (it still plays) */
.pd-rival[data-gone="left"], .pd-rival[data-gone="out"] { opacity: .55; }
/* 🌐 FVB5: the tile I drew waits face down at the end of my hand until the server says what it is */
.pd-htback { background: var(--pd-back); }
.pd-htback .pd-hd { visibility: hidden; }

/* ── screen-level layers (siblings of the board, never inside it; never fixed) ── */
.pd-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.pd-flytile { position: absolute; background: var(--pd-tile); border: 1px solid var(--pd-tileBd); box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .7); }
.pd-chip { position: absolute; z-index: 22; translate: -50% -50%; min-width: 60px; height: 32px; padding: 0 12px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--pd-score); color: var(--pd-scoreTxt); font-size: 18px; font-weight: 800; box-shadow: 0 8px 24px -6px var(--pd-score), 0 0 0 3px color-mix(in oklch, var(--pd-score) 35%, transparent); }
.pd-chip { translate: none; }
.pd-flyback { position: absolute; z-index: 21; width: 20px; height: 36px; border-radius: 5px; background: var(--pd-back); border: 1px solid var(--pd-tileBd); box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .7), 0 0 0 2px var(--pd-score); }
.pd-stubfly { z-index: 21; }
.pd-callout { position: absolute; z-index: 24; width: 240px; height: 56px; display: none; flex-direction: column; justify-content: center; gap: 2px; padding: 0 14px; border-radius: 12px; background: var(--pd-btnOn); color: var(--pd-btnOnTxt); box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .7); pointer-events: none; }
.pd-callout[data-on="1"] { display: flex; }
.pd-callout span { font-size: 11px; letter-spacing: .1em; font-weight: 700; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-callout b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-callout[data-score="1"] b::before { content: '★ '; }
.pd-coarrow { position: absolute; bottom: -6px; width: 12px; height: 12px; background: var(--pd-btnOn); rotate: 45deg; }
.pd-callout[data-below="1"] .pd-coarrow { bottom: auto; top: -6px; }
.pd-scrim { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .42); opacity: 0; pointer-events: none; transition: opacity .2s; }
.pd-scrim[data-on="1"] { opacity: 1; pointer-events: auto; }
/* the reveal panel — centred by its flex wrapper, so a keyframe can never wipe the centring (predicely_scale_keyframe_trap) */
.pd-panelwrap { position: absolute; inset: 0; z-index: 31; display: flex; align-items: flex-start; justify-content: center; padding: 60px 12px 0; pointer-events: none; }
.pd-reveal { width: 100%; max-width: 560px; display: none; flex-direction: column; gap: 8px; padding: 16px; background: var(--pd-solid); border: var(--pd-panelBd); border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .8); pointer-events: auto; animation: pd-rise .3s ease-out both; }
.pd-reveal[data-on="1"] { display: flex; }
.pd-phead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pd-ptitle { font-size: 18px; font-weight: 700; }
.pd-psub { font-size: 12px; color: var(--pd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-prow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--pd-rS); background: var(--pd-panel); border: 1px solid var(--pd-line); }
.pd-prow[data-low="1"] { box-shadow: 0 0 0 2px var(--pd-score); }
.pd-psym { width: 18px; flex: none; text-align: center; color: var(--pd-pc); font-size: 14px; }
.pd-pname { width: 48px; flex: none; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-ptiles { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pd-pnone { font-size: 12px; color: var(--pd-dim); }
.pd-ppips { width: 64px; flex: none; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-prow[data-low="1"] .pd-ppips { color: var(--pd-score); }
.pd-mini { position: relative; display: inline-flex; perspective: 200px; }
.pd-minif { display: flex; gap: 1px; padding: 1px; background: var(--pd-tile); border: 1px solid var(--pd-tileBd); border-radius: 4px; line-height: 0; }
.pd-minib { position: absolute; inset: 0; border-radius: 4px; background: var(--pd-back); border: 1px solid var(--pd-tileBd); }
.pd-mini[data-up="0"] .pd-minif { visibility: hidden; }
.pd-mini[data-up="1"] .pd-minib { display: none; }
.pd-mini[data-up="1"] .pd-minif { animation: pd-flip .16s ease-out; }
.pd-pfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--pd-dim); padding-top: 4px; visibility: hidden; }
.pd-pfoot[data-on="1"] { visibility: visible; }
.pd-pchip { flex: none; font-size: 17px; font-weight: 800; color: var(--pd-scoreTxt); background: var(--pd-score); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.pd-pchip[data-none="1"] { background: var(--pd-panel); color: var(--pd-dim); font-size: 13px; }
.pd-pnext { height: 42px; border-radius: 10px; border: var(--pd-panelBd); background: var(--pd-btn); color: var(--pd-btnTxt); font-size: 15px; font-weight: 700; opacity: .5; cursor: default; transition: filter .12s, transform .12s; }
.pd-pnext[data-live="1"] { opacity: 1; background: var(--pd-btnOn); color: var(--pd-btnOnTxt); cursor: pointer; }
.pd-pnext[data-live="1"]:active { transform: translateY(2px); filter: brightness(.88); }

/* the end-screen rows — ⛔ the end screen is appended to <body>, so NO --pd-* token reaches it: literals only */
.pd-endrows { display: flex; flex-direction: column; gap: 4px; }
.pd-endrow { display: grid; grid-template-columns: 22px 1fr 60px; gap: 8px; align-items: center; font-size: 14px; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pd-endrow[data-win="1"] { font-weight: 800; font-size: 16px; }
.pd-endsym { color: var(--pd-pc); text-align: center; }
.pd-endrow b { text-align: right; font-variant-numeric: tabular-nums; }
.pd-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }
/* 🌐 FVB9 (online only): "Still held" — every hand left at the end, face up, from the over entry. Literals (body-level). */
.pd-held { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pd-heldt { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.pd-heldrow { display: grid; grid-template-columns: 22px 72px 1fr 34px; gap: 6px; align-items: center; font-size: 13px; }
.pd-heldn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-heldtiles { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.pd-heldrow b { text-align: right; font-variant-numeric: tabular-nums; }
.pd-held .pd-minif { background: #f4efe4; border-color: rgba(0, 0, 0, .35); }
.pd-held .pd-minib { display: none; }

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

/* ── PHONE chrome ───────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  #allfives-game-screen.pd-playing .wrap { padding: 0 2px; max-width: none; }
  #allfives-game-screen.pd-playing .topbar { display: none; }
  #allfives-game-screen.pd-playing.pd-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. */
  #allfives-game-screen.pd-playing:not(.pd-topbar-open) > .wrap { padding-top: env(safe-area-inset-top, 0px); }
}
/* 4 players on a narrow phone (PP-F5b): tighter chips, the tile icon dropped, the status a glyph */
@media (max-width: 999px) {
  .pd-root[data-n="4"] .pd-rival { gap: 4px; padding: 0 5px; }
  .pd-root[data-n="4"] .pd-av { width: 22px; height: 22px; }
  .pd-root[data-n="4"] .pd-rvst { width: 12px; }
  .pd-root[data-n="4"] .pd-score { width: 22px; font-size: 16px; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (1280 × 553; 593 with the chat pill — the board grows) ── */
@media (min-width: 1000px) {
  #allfives-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .pd-root {
    --pd-pad: 12px 16px 8px; --pd-gap: 10px; --pd-tokS: 12px; --pd-die: 38px;
    width: 1280px; height: var(--pd-fit-h, 553px); border-radius: var(--pd-rL);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 26px 60px -30px #000;
  }
  .pd-panel { border-radius: var(--pd-r); }
  .pd-b1 { flex-wrap: nowrap; height: 64px; gap: 12px; }
  .pd-hno { order: 0; width: 92px; height: 64px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 0 14px; }
  .pd-hno .pd-lbl { display: block; font-size: 11px; }
  .pd-hno b { font-size: 26px; line-height: 1; }
  .pd-hno b::before { content: none; }
  .pd-menu { display: none; }
  .pd-rivals { order: 1; flex: none; width: auto; height: 64px; gap: 10px; }
  .pd-rival { flex: none; width: 206px; gap: 10px; padding: 0 12px; border-radius: var(--pd-r); }
  .pd-rival[data-act="1"] { box-shadow: 0 0 0 2px var(--pd-txt), 0 0 20px -4px var(--pd-pc, var(--pd-txt)); }
  .pd-rival .pd-av { width: 38px; height: 38px; }
  .pd-avs { width: 18px; height: 18px; font-size: 11px; line-height: 16px; }
  .pd-rvt { gap: 3px; }
  .pd-rvn { font-size: 14px; }
  .pd-rvl { font-size: 12px; gap: 6px; }
  .pd-rvl .pd-back { width: 8px; height: 13px; border-radius: 2px; }
  .pd-rvst { width: 64px; }
  .pd-rival .pd-score { width: 34px; font-size: 24px; }
  .pd-race { order: 2; height: 64px; gap: 4px; padding: 8px 16px; }
  .pd-racehead { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; font-weight: 600; color: var(--pd-dim); }

  .pd-b2 { flex-direction: row; gap: 12px; }
  .pd-felt { border-radius: var(--pd-rL); }
  .pd-rail { width: 244px; height: auto; flex-direction: column; gap: 8px; }
  .pd-ends { width: auto; height: 128px; justify-content: flex-start; gap: 6px; padding: 10px 14px; border-radius: var(--pd-r); }
  .pd-endshead { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; font-weight: 600; color: var(--pd-dim); }
  .pd-endsrow { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
  .pd-endseq { width: 124px; font-size: 16px; color: var(--pd-dim); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
  .pd-endstot { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .pd-endsstat { display: block; height: 15px; font-size: 12px; color: var(--pd-dim); white-space: nowrap; }
  .pd-ends[data-mult="1"] .pd-endsstat { color: var(--pd-score); font-weight: 700; }
  .pd-prev { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--pd-line); min-width: 0; }
  .pd-prevA { font-size: 10px; letter-spacing: .12em; font-weight: 600; color: var(--pd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-prevB { font-size: 13px; color: var(--pd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-prevB[data-on="1"] { color: var(--pd-sel); font-weight: 700; }
  .pd-pill { display: none; }
  .pd-bone { order: 1; width: auto; height: 76px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px 0 14px; }
  .pd-boneart { position: relative; width: 30px; height: 40px; flex: none; }
  .pd-boneart .pd-back { position: absolute; width: 22px; height: 36px; border-radius: 4px; }
  .pd-boneart .pd-back:first-child { left: 8px; top: 0; }
  .pd-boneart .pd-back + .pd-back { display: block; left: 0; top: 4px; box-shadow: 2px 0 0 rgba(0, 0, 0, .25); }
  .pd-bonet { flex: 1 1 0; align-items: flex-start; gap: 3px; }
  .pd-bonet .pd-lbl { display: block; font-size: 11px; }
  .pd-bonet b { font-size: 24px; }
  .pd-bone .pd-draw { display: flex; width: 88px; height: 40px; font-size: 15px; }
  .pd-feed { order: 2; flex: 1 1 0; justify-content: flex-start; gap: 5px; padding: 9px 14px; border-radius: var(--pd-r); }
  .pd-feed > .pd-lbl { display: block; font-size: 11px; }
  #pd-f-2 { display: flex; }
  .pd-fl { height: 16px; }
  .pd-ft { font-size: 12.5px; line-height: 16px; }

  .pd-b3 { flex-wrap: nowrap; height: 136px; gap: 12px; }
  .pd-you { order: 0; flex: none; width: 184px; height: 136px; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 12px 14px; border-radius: var(--pd-r); }
  .pd-you[data-act="1"] { box-shadow: 0 0 0 2px var(--pd-sel), 0 0 22px -4px var(--pd-sel); }
  .pd-youtop { gap: 10px; }
  .pd-you .pd-av { width: 44px; height: 44px; }
  .pd-youn { font-size: 15px; }
  .pd-yousc { justify-content: space-between; }
  .pd-yousc .pd-lbl { display: block; font-size: 11px; }
  .pd-you .pd-score { width: 64px; font-size: 34px; line-height: 1; }   /* sized for "61+" — never auto (locked layout) */
  .pd-handp { order: 1; flex: 1 1 0; height: 136px; gap: 6px; padding: 8px 14px; background: var(--pd-panel); border: var(--pd-panelBd); border-radius: var(--pd-r); box-shadow: var(--pd-shadow); }
  .pd-msgrow { display: flex; height: 18px; flex: none; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; white-space: nowrap; }
  .pd-msg { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pd-dim); }
  .pd-msg[data-on="1"] { color: var(--pd-sel); font-weight: 600; }
  .pd-hinfo { flex: none; color: var(--pd-dim); }
  /* PC: 21 tiles fit the row (1024 / 48) and the biggest hand measured is 19 (allfives-sim facts), so the PC row never
     scrolls — it stays overflow:visible, so the 12 px lift and the ▲ under a selected tile are never clipped (EdgeHints
     stays attached and simply never fires) */
  .pd-strip { overflow: visible; }
  .pd-stripin { gap: 6px; padding: 0 2px 4px; justify-content: flex-start; align-items: flex-end; }
  .pd-ht[data-st="play"] { transform: translateY(-8px); }
  .pd-ht[data-st="sel"] { transform: translateY(-12px); }
  .pd-ht[data-st="play"]:active { transform: translateY(-3px); }
  .pd-ht[data-st="sel"]:active { transform: translateY(-7px); }
  .pd-drawm { display: none; }
  .pd-chip { height: 40px; min-width: 76px; font-size: 22px; }
  .pd-flyback { width: 30px; height: 54px; }
  .pd-panelwrap { padding-top: 96px; }
  .pd-ptitle { font-size: 22px; }
  .pd-pname { width: 64px; }
  .pd-ppips { width: 78px; font-size: 15px; }
  .pd-pchip { font-size: 20px; }
}