*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --orange: #ff7003;
      --orange-dim: rgba(255,112,3,0.15);
      --orange-glow: rgba(255,112,3,0.4);
      --bg:      #0f0f0f;
      --bg2:     #171717;
      --surface: #1c1c1c;
      --surface2:#252525;
      --border:  rgba(255,255,255,0.08);
      --text:    #f5f5f5;
      --muted:   #888;
      --red:     #e53e3e;
      --green:   #27ae60;
      --blue:    #3498db;
      --radius:  12px;
      --stat-btn-bg: #000;
    }

    /* ── Light Theme ─────────────────────────────────────────────── */
    body.theme-light {
      --bg:      #f2f0ec;
      --bg2:     #e8e5df;
      --surface: #ffffff;
      --surface2:#ede9e3;
      --border:  rgba(0,0,0,0.11);
      --text:    #111111;
      --muted:   #666666;
      --orange-dim: rgba(255,112,3,0.12);
      --stat-btn-bg: #ffffff;
    }

    /* ── UI Scale (tablet zoom) ───────────────────────────────────── */
    body[data-scale="sm"] { zoom: 0.85; }
    body[data-scale="lg"] { zoom: 1.18; }

    html { height: 100%; }
    body { min-height: 100%; background: var(--bg); color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

    /* ── SIDEBAR ──────────────────────────────────────────────────── */
    .sidebar-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.6);
      z-index: 250;
      opacity: 0; pointer-events: none;
      transition: opacity .25s ease;
    }
    .sidebar-overlay.open { opacity: 1; pointer-events: auto; }

    .sidebar {
      position: fixed; top: 0; left: 0; bottom: 0;
      width: 264px; max-width: 82vw;
      background: var(--surface);
      border-right: 1px solid var(--border);
      z-index: 260;
      transform: translateX(-100%);
      transition: transform .25s cubic-bezier(.32,1,.27,1);
      display: flex; flex-direction: column;
      box-shadow: 6px 0 32px rgba(0,0,0,.5);
    }
    .sidebar.open { transform: translateX(0); }

    .sidebar-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 14px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .sidebar-brand { display: flex; align-items: center; gap: 9px; }
    .sidebar-logo-text {
      font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--text);
    }
    .sidebar-close {
      background: none; border: none; color: var(--muted); cursor: pointer;
      font-size: 18px; padding: 0; border-radius: 7px; line-height: 1;
      min-width: 34px; min-height: 34px; display: flex; align-items: center;
      justify-content: center; -webkit-tap-highlight-color: transparent;
    }
    .sidebar-close:active { background: var(--surface2); color: var(--text); }

    .sidebar-nav-list {
      flex: 1; padding: 10px 8px; overflow-y: auto; scrollbar-width: none;
    }
    .sidebar-nav-list::-webkit-scrollbar { display: none; }

    .sidebar-item {
      display: flex; flex-direction: row; align-items: center; gap: 13px;
      width: 100%; padding: 12px 14px; border: none; border-radius: 10px;
      background: none; color: var(--muted); font-size: 14px; font-weight: 600;
      cursor: pointer; text-align: left; margin-bottom: 2px;
      -webkit-tap-highlight-color: transparent;
      transition: color .15s, background .15s;
      min-height: 48px; overflow: hidden;
    }
    .sidebar-item svg { width: 20px; height: 20px; flex-shrink: 0; min-width: 20px; }
    .sidebar-item:active { background: var(--surface2); color: var(--text); }
    .sidebar-item.active { background: var(--orange); color: #fff; }
    .sidebar-item.active svg { stroke: #fff; }

    .sidebar-divider {
      height: 1px; background: var(--border); margin: 6px 8px 8px;
    }

    .sidebar-footer-items {
      padding: 0 8px 20px; flex-shrink: 0;
    }

    /* ── HAMBURGER BUTTON ─────────────────────────────────────────── */
    .hamburger-btn {
      background: none; border: none; color: var(--text); cursor: pointer;
      padding: 0; border-radius: 8px; display: flex; align-items: center;
      justify-content: center; -webkit-tap-highlight-color: transparent;
      flex-shrink: 0; min-width: 44px; min-height: 44px;
    }
    .hamburger-btn svg { width: 22px; height: 22px; }
    .hamburger-btn:active { background: var(--surface); }

    /* ── TOP NAV ──────────────────────────────────────────────────── */
    .topnav {
      position: sticky; top: 0; z-index: 200;
      background: var(--bg2); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; padding: 0 12px; height: 56px; gap: 10px;
    }
    .logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
    .logo-icon {
      width: 34px; height: 34px; border-radius: 50%; background: none;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
    }
    .logo-text { font-size: 14px; font-weight: 800; letter-spacing: .08em; }
    .nav-pill {
      display: flex; align-items: center; gap: 2px;
      background: var(--surface); border-radius: 10px; padding: 4px;
      flex: 1; overflow-x: auto; scrollbar-width: none;
    }
    .nav-pill::-webkit-scrollbar { display: none; }
    .nav-tab {
      flex-shrink: 0; padding: 8px 12px; border-radius: 7px; border: none;
      background: none; color: var(--muted); font-size: 13px; font-weight: 600;
      cursor: pointer; display: flex; align-items: center; gap: 6px;
      transition: color .15s, background .15s; white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-tab.active { background: var(--orange); color: #fff; }
    .nav-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
    .nav-right { flex-shrink: 0; }
    .nav-icon-btn {
      background: none; border: none; color: var(--muted); cursor: pointer;
      padding: 8px; border-radius: 8px; display: flex; align-items: center;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-icon-btn svg { width: 20px; height: 20px; }

    /* ── BANNER ───────────────────────────────────────────────────── */
    .banner {
      background: linear-gradient(90deg, #1c0e00, var(--surface));
      border-bottom: 1px solid rgba(255,112,3,.28);
      padding: 12px 16px; display: flex; align-items: center; gap: 12px;
    }
    .banner-play {
      width: 32px; height: 32px; border-radius: 50%; background: var(--orange);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .banner-info { flex: 1; min-width: 0; }
    .banner-label { font-size: 10px; font-weight: 700; color: var(--orange);
      letter-spacing: .08em; text-transform: uppercase; }
    .banner-title { font-size: 14px; font-weight: 600; margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .banner-resume {
      background: var(--orange); color: #fff; border: none; border-radius: 8px;
      padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
      flex-shrink: 0; -webkit-tap-highlight-color: transparent;
    }
    .banner-resume:active { opacity: .85; }
    .banner-close {
      background: none; border: none; color: var(--muted); cursor: pointer;
      padding: 6px; font-size: 18px; line-height: 1; flex-shrink: 0;
    }

    /* ── CONTENT ──────────────────────────────────────────────────── */
    .content { max-width: 900px; margin: 0 auto; padding: 24px 16px 80px; }

    .page-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 24px;
    }
    .page-title { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }

    /* ── BUTTONS ──────────────────────────────────────────────────── */
    .btn-primary {
      background: var(--orange); color: #fff; border: none; border-radius: 10px;
      padding: 11px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
      display: flex; align-items: center; gap: 6px;
      -webkit-tap-highlight-color: transparent; white-space: nowrap;
    }
    .btn-primary:active { opacity: .82; }
    .btn-ghost {
      flex: 1; background: rgba(255,255,255,.07); color: var(--text); border: none;
      border-radius: 12px; padding: 15px; font-size: 15px; font-weight: 700;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .btn-ghost:active { opacity: .8; }
    .btn-danger {
      background: rgba(229,62,62,.14); color: var(--red);
      border: 1px solid rgba(229,62,62,.22); border-radius: 10px;
      padding: 11px 16px; font-size: 14px; font-weight: 700;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .btn-danger:active { background: rgba(229,62,62,.25); }
    .btn-secondary {
      flex: 1; background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700;
      color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .btn-secondary:active { background: var(--surface2); }
    .link-btn {
      background: none; border: none; color: var(--orange);
      font-size: 13px; font-weight: 600; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .link-btn:active { opacity: .7; }

    /* ── STAT + SUMMARY CARDS ─────────────────────────────────────── */
    .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
    .stat-card {
      background: var(--surface); border-radius: var(--radius);
      border: 1px solid var(--border); padding: 20px;
    }
    .stat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .stat-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--muted); }
    .stat-card-icon svg { width: 20px; height: 20px; stroke: var(--muted); }
    .stat-card-value { font-size: 32px; font-weight: 800; line-height: 1; }
    .stat-card-sub { font-size: 11px; color: var(--muted); margin-top: 6px; }

    /* ── DASHBOARD GRID ───────────────────────────────────────────── */
    .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media (max-width: 580px) { .dash-grid { grid-template-columns: 1fr; } }

    /* ── SECTION CARD ─────────────────────────────────────────────── */
    .section-card {
      background: var(--surface); border-radius: var(--radius);
      border: 1px solid var(--border); overflow: hidden;
    }
    .section-card-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    .section-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--muted); }

    /* ── GAME ROW ─────────────────────────────────────────────────── */
    .game-row {
      display: flex; align-items: center; gap: 12px; padding: 13px 16px;
      border-bottom: 1px solid var(--border); cursor: pointer;
      transition: background .1s; -webkit-tap-highlight-color: transparent;
    }
    .game-row:last-child { border-bottom: none; }
    .game-row:active { background: var(--surface2); }
    .game-row-info { flex: 1; min-width: 0; }
    .game-row-title { font-size: 14px; font-weight: 600; }
    .game-row-date { font-size: 12px; color: var(--muted); margin-top: 3px; }
    .game-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .score-badge { font-size: 15px; font-weight: 800; }
    .status-pill {
      font-size: 10px; font-weight: 800; text-transform: uppercase;
      letter-spacing: .05em; padding: 3px 7px; border-radius: 99px;
    }
    .status-pill.live    { background: var(--red);     color: #fff; }
    .status-pill.loaded  { background: rgba(52,152,219,.18); color: var(--blue); border:1px solid rgba(52,152,219,.3); }
    .status-pill.completed { background: var(--surface2); color: var(--muted); }
    .open-link { font-size: 12px; color: var(--muted); font-weight: 600; }

    /* ── TEAM ROWS (dashboard widget) ────────────────────────────── */
    .team-row {
      display: flex; align-items: center; gap: 10px; padding: 13px 16px;
      border-bottom: 1px solid var(--border); cursor: pointer;
      transition: background .1s; -webkit-tap-highlight-color: transparent;
    }
    .team-row:last-child { border-bottom: none; }
    .team-row:active { background: var(--surface2); }
    .team-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .team-row-name { font-size: 14px; font-weight: 600; flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .team-row-meta { font-size: 12px; color: var(--muted); flex-shrink: 0; }

    /* ── TEAM CARD (teams list) ───────────────────────────────────── */
    .team-card {
      background: var(--surface); border-radius: var(--radius);
      border: 1px solid var(--border); padding: 15px;
      margin-bottom: 10px; display: flex; align-items: center; gap: 13px;
      cursor: pointer; transition: background .1s;
      -webkit-tap-highlight-color: transparent; user-select: none;
    }
    .team-card:active { opacity: 0.78; }
    .team-card-info { flex: 1; min-width: 0; }
    .team-card-name { font-size: 16px; font-weight: 700; }
    .team-card-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
    .icon-btn {
      background: none; border: none; color: var(--muted); cursor: pointer;
      padding: 12px 10px; border-radius: 8px; line-height: 1; flex-shrink: 0;
      transition: color .15s, background .15s; -webkit-tap-highlight-color: transparent;
      display: flex; align-items: center; justify-content: center;
      min-width: 44px; min-height: 44px;
    }
    .icon-btn:active { color: var(--red); background: rgba(229,62,62,.12); }
    .icon-btn svg { width: 20px; height: 20px; }

    /* ── TEAM DETAIL HEADER ───────────────────────────────────────── */
    .td-header {
      background: var(--bg2); border-bottom: 1px solid var(--border);
      position: sticky; top: 56px; z-index: 100;
    }
    .td-hero {
      max-width: 900px; margin: 0 auto;
      padding: 20px 16px 0; display: flex; align-items: center; gap: 14px;
    }
    .td-title { font-size: 26px; font-weight: 900; letter-spacing: -.5px; line-height: 1.1; }
    .td-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
    .td-staff { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .td-staff-item { display: flex; align-items: center; gap: 5px; font-size: 13px;
      background: var(--surface2); border-radius: 20px; padding: 4px 10px; color: var(--text); }
    .td-staff-role { font-size: 10px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
    .td-hero-actions {
      margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0;
    }
    .td-action-btn {
      background: none; border: none; color: var(--muted); font-size: 13px;
      font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 5px;
      padding: 8px 10px; border-radius: 8px; transition: color .15s, background .15s;
      -webkit-tap-highlight-color: transparent; white-space: nowrap;
    }
    .td-action-btn:hover { color: var(--text); background: var(--surface); }
    .td-action-btn svg { width: 14px; height: 14px; }

    /* ── TEAM DETAIL TABS ─────────────────────────────────────────── */
    .td-tabs-wrap {
      position: relative; max-width: 900px; margin: 0 auto;
    }
    .td-tabs-wrap::after {
      content: ''; position: absolute; right: 0; top: 0; bottom: 0;
      width: 36px;
      background: linear-gradient(to right, transparent, var(--bg2));
      pointer-events: none; z-index: 1;
    }
    .td-tabs {
      display: flex; gap: 0; padding: 0 16px;
      overflow-x: auto; scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .td-tabs::-webkit-scrollbar { display: none; }
    .td-tab {
      flex-shrink: 0;
      padding: 14px 16px 12px; background: none; border: none;
      color: var(--muted); font-size: 13px; font-weight: 700;
      letter-spacing: .05em; cursor: pointer; position: relative;
      -webkit-tap-highlight-color: transparent; white-space: nowrap;
      width: max-content;
    }
    .td-tab.active { color: var(--orange); }
    .td-tab.active::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0;
      height: 2px; background: var(--orange);
    }

    /* ── TEAM DETAIL HERO ACTION BUTTONS (icon-only) ──────────────── */
    .td-action-btn.td-icon-only {
      min-width: 44px; min-height: 44px;
      padding: 10px; gap: 0; justify-content: center;
    }
    .td-action-btn.td-icon-only svg { width: 18px; height: 18px; }

    /* ── ROSTER: INLINE ADD ROW ───────────────────────────────────── */
    .roster-add-row {
      display: flex; gap: 8px; align-items: center;
      background: var(--surface); border-radius: var(--radius);
      border: 1px solid var(--border); padding: 10px 12px; margin-bottom: 16px;
    }
    .roster-add-row input, .roster-add-row select {
      background: var(--bg2); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 14px;
      outline: none; -webkit-appearance: none; appearance: none;
    }
    .roster-add-row input:focus, .roster-add-row select:focus { border-color: var(--orange); }
    .roster-add-row input::placeholder { color: var(--muted); }
    .roster-add-row .inp-name { flex: 1; min-width: 80px; }
    .roster-add-row .inp-num  { width: 96px; }
    .roster-add-row .inp-pos  { width: 100px; }
    .roster-add-row .btn-add {
      background: var(--orange); color: #fff; border: none; border-radius: 8px;
      padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
      white-space: nowrap; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
    }
    .roster-add-row .btn-add:active { opacity: .85; }

    /* ── ROSTER: PLAYER ROW ───────────────────────────────────────── */
    .player-row {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    .player-row:last-child { border-bottom: none; }
    .player-num {
      font-size: 15px; font-weight: 800; color: var(--orange);
      width: 32px; flex-shrink: 0; text-align: center;
    }
    .player-row-info { flex: 1; min-width: 0; }
    .player-row-name { font-size: 15px; font-weight: 700; }
    .player-row-pos { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .player-row-actions { display: flex; gap: 4px; }

    /* ── SECTION LABEL ────────────────────────────────────────────── */
    .section-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .09em; color: var(--muted); margin: 18px 0 10px;
    }
    .section-label:first-child { margin-top: 0; }

    /* ── STAT CONFIG LIST ─────────────────────────────────────────── */
    .stat-list-desc {
      font-size: 13px; color: var(--muted); margin-bottom: 16px;
    }
    .stat-row {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px; border-bottom: 1px solid var(--border);
      background: var(--surface); transition: background .1s;
      user-select: none;
    }
    .stat-row:first-child { border-radius: var(--radius) var(--radius) 0 0; }
    .stat-row:last-child { border-bottom: none; border-radius: 0 0 var(--radius) var(--radius); }
    .stat-row:only-child { border-radius: var(--radius); }
    .stat-row.dragging { opacity: .5; background: var(--surface2); }
    .drag-handle {
      color: var(--muted); cursor: grab; display: flex; align-items: center;
      padding: 4px 2px; flex-shrink: 0; touch-action: none;
    }
    .drag-handle:active { cursor: grabbing; }
    .drag-handle svg { width: 16px; height: 16px; }
    .stat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .stat-row-info { flex: 1; min-width: 0; }
    .stat-row-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .stat-abbr { color: var(--muted); font-weight: 400; }
    .stat-pts-badge {
      font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 99px;
      background: rgba(255,255,255,.1); color: var(--text);
    }
    .stat-pts-badge.pos { background: rgba(39,174,96,.2); color: #27ae60; }
    .stat-category { font-size: 11px; color: var(--muted); text-transform: uppercase;
      letter-spacing: .06em; margin-top: 3px; }
    .stat-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .stat-checkbox {
      width: 18px; height: 18px; accent-color: var(--orange); cursor: pointer;
      flex-shrink: 0;
    }
    .stat-edit-btn {
      background: none; border: none; color: var(--muted); cursor: pointer;
      padding: 6px; border-radius: 6px; display: flex; align-items: center;
      -webkit-tap-highlight-color: transparent;
    }
    .stat-edit-btn:active { background: var(--surface2); }
    .stat-edit-btn svg { width: 16px; height: 16px; }

    /* ── TEAM SETTINGS FORM ───────────────────────────────────────── */
    .ts-section {
      background: var(--surface); border-radius: var(--radius);
      border: 1px solid var(--border); overflow: hidden; margin-bottom: 14px;
    }
    .ts-section-head {
      font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
      letter-spacing: .07em; padding: 13px 16px; border-bottom: 1px solid var(--border);
    }
    .ts-row {
      padding: 14px 16px; border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 8px;
    }
    .ts-row:last-child { border-bottom: none; }
    .ts-row-2 {
      padding: 14px 16px; border-bottom: 1px solid var(--border);
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .ts-row-2:last-child { border-bottom: none; }
    .ts-label { font-size: 11px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
    .ts-input {
      width: 100%; background: var(--bg2); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 11px 13px; color: var(--text); font-size: 14px;
      outline: none;
    }
    .ts-input:focus { border-color: var(--orange); }
    .ts-input::placeholder { color: var(--muted); }

    /* ── TEAM COLOUR PREVIEW ──────────────────────────────────────── */
    .colour-preview {
      display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
    }
    .colour-badge {
      width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    }
    .colour-preview-label { font-size: 14px; font-weight: 600; }
    .colour-preview-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

    /* ── COLOUR SWATCHES (team settings) ──────────────────────────── */
    .colour-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
    .colour-sw {
      width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
      border: 3px solid transparent; transition: transform .12s;
      -webkit-tap-highlight-color: transparent; flex-shrink: 0;
    }
    .colour-sw.sel { border-color: #fff; transform: scale(1.18); }
    .colour-sw:active { transform: scale(.88); }

    /* ── OPTION BUTTONS (quarter length, OT) ──────────────────────── */
    .opt-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
    .opt-btn {
      padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg2); color: var(--muted); font-size: 13px; font-weight: 600;
      cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap;
    }
    .opt-btn.sel { background: var(--orange); border-color: var(--orange); color: #fff; }
    .opt-btn:active { opacity: .8; }
    .ts-custom-input {
      margin-top: 8px; background: var(--bg2); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 10px 13px; color: var(--text); font-size: 14px;
      outline: none; width: 120px;
    }
    .ts-custom-input:focus { border-color: var(--orange); }

    /* ── OT TOGGLE ROW ────────────────────────────────────────────── */
    .ot-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    .ot-toggle-row:last-child { border-bottom: none; }
    .ot-toggle-label { font-size: 14px; font-weight: 600; }
    .toggle-switch {
      position: relative; width: 44px; height: 24px; flex-shrink: 0;
    }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-track {
      position: absolute; inset: 0; border-radius: 12px;
      background: var(--surface2); cursor: pointer; transition: background .2s;
    }
    .toggle-switch input:checked + .toggle-track { background: var(--orange); }
    .toggle-track::before {
      content: ''; position: absolute; width: 18px; height: 18px;
      border-radius: 50%; background: #fff; top: 3px; left: 3px;
      transition: transform .2s;
    }
    .toggle-switch input:checked + .toggle-track::before { transform: translateX(20px); }
    .ot-details { padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .ot-details:last-child { border-bottom: none; }

    /* ── SAVE TEAM BTN ────────────────────────────────────────────── */
    .save-team-btn {
      background: var(--orange); color: #fff; border: none; border-radius: 10px;
      padding: 14px 24px; font-size: 15px; font-weight: 700; cursor: pointer;
      display: flex; align-items: center; gap: 8px; margin-top: 20px;
      -webkit-tap-highlight-color: transparent;
    }
    .save-team-btn:active { opacity: .85; }

    .ts-danger-zone {
      margin-top: 32px; border: 1px solid rgba(229,62,62,.3);
      border-radius: 12px; padding: 18px 20px;
    }
    .ts-danger-label {
      font-size: 10px; font-weight: 800; color: var(--red);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
    }
    .ts-danger-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .ts-danger-title { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
    .ts-danger-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
    .ts-danger-btn {
      flex-shrink: 0; background: none; border: 1.5px solid var(--red); color: var(--red);
      border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .ts-danger-btn:hover { background: rgba(229,62,62,.1); }
    .ts-danger-btn:active { opacity: .85; }

    /* ── EMPTY STATE ──────────────────────────────────────────────── */
    .empty { padding: 44px 20px; text-align: center; color: var(--muted); }
    .empty-icon { font-size: 44px; margin-bottom: 12px; }
    .empty p { font-size: 14px; line-height: 1.55; }

    /* ── GAME SCORER ──────────────────────────────────────────────── */
    .scorer {
      min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); display: flex; flex-direction: column; background: var(--bg);
    }
    .scorer-header {
      padding: 16px 20px; display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid var(--border);
    }
    .period-row { margin-left: auto; display: flex; gap: 5px; }
    .period-btn {
      padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border);
      background: none; color: var(--muted); font-size: 12px; font-weight: 700;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .period-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
    .scorer-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
    .scorer-team {
      background: var(--bg); padding: 28px 16px 20px;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .scorer-team-name { font-size: 15px; font-weight: 700; text-align: center; }
    .scorer-score { font-size: 68px; font-weight: 900; line-height: 1; letter-spacing: -2px; }
    .score-btns { display: flex; gap: 7px; }
    .score-btn {
      width: 50px; height: 50px; border-radius: 12px; border: none;
      background: var(--surface2); color: var(--text); font-size: 14px; font-weight: 800;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: transform .1s, background .1s;
    }
    .score-btn:active { transform: scale(.88); background: var(--orange); }
    .scorer-footer {
      padding: 14px 20px 32px; display: flex; gap: 10px;
      border-top: 1px solid var(--border);
    }
    .back-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: none; border: none; color: var(--orange);
      font-size: 15px; font-weight: 600; cursor: pointer; padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── STATS TABLE ──────────────────────────────────────────────── */
    .standings-table { width: 100%; border-collapse: collapse; }
    .standings-table th {
      text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--muted); padding: 10px 16px;
      border-bottom: 1px solid var(--border);
    }
    .standings-table th:not(:first-child) { text-align: center; }
    .standings-table td { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid var(--border); }
    .standings-table tr:last-child td { border-bottom: none; }
    .standings-table td:not(:first-child) { text-align: center; color: var(--muted); }
    .td-name { font-weight: 600; color: var(--text) !important; }

    /* ── SEASON SETTINGS ──────────────────────────────────────────── */
    .settings-block {
      background: var(--surface); border-radius: var(--radius);
      border: 1px solid var(--border); overflow: hidden; margin-bottom: 14px;
    }
    .settings-block h3 {
      font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
      letter-spacing: .07em; padding: 14px 18px; border-bottom: 1px solid var(--border);
    }
    .settings-row {
      padding: 15px 18px; display: flex; align-items: center;
      justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border);
    }
    .settings-row:last-child { border-bottom: none; }
    .settings-row label { font-size: 14px; font-weight: 600; }
    .settings-input {
      background: var(--bg2); border: 1.5px solid var(--border); border-radius: 8px;
      padding: 9px 13px; color: var(--text); font-size: 14px; outline: none; flex: 1; max-width: 240px;
    }
    .settings-input:focus { border-color: var(--orange); }

    /* ── MODAL (bottom sheet) ─────────────────────────────────────── */
    .modal-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,.75);
      z-index: 300; display: flex; align-items: flex-end; justify-content: center;
      animation: fadein .15s ease;
    }
    @keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
    .modal {
      background: var(--surface); border-radius: 22px 22px 0 0;
      padding: 28px 20px 44px; width: 100%; max-width: 520px;
      border-top: 1px solid rgba(255,255,255,.1);
      animation: slideup .2s cubic-bezier(.32,1,.27,1);
    }
    @keyframes slideup { from { transform: translateY(60px); opacity: 0 } to { transform: none; opacity: 1 } }
    .modal h2 { font-size: 20px; font-weight: 800; margin-bottom: 22px; }
    .form-label {
      display: block; font-size: 12px; font-weight: 700; color: var(--muted);
      margin-bottom: 7px; text-transform: uppercase; letter-spacing: .06em;
    }
    .form-input, .form-select {
      width: 100%; background: var(--bg2); border: 1.5px solid rgba(255,255,255,.1);
      border-radius: 11px; padding: 14px; color: var(--text); font-size: 16px;
      margin-bottom: 16px; outline: none; -webkit-appearance: none; appearance: none;
    }
    .form-input:focus, .form-select:focus { border-color: var(--orange); }
    .form-input::placeholder { color: var(--muted); }
    .modal-actions { display: flex; gap: 10px; margin-top: 6px; }
    .btn-modal-primary {
      flex: 1; background: var(--orange); color: #fff; border: none;
      border-radius: 12px; padding: 15px; font-size: 15px; font-weight: 700;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-modal-primary:active { opacity: .85; }

    /* ── MODAL (centered, for Edit Stat) ──────────────────────────── */
    .modal-center-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,.75);
      z-index: 300; display: flex; align-items: center; justify-content: center;
      padding: 20px; animation: fadein .15s ease;
    }
    .modal-box {
      background: var(--surface); border-radius: 16px; padding: 24px;
      width: 100%; max-width: 400px; border: 1px solid rgba(255,255,255,.1);
      animation: popin .15s ease;
    }
    @keyframes popin { from { transform: scale(.94); opacity: 0 } to { transform: none; opacity: 1 } }
    .modal-box-header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
    }
    .modal-box-title { font-size: 17px; font-weight: 800; }
    .modal-close-btn {
      background: none; border: none; color: var(--muted); cursor: pointer;
      font-size: 20px; line-height: 1; padding: 4px; -webkit-tap-highlight-color: transparent;
    }
    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
    .form-row-2 .form-input { margin-bottom: 0; }
    .stat-color-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
    .stat-color-auto {
      padding: 7px 12px; border-radius: 8px; border: 2px solid var(--border);
      background: none; color: var(--text); font-size: 12px; font-weight: 700;
      cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s;
    }
    .stat-color-auto.sel { border-color: #fff; }
    .stat-color-sw {
      width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
      border: 2px solid transparent; transition: transform .12s;
      -webkit-tap-highlight-color: transparent;
    }
    .stat-color-sw.sel { border-color: #fff; transform: scale(1.2); }
    .stat-color-hint { font-size: 11px; color: var(--muted); }
    .modal-box-actions { display: flex; gap: 10px; margin-top: 20px; }
    .btn-box-ghost {
      flex: 1; background: rgba(255,255,255,.07); color: var(--text); border: none;
      border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .btn-box-primary {
      flex: 1; background: var(--orange); color: #fff; border: none;
      border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-box-primary:active, .btn-box-ghost:active { opacity: .85; }

    /* ── CUSTOM CONFIRM DIALOG ────────────────────────────────────────── */
    .confirm-box { text-align: center; max-width: 340px; padding: 32px 28px; }
    .confirm-icon { margin-bottom: 16px; display: flex; justify-content: center; }
    .confirm-msg  { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--text); }
    .btn-confirm-action {
      flex: 1; background: var(--orange); color: #fff; border: none;
      border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .btn-confirm-danger {
      flex: 1; background: var(--red); color: #fff; border: none;
      border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .btn-confirm-action:active, .btn-confirm-danger:active { opacity: .85; }

    /* ── COLOUR SWATCHES (team add modal) ─────────────────────────── */
    .color-picker { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
    .color-swatch {
      width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
      border: 3px solid transparent; transition: transform .12s;
      -webkit-tap-highlight-color: transparent;
    }
    .color-swatch.selected { border-color: #fff; transform: scale(1.2); }
    .color-swatch:active { transform: scale(.88); }

/* ── GAMES LIST v2 ────────────────────────────────────────────────── */
.games-filter-row { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.filter-tab { padding:8px 16px; border-radius:8px; border:1.5px solid var(--border); background:none;
  color:var(--muted); font-size:13px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
.filter-tab.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.filter-tab:active { opacity:.85; }
.games-team-sel { background:var(--surface); border:1.5px solid var(--border); border-radius:8px;
  color:var(--text); padding:8px 12px; font-size:13px; outline:none; cursor:pointer; }
.games-search { flex:1; min-width:120px; background:var(--surface); border:1.5px solid var(--border);
  border-radius:8px; color:var(--text); padding:9px 14px; font-size:13px; outline:none; }
.games-search::placeholder { color:var(--muted); }
.games-search:focus { border-color:var(--orange); }
.game-row2 { display:flex; align-items:center; gap:12px; padding:13px 16px;
  border-bottom:1px solid var(--border); -webkit-tap-highlight-color:transparent; }
.game-row2:last-child { border-bottom:none; }
.game-row2-info { flex:1; min-width:0; }
.game-row2-title { font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.game-row2-title .vs { color:var(--muted); font-weight:400; }
.game-row2-date { font-size:12px; color:var(--muted); margin-top:3px; }
.game-row2-right { display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap; }
.game-action-link { background:none; border:none; color:var(--text); font-size:13px; font-weight:600;
  cursor:pointer; padding:6px 10px; border-radius:7px; -webkit-tap-highlight-color:transparent; }
.game-action-link:active { background:var(--surface2); }

/* ── LIVE SCORER v2 ───────────────────────────────────────────────── */
.scorer2 { display:flex; flex-direction:column; height:calc(100vh - 56px); height:calc(100dvh - 56px); background:var(--bg); overflow:hidden; }
.scorer2-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
  padding:10px 14px; gap:10px; background:var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0; }
.scorer-team-panel { background:var(--surface); border-radius:12px; padding:12px 14px;
  border:2px solid rgba(255,255,255,0.13); cursor:pointer;
  transition:border-color .2s, box-shadow .2s, background .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.35); }
.scorer-team-panel:active { background:var(--surface2); }
.scorer-team-panel.recording-active { box-shadow:0 2px 8px rgba(0,0,0,.35); }
.stp-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stp-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.stp-name { font-size:20px; font-weight:900; letter-spacing:-.3px; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:8px; }
.stp-score { font-size:30px; font-weight:900; line-height:1; flex-shrink:0; }
.stp-actions { display:flex; gap:6px; margin-top:8px; }
.stp-score-group { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.score-adj-row { display:flex; gap:4px; }
.score-adj-btn { background:none; border:1px solid var(--border); border-radius:5px; color:var(--muted); font-size:14px; font-weight:900; width:22px; height:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; line-height:1; padding:0; }
.score-adj-btn:active { background:var(--surface2); color:var(--text); }
.foul-btn { flex:0 0 auto; min-width:64px; padding:8px 10px; border-radius:8px; min-height:44px;
  background:var(--surface2); border:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; }
.foul-btn:active { background:rgba(229,62,62,.15); border-color:var(--red); }
.foul-label { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.foul-count { font-size:22px; font-weight:900; color:var(--text); line-height:1; }
.timeout-btn { flex:1; padding:10px 12px; border-radius:8px; min-height:44px;
  background:var(--surface2); border:1px solid var(--border); color:var(--muted);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:space-between; }
.timeout-btn:active { background:rgba(255,112,3,.15); color:var(--orange); border-color:var(--orange); }
.to-count { background:var(--orange); color:#fff; border-radius:5px;
  padding:2px 8px; font-size:12px; font-weight:900; }
.to-dots { display:flex; align-items:center; gap:5px; }
.to-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--muted); background:transparent; display:inline-block; }
.to-dot.used { background:var(--blue); border-color:var(--blue); }
.to-right { display:flex; align-items:center; gap:5px; }
.to-remaining { background:var(--surface); border-radius:4px; padding:1px 6px; font-size:11px; font-weight:800; color:var(--text); min-width:18px; text-align:center; }
.scorer-center-col { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.game-info-box { background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:8px 14px; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
.clock-zero-prompt { display:flex; align-items:center; gap:8px; padding:6px 10px; background:rgba(229,62,62,.12); border:1.5px solid rgba(229,62,62,.3); border-radius:8px; width:100%; }
.czp-label { font-size:10px; font-weight:800; color:var(--red); letter-spacing:.06em; flex:1; }
.czp-advance { background:var(--orange); border:none; color:#fff; border-radius:6px; padding:5px 10px; font-size:10px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; white-space:nowrap; flex-shrink:0; }
.czp-advance:active { opacity:.8; }
.czp-dismiss { background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; padding:2px 4px; line-height:1; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.quarter-label { font-size:10px; font-weight:700; color:var(--orange); letter-spacing:.08em; }
.clock-row { display:flex; align-items:center; gap:10px; }
.clock-display { font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.clock-display.editable { cursor:pointer; border-bottom:2px dashed var(--orange); padding-bottom:1px; }
.clock-display.editable:active { opacity:.75; }
.clock-btn { border-radius:8px; border:1.5px solid var(--orange);
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:8px 16px; font-size:13px; font-weight:700; white-space:nowrap;
  cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent;
  transition:background .15s, transform .1s, border-color .15s; }
.clock-btn.running { background:rgba(255,112,3,.15); border-color:var(--orange); color:var(--orange); }
.clock-btn:active { transform:scale(.95); opacity:.9; }
.timeout-ql { color:var(--blue) !important; animation:to-pulse 1s ease-in-out infinite; }
.timeout-clock { color:var(--blue); }
.clock-btn.timeout-done-btn { background:var(--green); border-color:var(--green); color:#fff; }
@keyframes to-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes clock-buzz { 0%,100%{color:var(--text)} 50%{color:var(--red)} }
.clock-zero-alert { animation:clock-buzz .75s ease-in-out infinite; color:var(--red); }
.scorer-center-btns { display:flex; gap:6px; align-items:center; }
.q-btn { background:none; border:1.5px solid var(--border); border-radius:8px; padding:8px 12px;
  color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; min-height:36px;
  -webkit-tap-highlight-color:transparent; }
.q-btn.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.q-btn:active { opacity:.8; }
.q-cycle-btn { display:none; background:var(--orange); border:1.5px solid var(--orange); border-radius:8px; padding:5px 12px; color:#fff; font-size:12px; font-weight:700; cursor:pointer; min-height:30px; -webkit-tap-highlight-color:transparent; white-space:nowrap; align-items:center; }
.q-cycle-btn:active { opacity:.8; }
.end-footer-btn { border-color:var(--red) !important; color:var(--red) !important; }
.end-game-btn { background:var(--red); color:#fff; border:none; border-radius:8px;
  padding:9px 18px; font-size:12px; font-weight:800; cursor:pointer; min-height:36px;
  -webkit-tap-highlight-color:transparent; white-space:nowrap; margin-top:4px; }
.end-game-btn:active { opacity:.85; }

/* Done-flash: brief green highlight after recording a stat */
@keyframes done-fade { 0%{border-color:var(--green);background:rgba(39,174,96,.18)} 70%{border-color:var(--green);background:rgba(39,174,96,.06)} 100%{border-color:var(--surface2);background:transparent} }
@keyframes done-stat-fade { 0%{border-color:var(--green);background:rgba(39,174,96,.2);box-shadow:0 0 12px rgba(39,174,96,.4)} 100%{border-color:transparent;background:transparent;box-shadow:none} }
.player-card.done { animation:done-fade 300ms ease-out forwards; }
.stat-action-btn.done { animation:done-stat-fade 300ms ease-out forwards; }
.player-card.foul-3 { border-color:#d4ac00; }
.player-card.foul-3 .player-card-foul { color:#d4ac00; }
.player-card.foul-4 { border-color:#e67e22; background:rgba(230,126,34,.1); }
.player-card.foul-4 .player-card-foul { color:#e67e22; }
.player-card.foul-out { border-color:#e74c3c; background:rgba(231,76,60,.14); opacity:0.5; }
.player-card.foul-out .player-card-foul { color:#e74c3c; }

.scorer2-body { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1.6fr; gap:6px; overflow:hidden; padding:6px; }
.roster-panel { display:flex; flex-direction:column; border:2px solid rgba(255,255,255,0.13); border-radius:10px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.35); transition:border-color .2s, box-shadow .2s; }
.roster-panel-head { padding:8px 12px; font-size:11px; font-weight:800; color:var(--text);
  text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; }
.roster-team-link { background:none; border:none; color:var(--orange); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; cursor:pointer; padding:0;
  -webkit-tap-highlight-color:transparent; text-decoration:underline; text-underline-offset:2px; }
.roster-team-link:active { opacity:.7; }
.player-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:8px; overflow-y:auto; flex:1; min-height:0; }
.player-grid-label { grid-column:1/-1; font-size:9px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; padding:6px 2px 3px;
  border-bottom:1px solid var(--border); margin-bottom:2px; }
.player-card { background:var(--surface2); border-radius:10px; padding:14px 6px;
  border:2px solid rgba(255,255,255,0.13); cursor:pointer; text-align:center; min-height:72px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  -webkit-tap-highlight-color:transparent; transition:border-color .15s, background .15s, box-shadow .15s; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.player-card.selected { border-color:var(--team-color,var(--orange)); background:color-mix(in srgb,var(--team-color,var(--orange)) 12%,transparent); box-shadow:0 0 14px color-mix(in srgb,var(--team-color,var(--orange)) 30%,transparent); }
.player-card:active { background:var(--surface2); opacity:.85; }
.player-card-num { font-size:18px; font-weight:900; color:#111; background:rgba(255,255,255,.88); border-radius:4px; padding:0 5px; display:inline-block; line-height:1.4; }
.player-card-name { font-size:10px; color:var(--text); margin-top:3px; font-weight:600;
  word-break:break-word; line-height:1.3; }
.player-card-pts { font-size:10px; color:var(--muted); margin-top:2px; }
.player-card-foul { position:absolute; top:4px; right:6px; font-size:9px; color:var(--orange); font-weight:700; }

.stat-panel { display:flex; flex-direction:column; border:2px solid rgba(255,255,255,0.13); border-radius:10px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.35); transition:border-color .2s, box-shadow .2s; }
.stat-panel-head { display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--border); flex-shrink:0; }
.stat-panel-hint { font-size:9px; font-weight:400; font-style:italic; text-transform:none; letter-spacing:.01em; }
.stat-grid2 { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:8px; overflow-y:auto; flex:1; min-height:0; }
.stat-action-btn { background:var(--stat-btn-bg); border-radius:10px; padding:16px 6px; min-height:72px;
  border:2px solid transparent; cursor:pointer; text-align:center;
  -webkit-tap-highlight-color:transparent; transition:background .1s, transform .1s, border-color .15s, box-shadow .15s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; position:relative; }
.stat-action-btn:active { transform:scale(.93); }
.stat-action-btn.no-player { opacity:.45; cursor:default; }
.stat-action-btn.pending { z-index:1; }
.stat-short { font-size:22px; font-weight:900; line-height:1; letter-spacing:-0.5px; }
.stat-long { font-size:9px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.stat-select-hint { padding:5px 12px 6px; font-size:10px; color:var(--muted); text-align:center;
  font-style:italic; flex-shrink:0; border-bottom:1px solid var(--border); letter-spacing:.02em; }
.player-card.waiting { border-color:rgba(255,255,255,.15); opacity:.8; }
.player-card.waiting:hover { border-color:var(--orange); opacity:1; }

/* ── On-court indicator ───────────────────────────────────────── */
.on-court-dot { position:absolute; top:4px; left:4px; background:var(--green); color:#fff; font-size:8px; font-weight:800; line-height:1; padding:2px 4px; border-radius:3px; letter-spacing:.04em; }
.player-card.on-court { border-color:rgba(39,174,96,.45); }
.player-card.on-court.selected { border-color:var(--team-color,var(--green)); background:color-mix(in srgb,var(--team-color,var(--green)) 15%,transparent); box-shadow:0 0 14px color-mix(in srgb,var(--team-color,var(--green)) 35%,transparent); }

/* ── Substitution mode states ─────────────────────────────────── */
.player-card.sub-going-out { border-color:var(--orange); background:rgba(255,112,3,.13); box-shadow:0 0 14px rgba(255,112,3,.28); }
.player-card.sub-going-in  { border-color:var(--green);  background:rgba(39,174,96,.15); box-shadow:0 0 14px rgba(39,174,96,.28); }
.player-card.sub-can-in   { border-color:var(--green);  background:rgba(39,174,96,.07);  }
.player-card.sub-dim      { opacity:.3; pointer-events:none; }
.player-card.on-bench     { opacity:.65; }

/* Sub ON/OFF badge (absolute inside player card) */
.sub-badge { position:absolute; top:4px; left:5px; font-size:8px; font-weight:800; letter-spacing:.06em; padding:2px 4px; border-radius:3px; line-height:1; }
.sub-badge.on  { background:rgba(39,174,96,.25); color:var(--green); }
.sub-badge.off { background:rgba(255,255,255,.08); color:var(--muted); }

/* SUB toggle button in roster panel head */
.sub-mode-btn { background:var(--orange); border:none; color:#fff; border-radius:6px; padding:4px 10px; font-size:10px; font-weight:800; cursor:pointer; letter-spacing:.04em; -webkit-tap-highlight-color:transparent; flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:65%; }
.sub-mode-btn:active { opacity:.75; }

/* Cancel sub button */
.sub-cancel-btn { margin-left:4px; background:none; border:1px solid var(--border); color:var(--muted); border-radius:5px; padding:3px 8px; font-size:10px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.sub-cancel-btn:active { opacity:.75; }

/* Confirm sub button */
.sub-confirm-btn { margin-left:4px; background:var(--green); border:none; color:#fff; border-radius:5px; padding:3px 10px; font-size:10px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; flex-shrink:0; letter-spacing:.04em; }
.sub-confirm-btn:active { opacity:.8; }

/* Lineup count chip */
.lineup-count { font-size:10px; color:var(--green); font-weight:700; flex-shrink:0; }

/* Starting lineup banner */
.lineup-banner { display:flex; align-items:center; gap:8px; padding:6px 10px; background:rgba(39,174,96,.1); border-bottom:1px solid rgba(39,174,96,.2); font-size:11px; font-weight:700; color:var(--green); letter-spacing:.04em; }
.lineup-banner-count { background:rgba(39,174,96,.2); border-radius:4px; padding:1px 6px; font-size:10px; }
.lineup-banner-skip { margin-left:auto; background:none; border:1px solid var(--border); color:var(--muted); border-radius:5px; padding:2px 8px; font-size:10px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.lineup-banner-skip:active { opacity:.75; }
.player-card.starter { border-color:rgba(39,174,96,.6); background:rgba(39,174,96,.08); }
.starter-badge { position:absolute; top:5px; right:5px; background:var(--green); color:#fff; font-size:8px; font-weight:800; border-radius:3px; padding:1px 4px; letter-spacing:.04em; }

/* Disabled undo button */
.footer-btn.disabled, .footer-btn:disabled { opacity:.35; cursor:default; }

.scorer2-footer { border-top:1px solid var(--border); background:var(--bg2);
  padding:8px 14px; display:flex; align-items:center; gap:8px; min-height:50px; flex-shrink:0; }
.recent-label { font-size:9px; color:var(--muted); font-weight:700; white-space:nowrap;
  flex-shrink:0; text-transform:uppercase; letter-spacing:.04em; line-height:1.4; }
.recent-events { flex:1; display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;
  align-items:center; min-width:0; }
.recent-events::-webkit-scrollbar { display:none; }
.recent-event { display:flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:11px; color:var(--muted); flex-shrink:0; padding:4px 8px;
  background:var(--surface); border-radius:6px; }
.recent-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.footer-btn { background:none; border:1.5px solid var(--border); border-radius:8px;
  color:var(--text); font-size:12px; font-weight:700; padding:10px 16px; cursor:pointer; min-height:44px;
  -webkit-tap-highlight-color:transparent; flex-shrink:0; white-space:nowrap; display:flex; align-items:center; }
.footer-btn.orange { background:var(--orange); border-color:var(--orange); color:#fff; }
.footer-btn.outline { border-color:var(--orange); color:var(--orange); }
.footer-btn:active { opacity:.85; }

/* ── BOX SCORE (View) ─────────────────────────────────────────────── */
.boxscore-page { max-width:1100px; margin:0 auto; padding:20px 16px 80px; }
.bsp-back { background:none; border:none; color:var(--muted); font-size:13px; font-weight:600;
  cursor:pointer; padding:0; margin-bottom:12px; display:inline-flex; align-items:center; gap:4px;
  -webkit-tap-highlight-color:transparent; }
.bsp-back:active { color:var(--text); }
.bsp-mode-label { font-size:11px; font-weight:700; color:var(--orange);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.bsp-title { font-size:22px; font-weight:800; }
.bsp-title .vs { color:var(--muted); font-weight:400; }
.bsp-meta { font-size:12px; color:var(--muted); margin-top:4px; }
.bsp-score { font-size:30px; font-weight:900; color:var(--orange); }
.bsp-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.bsp-action-btn { padding:9px 16px; border-radius:8px; font-size:13px; font-weight:700;
  cursor:pointer; -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.bsp-action-btn.primary { background:var(--orange); color:#fff; border:none; }
.bsp-action-btn.ghost   { background:none; border:1.5px solid var(--border); color:var(--text); }
.bsp-action-btn.sel     { background:var(--surface2); border:1.5px solid var(--orange); color:var(--orange); cursor:default; opacity:1; }
.bsp-action-btn:active  { opacity:.85; }

.gd-tabs { display:flex; gap:4px; background:var(--surface); border-radius:12px; padding:4px; margin:12px 0 18px; }
.gd-tab { flex:1; padding:9px 12px; border-radius:8px; border:none; background:transparent;
  color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s,color .15s; }
.gd-tab.active { background:var(--surface2); color:var(--text); }
.gd-tab:active { opacity:.85; }

.bsp-team-tabs { display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; }
.bsp-team-tab { padding:8px 13px; border-radius:8px; border:1.5px solid var(--border);
  background:none; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.bsp-team-tab.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.bsp-team-tab:active { opacity:.85; }
.bsp-team-tab.team-home.active { background:var(--orange); }

.bsp-period-tabs { display:flex; gap:4px; margin-bottom:14px; }
.bsp-period-tab { padding:6px 12px; border-radius:6px; border:1.5px solid var(--border);
  background:none; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
.bsp-period-tab.active { background:var(--surface2); border-color:var(--surface2); color:var(--text); }
.bsp-period-tab:active { opacity:.85; }

.export-row { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.export-btn { padding:8px 14px; border-radius:8px; border:1.5px solid var(--orange);
  background:none; color:var(--orange); font-size:12px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; display:flex; align-items:center; gap:5px; }
.export-btn:active { background:var(--orange-dim); }

.box-score-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
  margin-bottom:16px; overflow:hidden; }
.box-score-card h3 { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.07em; padding:11px 14px; border-bottom:1px solid var(--border); }
.box-table { width:100%; border-collapse:collapse; font-size:12px; }
.box-table th { padding:8px 10px; text-align:center; font-size:10px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border); white-space:nowrap; }
.box-table th:first-child { text-align:left; }
.box-table td { padding:10px; text-align:center; border-bottom:1px solid var(--border); color:var(--muted); }
.box-table tr:last-child td { border-bottom:none; }
.box-table td:first-child { text-align:left; font-weight:600; color:var(--text); }
.box-table td.pts { font-weight:800; color:var(--text); }

/* ── Quarter-by-quarter score snapshot ────────────────────────────── */
.qs-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
  margin-bottom:14px; overflow:hidden; }
.qs-table { width:100%; border-collapse:collapse; font-size:13px; }
.qs-table th { padding:8px 12px; text-align:center; font-size:10px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
  border-bottom:1px solid var(--border); }
.qs-table th.qs-team-col { text-align:left; min-width:120px; }
.qs-table th.qs-total-col { border-left:1px solid var(--border); }
.qs-table td { padding:11px 12px; text-align:center; font-size:14px; font-weight:600;
  color:var(--text); border-bottom:1px solid var(--border); }
.qs-table tr:last-child td { border-bottom:none; }
.qs-table td.qs-team-name { text-align:left; font-size:12px; font-weight:700;
  display:flex; align-items:center; gap:7px; }
.qs-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.qs-table td.qs-total { font-size:18px; font-weight:800; color:var(--text);
  border-left:1px solid var(--border); }
.qs-section-label { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.07em; padding:5px 12px; background:var(--bg2); text-align:left !important; }
.qs-table td.qs-fouls { font-size:12px; color:var(--muted); }
.qs-table td.qs-fouls-total { font-size:14px; font-weight:700; color:var(--muted);
  border-left:1px solid var(--border); }

.timeline-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; }
.timeline-card-head { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.07em; padding:11px 14px; border-bottom:1px solid var(--border); }
.timeline-row { display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--border); font-size:12px; }
.timeline-row:last-child { border-bottom:none; }
.tl-time { font-size:11px; color:var(--muted); white-space:nowrap; width:56px; flex-shrink:0; }
.tl-team-badge { font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; flex-shrink:0; }
.tl-team-badge.home { background:rgba(255,112,3,.18); color:var(--orange); }
.tl-team-badge.away { background:rgba(52,152,219,.18); color:#3498db; }
.tl-player { font-weight:600; flex:1; min-width:0; }
.tl-stat { color:var(--muted); white-space:nowrap; }
.tl-pts { font-weight:800; color:var(--green); white-space:nowrap; }

/* ── REVIEW MODE ──────────────────────────────────────────────────── */
.review-page { max-width:900px; margin:0 auto; padding:20px 16px 80px; }
.playback-row { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
  padding:14px 16px; margin-bottom:16px; }
.playback-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pb-btn { width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:none; color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.pb-btn.play { background:var(--orange); border-color:var(--orange); }
.pb-btn:active { opacity:.8; }
.pb-btn svg { width:13px; height:13px; }
.pb-speed { background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  color:var(--text); padding:5px 9px; font-size:12px; font-weight:700; outline:none; }
.by-event-tabs { display:flex; gap:5px; }
.by-tab { padding:6px 12px; border-radius:7px; border:1.5px solid var(--border);
  background:none; color:var(--muted); font-size:12px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
.by-tab.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.quarter-filter { display:flex; gap:4px; margin-left:auto; }
.qf-btn { padding:5px 10px; border-radius:6px; border:1px solid var(--border);
  background:none; color:var(--muted); font-size:12px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
.qf-btn.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.progress-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.progress-bar-wrap { flex:1; height:4px; background:var(--surface2); border-radius:2px; cursor:pointer; position:relative; }
.progress-bar-fill { height:100%; background:var(--orange); border-radius:2px; }
.progress-label { font-size:11px; color:var(--muted); white-space:nowrap; }

.current-event-card { background:var(--surface); border-radius:var(--radius); border:1px solid rgba(255,112,3,.3);
  padding:16px; margin-bottom:16px; display:flex; align-items:center; gap:14px; }
.ce-badge { width:46px; height:46px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:900; flex-shrink:0; }
.ce-info { flex:1; min-width:0; }
.ce-team { font-size:11px; color:var(--muted); margin-bottom:2px; }
.ce-player { font-size:16px; font-weight:800; }
.ce-stat { font-size:13px; color:var(--muted); margin-top:2px; }
.ce-actions { display:flex; gap:6px; flex-shrink:0; }
.ce-btn { width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
  background:none; color:var(--muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ce-btn.red { border-color:rgba(229,62,62,.3); color:var(--red); }
.ce-btn:active { background:var(--surface2); }
.ce-btn svg { width:14px; height:14px; }

.event-timeline-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; }
.et-head { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.08em; padding:10px 14px; border-bottom:1px solid var(--border); }
.et-row { display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; font-size:12px; }
.et-row:last-child { border-bottom:none; }
.et-row:hover { background:var(--surface2); }
.et-row.current { background:rgba(255,112,3,.08); border-left:3px solid var(--orange); padding-left:11px; }
.et-num { font-size:11px; color:var(--muted); width:22px; flex-shrink:0; }
.et-player { flex:1; font-weight:600; }
.et-pts { font-weight:800; }

/* ── BY POSSESSION VIEW ───────────────────────────────────────────── */
.poss-group { padding:10px 14px; border-bottom:1px solid var(--border); }
.poss-group:last-child { border-bottom:none; }
.poss-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.poss-meta { font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.03em; }
.poss-pills { display:flex; gap:6px; flex-wrap:wrap; }
.poss-pill { font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;
  border:1.5px solid rgba(255,255,255,.12); background:var(--surface2); white-space:nowrap; }

/* ── STATS PAGE ───────────────────────────────────────────────────── */
.stats-page { max-width:1100px; margin:0 auto; padding:20px 16px 80px; }
.stats-header-row { display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.stats-eyebrow { font-size:11px; font-weight:700; color:var(--orange); text-transform:uppercase;
  letter-spacing:.09em; display:flex; align-items:center; gap:5px; margin-bottom:6px; }
.stats-subtitle { font-size:13px; color:var(--muted); margin-top:2px; }
.stats-sel-wrap { position:relative; flex-shrink:0; }
.stats-team-sel { background:var(--surface); border:1.5px solid var(--border); border-radius:12px;
  color:var(--text); padding:10px 36px 10px 14px; font-size:14px; font-weight:600;
  outline:none; cursor:pointer; min-width:220px; -webkit-appearance:none; appearance:none; }
.stats-team-sel:focus { border-color:var(--orange); }
.stats-sel-arrow { position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--muted); }

.stats-empty { display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:70px 20px; gap:16px; }
.stats-empty-title { font-size:18px; font-weight:700; }
.stats-empty-sub { font-size:13px; color:var(--muted); text-align:center; max-width:340px; line-height:1.6; }

.stats-table-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; }
.st-card-head { display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap; }
.st-card-title { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.st-card-hint { font-size:11px; color:var(--muted); }

.stats-table { width:100%; border-collapse:collapse; font-size:13px; }
.stats-table th { padding:9px 12px; text-align:center; font-size:10px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer;
  -webkit-tap-highlight-color:transparent; user-select:none; }
.stats-table th:first-child { text-align:left; }
.stats-table th:active { opacity:.7; }
.st-th.sort-active { color:var(--orange); }
.stats-table td { padding:11px 12px; text-align:center; border-bottom:1px solid var(--border); color:var(--muted); }
.stats-table tr:last-child td { border-bottom:none; }
.stats-table td:first-child { text-align:left; }
.st-player-row { cursor:pointer; transition:background .1s; }
.st-player-row:hover { background:rgba(255,255,255,.03); }
.st-player-row:active { background:var(--surface2); }
.st-player-name { color:var(--text); white-space:nowrap; }
.st-pts { font-weight:800; color:var(--text); }
.st-pts.sort-active { color:var(--orange); }
.st-empty-row { text-align:center !important; padding:32px 12px !important; color:var(--muted) !important; }

.st-drill-head { display:flex; align-items:center; gap:16px; padding:12px 16px;
  border-bottom:1px solid var(--border); flex-wrap:wrap; }
.st-back-btn { background:none; border:none; color:var(--muted); font-size:13px; font-weight:600;
  cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.st-back-btn:active { color:var(--text); }
.st-drill-player { font-size:16px; font-weight:800; flex:1; }
.st-drill-games { font-size:12px; color:var(--muted); white-space:nowrap; }
.st-game-opp { font-weight:600; color:var(--text); text-align:left !important; }
.st-game-date { color:var(--orange); white-space:nowrap; text-align:left !important; font-size:12px; }

/* ── ARCHIVE YEAR GROUPS ──────────────────────────────────────────── */
.archive-year-group { border-bottom:1px solid var(--border); }
.archive-year-group:last-child { border-bottom:none; }
.archive-year-label { padding:8px 16px 6px; font-size:10px; font-weight:800;
  color:var(--orange); text-transform:uppercase; letter-spacing:.08em;
  background:rgba(255,112,3,.06); border-bottom:1px solid var(--border); }
.game-action-link.muted { color:var(--muted); }
.game-action-link.muted:hover { color:var(--text); }
.game-start-btn {
  background:var(--green); color:#fff; border:none; border-radius:8px;
  padding:6px 14px; font-size:12px; font-weight:800; letter-spacing:.05em;
  cursor:pointer; display:flex; align-items:center; gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.game-start-btn:active { opacity:.85; }
.loaded-row { border-left:3px solid var(--blue); }

/* ── SEASON SETUP PAGE ────────────────────────────────────────────── */
.season-page { max-width:1100px; margin:0 auto; padding:24px 16px 80px; }
.season-title { font-size:32px; font-weight:900; margin-bottom:8px; }
.season-subtitle { font-size:14px; color:var(--muted); line-height:1.6; max-width:620px; margin-bottom:32px; }

.import-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:700px) { .import-cards { grid-template-columns:1fr; } }

.import-card { background:var(--surface); border-radius:16px; padding:24px;
  border:1px solid var(--border); display:flex; flex-direction:column; gap:16px; }
.import-card-head { display:flex; align-items:center; gap:14px; }
.import-card-icon { width:52px; height:52px; border-radius:14px; background:var(--orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.import-card-title { font-size:18px; font-weight:800; color:var(--text); }
.import-card-desc { font-size:13px; color:var(--muted); line-height:1.6; }
.import-expected { background:var(--bg2); border-radius:10px; padding:14px; border:1px solid var(--border); }
.import-expected-label { font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; }
.import-pills { display:flex; flex-wrap:wrap; gap:6px; }
.col-pill { font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px;
  background:var(--surface2); border:1px solid var(--border); color:var(--text); white-space:nowrap; }

.import-upload-btn { background:var(--orange); color:#fff; border:none; border-radius:10px;
  padding:14px 20px; font-size:13px; font-weight:800; cursor:pointer; letter-spacing:.05em;
  -webkit-tap-highlight-color:transparent; display:flex; align-items:center; justify-content:center; gap:8px; }
.import-upload-btn:active { opacity:.85; }
.import-dl-btn { background:var(--surface2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:13px 20px; font-size:13px; font-weight:700; cursor:pointer;
  letter-spacing:.04em; -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:center; gap:8px; }
.import-dl-btn:active { opacity:.8; }

/* Upload sub-view */
.season-upload-head { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.season-upload-title { font-size:22px; font-weight:800; }
.drop-zone { position:relative; border:2px dashed var(--border); border-radius:16px;
  padding:60px 24px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.drop-zone:hover, .drop-zone.dragover { border-color:var(--orange); background:rgba(255,112,3,.04); }
.drop-zone-input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.drop-zone-title { font-size:16px; font-weight:700; }
.drop-zone-sub { font-size:13px; color:var(--muted); }

/* Review sub-view */
.review-hint { font-size:13px; color:var(--muted); margin-bottom:16px; line-height:1.6; }
.review-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.review-badge { font-size:10px; font-weight:800; padding:2px 7px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.04em; }
.review-badge.new    { background:rgba(39,174,96,.2);  color:#27ae60; }
.review-badge.update { background:rgba(52,152,219,.2); color:#3498db; }
.review-badge.warn   { background:rgba(229,62,62,.2);  color:var(--red); }

/* Manual draw + auto draw shared buttons */
.md-btn-row { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.md-create-btn {
  width:100%; display:flex; align-items:center; gap:16px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:18px 20px; cursor:pointer; text-align:left;
  transition:border-color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.md-create-btn:hover { border-color:var(--orange); background:rgba(255,112,3,.04); }
.md-create-btn:active { background:rgba(255,112,3,.08); }
.md-create-btn-icon {
  width:48px; height:48px; border-radius:12px; background:var(--orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.md-create-btn-body { flex:1; }
.md-create-btn-title { font-size:15px; font-weight:800; margin-bottom:3px; color:var(--text); }
.md-create-btn-sub { font-size:13px; color:var(--muted); line-height:1.5; }
.md-create-btn-chevron { color:var(--muted); flex-shrink:0; }

.md-head { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.md-head-title { font-size:22px; font-weight:800; }
.md-save-btn {
  margin-left:auto; background:var(--orange); color:#fff; border:none;
  border-radius:10px; padding:10px 20px; font-size:13px; font-weight:800;
  cursor:pointer; letter-spacing:.04em; display:flex; align-items:center; gap:8px;
  -webkit-tap-highlight-color:transparent;
}
.md-save-btn:active { opacity:.85; }
.md-save-count {
  background:rgba(255,255,255,.25); border-radius:5px;
  padding:1px 7px; font-size:12px;
}

.md-form-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:20px; margin-bottom:24px;
}
.md-form-title { font-size:13px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:16px; }
.md-form-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px;
}
@media (min-width:700px) { .md-form-grid { grid-template-columns:repeat(4,1fr); } }
.ad-slot-hint { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--orange);
  font-weight:600; margin-bottom:16px; padding:8px 10px; background:rgba(255,112,3,.08);
  border-radius:8px; border:1px solid rgba(255,112,3,.2); }
.md-field { display:flex; flex-direction:column; gap:5px; }
.md-label { font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; }
.md-input {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; font-size:14px; color:var(--text); outline:none;
  width:100%; -webkit-appearance:none;
}
.md-input:focus { border-color:var(--orange); }
.md-input option { background:var(--surface); }
.md-add-btn {
  width:100%; background:var(--orange); color:#fff; border:none;
  border-radius:10px; padding:13px; font-size:13px; font-weight:800;
  cursor:pointer; letter-spacing:.05em; display:flex; align-items:center;
  justify-content:center; gap:8px; -webkit-tap-highlight-color:transparent;
}
.md-add-btn:active { opacity:.85; }

.md-queue-title { font-size:13px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px; }
.md-queue-table { display:flex; flex-direction:column; gap:8px; }
.md-queue-row {
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; display:flex; align-items:center; gap:12px;
}
.md-queue-meta { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.md-queue-matchup { font-size:14px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.md-queue-detail { font-size:12px; color:var(--muted); }
.md-queue-remove {
  background:none; border:1px solid var(--border); border-radius:7px;
  color:var(--muted); padding:5px 10px; font-size:13px; cursor:pointer;
  flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.md-queue-remove:hover { border-color:var(--red); color:var(--red); }

.md-empty-state {
  text-align:center; padding:48px 24px; color:var(--muted);
}
.md-empty-icon { font-size:36px; margin-bottom:12px; opacity:.5; }
.md-empty-text { font-size:14px; line-height:1.6; }

.md-no-teams {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:40px 24px; text-align:center; color:var(--muted);
}
.md-no-teams-title { font-size:16px; font-weight:700; margin-bottom:8px; color:var(--text); }
.md-no-teams-sub { font-size:13px; line-height:1.6; }

/* ── AUTO-DRAW GENERATOR ──────────────────────────────────────────────── */
.ad-teams-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; margin-bottom:20px;
}
.ad-section-label {
  font-size:10px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;
}
.ad-team-pills { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.ad-team-pill {
  font-size:12px; font-weight:700; padding:4px 11px; border-radius:20px;
  border:1.5px solid var(--border); background:transparent;
}
.ad-teams-meta { font-size:12px; color:var(--muted); }

.ad-type-label {
  font-size:10px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;
}
.ad-type-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:500px) { .ad-type-row { grid-template-columns:1fr; } }
.ad-type-btn {
  background:var(--bg2); border:2px solid var(--border); border-radius:12px;
  padding:14px 16px; cursor:pointer; text-align:left;
  transition:border-color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.ad-type-btn:hover { border-color:var(--muted); }
.ad-type-btn.active { border-color:#7c3aed; background:rgba(124,58,237,.08); }
.ad-type-name { font-size:14px; font-weight:800; margin-bottom:4px; }
.ad-type-btn.active .ad-type-name { color:#a78bfa; }
.ad-type-desc { font-size:12px; color:var(--muted); line-height:1.5; }

.ad-preview-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; margin-top:20px;
}
.ad-preview-head {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.ad-preview-label {
  font-size:11px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em;
}
.ad-td-muted { color:var(--muted); font-size:12px; }
.ad-td-date  { color:var(--orange); font-size:12px; }
.ad-td-vs    { color:var(--muted); font-size:11px; text-align:center; padding:0 4px; }

/* ── Data Management archive section ────────────────────────────────── */
.dm-archive-section { padding:16px 0 4px; }
.dm-archive-head { margin-bottom:12px; padding-left:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-right:4px; }
.dm-archive-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:3px; }
.dm-archive-sub { font-size:12px; color:var(--muted); }
.dm-export-btn { display:flex; align-items:center; gap:5px; background:var(--surface2); border:1px solid var(--border); color:var(--text); font-size:12px; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; flex-shrink:0; }

/* ── PWA update toast ───────────────────────────────────────────────── */
.update-toast {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid rgba(255,112,3,.5);
  border-radius: 12px;
  padding: 10px 14px 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9999;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  animation: slideup .25s ease;
}
.update-toast-label { flex: 1; }
.update-toast-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .03em;
  -webkit-tap-highlight-color: transparent;
}

/* ── Background ball watermark ── */
.bg-ball { position:fixed; width:58vmin; height:58vmin; bottom:-14vmin; right:-14vmin;
  opacity:.07; transform:rotate(18deg); pointer-events:none; user-select:none; z-index:0; }
.bg-ball svg { width:100%; height:100%; display:block; }
body.theme-light .bg-ball { opacity:.04; }

/* ── App Toast ── */
.app-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(16px);
  background:var(--surface2); border:1px solid rgba(255,255,255,.08); color:var(--text);
  padding:11px 20px; border-radius:10px; font-size:13px; font-weight:600;
  box-shadow:0 4px 24px rgba(0,0,0,.45); opacity:0; transition:opacity .2s,transform .2s;
  pointer-events:none; z-index:9999; white-space:nowrap; max-width:90vw; text-align:center; }
.app-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Officials section ── */
.officials-add-row { display:flex; gap:8px; margin-bottom:10px; }
.officials-add-row .md-input { flex:1; }
.officials-action-row { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.ref-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; margin-bottom:4px; }
.ref-tag { display:flex; align-items:center; gap:6px; padding:5px 10px;
  background:var(--surface2); border-radius:6px; font-size:12px; font-weight:600; color:var(--text); }
.ref-tag-rm { background:none; border:none; color:var(--muted); cursor:pointer; padding:0 2px;
  font-size:16px; line-height:1; -webkit-tap-highlight-color:transparent; }
.ref-tag-rm:hover { color:#e74c3c; }

/* ── Privacy Modal ── */
.privacy-box { max-width:380px; text-align:center; padding:28px 24px; }
.privacy-icon { margin-bottom:14px; }
.privacy-title { font-size:18px; font-weight:800; margin-bottom:16px; letter-spacing:-.3px; }
.privacy-body { text-align:left; font-size:13px; line-height:1.55; margin-bottom:20px; }
.privacy-body p { color:var(--muted); margin-bottom:14px; }
.privacy-body strong { color:var(--text); }
.privacy-points { display:flex; flex-direction:column; gap:10px; }
.privacy-point { display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--text); }
.privacy-point svg { flex-shrink:0; margin-top:1px; }
.privacy-point.warn { color:var(--muted); }
.privacy-ok-btn { width:100%; margin-top:4px; }

/* ── Privacy Nav Label ── */
.privacy-nav-btn { display:flex !important; flex-direction:column; align-items:center; gap:2px; padding:6px 8px !important; }
.nav-icon-label { font-size:9px; font-weight:700; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; line-height:1; }


/* ── Season Standings ── */
.sl-table { width:100%; border-collapse:collapse; font-size:13px; }
.sl-table th { padding:6px 10px; text-align:center; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; }
.sl-table td { padding:10px 10px; border-top:1px solid rgba(255,255,255,.06); text-align:center; }
.sl-rank { color:var(--muted); font-size:12px; width:28px; }
.sl-name { text-align:left !important; font-weight:600; }
.sl-w { color:var(--orange); font-weight:700; }

/* ── Team Record Badge ── */
.team-record-badge { font-size:11px; font-weight:700; color:var(--orange); background:rgba(255,112,3,.12); border:1px solid rgba(255,112,3,.25); border-radius:6px; padding:3px 8px; white-space:nowrap; flex-shrink:0; margin-right:4px; }
.td-record { font-size:12px; color:var(--orange); font-weight:700; margin-top:3px; letter-spacing:.02em; }

/* ── Display Settings Modal ───────────────────────────────────── */
.ui-settings-section { margin-bottom:22px; }
.ui-settings-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:9px; }
.ui-settings-row { display:flex; gap:8px; }
.ui-opt-btn { flex:1; padding:12px 8px; border-radius:9px; border:1.5px solid var(--border);
  background:var(--surface2); color:var(--text); font-size:14px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:border-color .15s,color .15s,background .15s; }
.ui-opt-btn.sel { border-color:var(--orange); color:var(--orange); background:var(--orange-dim); }
.ui-opt-btn:active { opacity:.8; }
.ui-scheme-btn {
  flex:1; padding:10px 8px 12px; border-radius:12px; border:2px solid var(--border);
  background:var(--surface2); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .15s,box-shadow .15s;
  display:flex; flex-direction:column; align-items:center; gap:9px; }
.ui-scheme-btn.sel { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-dim); }
.ui-scheme-btn:active { opacity:.8; }
.ui-scheme-swatch { width:100%; height:44px; border-radius:8px; }
.ui-scheme-name { font-size:12px; font-weight:700; color:var(--text); text-align:center; line-height:1.2; }
.footer-icon-btn { padding:10px 12px !important; }
.stp-side-label { font-size:9px; font-weight:800; color:var(--muted); letter-spacing:.12em;
  text-transform:uppercase; text-align:center; margin-top:6px; opacity:.6; }
.swap-teams-btn { background:none; border:1.5px solid var(--border); border-radius:7px;
  color:var(--muted); font-size:10px; font-weight:700; padding:5px 10px; cursor:pointer;
  display:flex; align-items:center; gap:5px; letter-spacing:.05em;
  -webkit-tap-highlight-color:transparent; margin-top:4px; }
.swap-teams-btn:active { background:var(--surface2); color:var(--text); }
.possession-row { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:0; }
.poss-btn { background:none; border:1.5px solid var(--border); border-radius:7px;
  color:var(--muted); font-size:15px; line-height:1; padding:4px 11px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:border-color .12s,color .12s,background .12s; min-height:34px; }
.poss-btn.active { border-color:var(--orange); color:var(--orange); background:var(--orange-dim); }
.poss-btn:active { opacity:.7; }
.poss-label { font-size:9px; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }

/* ── Foul player picker ─────────────────────────────────────────────── */
.foul-picker-overlay { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:500; display:flex; align-items:flex-end; justify-content:center; }
.foul-picker-panel { background:var(--surface); border-radius:16px 16px 0 0; padding:16px 16px 24px; width:100%; max-width:520px; max-height:72vh; overflow-y:auto; }
.foul-picker-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.foul-picker-title { font-size:11px; font-weight:800; letter-spacing:.07em; color:var(--orange); }
.foul-picker-cancel { background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; padding:2px 6px; line-height:1; -webkit-tap-highlight-color:transparent; }
.fp-subtitle { font-size:11px; color:var(--muted); margin-bottom:14px; }
.fp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fp-card { background:var(--surface2); border:1.5px solid var(--border); border-radius:10px; padding:10px 6px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; -webkit-tap-highlight-color:transparent; transition:border-color .12s,background .12s; }
.fp-card:active { opacity:.75; }
.fp-card.on-court { border-color:var(--orange); }
.fp-on-badge { position:absolute; top:4px; right:5px; font-size:8px; font-weight:800; color:var(--orange); letter-spacing:.04em; }
.fp-num { font-size:20px; font-weight:900; color:var(--text); line-height:1; }
.fp-name { font-size:10px; color:var(--muted); text-align:center; line-height:1.25; }
.fp-foul-count { position:absolute; bottom:4px; right:5px; font-size:9px; font-weight:800; color:var(--orange); }
.fp-card.foul-3 { border-color:#d4ac00; }
.fp-card.foul-3 .fp-foul-count { color:#d4ac00; }
.fp-card.foul-4 { border-color:#e67e22; background:rgba(230,126,34,.08); }
.fp-card.foul-4 .fp-foul-count { color:#e67e22; }
.fp-card.foul-out { border-color:#e74c3c; background:rgba(231,76,60,.1); opacity:0.65; }
.fp-card.foul-out .fp-foul-count { color:#e74c3c; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE SCORER VIEWS
   ══════════════════════════════════════════════════════════════════════

   Breakpoints:
     < 640px   → Mobile  (step-by-step flow, built in JS)
     640–1023px → Tablet  (current 2-column layout, locked to viewport)
     ≥ 1024px  → Laptop  (wider grid, bigger scores, more columns)
   ══════════════════════════════════════════════════════════════════════ */

/* Mobile (<640px): compact header + step-by-step body styles */
@media (max-width: 639px) {
  /* Tighten header so the player/stat panel gets maximum height */
  .scorer2-header { padding: 5px 8px; gap: 5px; }
  .scorer-team-panel { padding: 7px 8px; }
  .stp-score { font-size: 22px; }
  .stp-name { font-size: 12px; gap: 5px; }
  .stp-dot { width: 8px; height: 8px; }
  .stp-actions { margin-top: 4px; gap: 4px; }
  .foul-btn { min-height: 32px; padding: 3px 5px; min-width: 44px; }
  .foul-count { font-size: 14px; }
  .foul-label { font-size: 8px; }
  .timeout-btn { min-height: 32px; font-size: 9px; padding: 4px 6px; }
  .to-dot { width: 7px; height: 7px; }
  .stp-side-label { display: none; }

  .scorer-center-col { min-width: 100px; gap: 3px; }
  .quarter-label { font-size: 8px; }
  .clock-display { font-size: 19px; letter-spacing: -.5px; }
  .clock-btn { padding: 5px 8px; font-size: 10px; gap: 4px; }
  .scorer-center-btns { gap: 3px; }
  .q-btn { display: none; }
  .q-cycle-btn { display: flex; font-size: 11px; padding: 4px 10px; min-height: 26px; }
  .possession-row { margin-top: 1px; gap: 4px; }
  .poss-btn { padding: 3px 8px; min-height: 28px; font-size: 13px; }
  .poss-label { font-size: 8px; }

  /* Step-by-step body */
  .scorer2-body-mobile {
    flex: 1; display: flex; flex-direction: column;
    padding: 6px; gap: 6px; min-height: 0; overflow: hidden;
  }
  .mobile-step-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px; background: var(--bg2); border-radius: 10px;
    border: 1px solid var(--border); flex-shrink: 0;
  }
  .mobile-rec-label { font-size: 9px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; }
  .mobile-rec-team { font-size: 13px; font-weight: 900; color: var(--text); margin-top: 1px; }
  .mobile-switch-btn {
    background: none; border: 1.5px solid var(--orange); border-radius: 7px;
    color: var(--orange); font-size: 10px; font-weight: 800; padding: 6px 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; letter-spacing: .04em;
  }
  .mobile-switch-btn:active { background: var(--orange-dim); }

  .mobile-player-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; background: var(--surface); border-radius: 10px;
    border: 1px solid var(--border); flex-shrink: 0;
  }
  .mobile-back-btn {
    background: none; border: 1px solid var(--border); border-radius: 7px;
    color: var(--muted); font-size: 10px; font-weight: 700; padding: 6px 10px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
  }
  .mobile-back-btn:active { background: var(--surface2); }
  .mobile-player-badge { font-size: 13px; font-weight: 900; color: var(--orange); flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-player-pts { font-size: 11px; color: var(--muted); flex-shrink: 0; font-weight: 600; }

  /* Panels fill remaining body space */
  .scorer2-body-mobile .roster-panel,
  .scorer2-body-mobile .stat-panel { flex: 1; min-height: 0; }

  /* Footer */
  .scorer2-footer { padding: 5px 8px; gap: 5px; min-height: 40px; flex-wrap: nowrap; }
  .footer-btn { padding: 6px 9px; font-size: 10px; min-height: 36px; }
  .recent-label { display: none; }
}

/* Portrait tablet (640–799px): use mobile step-by-step layout, tablet-scale components */
@media (min-width: 640px) and (max-width: 799px) and (orientation: portrait) {
  /* Hide individual Q buttons; show the cycle button instead */
  .q-btn { display: none; }
  .q-cycle-btn { display: flex; font-size: 11px; padding: 4px 10px; min-height: 28px; }

  /* Step-by-step body container */
  .scorer2-body-mobile {
    flex: 1; display: flex; flex-direction: column;
    padding: 8px; gap: 8px; min-height: 0; overflow: hidden;
  }

  /* "Recording for" bar (player selection step) */
  .mobile-step-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--bg2); border-radius: 10px;
    border: 1px solid var(--border); flex-shrink: 0;
  }
  .mobile-rec-label { font-size: 10px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; }
  .mobile-rec-team { font-size: 15px; font-weight: 900; color: var(--text); margin-top: 1px; }
  .mobile-switch-btn {
    background: none; border: 1.5px solid var(--orange); border-radius: 7px;
    color: var(--orange); font-size: 11px; font-weight: 800; padding: 7px 14px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; letter-spacing: .04em;
  }
  .mobile-switch-btn:active { background: var(--orange-dim); }

  /* Player selected → stat step header bar */
  .mobile-player-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; background: var(--surface); border-radius: 10px;
    border: 1px solid var(--border); flex-shrink: 0;
  }
  .mobile-back-btn {
    background: none; border: 1px solid var(--border); border-radius: 7px;
    color: var(--muted); font-size: 11px; font-weight: 700; padding: 7px 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
  }
  .mobile-back-btn:active { background: var(--surface2); }
  .mobile-player-badge { font-size: 14px; font-weight: 900; color: var(--orange); flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-player-pts { font-size: 12px; color: var(--muted); flex-shrink: 0; font-weight: 600; }

  /* Roster / stat panels each fill the remaining body height */
  .scorer2-body-mobile .roster-panel,
  .scorer2-body-mobile .stat-panel { flex: 1; min-height: 0; }
}

/* Extra-small phones (<380px): squeeze even further */
@media (max-width: 379px) {
  .scorer2-header { padding: 4px 6px; gap: 4px; }
  .scorer-team-panel { padding: 5px 6px; }
  .stp-score { font-size: 19px; }
  .stp-name { font-size: 11px; }
  .foul-btn { min-width: 38px; padding: 2px 4px; min-height: 28px; }
  .foul-count { font-size: 12px; }
  .timeout-btn { min-height: 28px; padding: 3px 5px; font-size: 8px; }
  .scorer-center-col { min-width: 88px; }
  .clock-display { font-size: 16px; }
  .clock-btn { padding: 4px 7px; font-size: 9px; }
  .q-cycle-btn { font-size: 10px; padding: 3px 8px; min-height: 24px; }
  .footer-btn { padding: 5px 7px; font-size: 9px; min-height: 32px; }
}

/* Tablet (640–1023px): two-panel layout, compact header — no scroll */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Header: tighter than base mobile, leaves max height for body */
  .scorer2-header { padding: 7px 12px; gap: 8px; }
  .scorer-team-panel { padding: 9px 11px; }
  .stp-score { font-size: 26px; }
  .stp-name { font-size: 14px; }
  .stp-actions { margin-top: 6px; gap: 6px; }
  .foul-btn { min-height: 38px; padding: 5px 8px; min-width: 56px; }
  .foul-count { font-size: 16px; }
  .timeout-btn { min-height: 38px; font-size: 10px; padding: 5px 8px; }
  .stp-side-label { margin-top: 3px; font-size: 9px; }

  .scorer-center-col { min-width: 150px; gap: 4px; }
  .clock-display { font-size: 24px; }
  .clock-btn { padding: 7px 11px; font-size: 11px; }
  .q-btn { padding: 5px 8px; font-size: 10px; min-height: 28px; }
  .possession-row { margin-top: 2px; }

  /* Body: standard 2-col, compact cards */
  .scorer2-body { gap: 5px; padding: 5px; }
  .player-card { min-height: 66px; padding: 10px 4px; }
  .player-card-num { font-size: 16px; }
  .stat-action-btn { min-height: 66px; padding: 12px 4px; }
  .stat-short { font-size: 20px; }

  /* Footer */
  .scorer2-footer { padding: 7px 12px; gap: 7px; min-height: 44px; }
  .footer-btn { padding: 8px 11px; font-size: 11px; }
}

/* Laptop (>=1024px): 4-column grids, compact header — no scroll */
@media (min-width: 1024px) {
  /* Keep header compact so body gets maximum height */
  .scorer2-header { padding: 6px 16px; gap: 10px; }
  .scorer-team-panel { padding: 8px 12px; }
  .stp-name { font-size: 16px; }
  .stp-score { font-size: 38px; }
  .stp-actions { gap: 8px; margin-top: 6px; }
  .foul-btn { min-width: 64px; min-height: 36px; padding: 5px 8px; }
  .foul-count { font-size: 20px; }
  .timeout-btn { font-size: 11px; padding: 5px 8px; }
  .stp-side-label { font-size: 9px; margin-top: 4px; }

  .scorer-center-col { min-width: 240px; gap: 4px; }
  .clock-display { font-size: 30px; letter-spacing: -1px; }
  .clock-btn { padding: 7px 14px; font-size: 12px; }
  .q-btn { padding: 5px 10px; font-size: 11px; min-height: 30px; }
  .possession-row { margin-top: 2px; }

  /* Body: wider stat column, compact cards */
  .scorer2-body { grid-template-columns: 1fr 2fr; gap: 8px; padding: 8px; }

  .player-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; }
  .player-card { min-height: 60px; padding: 10px 4px; }
  .player-card-num { font-size: 16px; }
  .player-card-name { font-size: 10px; }
  .player-card-pts { font-size: 10px; }

  .stat-grid2 { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; }
  .stat-action-btn { min-height: 60px; padding: 10px 4px; }
  .stat-short { font-size: 18px; }
  .stat-long { font-size: 9px; }

  .scorer2-footer { padding: 6px 16px; gap: 8px; min-height: 44px; }
  .footer-btn { padding: 8px 14px; font-size: 11px; }
  .recent-event { font-size: 11px; padding: 4px 8px; }
}

/* Large laptop (>=1440px): 5-column grids, slightly larger scores */
@media (min-width: 1440px) {
  .scorer2-header { padding: 8px 28px; gap: 14px; }
  .scorer-team-panel { padding: 10px 16px; }
  .stp-score { font-size: 44px; }
  .stp-name { font-size: 18px; }
  .scorer-center-col { min-width: 280px; gap: 5px; }
  .clock-display { font-size: 34px; }
  .scorer2-body { padding: 10px 28px; gap: 12px; }
  .player-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px; }
  .player-card { min-height: 64px; }
  .stat-grid2 { grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px; }
  .stat-action-btn { min-height: 64px; }
  .scorer2-footer { padding: 8px 28px; }
}