/* caddie-play — phone-first. Big targets, no hover, one thumb. Wears the caddie's kit:
   Inter, the ink background, glass panels, the gold wordmark. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('font/inter-latin-var.woff2') format('woff2');
}
:root {
  color-scheme: dark;
  --ink: #020617;
  --glass: rgba(8, 12, 18, 0.74);
  --glass2: rgba(15, 23, 34, 0.9);
  --stroke: rgba(255, 255, 255, 0.12);
  --muted: rgba(255, 255, 255, 0.6);
  --faint: rgba(255, 255, 255, 0.38);
  --accent: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --gold: linear-gradient(180deg, #fbe7a6 0%, #ecc66f 25%, #f6dc8a 45%, #b88c3a 70%, #f0d27a 100%);
  --brand: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--ink); color: #fff; font-family: var(--brand);
  font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
button, select { font-family: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
.hidden { display: none !important; }
.eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); }

#stage { position: fixed; inset: 0; }
#gl { width: 100%; height: 100%; display: block; }

/* ---------- HUD ---------- */
body[data-screen="menu"] .hud, body[data-screen="menu"] #hint { display: none; }
.hud { position: fixed; z-index: 5; }

#top {
  top: calc(8px + var(--sat)); left: 8px; right: 8px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--stroke);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.iconBtn { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; background: rgba(255,255,255,0.06); }
.holeBox { flex: 1; min-width: 0; }
.holeInfo { font-weight: 800; font-size: 16px; letter-spacing: 0.04em; }
.holeSub { font-size: 12px; color: var(--muted); font-weight: 600; }
.statBox { display: flex; gap: 14px; padding-right: 4px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.stat b { font-size: 22px; font-weight: 800; }
.stat i { font-style: normal; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

#side {
  right: 8px; top: calc(78px + var(--sat));
  display: flex; flex-direction: column; gap: 8px;
}
.sideBtn {
  min-width: 56px; height: 44px; padding: 0 10px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--stroke);
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
}
.sideBtn[aria-pressed="true"] { background: rgba(52, 211, 153, 0.22); border-color: rgba(52, 211, 153, 0.6); }

.toast {
  position: fixed; z-index: 7; left: 50%; top: calc(84px + var(--sat)); transform: translateX(-50%);
  max-width: calc(100% - 120px); padding: 10px 16px; border-radius: 14px;
  background: var(--glass2); border: 1px solid var(--stroke);
  font-weight: 700; font-size: 15px; text-align: center; pointer-events: none;
  animation: toastIn 220ms ease-out;
}
.toast.good { border-color: rgba(52, 211, 153, 0.6); }
.toast.warn { border-color: rgba(251, 191, 36, 0.7); }
.toast.bad { border-color: rgba(248, 113, 113, 0.75); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hint {
  position: fixed; z-index: 4; left: 50%; top: calc(84px + var(--sat)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 150px); text-align: center;
  padding: 7px 14px; border-radius: 16px; background: rgba(0,0,0,0.55); font-size: 13px; font-weight: 600;
  pointer-events: none;
}

#panel {
  left: 8px; right: 8px; bottom: calc(8px + var(--sab));
  padding: 10px 10px 8px; border-radius: 20px;
  background: var(--glass); border: 1px solid var(--stroke);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 8px;
}
body.busy #panel .row button, body.busy #panel input { opacity: 0.45; pointer-events: none; }
.row { display: flex; align-items: center; gap: 8px; }
.clubBtn {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px;
  border-radius: 14px; background: rgba(255,255,255,0.08); border: 1px solid var(--stroke);
  font-size: 17px; font-weight: 800; flex-shrink: 0;
}
.clubDot { width: 12px; height: 12px; border-radius: 50%; background: #f87171; }
.clubCarry { font-weight: 600; color: var(--muted); font-size: 14px; }
.caret { color: var(--faint); font-size: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 1; }
.tag { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--muted); letter-spacing: 0.02em; }
.tag.lie-rough, .tag.lie-bunker, .tag.lie-waste { background: rgba(251, 191, 36, 0.16); color: #fde68a; }
.tag.lie-green { background: rgba(52, 211, 153, 0.18); color: #a7f3d0; }
.tag.sug { background: rgba(56, 189, 248, 0.16); color: #bae6fd; }
.tag.sug.edited { background: rgba(255,255,255,0.08); color: var(--muted); }

.clubStrip {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px;
  scrollbar-width: none; touch-action: pan-x;
}
.clubStrip::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-width: 62px; height: 52px; padding: 4px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--stroke);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; line-height: 1.1;
}
.chip small { font-weight: 600; font-size: 11px; color: var(--muted); }
.chip.sel { border-color: #fff; background: rgba(255,255,255,0.16); }
.chip .bar { width: 22px; height: 3px; border-radius: 2px; margin-top: 3px; }

.powerBox { display: flex; flex-direction: column; gap: 4px; }
.powerHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 2px; }
.powerLbl { font-size: 13px; color: var(--muted); font-weight: 700; }
.powerLbl b { color: #fff; font-size: 17px; }
.readout { font-size: 13px; font-weight: 700; text-align: right; }
.readout .bad { color: var(--bad); }
.readout .warn { color: var(--warn); }
.power {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; touch-action: pan-x;
}
.power::-webkit-slider-runnable-track {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(52,211,153,0.35), rgba(251,191,36,0.45) 70%, rgba(248,113,113,0.6));
}
.power::-moz-range-track { height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(52,211,153,0.35), rgba(251,191,36,0.45) 70%, rgba(248,113,113,0.6)); }
.power::-webkit-slider-thumb {
  -webkit-appearance: none; width: 40px; height: 40px; border-radius: 50%; margin-top: -13px;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.5); border: 3px solid var(--thumb, #34d399);
}
.power::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 3px solid var(--thumb, #34d399); }

.shootRow { gap: 10px; }
.nudge { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.07); border: 1px solid var(--stroke); font-size: 16px; color: var(--muted); }
.shootBtn {
  flex: 1; height: 60px; border-radius: 18px; font-size: 21px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  color: #052e1c; background: linear-gradient(180deg, #6ee7b7, #10b981); box-shadow: 0 6px 24px rgba(16,185,129,0.35);
}
.shootBtn:active { transform: translateY(1px); filter: brightness(0.95); }
.extraRow:empty, .extraRow:not(:has(button:not(.hidden))) { display: none; }
.miniBtn { flex: 1; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid var(--stroke); font-weight: 700; font-size: 14px; }

