@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-serif-display-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter-700.woff2") format("woff2");
}

:root {
  --primary: #064E3B;
  --background: #F8E7C9;
  --secondary: #CDFF61;
  --white: #FFFFFF;
  --black: #063025;
  --map-center: #82B372;
  --map-rough: #129A5F;
  --map-deep: #064E3B;
  --score-birdie: #6AA74E;
  --score-bogey: #9B352F;
  --score-double: #C12F2C;
  --score-worse: #E62929;
  --green-pressed: #04392C;
  --lime-pressed: #A8D641;
  --white-pressed: #E7E7E7;
  --cream-pressed: #E5D2B2;
  --alert: #FFE08A;
  --green: var(--primary);
  --cream: var(--background);
  --lime: var(--secondary);
  --ink: var(--black);
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-h1: 400 48px/1.1 var(--font-display);
  --type-h2: 400 32px/1.1 var(--font-display);
  --type-h3: 400 24px/1.1 var(--font-display);
  --type-text: 400 16px/24px var(--font-body);
  --type-button: 700 14px/normal var(--font-body);
  --type-accent: 700 12px/normal var(--font-body);
  --type-small: 400 12px/normal var(--font-body);
  --type-small-bold: 700 12px/normal var(--font-body);
  --type-display-small: 400 18px/18px var(--font-display);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-height: 64px;
  --content-max: 767px;
}

* { box-sizing: border-box; }

html {
  background: var(--background);
  color: var(--ink);
  font: var(--type-text);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  background: var(--background);
  overflow-x: hidden;
}

[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { color: inherit; -webkit-tap-highlight-color: transparent; }
button, [role="button"] { touch-action: manipulation; }
img { display: block; max-width: 100%; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}

.app-shell {
  position: relative;
  width: min(100%, var(--content-max));
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--cream);
  overflow: clip;
}

main {
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
  outline: 0;
}

.page {
  min-height: calc(100dvh - var(--nav-height) - var(--safe-bottom));
  padding-bottom: 64px;
}
.content-section { padding: 32px 24px 42px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}
h1 { font: var(--type-h1); }
h2 { margin-bottom: 12px; font: var(--type-h2); }
h3 { margin-bottom: 8px; font: var(--type-h3); }
p { margin-bottom: 0; font: var(--type-text); }

.eyebrow {
  margin-bottom: 8px;
  color: var(--lime);
  font: var(--type-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared controls */
.primary-button,
.outline-button,
.secondary-button,
.ghost-button,
.text-link,
.choice-button,
.course-card,
.score-choice,
.pickup-button,
.number-choice,
.gir-choice,
.club-choice,
.short-game-option {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}

.primary-button,
.secondary-button,
.ghost-button,
.outline-button {
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--white);
  font: var(--type-button);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease, transform .18s ease;
}

.primary-button,
.secondary-button,
.ghost-button,
.outline-button { min-height: 41px; }
.primary-button--compact { min-height: 41px; padding: 8px 16px; font-size: 14px; }
.primary-button--lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.outline-button, .ghost-button { background: transparent; color: var(--ink); }
.outline-button--light { border-color: var(--white); color: var(--white); }
.secondary-button { background: var(--white); color: var(--ink); }
.primary-button:disabled,
.secondary-button:disabled,
.outline-button:disabled,
.ghost-button:disabled { background: var(--primary); border-color: var(--primary); color: var(--white); cursor: not-allowed; opacity: .45; }
.primary-button.is-committing,
.outline-button.is-committing,
.secondary-button.is-committing,
.ghost-button.is-committing,
.choice-button.is-committing,
.course-card.is-committing,
.score-choice.is-committing,
.pickup-button.is-committing,
.number-choice.is-committing,
.gir-choice.is-committing,
.club-choice.is-committing,
.club-card.is-committing,
.short-game-option.is-committing {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}
.svg-shot-zone.is-committing { stroke: var(--white); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.is-option-committing button,
.is-option-committing [role="button"] { pointer-events: none; }
.text-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: var(--type-accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Press feedback */
button:active { transition-duration: 0s; }
.primary-button:not(:disabled):active { background: var(--green-pressed); border-color: var(--green-pressed); }
.primary-button--lime:not(:disabled):active,
.bottom-nav .nav-launch:active { background: var(--lime-pressed); border-color: var(--lime-pressed); }
.secondary-button:not(:disabled):active { background: var(--white-pressed); }
.outline-button:not(:disabled):active,
.ghost-button:not(:disabled):active { background: var(--cream-pressed); }
.choice-button:not(.is-selected):active,
.course-card:not(.is-selected):active,
.score-choice:not(.is-selected):active,
.number-choice:not(.is-selected):active,
.gir-choice:not(.is-selected):active,
.club-choice:not(.is-selected):active,
.pickup-button:not(.is-selected):active,
.club-card__select:active,
.club-favorite:active,
.club-preset:not(.is-selected):active { background: var(--white-pressed); }
.short-game-option:not(.is-selected):active { background: var(--white-pressed); }
.choice-button.is-selected:active,
.course-card.is-selected:active,
.score-choice.is-selected:active,
.number-choice.is-selected:active,
.gir-choice.is-selected:active,
.club-choice.is-selected:active,
.pickup-button.is-selected:active,
.club-preset.is-selected:active { background: var(--green-pressed); }
.short-game-option.is-selected:active { background: var(--green-pressed); }
.round-action:active,
.remove-club:active,
.favorite-row button:active,
.icon-button:active { border-radius: 8px; background: var(--cream-pressed); }
.text-link:active { color: var(--green-pressed); }

/* Media heroes */
.media-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 48px 48px;
  background-image: linear-gradient(to top, var(--black) 0%, transparent 64%), var(--hero-image);
  background-position: center;
  background-size: cover;
  color: var(--white);
}
.media-hero--home { height: 50svh; }
.media-hero--setup { height: min(173px, calc(100vw * 173 / 402)); }
.media-hero--stats,
.media-hero--standard { height: min(250px, calc(100vw * 250 / 402)); }
.media-hero__copy { position: relative; z-index: 1; width: 100%; padding: 0 24px 28px; }
.media-hero h1 {
  margin: 0;
  color: var(--white);
  font: var(--type-h1);
  letter-spacing: 0;
}
.media-hero--home h1, .media-hero--setup h1 { font: var(--type-h1); }
.media-hero p { margin-top: 8px; color: var(--white); font: var(--type-text); }
.media-hero--home p { margin-top: 8px; }

/* Bottom navigation */
.bottom-nav-underlay {
  position: fixed;
  z-index: 49;
  left: 50%;
  bottom: 0;
  width: min(100%, var(--content-max));
  height: calc(var(--nav-height) + var(--safe-bottom));
  background: var(--cream);
  pointer-events: none;
  transform: translateX(-50%);
}
.bottom-nav {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--content-max));
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding: 8px 32px calc(8px + var(--safe-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--green);
  transform: translateX(-50%);
}
.bottom-nav button {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.bottom-nav .nav-item::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--black);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity .2s ease, transform .2s ease;
}
.bottom-nav img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.bottom-nav .nav-launch { width: 48px; height: 48px; padding: 12px; flex: 0 0 48px; background: var(--lime); }
.bottom-nav .nav-launch img { filter: none; }
.bottom-nav .nav-item.is-active::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bottom-nav button:active { transform: scale(.9); }

