/* ============================================================================
   Slow Golf — stylesheet. Built on the tokens in DESIGN-SYSTEM.md.
   Cool, flat, modernist. One warm accent. Barlow (UI) + Barlow Condensed (display).
   ============================================================================ */

/* ---- self-hosted type (SIL OFL) ---- */
@font-face{ font-family:"Barlow"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/barlow-400.woff2") format("woff2") }
@font-face{ font-family:"Barlow"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/barlow-500.woff2") format("woff2") }
@font-face{ font-family:"Barlow Condensed"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/barlowcond-600.woff2") format("woff2") }
@font-face{ font-family:"Barlow Condensed"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/barlowcond-700.woff2") format("woff2") }
@font-face{ font-family:"Barlow SemiCondensed"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/barlowsc-600.woff2") format("woff2") }

:root{
  /* core — cool ground */
  --ink:#1d282b; --ink-2:#4c5c5f; --ink-3:#7d8f90;
  --paper:#e2e9e6; --paper-2:#d3ddd9;
  --surface:#233033; --surface-2:#2d3b3e; --cream:#eef3f1; --cream-2:#c3d2d0;
  --line:rgba(29,40,43,0.16); --line-dk:rgba(233,242,240,0.22);
  /* the one warm accent */
  --accent:#e08a3a; --accent-deep:#c9762b;
  /* semantic (muted) */
  --pos:#7f9663; --neg:#6c777a;
  /* type */
  --font-ui:"Barlow", system-ui, sans-serif;
  --font-display:"Barlow Condensed", "Barlow", sans-serif;
  --font-num:"Barlow SemiCondensed", "Barlow Condensed", sans-serif;
  /* shape */
  --r:4px;
  /* cool "paper" screen ground (menus, results) */
  --screen-bg:
    radial-gradient(120% 80% at 50% 0%, rgba(242,247,245,0.9), rgba(242,247,245,0) 60%),
    linear-gradient(172deg, #e6ece9 0%, #dae3df 55%, #cdd9d4 100%);
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* page ground = the SAME slate as the theme-color meta: anywhere the page peeks around the canvas
   (iOS safe areas, status-bar band, home-indicator band) reads as ONE continuous dark strip —
   the old pale #cdd9d4 broke the header/footer bands mid-screen (user, 19 Jul). Every full-screen
   surface (menu/loader/scorecard/records) paints its own background over this. */
html, body{ width:100%; height:100%; overflow:hidden; background:#233033; overscroll-behavior:none; }
/* iOS: track the DYNAMIC viewport (URL bar collapse/expand) so the page never overhangs or
   undershoots the visible screen — pairs with the visualViewport-driven canvas sizing in main.js */
@supports (height: 100dvh){ html, body{ height:100dvh; } }
/* full anti-selection kit: iOS hit-tests TEXT for selection even through pointer-events:none, so a
   game tap near any HUD text popped the copy/paste loupe (and swallowed the tap). The prefixed
   forms + touch-callout are what iOS Safari actually honours. Inputs re-enable selection below. */
body{ font-family:var(--font-ui); color:var(--cream); user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-font-smoothing:antialiased; }
input, textarea{ user-select:text; -webkit-user-select:text; }
#game{ position:fixed; inset:0; }
#c{ display:block; width:100%; height:100%; touch-action:none; }
.hidden{ display:none !important; }

/* small helper — tracked micro-caps label */
small{ font-size:0.66em; letter-spacing:.06em; color:inherit; opacity:.85; }

/* ---------------------------------------------------------------------------
   Full-screen "paper" screens — menu / loader / scorecard / records share one
   cool ground. (The menu's drawn dusk scene is layered in separately.)
   --------------------------------------------------------------------------- */
/* pale results screens (loader / scorecard / records) share the cool paper ground */
#scorecard, #loader, #records{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--screen-bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  transition:opacity 0.6s ease; opacity:1;
}
#loader{ z-index:50; } #scorecard{ z-index:70; } #records{ z-index:72; }
#scorecard.hidden, #records.hidden{ display:none !important; }

/* ---- start menu: the world at a quiet hour (dark drawn scene, light type) ---- */
#menu{ position:absolute; inset:0; z-index:60; overflow:hidden; background:#3f565f;
  transition:opacity 0.6s ease; opacity:1; -webkit-font-smoothing:antialiased; }
#menu.hidden{ display:none !important; }
/* soft scrim behind the type column so light text stays legible over the bright horizon */
#menu::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(104deg, rgba(22,33,31,0.52) 0%, rgba(22,33,31,0.16) 40%, rgba(22,33,31,0) 62%); }
.menu-scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.menu-grain{ position:absolute; inset:0; opacity:.045; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.menu-ui{ position:absolute; left:clamp(30px,7vw,116px); top:clamp(48px,11vh,116px); z-index:2; max-width:min(560px,86vw); }

/* dusk overrides for the menu's shared type (light on the scene) */
#menu .menu-eyebrow{ color:#dcebe6; opacity:.9; margin-bottom:4px; text-shadow:0 1px 12px rgba(20,32,28,.5); }
#menu .menu-play{ display:inline-flex; align-items:center; gap:24px; flex-wrap:wrap; width:auto;
  background:none; border:0; padding:0; margin:0; }
#menu .menu-play::before{ display:none; }
#menu .menu-play:hover, #menu .menu-play:focus-visible{ padding-left:0; }
#menu .menu-brand{ color:#f3f7f4; text-shadow:0 2px 26px rgba(20,32,28,.3); }
#menu .menu-play:hover .menu-brand{ color:#fff; }
#menu .menu-play-arrow{ position:static; transform:none; color:var(--accent); }
#menu .menu-play:hover .menu-play-arrow{ transform:translateX(10px); }
#menu .menu-play-sub{ display:none; }
#menu .menu-list{ margin-top:clamp(40px,7vh,74px); }
#menu .menu-group-label{ color:#a9c1c0; margin:0 0 14px; text-shadow:0 1px 10px rgba(20,32,28,.5); }
#menu .menu-group-label span{ color:#8fa8a7; }
#menu .menu-item{ padding:7px 2px; border-bottom:0; background:none;
  transition:padding-left 0.22s ease; }
#menu .menu-item::before{ display:none; }
#menu .menu-item:hover, #menu .menu-item:focus-visible{ padding-left:5px; background:none; }
#menu .menu-item .mi-title, #menu .menu-item--wip .mi-title{ color:#dce9e5; font-weight:400; font-size:16px;
  text-shadow:0 1px 12px rgba(20,32,28,.55); }
#menu .menu-item:hover .mi-title{ color:#fff; }
#menu .menu-item .mi-arrow{ display:none; }
#menu .menu-meta{ position:fixed; left:clamp(30px,7vw,116px); bottom:clamp(26px,5vh,52px); z-index:3;
  max-width:min(560px,80vw); padding-top:0; color:#a8c1c0; text-shadow:0 1px 14px rgba(16,26,24,.7); }
#menu .menu-meta b{ color:#cfe2df; }
#menu .mm-link{ color:#a8c1c0; border-color:rgba(168,193,192,.35); }
#menu .mm-link:hover{ color:#fff; border-color:var(--accent); }
#menu .mm-input{ background:rgba(20,30,30,.4); border-color:rgba(168,193,192,.4); color:#eef3f1; }

.menu-inner{ width:min(560px,88vw); padding:8px 4px; position:relative; z-index:1;
  padding-bottom:clamp(84px,15vh,150px); }
.menu-scape{ position:absolute; left:0; right:0; bottom:0; width:100%;
  height:clamp(90px,16vh,160px); pointer-events:none; z-index:0; display:block;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 30%);
  mask-image:linear-gradient(180deg, transparent 0, #000 30%); }

.menu-eyebrow{ font-family:var(--font-display); font-size:14px; letter-spacing:.4em; font-weight:600;
  color:var(--accent-deep); text-transform:uppercase; margin-bottom:12px; }
.menu-brand{ font-family:var(--font-display); font-weight:700; font-size:clamp(48px,9vw,96px);
  letter-spacing:.012em; line-height:.92; text-transform:uppercase; color:var(--ink); }
.menu-rule{ height:1px; width:64px; background:linear-gradient(90deg,var(--accent-deep),transparent); margin:22px 0 10px; }

/* the venue name IS the way in */
.menu-play{ display:block; width:100%; text-align:left; position:relative; background:none; border:0;
  margin:4px 0 6px; padding:6px 42px 24px 2px; cursor:pointer; color:inherit;
  border-bottom:1px solid var(--line); -webkit-tap-highlight-color:transparent; transition:padding-left 0.3s ease; }
.menu-play::before{ content:""; position:absolute; left:0; top:8px; bottom:24px; width:2px;
  background:var(--accent); transform:scaleY(0); transition:transform 0.3s ease; }
.menu-play:hover, .menu-play:focus-visible{ padding-left:14px; outline:none; }
.menu-play:hover::before, .menu-play:focus-visible::before{ transform:scaleY(1); }
.menu-play .menu-brand{ display:block; transition:color 0.3s ease; }
.menu-play:hover .menu-brand, .menu-play:focus-visible .menu-brand{ color:#10181a; }
.menu-play-sub{ display:block; margin-top:9px; font-family:var(--font-display); font-size:13px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; }
.menu-play-arrow{ position:absolute; right:4px; top:52%; transform:translateY(-50%); color:var(--accent);
  font-size:30px; transition:transform 0.3s ease; }
.menu-play:hover .menu-play-arrow, .menu-play:focus-visible .menu-play-arrow{ transform:translateY(-50%) translateX(8px); }

/* practice list — stacked, quiet */
.menu-list{ list-style:none; margin:0; }
.menu-item{ display:flex; align-items:center; gap:16px; padding:16px 6px 16px 2px;
  border-bottom:1px solid var(--line); cursor:pointer; position:relative;
  transition:padding-left 0.22s ease, background 0.22s ease; -webkit-tap-highlight-color:transparent; }
.menu-item::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:0; background:var(--accent); transition:height 0.22s ease; }
.menu-item:hover, .menu-item:focus-visible{ padding-left:16px; background:rgba(29,40,43,0.04); outline:none; }
.menu-item:hover::before, .menu-item:focus-visible::before{ height:56%; }
.menu-item .mi-title{ flex:1; min-width:0; font-family:var(--font-ui); font-weight:500; letter-spacing:.02em; color:var(--ink); }
.menu-item .mi-arrow{ color:var(--ink-3); font-size:18px; transition:transform 0.22s ease, color 0.22s ease; }
.menu-item:hover .mi-arrow{ color:var(--accent); transform:translateX(4px); }

.menu-group-label{ list-style:none; margin:30px 0 4px; padding:0 2px; font-family:var(--font-display);
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; font-weight:600; color:var(--ink-3); }
.menu-group-label span{ font-weight:400; text-transform:none; letter-spacing:.04em; color:var(--ink-3); font-family:var(--font-ui); }
.menu-item--wip{ padding:12px 6px 12px 2px; opacity:0.8; }
.menu-item--wip .mi-title{ font-size:16px; color:var(--ink-2); }
.menu-item--wip .mi-arrow{ font-size:15px; }
.menu-item--wip:hover, .menu-item--wip:focus-visible{ opacity:1; }

/* tee-time (time-of-day) control */
.menu-tod{ margin:0 0 26px; padding-top:22px; border-top:1px solid var(--line); }
.tod-row{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.tod-ico{ width:17px; height:17px; color:var(--accent-deep); flex:none; }
.tod-name{ font-family:var(--font-display); font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); }
.tod-val{ margin-left:auto; font-family:var(--font-display); font-size:14px; letter-spacing:.06em; color:var(--accent-deep); font-weight:600; }
.tod-slider{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:linear-gradient(90deg, #b9c6c1, var(--accent-deep)); outline:none; cursor:pointer; }
.tod-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:17px; height:17px; border-radius:50%;
  background:#f3f7f5; border:2px solid var(--accent-deep); box-shadow:0 1px 5px rgba(20,34,32,.3); cursor:pointer; }
.tod-slider::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:#f3f7f5;
  border:2px solid var(--accent-deep); box-shadow:0 1px 5px rgba(20,34,32,.3); cursor:pointer; }
.tod-ends{ display:flex; justify-content:space-between; margin-top:7px; font-family:var(--font-display);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.menu-foot{ margin-top:20px; font-family:var(--font-display); font-size:12px; letter-spacing:.28em;
  color:var(--ink-3); text-transform:uppercase; }

/* player strip + records link row on the menu */
.menu-meta{ display:flex; align-items:center; gap:10px; row-gap:7px; flex-wrap:wrap; list-style:none;
  padding:16px 4px 0; font-family:var(--font-display); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); }
.menu-meta b{ color:var(--ink-2); font-weight:700; letter-spacing:.24em; }
.mm-dot{ opacity:0.5; }
.mm-link{ background:none; border:none; padding:0; cursor:pointer; font:inherit; color:var(--ink-2);
  letter-spacing:.24em; text-transform:uppercase; border-bottom:1px solid var(--line); }
.mm-link:hover{ color:var(--accent-deep); border-color:var(--accent-deep); }
.mm-input{ background:rgba(255,255,255,0.5); border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); font:inherit; letter-spacing:.1em; text-transform:uppercase; padding:2px 6px; width:140px; }

/* small in-game "back to menu" button — a flat stamp: whisper fill + hairline, no heavy chrome */
#menuBtn{ pointer-events:auto; cursor:pointer; background:rgba(16,24,25,0.28); border:1px solid var(--line-dk);
  color:var(--cream-2); border-radius:2px; font-family:var(--font-display); font-weight:600; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; padding:5px 9px 4px 12px; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:color 0.25s ease, border-color 0.25s ease; }
#menuBtn:hover{ border-color:rgba(224,138,58,0.7); color:var(--cream); }

/* short-game tool buttons (right edge) — same flat stamp language as MENU */
#flagBtn, #chipMoveBtn{ position:absolute; right:var(--edge); pointer-events:auto; cursor:pointer;
  height:34px; padding:0 16px; background:rgba(16,24,25,0.28); border:1px solid var(--line-dk);
  border-radius:2px; color:var(--cream); font-family:var(--font-display); font-size:12px;
  letter-spacing:.18em; font-weight:600; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#flagBtn{ top:calc(var(--edge) + 126px); }
#chipMoveBtn{ top:calc(var(--edge) + 168px); }
#flagBtn:hover, #chipMoveBtn:hover{ border-color:rgba(224,138,58,0.7); color:#fff; }
#flagBtn:active, #chipMoveBtn:active{ transform:scale(0.94); }
#flagBtn.hidden, #chipMoveBtn.hidden{ display:none; }

/* ---------------------------------------------------------------------------
   Scorecard — cool results screen (was warm paper). Barlow Condensed numerals.
   --------------------------------------------------------------------------- */
.sc-screen-inner{ width:min(680px,92vw); padding:8px 4px; position:relative; z-index:1; }
.sc-screen-inner .menu-rule{ margin:18px 0 20px; }
.sc-grid{ display:grid; grid-template-columns:auto repeat(var(--cols), minmax(0,1fr)) auto;
  gap:1px 0; align-items:stretch; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:rgba(255,255,255,0.4); }
.sc-cell{ display:flex; align-items:center; justify-content:center; min-height:38px; padding:4px 2px;
  font-family:var(--font-num); font-size:16px; font-variant-numeric:tabular-nums; color:var(--ink); }
.sc-rowlabel{ justify-content:flex-start; padding-left:14px; padding-right:12px; font-family:var(--font-display);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--accent-deep); }
.sc-head{ color:var(--ink-2); font-family:var(--font-display); font-weight:600; letter-spacing:.06em; }
.sc-head.sc-total, .sc-rowlabel.sc-total{ color:var(--ink); }
.sc-par{ color:var(--ink-3); }
.sc-score{ color:var(--ink); font-weight:600; }
.sc-grid .sc-total{ font-weight:700; color:var(--ink); }
.sc-rowsep{ box-shadow:inset 0 1px 0 var(--line); }
.sc-colsep{ box-shadow:inset 1px 0 0 var(--line); }
.sc-mark{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; line-height:1; }
.sc-mark.birdie{ border:1.5px solid var(--accent); border-radius:50%; }
.sc-mark.eagle{ border:1.5px solid var(--accent); border-radius:50%; box-shadow:0 0 0 3px rgba(224,138,58,0.28); }
.sc-mark.bogey{ border:1.5px solid var(--neg); border-radius:3px; }
.sc-mark.dbogey{ border:1.5px solid var(--neg); border-radius:3px; box-shadow:0 0 0 3px rgba(108,119,122,0.28); }

.sc-crest{ width:50px; margin-bottom:12px; color:var(--accent-deep); }
.sc-hero{ display:flex; align-items:baseline; gap:16px; margin:4px 0 2px; }
.sc-topar{ font-family:var(--font-display); font-weight:700; font-size:clamp(52px,10vw,68px); line-height:0.9;
  letter-spacing:.01em; color:var(--ink); }
.sc-topar.under{ color:var(--accent-deep); }
.sc-topar.over{ color:var(--neg); }
.sc-herosub{ font-family:var(--font-display); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.sc-herosub b{ color:var(--ink); font-weight:700; font-size:14px; }

.sc-actions{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:flex; }
.sc-cont{ pointer-events:auto; cursor:pointer; padding:14px 36px; background:transparent;
  border:1px solid rgba(29,40,43,0.4); border-radius:2px; color:var(--ink); font-family:var(--font-display);
  font-size:14px; letter-spacing:.28em; font-weight:600; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent; transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.sc-cont:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ---------------------------------------------------------------------------
   Records overlay
   --------------------------------------------------------------------------- */
.rec-body{ max-height:52vh; overflow-y:auto; text-align:left; }
.rec-head{ font-family:var(--font-display); font-size:12px; letter-spacing:.24em; color:var(--accent-deep);
  text-transform:uppercase; margin:18px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line); }
.rec-head:first-child{ margin-top:0; }
.rec-row{ display:flex; align-items:baseline; gap:12px; padding:6px 2px; font-size:14px; color:var(--ink-2);
  border-bottom:1px solid rgba(29,40,43,0.07); }
.rec-venue{ flex:0 0 34%; color:var(--ink); }
.rec-mid{ flex:0 0 22%; font-family:var(--font-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rec-score{ flex:1; text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.rec-score b{ color:var(--ink); font-size:16px; }
.rec-empty{ padding:10px 2px; font-size:14px; color:var(--ink-3); font-style:italic; }

/* logo mark + loader tip */
.logo-mark{ width:92px; height:auto; color:var(--accent-deep); display:block; margin-bottom:18px; opacity:0.95; }
.loader-inner{ width:min(560px,88vw); padding:8px 4px; position:relative; z-index:1; padding-bottom:clamp(84px,15vh,150px); }
.loader-tip{ font-family:var(--font-display); font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin-top:14px; }

/* ---------------------------------------------------------------------------
   HUD — cool, flat, minimal. No glass, no blur, no 800-weight.
   --------------------------------------------------------------------------- */
#hud{ position:absolute; inset:0; pointer-events:none; z-index:10; --top-h:72px; --edge:16px; color:var(--cream);
  /* ink-on-air: HUD readouts float directly on the world, carried by a soft dark halo (no panels) */
  text-shadow:0 1px 10px rgba(10,18,18,0.72), 0 0 3px rgba(10,18,18,0.55); }
.panel{ background:transparent; border:0; box-shadow:none; }

/* hole info top-left */
#holeinfo{ position:absolute; top:calc(var(--edge) + env(safe-area-inset-top, 0px)); left:calc(var(--edge) + env(safe-area-inset-left, 0px));
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; transform-origin:top left;
  pointer-events:auto; }   /* UI-looking corners swallow mis-taps rather than starting a swing */
.course{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.05em; text-transform:uppercase; color:var(--cream); margin:7px 0 1px; }
/* label quiet, value bright — the list reads as a printed annotation, not a debug dump */
.hi-line{ font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--cream-2); letter-spacing:.16em; text-transform:uppercase; }
.hi-line b{ font-family:var(--font-num); font-weight:600; color:var(--cream); letter-spacing:.06em; }
.hi-line:empty{ display:none; }
.hi-shot{ color:var(--cream-2); margin-top:5px; }
.hi-shot span{ font-family:var(--font-num); font-weight:600; color:var(--cream); }
/* the in-place drop-down under MENU */
#menuDrop{ pointer-events:auto; margin-top:6px; background:rgba(31,42,44,0.94); border:1px solid var(--line-dk);
  border-radius:var(--r); padding:6px 0; min-width:178px; box-shadow:0 6px 18px rgba(12,20,20,0.28); }
.md-item{ display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--cream);
  font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 14px; -webkit-tap-highlight-color:transparent; }
.md-item:hover{ background:rgba(238,243,241,0.07); color:#fff; }
/* the 2px accent bar is the system's one "you are here" marker — reuse it, keep the text cool */
.md-item.md-on{ color:var(--cream); box-shadow:inset 2px 0 0 var(--accent); }
.md-sep{ height:1px; background:var(--line-dk); margin:5px 0; }
#mdControls{ padding:4px 14px 8px; font-family:var(--font-ui); font-size:12px; line-height:1.7; color:var(--cream-2);
  letter-spacing:.02em; text-transform:none; white-space:nowrap; }
#mdControls b{ display:inline-block; min-width:58px; color:var(--cream); font-weight:500; }

/* wind top-right */
#wind{ position:absolute; top:calc(var(--edge) + env(safe-area-inset-top, 0px)); right:calc(var(--edge) + env(safe-area-inset-right, 0px));
  display:flex; flex-direction:column; align-items:center; gap:2px; transform-origin:top right;
  pointer-events:auto; }   /* swallow mis-taps (see #holeinfo) */
.windring{ fill:rgba(30,42,44,0.3); stroke:var(--line-dk); stroke-width:1.5; }
.windn{ fill:var(--cream-2); font-family:var(--font-display); font-size:10px; text-anchor:middle; font-weight:600; }
.windarrowfill{ fill:var(--accent); stroke:#f4ece0; stroke-width:0.5; }
.windhub{ fill:var(--cream); }
.windspeed{ font-family:var(--font-num); font-size:20px; font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.windspeed small{ font-family:var(--font-display); font-weight:600; font-size:10px; letter-spacing:.14em; color:var(--cream-2); margin-left:1px; }

/* swing-plane power meter (bottom-left) — UNIFORM scale: the tilt comes from the arc's own rotate(-45),
   so circles stay round + the ribbon stroke stays even (the old non-uniform scale distorted the head dot
   into a 1:3.4 sliver and pinched the stroke). */
#meter{ position:absolute; left:calc(8px + env(safe-area-inset-left, 0px)); bottom:calc(10px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; align-items:center; gap:4px;
  transform-origin:bottom left; transform:scale(0.82);
  opacity:0.78; }   /* semi-transparent — it sits beside the golfer, it must not compete with him (user, 19 Jul) */
/* ink-on-air: no panel, just a soft dark halo so the marks read over any turf/sky (matches the HUD) */
#meterSvg{ overflow:visible; filter:drop-shadow(0 1px 6px rgba(10,18,18,0.5)); }

/* center message */
#message{ position:absolute; top:22%; left:50%; transform:translateX(-50%); width:max-content; max-width:96vw;
  /* floor 21px (was 30): "BAYFRONT NO. 1 · PAR 4 · 383 YDS" must sit on ONE line on a 375px phone */
  font-family:var(--font-display); font-weight:700; font-size:clamp(21px,5.6vw,46px); letter-spacing:.06em; text-transform:uppercase;
  text-shadow:0 2px 12px rgba(12,20,20,0.5); text-align:center; opacity:0; transition:opacity 0.4s ease; color:var(--cream); }
#message.show{ opacity:1; }

/* bottom-right shot card — the one CONTAINED element of the HUD. It is the interactive control
   cluster, so it gets a flat surface card (solid tint, hairline zones, no blur/glass) while pure
   readouts elsewhere stay ink-on-air. Three zones: facts / selectors / scout strip. */
#shotcard{ position:absolute; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:112px; display:flex; flex-direction:column; align-items:stretch; text-align:center;
  background:rgba(29,40,43,0.31); border:0; border-radius:var(--r);
  transform-origin:bottom right; text-shadow:none;
  pointer-events:auto; }   /* the card swallows its own taps — a near-miss on a stepper must NOT fall through and start the swing */
