/* Modern Golf Scorecard Design System */
:root {
  --bg-primary: #0a130f;
  --bg-surface: #12211b;
  --bg-surface-elevated: #1a2f26;
  --bg-glass: rgba(18, 33, 27, 0.85);

  --accent-green: #10b981;
  --accent-green-bright: #34d399;
  --accent-gold: #f59e0b;
  --accent-gold-light: #fbbf24;
  --accent-blue: #3b82f6;
  --accent-red: #ef4444;

  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(16, 185, 129, 0.35);

  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  --header-height: 64px;
  --nav-height: 72px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: calc(var(--nav-height) + 20px);
  overflow-x: hidden;
}

/* App Container */
.app-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
}

/* Top App Header */
.app-header {
  min-height: var(--header-height);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Spans the row so the actions inside it can use the space after the title
     rather than being squeezed against the right edge. */
  flex: 1 1 100%;
  min-width: 0;
}

.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.34);
  object-fit: cover;
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  background: linear-gradient(to right, #ffffff, #a7f3d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Inline, not modal: a course mismatch must be resolvable without interrupting
   score entry. Sits in flow beneath the status bar. */
.course-conflict-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(245, 158, 11, 0.14);
  border-bottom: 1px solid rgba(245, 158, 11, 0.45);
  font-size: 0.74rem;
  line-height: 1.4;
  color: #fde68a;
}

.course-conflict-banner .conflict-text {
  flex: 1 1 240px;
  min-width: 0;
}

.course-conflict-banner .conflict-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.course-conflict-banner button {
  border: 1px solid rgba(245, 158, 11, 0.6);
  background: rgba(10, 19, 15, 0.5);
  color: #fde68a;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.course-conflict-banner button:hover {
  background: var(--accent-gold);
  color: #1a1205;
}

/* Install + Live Sync ride on the brand row, keeping the control row short. */
/* The brand row used to push both buttons hard right, leaving the middle of the
   row empty while Live Sync - the most used control in a tournament - was the
   same small size as everything else. Install now sits in that unused space and
   Live Sync takes the room at the end of the row. */