/* Home */
.page--home { position: relative; }
.page--home .media-hero--home { position: relative; z-index: 2; }
.resume-panel {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  height: 267px;
  padding: 80px 24px 32px;
  border-radius: 0 0 48px 48px;
  background: var(--green);
  color: var(--white);
}
.resume-panel h2 { margin-bottom: 12px; color: var(--white); font: var(--type-h2); }
.resume-panel p:not(.eyebrow) { font: var(--type-text); }
.resume-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.improvement-section {
  position: relative;
  z-index: 0;
  margin-top: -48px;
  padding-top: 80px;
  padding-bottom: 32px;
}
.improvement-section > p { max-width: 500px; margin-bottom: 24px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.metric-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-tile {
  display: flex;
  min-width: 0;
  height: 90px;
  min-height: 90px;
  padding: 16px 9px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--white);
  text-align: center;
}
.metric-tile span { font: var(--type-small-bold); }
.metric-tile strong { margin-top: 8px; font: var(--type-h2); }
.section-link { margin-top: 24px; }
.recent-section { padding-top: 32px; padding-bottom: 32px; }
.recent-section .section-link { margin-top: 12px; }
.short-game-promo {
  width: auto;
  margin: 0 24px 32px;
  padding: 40px 24px;
  border-radius: 24px;
  background: var(--green);
  color: var(--white);
}
.short-game-promo h2 { max-width: 440px; margin-bottom: 12px; color: var(--white); }
.short-game-promo > p:not(.eyebrow) { max-width: 540px; }
.short-game-promo__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Round rows */
.round-list { display: grid; gap: 12px; }
.round-row {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) 76px;
  align-items: center;
  min-height: 48px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--white);
}
.page--home .round-row { grid-template-columns: 63px minmax(0, 1fr) 76px; }
.rounds-page .round-row { grid-template-columns: 47px minmax(0, 1fr) 76px; }
.round-badge { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.round-badge strong { font: var(--type-display-small); }
.round-badge small { margin-top: 1px; font: 700 8px/10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.round-row__main { min-width: 0; }
.round-row__main > strong {
  display: block;
  overflow: hidden;
  font: var(--type-accent);
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.round-meta { display: block; overflow: hidden; margin-top: 3px; font: var(--type-small); text-overflow: ellipsis; white-space: nowrap; }
.round-row__actions { display: flex; justify-content: flex-end; gap: 8px; }
.round-action, .remove-club, .favorite-row button, .icon-button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 6px;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.round-action { width: 20px; height: 20px; padding: 0; }
.round-action img, .remove-club img, .favorite-row button img, .icon-button img { width: 100%; height: 100%; object-fit: contain; }
.round-action--stats img { filter: brightness(0) saturate(100%) invert(23%) sepia(20%) saturate(2175%) hue-rotate(116deg) brightness(84%) contrast(95%); }

/* Statistics */
.stats-dashboard { padding: 32px 24px 36px; }
.stats-filter { margin-bottom: 12px; }
.stats-filter__label { margin-bottom: 11px; font: var(--type-small-bold); }
.segmented-control {
  --segment-count: 1;
  --active-index: 0;
  --from-index: var(--active-index);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--segment-count),minmax(0,1fr));
  overflow: hidden;
  border-radius: 999px;
  background: var(--white);
  isolation: isolate;
}
.segmented-control__indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / var(--segment-count));
  border-radius: inherit;
  background: var(--green);
  transform: translateX(calc(var(--active-index) * 100%));
  will-change: transform;
}
.segmented-control.is-animating .segmented-control__indicator {
  animation: segmented-pill-slide .34s cubic-bezier(.22, 1, .36, 1) both;
}
.stats-filter-options { width: min(100%, 200px); min-height: 32px; }
.stats-filter-option,
.stats-tab {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: var(--type-small-bold);
  cursor: pointer;
  transition: color .2s ease;
}
.stats-filter-option { min-height: 32px; }
.stats-filter-option.is-active,
.stats-tab.is-active { color: var(--white); }
.stats-filter-option:not(.is-active):active,
.stats-tab:not(.is-active):active { background: var(--cream-pressed); }
.stats-filter-option:disabled { cursor: not-allowed; opacity: .55; }
.stats-tabs {
  width: 100%;
  min-height: 40px;
  margin-bottom: 24px;
}
.stats-tab {
  min-height: 40px;
  padding: 0 10px;
}
.stats-tab-stage,
.round-stats-stage { position: relative; overflow: hidden; }
.stats-tab-panel,
.round-stats-panel { position: relative; width: 100%; }
.stats-category-panel > h2 { margin-bottom: 10px; }
.stats-category-panel h3 { margin: 0 0 12px; font: var(--type-h3); }
.stats-subsection { margin-top: 26px; }
.stats-caption { margin-bottom: 10px; font: var(--type-small-bold); }
.stats-empty-state { padding: 28px 18px; }
.stats-empty-state .primary-button { margin-top: 18px; }
.short-game-stats-metrics .metric-tile:nth-child(5) strong { font-size: 22px; }
.short-game-stats-list { display: grid; gap: 10px; }
.short-game-stat-row { padding: 11px 12px; border-radius: 8px; background: var(--white); }
.short-game-stat-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.short-game-stat-row strong { font: var(--type-button); }
.short-game-stat-row span { font: var(--type-small); }
.short-game-stat-track { display: block; height: 6px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: var(--cream-pressed); }
.short-game-stat-track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.score-bars { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 4px; height: 188px; }
.score-bar { display: grid; grid-template-rows: minmax(0,1fr) 26px; min-width: 0; text-align: center; }
.score-bar > small { align-self: end; overflow: hidden; padding-top: 8px; font: var(--type-small-bold); text-overflow: ellipsis; }
.score-bar__track { position: relative; overflow: hidden; border-radius: 4px 4px 0 0; background: var(--white); }
.score-bar__track > strong { position: absolute; z-index: 2; top: 10px; right: 0; left: 0; font: var(--type-small-bold); text-align: center; }
.score-bar__fill { position: absolute; right: 0; bottom: 0; left: 0; display: block; min-height: 4px; border-radius: 4px 4px 0 0; background: var(--green); }
.score-bar__fill--eagle { background: var(--secondary); }
.score-bar__fill--birdie { background: var(--score-birdie); }
.score-bar__fill--par { background: var(--primary); }
.score-bar__fill--bogey { background: var(--score-bogey); }
.score-bar__fill--double { background: var(--score-double); }
.score-bar__fill--worse { background: var(--score-worse); }
.stats-shot-map { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; border-radius: 5px; background: var(--green); }
.stats-shot-map svg { display: block; width: 100%; height: 100%; }
.stats-map-labels, .shot-map-labels { position: absolute; inset: 0; pointer-events: none; }
.stats-map-labels span, .shot-map-labels span { position: absolute; color: var(--white); font-weight: 700; text-align: center; transform: translate(-50%,-50%); }
.stats-map-labels strong, .stats-map-labels small { display: block; line-height: 1.05; }
.stats-map-labels strong { font: var(--type-display-small); }
.stats-map-labels small { font: var(--type-small); }
.fairway-labels .lbl-left-deep { left: 6%; top: 50%; }
.fairway-labels .lbl-left-rough { left: 22%; top: 50%; }
.fairway-labels .lbl-fairway { left: 50%; top: 50%; }
.fairway-labels .lbl-right-rough { left: 70%; top: 50%; }
.fairway-labels .lbl-right-deep { left: 94%; top: 50%; }
.green-labels .lbl-long { left: 50%; top: 7%; }
.green-labels .lbl-left { left: 7%; top: 50%; }
.green-labels .lbl-green { left: 50%; top: 50%; }
.green-labels .lbl-right { left: 93%; top: 50%; }
.green-labels .lbl-short { left: 50%; top: 93%; }
.stats-pair { margin-top: 10px; }
.metric-tile--wide { grid-column: 1 / -1; }