/* …but while the meter runs it yields to the course, so a timing tap landing on it still counts
   (class toggled per-frame in main.js animate) */
#hud.swinging #shotcard, #hud.swinging #shotcard *{ pointer-events:none; }
.sc-facts{ padding:8px 6px 6px; border-bottom:1px solid var(--line-dk); }
.sc-pin{ line-height:1; }
.sc-pin span{ font-family:var(--font-num); font-weight:600; font-size:26px; color:var(--cream); font-variant-numeric:tabular-nums; }
.sc-pinlbl{ font-family:var(--font-display); font-weight:600; font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-2); margin-top:2px; }
.sc-ctx{ display:flex; justify-content:center; align-items:baseline; gap:5px; margin-top:6px; white-space:nowrap; }
.sc-dot{ color:var(--cream-2); opacity:0.5; font-size:11px; }
.sc-lie{ color:var(--cream-2); font-family:var(--font-display); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:10px; }
.sc-lie.lie-good{ color:var(--pos); }
/* elevation is context, not the live value — accent stays reserved (DESIGN-SYSTEM §1.2) */
.sc-elev{ color:var(--cream-2); font-family:var(--font-display); font-weight:600; letter-spacing:.08em; font-size:10px; }
.sc-sel{ padding:2px 2px 4px; border-bottom:1px solid var(--line-dk); }
/* steppers hug the label — centred tight cluster, NOT spread to the card edges (user, 19 Jul:
   "why is there such a large gap between the ‹ arrows and the text?") */
