/* frontend/ur.css — the Royal Game of Ur's chrome (old-games overhaul 2c item 3, 2026-10-10; owner picked
   variant A "Seats" + the home dots, mock: ur-redesign-preview.html).

   urRender() (ur.js) paints the board for BOTH screens (#ur-game-screen solo, #ur-mp-game-screen online —
   ur_mp.js has no renderer of its own). The board PIECES (tiles, chips, arrows, piles, flights) keep their
   inline style builders: the guide lifts #ur-board-grid as it is, and ur-board.test.html reads those inline
   styles. Everything AROUND the board lives here: the two seat cards (they are the pile bands on PC, so the
   waiting piles sit in their middle), the message line, the Roll key, the phone column.

   The seat cards, Roll key, message and bubbles are the race board's shared classes (`.pigr-seat`,
   `.pigr-btn-roll`, `.pigr-msg`, `.pigr-bubble`), so Ur looks like the newer games. Their --pgr-* colour
   tokens are set INLINE on `.urb-root` from urPalette() (the same scheme the board is painted from); the
   values below are only the charcoal fallback.

   ⛔ `.ur-shell` keeps its width rules in style.css (BoardFit.clear blanks inline width / max-width), and
   this file never sets a width on it. */

.urb-root {
  --pgr-seat: rgba(255,255,255,.025); --pgr-panel: rgba(255,255,255,.04);
  --pgr-line: rgba(255,255,255,.075); --pgr-txt: #e9e8e4; --pgr-dim: #83858b;
  --pgr-sel: oklch(.74 .14 152); --pgr-selBg: oklch(.74 .14 152 / .16);
  --pgr-btn: linear-gradient(180deg,#333841,#22252b); --pgr-btnTxt: #e9e8e4;
  --pgr-bubbleBg: #2b2d33; --pgr-bubbleTxt: #f1f0ec;
  --urb-you: oklch(.62 .17 250); --urb-opp: oklch(.6 .19 25);
  display: flex; flex-direction: column; gap: 12px; color: var(--pgr-txt);
  user-select: none; -webkit-user-select: none;
}
.urb-wrap { display: flex; justify-content: center; padding: 6px 0 12px; box-sizing: border-box; }
/* Arcade: the cabinet (the shell's own background), as before. */
.urb-root.urb-arcade { border-radius: 28px; padding: 20px 14px 22px; box-shadow: 0 20px 40px rgba(0,0,0,.35); }

/* ── The board block ─────────────────────────────────────────────────────────────────────────── */
.urb-grid { flex: none; overflow: visible; }
.urb-frame { position: absolute; left: 0; top: 0; pointer-events: none; }
.urb-tall { position: relative; display: flex; align-items: flex-start; gap: 8px; width: fit-content; margin: 0 auto; }
.urb-pile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; flex: none; border-radius: 8px; padding: 4px 0; }
.urb-pile-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; width: 62px; }
.urb-pile-lbl { font-size: 9px; color: var(--pgr-dim); text-align: center; line-height: 1.2; white-space: nowrap; }
.urb-pile-wide { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: row; gap: 6px; width: auto; padding: 4px 8px; border-radius: 12px; z-index: 3; }
.urb-pile-wide .urb-pile-lbl { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; }
.urb-pile-live { cursor: pointer; animation: glowPulse 1.3s ease-in-out infinite; }

/* ── Seat cards: who (avatar, name, the 7 home dots) · what (dice, Roll) ──────────────────────── */
.urb-seat { box-sizing: border-box; }
.urb-seat-main { gap: 14px; }
.urb-who { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.urb-gap { display: none; }
.urb-what { display: flex; align-items: center; gap: 14px; flex: none; }
.urb-seat .pigr-seat-mid { gap: 7px; }
/* One line, always: a wrapping name row grows the card (the .764 locked-layout trap). */
.urb-seat .pigr-seat-namerow { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.urb-seat .pigr-name { overflow: hidden; text-overflow: ellipsis; }
.urb-seat-you .pigr-avatar { box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--urb-you) 70%, transparent); }
.urb-seat-opp .pigr-avatar { box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--urb-opp) 70%, transparent); }
.urb-initial { font-weight: 800; font-size: .8em; color: var(--pgr-txt); }

/* The home dots (were the banked-chip row): a fixed 7, so the card never grows. A borne-off piece flies
   to the next empty one (urBankCenter measures it). The diameter is UR_PIP_D in ur.js — keep in step. */
