/* ── Reset & tokens ───────────────────────────── */
:root {
  /* Dark palette — aligned to Tag/Cut design language */
  --bg:          #111827;
  --surface:     #1a2030;
  --surface-2:   #242d3d;
  --border:      #2d3a50;
  --border-mid:  #45556f;
  --text:        #f0f4f8;
  --subtext:     #c8d4e0;
  --dim:         #94a3b8;
  --accent:      #e8ff47;
  --ok:          #68d391;
  --warn:        #f6ad55;
  --red:         #fc8181;

  /* Functional team colours — unchanged */
  --home-bg:     #1a4d2a;
  --home-fg:     #7defa0;
  --home-border: #2a7a3e;
  --away-bg:     #4d1a1a;
  --away-fg:     #f08080;
  --away-border: #7a2a2a;

  /* Pitch / heatmap — white field, unchanged */
  --pitch-bg:    #e8ddd0;
  --pitch-line:  #c9b9a8;
  --pitch-text:  #5a3e28;

  /* Layout */
  --topbar-h:    50px;
  --bottombar-h: 56px;
  --recent-h:    86px;
  --status-h:    26px;
  --panel-w:     32%;

  /* Typography */
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; cursor: pointer; border: none; }

/* ── Screens ──────────────────────────────────── */
.screen { display: none; flex-direction: column; width: 100vw; height: 100dvh; }
.screen.active { display: flex; }

/* ── Topbar ───────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
  flex-shrink: 0;
  gap: 4px;
}

.topbar-btn {
  background: transparent;
  color: var(--subtext);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 9px 0;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  transition: border-color 0.1s, color 0.1s;
}
.topbar-btn:hover { border-color: var(--accent); color: var(--accent); }
.topbar-btn.invisible { visibility: hidden; }

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-version-badge {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--warn);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.match-header {
  text-align: center;
  font-family: var(--mono);
  color: var(--subtext);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-mark { font-size: 0.58rem; color: var(--dim); letter-spacing: 0.08em; text-transform: lowercase; }

/* ── Main body — split layout ─────────────────── */
.main-body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  overflow: hidden;
  background: var(--bg);
}

/* ── Event panel (left) ───────────────────────── */
.event-panel {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.event-panel-header {
  padding: 8px 10px 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.event-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.ev-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.ev-group-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 10px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.ev-group-chevron {
  font-size: 1rem;
  color: var(--subtext);
}

.ev-group-body {
  display: none;
  padding: 6px;
  gap: 4px;
}

.ev-group.ev-group-open .ev-group-body {
  display: grid;
  max-height: min(36vh, 280px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.ev-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 10px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--subtext);
  text-align: left;
  line-height: 1.3;
  transition: border-color 0.1s, color 0.1s;
}
.ev-btn:hover { border-color: var(--accent); color: var(--accent); }
.ev-btn-selected {
  background: rgba(232,255,71,0.08);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(232,255,71,0.14);
}

/* ── Pitch area (right) ───────────────────────── */
.pitch-area {
  display: flex;
  align-items: stretch;
  padding: 5px;
  background: var(--bg);
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

.pitch-side-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--mono);
  color: var(--dim);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
  letter-spacing: 3px;
}
.pitch-side-label.left { transform: rotate(180deg); }

/* ── Pitch centre — WHITE FIELD, UNCHANGED ────── */
.pitch-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border-mid);
  background: var(--pitch-bg);
  border-radius: 3px;
  overflow: hidden;
}

.pitch-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.grid-cell {
  border: 1px solid var(--pitch-line);
  background: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e1208;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.grid-cell:hover  { background: rgba(232,255,71,0.18); }
.grid-cell:active { background: rgba(232,255,71,0.35); }
.grid-edit-target { outline: 3px solid var(--accent); background: rgba(232,255,71,0.14) !important; }
.grid-pending-target { outline: 3px solid var(--accent); background: rgba(61,220,132,0.18) !important; }

/* Report cells — signed heatmap colouring UNCHANGED */
.report-cell { cursor: default; flex-direction: column; gap: 2px; }
.report-cell-value { font-size: 1.05rem; font-weight: 800; color: #1e1208; }

/* ── Yard markers — WHITE FIELD, UNCHANGED ────── */
.yard-markers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--pitch-bg);
  border-top: 1px solid var(--pitch-line);
  flex-shrink: 0;
}
.yard-markers span {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  padding: 3px 1px;
  color: var(--pitch-text);
  font-weight: 600;
  border-right: 1px solid var(--pitch-line);
}
.yard-markers span:last-child { border-right: none; }

/* ── Status bar ───────────────────────────────── */
.status-bar {
  height: var(--status-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--subtext);
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 0 12px;
  flex-shrink: 0;
  min-height: var(--status-h);
  letter-spacing: 0.02em;
}
.status-ok   { color: var(--ok); }
.status-warn { color: var(--warn); }
.status-err  { color: var(--red); }

