/* Theming: every color a component uses comes from these custom
   properties, so a theme is just a set of overrides scoped under
   `html[data-theme="…"]` (see the bottom of this file) — no component CSS
   needs to know a theme exists. `--primary`/`--primary-dark` are the brand
   color (buttons, nav bar, active states); `--success` doubles as the
   "good score" green for the round-grid birdie/eagle shapes specifically
   (see far below) so a birdie still reads as green even in a theme whose
   brand color isn't. `:root` here is the default "Fairway" theme.
*/
:root {
  --primary: #2f7d4f;
  --primary-dark: #1e5c37;
  --bg: #f3f6ee;
  --card-bg: #ffffff;
  --text: #1a2216;
  --muted: #6b7660;
  --border: #dde4d3;
  --error: #c0392b;
  --success: #2f7d4f;
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}
/* Fairway: a faint mowed-stripe pattern, like fairway turf cut on the
   diagonal — subtle enough to stay out of the way of text. */
body {
  background-image: repeating-linear-gradient(
    115deg, rgba(47, 125, 79, 0.05) 0px, rgba(47, 125, 79, 0.05) 22px, transparent 22px, transparent 44px
  );
  background-attachment: fixed;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--primary);
  color: white;
}
.navbar a, .navbar .link-button {
  color: white;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 1rem;
  font-size: 0.95rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.navbar-brand a { font-weight: 700; font-size: 1.1rem; }
.navbar-links > div { display: flex; flex-wrap: nowrap; align-items: center; }

.container {
  flex: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

.page h1 { margin-top: 0; }

.dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.tile {
  display: block;
  padding: 1.25rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tile:hover, .tile:active {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 420px;
}
form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--muted);
}
form label.checkbox {
  flex-direction: row;
  align-items: center;
  color: var(--text);
}
input, select, textarea, button {
  font: inherit;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
button {
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: background-color 0.15s ease, transform 0.08s ease;
}
button:hover { background: var(--primary-dark); }
button:active { transform: scale(0.96); }
button:disabled { cursor: default; }

.list { list-style: none; padding: 0; margin: 0; }
.list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.checklist { list-style: none; padding: 0; }

.muted { color: var(--muted); font-size: 0.9rem; }
.hint { color: var(--muted); font-size: 0.85rem; }
.error { color: var(--error); padding: 0.5rem 0; }
.success { color: var(--success); padding: 0.5rem 0; }
.offline-banner {
  background: var(--muted);
  color: var(--card-bg);
  text-align: center;
  padding: 0.4rem;
  font-size: 0.85rem;
}
.badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--border);
  font-size: 0.75rem;
}
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.hole-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.hole-row {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.hole-row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.hole-row input {
  width: 5.5rem;
}
.hole-row-remove {
  background: none;
  color: var(--error);
  border: 1px solid var(--error);
}
.hole-row-remove:hover { background: var(--error); color: white; }

/* Live scoring: player strip */
.player-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.6rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.player-chip {
  flex: 0 0 auto;
  min-width: 5rem;
  padding: 0.4rem 0.7rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
}
.player-chip.readonly { cursor: default; }
.player-chip.active {
  background: var(--primary);
  border-color: var(--primary);
}
.player-chip-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7rem;
}
.player-chip.active .player-chip-name { color: white; }
.player-chip-score {
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
}
.player-chip.active .player-chip-score { color: white; }

/* Live scoring: current hole */
.hole-header {
  text-align: center;
  margin-bottom: 0.25rem;
}
.hole-number {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  min-width: 6rem;
}
.hole-meta {
  color: var(--muted);
  font-size: 1rem;
}
.current-player {
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0.25rem 0 1rem;
}

