/* frontend/lineup.css — LINE UP board, both layouts.
 *
 * ⛔ ITS OWN FILE, NOT A BLOCK IN style.css — the Skewers / Cee-lo / Toad Toss precedent: a board
 * suite that slices its block out of style.css breaks on someone else's append.
 *
 * ── Colour is data ──────────────────────────────────────────────────────────
 * Every colour is a variable lifted from the mock's palette block (docs/design/Batch 5/Line up.html,
 * `--lu-*` on body). ⛔ THE SCREEN CARRIES THE PALETTE, NOT ONLY THE BOARD: the setup card sits
 * outside `.lu-root`, and a var() fallback is not a scope.
 *
 * ── 🎨 THE PIXEL SKIN COMES LATER, AS A TOGGLE (mock F11) ─────────────────────
 * Radii and fonts are VARIABLES (`--lu-r*`, `--lu-font*`) so the pixel direction is a class that
 * redefines them and NOTHING ELSE — a skin may change colour, radius, shadow and font; it may not
 * move a box.
 *
 * ── ⭐ LOCKED LAYOUT ────────────────────────────────────────────────────────
 * Every slot has a FIXED size in every phase — the BOARD is the one flexible element (the mock: "the
 * board is the only element that absorbs the freed height"). It is sized by CONTAINER QUERY units:
 * `.lu-boardwrap` is the container, the board is min(width, height) of it, and the cells size their
 * type from the board. Every highlight keeps the SAME border width as a plain cell; feedback changes
 * colour, glow or a transform — never size.
 */

#lineup-game-screen, .lu-root {
  --lu-page: #0a0b10; --lu-ink: #eceef4; --lu-dim: #959db2; --lu-dim2: #626a80; --lu-note: #7b8398;
  --lu-shell: #0d0f17; --lu-shell2: #090b11; --lu-board: #131727; --lu-cell: #1b2132; --lu-cell2: #161b29;
  --lu-panel: #171c2a; --lu-panel2: #121623; --lu-line: #2a3247; --lu-line2: #3c4762;
  --lu-amber: #f0a83c; --lu-amber-t: #2a1c04;
  --lu-wild: #8fd3ff; --lu-rem: #ea6d5c; --lu-win: #74dfa2;
  --lu-p1: #f3f6fc; --lu-p2: #79d2c0; --lu-p3: #9fc0ff; --lu-p4: #d3a6f5;
  --lu-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lu-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --lu-r1: 4px; --lu-r2: 8px; --lu-r3: 14px; --lu-rp: 999px;
  /* the third seat's chip (LU5): a TRIANGLE ring as a mask — the stroke is opaque, the fill 17%, the same
     ink-and-tint the disc and diamond get from border + background */
  --lu-tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 7 L94 91 L6 91 Z' fill='%23000' fill-opacity='.17' stroke='%23000' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lu-trig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 7 L94 91 L6 91 Z' fill='none' stroke='%23000' stroke-width='6' stroke-dasharray='12 8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes lu-legal { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 168, 60, .42), 0 0 16px -6px rgba(240, 168, 60, .8) } 55% { box-shadow: 0 0 0 5px rgba(240, 168, 60, 0), 0 0 22px -4px rgba(240, 168, 60, .95) } }
@keyframes lu-rem   { 0%, 100% { box-shadow: 0 0 0 0 rgba(234, 109, 92, .45), 0 0 16px -6px rgba(234, 109, 92, .75) } 55% { box-shadow: 0 0 0 5px rgba(234, 109, 92, 0), 0 0 22px -4px rgba(234, 109, 92, .9) } }
@keyframes lu-wildb { 0%, 100% { opacity: .62 } 50% { opacity: 1 } }
@keyframes lu-win   { 0%, 100% { box-shadow: 0 0 0 0 rgba(116, 223, 162, .5), 0 0 18px -8px rgba(116, 223, 162, .8) } 50% { box-shadow: 0 0 0 6px rgba(116, 223, 162, 0), 0 0 30px -2px rgba(116, 223, 162, 1) } }
@keyframes lu-winon { from { background: var(--lu-cell); border-color: var(--lu-line) } to { background: color-mix(in srgb, var(--lu-win) 20%, var(--lu-cell)); border-color: var(--lu-win) } }
@keyframes lu-drop  { 0% { transform: translateY(-34%) var(--lu-rot, rotate(0)); opacity: 0 } 62% { transform: translateY(2%) var(--lu-rot, rotate(0)); opacity: 1 } 100% { transform: translateY(0) var(--lu-rot, rotate(0)); opacity: 1 } }
@keyframes lu-knock { 0% { transform: translate(-50%, -50%) rotate(0); opacity: 1 } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0 } }
@keyframes lu-ghost { 0%, 100% { opacity: .3 } 50% { opacity: .9 } }
@keyframes lu-pulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes lu-rise  { 0% { opacity: 0; transform: translateY(10px) } 100% { opacity: 1; transform: translateY(0) } }

