/* Basketball live recording — every basketball rule lives here, scoped under
   #bb-overlay, so basketball never edits the shared style.css
   (docs/basketball-v1/live-build-plan.md §4).

   Fixed tokens, declared on the overlay rather than inherited: like the
   planner (#gp-overlay), this surface ignores the app's dark-mode tokens.
   Stacking follows #sg-overlay: fixed, covering the app chrome, z-index 1600. */

#bb-overlay {
  position: fixed; inset: 0; z-index: 1600; display: none;
  flex-direction: column; overflow-y: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bb-navy: #002147; --bb-sky: #2E8FC4; --bb-sky-pale: #D2E9F5; --bb-alert: #B4483C;
  --bb-ground: #F4F6F8; --bb-card: #FFFFFF; --bb-ink: #12212F; --bb-ink-2: #3E4E5E;
  --bb-muted: #7C8794; --bb-edge: #E1E6EC;
  background: var(--bb-ground); color: var(--bb-ink);
}

#bb-overlay .bb-screen {
  display: flex; flex-direction: column; gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 16px 24px;
  max-width: 720px; width: 100%; margin: 0 auto; box-sizing: border-box;
}

#bb-overlay .bb-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
#bb-overlay .bb-back {
  min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--bb-edge);
  border-radius: 10px; background: var(--bb-card); color: var(--bb-navy);
  font: 600 15px/1 Inter, sans-serif; cursor: pointer;
}
#bb-overlay .bb-title { font: 700 18px/1.2 Inter, sans-serif; color: var(--bb-navy); }

#bb-overlay .bb-board {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: var(--bb-navy); color: #fff; border-radius: 14px; padding: 16px;
}
#bb-overlay .bb-side { text-align: center; }
#bb-overlay .bb-side-name { font: 600 13px/1.2 Inter, sans-serif; opacity: 0.8; }
#bb-overlay .bb-score { font: 800 40px/1.1 Archivo, Inter, sans-serif; }
#bb-overlay .bb-period { font: 700 15px/1 Inter, sans-serif; letter-spacing: 0.04em; }

#bb-overlay .bb-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--bb-ink-2); }
#bb-overlay .bb-unsaved { color: var(--bb-alert); font-weight: 600; }
#bb-overlay .bb-note { font-size: 14px; color: var(--bb-muted); }
#bb-overlay .bb-alert { color: var(--bb-alert); }

/* ── Batch (a2): the phone Scoring tab (design: MainB.dc.html, Version B) ──
   Every control is at least 44 × 44 px. */

#bb-overlay .bb-screen.bb-live {
  max-width: 520px; padding: 0; gap: 0; min-height: 100%; position: relative;
  background: #FFFFFF;
}
#bb-overlay .bb-topbar {
  height: 52px; flex: none; background: #001433; color: #FFFFFF; display: flex; align-items: center;
  padding: 0 2px; padding-top: env(safe-area-inset-top);
}
#bb-overlay .bb-icon {
  width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: #FFFFFF;
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 10px;
}
#bb-overlay .bb-icon:disabled { opacity: 0.35; cursor: default; }
#bb-overlay .bb-topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; font-weight: 700; }
#bb-overlay .bb-topbar-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bb-overlay .bb-topbar-sub { font-size: 11px; font-weight: 500; color: #D2E9F5; }
#bb-overlay .bb-topbar-sub .bb-unsaved { color: #FFD7C7; }

#bb-overlay .bb-live .bb-board {
  border-radius: 0; background: var(--bb-navy); padding: 10px 14px 12px;
  grid-template-columns: 1fr auto 1fr;
}
#bb-overlay .bb-side { display: flex; flex-direction: column; gap: 3px; }
#bb-overlay .bb-side-own { align-items: flex-start; text-align: left; }
#bb-overlay .bb-side-opp { align-items: flex-end; text-align: right; }
#bb-overlay .bb-side-name { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #D2E9F5; opacity: 1; }
#bb-overlay .bb-live .bb-score {
  min-height: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; color: #FFFFFF;
  font: 800 38px/1 Archivo, Inter, sans-serif; cursor: pointer;
}
#bb-overlay .bb-side-line { font-size: 12px; color: #D2E9F5; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#bb-overlay .bb-side-line b { color: #FFFFFF; }
/* Sky Pale on the navy scoreboard, not gold: Earned Gold is for earned
   moments, and recording screens don't use it (Mike, Oct 27). */