/* Live scoring: stroke entry */
.stroke-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 420px;
  margin: 0 auto;
}
.stroke-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.stroke-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 84px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stroke-btn:hover { background: var(--bg); }
.stroke-btn:active { background: var(--primary); border-color: var(--primary); }
.stroke-btn:active .stroke-num, .stroke-btn:active .stroke-label { color: white; }
.stroke-btn.selected { background: var(--primary); border-color: var(--primary); }
.stroke-btn.selected .stroke-num, .stroke-btn.selected .stroke-label { color: white; }
.stroke-num {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}
.stroke-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.window-controls {
  display: flex;
  gap: 0.6rem;
}
.window-btn {
  flex: 1;
  min-height: 48px;
  font-size: 1.3rem;
}
/* Live scoring: full round score grid */
.round-score-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 420px;
  margin: 1rem auto 0;
}
.round-score-row {
  display: flex;
  gap: 0.3rem;
}
.round-score-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 48px;
  padding: 0.2rem;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
button.round-score-cell:hover { background: var(--bg); }
.round-score-cell.current {
  border-color: var(--primary);
  border-width: 2px;
}
.round-score-hole {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
}
.round-score-strokes {
  font-size: 1rem;
  font-weight: 700;
}
/* Classic scorecard shapes: circles under par, squares over par, solid fill
   the further out (birdie/bogey = outline, eagle+/double-bogey+ = solid). */
.round-score-strokes.score-birdie,
.round-score-strokes.score-eagle,
.round-score-strokes.score-bogey,
.round-score-strokes.score-double-bogey {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0 auto;
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
}
.round-score-strokes.score-birdie {
  border-radius: 50%;
  border-color: var(--success);
  color: var(--success);
}
.round-score-strokes.score-eagle {
  border-radius: 50%;
  border-color: var(--success);
  background: var(--success);
  color: white;
}
.round-score-strokes.score-bogey {
  border-radius: 4px;
  border-color: var(--muted);
  color: var(--muted);
}
.round-score-strokes.score-double-bogey {
  border-radius: 4px;
  border-color: var(--muted);
  background: var(--muted);
  color: white;
}
.window-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Live scoring: pocket-safe lock */
.lock-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}
.lock-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  background: var(--card-bg);
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: none;
}
.lock-btn:hover { background: var(--bg); }
.lock-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 70vh;
  padding: 1.5rem;
  text-align: center;
}
.lock-overlay .player-strip {
  width: 100%;
  border-bottom: none;
  margin-bottom: 0;
  justify-content: center;
}
.lock-icon { font-size: 3rem; }
.lock-status { font-weight: 700; font-size: 1.1rem; }
.lock-hint { color: var(--muted); max-width: 20rem; }
.lock-hold-btn {
  position: relative;
  overflow: hidden;
  width: 14rem;
  min-height: 4rem;
  background: var(--card-bg);
  color: var(--text);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.lock-hold-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--primary);
  z-index: 0;
}
.lock-hold-fill.holding { width: 100%; transition: width 0.8s linear; }
.lock-hold-label {
  position: relative;
  z-index: 1;
  font-weight: 700;
}

/* Read-only, all-players scorecard */
.scorecard-player-block {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.scorecard-player-block:last-of-type { border-bottom: none; }
.scorecard-player-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  max-width: 420px;
  margin: 0 auto 0.5rem;
}
.scorecard-player-name { font-weight: 700; font-size: 1.05rem; }
.scorecard-player-total { color: var(--muted); font-weight: 600; }

/* Find a lost disc — styled like the M314 Motion Tracker prop from Alien:
   olive-drab chunky hardware casing, green CRT phosphor scope, scanlines,
   a rotating radar sweep, and a signal-strength readout with a matching
   proximity beep. */
.find-disc-page {
  --tracker-green: #4dff7a;
  --tracker-green-dim: #1f5c34;
  --tracker-bg: #0a0d09;
  font-family: "Courier New", Courier, monospace;
}
.tracker-chassis {
  background: linear-gradient(180deg, #4a4f3a, #383c2c);
  border: 3px solid #23261a;
  border-radius: 14px;
  padding: 1rem;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.35);
  position: relative;
}
.tracker-chassis::before, .tracker-chassis::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #cfd3bd, #6b6f57 70%, #3a3d2c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tracker-chassis::before { left: 10px; }
.tracker-chassis::after { right: 10px; }