/* ── Bottom action bar ────────────────────────── */
.bottom-bar {
  height: var(--bottombar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  min-height: var(--bottombar-h);
}

/* Team toggle */
.team-toggle { display: flex; gap: 3px; flex-shrink: 0; }

.team-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 800;
  border: 1px solid var(--border-mid);
  background: transparent;
  color: var(--subtext);
  letter-spacing: 0.04em;
  transition: all 0.12s;
}
/* Active team states retain functional colours */
.team-btn-active-home { background: var(--home-bg); color: var(--home-fg); border-color: var(--home-border); }
.team-btn-active-away { background: var(--away-bg); color: var(--away-fg); border-color: var(--away-border); }

.bar-sep {
  width: 1px;
  background: var(--border);
  height: 32px;
  flex-shrink: 0;
  margin: 0 2px;
}

/* Generic bottom bar button */
.bar-btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 12px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.1s, color 0.1s;
}
.bar-btn:hover { border-color: var(--accent); color: var(--accent); }
.bar-btn.bar-btn-icon { padding: 0 10px; font-size: 0.95rem; }

/* Clock */
.bar-clock {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Half button — tap to cycle */
.bar-half {
  flex-shrink: 0;
  height: 40px;
  padding: 0 10px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  min-width: 90px;
  text-align: center;
  transition: border-color 0.1s, color 0.1s;
}
.bar-half:hover { border-color: var(--accent); color: var(--accent); }

/* ── Select option items — explicit dark bg so browser dropdown is readable ── */
.bar-half option {
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.88rem;
}

/* ── Recent events strip ──────────────────────── */
.recent-strip {
  height: var(--recent-h);
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  min-height: var(--recent-h);
  overflow: hidden;
}

.recent-empty {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--subtext);
  padding: 4px 2px;
}

.recent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text);
  padding: 3px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.recent-team {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.recent-team-home { background: rgba(26,77,42,0.35); color: var(--home-fg); border: 1px solid rgba(42,122,62,0.4); }
.recent-team-away { background: rgba(77,26,26,0.35); color: var(--away-fg); border: 1px solid rgba(122,42,42,0.4); }

.recent-label { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Edit mode overlay panel ──────────────────── */
.edit-panel {
  position: fixed;
  bottom: calc(var(--bottombar-h) + var(--recent-h) + var(--status-h));
  left: 0; right: 0;
  background: var(--surface);
  border-top: 2px solid var(--accent);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.edit-panel.hidden { display: none; }

.edit-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.edit-team-row { display: flex; gap: 8px; }

.edit-team-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 800;
  border: 1px solid var(--border-mid);
  background: transparent;
  color: var(--subtext);
  letter-spacing: 0.04em;
  transition: all 0.12s;
}
.edit-team-active-home { background: var(--home-bg); color: var(--home-fg); border-color: var(--home-border); }
.edit-team-active-away { background: var(--away-bg); color: var(--away-fg); border-color: var(--away-border); }

.edit-info {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--subtext);
  font-weight: 600;
}

.edit-hint {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--subtext);
}

.edit-actions { display: flex; gap: 8px; }
.edit-confirm-btn {
  padding: 8px 20px;
  background: #48bb78;
  color: #0a1f0a;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  transition: opacity 0.1s;
}
.edit-confirm-btn:hover { opacity: 0.88; }
.edit-cancel-btn {
  padding: 8px 16px;
  background: transparent;
  color: var(--subtext);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--border-mid);
  transition: border-color 0.1s, color 0.1s;
}
.edit-cancel-btn:hover { border-color: var(--red); color: var(--red); }

/* ── Overlays (Menu, New Game, Load Match) ────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.overlay.hidden { display: none; }

/* Mobile-safe overlay layout: dialogs must never clip off-screen.
   Forms such as New Game use the same scrollable-panel principle as Manage Template. */
.overlay {
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.overlay-box {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: auto 0;
  box-sizing: border-box;
}
.overlay-box.new-game-overlay-box {
  width: min(480px, calc(100vw - 24px));
  min-width: 0;
}
.new-game-title {
  margin-bottom: 6px;
}

.overlay-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 300px;
  max-width: 480px;
  width: 88vw;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}

.overlay-btn {
  width: 100%;
  padding: 16px 12px;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--subtext);
  text-align: center;
  transition: border-color 0.1s, color 0.1s;
}
.overlay-btn:hover { border-color: var(--accent); color: var(--accent); }
.overlay-btn.overlay-btn-primary {
  background: #48bb78;
  border-color: #48bb78;
  color: #0a1f0a;
}
.overlay-btn.overlay-btn-primary:hover { opacity: 0.9; color: #0a1f0a; }

/* ── Menu overlay — grid layout override ─────── */
.menu-overlay-box {
  width: 92vw;
  max-width: 92vw;
  padding: 2.5vw;
}

.menu-overlay-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--subtext);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2%;
  text-align: center;
}