#bb-overlay .bb-bonus {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--bb-navy); background: var(--bb-sky-pale);
  border-radius: 4px; padding: 1px 5px;
}
#bb-overlay .bb-bonus-in { font-size: 11px; }
#bb-overlay .bb-mid { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#bb-overlay .bb-live .bb-period { color: #FFFFFF; font: 800 15px/1 Archivo, Inter, sans-serif; }
#bb-overlay .bb-clock {
  min-width: 112px; height: 54px; border-radius: 12px; background: #001433; border: 1.5px solid rgba(210, 233, 245, 0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #FFFFFF;
}
#bb-overlay .bb-clock-time { font: 800 26px/1 Archivo, Inter, sans-serif; }
#bb-overlay .bb-clock-cap { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #D2E9F5; }

#bb-overlay .bb-body { flex: 1; overflow-y: auto; padding-bottom: 8px; }

#bb-overlay .bb-oppstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 10px 0; }
#bb-overlay .bb-opp {
  min-height: 48px; border-radius: 12px; border: 0; background: #2C3E55; color: #FFFFFF; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
#bb-overlay .bb-opp-cap { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: #D2E9F5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bb-overlay .bb-opp-l { font: 800 15px/1 Archivo, Inter, sans-serif; }

#bb-overlay .bb-pad { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; gap: 6px; padding: 10px 10px 0; }
#bb-overlay .bb-col { display: flex; flex-direction: column; gap: 6px; }
#bb-overlay .bb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(56px, 1fr); gap: 6px; }
#bb-overlay .bb-key {
  min-height: 56px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0; cursor: pointer; font-family: Inter, system-ui, sans-serif; color: var(--bb-navy);
}
#bb-overlay .bb-col .bb-key { flex: 1; min-height: 120px; border-radius: 16px; }
#bb-overlay .bb-key-big { font: 800 20px/1 Archivo, Inter, sans-serif; }
#bb-overlay .bb-col .bb-key-big { font-size: 30px; }
#bb-overlay .bb-key-sub { font-size: 11px; font-weight: 700; }
#bb-overlay .bb-made { background: var(--bb-navy); color: #FFFFFF; border: 0; }
#bb-overlay .bb-made3 { background: #001433; }
#bb-overlay .bb-miss { background: #FFFFFF; border: 2px solid var(--bb-navy); }
#bb-overlay .bb-ft-made { background: var(--bb-navy); color: #FFFFFF; border: 0; }
#bb-overlay .bb-ft-miss { background: #FFFFFF; border: 1.5px solid var(--bb-navy); }
#bb-overlay .bb-soft { background: #D2E9F5; border: 0; }

#bb-overlay .bb-stoprow { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px; padding: 8px 10px 0; }
#bb-overlay .bb-stop { min-height: 52px; border-radius: 12px; cursor: pointer; font: 800 16px/1 Archivo, Inter, sans-serif; }
#bb-overlay .bb-ourfoul { background: #FFFFFF; color: var(--bb-alert); border: 2px solid var(--bb-alert); }
#bb-overlay .bb-timeout { background: #E8ECF2; color: var(--bb-navy); border: 1.5px solid #C9D2DC; font-size: 13px; }