.sc-ctl{ display:flex; align-items:center; justify-content:center; gap:2px; }
.sc-step{ pointer-events:auto; cursor:pointer; border:none; background:none; color:var(--cream-2);
  font-size:20px; line-height:1; font-weight:300; width:30px; height:34px; padding:0 0 3px;
  display:inline-flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
  user-select:none; touch-action:manipulation; transition:color 0.15s ease, transform 0.1s ease; }
.sc-step:hover{ color:var(--cream); }
.sc-step:active{ color:var(--accent); transform:scale(0.85); }
.sc-club{ pointer-events:auto; cursor:pointer; font-family:var(--font-display); font-size:19px; font-weight:700;
  letter-spacing:.04em; min-width:36px; text-align:center; color:var(--cream); }
.sc-clubdist{ color:var(--cream-2); font-family:var(--font-num); font-weight:600; font-size:11px; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; margin:-3px 0 1px; }
.sc-clubdist small{ font-family:var(--font-display); font-weight:600; font-size:8px; letter-spacing:.16em; margin-left:3px; }
.sc-clubdist:empty{ display:none; }
.sc-shotctl{ margin-top:-2px; }
.sc-shotname{ pointer-events:auto; cursor:pointer; color:var(--cream); font-family:var(--font-display); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; font-size:12px; min-width:44px; text-align:center;
  -webkit-tap-highlight-color:transparent; user-select:none; touch-action:manipulation; }

