/* ============================================================
   Watson Invitational — "country-club scorecard" system
   Cream paper · forest-green ink · brass rules · Playfair + Archivo
   ============================================================ */
:root {
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --paper:   #f4edda;      /* warm cream page */
  --paper-2: #ece2c6;      /* alt band / shading */
  --paper-3: #e5d9b6;      /* deeper cream */
  --ink:     #23281d;      /* warm near-black */
  --ink-soft:#5b6150;
  --green:   #14432b;      /* deep forest */
  --green-2: #1c5a39;
  --brass:   #a9843c;      /* rules & eyebrows */
  --brass-2: #7d6023;
  --rule:    #d3c49b;      /* hairline on cream */
  --rule-2:  #c3b183;      /* stronger hairline */

  --a: #274763;            /* Side A — navy */
  --b: #8a3324;            /* Side B — claret */
  --under: #99301f;        /* birdie/eagle — red ink */
  --over:  #33382c;        /* bogey/double — charcoal */

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  font-feature-settings: "tnum" 1, "lnum" 1;
  overscroll-behavior-y: none;
}
body::before {                              /* paper grain */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--noise); background-size: 140px 140px;
  opacity: .05; mix-blend-mode: multiply;
}
#app {
  position: relative; z-index: 1;
  max-width: 680px; margin: 0 auto; min-height: 100vh;
  padding-bottom: 64px;
  background:
    linear-gradient(var(--paper), var(--paper));
  box-shadow: 0 0 0 1px var(--rule);
}
@media (min-width: 700px) { #app { box-shadow: 0 0 60px rgba(35,40,29,.12), 0 0 0 1px var(--rule); } }

h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; }
button { font-family: inherit; }

/* ---------- shared bits ---------- */
.eyebrow {                                  /* rule — TEXT — rule */
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 600; font-size: .68rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--brass-2);
  justify-content: center; text-indent: .28em;
}
.eyebrow::before, .eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 64px; background: var(--brass); opacity: .6; }

.label {                                    /* section label, left aligned */
  font-family: var(--sans); font-weight: 700; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass-2);
  padding: 22px 20px 10px; display: flex; align-items: center; gap: 10px;
}
.label::after { content: ""; height: 1px; flex: 1; background: var(--rule-2); }

.wrap { padding: 0 20px; }
.chev::after { content: "→"; color: var(--brass); font-family: var(--sans); font-size: 1rem; margin-left: auto; padding-left: 12px; }

/* ---------- masthead ---------- */
.masthead {
  text-align: center; padding: 30px 20px 26px;
  border-top: 3px double var(--brass); border-bottom: 3px double var(--brass);
  margin: 14px 16px 0; position: relative;
 
}
.masthead .crest { width: 208px; height: 208px; max-width: 62vw; margin: -2px auto 2px; display: block; }
.masthead .crest-fallback { font-family: var(--display); font-weight: 800; font-size: 2.15rem; line-height: 1.05; color: var(--green); letter-spacing: .01em; }
.masthead .crest-fallback .amp { color: var(--brass); font-style: italic; }
.masthead .years { margin: 12px 0 10px; }
.masthead .sub { font-size: .82rem; color: var(--ink-soft); letter-spacing: .02em; max-width: 34ch; margin: 0 auto; }
.masthead .venue { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.masthead .venue small { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-2); }
.masthead .venue img { height: 26px; opacity: .92; }
.masthead .venue-addr { font-family: var(--sans); font-size: .78rem; color: var(--brass-2); background: none; border: 0; border-bottom: 1px solid var(--rule-2); padding: 2px 0 2px; letter-spacing: .01em; cursor: pointer; }
.masthead .venue-addr:active { color: var(--green); }

/* ---- maps action sheet ---- */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-bg { position: absolute; inset: 0; background: rgba(20,24,16,.42); opacity: 0; transition: opacity .18s ease; }
.sheet-wrap.show .sheet-bg { opacity: 1; }
.sheet {
  position: relative; margin: 0 auto; width: 100%; max-width: 460px;
  background: var(--paper); border-top: 3px double var(--brass);
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.sheet-wrap.show .sheet { transform: none; }
.sheet-h { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--green); padding: 16px 20px 12px; text-align: center; border-bottom: 1px solid var(--rule); }
.sheet-h small { display: block; font-family: var(--sans); font-weight: 600; font-size: .74rem; color: var(--ink-soft); letter-spacing: 0; text-transform: none; margin-top: 3px; }
.sheet-item {
  display: flex; align-items: center; width: 100%; background: none; border: 0;
  border-bottom: 1px solid var(--rule); padding: 16px 20px; cursor: pointer;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--ink);
  text-decoration: none; text-align: left;
}
.sheet-item:active { background: rgba(169,132,60,.1); }
.sheet-item .si-go { margin-left: auto; color: var(--brass); }
.sheet-item.cancel { justify-content: center; color: var(--brass-2); font-weight: 700; border-bottom: 0; }
.sheet-item.copy { color: var(--brass-2); }