/* Rounds, bag and account */
.rounds-page .content-section { padding-top: 32px; padding-bottom: 31px; }
.rounds-page .content-section > h2 { margin-bottom: 12px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; }
.bag-content { padding: 32px 24px; }
.bag-reorder-note { margin: -4px 0 12px; font: var(--type-small); }
.bag-list { display: grid; gap: 12px; }
.club-row {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto 20px;
  column-gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--white);
}
.club-row[data-bag-sortable] {
  cursor: grab;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.club-row.is-dragging {
  position: relative;
  z-index: 3;
  opacity: .9;
  box-shadow: 0 10px 24px rgb(6 48 37 / 18%);
  transform: scale(1.02);
  cursor: grabbing;
}
body.is-bag-reordering { overflow: hidden; user-select: none; }
.club-row__icon {
  width: 24px;
  height: 15px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(23%) sepia(20%) saturate(2175%) hue-rotate(116deg) brightness(84%) contrast(95%);
}
.club-name { overflow: hidden; font: var(--type-accent); letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.distance-field { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font: var(--type-small); }
.distance-field input { width: 48px; padding: 2px 0; border: 0; outline: 0; background: transparent; color: var(--ink); text-align: right; }
.distance-field input::-webkit-inner-spin-button { appearance: none; }
.remove-club { width: 20px; height: 20px; padding: 0; }
.account-content { padding-top: 32px; padding-bottom: 32px; }
.account-section + .account-section { margin-top: 32px; }
.account-section > p { margin-bottom: 12px; font: var(--type-text); }
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; margin-bottom: 4px; font: var(--type-small-bold); }
.field input,
.sync-code-input,
.custom-club-controls input {
  width: 100%;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}
.favorite-list { display: grid; gap: 12px; }
.favorite-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 6px 12px; border-radius: 8px; background: var(--white); }
.favorite-row strong { font: var(--type-accent); letter-spacing: .1em; text-transform: uppercase; }
.favorite-row button { width: 16px; height: 16px; padding: 0; }
.sync-code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.sync-code-input { font: var(--type-small-bold); letter-spacing: .1em; }
.sync-panel .text-link { margin-top: 12px; }
.sync-status { min-height: 18px; margin-top: 8px; font: var(--type-small); }
.sync-status:empty { display: none; }

