/* === Rebel Golf — Premium Dark Theme (Play) === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-primary: #090909;
  --bg-card: #121212;
  --bg-surface: #1a1918;
  --text-primary: #ede8df;
  --text-secondary: #6e6860;
  --text-muted: #3a3632;
  --accent-gold: #c9a84c;
  --accent-gold-soft: rgba(201,168,76,0.18);
  --accent-gold-dim: rgba(201,168,76,0.08);
  --accent-green: #2a9d5c;
  --accent-green-bright: #4ade80;
  --accent-red: #b83232;
  --accent-yellow: #e6b33d;
  --accent-blue: #4a7fa5;
  --accent-orange: #d4763b;
  --border: #1e1d1b;
  --border-gold: rgba(201,168,76,0.22);
  --nav-height: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* === Screens === */
.screen {
  display: none;
  height: calc(100vh - var(--nav-height) - var(--safe-bottom));
  height: calc(100dvh - var(--nav-height) - var(--safe-bottom));
  overflow-y: auto;
  padding: 10px 14px 16px;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: block; }

/* === Overlay === */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(9,9,9,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  text-align: center;
}
.overlay.hidden { display: none; }
.overlay-content p { margin-top: 14px; font-size: 15px; color: var(--text-secondary); }
.overlay-content .small { font-size: 12px; color: var(--text-muted); }

.spinner {
  width: 38px; height: 38px;
  margin: 0 auto;
  border: 2px solid var(--border);
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Hole Navigation Strip === */
.hole-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 4px;
  margin-bottom: 10px;
}
.hole-nav-btn {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: 16px;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.hole-nav-btn:active {
  color: var(--accent-gold);
  border-color: var(--border-gold);
}
.hole-info { text-align: center; }
.hole-number {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  display: block;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.hole-par, .hole-si {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 6px;
  letter-spacing: 0.5px;
}
.hole-yardage {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

/* === Green Distances === */
.green-distances {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  margin: 20px 0 24px;
}
.green-dist { text-align: center; }
.green-dist .label {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
  font-weight: 600;
}
.green-dist .value {
  display: block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.green-dist.front .value,
.green-dist.back .value {
  font-size: 22px;
  color: var(--text-secondary);
}
.green-dist.center .value {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 900;
  color: var(--accent-gold);
  line-height: 1;
  text-shadow: 0 0 40px rgba(201,168,76,0.15);
}

/* === Section Labels === */
.section-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

/* === Hazard List === */
.hazard-list { margin-bottom: 8px; }
.hazard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.hazard-icon { width: 24px; font-size: 13px; text-align: center; }
.hazard-icon.bunker { color: var(--accent-yellow); }
.hazard-icon.water  { color: var(--accent-blue); }
.hazard-icon.ob     { color: var(--accent-red); }
.hazard-label { flex: 1; margin-left: 10px; font-size: 13px; color: var(--text-secondary); }
.hazard-dist {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  text-align: right;
  color: var(--text-primary);
}
.hazard-arrow {
  width: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin-left: 6px;
}

.empty-msg {
  text-align: center;
  color: var(--text-muted);
  padding: 14px;
  font-size: 12px;
  letter-spacing: 0.3px;
}

/* === Pace of Play Bar === */
.pace-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}
.pace-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  letter-spacing: 0.5px;
}
.pace-ok   { color: var(--accent-green); }
.pace-slow { color: var(--accent-red); }
.pace-fast { color: var(--accent-blue); }

/* === GPS Accuracy Bar === */
.gps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.gps-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.gps-dot.excellent { background: var(--accent-green); }
.gps-dot.good      { background: var(--accent-yellow); }
.gps-dot.fair      { background: var(--accent-orange); }
.gps-dot.poor      { background: var(--accent-red); animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* === Buttons === */
.btn-primary {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--accent-gold);
  color: #0a0805;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 54px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-body);
  transition: opacity 0.15s;
}
.btn-primary:active { opacity: 0.82; }

.btn-secondary {
  padding: 11px 18px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:active {
  border-color: var(--border-gold);
  color: var(--accent-gold);
}

.round-actions-row {
  display: flex;
  gap: 10px;
  padding: 12px 0 0;
  align-items: center;
}
.round-actions-row .btn-secondary { flex: 1; text-align: center; }

.btn-finish-round {
  width: 100%;
  padding: 14px 20px;
  background: var(--accent-gold);
  color: #0a0805;
  border: none;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-body);
}
.btn-finish-round:active { opacity: 0.8; }
#finish-round-section { flex: 1; }

/* === Card Review Modal === */
.card-review-subtitle {
  color: var(--text-muted);
  font-size: 12px;
  margin: 4px 0 14px;
  text-align: center;
  letter-spacing: 0.3px;
}
.cr-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  max-height: 55vh;
  overflow-y: auto;
}
.cr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cr-table thead th {
  background: var(--bg-surface);
  color: var(--text-muted);
  font-weight: 600;
  padding: 8px 10px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
  font-size: 10px;
  text-transform: uppercase;
}
.cr-table thead th:first-child { text-align: left; }
.cr-table td {
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.cr-table td.cr-hole { text-align: left; color: var(--text-muted); font-weight: 600; }
.cr-table td.cr-par  { color: var(--text-muted); }
.cr-table tr:last-child td { border-bottom: none; }
.cr-pts { font-size: 10px; color: var(--text-muted); margin-left: 3px; }
.cr-eagle  { color: var(--accent-gold); font-weight: 800; }
.cr-birdie { color: var(--accent-green-bright); font-weight: 700; }
.cr-par    { color: var(--accent-blue); }
.cr-bogey  { color: var(--text-secondary); }
.cr-double { color: var(--accent-red); }
.cr-empty  { color: var(--text-muted); }
.cr-totals td { background: var(--bg-surface); font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--border-gold); }

.btn-mark-shot { margin-top: 10px; }

/* === Shot Tracker === */
.tracker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  font-weight: 600;
}

