/* PMA Golf: interface styles.
   One small design system: navy + gold (the PMA colours) over a fresh green course, Outfit for text, Barlow Condensed for numbers and titles.
   Sizes are in rem and the root size scales with the screen, so everything stays in proportion from a small phone to a big monitor. */

:root {
  --navy: #0f1a33; --navy-2: #16274d; --navy-3: #21386b;
  --gold: #f6bd1c; --gold-2: #ffd84d; --gold-3: #a87607;
  --cream: #faf7ea; --sand: #ece7d2; --sand-2: #dcd5b8; --line: #e6e0c8;
  --turf: #2f8f4e; --sky: #2f7de1; --coral: #ff7a6b; --pink: #e4208a; --orange: #f08a2c;
  --ink: #f4f8f2; --dim: #aebed2; --muted: #6a7560; --good: #7be07b; --bad: #ff7a6b;
  --font-ui: "Outfit", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Barlow Condensed", "Arial Narrow", "Outfit", system-ui, sans-serif;
  --glass: linear-gradient(180deg, rgba(26,44,90,.82), rgba(12,22,48,.88));
  --edge: 1px solid rgba(255,255,255,.16);
  --lift: 0 .5rem 1.4rem rgba(5,10,28,.34), inset 0 1px 0 rgba(255,255,255,.14);
  --side: 15rem;
}

