/* frontend/liars-dice.css — Liar's Dice's table, variant A "Rail" (old-games overhaul 2c item 4; owner
   2026-10-11: "A's layout looks wonderful both on mobile and pc"). Ruled from the mock page
   liars-dice-redesign-preview.html: A, side cards UPRIGHT on PC, YOUR BID in the column (not a pop-up),
   the reveal IN PLACE.

   Its own file for the same reason as ur.css / bank-shell.css: the layout is new, and style.css is
   shared by every session. It loads AFTER style.css (index.html) and reuses the shipped `.ldt-*`
   pieces there as they are — the builder, faces, stepper, buttons, hand card, bid disc, flip dice,
   reveal lines, bubbles. The restructured parts have NEW names (`.ldt-rim`, `.ldt-felt`, `.ldt-opps`,
   `.ldt-pseat`, `.ldt-col`, `.ldt-log`, `.ldt-hdr`), so style.css's old table rules (`.ldt-table`,
   `.ldt-t1/2/3`, `.ldt-seat*`, the `.ldt-board > .ldt-head` overlay, the reveal-panel rows) no longer
   match anything. ✅ Pruned from style.css at .810 (2026-10-13).

   PC (≥ 1000 px, BoardFit's BP): ONE design box at 2, 3 and 4 players and in every state — a 720 px
   felt with the opponents upright on its rim + a 400 px column. Phone: a viewport-tall column (the
   opponents in one row, the felt flex 1, the controls, the hand), no position: fixed / sticky (the
   BoardFit traps; sticky sticks to nothing in this app). */

/* ── Seat cards (both sizes) ────────────────────────────────────────────────────────────────────
   Scoped under .ldt-pseat on purpose: player-identity.test.html grades a BARE .ldt-seat-card against
   style.css's resting vanity border. In the game ldMpSetSeatGlow paints the border inline anyway. */
.ldt-pseat { --seat: #888; }
.ldt-pseat .ldt-seat-card {
  display: flex; flex-direction: row; align-items: center; gap: 10px; box-sizing: border-box;
  width: 180px; height: 74px; padding: 10px 12px; border-radius: 16px;
  background: var(--pgr-panel); border: 1px solid color-mix(in oklch, var(--seat) 45%, transparent);
}
.ldt-av {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; color: var(--pgr-txt); background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 2px var(--seat); line-height: 1;
}
.ldt-seat-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
/* One line, always: a name that wraps grows the card (the .764 locked-layout trap). */
.ldt-pseat .ldt-seat-name {
  display: block; font-size: 16px; font-weight: 700; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ldt-pseat .ldt-seat-dice { display: flex; justify-content: flex-start; align-items: center; gap: 3px; min-height: 18px; flex-wrap: nowrap; }
/* A bubble hangs UNDER its card (the top card's would leave the felt above it). */
.ldt-pseat .ldt-bubble-seat { top: calc(100% + 8px); }
.ldt-pseat .ldt-bubble-seat::after { bottom: auto; top: -5px; }

/* ── The bid disc, placed in a slot so the shipped .ldt-center keeps its own centring + flips ── */
.ldt-disc-slot { position: relative; flex: none; width: 240px; height: 136px; --ldt-disc: 50%; --ldt-discW: 100%; }
.ldt-disc-slot .ldt-center { min-height: 100%; box-sizing: border-box; z-index: 2; }
/* The verdict (Reveal in place): the disc's element, a card for the four outcome lines. Wider and
   flatter than the disc; it swaps only while rotated out of view (ldMpPlayReveal). */
.ldt-disc-slot .ldt-center.ldt-verdict {
  width: 300px; min-height: 0; border-radius: 20px; padding: 14px 16px; gap: 6px;
  background: var(--pgr-panel); border: 1.5px solid var(--pgr-line); box-shadow: 0 18px 44px -20px rgba(0,0,0,.75);
  z-index: 6;
}
.ldt-verdict .ldt-rev-text { margin-top: 0; }
.ldt-called { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; vertical-align: middle; }

/* ── The column: the NEW bid log, then the shipped builder / buttons / hand ─────────────────── */
.ldt-log {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 6px;
  background: var(--pgr-panel); border: 1px solid var(--pgr-line); border-radius: 16px; padding: 10px 14px 12px;
}
.ldt-log-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--pgr-dim); }
/* FIXED rows, always (--rows = LDT_LOG_ROWS): a growing list would grow the box. */
.ldt-log-list { height: calc(var(--rows, 4) * 28px + (var(--rows, 4) - 1) * 2px); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden; }
.ldt-log-row { height: 28px; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--pgr-dim); }
.ldt-log-row i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ldt-log-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ldt-log-bid { flex: none; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--pgr-txt); }
.ldt-log-row.is-last { background: var(--pgr-selBg); color: var(--pgr-txt); }
.ldt-log-more { color: var(--pgr-dim); font-size: 12px; font-weight: 600; justify-content: center; }
.ldt-log-empty { margin: auto; color: var(--pgr-dim); font-size: 13px; font-weight: 600; }
.ldt-board .ldt-hint { white-space: nowrap; }
/* ⛔ The .762 trap: style.css spaces .ldt-controls with --pgr-shellGap = clamp(7px, 1.2vh, 13px), so a
   fitted box grew with the WINDOW's height (522 at 1280 × 637, 527 at 1920 × 1080). A fixed gap here. */
