/* ============================================================
   Base — reset, app shell, shared components, icon system.
   Consumes css/tokens.css. Screen files layer positioning on top.
   ============================================================ */

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

/* Global hide. One rule for every overlay/element that toggles visibility via
   the .hidden class (was re-declared per-overlay across menu/courses/modals).
   NOTE: a few HUD elements use .hidden as an OPACITY transition, not display
   (hud.css) — those keep their own scoped rules and override this via
   specificity/order; do not rely on this for animated fades. */
.hidden { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--green-900);
  font-family: var(--font);
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
}

#game {
  display: block;
  width: 100vw;
  height: 100dvh;
  touch-action: none;   /* stop browser hijacking swipes (scroll/zoom) */
  position: fixed;
  inset: 0;
}

/* Four Oaks 3D (three.js). Sits BEHIND #game (DOM order — see index.html),
   not instead of it: every swing input listener (touch/mouse/wheel — see
   game.js "Input" section) is bound to #game, so it must stay in the layout
   and on top to keep receiving events. In 3D mode game.js's draw() skips
   painting and clears #game to transparent (see update3DMode) so #c3d shows
   through underneath; DOM HUD (scorecard, buttons — separate, later, already-
   positioned elements) still paints above both either way. */
#c3d {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  touch-action: none;
}

/* Google photoreal 3D ground (Pebble). Same behind-#game stacking as #c3d: swing
   input is bound to #game, so #game stays on top and goes transparent (draw()
   clears it) to reveal the tiles canvas underneath. The #cgt canvas is created +
   styled inline by three3d/gtiles3d.js, inserted before #game. */

/* iOS haptic switch — present but off-screen (display:none would disable the haptic) */
#haptic-switch {
  position: fixed;
  bottom: -100px;
  left: -100px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Icon system -------------------------------------------
   CSS-mask line icons. background:currentColor → auto-tints with
   text color, so .active states light up for free. Single stroke. */
.ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
  flex-shrink: 0;
}
/* leading icon inside a text button/label */
.ic-lead { margin-right: 0.5em; }