/* ---------- front door ----------
   Two views: every course (cards built from the course's own holes), then one
   course: how to play it and a yardage book of its holes to start from. */
.screen { position: fixed; inset: 0; z-index: 20; }
body:not([data-screen="menu"]) #menu { display: none; }
.fd { background: radial-gradient(120% 60% at 50% 0%, #0b1a14 0%, var(--ink) 60%); }
.fdView { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  padding: calc(14px + var(--sat)) 16px calc(24px + var(--sab)); max-width: 720px; margin: 0 auto; }
.fdTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.brandRow { display: flex; align-items: center; gap: 10px; }
.word { font-weight: 900; font-size: 22px; letter-spacing: -0.01em; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.golferBtn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid var(--stroke); font-weight: 700; font-size: 13px; }
.golferBtn i { width: 28px; height: 28px; border-radius: 50%; display: block; }
.fdLabel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 2px 10px; }
.hintTxt { font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; }

/* course cards */
.courseList { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .courseList { grid-template-columns: 1fr 1fr; } }
.courseCard { position: relative; display: block; width: 100%; height: 188px; border-radius: 20px; overflow: hidden; text-align: left; border: 1px solid var(--stroke); background: #0b1512; }
.courseCard:active { transform: scale(0.985); }
.heroStrip { position: absolute; inset: 0; display: flex; gap: 2px; }
.heroStrip img { flex: 1; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.courseCard::after, .cHero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,6,23,0) 20%, rgba(2,6,23,0.55) 55%, rgba(2,6,23,0.94) 100%); }
.ccTxt { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ccName { font-size: 21px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.1; }
.ccMeta { font-size: 12.5px; color: rgba(255,255,255,0.78); font-weight: 600; margin-top: 3px; }
.ccLoc { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.ccBest { text-align: right; flex-shrink: 0; }
.ccBest b { display: block; font-size: 22px; font-weight: 900; line-height: 1; }
.ccBest i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ccBadge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(52,211,153,0.9); color: #052e1c; }

/* continue */
.continueBox { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.contRow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px 10px 10px; border-radius: 16px; text-align: left;
  background: linear-gradient(90deg, rgba(52,211,153,0.16), rgba(52,211,153,0.05)); border: 1px solid rgba(52,211,153,0.45); }
.contRow img { width: 44px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.contRow .ct { flex: 1; min-width: 0; }
.contRow .ct b { display: block; font-size: 15px; font-weight: 800; }
.contRow .ct span { font-size: 12.5px; color: rgba(255,255,255,0.75); font-weight: 600; }
.contRow .go { padding: 10px 14px; border-radius: 12px; background: var(--accent); color: #052e1c; font-weight: 900; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* one course */
#vCourse { padding: 0 0 calc(96px + var(--sab)); }
.cHero { position: relative; height: calc(230px + var(--sat)); overflow: hidden; }
.cHero .heroStrip img { object-position: 50% 25%; }
.backBtn { position: absolute; z-index: 2; top: calc(12px + var(--sat)); left: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(2,6,23,0.6); border: 1px solid var(--stroke); font-size: 30px; line-height: 38px; font-weight: 400; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cHeroTxt { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; }
.cHeroTxt h1 { font-size: 28px; font-weight: 900; letter-spacing: -0.015em; line-height: 1.05; margin: 4px 0 6px; }
.cStats { display: flex; flex-wrap: wrap; gap: 6px; }
.cStats span { padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: 12px; font-weight: 700; }
.cStats span.best { background: rgba(251,231,166,0.18); color: #fbe7a6; }
.cBody { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.seg { display: flex; gap: 8px; }
.segBtn { flex: 1; min-height: 56px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--stroke); font-weight: 800; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.segBtn small { font-weight: 600; font-size: 11px; color: var(--muted); }
.segBtn.on { border-color: var(--accent); background: rgba(52, 211, 153, 0.14); }
.setRow { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--stroke); }
.setBtn { flex: 1; height: 38px; border-radius: 10px; font-weight: 800; font-size: 13.5px; color: var(--muted); }
.setBtn.on { background: rgba(255,255,255,0.14); color: #fff; }
.resumeBox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(52,211,153,0.18), rgba(52,211,153,0.06)); border: 1px solid rgba(52,211,153,0.5); }
.resumeTxt { font-weight: 800; font-size: 15px; margin-top: 2px; }
.resumeBtn { flex-shrink: 0; padding: 12px 16px; border-radius: 12px; background: var(--accent); color: #052e1c; font-weight: 900; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* the yardage book */
.holeGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 520px) { .holeGrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 680px) { .holeGrid { grid-template-columns: repeat(6, 1fr); } }
.holeTile { position: relative; aspect-ratio: 3 / 5; border-radius: 14px; overflow: hidden; border: 2px solid transparent; background: #0b1512; text-align: left; transition: opacity 150ms, transform 120ms; }
.holeTile:active { transform: scale(0.97); }
.holeTile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.holeTile .hn { position: absolute; top: 6px; left: 8px; font-size: 24px; font-weight: 900; line-height: 1; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.holeTile .hm { position: absolute; left: 8px; right: 6px; bottom: 7px; font-size: 11.5px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.holeTile .hm i { display: block; font-style: normal; font-size: 10px; color: rgba(255,255,255,0.7); font-weight: 700; }
.holeTile .tag { position: absolute; top: 7px; right: 6px; padding: 3px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.holeTile .tag.alt { background: rgba(251,191,36,0.9); color: #2a1a02; }
.holeTile .tag.sc { background: rgba(2,6,23,0.75); color: #fff; font-size: 11px; letter-spacing: 0; }
.holeTile.out { opacity: 0.32; }
.holeTile.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,211,153,0.25); }
.holeTile.sel::before { content: 'TEE OFF'; position: absolute; z-index: 1; left: 50%; bottom: 44px; transform: translateX(-50%); padding: 3px 7px; border-radius: 6px;
  background: var(--accent); color: #052e1c; font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; white-space: nowrap; }
.cFoot { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + var(--sab));
  background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,0.92) 35%); display: flex; justify-content: center; }
.cFoot .startBtn { width: 100%; max-width: 688px; }

/* search */
.searchBox { position: sticky; top: calc(-14px - var(--sat)); z-index: 4; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 14px; margin: 0 -2px;
  border-radius: 16px; background: #111a22; border: 1px solid var(--stroke); box-shadow: 0 8px 24px rgba(2,6,23,0.6); }
.searchBox svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.searchBox input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 16px; font-weight: 600; -webkit-user-select: text; user-select: text; }
.searchBox input::placeholder { color: rgba(255,255,255,0.45); }
.searchBox input::-webkit-search-cancel-button { display: none; }
.qClear { width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--muted); background: rgba(255,255,255,0.08); }
#searchResults { margin-top: 12px; }
.resHead { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 2px 8px; }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.5; }

/* ready to play: a swipeable row of the courses the caddie has measured */
.readyRow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 0 16px 4px; touch-action: pan-x pan-y; scrollbar-width: none; }
.readyRow::-webkit-scrollbar { display: none; }
.readyRow .courseCard { flex: 0 0 84%; max-width: 340px; scroll-snap-align: start; height: 176px; }
.readyRow .courseCard.more { flex-basis: 40%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-weight: 700; font-size: 13px; padding: 12px; }

/* rows: every list of courses (near, recent, region, search) */
.rowList { display: flex; flex-direction: column; gap: 6px; }
.cRow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 10px 8px 8px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.cRow:active { background: rgba(255,255,255,0.09); }
.cRow .th { width: 40px; height: 56px; border-radius: 8px; flex-shrink: 0; overflow: hidden; background: #13202a; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; color: rgba(255,255,255,0.5); }
.cRow .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cRow .th.mono { background: linear-gradient(160deg, #1b2a33, #0f1820); }
.cRow .tx { flex: 1; min-width: 0; }
.cRow .tx b { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cRow .tx span { display: block; font-size: 12.5px; color: rgba(255,255,255,0.62); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cRow .rt { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pill { padding: 4px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.pill.ready { background: rgba(52,211,153,0.18); color: #6ee7b7; }
.pill.st { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.dist { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }
.cRow.isReady { border-color: rgba(52,211,153,0.28); }
.nearBtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.22); font-weight: 800; font-size: 15px; }
.nearBtn svg { width: 18px; height: 18px; color: var(--accent); transform: rotate(45deg); }

/* states */
.stateGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 560px) { .stateGrid { grid-template-columns: repeat(4, 1fr); } }
.stateTile { position: relative; height: 92px; padding: 12px; border-radius: 16px; text-align: left; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid var(--stroke); display: flex; flex-direction: column; justify-content: space-between; }
.stateTile:active { transform: scale(0.98); }
.stateTile b { font-size: 26px; font-weight: 900; letter-spacing: -0.01em; line-height: 1; }
.stateTile span { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.65); line-height: 1.3; }
.stateTile span em { font-style: normal; color: #6ee7b7; }
.attrib { margin: 26px 4px 0; font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.4); }

/* state / region list */
.listTop { position: sticky; top: calc(-14px - var(--sat)); z-index: 4; display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 10px; margin: 0 -16px; padding-left: 12px; padding-right: 16px;
  background: linear-gradient(180deg, #06100d 70%, rgba(6,16,13,0)); }
.backBtn2 { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.07); border: 1px solid var(--stroke); font-size: 30px; line-height: 38px; }
.listHead { min-width: 0; padding-top: 2px; }
.listHead h1 { font-size: 24px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.1; margin: 3px 0 3px; }
.hintTxt.left { text-align: left; }
.filterRow { display: flex; gap: 6px; margin: 2px 0 14px; }
.fBtn { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 800; background: rgba(255,255,255,0.06); border: 1px solid var(--stroke); color: rgba(255,255,255,0.75); }
.fBtn.on { background: #fff; color: #06100d; border-color: #fff; }
.secHead { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 2px 8px; }
.secHead:first-child { margin-top: 0; }
.secHead h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.regionRow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 12px 10px 14px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); margin-bottom: 6px; }
.regionRow:active { background: rgba(255,255,255,0.09); }
.regionRow b { flex: 1; font-size: 15px; font-weight: 800; }
.regionRow .n { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); }
.regionRow .chev { font-size: 22px; color: rgba(255,255,255,0.35); line-height: 1; }

/* a course the caddie hasn't measured */
.infoHero { height: calc(210px + var(--sat)); background:
  repeating-radial-gradient(circle at 70% 35%, rgba(110,231,183,0.10) 0 1px, transparent 1px 22px),
  repeating-radial-gradient(circle at 20% 90%, rgba(110,231,183,0.07) 0 1px, transparent 1px 30px),
  linear-gradient(160deg, #10251c, #07110d); }
.notMapped { padding: 14px 16px; border-radius: 16px; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3); }
.notMapped b { display: block; font-size: 16px; font-weight: 900; color: #fcd34d; margin-bottom: 4px; }
.notMapped p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.78); }
.linkBtn { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }

/* golfer sheet */
.sheet { position: fixed; inset: 0; z-index: 25; background: rgba(2,6,23,0.6); display: flex; align-items: flex-end; justify-content: center; }
.sheetCard { width: 100%; max-width: 520px; padding: 18px 16px calc(16px + var(--sab)); border-radius: 22px 22px 0 0; background: #0b1016; border: 1px solid var(--stroke); border-bottom: 0;
  display: flex; flex-direction: column; gap: 14px; animation: sheetIn 220ms ease-out; }
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.look { height: 64px; padding: 0 14px; border-radius: 16px; border: 2px solid var(--stroke); display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); font-weight: 800; font-size: 15px; }
.look.on { border-color: var(--accent); background: rgba(52,211,153,0.12); }
.look i { width: 34px; height: 34px; border-radius: 50%; display: block; flex-shrink: 0; }
.startBtn, .primaryBtn {
  height: 56px; border-radius: 16px; font-size: 18px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
  color: #052e1c; background: linear-gradient(180deg, #6ee7b7, #10b981);
}
.startBtn:disabled { opacity: 0.4; }
.ghostBtn { height: 52px; border-radius: 14px; background: rgba(255,255,255,0.08); border: 1px solid var(--stroke); font-weight: 700; font-size: 15px; padding: 0 16px; }
.err { color: var(--bad); font-size: 13px; font-weight: 600; }

/* ---------- cards ---------- */
.card {
  position: fixed; z-index: 15; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 32px); max-width: 380px; padding: 20px 18px; border-radius: 22px;
  background: rgba(8, 12, 18, 0.9); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 10px; text-align: center;
  animation: cardIn 260ms ease-out;
}
.card.wide { max-width: 560px; padding: 16px 10px 14px; }
.card { max-height: calc(100dvh - 24px); overflow-y: auto; }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.card h2 { font-size: 32px; font-weight: 900; letter-spacing: -0.01em; }
.card .meta { color: var(--muted); font-weight: 600; }
.card .meta.small { font-size: 13px; }
.btnRow { display: flex; gap: 10px; margin-top: 6px; }
.btnRow > * { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.rules { font-size: 12px; color: var(--muted); line-height: 1.45; text-align: left; margin-top: 4px; }
.tableWrap { overflow-x: auto; }
.scoreTable { border-collapse: collapse; width: 100%; font-size: 13px; }
.scoreTable th, .scoreTable td { padding: 6px 5px; border-bottom: 1px solid var(--stroke); text-align: center; }
.scoreTable th { color: var(--muted); font-weight: 700; }
.scoreTable td.u { color: #6ee7b7; font-weight: 800; }
.scoreTable td.o { color: #fca5a5; font-weight: 800; }

/* ---------- golf scorecard ---------- */
.cardHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 0 6px; }
.cardTitle { min-width: 0; }
.cardRel { font-size: 36px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cardRel.u { color: #6ee7b7; } .cardRel.o { color: #fca5a5; }
.gcWrap { display: flex; flex-direction: column; gap: 10px; }
.gc { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.gc td { padding: 3px 0; text-align: center; height: 26px; }
.gc td.lbl { width: 38px; text-align: left; padding-left: 4px; color: var(--muted); font-weight: 800; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.gc td.sum { width: 34px; font-weight: 800; background: rgba(255,255,255,0.06); }
.gc tr.hole td { color: var(--muted); font-weight: 800; font-size: 11px; border-bottom: 1px solid var(--stroke); }
.gc tr.par td { color: var(--muted); font-size: 12px; }
.gc tr.putts td { color: var(--muted); font-size: 11px; }
.gc td.cur { background: rgba(110,231,183,0.14); }
.gc tr.hole td.cur { color: #6ee7b7; }
.sc { display: inline-flex; width: 21px; height: 21px; align-items: center; justify-content: center; font-weight: 800; font-style: normal; box-sizing: border-box; }
.sc.birdie { border: 1.5px solid #6ee7b7; border-radius: 50%; color: #6ee7b7; }
.sc.eagle { border: 1.5px solid #fcd34d; border-radius: 50%; color: #fcd34d; box-shadow: 0 0 0 1.5px rgba(8,12,18,0.95), 0 0 0 3px #fcd34d; }
.sc.bogey { border: 1.5px solid #fca5a5; border-radius: 3px; color: #fca5a5; }
.sc.dbl { border: 1.5px solid #f87171; border-radius: 3px; color: #f87171; box-shadow: 0 0 0 1.5px rgba(8,12,18,0.95), 0 0 0 3px #f87171; }
.sc.live { color: #6ee7b7; font-weight: 600; opacity: 0.8; }
.sc.picked { text-decoration: underline dotted; }
.gcTot { display: flex; justify-content: space-around; font-size: 12px; color: var(--muted); font-weight: 700; padding: 2px 6px; }
.gcTot b { color: var(--fg, #fff); font-size: 15px; margin-left: 4px; }
.cardKey { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); font-weight: 600; }
.cardKey span { display: inline-flex; align-items: center; gap: 5px; }
.cardKey .sc { width: 17px; height: 17px; font-size: 10px; }
.roundStat { background: none; border: 0; border-left: 1px solid rgba(255,255,255,0.14); padding: 0 0 0 12px; color: inherit; font: inherit; cursor: pointer; }
.roundStat b { color: #fff; }
.roundStat b.u { color: #6ee7b7; } .roundStat b.o { color: #fca5a5; }
body.cardOpen #panel, body.cardOpen #side, body.cardOpen #hint, body.cardOpen #greenKey { opacity: 0; pointer-events: none; transition: opacity 200ms; }

.veil { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; background: rgba(2,6,23,0.72); font-weight: 700; color: var(--muted); }
.spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 700px) {
  #panel { left: 50%; right: auto; width: 460px; transform: translateX(-50%); }
}
@media (max-height: 560px) and (orientation: landscape) {
  #panel { left: auto; right: 8px; width: 360px; }
  #side { right: auto; left: 8px; }
}

/* ---------- hold-to-swing meter ---------- */
.meter {
  position: fixed; z-index: 8; left: 16px; right: 16px; bottom: calc(248px + var(--sab));
  padding: 10px 12px 12px; border-radius: 16px; background: var(--glass2); border: 1px solid var(--stroke);
  pointer-events: none;
}
.meterHead { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; margin-bottom: 8px; letter-spacing: 0.02em; }
.meterBar { position: relative; height: 22px; border-radius: 11px; background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.16)); overflow: hidden; }
.meterZone { position: absolute; top: 0; bottom: 0; background: rgba(52, 211, 153, 0.55); box-shadow: inset 0 0 0 2px rgba(110, 231, 183, 0.9); }
.meterTop { position: absolute; top: 0; bottom: 0; left: calc(100% / 1.18); width: 2px; margin-left: -1px; background: #fff; opacity: 0.9; }
.meterNeedle { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.9); }
.meter.pure .meterNeedle { background: #6ee7b7; box-shadow: 0 0 12px rgba(110,231,183,1); }
.meter.miss .meterNeedle { background: #f87171; box-shadow: 0 0 12px rgba(248,113,113,1); }
.shootBtn.holding { filter: brightness(1.1); transform: scale(0.98); }
.shootTxt { pointer-events: none; }
/* ---------- green key ---------- */
.greenKey {
  position: fixed; z-index: 4; left: 12px; top: calc(78px + var(--sat)); display: flex; align-items: center; gap: 4px;
  padding: 6px 9px; border-radius: 10px; background: var(--glass); border: 1px solid var(--stroke); font-size: 10px; font-weight: 700; color: var(--muted);
}
.greenKey i { width: 12px; height: 8px; border-radius: 2px; margin-left: 4px; }
.greenKey .k0 { background: #38bdf8; } .greenKey .k1 { background: #34d399; } .greenKey .k2 { background: #a3e635; }
.greenKey .k3 { background: #fbbf24; } .greenKey .k4 { background: #f87171; }
body[data-screen="menu"] .meter, body[data-screen="menu"] .greenKey { display: none; }
body.holding #panel button:not(#shootBtn), body.holding #panel input, body.holding #side button { opacity: 0.4; pointer-events: none; }

/* ---------- walk the hole: the rail ---------- */
.rail {
  left: 6px; top: calc(78px + var(--sat)); bottom: var(--railBottom, 290px);
  width: 46px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 0 6px;
  background: none; border: 0;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: ns-resize;
}
.railFlag { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.railTrack { position: relative; flex: 1; width: 6px; border-radius: 3px; background: rgba(255,255,255,0.35); box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.45); }
.railFill {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--t, 0) * 100%);
  border-radius: 3px; background: linear-gradient(0deg, #34d399, #a7f3d0);
}
.railTicks .tick {
  position: absolute; left: 50%; bottom: calc(var(--t) * 100%);
  transform: translate(-50%, 50%); width: 22px; height: 2px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.6);
  font-style: normal; font-size: 0; pointer-events: none;
}
.railTicks .tick::after {
  content: attr(data-m); position: absolute; left: 25px; top: -6px; font-size: 10px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.6);
}
.railThumb {
  position: absolute; left: 50%; bottom: calc(var(--t, 0) * 100%);
  width: 26px; height: 26px; margin-left: -13px; margin-bottom: -13px; border-radius: 50%;
  background: #0b1220; border: 3px solid #34d399; box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transition: transform 120ms;
}
.rail.live .railThumb { transform: scale(1.12); background: #34d399; border-color: #ecfdf5; }
.railLbl {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; padding: 5px 10px; border-radius: 12px;
  background: var(--glass2); border: 1px solid var(--stroke);
  font-size: 12px; font-weight: 700; line-height: 1.15; pointer-events: none;
}
.railLbl b { font-size: 16px; font-weight: 800; margin-right: 3px; }
.railLbl i { display: block; font-style: normal; font-size: 10px; color: var(--muted); font-weight: 700; }
.railLbl { opacity: 0; transition: opacity 250ms; }
.rail.talk .railLbl { opacity: 1; }
.railBall {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d7dde5 60%, #9aa4b1);
  border: 2px solid rgba(255,255,255,0.7); box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.rail.live .railBall { box-shadow: 0 0 0 3px rgba(52,211,153,0.55), 0 1px 6px rgba(0,0,0,0.5); }
body.busy .rail, body.holding .rail, body.cardOpen .rail { opacity: 0; pointer-events: none; }
@media (max-height: 560px) and (orientation: landscape) { .rail { left: 76px; bottom: calc(10px + var(--sab)); } }

/* ---------- floating distance labels ---------- */
.wlabels { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
body[data-screen="menu"] .wlabels, body.busy .wlabels, body.holding .wlabels, body.cardOpen .wlabels { display: none; }
.wl {
  position: absolute; left: 0; top: 0; will-change: transform;
  padding: 4px 9px 5px; border-radius: 12px; text-align: center; white-space: nowrap;
  background: rgba(2, 6, 23, 0.72); border: 1px solid rgba(255,255,255,0.18);
  font-size: 11px; font-weight: 700; line-height: 1.15; color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.wl::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-top-color: rgba(2, 6, 23, 0.72); border-bottom: 0; }
.wl b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.wl b small { font-size: 11px; font-weight: 700; margin-left: 1px; color: var(--muted); }
.wl i { display: block; font-style: normal; font-size: 10.5px; color: #cbd5e1; }
.wl em { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; }
.wl em.up { color: #fbbf24; } .wl em.dn { color: #7dd3fc; }
.wl.aim { border-color: rgba(34, 211, 238, 0.85); pointer-events: none; }
.wl.aim b { color: #a5f3fc; }
body.aiming .wl.aim { border-color: #fff; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.45); }
.wl.pin { border-color: rgba(248, 113, 113, 0.7); }
.wl.land { padding: 2px 7px; font-size: 10px; background: rgba(2,6,23,0.55); }
.wl.land b { display: inline; font-size: 12px; }
.wl.mark { padding: 2px 7px; background: rgba(255,255,255,0.88); color: #0b1220; border-color: #fff; }
.wl.mark::after { border-top-color: rgba(255,255,255,0.88); }
.wl.mark b { font-size: 13px; }

/* ---------- aim at the number ---------- */
.aimHere {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--railBottom, 290px) + 2px);
  height: 44px; padding: 0 18px; border-radius: 22px;
  background: #a5f3fc; color: #04202a; border: 0;
  font-size: 15px; font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.aimHere b { font-weight: 900; margin-left: 4px; }
body[data-screen="menu"] .aimHere, body.busy .aimHere, body.holding .aimHere, body.cardOpen .aimHere { display: none; }
@media (max-height: 560px) and (orientation: landscape) { .aimHere { bottom: calc(12px + var(--sab)); left: 40%; } }


/* ---------- set the target, back to the tee ---------- */
.targetSet {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--railBottom, 290px) + 4px);
  height: 46px; padding: 0 22px; border-radius: 23px; border: 0;
  background: #ffffff; color: #0b1220;
  font-size: 16px; font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.targetSet span { color: #059669; margin-right: 4px; font-weight: 900; }
body[data-screen="menu"] .targetSet, body.busy .targetSet, body.holding .targetSet, body.cardOpen .targetSet { display: none; }
@media (max-height: 560px) and (orientation: landscape) { .targetSet { bottom: calc(12px + var(--sab)); left: 40%; } }

/* ---------- the hole card (intro) ---------- */
.card.introSheet { max-width: 460px; width: calc(100% - 20px); padding: 14px 14px 12px; gap: 8px; text-align: left; }
.ihead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ihTitle h2 { font-size: 30px; line-height: 1.05; margin: 2px 0 2px; }
.ihTitle .meta { font-size: 13px; }
.ihPar { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; height: 58px; border-radius: 16px;
  background: linear-gradient(160deg, #10b981, #047857); color: #ecfdf5; box-shadow: 0 4px 14px rgba(16,185,129,0.3); }
.ihPar b { font-size: 28px; font-weight: 900; line-height: 1; }
.ihPar i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.hcWrap { position: relative; }
.hcMap { width: 100%; height: min(50dvh, 470px); border-radius: 16px; overflow: hidden; background: #172b19;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.hcMap svg { width: 100%; height: 100%; display: block; }
.hcMap text { font-family: inherit; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(4, 10, 6, 0.75); stroke-linejoin: round; }
.hcMap .hc-arc { fill: rgba(255,255,255,0.8); font-weight: 700; }
.hcMap .hc-sand { fill: #fde68a; }
.hcMap .hc-water { fill: #93c5fd; }
.hcMap .hc-waste { fill: #e7d7b0; }
.hcMap .hc-green { fill: #bbf7d0; }
.hcMap .hc-tee { fill: rgba(255,255,255,0.85); letter-spacing: 0.12em; }
.hcGreen { position: absolute; right: 8px; top: 8px; width: 118px; padding: 6px 6px 7px; border-radius: 14px;
  background: rgba(3, 8, 5, 0.72); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hcGreen svg { width: 106px; height: 106px; display: block; border-radius: 10px; }
.hcGreenTxt { font-size: 11px; font-weight: 700; color: #cbd5e1; margin-top: 4px; line-height: 1.25; text-align: center; }
.hcGreenTxt b { color: #fff; font-size: 14px; font-weight: 900; }
.hcStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hcStats > div { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 7px 6px 6px; text-align: center; min-width: 0; }
.hcStats b { display: block; font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcStats b small { font-size: 11px; color: var(--muted); margin-left: 1px; }
.hcStats b.up { color: #fbbf24; } .hcStats b.dn { color: #7dd3fc; }
.hcStats b.hz { font-size: 12px; line-height: 1.25; white-space: normal; }
.hcStats i { font-style: normal; font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.hcProfile { border-radius: 12px; background: rgba(255,255,255,0.04); padding: 5px 8px 4px; }
.hcProfile svg { width: 100%; height: 40px; display: block; }
.hcProfHead { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-height: 560px) and (orientation: landscape) {
  .card.introSheet { max-width: 720px; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "map head" "map stats" "map prof" "map btns"; }
  .card.introSheet .hcWrap { grid-area: map; } .card.introSheet .ihead { grid-area: head; }
  .card.introSheet .hcStats { grid-area: stats; grid-template-columns: repeat(2, 1fr); } .card.introSheet .hcProfile { grid-area: prof; }
  .card.introSheet .btnRow { grid-area: btns; } .hcMap { height: calc(100dvh - 60px); }
}

/* ---------- ending a round, and the rounds you've recorded ---------- */
.endBtn { color: #fecaca; border-color: rgba(248,113,113,0.45); }
.endBtn[data-armed="1"] { background: rgba(248,113,113,0.22); color: #fff; border-color: #f87171; }
.roundsList { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.roundRow { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--stroke); }
.rrMain { display: flex; align-items: center; gap: 10px; }
.rrMain > b { font-size: 24px; font-weight: 900; min-width: 38px; }
.rrRel { font-size: 13px; font-weight: 900; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.1); }
.rrRel.u { background: rgba(52,211,153,0.2); color: #6ee7b7; } .rrRel.o { background: rgba(251,191,36,0.16); color: #fcd34d; }
.rrTxt { font-size: 13px; font-weight: 700; line-height: 1.3; min-width: 0; }
.rrTxt i { font-style: normal; font-size: 12px; color: var(--muted); }
.rrCard { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-top: 8px; }
.rrCard span { display: flex; flex-direction: column; align-items: center; font-size: 11px; }
.rrCard span i { font-style: normal; color: var(--muted); font-weight: 700; }
.rrCard .sc { font-size: 13px; }

/* the intro says it too */
.introRound { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; font-size: 13px; font-weight: 700;
  background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(110, 231, 183, 0.45); }
.introRound:empty { display: none; }
.introRound b { padding: 2px 7px; border-radius: 7px; background: #ecfdf5; color: #065f46; font-size: 10.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.introRound span { flex: 1; min-width: 0; }
.introRound em { font-style: normal; font-weight: 900; } .introRound em.u { color: #6ee7b7; } .introRound em.o { color: #fcd34d; }
.introRound.practice { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.35); }
.introRound.practice b { background: #cbd5e1; color: #1e293b; }

/* in a scored round the header itself says so: a green edge, and the round in the subtitle */
body.inRound #top { border-color: rgba(110, 231, 183, 0.75); box-shadow: inset 3px 0 0 #34d399; }

/* ---------- the swing: address overlay ---------- */
.swingPad { position: fixed; inset: 0; z-index: 9; width: 100vw; height: 100dvh; touch-action: none; cursor: grab; }
.swingPad:active { cursor: grabbing; }
.swingTip { position: fixed; z-index: 10; left: 50%; top: calc(90px + var(--sat)); transform: translateX(-50%); max-width: calc(100% - 110px);
  padding: 8px 14px; border-radius: 14px; background: rgba(2,6,23,0.72); border: 1px solid var(--stroke); font-size: 13px; font-weight: 700; text-align: center; pointer-events: none; }
.swingCancel { position: fixed; z-index: 10; right: 12px; top: calc(84px + var(--sat)); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(2,6,23,0.7); border: 1px solid var(--stroke); font-size: 24px; line-height: 1; color: #fff; }
body.addressing #panel { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
#panel { transition: transform 220ms ease, opacity 220ms ease; }
@media (min-width: 700px) { body.addressing #panel { transform: translate(-50%, calc(100% + 24px)); } }
body.addressing #side, body.addressing .rail, body.addressing .wlabels, body.addressing .targetSet, body.addressing #greenKey { opacity: 0; pointer-events: none; }
body[data-screen="menu"] .swingPad, body[data-screen="menu"] .swingCancel, body[data-screen="menu"] .swingTip, body[data-screen="menu"] .strikeCard { display: none; }
/* what you did: path, face, contact */
.strikeCard { position: fixed; z-index: 8; left: 50%; top: calc(84px + var(--sat)); transform: translateX(-50%); width: min(420px, calc(100% - 24px));
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(2,6,23,0.82);
  border: 1px solid var(--stroke); pointer-events: none; animation: toastIn 220ms ease-out; }
.strikeCard.pure { border-color: rgba(110,231,183,0.75); } .strikeCard.ok { border-color: rgba(251,191,36,0.6); } .strikeCard.bad { border-color: rgba(248,113,113,0.75); }
.strikeCard svg { width: 62px; height: 68px; flex: none; }
.skTxt { min-width: 0; }
.skTxt > b { display: block; font-size: 17px; font-weight: 900; text-transform: capitalize; }
.strikeCard.pure .skTxt > b { color: #6ee7b7; } .strikeCard.bad .skTxt > b { color: #fca5a5; }
.skNums { display: flex; gap: 10px; margin-top: 3px; font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.skNums span { display: flex; flex-direction: column; }
.skNums i { font-style: normal; font-size: 14px; color: #fff; letter-spacing: 0; text-transform: none; }
.skWhy { margin-top: 3px; font-size: 12px; font-weight: 600; color: #cbd5e1; }
/* club steps: the arrow and the club it goes to */
.clubStep { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; }
.clubStep span { font-size: 15px; line-height: 1; }
.clubStep small { font-size: 11px; font-weight: 800; color: var(--muted); }
.clubStep:disabled { opacity: 0.3; }

/* ---------- the shot gets the screen: nothing on it until the ball is at rest ---------- */
body.inFlight #panel { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
@media (min-width: 700px) { body.inFlight #panel { transform: translate(-50%, calc(100% + 24px)); } }
body.inFlight #top, body.inFlight #side, body.inFlight .rail, body.inFlight .wlabels, body.inFlight .targetSet,
body.inFlight #greenKey, body.inFlight #hint, body.inFlight .meter { opacity: 0; pointer-events: none; transition: opacity 250ms; }
#top, #side { transition: opacity 250ms; }
/* the strike card sits low, once the ball has stopped */
.strikeCard { top: auto; bottom: calc(18px + var(--sab)); }


/* =====================================================================
   IN PLAY — the reference layout. Glass on the course: a header that says
   where you are, a column on the right to look around, the bag along the
   bottom, and the ball in the middle of four cards that say what the shot faces.
   ===================================================================== */
:root { --card: rgba(13, 20, 32, 0.78); --cardLine: rgba(255, 255, 255, 0.10); }

/* ---- header ---- */
#top { padding: 5px; gap: 8px; border-radius: 18px; background: rgba(13, 20, 32, 0.86); border-color: rgba(255,255,255,0.08); }
#top .iconBtn { width: 42px; height: 42px; flex: none; border-radius: 12px; background: rgba(255,255,255,0.07); font-size: 19px; }
.holeBox { flex: 1; min-width: 0; padding-left: 2px; }
.holeInfo { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; }
.holeSub { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; }
.holeSub #courseName { overflow: hidden; text-overflow: ellipsis; }
.roundStat { flex: none; font-weight: 800; color: #fff; }
.roundStat .u, .roundStat span.u { color: #6ee7b7; } .roundStat .o { color: #fca5a5; }
.roundStat i { font-style: normal; color: var(--muted); font-weight: 600; }
.holeMeta { flex: none; padding: 0 8px 0 10px; border-left: 1px solid rgba(255,255,255,0.14); font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.75); white-space: nowrap; }
.holeMeta i { font-style: normal; color: var(--faint); margin: 0 3px; }
.tile { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 46px; border-radius: 12px; line-height: 1; }
.tile b { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.tile b small { font-size: 13px; font-weight: 800; margin-left: 2px; }
.tile span { font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; margin-top: 3px; }
.strokeTile { width: 46px; background: #f1f5f9; color: #0f172a; }
.strokeTile span { color: #334155; }
.pinTile { min-width: 72px; padding: 0 8px; background: rgba(6, 95, 70, 0.85); border: 1.5px solid #34d399; color: #fff; align-items: flex-start; }
.pinTile span { color: #a7f3d0; }
@media (max-width: 370px) { .holeMeta { display: none; } }

/* ---- right column ---- */
#side { right: 8px; top: calc(76px + var(--sat)); width: 68px; gap: 10px; align-items: center; }
.miniMap {
  width: 68px; height: 178px; padding: 3px; border-radius: 16px; overflow: hidden;
  background: rgba(13, 20, 32, 0.82); border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.miniMap svg { width: 100%; height: 100%; display: block; border-radius: 13px; }
.pillBtn {
  width: 74px; display: flex; align-items: center; gap: 4px; padding: 6px 6px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--cardLine); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 1.1; text-align: left; letter-spacing: 0.03em;
}
.pillBtn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #fff; stroke-width: 1.8; }
.pillBtn[aria-pressed="true"] { border-color: #34d399; background: rgba(6, 95, 70, 0.8); }
.roundBtn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; width: 76px; }
.roundBtn i {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.roundBtn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.roundBtn span { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-shadow: 0 1px 3px rgba(0,0,0,0.9); white-space: nowrap; }
body.onGreen #viewBtn, body.onGreen #flyBtn { display: none; }

.pinCard {
  position: fixed; z-index: 6; right: 84px; top: calc(300px + var(--sat)); width: 150px;
  padding: 10px 12px; border-radius: 14px; background: rgba(13, 20, 32, 0.9); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.pcRow { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }
.pcRow b { font-size: 18px; color: #fff; letter-spacing: 0; }
.pcRow b small { font-size: 11px; color: var(--muted); margin-left: 1px; }
.pcRow.pin { color: #fca5a5; }
.pcSlope { margin-top: 4px; font-size: 11px; color: #cbd5e1; font-weight: 600; }
body.addressing .pinCard, body.inFlight .pinCard, body.busy .pinCard { display: none; }

/* ---- bottom: the bag, then the deck ---- */
#panel {
  left: 8px; right: 8px; bottom: calc(10px + var(--sab));
  padding: 0; border: 0; border-radius: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
#panel button, #panel .clubStrip { pointer-events: auto; }
body.addressing #panel *, body.inFlight #panel * { pointer-events: none !important; }
.bagRow { display: flex; align-items: center; gap: 2px; }
.chev { flex: none; width: 22px; height: 56px; padding: 0; background: none; border: 0; }
.chev svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.chev:disabled { opacity: 0.25; }
.clubStrip { flex: 1; display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; touch-action: pan-x; scroll-snap-type: x proximity; }
.clubStrip::-webkit-scrollbar { display: none; }
.clubStrip .chip {
  flex: 0 0 auto; width: 50px; height: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; scroll-snap-align: center;
}
.clubStrip .lens {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: block;
  background: radial-gradient(circle at 50% 30%, #3b4656, #121a26 72%);
  border: 1.5px solid rgba(255,255,255,0.22); box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  transition: transform 150ms, box-shadow 150ms;
}
.clubStrip .lens canvas { width: 100%; height: 100%; display: block; }
.clubStrip .nm { font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.clubStrip .chip.sel .lens { transform: scale(1.12); border: 2px solid #fff; box-shadow: 0 0 0 2.5px var(--ring, #a78bfa), 0 0 16px var(--ring, #a78bfa); }
.clubStrip .chip.sel .nm { font-size: 12px; }

.deck { display: flex; align-items: center; gap: 8px; }
.cards { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.infoCard {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--cardLine); color: #fff; text-align: left;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0;
}
.infoCard > i { flex: none; width: 28px; height: 24px; display: grid; place-items: center; }
.infoCard > i svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.infoCard > i.up svg { transform: scaleX(-1); }
.infoCard > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.infoCard b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.infoCard span { font-size: 10.5px; color: rgba(255,255,255,0.7); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.infoCard em { margin-left: auto; font-style: normal; font-size: 20px; color: rgba(255,255,255,0.6); flex: none; }
.infoCard.tap { width: 100%; }
.infoCard.good b { color: #fff; } .infoCard.warn b { color: #fde68a; } .infoCard.bad b { color: #fca5a5; }

.swingWrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ballBtn {
  position: relative; width: 74px; height: 74px; border-radius: 50%; padding: 0; border: 0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,1) 0 12%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 50% 50%, #f8fafc 0 38%, #e2e8ee 62%, #aeb7c1 90%, #7d8792 100%);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.95), 0 0 22px rgba(52, 211, 153, 0.55), 0 10px 24px rgba(0,0,0,0.55);
  transition: box-shadow 200ms, transform 120ms;
}
.ballBtn .dimples {
  position: absolute; inset: 6px; border-radius: 50%; pointer-events: none; opacity: 0.6;
  background: radial-gradient(circle, rgba(100,116,139,0.55) 0 1.3px, transparent 1.7px) 0 0 / 7px 7px,
              radial-gradient(circle, rgba(100,116,139,0.45) 0 1.3px, transparent 1.7px) 3.5px 3.5px / 7px 7px;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%); mask: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
}
.ballBtn.warn { box-shadow: 0 0 0 4px #fbbf24, 0 0 22px rgba(251,191,36,0.5), 0 10px 24px rgba(0,0,0,0.55); }
.ballBtn.bad { box-shadow: 0 0 0 4px #f87171, 0 0 22px rgba(248,113,113,0.55), 0 10px 24px rgba(0,0,0,0.55); }
.ballBtn:active { transform: scale(0.94); }
.ballLbl { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
body.busy .deck, body.busy .bagRow { opacity: 0.45; pointer-events: none; }

/* ---- the rail's number, beside the target thumb ---- */
.railLbl { opacity: 1 !important; left: 22px; padding: 0; background: none; border: 0; font-size: 17px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

/* ---- the target bubble ---- */
.wl.aim { padding: 6px 12px 7px; border-radius: 14px; background: rgba(13, 20, 32, 0.85); border: 1px solid rgba(255,255,255,0.35); }
.wl.aim b { color: #fff; font-size: 24px; }
.wl.aim b small { font-size: 13px; color: #fff; }
.wl.aim em { font-size: 15px; font-weight: 800; }
.wl.aim em.dn { color: #34d399; } .wl.aim em.up { color: #fbbf24; }
.wl.aim::after { border-top-color: rgba(13, 20, 32, 0.85); }

@media (min-width: 700px) {
  #panel { left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
}
@media (max-height: 560px) and (orientation: landscape) {
  #panel { left: auto; right: 8px; width: 420px; transform: none; }
  #side { display: none; }
}
.tile b span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; color: inherit; }
.clubStrip { padding-top: 7px; padding-bottom: 2px; }
.clubStrip .chip.sel .nm { margin-top: 3px; }
.infoCard { gap: 6px; padding: 0 6px 0 7px; }
.infoCard > i { width: 24px; height: 20px; }
.infoCard b { font-size: 14px; }
.infoCard span { font-size: 10px; }
.infoCard em { font-size: 17px; }
.railLbl { left: 30px !important; }
.holeInfo { white-space: nowrap; }
.pinCard { right: 8px; top: calc(372px + var(--sat)); }
body.onGreen .pinCard { top: calc(286px + var(--sat)); }

/* ---- the bag wheel: endless, the club in your hands centred and half as big again ---- */
.clubStrip { position: relative; height: 104px; overflow: hidden; padding: 0; display: block; scroll-snap-type: none; touch-action: none; cursor: grab; }
.clubStrip .chip {
  position: absolute; left: 0; bottom: 4px; width: 52px; transform-origin: 50% 78%;
  will-change: transform, opacity; transition: none;
}
.clubStrip .chip .lens { transition: box-shadow 200ms, border-color 200ms; transform: none !important; }
.clubStrip .chip.sel .lens { border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ring, #a78bfa), 0 0 18px var(--ring, #a78bfa), 0 6px 14px rgba(0,0,0,0.5); }
.clubStrip .chip.sel .nm { font-size: 11px; margin-top: 0; }
.clubStrip { -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.bagRow .chev { position: relative; z-index: 2; }

/* ---- on the green: you, the putter and the ball ---- */
body.putting #side, body.putting .cards, body.putting .chev, body.putting .rail { display: none !important; }
body.putting .clubStrip { -webkit-mask: none; mask: none; }
body.putting .deck { justify-content: center; }

/* ---- the power ring round the club in your hands ---- */
.clubStrip .chip .pw { position: absolute; left: 50%; top: -5px; width: 56px; height: 56px; margin-left: -28px; transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity 200ms; overflow: visible; }
.clubStrip .chip.sel .pw { opacity: 1; }
.pw circle { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.pw .pwT { stroke: rgba(255,255,255,0.16); }
.pw .pwF { stroke: #34d399; stroke-dasharray: 169.6; stroke-dashoffset: calc(169.6 * (1 - var(--pf, 1))); transition: stroke-dashoffset 120ms linear; filter: drop-shadow(0 0 3px rgba(52,211,153,0.8)); }
.pw .pwX { stroke: #fbbf24; stroke-width: 5; stroke-dasharray: 169.6; stroke-dashoffset: calc(169.6 * (1 - var(--px, 0))); transition: stroke-dashoffset 120ms linear; filter: drop-shadow(0 0 5px rgba(251,191,36,0.9)); }
.clubStrip .chip.push .pwF { stroke: #a7f3d0; }
.clubStrip .chip.max .pwX { stroke: #f87171; filter: drop-shadow(0 0 6px rgba(248,113,113,0.95)); animation: pwMax 0.8s ease-in-out infinite; }
@keyframes pwMax { 50% { opacity: 0.55; } }
.clubStrip .chip.sel .lens { box-shadow: 0 6px 14px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.85); }