/* Broadcast look: Ryder Cup TV graphics. Navy panels, team-colored blocks, gold trim, condensed caps. */
:root {
  --bg: #061127; --panel: #0f2148; --panel2: #172d5c; --line: rgba(255, 255, 255, .12);
  --ink: #ffffff; --muted: #9db0d3; --gold: #d6b25e; --navy: #0a1a3a;
  --cond: "Avenir Next Condensed", "DIN Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, system-ui, sans-serif;
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 600 15px/1.3 var(--cond); background: radial-gradient(130% 55% at 50% -5%, #1b3a7a 0%, #0b1d42 45%, var(--bg) 100%) fixed; }
#app { max-width: 560px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 12px calc(28px + env(safe-area-inset-bottom)); }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
.loading { text-align: center; color: var(--muted); margin-top: 40vh; text-transform: uppercase; letter-spacing: .1em; }
.hint { font: 400 13px/1.4 var(--sys); color: var(--muted); }
.center { text-align: center; }

/* Header */
.top { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 10px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.back { text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 0; }
.sync { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; white-space: nowrap; }
.sync.ok { background: rgba(34, 197, 94, .16); color: #4ade80; }
.sync.ok::before { content: "● "; }
.sync.wait { background: rgba(234, 179, 8, .18); color: #facc15; }
.sync.off { background: rgba(239, 68, 68, .2); color: #fca5a5; }

/* Overall score banner */
.banner { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 8px; border-top: 3px solid var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.bteam { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; min-height: 96px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), var(--c); }
.bname { font-weight: 800; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.05; }
.bpts { font-weight: 800; font-size: 66px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.towin { background: var(--navy); color: var(--gold); text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 7px; border-bottom: 1px solid rgba(214, 178, 94, .35); }
/* Tiles sit either side of the banner's center line; the label hangs off to the left. */
.proj { display: grid; grid-template-columns: 1fr 64px 64px 1fr; gap: 3px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.proj .plabel { justify-self: end; margin-right: 10px; }
.proj .tile { color: #fff; background: var(--c); text-align: center; padding: 3px 0; font-size: 20px; letter-spacing: 0; }
.prev { text-align: center; color: var(--muted); font: 400 12px/1.4 var(--sys); margin-top: 8px; }

/* Session header */
.session { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--gold); font-size: 21px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.session small { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .1em; }

/* Match rows */
.match { display: block; text-decoration: none; margin-bottom: 14px; }
.mmeta { display: flex; justify-content: space-between; margin: 0 2px 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mmeta .you { color: var(--gold); }
.mmeta .fin { color: var(--navy); background: var(--gold); padding: 1px 7px; }
.towin.champ { background: var(--c); color: #fff; font-size: 16px; font-weight: 800; border-bottom: 3px solid var(--gold); }
.over { margin-top: 8px; padding: 10px 12px; text-align: center; background: var(--c, #fff); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 3px solid var(--gold); }
.over:not([style]) { color: var(--navy); }
.over small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--sys); text-transform: none; letter-spacing: 0; opacity: .85; }
.chip.dead { opacity: .3; }

/* Birdie alerts and awards */
.chip { position: relative; }
.chip.star::after { content: "★"; position: absolute; top: 1px; right: 3px; font-size: 11px; color: var(--gold); }
.pnet .hi { display: block; font-style: normal; color: var(--gold); font-size: 12px; letter-spacing: .1em; }
.toast { position: fixed; z-index: 20; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(92vw, 520px); padding: 12px 16px; background: var(--c); border-top: 3px solid var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); text-align: center; text-transform: uppercase; cursor: pointer; animation: drop .35s ease-out; }
.toast b { display: block; font-size: 30px; font-weight: 800; letter-spacing: .08em; color: #ffe08a; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.toast span { display: block; font-size: 18px; font-weight: 800; letter-spacing: .06em; }
.toast small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--sys); text-transform: none; opacity: .9; }
.toast.out { opacity: 0; transform: translateX(-50%) translateY(-20px); transition: all .35s; }
@keyframes drop { from { opacity: 0; transform: translateX(-50%) translateY(-30px); } }
.awards-link { display: block; margin-top: 18px; padding: 14px; text-align: center; text-decoration: none; background: var(--gold); color: var(--navy); font-size: 17px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.award { margin-bottom: 10px; padding: 12px 14px; background: var(--panel); border-left: 6px solid var(--c); }
.atitle { color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.awho { margin-top: 4px; font-size: 26px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.adetail { margin-top: 2px; color: var(--muted); font: 500 14px/1.35 var(--sys); }
.mbar { display: grid; grid-template-columns: 1fr 96px 1fr; min-height: 66px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.mbar.big { min-height: 84px; grid-template-columns: 1fr 112px 1fr; }
.mside { display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; font-size: 18px; font-weight: 800; letter-spacing: .04em; line-height: 1.12; text-transform: uppercase; background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 60%), var(--sc); transition: opacity .2s; }
.mbar.big .mside { font-size: 21px; }
.mside.A { --sc: var(--a); text-align: left; }
.mside.B { --sc: var(--b); text-align: right; }
.mside.lost { opacity: .4; }
.mscore { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; color: var(--navy); text-transform: uppercase; }
.mscore b { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: .01em; }
.mbar.big .mscore b { font-size: 32px; }
.mscore small { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #52607a; }
.mscore.lead-A b { color: var(--a); }
.mscore.lead-B b { color: var(--b); }
.mscore.lead-A::before, .mscore.lead-B::after { content: ""; position: absolute; top: 50%; margin-top: -9px; border: 9px solid transparent; }
.mscore.lead-A::before { left: -1px; border-left-color: var(--a); }
.mscore.lead-B::after { right: -1px; border-right-color: var(--b); }
.mscore.won { color: #fff; }
.mscore.won small { color: rgba(255, 255, 255, .85); }
.mscore.won b { color: #fff; }
.mscore.won::before, .mscore.won::after { display: none; }
.mscore.idle { background: var(--panel2); color: var(--ink); }
.mscore.idle small { color: var(--muted); }
footer { text-align: center; margin-top: 28px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
footer a { color: var(--muted); }

/* Match scorecard */
.holes { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 16px 0 14px; }
.chip { aspect-ratio: 1; border: 0; border-radius: 2px; background: var(--panel); color: var(--muted); font-weight: 800; font-size: 16px; padding: 0; }
.chip.won { background: var(--c); color: #fff; }
.chip.halved { background: #fff; color: var(--navy); }
.chip.partial { box-shadow: inset 0 0 0 2px var(--gold); color: var(--ink); }
.chip.sel { outline: 3px solid var(--gold); outline-offset: 2px; }
.chip.sel:not(.won):not(.halved) { color: #fff; }
.hinfo { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 2px 10px; text-transform: uppercase; }
.hinfo h3 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: .04em; }
.hinfo span { color: var(--gold); font-size: 15px; font-weight: 700; letter-spacing: .1em; }
.side { background: var(--panel); margin-bottom: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.side-name { background: var(--c); padding: 6px 12px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.prow { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: 0; color: inherit; text-align: left; }
.prow + .prow { border-top: 1px solid var(--line); }
.pname { flex: 1; font-size: 22px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.pname small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--sys); color: var(--muted); text-transform: none; letter-spacing: 0; }
.dots { color: var(--gold); font-size: 11px; letter-spacing: 2px; vertical-align: middle; }
.pnet { color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pval { min-width: 58px; height: 54px; display: grid; place-items: center; background: #fff; color: var(--navy); font-size: 32px; font-weight: 800; }
.pval.empty { background: transparent; color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 0 2px rgba(157, 176, 211, .45); }
.pval.counts { box-shadow: 0 0 0 3px var(--gold); }
.result { padding: 14px; text-align: center; background: var(--panel); color: var(--muted); font-size: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.result.won { background: var(--c); color: #fff; }
.result.halved { background: #fff; color: var(--navy); }
.nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.nav button, .nav .btn { height: 56px; border: 0; display: grid; place-items: center; text-decoration: none; background: var(--gold); color: var(--navy); font-size: 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav button.ghost { background: var(--panel); color: var(--ink); }

/* Score keypad */
.overlay { position: fixed; inset: 0; z-index: 10; background: rgba(2, 8, 22, .6); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; max-width: 560px; margin: 0 auto; padding: 16px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 3px solid var(--gold); box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); }
.sh-head { margin-bottom: 12px; text-align: center; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.key { height: 60px; border: 0; background: #fff; color: var(--navy); font-size: 28px; font-weight: 800; }
.key.par { box-shadow: inset 0 0 0 3px var(--gold); }
.key.cur { background: var(--gold); }
.keys2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.key.wide { font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.key.ghost { background: var(--panel2); color: var(--ink); }
.close { width: 100%; height: 46px; margin-top: 8px; border: 0; background: none; color: var(--muted); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Setup */
.setup h2 { margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(214, 178, 94, .5); color: var(--gold); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.frow { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.frow > input:first-child, .frow label:not(.sm) { flex: 1; }
.setup label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font: 600 12px/1.3 var(--sys); }
.setup label.sm { width: 110px; }
.setup label.block { margin-bottom: 8px; }
.setup input, .setup select { min-width: 0; padding: 9px 10px; border: 0; border-radius: 3px; background: #fff; color: var(--navy); font: 500 16px var(--sys); }
.setup select { flex: 1; }
.setup input.hcp { width: 64px; text-align: center; }
.orow { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 10px; background: var(--panel); }
.otime { color: var(--gold); font-size: 17px; font-weight: 800; }
.opair span { display: block; margin: 2px 0; padding-left: 8px; border-left: 4px solid var(--c); font-size: 16px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.omove { display: flex; gap: 6px; }
.omove button { width: 44px; height: 44px; border: 0; background: #fff; color: var(--navy); font-size: 16px; }
.omove button:disabled { opacity: .2; }
.orderbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 4px; }
.primary:disabled { opacity: .35; }
.kv { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 15px var(--sys); }
.kv b { color: var(--ink); }
.rteam { margin-bottom: 10px; background: var(--panel); }
.rplayer { display: flex; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.rplayer b { font-family: var(--sys); }
.swatch { flex: none; align-self: stretch; width: 8px; }
.mrow { margin-bottom: 10px; padding: 10px; background: var(--panel); }
.x { padding: 8px; border: 0; background: none; color: var(--muted); font-size: 18px; }
.add { padding: 10px 14px; border: 1px dashed var(--muted); background: transparent; color: var(--ink); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.savebar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--line); }
#setup-msg { color: var(--muted); font: 400 13px/1.3 var(--sys); }
.primary { padding: 13px 18px; border: 0; background: var(--gold); color: var(--navy); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Stats */
.links2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.links2 a { padding: 12px; text-align: center; text-decoration: none; background: var(--panel2); font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sh { margin: 22px 0 4px; color: var(--gold); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.srow { display: grid; grid-template-columns: 26px 1fr auto 64px; align-items: center; gap: 8px; margin-bottom: 3px; padding: 7px 10px; background: var(--panel); border-left: 5px solid var(--c); }
.srank { color: var(--muted); font-size: 14px; }
.sname { font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.scell { color: var(--muted); font: 500 12px/1.3 var(--sys); text-align: right; }
.sbig { text-align: right; font-size: 26px; font-weight: 800; line-height: 1; }
.sbig small { display: block; font-size: 11px; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; }
.hrow { display: grid; grid-template-columns: 44px 1fr 70px; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.hno { font-size: 18px; font-weight: 800; } .hno small { display: block; font: 500 10px var(--sys); color: var(--muted); }
.hbar { height: 12px; background: var(--panel); } .hbar i { display: block; height: 100%; background: var(--gold); }
.hval { text-align: right; font-size: 17px; font-weight: 800; } .hval small { display: block; font: 500 11px var(--sys); color: var(--muted); }

/* Draft: built for a TV or projector */
body.wide #app { max-width: 1500px; }
body.wide .session { font-size: 34px; }
.dcall { margin: 8px 0 18px; padding: 18px; text-align: center; background: var(--c, var(--panel)); border-bottom: 4px solid var(--gold); font-size: clamp(22px, 3vw, 40px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; animation: pulse 2s ease-in-out infinite; }
.dcall b { display: block; font-size: .6em; letter-spacing: .2em; opacity: .9; }
.dcall.done { background: var(--gold); color: var(--navy); animation: none; }
@keyframes pulse { 50% { filter: brightness(1.18); } }
.dstart { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.dstart button { padding: 22px; border: 0; background: var(--c); color: #fff; font-size: 24px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dgrid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .dgrid { grid-template-columns: 1fr 1fr; } .dmatches { grid-column: 1 / -1; order: -1; } }
.dpool { background: var(--panel); }
.dp { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font-size: clamp(18px, 2vw, 28px); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.dp small { font: 600 .6em var(--sys); color: var(--muted); }
.dp.live { background: linear-gradient(90deg, var(--c), transparent 140%); cursor: pointer; }
.dp.live:hover { filter: brightness(1.2); }
.dp.gone { opacity: .22; text-decoration: line-through; cursor: default; }
.dm { display: grid; grid-template-columns: 40px 1fr 30px 1fr; align-items: center; gap: 6px; margin-bottom: 6px; }
.dnum { color: var(--gold); font-size: 22px; font-weight: 800; text-align: center; }
.dm i { text-align: center; color: var(--muted); font-style: normal; font-weight: 800; }
.dn { min-height: 56px; display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; background: var(--c); font-size: clamp(18px, 2vw, 30px); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.dn + i + .dn { text-align: right; }
.dn small { font: 600 11px var(--sys); letter-spacing: .1em; opacity: .75; }
.dn.empty { background: var(--panel); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.dn.fresh { animation: land .7s ease-out; outline: 3px solid var(--gold); }
@keyframes land { from { transform: scale(1.25); filter: brightness(1.8); } }
.dctl { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.dctl button { padding: 12px 18px; border: 0; background: var(--gold); color: var(--navy); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dctl button.ghost { background: var(--panel2); color: var(--ink); }
.dctl button:disabled { opacity: .3; }

/* Split-points singles */
.segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 3px; }
.seg { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; background: var(--panel); border-bottom: 3px solid var(--c, var(--panel2)); text-transform: uppercase; }
.seg em { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.seg b { font-size: 15px; letter-spacing: .04em; }
.seg small { font: 500 10px var(--sys); color: var(--gold); text-transform: none; }
.seg.done { background: var(--c, #fff); } .seg.done:not([style]) { background: #fff; color: var(--navy); }
.seg.done em, .seg.done small { color: rgba(255,255,255,.85); }
.seg.idle b { color: var(--muted); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.tabs a { padding: 8px; text-align: center; text-decoration: none; background: var(--panel); color: var(--muted); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.tabs a.on { background: var(--gold); color: var(--navy); }

/* Home */
.rohint { margin-top: 6px; padding: 5px; text-align: center; background: var(--panel); color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.day { display: block; margin-bottom: 10px; background: var(--panel); text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.dhead { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.day.small .dhead { border: 0; padding: 8px 12px; }
.dhead em { display: block; font-style: normal; color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.dhead b { font-size: 19px; letter-spacing: .04em; text-transform: uppercase; }
.day.small b { font-size: 15px; }
.dscore { display: flex; gap: 2px; }
.dscore i { min-width: 44px; padding: 3px 6px; text-align: center; font-style: normal; font-size: 22px; font-weight: 800; background: var(--c); }
.day.small .dscore i { font-size: 16px; min-width: 36px; }
.drow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); }
.dpair span { display: block; padding-left: 7px; border-left: 4px solid var(--c); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.dres { flex: none; padding: 3px 8px; background: var(--c, var(--panel2)); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.dmore { padding: 9px 12px; color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: right; border-top: 1px solid var(--line); }
/* Eagles birdies pars */
.ebp { display: grid; grid-template-columns: 26px 1fr 54px 54px 54px; align-items: center; gap: 6px; margin-bottom: 3px; padding: 6px 10px; background: var(--panel); border-left: 5px solid var(--c, transparent); }
.ebp b { text-align: center; font-size: 22px; font-weight: 800; }
.ebp b.zero { color: rgba(157,176,211,.35); }
.ebp.head { background: none; padding-top: 0; padding-bottom: 0; }
.ebp.head b, .ebp.head span { font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.ebp.total { margin-top: 6px; background: var(--c); }
.ebp.total b { color: #fff; }

/* ===================== Golf Live additions ===================== */
.brand { font-weight: 800; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.topr { display: flex; gap: 8px; align-items: center; }
button.back { background: none; border: 0; color: inherit; }
.primary, a.primary { display: inline-block; text-align: center; text-decoration: none; background: var(--gold); color: #1a1405; border: 0; border-radius: 6px; padding: 12px 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.primary.big, a.primary.big { display: block; width: 100%; font-size: 18px; padding: 16px; margin: 18px 0 8px; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.primary.sticky { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; }
.primary:disabled { opacity: .5; }
.ghostbtn { display: block; width: 100%; margin: 8px 0; padding: 13px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ghostbtn:disabled { opacity: .5; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; font: 600 13px var(--sys); }
.linkbtn.danger { color: #fca5a5; }
.err { color: #fca5a5; font: 600 14px/1.4 var(--sys); min-height: 1em; }
.okc { color: #4ade80; }
.fine { font: 400 12px/1.4 var(--sys); color: var(--muted); text-align: center; }

.hero { text-align: center; padding: 28px 8px 8px; }
.hero-mark { font-size: 44px; }
.hero h1 { font-size: 36px; line-height: 1.02; margin: 8px 0 12px; text-transform: uppercase; letter-spacing: .02em; }
.hero p { font: 400 15px/1.45 var(--sys); color: var(--muted); margin: 0 auto; max-width: 420px; }
.how { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 26px 0 10px; }
.how div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: 600 13px/1.3 var(--sys); color: var(--muted); }
.how b { display: block; color: var(--gold); font: 800 22px var(--cond); }
.rrow, .crow, .pickc { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--gold); color: var(--ink); padding: 12px; margin: 6px 0; border-radius: 6px; }
.rrow span, .crow span:first-child, .pickc span:first-child { flex: 1; min-width: 0; }
.rrow b, .crow b, .pickc b { display: block; font-size: 17px; letter-spacing: .02em; }
.rrow small, .crow small, .pickc small { display: block; font: 400 12px/1.35 var(--sys); color: var(--muted); margin-top: 2px; }
.rwrap { position: relative; }
.rwrap .rrow { padding-right: 52px; }
.rmore { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.rmore:hover, .rmore[aria-expanded="true"] { background: rgba(255,255,255,.08); color: var(--ink); }
.rmenu { position: absolute; right: 8px; top: calc(100% - 4px); z-index: 10; min-width: 170px; background: #0f1a3a; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.5); padding: 4px; }
.rmenu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); padding: 10px 12px; border-radius: 6px; font: 600 14px var(--sys); cursor: pointer; }
.rmenu button:hover { background: rgba(255,255,255,.07); }
.rmenu button.danger { color: #fca5a5; }
.rrow em { font: 700 11px var(--sys); color: var(--gold); text-transform: uppercase; }
.rrow i, .pickc i { font-style: normal; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.pickc { border-left-color: var(--muted); font-size: 17px; }
.pickc.picked { border-left-color: var(--gold); }
.badge { flex: none; font: 700 11px var(--sys); letter-spacing: .03em; padding: 3px 7px; border-radius: 3px; white-space: nowrap; }
.badge.ok { background: rgba(34,197,94,.16); color: #4ade80; }
.badge.warn { background: rgba(234,179,8,.18); color: #facc15; }
.badge.addb { background: var(--gold); color: #1a1405; }
.rtitle small .badge { margin-left: 4px; }
.warnline { background: rgba(234,179,8,.08); border: 1px solid rgba(234,179,8,.25); padding: 8px 10px; border-radius: 6px; }
.cnote { display: block; margin-top: 4px; opacity: .85; font-size: 12px; }
.search { width: 100%; font: 500 17px var(--sys); padding: 13px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: #111; margin: 6px 0 4px; }
.remote { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; }
.remote h3 { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--muted); margin: 10px 0 4px; }

.form label { display: block; font: 600 13px var(--sys); color: var(--muted); margin: 10px 0 0; }
.form input:not([type=checkbox]), .form select { display: block; width: 100%; margin-top: 4px; font: 500 16px var(--sys); padding: 11px 12px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: #111; }
.form label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); margin: 12px 0; }
.form label.check input { width: 22px; height: 22px; margin: 0; flex: none; }
.fh { margin: 22px 0 6px; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.fh small { display: block; font: 400 12px var(--sys); color: var(--muted); letter-spacing: 0; text-transform: none; margin-top: 2px; }
.tees, .fmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin: 8px 0; }
.fmts { grid-template-columns: repeat(3, 1fr); }
.tees button, .fmts button { text-align: left; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.tees button b, .fmts button b { display: block; font-size: 16px; }
.tees button small, .fmts button small { display: block; font: 400 11px/1.3 var(--sys); color: var(--muted); margin-top: 2px; }
.tees button.on, .fmts button.on { background: var(--gold); color: #1a1405; border-color: var(--gold); }
.tees button.on small, .fmts button.on small { color: #3b2f0b; }
.prow2 { display: grid; grid-template-columns: 1fr 76px auto 34px; gap: 6px; align-items: center; margin: 6px 0; }
.prow2 input { margin-top: 0 !important; }
.prow2 .ch { grid-column: 1 / -1; font: 400 12px var(--sys); color: var(--muted); margin: -2px 0 2px 4px; min-height: 0; }
.prow2 .ch:empty { display: none; }
.tpick { display: flex; gap: 3px; }
.tpick button { width: 34px; height: 40px; border-radius: 5px; border: 2px solid var(--c); background: transparent; color: var(--ink); font-weight: 800; }
.tpick button.on { background: var(--c); }
.prow2 .x, .mrow2 .x { width: 34px; height: 40px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 20px; }
.add { display: block; width: 100%; padding: 11px; margin: 6px 0; border-radius: 6px; border: 1px dashed var(--line); background: transparent; color: var(--gold); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.row3 label { margin-top: 0; }
.teamname { border-left: 4px solid var(--c); padding-left: 8px; }
.mrow2 { display: grid; grid-template-columns: 22px 1fr 16px 1fr 34px; gap: 5px; align-items: center; margin: 8px 0; }
.mrow2 .mnum { color: var(--gold); font-weight: 800; }
.mrow2 i { text-align: center; color: var(--muted); font-style: normal; }
.mside2 select { margin-top: 2px !important; padding: 8px !important; font-size: 14px !important; }
details.adv { margin: 14px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
details.adv summary { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.pts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.seg2 { display: flex; gap: 6px; align-items: center; margin: 10px 0; }
.seg2 span { font: 600 13px var(--sys); color: var(--muted); margin-right: 4px; }
.seg2 button { padding: 8px 14px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 700; }
.seg2 button.on { background: var(--gold); color: #1a1405; border-color: var(--gold); }
.lbmode { justify-content: center; }

.teetabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 14px 0 0; }
.teetabs button { padding: 8px 12px; border-radius: 5px 5px 0 0; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 700; }
.teetabs button.on { background: var(--panel2); color: var(--ink); border-bottom-color: var(--panel2); }
.teebox { background: var(--panel2); border: 1px solid var(--line); border-radius: 0 6px 6px 6px; padding: 10px; }
.hgrid { margin: 12px 0 4px; }
.hglabel { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.hgrow { display: grid; grid-template-columns: 28px repeat(9, 1fr); gap: 3px; align-items: end; margin-bottom: 3px; }
.hgk { font: 700 11px var(--sys); color: var(--muted); padding-bottom: 10px; }
.hc { margin: 0 !important; text-align: center; }
.hc em { display: block; font: 700 10px var(--sys); color: var(--muted); font-style: normal; }
.hc input { padding: 8px 0 !important; text-align: center; font-size: 15px !important; margin-top: 1px !important; }
.hgrow:last-child .hc em { display: none; }

.share { text-align: center; padding-top: 16px; }
.share h2 { font-size: 26px; text-transform: uppercase; margin: 6px 0; }
.share .fh { text-align: left; }
.share .hint { text-align: left; }
.linkbox { display: flex; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--gold); border-radius: 8px; padding: 6px 6px 6px 12px; margin: 10px 0; }
.linkbox code { flex: 1; min-width: 0; overflow-wrap: anywhere; text-align: left; font: 600 14px/1.3 ui-monospace, Menlo, monospace; color: var(--ink); }
.linkbox.small { border-color: var(--line); }
.linkbox.small code { font-size: 11px; color: var(--muted); }
.linkbox button { flex: none; padding: 10px 14px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); font-weight: 700; }

.rtitle { margin: 6px 0 10px; }
.rtitle h1 { margin: 0; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; }
.rtitle small { font: 400 13px/1.4 var(--sys); color: var(--muted); }
.lb { margin-top: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.4); border-top: 3px solid var(--gold); }
.lbh, .lbr, .wtr { display: grid; grid-template-columns: 44px 1fr 46px 70px; align-items: center; }
.lbh { background: var(--navy); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 0; }
.lbh span { text-align: center; } .lbh span:nth-child(2) { text-align: left; }
.lbr, .wtr { background: #fff; color: #0a1a3a; border-bottom: 1px solid #d8dfec; min-height: 56px; }
.lbr:nth-child(even), .wtr:nth-child(even) { background: #f1f4fa; }
.lbpos { text-align: center; font-weight: 800; font-size: 18px; color: #0a1a3a; }
.lbname { font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; padding: 6px 0; }
.lbname small { display: block; font: 500 11px var(--sys); color: #5a6b8c; text-transform: none; letter-spacing: 0; }
.lbthru { text-align: center; font-weight: 700; color: #5a6b8c; }
.lbval { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--navy); color: #fff; font-size: 24px; font-weight: 800; }
.lbval small { font-size: 11px; color: var(--muted); }
.lbval.under { background: #c8102e; }
.lbval.even { background: #1650c8; }
.wtr { grid-template-columns: 44px 1fr 90px; }
.wtr.lead { box-shadow: inset 5px 0 0 var(--gold); }
.wtable { border-top: 3px solid var(--gold); box-shadow: 0 10px 26px rgba(0,0,0,.4); margin-top: 6px; }
.wpts { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--navy); color: var(--gold); font-size: 28px; font-weight: 800; }
.wpts small { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.wlog { display: flex; gap: 10px; align-items: center; padding: 9px 10px; margin: 5px 0; background: var(--panel); border-left: 4px solid var(--line); text-decoration: none; border-radius: 4px; }
.wlog.wolf, .wlog.others { border-left-color: var(--gold); }
.wlog.nopick { border-left-color: #facc15; }
.wlog b { font-size: 16px; } .wlog small { display: block; font: 400 13px var(--sys); color: var(--muted); }
.wh { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--panel2); font-weight: 800; }
.wolfbox { background: linear-gradient(180deg, rgba(214,178,94,.18), rgba(214,178,94,.04)); border: 1px solid rgba(214,178,94,.5); border-radius: 8px; padding: 10px; margin: 10px 0; }
.wolfhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wolfhead span:nth-child(2) em { display: block; font: 700 11px var(--sys); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-style: normal; }
.wolfhead b { font-size: 24px; text-transform: uppercase; }
.wolfhead small { flex-basis: 100%; font: 400 12px var(--sys); color: var(--muted); }
.wolfico { font-size: 30px; }
.wolfq { margin: 10px 0 6px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-size: 13px; }
.wpick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wbtn { min-height: 50px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
.wbtn small { display: block; font: 400 10px var(--sys); text-transform: none; color: var(--muted); }
.wbtn.on { background: var(--gold); color: #1a1405; border-color: var(--gold); }
.wbtn.on small { color: #3b2f0b; }
a.chip { display: grid; place-items: center; text-decoration: none; }
.chip.warn { outline: 2px solid #facc15; }
.dots.plus { color: #4ade80; font-size: 12px; }
.gpick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.gpick button { padding: 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 800; font-size: 16px; text-transform: uppercase; }
.gpick button.on { background: var(--gold); color: #1a1405; }
.cardwrap { overflow-x: auto; margin: 8px -12px; padding: 0 12px; }
table.card { border-collapse: collapse; background: #fff; color: #0a1a3a; font: 600 13px var(--sys); min-width: 100%; }
table.card th, table.card td { border: 1px solid #d8dfec; padding: 6px 4px; text-align: center; min-width: 28px; position: relative; }
table.card thead th { background: var(--navy); color: #fff; }
table.card tr.par td, table.card tr.si td { background: #eef2f9; color: #5a6b8c; font-size: 11px; }
table.card .cname { text-align: left; white-space: nowrap; font-weight: 800; position: sticky; left: 0; background: #fff; }
table.card td.sum, table.card th.sum { background: #e3e9f5; font-weight: 800; }
table.card thead th.sum { background: #172d5c; }
table.card td.birdie { box-shadow: inset 0 0 0 2px #c8102e; border-radius: 50%; }
table.card td.eagle { box-shadow: inset 0 0 0 2px #c8102e, inset 0 0 0 4px #fff, inset 0 0 0 6px #c8102e; border-radius: 50%; }
table.card td.bogey { box-shadow: inset 0 0 0 2px #1650c8; }
table.card td.dbl { box-shadow: inset 0 0 0 2px #1650c8, inset 0 0 0 4px #fff, inset 0 0 0 6px #1650c8; }
table.card td.pu { color: #9aa6bd; }
table.card td i { position: absolute; top: 0; right: 2px; font-style: normal; font-size: 9px; color: #c8102e; line-height: 1; }
footer .linkbtn { font-size: 14px; }
footer small { color: var(--muted); font: 400 11px var(--sys); }
@media (max-width: 380px) { .fmts { grid-template-columns: 1fr; } .lbname { font-size: 16px; } }

.tabs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.session small { text-align: right; }