.shot-list { margin-bottom: 8px; }
.shot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.shot-num  { width: 28px; font-weight: 700; color: var(--accent-gold); font-size: 13px; }
.shot-club { flex: 1; color: var(--text-secondary); font-size: 13px; }
.shot-distance { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* Club Selector Grid */
.club-selector { margin: 8px 0; }
.club-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.club-btn {
  padding: 10px 4px;
  min-height: 44px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.club-btn:active,
.club-btn.selected {
  background: var(--accent-gold-dim);
  color: var(--accent-gold);
  border-color: var(--border-gold);
}
.club-btn.club-btn-active {
  background: var(--accent-gold-dim);
  color: var(--accent-gold);
  border-color: var(--border-gold);
  font-weight: 700;
}
.club-btn.club-btn-suggested {
  position: relative;
  border-color: #2a9d5c;
  color: #2a9d5c;
}
.club-btn.club-btn-suggested::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a9d5c;
}
.club-btn-putter {
  grid-column: 1 / -1;
  font-size: 13px;
  margin-top: 2px;
}
.shot-item {
  cursor: pointer;
}
.shot-item:active {
  background: var(--bg-surface);
}
.shot-club-unset {
  color: var(--text-muted);
  font-style: italic;
  font-size: 12px;
}

/* NFC toggle row */
.nfc-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.nfc-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.nfc-toggle-label input[type=checkbox] {
  accent-color: var(--accent-gold);
  width: 16px;
  height: 16px;
}
.btn-nfc-setup {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--font-body);
}

/* NFC listening hint (shown inside club selector when NFC active) */
.nfc-listening-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(201,168,76,0.1);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  color: var(--accent-gold);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.club-selector.nfc-listening .nfc-listening-hint {
  display: flex;
}