/* scout view — a full-width strip at the card's foot (hold: overhead) */
#camBtn{ pointer-events:auto; cursor:pointer; height:26px; border:0; background:transparent; color:var(--cream-2);
  display:flex; align-items:center; justify-content:center; padding:0; border-radius:0 0 var(--r) var(--r);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#camBtn:hover{ background:rgba(238,243,241,0.07); color:var(--cream); }
#camBtn .cam-ico{ width:17px; height:17px; display:none; }
#camBtn .cam-behind{ display:block; }
#camBtn[data-cammode] .cam-ico{ display:none; }
#camBtn[data-cammode="0"] .cam-behind{ display:block; }
#camBtn[data-cammode="1"] .cam-high{ display:block; }
#camBtn[data-cammode="2"] .cam-follow{ display:block; }
#camBtn[data-cammode="1"], #camBtn[data-cammode="2"]{ background:rgba(224,138,58,0.25); color:#fff; }

/* photo mode (P key — the on-screen button was retired 19 Jul) */
#photoUi{ position:fixed; inset:0; z-index:40; pointer-events:none; display:none; }
#photoUi.on{ display:block; }
#photoExit{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  pointer-events:auto; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:rgba(35,48,51,0.55); border:1px solid var(--line-dk); color:var(--cream);
  font-size:15px; line-height:1; font-family:inherit; padding:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#photoExit:hover{ background:rgba(45,59,62,0.8); border-color:var(--accent); color:#fff; }
