/* =========================================================
   P3 HOME PROTOTYPE
   Home screen styles
   ========================================================= */
:root {
  --green: #1b912e;
  --green-dark: #1b912e;
  --red: #c62828;
  --charcoal: #303030;
  --score-under: #e22323;
  --score-even: #1b912e;
  --score-over: #303030;
  --text: #363636;
  --muted: #606060;
  --line: #c8c8c8;
  --surface: #ffffff;
  --page: #f0f0f0;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Calibri, Arial, sans-serif;
  color: var(--text);
  background: var(--page);
}

button {
  font: inherit;
  color: inherit;
}

/* =========================================================
   PHONE / APP SHELL
   ========================================================= */
.phone-shell {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18px;
}

.app {
  width: min(100%, 390px);
  height: 844px;
  min-height: 0;
  background: var(--page);
  border: 1px solid #c9c9c9;
  border-radius: 31px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
  position: relative;
  padding-bottom: 0;
}

/* =========================================================
   HEADER IMAGE / FPO BRAND
   ========================================================= */
.hero {
  height: 104px;
  position: relative;
  border-bottom: 3px solid #ffffff;
    background-image: linear-gradient( to right, rgba(0, 0, 0, 0.72) 0%, rgba(4, 48, 29, 0.2) 65% ), url("images/Home-Hdr-BG.png");
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
}

.hero-wordmark {
  position: absolute;
  left: 14px;
  top: 0px;
  right: 24px;
  bottom: 10px;
  display: flex;
  align-items: center;
}

.hero-wordmark img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 150%;
  object-fit: contain;
  filter: drop-shadow(4px 6px 6px rgb(17, 67, 42));
}

/* =========================================================
   PLAYER / DATE STRIP
   ========================================================= */
.welcome-strip {
  height: 78px;
  background: linear-gradient(100deg, #3b3b3b, #2d2d2d);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 17px 11px;
}

.welcome-kicker {
  font-size: 16px;
  line-height: 1.05;
}

.player-name {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.05;
  margin-top: 4px;
}

.today {
  font-size: 14px;
  align-self: flex-start;
  margin-top: 6px;
  white-space: nowrap;
}

/* =========================================================
   HOME CONTENT
   ========================================================= */
.content {
  padding: 11px 23px 14px;
  display: grid;
  gap: 11px;
}

/* START A ROUND */
.start-round {
  height: 62px;
  border: 0;
  border-radius: 19px;
  background: var(--green);
  color: #ffffff;
  font-family: Calibri, Arial, sans-serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 18px;
  cursor: pointer;
}

.double-chevron {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 32px;
  line-height: 1;
  transform: translateY(-1px);
  animation: startRoundChevronPulse 1.15s ease-in-out infinite;
}

@keyframes startRoundChevronPulse {
  0%, 100% {
    opacity: 0.35;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(4px);
  }
}

/* OUTLINED HOME SECTIONS */
.info-card {
  width: 100%;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: left;
  padding: 11px 38px 11px 12px;
  position: relative;
  cursor: pointer;
  display: block;
}

.info-card:active, .start-round:active {
  transform: translateY(1px);
}

.card-title {
  font-family: "Arial Bold", Arial, sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -0.4px;
}

.round-course {
  font-size: 17px;
  font-weight: 700;
  margin-top: 6px;
}

.card-context {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.25px;
  margin-top: 4px;
  color: #4b4b4b;
}

.card-context b {
  font-weight: 700;
  padding: 0 5px;
}

.chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--charcoal);
}

/* Recent-round section heading: the open, rounded top line visually groups
   the Last Round and Last Round Summary cards beneath it. */
.recent-round-heading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 18px 0 5px;
  padding: 0 12px;
  min-height: 51px;
  text-align: center;
  font-family: "Arial Bold", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
  color: #1b912e;
}
.recent-round-heading::before,
.recent-round-heading::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 22%;
  height: 28px;
  border-top: 1.5px solid #1b912e;
  pointer-events: none;
}
.recent-round-heading::before {
  left: 0;
  border-left: 1.5px solid #1b912e;
  border-top-left-radius: 15px;
}
.recent-round-heading::after {
  right: 0;
  border-right: 1.5px solid #1b912e;
  border-top-right-radius: 15px;
}
.recent-round-heading span {
   position: relative;
   z-index: 1;
}

/* LAST ROUND */
.last-round {
  min-height: 84px;
}

.round-score {
  position: absolute;
  right: 38px;
  top: 8px;
  text-align: center;
  color: #111111;
}

.round-score strong {
  display: block;
  font-size: 32px;
  line-height: 0.95;
}

.round-score span {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
}

/* LAST ROUND SUMMARY */
.summary-card {
  min-height: 90px;
  padding-top: 11px;
}

.card-title.full {
  margin-bottom: 8px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-left: 10px;
}

.summary-grid > div {
  text-align: center;
  border-left: 1px solid #bbbbbb;
}

.summary-grid > div:first-child {
  border-left: 0;
}

.summary-grid strong {
  display: block;
  font-size: 27px;
  line-height: 1;
  font-weight: 700;
  color: #111111;
}

.summary-grid span {
  display: block;
  font-size: 16px;
  margin-top: 5px;
  color: #444444;
}

/* CLUBHOUSE / MY GAME / HISTORY */
.text-card {
  min-height: 78px;
}

.clubhouse-status {
  font-size: 16px;
  font-weight: 700;
  margin-top: 6px;
}

.clubhouse-status.is-clear {
  color: var(--green-dark);
}

.clubhouse-status.needs-attention {
  color: var(--red);
}

.feature-line {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin-top: 6px;
}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 390px);
  height: 76px;
  background: linear-gradient(100deg, #252525, #333333);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  border-top: 1px solid #444444;
  z-index: 1000;
}

.nav-item {
  position: relative;
  border: 0;
  background: transparent;
  color: #aaaaaa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  cursor: pointer;
}

.nav-icon {
  font-size: 31px;
  line-height: 0.85;
  font-weight: 700;
}

.nav-icon.bars {
  font-size: 29px;
}

.nav-icon.trend {
  font-size: 34px;
  transform: rotate(-10deg);
}

.nav-item.active {
  color: var(--green);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 54px;
  height: 4px;
  background: var(--green);
}

/* =========================================================
   PROTOTYPE TAP MESSAGE
   ========================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #222222;
  color: #ffffff;
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 5;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 430px) {
  .phone-shell {
    padding: 0;
  }

  .app {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .bottom-nav {
    position: fixed;
    max-width: 430px;
    margin: auto;
  }
}

@media (min-width: 700px) {
  .phone-shell {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* =========================================================
   P3 ROUND SETUP
   ========================================================= */

/* Each view scrolls independently; hidden views cannot extend the page. */
.screen {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.screen[hidden] {
  display: none !important;
}

#homeScreen {
  padding-bottom: 78px;
}

.hero, .setup-header, .hole-hero {
  position: sticky;
  top: 0;
  z-index: 12;
}

/* SETUP HEADER */
.setup-header {
  min-height: 88px;
  padding: 18px 20px 10px;
  display: flex;
  align-items: center;
  gap: 15px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.20) 65% ), url("images/Home-Hdr-BG.png");
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  color: #ffffff;
  border-bottom: 3px solid #ffffff;
}