.ic-trophy   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v4a5 5 0 0 1-10 0V4z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E"); }
.ic-flag     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V3M6 4l11 3.5L6 11'/%3E%3C/svg%3E"); }
.ic-ruler    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l5-5 13 13-5 5z'/%3E%3Cpath d='M8 7l2 2M11 4l2.5 2.5M5 10l2 2'/%3E%3C/svg%3E"); }
.ic-slope    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20l6-11 4 7 3-4 5 8z'/%3E%3C/svg%3E"); }
.ic-green3d  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l9 5-9 5-9-5z'/%3E%3Cpath d='M8 9.9c1.2.8 2.6 1.3 4 1.3s2.8-.5 4-1.3'/%3E%3Cpath d='M3 14v2l9 5 9-5v-2'/%3E%3C/svg%3E"); }
.ic-tilt     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19L8.5 5h7L20 19z'/%3E%3Cpath d='M12 5v14M6.6 13h10.8'/%3E%3C/svg%3E"); }
.ic-ob       { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); }
.ic-wind     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3M3 16h7a3 3 0 1 1-3 3M3 12h15a3 3 0 1 1-3 3'/%3E%3C/svg%3E"); }
.ic-chip     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20C9 18 16 11 21 4'/%3E%3Ccircle cx='4.5' cy='19.5' r='1.6' fill='%23fff'/%3E%3C/svg%3E"); }
.ic-target   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ic-clipboard{ --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 10h6M9 14h6'/%3E%3C/svg%3E"); }
.ic-menu     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.ic-chat     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ic-home     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7M6 10v10h12V10'/%3E%3C/svg%3E"); }
.ic-gear     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3C/svg%3E"); }
.ic-flag-checkered { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Crect x='5' y='4' width='14' height='9'/%3E%3Cpath d='M5 8.5h14M12 4v9'/%3E%3C/svg%3E"); }
.ic-plus     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ic-pencil   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1L19 8l-3-3L5 16z'/%3E%3Cpath d='M14 7l3 3'/%3E%3C/svg%3E"); }
.ic-check    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E"); }
.ic-lock     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.ic-x        { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ic-mail     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.ic-timer    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 13V9M9 2h6'/%3E%3C/svg%3E"); }
.ic-scissors { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Cpath d='M8 8l12 11M8 16L20 5'/%3E%3C/svg%3E"); }
.ic-medal    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='15' r='5'/%3E%3Cpath d='M8 2l4 6 4-6'/%3E%3C/svg%3E"); }
.ic-user     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.ic-chev-up    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); }
.ic-chev-down  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ic-chev-left  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ic-chev-right { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-refresh    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5'/%3E%3C/svg%3E"); }
.ic-sound      { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E"); }

/* ---- Shared overlay scrim (full-screen modal backdrop) ----- */
.scrim {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: var(--surface-scrim);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
}

/* ---- Shared glass panel (modal bodies) --------------------- */
.panel {
  background: var(--surface-panel);
  border: var(--border-hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
}

/* ---- Shared modal-enter animation (every overlay box) ------ */
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.panel-in { animation: panelIn var(--dur-modal) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Buttons ----------------------------------------------- */
.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 260px;
  max-width: 82vw;
  margin: var(--s-2) auto;
  padding: 16px var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--accent-glow);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.menu-btn:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(46, 125, 79, 0.18); }
.menu-btn.hidden { display: none; }   /* admin-only buttons stay hidden for non-admins */
.menu-btn.secondary {
  background: var(--surface-raised);
  border-color: var(--w-14);
  color: var(--text-muted);
  box-shadow: none;
}
.menu-btn.secondary:active { transform: scale(0.97); }
.menu-btn .ic { font-size: 1.1em; }

/* ---- Segmented control — two-value either/or picks (9|18, match|stroke) ----
   One brass "pill" marks the active segment (echoes the landing's brass tags).
   Drives off the .active class the sync functions already toggle. */
.seg {
  display: flex;
  gap: 4px;
  margin-top: var(--s-2);
  padding: 4px;
  background: var(--w-05);
  border: var(--border-hair);
  border-radius: var(--r-md);
}
.seg-btn {
  flex: 1;
  min-width: 0;
  padding: 11px var(--s-2);
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-dim);
  font-size: var(--t-cap);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.seg-btn:active { transform: scale(0.97); }
.seg-btn.active {
  background: var(--brass);
  color: var(--green-900);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.seg-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  color: var(--text-faint);
}

/* ---- Sliding switch — true on/off (Live) ----------------------------------
   On-state keys off .active (toggled by the same sync fns); aria-checked kept
   in sync in JS for a11y. */
.switch {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  margin: var(--s-3) 0 0;
  padding: 8px var(--s-1);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.switch-track {
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--w-14);
  transition: background var(--dur-fast) var(--ease);
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-fast) var(--ease);
}
.switch.active .switch-track { background: var(--accent); }
.switch.active .switch-knob { transform: translateX(18px); }
.switch-label {
  flex: 1;
  color: var(--text-muted);
  font-size: var(--t-cap);
  font-weight: var(--fw-med);
  line-height: 1.3;
}
.switch.active .switch-label { color: var(--text); }

/* ---- Shared text inputs ------------------------------------ */
.field,
#ne-input, #auth-email, #auth-code, #ac-search {
  width: 100%;
  padding: 13px var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--w-14);
  background: var(--surface-raised);
  color: #fff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.3px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.field:focus,
#ne-input:focus, #auth-email:focus, #auth-code:focus, #ac-search:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---- Shared modal heading + subtext ------------------------ */
.panel h2 {
  color: var(--text);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
}

/* ---- To-par numerals: ONE color family for every scoreboard/score readout
   (scorecard, leaderboard, tour board/bug, tournament, account viewer).
   Set via toParClass()/toParHTML() in game.js. The dark Tour board scopes its
   own over/even overrides in tour.css. ---------------------------------- */
.tp-under { color: var(--status-under); font-weight: var(--fw-bold, 700); }
.tp-over  { color: var(--status-over); }
.tp-even  { color: var(--text); }