/* self-hosted fonts (copied from @fontsource by tools/vendor.mjs) */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }

:root {
  --bg: #0c1a12;
  --panel: rgba(10, 22, 16, 0.72);
  --panel-solid: #10241a;
  --line: rgba(255, 255, 255, 0.12);
  --text: #eef6f0;
  --muted: #a9bfb1;
  --accent: #f4d31f;
  --green: #4fd07a;
  --red: #ff6159;
  --blue: #5fd4ff;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Barlow, system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#swingOverlay { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.good { color: var(--green); }
.bad { color: var(--red); }
kbd { display: inline-block; font: 600 10px Barlow, sans-serif; padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.06); margin-left: 2px; }

.btn { font: 600 15px Barlow, sans-serif; color: var(--text); background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; cursor: pointer; transition: background .15s, transform .1s; }
.btn:hover { background: rgba(255,255,255,.16); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #ffe25a, #f0b91c); color: #1b1a0c; border-color: #ffe98a; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { background: rgba(255, 97, 89, .18); border-color: rgba(255, 97, 89, .5); }
.btn.big { font-size: 18px; padding: 12px 26px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.lbl { font: 700 11px Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.big { font: 700 30px 'Barlow Condensed', Barlow, sans-serif; line-height: 1.05; }
.sub { font-size: 13px; color: var(--muted); }
.sub b { color: var(--text); }

/* ---------- boot / loading ---------- */
#boot, #loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 40%, #1b3a27, #08140d); z-index: 50; }
#loading { background: rgba(6, 14, 9, .55); backdrop-filter: blur(3px); z-index: 40; font-weight: 600; }
#gfxLost { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 14, 9, .8); z-index: 60; }
/* ?perf readout: tap to copy a summary */
#perfHud { position: fixed; top: max(4px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 70; max-width: calc(100vw - 16px); padding: 3px 8px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #b8f5c4; font: 600 11px/1.3 ui-monospace, Menlo, Consolas, monospace; text-align: center; cursor: copy; }
#perfHud.slow { color: #ffb36b; }
/* portrait phone: the sky under the hole card, clear of the distance panel and the touch controls */
@media (max-width: 599px) { #perfHud { top: calc(env(safe-area-inset-top) + 84px); left: 8px; transform: none; max-width: 240px; } }
@media (orientation: landscape) and (max-height: 500px) { #perfHud { top: 92px; left: 8px; transform: none; max-width: 240px; } }
/* off the course it sits in a bottom corner, clear of the menu and summary titles */
body:not(.in-round) #perfHud { top: auto; bottom: max(4px, env(safe-area-inset-bottom)); left: 4px; transform: none; }
#perfDump { position: fixed; left: 8px; right: 8px; top: 40px; height: 14em; z-index: 71; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.boot-msg { max-width: 420px; margin: 0 16px; padding: 18px 20px; text-align: center; background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.boot-msg b { font-size: 18px; }
.boot-msg p { margin: 0; color: var(--muted); line-height: 1.45; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.logo { font: 800 46px 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-shadow: 0 3px 18px rgba(0,0,0,.5); }
.logo span { color: var(--accent); }
h1.logo { margin: 0; line-height: 1.1; }

/* ---------- menu ---------- */
#menu { position: fixed; inset: 0; z-index: 20; overflow-y: auto; padding: 22px clamp(16px, 3vw, 40px); background: linear-gradient(90deg, rgba(6,14,9,.92) 0%, rgba(6,14,9,.78) 34%, rgba(6,14,9,.1) 62%, rgba(6,14,9,0) 100%); }
.menu-panel { width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; zoom: var(--ui-scale, 1); }
.menu-head { text-align: left; }
.tagline { color: #d8e8dd; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.course-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.course-tab { display: flex; align-items: center; gap: 8px; font: 600 14px Barlow, sans-serif; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 10px; cursor: pointer; }
.course-tab .cc-flag { width: 10px; height: 16px; }
.course-tab:hover { background: rgba(255,255,255,.14); }
.course-tab.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: rgba(255,255,255,.12); }
.course-hero { background: rgba(10, 22, 16, .7); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; backdrop-filter: blur(6px); }
.course-hero .cc-name { font-size: 30px; }
.menu-play { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.menu-play .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.menu-play .btn small { font: 500 13px Barlow, sans-serif; opacity: .8; margin-top: 2px; }
/* the second big button is a real call to action, not a ghost: solid so it reads over bright scenery */
#btnPlay { background: linear-gradient(180deg, #2f6b46, #1f4d33); border-color: rgba(190, 240, 205, .65); }
#btnPlay:hover { background: linear-gradient(180deg, #38794f, #265a3b); }
.daily-card { text-align: left; font: 500 14px Barlow, sans-serif; color: var(--text); background: linear-gradient(90deg, rgba(95,212,255,.16), rgba(95,212,255,.04)); border: 1px solid rgba(95,212,255,.4); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.daily-card:hover { background: linear-gradient(90deg, rgba(95,212,255,.26), rgba(95,212,255,.08)); }
.daily-card .lbl { font: 700 11px Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.resume-card { background: linear-gradient(90deg, rgba(79,208,122,.2), rgba(79,208,122,.05)); border-color: rgba(79,208,122,.5); }
.resume-card:hover { background: linear-gradient(90deg, rgba(79,208,122,.3), rgba(79,208,122,.08)); }
.resume-card .lbl { color: var(--green); }
.resume-card { position: relative; padding-right: 110px; }
.resume-card .rc-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 14px Barlow, sans-serif; color: #0d2415; background: var(--green); border-radius: 999px; padding: 6px 14px; }
.challenge { background: rgba(244,211,31,.12); border: 1px solid rgba(244,211,31,.5); border-radius: var(--radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; }
.row.wrap { flex-wrap: wrap; margin-top: 14px; }
.drawer { background: rgba(10,22,16,.7); border: 1px solid var(--line); border-radius: var(--radius); }
.drawer > summary { cursor: pointer; padding: 10px 14px; font: 700 13px Barlow, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); list-style: none; }
.drawer > summary::before { content: '\25B8  '; }
.drawer[open] > summary::before { content: '\25BE  '; }
.drawer .menu-opts { background: none; border: 0; justify-content: flex-start; padding: 0 14px 14px; }
.names { display: flex; flex-wrap: wrap; gap: 4px; }
.name-input { font: 500 13px Barlow, sans-serif; background: #173022; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; width: 110px; user-select: text; }
.cc-top { display: flex; gap: 10px; align-items: center; }
.cc-flag { width: 14px; height: 22px; background: var(--accent); clip-path: polygon(0 0, 100% 25%, 0 50%); border-left: 2px solid #ddd; flex: none; }
.cc-name { font: 700 22px 'Barlow Condensed', sans-serif; }
.cc-loc { font-size: 12px; color: var(--muted); }
.cc-meta { font-size: 12px; color: var(--accent); margin: 8px 0 4px; font-weight: 600; }
.cc-blurb { font-size: 13px; line-height: 1.4; margin: 6px 0; color: #d7e6dc; }
.cc-teach { font-size: 12px; color: var(--muted); }
.cc-teach ul { margin: 4px 0 0; padding-left: 16px; }
.cc-best { margin-top: 8px; font-weight: 700; color: var(--green); font-size: 13px; }
.menu-opts { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center; background: rgba(10,22,16,.7); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.opt { display: flex; flex-direction: column; gap: 5px; }
.opt > label { font: 700 11px Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.segs { display: flex; flex-wrap: wrap; gap: 4px; }
.seg { font: 600 13px Barlow, sans-serif; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.seg:hover { background: rgba(255,255,255,.14); }
.seg-desc { margin-top: 6px; min-height: 2.4em; line-height: 1.25; }
.seg-desc:empty { display: none; }
body.shot-open #helpBar { visibility: hidden; }
.hist td.nowrap { white-space: nowrap; }
.seg.on { background: var(--accent); color: #1b1a0c; border-color: var(--accent); }
.sum-tabs { margin: 14px 0 2px; }
select { font: 500 13px Barlow, sans-serif; background: #173022; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
#profileDesc { max-width: 320px; }
.menu-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.menu-foot { text-align: left; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud .panel { position: absolute; padding: 10px 14px; }
#holeCard { top: 14px; left: 14px; display: flex; align-items: center; gap: 12px; min-width: 300px; }
.hc-num { font: 800 40px 'Barlow Condensed', sans-serif; background: var(--accent); color: #1b1a0c; border-radius: 10px; width: 56px; height: 56px; display: grid; place-items: center; }
.hc-name { font: 700 20px 'Barlow Condensed', sans-serif; }
.hc-par { font-size: 13px; color: var(--muted); }
.hc-right { margin-left: auto; text-align: right; }
.hc-shot { font-size: 12px; color: var(--muted); font-weight: 600; }
.hc-score { font: 800 26px 'Barlow Condensed', sans-serif; }
.hc-score.under { color: #ff6b5e; }
.hc-score.over { color: #8fc6ff; }
#distBox { top: 88px; left: 14px; min-width: 180px; }
#distBox .sub { display: flex; flex-direction: column; gap: 1px; }
.elev { font-size: 12px; }
#windBox { top: 14px; right: 14px; display: flex; gap: 12px; align-items: center; }
.wind-dial { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); display: grid; place-items: center; background: radial-gradient(circle, rgba(255,255,255,.08), transparent); }
#windArrow { font-size: 22px; color: var(--blue); transition: transform .4s; }
#windArrow i { display: block; font-style: normal; transform: rotate(-90deg); }
#windBox .big small { font-size: 14px; color: var(--muted); }
#clubBox { left: 14px; bottom: 116px; min-width: 250px; }
.club-top { display: flex; align-items: center; gap: 8px; }
.club-key { font: 800 18px 'Barlow Condensed', sans-serif; background: #fff; color: #10241a; border-radius: 6px; padding: 1px 7px; }
.club-name { font: 700 20px 'Barlow Condensed', sans-serif; }
.club-arrows { margin-left: auto; color: var(--muted); font-size: 12px; }
.club-row { display: flex; gap: 14px; font-size: 12px; margin-top: 6px; color: var(--muted); }
.club-row b { color: var(--text); }
.club-row.dim { opacity: .35; }
#lieBox { left: 14px; bottom: 212px; min-width: 170px; }
.lie-name { font: 700 20px 'Barlow Condensed', sans-serif; }
.lie-range { font-weight: 700; color: var(--accent); }
#lieBox[data-lie="deep"] .lie-range, #lieBox[data-lie="splash"] .lie-range { color: var(--red); }
#minimap { right: 14px; top: 90px; width: 170px; height: 300px; padding: 0 !important; pointer-events: auto; cursor: crosshair; }
#caddie { position: absolute; right: 200px; top: 92px; max-width: 330px; display: flex; gap: 8px; align-items: flex-start; background: rgba(255, 250, 230, .94); color: #1d2a20; border-radius: 12px; padding: 9px 12px; font-size: 13px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-weight: 500; }
/* the lesson card takes the caddie note's slot while a lesson step is up */
body.coaching #caddie { visibility: hidden; }
.caddie-ico { font-size: 18px; }
.ico { width: 1.25em; height: 1.25em; display: block; margin: 0 auto; }
.caddie-ico .ico { width: 20px; height: 20px; }
#meter { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: min(620px, 92vw); height: 70px; }
#pinTag { position: fixed; left: 0; top: 0; z-index: 9; padding: 3px 10px; border-radius: 999px; background: rgba(8,20,13,.72); border: 1px solid rgba(255,255,255,.3); color: #fff; font: 700 14px "Barlow Condensed", sans-serif; letter-spacing: .03em; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
#helpBar { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: rgba(255,255,255,.75); z-index: 10; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.8); width: 96vw; }
#helpBar b { color: #fff; }

#toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 15; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--line); padding: 6px 16px; border-radius: 30px; font-weight: 700; backdrop-filter: blur(6px); animation: tin .25s ease-out; transition: opacity .4s, transform .4s; }
.toast.good { border-color: var(--green); color: #c9ffd9; }
.toast.bad { border-color: var(--red); color: #ffd2cf; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
.banner { position: fixed; top: 26%; left: 50%; transform: translate(-50%, -50%) scale(.7); font: 800 76px 'Barlow Condensed', sans-serif; letter-spacing: .03em; opacity: 0; pointer-events: none; z-index: 31; text-shadow: 0 4px 30px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.4); transition: opacity .3s, transform .45s cubic-bezier(.2, 1.6, .4, 1); white-space: nowrap; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner.great { color: #ff6b5e; }
.banner.good { color: #fff; }
.banner.bad { color: #9fd0ff; }
.banner.pure { top: 26%; font-size: 44px; letter-spacing: .22em; color: #ffd84d; text-shadow: 0 0 18px rgba(255,216,77,.55), 0 2px 0 rgba(0,0,0,.4); transition: opacity .18s, transform .3s cubic-bezier(.2, 1.8, .4, 1); }

/* ---------- hole intro ---------- */
#intro { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); display: flex; gap: 16px; align-items: stretch; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 20px 14px 14px; z-index: 12; width: min(640px, 92vw); backdrop-filter: blur(8px); animation: tin .4s ease-out; }
.intro-num { font: 800 64px 'Barlow Condensed', sans-serif; background: var(--accent); color: #1b1a0c; border-radius: 12px; min-width: 88px; display: grid; place-items: center; }
.intro-name { font: 700 30px 'Barlow Condensed', sans-serif; }
.intro-meta { color: var(--accent); font-weight: 600; font-size: 14px; }
.intro-tip { margin: 8px 0 4px; font-size: 14px; line-height: 1.4; color: #d7e6dc; }
.intro-skip { font-size: 12px; color: var(--muted); }

/* ---------- shot panel ---------- */
#shotPanel { position: fixed; right: 14px; bottom: 14px; width: min(400px, 94vw); max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px 16px; z-index: 12; cursor: pointer; animation: tin .3s ease-out; }
.sp-head { font: 700 13px Barlow; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
.sp-grid div { display: flex; flex-direction: column; }
.sp-grid span { font-size: 11px; color: var(--muted); }
.sp-grid b { font: 700 17px 'Barlow Condensed', sans-serif; }
.sg { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; }
.sg span { font-size: 12px; color: var(--muted); }
.sg b { font: 800 24px 'Barlow Condensed', sans-serif; text-align: right; }
.sg em { font-style: normal; font-size: 12px; font-weight: 600; }
.sg small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.sg.pos b { color: var(--green); }
.sg.neg b { color: var(--red); }
.sp-sub { font: 700 11px Barlow; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.tip { background: rgba(95, 212, 255, .08); border-left: 3px solid var(--blue); border-radius: 6px; padding: 8px 10px; margin-top: 6px; }
.tip b { font-size: 14px; }
.tip p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #d7e6dc; }
.sp-cont { text-align: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
.sp-btns { display: flex; gap: 8px; margin-top: 12px; }
.sp-btns .btn { flex: 1; }
.sp-more { display: block; }
.sp-adv { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
#shotPanel.open .sp-adv { display: grid; }
/* a dialog is open: dim the scene and take the shot readout out from behind it */
body:has(.modal:not(.hidden))::after { content: ''; position: fixed; inset: 0; z-index: 29; background: rgba(4, 10, 6, .5); pointer-events: none; }
body:has(.modal:not(.hidden)) #shotPanel { visibility: hidden; }

/* ---------- modals ---------- */
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; background: rgba(12, 26, 18, .95); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; width: min(760px, 94vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: tin .25s ease-out; }
.modal:focus, #academy:focus { outline: none; }
#settings .set-foot { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: flex-end; margin: 14px -24px -20px; padding: 12px 24px; background: rgba(12, 26, 18, .98); border-top: 1px solid var(--line); }
#confirmBox { z-index: 31; width: min(420px, 94vw); }
#confirmBox p { margin: 6px 0 16px; color: var(--muted); line-height: 1.4; }
#confirmBox .row { display: flex; gap: 8px; }
#confirmBox .row .btn { flex: 1; }
.modal h2 { margin: 0 0 6px; font: 700 28px 'Barlow Condensed', sans-serif; }
.modal h3 { margin: 16px 0 6px; font: 700 18px 'Barlow Condensed', sans-serif; color: var(--accent); }
#pause { width: min(380px, 94vw); display: flex; flex-direction: column; gap: 10px; }
.set { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.relief-opts { display: grid; gap: 10px; margin-top: 12px; }
.relief-opt { position: relative; text-align: left; font-family: inherit; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.relief-opt:hover { background: rgba(255,255,255,.1); }
.relief-opt.best { border-color: var(--green); }
.relief-opt b { font-size: 17px; }
.relief-opt .tag { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0b1b10; background: var(--green); border-radius: 999px; padding: 2px 9px; }
.relief-opt p { margin: 3px 0 6px; font-size: 13px; color: var(--muted); }
.relief-opt div { display: flex; gap: 16px; font-size: 13px; font-weight: 600; }
.relief-opt.best div span:last-child { color: var(--green); }

#scorecard table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
#scorecard th, #scorecard td { border: 1px solid var(--line); padding: 5px 3px; text-align: center; }
#scorecard th { background: rgba(255,255,255,.05); font-weight: 700; width: 58px; }
#scorecard tr.num td { font-weight: 700; background: rgba(255,255,255,.05); }
#scorecard tr.yd td { color: var(--muted); font-size: 12px; }
#scorecard tr.sc td { font: 700 17px 'Barlow Condensed', sans-serif; height: 34px; }
#scorecard td span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; }
#scorecard table.few { width: auto; min-width: 280px; margin-left: auto; margin-right: auto; }
#scorecard table.few td { min-width: 64px; }
#scorecard table.few th { width: 76px; }
td span.birdie { border: 2px solid #ff6b5e; border-radius: 50%; color: #ff8d83; }
td span.eagle { border: 2px solid #ff6b5e; border-radius: 50%; box-shadow: 0 0 0 2px #0e1e15, 0 0 0 4px #ff6b5e; color: #ff8d83; }
td span.bogey { border: 2px solid #8fc6ff; }
td span.dbl { border: 2px solid #8fc6ff; box-shadow: 0 0 0 2px #0e1e15, 0 0 0 4px #8fc6ff; }
td span.pickup { position: relative; color: var(--muted); }
td span.pickup i { position: absolute; top: -6px; right: -7px; font: 700 12px Barlow, sans-serif; color: var(--red); font-style: normal; }
.sc-head { display: flex; justify-content: space-between; align-items: center; }
.sc-total { font: 800 44px 'Barlow Condensed', sans-serif; text-align: right; }
.sc-total small { display: block; font-size: 14px; color: var(--muted); }
.sc-total.under, .sum-score.under { color: #ff6b5e; }
.sc-total.over, .sum-score.over { color: #8fc6ff; }
.sc-stats, .sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.sc-stats div, .sum-grid div { background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.sc-stats span, .sum-grid span { font-size: 11px; color: var(--muted); }
.sc-stats b, .sum-grid b { font: 700 22px 'Barlow Condensed', sans-serif; }
#scNext { width: 100%; }
#summary h1 { margin: 0; font: 800 38px 'Barlow Condensed', sans-serif; }
.sum-score { font: 800 72px 'Barlow Condensed', sans-serif; line-height: 1; margin: 8px 0; }
.sum-score small { font-size: 16px; color: var(--muted); margin-left: 12px; }
.sg-bars { display: flex; flex-direction: column; gap: 6px; }
.sg-row { display: grid; grid-template-columns: 140px 1fr 60px; align-items: center; gap: 10px; font-size: 14px; }
.sg-row b { text-align: right; font-family: 'Barlow Condensed'; font-size: 18px; }
.bar { position: relative; height: 14px; background: rgba(255,255,255,.06); border-radius: 7px; }
.bar::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(255,255,255,.4); }
.bar i { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.bar i.pos { background: var(--green); }
.bar i.neg { background: var(--red); }
.sum-total { margin: 10px 0; }
/* the buttons stay in reach while the summary scrolls on a short screen */
.sum-actions { position: sticky; bottom: -20px; margin: 14px -24px -20px; padding: 12px 24px calc(14px + env(safe-area-inset-bottom)); background: rgba(12, 26, 18, .97); border-top: 1px solid var(--line); }
.row { display: flex; gap: 10px; margin-top: 16px; }
.help-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; font-size: 14px; line-height: 1.45; }
.help-cols ol, .help-cols ul { padding-left: 18px; margin: 4px 0; }
.help-cols small { color: var(--muted); font-family: Barlow; font-size: 12px; }
#helpClose { margin-top: 14px; }

/* ---------- academy ---------- */
#academy { position: fixed; inset: 0; z-index: 35; background: #0b1911; overflow-y: auto; padding: 18px clamp(12px, 3vw, 36px); }
.ac-head { display: flex; justify-content: space-between; align-items: center; }
.ac-head h1 { margin: 0; font: 800 36px 'Barlow Condensed', sans-serif; }
.ac-body { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin-top: 14px; }
.ac-list { display: flex; flex-direction: column; gap: 4px; }
.ac-item { display: flex; gap: 10px; align-items: center; text-align: left; font: 600 14px Barlow, sans-serif; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid transparent; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.ac-item span { width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; font-size: 12px; }
.ac-item.on { border-color: var(--accent); background: rgba(244, 211, 31, .1); }
.ac-item.on span { background: var(--accent); color: #1b1a0c; }
.ac-lesson { background: rgba(255,255,255,.04); border-radius: 12px; padding: 12px 18px; font-size: 15px; line-height: 1.5; }
.ac-lesson h2 { margin: 0; font: 700 26px 'Barlow Condensed', sans-serif; color: var(--accent); }
.ac-presets { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.lab { display: grid; grid-template-columns: 1fr 300px; gap: 12px; margin-top: 12px; }
.lab-views { display: flex; flex-direction: column; gap: 8px; grid-row: span 2; }
.lab-views canvas { width: 100%; height: 230px; border-radius: 10px; }
.lab-ctl { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.04); padding: 10px 12px; border-radius: 12px; }
.lab-ctl label { display: grid; grid-template-columns: 78px 1fr 96px; align-items: center; gap: 6px; font-size: 13px; }
.lab-ctl label b { font-size: 12px; text-align: right; }
.lab-ctl label select { grid-column: span 2; }
.lab-ctl input[type=range] { width: 100%; accent-color: var(--accent); }
.lab-btns { display: flex; gap: 8px; margin-top: 4px; }
.lab-btns .btn { flex: 1; font-size: 14px; padding: 7px; }
.lab-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: rgba(255,255,255,.04); padding: 10px 12px; border-radius: 12px; }
.lab-out div { display: flex; flex-direction: column; }
.lab-out span { font-size: 11px; color: var(--muted); }
.lab-out b { font: 700 17px 'Barlow Condensed', sans-serif; }

/* narrow portrait: the hole card and distance panel fill the top-left, so toasts sit below them */
@media (max-width: 700px) and (orientation: portrait) { #toasts { top: 215px; } }
@media (max-width: 900px) {
  .ac-body { grid-template-columns: 1fr; }
  /* the fade on the right edge says "more lessons this way" */
  .ac-list { flex-direction: row; overflow-x: auto; padding-right: 28px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); scrollbar-width: none; }
  .ac-item { flex: none; }
  .lab { grid-template-columns: 1fr; }
  #caddie { right: 14px; top: auto; bottom: 330px; }
  #minimap { width: 120px; height: 200px; }
  #holeCard { min-width: 0; }
}

/* scorecard open: fade the in-play HUD so stale shot info doesn't compete */
body.sc-open #hud > .panel, body.sc-open #hud #caddie, body.sc-open #helpBar { opacity: 0; transition: opacity .2s; }
body.flyover #hud > .panel, body.flyover #hud #caddie, body.flyover #helpBar { opacity: 0; }
#hud > .panel { transition: opacity .3s; }

/* ---------- shot flow, captions, extras ---------- */
#ffHint { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 12; background: rgba(0,0,0,.6); padding: 6px 14px; border-radius: 999px; font-size: 14px; pointer-events: none; animation: tin .3s ease-out; }
#captions { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 12; background: rgba(0,0,0,.78); color: #fff; padding: 6px 16px; border-radius: 6px; font: 600 16px Barlow, sans-serif; opacity: 0; transition: opacity .2s; pointer-events: none; }
#captions.show { opacity: 1; }
.intro-extra { margin-top: 6px; font-weight: 700; color: var(--blue); }
.sp-extra { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; background: rgba(95,212,255,.12); border: 1px solid rgba(95,212,255,.35); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.sp-extra.best { background: rgba(79,208,122,.16); border-color: rgba(79,208,122,.5); }
.sp-extra span { font-size: 12px; color: var(--muted); }
.sp-extra b { font: 700 24px 'Barlow Condensed', sans-serif; grid-row: span 2; }
.sp-extra small { color: var(--muted); }
.sc-board { display: flex; flex-direction: column; gap: 3px; min-width: 160px; }
.sc-board div { display: flex; justify-content: space-between; gap: 14px; }
.sc-board.big { margin: 10px 0; font-size: 18px; }
.sc-board.big b { font: 700 24px 'Barlow Condensed', sans-serif; }
.share-box { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.share-box input { font: 500 13px Barlow, sans-serif; background: #173022; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100%; user-select: text; }
.attempts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.attempts span { min-width: 90px; color: var(--muted); }
.attempts i { font-style: normal; background: rgba(255,255,255,.08); border-radius: 6px; padding: 2px 8px; }
.attempts i.miss { color: var(--red); }
.modal.wide { width: min(980px, 96vw); }
.set-cols, .help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.set { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.set span { display: flex; flex-direction: column; }
.set small { color: var(--muted); font-size: 12px; }
.set input[type=range] { accent-color: var(--accent); width: 150px; }
.set input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.remap { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; margin-bottom: 8px; }
.remap-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.remap-row .seg { min-width: 70px; }
.remap-row .seg.clash { color: var(--red); max-width: 62%; white-space: normal; font-size: 12px; line-height: 1.2; }
.small-btn { font-size: 13px; padding: 6px 12px; }
.modal > .btn.primary { margin-top: 14px; }
.trend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trend div { background: rgba(255,255,255,.04); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.trend span { font-size: 12px; color: var(--muted); }
.trend b { font: 700 22px 'Barlow Condensed', sans-serif; }
.spark { width: 100%; height: 40px; }
.bests { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.bests div { display: flex; flex-direction: column; background: rgba(255,255,255,.04); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.bests small { color: var(--muted); }
table.hist { width: 100%; border-collapse: collapse; font-size: 13px; }
table.hist th, table.hist td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.hist th { color: var(--muted); font-weight: 600; }

/* ---------- touch controls ---------- */
#touchControls { display: none; }
body.touch.in-round #touchControls { display: flex; position: fixed; inset: auto 0 0 0; z-index: 14; justify-content: space-between; align-items: flex-end; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
#touchControls > div { display: grid; gap: 8px; pointer-events: auto; }
.tc-left { grid-template-columns: repeat(2, 58px); align-content: end; }
.tc-right { grid-template-columns: repeat(3, 58px); align-content: end; }
#touchControls button { width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(10,22,16,.65); color: #fff; font: 700 20px Barlow, sans-serif; touch-action: none; }
#touchControls button.down { background: rgba(244,211,31,.6); }
#touchControls .tc-swing { grid-column: span 3; width: 190px; height: 74px; border-radius: 40px; background: linear-gradient(180deg, #ffe25a, #f0b91c); color: #1b1a0c; font-size: 18px; }
#touchControls button small { display: block; font: 600 11px Barlow, sans-serif; line-height: 1; margin-top: 2px; color: rgba(255,255,255,.75); }
body.touch #helpBar { display: none; }
body.touch #clubBox kbd { display: none; }
/* the on-screen buttons fade with the HUD during the flyover and while the card is open */
body.flyover #touchControls, body.sc-open #touchControls { opacity: 0; pointer-events: none; }
/* the button groups set pointer-events back on, so they have to be switched off too */
body.flyover #touchControls > div, body.sc-open #touchControls > div { pointer-events: none; }
body.touch.in-round #touchControls { transition: opacity .2s; }
body.touch.in-round #clubBox { bottom: 150px; }
body.touch.in-round #lieBox { bottom: 246px; }
/* keep overlays out from under the button columns: portrait stacks them above, landscape narrows them */
@media (orientation: portrait) {
  body.touch.in-round #intro { bottom: 232px; width: min(640px, calc(100vw - 16px)); }
  body.touch.in-round #shotPanel { bottom: 232px; max-height: calc(100vh - 300px); }
  body.touch.in-round #meter { bottom: 232px; width: calc(100vw - 16px); }
  body.touch.in-round #captions, body.touch.in-round #ffHint { bottom: 240px; }
  /* the club box sits above the meter so it clears the right-hand button column */
  body.touch.in-round #clubBox { bottom: 310px; }
  body.touch.in-round #lieBox { bottom: 406px; }
  /* …and the caddie's note above the club box (and the lie box, when the full HUD shows it) */
  body.touch.in-round #caddie { bottom: 392px; }
  body.touch #coachMark { font-size: 13px; padding: 10px 12px 8px; }
  body.touch #coachMark h4 { font-size: 18px; }
  body.touch #coachMark p { margin-bottom: 8px; }
  body.touch.in-round:not(.hud-essential) #caddie { bottom: 502px; }
}
@media (orientation: landscape) {
  body.touch.in-round #intro { width: min(640px, calc(100vw - 420px)); bottom: 24px; }
  body.touch.in-round #shotPanel { right: 210px; width: min(400px, calc(100vw - 440px)); }
  body.touch.in-round #meter { width: min(620px, calc(100vw - 420px)); bottom: 24px; }
}
/* the caddie's note must not run down into the ball or under the button columns: three lines at most */
body.touch.in-round #caddieText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* short landscape window (phone, or a small desktop window): the top-left stack would run into the club box, so the distance panel moves beside the hole card */
@media (orientation: landscape) and (max-height: 500px) {
  body.in-round #holeCard { top: 8px; left: 8px; min-width: 0; max-width: 230px; gap: 8px; }
  body.in-round #holeCard .hc-info { min-width: 0; }
  body.in-round #holeCard :is(.hc-name, .hc-par) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.in-round #holeCard .hc-shot { white-space: nowrap; }
  /* slim enough to stay clear of the golfer's head, which sits just below it */
  body.in-round #distBox { top: 8px; left: 246px; min-width: 0; padding: 6px 10px; }
  body.in-round #distBox .lbl { display: none; }
  body.in-round #distBox .big { font-size: 26px; line-height: 1.05; }
  body.in-round #distBox .sub { font-size: 11px; line-height: 1.25; }
  body.in-round #lieBox { display: none; }
  body.in-round #windBox { display: flex; top: 8px; right: 8px; }
  body.in-round #minimap { top: 8px; right: 150px; width: 72px; height: 120px; }
  body.in-round #windBox #windTxt { display: none; }
  body.in-round #caddie { bottom: auto; top: 136px; right: 214px; max-width: min(260px, calc(100vw - 490px)); }
  /* no touch buttons here, so the club box sits just above the meter and the key hint bar steps aside */
  body:not(.touch).in-round #helpBar { display: none; }
  body:not(.touch).in-round #meter { bottom: 10px; }
  body:not(.touch).in-round #clubBox { bottom: 106px; min-width: 0; max-width: 270px; }
  body:not(.touch).in-round #clubBox kbd { display: none; }
  body:not(.touch).in-round #clubBox .club-row { gap: 10px; }
}
@media (max-width: 760px) and (orientation: landscape) {
  #minimap { top: 8px; right: 8px; height: 120px; width: 72px; }
  #caddie { bottom: auto; top: 8px; right: 90px; max-width: 260px; }
}
@media (max-width: 480px) {
  #intro { flex-direction: column; gap: 8px; padding: 12px; }
  .intro-num { min-width: 0; width: 60px; height: 60px; font-size: 38px; }
  .intro-name { font-size: 24px; }
}

/* ---------- essential HUD (default): lie folded into the distance panel, minimap only in target view / flight, shape row on change ---------- */
body.hud-essential.in-round #lieBox { display: none; }
body.hud-essential.in-round #holeCard { min-width: 0; }
body.hud-essential.in-round #windBox #windTxt { display: none; }
body.hud-essential.in-round .wind-dial { width: 40px; height: 40px; }
body.hud-essential.in-round #windArrow { font-size: 18px; }
body.hud-essential.in-round #clubBox .club-row { display: none; }
body.hud-essential.in-round #clubBox.show-row .club-row { display: flex; animation: tin .2s ease-out; }
body.hud-essential.in-round:not(.target-view) #hud:not([data-state="flight"]) #minimap { display: none; }
body.hud-essential.in-round:not(.target-view) #hud:not([data-state="flight"]) #caddie { right: 14px; }
/* phone landscape: with the map hidden the caddie moves up under the wind dial */
@media (orientation: landscape) and (max-height: 500px) {
  body.hud-essential.in-round:not(.target-view) #hud:not([data-state="flight"]) #caddie { top: 78px; right: 8px; max-width: min(330px, calc(100vw - 480px)); }
}
.lie-line { display: flex; gap: 6px; align-items: baseline; font-size: 12px; margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--line); }
.lie-line b { font: 700 15px 'Barlow Condensed', sans-serif; color: var(--text); }
.lie-line .lie-range { font-size: 12px; }
.lie-line[data-lie="deep"] .lie-range, .lie-line[data-lie="splash"] .lie-range { color: var(--red); }
body:not(.hud-essential) .lie-line { display: none; }

/* ---------- guided first hole ---------- */
#coachMark { position: fixed; z-index: 30; width: min(340px, calc(100vw - 16px)); background: rgba(255, 250, 230, .97); color: #1d2a20; border-radius: 14px; padding: 12px 14px 10px; box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 2px #ffe25a; font-size: 14px; line-height: 1.4; animation: tin .25s ease-out; pointer-events: auto; }
#coachMark .cm-step { font: 700 11px Barlow, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6a5a10; }
#coachMark h4 { margin: 2px 0 4px; font: 700 20px 'Barlow Condensed', sans-serif; }
#coachMark p { margin: 0 0 10px; }
#coachMark .cm-btns { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#coachMark .cm-skip { background: none; border: 0; color: #6a5a10; font: 600 13px Barlow, sans-serif; cursor: pointer; text-decoration: underline; padding: 4px 0; }
#coachMark .cm-next { padding: 7px 18px; }
#coachMark .cm-level { display: flex; flex-direction: column; gap: 6px; }
#coachMark .cm-ask { font: 700 13px Barlow, sans-serif; color: #6a5a10; }
#coachMark .cm-lv { display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: #1d2a20; background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.2); padding: 7px 12px; }
#coachMark .cm-lv:hover { background: rgba(255, 226, 90, .6); }
#coachMark .cm-lv small { font: 500 12px Barlow, sans-serif; opacity: .75; }
#coachMark::before { content: ''; position: absolute; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); box-shadow: -2px -2px 0 #ffe25a; }
#coachMark[data-side="right"]::before { left: -8px; top: 22px; box-shadow: -2px 2px 0 #ffe25a; }
#coachMark[data-side="left"]::before { right: -8px; top: 22px; box-shadow: 2px -2px 0 #ffe25a; }
#coachMark[data-side="below"]::before { top: -8px; left: 28px; }
#coachMark[data-side="above"]::before { bottom: -8px; left: 28px; box-shadow: 2px 2px 0 #ffe25a; }
#coachMark[data-side="none"]::before { display: none; }
/* landscape phone: the level question goes wide and short, three choices side by side, so it never fills the screen */
@media (max-height: 500px) {
  #coachMark { width: min(300px, calc(100vw - 16px)); }
  body.touch #coachMark { font-size: 12px; line-height: 1.3; padding: 8px 10px 6px; }
  body.touch #coachMark h4 { font-size: 16px; margin: 0 0 2px; }
  body.touch #coachMark p { margin-bottom: 6px; }
  #coachMark:has(.cm-level:not(.hidden)) { width: min(600px, calc(100vw - 16px)); }
  #coachMark .cm-level { flex-direction: row; flex-wrap: wrap; }
  #coachMark .cm-level .cm-ask { flex: 1 0 100%; }
  #coachMark .cm-lv { flex: 1 1 0; min-width: 0; }
}
.tut-focus { box-shadow: 0 0 0 3px #ffe25a, 0 0 24px 6px rgba(255, 226, 90, .55) !important; border-radius: var(--radius); }
#meter.tut-focus { border-radius: 10px; }
body.flyover #hud > .panel.tut-focus { opacity: 1; }
.help-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- UI scale + reduced motion ---------- */
#hud .panel, #caddie, #shotPanel, .modal, #helpBar, #intro { zoom: var(--ui-scale, 1); }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* ---------- landscape phone: two menu columns so Tee off is on the first screen ---------- */
.menu-col { display: contents; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  #menu { padding: 10px 16px; background: rgba(6,14,9,.84); }
  .menu-panel { width: min(960px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; align-items: start; }
  .menu-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .menu-foot { grid-column: 1 / -1; }
  .logo { font-size: 28px; }
  .tagline { font-size: 12px; }
  .menu-play { grid-template-columns: 1fr; }
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  #menu { background: rgba(6,14,9,.82); padding: 14px 16px; }
  .logo { font-size: 34px; }
  .menu-play { grid-template-columns: 1fr; }
  .set-cols, .help-cols, .remap { grid-template-columns: 1fr; }
  .trend { grid-template-columns: 1fr 1fr; }
  #hud .panel { padding: 6px 9px; }
  #holeCard { left: 8px; top: 8px; gap: 8px; }
  #lieBox, #windBox { display: none; }
  #minimap { width: 90px; height: 150px; }
  #shotPanel { max-height: 60vh; overflow-y: auto; }
  /* phones: a short result with the numbers one tap away, so the ball and flag stay visible */

  #shotPanel:not(.open) .sp-tips, #shotPanel:not(.open) .sp-extra { display: none; }
}
/* portrait phone: the golfer stands left of the ball, so the distance panel moves to the right-hand column
   under a compact wind dial (wind matters on every shot, so it stays on screen) */
@media (max-width: 760px) and (orientation: portrait) {
  body.in-round #windBox { display: flex; top: 8px; right: 8px; gap: 8px; }
  body.in-round #windBox #windTxt { display: none; }
  body.in-round .wind-dial { width: 38px; height: 38px; }
  /* the hole card stops short of the wind dial: a smaller number tile, and the name and par line give way */
  body.in-round #holeCard { max-width: calc(100vw - 132px); }
  body.in-round #holeCard .hc-num { width: 44px; height: 44px; font-size: 32px; }
  body.in-round #holeCard .hc-info { min-width: 0; }
  body.in-round #holeCard :is(.hc-name, .hc-par) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.in-round #holeCard .hc-shot { white-space: nowrap; }
  body.in-round #windArrow { font-size: 17px; }
  body.in-round #distBox { top: 62px; left: auto; right: 8px; min-width: 0; max-width: 150px; text-align: right; }
  body.in-round #distBox .sub { align-items: flex-end; }
  body.in-round #distBox .lie-line { justify-content: flex-end; flex-wrap: wrap; row-gap: 0; }
  body.in-round #distBox .sub { font-size: 12px; }
  body.in-round #minimap { top: 230px; right: 8px; height: 130px; }
  /* the 3-D view can't show a far green at this width, so the map (zoomed on the green when the
     shot can reach it) stays up at address; not for putts, where the green fills the view anyway */
  body.hud-essential.in-round:not(.target-view) #hud[data-state="address"]:not([data-putt="1"]) #minimap { display: block; }
  /* the lesson's tips sit in this column on a narrow phone: the map waits until the lesson ends */
  body.in-round.coaching #hud #minimap { display: none !important; }
}
/* short phones (360x640, iPhone SE): the map would sit on the swing meter and club box, so it only shows
   in flight and in target view, and the caddie's note moves into the gap under the distance panel */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 700px) {
  body.in-round:not(.target-view) #hud:not([data-state="flight"]) #minimap { display: none !important; }
}
@media (max-width: 760px) and (orientation: portrait) and (max-height: 600px) {
  body.touch.in-round #caddie { top: 166px !important; bottom: auto !important; left: 8px; right: 8px; max-width: none; font-size: 12px; padding: 5px 10px; line-height: 1.3; }
  body.touch.in-round #caddie .caddie-ico { display: none; }
  body.touch.in-round #caddieText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  body.touch.in-round #clubBox { bottom: 306px !important; }
}

/* ---------- course editor ---------- */
.ed-head { display: flex; justify-content: space-between; align-items: center; }
.ed-body { display: grid; grid-template-columns: 1fr auto; gap: 18px; margin-top: 8px; }
.ed-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ed-basics { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; margin-bottom: 8px; }
.ed-basics label { display: flex; flex-direction: column; gap: 3px; font: 700 11px Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ed-basics label.grow { flex: 1; min-width: 200px; }
.ed-basics input, .ed-basics select { font: 500 14px Barlow, sans-serif; letter-spacing: normal; text-transform: none; background: #173022; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; user-select: text; }
.ed-basics input[type=number] { width: 90px; }
.ed-intro { margin: 8px 0; }
.ed-advanced { margin-bottom: 8px; }
.ed-advanced summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.ed-adv { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
#edJson { width: 100%; height: min(420px, 50vh); font: 12px/1.45 ui-monospace, Consolas, monospace; background: #0b1710; color: #d8f0de; border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; user-select: text; tab-size: 2; }
.ed-err { color: var(--red); font-size: 13px; min-height: 18px; }
.ed-ref { font-size: 12px; color: var(--muted); }
.ed-ref summary { cursor: pointer; }
.ed-ref ul { padding-left: 18px; margin: 6px 0; }
.ed-right { max-width: 360px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#edCanvas { border-radius: 8px; border: 1px solid var(--line); max-width: 100%; }
@media (max-width: 760px) { .ed-body { grid-template-columns: 1fr; } }

/* settings: phones have no keyboard column, and the course editor tucks away */
body.touch .set-cols { grid-template-columns: 1fr; }
.adv { margin-top: 12px; color: var(--muted); }
.adv summary { cursor: pointer; font: 600 13px Barlow, sans-serif; padding: 6px 0; }
.adv .btn { margin-top: 6px; }

/* finger-sized menu tabs */
@media (pointer: coarse) { .course-tab { min-height: 44px; } }
body.touch .course-tab { min-height: 44px; }
.tip details.why { margin-top: 4px; }
.tip details.why summary { cursor: pointer; font: 600 12px Barlow, sans-serif; color: var(--blue); }

.challenge-note { margin: 8px 0 4px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 14px; }
.challenge-note.won { background: rgba(80,200,120,.18); }

/* ---------- touch targets: every tappable control is at least 44 px (WCAG / Apple HIG) ---------- */
@media (pointer: coarse) {
  .seg, .btn, select { min-height: 44px; }
  .seg { min-width: 44px; padding: 8px 14px; }
}
body.touch .seg, body.touch .btn, body.touch select { min-height: 44px; }
body.touch .seg { min-width: 44px; padding: 8px 14px; }
body.touch .segs { gap: 6px; }
body.touch .drawer > summary { min-height: 44px; display: flex; align-items: center; }

/* ---------- empty states ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 8px 8px; }
.empty-state b { font: 700 20px 'Barlow Condensed', sans-serif; }
.empty-state p { margin: 0 0 6px; max-width: 360px; line-height: 1.45; }