.brand-row-actions {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  /* min-width:0 is what lets these shrink instead of pushing the row wider than
     the container - a fixed min-width here spilled off the right on a phone. */
  min-width: 0;
  margin-left: 10px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.btn-install-app {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid #60a5fa;
  color: #60a5fa;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.btn-live-sync {
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid var(--accent-green-bright);
  color: var(--accent-green-bright);
  /* Takes the space Install no longer occupies, but still shrinks on a narrow
     phone rather than overflowing. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 240px;
  justify-content: center;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 10px 14px;
  min-height: 44px;
}

.tournament-field-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.tournament-field-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 0.76rem;
}

.tournament-field-row .field-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  flex: 0 0 auto;
}

.tournament-field-row.is-claimed .field-dot {
  background: var(--accent-green-bright);
}

.tournament-field-row .field-player-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tournament-field-row .field-name {
  display: block;
  font-weight: 700;
  color: #fff;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tournament-field-row .field-meta {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tournament-field-row .field-team-label {
  display: block;
  color: #bfdbfe;
  font-size: 0.7rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.tournament-field-row.is-claimed .field-meta {
  color: var(--accent-green-bright);
}

.btn-remove-field-name {
  background: none;
  border: none;
  color: #f87171;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0 2px;
  flex: 0 0 auto;
}

.header-actions {
  display: flex;
  gap: 8px;
  /* Eight controls cannot fit one row inside the 600px app container, and
     without wrapping the group overflowed past the container's right edge. */
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.btn-icon {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-icon:active {
  transform: scale(0.96);
  background: var(--accent-green);
  color: #fff;
}

.btn-test-data {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* Main Content Area */
.app-content {
  flex: 1;
  padding: 16px;
}

/* Tab Content Transitions */
.tab-content {
  display: none;
  animation: fadeIn 0.25s ease-out forwards;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bottom Navigation Bar */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: var(--nav-height);
  background: rgba(10, 19, 15, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 100;
  padding: 6px 8px;
  box-sizing: border-box;
}

.nav-item {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.nav-item .nav-icon {
  font-size: 1.25rem;
}

.nav-item.active {
  color: var(--accent-green-bright);
  background: rgba(16, 185, 129, 0.12);
}

/* Card Styling */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* On-Course Hole View */
.hole-header-card {
  background: linear-gradient(135deg, rgba(16, 35, 27, 0.7), rgba(10, 19, 15, 0.9)), url('gosco_bg_hero.jpg') center/cover no-repeat;
  border: 1px solid var(--border-active);
  position: relative;
  overflow: hidden;
}

.course-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 2px 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.course-section-kicker {
  color: var(--accent-green-bright);
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
}

.hole-map-card {
  margin-top: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(26, 47, 38, 0.98), rgba(12, 27, 20, 0.98));
  border-color: var(--border-active);
}

.hole-map-header,
.map-yardage-summary,
.map-controls {
  display: flex;
  align-items: center;
}

.hole-map-header {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.hole-map-eyebrow {
  color: var(--accent-green-bright);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hole-map-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.map-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  padding: 3px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
}

.map-mode-button {
  min-height: 34px;
  padding: 5px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.map-mode-button.active {
  background: var(--accent-green);
  color: #fff;
}

.hole-map-disclosure {
  margin-bottom: 10px;
  padding: 9px 11px;
  background: rgba(5, 20, 14, 0.74);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.hole-map-disclosure strong {
  color: #fff;
}

.hole-map-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: var(--radius-md);
  background: #102c1e;
}

.hole-map-stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 330px;
}

.map-bunkers ellipse {
  fill: #e9ddae;
  stroke: #fff4c7;
  stroke-width: 1.5;
}

.map-feature-legend {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 10px;
  max-width: calc(100% - 16px);
  padding: 6px 9px;
  background: rgba(5, 18, 12, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 750;
  backdrop-filter: blur(8px);
}

.map-feature-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-swatch.fairway { background: #64c66b; }
.legend-swatch.bunker { background: #e9ddae; }
.legend-swatch.water { background: #2b83bd; }
.legend-swatch.green { background: #a7f3a7; }

.map-yardage-summary {
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.map-yardage-summary span {
  display: flex;
  flex-direction: column;
}

.map-yardage-summary strong {
  color: #fff;
}

.map-controls {
  gap: 7px;
  margin-top: 10px;
}

.compact-button {
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  font-size: 0.76rem;
}

.hole-strategy {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-surface-elevated);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.hole-strategy strong {
  color: var(--accent-gold-light);
}

.hole-strategy small {
  color: var(--text-dim);
  font-size: 0.68rem;
}

.real-map-source-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(52, 211, 153, 0.36);
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-green-bright);
  font-size: 0.7rem;
  font-weight: 800;
}

.real-map-status {
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-elevated);
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.real-map-status.is-available {
  border-color: rgba(52, 211, 153, 0.4);
  color: #a7f3d0;
}

.real-map-status.is-limited {
  border-color: rgba(245, 185, 66, 0.45);
  color: var(--accent-gold-light);
}

.real-map-status.is-error {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.real-map-viewport {
  overflow: hidden;
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: var(--radius-md);
  background: #102c1e;
}

.real-map-viewport.is-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 150px;
  align-content: center;
  padding: 18px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.real-map-viewport.is-empty strong {
  color: #fff;
  font-size: 0.88rem;
}

.real-map-stage {
  position: relative;
  overflow: hidden;
  background: #d6e3cd;
}

.real-map-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 230px;
  max-height: 420px;
}

.real-map-attribution {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.88);
  color: #17261d;
  font-size: 0.58rem;
}

.real-map-attribution a {
  color: #174f36;
}

.real-map-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--border-subtle);
  background: var(--border-subtle);
}

.real-map-details span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  background: var(--bg-surface-elevated);
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.real-map-details strong {
  color: #fff;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.real-map-links {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  background: var(--bg-surface-elevated);
  color: var(--accent-green-bright);
  font-size: 0.72rem;
}

.real-map-links .compact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.real-map-provider-note {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 0.68rem;
  line-height: 1.45;
}

.real-map-provider-note a,
.hole-strategy a {
  color: var(--accent-green-bright);
}

/* Player Color Theme Highlights */
.player-color-emerald { background: rgba(16, 185, 129, 0.15) !important; border-left: 3px solid var(--accent-green-bright) !important; }
.player-color-gold { background: rgba(245, 158, 11, 0.15) !important; border-left: 3px solid var(--accent-gold) !important; }
.player-color-blue { background: rgba(59, 130, 246, 0.15) !important; border-left: 3px solid var(--accent-blue) !important; }
.player-color-red { background: rgba(239, 68, 68, 0.15) !important; border-left: 3px solid var(--accent-red) !important; }
.player-color-purple { background: rgba(168, 85, 247, 0.15) !important; border-left: 3px solid #c084fc !important; }

.player-text-emerald { color: var(--accent-green-bright) !important; }
.player-text-gold { color: var(--accent-gold-light) !important; }
.player-text-blue { color: #60a5fa !important; }
.player-text-red { color: #f87171 !important; }
.player-text-purple { color: #c084fc !important; }

.btn-color-theme {
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: var(--bg-surface-elevated);
  cursor: pointer;
  font-size: 1.1rem;
  transition: transform 0.15s ease;
}
.btn-color-theme.active {
  border-color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
}

.hole-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hole-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-hole-nav {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-hole-nav:active:not(:disabled) {
  background: var(--accent-green);
}

.btn-hole-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.hole-title-group {
  text-align: center;
}

.hole-number-badge {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.hole-meta-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.meta-pill {
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-green-bright);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Quick Score Player Cards */
.player-score-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease;
}

.player-score-card.has-score {
  border-color: var(--border-active);
  background: linear-gradient(180deg, var(--bg-surface), #152720);
}

.player-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player-name-badge {
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.handicap-tag {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-muted);
}

.strokes-given-tag {
  font-size: 0.78rem;
  color: var(--accent-gold);
  font-weight: 600;
}

/* Score Input Controls */
.score-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.score-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-step {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-step:active {
  transform: scale(0.92);
  background: var(--accent-green);
  color: #fff;
}

.score-display-box {
  min-width: 64px;
  height: 52px;
  background: var(--bg-primary);
  border: 2px solid var(--border-active);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.score-val {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.score-empty {
  color: var(--text-dim);
  font-size: 1.2rem;
}

/* Hole Result Stats Pills */
.hole-stats-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stat-chip-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-chip-val {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
}

.pts-badge {
  background: linear-gradient(135deg, var(--accent-gold), #d97706);
  color: #000;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* Matrix Scorecard Table View */
/* .btn-primary and .btn-secondary are width:100% because they are normally
   stacked full-width. Dropped into a flex row beside an input, that makes the
   button demand the whole row and collapse the field next to it - the "Add a
   player" box ended up 22px wide with no visible text. Any flex row holding a
   form control keeps its buttons at their natural width and guarantees the
   input a usable minimum. */
.modal-body div[style*="display:flex"] > .btn-primary,
.modal-body div[style*="display:flex"] > .btn-secondary,
.modal-body div[style*="display: flex"] > .btn-primary,
.modal-body div[style*="display: flex"] > .btn-secondary {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
}

.modal-body div[style*="display:flex"] > input.form-input,
.modal-body div[style*="display:flex"] > select.form-input,
.modal-body div[style*="display: flex"] > input.form-input,
.modal-body div[style*="display: flex"] > select.form-input {
  flex: 1 1 auto;
  min-width: 110px;
}

/* Text input with a single-press clear button sitting inside the field. */
.input-with-clear {
  position: relative;
  display: block;
}

.input-with-clear .form-input {
  padding-right: 38px;
}

.btn-clear-input {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.btn-clear-input:hover,
.btn-clear-input:focus-visible {
  background: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}

/* Flex items default to min-width:auto, which refuses to shrink below their
   content. The scorecard wrapper's ancestors therefore grew to the full table
   width (673px inside a 375px phone), so the PAGE overflowed sideways instead
   of the table scrolling inside its wrapper - which is why later local players
   and every remote room group were unreachable on a phone. Allowing these
   containers to shrink is what makes overflow-x actually engage. */
.app-content,
.tab-content,
.card,
.card-header {
  min-width: 0;
}

.card-header > * {
  min-width: 0;
  max-width: 100%;
}

.scorecard-scroll-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.scorecard-table {
  /* width:100% with min-width:100% made the table shrink to the wrapper, so it
     could never overflow and overflow-x had nothing to scroll - columns were
     squeezed instead and later players (and all remote room groups) were
     unreachable. max-content lets the table take its natural width so the
     wrapper scrolls. */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: center;
  table-layout: fixed;
}

/* Live Sync roster entry: name, handicap, optional display label, add. */
.field-player-add-row {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) 72px minmax(130px, 1.4fr) auto;
  gap: 6px;
  margin-bottom: 10px;
  align-items: stretch;
}

@media (max-width: 560px) {
  .field-player-add-row {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .field-player-add-row #addFieldTeamLabelInput {
    grid-column: 1 / 2;
  }

  .field-player-add-row #btnAddFieldName {
    grid-column: 2 / 3;
  }
}

/* Every golfer owns the same three 32px columns (gross, net, points). Long
   remote-group labels used to make one golfer hundreds of pixels wide while a
   local golfer was squeezed narrow. Fixed col widths keep the matrix readable
   and predictable; horizontal scrolling reveals additional golfers. */
.scorecard-col-hole {
  width: 48px;
}

.scorecard-col-reference {
  width: 40px;
}

.scorecard-col-player {
  width: 32px;
}

.scorecard-table th,
.scorecard-table td {
  box-sizing: border-box;
  white-space: nowrap;
}

.scorecard-table th,
.scorecard-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.scorecard-table th {
  background: var(--bg-surface-elevated);
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-heading);
}

.col-sticky {
  position: sticky;
  left: 0;
  background: var(--bg-surface-elevated);
  z-index: 10;
}

/* The advanced matrix has three frozen reference columns. Explicit col widths
   and one shared set of offsets keep header, holes and totals aligned. Separate
   borders remain painted when sticky cells move in Safari. Scope this to the
   matrix: the history card has a different column layout. */
.scorecard-matrix-table {
  --scorecard-hole-width: 56px;
  --scorecard-reference-width: 40px;
  width: calc(var(--scorecard-hole-width) + 2 * var(--scorecard-reference-width) + var(--scorecard-player-count) * 96px);
  border-collapse: separate;
  border-spacing: 0;
}

.scorecard-matrix-table .scorecard-col-hole { width: var(--scorecard-hole-width); }
.scorecard-matrix-table .scorecard-col-reference { width: var(--scorecard-reference-width); }

.scorecard-matrix-table tr > :nth-child(-n+3) {
  position: sticky;
  z-index: 10;
  background: var(--bg-surface-elevated);
}

.scorecard-matrix-table tr > :first-child { left: 0; }
.scorecard-matrix-table tr > :nth-child(2) { left: var(--scorecard-hole-width); }
.scorecard-matrix-table tr > :nth-child(3) {
  left: calc(var(--scorecard-hole-width) + var(--scorecard-reference-width));
  box-shadow: 3px 0 4px rgba(0, 0, 0, 0.25);
}

.scorecard-matrix-table .row-out-subtotal > :nth-child(-n+3) { background: #123c2d; }
.scorecard-matrix-table .row-in-subtotal > :nth-child(-n+3) { background: #192f43; }
.scorecard-matrix-table .row-grandtotal > :nth-child(-n+3) { background: #b45309; }
.scorecard-matrix-table .scorecard-footer-labels > :nth-child(-n+3) { background: #0c1b14; }

.player-header-cell {
  width: 96px;
  max-width: 96px;
  overflow: hidden;
  background: linear-gradient(180deg, #1b3d30, #132b22) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

.player-header-cell > div {
  max-width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-subhead-cell {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-green-bright);
}

/* Table Subtotal & Total Rows */
.row-out-subtotal {
  background: rgba(16, 185, 129, 0.18) !important;
  font-weight: 800;
}

.row-out-subtotal td {
  border-top: 2px solid var(--accent-green);
  border-bottom: 2px solid var(--accent-green);
  color: #34d399;
}

.row-in-subtotal {
  background: rgba(59, 130, 246, 0.18) !important;
  font-weight: 800;
}

.row-in-subtotal td {
  border-top: 2px solid #3b82f6;
  border-bottom: 2px solid #3b82f6;
  color: #60a5fa;
}

.row-grandtotal {
  background: linear-gradient(90deg, #d97706, #b45309) !important;
  font-weight: 900;
  color: #fff;
}

.row-grandtotal td {
  border-top: 2px solid #f59e0b;
  border-bottom: 2px solid #f59e0b;
  font-size: 0.92rem;
  color: #ffffff;
}

.scorecard-footer-labels td {
  padding-top: 7px;
  padding-bottom: 7px;
  background: #0c1b14;
  border-top: 2px solid var(--border-subtle);
  border-bottom: 0;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.scorecard-footer-labels .col-sticky {
  color: var(--text-muted);
  text-align: left;
  text-transform: uppercase;
}

/* Customizable Thicker Score Column Dividers */
.scorecard-table td.player-col-end, .scorecard-table th.player-col-end {
  border-right-width: 3px !important;
  border-right-style: solid !important;
}

.divider-emerald .player-col-end { border-right-color: rgba(16, 185, 129, 0.6) !important; }
.divider-gold .player-col-end    { border-right-color: rgba(245, 158, 11, 0.7) !important; }
.divider-blue .player-col-end    { border-right-color: rgba(59, 130, 246, 0.7) !important; }
.divider-white .player-col-end   { border-right-color: rgba(255, 255, 255, 0.8) !important; }
.divider-red .player-col-end     { border-right-color: rgba(239, 68, 68, 0.7) !important; }

/* Points Cell Highlight */
.pts-cell {
  font-weight: 800;
  color: var(--accent-gold-light);
}

.net-cell {
  color: var(--text-muted);
}

.gross-cell {
  font-weight: 600;
}

/* Leaderboard */
.leaderboard-card {
  background: linear-gradient(135deg, #142e23, #0b1a13);
  border: 1px solid var(--border-active);
}

.rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.rank-item.rank-1 {
  border-color: var(--accent-gold);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), var(--bg-surface));
}

.rank-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-number {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-heading);
}

.rank-1 .rank-number {
  background: var(--accent-gold);
  color: #000;
}

.rank-player-name {
  font-weight: 700;
  font-size: 1rem;
}

.rank-right {
  display: flex;
  gap: 16px;
  text-align: right;
}

.rank-stat-box {
  display: flex;
  flex-direction: column;
}

.rank-stat-val {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
}

/* Form Inputs & Setup Drawer */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.round-settings-panel,
.player-count-panel,
.team-management-panel {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.round-settings-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  background:
    linear-gradient(135deg, rgba(13, 35, 25, 0.94), rgba(7, 21, 15, 0.97)),
    url('gosco_bg_hero.jpg') center 62% / cover no-repeat;
  border-color: rgba(52, 211, 153, 0.25);
}

.round-setting-field:last-child {
  grid-column: 1 / -1;
}

.setting-label {
  margin-bottom: 2px;
  color: #fff;
  font-size: 0.83rem;
  font-weight: 800;
}

.field-help {
  min-height: 1.2em;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.date-input-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 7px;
}

.round-date-input {
  color-scheme: dark;
  background: rgba(10, 19, 15, 0.92);
  font-size: 0.92rem;
  font-weight: 750;
}

.round-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1);
  opacity: 0.9;
}

.use-today-button {
  width: auto;
  min-width: 82px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.player-count-panel,
.team-management-panel {
  background: var(--bg-surface);
}

.setup-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: var(--accent-green-bright);
  font-size: 0.88rem;
  font-weight: 800;
}

.setup-panel-heading span {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  text-align: right;
}

.player-count-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.team-management-list {
  display: grid;
  gap: 7px;
  margin-bottom: 9px;
}

.team-management-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 7px 8px 7px 11px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.team-management-item-name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delete-team-button {
  width: auto;
  min-height: 32px;
  margin: 0;
  padding: 5px 9px;
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 0.7rem;
}

.add-team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.add-team-row .btn-secondary {
  width: auto;
  min-width: 88px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
}

.player-setup-card {
  margin-bottom: 10px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.player-setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.player-setup-title {
  color: var(--accent-green-bright);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

.roster-picker-button {
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 5px 9px;
  font-size: 0.7rem;
  white-space: nowrap;
}

.player-fields-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(86px, 0.65fr) minmax(140px, 1fr);
  gap: 8px;
}

.form-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-main);
  font-size: 0.95rem;
  font-family: var(--font-body);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.sync-provider-notice {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.42);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.sync-provider-notice strong {
  color: var(--accent-gold-light);
}

.room-code-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  gap: 8px;
}

.room-code-input {
  min-width: 170px;
  height: 48px;
  padding: 8px 14px;
  border: 2px solid rgba(52, 211, 153, 0.45);
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.room-join-button {
  width: auto;
  min-width: 112px;
  min-height: 48px;
  margin: 0;
  padding: 9px 15px;
  font-size: 0.84rem;
  white-space: nowrap;
}

.sync-status,
.scanner-status {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(5, 18, 12, 0.68);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.76rem;
}

.sync-status.is-error,
.scanner-status.is-error {
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.sync-status.is-warning,
.scanner-status.is-warning {
  color: var(--accent-gold-light);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.sync-status.is-success,
.scanner-status.is-success {
  color: var(--accent-green-bright);
  border: 1px solid rgba(52, 211, 153, 0.4);
}

.scanner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.scanner-actions .btn-secondary {
  min-height: 44px;
  margin: 0;
}

.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, var(--accent-green), #059669);
  border: none;
  color: #fff;
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  width: 100%;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 12px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 8px;
}

.player-setup-header .roster-picker-button {
  width: auto;
  max-width: 132px;
  min-height: 34px;
  margin: 0;
  padding: 5px 9px;
  white-space: nowrap;
}

.team-management-item .delete-team-button {
  width: auto;
  min-width: 68px;
  max-width: 82px;
  min-height: 32px;
  margin: 0;
  padding: 5px 9px;
}

/* Verification Toast Notification */
/* Interactive map: drag to pan, wheel/pinch to zoom. touch-action must be none
   or the browser scrolls the page instead of panning the map. */
.real-map-svg {
  touch-action: none;
  cursor: grab;
  user-select: none;
  display: block;
  width: 100%;
}

.real-map-svg.is-panning {
  cursor: grabbing;
}

.map-zoom-controls {
  position: absolute;
  right: 8px;
  bottom: 26px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-zoom-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 19, 15, 0.78);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-zoom-btn:hover {
  background: rgba(16, 185, 129, 0.8);
}

.map-layer-switch {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: rgba(10, 19, 15, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.map-layer-option {
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.map-layer-option.is-active {
  background: var(--accent-green-bright);
  color: #04120c;
}

/* Seven keys now (3-8 plus 9/NR), so they have to wrap rather than squeeze. */
.quick-keypad {
  flex-wrap: wrap;
}

.quick-keypad .keypad-btn {
  flex: 1 1 auto;
  min-width: 44px;
}

/* No Return reads as an outcome, not a stroke count, so it is set apart. */
.keypad-btn-nr {
  font-size: 0.82rem;
  letter-spacing: -0.02em;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: var(--accent-gold-light) !important;
}

.keypad-btn-nr.active {
  background: var(--accent-gold) !important;
  color: #1a1205 !important;
}

/* In simple mode the row is a two-column grid (name, score select), so the
   running totals span the full width underneath rather than squeezing into a
   third column. */
.simple-running-points {
  grid-column: 1 / -1;
  margin: 2px 0 0 0;
}

/* Running Stableford totals under each name on the score entry card. */
.running-points-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 2px 0;
}

.running-points-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
}

.running-points-chip.is-total {
  background: rgba(245, 158, 11, 0.18);
  border-color: var(--accent-gold);
}

.running-points-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.running-points-chip.is-total .running-points-label {
  color: var(--accent-gold-light);
}

.running-points-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
}

.running-points-chip.is-total .running-points-val {
  color: var(--accent-gold-light);
}

.running-points-played {
  font-size: 0.66rem;
  color: var(--text-dim);
  font-weight: 600;
  margin-left: auto;
}

/* Beta marker beside the version. Deliberately loud: the app is under active
   development and users should expect rough edges and report them. */
.beta-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--accent-gold);
  color: #1a1205;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
  vertical-align: middle;
}

/* Tells the user at a glance whether they are looking at the hole or at the
   whole course, so a zoomed-out fallback is never mistaken for the hole. */
.real-map-frame-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.real-map-frame-label.is-hole {
  background: rgba(16, 185, 129, 0.85);
  color: #04120c;
}

.real-map-frame-label.is-overview {
  background: rgba(245, 158, 11, 0.9);
  color: #1a1205;
}

/* Persistent sync status bar.
   Deliberately in normal document flow (not fixed/absolute) so it reserves its
   own space and can never sit on top of a control. Routine sync updates land
   here instead of firing a toast every 30 seconds. */
.sync-status-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-muted);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.sync-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 auto;
}

.sync-status-bar.is-synced .sync-status-dot { background: var(--accent-green-bright); }
.sync-status-bar.is-syncing .sync-status-dot { background: var(--accent-gold); }
.sync-status-bar.is-unsynced .sync-status-dot { background: #fbbf24; }
.sync-status-bar.is-error .sync-status-dot { background: #f87171; }

.sync-status-bar.is-synced .sync-status-text { color: var(--accent-green-bright); }
.sync-status-bar.is-syncing .sync-status-text { color: var(--accent-gold); }
.sync-status-bar.is-unsynced .sync-status-text { color: #fbbf24; }
.sync-status-bar.is-error .sync-status-text { color: #fca5a5; }

.sync-status-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-status-room {
  flex: 0 0 auto;
  font-family: monospace;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.toast-notice {
  position: fixed;
  /* Purely informational: never intercept input. */
  pointer-events: none;
  /* Sits just above the bottom nav rather than over the header. It previously
     covered the Players/Scores/Course/Full controls, and because it is a real
     element with pointer-events it swallowed taps on them for its whole
     lifetime - which happens after every score entry. */
  bottom: calc(var(--nav-height, 64px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(92vw, 560px);
  background: linear-gradient(135deg, #10b981, #047857);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  /* Modals use z-index 2000. Action feedback must remain visible when the
     action was triggered inside a modal. */
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: slideUpToast 0.3s ease-out forwards;
}

@keyframes slideUpToast {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Quick Score Selector Grid (Mobile Keypad) */
.quick-keypad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.keypad-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.keypad-btn.active {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green-bright);
}

.btn-lock-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-lock-toggle.is-locked {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--accent-red);
}

.btn-lock-toggle.is-unlocked {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--accent-green-bright);
}

.course-card-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-card-item.active-course {
  border-color: var(--accent-green-bright);
  background: rgba(16, 185, 129, 0.08);
}

.history-scorecard-accordion {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-subtle);
}

.history-scorecard-accordion.expanded {
  display: block;
}

.roster-card-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 480px) {
  .app-header {
    padding: 6px 8px;
    gap: 6px;
  }

  .brand-title {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* A phone cannot fit the icon, name, version, BETA and both buttons on one
     line - squeezing them clipped both labels to nothing. The actions take
     their own full-width row instead, where Live Sync gets real size. */
  .brand-row-actions {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: stretch;
  }

  .btn-install-app {
    flex: 0 0 auto;
  }

  .btn-live-sync {
    flex: 1 1 auto;
    max-width: none;
  }

  .header-actions {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .header-actions > button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 6px 3px;
    font-size: 0.66rem;
    white-space: nowrap;
  }

  .app-content {
    padding: 12px 8px;
  }

  .toast-notice {
    width: calc(100% - 24px);
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .room-code-row {
    grid-template-columns: 1fr;
  }

  .room-code-input,
  .room-join-button {
    width: 100%;
  }

  .round-settings-panel {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .round-setting-field:last-child {
    grid-column: auto;
  }

  .setup-panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .setup-panel-heading span {
    text-align: left;
  }

  .player-fields-grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  }

  .player-fields-grid .player-name-field {
    grid-column: 1 / -1;
  }
}

.btn-player-count {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.btn-player-count.active {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green-bright);
}

.version-badge {
  font-size: 0.68rem;
  background: rgba(16, 185, 129, 0.18);
  color: var(--accent-green-bright);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
}

.btn-share {
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #fff;
}

/* Modal Overlay & Dialog */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* dvh tracks the phone's collapsing address bar; vh above is the fallback. */
  height: 100dvh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* A modal taller than the screen used to be clipped at both ends with no way
     to reach the rest of it. The overlay scrolls, and the card scrolls inside it. */
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: fadeIn 0.2s ease-out;
}

/* Keep the card clear of the notch and the home indicator. */
@supports (padding: max(0px)) {
  .modal-overlay {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

.modal-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  padding: 20px;
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

.modal-action-status {
  margin: -2px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(52, 211, 153, 0.42);
  border-radius: var(--radius-sm);
  background: rgba(6, 78, 59, 0.48);
  color: #d1fae5;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.modal-action-status[hidden] {
  display: none;
}

.modal-action-status.is-error {
  border-color: rgba(248, 113, 113, 0.72);
  background: rgba(127, 29, 29, 0.58);
  color: #fee2e2;
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
}

.qr-code-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0;
}

#aboutModal .modal-card {
  background: linear-gradient(135deg, rgba(17, 34, 25, 0.88), rgba(7, 20, 14, 0.94)), url('gosco_bg_hero.jpg') center/cover no-repeat;
  border: 1px solid var(--border-active);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.about-brand-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  object-fit: cover;
}

.diagnostics-explainer,
.diagnostics-privacy-note {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(5, 18, 12, 0.78);
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: left;
}

.diagnostics-explainer {
  margin-bottom: 8px;
}

.diagnostics-explainer strong,
.diagnostics-privacy-note strong {
  color: var(--accent-gold-light);
}

.diagnostics-modal-card {
  width: min(92vw, 620px);
  max-width: 620px;
}

.diagnostics-field-list {
  margin: 10px 0 12px;
  padding-left: 20px;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.diagnostics-preview {
  min-height: 230px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre;
}

.diagnostics-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.diagnostics-actions .btn-primary,
.diagnostics-actions .btn-secondary {
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  font-size: 0.8rem;
}

@media (max-width: 600px) {
  .real-map-details {
    grid-template-columns: 1fr;
  }

  .real-map-svg {
    min-height: 210px;
  }

  .real-map-links {
    flex-wrap: wrap;
  }
}

/* A cold launch starts with one decision instead of dropping a new golfer into
   the advanced scorecard without context. */
body.welcome-ui-active {
  padding-bottom: 0;
  background: #071811;
}

body.welcome-ui-active .app-header,
body.welcome-ui-active #syncStatusBar,
body.welcome-ui-active .course-conflict-banner,
body.welcome-ui-active .app-content,
body.welcome-ui-active .bottom-nav,
body.welcome-ui-active .simple-mode-view {
  display: none !important;
}

.welcome-mode-view {
  min-height: 100vh;
  padding: max(28px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
  background:
    linear-gradient(rgba(5, 18, 12, 0.62), rgba(5, 18, 12, 0.86)),
    url('gosco_bg_hero.jpg') 60% center / cover no-repeat;
}

.welcome-mode-panel {
  width: min(100%, 430px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.welcome-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-brand-icon {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.welcome-app-name {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
}

.welcome-app-subtitle,
.welcome-heading p,
.welcome-action-detail {
  color: #cbd5e1;
}

.welcome-app-subtitle {
  font-size: 0.78rem;
  font-weight: 650;
}

.welcome-heading h1 {
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(1.8rem, 8vw, 2.45rem);
  line-height: 1.08;
}

.welcome-heading p {
  max-width: 36ch;
  font-size: 0.96rem;
  line-height: 1.5;
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.welcome-action,
.welcome-join-panel {
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  background: rgba(8, 18, 14, 0.9);
  color: #fff;
}

.welcome-action {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 76px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.welcome-action-primary {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 78, 59, 0.92);
}

.welcome-action-title,
.welcome-join-panel > label {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.welcome-action-detail {
  font-size: 0.8rem;
  line-height: 1.4;
}

.welcome-join-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.welcome-join-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 5px;
}

.welcome-join-row input,
.welcome-join-row button {
  min-height: 48px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 750;
}

.welcome-join-row input {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #101d18;
  color: #fff;
  text-transform: uppercase;
}

.welcome-join-row button {
  padding: 10px 18px;
  border: 0;
  background: var(--accent-green-bright);
  color: #04120c;
  cursor: pointer;
}

.welcome-join-status {
  min-height: 1.2em;
  color: #fca5a5;
  font-size: 0.75rem;
}

/* Streamlined portrait room scoring. The existing advanced interface remains
   in the DOM and is only hidden while this persisted mode is active. */
body.simple-ui-active {
  padding-bottom: 0;
  position: relative;
  isolation: isolate;
  background: #071811;
}

body.simple-ui-active::before,
body.simple-ui-active::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.simple-ui-active::before {
  z-index: -2;
  background: url('gosco_bg_hero.jpg') 60% center / cover no-repeat;
}

body.simple-ui-active::after {
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(5, 18, 12, 0.48),
    rgba(5, 18, 12, 0.72)
  );
}

body.simple-ui-active .app-container {
  max-width: 430px;
}

body.simple-ui-active .app-header,
body.simple-ui-active #syncStatusBar,
body.simple-ui-active .course-conflict-banner,
body.simple-ui-active .app-content,
body.simple-ui-active .bottom-nav {
  display: none !important;
}

.simple-mode-view {
  min-height: 100vh;
  position: relative;
  background: rgba(7, 24, 17, 0.18);
}

.simple-mode-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(7, 24, 17, 0.88);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.simple-mode-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.simple-mode-brand-icon {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.simple-mode-app-name {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}

.simple-mode-event-name {
  max-width: 230px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-mode-more-button,
.simple-hole-button,
.simple-count-button,
body.simple-ui-active .simple-score-page .simple-primary-button {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: 6px;
  box-shadow: 0 -10px 16px -6px var(--bg-base, rgba(9, 17, 13, 0.95));
}

/* The pinned button sits over the list, so it needs its own ground rather than
   letting golfer rows show through it. */
body.simple-ui-active .simple-score-page .simple-primary-button::before {
  content: '';
  position: absolute;
  inset: -6px -12px 0 -12px;
  background: var(--bg-base, #09110d);
  z-index: -1;
}

.simple-primary-button,
.simple-secondary-button,
.simple-menu-button {
  appearance: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 750;
  cursor: pointer;
}

.simple-mode-more-button {
  min-width: 76px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(3, 7, 18, 0.76);
  color: #fff;
  font-size: 0.9rem;
}

.simple-mode-content {
  padding: 16px;
}

.simple-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.simple-page-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.simple-page-heading h1 {
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.2;
}

.simple-page-heading p {
  color: #cbd5e1;
  font-size: 0.9rem;
}

.simple-room-success,
.simple-sync-line,
.simple-score-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d1fae5;
  font-size: 0.78rem;
  font-weight: 650;
}

.simple-team-name {
  padding: 9px 11px;
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
  font-size: 0.88rem;
  font-weight: 800;
}

.simple-room-success,
.simple-score-summary {
  justify-content: space-between;
  padding: 9px 11px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.1);
}

.simple-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-green-bright);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

.simple-count-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.simple-count-button {
  min-height: 46px;
  border: 1px solid var(--border-subtle);
  background: rgba(18, 33, 27, 0.86);
  color: var(--text-main);
  font-size: 1rem;
}

.simple-count-button.is-active {
  border-color: var(--accent-green-bright);
  background: var(--accent-green);
  color: #04120c;
}

.simple-group-fields,
.simple-score-list,
.simple-more-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.simple-group-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #e5e7eb;
  font-size: 0.82rem;
  font-weight: 700;
}

.simple-select,
.simple-hole-select {
  /* Safari renders a native menulist and ignores min-height on it entirely, so
     every simple-mode picker came out about 33px tall on an iPhone however
     large the CSS asked for - on exactly the devices the larger controls were
     added for. Dropping the native appearance makes WebKit honour the box, and
     the chevron below replaces the one that disappears with it. The 38px of
     right padding was already reserved for it. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px 15px;
  width: 100%;
  min-height: 48px;
  padding: 10px 30px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  background-color: rgba(18, 33, 27, 0.96);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
}

.simple-primary-button,
.simple-secondary-button,
.simple-menu-button {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-size: 0.96rem;
}

.simple-primary-button {
  border: 0;
  background: linear-gradient(135deg, var(--accent-green), #059669);
  color: #fff;
  box-shadow: 0 5px 16px rgba(16, 185, 129, 0.25);
}

.simple-secondary-button,
.simple-menu-button {
  border: 1px solid var(--border-subtle);
  background: rgba(18, 33, 27, 0.9);
  color: var(--text-main);
}

.simple-menu-button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.simple-menu-button > span:first-child {
  width: 24px;
  flex: 0 0 24px;
  text-align: center;
}

.simple-advanced-button {
  margin-top: 4px;
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--accent-gold-light);
}

.simple-primary-button:disabled,
.simple-secondary-button:disabled,
.simple-hole-button:disabled,
.simple-count-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.simple-empty-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.08);
  color: #fde68a;
}

.simple-empty-state span {
  color: #d1d5db;
  font-size: 0.82rem;
}

.simple-hole-navigation {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 9px;
  align-items: stretch;
}

.simple-hole-button {
  min-height: 62px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  background: rgba(18, 33, 27, 0.9);
  color: #fff;
  font-size: 1.7rem;
}

.simple-hole-picker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.simple-hole-picker span:last-child {
  color: #e5e7eb;
  font-size: 1.3rem;
  font-weight: 800;
  /* No nowrap: at 200% text "Par 4 · SI 10" is wider than a phone, and forcing
     it onto one line pushes it off the side instead of onto a second. */
  overflow-wrap: anywhere;
  text-align: center;
}

.simple-hole-select {
  min-height: 52px;
  padding-block: 6px;
  text-align: center;
}

.simple-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 9rem);
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  background: rgba(18, 33, 27, 0.9);
}

.simple-player-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 800;
}

.simple-player-name.is-complete {
  color: #4ade80;
}

.simple-player-name span:last-child {
  overflow-wrap: anywhere;
}

.simple-complete-mark {
  width: 20px;
  flex: 0 0 20px;
  text-align: center;
}

.simple-score-select {
  min-height: 56px;
}

/* Simple scoring is designed to be read at arm's length. Each points label
   has its own line, and the played count wraps below at narrow/text-zoom sizes. */
.simple-running-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px;
}

.simple-running-points {
  gap: 6px;
}

.simple-running-points .running-points-chip {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 5px;
  padding: 5px 4px;
  border-radius: 10px;
  text-align: center;
  min-width: 0;
}

.simple-running-points .running-points-label {
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #cbd5e1;
  overflow-wrap: anywhere;
}

.simple-running-points .running-points-val {
  font-size: 1.75rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.simple-score-summary,
.simple-sync-line { font-size: 0.95rem; }
.simple-score-summary {
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 2px;
}

.simple-sync-line {
  flex-wrap: wrap;
  color: #cbd5e1;
}

.simple-sync-line strong {
  margin-left: auto;
  color: var(--accent-green-bright);
}

.setup-simple-mode-button {
  margin-bottom: 14px;
}

@media (max-width: 360px) {
  .simple-mode-content {
    padding: 12px;
  }

  .simple-score-row {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 8.5rem);
    gap: 8px;
    padding-inline: 10px;
  }

  .simple-mode-event-name {
    max-width: 170px;
  }
}

/* ---------------------------------------------------------------------------
   Minimum readable input size on touch screens.

   iOS Safari zooms the whole page when a field with text under 16px takes
   focus, and does not zoom back out. Mid-round that throws the scorecard
   sideways and the next tap lands on the wrong hole. Several fields had been
   set to 0.76-0.8rem, which computes to roughly 12-15px.

   font-size is raised to 16px on touch-sized viewports only, so the desktop
   layout keeps its denser type. Everything else about the field is untouched.
--------------------------------------------------------------------------- */
@media (max-width: 820px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="password"],
  select,
  textarea,
  .form-input {
    font-size: 16px !important;
  }
}

/* Keep the touch-input minimum above from shrinking intentionally larger
   simple-mode pickers back to 16px. Respect text zoom via rem units. */
.simple-score-select,
.simple-hole-select { font-size: 1.5rem !important; }

/* A close button still has to be hittable with a thumb. 24x34 was not. */
.btn-close-modal {
  min-width: 44px;
  min-height: 44px;
}

/* ---------------------------------------------------------------------------
   Header tools: collapsed on phones, always open on desktop.

   The six setup controls occupied two rows above the fold on a 375px screen.
   Combined with the brand row and the sync bar that left roughly one hole of
   scorecard visible, on an app whose whole job is to be glanced at between
   shots. They are one tap away now.
--------------------------------------------------------------------------- */
.btn-header-tools {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 14px;
  min-height: 44px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.btn-header-tools[aria-expanded="true"] .header-tools-caret { transform: rotate(180deg); }
.header-tools-caret { transition: transform 0.15s ease; }

@media (max-width: 820px) {
  body.layout-compact .btn-header-tools { display: flex; }
  body.layout-compact .header-actions { display: none; }
  body.layout-compact .header-actions.is-open { display: flex; }
}

/* ---------------------------------------------------------------------------
   Editable cells, marked without spending width.

   A pencil glyph on every par and S.I. cell widened both columns across all 18
   rows. Those columns are overhead - they push the golfers off the side of a
   phone. A dotted underline carries the same meaning in zero extra pixels.
--------------------------------------------------------------------------- */
.is-editable {
  text-decoration: underline dotted var(--accent-gold);
  text-underline-offset: 3px;
}

/* The hole, par and S.I. columns are reference data, not the point of the
   screen. Keeping them narrow buys roughly one more golfer before scrolling. */
body.layout-compact .scorecard-matrix-table {
  --scorecard-hole-width: 52px;
  --scorecard-reference-width: 36px;
}
body.layout-compact .scorecard-table th,
body.layout-compact .scorecard-table td { padding-left: 4px; padding-right: 4px; }

.si-header { user-select: none; -webkit-user-select: none; }

/* ---------------------------------------------------------------------------
   Screen layout choice (More tab).

   Two named options rather than a toggle: a tester comparing layouts has to be
   able to see which one is active without pressing anything.
--------------------------------------------------------------------------- */
.layout-choice-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 14px 0;
}
.layout-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 480px) {
  .layout-choice-row { grid-template-columns: 1fr; }
}
.layout-choice-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 0;
  padding: 10px 12px;
  min-height: 44px;
  text-align: left;
  white-space: normal;
}
.layout-choice-option strong { font-size: 0.9rem; color: #fff; }
.layout-choice-option span {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.35;
}
.layout-choice-option.is-chosen {
  border-color: var(--accent-green-bright);
  background: rgba(16, 185, 129, 0.14);
}
.layout-choice-option.is-chosen strong { color: var(--accent-green-bright); }
.layout-choice-option.is-chosen::after {
  content: '✓ in use';
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--accent-green-bright);
  letter-spacing: 0.04em;
}