.ldt-board .ldt-controls { gap: 10px; }
/* The faces row is empty while the controls are off (ldMpRenderControls stops before painting it), and
   the column must not shrink with it: a reservation, the height of one face (die + the 3 px pad). */
.ldt-board .ldt-faces { min-height: 38px; }
/* …and the label row: the hint is empty while the controls are off, and a 12 px hint is a taller line box
   than the 11 px label alone. One fixed line. */
.ldt-board .ldt-builder-top { line-height: 16px; height: 16px; }
/* Two more text rows that set the column's height get FIXED line boxes: measured before a font weight had
   loaded they came out 1 px taller (fallback metrics), and the column must not depend on font metrics. */
.ldt-board .ldt-log-head { height: 14px; line-height: 14px; }
.ldt-board .ldt-hand-top { height: 20px; }
.ldt-board .ldt-hand-dice { flex-wrap: nowrap; }
/* The controls during a reveal: in place, not usable (ldMpRevealLock). */
.ldt-controls.ldt-locked { pointer-events: none; }
.ldt-controls.ldt-locked .ldt-builder { opacity: .65; }
.ldt-controls.ldt-locked .ldt-btn { opacity: .55; }

/* The felt: a round table (a stadium of felt). */
.ldt-felt {
  box-sizing: border-box;
  background:
    radial-gradient(70% 80% at 50% 45%, color-mix(in oklch, var(--pgr-sel) 9%, transparent), transparent 70%),
    var(--pgr-seat);
  border: 1px solid var(--pgr-line);
  box-shadow: inset 0 0 0 10px rgba(0,0,0,.14), inset 0 0 60px rgba(0,0,0,.28);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ldt-hdr { display: flex; justify-content: space-between; align-items: center; pointer-events: none; }

/* ── PC: the felt on the left, the column on the right; one design box ────────────────────────── */
@media (min-width: 1000px) {
  .ldt-board {
    max-width: none; width: fit-content; padding: 16px;
    display: grid; grid-template-columns: 720px 400px; column-gap: 24px; align-items: stretch;
  }
  .ldt-rim { position: relative; min-height: 476px; }
  .ldt-felt { position: absolute; inset: 0; border-radius: 240px; gap: 14px; padding-top: 24px; }
  .ldt-hdr { position: absolute; left: 0; right: 0; top: -2px; padding: 0 44px; z-index: 4; }
  .ldt-opps { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .ldt-pseat { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
  /* The spots: seat k is clockwise from me (ldMpOpps), so k = 0 is on my left. Every card upright
     (owner 10-09: on PC the side opponents should not be turned). Side seats at x 120 / 600 leave
     the 240 px disc 30 px clear on either side. */
  .ldt-o1 .ldt-pseat-0 { left: 50%; top: 64px; }
  .ldt-o2 .ldt-pseat-0 { left: 120px; top: 46%; }
  .ldt-o2 .ldt-pseat-1 { left: 600px; top: 46%; }
  .ldt-o3 .ldt-pseat-0 { left: 120px; top: 46%; }
  .ldt-o3 .ldt-pseat-1 { left: 50%; top: 64px; }
  .ldt-o3 .ldt-pseat-2 { left: 600px; top: 46%; }
  /* The disc a size up (the board is fitted ×1.0, not ×0.74). */
  .ldt-disc-slot .ldt-center .ldt-bid-qty { font-size: 36px; }
  .ldt-disc-slot .ldt-center .ldt-bid-x { font-size: 22px; }
  .ldt-disc-slot .ldt-center .ldt-center-label { font-size: 10.5px; }
  .ldt-disc-slot .ldt-center .ldt-bid-by { font-size: 13px; }
  .ldt-disc-slot .ldt-center .ldt-nobid { font-size: 16px; }
  .ldt-felt .ldt-status { width: 320px; font-size: 15px; line-height: 1.35; color: var(--pgr-txt); text-wrap: balance; }
  .ldt-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  /* Off (out / forfeited / over): the column keeps its shape. */
  .ldt-controls.ldt-off { visibility: hidden; }
}

/* ── Phones: a viewport-tall column; the felt takes the free height ───────────────────────────── */
@media (max-width: 999.98px) {
  #liars-dice-mp-game-screen.ldt-on { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; }
  .ldt-on .ldt-wrap { flex: 1 1 auto; flex-direction: column; }
  .ldt-on #ld-mp-area { flex: 1 1 auto; display: flex; flex-direction: column; }
  .ldt-board { flex: 1 1 auto; gap: 10px; }
  /* min-height stays AUTO: the table may take free height but never shrink below its own content, so a
     viewport that comes up short scrolls the page instead of sliding the bid card over the felt (2026-10-11). */
  .ldt-rim { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
  .ldt-hdr { padding: 0 2px; }
  .ldt-opps { display: flex; gap: 6px; }
  .ldt-pseat { position: relative; flex: 1 1 0; min-width: 0; }
  /* Two rows: the avatar + name, then the dice across the card's whole width (at 360 a third of the
     row is 108 px; five 15 px dice need 83, which only fits without the avatar beside them). */
  .ldt-pseat .ldt-seat-card {
    width: 100%; height: 66px; padding: 7px 9px;
    display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: 24px 18px; column-gap: 6px; row-gap: 8px;
  }
  .ldt-pseat .ldt-av { width: 24px; height: 24px; font-size: 13px; box-shadow: inset 0 0 0 1.5px var(--seat); }
  .ldt-pseat .ldt-seat-mid { display: contents; }
  .ldt-pseat .ldt-seat-name { font-size: 14px; grid-column: 2; grid-row: 1; }
  .ldt-pseat .ldt-seat-dice { gap: 2px; min-height: 15px; grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .ldt-felt { flex: 1 1 0; min-height: 150px; border-radius: 28px; gap: 6px; padding: 10px 12px; }
  .ldt-disc-slot { width: 210px; height: 108px; }
  .ldt-disc-slot .ldt-center.ldt-verdict { width: min(290px, calc(100vw - 72px)); }
  .ldt-felt .ldt-status { width: 100%; box-sizing: border-box; color: var(--pgr-txt); text-wrap: balance; }
  .ldt-col { display: contents; }
  .ldt-log { display: none; }
  /* Off: the controls drop out and the felt (flex 1) takes their height; Your hand stays put. */
  .ldt-controls.ldt-off { display: none; }
  .ldt-board .ldt-builder { padding: 10px 12px; gap: 8px; }
  .ldt-board .ldt-actions .ldt-btn { height: 50px; }
  .ldt-board .ldt-hand { padding: 10px 14px 12px; gap: 6px; }
}