.setup-back {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
  border-radius: 8px;
  background: none;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.setup-heading {
  min-width: 0;
}

.setup-kicker {
  margin-bottom: 2px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #cfcfcf;
}

.setup-title {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.5px;
}

/* SETUP CONTENT */
.setup-content {
  padding: 20px 18px 120px;
  background: var(--page);
}

.setup-section {
  margin-bottom: 25px;
}

.setup-section-title {
  display: block;
  margin-bottom: 9px;
  font-family: "Arial Bold", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.4px;
  color: var(--text);
}

.setup-section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.optional-label {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #929292;
}

/* SELECT CONTROLS */
.select-wrap {
  position: relative;
  width: 100%;
}

.setup-select {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 10px 42px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--text);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.select-wrap::after {
  content: "▼";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: var(--red);
  pointer-events: none;
}

.select-wrap:has(.setup-select:not(.is-unselected))::after {
  color: var(--green);
}

.select-wrap:has(.setup-select:disabled)::after {
  color: #aaaaaa;
}

.select-wrap:has(.setup-select.is-unselected)::after {
  color: var(--red);
}

.select-wrap:has(.setup-select:disabled)::after {
  color: #aaaaaa;
}

.setup-select.is-unselected {
  color: var(--red);
}

.setup-select:disabled {
  background: #f6f6f6;
  color: #a0a0a0;
  cursor: default;
}

.select-wrap:has(.setup-select:disabled)::after {
  color: #aaaaaa;
}

.setup-select:focus {
  outline: none;
  border-color: #777777;
}

/* COURSE */
.setup-card {
  width: 100%;
  min-height: 66px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.setup-card:active {
  transform: translateY(1px);
}

.setup-card:focus-visible {
  outline: none;
  border-color: #777777;
}

.setup-card-primary {
  font-family: "Arial Bold", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}

.setup-card-secondary {
  margin-top: 3px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.25;
  color: var(--muted);
}

.setup-chevron {
  flex: 0 0 auto;
  font-family: Arial, sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--charcoal);
}

.course-card.needs-selection .setup-chevron {
  color: var(--red);
}

.course-card.is-selected .setup-chevron {
  color: var(--green);
}

/* COURSE SEARCH */
.course-search-panel {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.course-search-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.course-search-title {
  font-family: "Arial Bold", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.course-search-subtitle {
  margin-top: 3px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: var(--muted);
}

.course-search-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.course-search-label {
  display: block;
  margin-bottom: 7px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  color: #777777;
}

.course-search-status {
  margin-top: 9px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: #777777;
}

.course-search-results {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.course-search-result {
  width: 100%;
  min-height: 58px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.course-search-result:active {
  transform: translateY(1px);
}

.course-search-result-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.course-search-result-main strong {
  font-family: "Arial Bold", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.15;
}

.course-search-result-main span {
  margin-top: 3px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: var(--muted);
}

.course-search-result-arrow {
  flex: 0 0 auto;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
}

/* COURSE DETAILS */
.course-data-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.course-data-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dedede;
}

.course-data-label {
  font-family: "Arial Bold", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
}

.course-data-status {
  margin-top: 3px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #8b8b8b;
}

.status-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  background: #b8b8b8;
}

.status-dot.is-complete {
  background: var(--green);
}

.status-dot.is-attention {
  background: var(--red);
}

.course-data-status.is-complete {
  color: var(--green-dark);
}

.course-data-status.is-attention {
  color: var(--red);
}

.course-data-label.is-attention {
  color: var(--red);
}

.status-dot.is-attention {
  animation: setupRequiredPulse 1s ease-in-out infinite;
}

.status-dot.is-complete {
  animation: none;
}

/* COURSE DETAIL NUMBERS */
.course-data-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-top: 15px;
  border-top: 1px solid #e2e2e2;
  border-left: 1px solid #e2e2e2;
}

.course-data-grid > div {
  min-height: 72px;
  padding: 11px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}

.course-data-grid span {
  margin-bottom: 4px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #777777;
}

.course-data-grid strong {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: #2c2c2c;
}

.hole-data-message {
  margin-top: 14px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: #555555;
}

.text-action {
  margin-top: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  cursor: pointer;
}

/* Course Data retains its white card styling in every state.
   Only the status text and dot indicate attention or completion. */
/* COMPETITION NAME */
.setup-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  outline: none;
}

.setup-input::placeholder {
  color: #999999;
}

.setup-input:focus {
  border-color: #777777;
}

/* START ROUND */
.setup-start-area {
  margin-top: 6px;
  padding-top: 4px;
}

.begin-round {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  border-radius: 19px;
  background: var(--green);
  color: #ffffff;
  font-family: Calibri, Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}

.begin-round:active {
  transform: translateY(1px);
}

.begin-round .start-round-label {
  animation: none;
}

.begin-round .start-round-arrow {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 32px;
  line-height: 1;
  transform: translateY(-1px);
  animation: startRoundArrowPulse 1.15s ease-in-out infinite;
}

@keyframes startRoundArrowPulse {
  0%, 100% {
    opacity: 0.35;
    transform: translate(0, -1px);
  }

  50% {
    opacity: 1;
    transform: translate(5px, -1px);
  }
}

@keyframes startRoundTextPulse {
  0%, 100% {
    opacity: 0.50;
  }

  50% {
    opacity: 1;
  }
}

.setup-note {
  max-width: 310px;
  margin: 10px auto 0;
  text-align: center;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  color: #747474;
}

/* PHONE ADJUSTMENTS */
@media (max-width: 430px) {
  .setup-header {
    min-height: 80px;
    padding: 14px 16px;
  }

  .setup-content {
    padding-left: 15px;
    padding-right: 15px;
  }

  .setup-title {
    font-size: 23px;
  }

  .setup-section {
    margin-bottom: 22px;
  }

  .setup-card-primary {
    font-size: 18px;
  }

  .setup-card-secondary {
    font-size: 16px;
  }
}

/* START ROUND — pulse the chevron only */
.begin-round span {
  animation: startRoundChevronPulse 1.25s ease-in-out infinite;
}

@keyframes startRoundChevronPulse {
  0%, 100% {
    opacity: 0.55;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(3px);
  }
}

/* =========================================================
   ROUND SETUP — SEARCH / NEXT-STEP GUIDANCE
   ========================================================= */
.course-search-panel {
  scroll-margin-top: 12px;
}

.tee-section {
  scroll-margin-top: 18px;
}

.tee-section.needs-selection .setup-section-title {
  color: var(--red);
}

.tee-section.needs-selection .setup-select {
  border-color: var(--line);
  box-shadow: none;
}

.tee-section.needs-selection .setup-select.is-unselected {
  color: var(--red);
}

/* REQUIRED SETUP STATE */
@keyframes setupRequiredPulse {
  0%, 100% {
    opacity: 0.42;
  }

  50% {
    opacity: 1;
  }
}

.select-wrap:has(.setup-select.is-unselected)::after {
  color: var(--red);
  animation: setupRequiredPulse 1s ease-in-out infinite;
}

.course-card.needs-selection .setup-chevron {
  color: var(--red);
  animation: setupRequiredPulse 1s ease-in-out infinite;
}

.course-card.is-selected .setup-chevron {
  color: var(--green);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .select-wrap:has(.setup-select.is-unselected)::after, .course-card.needs-selection .setup-chevron {
    animation: none;
  }
}

/* FINAL SETUP STATE LANGUAGE */
.setup-section-title {
  color: var(--text);
}

.setup-select.is-unselected {
  color: var(--red);
}

.course-card.needs-selection .setup-card-primary {
  color: var(--red);
}

/* Completed setup fields invert after selection. */
.setup-select.is-selected:not(.is-editing):not(:disabled) {
  background: #222222;
  color: #ffffff;
  border-color: #222222;
}

.select-wrap:has(.setup-select.is-selected:not(.is-editing):not(:disabled))::after {
  color: #ffffff;
  animation: none;
}

.setup-select.is-editing:not(:disabled) {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
}

.select-wrap:has(.setup-select.is-editing)::after {
  color: var(--charcoal);
  animation: none;
}

.course-card.is-selected:not(.is-editing) {
  background: #222222;
  color: #ffffff;
  border-color: #222222;
}

.course-card.is-selected:not(.is-editing) .setup-card-primary, .course-card.is-selected:not(.is-editing) .setup-card-secondary, .course-card.is-selected:not(.is-editing) .setup-chevron {
  color: #ffffff;
}

.course-card.is-editing {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
}

.course-card.is-editing .setup-card-primary {
  color: var(--text);
}

.course-card.is-editing .setup-card-secondary {
  color: var(--muted);
}

.course-card.is-editing .setup-chevron {
  color: var(--charcoal);
}

.course-search-new {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border: 1px dashed #777777;
  border-radius: 7px;
  background: #ffffff;
  color: var(--charcoal);
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   COURSE DATA EDITOR
   ========================================================= */
/* Keep every editor control outside the floating Back button's hit area. */
#courseDataScreen {
  height: calc(100% - 80px - env(safe-area-inset-bottom, 0px));
}

/* The grid display rule otherwise overrides the footer's hidden attribute. */
#courseDataScreen:not([hidden]) ~ #bottomNav[hidden] {
  display: none;
}

.course-data-content {
  padding-bottom: 30px;
}

.course-profile-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.course-profile-name {
  font-family: "Arial Bold", Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.course-profile-location {
  margin-top: 3px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: var(--muted);
}

.course-profile-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-top: 13px;
  border-top: 1px solid #e2e2e2;
  border-left: 1px solid #e2e2e2;
}

.course-profile-grid > div {
  min-height: 66px;
  padding: 9px 10px;
  border-right: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}

.course-profile-grid span {
  display: block;
  margin-bottom: 4px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #777777;
}

.course-profile-grid strong {
  display: block;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.05;
  color: #2c2c2c;
}

.course-data-editor-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.course-data-editor-heading .setup-section-title {
  margin-bottom: 2px;
}

