:root {
    --orange: #FF5C1A;
    --orange-light: #FF7A40;
    --black: #0D0D0D;
    --dark: #161616;
    --dark2: #1F1F1F;
    --mid: #2A2A2A;
    --border: #333;
    --text: #E8E8E8;
    --muted: #888;
    --sub: #AAA;        /* "sub-text" colour for short context lines */
    --white: #FFFFFF;
    --amber: #FF9900;
    --red:   #EF4444;   /* desaturated red — accents, borders, "danger" copy */
    --red-light: var(--red-light); /* brighter pink-red — OFF labels, coming-off, underplayed bar (paired with --green-light for OFF/ON copy) */
    --green: #3DBF6C;
    --green-light: var(--green-light); /* brighter mint — scored / has-points / coming-on positive (paired with --red-light) */
    --blue:  #3B9EFF;
    --card:  #1A1A1A;   /* slightly lifted card surface */
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation; /* disable double-tap zoom on body */
  }
  /* Disable double-tap zoom on all interactive elements */
  button, a, input, select, label,
  .avail-tile, .player-row, .tab-bar-item, .setup-tab,
  .sgb-score-btn, .sgb-ctrl-btn, .sgb-action-btn,
  .player-score-btn, .foul-btn, .swap-btn, .sub-done-btn,
  .timer-btn, .score-btn, .drum-item {
    touch-action: manipulation;
  }
  body { font-family: 'Barlow', sans-serif; background: var(--black); color: var(--text); min-height: 100vh; overflow-x: hidden; }
  /* Prevent bounce on all scrollable inner containers */
  .subs-wrap, .tab-panel, .sub-sheet, .summary-sheet,
  .halftimeSheet, .starter-picker, .availability-screen {
    overscroll-behavior: contain;
  }

  nav { position: sticky; top: 0; z-index: 100; background: rgba(13,13,13,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 60px; }
  .logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 24px; color: var(--white); }
  .logo span { color: var(--orange); }
  .nav-links { display: flex; gap: 28px; list-style: none; }
  .nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
  .nav-links a:hover { color: var(--white); }

  .hero { position: relative; padding: 80px 24px 72px; max-width: 900px; margin: 0 auto; text-align: center; overflow: hidden; }
  .hero::before { content: '🏀'; position: absolute; font-size: 320px; opacity: 0.04; top: -40px; left: 50%; transform: translateX(-50%); pointer-events: none; }
  .hero-tag { display: inline-block; background: rgba(255,92,26,0.15); border: 1px solid rgba(255,92,26,0.3); color: var(--orange); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 20px; }
  h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(48px, 8vw, 80px); line-height: 0.95; letter-spacing: -1px; text-transform: uppercase; color: var(--white); margin-bottom: 20px; }
  h1 em { color: var(--orange); font-style: normal; display: block; }
  .hero-sub { font-size: 18px; color: var(--muted); max-width: 520px; margin: 0 auto 40px; line-height: 1.6; }
  .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .btn-primary { background: var(--orange); color: var(--white); border: none; padding: 14px 28px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; border-radius: 6px; text-decoration: none; display: inline-block; transition: background 0.2s, transform 0.1s; }
  .btn-primary:hover { background: var(--orange-light); transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 14px 28px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; border-radius: 6px; text-decoration: none; display: inline-block; transition: border-color 0.2s, color 0.2s; }
  .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

  .stats-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--dark); padding: 20px 24px; display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
  .stat { text-align: center; }
  .stat-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 28px; color: var(--orange); display: block; }
  .stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; }

  section { padding: 64px 24px; max-width: 1100px; margin: 0 auto; }
  .section-header { margin-bottom: 40px; }
  .section-tag { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
  h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(32px, 5vw, 48px); text-transform: uppercase; color: var(--white); line-height: 1; }

  .age-tabs { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
  .age-tab { padding: 8px 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
  .age-tab:hover { border-color: var(--orange); color: var(--orange); }
  .age-tab.active { background: var(--orange); border-color: var(--orange); color: var(--white); }

  .drill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

  .drill-card { background: var(--dark); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
  .drill-card:hover { border-color: var(--orange); transform: translateY(-2px); }

  /* Diagram controls */
  .diagram-wrap { position: relative; }
  .diagram-controls {
    position: absolute;
    bottom: 8px; right: 8px;
    display: flex; gap: 5px;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .diagram-wrap:hover .diagram-controls { opacity: 1; }
  .diag-btn {
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.3px;
  }
  .diag-btn:hover { background: rgba(255,92,26,0.8); border-color: transparent; }
  .diag-btn.play-btn { font-size: 13px; min-width: 28px; text-align: center; }

  .drill-diagram { width: 100%; height: 160px; display: block; background: #0a1a0a; }
  .drill-body { padding: 18px 20px; }
  .drill-meta { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
  .tag-skill { background: rgba(255,92,26,0.15); color: var(--orange); }
  .tag-time { background: rgba(255,255,255,0.06); color: var(--muted); }
  .drill-card h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; color: var(--white); margin-bottom: 6px; text-transform: uppercase; }
  .drill-card p { font-size: 14px; color: var(--muted); line-height: 1.5; }

  .drill-expand { display: none; padding: 0 20px 20px; border-top: 1px solid var(--border); margin-top: 4px; }
  .drill-expand.open { display: block; }
  .expand-label { font-size: 12px; color: var(--orange); font-weight: 600; letter-spacing: 0.5px; margin: 14px 0 10px; text-transform: uppercase; }
  .drill-steps { list-style: none; counter-reset: steps; }
  .drill-steps li { counter-increment: steps; padding: 8px 0 8px 30px; position: relative; font-size: 14px; color: var(--text); line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .drill-steps li:last-child { border-bottom: none; }
  .drill-steps li::before { content: counter(steps); position: absolute; left: 0; top: 9px; width: 19px; height: 19px; background: var(--orange); color: var(--white); font-size: 10px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .coaching-tip { margin-top: 12px; padding: 10px 14px; background: rgba(255,92,26,0.08); border-left: 3px solid var(--orange); border-radius: 0 4px 4px 0; font-size: 13px; color: var(--text); line-height: 1.5; }
  .coaching-tip strong { color: var(--orange); }

  #planner { background: var(--dark); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .planner-wrap { max-width: 1100px; margin: 0 auto; padding: 64px 24px; }
  .planner-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: start; }
  @media (max-width: 700px) { .planner-grid { grid-template-columns: 1fr; } .nav-links { display: none; } }
  .planner-form { background: var(--dark2); border: 1px solid var(--border); border-radius: 10px; padding: 28px; }
  .form-group { margin-bottom: 20px; }
  .form-group label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .form-group select { width: 100%; background: var(--mid); border: 1px solid var(--border); color: var(--text); padding: 12px 14px; border-radius: 6px; font-family: 'Barlow', sans-serif; font-size: 15px; appearance: none; transition: border-color 0.2s; }
  .form-group select:focus { outline: none; border-color: var(--orange); }
  .checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .checkbox-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--mid); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: border-color 0.2s; font-size: 14px; }
  .checkbox-item:hover { border-color: var(--orange); }
  .checkbox-item input[type=checkbox] { accent-color: var(--orange); width: 15px; height: 15px; }
  .checkbox-item.checked { border-color: var(--orange); background: rgba(255,92,26,0.08); }
  .generate-btn { width: 100%; background: var(--orange); color: var(--white); border: none; padding: 16px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 6px; transition: background 0.2s; margin-top: 8px; }
  .generate-btn:hover { background: var(--orange-light); }
  .generate-btn:disabled { background: var(--mid); color: var(--muted); cursor: not-allowed; }
  .api-note { background: rgba(255,92,26,0.06); border: 1px dashed rgba(255,92,26,0.3); border-radius: 6px; padding: 10px 14px; font-size: 12px; color: var(--muted); margin-top: 12px; text-align: center; }
  .api-note span { color: var(--orange); }

  .plan-output { background: var(--dark2); border: 1px solid var(--border); border-radius: 10px; padding: 28px; min-height: 400px; }
  .plan-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--muted); }
  .plan-placeholder .icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
  .plan-content { display: none; }
  .plan-content.visible { display: block; }
  .plan-placeholder.hidden { display: none; }
  .plan-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
  .plan-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px; text-transform: uppercase; color: var(--white); }
  .plan-subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }
  .plan-segment { margin-bottom: 16px; padding: 16px; background: var(--mid); border-radius: 6px; border-left: 3px solid var(--border); }
  .plan-segment.warmup { border-left-color: var(--green); }
  .plan-segment.skill { border-left-color: var(--orange); }
  .plan-segment.game { border-left-color: #2196F3; }
  .plan-segment.cooldown { border-left-color: #9C27B0; }
  .segment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .segment-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--white); }
  .segment-time { font-size: 12px; color: var(--muted); font-weight: 600; }
  .segment-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }
  .loading-dots { display: none; text-align: center; padding: 60px; color: var(--muted); font-size: 15px; }
  .loading-dots.visible { display: block; }
  .dot { display: inline-block; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; margin: 0 3px; animation: bounce 1.2s infinite; }
  .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} }



  /* Starter picker */
  .starter-picker { display: none; margin-top: 20px; }
  .starter-picker.visible { display: block; }
  .starter-picker-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block; }
  .starter-picker-note { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
  .starter-picker-note span { color: var(--orange); font-weight: 700; }
  .starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 20px; }
  .starter-tile {
    padding: 11px 14px;
    background: var(--mid);
    border: 2px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 600; color: var(--text);
    user-select: none;
  }
  .starter-tile:hover { border-color: var(--orange); color: var(--white); }
  .starter-tile.selected {
    border-color: var(--green);
    background: rgba(76,175,80,0.12);
    color: var(--white);
  }
  .starter-tile.full:not(.selected) {
    opacity: 0.4; cursor: not-allowed;
  }
  .starter-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--border); flex-shrink: 0; transition: background 0.15s;
  }
  .starter-tile.selected .starter-dot { background: var(--green); }
  .starter-tally { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
  .starter-tally span { color: var(--white); font-weight: 700; }


  /* Next-up preview strip */
  .next-up-strip {
    margin-top: 12px;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    display: none;
  }
  .next-up-strip.visible { display: block; }
  .next-up-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .next-up-rows { display: flex; flex-direction: column; gap: 6px; }
  .next-up-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 5px;
    background: var(--mid);
  }
  .next-up-row .nu-off {
    flex: 1;
    color: var(--red-light);
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .next-up-row .nu-on {
    flex: 1;
    color: var(--green-light);
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
  }
  .next-up-row .nu-arrow {
    color: var(--muted);
    font-size: 14px;
    flex-shrink: 0;
  }
  .next-up-row .nu-mins {
    font-size: 10px;
    color: var(--muted);
    font-weight: 400;
    white-space: nowrap;
  }
  .next-up-manual {
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    padding: 6px 10px;
    background: var(--mid);
    border-radius: 5px;
    border: 1px dashed var(--border);
  }


  /* Scheduled override edit panel */
  .edit-rotation-panel {
    display: none;
    margin-top: 12px;
    background: rgba(255,153,0,0.08);
    border: 1px solid #FF9900;
    border-radius: 8px;
    padding: 16px;
  }
  .edit-rotation-panel.visible { display: block; }
  .edit-rotation-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    color: #FF9900;
    margin-bottom: 4px;
  }
  .edit-rotation-subtitle {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .edit-swap-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }
  .edit-select {
    background: var(--dark);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 5px;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    appearance: none;
  }
  .edit-select.off-select { color: var(--red-light); border-color: rgba(255,107,107,0.4); }
  .edit-select.on-select  { color: var(--green-light); border-color: rgba(105,219,124,0.4); }
  .edit-rotation-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }
  .save-rotation-btn {
    flex: 2;
    background: #FF9900;
    color: var(--white);
    border: none;
    padding: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
  }
  .save-rotation-btn:hover { background: #ffb333; }
  .cancel-edit-btn {
    flex: 1;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
  }
  .cancel-edit-btn:hover { border-color: var(--orange); color: var(--orange); }
  .saved-badge {
    display: inline-block;
    background: rgba(255,153,0,0.15);
    border: 1px solid #FF9900;
    color: #FF9900;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
  }


  .player-row.injured { border-color: var(--red) !important; background: rgba(255,51,51,0.07) !important; opacity: 1 !important; }
  .status-injured { color: var(--red); }
  /* Absent → muted neutral so the row doesn't read like an injury
     emergency. Players marked absent are also flagged injured under
     the hood (so the sub algorithm skips them) but the label is
     friendlier. */
  .status-absent  { color: var(--muted); }
  .injury-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    font-family: 'Barlow', sans-serif;
  }
  .injury-btn:hover { border-color: var(--red); color: var(--red); }
  .injury-btn.active { background: rgba(255,51,51,0.15); border-color: var(--red); color: var(--red); }
  .injured-court-warning {
    font-size: 11px;
    color: var(--red);
    background: rgba(255,51,51,0.1);
    border: 1px solid rgba(255,51,51,0.3);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 10px;
    display: none;
  }
  .injured-court-warning.visible { display: block; }


  /* Game manager ad slot */
  .game-ad-slot {
    margin: 16px auto 0;
    max-width: 340px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    background: var(--dark2);
    border: 1px solid var(--border);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .game-ad-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--border);
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    text-align: center;
  }
  /* Placeholder shown before AdSense loads */
  .ad-placeholder {
    width: 300px;
    height: 250px;
    background: var(--mid);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
  }
  .ad-placeholder .ad-ph-icon { font-size: 28px; opacity: 0.3; }
  .ad-placeholder .ad-ph-text { font-size: 11px; text-align: center; line-height: 1.5; opacity: 0.5; }
  .ad-placeholder code { font-size: 10px; background: var(--dark); padding: 2px 6px; border-radius: 3px; color: var(--orange); }


  /* Score tracker */
  .score-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
  }
  .score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .score-team-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .score-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 56px;
    line-height: 1;
    color: var(--white);
    min-width: 70px;
    text-align: center;
  }
  .score-value.leading { color: var(--green); }
  .score-btns {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .score-btn {
    background: var(--mid);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 36px;
  }
  .score-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
  .score-btn.undo { font-size: 12px; color: var(--muted); }
  .score-btn.undo:hover { background: var(--border); border-color: var(--border); color: var(--text); }
  .score-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--muted);
  }
  .score-divider-dash { font-size: 28px; font-weight: 900; line-height: 1; }
  .score-period-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }

  /* Foul tracker — integrated into player rows */
  .player-row { gap: 6px; }
  .foul-counter {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .foul-dots {
    display: flex;
    gap: 2px;
  }
  .foul-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    transition: background 0.15s;
  }
  .foul-dot.active { background: var(--orange); border-color: var(--orange); }
  .foul-dot.warning { background: #FF9900; border-color: #FF9900; }
  .foul-dot.foul-out { background: var(--red); border-color: var(--red); }
  .foul-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Barlow', sans-serif;
    flex-shrink: 0;
    line-height: 1.4;
  }
  .foul-btn:hover { border-color: var(--orange); color: var(--orange); }
  .foul-btn.foul-out-btn { border-color: var(--red); color: var(--red); }
  .player-row.fouled-out { border-color: var(--red) !important; background: rgba(255,51,51,0.05) !important; opacity: 0.7; }
  .player-row.foul-warning { border-color: #FF9900 !important; background: rgba(255,153,0,0.05) !important; }


  /* Randomise lineup additions */
  .starter-tile.absent {
    border-color: var(--red) !important;
    background: rgba(255,51,51,0.07) !important;
    color: var(--muted) !important;
    text-decoration: line-through;
    cursor: pointer !important;
    opacity: 0.6;
  }
  .starter-tile.absent .starter-dot { background: var(--red) !important; }
  .starter-tile .start-count {
    font-size: 10px;
    color: var(--muted);
    margin-left: auto;
    padding-left: 6px;
    white-space: nowrap;
  }
  .starter-tile.selected .start-count { color: rgba(255,255,255,0.6); }
  .randomise-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .randomise-btn {
    background: var(--mid);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 16px;
    border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .randomise-btn:hover { border-color: var(--orange); color: var(--orange); }
  .randomise-btn.active { background: var(--orange); border-color: var(--orange); color: var(--white); }
  .mode-toggle {
    display: flex;
    background: var(--mid);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
  }
  .mode-btn {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: 'Barlow', sans-serif;
    transition: all 0.15s;
  }
  .mode-btn.active { background: var(--dark2); color: var(--white); }
  .season-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .season-stats-label { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }
  .reset-starts-btn {
    font-size: 11px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: all 0.15s;
  }
  .reset-starts-btn:hover { border-color: var(--red); color: var(--red); }
  .spin { animation: spin 0.5s ease; }
  @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }


  .add-swap-btn {
    width: 100%;
    margin-top: 8px;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
    padding: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .add-swap-btn:hover { border-color: var(--orange); color: var(--orange); border-style: solid; }
  .add-swap-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .swap-count-badge {
    font-size: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }


  /* Starting 5 history + sub log panels */
  /* ── END GAME SUMMARY SHEET ── */
  .summary-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 310;
    background: var(--dark);
    border-top: 3px solid var(--orange);
    border-radius: 16px 16px 0 0;
    padding: 0 0 40px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    max-height: 92vh; overflow-y: auto;
  }
  .summary-sheet.visible { transform: translateY(0); }
  .summary-handle {
    width: 36px; height: 4px; background: var(--border);
    border-radius: 2px; margin: 12px auto 16px;
  }
  .summary-result {
    text-align: center; padding: 0 20px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
  }
  .summary-result-tag {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 6px; display: block;
  }
  .summary-result-tag.win  { color: var(--green); }
  .summary-result-tag.loss { color: var(--red); }
  .summary-result-tag.draw { color: var(--muted); }
  .summary-score {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 64px; line-height: 1;
    color: var(--white); letter-spacing: -2px;
  }
  .summary-score .sep { color: var(--muted); margin: 0 8px; font-size: 48px; }
  .summary-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; padding: 0 16px; margin-bottom: 16px;
  }
  .summary-stat-card {
    background: var(--mid); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px;
  }
  .summary-stat-label {
    font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
  }
  .summary-stat-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 20px; color: var(--white);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .summary-stat-sub {
    font-size: 11px; color: var(--muted); margin-top: 2px;
  }
  .summary-scorers { padding: 0 16px; margin-bottom: 16px; }
  .summary-scorers-title {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
  }
  .summary-scorer-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .summary-scorer-row:last-child { border-bottom: none; }
  .summary-scorer-bar-wrap { flex: 1; height: 4px; background: var(--mid); border-radius: 2px; overflow: hidden; }
  .summary-scorer-bar { height: 100%; background: var(--orange); border-radius: 2px; transition: width 0.6s ease; }
  .summary-scorer-name { font-size: 14px; font-weight: 600; min-width: 80px; }
  .summary-scorer-pts {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 18px; color: var(--green-light); min-width: 28px; text-align: right;
  }
  .summary-actions {
    padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .summary-share-btn {
    background: var(--orange); color: var(--white); border: none; padding: 14px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; border-radius: 6px; transition: background 0.2s;
  }
  .summary-share-btn:hover { background: var(--orange-light); }
  .summary-new-game-btn {
    background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 14px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; border-radius: 6px; transition: all 0.2s;
  }
  .summary-new-game-btn:hover { border-color: var(--white); color: var(--white); }

  .history-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 48px;
    display: none;
  }
  .history-section.visible { display: block; }
  .history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  @media(max-width:640px) { .history-grid { grid-template-columns: 1fr; } }
  .history-card {
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
  }
  .history-card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .history-card-title span { color: var(--text); }
  /* Starting 5 game entries */
  .starting5-game {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .starting5-game:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .starting5-game-meta {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
  }
  .starting5-game-meta .game-num { color: var(--orange); font-weight: 700; }
  .starting5-players {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .starting5-chip {
    background: var(--mid);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
  }
  .starting5-chip.frequent { border-color: var(--orange); color: var(--orange); background: rgba(255,92,26,0.08); }
  /* Sub log entries — reuse existing style but inside new card */
  .sub-log-inner .log-entry { font-size: 13px; color: var(--muted); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .sub-log-inner .log-entry:last-child { border-bottom: none; }
  .sub-log-inner .log-entry span { color: var(--text); }
  .empty-history { font-size: 13px; color: var(--muted); font-style: italic; padding: 8px 0; }


  /* Per-player scoring */
  .player-row { flex-wrap: wrap; }
  .player-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex-wrap: nowrap;
  }
  .player-score-total {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: var(--white);
    min-width: 28px;
    text-align: center;
    line-height: 1;
  }
  .player-score-total.has-points { color: var(--green-light); }
  .player-score-btns {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .player-score-btn {
    flex: 1;
    background: var(--dark2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 5px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
  }
  .player-score-btn:hover { background: rgba(105,219,124,0.15); border-color: var(--green-light); color: var(--green-light); }
  .player-score-btn:active { transform: scale(0.95); }
  .player-score-undo {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .player-score-undo:hover { border-color: var(--orange); color: var(--orange); }
  /* Score flash animation */
  @keyframes scoreFlash {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); color: var(--green-light); }
    100% { transform: scale(1); }
  }
  .score-flash { animation: scoreFlash 0.3s ease; }


  /* ── STICKY GAME BAR ──────────────────────────────────── */
  .sticky-game-bar {
    display: none; /* shown when game starts */
    position: sticky;
    top: 60px; /* below nav */
    z-index: 90;
    background: var(--dark);
    border-bottom: 2px solid var(--border);
    padding: 0;
    /* Push the score row clear of the Dynamic Island in
       fullscreen mode (where this bar takes over from the hidden
       nav). The padded zone above the content sits behind the
       nav when present (z-index 100 > 90) — visually invisible. */
    padding-top: max(env(safe-area-inset-top, 0px), 0px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }
  .sticky-game-bar.active { display: block; }

  /* ════════════════════════════════════════════════════
     RESPONSIVE STICKY BAR — CSS custom properties scale
     everything from one place at each breakpoint
     ════════════════════════════════════════════════════ */
  :root {
    --sgb-score-size:   40px;
    --sgb-timer-size:   22px;
    --sgb-score-btn-p:  3px 8px;
    --sgb-score-btn-fs: 13px;
    --sgb-play-p:       9px 0;
    --sgb-play-fs:      13px;
    --sgb-chip-p:       8px 12px;
    --sgb-chip-min:     72px;
    --sgb-chip-min-h:   72px;
    --sgb-chip-name-fs: 14px;
    --sgb-chip-pts-fs:  12px;
    --sgb-section-p:    5px 8px 4px;
    --sgb-action-p:     7px 4px;
    --sgb-action-fs:    12px;
    --sgb-strip-p:      5px 10px 4px;
  }

  /* ── Small phones (≤375px width OR ≤700px height) ── */
  @media (max-width: 375px), (max-height: 700px) {
    :root {
      --sgb-score-size:   28px;
      --sgb-timer-size:   17px;
      --sgb-score-btn-p:  2px 5px;
      --sgb-score-btn-fs: 11px;
      --sgb-play-p:       6px 0;
      --sgb-play-fs:      11px;
      --sgb-chip-p:       5px 8px;
      --sgb-chip-min:     56px;
      --sgb-chip-min-h:   58px;
      --sgb-chip-name-fs: 12px;
      --sgb-chip-pts-fs:  10px;
      --sgb-section-p:    3px 6px 2px;
      --sgb-action-p:     5px 3px;
      --sgb-action-fs:    11px;
      --sgb-action-main-fs: 13px;
      --sgb-action-main-p:  10px 0;
      --sgb-strip-p:      3px 8px 3px;
    }
  }

  /* ── Mid phones (376–414px: iPhone 11/12/13/14 standard, 15, 16) ──
     iPhone 15 Plus (430px) and 16 Pro Max (440px) intentionally
     fall into the 415–767px bucket below — those wider phones
     get the larger chip-min (68px) and score size (38px) tuned
     for the bigger screen. Extending this range to 440 would
     shrink the in-game UI on the biggest iPhones. */
  @media (min-width: 376px) and (max-width: 414px) and (min-height: 701px) {
    :root {
      --sgb-score-size:   34px;
      --sgb-timer-size:   20px;
      --sgb-score-btn-p:  3px 7px;
      --sgb-score-btn-fs: 12px;
      --sgb-play-p:       8px 0;
      --sgb-play-fs:      12px;
      --sgb-chip-p:       6px 10px;
      --sgb-chip-min:     58px;
      --sgb-chip-min-h:   58px;
      --sgb-chip-name-fs: 12px;
      --sgb-chip-pts-fs:  10px;
      --sgb-section-p:    4px 8px 3px;
      --sgb-action-p:     6px 3px;
      --sgb-action-fs:    11px;
      --sgb-strip-p:      4px 9px 3px;
    }
  }

  /* ── Large phones / small tablets (415–767px) ── */
  @media (min-width: 415px) and (max-width: 767px) {
    :root {
      --sgb-score-size:   38px;
      --sgb-timer-size:   21px;
      --sgb-chip-min:     68px;
      --sgb-chip-min-h:   68px;
    }
  }

  /* ── Tablets / desktop (≥768px) ── */
  @media (min-width: 768px) {
    :root {
      --sgb-score-size:   48px;
      --sgb-timer-size:   26px;
      --sgb-score-btn-p:  4px 12px;
      --sgb-score-btn-fs: 14px;
      --sgb-play-p:       10px 0;
      --sgb-play-fs:      14px;
      --sgb-chip-p:       10px 14px;
      --sgb-chip-min:     80px;
      --sgb-chip-min-h:   80px;
      --sgb-chip-name-fs: 15px;
      --sgb-chip-pts-fs:  13px;
      --sgb-action-p:     9px 6px;
      --sgb-action-fs:    13px;
    }
  }

  /* Main action buttons scale with screen */
  #sgbAdHocBtn { font-size: var(--sgb-action-main-fs, 15px) !important; padding: var(--sgb-action-main-p, 13px 0) !important; }


  .sgb-score        { font-size: var(--sgb-score-size) !important; }
  .sgb-vs           { font-size: var(--sgb-timer-size) !important; }
  .sgb-score-btn    { padding: var(--sgb-score-btn-p) !important; font-size: var(--sgb-score-btn-fs) !important; }
  .sgb-play-btn     { padding: var(--sgb-play-p) !important; }
  .sgb-play-label   { font-size: var(--sgb-play-fs) !important; }
  .ptray-chip       { padding: var(--sgb-chip-p) !important; min-width: var(--sgb-chip-min) !important; min-height: var(--sgb-chip-min-h) !important; }
  .chip-name        { font-size: var(--sgb-chip-name-fs) !important; }
  .chip-pts         { font-size: var(--sgb-chip-pts-fs) !important; }
  .sgb-chip-section { padding: var(--sgb-section-p) !important; }
  .sgb-action-btn   { padding: var(--sgb-action-p) !important; font-size: var(--sgb-action-fs) !important; }

  /* ── Landscape / very short screens (height ≤ 500px) ── */
  @media (max-height: 500px) {
    :root {
      --sgb-score-size:   24px;
      --sgb-timer-size:   15px;
      --sgb-score-btn-p:  1px 4px;
      --sgb-score-btn-fs: 10px;
      --sgb-play-p:       4px 0;
      --sgb-play-fs:      10px;
      --sgb-chip-p:       4px 7px;
      --sgb-chip-min:     50px;
      --sgb-chip-min-h:   50px;
      --sgb-chip-name-fs: 11px;
      --sgb-chip-pts-fs:  9px;
      --sgb-section-p:    2px 6px 2px;
      --sgb-action-p:     4px 2px;
      --sgb-action-fs:    10px;
      --sgb-strip-p:      2px 8px;
    }
    /* In landscape, chips scroll horizontally to save vertical space */
    .sgb-tray-court, .sgb-tray-bench {
      flex-wrap: nowrap !important;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .sgb-tray-court::-webkit-scrollbar,
    .sgb-tray-bench::-webkit-scrollbar { display: none; }
  }

  /* Sticky bar fills viewport minus nav so the last-sub row anchors
     near the action bar instead of leaving body bg gap below content.
     Flex column lets #nsLastSub pin to the bottom via margin-top:auto.
     Action bar (fixed bottom 56px + safe-area) overlays the bar's
     bottom edge — last-sub gets bottom padding to clear it. */
  .sticky-game-bar.active {
    min-height: calc(100dvh - 60px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Flex children of a column flexbox default to min-width:auto,
     which lets them grow to their content's intrinsic width. The
     horizontal-scroll chip rows have unwrapped content wider than
     the viewport, so without min-width:0 the chip section would
     expand past the bar's width and the inner overflow-x:auto
     would never engage — i.e. swipe-to-scroll would silently
     do nothing. min-width:0 restores the expected
     "constrain to parent width and scroll inside" behaviour. */
  .sticky-game-bar.active > * { min-width: 0; }
  .sticky-game-bar.active .chip-row-wrapper { min-width: 0; max-width: 100%; }
  /* Push last-sub to bottom of the flex column. */
  .sticky-game-bar.active #nsLastSub {
    margin-top: auto;
    margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }


  /* Top row: score */
  .sgb-score-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 8px 12px 6px;
    gap: 8px;
  }
  .sgb-team { text-align: center; }
  .sgb-team-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
  .sgb-score { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 40px; line-height: 1; color: var(--white); }
  .sgb-score.leading { color: var(--green); }

  /* Score buttons now sit BELOW the score — wider and easier to tap */
  .sgb-score-btns {
    display: flex; gap: 4px; justify-content: center; margin-top: 5px;
  }
  .sgb-score-btn {
    background: var(--mid); border: 1px solid var(--border); color: var(--text);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px;
    padding: 5px 0; border-radius: 5px; cursor: pointer; transition: all 0.12s;
    flex: 1; touch-action: manipulation;
  }
  .sgb-score-btn:active { background: var(--orange); border-color: var(--orange); color: var(--white); transform: scale(0.95); }
  .sgb-score-btn.undo { font-size: 11px; color: var(--muted); flex: 0.6; }

  /* Centre column: half → gametime → next sub label → next sub countdown */
  .sgb-divider {
    text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 1px; padding: 0 4px;
  }
  .sgb-half { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
  .sgb-vs {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
    font-size: 20px; line-height: 1; color: var(--white); letter-spacing: -0.5px;
  }
  .sgb-next-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
  .sgb-next-val {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
    font-size: 16px; color: var(--orange); line-height: 1;
  }
  .sgb-next-val.warning { color: #FF9900; }
  .sgb-next-val.urgent  { color: #FF5500; animation: pulse 0.5s infinite; }
  .sgb-next-val.due     { color: var(--red); animation: pulse 0.4s infinite; }

  /* ── Visual redesign (Commit 1): score row spec overrides ──
     The responsive variable system above still drives tablet sizing;
     these rules pin the iPhone-tier visuals to the approved mockup. */
  .sgb-score-row {
    padding: 6px 12px 4px !important;
    align-items: stretch;
  }
  .sgb-team { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .sgb-team-label {
    font-size: 7px !important;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .sgb-team.us  .sgb-score { color: var(--white) !important; }
  .sgb-team.them .sgb-score { color: var(--muted) !important; }
  .sgb-score { font-size: 34px !important; letter-spacing: -0.5px; }
  .sgb-score.leading { color: var(--green) !important; }

  .sgb-score-btns { gap: 3px !important; margin-top: 4px !important; }
  .sgb-team .sgb-score-btn {
    flex: 0 0 auto !important;
    padding: 0 !important;
    width: 28px;
    height: 20px;
    border-radius: 5px !important;
    font-size: 10px !important;
    font-weight: 800;
    line-height: 1;
  }
  .sgb-team.us .sgb-score-btn {
    background: rgba(255,92,26,0.1) !important;
    border: 1px solid rgba(255,92,26,0.2) !important;
    color: var(--orange) !important;
  }
  .sgb-team.us .sgb-score-btn:active {
    background: var(--orange) !important;
    color: var(--white) !important;
  }
  .sgb-team.them .sgb-score-btn {
    background: var(--dark2) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
  }
  .sgb-team.them .sgb-score-btn:active {
    background: var(--mid) !important;
    color: var(--text) !important;
  }
  /* Undo buttons hidden — functionality preserved for any code path
     that triggers undoScore() programmatically; players use the chip
     popover's undo when they need to roll back a tap. */
  .sgb-score-btn.undo, .sgb-score-btn[hidden] { display: none !important; }
  .sgb-next-label[hidden], .sgb-next-val[hidden] { display: none !important; }

  /* Centre column: period + clock only (next-sub moves to its own
     section in Commit 2). Period label is now uppercase tracked. */
  .sgb-divider { gap: 4px !important; padding: 0 8px !important; justify-content: center; }
  .sgb-half {
    font-size: 7px !important;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--muted);
    text-transform: uppercase;
  }
  .sgb-vs {
    font-size: 22px !important;
    color: var(--white);
  }


  /* Full-width play/pause button */
  /* Action row: big play button + side buttons */
  .sgb-action-row {
    display: flex; align-items: stretch; gap: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .sgb-play-btn {
    flex: 1; background: rgba(255,255,255,0.04); border: none;
    padding: 10px 0; cursor: pointer; touch-action: manipulation;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.15s;
  }
  .sgb-play-btn:active { background: rgba(255,255,255,0.08); }
  .sgb-play-btn.running { background: rgba(255,92,26,0.06); }
  .sgb-play-icon { font-size: 15px; color: var(--white); }
  .sgb-play-icon.running { color: var(--orange); }
  .sgb-play-label {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--white);
  }
  .sgb-play-label.running { color: var(--orange); }
  .sgb-side-btn {
    background: rgba(255,255,255,0.04); border: none; border-left: 1px solid rgba(255,255,255,0.06);
    padding: 10px 14px; cursor: pointer; touch-action: manipulation;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 13px; letter-spacing: 0.5px; color: var(--muted);
    transition: all 0.15s; white-space: nowrap;
  }
  .sgb-side-btn:active { background: rgba(255,255,255,0.1); color: var(--white); }
  .sgb-side-btn.halftime { color: var(--blue); }
  .sgb-side-btn.reset { font-size: 18px; padding: 10px 12px; min-width: 44px; }
  .sgb-player-tray.active { display: flex; min-height: 54px; }

  .sgb-sub-info { display: none; } /* hidden — next sub shown in centre column */
  .sgb-sub-countdown { display: none; }

  .sgb-ctrl-btn {
    background: transparent; border: 1px solid var(--border); color: var(--text);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px;
    padding: 5px 9px; border-radius: 5px; cursor: pointer; transition: all 0.15s;
    white-space: nowrap; touch-action: manipulation;
  }
  .sgb-ctrl-btn:active { border-color: var(--orange); color: var(--orange); }
  .sgb-ctrl-btn.start { background: var(--orange); border-color: var(--orange); color: var(--white); }
  .sgb-ctrl-btn.halftime { border-color: var(--blue); color: var(--blue); }

  /* Player tray */
  /* Simulation mode */
  .sim-spd-btn {
    background: rgba(255,153,0,0.1); border: 1px solid rgba(255,153,0,0.3);
    color: rgba(255,153,0,0.6); border-radius: 4px; padding: 2px 7px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 11px;
    cursor: pointer; touch-action: manipulation;
  }
  .sim-spd-btn.active { background: rgba(255,153,0,0.25); border-color: #FF9900; color: #FF9900; }
  /* Simulation mode — orange tint on sticky bar */
  .sticky-game-bar.simulation { border-bottom-color: rgba(255,153,0,0.5); }
  .sticky-game-bar.sub-due .sgb-chip-section {
    background: rgba(255,92,26,0.06);
    border-color: rgba(255,92,26,0.3) !important;
  }
  .sticky-game-bar.sub-due .sgb-chip-label { color: var(--orange); }

  /* Chip section rows — on-court / bench split */
  .sgb-chip-section {
    padding: 5px 8px 4px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .sgb-chip-label {
    font-size: 11px; font-weight: 900; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(76,175,80,0.7);
    margin-bottom: 2px; padding-left: 2px;
  }
  .sgb-tray-court, .sgb-tray-bench {
    display: flex; flex-direction: row; flex-wrap: wrap;
    gap: 5px; border: none; padding: 0; overflow: visible;
    justify-content: center;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    cursor: pointer;
  }
  .sgb-player-tray {
    display: none; flex-direction: row; gap: 6px;
    padding: 7px 10px; overflow-x: auto; scrollbar-width: none;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .sgb-player-tray.active { display: flex; }
  .sgb-player-tray::-webkit-scrollbar { display: none; }
  .ptray-chip {
    background: rgba(76,175,80,0.08); border: 2px solid rgba(76,175,80,0.5);
    border-radius: 10px; padding: 8px 12px; white-space: nowrap;
    cursor: pointer; touch-action: manipulation; flex-shrink: 0;
    transition: all 0.12s; user-select: none; -webkit-user-select: none;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 72px; min-height: 72px; justify-content: center;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(255,92,26,0.2);
  }
  .ptray-chip.bench {
    background: rgba(255,68,68,0.06); border: 2px solid rgba(255,68,68,0.45);
  }
  .chip-status { font-size: 12px; line-height: 1; }
  .ptray-chip.selected { background: rgba(255,92,26,0.12); border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,92,26,0.2); }
  .ptray-chip.has-fouls { border-color: rgba(255,153,0,0.4); }
  .ptray-chip.foul-danger { border-color: rgba(255,68,68,0.5); background: rgba(255,68,68,0.06); }
  .ptray-chip:active { transform: scale(0.95); }
  .chip-name { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
  .chip-pts  { font-size: 12px; font-weight: 700; }
  .chip-fouls { display: flex; gap: 2px; margin-top: 1px; }
  .chip-fdot { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--border); }
  .chip-fdot.on   { background: var(--orange); border-color: var(--orange); }
  .chip-fdot.warn { background: #FF9900; border-color: #FF9900; }
  .chip-fdot.dng  { background: var(--red); border-color: var(--red); }

  /* ── Horizontal-scroll chip rows ──
     Both court and bench use identical 80×64 chips. Row is a flex
     row that overflows horizontally with scroll-snap; .chip-row-
     wrapper wraps each row to host the right-edge fade gradient. */
  .sgb-chip-section {
    padding: 4px 0 6px !important;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .sgb-chip-label {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 7px !important;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px !important;
    padding: 0 12px !important;
  }
  .sgb-chip-label-court { color: var(--green); }
  .sgb-chip-label-bench { color: rgba(239,68,68,0.4); }
  .sgb-chip-hint {
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
  }
  /* Wrapper provides the right-edge fade hint. Position relative
     so the ::after gradient anchors to it. */
  .chip-row-wrapper { position: relative; }
  .chip-row-wrapper::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--bg, #0B0B0B));
    pointer-events: none;
    z-index: 1;
  }
  /* Both rows scroll horizontally with hidden scrollbar. */
  .sgb-tray-court, .sgb-tray-bench {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 4px 12px 6px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start !important;
  }
  .sgb-tray-court::-webkit-scrollbar,
  .sgb-tray-bench::-webkit-scrollbar { display: none; }
  /* Fixed-size chip — identical for court and bench. */
  .sgb-tray-court .ptray-chip,
  .sgb-tray-bench .ptray-chip {
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 64px !important;
    min-width: 80px !important;
    min-height: 64px !important;
    padding: 8px 4px !important;
    border-radius: 10px !important;
    background: var(--dark2, #161616) !important;
    gap: 6px !important;
    position: relative !important;
    scroll-snap-align: start;
  }
  /* Default border colours — green tint on court, red tint on bench. */
  .sgb-tray-court .ptray-chip { border: 1.5px solid rgba(61,191,108,0.25) !important; }
  .sgb-tray-bench .ptray-chip { border: 1.5px solid rgba(239,68,68,0.15) !important; }
  /* Coming-off / coming-on highlighted chips — overrides the
     court/bench defaults. .ct-next-* set in roster.js based on the
     shared _ctPendingNames helper (pendingSubs OR previewSwaps). */
  .ptray-chip.ct-next-off {
    border: 1.5px solid rgba(239,68,68,0.4) !important;
    background: rgba(239,68,68,0.04) !important;
  }
  .ptray-chip.ct-next-on {
    border: 1.5px solid rgba(61,191,108,0.4) !important;
    background: rgba(61,191,108,0.04) !important;
  }
  /* Selected chip keeps the orange highlight on top of the new look. */
  .ptray-chip.selected {
    border-color: var(--orange) !important;
    background: rgba(255,92,26,0.08) !important;
  }
  /* Name — full first name, no truncation. Foul dots below. */
  .sgb-tray-court .chip-name,
  .sgb-tray-bench .chip-name {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sgb-tray-court .chip-name { color: var(--text, #E4E4E4) !important; }
  .sgb-tray-bench .chip-name { color: var(--sub, #666) !important; }
  .sgb-tray-court .chip-fouls,
  .sgb-tray-bench .chip-fouls {
    display: flex !important;
    justify-content: center !important;
    gap: 3px !important;
    margin-top: 0;
  }
  .sgb-tray-court .chip-fdot,
  .sgb-tray-bench .chip-fdot {
    width: 4px !important;
    height: 4px !important;
    border: none !important;
    background: rgba(255,255,255,0.12);
  }
  /* All filled dots same colour, driven by total fouls (logic in
     roster.js buildChip). */
  .sgb-tray-court .chip-fdot.on,
  .sgb-tray-court .chip-fdot.warn,
  .sgb-tray-bench .chip-fdot.on,
  .sgb-tray-bench .chip-fdot.warn { background: var(--amber) !important; }
  .sgb-tray-court .chip-fdot.dng,
  .sgb-tray-bench .chip-fdot.dng { background: var(--red) !important; }

  /* Popover CSS removed with the #ptrayPopover surface — chip
     redesign moved all per-chip actions into the .chip-expanded
     panel and the showToastWithUndo toast. */


  /* In-game settings panel: markup moved to a slide-up sheet
     (#ingameSettingsPanel) — see styles further down. The old
     inline panel rules were removed when that markup was retired. */

  /* Old strip-next-up / sub-now-btn / strip-swap-row / .sw-* /
     strip-excl-btn / .sgb-action-row / .sgb-action-btn rules removed.
     The NEXT SUB section (css/next-sub.css, .next-sub-section + .ns-*)
     replaces them. .sgb-action-btn is referenced by media queries
     further down — left there in case the class returns; harmless. */

  /* ── SUB ALERT BOTTOM SHEET ───────────────────────────── */
  .sub-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .sub-sheet-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sub-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 201;
    background: var(--dark2);
    border-top: 2px solid var(--orange);
    border-radius: 16px 16px 0 0;
    padding: 0 16px 32px;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    /* Fully hidden when not visible — prevents bleed-through on mobile */
    visibility: hidden;
    pointer-events: none;
  }
  .sub-sheet.visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .sub-sheet-handle {
    width: 36px; height: 4px; background: var(--border);
    border-radius: 2px; margin: 10px auto 14px;
  }
  .sub-sheet-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 20px;
    text-transform: uppercase; color: var(--orange);
    margin-bottom: 4px; text-align: center;
  }
  .sub-sheet-subtitle { font-size: 12px; color: var(--muted); margin-bottom: 14px; text-align: center; }

  /* ── FIXTURES — Upcoming Fixtures rows + Add/Edit sheet ───── */
  .fixture-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .fixture-row:hover { border-color: rgba(255,92,26,0.4); }
  .fixture-row:active { border-color: var(--orange); }
  .fixture-row.is-past { opacity: 0.55; }
  .fixture-row.is-today {
    border-color: rgba(255,92,26,0.5);
    background: rgba(255,92,26,0.06);
  }

  .fixture-row-left {
    flex-shrink: 0;
    min-width: 64px;
  }
  .fixture-date {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .fixture-time {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
  }
  .fixture-row-centre {
    flex: 1; min-width: 0;
  }
  .fixture-opponent {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fixture-location {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fixture-row-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .fixture-home-away {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 10px;
  }
  .fixture-home-away.home {
    background: rgba(61,191,108,0.12);
    color: var(--green);
    border: 1px solid rgba(61,191,108,0.25);
  }
  .fixture-home-away.away {
    background: rgba(59,158,255,0.12);
    color: var(--blue);
    border: 1px solid rgba(59,158,255,0.25);
  }
  .fixture-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .fixture-badge.past  { color: var(--muted); }
  .fixture-badge.today { color: var(--orange); }

  /* Sheet internals — form + buttons */
  .fixture-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
  }
  .fixture-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .fixture-field-row {
    display: flex;
    gap: 10px;
  }
  .fixture-field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .fixture-optional {
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0.5px;
    font-weight: 400;
    font-size: 10px;
  }
  .fixture-input {
    width: 100%;
    background: var(--dark);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
  }
  .fixture-input:focus {
    outline: none;
    border-color: var(--orange);
  }
  textarea.fixture-input {
    resize: vertical;
    min-height: 50px;
  }
  .fixture-pill-row {
    display: flex;
    gap: 8px;
  }
  .fixture-pill {
    flex: 1;
    background: var(--dark);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 10px 12px;
    border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
  }
  .fixture-pill.active {
    background: rgba(255,92,26,0.12);
    border-color: var(--orange);
    color: var(--orange);
  }

  .fixture-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .fixture-btn {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
  }
  .fixture-btn.primary {
    background: var(--orange);
    color: var(--white);
    border-color: var(--orange);
  }
  .fixture-btn.primary:active { opacity: 0.85; }
  .fixture-btn.ghost {
    background: var(--mid);
    color: var(--muted);
    border-color: var(--border);
  }
  .fixture-btn.destructive {
    background: transparent;
    color: #EF4444;
    border-color: rgba(255,68,68,0.35);
  }

  /* ── Assistant coach mode — read-only access control ──────
     Set on <html data-assistant-mode="true"> by js/assistant.js
     once a valid ?role=assistant&token= link is validated. Game day
     tab is intentionally NOT touched — assistants run the live game
     (scoring, subs, sub alerts) with full controls. Squad editor,
     destructive season actions, certificates, role switch, recovery
     setup, team management, and the head-coach assistant section
     are all hidden or disabled. */

  /* Squad tab — entire panel becomes view-only. Squad rows still
     render so the assistant can see who's on the roster. */
  html[data-assistant-mode="true"] #panelMyTeam .squad-name-input,
  html[data-assistant-mode="true"] #panelMyTeam .squad-number-input,
  html[data-assistant-mode="true"] #panelMyTeam .pos-pill,
  html[data-assistant-mode="true"] #panelMyTeam .squad-remove-btn {
    pointer-events: none;
    opacity: 0.45;
  }
  html[data-assistant-mode="true"] #panelMyTeam .add-squad-btn {
    display: none !important;
  }
  /* "Switch to Parent View" link inside the squad tab — irrelevant
     in assistant mode and would let them break out of the scoped
     session. */
  html[data-assistant-mode="true"] #panelMyTeam button[onclick*="switchRoleTo"] {
    display: none !important;
  }
  html[data-assistant-mode="true"] #panelMyTeam::before {
    content: 'Squad is view-only in assistant mode';
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    padding: 10px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  /* Settings tab — hide every write surface. The Team Rules
     section, Game Settings inputs, Team Details inputs, Account
     Recovery, Team Management, and the head-coach Assistant
     Coaches section are all hidden so the assistant only sees the
     view-only notice and a "Switch to Game Day" prompt above. */
  html[data-assistant-mode="true"] #panelSettings > * {
    display: none !important;
  }
  html[data-assistant-mode="true"] #panelSettings::before {
    content: 'Settings are view-only in assistant mode';
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 12px 0;
  }

  /* Season tab — destructive actions hidden. Game history rows,
     stats, results, fixtures and the share/print buttons stay
     visible so the assistant can read the team's record. */
  html[data-assistant-mode="true"] .reset-season-btn,
  html[data-assistant-mode="true"] #panelSeason a[href*="certificates"],
  html[data-assistant-mode="true"] #panelSeason button[onclick*="deleteGameRecord"] {
    display: none !important;
  }
  /* Fixture sheet — destructive Delete Fixture button hidden so the
     assistant can still open a fixture to see availability counts
     but can't remove it. Save and Cancel remain — date/time tweaks
     during a game are a reasonable assistant action. */
  html[data-assistant-mode="true"] #fixtureSheet .fixture-btn.destructive {
    display: none !important;
  }
  /* "+ Add Fixture" button on the season tab — disabled in
     assistant mode (creating a fixture is a team-admin action). */
  html[data-assistant-mode="true"] #panelSeason button[onclick="openAddFixtureSheet()"] {
    display: none !important;
  }

  /* The persistent banner from _renderAssistantBanner sits above
     the bottom tab bar — these rules are belt-and-braces in case
     CSS overrides the inline cascade. */
  #assistantBanner {
    pointer-events: none;
  }

  /* ── Fixture availability — responses inside edit sheet ─── */
  .fixture-responses {
    border-bottom: 1px solid var(--border);
    padding: 0 0 14px;
    margin-bottom: 14px;
  }
  .fixture-responses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .fixture-responses-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .fixture-share-btn {
    background: rgba(255,92,26,0.08);
    border: 1px solid rgba(255,92,26,0.3);
    color: var(--orange);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fixture-share-btn:active { opacity: 0.85; }

  .fixture-response-counts {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .resp-count {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
  }
  .resp-count.available   { background: rgba(61,191,108,0.08); }
  .resp-count.unavailable { background: rgba(239,68,68,0.08); }
  .resp-count.pending     { background: rgba(255,255,255,0.03); }
  .resp-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 22px;
    display: block;
    line-height: 1;
  }
  .resp-count.available .resp-num   { color: var(--green); }
  .resp-count.unavailable .resp-num { color: var(--red); }
  .resp-count.pending .resp-num     { color: var(--muted); }
  .resp-lbl {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
    display: block;
  }

  .fixture-player-resp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .fixture-player-resp:last-child { border-bottom: none; }
  .resp-player-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
  }
  .resp-status {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.3px;
  }
  .resp-status.available   { color: var(--green); }
  .resp-status.unavailable { color: var(--red); }
  .resp-status.maybe       { color: var(--amber); }
  .resp-status.pending     { color: var(--muted); }

  /* SUB DUE indicator in sticky bar */
  .sgb-sub-due-banner {
    display: none;
    background: var(--orange);
    color: var(--white);
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 14px;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 6px; cursor: pointer;
    animation: pulse 0.5s infinite;
  }
  .sgb-sub-due-banner.visible { display: block; }


  /* ── AVAILABILITY SCREEN ── */
  .availability-screen {
    display: none;
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
  }
  .availability-screen.visible { display: block; }
  .availability-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 20px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--white); margin-bottom: 4px;
  }
  .availability-subtitle {
    font-size: 13px; color: var(--muted); margin-bottom: 16px;
  }
  .availability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px; margin-bottom: 16px;
  }
  .avail-tile {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px; border-radius: 8px;
    background: rgba(76,175,80,0.08);
    border: 1px solid var(--green);
    cursor: pointer; transition: all 0.15s;
    font-size: 14px; font-weight: 600; color: var(--text);
    user-select: none;
  }
  .avail-tile.absent {
    background: rgba(255,51,51,0.06);
    border-color: var(--red);
    color: var(--muted);
    text-decoration: line-through;
  }
  .avail-tile-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: var(--green);
    box-shadow: 0 0 5px rgba(76,175,80,0.5);
  }
  .avail-tile.absent .avail-tile-dot {
    background: var(--red); box-shadow: none;
  }
  .avail-tile-action {
    font-size: 13px; font-weight: 700; flex-shrink: 0;
    color: var(--green); min-width: 14px; text-align: right;
  }
  .avail-tile.absent .avail-tile-action { color: var(--red); }
  .avail-confirm-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
  }
  .avail-count {
    font-size: 13px; color: var(--muted);
  }
  .avail-count strong { color: var(--white); }
  .avail-confirm-btn {
    background: var(--orange); color: var(--white);
    border: none; padding: 12px 24px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 16px;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; border-radius: 6px;
    transition: background 0.2s;
  }
  .avail-confirm-btn:hover { background: var(--orange-light); }
  .avail-confirm-btn:disabled {
    background: var(--mid); color: var(--muted); cursor: not-allowed;
  }

  /* ── AD UNITS ─────────────────────────────────────────────── */
  /* ── AVAILABILITY SCREEN ── */
  .availability-screen {
    display: none;
    background: var(--dark);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
  }
  .availability-screen.visible { display: block; }
  .availability-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 20px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--white); margin-bottom: 4px;
  }
  .availability-subtitle {
    font-size: 13px; color: var(--muted); margin-bottom: 16px;
  }
  .availability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px; margin-bottom: 16px;
  }
  .avail-tile {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px; border-radius: 8px;
    background: rgba(76,175,80,0.08);
    border: 1px solid var(--green);
    cursor: pointer; transition: all 0.15s;
    font-size: 14px; font-weight: 600; color: var(--text);
    user-select: none;
  }
  .avail-tile.absent {
    background: rgba(255,51,51,0.06);
    border-color: var(--red);
    color: var(--muted);
    text-decoration: line-through;
  }
  .avail-tile-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: var(--green);
    box-shadow: 0 0 5px rgba(76,175,80,0.5);
  }
  .avail-tile.absent .avail-tile-dot {
    background: var(--red); box-shadow: none;
  }
  .avail-confirm-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
  }
  .avail-count {
    font-size: 13px; color: var(--muted);
  }
  .avail-count strong { color: var(--white); }
  .avail-confirm-btn {
    background: var(--orange); color: var(--white);
    border: none; padding: 12px 24px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 16px;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; border-radius: 6px;
    transition: background 0.2s;
  }
  .avail-confirm-btn:hover { background: var(--orange-light); }
  .avail-confirm-btn:disabled {
    background: var(--mid); color: var(--muted); cursor: not-allowed;
  }

  /* ── HOUSE AD — same template as the family / parent break overlay
     so every CoachKit ad slot looks identical across the app. ── */
  .house-ad {
    width: calc(100% - 32px);
    max-width: 380px;
    background: linear-gradient(135deg, #1A1A1A 0%, #0F1F0F 100%);
    border: 1px solid rgba(61,191,108,0.18);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
  }
  .house-ad .ad-label {
    position: absolute; top: 8px; right: 8px;
    font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.3);
    border-radius: 3px; padding: 2px 5px;
  }
  .house-ad-inner {
    padding: 22px 20px;
    display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 10px;
  }
  .house-ad-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,92,26,0.12);
    border: 1px solid rgba(255,92,26,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
  }
  .house-ad-logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-style: italic;
    font-size: 26px; color: var(--white);
    letter-spacing: -0.5px; line-height: 1;
  }
  .house-ad-logo span { color: var(--orange); }
  .house-ad-copy { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .house-ad-cta {
    background: rgba(255,92,26,0.1);
    border: 1px solid rgba(255,92,26,0.25);
    border-radius: 100px;
    padding: 6px 18px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--orange); margin-top: 2px;
    text-decoration: none; display: inline-block;
    -webkit-tap-highlight-color: rgba(255,92,26,0.2);
  }
  .house-ad-cta:hover { background: rgba(255,92,26,0.18); }
  .house-ad-sub { font-size: 10px; color: var(--muted); }


  /* ── DRUM ROLL SCROLLER ─────────────────────────────────── */
  .drum-picker-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
  }
  .drum-picker {
    flex: 1;
    height: 120px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: var(--dark);
    border: 1px solid var(--border);
    cursor: pointer;
    /* Fade top & bottom edges */
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0%, black 25%, black 75%, transparent 100%);
  }
  /* Selection band — subtle lines only, no fill so selected number reads clearly */
  .drum-picker::after {
    content: '';
    position: absolute;
    top: 50%; left: 6px; right: 6px;
    height: 40px;
    transform: translateY(-50%);
    background: transparent;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    pointer-events: none;
    z-index: 2;
  }
  .drum-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
  }
  .drum-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    /* colour/weight set directly by JS based on physical position */
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
  }
  .drum-colon {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: var(--muted);
    flex-shrink: 0;
    padding-bottom: 2px;
  }
  /* Labels under scrollers */
  .drum-picker-labels {
    display: flex;
    gap: 8px;
    margin-top: 4px;
  }
  .drum-picker-label {
    flex: 1;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
  }


  /* ── PLAYER CARD STRIP ───────────────────────────────────── */
  .scorer-strip {
    display: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 10px 10px;
    gap: 7px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.18);
    flex-direction: row;
    align-items: flex-start;
  }
  .scorer-strip::-webkit-scrollbar { display: none; }
  .scorer-strip.active { display: flex; }

  /* Old strip-combined / strip-half / strip-half-swaps / .sw-* /
     strip-excl-btn rules removed in Commit 3 of the redesign — the
     NEXT SUB section in css/next-sub.css is the source of truth now.
     A previously orphaned declaration block (gap/font-size/weight
     with no selector, ~5 lines long) was also stripped. */
  .strip-nu-off { color: var(--orange); } /* coming off = orange */
  .strip-nu-on  { color: var(--green); }        /* coming on = green */
  .strip-nu-arrow { color: var(--muted); font-size: 10px; }
  .strip-nu-saved {
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
    color: #FF9900; background: rgba(255,153,0,0.15);
    border: 1px solid rgba(255,153,0,0.3);
    border-radius: 3px; padding: 1px 5px; text-transform: uppercase;
  }

  /* ── All cards — same base style (neutral) ─────────────── */
  .scorer-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: var(--dark2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 8px 9px 9px;
    min-width: 88px;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s, transform 0.25s;
  }
  /* On-court — green solid border */
  .scorer-card.on-court {
    background: rgba(76,175,80,0.07);
    border-color: var(--green);
    border-style: solid;
  }
  /* Bench — dashed neutral border */
  .scorer-card.bench {
    background: rgba(255,255,255,0.02);
    border-color: var(--border);
    border-style: dashed;
  }
  /* next-off = on court, coming off = green (currently playing) */
  .scorer-card.next-off {
    border-color: var(--green) !important;
    border-style: solid !important;
    background: rgba(76,175,80,0.12) !important;
  }
  /* next-on = on bench, coming on = orange (waiting to come on) */
  .scorer-card.next-on {
    border-color: var(--orange) !important;
    border-style: solid !important;
    background: rgba(255,92,26,0.08) !important;
  }
  .scorer-card.fouled-out {
    border-color: var(--red) !important;
    border-style: solid !important;
    background: rgba(255,51,51,0.06) !important;
    opacity: 0.6;
  }
  .scorer-card.injured-card {
    border-color: #FF9900 !important;
    border-style: solid !important;
    background: rgba(255,153,0,0.06) !important;
    opacity: 0.7;
  }
  .scorer-card.flash {
    animation: scoreCardFlash 0.32s ease;
  }
  @keyframes scoreCardFlash {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  /* Card inner elements */
  .scorer-status-icon { font-size: 16px; line-height: 1; }
  .scorer-name {
    font-size: 12px; font-weight: 700; color: var(--text);
    text-align: center; max-width: 84px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.2;
  }
  .scorer-pts {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
    font-size: 18px; color: rgba(255,255,255,0.35);
    line-height: 1; min-width: 24px; text-align: center;
  }
  .scorer-pts.has-pts { color: var(--green-light); }

  /* Score buttons row */
  .scorer-btns { display: flex; gap: 3px; }
  .scorer-btn {
    background: var(--mid); border: 1px solid var(--border);
    color: var(--text); font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; padding: 5px 7px;
    border-radius: 5px; cursor: pointer; line-height: 1;
    min-width: 30px; text-align: center; transition: all 0.1s;
  }
  .scorer-btn:active {
    background: rgba(105,219,124,0.25); border-color: var(--green-light);
    color: var(--green-light); transform: scale(0.92);
  }
  .scorer-btn.undo { color: var(--muted); min-width: 26px; font-size: 11px; }
  .scorer-btn.undo:active { border-color: var(--orange); color: var(--orange); }

  /* Foul dots */
  .scorer-fouls { display: flex; gap: 2px; justify-content: center; }
  .scorer-foul-dot {
    width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--border);
  }
  .scorer-foul-dot.active  { background: var(--orange); border-color: var(--orange); }
  .scorer-foul-dot.warning { background: #FF9900; border-color: #FF9900; }
  .scorer-foul-dot.out     { background: var(--red); border-color: var(--red); }

  /* Action buttons row — foul + injury */
  .scorer-actions { display: flex; gap: 3px; width: 100%; }
  .scorer-action-btn {
    flex: 1; background: transparent; border: 1px solid var(--border);
    color: var(--muted); font-size: 11px; font-weight: 700;
    padding: 4px 3px; border-radius: 4px; cursor: pointer;
    text-align: center; line-height: 1; transition: all 0.12s;
    white-space: nowrap;
  }
  .scorer-action-btn.foul-btn:active {
    background: rgba(255,92,26,0.2); border-color: var(--orange); color: var(--orange);
  }
  .scorer-action-btn.foul-btn.warn {
    border-color: #FF9900; color: #FF9900;
  }
  .scorer-action-btn.injury-btn:active {
    background: rgba(255,153,0,0.2); border-color: #FF9900; color: #FF9900;
  }
  .scorer-action-btn.injury-btn.active {
    background: rgba(255,153,0,0.15); border-color: #FF9900; color: #FF9900;
  }
  /* Mins label */
  .scorer-mins { font-size: 10px; color: var(--muted); text-align: center; }


  /* When game is active — collapse everything except sticky + roster */
  body.game-active .page-header { display: none !important; }
  body.game-active #subs .section-header { display: none !important; }
  body.game-active .subs-wrap { padding: 8px 12px 16px !important; }
  /* iPad / desktop full-bleed during play. .subs-wrap has a 1100px
     base max-width (L2566) and an 800px cap at >=1024px (L2952)
     that centre the form-style setup tabs but waste ~110-280px
     each side once the coach is actually IN a game. Setup tabs
     keep their max-widths because #subsSetup is display:none in
     game-active (line above), and .subs-setup centring rules
     never engage. !important needed to beat the #subs .subs-wrap
     specificity at L2952. */
  body.game-active .subs-wrap {
    max-width: none !important;
    margin: 0 !important;
  }
  body.game-active .game-layout { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Hide left column (timer card, next-up, edit panel, sub alert) during game-active
     — all controls now live in sticky bar + bottom sheet */
  body.game-active .timer-card { display: none !important; }
  /* next-up-strip is now shown inside subsGame during game */
  body.game-active #subsSetup { display: none !important; }
  body.game-active .sub-alert { display: none !important; }
  body.game-active .game-layout > div:first-child { display: none !important; }

  /* Roster card fills full width */
  body.game-active .game-layout { display: block !important; }

  /* Compact roster rows on small screen during game */
  body.game-active .player-row { padding: 8px 12px !important; border-radius: 0 !important; margin-bottom: 1px !important; }
  body.game-active .player-score-btns { gap: 3px !important; }
  body.game-active .player-score-btn { font-size: 12px !important; padding: 4px 0 !important; }


  /* ── SETUP TABS ──────────────────────────────────────────── */
  .setup-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    gap: 0;
  }
  .setup-tab {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
  }
  .setup-tab:hover { color: var(--text); }
  .setup-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
  .setup-tab .tab-icon { display: block; font-size: 18px; margin-bottom: 2px; }

  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* Settings → TEAM MANAGEMENT row buttons (Session 6 follow-up).
     Each row is a flex with a left-aligned label and a right-aligned
     side note. JS toggles display + side text per state.

     IMPORTANT — iOS WebKit (Safari + Chrome on iPhone) ignores
     -webkit-appearance: none on <button> in some recent versions,
     so we set BOTH the prefixed and unprefixed property and lift
     the selector specificity to `button.tm-row` to beat any
     residual user-agent button styling. Without this the buttons
     render as native iOS pills (white background, system font). */
  button.tm-row,
  .tm-row {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 16px;
    margin: 0 0 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: rgba(255,92,26,0.12);
  }
  button.tm-row:hover,
  .tm-row:hover  { border-color: rgba(255,92,26,0.4); }
  button.tm-row:active,
  .tm-row:active { transform: scale(0.99); }
  .tm-row-label {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: inherit;
  }
  .tm-row-side {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    margin-left: 12px;
  }
  button.tm-row-danger,
  .tm-row-danger {
    background: transparent;
    border: 1px solid rgba(239,68,68,0.2);
    color: var(--red);
  }
  button.tm-row-danger:hover,
  .tm-row-danger:hover { border-color: rgba(239,68,68,0.5); }
  button.tm-row-danger .tm-row-label,
  .tm-row-danger .tm-row-label { color: var(--red); }

  /* My Team tab */
  /* Inline-edit team header (Session 6 follow-up). Replaces the
     old "Team Details" form. Editable spans use contenteditable
     for natural tap-to-edit; a subtle underline appears on focus
     so the affordance reads. Empty editors fall back to a
     placeholder via :empty + ::before. */
  .th-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-style: italic;
    font-size: 28px; color: var(--white);
    letter-spacing: -0.4px; line-height: 1.1;
    margin: 0 0 6px;
    outline: none;
    cursor: text;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
    min-height: 1em;
  }
  .th-name:focus { border-bottom-color: rgba(255,92,26,0.5); }
  .th-name:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    font-style: italic;
    opacity: 0.7;
  }
  .th-meta {
    font-size: 12px; color: var(--muted);
    display: flex; align-items: center;
    flex-wrap: wrap; gap: 6px;
    margin-bottom: 4px;
  }
  .th-meta .th-sep { color: var(--border); }

  /* Team-detail inputs — Age Group / Season / Coach */
  .th-fields {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 12px;
  }
  .th-field {
    display: flex; align-items: center; gap: 10px;
    background: var(--mid);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 8px 12px;
    transition: border-color 0.15s;
  }
  .th-field:focus-within { border-color: rgba(255,92,26,0.4); }
  .th-field-label {
    font-size: 11px; font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 78px;
    flex-shrink: 0;
  }
  .th-field-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 0;
    min-width: 0;
  }
  .th-field-input::placeholder { color: var(--muted); opacity: 0.6; font-weight: 500; }

  .squad-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .squad-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mid);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px 12px;
    transition: border-color 0.15s;
  }
  .squad-row:hover { border-color: rgba(255,255,255,0.15); }
  .squad-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 14px;
    color: var(--muted); min-width: 18px; text-align: center;
  }
  .squad-name-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 15px;
    outline: none;
    padding: 0;
  }
  .squad-name-input::placeholder { color: rgba(255,255,255,0.2); }

  .squad-number-input {
    width: 44px; background: var(--mid); border: 1px solid var(--border);
    color: var(--text); padding: 9px 6px; border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
    font-size: 14px; text-align: center; outline: none; flex-shrink: 0;
  }
  .squad-number-input:focus { border-color: var(--orange); }
  .squad-number-input::placeholder { color: var(--muted); }
  .squad-name-input.duplicate {
    border: 1px solid var(--red) !important;
    background: rgba(255,51,51,0.08) !important;
    color: var(--red-light);
  }

  .squad-remove-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
    line-height: 1;
  }
  .squad-remove-btn:hover { color: var(--red); }
  .add-squad-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
    padding: 10px;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    margin-bottom: 20px;
  }
  .add-squad-btn:hover { border-color: var(--orange); color: var(--orange); border-style: solid; }

  /* Game settings in My Team tab */
  .settings-section-title {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--muted);
    margin: 20px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }
  @media(max-width:400px) { .settings-grid { grid-template-columns: 1fr; } }
  .settings-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block;
  }
  /* Settings pill buttons */
  .settings-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .pill-btn {
    background: var(--mid); border: 1px solid var(--border);
    color: var(--muted); border-radius: 100px; padding: 6px 14px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 14px; cursor: pointer; touch-action: manipulation;
    transition: all 0.12s; user-select: none;
  }
  .pill-btn.active { background: rgba(255,92,26,0.15); border-color: var(--orange); color: var(--orange); }
  /* "Advanced" divider between primary and rare-use settings */
  .settings-advanced-divider {
    font-size: 9px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: var(--muted);
    margin: 18px 0 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  /* Settings stepper */
  .settings-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .stepper-btn {
    background: var(--mid); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; width: 34px; height: 34px; font-size: 18px;
    cursor: pointer; touch-action: manipulation;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.1s;
  }
  .stepper-btn:active { background: var(--border); }
  .stepper-val {
    background: var(--mid); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 10px; font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 18px; color: var(--white);
    min-width: 52px; text-align: center; line-height: 1.2;
  }
  .pos-pill {
    background: var(--mid); border: 1px solid var(--border);
    color: var(--muted); border-radius: 100px; padding: 3px 10px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 12px; letter-spacing: 0.5px; cursor: pointer;
    touch-action: manipulation; transition: all 0.12s;
  }
  .pos-pill.active {
    background: rgba(255,92,26,0.15); border-color: var(--orange);
    color: var(--orange);
  }
  .settings-sublabel { font-size: 11px; color: var(--muted); margin-top: 1px; }
  .settings-input {
    width: 100%; background: var(--mid); border: 1px solid var(--border);
    color: var(--text); border-radius: 6px; padding: 8px 10px;
    font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 500;
    outline: none; box-sizing: border-box;
  }
  .settings-input:focus { border-color: var(--orange); }
  .settings-input::placeholder { color: var(--muted); }
  .settings-select {
    width: 100%;
    background: var(--mid);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 6px;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    appearance: none;
    cursor: pointer;
  }
  .save-team-btn {
    width: 100%;
    background: var(--orange);
    color: var(--white);
    border: none;
    padding: 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 16px;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; border-radius: 7px;
    transition: background 0.2s;
    margin-bottom: 8px;
  }
  .save-team-btn:hover { background: var(--orange-light); }
  .save-team-feedback {
    text-align: center; font-size: 12px; color: var(--green);
    height: 16px; transition: opacity 0.3s;
  }

  /* ── Player detail panel ─────────────────────────────── */
  .player-detail-panel {
    display:none;
    margin-bottom:12px;
    background:var(--dark);
    border:1px solid var(--orange);
    border-radius:10px;
    overflow:hidden;
    animation:slideDown 0.2s ease;
  }
  @keyframes slideDown { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
  .player-detail-panel.open { display:block; }
  .pdp-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px solid var(--border);
    cursor:pointer;
  }
  .pdp-name {
    font-family:'Barlow Condensed',sans-serif;
    font-weight:900; font-size:18px; color:var(--white);
  }
  .pdp-chevron { color:var(--muted); font-size:12px; transition:transform 0.2s; }
  .pdp-chevron.open { transform:rotate(180deg); }
  .pdp-body { padding:12px 14px; }
  .pdp-stat-row {
    display:grid; grid-template-columns:1fr 1fr 1fr 1fr;
    gap:6px; margin-bottom:12px;
  }
  .pdp-stat {
    text-align:center; background:rgba(255,255,255,0.04);
    border-radius:6px; padding:8px 4px;
  }
  .pdp-stat-val {
    font-family:'Barlow Condensed',sans-serif;
    font-weight:900; font-size:20px; line-height:1;
  }
  .pdp-stat-lbl { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
  .pdp-graph-title {
    font-size:10px; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--muted); margin-bottom:6px;
  }
  .pdp-graph { margin-bottom:14px; }
  .pdp-bars {
    display:flex; align-items:flex-end; gap:4px;
    height:60px; padding-bottom:18px; position:relative;
  }
  .pdp-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
  .pdp-bar {
    width:100%; border-radius:3px 3px 0 0;
    min-height:2px; transition:height 0.3s;
  }
  .pdp-bar.pts   { background:linear-gradient(to top, #2d7a3a, var(--green-light)); }
  .pdp-bar.fouls { background:linear-gradient(to top, #b03a00, var(--orange)); }
  .pdp-bar.mins  { background:linear-gradient(to top, #1a3a6b, var(--blue)); }
  .pdp-bar-lbl   { font-size:9px; color:var(--muted); text-align:center; white-space:nowrap; }
  .pdp-bar-val   { font-size:9px; font-weight:700; text-align:center; }

  /* Season tab */
  .season-empty {
    text-align: center; padding: 40px 20px;
    color: var(--muted); font-size: 14px; line-height: 1.6;
  }
  .season-empty .season-empty-icon { font-size: 40px; margin-bottom: 12px; }
  .season-player-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .season-player-row:last-child { border-bottom: none; }
  .season-player-name { flex: 1; font-size: 14px; font-weight: 600; }
  .season-starts-bar-wrap { flex: 2; }
  .season-starts-bar {
    height: 6px; background: var(--mid); border-radius: 3px; overflow: hidden;
  }
  .season-starts-bar-fill {
    height: 100%; border-radius: 3px;
    background: var(--orange); transition: width 0.4s;
  }
  .season-starts-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 16px;
    color: var(--white); min-width: 32px; text-align: right;
  }
  .season-starts-label {
    font-size: 10px; color: var(--muted); text-align: right; min-width: 32px;
  }
  .season-summary-strip {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; margin-bottom: 20px;
  }
  .season-summary-card {
    background: var(--mid); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px; text-align: center;
  }
  .season-summary-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 28px; color: var(--orange); line-height: 1;
    white-space: nowrap;
  }
  /* "12W 4D 8L" at 28px doesn't fit in an ~87px card content area
     on a 375px iPhone SE. Drop to 20px below 390 — keeps the long
     format on one line without breaking 3-card height alignment. */
  @media (max-width: 390px) {
    .season-summary-num { font-size: 20px; }
  }
  .season-summary-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
  .reset-season-btn {
    width: 100%; background: transparent; border: 1px solid var(--red);
    color: var(--red); padding: 10px; border-radius: 6px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.15s; margin-top: 20px;
  }
  .reset-season-btn:hover { background: rgba(255,51,51,0.1); }

  /* Game Day tab */
  .gameday-tab-squad {
    background: var(--mid); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
  }
  .gameday-tab-squad-title {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
  }
  .gameday-no-team {
    text-align: center; padding: 24px;
    color: var(--muted); font-size: 13px; line-height: 1.6;
  }

  .gameday-player-warning {
    background: rgba(255,153,0,0.08);
    border: 1px solid rgba(255,153,0,0.4);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .gameday-player-warning-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: 15px;
    color: #FF9900; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 6px;
  }
  .gameday-player-warning p {
    font-size: 13px; color: var(--muted); margin-bottom: 12px; line-height: 1.5;
  }
  .gameday-court-adj {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .gameday-court-adj label {
    font-size: 12px; color: var(--muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  .gameday-court-adj select {
    background: var(--mid); border: 1px solid #FF9900;
    color: var(--white); padding: 7px 12px;
    border-radius: 6px; font-family: 'Barlow', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .gameday-court-adj-note {
    font-size: 11px; color: var(--muted);
    margin-top: 6px; line-height: 1.4;
  }


  /* Sub interval inline picker */
  .sgb-sub-info { position: relative; cursor: pointer; }
  .sgb-sub-info:hover .sgb-sub-label { color: var(--orange); }
  .sgb-sub-info:hover .sgb-sub-countdown { color: var(--orange-light); }
  .sub-interval-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    z-index: 300;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: none;
  }
  .sub-interval-picker.open { display: block; }
  .sip-title {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 10px; text-align: center;
  }
  .sip-stepper {
    display: flex; align-items: center; gap: 8px;
    justify-content: center; margin-bottom: 10px;
  }
  .sip-step-btn {
    background: var(--mid); border: 1px solid var(--border);
    color: var(--text); width: 34px; height: 34px;
    border-radius: 6px; cursor: pointer; font-size: 18px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    line-height: 1; transition: all 0.15s; flex-shrink: 0;
  }
  .sip-step-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
  .sip-current {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 26px; color: var(--white);
    min-width: 80px; text-align: center; line-height: 1;
  }
  .sip-current small {
    display: block; font-size: 11px; color: var(--muted);
    font-weight: 400; letter-spacing: 0.5px;
  }
  .sip-presets {
    display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
  }
  .sip-preset {
    background: var(--mid); border: 1px solid var(--border);
    color: var(--muted); padding: 4px 10px; border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 13px; cursor: pointer; transition: all 0.15s;
  }
  .sip-preset:hover { border-color: var(--orange); color: var(--orange); }
  .sip-preset.active { background: var(--orange); border-color: var(--orange); color: var(--white); }
  .sip-note {
    font-size: 10px; color: var(--muted); text-align: center;
    margin-top: 8px; line-height: 1.4;
  }

  /* ── SUBSTITUTION MANAGER ── */
  #subs { background: var(--black); border-top: 1px solid var(--border); }
  .subs-wrap { max-width: 1100px; margin: 0 auto; padding: 64px 24px; }
  /* Reclaim 32px horizontal + 96px vertical on every non-game tab
     for phones. The base 64px/24px desktop padding wastes a quarter
     of an iPhone SE viewport before any content renders. The
     body.game-active override at line 2013 keeps !important so it
     still wins during a live game. */
  @media (max-width: 480px) {
    .subs-wrap { padding: 16px 12px; }
  }

  .subs-setup { background: var(--dark); border: 1px solid var(--border); border-radius: 10px; padding: 28px; max-width: 560px; }
  .subs-setup .form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
  @media(max-width:600px){ .subs-setup .form-row { grid-template-columns: 1fr 1fr; } }
  .subs-setup .form-group { margin-bottom: 0; }

  .player-name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 20px; }
  .player-name-row { display: flex; align-items: center; gap: 4px; }
  .player-name-row .player-name-input { flex: 1; min-width: 0; }
  .remove-player-btn {
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: rgba(255,51,51,0.08); border: 1px solid rgba(255,51,51,0.25);
    color: #FF6666; font-size: 16px; font-weight: 700;
    cursor: pointer; border-radius: 5px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .remove-player-btn:hover, .remove-player-btn:active {
    background: rgba(255,51,51,0.2); border-color: var(--red); color: var(--red);
  }
  .player-name-input { background: var(--mid); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; border-radius: 6px; font-family: 'Barlow', sans-serif; font-size: 14px; width: 100%; transition: border-color 0.2s; }
  .player-name-input:focus { outline: none; border-color: var(--orange); }
  .player-name-input::placeholder { color: var(--muted); }

  /* Active game UI */
  .subs-game { display: none; }
  .subs-game.visible { display: block; scroll-margin-top: 20px; }

  .game-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  @media(max-width:640px){ .game-layout { grid-template-columns: 1fr; } }

  /* Timer */
  .timer-card { background: var(--dark); border: 1px solid var(--border); border-radius: 10px; padding: 24px; text-align: center; }
  .timer-half-label { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
  .timer-display { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 64px; color: var(--white); line-height: 1; margin-bottom: 4px; letter-spacing: -2px; }
  .timer-display.warning { color: var(--orange); }
  .timer-display.urgent  { color: var(--red); animation: pulse 0.6s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
  .timer-sub-label { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
  .timer-sub-label span { color: var(--white); font-weight: 600; }
  .timer-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .timer-btn { padding: 10px 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 6px; cursor: pointer; border: none; transition: all 0.2s; }
  .timer-btn.start  { background: var(--orange); color: var(--white); }
  .timer-btn.start:hover  { background: var(--orange-light); }
  .timer-btn.pause  { background: var(--mid); color: var(--text); border: 1px solid var(--border); }
  .timer-btn.pause:hover  { border-color: var(--orange); color: var(--orange); }
  .timer-btn.halftime { background: var(--mid); color: var(--text); border: 1px solid var(--border); }
  .timer-btn.halftime:hover { border-color: #2196F3; color: #2196F3; }
  .timer-btn.reset-game { background: transparent; color: var(--muted); border: 1px solid var(--border); font-size: 12px; padding: 8px 14px; }
  .timer-btn.reset-game:hover { border-color: var(--red); color: var(--red); }

  /* Sub alert */
  .sub-alert { margin-top: 16px; background: rgba(255,92,26,0.12); border: 1px solid var(--orange); border-radius: 8px; padding: 16px; display: none; }
  .sub-alert.visible { display: block; }
  .sub-alert-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 18px; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
  .sub-alert-subtitle { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

  /* Individual swap card */
  .swap-card { background: var(--mid); border: 1px solid var(--border); border-radius: 7px; padding: 12px 14px; margin-bottom: 8px; transition: all 0.15s; }
  .swap-card.confirmed  { border-color: var(--green); background: rgba(76,175,80,0.1); }
  .swap-card.skipped    { border-color: var(--border); opacity: 0.45; }
  .swap-card-players { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .swap-off { color: var(--red-light); font-weight: 700; font-size: 14px; }
  .swap-on  { color: var(--green-light); font-weight: 700; font-size: 14px; }
  .swap-arrow { color: var(--muted); font-size: 13px; }
  .swap-mins { font-size: 11px; color: var(--muted); margin-left: auto; }
  .swap-btns { display: flex; gap: 7px; }
  .swap-btn { flex: 1; padding: 7px 0; border-radius: 5px; border: 1px solid var(--border); background: transparent; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }
  .swap-btn.confirm { color: var(--green); border-color: var(--green); }
  .swap-btn.confirm:hover, .swap-btn.confirm.active { background: var(--green); color: var(--white); border-color: var(--green); }
  .swap-btn.skip { color: var(--muted); }
  .swap-btn.skip:hover, .swap-btn.skip.active { background: var(--border); color: var(--white); }

  .sub-done-btn { width: 100%; margin-top: 12px; background: var(--mid); color: var(--muted); border: 1px solid var(--border); padding: 13px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; cursor: not-allowed; border-radius: 6px; transition: all 0.2s; }
  .sub-done-btn.ready { background: var(--orange); color: var(--white); border-color: var(--orange); cursor: pointer; }
  .sub-done-btn.ready:hover { background: var(--orange-light); }

  /* Player roster */
  .roster-card { background: var(--dark); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
  .roster-title { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
  .player-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 6px; margin-bottom: 6px; background: var(--mid); border: 1px solid transparent; transition: border-color 0.2s; }
  .player-row.on-court { border-color: var(--green); background: rgba(76,175,80,0.08); }
  .player-row.bench    { border-color: transparent; opacity: 0.7; }
  .player-row.next-off { border-color: var(--orange) !important; background: rgba(255,92,26,0.1) !important; opacity: 1 !important; }
  .player-row.next-on  { border-color: var(--green-light) !important; background: rgba(105,219,124,0.08) !important; opacity: 1 !important; }
  .player-name-label { font-weight: 600; font-size: 14px; }
  .player-status { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }
  .status-court { color: var(--green); }
  .status-bench { color: var(--muted); }
  .status-off   { color: var(--orange); }
  .status-on    { color: var(--green-light); }
  .player-mins  { font-size: 12px; color: var(--muted); min-width: 60px; text-align: right; }

  /* History log */
  .sub-log { margin-top: 20px; }
  .sub-log-title { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .log-entry { font-size: 13px; color: var(--muted); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .log-entry:last-child { border-bottom: none; }
  .log-entry span { color: var(--text); }

  footer { border-top: 1px solid var(--border); padding: 32px 24px; text-align: center; color: var(--muted); font-size: 13px; background: var(--black); }

  .nav-gameday-btn { background: var(--orange); color: var(--white); text-decoration: none; padding: 7px 16px; border-radius: 5px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; transition: background 0.2s; }
  .nav-gameday-btn:hover { background: var(--orange-light); }
  .nav-links a.active-page { color: var(--white); border-bottom: 2px solid var(--orange); padding-bottom: 2px; }

  nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(13,13,13,0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    /* Push the inner row clear of the Dynamic Island / notch on
       newer iPhones in PWA standalone mode. max() guarantees a 12px
       minimum so the layout doesn't collapse on devices where
       env() returns 0 (Safari tab mode, Android, desktop). Switched
       height → min-height because the global border-box reset would
       otherwise let the new padding crush the logo into a 19px slot
       on a 16 Pro Max. */
    padding-top: max(env(safe-area-inset-top, 0px), 12px);
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  nav.game-mode {
    /* Keep nav visible — only hide links, keep logo */
  }
  nav.game-mode .nav-links { display: none !important; }
  /* Sticky bar stays below nav — no fullscreen shift needed */
  .sticky-game-bar {
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sticky-game-bar.fullscreen {
    top: 0 !important;
  }
  .logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 22px;
    color: var(--white); white-space: nowrap;
    text-decoration: none;
  }
  .logo span { color: var(--orange); }

  /* Desktop nav links */
  .nav-links {
    display: flex; gap: 4px; list-style: none;
    flex: 1; justify-content: center;
  }
  .nav-links a {
    color: var(--muted); text-decoration: none;
    font-size: 13px; font-weight: 600;
    padding: 6px 12px; border-radius: 6px;
    transition: all 0.15s; white-space: nowrap;
  }
  .nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.06); }
  .nav-links a.active-page {
    color: var(--white);
    background: rgba(255,92,26,0.15);
    border: 1px solid rgba(255,92,26,0.3);
  }

  /* Mobile bottom tab bar — shown on small screens. Flex with
     flex:1 per item so a role-hidden tab leaves visible items
     evenly distributed (grid would leave an empty column). */
  .tab-bar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(22,22,22,0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    /* Match #gameActionBar's 56px content area + safe-area inset so
       both bars have the same visible height across Safari and PWA.
       content-box keeps the 56px as the content area (padding adds
       on top), mirroring #gameActionBar's intentional layering. */
    box-sizing: content-box;
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* PWA standalone: same +12px home-indicator dead-zone buffer that
     #gameActionBar applies, so the two bars line up visually when
     the coach switches between pre-game and in-game. */
  @media (display-mode: standalone) {
    .tab-bar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
  }
  .tab-bar-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; text-decoration: none;
    color: var(--muted);
    /* Typography normalised to match .gab-label exactly so the
       label rhythm is identical across both bars. */
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.15s;
    /* padding-top nudges icon+label down within the 56px content
       area so they feel centred when the eye accounts for the
       safe-area dead-zone below. Mirrors #gameActionBar button. */
    padding: 8px 0 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* Emoji-first font stack — Barlow Condensed cascades from the
     parent for the label text node, but the icon span needs an
     emoji-capable family so 🏀 📋 ⏱ 👪 render in full colour. */
  .tab-bar-item .tab-icon {
    font-size: 20px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', system-ui, sans-serif;
  }
  .tab-bar-item.active { color: var(--orange); }
  .tab-bar-item:hover  { color: var(--white); }
  /* Dual-role v1: hide the tab that doesn't belong to the active
     role. role.js sets <html data-user-role="coach" | "parent">
     before paint, so no FOUC. */
  html[data-user-role="coach"]  .tab-bar-item[data-role="parent"] { display: none; }
  html[data-user-role="parent"] .tab-bar-item[data-role="coach"]  { display: none; }

  /* Push page content up from tab bar on mobile */
  @media (max-width: 700px) {
    .nav-links { display: none; }
    /* Flex (not grid) — the base .tab-bar rule no longer defines
       grid-template-columns, so display:grid would render all items
       in one column. Flex with flex:1 per item distributes evenly
       and lets a role-hidden item collapse cleanly. */
    .tab-bar   { display: flex; }
    /* Reserve exactly the bar's visible height — 56px content +
       safe-area inset. PWA standalone adds the same +12px buffer
       the bar itself uses. */
    body       { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    /* Adjust sticky game bar top on mobile (nav = 56px) */
    .sticky-game-bar { top: 56px; }
  }
  @media (max-width: 700px) and (display-mode: standalone) {
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px); }
  }
  @media (min-width: 701px) {
    .tab-bar { display: none; }
  }


  /* ════════════════════════════════════════════════════════
     RESPONSIVE — mobile-first overrides
     Primary target: iPhone SE / small Android (375px wide)
     Secondary: iPhone standard (390px), large phone (430px)
  ════════════════════════════════════════════════════════ */

  /* ── Small phones: ≤ 400px ─────────────────────────────── */
  @media (max-width: 400px) {

    /* Nav */
    .nav-links { display: none; }
    .logo { font-size: 20px; }

    /* Sticky bar — tighter on tiny screens */
    .sgb-score { font-size: 34px; }
    .sgb-score-btn { padding: 3px 6px; font-size: 12px; }
    .sgb-timer { font-size: 24px; min-width: 58px; }
    .sgb-sub-countdown { font-size: 15px; }
    .sgb-ctrl-btn { padding: 5px 7px; font-size: 11px; }
    .sgb-timer-row { gap: 5px; padding: 5px 8px 7px; }
    .sgb-score-row { padding: 4px 10px 2px; gap: 6px; }

    /* Action row — 2x2 grid on tiny screens */
    .sgb-action-row { grid-template-columns: 1fr 1fr !important; }
    .sgb-action-btn { font-size: 12px; padding: 6px 4px; }

    /* Player rows — prevent overflow */
    .player-name-label { font-size: 13px; }
    .player-status { font-size: 10px; }
    .player-score-total { font-size: 16px; min-width: 22px; }
    .foul-dot { width: 7px; height: 7px; }
    .foul-btn { font-size: 10px; padding: 2px 5px; }
    .player-mins { font-size: 11px; min-width: 44px; }

    /* Score buttons larger tap targets */
    .player-score-btn { padding: 8px 0; font-size: 14px; }

    /* Swap cards in bottom sheet */
    .swap-card { padding: 10px 12px; }
    .swap-off, .swap-on { font-size: 13px; }

    /* Setup form */
    .subs-setup .form-row { grid-template-columns: 1fr 1fr; }
    .player-name-grid { grid-template-columns: 1fr 1fr !important; }
  }

  /* ── Standard phones: 401px–480px ──────────────────────── */
  @media (min-width: 401px) and (max-width: 480px) {

    .nav-links { display: none; }

    .sgb-score { font-size: 38px; }
    .sgb-timer { font-size: 26px; }
    .sgb-ctrl-btn { padding: 6px 9px; font-size: 12px; }

    /* Action row stays 4-across — buttons are wide enough */
    .sgb-action-row { grid-template-columns: 1fr 1fr 1fr 1fr !important; }
    .sgb-action-btn { font-size: 11px; padding: 7px 4px; }

    /* Score buttons */
    .player-score-btn { padding: 7px 0; font-size: 13px; }
  }

  /* ── Tablets and up: 768px+ ─────────────────────────────── */
  @media (min-width: 768px) {
    /* Sticky bar can show more */
    .sgb-score { font-size: 48px; }
    .sgb-timer { font-size: 32px; }
    .sgb-score-btn { padding: 4px 12px; font-size: 14px; }

    /* Game layout back to two columns on tablet */
    body.game-active .game-layout { display: grid !important; grid-template-columns: 1fr 1fr !important; }
    body.game-active .game-layout > div:first-child { display: block !important; }

    /* Larger tap targets on desktop/tablet */
    .player-score-btn { padding: 8px 0; font-size: 15px; }
    .foul-btn { padding: 4px 10px; font-size: 13px; }
  }

  /* ── Touch device tap targets ──────────────────────────── */
  @media (hover: none) and (pointer: coarse) {
    /* All buttons get minimum 44px touch target (Apple HIG recommendation) */
    .sgb-ctrl-btn   { min-height: 36px; }
    .sgb-action-btn { min-height: 36px; }
    .sgb-score-btn  { min-height: 32px; padding: 4px 10px; }
    .player-score-btn { min-height: 36px; }
    .foul-btn       { min-height: 28px; min-width: 28px; }
    .swap-btn       { min-height: 36px; }
    .timer-btn      { min-height: 40px; }
    .sub-done-btn   { min-height: 44px; }
    .score-btn      { min-height: 32px; }
  }

  /* ── Landscape phone ────────────────────────────────────── */
  @media (max-height: 450px) and (orientation: landscape) {
    /* Compact sticky bar in landscape — less vertical space */
    .sgb-score-row { padding: 4px 16px 2px; }
    .sgb-score { font-size: 30px; }
    .sgb-score-btns { display: none; } /* hide score btns — use roster instead */
    .sgb-timer-row { padding: 3px 12px 4px; }
    .sgb-timer { font-size: 22px; }
    .sub-sheet { max-height: 90vh; }
  }

  /* ── iPad / tablet (768px–1024px) ───────────────────────── */
  @media (min-width: 768px) and (max-width: 1024px) {
    /* Centre the setup card and cap its width */
    #subs .subs-wrap { padding: 40px 48px; }
    .subs-setup { max-width: 600px; margin: 0 auto; }

    /* Sub sheet and summary sheet shouldn't stretch full iPad width */
    .sub-sheet    { max-width: 600px; left: 50%; right: auto;
                    transform: translateX(-50%) translateY(100%); border-radius: 16px 16px 0 0; }
    .sub-sheet.visible { transform: translateX(-50%) translateY(0); }
    .summary-sheet { max-width: 600px; left: 50%; right: auto;
                     transform: translateX(-50%) translateY(100%); border-radius: 16px 16px 0 0; }
    .summary-sheet.visible { transform: translateX(-50%) translateY(0); }

    /* Availability grid — more columns on tablet */
    .availability-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

    /* Halftime sheet */
    .halftimeSheet { max-width: 600px; left: 50%; right: auto;
                     transform: translateX(-50%) translateY(100%); }
  }

  /* ── Large tablets / small desktop (1024px+) ────────────── */
  @media (min-width: 1024px) {
    #subs .subs-wrap { padding: 48px 64px; max-width: 800px; margin: 0 auto; }
    .subs-setup { max-width: 680px; margin: 0 auto; }
    .sub-sheet    { max-width: 560px; left: 50%; right: auto;
                    transform: translateX(-50%) translateY(100%); }
    .sub-sheet.visible { transform: translateX(-50%) translateY(0); }
    .summary-sheet { max-width: 560px; left: 50%; right: auto;
                     transform: translateX(-50%) translateY(100%); }
    .summary-sheet.visible { transform: translateX(-50%) translateY(0); }
    /* Game layout — 3 columns on large screens */
    body.game-active .game-layout { grid-template-columns: 1fr 1fr !important; }
  }

  /* ── Very small phones: ≤ 360px (Galaxy A series etc) ───── */
  @media (max-width: 360px) {
    .sgb-score { font-size: 30px; }
    .sgb-timer { font-size: 20px; min-width: 52px; }
    .sgb-action-row { grid-template-columns: 1fr 1fr !important; }
    .sgb-action-btn { font-size: 11px; padding: 6px 3px; }
    .player-name-label { font-size: 12px; max-width: 90px; }
    .player-score-btn { font-size: 12px; }
    /* No .tab-bar-item / .tab-icon overrides here — keeping the
       global 8px/20px so the tab bar stays size-locked to
       #gameActionBar (which has no small-phone override either)
       and the two bars don't drift apart on tiny phones. */
    /* Tighter padding on setup card */
    .subs-setup { padding: 16px; }
    #subs .subs-wrap { padding: 16px 12px; }
  }

/* ── Minutes balance bar (roster rows) ─────────────────────────
   Sits below .player-row-top inside the roster list. The bar's
   width is the player's mins as a fraction of the squad's max,
   and the colour reflects how their court time compares to the
   team average (within ±20% = balanced, above = overplayed,
   below = underplayed). Bench players are always grey. */
.player-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.balance-bar-wrap { flex: 1; min-width: 0; }
.balance-bar-track {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.balance-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  transition: width 0.4s ease, background 0.3s;
}
.balance-bar-fill.balanced    { background: var(--green); }
.balance-bar-fill.overplayed  { background: #FF9900; }
.balance-bar-fill.underplayed { background: var(--red-light); }
.balance-bar-fill.bench       { background: rgba(255,255,255,0.18); }
.balance-bar-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.3px;
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Due-for-sub chip indicator (player tray) ──────────────────
   Subtle amber dot in the top-right corner of an on-court chip
   when the player's minutes exceed the bench average plus one
   sub interval. Decorative only — taps still go to the chip. */
.ptray-chip { position: relative; }
.chip-due-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF9900;
  box-shadow: 0 0 6px rgba(255,153,0,0.6);
  animation: chipDuePulse 1.6s infinite ease-in-out;
  pointer-events: none;
}
@keyframes chipDuePulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

/* (Inline #subStrip court-time card removed — replaced by the
   slide-up #courtTimePanel triggered from the action bar's
   COURT TIME button. See css/court-time.css.) */

/* Sub-count badge — small amber circle in the top-left of each chip
   showing how many times that player has been substituted in the
   current game. Hidden when the count is 0 (no badge rendered). */
.chip-sub-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 153, 0, 0.15);
  border: 1px solid rgba(255, 153, 0, 0.3);
  color: var(--amber);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

/* ── Slim game-mode nav on mobile ──────────────────────────────
   During an active game, shrink the top nav from 60px to 32px on
   phones so the sticky game bar sits 28px higher and we recover
   meaningful screen space. The CoachKit brand stays visible on the
   left. The ⚙️ settings button is on the sticky game bar (not in
   the nav) so no changes are needed for it here. */
@media (max-width: 767px) {
  body.game-active nav {
    height: 32px;
    min-height: 32px;
  }
  body.game-active .nav-links { display: none; }
  /* Logo class is .logo in gameday.html, .nav-logo in family/parent. */
  body.game-active nav .logo,
  body.game-active nav .nav-logo { font-size: 15px; }
  body.game-active #stickyGameBar,
  body.game-active .sticky-game-bar {
    top: 32px;
    position: sticky;
    /* Zero out the bar's own safe-area-top padding while the nav
       is visible. The nav at L2682 already pushes its content
       past the Dynamic Island via padding-top: max(env(), 12px),
       so the bar repeating the env() padding stacks a second
       safe-area zone below the nav — visible as a strip of dark
       var(--dark) background between the nav and the score row
       on iPhone X+ in PWA standalone (~12-16px dead space).
       The bar's own padding-top is only meaningful when the bar
       takes over from a hidden nav (.fullscreen class), which is
       currently dead code — no classList.add('fullscreen') call
       exists. Safe to zero unconditionally in game-active mode. */
    padding-top: 0;
  }
}

/* ── Hide page chrome during play ──────────────────────────────
   Footer + tab bar + any bottom navigation get out of the way so
   the bottom of the viewport belongs entirely to #gameActionBar. */
body.game-active .tab-bar,
body.game-active footer,
body.game-active .app-footer,
body.game-active [class*="footer"],
body.game-active nav.bottom-nav {
  display: none !important;
}

/* ── #gameActionBar — fixed bottom strip during play ───────────
   Visibility is driven by JS (style.display flipped between
   'none' and 'flex' from startSubManager / _doReset). The CSS
   here just describes shape, position, and per-button typography.
   z-index 9999 keeps the bar above everything except the post-
   game summary sheet (which has its own higher stacking). */
#gameActionBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* OVERRIDE the universal `* { box-sizing: border-box }` rule
     at gameday.css:19. With border-box, the 56px height would
     INCLUDE padding-bottom — squashing the content area to 10px
     in PWA standalone (after the v103 dead-zone padding) and
     22px even in Safari tab. Buttons would shrink to that
     content area, but their icon + label content would overflow
     visibly DOWNWARD into the padding area, making icons appear
     in the middle of the visible bar instead of the top.
     content-box restores the original meaning: height = content
     area, padding adds to total visible height. Buttons fit in
     the full 56px properly. */
  box-sizing: content-box;
  height: 56px;
  background: #1A1A1A;
  border-top: 1px solid #2A2A2A;
  display: flex;
  z-index: 9999;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* PWA standalone: iOS reserves the bottom edge for the home-
   swipe gesture. Without the Safari URL bar buffering above the
   home indicator, the action bar buttons sit too close to that
   gesture zone — taps near the bottom of the icons get
   intercepted as swipe-up starts and the click never fires.
   Add 12px of dead-zone above the safe-area inset so button
   content stays clearly above the gesture line. Safari tab mode
   unaffected (display-mode: browser). */
@media (display-mode: standalone) {
  #gameActionBar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}
#gameActionBar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Inherit color is set by JS / inline so each button can drive
     its own state colour without class plumbing. */
  color: inherit;
  font-family: inherit;
  /* Pull the icon+label slightly toward the top of the 56px
     content area so the eye reads them as visually centred once
     the safe-area dead-zone below is accounted for. Matches the
     same nudge applied to .tab-bar-item. */
  padding: 8px 0 0;
}
#gameActionBar .gab-icon  {
  /* Force a system font so iOS doesn't drop into colour-emoji rendering
     for unicode glyphs like ⏸ ▶ ⚙ ↑. The END button overrides this
     inline to use Apple Color Emoji for 🏁. Per-icon font-size is set
     inline on each span so the glyphs have the right optical weight. */
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
  display: block;
  font-style: normal;
}
/* Share button: ↑ inside a circle. Border picks up the button's
   colour via currentColor so the colour rule on the parent button
   drives the whole element. */
#gameActionBar .gab-icon-circle {
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
#gameActionBar .gab-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Barlow Condensed', sans-serif;
  line-height: 1;
}
#gameActionBar button:active { background: rgba(255,255,255,0.04); }

/* Reserve room above the fixed bar so the roster + sub log aren't
   hidden behind it. Tracks the bar's actual visible height — 56px
   content + safe-area inset — instead of the previous flat 72px
   which under-reserved on iPhone X+ in PWA standalone (where the
   bar grows to ~103px) and over-reserved on desktop (57px). */
body.game-active #subsGame {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
@media (display-mode: standalone) {
  body.game-active #subsGame {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* Defensive: if a Start/Pause button is ever re-introduced between the
   score row and the chips, hide it during play — pause/resume lives in
   the bottom action bar exclusively now. */
body.game-active #sgbPlayBtn,
body.game-active .sgb-play-row {
  display: none !important;
}

/* ── Centred-modal sheets ──────────────────────────────────────
   #quickSwapSheet (manual swap), #subSheet (substitution flow),
   and #halftimeSheet (half-time break + Start 2nd Half) all read
   better as centred modals than as bottom sheets — the action
   button sits in the middle of the coach's vision and stays
   visible no matter how tall the content gets. Without this,
   bottom-anchored sheets in PWA standalone mode (no Safari URL
   bar) place their primary action (Continue / Confirm) right
   in the home-indicator gesture zone or too low for the coach
   to comfortably reach.
   ID specificity beats the .sub-sheet rule so we don't have to
   undo each property. The visibility transition (visibility
   hidden / visible) is still inherited from .sub-sheet. */
#quickSwapSheet,
#subSheet,
#halftimeSheet {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: calc(100% - 32px);
  max-width: 400px;
  /* Account for the 56px bottom action bar + safe-area buffer so the
     modal never extends behind it — the sticky confirm bar is then
     guaranteed to land in the visible area. */
  max-height: calc(85vh - 72px);
  overflow-y: auto;
  border: 1px solid #333;
  border-top: 1px solid #333; /* override .sub-sheet's orange top */
  border-radius: 16px;
  background: #1E1E1E;
  box-shadow: 0 20px 60px rgba(0,0,0,0.85);
  z-index: 500;
  padding: 18px 18px 0; /* bottom is 0; .modal-confirm-bar fills it */
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#quickSwapSheet.visible,
#subSheet.visible,
#halftimeSheet.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
/* The drag handle is for a bottom sheet — hide it on the centred
   modal so the title sits at the top of the card. */
#quickSwapSheet .sub-sheet-handle,
#subSheet .sub-sheet-handle,
#halftimeSheet .sub-sheet-handle { display: none; }
/* Halftime needs explicit bottom padding because it doesn't have
   the .modal-confirm-bar that the other two use to fill the
   bottom edge — its Continue button sits at the natural end of
   content and needs breathing room above the modal edge. */
#halftimeSheet { padding: 18px 18px 18px; }

/* Confirm bar — sticky at the bottom of the modal so the primary
   action stays in view when the player picker scrolls. The negative
   horizontal margin pushes it edge-to-edge against the modal border.
   The buttons inside keep their own inline flex/grid styling. */
.modal-confirm-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1E1E1E;
  padding: 12px 16px 16px;
  border-top: 1px solid #2A2A2A;
  margin: 0 -18px;
  display: flex;
  gap: 8px;
}

/* ── Quick swap two-column pill picker ────────────────────────
   Two side-by-side stacks: Coming Off (red, left) and Coming On
   (green, right). Each pill has a circular arrow badge, the
   player's name, and their minutes-on. Selected pills lift via
   a stronger gradient and a soft drop shadow. Columns don't
   stretch — uneven counts leave the shorter column shorter. */
.swap-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
}
.swap-col { align-self: start; }
.swap-col-header {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.swap-col-header.off { color: rgba(255,68,68,0.7); }
.swap-col-header.on  { color: rgba(61,191,108,0.7); }
.swap-col-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.swap-hint {
  font-size: 11px;
  color: var(--green-light);
  font-weight: 700;
  margin: 2px 16px 0;
}
.swap-empty-row {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0;
}

.swap-pill-2 {
  width: 100%;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0;
  transition: all 0.15s;
  font-family: inherit;
  text-align: left;
  touch-action: manipulation;
}
/* Coming-off pills (red) */
.swap-pill-2.off {
  border: 1px solid rgba(255,68,68,0.2);
  background: linear-gradient(135deg, rgba(255,68,68,0.12) 0%, rgba(255,68,68,0.05) 100%);
}
.swap-pill-2.off.selected {
  border-color: rgba(255,68,68,0.6);
  background: linear-gradient(135deg, rgba(255,68,68,0.22) 0%, rgba(255,68,68,0.1) 100%);
  box-shadow: 0 2px 12px rgba(255,68,68,0.2);
}
.swap-pill-2.off.locked { cursor: default; opacity: 0.9; }
.swap-pill-2.off .pill-badge {
  background: rgba(255,68,68,0.15);
  color: var(--red-light);
}
/* Coming-on pills (green) */
.swap-pill-2.on {
  border: 1px solid rgba(61,191,108,0.2);
  background: linear-gradient(135deg, rgba(61,191,108,0.12) 0%, rgba(61,191,108,0.05) 100%);
}
.swap-pill-2.on.selected {
  border-color: rgba(61,191,108,0.6);
  background: linear-gradient(135deg, rgba(61,191,108,0.22) 0%, rgba(61,191,108,0.1) 100%);
  box-shadow: 0 2px 12px rgba(61,191,108,0.2);
}
.swap-pill-2.on .pill-badge {
  background: rgba(61,191,108,0.15);
  color: #3DBF6C;
}
/* Inner pill bits */
.swap-pill-2 .pill-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  font-style: normal;
}
.swap-pill-2 .pill-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--white);
  flex: 1;
  padding-left: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swap-pill-2 .pill-time {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}

/* ── Strip swap rows (Last/Next sub strips) — single-line layout
   Earlier rules wrap the off-name, off-time, arrow, on-name, on-time
   onto two lines on narrow phones. New layout drops the ▼/▲ arrows
   (the red/green colour already conveys direction), drops the on
   player's time (only the off player's fairness number matters),
/* Old .strip-swap-row tail-cascade rules removed in Commit 3 — the
   .ns-pair design in css/next-sub.css owns the layout now. */

/* Hide the bottom action bar when any of these modals is open so it
   doesn't obscure the sticky confirm bar. Same escape-hatch pattern
   used for #summarySheet. */
body.game-active:has(#summarySheet.visible)   #gameActionBar,
body.game-active:has(#quickSwapSheet.visible) #gameActionBar,
body.game-active:has(#subSheet.visible)       #gameActionBar { display: none !important; }
body.game-active:has(#summarySheet.visible)   #subsGame,
body.game-active:has(#quickSwapSheet.visible) #subsGame,
body.game-active:has(#subSheet.visible)       #subsGame { padding-bottom: 0; }

/* Player roster section header — uppercase tracked label above the
   roster cards. Only visible during play; hidden in setup so the
   non-game flow stays as it was. */
.roster-section-header {
  display: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px 6px;
}
body.game-active .roster-section-header { display: block; }

/* ── Roster moved into slide-in panel during play ──────────────
   The always-visible roster below the sticky bar is now hidden
   while a game is active; players are shown in #rosterPanel
   instead, opened via the ROSTER button in the bottom action
   bar. The Squad tab outside game-active is unaffected. */
body.game-active #rosterList,
body.game-active #rosterSectionHeader { display: none !important; }

/* #rosterPanel — slide-in player roster shown during play.
   Sits above the 56px #gameActionBar and below the dark
   overlay. Hidden entirely outside game-active. */
#rosterPanel {
  position: fixed;
  bottom: 56px;
  left: 0;
  right: 0;
  height: 65vh;
  background: #151515;
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  z-index: 400;
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#rosterPanel.open { transform: translateY(0); }
#rosterPanel .roster-panel-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--muted);
  margin: 10px auto 8px;
}
#rosterPanel .roster-panel-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 16px 10px;
  font-family: 'Barlow Condensed', sans-serif;
}
#rosterPanel .roster-panel-section {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 16px 6px;
  font-family: 'Barlow Condensed', sans-serif;
  border-top: 1px solid var(--border);
}
#rosterPanel .roster-panel-section:first-of-type { border-top: none; }
#rosterPanel .roster-panel-section.on-court {
  color: var(--green);
  background: rgba(76,175,80,0.06);
}
#rosterPanel .roster-panel-section.bench {
  color: var(--red-light);
  background: rgba(255,107,107,0.05);
}
#rosterPanel #rosterPanelList {
  padding: 0 0 12px;
}

#rosterOverlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 399;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#rosterOverlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Hide panel + overlay entirely outside an active game so the
   Squad tab and other surfaces aren't affected. */
body:not(.game-active) #rosterPanel,
body:not(.game-active) #rosterOverlay,
body:not(.game-active) #ingameSettingsPanel { display: none !important; }

/* ── #ingameSettingsPanel — slide-up sheet, mirrors #rosterPanel ── */
#ingameSettingsPanel {
  position: fixed;
  bottom: 56px;
  left: 0;
  right: 0;
  max-height: 65vh;
  background: #151515;
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  z-index: 400;
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
}
#ingameSettingsPanel.open { transform: translateY(0); }

#ingameSettingsPanel .igsp-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--muted);
  margin: 10px auto 8px;
  flex-shrink: 0;
}
#ingameSettingsPanel .igsp-title {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 16px 12px;
  font-family: 'Barlow Condensed', sans-serif;
  flex-shrink: 0;
}
#ingameSettingsPanel .igsp-body {
  padding: 0 16px 12px;
  overflow-y: auto;
  flex: 1;
}
#ingameSettingsPanel .igsp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 12px;
}
#ingameSettingsPanel .igsp-row:last-child { border-bottom: none; }
/* On narrow phones the "Sub Every" / "Period Length" steppers
   exceed the row's available width (~343px at 375) by ~37px and
   wrap awkwardly with the label vertically centred against a
   two-line block. Stack the row instead so label sits above the
   control and the stepper buttons keep their 34px tap targets. */
@media (max-width: 400px) {
  #ingameSettingsPanel .igsp-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
#ingameSettingsPanel .igsp-row-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  flex-shrink: 0;
}

/* Toggle (reuses the look of the saved-settings sliders) */
#ingameSettingsPanel .igsp-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
#ingameSettingsPanel .igsp-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
#ingameSettingsPanel .igsp-toggle-track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #555;
  border-radius: 24px;
  transition: 0.2s;
}
#ingameSettingsPanel .igsp-toggle input:checked ~ .igsp-toggle-track { background: var(--green); }
#ingameSettingsPanel .igsp-toggle-thumb {
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
#ingameSettingsPanel .igsp-toggle input:checked ~ .igsp-toggle-track .igsp-toggle-thumb { left: 21px; }

/* End-game divider + button — sits at the bottom of the body just
   above the sticky Done. The button opens #endGameConfirm; nothing
   here touches the clock. */
#ingameSettingsPanel .igsp-end-divider {
  font-size: 9px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  text-align: center;
  margin: 12px 0 8px;
}
#ingameSettingsPanel .igsp-end-btn {
  width: 100%;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.2);
  color: #EF4444;
  border-radius: 10px;
  padding: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 16px;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(239,68,68,0.15);
}
#ingameSettingsPanel .igsp-end-btn:active { background: rgba(239,68,68,0.12); }

/* End-game confirmation sheet — bottom-anchored, slides above
   #ingameSettingsPanel (z-index 401 vs 400). Shares the dark
   overlay; overlay click closes confirm first, then settings,
   then roster (defined in inline onclick). */
#endGameConfirm {
  position: fixed;
  bottom: 56px;
  left: 0;
  right: 0;
  background: #151515;
  border-top: 1px solid rgba(239,68,68,0.25);
  border-radius: 16px 16px 0 0;
  z-index: 401;
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
}
#endGameConfirm.open { transform: translateY(0); }
body:not(.game-active) #endGameConfirm { display: none !important; }
#endGameConfirm .egc-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--muted);
  margin: 10px auto 8px;
  flex-shrink: 0;
}
#endGameConfirm .egc-body {
  padding: 4px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#endGameConfirm .egc-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 22px;
  color: var(--white); letter-spacing: -0.2px;
  margin: 4px 0 0;
}
#endGameConfirm .egc-summary {
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
#endGameConfirm .egc-score {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 18px;
  color: var(--white); letter-spacing: -0.2px;
  margin-bottom: 4px;
}
#endGameConfirm .egc-time {
  font-size: 14px; color: var(--muted);
}
#endGameConfirm .egc-yes,
#endGameConfirm .egc-no {
  width: 100%;
  border-radius: 10px;
  padding: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#endGameConfirm .egc-yes {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #EF4444;
  font-weight: 900; font-size: 16px;
}
#endGameConfirm .egc-yes:active { background: rgba(239,68,68,0.18); }
#endGameConfirm .egc-no {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 800; font-size: 14px;
}
#endGameConfirm .egc-no:active { background: rgba(255,255,255,0.04); }

