/* ============================================================
         RallyMate — Warm Beige theme
         Base:    #F2EAD9  (warm beige)
         Surface: #FBF6EC  (light cream card)
         Card2:   #F0E6D2  (deeper beige)
         Primary: #1A5C38  (deep forest green)
         Mid:     #2E7D52  (mid green)
         Light:   #E8F5EE  (pale green wash)
         Gold:    #C8971A  (shuttlecock gold accent)
         Coral:   #D64045  (error / warning)
         ============================================================ */

      .bc-app {
        --bg:        #F2EAD9;
        --surface:   #FBF6EC;
        --card:      #FBF6EC;
        --card2:     #F0E6D2;
        --border:    #D8C9AC;
        --green:     #1A5C38;
        --green-mid: #2E7D52;
        --green-lt:  #E8F5EE;
        --gold:      #C8971A;
        --gold-lt:   #F5E9C8;
        --coral:     #D64045;
        --coral-lt:  #FDECEA;
        --ink:       #2A2113;
        --ink-mid:   #5B4E38;
        --ink-dim:   #9A8A6B;

        --font-display: 'Arial Narrow', 'Helvetica Neue Condensed', Arial, sans-serif;
        --font-body:    -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        --font-mono:    'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;

        font-family: var(--font-body);
        background: var(--bg);
        color: var(--ink);
        min-height: 100vh;
        padding-bottom: 40px;
      }

      /* ---- Header ---- */
      .bc-header {
        background: var(--green);
        padding: 16px 24px;
        display: flex; align-items: center;
        justify-content: space-between;
        flex-wrap: wrap; gap: 16px;
        position: sticky; top: 0; z-index: 5;
        box-shadow: 0 2px 12px rgba(26,92,56,0.18);
      }
      .bc-title {
        font-family: var(--font-display);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 24px; font-weight: 700;
        color: #FFFFFF;
      }
      .bc-title span.dot { color: var(--gold); }
      .bc-version-badge {
        display: inline-flex; align-items: center; justify-content: center;
        margin-left: 7px; padding: 2px 7px; border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.28);
        background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.88);
        font-family: var(--font-body); font-size: 9px; font-weight: 700;
        letter-spacing: 0.06em; text-transform: none; vertical-align: middle;
      }
      .bc-subtitle { font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 3px; }
      .bc-credit  { font-size: 10.5px; color: rgba(255,255,255,0.38); margin-top: 2px; letter-spacing: 0.04em; }

      .bc-timer-block { display: flex; align-items: center; gap: 12px; }
      .bc-timer {
        font-family: var(--font-mono); font-size: 36px; font-weight: 700;
        color: var(--gold); line-height: 1; min-width: 95px; text-align: center;
      }
      .bc-timer.time-up { color: #FF8A8A; animation: bc-pulse 1s infinite; }
      @keyframes bc-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

      .bc-timer-controls { display: flex; gap: 6px; }
      .bc-icon-btn-light {
        border: 1px solid rgba(255,255,255,0.3);
        background: rgba(255,255,255,0.1);
        color: #fff; border-radius: 8px; padding: 7px;
        cursor: pointer; display: flex; align-items: center;
        transition: background 0.15s;
      }
      .bc-icon-btn-light:hover { background: rgba(255,255,255,0.22); }
      .bc-header-actions { display: flex; gap: 10px; align-items: center; }
      .bc-admin-access-btn { white-space: nowrap; }
      /* Every control in the green site header uses the info icon button as
         the sizing reference. Text buttons and icon buttons are 34px tall. */
      .bc-header .bc-icon-btn-light,
      .bc-header .bc-btn {
        height: 34px; min-height: 34px; box-sizing: border-box;
        align-items: center; justify-content: center;
      }
      .bc-header .bc-icon-btn-light { width: 34px; min-width: 34px; padding: 0; }
      .bc-header .bc-btn,
      .bc-header .bc-btn-small { padding-top: 0; padding-bottom: 0; }

      /* ---- Buttons ---- */
      .bc-btn {
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: 0.07em; font-size: 13px; font-weight: 700;
        padding: 10px 18px; border-radius: 8px; border: none;
        cursor: pointer; display: inline-flex; align-items: center;
        gap: 8px; transition: all 0.14s;
      }
      .bc-btn-primary { background: var(--green); color: #fff; }
      .bc-btn-primary:hover { background: var(--green-mid); box-shadow: 0 2px 10px rgba(26,92,56,0.28); }
      .bc-btn-primary:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
      .bc-btn-large { width: 100%; justify-content: center; padding: 14px; font-size: 14px; margin-top: 18px; }
      .bc-btn-secondary {
        background: var(--green-lt); color: var(--green);
        border: 1px solid var(--border);
      }
      .bc-btn-secondary:hover { background: #D6EDE0; }
      .bc-btn-ghost {
        background: transparent; color: var(--ink-mid);
        border: 1px solid var(--border);
      }
      .bc-btn-ghost:hover { border-color: var(--green-mid); color: var(--green); }
      .bc-btn-ghost-light {
        background: rgba(255,255,255,0.12);
        color: #fff; border: 1px solid rgba(255,255,255,0.3);
      }
      .bc-btn-ghost-light:hover { background: rgba(255,255,255,0.22); }
      .bc-link-btn {
        background: none; border: none; color: var(--ink-dim);
        font-size: 12.5px; display: inline-flex; align-items: center;
        gap: 6px; cursor: pointer; padding: 6px 0; text-decoration: underline;
      }
      .bc-link-btn:hover { color: var(--green); }

      /* ---- Setup screen ---- */
      .bc-setup {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(400px, 0.85fr);
        align-items: start;
        gap: 22px;
        width: calc(100% - 48px);
        max-width: 1500px;
        margin: 0 auto;
        padding: 24px 0;
      }
      /* BAND Event is injected as the first child of .bc-setup. Keep it full width,
         then put Players + Session Settings side-by-side on the next row. */
      .bc-live-card { grid-column: 1 / -1; }
      .bc-setup-card {
        min-width: 0;
        background: var(--card); border: 1px solid var(--border);
        border-radius: 16px; padding: 22px;
        box-shadow: 0 1px 6px rgba(26,92,56,0.06);
      }
      .bc-setup-card h2 {
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: 0.08em; font-size: 13.5px; font-weight: 700;
        margin: 0 0 16px; color: var(--green);
      }
      .bc-setup-card-head {
        display: flex; justify-content: space-between; align-items: center;
        gap: 12px; margin-bottom: 16px; flex-wrap: nowrap;
      }
      .bc-setup-card-head h2 { margin: 0; min-width: 0; }
      .bc-setup-card-head .bc-btn { flex: 0 0 auto; white-space: nowrap; }

      /* Player totals and active-division legend share one row on desktop. */
      .bc-player-summary-grid {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 18px 24px;
        margin-bottom: 18px;
      }
      .bc-stat-row { display: flex; gap: 22px; margin: 0; flex-wrap: nowrap; }
      .bc-stat { display: flex; flex-direction: column; min-width: 62px; }
      .bc-stat-num {
        font-family: var(--font-body);
        font-variant-numeric: tabular-nums;
        font-size: 32px; line-height: 1.05;
        font-weight: 700; color: var(--green);
      }
      .bc-stat-label { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }

      .bc-division-summary {
        min-width: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(255,255,255,.28);
        padding: 10px 12px;
      }
      .bc-division-summary-head {
        display: flex; align-items: center;
        gap: 12px; margin-bottom: 9px;
        font-size: 10.5px; color: var(--ink-dim);
        text-transform: uppercase; letter-spacing: .07em;
      }
      .bc-active-divisions { display: flex; flex-wrap: wrap; gap: 8px; }
      /* RallyMate division-mix roster-tile shape v2 */
      .bc-division-chip {
        display: inline-flex; align-items: center; gap: 7px;
        min-width: 0; padding: 5px 9px 5px 5px;
        border: 1.5px solid var(--border); border-radius: 999px;
        background: var(--card); color: var(--ink-mid);
        font-size: 12.5px; line-height: 1;
              align-items: center;
              gap: 6px;
              padding: 7px 8px;
              border-radius: 8px;
              color: var(--ink-mid);
              line-height: 1;
              box-sizing: border-box;
      }
      .bc-division-chip .bc-level-dot {
        width: 19px;
        height: 19px;
        font-size: 10px;
      }
.bc-division-count {
        display: inline-flex; align-items: baseline; gap: 4px;
        white-space: nowrap;
        font-family: var(--font-body);
        font-variant-numeric: tabular-nums;
        color: var(--green);
        font-weight: 700;
      }
      .bc-division-count-label {
        color: var(--ink-dim);
        font-weight: 500;
      }
      @media (max-width: 620px) {
        .bc-division-count-label { display: none; }
      }

      .bc-main-roster {
        margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border);
      }
      .bc-main-roster .bc-field-label { margin-bottom: 9px; }
      .bc-main-roster-list {
        max-height: none;
        display: grid;
        /* Match the compact 50-player mock-up: five equal roster columns on
           wide desktops instead of inheriting the drawer's vertical list. */
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px 9px;
      }
      .bc-main-roster-list .bc-roster-row {
        min-width: 0;
        padding: 7px 8px;
        font-size: 12.5px;
        gap: 6px;
      }
      .bc-main-roster-list .bc-level-dot {
        width: 19px;
        height: 19px;
        font-size: 10px;
      }
      .bc-main-roster-list .bc-gender-pill {
        font-size: 9.5px;
        padding: 2px 5px;
      }
      .bc-main-roster-list .bc-roster-name {
        min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      @media (max-width: 1350px) {
        .bc-main-roster-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      }

      .bc-setting-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--border);
      }
      .bc-setting-row > div:first-child { min-width: 0; }
      .bc-setting-row:last-of-type { border-bottom: none; }
      .bc-setting-label { font-weight: 600; font-size: 14px; color: var(--ink); }
      .bc-setting-help { font-size: 12px; color: var(--ink-dim); margin-top: 3px; max-width: 460px; line-height: 1.4; }
      .bc-setting-note { font-size: 12px; color: var(--ink-dim); margin: 10px 0 0; }
      .bc-setting-warning { color: var(--coral); font-weight: 600; }
      .bc-recovery-setting { grid-template-columns: minmax(0, 1fr); }
      .bc-recovery-email-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
      .bc-recovery-email-controls .bc-input { flex: 1 1 185px; min-width: 0; }
      .bc-recovery-email-controls #admin-recovery-email-status { flex-basis: 100%; }

      @media (max-width: 1120px) {
        .bc-setup {
          grid-template-columns: 1fr;
          width: calc(100% - 32px);
          padding: 18px 0;
        }
        .bc-live-card { grid-column: auto; }
        .bc-main-roster-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      }
      @media (max-width: 900px) {
        .bc-main-roster-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      }
      @media (max-width: 760px) {
        .bc-player-summary-grid { grid-template-columns: 1fr; }
        .bc-stat-row { flex-wrap: wrap; gap: 18px 22px; }
        .bc-main-roster-list { grid-template-columns: 1fr; }
        .bc-setting-row { gap: 14px; }
      }

      .bc-setting-row.is-highlighted {
        background: var(--gold-lt);
        border-radius: 10px; padding: 12px;
        margin: 0 -12px; border: 1px solid #E8CC7A;
      }
      .bc-setting-sub {
        background: var(--green-lt); border-radius: 8px;
        padding: 10px 14px; margin: -4px 0 4px;
        border: 1px solid var(--border);
      }

      .bc-stepper {
        display: flex; align-items: center; gap: 10px;
        font-family: var(--font-mono); font-weight: 700;
        font-size: 15px; color: var(--ink);
      }
      .bc-stepper span { min-width: 56px; text-align: center; }
      .bc-stepper button {
        width: 32px; height: 32px; border-radius: 8px;
        border: 1.5px solid var(--border); background: var(--green-lt);
        color: var(--green); font-size: 18px; cursor: pointer; line-height: 1;
        transition: background 0.12s, border-color 0.12s;
      }
      .bc-stepper button:hover { background: #C8E8D6; border-color: var(--green-mid); }

      .bc-toggle {
        width: 46px; height: 26px; border-radius: 999px;
        border: 1.5px solid var(--border); background: #D6E8DC;
        position: relative; cursor: pointer; flex-shrink: 0; transition: all 0.15s;
      }
      .bc-toggle.is-on { background: var(--green); border-color: var(--green); }
      .bc-toggle-knob {
        position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
        border-radius: 50%; background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
        transition: transform 0.15s;
      }
      .bc-toggle.is-on .bc-toggle-knob { transform: translateX(20px); }

      /* ---- Session action bar ---- */
      .bc-action-bar {
        display: flex; justify-content: space-between; align-items: center;
        padding: 16px 24px 4px; max-width: 1300px; margin: 0 auto;
      }
      .bc-action-left { display: flex; flex-direction: column; gap: 4px; }
      .bc-swap-hint { font-size: 12.5px; color: var(--ink-dim); display: flex; align-items: center; gap: 6px; }
      .bc-banner {
        margin: 14px 24px 0; max-width: 1300px; margin-left: auto; margin-right: auto;
        background: var(--coral-lt); border: 1px solid #F1A8AA; color: var(--coral);
        border-radius: 10px; padding: 10px 14px; font-size: 13.5px;
        display: flex; align-items: center; gap: 8px;
      }
      .bc-mode-badge {
        display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
        background: var(--gold); color: #fff;
        border-radius: 4px; padding: 1px 5px;
        margin-left: 6px; vertical-align: middle; letter-spacing: 0.04em;
      }
      .bc-mode-pill {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: 11.5px; font-weight: 700;
        color: #fff; background: var(--green-mid);
        border-radius: 999px; padding: 3px 10px;
      }

      /* ---- Courts ---- */
      .bc-courts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 16px; padding: 16px 24px;
        max-width: 1500px; margin: 0 auto;
      }
      .bc-court-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px; overflow: hidden;
        box-shadow: 0 1px 6px rgba(26,92,56,0.07);
        transition: box-shadow 0.15s;
      }
      .bc-court-card:hover { box-shadow: 0 4px 16px rgba(26,92,56,0.14); }
      .bc-court-head {
        background: var(--green);
        color: #fff;
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: 0.1em; font-size: 12.5px; font-weight: 700;
        padding: 9px 14px;
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
      }
      /* Court body: Team A on top, divider, Team B below — full width for each player */
      .bc-court-body {
        display: flex;
        flex-direction: column;
      }
      .bc-team {
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      /* Two players per team side by side within the team row */
      .bc-team-players {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
      }
      .bc-net {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0 14px;
      }
      .bc-net-line {
        flex: 1;
        height: 1.5px;
        background: var(--border);
        border: none;
      }
      .bc-net-label {
        font-family: var(--font-display);
        font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--ink-dim); padding: 3px 8px;
        border-radius: 4px; border: 1px solid var(--border);
        background: var(--card);
        flex-shrink: 0;
      }

      /* ---- Player tag ---- */
      .bc-team-label {
        font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
        font-weight: 700; color: var(--ink-dim); margin-bottom: 2px;
      }
      .bc-player {
        display: flex; align-items: center; gap: 6px;
        padding: 8px 10px; border-radius: 8px;
        border: 1.5px solid var(--border);
        background: var(--surface);
        cursor: pointer; font-size: 13.5px; font-weight: 600;
        width: 100%; text-align: left; font-family: inherit; color: var(--ink);
        transition: border-color 0.12s, background 0.12s;
        min-width: 0;
        box-sizing: border-box;
      }
      .bc-player:hover { border-color: var(--green-mid); background: var(--green-lt); }
      .bc-player.is-selected {
        border-color: var(--gold);
        box-shadow: 0 0 0 2px rgba(212,160,23,0.25);
        background: var(--gold-lt);
      }
      .bc-player-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }

      /* Division dots — green-to-gold spectrum */
      .bc-level-dot {
        font-family: var(--font-mono); font-size: 11px; font-weight: 700;
        width: 20px; height: 20px; border-radius: 5px;
        color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      }
      .lvl-1 { background: #0C3B22; }
      .lvl-2 { background: #1A5C38; }
      .lvl-3 { background: #2E7D52; }
      .lvl-4 { background: #3D9968; }
      .lvl-5 { background: #5AB384; }
      .lvl-6 { background: #B8860B; }
      .lvl-7 { background: #C9940F; }
      .lvl-8 { background: #D4A017; }
      .lvl-9 { background: #E2B83A; color: #3a2800; }

      .bc-gender-pill {
        font-size: 10.5px; font-weight: 700;
        padding: 2px 6px; border-radius: 999px; flex-shrink: 0; letter-spacing: 0.04em;
      }
      .g-F { background: #FCE8EE; color: #B52A5A; }
      .g-M { background: var(--green-lt); color: var(--green); }
      .g-O { background: #F0F0F0; color: #666; }

      /* ---- Sit-out rail ---- */
      .bc-sitout {
        margin: 8px 24px 24px;
        padding: 16px;
        background: #FEF4F4; border: 1px solid #F1A8AA;
        border-radius: 14px;
        max-width: 1300px; margin-left: auto; margin-right: auto;
      }
      .bc-sitout-title {
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: 0.08em; font-size: 11.5px; font-weight: 700;
        color: var(--coral); margin-bottom: 10px;
      }
      .bc-sitout-list {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
      }
      .bc-sitout-empty { font-size: 13.5px; color: var(--coral); }

      /* ---- Roster drawer ---- */
      .bc-drawer-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,0.38);
        display: flex; justify-content: flex-end; z-index: 20;
      }
      .bc-drawer {
        background: var(--bg); width: min(720px, 100vw); max-width: 720px; height: 100%;
        overflow-y: auto; overflow-x: hidden;
        box-shadow: -6px 0 28px rgba(0,0,0,0.14);
      }
      .bc-drawer-head {
        display: flex; justify-content: space-between; align-items: center;
        padding: 18px 20px; background: var(--green); color: #fff;
        position: sticky; top: 0; z-index: 1;
      }
      .bc-drawer-head h2 {
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: 0.08em; font-size: 15px; margin: 0;
        display: flex; align-items: center; gap: 8px; color: #fff;
      }
      .bc-drawer-body { padding: 18px 20px; min-width: 0; overflow-x: hidden; }
      .bc-drawer-body > * { min-width: 0; }
      .bc-drawer .bc-input,
      .bc-drawer .bc-select { min-width: 0; max-width: 100%; width: 100%; }
      .bc-drawer .bc-btn { white-space: nowrap; }

      .bc-add-form {
        background: var(--card); border: 1px solid var(--border);
        border-radius: 12px; padding: 16px; margin-bottom: 18px;
      }
      .bc-input {
        width: 100%; padding: 10px 12px; border-radius: 8px;
        border: 1.5px solid var(--border); background: var(--surface);
        color: var(--ink); font-size: 14px; font-family: inherit;
        margin-bottom: 12px; box-sizing: border-box; transition: border-color 0.15s;
      }
      .bc-input:focus { outline: none; border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(46,125,82,0.12); }
      .bc-field-label {
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
        color: var(--ink-dim); margin-bottom: 7px; font-weight: 700;
      }
      .bc-choice-row { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; }
      .bc-choice {
        width: 28px; height: 28px; border-radius: 7px;
        border: 1.5px solid var(--border); background: var(--bg);
        cursor: pointer; font-family: var(--font-mono); font-weight: 700;
        font-size: 12px; color: var(--ink-dim); transition: border-color 0.12s;
      }
      .bc-choice:hover { border-color: var(--green-mid); }
      .bc-choice.is-active.lvl-1 { background: #0C3B22; border-color: #0C3B22; color: #fff; }
      .bc-choice.is-active.lvl-2 { background: #1A5C38; border-color: #1A5C38; color: #fff; }
      .bc-choice.is-active.lvl-3 { background: #2E7D52; border-color: #2E7D52; color: #fff; }
      .bc-choice.is-active.lvl-4 { background: #3D9968; border-color: #3D9968; color: #fff; }
      .bc-choice.is-active.lvl-5 { background: #5AB384; border-color: #5AB384; color: #fff; }
      .bc-choice.is-active.lvl-6 { background: #B8860B; border-color: #B8860B; color: #fff; }
      .bc-choice.is-active.lvl-7 { background: #C9940F; border-color: #C9940F; color: #fff; }
      .bc-choice.is-active.lvl-8 { background: #D4A017; border-color: #D4A017; color: #fff; }
      .bc-choice.is-active.lvl-9 { background: #E2B83A; border-color: #E2B83A; color: #3a2800; }
      .bc-choice.is-active.g-F { background: #FCE8EE; border-color: #B52A5A; color: #B52A5A; }
      .bc-choice.is-active.g-M { background: var(--green-lt); border-color: var(--green); color: var(--green); }
      .bc-choice.is-active.g-O { background: #F0F0F0; border-color: #888; color: #555; }
      .bc-choice-caption { font-size: 12px; color: var(--ink-dim); margin-left: 4px; }

      .bc-form-actions { display: flex; gap: 10px; margin-top: 4px; }
      .bc-form-actions .bc-btn-primary { flex: 1; justify-content: center; }

      .bc-roster-list { display: flex; flex-direction: column; gap: 5px; }
      .bc-roster-list.scroll { max-height: 280px; overflow-y: auto; }

      /* Main setup roster is a grid, not a drawer list. This selector has
         higher specificity than .bc-roster-list above, so the generic drawer
         flex rule cannot silently turn the main roster back into one column. */
      .bc-roster-list.bc-main-roster-list {
        display: grid;
        flex-direction: initial;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px 9px;
        max-height: none;
      }
      @media (max-width: 1350px) {
        .bc-roster-list.bc-main-roster-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      }
      @media (max-width: 900px) {
        .bc-roster-list.bc-main-roster-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      }
      @media (max-width: 760px) {
        .bc-roster-list.bc-main-roster-list { grid-template-columns: 1fr; }
      }
      .bc-roster-row {
        display: flex; align-items: center; gap: 8px;
        background: var(--card); border: 1.5px solid var(--border);
        border-radius: 8px; padding: 8px 10px; font-size: 13px;
        transition: border-color 0.12s;
      }
      .bc-roster-row:hover { border-color: var(--green-mid); }
      .bc-roster-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
      .bc-rest-count { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
      .bc-icon-btn {
        background: none; border: none; cursor: pointer; color: var(--ink-dim);
        display: flex; align-items: center; padding: 4px; border-radius: 6px;
        transition: color 0.12s, background 0.12s;
      }
      .bc-icon-btn:hover { background: var(--green-lt); color: var(--green); }
      .bc-icon-danger:hover { background: #FDECEA !important; color: var(--coral) !important; }

      .bc-empty { font-size: 13px; color: var(--ink-dim); text-align: center; padding: 20px 10px; }
      .bc-empty-big { padding: 36px 16px; }
      .bc-storage-note { font-size: 11.5px; color: var(--ink-dim); margin-top: 14px; text-align: center; }

      /* ---- Tabs ---- */
      .bc-tabs { display: flex; gap: 20px; margin-bottom: 18px; border-bottom: 1.5px solid var(--border); }
      .bc-tab {
        font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.07em;
        font-size: 12px; font-weight: 700; padding: 0 0 10px;
        background: none; border: none; border-bottom: 2.5px solid transparent;
        color: var(--ink-dim); cursor: pointer; transition: color 0.14s; margin-bottom: -1.5px;
      }
      .bc-tab.is-active { color: var(--green); border-bottom-color: var(--green); }
      .bc-tab:hover { color: var(--ink); }

      .bc-divider { height: 1px; background: var(--border); margin: 18px 0; }
      .bc-picker-actions { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
      .bc-picker-list { display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow-y: auto; margin-bottom: 4px; }
      .bc-picker-row {
        display: flex; align-items: center; gap: 8px;
        background: var(--card); border: 1.5px solid var(--border);
        border-radius: 8px; padding: 7px 10px; font-size: 13px;
      }
      .bc-btn-small { padding: 5px 10px; font-size: 11px; flex-shrink: 0; }
      .bc-tonight-count { font-family: var(--font-mono); color: var(--green); }

      .bc-file-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
      .bc-file-actions .bc-btn { flex: 1; justify-content: center; }

      .bc-checkbox-row {
        display: flex; align-items: center; gap: 8px;
        font-size: 13px; color: var(--ink-mid); margin: 4px 0 12px; cursor: pointer;
      }
      .bc-checkbox-row input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--green); }

      /* ---- Team training ---- */
      .bc-team-summary {
        display: flex; flex-wrap: wrap; gap: 6px;
        margin: 4px 0 8px; padding: 10px 14px;
        background: var(--green-lt); border-radius: 8px; border: 1px solid var(--border);
      }
      .bc-team-chip {
        font-size: 11.5px; font-weight: 700; padding: 4px 10px;
        border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
      }
      /* When a chip contains a member list, render it as a stacked rounded box */
      .bc-team-chip:has(.bc-team-members) {
        display: flex; flex-direction: column; align-items: flex-start;
        border-radius: 10px; padding: 8px 12px; gap: 2px;
        width: 100%; box-sizing: border-box;
      }
      .bc-team-summary { display: flex; flex-direction: column; gap: 6px; }
      .bc-team-chip.ready  { background: #D6EDE0; color: var(--green); border: 1px solid #9DCFB2; }
      .bc-team-chip.partial { background: var(--gold-lt); color: #7A5800; border: 1px solid #E8CC7A; }
      .bc-team-court-badge {
        font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,0.25); color: #fff;
        padding: 2px 8px; border-radius: 999px;
        display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0.03em;
      }
      .bc-team-select-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
      .bc-team-select-row .bc-input { flex: 1; margin-bottom: 0; }
      .bc-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
      .bc-team-pill {
        display: inline-block; font-size: 11.5px; font-weight: 700;
        padding: 3px 10px; border-radius: 999px; border: 1.5px solid;
      }
      .bc-team-pill-sm {
        font-size: 10px; font-weight: 700; padding: 2px 7px;
        border-radius: 999px; border: 1.5px solid; white-space: nowrap; flex-shrink: 0;
      }
      .bc-teams-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
      .bc-teams-list { display: flex; flex-direction: column; gap: 6px; }
      .bc-team-row {
        display: flex; align-items: center; gap: 8px;
        background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
      }
      .bc-team-row .bc-team-pill { flex: 1; }

      /* ---- FAQ panel ---- */
      .faq-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,0.4);
        display: flex; justify-content: center; align-items: flex-start;
        z-index: 30; padding: 20px 16px; overflow-y: auto;
      }
      .faq-panel {
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 16px; width: 100%; max-width: 660px;
        box-shadow: 0 12px 40px rgba(26,92,56,0.18);
        overflow: hidden; animation: faq-in 0.18s ease;
      }
      @keyframes faq-in { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }
      .faq-head {
        display: flex; justify-content: space-between; align-items: center;
        padding: 18px 20px; background: var(--green); position: sticky; top: 0;
      }
      .faq-title {
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: 0.08em; font-size: 15px; font-weight: 700;
        color: #fff; display: flex; align-items: center; gap: 8px;
      }
      .faq-body { padding: 18px 20px 28px; max-height: 80vh; overflow-y: auto; }
      .faq-intro { font-size: 13.5px; color: var(--ink-dim); margin: 0 0 20px; }
      .faq-section { margin-bottom: 22px; }
      .faq-section-heading {
        font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em;
        font-size: 11px; font-weight: 700; color: var(--green-mid);
        border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px;
      }
      .faq-item { border-bottom: 1px solid var(--border); }
      .faq-item:last-child { border-bottom: none; }
      .faq-q {
        width: 100%; display: flex; align-items: center; justify-content: space-between;
        gap: 12px; padding: 12px 2px; background: none; border: none; cursor: pointer;
        font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
        color: var(--ink); text-align: left; transition: color 0.14s;
      }
      .faq-q:hover { color: var(--green); }
      .faq-chevron { flex-shrink: 0; color: var(--ink-dim); transition: transform 0.18s; }
      .faq-a {
        font-size: 13px; color: var(--ink-mid); line-height: 1.7; padding: 0 2px 14px;
      }
      .faq-a strong { color: var(--green); }
      .faq-a code { font-family: var(--font-mono); font-size: 12px; background: var(--green-lt); padding: 1px 5px; border-radius: 4px; }
      .faq-a em { color: var(--ink-dim); font-style: normal; font-weight: 600; }

      @media (max-width: 640px) {
        .bc-header { padding: 12px 16px; }
        .bc-title { font-size: 18px; }
        .bc-timer { font-size: 28px; min-width: 80px; }
        .bc-setup, .bc-courts { padding: 14px; }
        .bc-action-bar { padding: 12px 16px 4px; flex-direction: column; align-items: stretch; gap: 10px; }
        .bc-action-bar .bc-btn { justify-content: center; }
        .bc-sitout { margin: 8px 14px 16px; }
      }

      /* ---- Practice pairs ---- */
      .bc-pairs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
      .bc-pair-row {
        display: flex; align-items: center; gap: 8px;
        background: var(--card); border: 1.5px solid #9DCFB2;
        border-radius: 8px; padding: 8px 10px; font-size: 13px;
      }
      .bc-pair-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .bc-pair-divider {
        font-family: var(--font-mono); font-weight: 700; font-size: 16px;
        color: var(--green); flex-shrink: 0;
      }
      .bc-pair-form { margin-top: 6px; }
      .bc-pair-selects { display: flex; align-items: center; gap: 8px; }
      .bc-pair-selects .bc-input { flex: 1; margin-bottom: 0; }
      .bc-pair-plus {
        font-family: var(--font-mono); font-weight: 700; font-size: 18px;
        color: var(--green); flex-shrink: 0;
      }
      .bc-pair-court-badge {
        font-size: 10.5px; font-weight: 700;
        background: rgba(255,255,255,0.22); color: #fff;
        padding: 2px 8px; border-radius: 999px;
        display: inline-flex; align-items: center; gap: 4px;
        letter-spacing: 0.03em; border: 1px solid rgba(255,255,255,0.35);
      }

      /* ---- Hidden admin panel ---- */
      .admin-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,0.45);
        display: flex; justify-content: center; align-items: center;
        z-index: 40; padding: 20px;
      }
      .admin-panel {
        background: var(--card); border: 1px solid var(--border);
        border-radius: 14px; width: 100%; max-width: 420px;
        box-shadow: 0 12px 40px rgba(26,92,56,0.2);
        animation: faq-in 0.18s ease;
        overflow: hidden;
      }
      .admin-head {
        display: flex; justify-content: space-between; align-items: center;
        padding: 16px 18px;
        background: var(--green);
        color: #fff;
      }
      .admin-title {
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: 0.08em; font-size: 14px; font-weight: 700;
        display: flex; align-items: center; gap: 8px;
      }
      .admin-body { padding: 16px 18px; }
      .admin-note {
        font-size: 12px; color: var(--ink-dim);
        background: var(--green-lt); border: 1px solid var(--border);
        border-radius: 8px; padding: 8px 12px; margin: 0 0 14px;
      }
      .admin-close-hint {
        font-size: 11.5px; color: var(--ink-dim); text-align: center;
        margin: 14px 0 0;
      }
      .bc-credit { cursor: default; user-select: none; }

      /* ---- Sit-out-next-round tick ---- */
      .bc-skip-btn { color: var(--ink-dim); }
      .bc-skip-btn.is-on { background: var(--gold-lt); color: var(--gold); }
      .bc-skip-btn:hover { background: var(--gold-lt); color: var(--gold); }
      .bc-roster-row.is-skipping {
        background: var(--gold-lt);
        border-color: var(--gold);
      }

      /* ---- Playing-time report ---- */
      .pt-list { display: flex; flex-direction: column; gap: 8px; }
      .pt-row {
        display: flex; align-items: center; gap: 10px;
        padding: 6px 0;
      }
      .pt-name {
        font-weight: 600; font-size: 13.5px;
        width: 130px; flex-shrink: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .pt-bar-wrap {
        flex: 1; height: 8px; background: var(--green-lt);
        border-radius: 999px; overflow: hidden; min-width: 40px;
      }
      .pt-bar {
        height: 100%; background: var(--green);
        border-radius: 999px; transition: width 0.3s;
      }
      .pt-stat {
        font-size: 11.5px; color: var(--ink-dim);
        white-space: nowrap; flex-shrink: 0; font-family: var(--font-mono);
      }

      /* ---- On-court info dot + stats popover ---- */
      .bc-info-dot {
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        width: 20px; height: 20px; border-radius: 50%;
        color: var(--ink-dim);
        cursor: pointer;
        transition: background 0.12s, color 0.12s;
      }
      .bc-info-dot:hover {
        background: var(--green-lt);
        color: var(--green);
      }
      .player-stats-popover {
        display: none;
        position: absolute;
        z-index: 50;
        background: var(--green);
        color: #fff;
        border-radius: 10px;
        padding: 10px 14px;
        min-width: 150px;
        box-shadow: 0 6px 24px rgba(15,35,24,0.32);
        pointer-events: none;
        animation: faq-in 0.12s ease;
      }
      .psp-name {
        font-family: var(--font-display);
        text-transform: uppercase; letter-spacing: 0.05em;
        font-size: 14px; font-weight: 700;
        margin-bottom: 2px;
      }
      .psp-meta {
        font-size: 11px; color: rgba(255,255,255,0.7);
        margin-bottom: 8px;
      }
      .psp-stats { display: flex; gap: 16px; }
      .psp-stat { display: flex; flex-direction: column; align-items: center; }
      .psp-num {
        font-family: var(--font-mono); font-weight: 700; font-size: 20px;
        color: var(--gold); line-height: 1;
      }
      .psp-label {
        font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
        color: rgba(255,255,255,0.65); margin-top: 2px;
      }
      .psp-rounds {
        margin-top: 9px;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.18);
        min-width: 190px;
        max-width: 260px;
        font-size: 10.5px;
        line-height: 1.45;
      }
      .psp-round-row {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 7px;
        margin-top: 3px;
      }
      .psp-round-key {
        color: rgba(255,255,255,0.62);
        font-weight: 600;
      }
      .psp-round-value {
        color: #fff;
        overflow-wrap: anywhere;
      }
      .bc-action-buttons {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      @media (max-width: 640px) {
        .bc-action-buttons {
          width: 100%;
        }
        .bc-action-buttons .bc-btn {
          flex: 1;
          justify-content: center;
        }
      }

      /* ---- Lock controls ---- */
      .bc-lock-on {
        background: var(--gold) !important;
        color: #0F2318 !important;
      }
      .bc-locked-hint {
        color: #9A7611;
        font-weight: 600;
      }
      .bc-btn-primary[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .lock-dialog {
        background: var(--card);
        border-radius: 16px;
        padding: 24px;
        max-width: 360px;
        width: calc(100% - 48px);
        box-shadow: 0 12px 48px rgba(15,35,24,0.32);
        animation: faq-in 0.15s ease;
      }
      .lock-title {
        display: flex; align-items: center; gap: 8px;
        font-family: var(--font-display);
        font-size: 17px; font-weight: 700; color: var(--green);
        margin-bottom: 8px;
      }
      .lock-help {
        font-size: 13px; color: var(--ink-dim);
        margin: 0 0 16px; line-height: 1.5;
      }
      .lock-input {
        width: 100%; box-sizing: border-box;
        font-size: 24px; text-align: center; letter-spacing: 0.4em;
        padding: 12px; border: 2px solid var(--border);
        border-radius: 10px; font-family: var(--font-mono);
        margin-bottom: 8px;
      }
      .lock-input:focus {
        outline: none; border-color: var(--gold);
      }
      .lock-error {
        color: #b3261e; font-size: 12.5px; min-height: 18px;
        text-align: center; margin-bottom: 8px;
      }
      .lock-actions {
        display: flex; gap: 10px; justify-content: flex-end;
      }

      /* ====================================================================== */
      /* BIG VIEW (presentation mode) — enlarge courts for reading across a hall */
      /* ====================================================================== */
      .bc-bigview-on {
        background: var(--gold) !important;
        color: #0F2318 !important;
      }

      /* Smooth scale-up/down when toggling big view */
      .bc-player, .bc-level-dot, .bc-court-head, .bc-team {
        transition: font-size 0.18s ease, padding 0.18s ease,
                    width 0.18s ease, height 0.18s ease;
      }

      /* Bigger court grid with more breathing room. Fewer, wider cards per
         row so each player name has plenty of horizontal space. */
      .bc-bigview .bc-courts {
        gap: 22px;
        padding: 20px 32px;
        max-width: 1700px;
        grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
      }

      /* Court header — larger, bolder */
      .bc-bigview .bc-court-head {
        font-size: 19px;
        padding: 14px 20px;
        letter-spacing: 0.12em;
      }

      /* Team labels bigger */
      .bc-bigview .bc-team-label {
        font-size: 14px;
        margin-bottom: 6px;
      }

      /* In big view, stack each team's two players in a SINGLE column so each
         name gets the full card width — no more truncation. */
      .bc-bigview .bc-team-players {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      /* Player tags — much larger text and padding */
      .bc-bigview .bc-player {
        font-size: 23px;
        font-weight: 700;
        padding: 15px 20px;
        gap: 14px;
        border-width: 2px;
      }

      /* Let the name take all remaining space and never clip in big view */
      .bc-bigview .bc-player-name {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;       /* wrap rather than cut off very long names */
        line-height: 1.15;
      }

      /* Division dot bigger */
      .bc-bigview .bc-level-dot {
        width: 32px; height: 32px;
        font-size: 16px;
        flex-shrink: 0;
      }

      /* Team rows roomier */
      .bc-bigview .bc-team { padding: 16px 20px; gap: 10px; }

      /* The vs divider larger */
      .bc-bigview .bc-net-label {
        font-size: 13px;
        padding: 4px 12px;
      }

      /* Hide the info dot in big view (keeps names clean and large) */
      .bc-bigview .bc-info-dot { display: none; }

      /* Compact the resting list into a slim single strip at the bottom */
      .bc-bigview .bc-sitout {
        padding: 12px 20px;
        margin: 8px 24px 20px;
      }
      .bc-bigview .bc-sitout-title { font-size: 13px; }
      .bc-bigview .bc-sitout-list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 6px;
      }
      .bc-bigview .bc-sitout-list .bc-player {
        font-size: 15px;
        padding: 8px 10px;
      }
      .bc-bigview .bc-sitout-list .bc-level-dot {
        width: 22px; height: 22px; font-size: 12px;
      }

      /* Hide the action bar hint text to maximise court space (keep Next round) */
      .bc-bigview .bc-swap-hint { font-size: 15px; }

      /* Slightly reduce header height to give courts more room */
      .bc-bigview .bc-subtitle { font-size: 13px; }

      /* ---- Team member name display ---- */
      .bc-team-members {
        display: block;
        font-size: 12px;
        color: var(--ink-mid);
        margin-top: 4px;
        font-weight: 500;
        line-height: 1.4;
      }
      .bc-team-chip .bc-team-members {
        color: rgba(255,255,255,0.85);
      }
      .bc-team-chip.partial .bc-team-members {
        color: var(--ink-mid);
      }
      .bc-team-row { flex-direction: column; align-items: stretch; gap: 4px; }
      .bc-team-row-main { display: flex; align-items: center; gap: 8px; }
      .bc-team-member-names {
        font-size: 12.5px;
        color: var(--ink-mid);
        padding-left: 2px;
        line-height: 1.4;
      }
      .bc-team-member-names.bc-team-empty {
        color: var(--ink-dim);
        font-style: italic;
      }

      /* Sub-setting row (indented under its parent toggle) */
      .bc-setting-row.bc-subsetting {
        padding-left: 16px;
        border-left: 3px solid var(--gold);
        margin-left: 4px;
        background: rgba(212,160,23,0.05);
      }

      /* ---- Password-protected session settings ---- */
      .bc-settings-security {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      }
      .bc-settings-status {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 11.5px; font-weight: 700; padding: 5px 9px;
        border-radius: 999px; border: 1px solid var(--border);
      }
      .bc-settings-status.locked {
        background: var(--gold-lt); color: #7A5800; border-color: #E8CC7A;
      }
      .bc-settings-status.unlocked {
        background: var(--green-lt); color: var(--green); border-color: #9DCFB2;
      }
      .bc-settings-locked-note {
        display: flex; align-items: flex-start; gap: 8px;
        margin: 0 0 10px; padding: 10px 12px; border-radius: 9px;
        background: var(--gold-lt); border: 1px solid #E8CC7A;
        color: #76580A; font-size: 12.5px; line-height: 1.45;
      }
      .bc-settings-unlocked-note {
        display: flex; align-items: center; gap: 8px;
        margin: 0 0 10px; padding: 8px 12px; border-radius: 9px;
        background: var(--green-lt); border: 1px solid #9DCFB2;
        color: var(--green); font-size: 12px; font-weight: 600;
      }
      .bc-settings-card.is-locked .bc-setting-row,
      .bc-settings-card.is-locked .bc-team-summary,
      .bc-settings-card.is-locked .bc-setting-note {
        opacity: 0.68;
      }
      .bc-settings-card button:disabled {
        cursor: not-allowed;
      }

      /* ---- Round history navigation ---- */
      .bc-history-nav {
        display: flex; align-items: center; gap: 10px;
        margin: 0 auto;
      }
      /* History arrows sit on the light content area, so they need a dark,
         high-contrast style (not the white header-button style). */
      .bc-history-btn {
        border: 1.5px solid var(--green);
        background: var(--green);
        color: #fff;
        border-radius: 8px; padding: 7px;
        cursor: pointer; display: flex; align-items: center;
        transition: background 0.15s, opacity 0.15s;
      }
      .bc-history-btn:hover:not([disabled]) { background: var(--green-mid); }
      .bc-history-label {
        font-size: 13px; font-weight: 600; color: var(--ink-mid);
        white-space: nowrap;
      }
      .bc-history-btn[disabled] {
        background: var(--card2);
        border-color: var(--border);
        color: var(--ink-dim);
        opacity: 0.6; cursor: not-allowed;
      }
      .bc-history-bar {
        background: var(--gold-lt);
        border-radius: 10px;
      }
      .bc-history-viewing {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 700; color: #9A7611;
      }
      .bc-history-notice {
        display: flex; align-items: center; gap: 8px;
        background: var(--gold-lt); border: 1px solid var(--gold);
        color: #7A5D0E; border-radius: 10px;
        padding: 10px 14px; margin-bottom: 12px;
        font-size: 13.5px; line-height: 1.4;
      }
      /* Dim the courts slightly when viewing history so it reads as read-only */
      .bc-courts-history { opacity: 0.92; }
      .bc-courts-history .bc-player { cursor: default; }

      /* ---- Gender color cues (court cards + Manage Players) ---- */
      /* A soft left-border accent + faint tint so male/female are easy to tell
         apart at a glance, without clashing with the beige theme. Blue for
         male, rose for female — chosen for clear contrast on the cream cards. */
      .bc-player.g-tag-M {
        border-left: 4px solid #2E6FB0;
        background: linear-gradient(to right, rgba(46,111,176,0.09), var(--surface) 55%);
      }
      .bc-player.g-tag-F {
        border-left: 4px solid #C13B6E;
        background: linear-gradient(to right, rgba(193,59,110,0.09), var(--surface) 55%);
      }
      .bc-player.g-tag-O {
        border-left: 4px solid var(--ink-dim);
      }

      /* Manage Players rows — a matching left accent bar */
      .bc-roster-row.g-tag-M { border-left: 4px solid #2E6FB0; }
      .bc-roster-row.g-tag-F { border-left: 4px solid #C13B6E; }
      .bc-roster-row.g-tag-O { border-left: 4px solid var(--ink-dim); }

      /* Keep the selected (swap) highlight readable over the tint */
      .bc-player.is-selected.g-tag-M,
      .bc-player.is-selected.g-tag-F {
        background: var(--gold-lt);
      }


      /* ====================================================================== */
      /* BAND live-event integration                                             */
      /* ====================================================================== */
      .bc-live-card {
        grid-column: 1 / -1;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 18px 22px;
        box-shadow: 0 1px 6px rgba(26,92,56,0.06);
      }
      .bc-live-head {
        display: flex; justify-content: space-between; align-items: flex-start;
        gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
      }
      .bc-live-title {
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: 0.08em; font-size: 13.5px; font-weight: 700;
        color: var(--green);
      }
      .bc-live-status {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 5px 10px; border-radius: 999px;
        font-size: 11.5px; font-weight: 700;
        background: var(--card2); color: var(--ink-mid);
        border: 1px solid var(--border);
      }
      .bc-live-status::before {
        content: ""; width: 8px; height: 8px; border-radius: 50%;
        background: var(--ink-dim);
      }
      .bc-live-status.connected { background: var(--green-lt); color: var(--green); }
      .bc-live-status.connected::before { background: #2E9B5F; box-shadow: 0 0 0 3px rgba(46,155,95,.12); }
      .bc-live-status.error { background: var(--coral-lt); color: var(--coral); }
      .bc-live-status.error::before { background: var(--coral); }
      .bc-band-connect-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .bc-band-connect-actions .bc-live-status,
      .bc-band-connect-actions .bc-btn {
        box-sizing: border-box;
        min-width: 118px;
        height: 34px;
        min-height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        white-space: nowrap;
      }
      .bc-band-connect-actions .bc-live-status { gap: 7px; }
      .bc-live-event-grid {
        display: grid;
        grid-template-columns: minmax(240px, 2fr) repeat(4, minmax(95px, .65fr));
        gap: 10px; align-items: stretch;
      }
      .bc-live-event-main, .bc-live-metric {
        border: 1px solid var(--border);
        background: var(--surface);
        border-radius: 10px; padding: 11px 12px;
      }
      .bc-live-event-name { font-weight: 700; color: var(--ink); margin-bottom: 5px; }
      .bc-live-event-meta { font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
      .bc-live-metric { display: flex; flex-direction: column; justify-content: center; }
      .bc-live-metric strong {
        font-family: var(--font-display); color: var(--green); font-size: 24px; line-height: 1;
      }
      .bc-live-metric span {
        margin-top: 4px; font-size: 10px; color: var(--ink-dim);
        text-transform: uppercase; letter-spacing: .06em;
      }
      .bc-live-select { margin: 0; min-width: min(100%, 520px); }
      .bc-live-select-row {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        margin-bottom: 12px;
      }
      .bc-live-warning {
        margin-top: 12px; padding: 10px 12px; border-radius: 9px;
        background: var(--gold-lt); border: 1px solid #E8CC7A;
        color: #73550A; font-size: 12.5px; line-height: 1.5;
      }
      .bc-live-ok {
        margin-top: 12px; padding: 9px 12px; border-radius: 9px;
        background: var(--green-lt); border: 1px solid #9DCFB2;
        color: var(--green); font-size: 12.5px;
      }
      .bc-rsvp-columns {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px; margin-top: 12px;
      }
      .bc-rsvp-panel {
        background: var(--card); border: 1px solid var(--border);
        border-radius: 10px; padding: 10px 12px; min-width: 0;
      }
      .bc-rsvp-panel h3 {
        margin: 0 0 8px; font-family: var(--font-display);
        text-transform: uppercase; letter-spacing: .06em;
        font-size: 11px; color: var(--green);
      }
      .bc-rsvp-names {
        font-size: 12.5px; color: var(--ink-mid); line-height: 1.6;
        max-height: 150px; overflow: auto;
      }
      .bc-unmatched-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
      .bc-unmatched-row {
        display: grid; grid-template-columns: minmax(150px, .9fr) minmax(0, 1.45fr) auto;
        gap: 10px; align-items: center;
        border: 1px solid #E8CC7A; background: #FFFAE9;
        border-radius: 9px; padding: 10px 12px;
        min-width: 0;
      }
      .bc-unmatched-name { font-weight: 700; font-size: 12.5px; color: #73550A; min-width: 0; }
      .bc-linked-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; min-width: 0; }
      .bc-linked-row {
        display: grid; grid-template-columns: minmax(165px, .9fr) minmax(0, 1.35fr) auto auto;
        gap: 10px; align-items: center;
        border: 1px solid #9DCFB2; background: #F1FAF5;
        border-radius: 9px; padding: 10px 12px;
        min-width: 0;
      }
      .bc-linked-row > div { min-width: 0; }
      .bc-linked-row .bc-select,
      .bc-unmatched-row .bc-select { min-width: 0; width: 100%; }
      .bc-linked-band-name { font-weight: 700; font-size: 12.5px; color: var(--green); overflow-wrap: anywhere; }
      .bc-linked-arrow { color: var(--ink-dim); font-size: 11px; margin-top: 2px; overflow-wrap: anywhere; }
      @media (max-width: 700px) {
        .bc-linked-row {
          grid-template-columns: minmax(0, 1fr) auto auto;
        }
        .bc-linked-row > div:first-child { grid-column: 1 / -1; }
        .bc-unmatched-row {
          grid-template-columns: minmax(0, 1fr) auto;
        }
        .bc-unmatched-name { grid-column: 1 / -1; }
      }
      @media (max-width: 460px) {
        .bc-drawer-head { padding: 16px; }
        .bc-drawer-body { padding: 16px; }
        .bc-linked-row { grid-template-columns: 1fr 1fr; }
        .bc-linked-row > div:first-child,
        .bc-linked-row .bc-select { grid-column: 1 / -1; }
        .bc-linked-row .bc-btn { width: 100%; justify-content: center; }
        .bc-unmatched-row { grid-template-columns: 1fr auto; }
      }
      .bc-live-header-chip {
        font-size: 10px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .06em; padding: 3px 7px; border-radius: 999px;
        background: rgba(255,255,255,.14); color: rgba(255,255,255,.88);
        border: 1px solid rgba(255,255,255,.22);
      }
      .bc-live-readonly-note {
        font-size: 11.5px; color: var(--ink-dim); line-height: 1.55;
        margin: 8px 0 12px;
      }
      .bc-band-connect-actions {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      }
      .bc-band-cookie-import {
        border-top: 1px solid var(--border);
        margin-top: 18px;
        padding-top: 16px;
      }
      .bc-band-cookie-import > strong { display: block; margin-bottom: 6px; }
      .bc-band-cookie-import .bc-input { margin-bottom: 10px; }
      .bc-band-auth-dialog {
        background: var(--card); border-radius: 16px; width: calc(100% - 32px);
        max-width: 620px; max-height: min(92dvh, 820px);
        box-shadow: 0 16px 54px rgba(15,35,24,.34);
        overflow: hidden; animation: faq-in .15s ease;
        display: flex; flex-direction: column;
      }
      .bc-band-auth-head {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 16px 18px; background: var(--green); color: #fff;
      }
      .bc-band-auth-head strong {
        font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: .08em; font-size: 14px;
      }
      .bc-band-auth-body {
        padding: 18px;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .bc-band-auth-status {
        border: 1px solid var(--border); background: var(--green-lt); color: var(--green);
        padding: 10px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
        margin-bottom: 14px;
      }
      .bc-band-auth-status.error {
        background: var(--coral-lt); border-color: #F1A8AA; color: var(--coral);
      }
      .bc-band-auth-progress {
        margin: 0 0 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: rgba(255,255,255,.36);
        overflow: hidden;
      }
      .bc-band-auth-progress-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; padding: 9px 11px;
        border-bottom: 1px solid var(--border);
      }
      .bc-band-auth-progress-head > div {
        display: flex; align-items: center; gap: 8px; min-width: 0;
      }
      .bc-band-auth-progress-head strong {
        color: var(--ink); font-size: 12px;
      }
      .bc-band-auth-progress-state {
        padding: 2px 7px; border-radius: 999px;
        background: var(--card2); color: var(--ink-dim);
        font-size: 9px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .05em;
      }
      .bc-band-auth-progress-state.is-running { background: var(--gold-lt); color: #73550A; }
      .bc-band-auth-progress-state.is-success { background: var(--green-lt); color: var(--green); }
      .bc-band-auth-progress-state.is-error { background: var(--coral-lt); color: var(--coral); }
      .bc-band-auth-progress-head .bc-link-btn {
        flex: 0 0 auto; padding: 2px 0; font-size: 10.5px;
      }
      .bc-band-auth-log {
        max-height: 230px;
        overflow-y: auto;
        padding: 8px 10px;
        background: #fffaf0;
        font-family: var(--font-mono);
        scrollbar-width: thin;
      }
      .bc-band-auth-log-row {
        display: grid;
        grid-template-columns: 42px 10px minmax(0,1fr);
        gap: 7px;
        align-items: start;
        padding: 4px 0;
        font-size: 10.5px;
        line-height: 1.42;
      }
      .bc-band-auth-log-time { color: var(--ink-dim); text-align: right; }
      .bc-band-auth-log-dot {
        width: 7px; height: 7px; margin-top: 4px;
        border-radius: 50%; background: var(--ink-dim);
      }
      .bc-band-auth-log-row.is-running .bc-band-auth-log-dot,
      .bc-band-auth-log-row.is-info .bc-band-auth-log-dot { background: var(--gold); }
      .bc-band-auth-log-row.is-ok .bc-band-auth-log-dot,
      .bc-band-auth-log-row.is-success .bc-band-auth-log-dot { background: #2E9B5F; }
      .bc-band-auth-log-row.is-error .bc-band-auth-log-dot { background: var(--coral); }
      .bc-band-auth-log-message { color: var(--ink); }
      .bc-band-auth-log-details { color: var(--ink-dim); margin-top: 1px; overflow-wrap: anywhere; }
      .bc-band-auth-progress-note {
        padding: 7px 10px;
        color: var(--ink-dim);
        font-size: 9.5px;
        line-height: 1.4;
        border-top: 1px solid var(--border);
      }
      .bc-band-auth-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
      .bc-band-auth-spinner {
        display: inline-block; width: 13px; height: 13px; border-radius: 50%;
        border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
        animation: bc-band-spin .7s linear infinite;
      }
      @keyframes bc-band-spin { to { transform: rotate(360deg); } }
      @media (max-width: 820px) {
        .bc-live-event-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
        .bc-live-event-main { grid-column: 1 / -1; }
      }
      @media (max-width: 540px) {
        .bc-rsvp-columns { grid-template-columns: 1fr; }
        .bc-unmatched-row { grid-template-columns: 1fr; }
      }


      /* ====================================================================== */
      /* RallyMate mobile viewport/scroll fix v1                                */
      /* Fixes mobile side panels / drawers going off-screen or becoming        */
      /* unscrollable after opening Attendance / Players / admin overlays.      */
      /* ====================================================================== */
      html, body {
        max-width: 100%;
        overflow-x: hidden;
      }

      body.bc-app {
        min-height: 100svh;
      }

      #app, #drawer-root, #faq-root, #admin-panel-root, #attendance-root {
        max-width: 100%;
      }

      @media (max-width: 820px) {
        .bc-setup,
        .bc-courts,
        .bc-sitout,
        .bc-live-band-block,
        .bc-live-panel,
        .bc-main-grid,
        .bc-setup-grid,
        .bc-card,
        .bc-panel {
          max-width: 100%;
          min-width: 0;
          box-sizing: border-box;
        }

        /* Any fixed overlay/backdrop must fully own the viewport */
        .bc-drawer-backdrop,
        .bc-attendance-backdrop,
        .bc-attendance-overlay,
        .faq-backdrop,
        .admin-backdrop {
          position: fixed !important;
          inset: 0 !important;
          width: 100vw !important;
          height: 100dvh !important;
          padding: 0 !important;
          margin: 0 !important;
          overflow: hidden !important;
          align-items: stretch !important;
          justify-content: flex-end !important;
          z-index: 999 !important;
        }

        /* Mobile slide-over panels / drawers */
        .bc-drawer,
        .bc-attendance-drawer,
        .bc-attendance-panel,
        .bc-attendance-sheet {
          position: relative !important;
          right: 0 !important;
          left: auto !important;
          transform: none !important;
          width: min(100vw, 420px) !important;
          max-width: 100vw !important;
          height: 100dvh !important;
          max-height: 100dvh !important;
          margin: 0 !important;
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          overflow: hidden !important;
          box-sizing: border-box !important;
          -webkit-overflow-scrolling: touch;
        }

        /* Centered modals should fill mobile viewport too */
        .faq-panel,
        .admin-panel {
          width: 100vw !important;
          max-width: 100vw !important;
          height: 100dvh !important;
          max-height: 100dvh !important;
          margin: 0 !important;
          border-radius: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          overflow: hidden !important;
          box-sizing: border-box !important;
        }

        .bc-drawer-head,
        .bc-attendance-head,
        .faq-head,
        .admin-head {
          flex: 0 0 auto;
          position: sticky;
          top: 0;
          z-index: 2;
        }

        .bc-drawer-body,
        .bc-attendance-body,
        .bc-attendance-content,
        .bc-attendance-scroll,
        .faq-body,
        .admin-body {
          flex: 1 1 auto !important;
          min-height: 0 !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          -webkit-overflow-scrolling: touch !important;
          overscroll-behavior: contain !important;
          padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
          box-sizing: border-box !important;
        }

        /* Inner lists should not fight the parent scroller on mobile */
        .bc-roster-list.scroll,
        .bc-picker-list,
        .bc-attendance-list,
        .bc-attendance-list-wrap,
        .bc-attendance-checkedin,
        .bc-attendance-checkedout {
          max-height: none !important;
          overflow-y: visible !important;
        }

        /* Safety: if body is locked while overlay is open, stop background scroll
           but do not allow horizontal shift */
        html.bc-mobile-overlay-open,
        body.bc-mobile-overlay-open {
          overflow-x: hidden !important;
          overflow-y: hidden !important;
          max-width: 100%;
        }

        html:not(.bc-mobile-overlay-open) {
          overflow-y: auto !important;
        }
        body.bc-app:not(.bc-mobile-overlay-open) {
          overflow-y: visible !important;
          height: auto !important;
          min-height: 100svh !important;
          touch-action: pan-y !important;
        }
      }



/* ====================================================================== */
/* RallyMate court management + training courts v1                        */
/* ====================================================================== */

.bc-courts {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1500px !important;
}
@media (max-width: 1180px) {
  .bc-courts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .bc-courts { grid-template-columns: 1fr !important; }
}

.bc-court-card[draggable="true"] .bc-court-head { cursor: grab; }
.bc-court-card.bc-court-drag-over {
  outline: 3px solid rgba(200,151,26,.45);
  outline-offset: 2px;
}
.bc-court-title-wrap {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.bc-court-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-court-admin-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.bc-court-mini-btn {
  width: 25px;
  height: 25px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.bc-court-mini-btn:hover { background: rgba(255,255,255,.22); }

.bc-training-court {
  border-color: #d4a017;
  background: #fff9e9;
}
.bc-training-court .bc-court-head { background: #8a690d; }
.bc-training-body {
  padding: 12px 14px 14px;
  min-height: 132px;
}
.bc-training-copy {
  color: var(--ink-dim);
  font-size: 11.5px;
  line-height: 1.4;
  margin-bottom: 10px;
}
.bc-training-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}
.bc-training-player {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1.5px solid #e4c66e;
  border-radius: 8px;
  background: #fffdf5;
}
.bc-training-player[draggable="true"] { cursor: grab; }
.bc-training-player-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 12.5px;
}
.bc-training-return {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font-size: 15px;
  padding: 2px 3px;
}
.bc-training-add {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
}
.bc-training-add select {
  min-width: 0;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.bc-training-drop-hint {
  border: 1.5px dashed #d4a017;
  border-radius: 8px;
  padding: 9px;
  text-align: center;
  font-size: 11px;
  color: #80620e;
  margin-top: 9px;
}
.bc-training-empty {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 6px 0 10px;
}

.bc-session-drop-tools {
  max-width: 1500px;
  margin: 8px auto -4px;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
}
.bc-session-bin {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1.5px dashed #d64045;
  background: #fdecea;
  color: #d64045;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.bc-session-bin.is-drag-over {
  background: #f7cfd0;
  transform: scale(1.05);
}
.bc-sitout.bc-training-rest-drop { position: relative; }
.bc-sitout.bc-training-rest-drop.is-drag-over {
  outline: 3px solid rgba(46,125,82,.28);
  outline-offset: 2px;
}
.bc-sitout-title .bc-rest-drop-note {
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 7px;
}
.bc-idle-court .bc-court-body {
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bc-idle-court-note {
  color: var(--ink-dim);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
@media (max-width: 720px) {
  .bc-training-list { grid-template-columns: 1fr; }
  .bc-session-drop-tools { padding: 0 12px; }
}



/* ====================================================================== */
/* RallyMate searchable pickers + live court edit v1                      */
/* ====================================================================== */

.rm-native-select-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.rm-picker-trigger {
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border:1.5px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  font-family:var(--font-body);
  font-size:13px;
}
.rm-picker-trigger:hover,
.rm-picker-trigger:focus-visible {
  border-color:var(--green-mid);
  outline:none;
}
.rm-picker-trigger-label {
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.rm-picker-trigger-caret {
  flex:0 0 auto;
  color:var(--ink-dim);
}

.rm-picker-portal {
  position:fixed;
  z-index:99999;
  min-width:280px;
  max-width:min(460px, calc(100vw - 20px));
  max-height:min(520px, calc(100vh - 24px));
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 14px 45px rgba(42,33,19,.24);
  overflow:hidden;
}
.rm-picker-head {
  padding:10px;
  border-bottom:1px solid var(--border);
  background:var(--card);
}
.rm-picker-search {
  width:100%;
  box-sizing:border-box;
  padding:10px 11px;
  border:1.5px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:14px;
}
.rm-picker-search:focus {
  outline:none;
  border-color:var(--green-mid);
  box-shadow:0 0 0 2px rgba(46,125,82,.12);
}
.rm-picker-meta {
  margin-top:7px;
  color:var(--ink-dim);
  font-size:10.5px;
}
.rm-picker-list {
  overflow:auto;
  padding:6px;
  overscroll-behavior:contain;
}
.rm-picker-option {
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.rm-picker-option:hover { background:var(--green-lt); }
.rm-picker-option.is-selected { background:#E8F5EE; }
.rm-picker-option input {
  width:16px;
  height:16px;
  accent-color:var(--green);
}
.rm-picker-option-label {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rm-picker-games {
  flex:0 0 auto;
  min-width:30px;
  padding:2px 6px;
  border-radius:999px;
  background:var(--gold-lt);
  color:#7b5c08;
  text-align:center;
  font-size:10px;
  font-weight:700;
}
.rm-picker-empty {
  padding:22px 12px;
  color:var(--ink-dim);
  text-align:center;
  font-size:12px;
}
.rm-picker-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  border-top:1px solid var(--border);
  background:var(--card);
}
.rm-picker-foot-right {
  display:flex;
  gap:7px;
}

.rm-member-search-wrap {
  margin:0 0 10px;
}
.rm-member-search {
  width:100%;
  box-sizing:border-box;
  padding:10px 11px;
  border:1.5px solid var(--border);
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  font:inherit;
}
.rm-member-search:focus {
  outline:none;
  border-color:var(--green-mid);
}
.rm-member-search-count {
  margin-top:5px;
  color:var(--ink-dim);
  font-size:10.5px;
}

.rm-games-badge {
  flex:0 0 auto;
  padding:2px 5px;
  border-radius:999px;
  background:var(--gold-lt);
  color:#7b5c08;
  font-size:9px;
  line-height:1.2;
  font-weight:700;
}
.bc-player[data-rm-live-loc] {
  cursor:grab;
}
.bc-player[data-rm-live-loc].rm-live-drop-target {
  outline:3px solid rgba(46,125,82,.30);
  outline-offset:2px;
}
.rm-live-edit-note {
  max-width:1500px;
  margin:4px auto 8px;
  padding:0 24px;
  color:var(--ink-dim);
  font-size:11px;
  text-align:right;
}

.bc-court-mini-btn .rm-training-icon,
.bc-session-bin .rm-trash-icon {
  width:16px;
  height:16px;
  display:block;
}
.bc-session-bin .rm-trash-icon {
  width:20px;
  height:20px;
}

@media (max-width:720px) {
  .rm-picker-portal {
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none;
    max-height:70vh;
  }
  .rm-live-edit-note {
    padding:0 12px;
    text-align:left;
  }
}



/* ====================================================================== */
/* RallyMate training-toggle + today BAND links + stable drawer v1        */
/* ====================================================================== */

.rm-band-today-links {
  margin-top: 18px;
}
.rm-band-today-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.rm-band-today-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-dim);
  font-weight: 700;
}
.rm-band-today-count {
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.rm-band-today-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 10px 11px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.rm-band-today-search:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 2px rgba(46,125,82,.12);
}
.rm-band-today-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rm-band-today-row {
  display: grid;
  grid-template-columns: minmax(155px,.9fr) minmax(230px,1.35fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--card);
}
.rm-band-today-row.is-unlinked {
  border-color: #e4c66e;
  background: #fffaf0;
}
.rm-band-today-band {
  min-width: 0;
}
.rm-band-today-name {
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm-band-today-status {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm-band-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rm-band-status-pill.linked {
  background: var(--green-lt);
  color: var(--green);
}
.rm-band-status-pill.auto {
  background: #eef4ff;
  color: #315b91;
}
.rm-band-status-pill.unlinked {
  background: var(--gold-lt);
  color: #795a08;
}
.rm-band-today-row .bc-input {
  margin: 0 !important;
}
.rm-band-today-empty {
  padding: 18px 10px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12px;
}

@media (max-width: 720px) {
  .rm-band-today-row {
    grid-template-columns: 1fr;
  }
  .rm-band-today-row .bc-btn {
    width: 100%;
    justify-content: center;
  }
}



/* ====================================================================== */
/* RallyMate live refill ended training court v1                          */
/* ====================================================================== */

.rm-live-fill-court {
  border-color: #b7cbbd;
}
.rm-live-fill-body {
  padding: 12px 14px 14px;
}
.rm-live-fill-copy {
  margin-bottom: 10px;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.4;
}
.rm-live-fill-teams {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.rm-live-fill-team-label {
  margin-bottom: 5px;
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rm-live-fill-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}
.rm-live-fill-slot {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  border: 1.5px dashed #b7cbbd;
  border-radius: 8px;
  background: #fbfdfb;
}
.rm-live-fill-slot.is-drag-over {
  border-color: var(--green-mid);
  background: var(--green-lt);
}
.rm-live-fill-empty {
  width: 100%;
  padding: 9px;
  color: var(--ink-dim);
  text-align: center;
  font-size: 10.5px;
}
.rm-live-fill-player {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
}
.rm-live-fill-player-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 12px;
}
.rm-live-fill-games {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--gold-lt);
  color: #7b5c08;
  font-size: 9px;
  font-weight: 700;
}
.rm-live-fill-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font-size: 16px;
}
.rm-live-fill-remove:hover {
  background: var(--green-lt);
}
.rm-live-fill-vs {
  position: relative;
  margin: 1px 0;
  height: 1px;
  background: var(--border);
}
.rm-live-fill-vs span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-dim);
  font-size: 9px;
}
.rm-live-fill-add {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
  margin-top: 11px;
}
.rm-live-fill-drop {
  margin-top: 8px;
  padding: 8px;
  border: 1.5px dashed #9ab8a4;
  border-radius: 8px;
  color: var(--green);
  text-align: center;
  font-size: 10.5px;
}
.rm-live-fill-court.rm-live-fill-over {
  outline: 3px solid rgba(46,125,82,.25);
  outline-offset: 2px;
}

@media (max-width:720px) {
  .rm-live-fill-slots {
    grid-template-columns: 1fr;
  }
  .rm-live-fill-add {
    grid-template-columns: 1fr;
  }
}



/* ====================================================================== */
/* RallyMate training all-checked-in + BAND search visibility fix v1      */
/* ====================================================================== */

/* The BAND search code was already setting row.hidden correctly, but the
   author's display:grid rule overrode the browser's [hidden]{display:none}.
   This makes the existing search filter actually hide non-matches. */
.rm-band-today-row[hidden] {
  display: none !important;
}

/* Training picker hints: source/location labels stay compact. */
.rm-training-source {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: #eef4ff;
  color: #315b91;
  font-size: 9px;
  font-weight: 700;
}



/* RallyMate recycle-bin image icon v1 */
.bc-session-bin .rm-trash-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}


/* ====================================================================== */
/* RallyMate mobile layout hardening v2                                   */
/* Keeps the document anchored to the viewport and gives drawers one      */
/* vertical scroller. This intentionally overrides the older mobile fix.  */
/* ====================================================================== */
html {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
body.bc-app {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: visible;
  touch-action: pan-y;
}
#app {
  min-height: 100svh;
  overflow: visible;
}
#app,
#drawer-root,
#faq-root,
#admin-panel-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.bc-header,
.bc-setup,
.bc-setup-card,
.bc-live-card,
.bc-courts,
.bc-court-card,
.bc-action-bar,
.bc-banner,
.bc-sitout {
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 820px) {
  .bc-header {
    width: 100%;
    max-width: 100%;
  }
  .bc-header > * {
    min-width: 0;
  }
  .bc-header-actions {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .bc-setup {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px 12px !important;
  }
  .bc-setup-card,
  .bc-live-card {
    width: 100%;
    max-width: 100%;
  }

  .bc-courts {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  .bc-action-bar,
  .bc-banner,
  .bc-sitout,
  .rm-live-edit-note {
    max-width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box;
  }

  /* Fixed + inset already defines the viewport. Avoid 100vw, which can
     introduce a horizontal offset on mobile browsers with dynamic chrome. */
  .bc-drawer-backdrop,
  .bc-attendance-backdrop,
  .bc-attendance-overlay,
  .faq-backdrop,
  .admin-backdrop {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
  }

  .bc-drawer,
  .bc-attendance-drawer,
  .bc-attendance-panel,
  .bc-attendance-sheet,
  .faq-panel,
  .admin-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .bc-drawer-body,
  .bc-attendance-body,
  .bc-attendance-content,
  .bc-attendance-scroll,
  .faq-body,
  .admin-body {
    width: 100%;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch !important;
  }

  .bc-drawer input,
  .bc-drawer select,
  .bc-drawer textarea,
  .bc-attendance-drawer input,
  .bc-attendance-drawer select,
  .bc-attendance-drawer textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  .rm-picker-portal {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .bc-header {
    padding: 12px;
    gap: 10px;
  }
  .bc-header-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }
  .bc-timer-block {
    min-width: 0;
  }
  .bc-setup-card {
    padding: 16px 14px;
  }
  .bc-setting-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .bc-setting-help,
  .bc-live-event-main,
  .bc-live-event-title {
    overflow-wrap: anywhere;
  }
}

/* Live Session Settings drawer */
.bc-live-settings-intro {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--green-lt);
  color: var(--ink-mid);
  font-size: 12px;
  line-height: 1.45;
}
.bc-live-settings .bc-setting-row:first-of-type {
  border-top: 1px solid var(--border);
}