.course-data-confirmed {
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.course-data-check-heading {
  flex: 0 0 78px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .55px;
  color: #777777;
}

.course-hole-table-wrap {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.course-hole-row {
  min-height: 57px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) minmax(0,1.15fr) 64px;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
  transition: background .15s ease, box-shadow .15s ease;
}

.course-hole-row:last-child {
  border-bottom: 0;
}

.course-hole-row.is-edited {
  background: #f2faf0;
  box-shadow: inset 4px 0 0 var(--green);
}

.course-hole-row.is-needs-confirmation .course-hole-check {
  color: var(--red);
  border-color: var(--red);
  animation: setupRequiredPulse 1s ease-in-out infinite;
}

.course-hole-number {
  padding-left: 10px;
  font-family: "Arial Bold", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.course-hole-field {
  min-width: 0;
  padding: 6px 5px;
}

.course-hole-field input {
  width: 100%;
  min-height: 40px;
  padding: 5px 7px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.course-hole-field input:focus {
  border-color: #777;
}

.course-hole-row.is-edited .course-hole-field input {
  border-color: #9ac592;
}

.course-hole-check {
  width: 38px;
  height: 38px;
  justify-self: center;
  border: 1px solid #bdbdbd;
  border-radius: 7px;
  background: #fff;
  color: #999;
  font-family: Arial, sans-serif;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.course-hole-check.is-confirmed {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
  animation: none;
}

.course-hole-total {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) minmax(0,1.15fr) 64px;
  align-items: center;
  min-height: 61px;
  margin-top: 8px;
  padding: 0;
  border-top: 3px solid var(--charcoal);
  background: #f7f7f7;
}

.course-hole-total > span:first-child {
  grid-column: 1;
  padding-left: 10px;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 14px;
}

.course-hole-total > strong:nth-of-type(1) {
  grid-column: 2;
}

.course-hole-total > strong:nth-of-type(2) {
  grid-column: 3;
}

.course-hole-total > strong {
  text-align: center;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 20px;
}

.course-total-label {
  display: none;
}

.course-data-note {
  margin: 8px 4px 0;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: #777;
}

@media (max-width: 430px) {
  .course-hole-row, .course-hole-total {
    grid-template-columns: 38px minmax(0,1fr) minmax(0,1.15fr) 58px;
  }

  .course-data-check-heading {
    flex-basis: 68px;
  }

  .course-hole-check {
    width: 36px;
    height: 36px;
  }
}

/* =========================================================
   COURSE DATA EDITOR — FLOATING BACK
   ========================================================= */
.course-data-floating-back {
  position: absolute;
  z-index: 2000;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  width: 92px;
  min-height: 48px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.35);
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  transform: translateX(-50%);
  transform-origin: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.course-data-floating-back.is-entering {
  animation: courseDataBackEnter 650ms cubic-bezier(.16,.82,.24,1) both;
}

.course-data-floating-back.is-pulsing {
  animation: courseDataBackPulse 3s ease-out infinite;
}

@keyframes courseDataBackEnter {
  from {
    transform: translateX(calc(-100vw - 50%));
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes courseDataBackPulse {
  0% {
    transform: translateX(-50%) scale(1.2);
  }

  14% {
    transform: translateX(-50%) scale(1);
  }

  100% {
    transform: translateX(-50%) scale(1);
  }
}

.course-search-result.is-current-course {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .course-data-floating-back.is-entering, .course-data-floating-back.is-pulsing {
    animation: none;
  }
}

/* =========================================================
   HOLE SCREEN / SLIDE-OUT SCORECARD PROTOTYPE
   ========================================================= */
.hole-screen {
  position: relative;
  min-height: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Prevent background scrolling (including iOS overscroll) while scorecard is open. */
.hole-screen.scorecard-scroll-locked {
  overflow-y: hidden;
  touch-action: none;
}

.hole-hero {
  position: relative;
  top: auto;
  height: 125px;
  padding: 25px 16px 12px;
  text-align: center;
  color: #fff;
  background: linear-gradient(0deg,rgba(0,0,0,.46),rgba(0,0,0,.15)),url('images/Home-Hdr-BG.png') center/cover;
}

/* Hole Stats header logo */
.hole-hero .hole-logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin-left: 0;
  object-fit: contain;
  filter: drop-shadow(4px 6px 6px rgb(17, 67, 42));
}

.hole-course-strip {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #292929;
  color: white;
  padding: 11px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
}

.hole-course-strip span {
  font-style: italic;
  font-size: 12px;
}

.hole-body {
  width: 100%;
  padding: 15px 20px 165px;
  box-sizing: border-box;
}

.hole-current {
  display: grid;
  grid-template-columns: 1.6fr 1fr .65fr;
  gap: 10px;
  align-items: end;
  padding-bottom: 13px;
  border-bottom: 1px solid #ddd;
}

.hole-current>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hole-current small {
  font-weight: 800;
  color: var(--charcoal);
  font-size: 15px;
}

.hole-current strong {
  font-size: 32px;
  line-height: 1;
}

.hole-stats-label {
  font-size: 20px;
  font-weight: 800;
  margin: 8px 0 6px;
}

.hole-stat-trio,
.hole-stat-pair {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.hole-stat-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hole-stat-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Unified cards with separate, clearly defined touch surfaces. */
.hole-stat-trio > div,
.hole-stat-pair > div,
.hole-score-sample {
  min-width: 0;
  border: 1px solid #bfc0c2;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
}

.hole-stat-trio > div {
  height: clamp(110px, 12.6dvh, 135px);
}

.hole-stat-pair > div {
  height: clamp(110px, 12.6dvh, 135px);
}

.hole-stat-trio b,
.hole-stat-pair b,
.hole-score-sample b {
  display: block;
  padding: 12px 2px 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--charcoal);
  text-align: center;
  white-space: nowrap;
}

.hole-choice-row,
.hole-counter-row {
  display: grid;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.hole-choice-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hole-counter-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
}

.hole-choice,
.hole-adjust {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(#fff 55%, #e9e9e9);
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 800;
  color: #c3c5c7;
  padding: 0;
  text-align: center;
}

.hole-choice + .hole-choice {
  border-left: 1px solid #bfc0c2;
}

.hole-choice.is-selected {
  color: #111;
}

.hole-adjust {
  color: #111;
  font-size: 29px;
}

.hole-count {
  display: grid;
  place-items: center;
  min-width: 0;
  background: #fff;
  border: 1px solid #bfc0c2;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  font-family: Arial, sans-serif;
  font-size: 29px;
  font-weight: 800;
  color: var(--charcoal);
}

.hole-count.is-confirmed {
  color: #111;
}

.hole-score-sample {
  width: 52%;
  height: clamp(110px, 12.6dvh, 135px);
  margin: 8px auto 0;
}

.hole-score-sample .hole-counter-row {
  min-height: 0;
}

.hole-demo-save {
  display: block;
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 30px;
  background: #1b912e;
  color: white;
  font-weight: 800;
  font-size: 19px;
  margin-top: 26px;
}

.hole-demo-caption {
  text-align: center;
  margin-top: 9px;
  font-size: 13px;
  color: #777;
}

.scorebar-shade {
  position: absolute;
  inset: 0 0 76px;
  background: rgba(0,0,0,.18);
  z-index: 20;
}

.scorebar-shade[hidden] {
  display: none;
}

.scorebar-panel {
  position: absolute;
  right: 0;
  top: 26px;
  bottom: 76px;
  width: 104px;
  z-index: 21;
  transform: translateX(100%);
  transition: transform .25s ease;
  touch-action: pan-y;
  background: #f0f0f0;
  border-left: 1px solid #ccc;
  box-shadow: -5px 0 12px rgba(0,0,0,.1);
}

.scorebar-panel[hidden] {
  display: none !important;
}

/* Keep the scorecard attached to the app viewport, not the scrolling hole page. */
.app:has(#holeStatsScreen[hidden]) .scorebar-panel,
.app:has(#holeStatsScreen[hidden]) .scorebar-shade {
  display: none;
}

.scorebar-panel.is-open {
  transform: translateX(0);
}

.scorebar-tab {
  position: absolute;
  left: -36px;
  top: 74px;
  width: 36px;
  height: 68px;
  border: 1px solid #aaa;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: #f0f0f0;
  font-size: 24px;
  color: #292929;
  cursor: pointer;
  box-shadow: -2px 2px 5px #0002;
}

.scorebar-panel.is-open .scorebar-tab span {
  display: inline-block;
  transform: rotate(180deg);
}

.scorebar-inner {
  height: 100%;
  overflow-y: auto;
  padding: 8px 8px 12px;
}

.scorebar-heading {
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.scorebar-total {
  margin: 5px auto 9px;
  background: #d82027;
  color: white;
  font-weight: 800;
  font-size: 21px;
  border-radius: 5px;
  text-align: center;
  padding: 5px 0;
  max-width: 56px;
}

.scorebar-rows {
  display: grid;
  gap: 3px;
}

.scorebar-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 5px;
  align-items: center;
  font-size: 13px;
}

.scorebar-number {
  text-align: center;
}

.scorebar-result {
  width: 28px;
  height: 28px;
  justify-self: center;
  border: 1px solid #c7c7c7;
  border-radius: 50%;
  background: #fafafa;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.scorebar-result.under {
  background: #fafafa;
  color: var(--score-under);
  border-color: #c7c7c7;
}

.scorebar-result.over {
  background: #fafafa;
  color: var(--score-over);
  border-color: #c7c7c7;
}

.scorebar-result.even {
  background: #fafafa;
  color: var(--score-even);
  border-color: #c7c7c7;
}

.scorebar-row.future {
  opacity: .45;
}

@media(prefers-reduced-motion:reduce) {
  .scorebar-panel {
    transition: none;
  }
}

/* Course selection remains visually required until a course is chosen. */
#courseSearchInput {
   border: 2px solid var(--red);
}
#courseSearchInput:focus {
   outline: 2px solid rgba(198,40,40,.20);
   outline-offset: 1px;
}
#courseSearchPanel.has-selected-course #courseSearchInput {
   border-color: var(--green);
}

/* Compact edit links directly beneath SAVE HOLE. */
.hole-edit-links {
   margin-top: -5px;
}
.hole-setup-edit {
   margin-top: 0;
   text-align: center;
   font-size: 14px;
   color: #666;
}
.hole-setup-edit button {
   border: 0;
   background: transparent;
   color: var(--green-dark);
   text-decoration: underline;
   font-weight: 800;
   padding: 5px 2px;
   cursor: pointer;
}

/* Home card destinations: chevrons belong to headings, not card corners. */
#homeScreen .info-card {
   padding-right: 12px;
}
#homeScreen .card-title-chevron {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 3px;
  color: #1b912e;
  font: 800 23px/0.8 Arial, sans-serif;
  letter-spacing: -5px;
  padding-right: 5px;
  white-space: nowrap;
}
#homeScreen .round-score {
   right: 12px;
}
.destination-screen {
   background: #f2f2f2;
}
.destination-header {
  position: sticky;
   top: 0;
   z-index: 12;
  min-height: 88px;
   background: #292929;
   color: #fff;
  display: flex;
   align-items: flex-end;
   justify-content: space-between;
  padding: 20px 18px 14px;
   gap: 10px;
}
.destination-back {
  background: transparent;
   color: #1b912e;
   border: 0;
  font: 800 16px Arial, sans-serif;
   padding: 10px 4px 0 0;
  cursor: pointer;
}
.destination-header-label {
   font: 800 13px Arial, sans-serif;
   letter-spacing: 1px;
   padding-bottom: 2px;
}
.destination-content {
   padding: 26px 22px 100px;
}
.destination-content h1 {
   margin: 0 0 12px;
   font: 800 25px/1.1 Arial, sans-serif;
   color: #292929;
}
.destination-content > p {
   margin: 0 0 22px;
   color: #4c4c4c;
   font: 16px/1.5 Arial, sans-serif;
}
.destination-preview {
   background: white;
   border: 1px solid #d0d0d0;
   border-radius: 10px;
   padding: 20px;
}
.destination-preview h2 {
   margin: 0 0 10px;
   color: #1b912e;
   font: 800 18px/1.2 Arial, sans-serif;
}
.destination-preview p {
   margin: 0;
   color: #4b4b4b;
   font: 15px/1.5 Arial, sans-serif;
}

/* Phase 3 Home groups: continuous fine green outline around the cards. */
#homeScreen .home-card-group {
   border: 1.5px solid #1b912e;
   border-radius: 0 0 17px 17px;
   padding: 9px 9px 12px;
   margin: -5px 0 24px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}