/* Putts */
.end-hole-section { margin: 8px 0; }
.putt-buttons { display: flex; gap: 8px; margin-top: 6px; }
.btn-putt {
  flex: 1;
  padding: 14px 0;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-putt:active,
.btn-putt.selected {
  background: var(--accent-gold-dim);
  color: var(--accent-gold);
  border-color: var(--border-gold);
}

.tracker-actions { margin: 12px 0; text-align: center; }

/* === Mini Scorecard === */
.scorecard-mini { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scorecard-mini table, .scorecard-full table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.scorecard-mini th, .scorecard-mini td,
.scorecard-full th, .scorecard-full td {
  padding: 5px 6px;
  text-align: center;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.scorecard-mini th, .scorecard-full th {
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.si-col { color: var(--text-muted); font-size: 10px; }

/* Score colour coding */
.score-eagle  { background: var(--accent-gold); color: #080604; font-weight: 800; border-radius: 50%; width: 24px; height: 24px; line-height: 24px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.score-birdie { background: #b71c1c; color: #fff; font-weight: 600; border-radius: 50%; width: 22px; height: 22px; line-height: 22px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.score-par    { color: var(--text-primary); display: inline-block; }
.score-bogey  { background: #1a3a52; color: #a0c4de; font-weight: 600; border-radius: 3px; width: 22px; height: 22px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.score-double { background: #1a3a52; color: #a0c4de; font-weight: 600; border-radius: 3px; outline: 2px solid #2a5a7a; outline-offset: 2px; width: 22px; height: 22px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.score-triple { background: #1c1c1c; color: #666; font-weight: 700; border-radius: 3px; outline: 2px solid #333; outline-offset: 2px; width: 22px; height: 22px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.scorecard-current-hole { background: rgba(201,168,76,0.07); font-style: italic; }

/* Counter value score colours */
.counter-value.score-eagle  { color: var(--accent-gold); }
.counter-value.score-birdie { color: var(--accent-green-bright); }
.counter-value.score-par    { color: var(--text-primary); }
.counter-value.score-bogey  { color: var(--accent-orange); }
.counter-value.score-double { color: var(--accent-red); }

/* === Round Summary === */
.summary-header { text-align: center; padding: 16px 0 10px; }
.summary-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.summary-course { color: var(--text-muted); font-size: 12px; margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; }
.summary-date   { color: var(--text-muted); font-size: 11px; margin-top: 2px; }

.summary-score { text-align: center; margin: 16px 0; }
.big-score {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent-gold);
}
.score-to-par { font-size: 18px; margin-top: 4px; color: var(--text-secondary); }

.summary-grid { display: flex; gap: 8px; margin-bottom: 14px; }
.summary-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
}
.stat-label { display: block; font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.stat-value { display: block; font-size: 22px; font-weight: 700; margin-top: 5px; color: var(--accent-gold); }

.club-stats { margin-bottom: 14px; }
.club-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 3px;
  font-size: 13px;
}
.club-stat-name  { font-weight: 600; color: var(--text-primary); }
.club-stat-avg   { color: var(--accent-gold); font-weight: 700; }
.club-stat-count { color: var(--text-muted); font-size: 11px; }

.summary-actions { display: flex; gap: 8px; margin: 18px 0; }
.summary-actions .btn-primary,
.summary-actions .btn-secondary { flex: 1; }

/* === Course Mapper === */
.mapper-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.mapper-title { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
.mapper-hole-nav { display: flex; align-items: center; gap: 8px; }

.mapper-map {
  width: 100%;
  height: 45vh;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0d0d0d;
  margin: 8px 0;
  border: 1px solid var(--border);
}

.mapper-controls { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.mapper-controls label { font-size: 11px; color: var(--text-muted); }
.mapper-controls select {
  flex: 1;
  padding: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-body);
}

.mapper-hazard-label { margin: 6px 0; }
.mapper-hazard-label input {
  width: 100%;
  padding: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-body);
}

.mapper-status { text-align: center; font-size: 11px; color: var(--text-muted); margin: 6px 0; letter-spacing: 0.5px; }

.mapper-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 6px 0; font-size: 11px; }
.mapper-check-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.mapper-check-item.done    { color: var(--accent-green); }
.mapper-check-item.pending { color: var(--text-muted); }

.mapper-actions { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.mapper-actions .btn-primary,
.mapper-actions .btn-secondary { flex: 1; min-width: 80px; font-size: 11px; padding: 10px 8px; }

/* === Modal === */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 20px;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 100%;
  max-width: 340px;
}
.modal-header {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-content h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
}
.modal-content label {
  display: block;
  margin: 10px 0 4px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.modal-content select,
.modal-content input[type="text"] {
  width: 100%;
  padding: 9px 10px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 4px;
  font-family: var(--font-body);
}
.modal-content label input[type="checkbox"] { margin-right: 6px; }
.modal-actions { margin-top: 18px; display: flex; gap: 8px; align-items: center; }

.modal-content input[type="date"] {
  width: 100%;
  padding: 9px 10px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 4px;
  font-family: var(--font-body);
  color-scheme: dark;
}
.label-optional {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.input-code {
  text-transform: uppercase;
  letter-spacing: 6px;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center;
  color: var(--accent-gold) !important;
}
.modal-error {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(184,50,50,0.12);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(184,50,50,0.3);
}
.modal-confirm-msg {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.5;
}
.btn-danger {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
}

/* Toast */
.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 300;
  white-space: nowrap;
  animation: toast-in 0.2s ease;
}
.toast.toast-success { border-color: var(--accent-green); color: var(--accent-green-bright); }
.toast.toast-error   { border-color: var(--accent-red);   color: #ff6b6b; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* === Bottom Navigation === */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 200;
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 8px;
  cursor: pointer;
  gap: 2px;
  padding: 4px 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-body);
  transition: color 0.15s;
  min-width: 0;
}
.nav-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nav-btn.active { color: var(--accent-gold); }
.nav-icon { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }

/* === History Screen === */
.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 6px;
}
.history-header h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.history-count { font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; }

.history-list { padding-bottom: 8px; }
.history-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.history-card-info { flex: 1; min-width: 0; }
.history-card-date { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.history-card-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.3px; }
.history-card-winner { font-size: 12px; color: var(--accent-gold); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-card-pts { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--accent-gold); text-align: center; flex-shrink: 0; }
.history-card-pts-label { font-size: 9px; color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: 1px; }
.history-card-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.btn-view-round {
  padding: 7px 12px;
  background: var(--accent-gold-dim);
  color: var(--accent-gold);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
}
.btn-delete-round {
  padding: 7px 12px;
  background: none;
  color: var(--accent-red);
  border: 1px solid rgba(184,50,50,0.3);
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-body);
}

/* Lifetime club distances */
.lifetime-clubs { margin-bottom: 4px; }
.lifetime-club-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  gap: 8px;
}
.lifetime-club-name { font-weight: 600; font-size: 13px; width: 72px; flex-shrink: 0; color: var(--text-primary); }
.lifetime-club-avg  { font-size: 20px; font-weight: 700; color: var(--accent-gold); font-variant-numeric: tabular-nums; width: 56px; flex-shrink: 0; }
.lifetime-club-avg-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.lifetime-club-range { flex: 1; }
.lifetime-club-bar-wrap { height: 3px; background: var(--bg-surface); border-radius: 2px; margin-top: 3px; position: relative; }
.lifetime-club-bar { height: 3px; background: var(--accent-gold); border-radius: 2px; opacity: 0.25; }
.lifetime-club-bar-avg { position: absolute; top: -2px; width: 2px; height: 7px; background: var(--accent-gold); border-radius: 1px; }
.lifetime-club-meta { font-size: 10px; color: var(--text-muted); text-align: right; flex-shrink: 0; }