.menu-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
  gap: 1.5%;
  width: 100%;
}

.form-title {
  font-family: var(--mono);
  color: var(--subtext);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 2px 0;
  letter-spacing: 0.02em;
}

.form-input {
  width: 100%;
  padding: 13px 12px;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.1s;
}
.form-input:focus { outline: none; border-color: var(--accent); }

@media screen and (max-width: 600px), screen and (max-height: 520px) {
  .overlay {
    align-items: flex-start;
    justify-content: center;
  }
  .overlay-box.new-game-overlay-box {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 12px;
    gap: 8px;
  }
  .new-game-overlay-box .form-input {
    padding: 11px 10px;
    font-size: 0.92rem;
  }
  .new-game-overlay-box .overlay-btn {
    padding: 12px 10px;
    min-height: 42px;
  }
}

/* ── Reports and Log screens ──────────────────── */
.screen-body {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}

.stats-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) 64px 64px 64px;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  color: var(--subtext);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.stat-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 64px 64px 64px;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  background: var(--surface);
}
.stat-row:nth-child(even) { background: var(--bg); }
.stat-label { font-weight: 500; color: var(--subtext); }
.stat-num   { text-align: center; font-family: var(--mono); font-weight: 600; color: var(--text); }
.stat-total { font-family: var(--mono); font-weight: 700; color: var(--text); }
.stats-empty { padding: 16px 12px; color: var(--subtext); font-family: var(--mono); font-size: 0.92rem; }

.log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  background: var(--surface);
}
.log-item:nth-child(even) { background: var(--bg); }
.log-team {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.log-team-home { background: rgba(26,77,42,0.35); color: var(--home-fg); }
.log-team-away { background: rgba(77,26,26,0.35); color: var(--away-fg); }
.log-meta  { font-family: var(--mono); color: var(--subtext); font-size: 0.82rem; margin-left: auto; white-space: nowrap; }
.log-empty { padding: 16px 12px; color: var(--subtext); font-family: var(--mono); font-size: 0.92rem; }

.log-edit-btn {
  margin-left: 8px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
}
.log-edit-btn:hover { color: var(--accent); background: rgba(232,255,71,0.08); }

.log-delete-btn {
  margin-left: 4px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
}
.log-delete-btn:hover { color: var(--danger); background: rgba(239,68,68,0.10); }

/* ── Template dialog ──────────────────────────── */
.modal {
  border: 0; padding: 0; border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  width: min(1000px, calc(100vw - 20px));
  max-height: 90vh;
}
.modal::backdrop { background: rgba(0,0,0,0.65); }
.modal-inner { padding: 16px; overflow-y: auto; max-height: 88vh; }
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 12px;
}
.modal-header h2 { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: 0.03em; }
.modal-close-btn {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--subtext);
  transition: border-color 0.1s, color 0.1s;
}
.modal-close-btn:hover { border-color: var(--accent); color: var(--accent); }