#homeScreen .home-card-group .info-card {
   margin: 0;
   width: 100%;
}
#homeScreen .recent-round-heading {
   margin-bottom: 5px;
}
#homeScreen .recent-group {
   border-top: 0;
   margin-top: -24px;
   padding-top: 28px;
   border-radius: 0 0 17px 17px;
}
#homeScreen .overall-group {
   position: relative;
   margin-top: 34px;
   padding-top: 32px;
   border-radius: 17px;
}
#homeScreen .overall-heading {
   position: absolute;
   top: -24px;
   left: 8%;
   right: 8%;
   text-align: center;
   font: 800 16px/1.18 Arial,sans-serif;
   color: #1b912e;
}
#homeScreen .overall-heading span {
   display: inline-block;
   background: #f2f2f2;
   padding: 0 8px;
}
#homeScreen .overall-heading small {
   font: 800 12px/1.2 Arial,sans-serif;
}
/* One chevron pair per title. Remove legacy pseudo-element chevrons. */
#homeScreen .info-card::before, #homeScreen .info-card::after, #homeScreen .card-title::after, #homeScreen .card-title.full::after {
   content: none !important;
}
#homeScreen .card-title-chevron {
   letter-spacing: -3px;
   padding-right: 2px;
   margin-left: 4px;
}
.destination-photo-header {
   position: sticky;
   top: 0;
   z-index: 12;
}
.destination-content {
   padding: 26px 20px 100px;
}
.destination-content [hidden] {
   display: none !important;
}
.performance-course {
   text-align: center;
   margin: 0 0 6px !important;
   font-size: 23px !important;
}
.performance-tees {
   text-align: center;
   margin: 0 0 22px !important;
   font-size: 14px !important;
}
.performance-view-card {
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 14px;
   padding: 18px 14px 20px;
}
.performance-stepper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
}
.performance-stepper button {
   border: 1.5px solid #1b912e;
   background: white;
   border-radius: 28px;
   min-width: 50px;
   min-height: 43px;
   font: 800 24px Arial,sans-serif;
   color: #1b912e;
   cursor: pointer;
}
.performance-stepper button:disabled {
   color: #aaa;
   border-color: #e1e1e1;
   cursor: default;
}
.performance-view-label {
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.performance-view-label span {
   color: #888;
   font-size: 11px;
   letter-spacing: .6px;
}
.performance-view-label strong {
   font-size: 17px;
}
.performance-metrics {
   display: grid;
   grid-template-columns: repeat(3,minmax(0,1fr));
   text-align: center;
   gap: 5px;
   margin: 28px 0 17px;
}
.performance-metrics div {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.performance-metrics strong {
   font: 700 27px Arial,sans-serif;
}
.performance-metrics span {
   font: 13px Arial,sans-serif;
   color: #666;
}
.performance-description {
   text-align: center;
   font: 14px/1.5 Arial,sans-serif;
   color: #666;
   margin: 0 0 22px;
}
.performance-dots {
   display: flex;
   justify-content: center;
   gap: 8px;
}
.performance-dots span {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #ddd;
}
.performance-dots span.active {
   background: #1b912e;
}
.performance-demo-note {
   font: 12px/1.4 Arial,sans-serif;
   text-align: center;
   color: #888;
   margin: 15px 0;
}

/* Accessible, low-distraction in-round hole data shortcut */
.hole-data-inline-edit {
  display: inline-block;
  margin-left: 8px;
  padding: 9px 2px;
  border: 0;
  background: transparent;
  color: #00A249;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
}
.hole-data-inline-edit:focus-visible {
   outline: 2px solid #00A249;
   outline-offset: 2px;
   border-radius: 3px;
}

/* Phase 3 Stage 1: unobtrusive hole navigation */
.hole-navigation {
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:8px;
   margin:18px 0 10px;
}
.hole-navigation button {
   background:#00a249;
   color:white;
   border:0;
   border-radius:7px;
   font-weight:800;
   padding:12px 10px;
   font-size:12px;
   cursor:pointer;
}
.hole-navigation button:disabled {
   opacity:.35;
   cursor:default;
}
.hole-navigation span {
   font-size:11px;
   font-weight:800;
   text-align:center;
   white-space:nowrap;
}
.hole-demo-save:disabled {
   opacity:.4;
   cursor:default;
}

/* STAGE 1 REFINEMENTS — 17 OCT 2026 */
/* Equal-sized, highly visible green navigation chevrons. */
.hole-navigation {
   justify-content: space-between;
   gap: 18px;
   margin: 18px 0 10px;
}
.hole-navigation button {
  flex: 0 0 76px;
   width: 76px;
   height: 64px;
   padding: 0;
  border: 0;
   border-radius: 9px;
   background: transparent;
  color: #00a249;
   font: 900 53px/1 Arial, sans-serif;
  display: flex;
   align-items: center;
   justify-content: center;
  cursor: pointer;
}
.hole-navigation button:disabled {
   opacity: .25;
   cursor: default;
}
.hole-navigation button:focus-visible {
   outline: 3px solid #00a249;
   outline-offset: 2px;
}
/* Course name may wrap naturally at intentional phrase boundaries. */
#holeCourseName {
   display: block;
   width: 100%;
   min-width: 0;
   overflow-wrap: normal;
   text-wrap: balance;
}
/* Prevent the scoring layout from changing width when scorecard locks scrolling. */
.hole-screen {
   scrollbar-gutter: stable;
}
.hole-screen.scorecard-scroll-locked {
   overflow-y: hidden;
   scrollbar-gutter: stable;
}
/* Neutral controls until scoring interactions are activated in Stage 2. */
.hole-choice:not(.is-selected) {
   color: #b8bbbe;
}
.hole-count:not(.is-confirmed) {
   color: var(--charcoal);
}
/* Before any scores, even par is the neutral initial round score. */
.scorebar-total {
   background: #00a249;
   color: #fff;
}

/* STAGE 1 FINISH — consistent single double-chevron glyph and compact spacing */
.hole-navigation {
   margin: -15px 0 0 ;
   gap: 18px;
}
.hole-navigation button {
  flex: 0 0 76px;
   width: 76px;
   height: 56px;
  color: #00a249;
   font: 900 76px/.75 Arial, sans-serif;
}
.hole-navigation button:disabled {
   color: #b8bbbe;
   opacity: 1;
}
.hole-demo-save {
   margin-top: 12px;
}
/* Explicit phrase break in the confirmed course-data card. */
#courseDataStatus .course-status-line {
   display: block;
}