#photoHint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--font-display);
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); white-space:nowrap; max-width:94vw;
  text-shadow:0 1px 6px rgba(12,20,20,0.6); opacity:0; transition:opacity 1.4s ease; }
@media (max-width:470px){ #photoHint{ font-size:10px; letter-spacing:.16em; } }

/* between-hole interstitial */
#holecard{ position:fixed; inset:0; z-index:61; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none; opacity:0; color:var(--cream); -webkit-font-smoothing:antialiased; }
.hc-eyebrow{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.46em; color:var(--accent); text-transform:uppercase; margin-bottom:6px; }
/* the hole number is the hero — a big, confident broadcast statement */
.hc-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(88px,16vw,168px); line-height:0.9; letter-spacing:.005em; color:var(--cream); text-shadow:0 6px 40px rgba(8,14,14,0.4); }
.hc-rule{ width:64px; height:1px; margin:22px auto 20px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.hc-sub{ font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:.3em; text-transform:uppercase; color:var(--cream-2); }
.hc-thru{ font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); margin-top:14px; min-height:13px; }
@media (max-width:470px){ .hc-num{ font-size:76px; } .hc-sub{ font-size:13px; letter-spacing:.22em; } }

/* ---- responsive corner scaling ---- */
@media (max-width:820px){
  #holeinfo, #wind{ transform:scale(0.84); }
  #shotcard{ transform:scale(0.92); }   /* the card barely shrinks — its steppers are touch targets */
  #meter{ left:6px; transform:scale(0.72); }   /* uniform (was non-uniform 0.54,1.86 → distorted the dots) */
}
@media (max-width:470px){
  #holeinfo, #wind{ transform:scale(0.7); }
  #shotcard{ transform:scale(0.88); }
  .menu-brand{ font-size:38px; }
  .menu-meta{ gap:8px; font-size:11px; letter-spacing:.16em; }
}

/* touch devices: bigger stepper targets (44px-ish rule) — layout only widens on phones/tablets */
@media (pointer:coarse){
  #shotcard{ width:118px; }
  .sc-step{ width:34px; height:40px; font-size:22px; }
  #camBtn{ height:32px; }
}