/* ── setup card (the app's own surface) ─────────────────────────────────── */
.lu-setup-card { max-width: 520px; margin: 1rem auto; display: flex; flex-direction: column; gap: 10px; }
.lu-setup-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.lu-setup-title { margin: 0; font-size: 28px; }
.lu-setup-blurb, .lu-setup-hint { margin: 0; line-height: 1.5; font-size: 14px; }
.lu-setup-hint { opacity: .75; font-size: 13px; }
.lu-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lu-setup-lab { font-weight: 700; font-size: 13px; width: 64px; }
.lu-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.lu-opt { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
@media (hover: hover) { .lu-opt:hover { border-color: var(--lu-amber); } }
.lu-opt[data-on="1"] { background: var(--lu-amber); border-color: var(--lu-amber); color: var(--lu-amber-t); }
.lu-start { height: 48px; border: 0; border-radius: 12px; background: var(--lu-amber); color: var(--lu-amber-t); font-weight: 800; font-size: 16px; cursor: pointer; }
.lu-start:hover { filter: brightness(1.08); }

/* ── the board root (phone first: the mock's 384 × 812 arrangement) ─────── */
.lu-root {
  --lu-padX: 10px; --lu-padY: 10px; --lu-g: 8px; --lu-headH: 34px; --lu-lblH: 13px; --lu-cardH: 46px; --lu-av: 24px;
  --lu-die: 54px; --lu-callH: 48px; --lu-legH: 16px; --lu-rollH: 52px; --lu-railG: 6px;
  --lu-fLbl: 8px; --lu-fName: 11px; --lu-fCall: 16px; --lu-fSub: 8px; --lu-fTot: 26px; --lu-fRoll: 14px;
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--lu-g); overflow: hidden;
  width: 100%; height: var(--lu-phone-h, 700px); padding: var(--lu-padY) var(--lu-padX);
  background: linear-gradient(180deg, #101320, #0a0c13); color: var(--lu-ink); font-family: var(--lu-font);
  border-radius: var(--lu-r3); box-shadow: inset 0 0 0 1px var(--lu-line);
}
.lu-root *, .lu-root *::before, .lu-root *::after { box-sizing: border-box; }
.lu-root button { -webkit-tap-highlight-color: transparent; font-family: var(--lu-font); }
.lu-root i, .lu-root em { font-style: normal; }

/* top bar — never wraps */
.lu-head { flex: none; height: var(--lu-headH); display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.lu-brand { flex: none; display: flex; align-items: center; gap: 7px; font-family: var(--lu-mono); font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.lu-brand i { flex: none; width: 10px; height: 10px; background: var(--lu-amber); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.lu-stats { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; overflow: hidden; }
.lu-stat { flex: none; font-family: var(--lu-mono); font-size: var(--lu-fLbl); letter-spacing: .12em; color: var(--lu-dim2); }
.lu-stat b { font-weight: 400; color: var(--lu-ink); }
/* sized for the widest value: a turn count that grew a digit slid the whole strip */
#lu-turn { display: inline-block; min-width: 3ch; text-align: left; }
/* sized for two-digit counts on both sides, so the strip never re-centres */
.lu-stat-chips b { display: inline-block; min-width: 13ch; text-align: left; }
.lu-root[data-n="3"] .lu-stat-chips b { min-width: 20ch; }
.lu-sep { flex: none; width: 1px; height: 12px; background: var(--lu-line2); }
.lu-mode { display: none; }
.lu-menu {
  flex: none; width: 30px; height: 24px; border: 0; border-radius: var(--lu-rp); cursor: pointer; font-size: 13px;
  background: var(--lu-panel2); color: var(--lu-ink); box-shadow: inset 0 0 0 1px var(--lu-line2);
}
@media (hover: hover) { .lu-menu:hover { box-shadow: inset 0 0 0 1px var(--lu-amber); color: var(--lu-amber); } }

.lu-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--lu-g); }
.lu-lbl { flex: none; height: var(--lu-lblH); display: flex; align-items: center; font-family: var(--lu-mono); font-size: var(--lu-fLbl); letter-spacing: .18em; color: var(--lu-dim2); }

/* ── player cards (L2: display, not controls) ───────────────────────────── */
.lu-railL { flex: none; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lu-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* three seats stay ONE row on the phone — a wrapped second row would cost the board a card's height
   (phone-only: the desktop rail is one column at any seat count) */
@media (max-width: 999px) {
  .lu-root[data-n="3"] .lu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  /* a third of the width: the card keeps avatar, name, glyph and count. The turn reads from the card's
     amber edge, the callout and ROLL — the pill sat on the name, (BOT) and the shape word ellipsized. */
  .lu-root[data-n="3"] .lu-card { padding: 0 6px; gap: 5px; }
  .lu-root[data-n="3"] .lu-pill, .lu-root[data-n="3"] .lu-cbot, .lu-root[data-n="3"] .lu-cshape { display: none; }
  /* the head cannot hold three chip counts at 360px (TURN was clipped) — the cards carry them */
  .lu-root[data-n="3"] .lu-stat-chips, .lu-root[data-n="3"] .lu-sep-chips { display: none; }
}
.lu-card {
  position: relative; height: var(--lu-cardH); min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 7px;
  border-radius: var(--lu-r2); background: var(--lu-panel); box-shadow: inset 0 0 0 1px var(--lu-line);
  transition: box-shadow .13s, background .13s;
}
.lu-card[data-turn="1"] { background: color-mix(in srgb, var(--lu-amber) 9%, var(--lu-panel)); box-shadow: inset 0 0 0 2px var(--lu-amber), 0 0 22px -8px var(--lu-amber); }
/* L3 — a reserved slot is an outline and nothing else; the phone shows live cards only */
.lu-card[data-empty="1"] { display: none; background: transparent; box-shadow: none; border: 1px dashed var(--lu-line); }
.lu-avwrap { position: relative; flex: none; width: var(--lu-av); height: var(--lu-av); }
.lu-av {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-family: var(--lu-mono); font-size: calc(var(--lu-av) * .4); font-weight: 700;
}
.lu-card[data-o="0"] .lu-av { color: var(--lu-p1); background: color-mix(in srgb, var(--lu-p1) 20%, var(--lu-panel2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lu-p1) 55%, transparent); }
.lu-card[data-o="1"] .lu-av { color: var(--lu-p2); background: color-mix(in srgb, var(--lu-p2) 20%, var(--lu-panel2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lu-p2) 55%, transparent); }
.lu-card[data-o="2"] .lu-av { color: var(--lu-p3); background: color-mix(in srgb, var(--lu-p3) 20%, var(--lu-panel2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lu-p3) 55%, transparent); }
.lu-avchip { position: absolute; right: -4px; bottom: -3px; width: 12px; height: 12px; border: 2px solid; }
.lu-avchip[data-shape="disc"] { border-radius: 50%; border-color: var(--lu-p1); background: color-mix(in srgb, var(--lu-p1) 30%, var(--lu-panel2)); }
.lu-avchip[data-shape="diamond"] { width: 9px; height: 9px; right: -3px; bottom: -2px; border-radius: 2px; transform: rotate(45deg); border-color: var(--lu-p2); background: color-mix(in srgb, var(--lu-p2) 30%, var(--lu-panel2)); }
.lu-avchip[data-shape="tri"] { width: 14px; height: 13px; right: -5px; bottom: -3px; border: 0; background: var(--lu-p3); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lu-cmid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.lu-cname { font-size: var(--lu-fName); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-crow2 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lu-cglyph { flex: none; font-size: 9px; line-height: 1; }
.lu-cglyph[data-o="0"], .lu-keyrow i[data-o="0"] { color: var(--lu-p1); }
.lu-cglyph[data-o="1"], .lu-keyrow i[data-o="1"] { color: var(--lu-p2); }
.lu-cglyph[data-o="2"], .lu-keyrow i[data-o="2"] { color: var(--lu-p3); }
.lu-cshape { min-width: 0; font-family: var(--lu-mono); font-size: 7px; letter-spacing: .1em; color: var(--lu-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-ccount { flex: none; width: 2.2ch; margin-left: auto; text-align: right; font-family: var(--lu-mono); font-size: 10px; font-weight: 700; }
/* the pill FILLS a fixed slot — a text-sized pill re-centres on every state */
.lu-pill {
  position: absolute; right: 6px; top: 4px; width: 58px; height: 13px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--lu-rp); font-family: var(--lu-mono); font-size: 6.5px; letter-spacing: .1em; white-space: nowrap; overflow: hidden;
  --pc: var(--lu-dim2); color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); box-shadow: inset 0 0 0 1px var(--pc);
}
.lu-pill[data-st="turn"] { --pc: var(--lu-amber); animation: lu-pulse 1.8s ease-in-out infinite; }
.lu-pill[data-st="think"] { --pc: var(--lu-p2); }
.lu-card[data-o="2"] .lu-pill[data-st="think"] { --pc: var(--lu-p3); }
.lu-pill[data-st="win"] { --pc: var(--lu-win); }
.lu-rsp, .lu-rspA { display: none; }
.lu-key { display: none; }

/* ── THE BOARD — the one flexible element ───────────────────────────────── */
.lu-boardwrap { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.lu-board {
  --lu-bpad: 4px; --lu-bgap: 3px;
  container-type: size;
  flex: none; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh);
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: var(--lu-bgap); padding: var(--lu-bpad);
  border-radius: var(--lu-r3); background: linear-gradient(180deg, #151a2b, #101425);
  box-shadow: inset 0 0 0 2px var(--lu-line2), inset 0 1px 0 rgba(236, 238, 244, .05), 0 18px 40px -28px #000;
}
.lu-cell {
  position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--lu-r2); background: var(--lu-cell); border: 2px solid var(--lu-line); cursor: default;
  transition: background .13s, border-color .13s, box-shadow .13s, filter .13s, transform .08s;
}
/* 2s and 12s: hatched + ▩, always (permanent is learnable before a 10 makes it matter) */
.lu-cell[data-perm="1"] { background-color: var(--lu-cell2); background-image: repeating-linear-gradient(135deg, rgba(236, 238, 244, .075) 0 2px, transparent 2px 6px); border-color: var(--lu-line2); }
.lu-num { position: relative; z-index: 2; font-family: var(--lu-mono); font-size: 6cqw; font-weight: 700; letter-spacing: -.02em; color: var(--lu-ink); text-shadow: 0 1px 2px rgba(9, 11, 17, .85); pointer-events: none; }
.lu-own { position: absolute; left: 7%; top: 4%; z-index: 3; font-size: 2.4cqw; line-height: 1; pointer-events: none; }
.lu-cell[data-own="0"] .lu-own { color: var(--lu-p1); }
.lu-cell[data-own="1"] .lu-own { color: var(--lu-p2); }
.lu-cell[data-own="2"] .lu-own { color: var(--lu-p3); }
.lu-badge { position: absolute; right: 6%; top: 3%; z-index: 3; font-family: var(--lu-mono); font-size: 2.8cqw; line-height: 1; font-weight: 700; pointer-events: none; color: transparent; }
.lu-badge[data-perm="1"] { color: rgba(98, 106, 128, .7); }
.lu-cell[data-own]:not([data-own=""]) .lu-badge[data-perm="1"] { color: var(--lu-dim2); }

/* chips are RINGS: the number stays readable under them */
.lu-ring { position: absolute; left: 50%; top: 50%; display: none; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(9, 11, 17, .5); }
.lu-ring[data-shape="disc"] {
  display: block; width: 80%; height: 80%; margin: -40% 0 0 -40%; border-radius: 50%;
  border: max(3px, .9cqw) solid var(--lu-p1); background: color-mix(in srgb, var(--lu-p1) 17%, transparent);
}
.lu-ring[data-shape="diamond"], .lu-ring[data-shape="ghost"] {
  --lu-rot: rotate(45deg);
  display: block; width: 58%; height: 58%; margin: -29% 0 0 -29%; border-radius: 3px; transform: rotate(45deg);
  border: max(3px, .9cqw) solid var(--lu-p2); background: color-mix(in srgb, var(--lu-p2) 17%, transparent);
}
.lu-ring[data-shape="tri"] {
  display: block; width: 86%; height: 80%; margin: -42% 0 0 -43%; border: 0; box-shadow: none;
  background: var(--lu-p3); -webkit-mask: var(--lu-tri) center / 100% 100% no-repeat; mask: var(--lu-tri) center / 100% 100% no-repeat;
}
.lu-ring[data-shape="ghost"] { border-style: dashed; border-width: max(2px, .75cqw); background: transparent; animation: lu-ghost 1.1s ease-in-out infinite; }
/* Mav's pick: a dashed triangle in Mav's ink, not Ray's diamond */
.lu-ring[data-shape="ghost"][data-ghost="tri"] {
  --lu-rot: rotate(0); transform: none; width: 86%; height: 80%; margin: -42% 0 0 -43%; border: 0; border-radius: 0; box-shadow: none;
  background: var(--lu-p3); -webkit-mask: var(--lu-trig) center / 100% 100% no-repeat; mask: var(--lu-trig) center / 100% 100% no-repeat;
}
.lu-ring[data-drop="1"] { animation: lu-drop .42s cubic-bezier(.2, .9, .3, 1) both; }

/* highlights — the border WIDTH never changes, only colour + style + glow */
.lu-cell[data-hl="place"] { background: color-mix(in srgb, var(--lu-amber) 24%, var(--lu-cell)); border-color: var(--lu-amber); animation: lu-legal 1.9s ease-in-out infinite; }
.lu-cell[data-hl="replace"] { background: color-mix(in srgb, var(--lu-amber) 24%, var(--lu-cell)); border-color: var(--lu-amber); border-style: dashed; animation: lu-legal 1.9s ease-in-out infinite; }
.lu-cell[data-hl="remove"] { background: color-mix(in srgb, var(--lu-rem) 14%, var(--lu-cell)); border-color: var(--lu-rem); border-style: dashed; animation: lu-rem 1.7s ease-in-out infinite; }
/* the wild is deliberately the quietest: it can light twenty-plus spaces at once */
.lu-cell[data-hl="wild"] { background: color-mix(in srgb, var(--lu-wild) 8%, var(--lu-cell)); border-color: var(--lu-wild); border-style: dashed; }
.lu-cell[data-hl="wild"] .lu-badge { animation: lu-wildb 2.4s ease-in-out infinite; }
.lu-cell[data-hl="place"] .lu-badge, .lu-cell[data-hl="replace"] .lu-badge { color: var(--lu-amber); }
.lu-cell[data-hl="remove"] .lu-badge { color: var(--lu-rem); }
.lu-cell[data-hl="wild"] .lu-badge { color: var(--lu-wild); }
.lu-cell[data-hl="win"] .lu-badge { color: var(--lu-win); }
/* ★ the line lights cell by cell, 160 ms apart */
.lu-cell[data-hl="win"] { animation: lu-winon .01s linear var(--lu-wd, 0s) both, lu-win 1.25s ease-in-out calc(var(--lu-wd, 0s) + .05s) infinite; }
.lu-cell[data-hl="win"] .lu-ring { box-shadow: 0 0 14px -2px var(--lu-win); }
.lu-cell[data-mine="1"] { cursor: pointer; }
@media (hover: hover) {
  .lu-cell[data-mine="1"][data-hl="place"]:hover, .lu-cell[data-mine="1"][data-hl="replace"]:hover { background: color-mix(in srgb, var(--lu-amber) 32%, var(--lu-cell)); box-shadow: 0 0 24px -3px color-mix(in srgb, var(--lu-amber) 95%, transparent); animation: none; }
  .lu-cell[data-mine="1"][data-hl="remove"]:hover { background: color-mix(in srgb, var(--lu-rem) 28%, var(--lu-cell)); box-shadow: 0 0 24px -3px color-mix(in srgb, var(--lu-rem) 95%, transparent); animation: none; }
  .lu-cell[data-mine="1"][data-hl="wild"]:hover { background: color-mix(in srgb, var(--lu-wild) 20%, var(--lu-cell)); box-shadow: 0 0 20px -4px color-mix(in srgb, var(--lu-wild) 90%, transparent); }
}
.lu-cell[data-mine="1"]:active { transform: translateY(1px); filter: brightness(.92); }
/* F7 — not yours to touch: flat, desaturated, no hover */
.lu-board[data-locked="1"] .lu-cell { filter: saturate(.6) brightness(.9); }
.lu-board[data-locked="1"] .lu-cell[data-hl="ghost"] { filter: none; }

/* ── dice · total · callout · legend · ROLL ─────────────────────────────── */
.lu-railR { flex: none; display: flex; flex-direction: column; gap: var(--lu-railG); min-width: 0; }
.lu-railR > .lu-lbl { display: none; }
.lu-dicerow { flex: none; height: var(--lu-die); display: flex; align-items: stretch; gap: 8px; }
.lu-dwrap { flex: none; width: var(--lu-die); display: flex; flex-direction: column; gap: 3px; }
.lu-dwrap small, .lu-totwrap small { display: none; font-family: var(--lu-mono); font-size: 8px; letter-spacing: .1em; color: var(--lu-dim2); text-align: center; line-height: 11px; height: 11px; }
/* L1 — the die is DISPLAY: no hover, no cursor. The renderer draws the skin; we own the frame. */
.lu-die { flex: none; width: var(--lu-die); height: var(--lu-die); display: flex; align-items: center; justify-content: center; transition: filter .13s; }
.lu-root[data-botdice="1"] .lu-die { filter: grayscale(.35) brightness(.8); }
.lu-ghostdie { display: block; width: 100%; height: 100%; border-radius: 16%; border: 1px dashed var(--lu-line2); }
.lu-die-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 16%; background: #e9ecf3; color: #141828; font-weight: 800; }
.lu-totwrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lu-tot {
  --kc: var(--lu-line2);
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  border-radius: var(--lu-r2); background: color-mix(in srgb, var(--kc) 12%, var(--lu-panel2)); box-shadow: inset 0 0 0 2px var(--kc), 0 0 24px -10px var(--kc);
}
.lu-tot b { width: 100%; text-align: center; font-family: var(--lu-mono); font-size: var(--lu-fTot); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.lu-tot span { width: 100%; height: 1.3em; text-align: center; font-family: var(--lu-mono); font-size: var(--lu-fLbl); letter-spacing: .16em; color: var(--kc); white-space: nowrap; overflow: hidden; }
.lu-tot[data-kind="place"], .lu-tot[data-kind="replace"], .lu-tot[data-kind="bonus"], .lu-call[data-kind="place"], .lu-call[data-kind="replace"], .lu-call[data-kind="bonus"] { --kc: var(--lu-amber); }
.lu-tot[data-kind="remove"], .lu-call[data-kind="remove"] { --kc: var(--lu-rem); }
.lu-tot[data-kind="wild"], .lu-call[data-kind="wild"] { --kc: var(--lu-wild); }
.lu-tot[data-kind="win"], .lu-call[data-kind="win"] { --kc: var(--lu-win); }
.lu-tot[data-kind="none"], .lu-tot[data-kind="bot"], .lu-tot[data-kind="idle"], .lu-tot[data-kind="rolling"],
.lu-call[data-kind="none"], .lu-call[data-kind="bot"], .lu-call[data-kind="idle"], .lu-call[data-kind="rolling"] { --kc: var(--lu-dim); }
.lu-tot[data-kind="idle"], .lu-tot[data-kind="rolling"] { --kc: var(--lu-line2); }

.lu-call {
  --kc: var(--lu-dim);
  flex: none; height: var(--lu-callH); display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: 8px; padding: 0 9px 0 7px;
  border-radius: var(--lu-r2); background: var(--lu-panel); box-shadow: inset 0 0 0 1px var(--kc), inset 3px 0 0 0 var(--kc);
}
.lu-call[data-kind="none"], .lu-call[data-kind="idle"] { box-shadow: inset 0 0 0 1px var(--lu-line), inset 3px 0 0 0 var(--kc); }
.lu-callico { grid-row: 1 / span 2; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--kc); font-family: var(--lu-mono); font-size: 13px; font-weight: 700; color: var(--kc); }
/* both text lines FILL their track — a text-sized line re-centred on every new message */
.lu-call b { align-self: end; width: 100%; min-height: calc(var(--lu-fCall) * 1.15); font-size: var(--lu-fCall); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-call span { align-self: start; width: 100%; height: calc(var(--lu-fSub) * 1.35 + 2px); padding-top: 2px; font-family: var(--lu-mono); font-size: var(--lu-fSub); line-height: 1.35; letter-spacing: .06em; color: var(--lu-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lu-legend { flex: none; height: var(--lu-legH); display: flex; align-items: center; justify-content: center; border-radius: var(--lu-r1); background: var(--lu-panel2); box-shadow: inset 0 0 0 1px var(--lu-line); overflow: hidden; }
.lu-legrow { display: none; }
.lu-legphone { font-family: var(--lu-mono); font-size: var(--lu-fLbl); letter-spacing: .1em; color: var(--lu-dim); white-space: nowrap; }

.lu-roll {
  flex: none; height: var(--lu-rollH); width: 100%; border-radius: var(--lu-r2); cursor: pointer;
  font-size: var(--lu-fRoll); font-weight: 700; letter-spacing: .08em; white-space: nowrap; overflow: hidden;
  background: var(--lu-amber); border: 1px solid color-mix(in srgb, var(--lu-amber) 60%, #000); color: var(--lu-amber-t); box-shadow: 0 0 22px -10px var(--lu-amber);
  transition: filter .13s, box-shadow .13s, border-color .13s, color .13s, background .13s, transform .08s;
}
@media (hover: hover) { .lu-roll:not(:disabled):hover { filter: brightness(1.1); box-shadow: 0 0 26px -4px var(--lu-amber); } }
.lu-roll:not(:disabled):active { transform: translateY(1px); filter: brightness(.9); }
/* LU3 — PASS TURN is live but secondary: outlined, same slot */
.lu-roll[data-pass="1"]:not(:disabled) { background: var(--lu-panel2); color: var(--lu-ink); border-color: var(--lu-dim); box-shadow: none; }
.lu-roll:disabled { background: transparent; border: 1px dashed var(--lu-line2); color: var(--lu-dim2); cursor: not-allowed; box-shadow: none; }
.lu-rollfoot { display: none; }

/* ── flights + the win banner: ABSOLUTE layers INSIDE the root, never fixed ── */
.lu-fx { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.lu-flychip { position: absolute; width: calc(var(--lu-fsz) * .8); height: calc(var(--lu-fsz) * .8); transform: translate(-50%, -50%); }
.lu-flychip[data-mode="knock"] { animation: lu-knock .7s cubic-bezier(.25, .6, .4, 1) both; }
.lu-flychip[data-mode="push"] { animation: lu-knock .55s cubic-bezier(.25, .6, .4, 1) both; }
.lu-flychip::before { content: ''; position: absolute; inset: 0; border: 3px solid; }
.lu-flychip[data-shape="disc"]::before { border-radius: 50%; border-color: var(--lu-p1); background: color-mix(in srgb, var(--lu-p1) 18%, var(--lu-board)); }
.lu-flychip[data-shape="tri"]::before { border: 0; background: var(--lu-p3); -webkit-mask: var(--lu-tri) center / 100% 100% no-repeat; mask: var(--lu-tri) center / 100% 100% no-repeat; }
.lu-flychip[data-shape="diamond"]::before { inset: 21%; border-radius: 3px; transform: rotate(45deg); border-color: var(--lu-p2); background: color-mix(in srgb, var(--lu-p2) 18%, var(--lu-board)); }

.lu-win { position: absolute; inset: 0; z-index: 9; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding: 0 14px 150px; background: radial-gradient(60% 60% at 50% 50%, rgba(9, 11, 17, .35), rgba(9, 11, 17, .7)); }
.lu-win[data-on="0"] { visibility: hidden; }
.lu-win[data-on="1"] { animation: lu-rise .3s ease-out var(--lu-wdelay, 0s) both; }
.lu-wincard { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 22px; border-radius: var(--lu-r3); background: var(--lu-panel); box-shadow: inset 0 0 0 2px var(--lu-win), 0 0 60px -18px var(--lu-win); }
.lu-wincard i { font-size: 20px; line-height: 1; color: var(--lu-win); }
.lu-wincard b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.lu-wincard span { font-family: var(--lu-mono); font-size: 8.5px; letter-spacing: .14em; color: var(--lu-dim); text-align: center; }

/* end screen rows (GameEndScreen html section) */
.lu-endrows { display: flex; flex-direction: column; gap: 6px; }
.lu-endrow { display: grid; grid-template-columns: 1fr auto 76px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.lu-endrow[data-win="1"] { background: rgba(116, 223, 162, .16); }
.lu-endnm { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.lu-endglyph { flex: none; width: 13px; height: 13px; border: 2px solid currentColor; }
.lu-endglyph[data-shape="disc"] { border-radius: 50%; }
.lu-endglyph[data-shape="diamond"] { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }
.lu-endglyph[data-shape="tri"] { width: 14px; height: 12px; border: 0; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lu-endst { font-size: 12px; opacity: .75; }
.lu-endsc { text-align: right; font-weight: 800; font-size: 15px; }
.lu-endnote { margin-top: 8px; font-size: 12px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .lu-cell, .lu-ring, .lu-pill, .lu-win, .lu-badge, .lu-flychip { animation: none !important; }
  .lu-cell[data-hl="win"] { background: color-mix(in srgb, var(--lu-win) 20%, var(--lu-cell)); border-color: var(--lu-win); }
}

/* ── PHONE ───────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  /* ⛔ The vertical gutter goes too (the Pachisi / Salvage finding), scoped to a live board. */
  #lineup-game-screen.lu-playing .wrap { padding: 0 2px; max-width: none; }
  #lineup-game-screen.lu-playing .topbar { display: none; }
  #lineup-game-screen.lu-playing.lu-topbar-open .topbar { display: flex; }
}
/* the 360 × 740 stress frame (mock F2-S) */
@media (max-width: 999px) and (max-height: 760px) {
  .lu-root { --lu-padY: 8px; --lu-cardH: 42px; --lu-die: 50px; --lu-callH: 44px; --lu-rollH: 48px; --lu-fCall: 15px; --lu-fTot: 24px; }
}
@media (max-width: 370px) {
  .lu-root { --lu-padX: 8px; }
  .lu-brand { letter-spacing: .14em; }
  .lu-stats { gap: 4px; }
  .lu-stat { letter-spacing: .06em; }
}

/* ── DESKTOP — ONE design box, scaled as a unit by BoardFit (the mock's 1280 × 553) ── */
@media (min-width: 1000px) {
  #lineup-game-screen .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .lu-root {
    --lu-padX: 14px; --lu-padY: 12px; --lu-g: 10px; --lu-headH: 40px; --lu-lblH: 16px; --lu-cardH: 80px; --lu-av: 38px;
    --lu-die: 96px; --lu-callH: 86px; --lu-rollH: 56px; --lu-railG: 8px;
    --lu-fLbl: 9px; --lu-fName: 14px; --lu-fCall: 19px; --lu-fSub: 10px; --lu-fTot: 40px; --lu-fRoll: 16px;
    width: 1280px; height: 553px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--lu-line), 0 26px 60px -30px #000;
  }
  .lu-head { gap: 12px; margin: 0 calc(var(--lu-padX) * -1); padding: 0 var(--lu-padX); background: rgba(23, 28, 42, .9); box-shadow: inset 0 -1px 0 var(--lu-line); margin-top: calc(var(--lu-padY) * -1); height: calc(var(--lu-headH) + var(--lu-padY)); padding-top: var(--lu-padY); }
  .lu-brand { font-size: 12px; gap: 9px; }
  .lu-brand i { width: 12px; height: 12px; }
  .lu-stats { gap: 12px; }
  .lu-stat { font-size: 10px; }
  .lu-mode { display: block; flex: none; width: 124px; text-align: right; font-family: var(--lu-mono); font-size: 10px; letter-spacing: .12em; color: var(--lu-dim2); }
  .lu-menu { display: none; }

  /* railL 300 + 14 + board 584 + 14 + railR 340 = 1252 = 1280 − 2 × 14 */
  .lu-body { flex-direction: row; gap: 14px; }
  .lu-railL { width: 300px; gap: 8px; }
  .lu-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lu-card { gap: 10px; padding: 0 11px; }
  .lu-card[data-empty="1"] { display: block; }
  .lu-avchip { width: 16px; height: 16px; right: -5px; bottom: -4px; }
  .lu-avchip[data-shape="diamond"] { width: 13px; height: 13px; right: -3px; bottom: -2px; }
  .lu-avchip[data-shape="tri"] { width: 18px; height: 16px; right: -6px; bottom: -4px; }
  .lu-cmid { gap: 4px; }
  .lu-crow2 { gap: 7px; }
  .lu-cglyph { font-size: 11px; }
  .lu-cshape { font-size: 9px; }
  .lu-ccount { font-size: 11px; }
  .lu-pill { position: static; flex: none; width: 78px; height: 22px; font-size: 8.5px; }
  .lu-rsp { display: block; flex: 1 1 0; min-height: 0; }
  .lu-rspA { display: block; flex: .55 1 0; min-height: 0; }
  .lu-key { flex: none; height: 84px; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--lu-r2); background: var(--lu-panel2); box-shadow: inset 0 0 0 1px var(--lu-line); }
  /* three seats = five lines in the same 84px box (LU5): the gap tightens, the box does not grow */
  .lu-root[data-n="3"] .lu-key { gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  .lu-keylbl { font-family: var(--lu-mono); font-size: 8px; letter-spacing: .18em; color: var(--lu-dim2); }
  .lu-keyrow { display: flex; align-items: center; gap: 8px; font-family: var(--lu-mono); font-size: 8px; letter-spacing: .08em; color: var(--lu-dim); white-space: nowrap; }
  .lu-keyrow i { width: 14px; text-align: center; font-size: 11px; line-height: 1; color: var(--lu-ink); }

  .lu-board { --lu-bpad: 6px; --lu-bgap: 4px; }

  .lu-railR { width: 340px; }
  .lu-railR > .lu-lbl { display: flex; }
  .lu-dicerow { height: calc(var(--lu-die) + 14px); }
  .lu-dwrap small, .lu-totwrap small { display: block; }
  .lu-call { grid-template-columns: 34px minmax(0, 1fr); column-gap: 11px; padding: 0 12px 0 10px; box-shadow: inset 0 0 0 1px var(--kc), inset 4px 0 0 0 var(--kc); }
  .lu-call[data-kind="none"], .lu-call[data-kind="idle"] { box-shadow: inset 0 0 0 1px var(--lu-line), inset 4px 0 0 0 var(--kc); }
  .lu-callico { width: 34px; height: 34px; font-size: 16px; }
  .lu-call span { height: 30px; white-space: normal; padding-top: 3px; }
  .lu-legend { height: 84px; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; padding: 9px 11px; border-radius: var(--lu-r2); }
  .lu-legrow { display: flex; align-items: baseline; gap: 9px; }
  .lu-legrow b { flex: none; width: 42px; white-space: nowrap; font-family: var(--lu-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--lu-amber); }
  .lu-legrow span { font-family: var(--lu-mono); font-size: 9px; letter-spacing: .1em; color: var(--lu-dim); white-space: nowrap; }
  .lu-legphone { display: none; }
  .lu-rollfoot { display: block; flex: none; height: 14px; font-family: var(--lu-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--lu-dim2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lu-win { align-items: flex-end; justify-content: flex-end; padding: 0 34px 106px 0; border-radius: 16px; }
  .lu-wincard { padding: 22px 34px; }
  .lu-wincard i { font-size: 26px; }
  .lu-wincard b { font-size: 24px; }
  .lu-wincard span { font-size: 10px; }
}

/* ── MP (slice MP-1): the turn clock and a seat that left ───────────────────────────────────
 * The clock is a 3px bar laid ON the callout's bottom edge — absolute, scaleX, so it reserves no
 * height and moves nothing (the locked-layout rule). It only shows at a clock-on MP table. */
.lu-call { position: relative; }
.lu-clock { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; border-radius: 2px; transform-origin: left center; transform: scaleX(0); background: var(--lu-dim); opacity: 0; pointer-events: none; transition: transform .25s linear; }
.lu-clock[data-on="1"] { opacity: .8; }
.lu-clock[data-on="1"][data-mine="1"] { background: var(--lu-amber); opacity: 1; }
.lu-clock[data-on="1"][data-low="1"] { background: var(--lu-rem); }
.lu-card[data-left="1"] { opacity: .45; }

/* ── 👥 TEAMS (4 seats, MP-2 — ⚖️ LUT9, mock F9) ─────────────────────────────────────────────────────
 * Viewer-relative: your team is the DISC in the "you" ink, the other team the DIAMOND; a teammate is
 * told apart by FILL — solid (you / their first seat) vs DOUBLE-LINE — plus the ● ○ ◆ ◇ corner glyph, so
 * it reads in greyscale. Every other player's roll and total sit on their card in a FIXED slot
 * (--lu-cd dice + a 2.4ch total), so the card never re-flows as a roll lands (the locked-layout rule). */
.lu-root { --lu-cd: 12px; }
.lu-ring[data-fill="open"] { border-style: double; border-width: max(5px, 1.35cqw); background: transparent; }
.lu-avchip[data-fill="open"] { border-style: double; border-width: 3px; background: var(--lu-panel2); }
.lu-flychip[data-fill="open"]::before { border-style: double; background: transparent; }
.lu-cdice { flex: none; display: flex; align-items: center; gap: 2px; width: calc(var(--lu-cd) * 2 + 2.4ch + 6px); height: var(--lu-cd); }
.lu-cd { flex: none; display: block; width: var(--lu-cd); height: var(--lu-cd); line-height: 0; overflow: hidden; }
/* ⛔ THE TOTAL HOLDS ITS BOX WHILE IT IS EMPTY — an auto-height empty element is 0px tall, so the card row
   moved every time a roll landed (caught by §16 locked layout, the only check that could see it). */
.lu-ctot { flex: none; width: 2.4ch; height: var(--lu-cd); line-height: var(--lu-cd); text-align: right; font-family: var(--lu-mono); font-size: 10px; font-weight: 700; color: var(--lu-ink); }
.lu-cdice[data-on="r"] .lu-cd { border-radius: 3px; background: color-mix(in srgb, var(--lu-p2) 30%, transparent); animation: lu-cdroll .32s linear infinite; }
@keyframes lu-cdroll { 50% { opacity: .3; } }
.lu-pill[data-st="done"] { --pc: var(--lu-dim); }
.lu-card[data-o="1"] .lu-pill[data-st="think"] { --pc: var(--lu-p2); }
@media (max-width: 999px) {
  /* four cards = two rows of two (F9); the name leaves room for the absolute pill */
  .lu-root[data-n="4"] .lu-cname { padding-right: 60px; }
  .lu-root[data-n="4"] .lu-ctot { font-size: 9px; }
}
@media (min-width: 1000px) {
  .lu-root { --lu-cd: 16px; }
  .lu-root[data-n="4"] .lu-key { gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  .lu-ctot { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .lu-cdice .lu-cd { animation: none !important; } }