/* Stage 2 / Step 1: clear feedback for temporary hole-stat selections. */
.hole-choice {
   cursor: pointer;
}
.hole-choice.is-selected {
   color: #00a249;
   background: linear-gradient(#f4fff6, #d9f2df);
}
.hole-choice:focus-visible, .hole-adjust:focus-visible {
   outline: 3px solid #00a249;
   outline-offset: -3px;
}
.hole-adjust {
   cursor: pointer;
}
.hole-adjust:disabled {
   color: #c3c5c7;
   cursor: default;
}

/* Stage 2 refinement — all deliberately entered values share one visual language. */
.hole-choice.is-selected,
.hole-count.is-confirmed {
  background: #d9f2df;
  color: var(--charcoal);
  font-weight: 900;
}
.hole-count {
  width: 100%;
  cursor: pointer;
  padding: 0;
}
.hole-count:focus-visible {
   outline: 3px solid #00a249;
   outline-offset: -3px;
}
.hole-count:not(.is-confirmed) {
   background: #fff;
   color: var(--charcoal);
}

/* Stage 2: slightly softer selected green and compact running totals. */
.hole-choice.is-selected, .hole-count.is-confirmed {
   background: #e0f5e5;
   color: var(--charcoal);
   font-weight: 900;
}
.scorebar-live-stats {
   font-size: 12px;
   font-weight: 700;
   line-height: 1.45;
   padding: 6px 12px 10px;
   color: #333;
   overflow-wrap: break-word;
}
.hole-demo-save:disabled {
   opacity: .45;
   cursor: default;
}

/* Stage 2 refinements: more prominent Round Setup edit link. */
.hole-setup-edit {
   font-size: 15px;
}
.hole-setup-edit button {
   font-size: 16px;
   padding: 7px 4px;
}

/* Stage 2: simplified score strip and contextual golf-flag help. */
.scorebar-inner {
   padding-top: 14px;
}
.scorebar-result {
   font-size: 12px;
}
.scorebar-result.under {
   background: #fafafa;
   color: var(--score-under);
}
.scorebar-result.over {
   background: #fafafa;
   color: var(--score-over);
}
.scorebar-result.even {
   background: #fafafa;
   color: var(--score-even);
}
.stat-help-trigger {
   display: inline-flex;
   vertical-align: middle;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 30px;
   padding: 0;
   margin: -6px -4px -6px 0;
   border: 0;
   background: transparent;
   color: #777;
   cursor: pointer;
}
.stat-help-trigger svg {
   flex: none;
}
.stat-help-trigger:focus-visible {
   outline: 2px solid #1b912e;
   border-radius: 5px;
}
.stat-help-overlay[hidden] {
   display: none !important;
}
.stat-help-overlay {
   position: absolute;
   inset: 0;
   z-index: 1300;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0,0,0,.46);
   padding: 18px;
}
.stat-help-dialog {
   width: 100%;
   max-width: 340px;
   position: relative;
   background: #fff;
   border-radius: 12px;
   padding: 24px 20px 20px;
   box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.stat-help-dialog h2 {
   margin: 0 32px 10px 0;
   color: #1b912e;
   font-size: 17px;
   line-height: 1.2;
}
.stat-help-dialog p {
   margin: 0;
   font-size: 16px;
   line-height: 1.45;
}
.stat-help-close {
   position: absolute;
   right: 8px;
   top: 5px;
   border: 0;
   background: transparent;
   font-size: 30px;
   width: 40px;
   height: 40px;
   cursor: pointer;
}

/* Stage 2: restored starting-score marker and corner-positioned golf help flags. */
.scorebar-inner {
   padding-top: 7px;
}
.scorebar-start {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   padding: 0 0 10px;
}
.scorebar-start span {
   font: 800 10px/1.15 Arial,sans-serif;
   color: #4a4a4a;
   letter-spacing: .15px;
   white-space: nowrap;
}
.scorebar-start strong {
   display: grid;
   place-items: center;
   width: 54px;
   min-height: 43px;
   border-radius: 5px;
   background: #f3f5f3;
   color: var(--charcoal);
   font: 800 22px/1 Arial,sans-serif;
}
.hole-stat-trio > div, .hole-stat-pair > div, .hole-score-sample {
   position: relative;
}
.hole-stat-trio b, .hole-stat-pair b, .hole-score-sample b {
   padding-right: 19px;
   padding-left: 4px;
}
.stat-help-trigger {
   position: absolute;
   top: 2px;
   right: 2px;
   z-index: 2;
   width: 27px;
   height: 30px;
   margin: 0;
   color: #1b912e;
}
.stat-help-trigger .stracker-help-flag {
   width: 23px;
   height: 23px;
   display: block;
}
/* Long label needs a little more room while keeping the flag inside its card. */
.hole-stat-pair > div:nth-child(2) b {
   font-size: 14px;
   padding-left: 2px;
   padding-right: 23px;
}
.hole-stat-trio > div:nth-child(3) b {
   font-size: 14px;
   padding-left: 2px;
   padding-right: 21px;
}

/* Score Strip: compact hole/score grouping, clear saved and current holes. */
.scorebar-panel {
   width: 94px;
}
.scorebar-inner {
   padding-left: 5px;
   padding-right: 5px;
}
.scorebar-row {
   grid-template-columns: 19px 30px;
   gap: 2px;
   justify-content: center;
}
.scorebar-number {
   font-weight: 400;
   color: #999;
}
.scorebar-row.is-saved .scorebar-number,
.scorebar-row.active-hole .scorebar-number {
   font-weight: 800;
   color: #303030;
}
.scorebar-row.future {
   opacity: 1;
}
.scorebar-row.future .scorebar-result {
   opacity: .55;
}
.scorebar-row.future:not(.active-hole) .scorebar-number {
   color: #aaa;
}

/* =========================================================
   STAGE 3A — GLOBAL WHITE / REFINED OUTLINES
   ========================================================= */
:root {
   --page: #ffffff;
   --surface: #ffffff;
}
html, body, .app, .screen, .setup-content, .destination-content, .hole-body {
   background-color: #ffffff;
}
/* Existing screen sections: green titles and thin green outlined cards. */
#homeScreen .home-card-group {
   border: 1px solid #1b912e;
   border-radius: 9px;
   padding: 43px 9px 12px;
   margin: 12px 0 22px;
   position: relative;
   background: #fff;
}
#homeScreen .recent-group {
   margin-top: 8px;
   padding-top: 13px;
}
#homeScreen .recent-round-heading {
   margin: 17px 0 0;
   min-height: auto;
   padding: 0 12px;
   color: #1b912e;
}
#homeScreen .recent-round-heading::before, #homeScreen .recent-round-heading::after {
   display: none;
}
#homeScreen .recent-round-heading + .recent-group {
   margin-top: 8px;
}
#homeScreen .overall-group {
   margin-top: 18px;
   padding-top: 52px;
}
#homeScreen .overall-heading {
   top: 12px;
   left: 8px;
   right: 8px;
}
#homeScreen .overall-heading span {
   background: #fff;
}
#homeScreen .info-card {
   border: 1px solid #1b912e;
   border-radius: 8px;
   background: #fff;
}
#homeScreen .card-title {
   color: #1b912e;
}
.setup-section-title, .course-data-label, .hole-stats-label {
   color: #1b912e;
}
.setup-card, .course-data-card, .course-profile-card, .hole-stat-trio > div, .hole-stat-pair > div, .hole-score-sample, .performance-view-card, .destination-preview {
   border-color: #1b912e;
   border-width: 1px;
   border-style: solid;
   border-radius: 8px;
   background-color: #fff;
}
.start-round, .begin-round, .hole-demo-save, .recovery-action {
   border-radius: 7px;
}
/* Recovery screen */
.recovery-screen {
   background: #fff;
}
.recovery-content {
   padding: 25px 20px 100px;
}
.recovery-alert {
   font: 800 23px/1.16 Arial,sans-serif;
   color: #c62828;
   text-align: center;
   margin: 8px 0 25px;
}
.recovery-card {
   border: 1px solid #1b912e;
   border-radius: 9px;
   padding: 20px 15px 22px;
   background: #fff;
   text-align: center;
}
.recovery-card h2 {
   margin: 0 0 13px;
   font: 800 20px/1.18 Arial,sans-serif;
   color: #1b912e;
   overflow-wrap: anywhere;
}
.recovery-type {
   font-size: 16px;
   margin: 0 0 8px;
}
.recovery-progress {
   font-size: 17px;
   font-weight: 700;
   margin: 0 0 8px;
}
.recovery-current {
   font-size: 15px;
   color: #555;
   margin: 0 0 25px;
}
.recovery-action {
   display: block;
   width: 100%;
   min-height: 56px;
   padding: 10px;
   border: 0;
   background: #1b912e;
   color: white;
   font: 800 18px/1.2 Arial,sans-serif;
   cursor: pointer;
}
.recovery-new {
   margin-top: 14px;
   border: 2px solid #1b912e;
   background: #fff;
   color: #1b912e;
}
.recovery-new.is-confirming {
   border-color: #c62828;
   color: #fff;
   background: #c62828;
   animation: recoveryConfirmPulse 1s ease-in-out infinite;
}
@keyframes recoveryConfirmPulse {
   0%,100% {
    opacity:1;
  } 50% {
    opacity:.65;
  } 
}
@media (prefers-reduced-motion: reduce) {
   .recovery-new.is-confirming {
     animation: none;
  } 
}

/* Stage 3A final polish: consistent Home section headings inside outlines. */
#homeScreen .recent-group {
   margin-top: 12px;
   padding-top: 10px;
}
#homeScreen .recent-group .recent-round-heading {
  position: static;
   margin: 0 0 12px;
   padding: 0 6px;
  min-height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
  text-align: center;
   color: #1b912e;
}
#homeScreen .recent-group .recent-round-heading span {
   background: transparent;
}
#homeScreen .recent-group .recent-round-heading::before,
#homeScreen .recent-group .recent-round-heading::after {
   display: none;
}
#homeScreen .recent-group .info-card {
   margin-top: 0;
}
/* Hole identification remains beneath the sticky course bar while scoring. */
#holeStatsScreen .hole-course-strip {
   top: 0;
}
#holeStatsScreen .hole-current {
  position: sticky;
   top: 62px;
   z-index: 19;
  background: #fff;
   padding: 12px 20px 13px;
  border-bottom: 1px solid #d8e3d9;
}
#holeStatsScreen .hole-body {
   padding-top: 5px;
}
#holeStatsScreen .hole-current strong {
   font-size: 28px;
}
@media (max-width: 430px) {
  #holeStatsScreen .hole-current {
     padding: 9px 20px 10px;
  }
  #holeStatsScreen .hole-current strong {
     font-size: 26px;
  }
}

#holeStatsScreen .hole-course-strip {
   min-height: 62px;
   box-sizing: border-box;
}


/* =========================================================
   AT THE TURN — overlay and preferences
   ========================================================= */
.turn-settings-link {
   justify-self:end;
   border:0;
   background:none;
   color:#555;
   font-size:12px;
   font-weight:700;
   padding:0 2px;
   cursor:pointer;
}
.at-turn-overlay {
   position:absolute;
   inset:0 0 76px;
   z-index:900;
   background:#183d2c;
   color:white;
   overflow:auto;
   opacity:0;
   transition:opacity .35s ease;
}
.at-turn-overlay[hidden], .turn-settings-overlay[hidden] {
   display:none!important;
}
.at-turn-overlay.turn-visible {
   opacity:1;
}
.turn-inner {
   min-height:100%;
   display:flex;
   flex-direction:column;
   justify-content:center;
   padding:25px 22px 22px;
   gap:23px;
   text-align:center;
}
.turn-kicker {
   color:#b8d4bf;
   font-size:10px;
   letter-spacing:.7px;
   font-weight:700;
}
#atTurnTitle {
   font-family:Arial,sans-serif;
   font-size:34px;
   letter-spacing:1px;
   margin:12px 0 4px;
   font-weight:900;
}
.turn-subtitle {
   color:#d0e5d4;
   font-size:19px;
   margin:0;
}
.turn-card {
   background:#fff;
   color:#26332b;
   padding:23px 19px;
   border-radius:16px;
   box-shadow:0 8px 24px #0002;
}
.turn-eyebrow {
   color:#666;
   font-size:12px;
   font-weight:700;
   letter-spacing:1px;
}
.turn-score {
   color:var(--charcoal);
   font-size:36px;
   font-weight:900;
   margin:9px 0;
}
.turn-card h2 {
   font-size:23px;
   line-height:1.16;
   margin:8px 0 13px;
}
.turn-card p {
   font-size:17px;
   line-height:1.38;
   margin:8px 0;
}
.turn-course-context {
   color:#44624c;
   font-size:15px!important;
}
.turn-bottom p {
   font-size:18px;
   line-height:1.3;
   font-weight:700;
   margin:0 0 18px;
}
.turn-continue {
   width:100%;
   border:0;
   border-radius:12px;
   padding:17px 10px;
   background:#1b912e;
   color:#fff;
   font-weight:900;
   font-size:18px;
   cursor:pointer;
}
.turn-enter {
   opacity:0;
   transform:translateY(65px);
}
.turn-visible .turn-enter {
   animation:turnRise .55s cubic-bezier(.2,.8,.2,1) both;
}
.turn-visible .turn-enter-one {
   animation-delay:.15s;
}
.turn-visible .turn-enter-two {
   animation-delay:.36s;
}
.turn-visible .turn-enter-three {
   animation-delay:.6s;
}
@keyframes turnRise {
   to {
     opacity:1;
     transform:translateY(0);
  } 
}
.turn-settings-overlay {
   position:absolute;
   inset:0;
   z-index:1100;
   background:#0009;
   display:flex;
   align-items:center;
   justify-content:center;
   padding:20px;
}
.turn-settings-card {
   width:100%;
   background:white;
   color:#333;
   border-radius:14px;
   padding:23px;
}
.turn-settings-card h2 {
   font-size:20px;
   margin:0 0 20px;
}
.turn-settings-row {
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:15px;
}
.turn-settings-row strong, .turn-settings-row small {
   display:block;
}
.turn-settings-row small {
   margin-top:6px;
   font-size:13px;
   line-height:1.3;
   color:#666;
}
.turn-settings-row input {
   width:26px;
   height:26px;
   accent-color:#1b912e;
   flex:none;
}
#turnSettingsClose {
   width:100%;
   background:#1b912e;
   color:#fff;
   border:0;
   border-radius:9px;
   margin-top:25px;
   padding:13px;
   font-weight:800;
}
@media(prefers-reduced-motion:reduce) {
   .at-turn-overlay {
     transition:none;
  } .turn-visible .turn-enter {
     animation:none;
     opacity:1;
     transform:none;
  } 
}