/* New round */
.wizard-shell { position: relative; padding-bottom: calc(73px + var(--safe-bottom)); overflow-x: clip; animation: none; }
.wizard-body { padding: 32px 24px 30px; }
.wizard-title { max-width: 354px; margin-bottom: 12px; font: var(--type-h2); }
.wizard-copy { margin-bottom: 12px; font: var(--type-text); }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.choice-button {
  min-height: 81px;
  padding: 13px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.choice-button.is-selected, .course-card.is-selected { background: var(--green); color: var(--white); }
.choice-button strong { display: block; font: var(--type-h3); }
.choice-button small { display: block; margin-top: 8px; font: var(--type-small); }
.search-field { position: relative; display: block; margin-bottom: 24px; }
.search-field img { position: absolute; top: 50%; left: 10px; width: 16px; height: 16px; transform: translateY(-50%); }
.search-input { width: 100%; min-height: 40px; padding: 7px 12px 7px 34px; border: 1px solid var(--green); border-radius: 6px; background: var(--white); color: var(--ink); }
.course-list, .tee-list { display: grid; gap: 12px; }
.course-card {
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.wizard-body--courses .course-card { min-height: 39px; }
.wizard-body--courses .wizard-copy,
.wizard-body--tees .wizard-copy { margin-bottom: 24px; }
.club-card { display: grid; grid-template-columns: minmax(0,1fr) 38px; padding: 0; overflow: hidden; }
.club-card__select { display: flex; min-width: 0; height: 40px; padding: 0 12px; align-items: center; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.club-card__select strong, .course-option strong { font: var(--type-accent); letter-spacing: .1em; text-transform: uppercase; }
.club-favorite { display: grid; height: 40px; padding: 0; place-items: center; border: 0; background: transparent; cursor: pointer; transition: background-color .3s ease; }
.club-favorite img { width: 18px; height: 18px; transition: filter .3s ease; }
.club-card.is-selected .club-card__select,
.club-card.is-selected .club-favorite,
.club-card.is-committing .club-card__select,
.club-card.is-committing .club-favorite { background: transparent !important; color: var(--white); }
.club-card.is-selected .club-favorite img,
.club-card.is-committing .club-favorite img { filter: brightness(0) invert(1); }
.course-option, .tee-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.course-option span, .tee-card span { flex: 0 0 auto; font: var(--type-small); }
.tee-card strong { font: var(--type-display-small); }
.tee-card { min-height: 50px; }
.tee-card strong { font: var(--type-h3); }
.wizard-actions {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--safe-bottom));
  display: grid;
  grid-template-columns: minmax(92px,auto) 1fr minmax(86px,auto);
  align-items: center;
  width: min(100%, var(--content-max));
  padding: 16px;
  background: var(--cream);
  box-shadow: 0 -8px 18px rgb(6 48 37 / 8%);
  transform: translateX(-50%);
}
.wizard-actions > strong, .question-progress { font: var(--type-accent); letter-spacing: .1em; text-align: center; text-transform: uppercase; }

/* Hole entry */
.page--play { padding-bottom: 114px; }
.play-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) 60px;
  align-items: center;
  height: 116px;
  min-height: 116px;
  padding: 24px;
  border-radius: 0 0 48px 48px;
  background: var(--green);
  color: var(--white);
}
.play-kicker { display: block; overflow: hidden; color: var(--lime); font: var(--type-accent); letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.play-header h2 { overflow: hidden; margin: 4px 0; color: var(--white); font: var(--type-h3); text-overflow: ellipsis; white-space: nowrap; }
.play-header p { color: var(--white); font: var(--type-small); }
.play-points { display: flex; width: 60px; height: 60px; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--black); }
.play-points strong { font: var(--type-display-small); }
.play-points span { margin-top: 3px; font: var(--type-small); }
.question-card { position: relative; padding: 38px 24px 24px; overflow-x: clip; }
.question-carousel-panel > h1 { max-width: 354px; margin: 0 0 12px; font: var(--type-h2); }
.question-scroll .wizard-copy { margin-bottom: 18px; }
.score-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.score-choice {
  min-height: 80px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.score-counter-wrap .score-choice,
.score-counter-wrap .pickup-button { transition: background-color .24s ease, color .24s ease, border-color .24s ease; }
.score-choice.is-selected, .pickup-button.is-selected, .number-choice.is-selected, .gir-choice.is-selected, .club-choice.is-selected { background: var(--green); color: var(--white); }
.score-choice strong { display: block; font: var(--type-h2); }
.score-choice span { display: block; min-height: 14px; margin-top: 5px; font: var(--type-small); }
.pickup-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; margin-top: 24px; padding: 9px 16px; border: 1px solid var(--green); border-radius: 999px; background: transparent; cursor: pointer; }
.pickup-button strong { font: var(--type-button); }
.pickup-button span { font: var(--type-small); }
.number-selector { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.number-selector--four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.number-choice { min-height: 80px; padding: 8px 4px; border: 0; border-radius: 8px; background: var(--white); cursor: pointer; }
.number-choice strong { display: block; font: var(--type-h2); }
.gir-choice strong { display: block; font: var(--type-h3); }
.number-choice span, .gir-choice span { display: block; margin-top: 5px; font: var(--type-small); }
.gir-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.gir-choice { min-height: 81px; padding: 12px; border: 0; border-radius: 8px; background: var(--white); cursor: pointer; }
.club-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.club-choice { display: grid; grid-template-columns: 24px minmax(0,1fr); column-gap: 4px; align-items: center; min-height: 54px; padding: 10px 12px; border: 0; border-radius: 8px; background: var(--white); text-align: left; cursor: pointer; }
.club-choice img {
  width: 21px;
  height: 21px;
  filter: brightness(0) saturate(100%) invert(23%) sepia(20%) saturate(2175%) hue-rotate(116deg) brightness(84%) contrast(95%);
}
.club-choice.is-selected img, .club-choice.is-committing img { filter: brightness(0) invert(1); }
.club-choice strong { min-width: 0; font: var(--type-accent); letter-spacing: .1em; overflow-wrap: anywhere; text-transform: uppercase; white-space: normal; }
.shot-map { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--green); }
.shot-map svg { display: block; width: 100%; height: 100%; }
.svg-shot-zone { cursor: pointer; outline: none; stroke: transparent; stroke-width: 0; }
.svg-shot-zone:focus-visible,
.svg-shot-zone.is-committing { outline: none; stroke: var(--white); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.fairway-svg-center, .green-svg-center { fill: var(--map-center); }
.fairway-svg-rough, .green-svg-fringe { fill: var(--map-rough); }
.fairway-svg-deep, .green-svg-surround { fill: var(--map-deep); }
.green-svg-hole { fill: #111111; }
.svg-zone-selection { fill: none; stroke: var(--white); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.shot-map-labels span { font: var(--type-small-bold); transition: opacity .2s ease; }
.shot-map-labels span.is-selected { opacity: 0; }
.shot-map-marker {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: selection-fade-in .2s ease both;
}
.checkmark-icon { display: block; width: 24px; height: 24px; max-width: none; flex: 0 0 24px; object-fit: contain; }
.shot-map-marker .checkmark-icon { width: 24px; height: 24px; }
.shot-map-marker--left-deep { left: 6%; top: 50%; }
.shot-map-marker--left-rough { left: 22%; top: 50%; }
.shot-map-marker--fairway,
.shot-map-marker--green { left: 50%; top: 50%; }
.shot-map-marker--right-rough { left: 70%; top: 50%; }
.shot-map-marker--right-deep { left: 94%; top: 50%; }
.shot-map-marker--long { left: 50%; top: 7%; }
.shot-map-marker--left { left: 7%; top: 50%; }
.shot-map-marker--right { left: 93%; top: 50%; }
.shot-map-marker--short { left: 50%; top: 93%; }
.shot-map-note { margin-top: 10px; font: var(--type-small); }
.question-footer {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--safe-bottom));
  width: min(100%, var(--content-max));
  padding: 16px;
  background: var(--cream);
  box-shadow: 0 -8px 18px rgb(6 48 37 / 8%);
  transform: translateX(-50%);
}

.is-carousel-transitioning { overflow-x: clip; }
.is-carousel-transitioning .carousel-panel--incoming,
.is-carousel-transitioning .carousel-panel--outgoing {
  backface-visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
.is-carousel-transitioning .carousel-panel--outgoing {
  position: absolute !important;
  z-index: 1;
  margin: 0 !important;
}
.is-carousel-transitioning .carousel-panel--incoming { position: relative; z-index: 2; }
.is-page-carousel > .carousel-panel--incoming { pointer-events: auto; }
.carousel--forward .carousel-panel--incoming { animation: carousel-in-forward .36s cubic-bezier(.22, 1, .36, 1) both; }
.carousel--forward .carousel-panel--outgoing { animation: carousel-out-forward .36s cubic-bezier(.22, 1, .36, 1) both; }
.carousel--backward .carousel-panel--incoming { animation: carousel-in-backward .36s cubic-bezier(.22, 1, .36, 1) both; }
.carousel--backward .carousel-panel--outgoing { animation: carousel-out-backward .36s cubic-bezier(.22, 1, .36, 1) both; }

/* DGU Short Game Test */
.page--short-game,
.page--short-game-result { padding-bottom: 64px; }
.short-game-hero {
  padding: 48px 24px 40px;
  border-radius: 0 0 48px 48px;
  background: var(--green);
  color: var(--white);
}
.short-game-hero h1 { margin-bottom: 8px; color: var(--white); }
.short-game-hero > p { max-width: 480px; }
.short-game-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.short-game-intro { padding-bottom: 32px; }
.short-game-intro > p { max-width: 580px; }
.short-game-guide { display: grid; gap: 8px; margin-top: 24px; }
.short-game-guide-item { display: grid; grid-template-columns: 32px minmax(0,1fr) 44px; min-height: 58px; padding: 8px 10px; align-items: center; gap: 10px; border-radius: 8px; background: var(--white); }
.short-game-guide-item__number { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--green); color: var(--white); font: var(--type-button); }
.short-game-guide-item__copy { min-width: 0; }
.short-game-guide-item__copy strong { font: var(--type-button); }
.short-game-guide-item__max { display: flex; flex-direction: column; align-items: flex-end; font: var(--type-display-small); }
.short-game-guide-item__max small { font: var(--type-small); }
.short-game-history-section { padding-bottom: 36px; }
.short-game-history { display: grid; gap: 10px; }
.short-game-history-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; min-height: 58px; padding: 8px 10px; align-items: center; gap: 10px; border-radius: 8px; background: var(--white); }
.short-game-history-row__main { display: flex; min-width: 0; flex-direction: column; }
.short-game-history-row__main strong { overflow: hidden; font: var(--type-button); text-overflow: ellipsis; white-space: nowrap; }
.short-game-history-row__actions { display: flex; align-items: center; gap: 4px; }
.short-game-history-row__actions .round-action:first-child { width: auto; padding: 0 5px; font: var(--type-small-bold); }
.short-game-badge { display: block; width: 30px; height: 30px; border: 5px solid rgb(255 255 255 / 70%); border-radius: 50%; background: var(--badge-color); box-shadow: 0 0 0 1px rgb(6 48 37 / 22%); }
.short-game-badge--green { --badge-color: #2B8A55; }
.short-game-badge--purple { --badge-color: #7A4A9E; }
.short-game-badge--blue { --badge-color: #2979B8; }
.short-game-badge--bronze { --badge-color: #A96F3F; }
.short-game-badge--silver { --badge-color: #AEB8B8; }
.short-game-badge--gold { --badge-color: #D3A722; }
.short-game-badge--denmark { --badge-color: #C82C32; background-image: linear-gradient(90deg,transparent 31%,#fff 31%,#fff 43%,transparent 43%),linear-gradient(0deg,transparent 42%,#fff 42%,#fff 55%,transparent 55%); }

.page--short-game-test { min-height: 100dvh; padding-bottom: 114px; animation: none; }
.short-game-play-header { height: 109px; min-height: 109px; }
.short-game-play-header h2 { margin-top: 4px; }
.short-game-question { padding: 32px 24px 0; }
.short-game-carousel-panel > h1 { margin: 0 0 4px; font: var(--type-h2); }
.short-game-instructions > p { font: var(--type-text); }
.short-game-score-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.short-game-score-chips span { display: inline-flex; min-height: 22px; padding: 3px 12px; align-items: center; border-radius: 999px; background: var(--white); font: var(--type-small-bold); white-space: nowrap; }
.short-game-live-score { display: grid; grid-template-columns: minmax(0,1fr) 44px; min-height: 40px; margin: 24px 0 15px; align-items: start; column-gap: 12px; }
.short-game-live-score > span { display: flex; min-width: 0; flex-direction: column; }
.short-game-live-score > span:last-child { align-items: center; text-align: center; }
.short-game-live-score strong { font: var(--type-display-small); }
.short-game-live-score small { margin-top: 3px; font: var(--type-small); }
.short-game-map { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 6px; background: var(--green); }
.short-game-map__art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.short-game-map__hit { position: absolute; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.short-game-map__hit:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.short-game-map__hit--outer { z-index: 1; inset: 0; width: 100%; height: 100%; }
.short-game-map__hit--surface,
.short-game-map__hit--ring { z-index: var(--map-layer,3); top: var(--map-y); left: var(--map-x); width: var(--map-size); height: var(--map-size); border-radius: 50%; transform: translate(-50%,-50%); }
.short-game-map__hit--bunker { z-index: 3; top: 8%; left: 1%; width: 40%; height: 88%; border-radius: 45% 38% 44% 42% / 38% 42% 40% 46%; }
.short-game-map__hit--hole { z-index: 10; top: var(--map-y); left: var(--map-x); width: 36px; height: 36px; border-radius: 50%; transform: translate(-50%,-50%); }
.short-game-map__labels { position: absolute; z-index: 12; inset: 0; pointer-events: none; }
.short-game-map__labels span { position: absolute; top: var(--label-y); left: var(--label-x); color: var(--white); font: var(--type-small); text-align: center; transform: translate(-50%,-50%); transition: opacity .2s ease; white-space: nowrap; }
.short-game-map__labels span.is-selected { opacity: 0; }
.short-game-map--bunker [data-short-game-map-label="stays"] { color: var(--ink); }
.short-game-map__selection { position: absolute; z-index: 14; top: var(--marker-y); left: var(--marker-x); display: grid; width: 24px; height: 24px; place-items: center; border: 0; background: transparent; transform: translate(-50%,-50%); pointer-events: none; }
.short-game-map__selection.is-entering { animation: selection-fade-in .2s ease both; }
.short-game-map__selection .checkmark-icon { width: 24px; height: 24px; filter: none; }
.short-game-map__clock-hole { position: absolute; z-index: 5; top: 47.2%; left: 47.2%; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #161513; color: var(--white); font: var(--type-small); transform: translate(-50%,-50%); }
.short-game-clock-point { position: absolute; z-index: 7; top: var(--clock-y); left: var(--clock-x); display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); font: var(--type-small); transform: translate(-50%,-50%); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.short-game-clock-point .checkmark-icon { width: 24px; height: 24px; filter: brightness(0) saturate(100%) invert(23%) sepia(20%) saturate(2175%) hue-rotate(116deg) brightness(84%) contrast(95%); }
.short-game-clock-point.is-checked { background: var(--white); color: var(--green); }
.short-game-clock-point.is-entering { animation: selection-fade-in .2s ease both; }
.short-game-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.short-game-option { min-height: 74px; padding: 10px 8px; border: 1px solid transparent; border-radius: 8px; background: var(--white); color: var(--ink); cursor: pointer; }
.short-game-option strong, .short-game-option span { display: block; }
.short-game-option strong { font: var(--type-button); }
.short-game-option span { margin-top: 5px; font: var(--type-small); }
.short-game-option.is-selected { border-color: var(--green); background: var(--green); color: var(--white); }
.short-game-option.is-committing { animation: selection-fade-in .24s ease both; }
.short-game-footer { padding-top: 16px; }
.short-game-exercise-jump button.is-complete { background: var(--green); color: var(--white); }
.short-game-exercise-jump button.is-current { background: var(--lime); color: var(--ink); }

.short-game-result-hero { padding: 44px 24px 34px; border-radius: 0 0 48px 48px; background: var(--green); color: var(--white); text-align: center; }
.short-game-result-hero h1 { margin-bottom: 12px; color: var(--white); }
.short-game-result-total { display: flex; flex-direction: column; align-items: center; }
.short-game-result-total strong { color: var(--lime); font: 400 72px/.9 var(--font-display); }
.short-game-result-total span { margin-top: 8px; font: var(--type-small); }
.short-game-result-badge { display: inline-flex; margin-top: 20px; padding: 7px 14px 7px 8px; align-items: center; gap: 9px; border-radius: 999px; background: var(--white); color: var(--ink); }
.short-game-result-badge .short-game-badge { width: 28px; height: 28px; }
.short-game-result-badge strong { font: var(--type-button); }
.short-game-result-content { padding-bottom: 38px; }
.short-game-breakdown { display: grid; gap: 8px; }
.short-game-breakdown-row { display: flex; min-height: 54px; padding: 8px 12px; align-items: center; justify-content: space-between; gap: 12px; border-radius: 8px; background: var(--white); }
.short-game-breakdown-row > span { display: flex; min-width: 0; flex-direction: column; }
.short-game-breakdown-row > span strong { font: var(--type-button); }
.short-game-breakdown-row small { font: var(--type-small); }
.short-game-breakdown-row > strong { font: var(--type-h3); }
.short-game-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.question-progress { display: block; margin-bottom: 8px; }
.question-navigation { display: grid; grid-template-columns: minmax(92px,auto) minmax(0,1fr) minmax(86px,auto); align-items: center; gap: 8px; }
.question-navigation > .outline-button { justify-self: start; }
.question-navigation > .primary-button { justify-self: end; }
.hole-jump { display: flex; min-width: 0; justify-content: flex-start; gap: 6px; margin: 0; overflow-x: auto; scrollbar-width: none; }
.hole-jump::-webkit-scrollbar { display: none; }
.hole-jump button { width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); font: var(--type-button); cursor: pointer; }
.hole-jump button.is-complete { background: var(--green); color: var(--white); }
.hole-jump button.is-current { background: var(--lime); color: var(--ink); }
.edit-save-button { width: 100%; margin-top: 8px; }

/* Sheet, empty states and feedback */
.empty-state { padding: 30px 18px; border-radius: 8px; background: var(--white); text-align: center; }
.empty-state--inline { padding: 18px; }
.empty-state .primary-button { margin-top: 18px; }
.data-note { margin-top: 16px; padding: 10px 12px; border-radius: 8px; background: var(--alert); font: var(--type-small); }
.modal-backdrop { position: fixed; z-index: 80; inset: 0; background: var(--black); opacity: .58; }
.sheet {
  position: fixed;
  z-index: 90;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, var(--content-max));
  max-height: 88dvh;
  margin: 0 auto;
  padding: 22px 24px calc(24px + var(--safe-bottom));
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  background: var(--cream);
}
.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.sheet-header .eyebrow { color: var(--green); }
.sheet-header h2 { margin: 0; }
.bag-sheet-summary { margin-bottom: 12px; }
.sheet-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.selection-count { font-weight: 700; }
.bag-sheet-scroll { display: grid; gap: 18px; }
.club-group h3 { font: var(--type-h3); }
.club-preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.club-preset { min-height: 41px; padding: 10px 16px; border: 1px solid var(--green); border-radius: 999px; background: var(--white); color: var(--ink); font: var(--type-button); cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease; }
.club-preset.is-selected { background: var(--green); color: var(--white); }
.club-preset.is-added,
.club-preset:disabled { background: var(--white); color: var(--ink); opacity: .38; cursor: not-allowed; }
.custom-club-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.custom-club-controls button { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--green); color: var(--white); font: var(--type-button); }
.bag-sheet-footer { margin-top: 20px; }
.bag-sheet-footer .primary-button { width: 100%; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px); width: min(calc(100% - 32px), calc(var(--content-max) - 32px)); padding: 10px 16px; border-radius: 999px; background: var(--lime); color: var(--ink); font: var(--type-button); opacity: 0; pointer-events: none; text-align: center; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.has-confirm-dialog { overflow: hidden; }
.confirm-backdrop { position: fixed; z-index: 130; inset: 0; display: grid; padding: 24px; place-items: center; background: rgb(6 48 37 / 58%); }
.confirm-dialog { width: min(100%, 360px); padding: 24px; border-radius: 16px; background: var(--green); color: var(--white); box-shadow: 0 18px 48px rgb(6 48 37 / 24%); animation: selection-fade-in .2s ease both; }
.confirm-dialog h2 { margin-bottom: 8px; color: var(--white); }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }

/* Round completion */
.round-complete-page { padding-bottom: 64px; }
.round-complete-hero {
  position: relative;
  display: flex;
  min-height: 116px;
  padding: 24px 100px 24px 24px;
  align-items: center;
  border-radius: 0 0 48px 48px;
  background: var(--green);
  color: var(--white);
  text-align: left;
}
.round-complete-hero__copy { min-width: 0; }
.round-complete-hero .eyebrow { overflow: hidden; margin-bottom: 4px; color: var(--lime); text-overflow: ellipsis; white-space: nowrap; }
.round-complete-hero h1 { overflow: hidden; margin-bottom: 7px; color: var(--white); font: var(--type-h3); text-overflow: ellipsis; white-space: nowrap; }
.round-complete-hero__meta { color: var(--white); font: var(--type-small); }
.round-complete-points {
  position: absolute;
  top: 32px;
  right: 24px;
  display: flex;
  width: 60px;
  height: 60px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
}
.round-complete-points strong { font: var(--type-h3); line-height: 1; }
.round-complete-points span { margin-top: 4px; font: var(--type-small); }
.round-complete-content { padding-bottom: 38px; }
.round-complete-intro { margin-bottom: 24px; }
.round-complete-intro h1 { margin-bottom: 8px; font: var(--type-h2); }
.round-complete-intro p { font: var(--type-text); }
.round-complete-distribution h3 { margin-bottom: 8px; }
.round-complete-content .stats-tabs { margin-bottom: 24px; }
.round-scorecard-section h3 { margin-bottom: 12px; }
.round-scorecard-shell { overflow: hidden; border-radius: 8px; background: var(--white); }
.round-scorecard { width: 100%; border-collapse: collapse; table-layout: fixed; }
.round-scorecard th,
.round-scorecard td { height: 46px; padding: 5px 2px; text-align: center; vertical-align: middle; }
.round-scorecard th:not(:first-child),
.round-scorecard td:not(:first-child) { border-left: 1px solid rgb(6 48 37 / 10%); }
.round-scorecard thead th { height: 40px; background: var(--green); color: var(--white); font: var(--type-small-bold); }
.round-scorecard tbody th,
.round-scorecard tbody td { font: var(--type-small-bold); }
.round-scorecard tbody tr:nth-child(even):not(.scorecard-summary-row) { background: rgb(6 78 59 / 6%); }
.round-scorecard tbody tr > :nth-child(even) { background: rgb(6 78 59 / 5%); }
.round-scorecard tbody th { font-weight: 700; }
.round-scorecard .scorecard-summary-row { border-top: 1px solid rgb(6 48 37 / 12%); background: var(--white); }
.round-scorecard .scorecard-summary-row th { padding-left: 10px; text-align: left; }
.round-scorecard .scorecard-summary-row:last-child th,
.round-scorecard .scorecard-summary-row:last-child td { font-size: 14px; }
.scorecard-sph { display: inline-block; color: var(--green); font: 700 15px/1 var(--font-body); letter-spacing: 2px; white-space: nowrap; }
.scorecard-mark { position: relative; display: inline-grid; width: 30px; height: 30px; place-items: center; font: var(--type-button); }
.scorecard-mark--circle,
.scorecard-mark--double-circle { border: 1px solid currentColor; border-radius: 50%; }
.scorecard-mark--square,
.scorecard-mark--double-square { border: 1px solid currentColor; }
.scorecard-mark--double-circle::after,
.scorecard-mark--double-square::after { position: absolute; inset: 3px; border: 1px solid currentColor; content: ""; pointer-events: none; }
.scorecard-mark--double-circle::after { border-radius: 50%; }

@keyframes segmented-pill-slide {
  from { transform: translateX(calc(var(--from-index) * 100%)); }
  to { transform: translateX(calc(var(--active-index) * 100%)); }
}

@keyframes carousel-in-forward {
  from { transform: translateX(110%); }
  to { transform: translateX(0); }
}

@keyframes carousel-out-forward {
  from { transform: translateX(0); }
  to { transform: translateX(-110%); }
}

@keyframes carousel-in-backward {
  from { transform: translateX(-110%); }
  to { transform: translateX(0); }
}

@keyframes carousel-out-backward {
  from { transform: translateX(0); }
  to { transform: translateX(110%); }
}

@keyframes selection-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}