/* Sticky Done button — full width along the bottom of the sheet. */
#ingameSettingsPanel .igsp-done {
  position: sticky;
  bottom: 0;
  width: 100%;
  background: var(--dark2);
  border: none;
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
#ingameSettingsPanel .igsp-done:active { background: var(--mid); }


/* ════════════════════════════════════════════════════════════
   ONBOARDING — first-run player + settings setup

   Shown by maybeShowOnboarding() in gameday.html when
   loadSavedTeam() is empty. Two screens (players, then
   settings); user advances via Continue / Start Coaching.
   Hidden permanently once #onboarding loses .visible.
   ════════════════════════════════════════════════════════════ */
#onboarding {
  display: none;
  position: fixed; inset: 0;
  z-index: 10000;
  background: var(--dark);
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#onboarding.visible { display: flex; }

#onboarding .ob-header {
  padding: 14px 20px 6px;
}
#onboarding .ob-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 22px;
  color: var(--white); letter-spacing: 0.5px;
}
#onboarding .ob-logo .ob-logo-accent { color: var(--orange); }

#onboarding .ob-screens { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#onboarding .ob-screen {
  display: none;
  flex: 1;
  flex-direction: column;
  padding: 8px 20px 20px;
  min-height: 0;
}
#onboarding .ob-screen.active { display: flex; }

