/* frontend/bank-shell.css — Pig + Farkle VS THE BANK on the race shell, variant C "Seat + table"
   (old-games overhaul 2c item 1; owner picked C 2026-10-10; the mock and its measurements:
   bank-redesign-preview.html). Shared by both games through frontend/bank-shell.js.

   The board is the race's own `.pigr-root` (seat cards, centre card, dice, keys, all from style.css);
   this file adds only the bank-mode pieces under `bkr-`:
     · the bank's seat card, which is a SWITCH for the payout table (`.bkr-flip`, "📋 Table" hint);
     · the table (`.bkr-ladder`): on PC a panel sliding into the empty width beside the board
       (`.bkr-side`, absolute: nothing on the board moves); on a phone the bank card's BACK face
       (`.is-strip`, a row of rungs: both faces share one grid cell, so the card keeps one height);
     · your card's bet chip, the bet sheet, the second key (Change bet), the foot (Finish up + the
       provably-fair line).
   Root classes, written by bank-shell.js: `.is-table` (the table is open; remembered per player),
   `.is-sheet` (the bet sheet is up).
   ⛔ No position: fixed / sticky inside the root (BoardFit's guard; sticky sticks to nothing here).
   The root is position: relative so the sheet and the side panel anchor to it, scaled with it. */

.bkr-root { position: relative; }

