/* ui-kit.css -- the CSS of all eighteen components in UI-KIT.md, copied out of
   data/items.js VERBATIM by tools/export-kit.js. Do not edit here: change the
   component in UI Stock and export again. Placement lives in index.html and pad.html. */

/* ===== Scorecard ===== */
.gf-card {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-card[data-theme="light"], [data-theme="light"] .gf-card {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-card {
  font-family: var(--gf-font);
  width: 336px;
  padding: 8px 9px 8px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.gf-card__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--gf-ink-2); }
.gf-card__grid { display: grid; grid-template-columns: 60px 1fr 46px; row-gap: 3px; align-items: center; }
.gf-card__holes { display: grid; gap: 2px; }
.gf-card__lbl { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); padding-left: 3px; }
.gf-card__num, .gf-card__par { text-align: center; font-size: 9px; font-weight: 800; color: var(--gf-ink-2); }
.gf-card__par { font-size: 10px; }
.gf-card__tot { text-align: right; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--gf-ink-2); padding-right: 3px; }
/* one row per golfer: a colour bar, the name, then the holes in play */
.gf-card__who { display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding-left: 3px; border-left: 3px solid var(--gf-card-p, var(--gf-line)); border-radius: 2px; }
.gf-card__who b { font-size: 11px; font-weight: 900; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-card__who.is-up { background: color-mix(in srgb, var(--gf-card-p, var(--gf-ink)) 18%, transparent); }
.gf-card__s {
  height: 22px; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: var(--gf-ink);
  background: var(--gf-sunk); border-radius: 3px;
}
.gf-card__s.is-now { box-shadow: inset 0 0 0 1.5px var(--gf-fairway); background: color-mix(in srgb, var(--gf-fairway) 24%, var(--gf-sunk)); }
.gf-card__s i { font-style: normal; display: grid; place-items: center; width: 17px; height: 17px; }
.gf-card__s.is-birdie i { color: var(--gf-good); box-shadow: inset 0 0 0 1.5px var(--gf-good); border-radius: 50%; }
.gf-card__s.is-eagle i { color: var(--gf-on-bright); background: var(--gf-call); border-radius: 50%; }
.gf-card__s.is-bogey i { color: var(--gf-ink-2); }
.gf-card__s.is-worse i { color: var(--gf-bad); box-shadow: inset 0 0 0 1.5px var(--gf-bad); border-radius: 3px; }
.gf-card__s.is-new { animation: gf-card-pop .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes gf-card-pop { from { transform: scale(1.9); } to { transform: none; } }
.gf-card__sum { text-align: right; padding-right: 3px; line-height: 1.05; }
.gf-card__sum b { display: block; font-size: 14px; font-weight: 900; }
.gf-card__sum span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--gf-ink-2); }
.gf-card__sum span.is-under { color: var(--gf-good); }
.gf-card__sum span.is-over { color: var(--gf-ink-2); }
.gf-card__foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 2px 0 4px; border-top: 1px solid var(--gf-line); }
.gf-card__status { margin-right: auto; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-card__status em { font-style: normal; color: var(--gf-call); }
.gf-card__next {
  flex: none; border: 0; border-radius: 8px; cursor: pointer; padding: 7px 12px;
  font: 900 10.5px/1 var(--gf-font); letter-spacing: .12em;
  color: var(--gf-on); background: var(--gf-fairway);
  box-shadow: 0 3px 0 var(--gf-fairway-deep);
}
.gf-card__next:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gf-fairway-deep); }
.gf-card__next:focus-visible { outline: 2px solid var(--gf-call); outline-offset: 2px; }

/* ===== Hole Info ===== */
.gf-hole {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-hole[data-theme="light"], [data-theme="light"] .gf-hole {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-hole {
  font-family: var(--gf-font);
  width: 252px;
  padding: 10px 11px 9px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.gf-hole__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--gf-ink-2); }
.gf-hole__head b { font-size: 17px; font-weight: 900; color: var(--gf-ink); letter-spacing: .02em; }
.gf-hole__par { color: var(--gf-ink); font-size: 12px; }
.gf-hole__map { display: block; width: 100%; height: auto; border-radius: 9px; }
.gf-hole__turf { fill: var(--gf-rough); }
.gf-hole__fair { fill: none; stroke: var(--gf-fairway); stroke-linecap: round; stroke-linejoin: round; }
.gf-hole__mow { fill: none; stroke: color-mix(in srgb, var(--gf-fairway) 78%, var(--gf-on)); stroke-width: 3; stroke-dasharray: 9 9; stroke-linecap: butt; }
.gf-hole__sand { fill: var(--gf-sand); }
.gf-hole__water { fill: var(--gf-water); }
.gf-hole__green { fill: var(--gf-green); }
.gf-hole__tee { fill: var(--gf-green); }
.gf-hole__pole { stroke: var(--gf-on); stroke-width: 1.8; }
.gf-hole__flag { fill: var(--gf-flag); }
.gf-hole__cup { fill: var(--gf-fairway-deep); }
.gf-hole__line { fill: none; stroke: var(--gf-ink); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; }
.gf-hole__ball { fill: var(--gf-ball); stroke: var(--gf-fairway-deep); stroke-width: 1; }
.gf-hole__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 2px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--gf-ink-2); }
.gf-hole__foot b { font-size: 14px; font-weight: 900; color: var(--gf-ink); }
.gf-hole__left { margin-right: auto; }
.gf-hole__left b { color: var(--gf-call); }
.gf-hole__strokes { display: inline-flex; gap: 3px; }
.gf-hole__strokes i { width: 7px; height: 7px; border-radius: 50%; background: var(--gf-sunk); }
.gf-hole__strokes i.is-on { background: var(--gf-ball); }