#onboarding .ob-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 26px;
  color: var(--white); letter-spacing: -0.3px;
  margin-bottom: 4px;
}
#onboarding .ob-subtitle {
  font-size: 13px; color: var(--muted);
  margin-bottom: 16px;
}

/* Player-entry input row */
#onboarding .ob-input-row {
  display: flex; gap: 8px; margin-bottom: 6px;
}
#onboarding .ob-name-input {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 18px;
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, transform 0.15s;
}
#onboarding .ob-name-input:focus { border-color: var(--orange); }
#onboarding .ob-name-input::placeholder { color: var(--muted); }
#onboarding .ob-add-btn {
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
#onboarding .ob-add-btn:active { background: var(--orange-light); transform: scale(0.97); }

/* Shake animation for empty-name validation */
@keyframes obShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
#onboarding .ob-name-input.ob-shake { animation: obShake 0.32s ease; border-color: var(--red); }

/* Inline error hint (e.g. "Already added") */
#onboarding .ob-error {
  font-size: 12px;
  color: var(--red);
  min-height: 16px;
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}
#onboarding .ob-error.visible { opacity: 1; }

/* Player chips */
#onboarding .ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
#onboarding .ob-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--dark2);
  border: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
#onboarding .ob-chip-x {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
#onboarding .ob-chip-x:active { color: var(--red); }