.tracker-header { text-align: center; margin-bottom: 0.5rem; }
.tracker-brand {
  color: #b9bfa0;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  opacity: 0.8;
}
.tracker-title {
  color: var(--tracker-green);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  margin: 0.2rem 0;
  text-shadow: 0 0 6px rgba(77, 255, 122, 0.7), 0 0 14px rgba(77, 255, 122, 0.35);
}
.tracker-subtitle {
  color: var(--tracker-green-dim);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
}
.find-disc-page .hint {
  color: #c8cdb4;
  font-size: 0.8rem;
}
.tracker-error { color: #ff6b5e; }

.tracker-controls { margin-bottom: 0.75rem; }
.tracker-controls label {
  color: var(--tracker-green);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tracker-controls select, .find-disc-page input[type="color"] {
  background: #0e120a;
  color: var(--tracker-green);
  border: 1px solid var(--tracker-green-dim);
  font-family: inherit;
}
.find-disc-page input[type="color"] {
  width: 4rem;
  height: 2.4rem;
  padding: 0.2rem;
}

.find-disc-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border: 4px solid #23261a;
  border-radius: 6px;
  overflow: hidden;
  margin: 1rem 0;
  box-shadow: inset 0 0 0 1px rgba(77, 255, 122, 0.25);
}
.find-disc-video, .find-disc-overlay, .tracker-rings, .tracker-sweep, .tracker-scanlines, .tracker-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.find-disc-video {
  object-fit: cover;
  /* Green CRT phosphor look — purely visual; the underlying frame data
     the detector reads is captured straight from the video element and
     is unaffected by this filter. */
  filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(6) brightness(0.85) contrast(1.35);
}
.find-disc-overlay { cursor: crosshair; z-index: 2; }
.tracker-rings, .tracker-sweep, .tracker-scanlines, .tracker-vignette {
  pointer-events: none;
  z-index: 3;
}
.tracker-rings {
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0, transparent 15%,
      rgba(77, 255, 122, 0.35) calc(15% + 1px), rgba(77, 255, 122, 0.35) calc(15% + 2px),
      transparent calc(15% + 3px), transparent 30%);
}
.tracker-sweep {
  background: conic-gradient(from 0deg, rgba(77, 255, 122, 0.55), transparent 22%, transparent 100%);
  mix-blend-mode: screen;
  animation: tracker-sweep-spin 3.2s linear infinite;
}
.tracker-scanlines {
  background: repeating-linear-gradient(
    0deg, rgba(0, 0, 0, 0.35) 0px, rgba(0, 0, 0, 0.35) 1px, transparent 2px, transparent 3px
  );
}
.tracker-vignette {
  box-shadow: inset 0 0 70px 20px rgba(0, 0, 0, 0.85);
}
@keyframes tracker-sweep-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tracker-readout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0;
}
.tracker-readout-label {
  color: var(--tracker-green);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.tracker-gauge {
  display: flex;
  gap: 2px;
  flex: 1;
}
.tracker-gauge-seg {
  height: 14px;
  flex: 1;
  background: var(--tracker-green-dim);
  border-radius: 1px;
  opacity: 0.5;
}
.tracker-gauge-seg.lit {
  background: var(--tracker-green);
  opacity: 1;
  box-shadow: 0 0 5px rgba(77, 255, 122, 0.8);
}
.tracker-readout-value {
  color: var(--tracker-green);
  font-size: 0.9rem;
  min-width: 3.2rem;
  text-align: right;
}

.tracker-buttons { gap: 0.6rem; }
.tracker-btn {
  flex: 1;
  background: #171b10;
  color: var(--tracker-green);
  border: 1px solid var(--tracker-green-dim);
  font-family: inherit;
  letter-spacing: 0.08em;
  padding: 0.7rem 0.5rem;
}
.tracker-btn:hover { background: #202611; }
.tracker-btn-secondary { color: #c8cdb4; border-color: #4a4f3a; }

/* Extra glow on the contact overlay to help red pop against the green
   scope even further than the color contrast alone. */
.find-disc-overlay { filter: drop-shadow(0 0 3px rgba(255, 20, 20, 0.6)); }

/* Full-screen scanner mode: takes over the whole viewport (nav bar is
   actually removed from the DOM by Main.scala while this is active, not
   just covered) so the scope gets as much room as the screen allows. */
.find-disc-page.fullscreen-active {
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow-y: auto;
  background: var(--tracker-bg);
  padding: 0.5rem;
  margin: 0;
}
.find-disc-page.fullscreen-active .tracker-chassis {
  max-width: 640px;
  margin: 0 auto;
}

/* Theme picker (profile page) */
.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.theme-option {
  flex: 0 0 auto;
  width: 9rem;
  padding: 0.75rem;
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.theme-option.active { border-color: var(--primary); }
.theme-swatch {
  display: flex;
  height: 1.6rem;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.theme-swatch > span { flex: 1; }
.theme-option-name { font-size: 0.9rem; }

/* Section tabs (profile page) — one of "previous rounds"/"courses"/"discs"
   visible at a time, instead of stacking all three and scrolling. */
.section-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 1.25rem 0 0.5rem;
  border-bottom: 1px solid var(--border);
}
.section-tab {
  flex: 1;
  background: none;
  color: var(--muted);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0.6rem 0.4rem;
  font-weight: 600;
}
.section-tab:hover { background: var(--bg); }
.section-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Verify-phone banner (profile page) */
.verify-banner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}
.verify-banner p { margin: 0 0 0.5rem; font-weight: 600; }
.verify-banner form {
  flex-direction: row;
  max-width: none;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.verify-banner input { max-width: 10rem; }
.link-like {
  background: none;
  color: var(--primary);
  border: none;
  box-shadow: none;
  padding: 0;
  font-weight: 600;
  text-decoration: underline;
}

/* Theme: Cyberpunk — neon on near-black, sharp corners, glow everywhere. */
html[data-theme="cyberpunk"] {
  --primary: #0891b2;
  --primary-dark: #075985;
  --bg: #0b0518;
  --card-bg: #170c2e;
  --text: #eef0ff;
  --muted: #9a8fc2;
  --border: #3a2a5c;
  --error: #ff3860;
  --success: #39ff14;
  --radius: 6px;
}
html[data-theme="cyberpunk"] body {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.06) 0px, rgba(0, 229, 255, 0.06) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.06) 0px, rgba(0, 229, 255, 0.06) 1px, transparent 1px, transparent 40px),
    radial-gradient(circle at 50% 0%, rgba(255, 47, 176, 0.12), transparent 55%);
}
html[data-theme="cyberpunk"] .navbar { border-bottom: 1px solid #00e5ff; }
html[data-theme="cyberpunk"] .navbar-brand a {
  text-shadow: 0 0 6px #00e5ff, 0 0 14px rgba(255, 47, 176, 0.7);
}
html[data-theme="cyberpunk"] button {
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}
html[data-theme="cyberpunk"] .tile,
html[data-theme="cyberpunk"] .stroke-btn,
html[data-theme="cyberpunk"] .round-score-cell,
html[data-theme="cyberpunk"] .player-chip {
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.12);
}
html[data-theme="cyberpunk"] .tile:hover {
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
}

/* Theme: Sunset — warm golden-hour round, soft and rounded. */
html[data-theme="sunset"] {
  --primary: #e8734a;
  --primary-dark: #c14f27;
  --bg: #fdf1e6;
  --card-bg: #fffaf3;
  --text: #3b2417;
  --muted: #9c7b62;
  --border: #f0d9c2;
  --error: #c0392b;
  --success: #4c8c5b;
  --radius: 16px;
}
html[data-theme="sunset"] body {
  background-image:
    radial-gradient(circle at 50% -10%, rgba(232, 115, 74, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(106, 76, 147, 0.08), transparent 40%);
}
html[data-theme="sunset"] .navbar {
  background: linear-gradient(120deg, #e8734a, #6a4c93);
}

@media (max-width: 480px) {
  .container { padding: 0.6rem; }
  form { max-width: 100%; }
  .stroke-btn { min-height: 76px; }
}