/* ===== Shot Call ===== */
.gf-call {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-call[data-theme="light"], [data-theme="light"] .gf-call {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-call {
  font-family: var(--gf-font);
  width: 340px; height: 104px;
  display: grid; place-items: center;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.gf-call__pill {
  --gf-call-bar: var(--gf-fairway);
  max-width: 100%;
  filter: drop-shadow(0 8px 14px var(--gf-shadow));
  opacity: 0;
}
.gf-call__pill.is-in { animation: gf-call-in .36s cubic-bezier(.2,1.4,.4,1) both; }
.gf-call__pill.is-out { animation: gf-call-out .2s ease-in both; }
@keyframes gf-call-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes gf-call-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.94); } }
/* a ribbon with pointed ends, not a rounded button */
.gf-call__band {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 190px; height: 62px; padding: 0 34px;
  box-sizing: border-box;
  background: var(--gf-panel); color: var(--gf-ink);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  white-space: nowrap;
}
.gf-call__text { font-size: 28px; line-height: 1; font-weight: 900; letter-spacing: .05em; }
.gf-call__bar {
  position: absolute; left: 50%; bottom: 8px; width: 46%; height: 3px; margin-left: -23%;
  border-radius: 2px; background: var(--gf-call-bar);
  transform: scaleX(0);
}
.gf-call__pill.is-in .gf-call__bar { animation: gf-call-bar .4s .15s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes gf-call-bar { to { transform: scaleX(1); } }
/* the good calls carry a pin on both sides, so the word stays on centre */
.gf-call__mark { display: none; width: 24px; height: 24px; flex: none; }
.gf-call__pole { fill: none; stroke: var(--gf-ink-2); stroke-width: 2; stroke-linecap: round; }
.gf-call__cloth { fill: var(--gf-flag); transform-origin: 7px 7px; }
.gf-call__pill[data-kind="good"] .gf-call__mark, .gf-call__pill[data-kind="holed"] .gf-call__mark { display: block; }
.gf-call__pill.is-in .gf-call__cloth { animation: gf-call-wave .9s .15s ease-in-out 2; }
@keyframes gf-call-wave { 50% { transform: scaleX(.72); } }
.gf-call__pill[data-kind="good"], .gf-call__pill[data-kind="holed"], .gf-call__pill[data-kind="over"] { --gf-call-bar: var(--gf-call); }
.gf-call__pill[data-kind="good"] .gf-call__text, .gf-call__pill[data-kind="holed"] .gf-call__text { color: var(--gf-call); font-size: 32px; }
.gf-call__pill[data-kind="penalty"] { --gf-call-bar: var(--gf-bad); }
.gf-call__pill[data-kind="penalty"] .gf-call__text { color: var(--gf-bad); }
.gf-call__pill[data-kind="poor"] { --gf-call-bar: var(--gf-ink-2); }
.gf-call__pill[data-kind="poor"] .gf-call__text { color: var(--gf-ink-2); }
.gf-call__pill[data-kind="turn"] { --gf-call-bar: var(--gf-p1); }
.gf-call__pill[data-kind="turn"].is-in .gf-call__bar { animation: gf-call-bar .4s .15s cubic-bezier(.2,.8,.3,1) forwards, gf-call-wait 1.4s .6s ease-in-out infinite; }
@keyframes gf-call-wait { 50% { opacity: .35; } }

/* ===== On the Tee ===== */
.gf-up {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-up[data-theme="light"], [data-theme="light"] .gf-up {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-up {
  font-family: var(--gf-font);
  width: 264px;
  padding: 11px 14px 11px 15px;
  border-radius: var(--gf-radius);
  border-left: 5px solid var(--gf-p1);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.gf-up__k { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--gf-ink-2); }
.gf-up__left { display: none; padding: 2px 6px; border-radius: 5px; font-size: 9px; letter-spacing: .12em; color: var(--gf-on); background: var(--gf-fairway); }
.gf-up.is-left .gf-up__left { display: inline-block; }
.gf-up__names { position: relative; height: 38px; margin-top: 3px; overflow: hidden; }
.gf-up__name { position: absolute; left: 0; right: 0; top: 0; font-size: 30px; line-height: 38px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-up__name.is-in { animation: gf-up-in .45s cubic-bezier(.2,1.2,.4,1) both; }
.gf-up__name.is-out { animation: gf-up-out .3s ease-in both; }
@keyframes gf-up-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gf-up-out { to { transform: translateY(-100%); opacity: 0; } }
.gf-up__sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.gf-up__club { padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: var(--gf-on-bright); background: var(--gf-call); }
.gf-up__yards { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--gf-ink-2); }
/* READY is phone state; the laptop only mirrors it and clears it with the turn */
.gf-up__ready { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 10.5px; font-weight: 900; letter-spacing: .12em; color: var(--gf-ink-2); }
.gf-up__lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--gf-sunk); box-shadow: inset 0 0 0 1.5px var(--gf-line); }
.gf-up__ready[data-ready="1"] { color: var(--gf-good); }
.gf-up__ready[data-ready="1"] .gf-up__lamp { background: var(--gf-good); box-shadow: 0 0 0 0 var(--gf-good); animation: gf-up-pulse 1.5s ease-out infinite; }
@keyframes gf-up-pulse { to { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gf-good) 0%, transparent); } }
.gf-up__next { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--gf-line); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); }
.gf-up__next b { color: var(--gf-ink); font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .gf-up__ready[data-ready="1"] .gf-up__lamp { animation: none; } }