#onboarding .ob-spacer { flex: 1; min-height: 12px; }

/* Bottom-anchored continue / start button */
#onboarding .ob-continue-btn {
  width: 100%;
  background: var(--mid);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
  cursor: not-allowed;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#onboarding .ob-continue-btn.ob-active {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  cursor: pointer;
}
#onboarding .ob-continue-btn.ob-active:active { background: var(--orange-light); }

/* Settings step */
#onboarding .ob-setting { margin-bottom: 22px; }
#onboarding .ob-label {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}

/* Settings card — groups all four settings into one bordered surface
   so the screen reads as a single configuration rather than four
   independent stacked controls. */
#onboarding .ob-card {
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 16px;
}
#onboarding .ob-card-row {
  /* Stack: label always above, control always below — gives all five
     settings the same vertical rhythm regardless of how wide the
     control is. Inline label-vs-control was inconsistent because the
     wide steppers wrapped while narrow controls didn't. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#onboarding .ob-card-row:last-child { border-bottom: none; }
#onboarding .ob-card-row-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Steppers inside the onboarding card use the global .stepper-btn /
   .stepper-val styles so they're visually identical to the Settings
   tab. The card just provides the surrounding chrome (background,
   border, dividers) — no per-stepper overrides needed. */

/* Pills inside the card — slightly tighter so they line up with the
   stepper buttons. */