#bb-overlay .bb-court { padding: 10px 10px 0; }
#bb-overlay .bb-court-head { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #5A6878; padding: 0 2px 4px; }
#bb-overlay .bb-court-row { display: flex; align-items: flex-start; gap: 2px; }
#bb-overlay .bb-slot { width: 58px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#bb-overlay .bb-disc {
  width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; box-sizing: border-box;
  border: 1.5px solid #B9C4D0; display: flex; align-items: center; justify-content: center;
  font: 800 18px/1 Archivo, Inter, sans-serif; color: var(--bb-navy);
}
#bb-overlay .bb-disc-oneLeft { border: 3px solid var(--bb-alert); }
#bb-overlay .bb-disc-open, #bb-overlay .bb-disc-out { border: 2px dashed #8C9AAB; background: transparent; color: #5A6878; }
#bb-overlay .bb-disc-name { font-size: 10px; font-weight: 600; white-space: nowrap; max-width: 58px; overflow: hidden; text-overflow: ellipsis; }
#bb-overlay .bb-dots { display: flex; gap: 2px; }
#bb-overlay .bb-dot { width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box; border: 1px solid #8C9AAB; }
#bb-overlay .bb-dot-on { background: var(--bb-navy); border: 0; }
#bb-overlay [data-level="oneLeft"] .bb-dot-on { background: var(--bb-alert); }
#bb-overlay .bb-disc-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; color: var(--bb-navy); }
#bb-overlay .bb-tag-oneLeft, #bb-overlay .bb-tag-out { color: var(--bb-alert); }
#bb-overlay .bb-sub {
  margin-left: auto; width: 56px; min-height: 56px; border-radius: 12px; border: 1.5px solid #C9D2DC;
  background: #FFFFFF; color: var(--bb-navy); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
}
#bb-overlay .bb-sub span { font-size: 11px; font-weight: 700; }

#bb-overlay .bb-last {
  margin: 10px 10px 0; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 12px;
  border-radius: 12px; background: #F4F6F8; font-size: 13px; color: var(--bb-ink);
}
#bb-overlay .bb-last-t { font-size: 11px; font-weight: 700; color: #5A6878; white-space: nowrap; }
#bb-overlay .bb-last-what { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bb-overlay .bb-last-d { font: 800 14px/1 Archivo, Inter, sans-serif; }
#bb-overlay .bb-undo, #bb-overlay .bb-chip {
  min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #C9D2DC;
  background: #FFFFFF; color: var(--bb-navy); font-weight: 700; font-size: 13px; cursor: pointer;
}
#bb-overlay .bb-foulrow { background: #FBEAE3; flex-wrap: wrap; padding: 6px; row-gap: 6px; }
#bb-overlay .bb-foulrow .bb-last-what { flex-basis: 100%; padding-left: 6px; }
#bb-overlay .bb-foulrow .bb-chip { flex: 1; }

#bb-overlay .bb-tabs {
  position: sticky; bottom: 0; flex: none; display: grid; grid-template-columns: repeat(3, 1fr);
  background: #001433; padding-bottom: env(safe-area-inset-bottom);
}
#bb-overlay .bb-tab {
  height: 62px; border: 0; background: transparent; color: #8FA6BD; cursor: pointer; font: 600 13px/1 Inter, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
#bb-overlay .bb-tab-on { color: #FFFFFF; }
#bb-overlay .bb-tab-bar { width: 28px; height: 3px; border-radius: 2px; background: transparent; }
#bb-overlay .bb-tab-on .bb-tab-bar { background: var(--bb-sky); }
#bb-overlay .bb-pad-off { padding: 24px 16px; }

