/* Shared page styles for the Limestone pinball tables. */
:root {
  --bg: #07090d; --panel: #0f141c; --line: #1f2835; --ink: #e8eef6; --dim: #8b98aa;
  --accent: #ffd23f; --warn: #ff5a5f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.4 Inter, system-ui, sans-serif; }
body { overflow: hidden; }
.pb { display: flex; height: 100vh; height: 100dvh; width: 100vw; }
.pb-stage { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; padding: 10px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pb-stage canvas { display: block; border-radius: 6px; box-shadow: 0 0 0 1px #243042, 0 18px 50px rgba(0,0,0,0.6); touch-action: none; cursor: pointer; }
.pb-plunge { position: absolute; right: 14px; bottom: 14px; min-width: 72px; min-height: 72px; border-radius: 50%; border: 2px solid #3a4658; background: rgba(15,20,28,0.85); color: var(--accent); font: 700 13px/1 Inter, sans-serif; letter-spacing: 0.08em; touch-action: none; }
.pb-plunge[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .pb-plunge { display: none; } }
.pb-panel { width: 290px; flex: none; background: var(--panel); border-left: 1px solid var(--line); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.pb-nav { display: flex; gap: 16px; }
.pb-nav:empty { display: none; }
.pb-back { color: var(--dim); text-decoration: none; font-size: 13px; }
.pb-back:hover { color: var(--ink); }
h1 { margin: 0; font: 700 22px/1.1 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -0.01em; }
h1 small { display: block; margin-top: 4px; font: 500 12px/1.3 Inter, sans-serif; color: var(--dim); letter-spacing: 0; }
.pb-score { font: 500 34px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); background: #05070a; border: 1px solid var(--line); border-radius: 8px; padding: 14px 12px 12px; text-align: right; font-variant-numeric: tabular-nums; }
.pb-ball { color: var(--dim); font-size: 13px; margin-top: -4px; display: flex; justify-content: space-between; }
.pb-msg { min-height: 52px; border-radius: 8px; background: #05070a; border: 1px solid var(--line); padding: 8px 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.pb-msg strong { font: 700 15px/1.2 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: 0.06em; color: var(--ink); }
.pb-msg span { font-size: 12px; color: var(--dim); }
.pb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-actions button { flex: 1; min-height: 38px; border-radius: 8px; border: 1px solid #2c384a; background: #151c27; color: var(--ink); font: 600 13px Inter, sans-serif; cursor: pointer; }
.pb-actions button:hover { background: #1b2432; }
.pb-actions button[data-start] { background: var(--accent); color: #111; border-color: var(--accent); }
.pb-actions button[hidden] { display: none; }
details { border-top: 1px solid var(--line); padding-top: 10px; color: var(--dim); font-size: 12.5px; }
summary { cursor: pointer; color: var(--ink); font-weight: 600; }
details dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 10px 0 0; }
details dt { color: var(--ink); }
details dd { margin: 0; }
kbd { font: 500 11px 'JetBrains Mono', monospace; background: #1b2432; border: 1px solid #2c384a; border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--ink); }
.pb-note { font-size: 12px; color: var(--dim); margin: 0; }
.is-paused .pb-stage::after { content: 'PAUSED'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 28px 'Bricolage Grotesque', sans-serif; letter-spacing: 0.2em; color: #fff; background: rgba(0,0,0,0.45); pointer-events: none; }

.pb-status { border-radius: 8px; border: 1px solid #2c384a; background: #0b1119; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.pb-status[hidden] { display: none; }
.pb-status strong { font: 700 13px/1.2 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: 0.07em; color: var(--accent); }
.pb-status span { font-size: 12.5px; color: var(--ink); }
.pb-rules { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.pb-rules li { line-height: 1.35; }
.pb-board:empty { display: none; }
.pb-board .lg-board { margin: 0; }

/* Short landscape screens (phones on their side): a slimmer side panel. */
@media (max-height: 520px) and (min-aspect-ratio: 4/5) {
  .pb-panel { width: 200px; padding: 10px; gap: 8px; }
  .pb-nav, .pb-back, h1 small, details, .pb-note, .pb-board { display: none; }
  h1 { font-size: 16px; }
  .pb-score { font-size: 22px; padding: 8px; }
  .pb-msg { min-height: 40px; }
}
/* Portrait and narrow screens: a compact bar above the table. */
@media (max-aspect-ratio: 4/5), (max-width: 700px) {
  .pb { flex-direction: column-reverse; }
  .pb-stage { padding: 4px 4px 6px; }
  .pb-panel { width: 100%; border-left: 0; border-bottom: 1px solid var(--line); padding: 6px 10px; gap: 4px 10px; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; }
  .pb-nav, .pb-back, h1, details, .pb-note, .pb-board { display: none; }
  .pb-score { font-size: 20px; padding: 5px 8px; order: 1; flex: 1 1 auto; min-width: 120px; }
  .pb-msg { order: 2; flex: 2 1 150px; min-height: 36px; padding: 3px 8px; }
  .pb-msg strong { font-size: 13px; }
  .pb-msg span { font-size: 11px; }
  .pb-ball { order: 4; margin: 0; flex: 1 1 100%; font-size: 11.5px; gap: 12px; justify-content: flex-start; }
  .pb-status { order: 3; flex: 1 1 100%; padding: 4px 8px; flex-direction: row; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
  .pb-status strong { font-size: 11.5px; }
  .pb-status span { font-size: 11.5px; }
  .pb-actions { order: 5; flex: 1 1 100%; gap: 6px; }
  .pb-actions button { min-height: 30px; font-size: 12px; }
}

/* Site top bar, matching the arcade cabinets' bar: home, back to the arcade, table name, scores.
   The page is a column (bar, then table); the table refits to whatever height is left. */
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.pb { flex: 1; min-height: 0; height: auto; }
.pb-bar { flex: none; display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 8px 14px 8px 10px; background: #0b121a; border: 1px solid #22303d; border-radius: 12px; }
.pb-bar a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #2c3b4a; color: #c3cfdc; text-decoration: none; font: 500 12.5px Inter, system-ui, sans-serif; white-space: nowrap; transition: color .15s, border-color .15s; }
.pb-bar a:hover { color: var(--accent); border-color: var(--accent); }
.pb-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-bar .pb-home { width: 34px; padding: 0; }
.pb-bar .pb-home svg { width: 17px; height: 17px; display: block; }
.pb-bar-title { flex: 1; min-width: 0; padding-left: 6px; line-height: 1.1; }
.pb-bar-eyebrow { display: flex; align-items: center; gap: 7px; font: 500 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.pb-bar-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff6a3d; box-shadow: 0 0 8px #ff6a3d; }
.pb-bar-title strong { display: block; margin-top: 3px; font: 700 19px/1.1 'Bricolage Grotesque', Inter, sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-bar-scores { display: flex; gap: 18px; }
.pb-bar-scores span { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.pb-bar-scores small { font: 500 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.pb-bar-scores b { font: 600 19px 'JetBrains Mono', ui-monospace, monospace; color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-bar-scores span + span b { color: var(--accent); }
/* Phones: one slim row. The backbox already shows the score. */
@media (max-width: 600px) {
  .pb-bar { margin: 6px 6px 0; padding: 5px 8px 5px 6px; gap: 6px; border-radius: 10px; }
  .pb-bar a { min-height: 32px; padding: 0 11px; }
  .pb-bar .pb-home { width: 32px; }
  .pb-bar-eyebrow, .pb-bar-scores { display: none; }
  .pb-bar-title strong { margin: 0; font-size: 16px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 4/5) {
  .pb-bar { margin: 4px 6px 0; padding: 3px 8px 3px 4px; }
  .pb-bar a { min-height: 28px; }
  .pb-bar .pb-home { width: 28px; }
  .pb-bar-eyebrow { display: none; }
  .pb-bar-title strong { margin: 0; font-size: 15px; }
  .pb-bar-scores small { display: none; }
  .pb-bar-scores b { font-size: 15px; }
}