#onboarding .ob-card .ob-pill {
  padding: 8px 14px;
  font-size: 13px;
}


/* Tighter padding on iPhone SE so the card + button still fit without
   forcing scroll. */
@media (max-width: 380px) {
  #onboarding .ob-card { padding: 4px 12px; }
  #onboarding .ob-card-row { padding: 10px 0; }
}

#onboarding .ob-pill-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
#onboarding .ob-pill {
  background: var(--dark2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 100px;
  padding: 10px 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  min-width: 56px;
}
#onboarding .ob-pill.active {
  background: rgba(255,92,26,0.15);
  border-color: var(--orange);
  color: var(--orange);
}
#onboarding .ob-pill:active { transform: scale(0.97); }

/* ════════════════════════════════════════════════════════════
   TEAM RULES (Session 8) — Settings-tab rules block + editor
   sheet. Two rule rows in Settings, one editor sheet shared.
   ════════════════════════════════════════════════════════════ */
.settings-section-subtitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--sub);
  margin-bottom: 12px; line-height: 1.4;
}
.rule-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.rule-row:last-of-type { border-bottom: none; }
.rule-row-content { flex: 1; min-width: 0; }
.rule-row-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 800;
  color: var(--text); margin-bottom: 2px;
}
.rule-row-desc {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--sub); line-height: 1.35;
}
.rule-players {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; flex-wrap: wrap;
}
.rule-player-chip {
  background: rgba(255,92,26,0.08);
  border: 1px solid rgba(255,92,26,0.25);
  border-radius: 100px; padding: 3px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 800;
  color: var(--orange);
}
.rule-player-sep {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--sub);
}
.rule-row-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.rule-add-btn {
  padding: 6px 12px; border-radius: 8px;
  background: rgba(255,92,26,0.08);
  border: 1px solid rgba(255,92,26,0.25);
  color: var(--orange);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; -webkit-appearance: none;
}
.rule-add-btn:active { transform: scale(0.97); }
.rule-edit-btn {
  padding: 6px 10px; border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--sub);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 11px;
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; -webkit-appearance: none;
}
.rule-edit-btn:active { transform: scale(0.97); }
.rule-delete-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: var(--red);
  font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; padding: 0;
}
.rule-delete-btn:active { transform: scale(0.92); }