/* Round Detail Modal */
.round-detail-content { max-height: 88vh; overflow-y: auto; width: 100%; max-width: 400px; }
.round-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.round-detail-date   { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.round-detail-course { font-size: 11px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.5px; }

/* === Scoring Screen === */
.score-hole-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 4px;
  margin-bottom: 12px;
}
.score-hole-info { text-align: center; }
.score-hole-label { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); }
.score-hole-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; }

/* Player Card */
.player-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 8px;
}
.player-card-header { display: flex; align-items: center; margin-bottom: 12px; gap: 8px; }
.player-card-name { font-weight: 700; font-size: 15px; flex: 1; color: var(--text-primary); }
.player-card-hcp  { font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; }
.player-card-pts {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg-surface);
  color: var(--text-muted);
  min-width: 52px;
  text-align: center;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
}
.player-card-pts.pts-4 { background: rgba(201,168,76,0.12); color: var(--accent-gold); border-color: var(--border-gold); font-weight: 800; }
.player-card-pts.pts-3 { background: rgba(42,157,92,0.12);  color: var(--accent-green-bright); border-color: rgba(42,157,92,0.25); }
.player-card-pts.pts-2 { background: rgba(74,127,165,0.12); color: var(--accent-blue); border-color: rgba(74,127,165,0.25); }
.player-card-pts.pts-1 { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border); }
.player-card-pts.pts-0 { background: rgba(184,50,50,0.1); color: var(--accent-red); border-color: rgba(184,50,50,0.25); }

.player-card-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.player-card-row:last-child { margin-bottom: 0; }
.player-card-label { font-size: 11px; color: var(--text-muted); width: 56px; letter-spacing: 0.3px; }