/* ===== Shot Trace ===== */
.gf-flight {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-flight[data-theme="light"], [data-theme="light"] .gf-flight {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-flight {
  font-family: var(--gf-font);
  width: 300px;
  display: grid; grid-template-columns: 1fr 72px; gap: 11px;
  padding: 11px 11px 11px 13px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.gf-flight__k { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--gf-ink-2); }
.gf-flight__power { display: flex; align-items: baseline; gap: 5px; margin-top: 1px; }
.gf-flight__power b { font-size: 32px; font-weight: 900; line-height: 1; }
.gf-flight__power span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--gf-ink-2); }
.gf-flight__power em { font-style: normal; color: var(--gf-call); }
.gf-flight__bar { position: relative; height: 6px; margin: 6px 0 10px; border-radius: 3px; background: var(--gf-sunk); overflow: hidden; }
.gf-flight__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--gf-fairway); transition: width .5s cubic-bezier(.2,.9,.3,1); }
.gf-flight__shape { position: relative; height: 18px; margin: 4px 0 2px; }
.gf-flight__shape::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--gf-sunk); }
.gf-flight__shape::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 12px; margin-left: -1px; background: var(--gf-ink-2); opacity: .5; }
.gf-flight__knob { position: absolute; top: 3px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--gf-flag); transition: left .5s cubic-bezier(.2,.9,.3,1); }
.gf-flight__shapev { font-size: 11.5px; font-weight: 900; letter-spacing: .05em; }
.gf-flight__nums { display: flex; gap: 12px; margin-top: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); }
.gf-flight__nums b { font-size: 15px; font-weight: 900; color: var(--gf-ink); }
.gf-flight__where { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--gf-line); font-size: 15px; font-weight: 900; letter-spacing: .05em; }
.gf-flight__where.is-good { color: var(--gf-call); }
.gf-flight__where.is-bad { color: var(--gf-bad); }
.gf-flight__map { display: block; width: 72px; height: 178px; }
.gf-flight__rough { fill: var(--gf-rough); }
.gf-flight__fair { fill: var(--gf-fairway); }
.gf-flight__mid { stroke: var(--gf-on); stroke-width: 1; stroke-dasharray: 3 6; opacity: .35; }
.gf-flight__air { fill: none; stroke: var(--gf-ball); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gf-flight__air.is-draw { animation: gf-flight-draw .7s ease-out forwards; }
@keyframes gf-flight-draw { to { stroke-dashoffset: 0; } }
.gf-flight__ground { fill: none; stroke: var(--gf-ball); stroke-width: 1.6; stroke-dasharray: 2.5 3; opacity: .8; }
.gf-flight__ball { fill: var(--gf-ball); stroke: var(--gf-fairway-deep); stroke-width: .8; }
.gf-flight.is-cancel .gf-flight__power b, .gf-flight.is-cancel .gf-flight__shapev, .gf-flight.is-cancel .gf-flight__nums b { color: var(--gf-ink-2); }

/* ===== Wind ===== */
.gf-wind {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-wind[data-theme="light"], [data-theme="light"] .gf-wind {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-wind {
  font-family: var(--gf-font);
  width: 252px;
  padding: 11px 13px 9px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.gf-wind__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 1px 6px; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--gf-ink-2); }
.gf-wind__mode { color: var(--gf-ink); font-size: 11px; letter-spacing: .12em; }
.gf-wind__body { display: flex; align-items: center; gap: 12px; }
.gf-wind__dial { width: 84px; height: 84px; flex: none; }
.gf-wind__ring { fill: var(--gf-sunk); stroke: var(--gf-line); stroke-width: 1.5; }
.gf-wind__pole { stroke: var(--gf-ink-2); stroke-width: 1.6; stroke-linecap: round; }
.gf-wind__cloth { fill: var(--gf-flag); }
.gf-wind__spin { transform-origin: 44px 44px; transition: transform .5s cubic-bezier(.3,1.2,.5,1); }
.gf-wind__arrow { fill: none; stroke: var(--gf-fairway); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.gf-wind__hub { fill: var(--gf-ink-2); }
.gf-wind.is-calm .gf-wind__arrow { stroke: var(--gf-ink-2); opacity: .3; }
.gf-wind__read { min-width: 0; }
.gf-wind__read b { font-size: 38px; font-weight: 900; line-height: 1; }
.gf-wind__unit { margin-left: 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); }
.gf-wind__dir { display: block; margin-top: 5px; min-height: 26px; line-height: 1.25; font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; color: var(--gf-call); }
.gf-wind__track { position: relative; height: 10px; margin-top: 9px; border-radius: 5px; background: var(--gf-sunk); overflow: hidden; }
.gf-wind__band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--gf-ink) 9%, transparent); }
.gf-wind__band[data-band="windy"] { background: color-mix(in srgb, var(--gf-warn) 22%, transparent); }
.gf-wind__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 5px 5px 0; background: linear-gradient(90deg, var(--gf-good), var(--gf-warn) 70%, var(--gf-bad)); background-size: 226px 100%; transition: width .5s cubic-bezier(.2,.9,.3,1); }
.gf-wind__scale { position: relative; height: 26px; margin-top: 4px; font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); }
.gf-wind__scale span { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; line-height: 1.35; }
.gf-wind__scale span i { display: block; font-style: normal; font-weight: 700; letter-spacing: 0; opacity: .75; }
.gf-wind__scale span[data-at="1.5"] { transform: translateX(-18%); }
.gf-wind__scale span[data-at="18"] { transform: translateX(-70%); }
@media (prefers-reduced-motion: reduce) { .gf-wind__spin { transition: none; } }