/* Popups: a bottom sheet over a scrim */
#bb-overlay .bb-scrim { position: fixed; inset: 0; background: rgba(0, 20, 51, 0.55); z-index: 1; }
#bb-overlay .bb-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; max-width: 520px; margin: 0 auto;
  background: #FFFFFF; border-radius: 20px 20px 0 0; padding: 14px 14px max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; max-height: 85vh; overflow-y: auto;
}
#bb-overlay .bb-sheet-head { display: flex; align-items: center; gap: 10px; }
#bb-overlay .bb-sheet-title { flex: 1; font: 800 21px/1.15 Archivo, Inter, sans-serif; color: var(--bb-navy); }
#bb-overlay .bb-pill {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; border-radius: 8px; padding: 6px 9px;
  background: var(--bb-navy); color: #FFFFFF;
}
#bb-overlay .bb-pill-miss { background: #FFFFFF; color: var(--bb-navy); border: 1.5px solid var(--bb-navy); }
#bb-overlay .bb-link {
  min-height: 44px; min-width: 44px; border: 0; background: transparent; color: #1D6A96;
  font: 700 14px/1 Inter, sans-serif; padding: 0 6px; cursor: pointer;
}
#bb-overlay .bb-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#bb-overlay .bb-pgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#bb-overlay .bb-pbtn {
  min-height: 96px; border-radius: 16px; border: 1.5px solid #D9DEE4; background: #FFFFFF; color: var(--bb-navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 4px;
}
#bb-overlay .bb-pbtn-n { font: 800 26px/1 Archivo, Inter, sans-serif; }
#bb-overlay .bb-pbtn-name { font-size: 12px; font-weight: 600; text-align: center; }
#bb-overlay .bb-pbtn-bench { border: 1.5px dashed #8C9AAB; color: #5A6878; font-size: 12px; font-weight: 700; }
#bb-overlay .bb-xbtn {
  min-height: 96px; border-radius: 16px; font: 800 14px/1.2 Inter, sans-serif; padding: 0 8px; cursor: pointer;
  background: #FFFFFF; color: var(--bb-navy); border: 1.5px solid var(--bb-navy);
}
#bb-overlay .bb-xbtn-primary { background: var(--bb-navy); color: #FFFFFF; border: 0; }
#bb-overlay .bb-paint {
  min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 12px; border-radius: 14px;
  background: #FFFFFF; border: 1.5px solid #D9DEE4; color: var(--bb-navy); font: 700 15px/1 Inter, sans-serif; cursor: pointer; align-self: flex-start;
}
#bb-overlay .bb-paint-on { background: #D2E9F5; border: 2px solid var(--bb-sky); }
#bb-overlay .bb-paint-box {
  width: 24px; height: 24px; border-radius: 6px; box-sizing: border-box; border: 2px solid #8C9AAB;
  display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-weight: 800;
}
#bb-overlay .bb-paint-on .bb-paint-box { background: var(--bb-navy); border: 0; }
#bb-overlay .bb-done {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 0 0 10px; border-radius: 12px; background: #D2E9F5;
  font-size: 13px; color: var(--bb-navy);
}
#bb-overlay .bb-done-tick {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--bb-navy); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
#bb-overlay .bb-done-what { flex: 1; min-width: 0; }

/* ── Batch (b): clock and period buttons, the CHECK CLOCK cue, the sub and
   clock sheets, the end of a period or the game. ────────────────────────── */
#bb-overlay button.bb-period {
  min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
}
#bb-overlay button.bb-clock { font: inherit; cursor: pointer; padding: 0 10px; }
#bb-overlay button.bb-clock:disabled, #bb-overlay button.bb-period:disabled { cursor: default; opacity: 0.6; }
#bb-overlay .bb-clock-cue { background: #0B3A66; border: 2px solid var(--bb-sky); box-shadow: 0 0 0 4px rgba(46, 143, 196, 0.25); }
#bb-overlay .bb-clock-cue .bb-clock-cap { color: #FFFFFF; background: var(--bb-sky); border-radius: 4px; padding: 1px 5px; }
#bb-overlay .bb-note-line { background: #D2E9F5; color: var(--bb-navy); }
#bb-overlay .bb-sheet button:disabled { opacity: 0.4; cursor: default; }

#bb-overlay .bb-sub-stamp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--bb-ink-2); }
#bb-overlay .bb-sub-stamp .bb-link { margin-left: auto; }
#bb-overlay .bb-subcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bb-overlay .bb-subcols > div { display: flex; flex-direction: column; gap: 6px; }
#bb-overlay .bb-subcol-h { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #5A6878; }
#bb-overlay .bb-subrow {
  min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 12px; box-sizing: border-box;
  background: #FFFFFF; border: 1px solid #D9DEE4; color: var(--bb-navy); text-align: left; cursor: pointer; font: inherit;
}
#bb-overlay .bb-subrow-on { background: #D2E9F5; border: 2px solid var(--bb-sky); }
#bb-overlay .bb-subrow-n {
  width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1.5px solid #B9C4D0; display: flex; align-items: center;
  justify-content: center; font: 800 14px/1 Archivo, Inter, sans-serif; box-sizing: border-box; background: #FFFFFF;
}
#bb-overlay .bb-subrow-flag .bb-subrow-n { border: 3px solid var(--bb-alert); }
#bb-overlay .bb-subrow-guest { border: 1.5px dashed var(--bb-sky); }
#bb-overlay .bb-subrow-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
#bb-overlay .bb-subrow-text span { font-size: 11px; color: #5A6878; }
#bb-overlay .bb-subrow-flag .bb-subrow-text span { color: var(--bb-alert); font-weight: 700; }
#bb-overlay .bb-sub-foot { display: flex; align-items: center; gap: 10px; }
#bb-overlay .bb-sub-foot span { flex: 1; font-weight: 700; color: var(--bb-navy); }
#bb-overlay .bb-makesub { min-height: 52px; flex: none; padding: 0 18px; }