.tmpl-layout { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 18px; }
.tmpl-group  { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 8px; background: var(--bg); }
.tmpl-group-title { font-family: var(--mono); font-size: 0.88rem; font-weight: 700; margin-bottom: 8px; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.06em; }
.tmpl-group-heading-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tmpl-group-heading-row .tmpl-group-title { margin-bottom: 0; }
.tmpl-group-actions { display: flex; gap: 4px; }
.tmpl-restore-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.tmpl-restore-section-top { margin-top: 0; padding-top: 0; border-top: none; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tmpl-restore-heading { font-size: 0.8rem; font-weight: 700; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.tmpl-restore-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.tmpl-restore-label { flex: 1; font-size: 0.82rem; color: var(--text); }
.tmpl-restore-sub { font-size: 0.76rem; color: var(--dim); }
.tmpl-reset-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.tmpl-reset-section-top { margin-top: 0; padding-top: 0; border-top: none; margin-bottom: 12px; }
.tmpl-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.83rem; }
.tmpl-row:last-child { border-bottom: none; }
.tmpl-row-label { color: var(--subtext); }
.tmpl-actions { display: flex; gap: 4px; }
.tmpl-mini-btn {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--subtext);
  transition: border-color 0.1s, color 0.1s;
}
.tmpl-mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.tmpl-toggle-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border-mid);
  background: transparent;
  color: var(--dim);
  transition: all 0.1s;
}
.tmpl-toggle-on  { border-color: rgba(104,211,145,0.5); color: var(--ok); background: rgba(104,211,145,0.08); }
.tmpl-toggle-off { border-color: var(--border-mid); color: var(--subtext); }
.tmpl-saved-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--subtext);
  margin-bottom: 6px;
  transition: border-color 0.1s, color 0.1s;
}
.tmpl-saved-btn:hover    { border-color: var(--accent); color: var(--accent); }
.tmpl-saved-btn-active   { border-color: var(--accent); color: var(--accent); background: rgba(232,255,71,0.06); }
.assigned-id { margin: 6px 0 10px; font-family: var(--mono); color: var(--subtext); font-size: 0.88rem; }
.tmpl-input {
  width: 100%; padding: 9px 10px;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  margin-top: 3px; display: block;
  transition: border-color 0.1s;
}
.tmpl-input:focus { outline: none; border-color: var(--accent); }
.tmpl-field-label { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 0.88rem; color: var(--subtext); margin-bottom: 8px; }
.tmpl-add-btn {
  width: 100%; padding: 10px;
  background: #48bb78;
  border: none;
  color: #0a1f0a;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  transition: opacity 0.1s;
}
.tmpl-add-btn:hover { opacity: 0.88; }
.tmpl-saved-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tmpl-action-row { display: flex; gap: 6px; margin-bottom: 8px; }
.tmpl-saved-item { display: flex; flex-direction: column; gap: 4px; }
.tmpl-saved-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.tmpl-danger-btn { border-color: rgba(252,129,129,0.4) !important; color: var(--red) !important; }
.tmpl-danger-btn:hover { border-color: var(--red) !important; background: rgba(252,129,129,0.08) !important; }
hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* ── Report screen body ───────────────────────── */
.report-screen-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 6px;
  background: var(--bg);
  overflow: hidden;
}

/* ── Report topbar — title left of score ─────── */
.report-topbar {
  grid-template-columns: 90px 1fr auto 90px;
}

.report-title {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
}

.report-header-score {
  font-family: var(--mono);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Report team toggle + legend ─────────────── */
.report-view-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.report-view-btn { min-width: 120px; }

.report-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.legend-green { color: var(--ok); }
.legend-red   { color: var(--red); }

/* ── Saved matches list ───────────────────────── */
.saved-matches-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow: auto; margin: 8px 0 12px;
}
.saved-match-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: var(--surface-2);
  color: var(--text);
  border-radius: 10px; padding: 12px;
  border: 1px solid var(--border);
  transition: border-color 0.1s;
}
.saved-match-row:hover { border-color: var(--accent); }
.saved-match-row span { font-family: var(--mono); font-size: 0.82rem; color: var(--subtext); }

/* ── Responsive ───────────────────────────────────────────────────────────
   Three-band system — CD-2026-003-R1 (approved CR-2026-003-R1)
   Band 1: Phone portrait   ≤600px  + portrait  → rotate overlay
   Band 2: Phone landscape  ≤960px  + landscape → compact layout
   Band 3: Tablet landscape 961–1400px + landscape → refined layout
   Desktop >1400px: no band fires, existing layout unchanged
   ──────────────────────────────────────────────────────────────────────── */

/* ── .tmpl-layout collapses to single column on narrower viewports ──────── */
@media (max-width: 900px) {
  .tmpl-layout { grid-template-columns: 1fr; }
}

/* ── Band 1: Phone portrait — hide app, show rotate overlay ─────────────── */
#rotate-overlay { display: none; }

@media screen and (max-width: 600px) and (orientation: portrait) {
  #rotate-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    padding: 32px;
    font-family: var(--mono);
    color: var(--subtext);
  }
  #rotate-overlay h2 {
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--accent);
  }
  #rotate-overlay p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--dim);
  }
  .screen { display: none !important; }
}

