/* frontend/yahtzee.css — Yahtzee's board, rebuilt to the owner's variant C (old-games overhaul 2c item 5,
   owner 2026-10-11: "C", from the mock page yahtzee-redesign-preview.html).

   PC (≥ 1000 px, BoardFit's BP): a horizontal score SHEET (a player per ROW, its seat card the row head,
   the 15 boxes + Total as columns, die faces over the upper six; solo = two strips) with the DICE BAND
   UNDER it (turn + message · the dice · Roll, bottom right, nearest the chat bar). At 2–3 seats the rows
   GROW to fill the four-row height (the mock's build note: no gap between the table and the band).
   ⭐ Owner's add-on (same day): at exactly 2 players on PC a ⇄ key flips the board to the RAIL view
   (variant A: seat cards + the felt tray + Roll in a 320 px rail beside the split score pad). It is the
   SAME design box as the sheet (1184 × the registry h), so the toggle never changes what BoardFit scales.
   Phone (both modes): variant A's phone, a viewport-tall column: the seats in ONE row of chips, the card
   full width (its rows share the free height), the tray (a two-line message + the dice in one row), Roll.

   Its own file for the same reason as liars-dice.css / ur.css: loads AFTER style.css, NEW class names
   (`yz-*`), so style.css's old `.yzr-split` / `.yzr-rail` / `.yzr-scorecard` / `.yzr-grid` / `.yzr-pcard`
   rules match nothing any more. ✅ Pruned from style.css at .809 (2026-10-13).
   ⭐ KEPT on purpose: the screen chrome `.yzr-root` + `.yzr-content` (topbar column + scroll body). They
   are not layout: chat.css hangs Yahtzee's chat reservation on `.yzr-content` (three states), style.css
   resets `.bf-fit .yzr-root { min-height: 0 }`, and flashWin / shakeCard / the bet + confirm blur name them.

   ⛔ The BoardFit traps (docs/ui-components.md § "PC fit"): no vh / dvh inside the fit target (`.yz-board`;
   the phone column's dvh is on the SCREEN, outside it), no position: fixed / sticky anywhere, every row
   that can be empty (the dice before a roll, a HOLD caption, the message) is a fixed box, and every text
   row has a fixed line box (a lazily loaded font weight must not move the box). */

/* ── Chrome: the shell, both sizes ──────────────────────────────────────────────────────────────── */
/* The Arcade cabinet is 560 px for the phone column; a fitted PC board is ~1184 wide, so the cabinet
   lifts its cap there (BoardFit centres the board in this parent either way). */
.bf-fit .yz-shell { max-width: none; }

/* ── Phone: a viewport-tall column; the card takes the free height ────────────────────────────────
   The screen is the column (min-height 100dvh, border-box, so chat.css's reservation — solo's padding on
   the SCREEN, online's on `.yzr-content` — is INSIDE it, not added: today's solo page scrolled exactly
   that 84 px). No fixed / sticky: Roll is just the column's last row. */
#yahtzee-game-screen.yz-phone, #yahtzee-mp-game-screen.yz-phone { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; }
.yz-phone > .yzr-root { flex: 1 1 auto; min-height: 0; }
.yz-phone .yzr-content { flex: 1 1 auto; gap: 0; padding-top: 8px; padding-left: 12px; padding-right: 12px; }
#yahtzee-game-screen.yz-phone .yzr-content { padding-bottom: 0; }   /* solo's reservation is on the screen */
.yz-phone .yz-shell { flex: 1 1 auto; }

/* ── The online idle bar FLOATS (yahtzee_mp.js passes barClass 'mp-timeout-float') ─────────────────
   It comes and goes on a timer. In flow, under the board, it scrolled the PC page 13–15 px and on a
   phone took 32–43 px off the card's rows and moved Roll (measured 2026-10-11). Out of flow it moves
   nothing. ⭐ Anchored to the MP content box (not `.yzr-content`: solo shares that class), a SIBLING
   of the fit target, so it is never scaled. A pill centred at the top: on PC it sits over the sheet's
   top edge (the die-face heads, between the ⇄ key's corner and the Total column), on a phone over the
   seat chips under the topbar. Never over Roll, the dice or a score pill. Without the anchor the
   nearest positioned ancestor is the page, and the bar lands on the topbar. */