/* ===== The Lie ===== */
.gf-lie {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-lie[data-theme="light"], [data-theme="light"] .gf-lie {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-lie {
  font-family: var(--gf-font);
  display: inline-flex; align-items: center; gap: 12px;
  width: 296px; box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.gf-lie__swatch {
  flex: none; width: 46px; height: 46px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--gf-line);
  background: var(--gf-fairway);
}
/* each surface is the same 46px square, drawn from the same tokens */
.gf-lie[data-lie="tee"] .gf-lie__swatch,
.gf-lie[data-lie="fairway"] .gf-lie__swatch {
  background:
    repeating-linear-gradient(115deg, color-mix(in srgb, var(--gf-fairway) 82%, var(--gf-on)) 0 7px, transparent 7px 14px),
    var(--gf-fairway);
}
.gf-lie[data-lie="rough"] .gf-lie__swatch {
  background:
    repeating-linear-gradient(78deg, color-mix(in srgb, var(--gf-rough) 60%, var(--gf-on)) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(102deg, color-mix(in srgb, var(--gf-rough) 40%, var(--gf-sunk)) 0 1.5px, transparent 1.5px 6px),
    var(--gf-rough);
}
.gf-lie[data-lie="sand"] .gf-lie__swatch {
  background:
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--gf-sand) 70%, var(--gf-on-bright)) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 62%, color-mix(in srgb, var(--gf-sand) 70%, var(--gf-on-bright)) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 84%, color-mix(in srgb, var(--gf-sand) 70%, var(--gf-on-bright)) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--gf-sand) 84%, var(--gf-on)) 0 40%, transparent 41%),
    var(--gf-sand);
  background-size: 9px 9px, 13px 13px, 11px 11px, 100% 100%, 100% 100%;
}
.gf-lie[data-lie="green"] .gf-lie__swatch,
.gf-lie[data-lie="carpet"] .gf-lie__swatch {
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--gf-green) 88%, var(--gf-on-bright)) 0 5px, transparent 5px 10px),
    var(--gf-green);
}
.gf-lie[data-lie="water"] .gf-lie__swatch {
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--gf-water) 62%, var(--gf-on)) 0 1.5px, transparent 1.5px 8px),
    var(--gf-water);
}
.gf-lie[data-lie="ob"] .gf-lie__swatch {
  background:
    repeating-linear-gradient(45deg, var(--gf-bad) 0 6px, var(--gf-sunk) 6px 12px);
}
.gf-lie__words { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
.gf-lie__name { font-size: 16px; font-weight: 900; letter-spacing: .05em; white-space: nowrap; }
.gf-lie__note { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; color: var(--gf-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-lie__pen { display: none; flex: none; padding: 5px 9px; border-radius: 7px; font-size: 13px; font-weight: 900; letter-spacing: .04em; color: var(--gf-on); background: var(--gf-bad); }
.gf-lie.is-penalty .gf-lie__pen { display: inline-block; }
.gf-lie.is-penalty .gf-lie__name { color: var(--gf-bad); }

/* ===== Phone Link ===== */
.gf-link {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-link[data-theme="light"], [data-theme="light"] .gf-link {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-link {
  font-family: var(--gf-font);
  display: inline-flex; align-items: center; gap: 9px;
  box-sizing: border-box;   /* the measured width includes padding, so the written one must too */
  height: 38px; padding: 0 14px 0 8px;
  border-radius: 999px;
  background: var(--gf-panel); color: var(--gf-ink);
  box-shadow: 0 6px 20px var(--gf-shadow);
  overflow: hidden; white-space: nowrap; cursor: pointer;
  transition: width .35s cubic-bezier(.3,1,.4,1);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.gf-link__icon { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gf-raised); }
.gf-link__icon svg { width: 12px; height: 16px; }
.gf-link__icon rect { fill: none; stroke: var(--gf-ink); stroke-width: 1.6; }
.gf-link__icon circle { fill: var(--gf-ink); }
.gf-link__dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--gf-panel); background: var(--gf-ink-2); }
.gf-link[data-state="waiting"] .gf-link__dot { animation: gf-link-breathe 1.6s ease-in-out infinite; }
.gf-link[data-state="connecting"] .gf-link__dot { background: var(--gf-warn); animation: gf-link-breathe .7s ease-in-out infinite; }
.gf-link[data-state="linked"] .gf-link__dot { background: var(--gf-good); }
.gf-link[data-state="lost"] .gf-link__dot { background: var(--gf-bad); }
@keyframes gf-link-breathe { 50% { transform: scale(.6); opacity: .5; } }
.gf-link__text { font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.gf-link__text em { font-style: normal; color: var(--gf-ink-2); }
.gf-link__holder { display: none; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; color: var(--gf-on); background: var(--gf-fairway); }
.gf-link[data-state="linked"] .gf-link__holder.is-set { display: inline-block; }
.gf-link[data-state="lost"] .gf-link__text { color: var(--gf-bad); }
@media (prefers-reduced-motion: reduce) { .gf-link { transition: none; } .gf-link__dot { animation: none; } }

/* ===== Round Over ===== */
.gf-over {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-over[data-theme="light"], [data-theme="light"] .gf-over {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-over {
  font-family: var(--gf-font);
  width: 306px;
  padding: 11px 13px 11px;
  border-radius: 18px;
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 18px 50px var(--gf-shadow);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.gf-over.is-in { animation: gf-over-in .45s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes gf-over-in { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.gf-over__k { font-size: 9.5px; font-weight: 800; letter-spacing: .18em; color: var(--gf-ink-2); }
.gf-over__win { margin-top: 2px; font-size: 23px; line-height: 1.05; font-weight: 900; color: var(--gf-call); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-over__list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 108px; overflow: auto; }
.gf-over__row { display: grid; grid-template-columns: 18px 1fr 74px 34px 30px; align-items: center; column-gap: 7px; height: 26px; }
.gf-over__rank { font-size: 11.5px; font-weight: 900; color: var(--gf-ink-2); text-align: center; }
.gf-over__row.is-first .gf-over__rank { color: var(--gf-on-bright); background: var(--gf-call); border-radius: 50%; height: 19px; line-height: 19px; }
.gf-over__who { min-width: 0; font-size: 12.5px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the bar hangs off level par: left of the line is under it, right is over */
.gf-over__bar { position: relative; height: 7px; border-radius: 3px; background: var(--gf-sunk); overflow: hidden; }
.gf-over__bar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--gf-line); }
.gf-over__bar i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 2px; background: var(--gf-ink-2); transition: width .7s cubic-bezier(.2,.9,.3,1), left .7s cubic-bezier(.2,.9,.3,1); transition-delay: calc(var(--gf-over-n) * 80ms + 150ms); }
.gf-over__row.is-under i { background: var(--gf-good); }
.gf-over__row.is-first i { background: var(--gf-call); }
.gf-over__par { text-align: right; font-size: 15px; font-weight: 900; }
.gf-over__row.is-under .gf-over__par { color: var(--gf-good); }
.gf-over__gross { text-align: right; font-size: 11px; font-weight: 800; color: var(--gf-ink-2); }
.gf-over__again {
  display: block; width: 100%; margin-top: 9px;
  border: 0; border-radius: 11px; cursor: pointer; padding: 10px 0 9px;
  font: 900 11.5px/1 var(--gf-font); letter-spacing: .14em;
  color: var(--gf-on); background: var(--gf-fairway); box-shadow: 0 4px 0 var(--gf-fairway-deep);
}
.gf-over__again:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gf-fairway-deep); }
.gf-over__again:focus-visible { outline: 2px solid var(--gf-call); outline-offset: 3px; }

/* ===== Golfers ===== */
.gf-golfers {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-golfers[data-theme="light"], [data-theme="light"] .gf-golfers {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-golfers {
  font-family: var(--gf-font);
  width: 300px;
  padding: 10px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
}
.gf-golfers__head { display: flex; justify-content: space-between; padding: 0 4px 7px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--gf-ink-2); }
.gf-golfers__list { list-style: none; margin: 0; padding: 0; }
.gf-golfers__row { display: grid; grid-template-columns: 16px 1fr auto auto auto auto; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 6px; margin-bottom: 3px; border-radius: 8px; background: var(--gf-raised); }
.gf-golfers__chip { width: 10px; height: 10px; border-radius: 50%; background: var(--gf-golfers-p, var(--gf-ink-2)); }
.gf-golfers__name { font-size: 13px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-golfers__row button {
  height: 22px; min-width: 22px; padding: 0 6px; border: 0; border-radius: 6px; cursor: pointer;
  font: 800 9.5px/1 var(--gf-font); letter-spacing: .08em; color: var(--gf-ink-2); background: transparent;
}
.gf-golfers__row button:hover:not(:disabled) { color: var(--gf-ink); background: var(--gf-sunk); }
.gf-golfers__row button:disabled { opacity: .3; cursor: default; }
.gf-golfers__row button:focus-visible, .gf-golfers__add button:focus-visible, .gf-golfers__add input:focus-visible { outline: 2px solid var(--gf-call); outline-offset: 1px; }
.gf-golfers__row button[aria-pressed="true"] { color: var(--gf-on); background: var(--gf-fairway); }
.gf-golfers__row .gf-golfers__del:hover { color: var(--gf-bad); }
.gf-golfers__add { display: flex; gap: 6px; margin-top: 5px; }
.gf-golfers__add input {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--gf-line); border-radius: 8px;
  font: 800 13px var(--gf-font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--gf-ink); background: var(--gf-sunk);
}
.gf-golfers__add input::placeholder { color: var(--gf-ink-2); text-transform: none; letter-spacing: 0; font-weight: 700; }
.gf-golfers__add button {
  height: 32px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
  font: 900 11px/1 var(--gf-font); letter-spacing: .12em; color: var(--gf-on); background: var(--gf-fairway);
}
.gf-golfers__add button:disabled { opacity: .4; cursor: default; }

/* ===== Pass the Phone ===== */
.gf-pass {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-pass[data-theme="light"], [data-theme="light"] .gf-pass {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-pass {
  font-family: var(--gf-font);
  width: 282px;
  padding: 11px 14px 13px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  text-align: center;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.gf-pass__stage { display: block; width: 100%; height: 62px; }
.gf-pass__arc { fill: none; stroke: var(--gf-line); stroke-width: 2; stroke-dasharray: 3 5; }
.gf-pass__who circle { fill: var(--gf-raised); stroke: var(--gf-line); stroke-width: 1.5; }
.gf-pass__from circle { stroke: var(--gf-pass-from, var(--gf-line)); }
.gf-pass__to circle { stroke: var(--gf-pass-to, var(--gf-p1)); stroke-width: 2.5; }
.gf-pass__who text { fill: var(--gf-ink); font: 900 13px var(--gf-font); }
.gf-pass__phone rect { fill: var(--gf-fairway); stroke: var(--gf-on); stroke-width: 1.5; }
.gf-pass__phone circle { fill: var(--gf-on); }
.gf-pass.is-taken .gf-pass__phone rect { fill: var(--gf-good); }
.gf-pass.is-taken .gf-pass__to circle { stroke: var(--gf-good); }
.gf-pass__k { margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--gf-ink-2); }
.gf-pass__name { margin-top: 2px; font-size: 28px; line-height: 1.12; font-weight: 900; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-pass__why { margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; color: var(--gf-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-pass.is-taken .gf-pass__why { color: var(--gf-good); }
@media (prefers-reduced-motion: reduce) { .gf-pass__phone { display: none; } }

/* ===== Holes and Wind ===== */
.gf-setup {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-setup[data-theme="light"], [data-theme="light"] .gf-setup {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-setup {
  font-family: var(--gf-font);
  width: 318px;
  margin: 0; padding: 11px 12px 12px;
  border: 0;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
}
.gf-setup__legend { float: left; width: 100%; padding: 0 4px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--gf-ink-2); }
.gf-setup__track { clear: both; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 12px; background: var(--gf-sunk); }
.gf-setup__slot { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 9px; background: var(--gf-fairway); box-shadow: 0 3px 0 var(--gf-fairway-deep); transition: transform .45s cubic-bezier(.3,1.25,.5,1); }
.gf-setup__opt { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding: 28px 0 8px; cursor: pointer; border-radius: 9px; }
.gf-setup__opt input { position: absolute; opacity: 0; pointer-events: none; }
.gf-setup__name { font-size: 12px; font-weight: 900; letter-spacing: .09em; color: var(--gf-ink-2); transition: color .25s; }
.gf-setup__pips { display: flex; gap: 3px; }
.gf-setup__pips i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--gf-ink-2) 45%, transparent); }
.gf-setup__pips i.is-on { background: var(--gf-ink-2); }
.gf-setup__opt:has(input:checked) .gf-setup__name { color: var(--gf-on); }
.gf-setup__opt:has(input:checked) .gf-setup__pips i { background: color-mix(in srgb, var(--gf-on) 35%, transparent); }
.gf-setup__opt:has(input:checked) .gf-setup__pips i.is-on { background: var(--gf-on); }
.gf-setup__opt:has(input:focus-visible) { outline: 2px solid var(--gf-call); outline-offset: -2px; }
.gf-setup__ball {
  position: absolute; z-index: 2; top: 8px; left: 4px;
  width: calc((100% - 8px) / 3); height: 18px;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.3,1.25,.5,1);
}
/* a golf ball: the dimples are the same gradient repeated on a small grid */
.gf-setup__ball::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gf-fairway-deep) 26%, transparent) 0 22%, transparent 24%) 0 0 / 4.5px 4.5px,
    radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--gf-on) 92%, transparent) 0 26%, transparent 28%),
    var(--gf-ball);
  box-shadow: 0 2px 4px var(--gf-shadow), inset -3px -3px 5px color-mix(in srgb, var(--gf-fairway-deep) 22%, transparent);
  transform: rotate(var(--gf-setup-spin, 0deg));
  transition: transform .45s cubic-bezier(.3,1.25,.5,1);
}
/* one slot is 100px wide; an 18px ball turns 360deg every 56.5px, so 637deg per slot */
.gf-setup:has(input[value="6"]:checked) .gf-setup__slot,
.gf-setup:has(input[value="6"]:checked) .gf-setup__ball { transform: translateX(100%); }
.gf-setup:has(input[value="9"]:checked) .gf-setup__slot,
.gf-setup:has(input[value="9"]:checked) .gf-setup__ball { transform: translateX(200%); }
.gf-setup:has(input[value="6"]:checked) .gf-setup__ball { --gf-setup-spin: 637deg; }
.gf-setup:has(input[value="9"]:checked) .gf-setup__ball { --gf-setup-spin: 1274deg; }
.gf-setup__wind { display: flex; gap: 6px; margin-top: 9px; }
.gf-setup__w { flex: 1; position: relative; }
.gf-setup__w input { position: absolute; opacity: 0; pointer-events: none; }
.gf-setup__w span {
  display: block; padding: 9px 0; border-radius: 9px; cursor: pointer; text-align: center;
  font-size: 10.5px; font-weight: 900; letter-spacing: .1em;
  color: var(--gf-ink-2); background: var(--gf-raised);
  transition: color .2s, background .2s;
}
.gf-setup__w:has(input:checked) span { color: var(--gf-on-bright); background: var(--gf-call); }
.gf-setup__w:has(input:focus-visible) span { outline: 2px solid var(--gf-call); outline-offset: 2px; }
.gf-setup__notes { position: relative; height: 34px; margin-top: 9px; }
.gf-setup__note, .gf-setup__wnote {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s;
}
.gf-setup__note { top: 0; color: var(--gf-ink); }
.gf-setup__wnote { top: 17px; font-weight: 700; font-size: 10.5px; color: var(--gf-ink-2); }
.gf-setup:has(input[value="3"]:checked) .gf-setup__note[data-for="3"],
.gf-setup:has(input[value="6"]:checked) .gf-setup__note[data-for="6"],
.gf-setup:has(input[value="9"]:checked) .gf-setup__note[data-for="9"],
.gf-setup:has(input[value="calm"]:checked) .gf-setup__wnote[data-for="calm"],
.gf-setup:has(input[value="breezy"]:checked) .gf-setup__wnote[data-for="breezy"],
.gf-setup:has(input[value="windy"]:checked) .gf-setup__wnote[data-for="windy"] { opacity: 1; transform: none; }

/* ===== Aim Strip ===== */
.gf-aim {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-aim[data-theme="light"], [data-theme="light"] .gf-aim {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-aim {
  font-family: var(--gf-font);
  width: 312px;
  padding: 11px 12px 12px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
/* Nothing in the header may change size while the ball moves: the label never
   wraps and the angle sits in a fixed box, so the row cannot shuffle mid-drag. */
.gf-aim__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px 8px; }
.gf-aim__k { min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--gf-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-aim__deg { flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--gf-ink-2); }
.gf-aim__deg b { display: inline-block; min-width: 4ch; text-align: right; font-size: 15px; font-weight: 900; color: var(--gf-ink); transition: color .2s; }
.gf-aim__deg.is-centre b { color: var(--gf-call); }
.gf-aim__strip {
  position: relative; height: 62px; border-radius: 10px; overflow: hidden;
  display: grid; grid-template-columns: 13% 1fr 13%;
  touch-action: none; cursor: ew-resize; outline: none;
}
.gf-aim__strip:focus-visible { box-shadow: 0 0 0 2px var(--gf-call); }
.gf-aim__rough { background: repeating-linear-gradient(82deg, color-mix(in srgb, var(--gf-rough) 62%, var(--gf-on)) 0 1.5px, transparent 1.5px 5px), var(--gf-rough); }
.gf-aim__fair {
  position: relative;
  background: repeating-linear-gradient(90deg, var(--gf-fairway) 0 15px, color-mix(in srgb, var(--gf-fairway) 84%, var(--gf-on)) 15px 30px);
}
.gf-aim__mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gf-flag); opacity: .85; }
.gf-aim__tick { position: absolute; top: 4px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: var(--gf-on); opacity: .55; }
.gf-aim__dot {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -8px 0 0 -13px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gf-fairway-deep) 26%, transparent) 0 22%, transparent 24%) 0 0 / 5px 5px,
    radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--gf-on) 92%, transparent) 0 26%, transparent 28%),
    var(--gf-ball);
  box-shadow: 0 3px 6px var(--gf-shadow), 0 0 0 2px var(--gf-on);
  transition: transform .15s;
}
.gf-aim.is-dragging .gf-aim__dot { transform: scale(1.12); }
.gf-aim.is-locked .gf-aim__strip { cursor: not-allowed; }
.gf-aim.is-locked .gf-aim__dot { box-shadow: 0 3px 6px var(--gf-shadow), 0 0 0 2px var(--gf-p1); }
.gf-aim__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; padding: 0 2px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); }
.gf-aim__yds { display: inline-block; min-width: 17ch; }
.gf-aim__yds b, .gf-aim__yds em { font-style: normal; font-weight: inherit; color: var(--gf-ink); }
.gf-aim__sign { display: inline-block; width: .8em; margin-right: 3px; text-align: center; font-style: normal; }
.gf-aim__centre { border: 0; background: var(--gf-raised); color: var(--gf-ink); cursor: pointer; padding: 5px 10px; border-radius: 6px; font: 800 10px/1 var(--gf-font); letter-spacing: .1em; }
.gf-aim__centre:focus-visible { outline: 2px solid var(--gf-call); outline-offset: 2px; }