/* ── Rule editor sheet — shared between both rule types. ─────
   Same bottom-sheet pattern as #subAlertEditSheet, just scoped
   to its own id so the existing .sa-edit-sheet rules don't apply. */
#ruleEditorSheet {
  position: fixed; inset: 0; z-index: 950;
  display: none; flex-direction: column;
  justify-content: flex-end;
  opacity: 0; transition: opacity 0.22s ease;
}
#ruleEditorSheet.visible { opacity: 1; }
#ruleEditorSheet .re-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75);
}
#ruleEditorSheet .re-panel {
  position: relative;
  background: #131313;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  max-height: 80dvh;
  display: flex; flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.28s cubic-bezier(.2,.9,.3,1);
}
#ruleEditorSheet.visible .re-panel { transform: none; }
#ruleEditorSheet .re-handle {
  width: 32px; height: 4px;
  margin: 10px auto 4px;
  border-radius: 2px;
  background: var(--border);
  flex-shrink: 0;
}
#ruleEditorSheet .re-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 900;
  color: var(--white, #fff);
  text-align: center;
  padding: 4px 14px 2px;
  flex-shrink: 0;
}
#ruleEditorSheet .re-subtitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sub);
  text-align: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.rule-player-list {
  padding: 0 14px 6px;
  flex: 1; overflow-y: auto;
}
.rule-player-option {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 6px;
  border-radius: 10px;
  background: var(--card, #1A1A1A);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rule-player-option.selected {
  background: rgba(255,92,26,0.08);
  border-color: rgba(255,92,26,0.35);
}
.rule-player-option .player-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 900;
  color: var(--text); flex: 1;
}
.rule-player-option.selected .player-name { color: var(--orange); }
.rule-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 11px; color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.rule-player-option.selected .rule-check {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
#ruleEditorSheet .re-footer {
  padding: 10px 14px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: #131313;
}
.rule-selected-preview {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--sub);
  text-align: center;
  padding: 6px 4px 10px;
  min-height: 20px;
  letter-spacing: 0.3px;
}
.rule-save-btn {
  width: 100%; padding: 14px 0;
  border-radius: 12px;
  background: var(--orange);
  border: none; color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 16px;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; -webkit-appearance: none;
  margin-bottom: 8px;
  transition: opacity 0.15s, background 0.15s;
}
.rule-save-btn:disabled { opacity: 0.35; cursor: default; }
.rule-cancel-btn {
  width: 100%; padding: 11px 0;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--sub);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; -webkit-appearance: none;
}