/* Counter */
.counter-group {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.counter-btn {
  width: 44px; height: 42px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.1s;
}
.counter-btn:active { color: var(--accent-gold); }
.counter-value {
  width: 48px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.btn-save-hole { margin: 4px 0 10px; }

/* Hole Flyover Map */
.hole-map-details { margin: 10px 0; }
.hole-map-summary {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-weight: 600;
}
.hole-map-summary::-webkit-details-marker { display: none; }
.hole-map-container {
  width: 100%;
  height: 260px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid var(--border);
}
.map-marker { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.map-tee    { width:26px;height:26px;background:#fff;color:#000; }
.map-green  { width:26px;height:26px;background:#1a4a28;color:#fff;font-size:14px; }
.map-hazard { width:22px;height:22px;background:#8b2500;color:#fff; }
.map-shot   { width:20px;height:20px;background:#1a4a6a;color:#fff;font-size:11px; }
.map-player { width:16px;height:16px;background:#2a7a4a;color:#fff;border-radius:50%;font-size:10px; }

/* GPS shots collapsible */
.gps-shots-details { margin-bottom: 8px; }
.gps-shots-summary {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-weight: 600;
}
.gps-shots-summary::-webkit-details-marker { display: none; }
.shots-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Players in settings */
.settings-player-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.player-name-input {
  flex: 2; padding: 8px 10px;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--font-body);
}
.player-hcp-input {
  flex: 1; padding: 8px;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; text-align: center; min-width: 0;
  font-family: var(--font-body);
}
.player-delete-btn { background: none; border: none; color: var(--accent-red); font-size: 16px; cursor: pointer; padding: 4px 6px; flex-shrink: 0; opacity: 0.7; }
.btn-add-player { width: 100%; margin-top: 2px; font-size: 12px; padding: 9px; }

/* === Full Scorecard Screen === */
.sc-header { padding: 14px 0 10px; border-bottom: 1px solid var(--border); }
.sc-course-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-primary); }
.sc-round-info  { font-size: 11px; color: var(--text-muted); margin-top: 3px; letter-spacing: 0.3px; }

.sc-player-headers {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  padding: 8px 12px;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border-gold);
}
.sc-ph-hole, .sc-ph-par, .sc-ph-si { font-size: 9px; font-weight: 700; color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: 1px; }
.sc-ph-hole { width: 32px; }
.sc-ph-par  { width: 32px; }
.sc-ph-si   { width: 28px; }
.sc-ph-player { flex: 1; font-size: 12px; font-weight: 700; text-align: center; color: var(--accent-gold); overflow: hidden; text-overflow: ellipsis; }

.sc-holes { overflow-y: auto; }
.sc-hole-row { display: flex; align-items: center; padding: 10px 12px; gap: 4px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.sc-hole-row:nth-child(even) { background: rgba(255,255,255,0.01); }
.sc-active-hole { background: rgba(201,168,76,0.06) !important; }
.sc-subtotal-row { display: flex; align-items: center; padding: 8px 12px; gap: 4px; background: rgba(255,255,255,0.04); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.sc-hole-num  { width: 32px; font-size: 14px; font-weight: 700; text-align: center; color: var(--text-muted); }
.sc-hole-par  { width: 32px; font-size: 14px; text-align: center; color: var(--text-muted); }
.sc-hole-si   { width: 28px; font-size: 12px; text-align: center; color: var(--text-muted); }
.sc-hole-score { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 18px; font-weight: 600; line-height: 1; }
.sc-blank { color: var(--text-muted); font-size: 20px; }
.sc-pts-inline { font-size: 9px; color: var(--text-muted); font-weight: 400; margin-top: 2px; letter-spacing: 0.5px; }

.sc-hole-score .score-eagle,
.sc-hole-score .score-birdie,
.sc-hole-score .score-bogey,
.sc-hole-score .score-double,
.sc-hole-score .score-triple { width: 28px; height: 28px; line-height: 28px; font-size: 15px; }

.sc-totals { border-top: 1px solid var(--border-gold); }
.sc-total-row { display: flex; align-items: center; padding: 14px 12px; gap: 4px; background: var(--bg-card); }
.sc-total-cell { flex: 1; display: flex; flex-direction: column; align-items: center; }
.sc-total-strokes { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--accent-gold); }
.sc-total-sub { font-size: 9px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 1px; }

/* Live In-Round Leaderboard */
.live-leaderboard { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 12px;
}
.lb-pos  { font-size: 16px; min-width: 26px; color: var(--text-muted); }
.lb-info { flex: 1; display: flex; flex-direction: column; }
.lb-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.lb-thru { font-size: 10px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.3px; }
.lb-scores { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lb-diff  { font-size: 18px; font-weight: 700; }
.lb-diff.lb-under { color: var(--accent-green-bright); }
.lb-diff.lb-over  { color: var(--accent-red); }
.lb-pts { font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; }

/* Summary Leaderboard */
.summary-leaderboard { margin-bottom: 14px; }
.leaderboard-row {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  gap: 10px;
}
.leaderboard-row.first { border-color: var(--border-gold); background: var(--accent-gold-dim); }
.leaderboard-pos { font-size: 12px; color: var(--text-muted); width: 20px; text-align: center; flex-shrink: 0; }
.leaderboard-row.first .leaderboard-pos { color: var(--accent-gold); font-weight: 700; }
.leaderboard-name { flex: 1; font-weight: 600; font-size: 15px; color: var(--text-primary); }
.leaderboard-hcp  { font-size: 10px; color: var(--text-muted); }
.leaderboard-pts  { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
.leaderboard-pts-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }

/* Summary stroke details */
.summary-strokes-details { margin-bottom: 14px; }
.summary-strokes-summary {
  font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2.5px;
  padding: 9px 0; cursor: pointer; list-style: none; border-bottom: 1px solid var(--border); font-weight: 600;
}
.summary-strokes-summary::-webkit-details-marker { display: none; }
.summary-stroke-table { overflow-x: auto; margin-top: 8px; }
.summary-stroke-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.summary-stroke-table th, .summary-stroke-table td { padding: 5px 8px; border: 1px solid var(--border); text-align: center; white-space: nowrap; }
.summary-stroke-table th { background: var(--bg-surface); color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }

/* === Course Picker (New Round Modal) === */
.nr-course-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.nr-course-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nr-course-search {
  margin-bottom: 10px;
}
.nr-search-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  margin-bottom: 6px;
  box-sizing: border-box;
}
.nr-search-input:focus { outline: none; border-color: var(--border-gold); }
.nr-course-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.nr-course-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nr-course-result:active {
  background: var(--accent-gold-dim);
  border-color: var(--border-gold);
}
.nr-result-name {
  font-size: 13px;
  color: var(--text-primary);
}
.nr-result-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.5px;
}
.nr-result-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 12px;
  text-align: center;
}
.nr-result-osm {
  border-color: rgba(74,127,165,0.3);
}
.nr-result-osm .nr-result-name {
  color: var(--accent-blue);
}
.nr-result-badge-osm {
  color: var(--accent-blue);
  border-color: rgba(74,127,165,0.4);
  background: rgba(74,127,165,0.1);
}

/* === Competition Formats === */
.nr-format-hint {
  font-size: 11px; color: var(--text-muted); padding: 5px 8px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 10px; line-height: 1.5; min-height: 18px;
}
.scramble-banner { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--accent-gold); text-transform: uppercase; padding: 6px 0 4px; }
.player-card-sub { font-size: 11px; color: var(--text-muted); padding: 0 0 8px; text-align: center; letter-spacing: 0.3px; }
.comp-leaderboard { margin: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.comp-team-row { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 14px; }
.comp-team-row.comp-team-leading { border-color: var(--border-gold); background: var(--accent-gold-dim); }
.comp-team-label { flex: 1; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.comp-team-diff { font-size: 22px; font-weight: 700; min-width: 44px; text-align: center; }
.comp-team-diff.comp-under { color: var(--accent-green-bright); }
.comp-team-diff.comp-over  { color: var(--accent-red); }
.comp-team-pts  { font-size: 16px; font-weight: 700; color: var(--accent-gold); }
.comp-team-thru { font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; }
.comp-individual-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 0 2px; font-weight: 600; }
.comp-indiv-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 4px; }
.comp-indiv-name { font-size: 13px; color: var(--text-secondary); }
.comp-indiv-pts  { font-size: 13px; font-weight: 600; color: var(--accent-gold); }

/* === NFC === */
.nfc-active-bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; font-size: 10px; color: var(--accent-blue); margin-bottom: 4px; letter-spacing: 0.5px; }
.nfc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.nfc-dot.active  { background: var(--accent-green); animation: pulse 1.5s infinite; }
.nfc-dot.waiting { background: var(--accent-blue); animation: pulse 1s infinite; }
.nfc-dot.error   { background: var(--accent-red); }
.nfc-modal-content { max-height: 88vh; overflow-y: auto; }
.nfc-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.nfc-modal-header h3 { margin-bottom: 0; }
.nfc-status { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; }
.nfc-tag-list { margin-bottom: 8px; }
.nfc-tag-item { display: flex; align-items: center; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 4px; gap: 8px; }
.nfc-tag-club { font-weight: 600; flex: 1; color: var(--text-primary); }
.nfc-tag-uid  { font-size: 10px; color: var(--text-muted); font-family: monospace; flex: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfc-tag-delete { background: none; border: none; color: var(--accent-red); font-size: 16px; cursor: pointer; padding: 0 4px; flex-shrink: 0; opacity: 0.7; }
.nfc-register select { width: 100%; padding: 10px; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; margin-bottom: 8px; font-family: var(--font-body); }
.nfc-register-btn { margin-top: 0; }
.nfc-register-status { margin-top: 8px; padding: 10px; border-radius: var(--radius-sm); font-size: 13px; text-align: center; }
.nfc-register-status.success { background: rgba(42,157,92,0.12); color: var(--accent-green-bright); border: 1px solid rgba(42,157,92,0.3); }
.nfc-register-status.waiting { background: rgba(74,127,165,0.12); color: var(--accent-blue); border: 1px solid rgba(74,127,165,0.3); }
.nfc-register-status.error   { background: rgba(184,50,50,0.1); color: var(--accent-red); border: 1px solid rgba(184,50,50,0.3); }
.nfc-help { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 8px 0; }
.nfc-help p + p { margin-top: 8px; }
.nfc-help-note { color: var(--text-muted); font-size: 11px; opacity: 0.7; }

/* === NFC Toast === */
.nfc-toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent-gold);
  color: #080604;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 200;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nfc-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* === Quick-score buttons === */
.quick-score-row { display: flex; gap: 6px; margin: 4px 0 8px; }
.quick-score-btn {
  flex: 1; padding: 7px 0;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body);
}
.quick-score-btn:active { border-color: var(--border-gold); color: var(--accent-gold); }