#bb-overlay .bb-clockshow { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#bb-overlay .bb-clockshow-v { font: 800 44px/1 Archivo, Inter, sans-serif; color: var(--bb-navy); }
#bb-overlay .bb-clockshow-was { font-size: 12px; color: #5A6878; }
#bb-overlay .bb-alertbox { background: #FBEAE3; color: #8A2A0B; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
#bb-overlay .bb-nudges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#bb-overlay .bb-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#bb-overlay .bb-keypad-k {
  min-height: 52px; border-radius: 12px; border: 1px solid #D9DEE4; background: #F4F6F8; color: var(--bb-navy);
  font: 800 20px/1 Archivo, Inter, sans-serif; cursor: pointer;
}
#bb-overlay .bb-set, #bb-overlay .bb-endperiod { min-height: 52px; }
#bb-overlay .bb-endperiod { background: #D2E9F5; border: 1.5px solid var(--bb-sky); }
#bb-overlay .bb-divider { height: 1px; background: #E1E6EC; }

/* ── Polish after the Oct 26 iPhone check ────────────────────────────────────
   The Scoring tab fits the height it is given — Safari (with its address and
   tool bars) has less than the app — by letting the pad's rows share what is
   left, never below 44 px; if even that does not fit (a small phone in
   Safari), the body scrolls rather than shrink a control. */
#bb-overlay .bb-screen.bb-live { height: 100%; min-height: 0; }
#bb-overlay .bb-live .bb-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 6px; }
#bb-overlay .bb-scoring { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#bb-overlay .bb-scoring .bb-pad { flex: 1 1 auto; min-height: 200px; }
#bb-overlay .bb-scoring .bb-grid { grid-template-rows: repeat(4, minmax(44px, 1fr)); grid-auto-rows: minmax(44px, 1fr); }
#bb-overlay .bb-scoring .bb-grid .bb-key { min-height: 44px; }
#bb-overlay .bb-scoring .bb-col .bb-key { min-height: 94px; }
#bb-overlay .bb-scoring .bb-oppstrip, #bb-overlay .bb-scoring .bb-stoprow,
#bb-overlay .bb-scoring .bb-court, #bb-overlay .bb-scoring .bb-last { flex: none; }

/* The foul-type row is one line, the height of the last-event line. */
#bb-overlay .bb-foulrow { flex-wrap: nowrap; padding: 4px; gap: 5px; }
#bb-overlay .bb-foulrow-who { flex: none; font-size: 12px; color: #8A2A0B; padding-left: 4px; white-space: nowrap; }
#bb-overlay .bb-foulrow .bb-chip { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 12px; }
#bb-overlay .bb-undo-icon { flex: none; width: 44px; padding: 0; font-size: 18px; }

/* Short screens (Safari on a phone): tighter chrome so the pad keeps 44 px rows. */
@media (max-height: 760px) {
  #bb-overlay .bb-topbar { height: 46px; }
  #bb-overlay .bb-live .bb-board { padding: 6px 12px 8px; }
  #bb-overlay .bb-live .bb-score { font-size: 30px; }
  #bb-overlay .bb-side { gap: 1px; }
  #bb-overlay .bb-side-line { font-size: 11px; }
  #bb-overlay .bb-clock { height: 44px; min-width: 100px; }
  #bb-overlay .bb-clock-time { font-size: 22px; }
  #bb-overlay .bb-oppstrip { padding-top: 4px; }
  #bb-overlay .bb-opp { min-height: 44px; }
  #bb-overlay .bb-pad { padding-top: 4px; }
  #bb-overlay .bb-stoprow { padding-top: 4px; }
  #bb-overlay .bb-stop { min-height: 44px; }
  #bb-overlay .bb-court { padding-top: 4px; }
  #bb-overlay .bb-court-head { padding-bottom: 2px; font-size: 10px; }
  #bb-overlay .bb-disc { width: 40px; height: 40px; font-size: 16px; }
  #bb-overlay .bb-sub { min-height: 48px; }
  #bb-overlay .bb-last { margin-top: 4px; min-height: 44px; }
  #bb-overlay .bb-tab { height: 50px; }
}

/* No assist: a light grey button with its own outline — not solid navy, and
   not the same as a player button. */
#bb-overlay .bb-xbtn-quiet { background: #E8ECF2; color: var(--bb-navy); border: 1.5px solid #9AA8B8; }

/* After "Show bench": a header that says plainly these are bench players.
   Sky, not gold: Earned Gold is for earned moments, never a recording screen
   (Mike, Oct 26). Dashed outlines keep the bench apart from a selected (solid
   Sky) control. */
#bb-overlay .bb-benchhead {
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--bb-navy); background: #D2E9F5;
  border: 1.5px solid var(--bb-sky); border-radius: 10px; padding: 8px 10px;
}
#bb-overlay .bb-pgrid-bench .bb-pbtn:not(.bb-pbtn-bench) { border: 1.5px dashed var(--bb-sky); background: #F2F8FC; }

/* ── Batch (e): pre-game, step 1 (New game) and step 2 (Starting five) ──────
   Design: PreSettings, PreSettingsFirst and PreStarters. A fixed footer holds
   the one action; the body scrolls when the rules editor is open. */
#bb-overlay .bb-screen.bb-pg {
  max-width: 520px; padding: 0; gap: 0; min-height: 100%; height: 100%;
  background: #F6F4EF; color: var(--bb-navy);
}
#bb-overlay .bb-pg-top {
  height: 52px; flex: none; background: #001433; color: #FFFFFF; display: flex; align-items: center;
  gap: 4px; padding: 0 12px 0 2px; padding-top: env(safe-area-inset-top);
}
#bb-overlay .bb-pg-title { flex: 1; font-size: 15px; font-weight: 700; }
#bb-overlay .bb-pg-step { font-size: 12px; color: #D2E9F5; }
#bb-overlay .bb-pg-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
#bb-overlay .bb-pg-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #5A6878; }
#bb-overlay .bb-pg-field { display: flex; flex-direction: column; gap: 6px; }
#bb-overlay .bb-pg-input {
  height: 48px; border-radius: 12px; border: 1px solid #C9D2DC; background: #FFFFFF; padding: 0 14px;
  font: 400 16px/1 Inter, sans-serif; color: var(--bb-navy); box-sizing: border-box;
}
#bb-overlay .bb-pg-note { font-size: 12px; line-height: 1.45; border-radius: 10px; padding: 8px 12px; background: #D2E9F5; color: #2C3E55; }
#bb-overlay .bb-pg-note-first { background: #FBEAE3; color: #8A2A0B; }
#bb-overlay .bb-pg-card { background: #FFFFFF; border-radius: 14px; border: 1px solid #D9DEE4; }
#bb-overlay .bb-pg-copied { padding: 12px 6px 12px 14px; display: flex; align-items: flex-start; gap: 8px; }
#bb-overlay .bb-pg-copied-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#bb-overlay .bb-pg-sumline { font-size: 14px; font-weight: 600; }
#bb-overlay .bb-pg-change {
  height: 44px; border-radius: 10px; border: 1.5px solid var(--bb-sky); background: #FFFFFF; color: var(--bb-navy);
  font: 700 14px/1 Inter, sans-serif; padding: 0 14px; cursor: pointer; flex: none;
}
#bb-overlay .bb-pg-track { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
#bb-overlay .bb-pg-dotted {
  font-size: 15px; font-weight: 700; text-decoration: underline dotted var(--bb-sky);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