/* ===== Ready ===== */
.gf-ready {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-ready[data-theme="light"], [data-theme="light"] .gf-ready {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-ready {
  font-family: var(--gf-font);
  width: 300px;
  padding: 12px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
}
.gf-ready__btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; height: 104px; padding: 0;
  border: 0; border-radius: 22px; cursor: pointer;
  color: var(--gf-on); background: var(--gf-fairway);
  box-shadow: 0 6px 0 var(--gf-fairway-deep);
  font-family: var(--gf-font);
  /* the iOS long-press magnifier guards, kept from bowling's HOLD button */
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.gf-ready__btn:focus-visible { outline: 3px solid var(--gf-call); outline-offset: 3px; }
.gf-ready__btn[aria-checked="true"] { background: var(--gf-p1); box-shadow: 0 2px 0 color-mix(in srgb, var(--gf-p1) 66%, var(--gf-sunk)); transform: translateY(4px); }
.gf-ready__ring { width: 58px; height: 58px; flex: none; transform: rotate(-90deg); }
.gf-ready__ring circle { fill: none; stroke-width: 6; }
.gf-ready__track { stroke: color-mix(in srgb, var(--gf-on) 25%, transparent); }
/* the ring is written every frame, so it carries no transition of its own */
.gf-ready__fill { stroke: var(--gf-on); stroke-linecap: round; stroke-dasharray: 157; stroke-dashoffset: 157; }
.gf-ready__words { display: grid; text-align: left; }
.gf-ready__main { font-size: 32px; font-weight: 900; letter-spacing: .1em; line-height: 1; }
.gf-ready__sub { margin-top: 5px; font-size: 11px; font-weight: 800; letter-spacing: .07em; opacity: .85; }
.gf-ready__said { margin-top: 10px; min-height: 16px; text-align: center; font-size: 11.5px; font-weight: 900; letter-spacing: .09em; color: var(--gf-ink-2); }
.gf-ready__said.is-good { color: var(--gf-good); }
.gf-ready__said.is-warn { color: var(--gf-warn); }
.gf-ready__said.is-bad { color: var(--gf-bad); }

/* ===== Club Pick ===== */
.gf-club {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-club[data-theme="light"], [data-theme="light"] .gf-club {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-club {
  font-family: var(--gf-font);
  width: 300px;
  padding: 10px 12px 11px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.gf-club__head { display: flex; align-items: center; gap: 8px; padding: 0 1px 7px; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--gf-ink-2); }
.gf-club__k { margin-right: auto; }
.gf-club__auto { position: relative; width: 42px; height: 22px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--gf-sunk); }
.gf-club__auto:focus-visible { outline: 2px solid var(--gf-call); outline-offset: 3px; }
.gf-club__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--gf-ink-2); transition: left .25s cubic-bezier(.3,1.4,.5,1), background .25s; }
.gf-club__auto[aria-checked="true"] .gf-club__knob { left: 23px; background: var(--gf-good); }
.gf-club__pick { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; }
.gf-club__step {
  height: 52px; border: 0; border-radius: 10px; cursor: pointer;
  font: 900 15px/1 var(--gf-font); color: var(--gf-ink); background: var(--gf-raised);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gf-club__step:hover { background: color-mix(in srgb, var(--gf-raised) 72%, var(--gf-ink)); }
.gf-club__step:active { transform: translateY(2px); }
.gf-club__step:focus-visible { outline: 2px solid var(--gf-call); outline-offset: 2px; }
.gf-club__face { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.gf-club__name { font-size: 26px; line-height: 1.05; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.gf-club__carry { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); }
.gf-club__band { position: relative; height: 8px; margin-top: 9px; border-radius: 4px; background: var(--gf-sunk); overflow: hidden; }
.gf-club__range { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gf-fairway), var(--gf-call)); transition: left .3s, width .3s; }
.gf-club.is-putt .gf-club__range { background: linear-gradient(90deg, var(--gf-green), var(--gf-call)); }
.gf-club.is-putt .gf-club__name { color: var(--gf-green); }
.gf-club__scale { display: flex; justify-content: space-between; margin-top: 5px; font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--gf-ink-2); }
.gf-club__how { color: var(--gf-ink); }