/* ── Band 2: Phone landscape — compact layout ───────────────────────────── */
/* Fires: Nord CE 5G landscape (915px). Clear of iPad 10 (1180px). */
@media screen and (max-width: 960px) and (orientation: landscape) {
  :root {
    --topbar-h:    36px;   /* was 50px — saves 14px */
    --bottombar-h: 40px;   /* was 56px — saves 16px */
    --recent-h:    52px;   /* was 86px — saves 34px */
    --status-h:    20px;   /* was 26px — saves  6px */
    /* Total saved: 70px. Pitch+panel: 264px (was 194px on 412px-tall screen) */
  }

  /* Event panel — fixed narrow width so pitch gets remaining space */
  .event-panel { width: 140px; flex-shrink: 0; }
  .main-body   { grid-template-columns: 140px 1fr; }

  /* Topbar */
  .topbar       { height: var(--topbar-h); padding: 0 4px; }
  .topbar-btn   { padding: 5px 0; font-size: 0.78rem; }
  .app-version-badge { font-size: 0.72rem; }
  .match-header { font-size: 0.7rem; }

  /* Bottom bar — scrollable, never clips any of the 11 controls */
  .bottom-bar {
    height: var(--bottombar-h);
    padding: 2px 4px;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bottom-bar::-webkit-scrollbar { display: none; }

  /* Buttons — reduced but still >= 36px touch target */
  .bar-btn   { height: 32px; padding: 0 7px; font-size: 0.78rem; }
  .team-btn  { padding: 5px 9px; font-size: 0.78rem; }
  .bar-clock { font-size: 0.9rem; min-width: 72px; flex: 0 0 auto; }
  .bar-half  { height: 32px; padding: 0 7px; font-size: 0.78rem; min-width: 68px; }

  /* Status bar */
  .status-bar { height: var(--status-h); font-size: 0.72rem; }

  /* Recent strip — max 2 rows visible */
  .recent-strip { height: var(--recent-h); padding: 2px 6px; gap: 2px; }
  .recent-row   { font-size: 0.78rem; padding: 2px 5px; }
  .recent-empty { font-size: 0.75rem; }

  /* Event panel internals */
  .event-panel-header { font-size: 0.68rem; padding: 5px 6px; }
  .ev-group-heading   { font-size: 0.72rem; padding: 6px 6px; }
  .ev-btn             { padding: 6px 7px;   font-size: 0.78rem; }

  /* Pitch */
  .pitch-side-label  { width: 16px; font-size: 0.6rem; letter-spacing: 2px; }
  .pitch-area        { padding: 3px; }
  .yard-markers span { font-size: 0.52rem; padding: 2px 0; }
  .grid-cell         { font-size: 0.95rem; }
}

/* ── Band 3: Tablet landscape — refined layout ──────────────────────────── */
/* Fires: iPad 10 landscape (1180px), Android 10" tab (1340px). */
@media screen and (min-width: 961px) and (max-width: 1400px) and (orientation: landscape) {
  :root {
    --panel-w: 200px;
    /* Fixed px prevents proportional blowout:
       32% at 1180px = ~378px panel, at 1340px = ~429px panel. */
  }
  .main-body   { grid-template-columns: var(--panel-w) 1fr; }
  .event-panel { width: var(--panel-w); }
}


/* ── Tablet capture sheet ───────────────────────────────────────────────── */
.capture-sheet.hidden { display: none; }
.capture-sheet {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
}
.capture-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  pointer-events: auto;
}
.capture-sheet-panel {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.35);
  padding: 16px;
  pointer-events: auto;
  max-height: min(58dvh, 520px);
  overflow: auto;
}
.capture-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.capture-sheet-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}
.capture-sheet-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.capture-sheet-gridref {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--subtext);
  margin-top: 4px;
}
.capture-sheet-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}
.capture-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.capture-segment {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--subtext);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
}
.capture-segment-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.capture-segment-name { font-size: 0.92rem; font-weight: 700; }
.capture-segment-active-home {
  background: rgba(61,220,132,0.18);
  border-color: var(--accent);
  color: var(--text);
}
.capture-segment-active-away {
  background: rgba(239,83,80,0.18);
  border-color: var(--red);
  color: var(--text);
}
.capture-event-meta {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--subtext);
}
.capture-event-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.capture-event-btn {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
}
.capture-event-empty {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--subtext);
  font-size: 0.85rem;
}

@media screen and (min-width: 601px) and (orientation: portrait) and (max-width: 1400px) {
  .event-panel { display: none; }
  .main-body { grid-template-columns: 1fr; }
  .capture-sheet-panel { left: 12px; right: 12px; bottom: 12px; }
}

@media screen and (min-width: 961px) and (orientation: landscape) and (max-width: 1400px) {
  .event-panel { display: none; }
  .main-body { grid-template-columns: 1fr; }
  .capture-sheet-panel {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: min(420px, 36vw);
    max-height: min(70dvh, 560px);
  }
  .capture-event-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── Universal grid-first overrides (CR-2026-006) ──────────────────────── */
.event-panel { display: none !important; }
.main-body { grid-template-columns: 1fr !important; }

.status-bar {
  min-height: var(--status-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.35;
}

.capture-sheet.hidden { display: none; }
.capture-sheet {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
}
.capture-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.34);
  pointer-events: auto;
}
.capture-sheet-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.38);
  padding: 16px;
  pointer-events: auto;
  max-height: min(62dvh, 560px);
  overflow: auto;
}
.capture-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.capture-sheet-eyebrow {
  font-family: var(--mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}
.capture-sheet-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}
.capture-sheet-gridref {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--subtext);
  margin-top: 6px;
}
.capture-sheet-close {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
}