#bb-overlay .bb-rules-editor { display: flex; flex-direction: column; gap: 10px; }
#bb-overlay .bb-rules { display: flex; flex-direction: column; }
#bb-overlay .bb-rule {
  min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px;
  border-bottom: 1px solid #ECEFF2;
}
#bb-overlay .bb-rule:last-child { border-bottom: 0; }
#bb-overlay .bb-rule-seg { flex-wrap: wrap; min-height: 56px; }
#bb-overlay .bb-rule-l { flex: 1; font-size: 14px; min-width: 120px; }
#bb-overlay .bb-step {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid #D9DEE4; background: #F6F4EF;
  font: 800 18px/1 Archivo, sans-serif; color: var(--bb-navy); cursor: pointer;
}
#bb-overlay .bb-rule-v { min-width: 54px; text-align: center; font: 800 17px/1 Archivo, sans-serif; color: var(--bb-navy); }
#bb-overlay .bb-rule-unset { color: #B83A12; }
#bb-overlay .bb-seg { display: flex; background: #F6F4EF; border-radius: 10px; padding: 2px; gap: 2px; }
#bb-overlay .bb-seg-unset { box-shadow: inset 0 0 0 1.5px #E7B8A6; }
#bb-overlay .bb-seg-o {
  min-height: 44px; min-width: 56px; border-radius: 8px; padding: 0 12px; border: 0; background: transparent;
  font: 700 13px/1 Inter, sans-serif; color: var(--bb-navy); cursor: pointer;
}
#bb-overlay .bb-seg-on { background: var(--bb-navy); color: #FFFFFF; }
#bb-overlay .bb-pg-foot {
  flex: none; padding: 12px 14px max(16px, env(safe-area-inset-bottom)); background: #F6F4EF;
  border-top: 1px solid #D9DEE4; display: flex; flex-direction: column; gap: 6px;
}
#bb-overlay .bb-pg-remaining { font-size: 12px; color: #8A2A0B; text-align: center; }
#bb-overlay .bb-pg-msg { font-size: 13px; line-height: 1.4; color: var(--bb-alert); background: #FBEAE3; border-radius: 10px; padding: 8px 12px; }
#bb-overlay .bb-pg-next {
  width: 100%; min-height: 54px; border-radius: 14px; border: 0; background: var(--bb-navy); color: #FFFFFF;
  font: 700 16px/1 Inter, sans-serif; cursor: pointer;
}
#bb-overlay .bb-pg-next:disabled { background: #D9DEE4; color: #5A6878; cursor: default; }

#bb-overlay .bb-ps-band { flex: none; background: var(--bb-navy); color: #FFFFFF; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
#bb-overlay .bb-ps-band-head { display: flex; align-items: center; justify-content: space-between; }
#bb-overlay .bb-ps-band-label { color: #D2E9F5; }
#bb-overlay .bb-ps-count { font: 800 18px/1 Archivo, sans-serif; }
#bb-overlay .bb-ps-count-over { color: #FFD7C7; }
#bb-overlay .bb-ps-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; min-height: 72px; }
#bb-overlay .bb-ps-five-p { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
#bb-overlay .bb-ps-five-n {
  width: 50px; height: 50px; border-radius: 50%; background: #FFFFFF; color: var(--bb-navy);
  display: flex; align-items: center; justify-content: center; font: 800 20px/1 Archivo, sans-serif;
}
#bb-overlay .bb-ps-five-name { font-size: 11px; color: #D2E9F5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bb-overlay .bb-ps-rosterhead { padding: 12px 18px 6px; }
#bb-overlay .bb-ps-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 14px 10px; background: #FFFFFF;
  border-radius: 14px; border: 1px solid #D9DEE4; display: flex; flex-direction: column;
}
#bb-overlay .bb-ps-row {
  min-height: 50px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 10px;
  border: 0; border-bottom: 1px solid #ECEFF2; background: #FFFFFF; color: var(--bb-navy);
  font: inherit; text-align: left; cursor: pointer;
}
#bb-overlay .bb-ps-row-on { background: #D2E9F5; }
#bb-overlay .bb-ps-disc {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: #FFFFFF; box-sizing: border-box;
  border: 1.5px solid #B9C4D0; display: flex; align-items: center; justify-content: center; font: 800 15px/1 Archivo, sans-serif;
}
#bb-overlay .bb-ps-row-on .bb-ps-disc { border: 3px solid var(--bb-sky); }
#bb-overlay .bb-ps-name { flex: 1; font-size: 14px; font-weight: 600; }
#bb-overlay .bb-ps-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #1D6A96; }