#yahtzee-mp-content { position: relative; }
#yahtzee-mp-timeout-bar.mp-timeout-float { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); }

/* ── The board root ─────────────────────────────────────────────────────────────────────────────── */
.yz-board { box-sizing: border-box; font-family: var(--pgr-font, 'Outfit', system-ui, sans-serif); color: var(--pgr-txt, #e9e8e4); }
.yz-board *, .yz-board *::before, .yz-board *::after { box-sizing: border-box; }
.yz-pc { display: flex; flex-direction: column; gap: 14px; --pgr-vh: 6.37px; }   /* (.762, belt and braces: nothing here reads vh) */
.yz-pc.yz-online { width: 1184px; }
.yz-pc.yz-solo { width: 1100px; }
.yz-ph { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 0; }

/* ── Seat cards (every layout) ──────────────────────────────────────────────────────────────────────
   Avatar (the pal face), name + note, the running total. The turn ring is an INSET shadow, never a
   thicker border (that narrows the content box). The border carries the vanity colour (--pid-bd). */
.yz-seat {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  height: 52px; padding: 0 12px 0 8px; border-radius: 14px;
  background: var(--pgr-seat, rgba(255,255,255,.025));
  border: 1px solid var(--pid-bd, var(--pgr-line, rgba(255,255,255,.075)));
}
.yz-seat.me { background: var(--pgr-panel, rgba(255,255,255,.04)); }
.yz-seat.is-turn { box-shadow: inset 0 0 0 1.5px var(--pgr-sel, #1D9E75), 0 10px 26px -14px var(--pgr-sel, #1D9E75); }
.yz-seat.dnf { opacity: .5; }
.yz-av {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1; background: var(--pgr-panel, rgba(255,255,255,.04)); border: 1px solid var(--pgr-line, rgba(255,255,255,.075));
}
.yz-av .face-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.yz-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yz-name { display: block; height: 20px; line-height: 20px; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-seat.me .yz-name { color: var(--pgr-sel, #1D9E75); }
.yz-note { display: block; height: 16px; line-height: 16px; font-size: 12.5px; color: var(--pgr-dim, #83858b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-tot { flex: none; height: 30px; line-height: 30px; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pgr-dim, #83858b); }
.yz-seat.me .yz-tot { color: var(--pgr-txt, #e9e8e4); }
.yz-seat.is-turn .yz-tot { color: var(--pgr-sel, #1D9E75); }
/* The pal's line (solo): under the seat card's head on PC, in place of the note on a phone. */
.yz-say { display: none; }
/* The scoring glows (box-shadow only, so the themed border is never repainted grey). */
@keyframes yz-glow-good  { 0%, 100% { box-shadow: none; } 15%, 65% { box-shadow: 0 0 16px 4px #1D9E75; } }
@keyframes yz-glow-great { 0%, 100% { box-shadow: none; } 15%, 65% { box-shadow: 0 0 22px 6px #f0a500; } }
@keyframes yz-glow-bad   { 0%, 100% { box-shadow: none; } 15%, 65% { box-shadow: 0 0 16px 4px #E24B4A; } }
.yz-seat.yz-glow-good  { animation: yz-glow-good 1.8s ease-out; }
.yz-seat.yz-glow-great { animation: yz-glow-great 2.2s ease-out; }
.yz-seat.yz-glow-bad   { animation: yz-glow-bad 1.8s ease-out; }
.yz-seat .speech-bubble { font-size: 15px; padding: 8px 13px; }

/* ── A name too long for its box: the endless marquee — marquee.css (shared with Shut the Box). */

/* ── The dice: each slot a FIXED box (die + its HOLD caption) ─────────────────────────────────────
   ⛔ DieRenderer.roll owns the container while it tumbles and paints BARE dice (no caption), so the
   bare die reserves the caption's 15 px itself (today's `.yzr-dice > .dr-die` precedent). */
.yz-dice { display: flex; justify-content: center; align-items: flex-start; gap: 8px; height: calc(var(--die, 52px) + 15px); }
.yz-slot { flex: none; display: flex; flex-direction: column; align-items: center; width: var(--die, 52px); height: calc(var(--die, 52px) + 15px); padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.yz-slot:disabled { cursor: default; }
.yz-slot.is-ghost { opacity: .26; }
.yz-die { display: block; width: var(--die, 52px); height: var(--die, 52px); border-radius: 22%; transition: box-shadow .2s; }
.yz-slot.held .yz-die { box-shadow: 0 0 0 3px var(--pgr-selBg, rgba(29,158,117,.28)); }
.yz-hold { display: block; height: 15px; line-height: 15px; font-size: 9px; font-weight: 800; letter-spacing: .16em; color: var(--pgr-sel, #1D9E75); }
.yz-dice > .dr-die, .yz-dice > .dr-wrap { margin-bottom: 15px; }
/* The cup changing hands (online): one flip of the tray, transform only. */
.yz-tray.yz-flipin { animation: yz-cardflip .42s cubic-bezier(.34,1.05,.55,1) both; transform-origin: 50% 50%; backface-visibility: hidden; }
@keyframes yz-cardflip {
  0%   { transform: perspective(700px) rotateY(-88deg) scale(.94); opacity: .25; }
  60%  { transform: perspective(700px) rotateY(8deg)   scale(1.01); opacity: 1; }
  100% { transform: perspective(700px) rotateY(0deg)   scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .yz-tray.yz-flipin { animation: none; } }

/* The felt tray: what you touch every turn. */
.yz-tray {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0;
  padding: 12px 14px; border-radius: 16px;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--pgr-sel, #1D9E75) 9%, var(--pgr-panel, #1b1d22)) 0%, var(--pgr-panel, #17191d) 70%);
  border: 1px solid var(--pgr-line, rgba(255,255,255,.075));
}
.yz-head { height: 18px; line-height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pgr-dim, #83858b); white-space: nowrap; }
.yz-head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.yz-pips { flex: none; display: inline-flex; gap: 5px; }
.yz-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--pgr-dim, #83858b); }
.yz-pips i.on { background: var(--pgr-sel, #1D9E75); border-color: var(--pgr-sel, #1D9E75); }
/* The message: TWO fixed lines (the longest, the +100 bonus line, needs both on a phone). */
.yz-msg { height: 38px; line-height: 19px; font-size: 14.5px; color: var(--pgr-dim, #83858b); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.yz-msg b { color: var(--pgr-txt, #e9e8e4); font-weight: 700; }
.yz-msg b:empty { display: none; }
.yz-msg b:not(:empty)::after { content: ' · '; color: var(--pgr-dim, #83858b); font-weight: 400; }
.yz-board .yz-roll { flex: none; width: 100%; height: 62px; font-size: 18px; }

/* ── The vertical score pad (the rail view, and every phone) ──────────────────────────────────────
   A label column that absorbs the width, then a FIXED column per seat (--col), so a long name never
   widens anything. Locked rows: fixed heights. */
.yz-card {
  min-width: 0; border-radius: 16px; padding: 12px 16px;
  background: var(--pgr-seat, rgba(255,255,255,.025)); border: 1px solid var(--pgr-line, rgba(255,255,255,.075));
  --col: 76px; --row: 38px; --lab: 16px; --val: 16px;
}
.yz-card-split { display: flex; align-items: flex-start; gap: 22px; }
.yz-grid { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n), var(--col)); grid-auto-rows: var(--row); align-items: stretch; }
.yz-h0, .yz-h { height: 28px; display: flex; align-items: flex-end; padding-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--pgr-dim, #83858b); }
.yz-h { justify-content: center; letter-spacing: 0; font-size: 13px; font-weight: 600; min-width: 0; padding-left: 4px; padding-right: 4px; }
.yz-hn { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; height: 16px; }
.yz-h.me { color: var(--pgr-sel, #1D9E75); font-weight: 800; }
.yz-h.turn .yz-hn { box-shadow: inset 0 -2px 0 var(--pgr-sel, #1D9E75); }
.yz-rl { display: flex; align-items: center; min-width: 0; padding-right: 8px; border-bottom: 1px solid var(--pgr-line, rgba(255,255,255,.075)); font-size: var(--lab); font-weight: 500; color: var(--pgr-txt, #e9e8e4); }
.yz-rl.meta { color: var(--pgr-dim, #83858b); font-size: calc(var(--lab) - 2px); }
.yz-rlt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.yz-v { display: flex; align-items: center; justify-content: center; min-width: 0; border-bottom: 1px solid var(--pgr-line, rgba(255,255,255,.075)); border-left: 1px solid var(--pgr-line, rgba(255,255,255,.075)); font-size: var(--val); font-variant-numeric: tabular-nums; color: var(--pgr-dim, #83858b); line-height: 1; }
.yz-v.me { color: var(--pgr-txt, #e9e8e4); font-weight: 650; background: color-mix(in srgb, var(--pgr-sel, #1D9E75) 6%, transparent); }
.yz-v.empty { opacity: .45; }
.yz-v.meta { font-size: calc(var(--val) - 2px); }
.yz-v.meta small, .yz-sv.meta small { font-size: .75em; opacity: .7; }
.yz-v.ok, .yz-sv.ok { color: var(--pgr-sel, #1D9E75); font-weight: 800; }
.yz-tl, .yz-t { height: 44px; display: flex; align-items: center; font-weight: 800; }
.yz-tl { font-size: calc(var(--lab) + 2px); }
.yz-t { justify-content: center; font-size: calc(var(--val) + 8px); font-variant-numeric: tabular-nums; color: var(--pgr-dim, #83858b); border-left: 1px solid var(--pgr-line, rgba(255,255,255,.075)); }
.yz-t.me { color: var(--pgr-sel, #1D9E75); }

/* The score pill: a scorable empty box on your turn. Never taller than its row. */
.yz-sb {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px; white-space: nowrap;
  height: calc(var(--row, 38px) - 12px); padding: 0 9px; border-radius: 999px; line-height: 1;
  background: var(--pgr-selBg, rgba(29,158,117,.16)); color: var(--pgr-sel, #1D9E75); border: 1px solid var(--pgr-sel, #1D9E75);
  font-family: var(--pgr-font, inherit); font-size: calc(var(--val, 16px) - 2px); font-weight: 700; cursor: pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
@media (hover: hover) { .yz-sb:hover:not(:disabled) { transform: scale(1.08); } }
.yz-sb:active:not(:disabled) { transform: scale(.91); }
.yz-sb:disabled { opacity: .5; cursor: default; }
.yz-sb-bonus { font-size: .78em; opacity: .85; }

/* ── PC · the SHEET (variant C, online) ───────────────────────────────────────────────────────────
   ONE height at 2, 3 and 4 seats: the header row + the rows share 4 × 56 px, so 2 seats get two TALL
   rows rather than two rows and a gap (the mock's build note). */
.yz-sheet-grid {
  border-radius: 16px; padding: 8px 14px 10px;
  background: var(--pgr-seat, rgba(255,255,255,.025)); border: 1px solid var(--pgr-line, rgba(255,255,255,.075));
  display: grid; grid-template-columns: 210px repeat(15, 58px) 74px;
  grid-template-rows: 62px repeat(var(--n), minmax(0, 1fr));
  height: calc(62px + 4 * 56px + 18px);
}
.yz-srow { display: contents; }
.yz-sh0 { display: flex; align-items: center; padding-right: 10px; border-bottom: 1px solid var(--pgr-line, rgba(255,255,255,.075)); }
.yz-sh { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 0 2px 7px; border-bottom: 1px solid var(--pgr-line, rgba(255,255,255,.075)); text-align: center; }
.yz-sh b { display: block; font-size: 13px; line-height: 14px; font-weight: 600; color: var(--pgr-txt, #e9e8e4); }
.yz-sh.up b { color: var(--pgr-dim, #83858b); font-weight: 500; font-size: 12px; }
.yz-sh.meta b { color: var(--pgr-dim, #83858b); }
.yz-sh.tot b { font-size: 14px; font-weight: 800; }
.yz-sh .dr-die { flex: none; }
.yz-sv { display: flex; align-items: center; justify-content: center; min-width: 0; border-bottom: 1px solid var(--pgr-line, rgba(255,255,255,.075)); font-size: 19px; font-variant-numeric: tabular-nums; color: var(--pgr-dim, #83858b); line-height: 1; }
.yz-sv.gs, .yz-sh.gs { border-left: 2px solid var(--pgr-line, rgba(255,255,255,.12)); }
.yz-sv.me { color: var(--pgr-txt, #e9e8e4); font-weight: 650; background: color-mix(in srgb, var(--pgr-sel, #1D9E75) 7%, transparent); }
.yz-sv.empty { opacity: .4; }
.yz-sv.meta { font-size: 16px; }
.yz-sv.tot { font-size: 24px; font-weight: 800; }
.yz-sv.tot.me { color: var(--pgr-sel, #1D9E75); }
.yz-sheet-grid .yz-sb { height: 26px; padding: 0 8px; font-size: 14px; }
.yz-srow .yz-seat { align-self: center; height: 48px; margin: 0 10px 0 0; padding: 0 10px 0 6px; }
.yz-srow .yz-seat .yz-av { width: 32px; height: 32px; font-size: 19px; }
.yz-srow .yz-seat .yz-tot { display: none; }            /* the Total column ends the row */
.yz-srow.is-turn > .yz-sv { box-shadow: inset 0 1.5px 0 var(--pgr-sel, #1D9E75), inset 0 -1.5px 0 var(--pgr-sel, #1D9E75); }
/* The ⇄ view key (2 players, PC only) lives in the sheet's empty corner cell. */
.yz-view {
  height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--pgr-line, rgba(255,255,255,.12)); background: var(--pgr-panel, rgba(255,255,255,.04));
  color: var(--pgr-dim, #83858b); font-family: var(--pgr-font, inherit); font-size: 13px; font-weight: 700; line-height: 1;
  transition: transform .13s cubic-bezier(.34,1.56,.64,1), color .13s, border-color .13s;
}
@media (hover: hover) { .yz-view:hover { color: var(--pgr-txt, #e9e8e4); border-color: var(--pgr-sel, #1D9E75); transform: translateY(-1px); } }
.yz-view:active { transform: scale(.95); }

/* The solo sheet: two strips (upper, then lower + Total), wide tall cells. */
.yz-sheet-solo { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--pgr-seat, rgba(255,255,255,.025)); border: 1px solid var(--pgr-line, rgba(255,255,255,.075)); }
.yz-strip { display: grid; grid-template-columns: 96px repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: 60px 62px; }
.yz-sname { display: flex; align-items: center; border-bottom: 1px solid var(--pgr-line, rgba(255,255,255,.075)); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pgr-dim, #83858b); }
.yz-sname.you { color: var(--pgr-sel, #1D9E75); font-size: 15px; letter-spacing: 0; text-transform: none; }
.yz-strip .yz-sh { border-left: 1px solid var(--pgr-line, rgba(255,255,255,.075)); }
.yz-strip .yz-sh b { font-size: 13.5px; line-height: 15px; }
.yz-strip .yz-sv { font-size: 24px; border-left: 1px solid var(--pgr-line, rgba(255,255,255,.075)); }
.yz-strip .yz-sv.tot { font-size: 30px; }
.yz-strip .yz-sb { height: 32px; padding: 0 14px; font-size: 17px; }

/* ── PC · the dice BAND, under the sheet ──────────────────────────────────────────────────────────── */
.yz-band { display: flex; align-items: stretch; gap: 14px; height: 128px; }
.yz-solo .yz-band { height: 142px; }
.yz-turnbox { flex: 0 0 260px; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--pgr-seat, rgba(255,255,255,.025)); border: 1px solid var(--pgr-line, rgba(255,255,255,.075)); }
.yz-band .yz-tray { flex: 1 1 auto; align-items: center; }
.yz-band .yz-tray .yz-head { align-self: stretch; }
.yz-band .yz-dice { gap: 12px; }
.yz-solo .yz-band .yz-tray { gap: 4px; padding-top: 8px; padding-bottom: 6px; }
.yz-solo .yz-band .yz-msg { height: 19px; -webkit-line-clamp: 1; text-align: center; }
.yz-band .yz-roll { flex: 0 0 230px; width: 230px; align-self: center; }
/* The solo seat card in the band: name, note, then the pal's line (three fixed lines) under them. */
.yz-band .yz-seat { flex: 0 0 260px; height: auto; padding: 12px 14px 12px 10px; }
.yz-band .yz-say { display: -webkit-box; height: 51px; line-height: 17px; margin-top: 4px; font-size: 13px; color: var(--pgr-dim, #83858b); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* ── PC · the RAIL view (2 players, the ⇄ key): A's rail beside the split pad, the same box ──────── */
.yz-pc.yz-rail { flex-direction: row; align-items: stretch; gap: 18px; }
.yz-rail .yz-railcol { flex: 0 0 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.yz-rail .yz-seats-col { display: flex; flex-direction: column; gap: 8px; }
.yz-rail .yz-railcol .yz-tray { flex: 1 1 auto; }
.yz-rail .yz-card { flex: 1 1 auto; --col: 104px; --row: 41px; display: flex; flex-direction: column; }
.yz-rail .yz-card-split { flex: 1 1 auto; }
.yz-rail .yz-viewrow { flex: none; height: 34px; display: flex; justify-content: center; }

/* ── Phones (both modes): the seats as one row of equal chips ─────────────────────────────────────── */
.yz-ph .yz-seats-row { flex: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.yz-ph .yz-seat { height: 46px; gap: 6px; padding: 0 8px 0 5px; border-radius: 12px; }
.yz-ph .yz-av { width: 28px; height: 28px; font-size: 16px; }
.yz-ph .yz-name { height: 17px; line-height: 17px; font-size: 13.5px; }
.yz-ph .yz-note { height: 14px; line-height: 14px; font-size: 11px; }
.yz-ph .yz-tot { height: 24px; line-height: 24px; font-size: 19px; }
.yz-ph .yz-say { height: 14px; line-height: 14px; font-size: 11px; color: var(--pgr-dim, #83858b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-ph .yz-say:not(:empty) { display: block; }
.yz-ph .yz-meta:has(.yz-say:not(:empty)) .yz-note { display: none; }
/* 3–4 chips across a phone: no room for the note; at 4 the total goes UNDER the name (no avatar). */
.yz-ph.yz-n3 .yz-note, .yz-ph.yz-n4 .yz-note { display: none; }
.yz-ph.yz-n4 .yz-seat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 17px 22px; align-content: center; gap: 0; padding: 0 8px; }
.yz-ph.yz-n4 .yz-av { display: none; }
.yz-ph.yz-n4 .yz-name { font-size: 12.5px; }
.yz-ph.yz-n4 .yz-tot { height: 22px; line-height: 22px; font-size: 17px; }
.yz-ph .yz-seat .speech-bubble { font-size: 12.5px; padding: 6px 10px; }

/* The phone card: ONE grid, the rows share whatever height the column leaves (1fr), with an 18 px floor
   so a very short viewport scrolls the page rather than overlapping rows. The card's own floor is that
   grid's (24 + 15 × 18 + 30 + 10 padding + 2 border = 336), stated: left to `auto`, it was the rows'
   max-content (a 19 px Arcade pill row) and the 360 column came out 1 px too tall. */
.yz-ph .yz-card { flex: 1 1 0; display: flex; padding: 6px 10px 4px; min-height: 336px; --lab: 13px; --val: 13.5px; --col: 46px; }
.yz-ph.yz-n1 .yz-card { --col: 84px; }
.yz-ph.yz-n2 .yz-card { --col: 70px; }
.yz-ph.yz-n3 .yz-card { --col: 56px; }
.yz-ph .yz-grid { height: 100%; grid-template-rows: 24px repeat(15, minmax(18px, 1fr)) 30px; grid-auto-rows: auto; }
/* A cell's content never sets its row's floor (Arcade's font measured a 19 px pill row at 360, 1 px of scroll): the 18 px
   floor above does. */
.yz-ph .yz-grid > * { min-height: 0; overflow: hidden; }
.yz-ph .yz-h0, .yz-ph .yz-h { height: 24px; padding-bottom: 4px; font-size: 11.5px; }
.yz-ph .yz-tl, .yz-ph .yz-t { height: 30px; }
.yz-ph .yz-t { font-size: 18px; }
.yz-ph .yz-sb { height: 18px; padding: 0 7px; font-size: 11.5px; }
.yz-ph .yz-tray { flex: none; padding: 7px 10px 2px; gap: 5px; border-radius: 14px; }
.yz-ph .yz-tray .yz-head { height: 32px; line-height: 16px; align-items: flex-start; letter-spacing: 0; text-transform: none; font-weight: 500; }
.yz-ph .yz-tray .yz-head .yz-msg { flex: 1 1 auto; height: 32px; line-height: 16px; font-size: 12.5px; color: var(--pgr-txt, #e9e8e4); white-space: normal; }
.yz-ph .yz-tray .yz-head .yz-pips { margin-top: 4px; }
.yz-board.yz-ph .yz-roll { height: 54px; font-size: 17px; }