* { box-sizing: border-box; }
html { font-size: clamp(13px, min(.35vw + 12.4px, 1.9vh + 4px), 19px); }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font-ui); font-weight: 500; color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  background:
    radial-gradient(ellipse 60% 38% at 20% 30%, rgba(255,246,216,.55), rgba(255,246,216,0) 70%),
    linear-gradient(var(--sky1, #3f8fe0) 0%, var(--sky2, #86c5f2) 40%, var(--sky3, #cfe8f6) 52%, var(--sky3, #d3ebf6) 100%);
  user-select: none; -webkit-user-select: none;
}
canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
button { font-family: inherit; }
svg.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ the picture: soft vignette, cinematic bars, boot screen */
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 100% at 50% 46%, rgba(0,0,0,0) 58%, rgba(6,14,32,.30) 100%); }
#bars i { position: fixed; left: 0; right: 0; height: 0; background: #070d1c; pointer-events: none; transition: height .9s cubic-bezier(.2,.7,.2,1); z-index: 5; }
#bars i:first-child { top: 0; } #bars i:last-child { bottom: 0; }
body.fly #bars i { height: 7vh; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; }
#boot { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; background: radial-gradient(ellipse at 50% 40%, #1b3366, #0b1530 70%); transition: opacity .6s ease .1s, visibility 0s linear .7s; }
#boot img { height: 7rem; filter: drop-shadow(0 .5rem 1.2rem rgba(0,0,0,.45)); animation: bootPulse 1.6s ease-in-out infinite; }
#boot .bar { width: 9rem; height: .3rem; border-radius: 1rem; background: rgba(255,255,255,.14); overflow: hidden; }
#boot .bar i { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--gold); animation: bootBar 1.1s ease-in-out infinite; }
html.ready #boot { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes bootPulse { 50% { transform: scale(1.04); } }
@keyframes bootBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ------------------------------------------------------------------ HUD panels */
.panel {
  position: fixed; background: var(--glass); border: var(--edge); border-radius: 1.15rem; padding: .7rem .95rem;
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); box-shadow: var(--lift);
}
.panel::before { content: ''; position: absolute; left: 1.1rem; right: 1.1rem; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(246,189,28,0), var(--gold) 50%, rgba(246,189,28,0)); opacity: .85; }
.small { font: 600 .68rem/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.big { font: 700 1.95rem/1 var(--font-num); letter-spacing: .01em; font-variant-numeric: tabular-nums; }

#hudLeft { display: contents; }
#hudTL { top: 1rem; left: 1rem; min-width: 14rem; padding-top: .65rem; }
#holeLine { padding-right: 2.6rem; color: var(--gold-2); }
#hudTL .stats { display: flex; align-items: stretch; gap: .85rem; margin-top: .45rem; }
#hudTL .stats .sep { width: 1px; background: rgba(255,255,255,.16); }
#strokeLine { font: 600 .68rem/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
#strokeLine span { display: block; margin-top: .2rem; font: 700 2.1rem/1 var(--font-num); letter-spacing: .01em; color: var(--gold); }
#pinLabel { margin: 0; }
#pinDist { margin-top: .2rem; font-size: 2.1rem; }
#bMenu { position: absolute; top: .5rem; right: .5rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: .6rem; background: rgba(255,255,255,.12); color: var(--ink); cursor: pointer; transition: background .15s; }
#bMenu:hover { background: rgba(255,255,255,.24); }
#bMenu svg { width: 1.1rem; height: 1.1rem; }

#hudTR { top: 1rem; right: 1rem; display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem .6rem .7rem; }
#hudTR .dial { width: 3rem; height: 3rem; flex: none; }
#windArrow { width: 100%; height: 100%; transition: transform .15s; overflow: visible; }
#windSpd { margin: .12rem 0 .1rem; font-size: 1.75rem; }

#hudBL { bottom: 1rem; left: 1rem; width: var(--side); padding: .7rem .8rem .75rem; transition: opacity .3s; }
body.busy #hudBL { opacity: 0 !important; pointer-events: none; }
#hudBL .club { margin-top: .12rem; font: 800 1.5rem/1.1 var(--font-ui); letter-spacing: -.005em; }
#hudBL .row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .4rem; }
#hudBL .row span { white-space: nowrap; }
#lieName { padding: .18rem .6rem; border-radius: 99px; background: rgba(255,255,255,.12); color: var(--ink); }
#carryInfo { font: 700 1.1rem/1 var(--font-num); letter-spacing: .02em; color: var(--gold-2); }
#spotSel { width: 100%; margin-top: .25rem; padding: .5rem .55rem; border: 1px solid rgba(255,255,255,.16); border-radius: .7rem; background: rgba(255,255,255,.12); color: var(--ink); font: 600 .85rem var(--font-ui); }
#spotSel option, #spotSel optgroup { color: #111; background: #fff; }
.btns { display: flex; gap: .3rem; margin-top: .6rem; }
.btns button {
  flex: 1; min-width: 0; height: 2.35rem; display: grid; place-items: center; border: 0; border-radius: .7rem;
  background: rgba(255,255,255,.12); color: var(--ink); cursor: pointer; transition: background .12s, transform .08s;
}
.btns button:hover { background: rgba(255,255,255,.2); }
.btns button:active { background: rgba(255,255,255,.3); transform: scale(.96); }
.btns button.on { background: var(--gold); color: var(--navy); }
.btns button svg { width: 1.1rem; height: 1.1rem; }

/* ------------------------------------------------------------------ swing meter + buttons */
#hudTL, #hudTR, #hudBL, #meterWrap { opacity: 0; }
#meterWrap { position: fixed; left: 50%; bottom: 1.4rem; width: min(34rem, calc(100vw - 2 * (var(--side) + 1.8rem))); transform: translateX(-50%); text-align: center; transition: opacity .2s; pointer-events: none; }
#meterWrap button { pointer-events: auto; }
body.busy #meterWrap button { pointer-events: none; }
#meterLabel { margin-bottom: .45rem; font: 700 .78rem/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
#track {
  position: relative; height: 2.15rem; border-radius: 99px; overflow: hidden;
  background: linear-gradient(180deg, rgba(7,14,32,.9), rgba(20,34,70,.82));
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.2), inset 0 .15rem .4rem rgba(0,0,0,.35);
}
#track .tk { position: absolute; top: 28%; bottom: 28%; width: 1px; background: rgba(255,255,255,.22); }
#fill { position: absolute; left: 12.28%; top: .28rem; bottom: .28rem; width: 0; border-radius: 99px; background: linear-gradient(90deg, #4fd26a, #f3e04b 62%, #ff6b4a); box-shadow: 0 0 .8rem rgba(120,230,120,.35); }
#zone { position: absolute; top: 0; bottom: 0; left: calc(12.28% - 2.63%); width: 5.26%; background: rgba(123,224,123,.5); }
#pinMark { position: absolute; top: .22rem; bottom: .22rem; width: 3px; margin-left: -1px; background: #fff; border-radius: 2px; opacity: .95; display: none; box-shadow: 0 0 .5rem rgba(255,255,255,.6); }
#zeroMark { position: absolute; top: 0; bottom: 0; left: 12.28%; width: 2px; background: rgba(255,255,255,.9); }
#powerMark { position: absolute; top: .15rem; bottom: .15rem; width: 4px; background: var(--gold-2); border-radius: 2px; display: none; box-shadow: 0 0 .6rem rgba(255,216,77,.7); }
#cursor { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff; border-radius: 3px; box-shadow: 0 0 .7rem #fff; display: none; }
#meterInfo { margin-top: .4rem; min-height: 1.1rem; font: 600 .82rem/1.3 var(--font-ui); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.75); }
#swingRow { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; align-items: center; margin-top: .55rem; }
#swingRow button, #bSpeed { border: 0; font-weight: 800; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#bSwing {                                                                                        /* not a button any more: a hint; the whole screen is the swing button */
  pointer-events: none !important; padding: .7rem 1.3rem; border-radius: 99px; font-size: .95rem; letter-spacing: .04em; color: var(--gold-2);
  background: var(--glass); border: var(--edge); box-shadow: var(--lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#bCancel { display: none; padding: .7rem 1.2rem; border-radius: 99px; font-size: .9rem; font-weight: 700; color: #fff; background: var(--glass); border: var(--edge); box-shadow: var(--lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.swinging #bCancel { display: inline-block; }
#bCancel:active { background: rgba(15,26,51,1); }
#cartHud { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .5rem; width: min(34rem, 92vw); text-align: center; pointer-events: none; }
body.carting #cartHud { display: flex; }
#cartHint { font: 700 .78rem/1.3 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.75); }
#cartDist { font: 800 1.5rem/1 var(--font-num); letter-spacing: .04em; color: var(--gold-2); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
#bSkipCart { pointer-events: auto; margin-top: .3rem; padding: .75rem 1.5rem; border: 0; border-radius: 99px; font: 800 1rem var(--font-ui); color: #1b1400; cursor: pointer; touch-action: manipulation; background: linear-gradient(180deg, var(--gold-2), var(--gold) 58%, #eaa90d); box-shadow: 0 .2rem 0 var(--gold-3), 0 .6rem 1.1rem rgba(0,0,0,.32); }
#bSkipCart:active { transform: translateY(.15rem); box-shadow: 0 .05rem 0 var(--gold-3); }
#cartPedals { display: flex; gap: .6rem; pointer-events: none; }
#cartPedals button { pointer-events: auto; padding: .6rem 1.2rem; border: 0; border-radius: 99px; font: 800 .9rem var(--font-ui); color: #fff; cursor: pointer; touch-action: manipulation; background: var(--glass); box-shadow: var(--lift); border: var(--edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#cartPedals button:active { background: rgba(15,26,51,1); }
#cartPedals #bBoost { color: var(--gold-2); }
#cartPads { position: fixed; left: 0; right: 0; bottom: 7.5rem; display: none; justify-content: space-between; padding: 0 1.2rem; pointer-events: none; }
#cartPads i { width: 4.2rem; height: 4.2rem; display: grid; place-items: center; border-radius: 50%; font: 800 2.2rem/1 var(--font-ui); font-style: normal; color: #fff; background: rgba(10,20,44,.42); border: 1px solid rgba(255,255,255,.25); }
@media (pointer: coarse) { body.carting #cartPads { display: flex; } }
#bPractice { padding: .85rem 1.15rem; border-radius: 1rem; font-size: .95rem; font-weight: 700; color: #fff; background: var(--glass); border: var(--edge); box-shadow: var(--lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#bPractice:active { background: rgba(15,26,51,1); }
#bSpeed {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; opacity: 0; pointer-events: none; transition: opacity .2s;
  padding: .8rem 1.5rem; border-radius: 99px; font-size: .95rem; color: #fff; background: var(--glass); border: var(--edge); box-shadow: var(--lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#bSpeed:active { background: rgba(14,26,56,.95); }

/* ------------------------------------------------------------------ toast + help + brand */
#toast {
  position: fixed; left: 50%; top: 20%; transform: translate(-50%, -.5rem); padding: .75rem 1.6rem .8rem; max-width: min(32rem, 86vw);
  background: var(--glass); border: var(--edge); border-radius: 1.15rem; box-shadow: var(--lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-align: center; font: 800 1.4rem/1.15 var(--font-ui); opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
#toast::before { content: ''; position: absolute; left: 1.4rem; right: 1.4rem; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(246,189,28,0), var(--gold) 50%, rgba(246,189,28,0)); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.slim { top: auto; bottom: 5.6rem; padding: .45rem 1.1rem .5rem; border-radius: 99px; font-size: 1rem; max-width: 92vw; background: rgba(10,20,44,.74); }
#toast.slim::before { display: none; }
#toast.slim small { display: inline; margin: 0 0 0 .55rem; font-size: .8rem; }
#toast small { display: block; margin-top: .3rem; font: 600 .88rem/1.35 var(--font-ui); color: var(--dim); }

#help { position: fixed; right: 1rem; bottom: 1rem; }
#helpBtn { display: flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: var(--edge); border-radius: 99px; background: var(--glass); color: var(--ink); font: 600 .78rem var(--font-ui); letter-spacing: .06em; cursor: pointer; box-shadow: var(--lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: .8; transition: opacity .2s; }
#helpBtn:hover, #help.open #helpBtn { opacity: 1; }
#helpBtn kbd { margin: 0; }
#help .hp { position: absolute; right: 0; bottom: calc(100% + .5rem); width: 20.5rem; padding: .85rem 1rem; background: var(--glass); border: var(--edge); border-radius: 1rem; box-shadow: var(--lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; }
#help:hover .hp, #help.open .hp { display: block; }
#help .hp div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .22rem 0; font-size: .8rem; color: var(--ink); }
#help .hp div span:first-child { color: var(--dim); }
kbd { display: inline-block; min-width: 1.5rem; padding: .08rem .42rem; margin-left: .15rem; border-radius: .4rem; text-align: center; font: 700 .72rem/1.35 var(--font-ui); color: var(--ink); background: rgba(255,255,255,.16); box-shadow: inset 0 -2px 0 rgba(255,255,255,.12); }

#brand {
  position: fixed; top: .9rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .55rem; padding: .3rem 1rem .3rem .55rem;
  background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: var(--gold); border-radius: .85rem; border-bottom: .2rem solid var(--gold);
  font: 800 .9rem var(--font-num); letter-spacing: .22em; box-shadow: 0 .4rem 1.1rem rgba(5,10,28,.3); transition: opacity .4s;
}
#brand img { height: 2.15rem; }
#brand .wm { display: flex; flex-direction: column; align-items: center; gap: .22rem; }
#brand b { font: 800 .9rem/1 var(--font-num); letter-spacing: .22em; margin-right: -.22em; }
#brand i { font: 800 .48rem/1 var(--font-ui); font-style: normal; letter-spacing: .6em; margin-right: -.6em; color: #fff; opacity: .9; }
body.fly #brand, body.inMenu #brand, body.inMenu #help { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ flyover title: a broadcast lower third */
#intro { position: fixed; left: 0; right: 0; bottom: calc(7vh + 1.2rem); padding: 0 clamp(1rem, 4vw, 3.5rem); pointer-events: none; z-index: 6; }
#intro .lt { display: inline-flex; align-items: center; gap: 1.1rem; padding: .8rem 1.7rem .8rem .9rem; max-width: 100%; background: linear-gradient(90deg, rgba(15,26,51,.94), rgba(22,39,77,.88)); border-left: .4rem solid var(--gold); border-radius: .4rem 1.1rem 1.1rem .4rem; box-shadow: 0 .7rem 2rem rgba(5,10,28,.45); animation: ltIn .7s cubic-bezier(.2,.8,.2,1) both; }
#intro .tpc { height: 4.6rem; filter: drop-shadow(0 .2rem .5rem rgba(0,0,0,.4)); }
#intro .event { display: flex; align-items: center; gap: .5rem; font: 800 .85rem var(--font-num); letter-spacing: .24em; color: var(--gold); }
#intro .event img { height: 1.5rem; }
#intro .sub { margin-top: .15rem; font: 700 2.1rem/1.05 var(--font-num); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
#intro .skip { position: absolute; right: clamp(1rem, 4vw, 3.5rem); bottom: 0; padding: .4rem .9rem; border-radius: 99px; background: rgba(15,26,51,.7); border: var(--edge); font: 600 .78rem var(--font-ui); letter-spacing: .04em; color: var(--ink); }
@keyframes ltIn { from { opacity: 0; transform: translateX(-2rem); } }

/* ------------------------------------------------------------------ sheets (finish card, pause, map, and every menu screen) */
#card, #pause, #mapView { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 1rem; background: radial-gradient(ellipse at 50% 45%, rgba(8,16,36,.45), rgba(8,16,36,.72)); }
#card.show, #pause.show, #mapView.show { display: flex; }
.sheet {
  position: relative; width: min(30rem, calc(100vw - 2rem)); padding: 1.7rem 1.8rem 1.5rem; background: var(--cream); color: var(--navy); border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0 1.6rem 4rem rgba(5,10,28,.5), inset 0 0 0 1px rgba(255,255,255,.5); animation: sheetIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .42rem; background: linear-gradient(90deg, var(--gold), var(--gold-2) 50%, var(--gold)); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(.8rem) scale(.985); } }
.sheet h2 { margin: .15rem 0 0; font: 800 2.45rem/1 var(--font-num); letter-spacing: .015em; text-transform: uppercase; color: var(--navy); }
.sheet .meta { margin-bottom: .9rem; color: var(--muted); font-weight: 600; font-size: .95rem; line-height: 1.4; }
.sheet .small, #menu .sheet .small { color: var(--muted); }
.sheet table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sheet th { text-align: left; padding: .3rem 0; font: 700 .68rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sheet td, .sheet th { padding-right: .5rem; }
.sheet td { padding: .4rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sheet button {
  display: block; margin-top: 1rem; width: 100%; padding: .85rem 1rem; border: 0; border-radius: .95rem; cursor: pointer;
  font: 700 1.05rem var(--font-ui); background: var(--sand); color: var(--navy); transition: background .15s, transform .08s, box-shadow .15s;
}
.sheet button:hover { background: var(--sand-2); }
.sheet button:active { transform: translateY(1px); }
.sheet button:disabled { opacity: .5; cursor: default; }
.sheet button.primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, #eaa90d); color: #1b1400; box-shadow: 0 .2rem 0 var(--gold-3), 0 .6rem 1rem rgba(168,118,7,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
.sheet button.primary:hover { filter: brightness(1.05); background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, #eaa90d); }
.sheet button.primary:active { transform: translateY(.15rem); box-shadow: 0 .05rem 0 var(--gold-3), inset 0 1px 0 rgba(255,255,255,.4); }
.sheet button.ghostbtn { background: var(--sand); color: var(--navy); }

/* finish card */
.sheet .res { margin: .1rem 0 .2rem; font: 800 3.1rem/1 var(--font-num); letter-spacing: .01em; text-transform: uppercase; }
.res-eagle { color: #b07d00; } .res-birdie { color: #1f8a4c; } .res-par { color: var(--navy); } .res-bogey { color: #d4572f; } .res-double { color: #b3261e; } .res-pick { color: var(--muted); }
.sheet .score { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .5rem 0 1rem; }
.sheet .score > div { padding: .6rem .7rem .55rem; border-radius: .9rem; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sheet .score b { display: block; margin-top: .15rem; font: 700 2.4rem/1 var(--font-num); font-variant-numeric: tabular-nums; }
.sheet .score .notation { display: inline-grid; place-items: center; min-width: 2.7rem; height: 2.7rem; padding: 0 .3rem; margin-top: .1rem; line-height: 1; }
.notation.under { border: 2px solid currentColor; border-radius: 50%; } .notation.eagle { box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor; }
.notation.over { border: 2px solid currentColor; border-radius: .25rem; } .notation.dbl { box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor; }
.sheet .score .small { display: block; }

/* map picker */
.mapSheet { width: min(36rem, calc(100vw - 1.25rem)); max-height: calc(100vh - 1rem); overflow: auto; padding: 1.3rem 1.4rem 1.2rem; }
.mapSheet h2 { font-size: 2rem; }
.mapSheet .meta { margin-bottom: .7rem; font-size: .88rem; }
#mapC { position: static; inset: auto; display: block; margin: 0 auto; max-width: 100%; max-height: calc(100vh - 18rem); width: auto; height: auto; border-radius: .9rem; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 3px var(--sand-2); }
.mapInfo { margin-top: .7rem; min-height: 1.3em; font-weight: 700; font-size: 1rem; text-align: center; }
.mapInfo.bad { color: #b3261e; }
.mapSheet .row { display: flex; gap: .65rem; }
.mapSheet .row button { margin-top: .8rem; flex: 1; }

/* ------------------------------------------------------------------ menu: home, practice, tournaments, organiser, golfer */
#menu { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; overflow: auto; background: radial-gradient(ellipse at 50% 42%, rgba(8,16,36,.22), rgba(8,16,36,.62) 95%); }
#menu.show { display: flex; }
#menu button { font: inherit; cursor: pointer; }
#menu .sheet { max-height: calc(100vh - 2rem); overflow: auto; }
#menu .home { width: min(23rem, 100%); text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.55); animation: sheetIn .5s cubic-bezier(.2,.8,.2,1) both; }
#menu .event.big { display: inline-flex; align-items: center; gap: .9rem; padding: .55rem 1.6rem .55rem .9rem; border-radius: 1.2rem; text-shadow: none; background: linear-gradient(180deg, #1c3060, var(--navy)); border-bottom: .3rem solid var(--gold); color: var(--gold); box-shadow: 0 .9rem 2.2rem rgba(5,10,28,.5), inset 0 1px 0 rgba(255,255,255,.14); }
#menu .event.big img { height: 4.8rem; }
#menu .event.big .wm { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
#menu .event.big b { font: 800 2.4rem/1 var(--font-num); letter-spacing: .22em; margin-right: -.22em; }
#menu .event.big i { font: 800 .8rem/1 var(--font-ui); font-style: normal; letter-spacing: .62em; margin-right: -.62em; color: #fff; opacity: .92; }
#menu .home .sub { margin-top: 1rem; font: 700 .78rem var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: #fff; opacity: .92; }
#menu .menuBtns { display: grid; gap: .65rem; margin-top: 1.3rem; }
#menu .menuBtns button {
  display: flex; align-items: center; gap: .8rem; width: 100%; padding: .75rem 1rem .75rem .75rem; border: 0; border-radius: 1.05rem; text-align: left; text-shadow: none;
  font: 700 1.05rem var(--font-ui); color: var(--navy); background: rgba(255,255,255,.95); box-shadow: 0 .35rem 1rem rgba(5,10,28,.28), inset 0 -2px 0 rgba(0,0,0,.06);
  transition: transform .12s, box-shadow .12s, background .12s;
}
#menu .menuBtns button:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgba(5,10,28,.34), inset 0 -2px 0 rgba(0,0,0,.06); background: #fff; }
#menu .menuBtns button:active { transform: translateY(0); }
#menu .menuBtns .ic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .8rem; display: grid; place-items: center; color: #fff; background: var(--c, var(--turf)); box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
#menu .menuBtns .ic svg { width: 1.35rem; height: 1.35rem; }
#menu .menuBtns button.primary { padding: .9rem 1rem .9rem .85rem; font-size: 1.2rem; background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, #eaa90d); box-shadow: 0 .28rem 0 var(--gold-3), 0 .9rem 1.6rem rgba(5,10,28,.34), inset 0 1px 0 rgba(255,255,255,.55); }
#menu .menuBtns button.primary .ic { background: var(--navy); color: var(--gold); }
#menu .menuBtns button.primary:hover { filter: brightness(1.05); }
#menu .menuBtns .pair { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
#menu .menuBtns .pair button { flex-direction: column; justify-content: center; gap: .5rem; padding: .85rem .5rem .8rem; text-align: center; font-size: 1rem; }
#menu .menuBtns button.ghost { padding: .65rem .9rem .65rem .65rem; font-size: .98rem; color: #fff; background: rgba(15,26,51,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
#menu .menuBtns button.ghost:hover { background: rgba(15,26,51,.8); }
#menu .menuBtns button.ghost .ic { width: 2rem; height: 2rem; border-radius: .65rem; }
#menu .menuBtns button.ghost .ic svg { width: 1.1rem; height: 1.1rem; }
#menu .home .course { display: inline-block; margin-top: 1.1rem; padding: .35rem .9rem; border-radius: 99px; font: 600 .72rem var(--font-ui); letter-spacing: .14em; text-transform: uppercase; background: rgba(15,26,51,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); text-shadow: none; }
#menu .who { margin-top: .9rem; font-size: .88rem; font-weight: 600; }
#menu .who a { color: var(--gold); }

#menu .small-sheet { width: min(25rem, calc(100vw - 2rem)); }
#menu .sheet .top { display: flex; justify-content: space-between; align-items: center; margin: .2rem 0 .7rem; }
#menu .sheet .top b { font-weight: 700; }
#menu .topbtns { display: flex; gap: 1rem; }
#menu .sheet h3 { margin: 1.3rem 0 .45rem; font: 700 .72rem var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#menu .sheet .status { margin: .5rem 0 .3rem; font-size: 1.05rem; font-weight: 600; }
#menu .sheet .err { min-height: 1.2em; margin: .4rem 0; color: #b3261e; font-weight: 700; font-size: .9rem; }
#menu .sheet button.link { display: inline-block; width: auto; margin: .8rem 0 0; padding: .25rem 0; border-radius: 0; background: none; color: var(--navy-3); font-size: .92rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
#menu .sheet .top button.link { margin: 0; }
#menu .sheet .row { display: flex; gap: .55rem; }
#menu .sheet .row button { margin-top: .75rem; }
#menu .sheet label { display: block; margin-top: .9rem; font: 700 .72rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#menu .sheet input, #menu .sheet label select {
  display: block; width: 100%; margin-top: .3rem; padding: .75rem .85rem; border: 2px solid var(--sand-2); border-radius: .8rem; background: #fff; color: var(--navy);
  font: 600 1.05rem var(--font-ui); text-transform: none; letter-spacing: 0; user-select: text; -webkit-user-select: text; transition: border-color .15s, box-shadow .15s;
}
#menu .sheet input::placeholder { color: #a8ad9c; font-weight: 500; }
#menu .sheet input:focus, #menu .sheet label select:focus { outline: none; border-color: var(--navy-3); box-shadow: 0 0 0 4px rgba(246,189,28,.35); }
#menu .tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .5rem; }
#menu .sheet .tabs button { width: auto; margin: 0; padding: .4rem .85rem; border-radius: 99px; font-size: .82rem; background: var(--sand); color: var(--navy); }
#menu .sheet .tabs button.on { background: var(--navy); color: var(--gold-2); }

/* lists, pills, leaderboard */
#menu .sheet .tlist { display: flex; flex-direction: column; gap: .55rem; margin-top: .3rem; }
#menu .sheet button.titem {
  position: relative; margin: 0; padding: .7rem 2.4rem .7rem 1rem; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; align-items: center;
  background: #fff; color: var(--navy); font-size: 1.1rem; box-shadow: inset 0 0 0 1.5px var(--line), inset .3rem 0 0 var(--turf); transition: transform .12s, box-shadow .12s;
}
#menu .sheet button.titem::after { content: ''; position: absolute; right: .95rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border: solid var(--sand-2); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); transition: border-color .12s, right .12s; }
#menu .sheet button.titem:hover { background: #fff; transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--gold), inset .3rem 0 0 var(--turf), 0 .4rem 1rem rgba(15,26,51,.1); }
#menu .sheet button.titem:hover::after { border-color: var(--navy); right: .8rem; }
#menu .sheet button.titem b { font-weight: 700; }
#menu .sheet button.titem small { grid-column: 1 / -1; color: var(--muted); font-weight: 500; font-size: .85rem; }
#menu .sheet .credit { margin-top: .9rem; font-size: .7rem; line-height: 1.4; color: var(--muted); }
#menu .pill { align-self: center; padding: .15rem .6rem; border-radius: 99px; font: 700 .68rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
#menu .pill.live { background: #d9f2de; color: #1d6b2f; } #menu .pill.off { background: #ece9dc; color: #7b7d70; }
#menu table.lbt { font-size: .95rem; }
#menu table.lbt td, #menu table.lbt th { padding: .4rem .35rem; }
#menu table.lbt td:first-child { font: 700 1.1rem var(--font-num); color: var(--muted); }
#menu table.lbt tr:nth-child(2) td:first-child { color: #b07d00; } #menu table.lbt tr:nth-child(3) td:first-child { color: #7d8794; } #menu table.lbt tr:nth-child(4) td:first-child { color: #a8683a; }
#menu table.lbt tr.me td { background: #fff1bd; font-weight: 700; }
#menu table.lbt tr.me td:first-child { border-radius: .6rem 0 0 .6rem; } #menu table.lbt tr.me td:last-child { border-radius: 0 .6rem .6rem 0; }
#menu table.lbt td:nth-child(4) { font: 700 1.15rem var(--font-num); }
#menu .pl { max-height: 11rem; overflow: auto; margin-top: .3rem; padding: .3rem .8rem; border: 2px solid var(--line); border-radius: .8rem; background: #fff; }
#menu .chk { display: flex !important; align-items: center; gap: .7rem; margin: 0 !important; padding: .45rem 0; font: 600 1rem var(--font-ui) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--navy) !important; }
#menu .chk input { width: 1.35rem; height: 1.35rem; margin: 0; padding: 0; flex: none; accent-color: var(--navy); }
#menu .addp { margin-top: 1rem; padding: .8rem; border-radius: 1rem; background: #f1ecda; }
#menu .addp .two { display: flex; gap: .5rem; margin-top: .3rem; }
#menu .addp input { margin-top: 0; padding: .6rem .7rem; font-size: 1rem; }
#menu .sheet .addp button, #menu .sheet button.ghost2 { margin-top: .6rem; padding: .65rem; background: var(--navy); color: #fff; font-size: .95rem; }
#menu .codes { margin-top: .7rem; font-size: .9rem; line-height: 1.8; }
#menu .codes code { padding: .08rem .45rem; border-radius: .4rem; background: #fff1bd; font-weight: 800; letter-spacing: .06em; user-select: text; -webkit-user-select: text; }

/* golfer customiser */
#menu .outfit { display: flex; gap: 1rem; margin-top: .6rem; align-items: flex-start; }
#menu .figbox { flex: 0 0 6.3rem; position: sticky; top: 0; align-self: flex-start; padding: .6rem .3rem; border-radius: 1rem; background: radial-gradient(ellipse at 50% 85%, #dff0cf, #cfe6bb); box-shadow: inset 0 0 0 1px rgba(47,143,78,.2); }
#menu .fig { width: 100%; display: block; }
#menu .ctrl { flex: 1; min-width: 0; }
#menu .ctrl label { margin-top: .75rem; }
#menu .ctrl .tabs { margin: 0 0 .2rem; } #menu .ctrl .tabs button { flex: 1; }
#menu .sws { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
#menu .sheet button.sw { width: 1.75rem; height: 1.75rem; padding: 0; margin: 0; border-radius: 50%; border: 2px solid rgba(15,26,51,.16); transition: transform .1s; }
#menu .sheet button.sw:hover { transform: scale(1.12); }
#menu .sheet button.sw.on { border-color: var(--navy); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
#menu .sheet button.sw.none { border-style: dashed; }
#menu .seg { display: flex; gap: .3rem; margin-top: .35rem; flex-wrap: wrap; }
#menu .sheet .seg button { flex: 1; min-width: 0; margin: 0; padding: .5rem .3rem; font-size: .82rem; background: var(--sand); color: var(--navy); border-radius: .65rem; }
#menu .sheet .seg button.on { background: var(--navy); color: var(--gold-2); }
#menu .row #oRandom { flex: 1; }

@media (max-width: 480px) {
  #menu .sheet { padding: 1.4rem 1.1rem 1.2rem; }
  #menu .sheet h2 { font-size: 2.1rem; }
  #menu table.lbt { font-size: .86rem; } #menu .stk { display: none; }
  #menu table.lbt td, #menu table.lbt th { padding: .35rem .25rem; }
}

/* ------------------------------------------------------------------ layout by screen size */
@media (max-width: 1000px), (pointer: coarse) { #help { display: none; } }
@media (max-width: 1000px) { #meterWrap { width: min(34rem, calc(100vw - 2 * (var(--side) + 1.8rem))); } }
@media (max-width: 900px) {
  :root { --side: 13.4rem; }
  #brand { display: none; }
  #hudLeft { position: fixed; top: .65rem; left: .65rem; display: flex; flex-direction: column; gap: .5rem; z-index: 2; }
  #hudLeft .panel { position: relative; inset: auto; }
  #hudTL { min-width: 0; width: var(--side); padding: .55rem .75rem .6rem; }
  #hudBL { width: var(--side); }
  #hudTR { top: .65rem; right: .65rem; gap: .55rem; padding: .5rem .8rem .5rem .55rem; }
  #hudTR .dial { width: 2.4rem; height: 2.4rem; }
  #windSpd { font-size: 1.5rem; }
  #meterWrap { width: min(34rem, calc(100vw - 2rem)); bottom: 1rem; }
  #toast { top: 30%; font-size: 1.2rem; }
  .btns button { height: 2.55rem; }
  #intro .tpc { height: 3.6rem; } #intro .sub { font-size: 1.6rem; } #intro .lt { gap: .8rem; padding-right: 1.1rem; }
  #intro .skip { left: clamp(1rem, 4vw, 3.5rem); right: auto; bottom: -2.6rem; }
}
@media (max-width: 900px) and (max-height: 500px) {                                  /* phones on their side: everything tighter, panels in the corners */
  :root { --side: 11.6rem; }
  #hudBL .club { font-size: 1.2rem; } #hudBL .row { margin-top: .25rem; } .btns { margin-top: .4rem; } .btns button { height: 2.2rem; }
  #hudTL .stats { margin-top: .25rem; } #strokeLine span, #pinDist { font-size: 1.7rem; }
  #meterWrap { width: min(28rem, calc(100vw - 2 * (var(--side) + 1.6rem))); bottom: .6rem; }
  #meterLabel { margin-bottom: .25rem; } #meterInfo { display: none; } #swingRow { margin-top: .35rem; }
  #bSwing { padding: .6rem 1.4rem; font-size: 1.05rem; min-width: 9.5rem; } #bPractice { padding: .6rem .9rem; font-size: .85rem; }
  #track { height: 1.8rem; }
  #intro { bottom: calc(7vh + .6rem); } #intro .tpc { height: 2.8rem; } #intro .sub { font-size: 1.25rem; }
  #menu .event.big img { height: 3.4rem; } #menu .event.big b { font-size: 1.8rem; } #menu .event.big i { font-size: .66rem; } #menu .menuBtns { margin-top: .8rem; gap: .45rem; } #menu .home .sub { margin-top: .6rem; }
}
@media (max-width: 600px) and (orientation: portrait) { #toast { top: 42%; } }      /* below the stacked panels, above the ball */
@media (max-width: 380px) {                                                        /* small phones: slimmer panels so the scorecard and wind never meet */
  :root { --side: 11.8rem; }
  #hudTR { gap: .4rem; padding: .4rem .6rem .4rem .45rem; }
  #hudTR .dial { width: 1.9rem; height: 1.9rem; }
  #windSpd { font-size: 1.25rem; } #hudTR .small { font-size: .58rem; letter-spacing: .06em; }
  #hudBL .club { font-size: 1.3rem; } .btns { gap: .2rem; }
  #strokeLine span, #pinDist { font-size: 1.8rem; } #hudTL .stats { gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ------------------------------------------------------------------ usernames + tournament codes */
#menu .linkrow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
#menu .sheet .err.good { color: #1f8a4c; }
#menu .joinrow { display: flex; gap: .5rem; align-items: stretch; }
#menu .joinrow input { flex: 1; min-width: 0; margin-top: 0; }
#menu .sheet .joinrow button { width: auto; margin-top: 0; padding: .6rem 1.3rem; flex: none; }
#menu .hint { margin-top: .4rem; font-size: .82rem; line-height: 1.45; font-weight: 500; color: var(--muted); }
#menu .sheet button.link.inline { display: inline; padding: 0; margin: 0; font-size: inherit; }
#menu .codebox { margin: .4rem 0 .2rem; padding: .7rem 1rem .75rem; border-radius: 1rem; text-align: center; background: #fff; box-shadow: inset 0 0 0 1.5px var(--gold); }
#menu .bigcode { margin-top: .15rem; font: 800 2.4rem/1.05 var(--font-num); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); word-break: break-word; user-select: text; -webkit-user-select: text; }