/* ---------- ledger rows ---------- */
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--rule);
  cursor: pointer; background: transparent; width: 100%; text-align: left;
  color: inherit; font-size: 1rem;
}
.row:active { background: rgba(169,132,60,.09); }
.row .rn { font-family: var(--display); font-weight: 700; color: var(--brass); font-size: 1.5rem; width: 30px; flex: none; text-align: center; font-style: italic; }
.row .grow { min-width: 0; flex: 1; }
.row .title { font-family: var(--display); font-weight: 700; font-size: 1.16rem; color: var(--ink); }
.row .meta { font-size: .82rem; color: var(--ink-soft); margin-top: 1px; }
.row .meta .dot { color: var(--brass); margin: 0 6px; }
.row .rt { text-align: right; flex: none; }
.row .rt .k { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; }


/* ---------- live strip ---------- */
.live-head { display: flex; align-items: center; gap: 8px; }
.flag { color: #b23b2b; font-size: .8rem; }
.live-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.live-row:active { background: rgba(169,132,60,.09); }
.live-row .lr-course { font-family: var(--sans); font-weight: 700; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-2); width: 70px; flex: none; }
.live-row .lr-teams { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.live-row .lr-teams .v { color: var(--brass); font-style: italic; padding: 0 4px; }
.live-row .lr-status { flex: none; font-family: var(--display); font-weight: 700; font-size: 1rem; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #b23b2b; flex: none; animation: pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(178,59,43,.5)} 70%{box-shadow:0 0 0 7px rgba(178,59,43,0)} 100%{box-shadow:0 0 0 0 rgba(178,59,43,0)} }

/* ---------- backbar ---------- */
.backbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: var(--paper); border-bottom: 1px solid var(--rule-2);
}
.backbar .back { background: none; border: 0; color: var(--brass-2); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 4px 6px; }
.backbar .bt { flex: 1; text-align: center; padding-right: 46px; }
.backbar .bt b { font-family: var(--display); font-weight: 700; font-size: 1.12rem; }
.backbar .bt small { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-2); margin-top: 1px; }

/* ---------- tabs ---------- */
.tabs { display: flex; justify-content: center; gap: 30px; padding: 16px 20px 0; border-bottom: 1px solid var(--rule); }
.tabs button {
  background: none; border: 0; padding: 6px 2px 12px; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); position: relative;
}
.tabs button.active { color: var(--green); }
.tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass); }

/* ---------- timetable (itinerary) ---------- */
.timetable { padding: 6px 0 10px; }
.tt-row { display: flex; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.tt-row:last-child { border-bottom: 0; }
.tt-time { width: 92px; flex: none; text-align: right; font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--brass-2); text-transform: uppercase; }
.tt-what { flex: 1; font-size: .96rem; }

/* ---------- matchups ---------- */
.round-head { padding: 24px 20px 6px; }
.round-head .ct { display: flex; align-items: baseline; gap: 10px; }
.round-head h3 { font-size: 1.4rem; color: var(--green); }
.round-head .rule { height: 1px; background: var(--rule-2); margin-top: 8px; }
.round-head .fmt { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; margin-top: 7px; }
.tbd { margin: 8px 20px; padding: 10px 14px; font-size: .82rem; color: var(--brass-2); background: rgba(169,132,60,.1); border-left: 2px solid var(--brass); }

.mrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 13px 20px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.mrow:active { background: rgba(169,132,60,.09); }
.mrow .time { grid-column: 1 / -1; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; margin-bottom: 3px; }
.mrow .team { font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.mrow .tk { width: 15px; height: 15px; border-radius: 3px; flex: none; display: grid; place-items: center; color: #fff; font-size: .58rem; font-weight: 800; font-family: var(--sans); }
.tk.A { background: var(--a); } .tk.B { background: var(--b); }
.mrow .mid-v { grid-column: 1 / -1; font-family: var(--display); font-style: italic; color: var(--brass); font-size: .74rem; padding: 1px 0 1px 23px; }
.mrow .mstatus { grid-row: 2 / 5; grid-column: 2; text-align: right; font-family: var(--display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.mrow .mstatus small { display: block; font-family: var(--sans); font-weight: 700; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-2); margin-top: 2px; }
.lead-A { color: var(--a); } .lead-B { color: var(--b); } .tie { color: var(--ink-soft); }
.pre { color: var(--brass-2); font-family: var(--sans) !important; font-weight: 700 !important; font-size: .72rem !important; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- leaderboard ---------- */
.lb-cta {
  display: block; width: calc(100% - 32px); margin: 18px 16px 4px; text-align: left; position: relative;
  background: linear-gradient(150deg, var(--green-2), var(--green) 78%); color: #f4edda;
  border: 0; border-top: 2px solid var(--brass); border-bottom: 2px solid var(--brass);
  padding: 15px 18px; cursor: pointer;
}
.lb-cta:active { filter: brightness(1.08); }
.lb-cta-t { display: block; font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: #fff; }
.lb-cta-s { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #d8c99a; font-weight: 700; margin-top: 2px; }
.lb-cta-go { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--brass); font-size: 1.5rem; }

.lb-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px 8px; border-bottom: 1px solid var(--rule-2);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.lb-row:active { background: rgba(169,132,60,.09); }
.lb-pos { width: 32px; flex: none; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--ink-soft); text-align: center; }
.lb-name { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.lb-name .tk { width: 16px; height: 16px; border-radius: 4px; flex: none; display: grid; place-items: center; color: #fff; font-size: .58rem; font-weight: 800; }
.lb-name small { flex-basis: 100%; font-family: var(--sans); font-weight: 600; font-size: .68rem; color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
.lb-score { flex: none; min-width: 48px; text-align: right; font-family: var(--display); font-weight: 800; font-size: 1.4rem; }
.lb-score.lb-u { color: var(--under); } .lb-score.lb-o { color: var(--over); } .lb-score.lb-e { color: var(--green); }
.lb-pay { font-family: var(--sans); font-size: .6rem; font-weight: 800; letter-spacing: .03em; background: var(--brass); color: #fff; padding: 1px 6px; border-radius: 4px; }
.lb-money .lb-pos { color: var(--brass); }
.lb-money-1 { background: linear-gradient(90deg, rgba(169,132,60,.15), transparent 55%); }
.lb-idle { opacity: .5; cursor: default; }
.lb-idle-t { font-family: var(--display); color: var(--ink-soft); font-size: 1.1rem; }
.lb-total { flex: none; display: flex; align-items: center; gap: 8px; }
.lb-caret { color: var(--brass); font-size: .8rem; width: 12px; }
.lb-item.open .lb-row { background: rgba(169,132,60,.07); }

/* expanded per-round breakdown */
.lb-detail { background: var(--paper-2); border-bottom: 1px solid var(--rule-2); padding: 4px 20px 10px 64px; }
.lb-d { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--rule-2); }
.lb-d:last-child { border-bottom: 0; }
.lb-d-t { flex: 1; font-family: var(--display); font-weight: 700; font-size: .96rem; color: var(--ink); }
.lb-d-t em { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-2); }
.lb-d-s { font-family: var(--sans); font-weight: 700; font-size: .9rem; color: var(--ink-soft); min-width: 58px; text-align: right; }
.lb-d-s small { font-size: .62rem; color: var(--brass-2); letter-spacing: .04em; text-transform: uppercase; }
.lb-d-x { margin-left: auto; color: var(--ink-soft); }
.lb-d-p { font-family: var(--display); font-weight: 800; font-size: 1.05rem; min-width: 40px; text-align: right; }
.lb-d-p.lb-u { color: var(--under); } .lb-d-p.lb-o { color: var(--over); } .lb-d-p.lb-e { color: var(--green); }
.lb-d-tot { border-top: 2px solid var(--brass); border-bottom: 0; margin-top: 2px; padding-top: 9px; }
.lb-d-tot .lb-d-t { color: var(--green); }

/* ---------- team scores ---------- */
.tm-board {
  display: flex; align-items: stretch; margin: 16px 20px 6px;
  border: 1px solid var(--rule-2); border-radius: 12px; overflow: hidden;
  background: var(--paper-2);
}
.tm-side { flex: 1; text-align: center; padding: 14px 8px 10px; }
.tm-side .tname { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tm-side .tpts { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1.15; }
.tm-side.A .tpts { color: var(--a); } .tm-side.B .tpts { color: var(--b); }
.tm-side.lead { background: linear-gradient(180deg, rgba(169,132,60,.16), transparent 80%); }
.tm-side.lead .tname { color: var(--brass-2); }
.tm-mid { flex: none; display: grid; place-items: center; padding: 0 4px; color: var(--brass-2);
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.tm-need { text-align: center; font-size: .68rem; color: var(--ink-soft); padding: 4px 20px 10px; }
.tm-need b { color: var(--brass-2); font-weight: 700; }

.tm-course-pts { font-family: var(--display); font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.tm-course-pts .pA { color: var(--a); } .tm-course-pts .pB { color: var(--b); }
.tm-course-pts .d { color: var(--ink-soft); font-weight: 600; padding: 0 3px; }

.tm-detail { background: var(--paper-2); border-bottom: 1px solid var(--rule-2); padding: 4px 20px 10px; }
.tm-match { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--rule-2); cursor: pointer; }
.tm-match:last-child { border-bottom: 0; }
.tm-names { flex: 1; min-width: 0; font-size: .78rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; }
.tm-names .tA { color: var(--a); } .tm-names .tB { color: var(--b); }
.tm-names .v { font-size: .6rem; color: var(--ink-soft); }
.tm-segs { flex: none; display: flex; gap: 4px; }
.tm-pts { flex: none; min-width: 44px; text-align: right; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.tm-pts .pA { color: var(--a); } .tm-pts .pB { color: var(--b); }
.tm-tbd { color: var(--ink-soft); font-size: .78rem; cursor: default; }

.seg { display: inline-grid; place-items: center; min-width: 27px; height: 20px; padding: 0 5px;
  border-radius: 5px; font-family: var(--sans); font-weight: 800; font-size: .58rem; letter-spacing: .05em; }
.seg-A { background: var(--a); color: #fff; }
.seg-B { background: var(--b); color: #fff; }
.seg-T { background: var(--brass); color: #fff; }
.seg-pre { border: 1px dashed var(--rule-2); color: var(--ink-soft); }
.seg-live { border: 1.5px solid currentColor; background: transparent; }
.seg-live.seg-lA { color: var(--a); } .seg-live.seg-lB { color: var(--b); } .seg-live.seg-lT { color: var(--brass-2); }

/* ---------- drink tracker ---------- */
.dr-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-bottom: 1px solid var(--rule); }
.dr-crown { width: 22px; flex: none; text-align: center; font-size: .95rem; }
.dr-row .tk { width: 16px; height: 16px; border-radius: 4px; flex: none; display: grid; place-items: center; color: #fff; font-size: .58rem; font-weight: 800; }
.dr-name { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-n { flex: none; min-width: 34px; text-align: right; font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--green); }
.dr-btn { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rule-2);
  font-size: 1.35rem; font-weight: 700; display: grid; place-items: center; cursor: pointer; line-height: 1; padding-bottom: 2px; }
.dr-plus { background: var(--green); color: #fff; border-color: var(--green); }
.dr-plus:active { background: var(--green-2); }
.dr-minus { background: none; color: var(--ink-soft); }
.dr-minus:active { background: rgba(169,132,60,.12); }

/* ---------- photos ---------- */
.cb-cam { margin-left: auto; flex: none; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid rgba(216,201,154,.45); background: rgba(255,255,255,.08); font-size: 1.15rem; cursor: pointer; }
.cb-cam:active { background: rgba(255,255,255,.18); }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 12px 16px; }
.ph-cell { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: var(--paper-3); border-radius: 6px; overflow: hidden; cursor: pointer; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tag { position: absolute; left: 4px; bottom: 4px; background: rgba(20,24,16,.72); color: #f4edda;
  font-size: .56rem; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; max-width: calc(100% - 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-badge { border: 0; background: rgba(169,132,60,.16); color: var(--brass-2); border-radius: 4px;
  font-size: .62rem; font-weight: 700; padding: 1px 5px; margin-left: 5px; cursor: pointer; vertical-align: 1px; }
.ph-view { justify-content: center; }
.ph-full { position: relative; margin: 0 14px; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--paper); border-radius: 12px; overflow: hidden; border: 1px solid var(--rule-2);
  opacity: 0; transform: scale(.96); transition: all .18s ease; }
.sheet-wrap.show .ph-full { opacity: 1; transform: none; }
.ph-full img { width: 100%; max-height: 68vh; object-fit: contain; background: #1c1f17; display: block; }
.ph-cap { padding: 10px 14px; font-family: var(--display); font-weight: 700; font-size: .98rem; color: var(--green); }
.ph-cap small { display: block; font-family: var(--sans); font-weight: 600; font-size: .68rem; color: var(--ink-soft); margin-top: 2px; }
.ph-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 10px;
  font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.ph-nav button { width: 44px; height: 34px; border: 1px solid var(--rule-2); border-radius: 8px; background: none;
  font-size: 1.1rem; color: var(--brass-2); cursor: pointer; }
.ph-nav button:disabled { opacity: .3; }
.ph-form { padding: 10px 20px 4px; display: grid; gap: 10px; }
.ph-form label { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ph-form select, .ph-form input { flex: 1; font-family: var(--sans); font-size: 1rem; padding: 9px 10px;
  border: 1px solid var(--rule-2); border-radius: 8px; background: var(--paper); color: var(--ink); min-width: 0; }
.sheet-item.post { justify-content: center; color: var(--green); }

/* upload progress overlay */
.up-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(20,24,16,.55); }
.up-card { background: var(--paper); border: 1px solid var(--rule-2); border-top: 3px double var(--brass);
  border-radius: 14px; padding: 26px 30px; text-align: center; min-width: 220px; max-width: 82vw;
  box-shadow: 0 18px 50px rgba(20,24,16,.35); }
.up-spin { width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--rule-2); border-top-color: var(--green); animation: up-rot .8s linear infinite; }
@keyframes up-rot { to { transform: rotate(360deg); } }
.up-big { font-size: 2rem; margin-bottom: 6px; }
.up-t { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--green); }
.up-s { font-size: .78rem; color: var(--ink-soft); margin-top: 5px; }
.up-btns { display: flex; gap: 10px; margin-top: 16px; }
.up-btns button { flex: 1; padding: 11px 0; border-radius: 9px; font-family: var(--sans); font-weight: 700; font-size: .92rem; cursor: pointer; }
.up-retry { background: var(--green); color: #fff; border: 0; }
.up-retry:active { background: var(--green-2); }
.up-cancel { background: none; color: var(--ink-soft); border: 1px solid var(--rule-2); }

/* ---------- roster ---------- */
.prow { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.prow .ptk { width: 16px; height: 16px; border-radius: 4px; flex: none; display: grid; place-items: center; color: #fff; font-size: .6rem; font-weight: 800; }
.prow .ptk.A { background: var(--a); } .prow .ptk.B { background: var(--b); }
.prow .pname { flex: 1; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.prow .cbadge { font-family: var(--sans); font-size: .58rem; font-weight: 800; letter-spacing: .05em; background: var(--brass); color: #fff; padding: 1px 5px; border-radius: 4px; vertical-align: middle; margin-left: 4px; }
.prow .phcp { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--green); text-align: right; line-height: 1; }
.prow .phcp small { display: block; font-family: var(--sans); font-weight: 700; font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-2); margin-top: 2px; }

/* ---------- scorecard ---------- */
.course-band {
  background: linear-gradient(150deg, var(--green-2), var(--green) 70%);
  color: #f4edda; padding: 16px 20px; display: flex; align-items: center; gap: 14px;
}
.course-band .cb-logo { height: 34px; flex: none; opacity: .95; }
.course-band .cb-t h2 { font-size: 1.5rem; color: #fff; }
.course-band .cb-t .cb-meta { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #d8c99a; font-weight: 700; margin-top: 3px; }

.sc-status {
  position: sticky; top: 0; z-index: 20; background: var(--paper);
  padding: 13px 20px; display: flex; align-items: center; gap: 14px;
  border-bottom: 2px solid var(--brass);
}
.sc-status .big { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.sc-status .sub { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; margin-top: 3px; }
.sc-status .thru { margin-left: auto; text-align: right; }
.sc-status .thru .t1 { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; }
.sc-status .thru .t2 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.scard { border-collapse: collapse; width: 100%; font-family: var(--sans); }
table.scard th, table.scard td { padding: 0; text-align: center; }

table.scard thead th {
  position: sticky; top: 0; background: var(--green); color: #f0e6cb;
  font-weight: 700; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 4px; border-right: 1px solid rgba(255,255,255,.12);
}
table.scard thead th small { display: block; font-size: .54rem; letter-spacing: .12em; color: #c2b070; margin-top: 2px; font-weight: 700; }
.colhead-A { box-shadow: inset 0 -3px 0 var(--a); }
.colhead-B { box-shadow: inset 0 -3px 0 var(--b); }

.hcol { text-align: left !important; position: sticky; left: 0; z-index: 2; background: var(--paper-2); min-width: 96px; padding: 8px 8px 8px 14px !important; border-right: 1px solid var(--rule-2); }
thead .hcol { background: var(--green); z-index: 4; }
.hrow td { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.hrow:nth-child(even) td { background: rgba(197,177,131,.14); }
.hrow:nth-child(even) .hcol { background: var(--paper-3); }
.hnum { font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.hmeta { display: block; font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-top: -2px; }
.winflag { font-size: .7rem; margin-left: 3px; }
.winflag.A { color: var(--a); } .winflag.B { color: var(--b); }

.scell { position: relative; }
.pips {
  position: absolute; top: 3px; left: 6px; z-index: 2; pointer-events: none;
  color: var(--under); font-size: .62rem; line-height: .5; letter-spacing: -.5px; font-weight: 900;
}
.score-in {
  width: 46px; height: 44px; border: 0; background: transparent; text-align: center;
  font-family: var(--sans); font-size: 1.1rem; font-weight: 700; color: var(--ink);
  -moz-appearance: textfield; border-radius: 0;
}
.score-in:focus { outline: none; background: rgba(28,90,57,.12); box-shadow: inset 0 0 0 2px var(--brass); }
.score-in::-webkit-outer-spin-button, .score-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* birdies circled, bogeys squared — the scorecard signature */
.mark { display: inline-grid; place-items: center; position: relative; }
.mark .score-in { position: relative; z-index: 1; }
.mark::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 32px; height: 32px; pointer-events: none;
}
.mark.sc-birdie::before { border: 1.5px solid var(--under); border-radius: 50%; }
.mark.sc-eagle::before  { border: 1.5px solid var(--under); border-radius: 50%; box-shadow: 0 0 0 3px transparent, inset 0 0 0 3px var(--paper), 0 0 0 0 var(--under); }
.mark.sc-eagle::after   { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 38px; height: 38px; border: 1.5px solid var(--under); border-radius: 50%; pointer-events: none; }
.mark.sc-bogey::before  { border: 1.5px solid var(--over); border-radius: 3px; }
.mark.sc-double::before { border: 1.5px solid var(--over); border-radius: 3px; }
.mark.sc-double::after  { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 38px; height: 38px; border: 1.5px solid var(--over); border-radius: 4px; pointer-events: none; }
.mark.sc-birdie .score-in, .mark.sc-eagle .score-in { color: var(--under); }
.mark.sc-bogey .score-in, .mark.sc-double .score-in { color: var(--over); }

.totrow td { border-top: 2px solid var(--brass); background: var(--paper-2); font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--green); padding: 10px 4px; }
.totrow td small { display: block; font-family: var(--sans); font-weight: 700; font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-2); margin-top: 1px; }
.totrow .hcol { background: var(--paper-2); font-family: var(--sans); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-2); }

.sc-note { padding: 14px 20px 4px; font-size: .82rem; color: var(--ink-soft); }
.sc-note b { color: var(--green); }

/* ---------- info ---------- */
.purse { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 20px 4px; }
.purse .p { border: 1px solid var(--rule-2); padding: 10px 16px; }
.purse .p .k { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; }
.purse .p .v { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--green); }
.purse .p.buy { background: var(--green); border-color: var(--green); }
.purse .p.buy .k { color: #c2b070; } .purse .p.buy .v { color: #fff; }

.rule-item { display: flex; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--rule); }
.rule-item:last-child { border-bottom: 0; }
.rule-item .rnum { font-family: var(--display); font-style: italic; font-weight: 700; color: var(--brass); font-size: 1.3rem; width: 26px; flex: none; text-align: right; line-height: 1.3; }
.rule-item .rb b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--green); }
.rule-item .rb p { margin: 3px 0 0; font-size: .9rem; }

/* ---------- footer ---------- */
.footer { text-align: center; padding: 30px 20px 22px; }
.footer img { height: 40px; opacity: .8; margin-bottom: 10px; }
.footer .fl { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; }
.footer .fs { font-size: .78rem; color: var(--ink-soft); margin-top: 6px; }

/* ---------- misc ---------- */
.live-dot { position: fixed; right: 12px; bottom: 12px; width: 8px; height: 8px; border-radius: 50%; background: #b7ab88; opacity: .5; transition: background .3s, opacity .3s; z-index: 50; }
.live-dot.on { background: var(--green-2); opacity: 1; box-shadow: 0 0 8px rgba(28,90,57,.6); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; font-size: .84rem; z-index: 60; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; letter-spacing: .02em; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }