/* =====================================================================
   BANGBOWBING OS — MATCH panel + shared os/games/* renderers
   (ledger items 39-41). Linked after os.css/chat.css so RPG-panel tokens
   (radius, colour ramps) from os.css cascade in here unchanged.
   ===================================================================== */

.match-app { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--screen); }
.match-empty { padding: 24px 16px; text-align: center; }
.match-wrap { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 0; overflow: auto; }
.match-reconnect {
  padding: 7px 10px; border-radius: 6px; font-size: 12px;
  color: #ffe0c9; background: rgba(255, 154, 61, 0.16); border: 1px solid rgba(255, 154, 61, 0.4);
}
.match-board { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.match-footer { display: flex; flex-direction: column; gap: 8px; }
.match-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid var(--screen-rim); }

/* -------------------------------------------------------- shared widgets */
.g-kicker { font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--screen-ink); }
.g-kicker.go { color: var(--tang); }
.g-seats { display: flex; gap: 10px; }
.g-seat { display: flex; gap: 6px; align-items: baseline; padding: 3px 8px; border-radius: 999px; background: var(--screen-2); font-size: 11.5px; }
.g-seat.you { outline: 1px solid var(--aqua-lt); }
.g-seat-name { font-weight: 700; }
.g-seat-lvl { color: var(--screen-dim); font-size: 10px; }

.g-bar { position: relative; height: 6px; width: 100%; max-width: 320px; border-radius: 3px; background: var(--screen-2); overflow: hidden; }
.g-bar-fill { display: block; height: 100%; background: var(--aqua-lt); transition: width 0.18s linear; }
.g-bar-fill.low { background: var(--candy); }

.g-fire { width: 100%; max-width: 220px; height: 56px; font-size: 15px; letter-spacing: 0.06em; }
.g-choices { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.g-choice { min-width: 92px; }

.g-result { margin-top: 6px; padding: 12px; border-radius: 6px; text-align: center; background: var(--screen-2); border: 1px solid var(--screen-rim); }
.g-result-title { font-family: var(--font-display, var(--font-ui)); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.g-result.win .g-result-title { color: #7ce7a4; }
.g-result.lose .g-result-title { color: var(--candy); }
.g-result.draw .g-result-title { color: var(--aqua-lt); }
.g-result-line { font-size: 12px; color: var(--screen-dim); margin-top: 3px; }

.g-stats { display: flex; gap: 14px; font-size: 12px; }
.g-stat { display: flex; gap: 5px; }
.g-stat-k { color: var(--screen-dim); }
.g-stat-v { font-weight: 700; }

/* ----------------------------------------------------------- duel/beam */
.g-duel, .g-roulette, .g-beam, .g-doomsday { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.g-chambers { display: flex; gap: 6px; }
.g-chamber { width: 16px; height: 16px; border-radius: 50%; background: var(--screen-2); border: 1px solid var(--screen-rim); }
.g-chamber.spent { background: var(--candy); border-color: var(--candy); }
.g-tug { position: relative; height: 14px; width: 100%; max-width: 320px; border-radius: 7px; background: var(--screen-2); overflow: hidden; }
.g-tug-fill { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, var(--aqua-lt), var(--candy)); transition: width 0.12s linear; }
.g-pot { font-family: var(--font-display, var(--font-ui)); font-size: 18px; font-weight: 700; color: var(--tang); }
.g-barhost { width: 100%; display: flex; justify-content: center; }

.g-clock { font-family: var(--font-display, var(--font-ui)); font-size: 13px; color: var(--screen-dim); }
.g-drop-warn { font-size: 11px; color: var(--candy); min-height: 14px; }
.g-drop-warn.hidden { display: none; }   /* R-1: was toggled but never defined */

/* ------------------------------------------------------------- grids */
.g-grid {
  display: grid;
  grid-template-columns: repeat(var(--gw, 8), minmax(6px, 1fr));
  grid-template-rows: repeat(var(--gh, 8), minmax(6px, 1fr));
  gap: 1px;
  width: 100%;
  max-width: 320px;
  min-height: 160px;
  aspect-ratio: var(--gw, 8) / var(--gh, 8);
  background: var(--screen-rim);
  border: 1px solid var(--screen-rim);
  box-sizing: border-box;
}
.g-cell {
  padding: 0; margin: 0; border: 0; border-radius: 0;
  background: var(--screen); color: var(--screen-ink);
  font-size: clamp(9px, 2.4vw, 18px); line-height: 1;
  display: grid; place-items: center; min-width: 0; min-height: 0;
}
.g-chess .g-cell { font-size: clamp(14px, 3.2vw, 22px); }
.g-cell.light { background: #2a2740; }
.g-cell.dark { background: #1c1a2c; }
.g-cell.sel { outline: 2px solid var(--tang); outline-offset: -2px; }
.g-cell.trail.s0, .g-cell.head.s0 { background: var(--aqua-lt); }
.g-cell.trail.s1, .g-cell.head.s1 { background: var(--candy); }
.g-cell.ship { background: #4a4f74; }
.g-cell.hit { background: var(--candy); }
.g-cell.miss { background: var(--screen-3); }
.g-cell.filled { background: var(--aqua-lt); }

/* --------------------------------------------------------------- tron */
.g-tron { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.g-tron-controls, .g-tetris-controls, .g-pong-controls { display: flex; gap: 8px; justify-content: center; }

/* --------------------------------------------------------------- pong */
.g-pong { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.g-pong-stage { position: relative; width: 100%; max-width: 320px; aspect-ratio: 3 / 2; background: #14121f; border: 1px solid var(--screen-rim); overflow: hidden; }
.g-ball { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #fff; }
.g-paddle { position: absolute; width: 6px; height: 22%; margin-top: -11%; background: var(--aqua-lt); }
.g-paddle.a { left: 2%; }
.g-paddle.b { right: 2%; background: var(--candy); }

/* ------------------------------------------------------- battleship */
.g-bs-boards { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.g-bs-label { font-size: 10.5px; color: var(--screen-dim); margin-bottom: 3px; text-align: center; }

/* ------------------------------------------------- blackjack / ceelo */
.g-blackjack, .g-ceelo { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; }
.g-bj-hand { font-size: 13px; }
.g-bj-bet { width: 100px; }

@media (prefers-reduced-motion: reduce) {
  .g-bar-fill, .g-tug-fill { transition: none; }
}