/* GLOBAL NAVIGATION — scoped to the working AT THE TURN build */
/* Compact outlined hamburger, contained entirely within the header zone. */
.global-menu-button {
   position:absolute;
   z-index:1100;
   right:14px;
   top:24px;
   width:44px;
   height:44px;
   padding:0;
   display:flex;
   align-items:center;
   justify-content:center;
   border:1.5px solid #fff;
   border-radius:9px;
   background: rgba(255,255,255,.20);
   color:#fff;
   box-shadow:none;
   cursor:pointer;
}
.global-menu-button:focus-visible {
   outline:3px solid #74d18b;
   outline-offset:2px;
}
.menu-lines {
   display:flex;
   width:23px;
   flex-direction:column;
   gap:5px;
}
.menu-lines span {
   display:block;
   width:100%;
   height:2px;
   border-radius:2px;
   background:currentColor;
}
/* Keep the menu clear of the right-hand score strip when expanded. */
.global-menu-panel {
  position:absolute;
  z-index:1110;
  right:14px;
  top:74px;
  width:min(310px,calc(100% - 20px));
  max-height:calc(100% - 150px);
  overflow:auto;
  background:white;
  border:2px solid #236c3d;
  border-radius:13px;
  box-shadow:0 8px 25px #0005;
  padding:9px
}
.global-menu-panel[hidden],.new-round-confirm[hidden],.home-new-round[hidden],.global-menu-button[hidden]{
  display:none!important
}
.global-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 9px 10px;
  color:#175d35
}
.global-menu-head button{
  border:0;
  background:none;
  font-size:26px;
  cursor:pointer
}
.global-menu-panel > button,
.global-menu-panel > a.global-menu-welcome {
  display:block;
  width:100%;
  text-align:left;
  padding:12px;
  border:0;
  border-bottom:1px solid #ddd;
  background:#fff;
  color:inherit;
  font:inherit;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
/* Primary destinations sit one level to the left of round tools. */
.global-menu-panel > button[data-global-dest="home"],
.global-menu-panel > a.global-menu-welcome {
  padding-left:0;
}
.global-menu-panel > a.global-menu-welcome:hover,
.global-menu-panel > a.global-menu-welcome:focus-visible {
  background:rgba(0,162,73,.10);
}
.global-menu-panel>button:disabled{
  opacity:.4;
  cursor:default
}
.global-menu-panel>button.global-menu-new{
  color:#a12b2b
}
.home-new-round{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:15px;
  background:#a72d2d;
  color:white;
  font-size:20px;
  font-weight:800;
  cursor:pointer
}
.new-round-confirm{
  position:absolute;
  z-index:1300;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0009;
  padding:18px
}
.new-round-confirm-card{
  background:#fff;
  width:100%;
  border-radius:14px;
  padding:24px 18px;
  text-align:center;
  box-shadow:0 8px 30px #0006
}
.new-round-confirm-card h2{
  margin:0 0 10px;
  font-size:22px
}
.new-round-confirm-card p{
  line-height:1.4
}
.new-round-confirm-card button{
  display:block;
  width:100%;
  margin-top:12px;
  padding:14px 8px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer
}
#keepCurrentRoundBtn{
  background:#168b38;
  color:white;
  border:0
}
#confirmNewRoundBtn{
  background:#a72d2d;
  color:white;
  border:0
}

/* Scorecard takes priority over global navigation when expanded. */
.scorebar-panel.is-open {
   z-index: 1200;
}
.scorebar-panel.is-open ~ .global-menu-button {
   display: none !important;
}

/* Score strip refinements: preserve panel geometry and lower only its contents. */
.scorebar-panel {
   border-top-left-radius: 9px;
}
.scorebar-inner {
   padding-top: 73px;
}
.scorebar-start strong.even {
   background: #f3f5f3;
}
.scorebar-start strong.under {
   background: #f3f5f3;
}
.scorebar-start strong.over {
   background: #f3f5f3;
}
#scorebarToParValue { font: inherit; }
.scorebar-start strong.even > b { color: var(--score-even); }
.scorebar-start strong.under > b { color: var(--score-under); }
.scorebar-start strong.over > b { color: var(--score-over); }

/* Score strip current-hole photo: text is live, not embedded in the image. */
.scorebar-inner {
   padding-top: 63px;
}
.scorebar-hole-photo {
  position: relative;
   width: 100%;
   height: 64px;
   margin: -58px auto 25px;
  border-radius: 7px 7px 2px 2px;
   overflow: hidden;
  background: linear-gradient(to bottom, rgba(0,0,0,.80), rgba(0,0,0,.06) 75%),
    url("images/score-strip-hole.png") center 35% / auto 85px no-repeat;
  display: flex;
   align-items: flex-start;
   justify-content: center;
  padding-top: 5px;
}
.scorebar-hole-photo strong {
   color: white;
   font: 800 12px/1.1 Arial,sans-serif;
  white-space: nowrap;
   text-shadow: 0 1px 3px #000;
}

/* Round total progress stays inside the score tile. */
.scorebar-start strong {
  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
  gap: 3px;
   min-height: 55px;
   padding: 5px 1px 4px;
}
.scorebar-start strong small {
  display: block;
   font: 700 8px/1.15 Arial, sans-serif;
  letter-spacing: -0.15px;
   color: var(--charcoal);
   white-space: nowrap;
  transform: translateY(5px);
}

/* Hole Stats screen logo */
.hole-hero .hole-logo {
  display: block;
  width: 260px;
  height: auto;
  margin-left: -5px;
  transform: translateY(-45px);
}

/* =========================================================
   PHONE REFINEMENTS — HOME, HEADER MENU, SCORE STRIP
   ========================================================= */
@media (max-width: 430px) {
  /* Constrain the home grid to the viewport and use symmetric gutters. */
  #homeScreen .content {
     width: 100%;
     min-width: 0;
     padding-left: 23px;
     padding-right: 23px;
     box-sizing: border-box;
  }
  #homeScreen .content > *, #homeScreen .home-card-group, #homeScreen .info-card {
     min-width: 0;
     max-width: 100%;
  }
  /* Reduce space between cards, without reducing the card content. */
  #homeScreen .home-card-group {
     gap: 8px;
  }
  #homeScreen .overall-group {
     margin-top: var(--home-section-spacing);
  }
  /* Global menu is positioned separately for the three header heights. */
  .app:has(#roundSetupScreen:not([hidden])) .global-menu-button,
  .app:has(#courseDataScreen:not([hidden])) .global-menu-button {
     top: 19px;
  }
  .app:has(#holeStatsScreen:not([hidden])) .global-menu-button {
     top: 6px;
  }
}
/* Compact the score strip enough to show hole 18 above the fixed footer.
   Preserve the current-hole photo and the full set of score indicators. */
.scorebar-hole-photo {
   margin-bottom: 10px;
}
.scorebar-start {
   padding-bottom: 4px;
   gap: 2px;
}
.scorebar-start strong {
   min-height: 47px;
}
.scorebar-rows {
   gap: 2px;
}
.scorebar-total {
   margin-bottom: 5px;
}


/* =========================================================
   HOME SCREEN — SECTION SPACING CONTROL
   =========================================================
   Change this one value to adjust the vertical space
   before the Overall / My Game section on the Home screen.
   This does NOT change spacing inside the outlined groups.
   ========================================================= */
#homeScreen {
  --home-section-spacing: 0px;
}

#homeScreen .overall-group {
  margin-top: var(--home-section-spacing);
}