/* === Hole progress bar === */
.hole-progress-bar {
  position: relative; height: 22px;
  background: var(--bg-card);
  border-radius: 11px; margin-bottom: 10px; overflow: hidden;
  border: 1px solid var(--border);
}
.hole-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent-gold);
  border-radius: 11px;
  transition: width 0.4s ease;
  opacity: 0.3;
}
.hole-progress-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-primary);
  text-transform: uppercase;
}

/* === GPS Quick Score Panel === */
.gps-qs {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 10px;
}
.gps-qs-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; }
.gps-qs-player { margin-bottom: 8px; }
.gps-qs-player:last-child { margin-bottom: 0; }
.gps-qs-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.gqs-pts { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.gps-qs-controls { display: flex; align-items: center; gap: 4px; }
.gqs-quick {
  flex: 1; padding: 6px 0;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body);
}
.gqs-quick:active { border-color: var(--border-gold); color: var(--accent-gold); }
.gps-qs-putts { display: flex; align-items: center; gap: 4px; margin-top: 5px; }

/* === Live Society Leaderboard === */
.live-lb-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.live-lb-row:last-child { border-bottom: none; }
.live-lb-rank  { width: 22px; font-weight: 700; color: var(--text-muted); font-size: 13px; }
.live-lb-first { color: var(--accent-gold); }
.live-lb-name  { flex: 1; font-weight: 600; color: var(--text-primary); font-size: 14px; }
.live-lb-thru  { width: 34px; font-size: 11px; color: var(--text-secondary); text-align: center; }
.live-lb-pts   { width: 46px; font-weight: 700; color: var(--accent-gold); text-align: right; font-size: 14px; }
.live-updated  { font-size: 11px; color: var(--text-muted); text-align: right; margin-bottom: 4px; }