.capture-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.capture-segment {
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--subtext);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  text-align: left;
}
.capture-segment-label {
  font-family: var(--mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.capture-segment-name {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
}
.capture-segment-active-home {
  background: rgba(61,220,132,0.18);
  border-color: var(--home-border);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(125,239,160,0.2);
}
.capture-segment-active-away {
  background: rgba(252,129,129,0.18);
  border-color: var(--away-border);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(240,128,128,0.2);
}

.capture-event-meta {
  margin-top: 12px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--subtext);
  line-height: 1.4;
}
.capture-event-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.capture-event-btn {
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.capture-event-btn:hover,
.capture-event-btn:focus-visible,
.capture-sheet-close:hover,
.capture-sheet-close:focus-visible,
.capture-segment:hover,
.capture-segment:focus-visible {
  outline: none;
  border-color: var(--accent);
}
.capture-event-btn[data-group]::before {
  content: attr(data-group);
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.capture-event-empty {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--subtext);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Compact phone landscape — keep pitch dominant, use bottom sheet */
@media screen and (max-width: 960px) and (orientation: landscape) {
  .capture-sheet-panel {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 12px;
    max-height: min(62dvh, 330px);
    border-radius: 16px;
  }
  .capture-sheet-header {
    margin-bottom: 8px;
  }
  .capture-sheet-eyebrow {
    font-size: 0.68rem;
  }
  .capture-sheet-title {
    font-size: 1.02rem;
  }
  .capture-sheet-gridref,
  .capture-event-meta {
    font-size: 0.78rem;
  }
  .capture-segment {
    min-height: 48px;
    padding: 8px 10px;
  }
  .capture-segment-name {
    font-size: 0.92rem;
  }
  .capture-event-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .capture-event-btn {
    min-height: 48px;
    padding: 10px 10px;
    font-size: 0.88rem;
  }
  .capture-event-btn[data-group]::before {
    font-size: 0.62rem;
    margin-bottom: 4px;
  }
}

/* Tablet portrait — bottom sheet */
@media screen and (min-width: 601px) and (orientation: portrait) {
  .capture-sheet-panel {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-height: min(48dvh, 520px);
  }
}

/* Wide landscape tablets and desktop — floating panel */
@media screen and (min-width: 961px) and (orientation: landscape) {
  .capture-sheet-panel {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: min(460px, 34vw);
    max-height: min(74dvh, 640px);
  }
  .capture-event-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Large desktop — give a little more air */
@media screen and (min-width: 1401px) {
  .capture-sheet-panel {
    width: min(500px, 32vw);
    max-height: min(76dvh, 680px);
  }
}


/* ── CR-2026-007 popup API overrides ───────────────────────────────────── */
.event-panel { display: none !important; }
.main-body { grid-template-columns: 1fr !important; }

.capture-sheet.hidden { display: none !important; }
.capture-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.capture-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.capture-sheet-panel {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90vw !important;
  max-width: 1100px !important;
  height: 82vh !important;
  max-height: 82vh !important;
  right: auto !important;
  bottom: auto !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 16px !important;
  padding: 20px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-mid) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45) !important;
  overflow: hidden !important;
}
.capture-sheet-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
  gap: 12px !important;
}
.capture-sheet-eyebrow { display: none !important; }
.capture-sheet-title { font-size: 1.5rem !important; line-height: 1.1 !important; }
.capture-sheet-gridref { font-size: 1rem !important; margin-top: 6px !important; }
.capture-sheet-close { min-width: 52px !important; min-height: 52px !important; }
#captureTeamToggle { min-height: 0; }
.capture-segmented {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--surface-2) !important;
}
.capture-segment {
  min-height: 64px !important;
  padding: 10px 12px !important;
  border-radius: 0 !important;
  border: none !important;
}
.capture-segment-label { font-size: 0.9rem !important; }
.capture-segment-name { font-size: 1rem !important; }
#captureEventGrid { min-height: 0 !important; overflow: hidden !important; }
.capture-event-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  height: 100% !important;
}
.capture-event-btn {
  min-height: 64px !important;
  height: 100% !important;
  padding: 10px 12px !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
}
.capture-event-btn::before, .capture-event-btn[data-group]::before { content: none !important; }

@media screen and (max-width: 1100px) {
  .capture-sheet-panel { width: 92vw !important; }
}

@media screen and (max-width: 960px) and (orientation: landscape) {
  .capture-sheet-panel { width: 94vw !important; height: 84vh !important; max-height: 84vh !important; padding: 16px !important; }
  .capture-event-buttons { gap: 10px !important; }
  .capture-event-btn { min-height: 56px !important; font-size: 0.95rem !important; }
}

@media screen and (max-width: 900px) and (orientation: portrait) {
  .capture-sheet-panel { width: 92vw !important; height: 82vh !important; max-height: 82vh !important; padding: 16px !important; }
  .capture-event-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
  .capture-event-btn { min-height: 56px !important; font-size: 0.92rem !important; }
}