/* ROUND COMPLETE — inherits At the Turn layout and entrance animation. */
.round-complete-overlay { background:#8c1e2b; }
.round-complete-overlay .turn-kicker { color:#ffd7da; }
.round-complete-overlay .turn-subtitle { color:#ffe0e2; }
.round-complete-overlay .turn-score { color:var(--charcoal); }
.round-complete-overlay .turn-continue { background:#fff; color:#81202b; }
.round-complete-overlay .round-complete-later { width:100%; margin-top:12px; padding:15px 10px; border:1.5px solid #fff; border-radius:12px; background:transparent; color:#fff; font-weight:800; font-size:17px; cursor:pointer; }
#roundCompleteTitle { font-family:Arial,sans-serif; font-size:clamp(29px,8vw,36px); letter-spacing:.4px; margin:10px 0; }

/* Performance color belongs only to numeric to-par values. */
.turn-score.score-under-par, .round-complete-to-par.score-under-par,
#homeDestinationScreen .chrc-card-metric strong.score-under-par { color:var(--score-under); }
.turn-score.score-even-par, .round-complete-to-par.score-even-par,
#homeDestinationScreen .chrc-card-metric strong.score-even-par { color:var(--score-even); }
.turn-score.score-over-par, .round-complete-to-par.score-over-par,
#homeDestinationScreen .chrc-card-metric strong.score-over-par { color:var(--score-over); }
.completed-clubhouse-action { display:block; width:100%; border:0; border-radius:12px; padding:15px 12px; background:#8c1e2b; color:#fff; font-weight:800; font-size:17px; cursor:pointer; }
.completed-clubhouse-action[hidden] { display:none !important; }
.completed-clubhouse-hole { position:sticky; top:0; z-index:40; border-radius:0; font-size:15px; }

/* Completed-round navigation refinement — one course bar, no floating red header. */
#holeStatsScreen .hole-course-strip.is-round-complete { background:#8c1e2b; }
#holeStatsScreen .hole-course-strip .hole-clubhouse-link { display:block; width:100%; padding:5px 0 2px; text-align:left; background:transparent; border:0; color:#fff; font:700 13px Calibri,Arial,sans-serif; letter-spacing:.25px; cursor:pointer; }
#holeStatsScreen .hole-course-strip .hole-clubhouse-link[hidden] { display:none!important; }
/* Consistent Home action button geometry and typography. */
#homeScreen .start-round, #homeScreen .completed-clubhouse-action, #homeScreen .home-new-round { box-sizing:border-box; width:100%; min-height:62px; height:62px; border-radius:19px; font-family:Calibri,Arial,sans-serif; font-size:21px; font-weight:800; letter-spacing:.2px; line-height:1.1; text-align:center; padding:0 14px; }
#homeScreen .start-round { border:2px solid #1b912e; background:#1b912e; color:white; }
#homeScreen .completed-clubhouse-action { border:2px solid #8c1e2b; background:#fff; color:#8c1e2b; }
#homeScreen .home-new-round { border:2px solid #1b912e; background:#fff; color:#1b912e; }


/* Completed round: all three Home actions have equal outlined prominence. */
#homeScreen .start-round.is-completed-round {
  border: 2px solid #1b912e;
  background: #fff;
  color: #1b912e;
}
#homeScreen .start-round.is-completed-round .double-chevron {
  animation: none;
  opacity: 1;
  transform: none;
  font-size: 26px;
}

/* Completed round: use the same static chevrons as the other Home actions. */
#homeScreen .start-round.is-completed-round .double-chevron {
  font-family: Calibri, Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .2px;
  animation: none;
  transform: none;
  opacity: 1;
}

/* Recovery status: Clubhouse-style one-time character reveal. */
#roundRecoveryScreen .recovery-alert-first,
#roundRecoveryScreen .recovery-alert-second { display: block; }
#roundRecoveryScreen .recovery-alert-second { white-space: nowrap; font-size: clamp(18px, 5.2vw, 23px); }
#roundRecoveryScreen .recovery-letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(75px, 0, 0);
  animation: recovery-letter-arrive 620ms cubic-bezier(.18,.75,.25,1) both;
  animation-delay: var(--recovery-letter-delay, 0ms);
}
#roundRecoveryScreen .recovery-space { white-space: pre; }
@keyframes recovery-letter-arrive {
  from { opacity: 0; transform: translate3d(75px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #roundRecoveryScreen .recovery-letter { animation: none; opacity: 1; transform: none; }
}

/* Recovery: only the numeric relative-to-par value carries performance color. */
#roundRecoveryScreen .recovery-to-par-value.is-under-par { color: var(--score-under); }
#roundRecoveryScreen .recovery-to-par-value.is-even-par { color: var(--score-even); }
#roundRecoveryScreen .recovery-to-par-value.is-over-par { color: var(--score-over); }

/* ROUND COMPLETE BILLBOARD — balanced vertical placement and round-length label. */
#roundCompleteOverlay .turn-inner {
  position: relative;
  top: -22px;
}
#roundCompleteOverlay .turn-card .turn-eyebrow {
  font-family: Arial, sans-serif;
  font-size: clamp(13px, 3.8vw, 16px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}

/* Hole saved acknowledgement: visual only; never blocks scoring controls. */
body > .hole-saved-confirmation {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
body > .hole-saved-confirmation .hole-saved-confirmation-card {
  width: min(68vw, 260px);
  min-height: 155px;
  border-radius: 16px;
  background: #00450e;
  color: #5ab64d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 900 clamp(43px, 12vw, 58px)/1.02 Arial, sans-serif;
  letter-spacing: -1px;
  text-align: center;
}
body > .hole-saved-confirmation.is-visible {
  visibility: visible;
  animation: holeSavedFlash 660ms ease-in-out both;
}
@keyframes holeSavedFlash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  55% { opacity: 1; }
  100% { opacity: 0; }
}


/* Read-only, device-local finalized-round archive */
.history-archive-card { margin: 12px 0; background: #fff; border: 1px solid #bbb; border-radius: 10px; padding: 14px; }
.history-archive-card summary { font-weight: 700; cursor: pointer; line-height: 1.4; }
.history-archive-details { overflow-wrap: anywhere; font-size: 14px; }
.history-archive-holes { display: grid; gap: 5px; border-top: 1px solid #ddd; padding-top: 10px; }

/* Finalized History: responsive heading and safe local score corrections. */
.history-archive-card summary { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 3px; align-items: baseline; }
.history-archive-total { font-weight: 600; font-size: 14px; color: #555; white-space: nowrap; }
.history-edit-button, .history-edit-actions button { border: 1px solid #1b912e; border-radius: 8px; background: white; color: #246a32; padding: 10px 12px; font-weight: 700; cursor: pointer; }
.history-edit-button { margin-top: 15px; }
.history-edit-form { margin-top: 14px; }
.history-edit-form[hidden], #historyLegacyPlaceholder[hidden], #finalizedHistoryList[hidden] { display: none !important; }
.history-edit-row { display: grid; grid-template-columns: minmax(65px,1fr) 1fr 1fr; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #ddd; }
.history-edit-row label { display: grid; gap: 4px; font-size: 13px; }
.history-edit-row input { width: 100%; min-width: 0; padding: 8px 4px; border: 1px solid #aaa; border-radius: 5px; font-size: 16px; }
.history-edit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.history-edit-status { font-size: 14px; }

/* Restore the native disclosure arrow lost when summary became flex.
   The arrow remains visible and reverses when the round is expanded. */
.history-archive-card > summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.history-archive-card > summary::-webkit-details-marker { display: none; }
.history-archive-card > summary::before { content: "▶"; display: inline-block; flex: 0 0 14px; font-size: 15px; line-height: 1; color: #303030; transition: transform .15s ease; }
.history-archive-card[open] > summary::before { transform: rotate(90deg); }
.history-archive-card > summary:focus-visible { outline: 2px solid #1b912e; outline-offset: 4px; }
.history-close-button { display: block; margin: 18px 0 4px; padding: 10px 12px; background: #fff; border: 1px solid #777; border-radius: 8px; color: #303030; font-weight: 700; cursor: pointer; }

/* History hole result and editable par: compact, legible on phone. */
.history-hole-line { display: grid; grid-template-columns: minmax(52px,1fr) 42px minmax(82px,1.2fr) minmax(60px,1fr); gap: 5px; align-items: baseline; font-size: 14px; }
.history-hole-score { font-weight: 700; color: var(--charcoal); }
.history-score-under { color: var(--score-under); }
.history-score-even { color: var(--score-even); }
.history-score-over { color: var(--score-over); }
.history-edit-row { grid-template-columns: minmax(50px,.9fr) minmax(46px,.65fr) minmax(72px,1.15fr) minmax(65px,1fr); gap: 7px; }
.history-edit-row input { padding: 8px 5px; }
@media (max-width: 350px) { .history-edit-row { gap: 4px; } .history-edit-row input { padding: 7px 3px; } }

/* Archive metrics derive from the corrected, authoritative hole records. */
.history-calculated-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 16px; }
.history-calculated-metric { display:flex; flex-direction:column; gap:3px; padding:10px; background:#f3f5f3; border-radius:8px; min-width:0; }
.history-calculated-metric > span { color:#505050; font-size:10px; font-weight:700; letter-spacing:.04em; }
.history-calculated-metric > strong { color:#252a27; font-size:17px; overflow-wrap:anywhere; }
.history-calculated-metric > strong.history-score-under { color:var(--score-under); }
.history-calculated-metric > strong.history-score-even { color:var(--score-even); }
.history-calculated-metric > strong.history-score-over { color:var(--score-over); }
@media(min-width:680px){ .history-calculated-summary { grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* History summary: six useful metrics, three columns, no broken words. */
.history-archive-card > summary { align-items: flex-start; }
.history-archive-heading { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.history-course-name { font-size:16px; line-height:1.35; overflow-wrap:normal; word-break:normal; }
.history-archive-total { display:block; font-size:13px; line-height:1.4; white-space:normal; overflow-wrap:normal; word-break:normal; }
.history-calculated-summary, .history-calculated-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.history-calculated-metric { text-align:center; align-items:center; justify-content:center; padding:10px 4px; min-height:83px; }
.history-calculated-metric > span { font-size:10px; letter-spacing:0; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.history-calculated-metric > strong { font-size:clamp(15px,4vw,20px); overflow-wrap:normal; word-break:normal; white-space:nowrap; }
@media(min-width:680px){ .history-calculated-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:360px){ .history-calculated-summary { gap:5px; } .history-calculated-metric > span { font-size:9px; } .history-calculated-metric > strong { font-size:14px; } }

/* Home-only stable sticky header: no scroll-driven height adjustments. */
#homeScreen > .hero { position:relative; top:auto; z-index:auto; }
#homeScreen > .welcome-strip { position:sticky; top:0; z-index:100; min-height:96px; height:auto; padding:10px 76px 12px 20px; display:flex; align-items:center; overflow:visible; }
#homeScreen .welcome-text { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
#homeScreen .today { display:block; align-self:auto; margin:0 0 2px; font-size:13px; line-height:1.2; }
#homeScreen .welcome-kicker { margin:0; }
#homeScreen .player-name { margin:0; }
#homeScreen .welcome-strip > #globalMenuBtn { position:absolute !important; top:auto !important; bottom:12px !important; right:20px !important; left:auto !important; }
#homeScreen .hero-wordmark { left:20px; }

/* ROUND SETUP ONLY — matched navigation button geometry.
   Preserve the existing sticky header and Home navigation. */
#roundSetupScreen .setup-header { position: relative; }
#roundSetupScreen .setup-back {
  position: absolute; left: 20px; bottom: 12px; top: auto;
  width: 44px; height: 44px; flex: 0 0 44px;
  box-sizing: border-box; margin: 0;
}
#roundSetupScreen .setup-heading { margin-left: 59px; }
/* The global menu is a direct child of .app, so position it at the
   same header-relative height while Round Setup is visible. */
.app:has(#roundSetupScreen:not([hidden])) > #globalMenuBtn {
  position: absolute; right: 20px; left: auto; top: 32px; bottom: auto;
  width: 44px; height: 44px; box-sizing: border-box; margin: 0;
}
@media (max-width: 430px) {
  .app:has(#roundSetupScreen:not([hidden])) > #globalMenuBtn { top: 24px; }
}

/* SHARED HEADER NAVIGATION LAYER — same coordinate system for both controls.
   No scroll handlers, no header-height changes. */
.setup-header, .hole-hero, #homeScreen > .welcome-strip { position:sticky; top:0; }
.setup-header, .hole-hero { isolation:isolate; }
.header-nav-layer { position:absolute; inset:0; z-index:100; pointer-events:none; }
.header-nav-layer > button { box-sizing:border-box !important; position:absolute !important;
  top:auto !important; bottom:12px !important; width:44px !important; height:44px !important;
  min-width:44px !important; min-height:44px !important; margin:0 !important;
  transform:none !important; flex:none !important; pointer-events:auto; }
.header-nav-layer > .setup-back { left:20px !important; right:auto !important; }
.header-nav-layer > .global-menu-button { right:20px !important; left:auto !important; }
/* Reserve a predictable heading lane between the two buttons. */
.setup-header:has(.header-nav-layer) { padding-left:82px; padding-right:82px; }
.setup-header:has(.header-nav-layer) > .setup-heading { flex:1; }
/* The Home exception retains its proven sticky welcome strip and menu location. */
#homeScreen > .welcome-strip > #globalMenuBtn { bottom:12px !important; right:20px !important; }

/* UNIFIED HEADER NAVIGATION: buttons share one positioned parent.
   Explicitly neutralize legacy per-screen positioning, including mobile rules. */
#roundSetupScreen .setup-header,
#courseDataScreen .course-data-header,
#homeDestinationScreen .destination-photo-header,
#roundRecoveryScreen .setup-header,
#holeStatsScreen .hole-hero { position:sticky; top:0; }
.header-nav-layer { position:absolute; inset:0; z-index:1100; pointer-events:none; }
.header-nav-layer > button.setup-back,
.header-nav-layer > button.global-menu-button {
  position:absolute !important; top:auto !important; bottom:12px !important;
  width:44px !important; height:44px !important;
  min-width:44px !important; min-height:44px !important;
  margin:0 !important; padding:0 !important;
  transform:none !important; box-sizing:border-box !important;
  flex:none !important; pointer-events:auto;
}
.header-nav-layer > button.setup-back { left:20px !important; right:auto !important; }
.header-nav-layer > button.global-menu-button { right:20px !important; left:auto !important; }
#homeScreen > .welcome-strip > button.global-menu-button {
  position:absolute !important; top:auto !important; bottom:12px !important;
  right:20px !important; left:auto !important; width:44px !important; height:44px !important;
}

/* HEADER FINISHING — unified button strokes and left-aligned Round Setup title.
   No changes to navigation controllers, button geometry or sticky scrolling. */
.header-nav-layer > button.global-menu-button {
  border: 1px solid #fff !important;
}
.header-nav-layer > button.global-menu-button .menu-lines span {
  height: 1px !important;
}
/* Keep the heading in its own lane but reclaim excess left indentation. */
#roundSetupScreen .setup-header:has(.header-nav-layer) {
  padding-left: 20px !important;
}
#roundSetupScreen .setup-header:has(.header-nav-layer) > .setup-heading {
  margin-left: 58px !important;
}

/* HOLE STATS: one fixed header assembly, with the existing shared menu
   attached to the black course bar instead of the photograph. */
#holeStatsScreen .hole-fixed-head {
  position:sticky; top:0; z-index:45; background:#fff;
  isolation:isolate;
}
#holeStatsScreen .hole-fixed-head .hole-hero {
  position:relative !important; top:auto !important;
  height:86px; min-height:86px; padding:12px 78px 12px 20px;
  display:flex; align-items:center; text-align:left;
}
#holeStatsScreen .hole-header-heading {display:flex; flex-direction:column; gap:3px; color:#fff; min-width:0;}
#holeStatsScreen .hole-header-kicker {font-size:12px; font-weight:800; letter-spacing:1.1px;}
#holeStatsScreen .hole-header-heading strong {font-size:23px; line-height:1.05; font-weight:800;}
#holeStatsScreen .hole-fixed-head .hole-course-strip {
  position:relative !important; top:auto !important;
  min-height:72px; padding:12px 78px 12px 20px;
  justify-content:center; box-sizing:border-box; z-index:1;
}
#holeStatsScreen .hole-fixed-head .hole-course-strip > .header-nav-layer {
  position:absolute; inset:0; z-index:20; pointer-events:none;
}
#holeStatsScreen .hole-fixed-head .hole-course-strip .global-menu-button {
  position:absolute !important; right:20px !important; left:auto !important;
  bottom:12px !important; top:auto !important; width:44px !important; height:44px !important;
  pointer-events:auto;
  border:1px solid #fff !important;
}
#holeStatsScreen .hole-fixed-head .hole-course-strip .global-menu-button .menu-lines span {
  height:1px !important;
}
#holeStatsScreen .hole-fixed-head .hole-current {
  position:relative !important; top:auto !important; z-index:auto !important;
  overflow:hidden; margin:0; background:#fff;
}
#holeStatsScreen .hole-current strong {display:block;}
#holeStatsScreen .hole-current.is-hole-transitioning strong {visibility:hidden;}
#holeStatsScreen .hole-current.is-hole-entering strong {
  visibility:visible;
  animation:holeIdentityArrive 820ms cubic-bezier(.17,.75,.28,1) both;
}
@keyframes holeIdentityArrive {
  from {transform:translateX(-85px); opacity:0;}
  to {transform:translateX(0); opacity:1;}
}
/* Existing slide-out scorecard tab, moved into the photographic header band. */
.app:has(#holeStatsScreen:not([hidden])) .scorebar-panel {z-index:60;}
.app:has(#holeStatsScreen:not([hidden])) .scorebar-tab {top:-17px;}
@media(prefers-reduced-motion:reduce){
  #holeStatsScreen .hole-current.is-hole-entering strong {animation:none;}
}

/* HOLE STATS REFINEMENT — match Round Setup title typography exactly. */
#holeStatsScreen .hole-header-heading {gap:0; color:#fff;}
#holeStatsScreen .hole-header-kicker {
  display:block; margin-bottom:2px;
  font-family:Arial,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:1.5px; color:#cfcfcf; line-height:normal;
}
#holeStatsScreen .hole-header-heading strong {
  display:block; font-family:"Arial Black",Arial,sans-serif;
  font-size:25px; font-weight:900; line-height:1.05;
  letter-spacing:-.5px; color:#fff;
}
/* Scorecard: keep the tab's existing top location; bring the panel up to meet it.
   Previously panel top 26px + tab top 74px = 100px. */
.app:has(#holeStatsScreen:not([hidden])) .scorebar-panel {
  top:100px; bottom:76px;
}
.app:has(#holeStatsScreen:not([hidden])) .scorebar-tab {
  top:0 !important;
}
.app:has(#holeStatsScreen:not([hidden])) .scorebar-inner {
  padding-top:8px;
}
/* Transparent full-height dismissal target behind the scorecard.
   No dark wash over the scoring UI. */
.app:has(#holeStatsScreen:not([hidden])) .scorebar-shade {
  top:100px; right:0; bottom:0; left:0;
  background:transparent !important;
  opacity:1 !important;
}
/* Longer, legible left-to-right hole identity arrival. */
#holeStatsScreen .hole-current.is-hole-entering strong {
  animation-duration:1640ms;
}

/* Hole Stats score strip: top of panel at top of photo; tab vertically centered
   in 100px photo band. One positioning reference for panel and tab. */
.app:has(#holeStatsScreen:not([hidden])) .scorebar-panel {
  top: 0 !important;
  bottom: 76px !important;
  z-index: 61 !important;
}
.app:has(#holeStatsScreen:not([hidden])) .scorebar-tab {
  top: 16px !important; /* (100px photo - 68px tab) / 2 */
}
/* Full-height transparent outside-tap target, excluding fixed footer. */
.app:has(#holeStatsScreen:not([hidden])) .scorebar-shade {
  position: absolute !important;
  inset: 0 0 76px 0 !important;
  z-index: 60 !important;
  background: transparent !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.app:has(#holeStatsScreen:not([hidden])) .scorebar-shade[hidden] {
  display: none !important;
}

/* Hole Stats score-strip content offset: keep panel and tab exactly where
   approved; restore clearance for the photo and score heading below the top.
   The photo's existing -58px top margin means 94px padding puts it ~36px down. */
.app:has(#holeStatsScreen:not([hidden])) .scorebar-inner {
  padding-top: 94px !important;
}

/* HOLE STATS ONLY — transparent Menu button */
#holeStatsScreen .global-menu-button {
  background: transparent !important;
  background-color: transparent !important;
}

/* Shared Circle-1 Menu appearance; navigation behavior unchanged. */
.global-menu-panel { background: #303030; color: #fff; border-color: #777; }
.global-menu-head { color: #fff; }
.global-menu-head button { color: #fff; }
.global-menu-panel > button,
.global-menu-panel > a.global-menu-welcome { background: #303030; color: #fff; border-bottom-color: #555; }
.global-menu-panel > button:hover:not(:disabled),
.global-menu-panel > button:focus-visible,
.global-menu-panel > a.global-menu-welcome:hover,
.global-menu-panel > a.global-menu-welcome:focus-visible { background: #414141; color: #fff; }
.global-menu-panel > button:disabled { color: #aaa; }
.global-menu-panel > button.global-menu-new { color: #ffb5b5; }

/* HOME / MY GAME / HISTORY — clear header navigation controls.
   Keep existing white outlines, symbols, dimensions and placement. */
#homeScreen .global-menu-button,
.app:has(#homeScreen:not([hidden])) > .global-menu-button,
#homeDestinationScreen .destination-photo-header .header-nav-layer > button.global-menu-button,
#homeDestinationScreen .destination-photo-header .header-nav-layer > button.setup-back,
.app:has(#homeDestinationScreen:not([hidden])) > .global-menu-button {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Preserve approved clear navigation controls on every scoring screen. */
.app .header-nav-layer > button.global-menu-button,
.app .header-nav-layer > button.setup-back,
#homeScreen .welcome-strip > button.global-menu-button,
#holeStatsScreen .global-menu-button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}