/* Tabs, scorecard and brotherhood screens (from the approved previews) */
:root{--tabs-h:64px}
.bar{bottom:calc(var(--tabs-h) + 20px + var(--safe-b))}
.gps{bottom:calc(var(--tabs-h) + 100px + var(--safe-b))}
body:not(.tab-play) .play-only, body:not(.tab-play) #map{display:none!important}
body:not(.tab-play){overflow:auto;background:radial-gradient(120% 70% at 50% 0%, #0d3a28 0%, #0b130f 60%)}

.preview-tag{position:fixed;right:12px;bottom:calc(var(--tabs-h) + 106px + var(--safe-b));font:600 10px/1 var(--f-body);letter-spacing:.06em;color:rgba(255,255,255,.75);background:rgba(0,0,0,.45);padding:4px 7px;border-radius:6px;z-index:6}

.tabs{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tabs-h) + var(--safe-b));padding-bottom:var(--safe-b);display:grid;grid-template-columns:repeat(5,1fr);border-radius:0;border-width:1px 0 0;z-index:7;background:rgba(6,14,10,.86)}
.tabs button{border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:700 12px/1 var(--f-num);letter-spacing:.04em;white-space:nowrap;color:rgba(255,255,255,.55);text-decoration:none;position:relative}
.tabs svg{width:22px;height:22px}
.tabs button.active{color:#fff}
.tabs button.active::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--cardinal)}
.tabs button.active svg{color:#3fbf86}

.screen{padding:calc(18px + var(--safe-t)) 16px calc(var(--tabs-h) + 28px)}
.sc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.sc-head h1{margin:4px 0 2px;font:800 34px/1 var(--f-num);letter-spacing:.01em;text-transform:uppercase}
.sc-head span{color:var(--muted);font-size:13px}
.sample{flex:none;background:var(--cardinal);color:#fff!important;font:700 12px/1 var(--f-num)!important;letter-spacing:.1em;padding:6px 9px;border-radius:6px}
.sc-wrap{border-radius:16px;overflow:hidden}
.sc{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sc th,.sc td{padding:7px 4px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
.sc thead th{background:var(--masters);font:700 13px/1.1 var(--f-num);letter-spacing:.06em}
.sc thead th.p{font-size:14px}
.sc td{font:600 19px/1 var(--f-num)}
.sc td.h{color:var(--muted);font-size:16px}
.sc td.par,.sc td.yd{color:rgba(255,255,255,.8);font-size:16px}
.sc td.s.birdie span{display:inline-block;width:26px;height:26px;line-height:26px;border:2px solid #3fbf86;border-radius:50%}
.sc td.s.bogey2 span{display:inline-block;width:26px;height:26px;line-height:24px;border:2px solid var(--cardinal);border-radius:4px}
.sc tr.tot td{font-size:22px;font-weight:800;background:rgba(255,255,255,.05);border-bottom:0}
.sc tr.vs td{font-size:20px;color:#ffd6d7;border-bottom:0}
.sc tr.vs td.e{color:#9fe0bf}
.sc-note{color:var(--muted);font-size:12px;text-align:center;margin:12px 0 0}

.bh{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:calc(48px + var(--safe-t))}
.bh-mark small{margin-top:8px;letter-spacing:.32em;color:#fff;font:700 14px/1 var(--f-num)}
.bh h1{margin:6px 0 0;font:800 46px/.95 var(--f-num);text-transform:uppercase;letter-spacing:.01em}
.bh-line{margin:0;max-width:30ch;color:rgba(255,255,255,.82);font-size:17px;line-height:1.4}
.bh-btn{margin-top:8px;width:100%;max-width:320px;height:56px;border:0;border-radius:14px;background:var(--masters);color:#fff;font:700 21px/1 var(--f-num);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 18px rgba(0,103,71,.45),inset 0 -3px 0 rgba(0,0,0,.2)}
.bh-card{margin-top:14px;width:100%;max-width:340px;border-radius:16px;padding:16px;text-align:left;border-left:4px solid var(--cardinal)}
.bh-card b{display:block;margin:8px 0 4px;font-size:30px;line-height:1}
.bh-card span{color:var(--muted);font-size:14px}

[hidden]{display:none!important}

/* real app additions */
.preview-tag{bottom:calc(var(--tabs-h) + 106px + var(--safe-b))}
.bh-btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.sc-clear{flex:none;border:1px solid rgba(255,255,255,.25);background:rgba(164,22,26,.9);color:#fff;font:700 13px/1 var(--f-num);letter-spacing:.1em;text-transform:uppercase;padding:9px 11px;border-radius:8px;cursor:pointer}
.sc td.s{padding:2px}
.sc td.s button{width:100%;height:38px;border:0;background:transparent;color:#fff;font:600 19px/1 var(--f-num);cursor:pointer;border-radius:8px}
.sc td.s button:active{background:rgba(255,255,255,.12)}
.sc td.s button span{display:inline-block;min-width:26px;height:26px;line-height:26px}
.sc td.s.birdie button span{border:2px solid #3fbf86;border-radius:50%;line-height:22px}
.sc td.s.bogey2 button span{border:2px solid var(--cardinal);border-radius:4px;line-height:22px}
.sc tr.vs td.u{font-size:14px}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + var(--safe-b));background:rgba(8,18,13,.94)}
.sheet-title{font:700 22px/1 var(--f-num);letter-spacing:.04em;text-transform:uppercase;text-align:center;margin-bottom:14px}
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pad button{height:58px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:700 28px/1 var(--f-num);cursor:pointer}
.pad button.cur{background:var(--masters);border-color:var(--masters)}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.sheet-actions button{height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font:700 18px/1 var(--f-num);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.sheet-actions .primary{background:var(--masters);border-color:var(--masters)}

/* NAVPLAY: nothing covers the tab bar. Sheets, their dim backdrop, the photo viewer and the 19th Hole card end at its top edge, and
   the tab bar sits above them all. Every sheet has a 44px close X at its top right (it also closes on a swipe down and a backdrop tap). */
.tabs{z-index:90}
body .sheet-bg{bottom:var(--tabs-total)}
body .sheet{bottom:var(--tabs-total);padding-bottom:16px;max-height:calc(100dvh - var(--tabs-total) - var(--safe-t) - 12px);overflow:auto;overscroll-behavior:contain;transition:transform .2s}
body .sheet .sheet-title{padding:0 24px}
.sheet-x{position:absolute;top:4px;right:4px;z-index:2;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink, #fff);display:grid;place-items:center;cursor:pointer}
.sheet-x svg{width:22px;height:22px}
.sheet-x:active{background:rgba(255,255,255,.08)}
.sheet-x:focus-visible{outline:2px solid var(--green-2);outline-offset:-2px}
body .so-sheet.ww-viewer{inset:0 0 var(--tabs-total) 0}
body .ww-viewer .ww-posted{bottom:16px}
body .ww-viewer .ww-acts{bottom:72px}
body .n19-wrap{bottom:var(--tabs-total);padding-bottom:16px}
/* an open expandable card: a 44px close X at its top right */
details[open]{position:relative}
.det-x{position:absolute;top:0;right:0;z-index:2;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2, #fff);display:grid;place-items:center;cursor:pointer}
.det-x svg{width:20px;height:20px}
.det-x:focus-visible{outline:2px solid var(--green-2);outline-offset:-2px}
body .n19-x{width:44px;height:44px}