/* ===== Teeing Up ===== */
.gf-loader {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-loader[data-theme="light"], [data-theme="light"] .gf-loader {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
/* The club's own parts, and how far the swing travels. A putt is the same
   stroke, much smaller (handoff decision 5), so switching the mode changes
   only these four values - no second timeline, no second component. */
.gf-loader {
  --gf-loader-grip: var(--gf-ink-2);
  --gf-loader-shaft: color-mix(in srgb, var(--gf-ink-2) 45%, var(--gf-ink));
  --gf-loader-back: 58deg;
  --gf-loader-thru: -56deg;
  --gf-loader-far: .4;
}
.gf-loader[data-theme="light"], [data-theme="light"] .gf-loader {
  --gf-loader-grip: var(--gf-ink);
  --gf-loader-shaft: var(--gf-ink-2);
}
.gf-loader[data-mode="putt"] {
  --gf-loader-back: 20deg;
  --gf-loader-thru: -16deg;
  --gf-loader-far: .84;
}
.gf-loader {
  font-family: var(--gf-font);
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 13px 22px 12px;
  border-radius: var(--gf-radius);
  background: var(--gf-panel);
  color: var(--gf-ink);
  box-shadow: 0 10px 30px var(--gf-shadow);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.gf-loader__stage { position: relative; width: 180px; height: 92px; overflow: hidden; border-radius: 6px; }
.gf-loader__turf {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: repeating-linear-gradient(90deg, var(--gf-fairway) 0 11px, color-mix(in srgb, var(--gf-fairway) 84%, var(--gf-on)) 11px 22px);
}
.gf-loader__tee { position: absolute; left: 79px; bottom: 18px; width: 4px; height: 9px; margin-left: -2px; border-radius: 1px 1px 0 0; background: var(--gf-sand); }
.gf-loader[data-mode="putt"] .gf-loader__tee { display: none; }
/* the grip sits inside the stage and the swing is cut to a range that keeps
   the head inside it, so nothing ever pokes out of the panel */
.gf-loader__club {
  position: absolute; left: 36px; top: -1px; width: 40px; height: 70px;
  overflow: visible;
  transform-origin: 50% 5.7143%;
  animation: gf-loader-swing 2s cubic-bezier(.4,.05,.5,1) infinite;
}
.gf-loader[data-mode="putt"] .gf-loader__club { top: 6px; }
.gf-loader__grip { fill: none; stroke: var(--gf-loader-grip); stroke-width: 5.4; stroke-linecap: round; }
.gf-loader__shaft { fill: none; stroke: var(--gf-loader-shaft); stroke-width: 2.4; stroke-linecap: round; }
/* the bend that makes the silhouette say golf club rather than hockey stick */
.gf-loader__hosel { fill: none; stroke: var(--gf-loader-shaft); stroke-width: 2.8; stroke-linecap: round; }
/* On both heads the face is the straight side and the back is the rounded one:
   the driver is domed over its crown behind a short, nearly upright face, and
   the blade is flat-faced with its rear and its flange softened. */
.gf-loader__driver, .gf-loader__blade { fill: var(--gf-ink); stroke: var(--gf-ink); stroke-width: 1.5; stroke-linejoin: round; }
.gf-loader__crown, .gf-loader__sight { fill: none; stroke: var(--gf-loader-shaft); stroke-width: 1.1; stroke-linecap: round; }
.gf-loader__blade, .gf-loader__sight, .gf-loader__hosel--putt { display: none; }
.gf-loader[data-mode="putt"] .gf-loader__driver, .gf-loader[data-mode="putt"] .gf-loader__crown { display: none; }
.gf-loader[data-mode="putt"] .gf-loader__hosel:not(.gf-loader__hosel--putt) { display: none; }
.gf-loader[data-mode="putt"] .gf-loader__blade, .gf-loader[data-mode="putt"] .gf-loader__sight, .gf-loader[data-mode="putt"] .gf-loader__hosel--putt { display: block; }
@keyframes gf-loader-swing {
  0% { transform: rotate(0deg); }
  26% { transform: rotate(var(--gf-loader-back)); }
  34% { transform: rotate(0deg); }
  48% { transform: rotate(var(--gf-loader-thru)); }
  70% { transform: rotate(var(--gf-loader-thru)); }
  92%, 100% { transform: rotate(0deg); }
}
.gf-loader__ball {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gf-fairway-deep) 26%, transparent) 0 22%, transparent 24%) 0 0 / 4px 4px,
    radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--gf-on) 92%, transparent) 0 26%, transparent 28%),
    var(--gf-ball);
  box-shadow: 0 1px 3px var(--gf-shadow), 0 0 0 1px color-mix(in srgb, var(--gf-ink) 20%, transparent);
}
/* the ball waiting to be hit: gone at contact, a new one dropped in after */
.gf-loader__drop { position: absolute; left: 79px; bottom: 26px; margin-left: -6.5px; animation: gf-loader-drop 2s linear infinite; }
.gf-loader[data-mode="putt"] .gf-loader__drop { left: 71px; bottom: 20px; }
@keyframes gf-loader-drop {
  0%, 33% { transform: translateY(0); opacity: 1; }
  34%, 77% { transform: translateY(0); opacity: 0; }
  78% { transform: translateY(-52px); opacity: 1; }
  90% { transform: translateY(0); opacity: 1; }
  93% { transform: translateY(-7px); }
  96%, 100% { transform: translateY(0); opacity: 1; }
}
/* struck: an arc off the right of the stage for a full swing, a roll along the
   ground for a putt, and the ball only shrinks into the distance on the arc */