/* ── In-game SETTINGS button — orange dot when rules are live. ─ */
#gabSettingsRulesDot {
  position: absolute; top: 6px; right: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  display: none;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255,92,26,0.6);
}

/* ════════════════════════════════════════════════════════════
   PRE-GAME SETUP — unified two-column card grid shared by both
   WHO'S HERE TODAY and CHOOSE YOUR STARTING N. One visual
   language, single click-delegated grid container, every card
   tappable. Replaces the old .avail-tile + .sp-row split.
   ════════════════════════════════════════════════════════════ */
.setup-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.setup-section-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.setup-section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #555;
}
.setup-shuffle-btn {
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #1E1E1E;
  color: #555;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.setup-shuffle-btn:active { transform: scale(0.97); }

.setup-player-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.setup-player-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  min-width: 0;
}
.setup-player-card.present {
  background: rgba(61,191,108,0.07);
  border: 1.5px solid rgba(61,191,108,0.25);
}
.setup-player-card.absent {
  background: rgba(239,68,68,0.05);
  border: 1.5px solid rgba(239,68,68,0.2);
}
.setup-player-card.starter {
  background: rgba(255,92,26,0.08);
  border: 1.5px solid rgba(255,92,26,0.35);
}
.setup-player-card.bench-starter {
  /* "bench" in the starter-picker context — distinct from action
     chip .bench so they don't collide. */
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(255,255,255,0.07);
}
.setup-player-card.absent-readonly {
  background: rgba(239,68,68,0.03);
  border: 1.5px solid rgba(239,68,68,0.12);
  opacity: 0.5;
  cursor: default;
}
.setup-player-card.dimmed {
  opacity: 0.45;
  cursor: default;
}