.urb-pips { display: inline-flex; align-items: center; gap: 4px; }
.urb-pips i { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; flex: none; border: 1.5px dashed rgba(255,255,255,.22); background: rgba(0,0,0,.22); }
.urb-pips-you i.on { border: 1.5px solid color-mix(in oklch, var(--urb-you) 65%, black); background: radial-gradient(circle at 32% 28%, color-mix(in oklch, var(--urb-you) 45%, white), var(--urb-you) 55%, color-mix(in oklch, var(--urb-you) 65%, black)); }
.urb-pips-opp i.on { border: 1.5px solid color-mix(in oklch, var(--urb-opp) 65%, black); background: radial-gradient(circle at 32% 28%, color-mix(in oklch, var(--urb-opp) 45%, white), var(--urb-opp) 55%, color-mix(in oklch, var(--urb-opp) 65%, black)); }
.urb-home { font-size: 12px; color: var(--pgr-dim); margin-left: 6px; white-space: nowrap; }

.urb-seat-dice { display: flex; align-items: center; gap: 8px; }
.urb-dice { display: inline-flex; gap: 4px; align-items: center; }
.urb-threw { font-size: 12px; color: var(--pgr-dim); min-width: 3.6em; white-space: nowrap; }
.urb-threw b { color: var(--pgr-txt); font-size: 18px; }
/* Your own card never says "threw": the Roll key already does ("Threw 2"). */
.urb-seat-you .urb-threw { display: none; }
.urb-bubble { top: calc(100% + 10px); }

/* Roll: the race's key. On PC it rides at the right end of your card. */
.urb-roll { white-space: nowrap; }
.pigr-btn.urb-roll-in { flex: none; height: 46px; padding: 0 20px; font-size: 16px; border-radius: 13px; }

/* The message line: one reserved line, so a longer message never moves anything. */
.urb-msg { min-height: 1.4em; }
.urb-msg-pop { animation: rosetteBannerPop .5s ease; }

/* ── PC (the wide board, rotated): the two cards ARE the 70 px pile bands, as today's bands were;
   the board block (piles + rotor) lies over them, 14 px clear of each (UR_WIDE_PAD in ur.js) ─────── */
.urb-table { position: relative; width: 100%; }
.urb-band { position: absolute; left: 0; right: 0; height: 70px; }
.urb-band-top { top: 0; }
.urb-band-bot { bottom: 0; }
.urb-band .urb-seat { height: 100%; padding: 0 16px; display: flex; align-items: center; border-radius: 18px; }
.urb-band .urb-seat-main { width: 100%; }
.urb-band .urb-gap { display: block; flex: 0 0 250px; }
.urb-band .urb-who, .urb-band .urb-what { flex: 1 1 0; min-width: 0; }
.urb-band .urb-what { justify-content: flex-end; }
.urb-band .pigr-avatar { width: 44px; height: 44px; font-size: 22px; }
.urb-band .pigr-seat-mid { gap: 5px; }
.urb-rotorbox { position: absolute; left: 50%; top: 0; pointer-events: none; z-index: 4; }
.urb-rotor { position: relative; transform-origin: 0 0; }

/* The online idle notice floats over the top of the screen (Backgammon's .mp-timeout-float): out of flow,
   so it never moves or re-fits the board. */
#ur-mp-game-screen .wrap { position: relative; }

/* ── Phones: a viewport-tall column; the board takes the free height (urRender sizes the tile to it),
   so Roll stands on the chat bar and nothing scrolls. No position: fixed / sticky (the BoardFit traps). ── */
@media (max-width: 999.98px) {
  #ur-game-screen, #ur-mp-game-screen { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; }
  /* 12px side gutters (not .wrap's 1.5rem): at 360 the opponent's card needs the width for its name, its
     level and four dice on one line ("Oppon…" at the default gutter). */
  #ur-game-screen .wrap, #ur-mp-game-screen .wrap { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding-left: 12px; padding-right: 12px; }
  /* Solo's reservation is the screen's own padding (chat.css), so .wrap gives up its gutter; online keeps
     `.has-chatbar .wrap`'s (the bar is mounted on that screen). */
  body.solo-chat-on #ur-game-screen .wrap { padding-bottom: 0; }
  #ur-area, #ur-mp-area { flex: 1 1 auto; display: flex; flex-direction: column; }
  .urb-wrap { flex: 1 1 auto; flex-direction: column; padding: 4px 0 0; }
  .urb-root { flex: 1 1 auto; gap: 10px; }
  /* Basis 0: the slot is handed exactly the free height whatever the board's current size, and
     urRender reads it back to pick the tile. */
  .urb-slot { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .urb-root .pigr-seat { padding: 10px 12px; }
  .urb-root .pigr-avatar { width: 40px; height: 40px; font-size: 20px; }
  .urb-pips i { width: 12px; height: 12px; }
  .urb-home, .urb-threw { display: none; }
  .urb-msg { font-size: 14px; }
  .urb-root .pigr-controls { margin-top: 0; }
  .urb-root .pigr-controls .pigr-btn { height: 54px; }
}