/* ── CR-2026-008 percentage-based popup layout final override ───────────── */
.capture-sheet.hidden { display: none !important; }
.capture-sheet {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
}
.capture-sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
}
.capture-sheet-panel {
  position: relative !important;
  width: 90vw !important;
  max-width: 1100px !important;
  height: 82vh !important;
  max-height: 82vh !important;
  display: grid !important;
  grid-template-rows: 15% 15% 1fr !important;
  gap: 2.2% !important;
  padding: 2.2% !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}
.capture-sheet-header {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 1rem !important;
}
.capture-sheet-eyebrow { display: none !important; }
.capture-sheet-title {
  margin: 0 !important;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem) !important;
  line-height: 1.05 !important;
}
.capture-sheet-gridref {
  margin-top: 0.35rem !important;
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
}
.capture-sheet-close {
  width: auto !important;
  min-width: 56px !important;
  min-height: 56px !important;
  aspect-ratio: 1 / 1 !important;
  align-self: start !important;
}
.capture-team-toggle,
#captureTeamToggle {
  min-height: 0 !important;
  height: 100% !important;
}
.capture-segmented {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}
.capture-segment {
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}
.capture-segment-label {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
}
.capture-segment-name {
  font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
  line-height: 1.1 !important;
}
.capture-event-grid,
#captureEventGrid {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.capture-event-buttons {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.8% !important;
  align-items: stretch !important;
}
.capture-event-btn {
  min-height: 0 !important;
  height: 100% !important;
  padding: 0.55rem 0.65rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.15 !important;
  font-size: clamp(0.82rem, 1.25vw, 1.1rem) !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  text-wrap: balance !important;
  word-break: normal !important;
}
.capture-event-btn::before,
.capture-event-btn[data-group]::before {
  content: none !important;
}
@media screen and (max-width: 960px) and (orientation: landscape) {
  .capture-sheet-panel {
    width: 94vw !important;
    height: 84vh !important;
    max-height: 84vh !important;
    grid-template-rows: 15% 15% 1fr !important;
    padding: 2.4% !important;
    gap: 2.1% !important;
  }
  .capture-sheet-title { font-size: clamp(1.25rem, 3.6vw, 1.8rem) !important; }
  .capture-sheet-gridref { font-size: clamp(0.95rem, 2.2vw, 1.05rem) !important; }
  .capture-segment-name { font-size: clamp(0.95rem, 2.2vw, 1.08rem) !important; }
  .capture-event-btn { font-size: clamp(0.78rem, 1.85vw, 0.98rem) !important; }
}

/* ── Subtype picker card (rendered inside captureEventGrid) ─────────────── */
.subtype-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border-mid);
}

.subtype-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 8px;
}

.subtype-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subtype-radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}

.subtype-radio-row input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent, #68d391);
}

.subtype-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}