.setup-card-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}
.setup-card-icon.present-dot {
  background: #3DBF6C;
  width: 7px; height: 7px;
}
.setup-card-icon.absent-dot {
  background: #EF4444;
  width: 7px; height: 7px;
}
.setup-card-icon.starter-num {
  background: #FF5C1A;
  border: 1.5px solid #FF5C1A;
  color: #FFF;
}
.setup-card-icon.empty {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
}
.setup-card-icon.absent-x {
  background: rgba(239,68,68,0.1);
  border: 1.5px solid rgba(239,68,68,0.2);
  color: #EF4444;
  font-size: 10px;
}

.setup-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.setup-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setup-player-card.present  .setup-card-name { color: #E8E8E8; }
.setup-player-card.absent   .setup-card-name { color: #555; }
.setup-player-card.starter  .setup-card-name { color: #E8E8E8; }
.setup-player-card.bench-starter .setup-card-name { color: #555; }
.setup-player-card.absent-readonly .setup-card-name { color: #555; }

.setup-card-subtitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #444;
  letter-spacing: 0.3px;
  line-height: 1;
}
.setup-card-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  line-height: 1;
}
.setup-player-card.present  .setup-card-badge { color: #3DBF6C; font-weight: 900; }
.setup-player-card.absent   .setup-card-badge { color: #EF4444; font-weight: 900; }
.setup-player-card.starter  .setup-card-badge { color: #FF5C1A; }
.setup-player-card.bench-starter .setup-card-badge { color: #555; }
.setup-player-card.absent-readonly .setup-card-badge { color: rgba(239,68,68,0.5); }

.setup-count-line {
  margin-top: 8px;
  margin-bottom: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setup-count-line .absent-count { color: #EF4444; }

.setup-status-bar {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,92,26,0.05);
  border: 1px solid rgba(255,92,26,0.15);
}
.setup-status-bar.ready {
  background: rgba(61,191,108,0.06);
  border-color: rgba(61,191,108,0.18);
}
.setup-status-bar .status-main {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 15px;
  color: #FF5C1A;
  line-height: 1;
}
.setup-status-bar.ready .status-main { color: #3DBF6C; }
.setup-status-bar .status-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #555;
  margin-top: 1px;
  letter-spacing: 0.3px;
}
.setup-status-bar .status-basketball {
  font-size: 18px;
  display: none;
  line-height: 1;
  animation: setupSpin 2s linear infinite;
}
.setup-status-bar.ready .status-basketball { display: block; }
@keyframes setupSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.setup-start-btn {
  width: 100%;
  margin-top: 16px;
  padding: 16px 0;
  border: none;
  border-radius: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: default;
  background: rgba(255,92,26,0.25);
  color: rgba(255,255,255,0.3);
  box-shadow: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.setup-start-btn.ready {
  background: #FF5C1A;
  color: #FFF;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(255,92,26,0.35);
}

/* ════════════════════════════════════════════════════════════
   AVAILABILITY — coach UI inside the Season tab (above the game
   history block). Three views toggled by js/availability-ui.js.
   ════════════════════════════════════════════════════════════ */
#availSection {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.avail-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 10px;
}
.avail-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 3px;
}
.avail-section-sub {
  font-size: 11px;
  color: var(--sub);
  line-height: 1.4;
}
.avail-create-btn {
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(255,92,26,0.08);
  border: 1px solid rgba(255,92,26,0.25);
  color: var(--orange);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Event list rows */
.avail-event-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.avail-event-item:active { border-color: rgba(255,92,26,0.3); }
.avail-event-icon { font-size: 24px; flex-shrink: 0; }
.avail-event-info { flex: 1; min-width: 0; }
.avail-event-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avail-event-date { font-size: 11px; color: var(--sub); }
.avail-event-counts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.avail-count-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 100px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
}
.avail-count-badge.yes     { background: rgba(61,191,108,0.10); color: #3DBF6C; }
.avail-count-badge.no      { background: rgba(239,68,68,0.08);  color: #EF4444; }
.avail-count-badge.pending { background: rgba(255,255,255,0.04); color: var(--sub); }

.avail-event-status {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  flex-shrink: 0;
}
.avail-event-status.open {
  background: rgba(255,92,26,0.08);
  color: var(--orange);
  border: 1px solid rgba(255,92,26,0.2);
}
.avail-event-status.closed {
  background: rgba(255,255,255,0.04);
  color: var(--sub);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Empty state */
.avail-empty { text-align: center; padding: 40px 20px; }
.avail-empty-icon { font-size: 36px; margin-bottom: 12px; }
.avail-empty-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 8px;
}
.avail-empty-body {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.6;
  max-width: 260px;
  margin: 0 auto;
}

/* Back row + view title */
.avail-back-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.avail-back-btn {
  background: transparent;
  border: none;
  color: var(--sub);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.avail-view-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

/* Create form */
.avail-field-group { margin-bottom: 16px; }
.avail-field-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 8px;
}
.avail-optional {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sub);
}
.avail-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.avail-input:focus { border-color: var(--orange); }

.avail-type-pills { display: flex; gap: 8px; }
.avail-type-pill {
  padding: 8px 18px;
  border-radius: 100px;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--sub);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.avail-type-pill.active {
  background: rgba(255,92,26,0.1);
  border-color: rgba(255,92,26,0.4);
  color: var(--orange);
}

.avail-deadline-preview {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,153,0,0.05);
  border: 1px solid rgba(255,153,0,0.15);
  font-size: 12px;
  color: var(--amber);
  margin-bottom: 16px;
  min-height: 36px;
  line-height: 1.5;
}

.avail-generate-btn {
  width: 100%;
  padding: 16px 0;
  border-radius: 12px;
  border: none;
  background: var(--orange);
  color: #FFF;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(255,92,26,0.3);
  margin-bottom: 10px;
  -webkit-tap-highlight-color: transparent;
}
.avail-generate-btn:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}
.avail-loading {
  text-align: center;
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 10px 0;
}

/* Responses view */
.avail-event-summary {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.avail-counts-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.avail-count-card {
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  text-align: center;
}
.avail-count-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 3px;
}
.avail-count-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sub);
}

.avail-response-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 6px;
}
.avail-response-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.avail-response-icon.yes {
  background: rgba(61,191,108,0.12);
  border: 1.5px solid rgba(61,191,108,0.3);
  color: #3DBF6C;
}
.avail-response-icon.no {
  background: rgba(239,68,68,0.10);
  border: 1.5px solid rgba(239,68,68,0.25);
  color: #EF4444;
}
.avail-response-icon.pending {
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  color: var(--sub);
}
.avail-response-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.avail-response-note {
  font-size: 10px;
  color: var(--amber);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.avail-response-status {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.avail-response-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.avail-reshare-btn {
  flex: 1;
  padding: 11px 0;
  border-radius: 10px;
  background: rgba(255,92,26,0.08);
  border: 1px solid rgba(255,92,26,0.2);
  color: var(--orange);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avail-close-event-btn {
  flex: 1;
  padding: 11px 0;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--sub);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Delete event — destructive, sits below the close/reshare row so
   it's an explicit second action rather than something the coach
   could fat-finger reaching for "Close Responses". */
.avail-delete-event-btn {
  width: 100%;
  margin-top: 8px;
  padding: 11px 0;
  border-radius: 10px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.2);
  color: var(--red);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Share view (post-create) */
.avail-share-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(61,191,108,0.06);
  border: 1px solid rgba(61,191,108,0.2);
  margin-bottom: 16px;
}
.avail-share-tick {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(61,191,108,0.15);
  border: 1.5px solid rgba(61,191,108,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #3DBF6C;
  flex-shrink: 0;
}
.avail-share-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 2px;
}
.avail-share-sub {
  font-size: 11px;
  color: var(--sub);
  line-height: 1.4;
}
.avail-share-textarea {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  min-height: 180px;
  resize: vertical;
}
.avail-share-row {
  display: flex;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════
   NAVIGATION BUTTON DESIGN SYSTEM
   Three reusable patterns applied across all onboarding /
   recovery screens to keep arrows, skips, and close buttons
   visually and ergonomically consistent.
   ════════════════════════════════════════════════════════════ */

/* Circle back button — used on every back-navigation surface.
   Glyph: ‹ (single-left-pointing-angle, not ←). */
.nav-back-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #E8E8E8;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
  font-family: inherit;
  text-decoration: none;
}
.nav-back-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Pill skip/dismiss button — Skip, Remind me later, Resend email,
   Use PIN instead, Forgot PIN?, etc. Never carries an arrow. */
.nav-pill-btn {
  padding: 8px 16px;
  min-height: 36px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #B8B8B8;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
}

/* Circle close button — modal/overlay dismissal. Glyph: ✕. */
.nav-close-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #B8B8B8;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}