/* ── The bank's card: a seat, a switch ───────────────────────────────────────────────────────── */
.bkr-flip { cursor: pointer; perspective: 900px; -webkit-tap-highlight-color: transparent; min-width: 0; }
.bkr-flip:focus-visible { outline: 2px solid var(--pgr-sel); outline-offset: 3px; border-radius: 20px; }
.bkr-flip-inner { display: grid; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
/* Both faces in ONE grid cell: the card is as tall as the taller face, flipped or not. */
.bkr-face { grid-area: 1 / 1; display: flex; min-width: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bkr-face > * { flex: 1 1 auto; min-width: 0; }
.bkr-face-back { transform: rotateY(180deg); }
.bkr-bank .pigr-avatar { background: rgba(240,183,90,.10); }
.bkr-bank .pigr-progress-fill { background: #f0b75a; transition: width .3s ease; }
.bkr-hint {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--pgr-dim); border: 1px solid var(--pgr-line); background: rgba(255,255,255,.04);
}
.bkr-root.is-table .bkr-hint { color: var(--pgr-sel); border-color: var(--pgr-sel); background: var(--pgr-selBg); }

/* ── Your card: the bet chip, the round's result, the mood face in the avatar ───────────────── */
.bkr-chip {
  margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
  color: #f0d79a; background: rgba(240,183,90,.12); border: 1px solid rgba(240,183,90,.35);
}
/* LOCKED rows: a name row that wraps grows the card (measured: the bank card 88 → 99 px when "one more
   roll: 3,564" widened its score column; your card 126 → 160 px when the round's result joined the name
   row). So no name row wraps; the round's result sits under your balance (where "coins" is); and the
   "Table" word drops to the 📋 icon whenever the card's middle is too narrow to hold it. */
.bkr-root .pigr-seat-namerow { flex-wrap: nowrap; overflow: hidden; align-items: center; }
/* Fixed-height pills: an emoji-only pill and a text pill have different line boxes (the bank card was
   4 px taller whenever "Table" showed beside the icon). */
.bkr-hint, .bkr-chip { display: inline-flex; align-items: center; height: 20px; line-height: 1; box-sizing: border-box; flex: none; }
.bkr-root .pigr-score-sub { white-space: nowrap; }
.bkr-bank .pigr-seat-mid { container-type: inline-size; }
.bkr-root .pigr-name { white-space: nowrap; flex: none; }   /* a shrinking name wrapped to two lines (21 → 42 px) */
@container (max-width: 155px) { .bkr-hint-txt { display: none; } }
.bkr-you .pigr-score-sub.is-win { color: var(--pgr-sel); font-weight: 700; }
.bkr-you .pigr-score-sub.is-lose { color: #E24B4A; font-weight: 700; }
.bkr-you .pigr-progress { visibility: hidden; }        /* held: the race seat's row height, no meaning here */
.bkr-you .face-wrap { margin: 0; font-size: clamp(22px, 4.6vw, 28px); }

/* ── Centre: the message line + the commentary under it, both height-locked ─────────────────── */
/* LOCKED: two lines of message + one of commentary, whatever is said (a third line grew the board by
   23 px between states). Long text clamps instead of pushing the keys. */
.bkr-msg { flex-direction: column; gap: 2px; height: calc(2.64em + 19px); min-height: 0; overflow: hidden; }
.bkr-msg-main { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bkr-msg .commentary { margin-top: 0; min-height: 0; height: 17px; line-height: 17px; font-size: 12px; color: var(--pgr-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bkr-msg-main.is-lose { color: #E24B4A; }
.bkr-msg-main.is-win { color: #1D9E75; }

/* ── Keys: the race's; "Change bet" is the quieter second key ───────────────────────────────── */
.bkr-root .pigr-btn.bkr-alt { flex: 0 0 34%; background: transparent; border: 1.5px solid var(--pgr-line); color: var(--pgr-dim); box-shadow: none; }
.bkr-root .pigr-btn[hidden] { display: none; }

/* ── The foot: Finish up (between rounds; its room is always held) + provably fair ─────────── */
.bkr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; font-size: 12px; color: var(--pgr-dim); }
.bkr-finish {
  font: inherit; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  color: var(--pgr-txt); background: rgba(255,255,255,.05); border: 1px solid var(--pgr-line);
}
.bkr-finish.is-off { visibility: hidden; }
.bkr-fair { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── The bet sheet: a centred pop-up over the dimmed board, INSIDE the root (Blackjack's rule:
   a body-level backdrop would paint over a sheet in a scaled board) ──────────────────────── */
.bkr-sheet-back, .bkr-sheet { display: none; }
.bkr-root.is-sheet .bkr-sheet-back { display: block; position: absolute; inset: -8px; background: rgba(8,9,11,.62); border-radius: 18px; z-index: 20; }
.bkr-root.is-sheet .bkr-sheet {
  display: flex; flex-direction: column; gap: 12px; text-align: center;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 21;
  width: min(340px, calc(100% - 24px)); box-sizing: border-box; padding: 18px 18px 16px; border-radius: 20px;
  background: #1c1e23; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
}
.bkr-sheet-title { font-size: 13px; letter-spacing: .16em; font-weight: 800; color: var(--pgr-dim); text-transform: uppercase; }
.bkr-sheet-amt { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bkr-coin { font-size: 26px; }
.bkr-sheet-amt input {
  width: 5.2em; font: inherit; font-size: 36px; font-weight: 800; text-align: center; color: var(--pgr-txt);
  background: rgba(255,255,255,.04); border: 1px solid var(--pgr-line); border-radius: 12px; padding: 2px 6px;
  -moz-appearance: textfield; appearance: textfield;
}
.bkr-sheet-amt input::-webkit-outer-spin-button, .bkr-sheet-amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bkr-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bkr-quick button {
  font: inherit; font-size: 13px; font-weight: 700; height: 34px; border-radius: 10px; cursor: pointer;
  color: var(--pgr-txt); background: rgba(255,255,255,.05); border: 1px solid var(--pgr-line);
}
.bkr-quick button.bet-max-active { border-color: #E24B4A; color: #ff8b8b; }
.bkr-sheet-note { font-size: 12px; color: var(--pgr-dim); min-height: 1.3em; }
/* flex: none — `.pigr-btn-roll` is `flex: 1` for the key ROW; in a column that is a 0 basis and
   the button collapses to its text's height. */
.bkr-sheet-go { width: 100%; flex: none; }

/* ── The table (the ladder) ──────────────────────────────────────────────────────────────────── */
.bkr-ladder {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; box-sizing: border-box;
  border-radius: 20px; background: var(--pgr-seat); border: 1px solid var(--pgr-line);
}
.bkr-ladder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; font-size: 14px; }
.bkr-ladder-head span:last-child { font-size: 12px; font-weight: 600; color: var(--pgr-dim); }
.bkr-ladder ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.bkr-ladder li {
  display: grid; grid-template-columns: 1fr auto 3.4em; gap: 10px; align-items: center;
  padding: 5px 10px; border-radius: 10px; font-size: 14px; color: var(--pgr-dim); font-variant-numeric: tabular-nums;
}
.bkr-ladder li b { text-align: right; color: var(--pgr-txt); }
.bkr-ladder li.is-now { background: var(--pgr-selBg); color: var(--pgr-txt); box-shadow: inset 0 0 0 1.5px var(--pgr-sel); }
.bkr-ladder li.is-now b { color: var(--pgr-sel); }
.bkr-ladder li.is-next { box-shadow: inset 0 0 0 1px var(--pgr-line); }
.bkr-ladder-foot { font-size: 12px; color: var(--pgr-dim); }
.bkr-session { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 12px; color: var(--pgr-dim); border-top: 1px solid var(--pgr-line); padding-top: 8px; }
.bkr-session span { flex-basis: 100%; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.bkr-session b { color: var(--pgr-txt); font-weight: 700; }
.bkr-session b.is-pos { color: var(--pgr-sel); }
.bkr-session b.is-neg { color: #E24B4A; }

/* The strip: the phone's back face, one row of rungs. */
.bkr-ladder.is-strip { padding: 8px 10px; gap: 0; border-radius: 20px; justify-content: center; }
.bkr-ladder.is-strip .bkr-ladder-head,
.bkr-ladder.is-strip .bkr-ladder-foot,
.bkr-ladder.is-strip .bkr-session { display: none; }
.bkr-ladder.is-strip ol { flex-direction: row; gap: 4px; }
.bkr-ladder.is-strip li { flex: 1 1 0; min-width: 0; grid-template-columns: 1fr; gap: 0; padding: 4px 2px; text-align: center; font-size: 11px; }
.bkr-ladder.is-strip li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkr-ladder.is-strip li b { text-align: center; font-size: 15px; }
.bkr-ladder.is-strip li span:nth-child(2) { display: none; }

/* PC never flips: the card stays, and the full table slides in beside the board. */
.bkr-side { display: none; }
@media (max-width: 999.98px) {
  .bkr-root.is-table .bkr-flip-inner { transform: rotateY(180deg); }
}
@media (min-width: 1000px) {
  .bkr-face-back { display: none; }
  .bkr-side {
    display: block; position: absolute; top: 0; right: 0; width: 300px; z-index: 5; cursor: pointer;
    opacity: 0; transform: translateX(14px); pointer-events: none; transition: opacity .22s ease, transform .22s ease;
  }
  .bkr-root.is-table .bkr-side { opacity: 1; transform: none; pointer-events: auto; }
  /* The message is a full-width block with centred words: keep its words in the centre column so
     the open table never sits on them. */
  .bkr-root .pigr-msg { max-width: 500px; margin-left: auto; margin-right: auto; }
  .bkr-root .pigr-controls { margin-top: auto; }
}

/* ── Phone: a viewport-tall column, the keys its last row, standing on the chat bar ─────────────
   Only while the bank board is up (`.bkr-on` on the screen: game.js showPigClassic /
   showFarkleClassic set it, every other path on these screens clears it). chat.css pads the screen
   for the bar (--cb-reserve); `.wrap` gives up its bottom gutter so the keys end on it. */
@media (max-width: 999.98px) {
  #pig-game-screen.bkr-on, #farkle-game-screen.bkr-on { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; }
  /* Tight gutters and row gaps: a 360 × 740 phone has no height to spare (it scrolled 24 px on the
     page's 1.5rem gutter and the race's vh gaps). */
  .bkr-on > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; }
  .bkr-on .bkr-root, .bkr-on .bkr-root .pigr-center { gap: 10px; }
  .bkr-on .bkr-wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
  .bkr-on .bkr-root { flex: 1 1 auto; }
  .bkr-on .bkr-root .pigr-controls { margin-top: auto; }
}

/* The end screen's stat card (GameEndScreen `html` section). */
.bkr-endstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.bkr-endstats div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.bkr-endstats span { color: var(--pgr-dim, #83858b); }