/* === GolfRSA Post Box === */
.golfrsa-post-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 14px; margin-bottom: 16px;
}

/* === History Tabs === */
.history-tabs {
  display: flex; gap: 4px; margin: 0 0 12px;
  background: var(--bg-surface);
  border-radius: var(--radius-md); padding: 4px;
  border: 1px solid var(--border);
}
.htab {
  flex: 1; padding: 8px 0;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font-body);
}
.htab.active { background: var(--bg-card); color: var(--accent-gold); }
.htab-panel { display: block; }
.htab-panel.hidden { display: none !important; }

/* === Screen header === */
.screen-header { padding: 16px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.screen-title  { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.3px; }

/* === Society Layout === */
.soc-logged-out { color: var(--text-secondary); padding: 32px 16px; text-align: center; }
.soc-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.soc-actions .btn-primary,
.soc-actions .btn-secondary { flex: 1; font-size: 13px; }

#society-detail { margin-top: 8px; }

.soc-detail-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.soc-detail-title  { flex: 1; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.btn-soc-nav  { padding: 6px 14px; font-size: 13px; }
.btn-leave    { font-size: 12px; color: var(--accent-red) !important; border-color: var(--accent-red) !important; padding: 6px 10px; }

.soc-code-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.soc-code-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 6px; }
.soc-code-row   { display: flex; align-items: center; gap: 12px; }
.soc-code-value { flex: 1; font-size: 26px; font-weight: 800; color: var(--accent-gold); letter-spacing: 6px; font-family: var(--font-display); }
.soc-code-hint  { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.btn-share {
  display: flex; align-items: center; gap: 5px;
  background: var(--accent-gold-soft);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  color: var(--accent-gold);
  font-size: 12px; font-weight: 600;
  padding: 7px 12px;
  cursor: pointer; white-space: nowrap;
  font-family: var(--font-body);
}
.btn-share:active { opacity: 0.75; }
.btn-share-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

.soc-members-list { margin-bottom: 16px; }

.btn-section-action { padding: 4px 10px; font-size: 11px; float: right; margin-top: -2px; }

#comp-leaderboard-panel { margin-top: 4px; }
.soc-section-gap { margin-top: 14px; }

/* Season standings */
.soc-season-standings { margin-bottom: 16px; }
.season-row {
  display: flex; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.season-row:last-child { border-bottom: none; }
.season-rank  { width: 26px; font-weight: 700; font-size: 13px; color: var(--text-secondary); }
.season-rank.first { color: var(--accent-gold); }
.season-name  { flex: 1; font-size: 14px; color: var(--text-primary); font-weight: 600; }
.season-rounds { font-size: 11px; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
.season-pts   { font-size: 16px; font-weight: 700; color: var(--accent-gold); min-width: 60px; text-align: right; }

/* Comp card arrow */
.comp-card-arrow { color: var(--accent-gold); font-size: 13px; }

/* lb-score column */
.lb-score-col { text-align: right; }

/* === Society === */
.society-card {
  background: var(--bg-card); border-radius: var(--radius-md);
  padding: 12px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; border: 1px solid var(--border);
}
.society-card:active { opacity: 0.7; }
.society-card-info { flex: 1; }
.society-card-name { font-weight: 700; font-size: 15px; color: var(--text-primary); }
.society-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.society-code-badge {
  font-size: 13px; font-weight: 800; color: var(--accent-gold);
  letter-spacing: 2px; background: var(--accent-gold-soft);
  padding: 4px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-gold);
}
.comp-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px;
  display: flex; align-items: center; cursor: pointer;
}
.comp-card:active { opacity: 0.7; }
.comp-card-info { flex: 1; }
.comp-card-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.comp-card-date { font-size: 12px; color: var(--text-secondary); }
.member-row { display: flex; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); gap: 8px; }
.member-row:last-child { border-bottom: none; }
.member-row-name { flex: 1; font-size: 14px; color: var(--text-primary); }
.member-row-hcp  { font-size: 13px; color: var(--accent-gold); font-weight: 600; }
.member-row-role { font-size: 11px; color: var(--text-muted); }
.btn-member-remove {
  background: none; border: 1px solid rgba(184,50,50,0.4);
  color: var(--accent-red); border-radius: 50%;
  width: 26px; height: 26px; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0;
}
.btn-member-remove:active { background: rgba(184,50,50,0.15); }

.comp-card-actions { display: flex; align-items: center; gap: 6px; }
.btn-comp-edit, .btn-comp-delete {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  width: 30px; height: 30px; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0;
}
.btn-comp-edit:active  { color: var(--accent-gold); border-color: var(--accent-gold); }
.btn-comp-delete:active { color: var(--accent-red);  border-color: var(--accent-red); }

/* === Competition Leaderboard === */
.lb-rank       { width: 28px; font-weight: 700; color: var(--text-secondary); font-size: 14px; }
.lb-rank.first { color: var(--accent-gold); }
.lb-name  { flex: 1; font-size: 14px; color: var(--text-primary); }
.lb-hcp   { font-size: 12px; color: var(--text-secondary); margin-right: 12px; }
.lb-pts   { font-size: 18px; font-weight: 700; color: var(--accent-gold); }
.lb-gross { font-size: 11px; color: var(--text-muted); text-align: right; }
.lb-nocard { color: var(--text-muted); font-style: italic; font-size: 12px; }

/* === Handicap Chart === */
#handicap-chart { border-radius: var(--radius-sm); background: var(--bg-surface); }
.diff-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.diff-row .diff-date { color: var(--text-secondary); }
.diff-row .diff-val  { font-weight: 600; color: var(--text-primary); }
.diff-row .diff-val.used { color: var(--accent-gold); }

/* === Wind Indicator === */
.wind-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin: 8px 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.wind-bar.headwind { border-color: rgba(184,50,50,0.5); background: rgba(184,50,50,0.08); }
.wind-bar.tailwind  { border-color: rgba(42,157,92,0.5);  background: rgba(42,157,92,0.08); }
.wind-bar.crosswind { border-color: var(--border-gold);   background: var(--accent-gold-dim); }

.wind-dir-arrow { font-size: 18px; line-height: 1; }
.wind-speed-val { font-weight: 700; color: var(--text-primary); }
.wind-relation  { color: var(--text-secondary); }
.wind-bar.headwind .wind-relation { color: #ff6b6b; font-weight: 600; }
.wind-bar.tailwind  .wind-relation { color: var(--accent-green-bright); font-weight: 600; }
.wind-bar.crosswind .wind-relation { color: var(--accent-gold); font-weight: 600; }
.wind-plays-like {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

/* === Utilities === */
.hidden { display: none !important; }

/* Scrollbar styling */
.screen::-webkit-scrollbar { width: 3px; }
.screen::-webkit-scrollbar-track { background: transparent; }
.screen::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* === Full-Screen Map === */
#screen-map {
  display: none;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  height: calc(100vh - var(--nav-height) - var(--safe-bottom));
  height: calc(100dvh - var(--nav-height) - var(--safe-bottom));
}
#screen-map.active { display: flex; }

.map-screen-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  height: 52px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}
.map-back-btn {
  flex: 0 0 auto;
  flex-direction: column;
  width: 52px;
  height: 44px;
  color: var(--accent-gold) !important;
  font-size: 8px !important;
  gap: 2px !important;
  padding: 4px !important;
}
.map-hole-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.map-hole-label {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
}
.map-hole-sub {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.map-hole-nav-btns {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}
.map-hole-btn {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
}

.full-hole-map {
  flex: 1;
  width: 100%;
  background: #111;
  position: relative;
  overflow: hidden;
}

.map-tap-overlay {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(9,9,9,0.92);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1000;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.map-tap-main, .map-tap-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.map-tap-secondary { border-left: 1px solid var(--border); padding-left: 14px; }
.map-tap-dist-value {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-gold);
  line-height: 1;
}
.map-tap-dist-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.map-tap-from-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}
.map-tap-from-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.map-tap-clear {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.map-tap-clear:hover { border-color: var(--accent-gold); color: var(--accent-gold); }

.map-compass-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(9,9,9,0.85);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-sm);
  color: var(--accent-gold);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  letter-spacing: 0.5px;
  z-index: 1000;
  pointer-events: none;
}

/* Map markers */
.map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.map-tee   { background: #2e7d32; color: #fff; width: 26px; height: 26px; }
.map-green { background: var(--accent-gold); color: #000; width: 26px; height: 26px; }
.map-hazard { background: #b71c1c; color: #fff; width: 22px; height: 22px; font-size: 10px; }
.map-shot  { background: var(--accent-gold); color: #000; width: 20px; height: 20px; border-radius: 50%; }
.map-player { background: #fff; color: #000; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent-gold); font-size: 9px; }
.map-player-full { background: var(--accent-gold); color: #000; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; }

.map-tap-pin {
  width: 14px;
  height: 14px;
  background: var(--accent-gold);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}