/* Layout: broadcast-style 3D stage with the golf bag beside it (stacked on phones), info cards below */
:root{
  --bg:#e8eee7; --surface:#fbfdf9; --surface-2:#eff4ed; --ink:#13241a; --muted:#56695c; --line:#d0dbd0;
  --accent:#1d6a43; --accent-ink:#ffffff; --gold:#a8771f;
  --g1:#2f9e58; --g2:#d2a21c; --g3:#df711e; --g4:#cc3a2c;
  --hud:rgba(8,21,13,.72); --hud-ink:#f3f8f1; --hud-muted:#b8cbbd;
  --f-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --f-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-coin:'Cinzel',Georgia,'Times New Roman',serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0b1510;--surface:#122019;--surface-2:#182b21;--ink:#e3ece5;--muted:#93a698;--line:#25392d;--accent:#4cbb7c;--accent-ink:#05140b;--gold:#e1b453;color-scheme:dark;}}
:root[data-theme="dark"]{--bg:#0b1510;--surface:#122019;--surface-2:#182b21;--ink:#e3ece5;--muted:#93a698;--line:#25392d;--accent:#4cbb7c;--accent-ink:#05140b;--gold:#e1b453;color-scheme:dark;}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-tap-highlight-color:transparent;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px 28px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted);font-size:13.5px;margin:0}
.app{max-width:1180px;margin:0 auto;display:grid;gap:12px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand h1{font-family:var(--f-display);font-weight:900;font-size:34px;letter-spacing:.5px;line-height:1;margin:0;text-transform:uppercase}
.brand h1 span{color:var(--accent)}
.brand p{margin:0;color:var(--muted);font-size:13px}
.top-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-weight:600;font-size:13px;white-space:nowrap}
.pill.ghost{background:transparent}
.pill .dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c0,#d9a744 55%,#8f6218)}
.daybar{display:flex;flex-direction:column;gap:3px}
.eyebrow{font-family:var(--f-display);font-weight:800;letter-spacing:1.6px;font-size:14px;text-transform:uppercase;color:var(--accent)}
.daybar h2{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,5vw,44px);line-height:1;margin:0;text-transform:uppercase;text-wrap:balance}
.daybar .sub{color:var(--muted);font-size:14px;max-width:70ch}

.game{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;align-items:stretch}
@media (max-width:880px){.game{grid-template-columns:minmax(0,1fr)}}
.stage{position:relative;height:clamp(400px,66vh,680px);border-radius:18px;overflow:hidden;background:#cfdfe8;user-select:none;-webkit-user-select:none;touch-action:none}
@media (max-width:880px){.stage{height:clamp(360px,58vh,560px)}}
#gl{display:block;width:100%;height:100%;cursor:grab}
#gl:active{cursor:grabbing}
.nogl{padding:40px 20px;text-align:center;color:#13241a}
.hud{position:absolute;background:var(--hud);color:var(--hud-ink);border-radius:10px;padding:7px 11px;pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hud .big{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.hud .small{font-size:11px;color:var(--hud-muted);letter-spacing:.6px;text-transform:uppercase;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud.tl{top:10px;left:10px;max-width:calc(100% - 120px)}
.hud.wind{top:66px;left:10px;display:flex;gap:8px;align-items:center}
.hud.wind svg{width:28px;height:28px;transition:transform .25s}
.hud.bl{bottom:10px;left:10px;right:10px;display:flex;gap:16px;justify-content:space-between}
.hud.bl .stat{min-width:0}
.mini{position:absolute;top:10px;right:10px;width:86px;height:150px;border-radius:10px;background:rgba(8,21,13,.6);border:2px solid rgba(255,255,255,.75);cursor:crosshair;touch-action:manipulation}
.toast{position:absolute;left:50%;top:26%;transform:translate(-50%,-6px) scale(.96);font-family:var(--f-display);font-weight:900;font-size:clamp(30px,6vw,52px);text-transform:uppercase;letter-spacing:1px;color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s;white-space:nowrap;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.toast.pure{color:#ffd447}.toast.bad{color:#ffb4a8}.toast.info{font-size:clamp(20px,3.6vw,30px)}
.meter{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);width:min(440px,88%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.readout{font-family:var(--f-display);font-weight:800;font-size:20px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);text-transform:uppercase;letter-spacing:.8px}
.track{position:relative;width:100%;height:20px;border-radius:999px;background:rgba(8,21,13,.62);border:2px solid rgba(255,255,255,.85);overflow:visible}
.fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#5fd18a,#f2d04a 70%,#f08a3a);width:0}
.notch{position:absolute;top:-2px;bottom:-2px;background:rgba(95,209,138,.55);border:2px solid #9ff0bd;border-radius:6px}
.tick{position:absolute;top:-8px;bottom:-8px;width:4px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.needle{position:absolute;top:-10px;bottom:-10px;width:4px;margin-left:-2px;background:#ff4b3a;border-radius:2px;box-shadow:0 0 6px rgba(255,75,58,.9)}

.bag{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.bag-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bag h3,.panel h3{font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:1.2px;text-transform:uppercase;margin:0}
.nudge{display:flex;gap:6px}
.nudge .peek{width:auto;padding:0 10px;font-weight:700;font-size:12.5px}
.nudge .peek[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.nudge button{width:40px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface-2);font-size:13px}
.clubs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
@media (max-width:880px){.clubs{display:flex;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}.clubs .club{flex:0 0 58px}}
.club{border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:7px 3px;display:flex;flex-direction:column;align-items:center;gap:1px}
.club b{font-family:var(--f-display);font-size:19px;font-weight:800;line-height:1}
.club span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.club[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.club[aria-pressed="true"] span{color:var(--accent-ink);opacity:.85}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px}
.seg:empty{display:none}
.seg button{border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:7px 8px;text-align:left;display:flex;flex-direction:column;gap:1px}
.seg button b{font-weight:700;font-size:14px}.seg button span{font-size:11.5px;color:var(--muted)}
.seg button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.swing{border:0;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:900;font-size:26px;letter-spacing:1.2px;text-transform:uppercase;padding:16px 10px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.swing:active{transform:scale(.985)}
.swing:disabled{opacity:.5;cursor:default}
.hint{margin:0;font-size:13px;color:var(--muted)}
.hint b{color:var(--ink)}
.warn{color:var(--g3);font-weight:700}
.trail{display:flex;gap:5px;align-items:center;flex-wrap:wrap;min-height:22px}
.trail .lbl{font-size:11.5px;color:var(--muted);margin-right:4px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.sq{width:20px;height:20px;border-radius:5px;display:inline-block}
.sq.g1,.legend i.g1,.tag.g1 i{background:var(--g1)}.sq.g2,.legend i.g2,.tag.g2 i{background:var(--g2)}.sq.g3,.legend i.g3,.tag.g3 i{background:var(--g3)}.sq.g4,.legend i.g4,.tag.g4 i{background:var(--g4)}
.sq.empty{border:1.5px dashed var(--line)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0;display:grid;gap:10px}
.panel h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.panel h3 small{font-family:var(--f-body);font-weight:500;letter-spacing:0;text-transform:none;font-size:12.5px;color:var(--muted)}
.panel h4{margin:6px 0 0;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.call{display:grid;gap:6px}.call p{margin:0;font-size:14px}.call .lead{font-weight:600}
.tag{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-family:var(--f-display);font-size:19px;letter-spacing:.6px;text-transform:uppercase}
.tag i{width:14px;height:14px;border-radius:4px;display:inline-block}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;gap:5px;align-items:center}.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.coin-goal{display:flex;gap:12px;align-items:center}.coin-goal svg{width:64px;height:64px;flex:none}.coin-goal p{margin:0;font-size:14px}
.match p{margin:0;font-size:14px}.match .fmt{font-weight:700}
.match{display:grid;gap:8px;justify-items:start}
.link{color:var(--accent);font-weight:700;font-size:14px}
.race{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.race td{padding:5px 2px;border-bottom:1px solid var(--line)}
.race td:first-child{width:26px;color:var(--muted)}.race td:last-child{text-align:right;font-weight:700}
.race tr.you td{color:var(--accent);font-weight:800}
.foot{color:var(--muted);font-size:12px;text-align:center;margin:4px 0 0}
.btn{border:1.5px solid var(--line);background:var(--surface-2);border-radius:11px;padding:10px 14px;font-weight:700;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.btn.small{padding:7px 11px;font-size:13.5px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.wide{width:100%;margin-top:14px}

.sheet{position:fixed;inset:0;background:rgba(5,12,8,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50;
  padding:max(16px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
@media (min-width:700px){.sheet{align-items:center}}
.sheet-card{background:var(--surface);color:var(--ink);border-radius:20px;width:100%;max-width:560px;max-height:100%;overflow:auto;padding:18px;border:1px solid var(--line)}
.sheet-card.wide{max-width:820px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.sheet-head h2{font-family:var(--f-display);font-weight:900;font-size:28px;letter-spacing:.6px;text-transform:uppercase;margin:0;line-height:1}
.x{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;width:36px;height:36px;font-size:18px;line-height:1;flex:none}
.result-hero{display:flex;gap:16px;align-items:center;padding:6px 0 14px;border-bottom:1px solid var(--line)}
.coinbox{width:108px;height:108px;flex:none;perspective:600px}.coinbox svg{width:100%;height:100%}
.flip{animation:flip 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes flip{0%{transform:rotateY(0) scale(.6);opacity:0}30%{opacity:1}100%{transform:rotateY(1080deg) scale(1)}}
.score{font-family:var(--f-display);font-weight:900;font-size:44px;line-height:.95;text-transform:uppercase}
.score small{display:block;font-size:16px;font-weight:700;color:var(--muted);letter-spacing:.6px}
.result-hero p{margin:6px 0 0;font-size:14.5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}.kv .sqs{display:flex;gap:5px;flex-wrap:wrap}
.fanstats{padding:12px 0;border-bottom:1px solid var(--line)}.fanstats:empty{display:none}
.pct{margin:0 0 8px;font-size:15px}.pct b{font-family:var(--f-display);font-size:26px;color:var(--accent)}
.hist{display:flex;gap:6px;align-items:flex-end;height:90px}
.hist .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.hist .bar span{width:100%;background:var(--line);border-radius:5px 5px 2px 2px;display:block}
.hist .bar.me span{background:var(--accent)}
.hist em{font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.nameform{display:grid;gap:6px}.nameform label{font-size:13.5px;font-weight:600}
.nameform div{display:flex;gap:6px;flex-wrap:wrap}
.nameform input{flex:1;min-width:140px;border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;background:var(--surface-2);color:var(--ink)}
.reveal{padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.reveal b{display:block;font-family:var(--f-display);font-size:16px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.copied{font-size:13px;color:var(--accent);font-weight:700;align-self:center}
#shareText{width:100%;margin-top:10px;font:inherit;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
.coin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;margin-top:10px}
.cslot{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:var(--muted)}
.cslot svg{width:100%;max-width:74px;aspect-ratio:1}.cslot b{color:var(--ink);font-size:12px;text-align:center}
.cslot.soon{cursor:default}
.soon-ring{width:100%;max-width:74px;aspect-ratio:1;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;font-family:var(--f-coin);font-size:16px;color:var(--muted)}
.coin.missed{filter:grayscale(1) brightness(.85);opacity:.55}
.steps{display:grid;gap:12px}.step b{font-family:var(--f-display);font-size:18px;letter-spacing:.8px;text-transform:uppercase;color:var(--accent)}.step p{margin:2px 0 0;font-size:14.5px}
.demo{margin-top:12px;padding:10px 6px}
@media (prefers-reduced-motion: reduce){.flip{animation:none}.toast,.hud.wind svg{transition:none}}

.practice-tag{position:absolute;top:118px;left:10px;background:#ffd447;color:#1d2a10;font-family:var(--f-display);font-weight:800;font-size:15px;letter-spacing:.8px;text-transform:uppercase;padding:6px 10px;border-radius:8px;pointer-events:none}

.tourcard{display:grid;gap:8px}.tourcard p{margin:0;font-size:14px}.tourcard .row{display:flex;gap:8px;flex-wrap:wrap}
.result-hero.tour{display:block}
.scorecard{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:5px;padding:12px 0;border-bottom:1px solid var(--line)}
.sc{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:8px;padding:4px 2px;font-variant-numeric:tabular-nums}
.sc b{font-size:11px;color:var(--muted);letter-spacing:.5px}.sc span{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.1}.sc em{font-style:normal;font-size:10.5px;color:var(--muted)}
.sc.birdie span,.sc.eagle span{color:var(--g1)}.sc.eagle{border-color:var(--g1);box-shadow:inset 0 0 0 1.5px var(--g1)}.sc.bogey span{color:var(--g3)}.sc.double span{color:var(--g4)}.sc.todo{opacity:.55}
/* Phones: compact header so the course and swing button fit on one screen */
@media (max-width:880px){
  .brand h1{font-size:24px}.brand p{display:none}
  .top-actions{gap:5px}.top-actions .pill{padding:6px 10px;font-size:12px}
  .daybar h2{font-size:28px}
  .daybar .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .stage{height:clamp(320px,56vh,540px)}
}

/* Keep the layout steady while text and fonts load (avoids the page jumping) */
.daybar .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.daybar h2{min-height:1em}
.eyebrow{min-height:1.2em}
.brand h1{min-height:1em}

.keep{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}
.keep b{font-family:var(--f-display);font-size:18px;letter-spacing:.8px;text-transform:uppercase;color:var(--accent)}
.keep p{margin:0;font-size:14px}
.keep-coins{display:flex;gap:6px;flex-wrap:wrap}
.kc{border:0;background:none;padding:0;width:46px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--muted)}
.kc svg{width:42px;height:42px}
.kc.more{width:42px;height:42px;border-radius:50%;border:2px dashed var(--line);justify-content:center;font-size:13px;color:var(--ink)}
.btn.wide{width:100%}

.spinshape{display:grid;gap:6px}
.mini-seg{display:flex;align-items:center;gap:8px}
.mini-seg>span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);width:44px;flex:none}
.mini-seg>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;flex:1}
.mini-seg button{border:1.5px solid var(--line);background:var(--surface-2);border-radius:9px;padding:6px 4px;font-size:13px;font-weight:600}
.mini-seg button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.replay-tag{top:auto;bottom:130px;left:50%;transform:translateX(-50%);background:#e23b2c;color:#fff}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:fall 2s ease-in forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),110vh) rotate(var(--r));opacity:.9}}
@media (prefers-reduced-motion: reduce){.confetti{display:none}}

/* Keep the header one steady row on phones so nothing below it jumps */
@media (max-width:880px){.top-actions{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;padding-bottom:2px}.top-actions::-webkit-scrollbar{display:none}.top-actions>*{flex:none}}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,21,13,.45);color:#fff;font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:1px;text-transform:uppercase;z-index:6}

.myrank{margin:6px 0;font-size:13.5px;color:var(--muted)}.myrank b{color:var(--accent)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 10px}
.tabs button{border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:8px 4px;font-weight:700;font-size:13.5px}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.race.board td{padding:7px 2px}
.mebar{position:sticky;bottom:-18px;margin:10px -18px -18px;padding:12px 18px;background:var(--surface-2);border-top:1px solid var(--line);font-size:14.5px}
.mebar b{color:var(--accent);font-size:17px}
/* Never let anything make the page wider than the phone */
.app{grid-template-columns:minmax(0,1fr)}
.app>*{min-width:0}
.top{min-width:0}
html,body{overflow-x:hidden}
@media (max-width:880px){.top-actions{min-width:0;max-width:100%}}
@media (max-width:880px){#coinsBtn{order:-3}#streakPill{order:-2}#tourBtn{order:-1}}