.gf-loader__fly {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  offset-path: path("M79 59 Q126 8 176 34");
  offset-rotate: 0deg;
  animation: gf-loader-fly 2s cubic-bezier(.15,.55,.5,1) infinite;
}
.gf-loader[data-mode="putt"] .gf-loader__fly {
  offset-path: path("M71 65 L176 67");
  animation-timing-function: cubic-bezier(.15,.66,.4,1);
}
@keyframes gf-loader-fly { 0%, 33% { offset-distance: 0%; } 78%, 100% { offset-distance: 100%; } }
.gf-loader__ball--air { position: absolute; left: -6.5px; top: -6.5px; opacity: 0; animation: gf-loader-air 2s linear infinite; }
@keyframes gf-loader-air {
  0%, 33% { opacity: 0; transform: scale(1); }
  34% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(var(--gf-loader-far)); }
  78%, 100% { opacity: 0; transform: scale(var(--gf-loader-far)); }
}
.gf-loader__label { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--gf-ink-2); white-space: nowrap; }
.gf-loader__label[data-for="putt"] { display: none; }
.gf-loader[data-mode="putt"] .gf-loader__label[data-for="full"] { display: none; }
.gf-loader[data-mode="putt"] .gf-loader__label[data-for="putt"] { display: block; }
@media (prefers-reduced-motion: reduce) {
  .gf-loader__club, .gf-loader__drop, .gf-loader__fly, .gf-loader__ball--air { animation-duration: 6.6s; }
}

