/* 1-Up Winter Open PinGolf: shared styles for /pingolf and /pingolf/hole (Whatcom Pinball palette). */
:root{--bg:#0b0714;--panel:#1a1030;--panel2:#231640;--ink:#f4eefe;--muted:#a99cc7;--line:#2e2050;
  --neon:#ff2d78;--neon2:#00e0ff;--gold:#ffd24a;--green:#38e8a0;
  --fdisplay:"Space Grotesk","Segoe UI",system-ui,sans-serif;--fbody:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(700px 380px at 90% -10%,rgba(255,45,120,.14),transparent 60%),radial-gradient(600px 340px at -10% 30%,rgba(0,224,255,.07),transparent 60%),var(--bg);
  color:var(--ink);font:16px/1.6 var(--fbody);
  padding:calc(env(safe-area-inset-top,0px) + 22px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 48px) max(16px,env(safe-area-inset-left,0px))}
main{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
a{color:var(--neon2)}
.kicker{font:700 12px var(--fbody);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.kicker a{color:inherit;text-decoration:none}
h1{font:700 clamp(34px,8vw,54px)/1.02 var(--fdisplay);margin:4px 0 0;text-wrap:balance}
h1 .pink{color:var(--neon);text-shadow:0 0 22px rgba(255,45,120,.45)}
h2{font:700 21px/1.25 var(--fdisplay);margin:0 0 8px;text-wrap:balance}
p{margin:0}
.lede{color:#e6def7;font-size:17px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 13px var(--fbody);padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);white-space:nowrap}
.chip b{color:var(--gold)}
ul.rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:#e6def7}
.strokes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.stroke{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.stroke .n{font:700 26px/1 var(--fdisplay);color:var(--neon2)}
.stroke.ace .n{color:var(--gold)} .stroke.miss .n{color:var(--neon)}
.stroke .l{font-size:13px;color:var(--muted);margin-top:4px}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{font:700 11px var(--fbody);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line)}
td.num,th.num{text-align:right;white-space:nowrap}
td.h{font:700 18px var(--fdisplay);color:var(--neon);width:2.5em}
td .mk{display:block;font-size:12.5px;color:var(--muted)}
.tee{display:block;text-align:center;text-decoration:none;font:700 clamp(26px,6vw,34px)/1 var(--fdisplay);letter-spacing:.5px;
  color:#fff;background:linear-gradient(180deg,#ff4d8e,var(--neon));border-radius:16px;padding:22px 18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 10px 34px rgba(255,45,120,.35)}
.tee small{display:block;font:600 14px var(--fbody);letter-spacing:0;margin-top:6px;color:rgba(255,255,255,.85)}
.btn{font:600 15px var(--fbody);border-radius:12px;padding:12px 16px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);text-decoration:none;text-align:center;cursor:pointer}
.btn.primary{background:var(--neon);border-color:var(--neon);color:#fff}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--neon2);outline-offset:2px}
footer{color:var(--muted);font-size:14px;border-top:1px solid var(--line);padding-top:14px}

/* hole page */
.hhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.holeno{font:700 13px var(--fbody);letter-spacing:2px;text-transform:uppercase;color:var(--neon2)}
.holeno b{font:700 44px/1 var(--fdisplay);letter-spacing:0;color:var(--neon);display:block;text-shadow:0 0 20px rgba(255,45,120,.45)}
.gname{font:700 clamp(24px,6vw,32px)/1.1 var(--fdisplay);margin:0;text-wrap:balance}
.maker{color:var(--muted);font-size:14px}
.glass{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#2a1450,#120a24);border:1px solid var(--line);aspect-ratio:4/3;max-width:100%;display:flex;align-items:center;justify-content:center}
.glass img{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.glass .ph{font:700 clamp(22px,6vw,34px)/1.1 var(--fdisplay);text-align:center;padding:20px;color:rgba(244,238,254,.85);text-wrap:balance}
.glass .ph small{display:block;font:600 13px var(--fbody);color:var(--muted);margin-top:8px}
.target{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.target .lbl{font:700 12px var(--fbody);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.target .big{font:700 clamp(34px,9vw,48px)/1 var(--fdisplay);color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,210,74,.3)}
.target p{color:#e6def7;flex-basis:100%}
.players{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pbtn{font:700 18px var(--fdisplay);padding:12px 0;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.pbtn[aria-pressed="true"]{background:var(--neon2);border-color:var(--neon2);color:#03202a}
.pnote{color:var(--muted);font-size:14px}
ul.tips{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:#e6def7}
.more{font-size:14px}
.nav{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (prefers-reduced-motion:no-preference){.tee,.btn,.pbtn{transition:filter .15s,transform .15s}.tee:hover{filter:brightness(1.08);transform:translateY(-1px)}}

/* thumbnails in the hole strip + uniform backglass framing */
.glass{aspect-ratio:64/41}
.glass img{object-fit:cover;object-position:center top;background:none}
.dots{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.tdot{position:relative;aspect-ratio:64/41;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;text-decoration:none;min-width:0}
.tdot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.75}
.tdot .tnum{position:relative;font:700 13px var(--fbody);color:var(--ink)}
.tdot.art .tnum{background:rgba(11,7,20,.72);border-radius:6px;padding:0 5px;line-height:18px}
.tdot[aria-current="page"]{border:2px solid var(--neon);box-shadow:0 0 12px rgba(255,45,120,.5)}
.tdot[aria-current="page"] img{opacity:1}
.tdot.done{border-color:var(--green)}
.tdot.skip img{filter:grayscale(1);opacity:.35}
.tdot .tbadge{position:absolute;right:2px;top:2px;font:700 10px/14px var(--fbody);background:var(--green);color:#03201a;border-radius:4px;padding:0 4px}
.tdot.skip .tbadge{background:var(--muted)}
@media (max-width:380px){.dots{grid-template-columns:repeat(5,1fr)}}

/* submit this hole */
.namerow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.lbl2{font:700 12px var(--fbody);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);flex-basis:100%}
.namerow input{flex:1 1 180px;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:11px 12px;font:16px var(--fbody)}
.snapbtn{width:100%;font-size:17px;padding:14px}
/* hidden always wins over a display rule (the photo box was showing before any photo) */
[hidden]{display:none!important}
.result{display:flex;flex-direction:column;gap:8px}
.result img{width:100%;max-height:260px;object-fit:contain;border-radius:10px;background:#000}
.read{margin:0;color:#e6def7} .read.warn{color:var(--gold)}
.strokes-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sbtn{font:700 22px var(--fdisplay);padding:10px 0;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.sbtn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#03201a}
.sbtn:disabled{opacity:.5}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--neon2);font:14px var(--fbody);text-align:left;cursor:pointer;text-decoration:underline}
.status{margin:0;font-size:14px;color:var(--green);min-height:1.2em} .status.err{color:var(--neon)}
.pnote.err{color:var(--neon)}
td.thumbcell{width:64px;padding-right:0}
td.thumbcell .tdot{width:64px}
.savebtn{background:var(--panel2);border-color:var(--neon2);color:var(--neon2);padding:10px 14px}
.savebtn.saved{border-color:var(--green);color:var(--green)}
.savebox{display:flex;flex-direction:column;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.savebox[hidden]{display:none}
.savenudge{margin:0;font:600 14px var(--fbody);color:var(--gold);background:rgba(255,210,74,.10);border:1px solid rgba(255,210,74,.35);border-radius:10px;padding:8px 12px}
.savenudge[hidden]{display:none}
.savebox .btn{text-align:center;text-decoration:none}
.dropbtn{background:none;border-color:var(--neon);color:var(--neon);padding:10px 14px}
.dropbtn.armed{background:var(--neon);color:#fff}
.bonusbtn{width:100%;border-color:var(--gold);color:var(--gold);background:none}
.bonusbtn[aria-pressed="true"]{background:var(--gold);color:#2a1d00}
.hstats{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
.hstat{display:flex;align-items:baseline;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--muted)}
.hstat b{font:700 16px var(--fdisplay);color:var(--neon2);font-variant-numeric:tabular-nums}
td.muted{color:var(--muted)}
td.mine{color:var(--green);font-weight:700} td.mine.ace{color:var(--gold)}
.myrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.myrow:last-child{border-bottom:0}
.myrow .who{font-weight:600} .myrow .sub{font-size:13px;color:var(--muted)}
.myrow .tot{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.myrow .tot b{font:700 24px var(--fdisplay);font-variant-numeric:tabular-nums} .myrow .tot span{color:var(--neon2);font-weight:600}
.coursetbl th,.coursetbl td{padding:8px 5px}
.coursetbl td.h{width:auto;font-size:16px}
.coursetbl td.thumbcell{width:50px} .coursetbl td.thumbcell .tdot{width:50px}
.coursetbl td .mk{font-size:12px}
@media (max-width:480px){.coursetbl .thumbcell{display:none}}
@media (max-width:480px){.coursetbl{font-size:14px}.coursetbl th{letter-spacing:.6px;font-size:10px}.coursetbl th,.coursetbl td{padding:8px 4px}}