.subtype-confirm-btn {
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--accent-btn, #48bb78);
  color: #000;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.subtype-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.subtype-cancel-btn {
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-mid);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.subtype-option-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-mid);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.subtype-option-btn:hover   { background: var(--surface-3, #2e3a50); border-color: var(--text); }
.subtype-option-btn.selected { background: rgba(232,255,71,0.12); color: var(--accent); border-color: var(--accent); }

/* ── Subtype picker container ─────────────────────────────────────────────── */
.subtype-picker-container {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.subtype-picker-container.hidden { display: none; }


/* ── 5.7.1.2 mobile subtype picker and New Game reachability fixes ──────── */
.subtype-picker-container {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.subtype-card {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 12px !important;
}
.subtype-title {
  padding-bottom: 6px !important;
  font-size: 0.9rem !important;
}
.subtype-radio-group {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 7px !important;
  padding-right: 4px !important;
}
.subtype-option-btn {
  min-height: 42px !important;
  padding: 7px 12px !important;
  font-size: 0.88rem !important;
  line-height: 1.12 !important;
}
.subtype-option-btn.selected {
  background: rgba(232,255,71,0.12) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(232,255,71,0.20) !important;
}
.subtype-actions {
  flex-shrink: 0 !important;
  padding-top: 4px !important;
  background: var(--surface-2) !important;
}
.subtype-confirm-btn,
.subtype-cancel-btn {
  min-height: 38px !important;
  padding: 7px 15px !important;
  font-size: 0.86rem !important;
}
@media screen and (max-width: 960px) and (orientation: landscape) {
  .capture-sheet {
    align-items: flex-start !important;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
  }
  .capture-sheet-panel {
    width: 94vw !important;
    height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
    grid-template-rows: 12% 13% minmax(0,1fr) !important;
    gap: 1.2% !important;
    padding: 1.2% 2.2% !important;
    border-radius: 16px !important;
  }
  .capture-sheet-title { font-size: clamp(1.05rem, 3.2vw, 1.45rem) !important; }
  .capture-sheet-gridref { font-size: clamp(0.8rem, 2vw, 0.96rem) !important; margin-top: 0.15rem !important; }
  .capture-sheet-close { min-width: 44px !important; min-height: 44px !important; }
  .capture-segment { padding: 0 0.75rem !important; }
  .capture-segment-label { font-size: clamp(0.68rem, 1.8vw, 0.82rem) !important; }
  .capture-segment-name { font-size: clamp(0.82rem, 2.2vw, 1rem) !important; }
  .subtype-card { gap: 7px !important; padding: 8px 10px !important; }
  .subtype-title { display: none !important; }
  .subtype-radio-group { gap: 6px !important; }
  .subtype-option-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: clamp(0.78rem, 2.3vw, 0.9rem) !important;
    border-radius: 8px !important;
  }
  .subtype-actions {
    justify-content: flex-end !important;
    gap: 8px !important;
    padding-top: 2px !important;
  }
  .subtype-confirm-btn,
  .subtype-cancel-btn {
    min-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
  }
  .overlay {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
  .overlay-box.new-game-overlay-box {
    width: min(520px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important;
    padding: 10px !important;
    gap: 6px !important;
  }
  .new-game-overlay-box .form-title { font-size: 0.78rem !important; padding: 0 !important; }
  .new-game-overlay-box .form-input { min-height: 34px !important; padding: 7px 9px !important; font-size: 0.86rem !important; }
  .new-game-overlay-box .overlay-btn { min-height: 34px !important; padding: 7px 9px !important; font-size: 0.84rem !important; }
}

/* ── 5.7.1.3 mobile Add Event / subtype replacement layout ──────────────── */
#captureEventGrid.hidden,
.capture-event-grid.hidden {
  display: none !important;
}
.capture-sheet-panel.subtype-active {
  grid-template-rows: 12% 13% minmax(0, 1fr) !important;
}
.capture-sheet-panel.subtype-active #subtypePickerContainer {
  display: block !important;
  grid-row: 3 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.capture-sheet-panel.subtype-active .subtype-card {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}
.capture-sheet-panel.subtype-active .subtype-title {
  display: none !important;
}
.capture-sheet-panel.subtype-active .subtype-radio-group {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.capture-sheet-panel.subtype-active .subtype-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}
@media screen and (max-width: 960px) and (orientation: landscape) {
  .capture-sheet {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: max(4px, env(safe-area-inset-top)) !important;
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
  }
  .capture-sheet-panel {
    width: min(94vw, 1180px) !important;
    height: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-bottom))) !important;
    grid-template-rows: 10% 12% minmax(0, 1fr) !important;
    gap: 1% !important;
    padding: 1% 2% !important;
    border-radius: 14px !important;
  }
  .capture-sheet-header {
    align-items: center !important;
  }
  .capture-sheet-title {
    font-size: clamp(1rem, 3vw, 1.32rem) !important;
    line-height: 1 !important;
  }
  .capture-sheet-gridref {
    font-size: clamp(0.72rem, 1.8vw, 0.9rem) !important;
    margin-top: 0.08rem !important;
  }
  .capture-sheet-close {
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1.1rem !important;
  }
  .capture-segment {
    padding: 0 0.65rem !important;
  }
  .capture-segment-label {
    font-size: clamp(0.62rem, 1.6vw, 0.76rem) !important;
    line-height: 1 !important;
  }
  .capture-segment-name {
    font-size: clamp(0.78rem, 2vw, 0.95rem) !important;
    line-height: 1.05 !important;
  }
  .capture-event-buttons {
    gap: 1.1% !important;
  }
  .capture-event-btn {
    padding: 0.28rem 0.42rem !important;
    font-size: clamp(0.66rem, 1.65vw, 0.84rem) !important;
    line-height: 1.03 !important;
    border-radius: 9px !important;
  }
  .capture-sheet-panel.subtype-active {
    grid-template-rows: 10% 12% minmax(0, 1fr) !important;
  }
  .capture-sheet-panel.subtype-active .subtype-card {
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }
  .capture-sheet-panel.subtype-active .subtype-radio-group {
    gap: 6px !important;
  }
  .capture-sheet-panel.subtype-active .subtype-option-btn {
    min-height: 34px !important;
    padding: 5px 10px !important;
    font-size: clamp(0.74rem, 2.05vw, 0.88rem) !important;
    line-height: 1.05 !important;
  }
  .capture-sheet-panel.subtype-active .subtype-actions {
    justify-content: flex-end !important;
    gap: 8px !important;
    padding-top: 4px !important;
  }
  .capture-sheet-panel.subtype-active .subtype-confirm-btn,
  .capture-sheet-panel.subtype-active .subtype-cancel-btn {
    min-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
  }
  .overlay-box.new-game-overlay-box {
    width: min(520px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}