/* ===== Fairway Divider ===== */
.gf-divider {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-divider[data-theme="light"], [data-theme="light"] .gf-divider {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-divider { display: block; width: 340px; max-width: 100%; padding: 20px 0 8px; }
.gf-divider__svg { display: block; width: 100%; height: auto; overflow: visible; }
.gf-divider__rough { fill: var(--gf-rough); }
.gf-divider__green { fill: var(--gf-green); }
.gf-divider__stripe { fill: color-mix(in srgb, var(--gf-green) 88%, var(--gf-on-bright)); }
.gf-divider__cup { fill: var(--gf-fairway-deep); }
.gf-divider__pole { fill: none; stroke: var(--gf-on); stroke-width: 3.2; stroke-linecap: round; }
.gf-divider__cloth { fill: var(--gf-flag); transform-origin: 344px -12px; }
.gf-divider__pin.is-hit .gf-divider__cloth { animation: gf-divider-wave .5s ease-in-out 3; }
@keyframes gf-divider-wave { 50% { transform: scaleX(.7) skewY(-4deg); } }
.gf-divider__ball { fill: var(--gf-ball); stroke: var(--gf-fairway-deep); stroke-width: 1; }
.gf-divider__shadow { fill: var(--gf-fairway-deep); }
.gf-divider__label { font: 800 9px var(--gf-font); letter-spacing: .16em; fill: var(--gf-ink); }
.gf-divider__labelbg { fill: var(--gf-panel); }
@media (prefers-reduced-motion: reduce) { .gf-divider__pin.is-hit .gf-divider__cloth { animation: none; } }

/* ===== The Hole ===== */
.gf-course {
  --gf-fairway: var(--c-primary, #4f9b57);
  --gf-fairway-deep: color-mix(in srgb, var(--gf-fairway) 72%, #0b1626);
  --gf-rough: #2c6135;
  --gf-green: #86cf6b;
  --gf-sand: #e8d49b;
  --gf-water: #2f80c4;
  --gf-sky: #8fc7e8;
  --gf-flag: #ff5a1f;
  --gf-ball: #f4f7f2;
  --gf-p1: #e02020;
  --gf-p2: #005090;
  --gf-p3: #9b6ef3;
  --gf-p4: #16b3a0;
  --gf-good: #35d07f;
  --gf-warn: #ffb03a;
  --gf-bad: #ff5e5e;
  --gf-call: #f2c230;
  --gf-on: #ffffff;
  --gf-on-bright: #14243d;
  --gf-panel: #14243d;
  --gf-raised: #1f3456;
  --gf-sunk: #0c1828;
  --gf-ink: #ffffff;
  --gf-ink-2: #9fb0c6;
  --gf-line: rgba(255,255,255,.12);
  --gf-shadow: rgba(6,14,28,.38);
  --gf-radius: 14px;
  --gf-font: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.gf-course[data-theme="light"], [data-theme="light"] .gf-course {
  --gf-panel: #ffffff;
  --gf-raised: #eef6f7;
  --gf-sunk: #dde9ed;
  --gf-ink: #14243d;
  --gf-ink-2: #5b7a86;
  --gf-line: #cfe0e4;
  --gf-call: #b27a00;
  --gf-good: #12a150;
  --gf-warn: #c47a00;
  --gf-bad: #d64545;
  --gf-shadow: rgba(20,36,61,.18);
}
.gf-course { position: fixed; inset: 0; overflow: hidden; background: var(--gf-rough); }
.gf-course__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gf-course__sky { fill: url(#gf-course-sky); }
.gf-course__trees { fill: color-mix(in srgb, var(--gf-rough) 70%, var(--gf-sunk)); }
.gf-course__trees2 { fill: color-mix(in srgb, var(--gf-rough) 88%, var(--gf-sunk)); }
.gf-course__rough { fill: var(--gf-rough); }
.gf-course__fair { fill: var(--gf-fairway); }
.gf-course__mow { fill: color-mix(in srgb, var(--gf-fairway) 91%, var(--gf-on)); }
.gf-course__sand { fill: var(--gf-sand); }
.gf-course__water { fill: var(--gf-water); }
.gf-course__ripple { fill: none; stroke: color-mix(in srgb, var(--gf-water) 55%, var(--gf-on)); stroke-width: 1.5; opacity: .55; }
.gf-course__green { fill: var(--gf-green); }
.gf-course__cup { fill: var(--gf-fairway-deep); }
.gf-course__tee { fill: color-mix(in srgb, var(--gf-fairway) 82%, var(--gf-on-bright)); }
.gf-course__pole { stroke: var(--gf-on); stroke-width: 2; }
.gf-course__cloth { fill: var(--gf-flag); }
.gf-course__cloth.is-wave { animation: gf-course-wave 2.6s ease-in-out infinite; }
@keyframes gf-course-wave { 50% { transform: scaleX(.74); } }
.gf-course__rail { fill: var(--gf-sand); }
.gf-course__railtop { fill: color-mix(in srgb, var(--gf-sand) 74%, var(--gf-on-bright)); }
.gf-course__block { fill: var(--gf-p2); }
.gf-course__ball { fill: var(--gf-ball); stroke: var(--gf-fairway-deep); stroke-width: 1; }
@media (prefers-reduced-motion: reduce) { .gf-course__cloth.is-wave { animation: none; } }