/* ============================================
   Fiesta Falls Miniature Golf — shared styles
   ============================================ */

:root {
  --fiesta-yellow: #ffc93c;
  --fiesta-orange: #f77f00;
  --fiesta-red-orange: #e85d04;
  --green: #00a650;
  --green-dark: #007337;
  --green-deep: #004f26;
  --cream: #fff9ee;
  --cream-dark: #f6eeda;
  --ink: #22301f;
  --white: #ffffff;
  --card-line: #b9d8c2;
  --birdie: #1d7ac4;
  --bogey: #c4451d;
  --radius: 16px;
  --shadow: 0 4px 14px rgba(20, 60, 30, 0.18);
  --font-display: "Shrikhand", "Chewy", cursive;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

/* the hidden attribute must win over display rules like .btn */
[hidden] {
  display: none !important;
}

a {
  color: var(--green);
}

/* ---------- wordmark ---------- */

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--fiesta-yellow) 15%, var(--fiesta-orange) 60%, var(--fiesta-red-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60, 30, 0, 0.35));
}

.wordmark-sub {
  font-family: var(--font-display);
  color: var(--fiesta-yellow);
  text-shadow: 0 1px 0 rgba(60, 30, 0, 0.4);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(180deg, var(--fiesta-yellow), var(--fiesta-orange));
  color: #4a2500;
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(20, 60, 30, 0.28);
}

.btn-green {
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow);
}

.btn-green:hover {
  background: var(--green-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--green-dark);
  border: 2px solid var(--green);
}

.btn-ghost:hover {
  background: rgba(27, 122, 61, 0.08);
}

.btn-block {
  display: block;
  width: 100%;
}

/* ---------- logo ---------- */

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.brand-lockup img {
  width: clamp(6.5rem, 18vw, 9rem);
  height: auto;
}

.hero-logo {
  width: clamp(220px, 46vw, 420px);
  margin: 0 auto 0.5rem;
  /* No perpetual idle motion: the inline SVG plays its one-shot assemble intro
     and then settles to a completely static final logo (the scroll ball provides
     the ongoing motion on the page now). */
}

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

@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
}

/* ---------- landing page ---------- */

.site-header {
  background: linear-gradient(160deg, var(--green-dark), var(--green-deep));
  color: var(--white);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.site-header .brand {
  font-size: 1.5rem;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.site-header nav a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.site-header nav a:hover {
  color: var(--fiesta-yellow);
}

.site-header nav .btn {
  padding: 0.5rem 1.1rem;
  font-size: 0.95rem;
}

.hero {
  /* This gradient is the fallback/base layer — it still shows through on the
     no-video path (reduced motion, save-data, or before the poster paints)
     and bleeds past the video's edges on ultra-wide viewports. */
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(255, 201, 60, 0.25), transparent 60%),
    linear-gradient(165deg, var(--green-dark) 0%, var(--green-deep) 100%);
  color: var(--white);
  text-align: center;
  padding: 4.5rem 1.25rem 5.5rem;
  position: relative;
  overflow: hidden;
}

/* Full-bleed background layer, behind everything else in the hero. Muted
   autoplay video with the poster image doing double duty as first paint and
   as the entire experience when the loop never loads (reduced motion,
   save-data, or a slow connection — see the loader script at the bottom of
   the page). */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default centre crop for the wide scenes; the sign-closer segment nudges this
     via JS so the two-sign billboard reads on tall/portrait phones (see the hero
     loader script). The transition turns those nudges into a gentle reframe pan.
     No effect on wide screens, where the whole frame is already in view. */
  object-position: 50% 50%;
  transition: object-position 0.85s ease;
  z-index: 0;
}

/* Bottom-heavy scrim so the white lede/buttons stay readable over bright
   footage (sky, water highlights) without flattening the video everywhere. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 79, 38, 0.55) 0%,
    rgba(0, 79, 38, 0.58) 35%,
    rgba(0, 79, 38, 0.68) 70%,
    rgba(0, 79, 38, 0.78) 100%
  );
  pointer-events: none;
}

/* Everything a visitor actually reads/clicks sits above the video + scrim. */
.hero > .hero-logo,
.hero > h1,
.hero > .tagline-script,
.hero > p.lede,
.hero > .hero-actions {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: clamp(3rem, 10vw, 5.5rem);
  margin-bottom: 0.25rem;
}

.hero .tagline-script {
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  margin-bottom: 1.25rem;
}

.hero p.lede {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  color: #d9e9de;
  text-shadow: 0 1px 6px rgba(0, 20, 10, 0.35);
}

.hero-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero .splash {
  position: absolute;
  z-index: 2;
  font-size: 2rem;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.splash-flag { top: 12%; left: 8%; }
.splash-palm { top: 20%; right: 10%; }
.splash-wave { bottom: 18%; left: 14%; }
.splash-anchor { bottom: 25%; right: 16%; }

/* On phones the hero is tall and narrow — the scattered desktop offsets
   land the emojis on top of the text, at uneven heights. Pin each pair
   to mirrored corners instead, inside the hero's padding zones. */
@media (max-width: 540px) {
  .hero .splash {
    font-size: 1.5rem;
    opacity: 0.4;
  }
  .splash-flag { top: 1.2rem; left: 6%; }
  .splash-palm { top: 1.2rem; right: 6%; }
  .splash-wave { bottom: 1.6rem; left: 6%; }
  .splash-anchor { bottom: 1.6rem; right: 6%; }
}

.wave-divider {
  display: block;
  width: 100%;
  margin-top: -1px;
}

section.page-section {
  max-width: 62rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
  scroll-margin-top: 7.5rem;
}

/* Phones: keep the slimmed 4-link + CTA nav on a SINGLE row. Everything in the
   bar is tightened together — logo, gaps, link type and the CTA button — and the
   CTA's decorative 📝 is hidden (the coloured "Scorecard" button still reads as the
   primary action) so the row never wraps at 390px. */
@media (max-width: 540px) {
  .site-header {
    padding: 0.5rem 0.6rem;
    gap: 0.35rem;
  }
  .site-header .brand {
    font-size: 1.15rem;
  }
  .brand-lockup img {
    width: 42px;
  }
  .site-header nav {
    gap: 0.4rem;
    justify-content: flex-end;
  }
  .site-header nav a {
    font-size: 0.74rem;
  }
  .site-header nav .btn {
    padding: 0.34rem 0.58rem;
    font-size: 0.74rem;
  }
  .nav-cta-ico {
    display: none;
  }
}

.section-title {
  font-family: var(--font-display);
  color: var(--green-dark);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin-bottom: 1.25rem;
  text-align: center;
}

.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.info-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border-top: 6px solid var(--fiesta-orange);
}

.info-card h3 {
  color: var(--green-dark);
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.info-card .big-emoji {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.rules-list {
  list-style: none;
  counter-reset: rule;
  display: grid;
  gap: 0.9rem;
  max-width: 40rem;
  margin: 0 auto;
}

.rules-list li {
  counter-increment: rule;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem 1rem 3.4rem;
  position: relative;
}

.rules-list li::before {
  content: counter(rule);
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--fiesta-yellow), var(--fiesta-orange));
  color: #4a2500;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rules-list li strong {
  color: var(--green-dark);
}

.par-note {
  text-align: center;
  margin-top: 1.25rem;
  font-weight: 700;
  color: var(--green-dark);
}

/* course card preview table */
.course-card-wrap {
  overflow-x: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-top: 1.5rem;
}

table.course-card {
  border-collapse: collapse;
  width: 100%;
  min-width: 540px;
  font-weight: 700;
  text-align: center;
}

table.course-card th,
table.course-card td {
  border: 1px solid var(--card-line);
  padding: 0.4rem 0.3rem;
  font-size: 0.9rem;
}

table.course-card th {
  background: var(--green);
  color: var(--white);
}

table.course-card td.total-cell {
  background: var(--green-dark);
  color: var(--fiesta-yellow);
}

/* ---------- Walk the Course ---------- */

/* feature headliners — postcard tiles that open the tour at that landmark.
   Sit below the course map inside the merged #explore section, so give them
   room to breathe from the map overview above. */
.walk-features {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 2.75rem 0 2.5rem;
}

.walk-feature {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--green-deep);
  box-shadow: var(--shadow);
  font-family: var(--font-body);
  aspect-ratio: 8 / 5;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease, box-shadow 0.16s ease;
}

.walk-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20, 60, 30, 0.28);
}

.walk-feature:active {
  transform: scale(0.985);
}

.walk-feature:focus-visible,
.walk-card:focus-visible {
  outline: 3px solid var(--fiesta-yellow);
  outline-offset: 2px;
}

.walk-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.walk-feature:hover .walk-feature-img {
  transform: scale(1.05);
}

/* little "opens the 3D tour" flag on every landmark tile */
.walk-feature::after {
  content: "▶ 3D";
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: #4a2500;
  background: linear-gradient(180deg, var(--fiesta-yellow), var(--fiesta-orange));
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.walk-feature-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 1.8rem 0.9rem 0.75rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
  text-align: left;
  line-height: 1.15;
  background: linear-gradient(to top, rgba(0, 40, 20, 0.88), rgba(0, 40, 20, 0.35) 55%, transparent);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.walk-feature-cap .wf-emoji {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1;
}

/* the 18-hole stroll — a horizontal snap-scroll rail */
.walk-rail-label {
  text-align: center;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
}

/* bleed to the screen edges on mobile so cards scroll edge-to-edge */
.walk-rail-wrap {
  margin: 0 -1.25rem;
}

.walk-rail {
  list-style: none;
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1.25rem;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1.25rem 1.25rem;
}

.walk-rail::-webkit-scrollbar {
  height: 8px;
}

.walk-rail::-webkit-scrollbar-thumb {
  background: var(--card-line);
  border-radius: 999px;
}

.walk-card-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.walk-card {
  width: 15rem;
  max-width: 78vw;
  display: block;
  padding: 0;
  border: 0;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease, box-shadow 0.16s ease;
}

.walk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20, 60, 30, 0.28);
}

.walk-card:active {
  transform: scale(0.985);
}

.walk-card-media {
  position: relative;
  display: block;
  aspect-ratio: 8 / 5;
  overflow: hidden;
}

.walk-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.walk-card-num {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green), var(--green-dark));
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.walk-card-par {
  position: absolute;
  top: 0.6rem;
  right: 0.55rem;
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.walk-card-par.par-2 {
  background: var(--white);
  color: var(--green-dark);
}

.walk-card-par.par-3 {
  background: linear-gradient(180deg, var(--fiesta-yellow), var(--fiesta-orange));
  color: #4a2500;
}

.walk-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem 0.8rem;
}

.walk-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--green-dark);
  line-height: 1;
}

.walk-card-go {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--fiesta-orange);
  white-space: nowrap;
}

@media (min-width: 700px) {
  .walk-card {
    width: 16.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .walk-feature,
  .walk-feature-img,
  .walk-card {
    transition: none;
  }
  .walk-feature:hover,
  .walk-card:hover {
    transform: none;
  }
  .walk-feature:hover .walk-feature-img {
    transform: none;
  }
}

/* ---------- illustrated course map ---------- */

.map-intro {
  text-align: center;
  max-width: 40rem;
  margin: -0.5rem auto 1.2rem;
  color: #5a6b57;
  font-weight: 700;
}

/* swipe cue — mobile only (see max-width: 700px block below) */
.map-swipe-hint {
  display: none;
  text-align: center;
  font-weight: 800;
  color: var(--fiesta-orange);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.7rem;
}

.map-scroll {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--cream-dark);
}

/* The stage's box is pinned by an explicit aspect-ratio (matching the artwork,
   1500x656) rather than being derived from the <img>'s intrinsic ratio. iOS
   Safari, inside the overflow-x:auto scroll container below, can mis-derive the
   image height under min/explicit width — which both stretched the artwork tall
   AND ballooned the stage so the percentage-positioned badges/chips spread far
   down it and read as a plain list "below" the map. Giving the stage its own
   ratio makes the positioning context deterministic regardless of image load. */
.map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 656;
  line-height: 0;
}

.map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ratio matches the stage exactly, so no crop/distortion */
  display: block;
  border-radius: var(--radius);
}

/* Very old engines without aspect-ratio: fall back to the classic padding-ratio
   box so the stage still reserves the correct height for the absolute image. */
@supports not (aspect-ratio: 1 / 1) {
  .map-stage {
    aspect-ratio: auto;
    height: 0;
    padding-bottom: 43.733%; /* 656 / 1500 */
  }
}

/* numbered hole badges */
.map-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.6rem;
  height: 2.6rem;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 3px solid var(--white);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--fiesta-yellow), var(--fiesta-orange));
  box-shadow: 0 2px 7px rgba(20, 40, 12, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.map-badge-num {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  color: #4a2500;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.map-badge:hover,
.map-badge:focus-visible {
  transform: translate(-50%, -50%) scale(1.16);
  box-shadow: 0 5px 15px rgba(20, 40, 12, 0.6);
  z-index: 5;
}

/* landmark label chips */
.map-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 40px;
  padding: 0.3rem 0.72rem;
  border: 2px solid var(--fiesta-orange);
  border-radius: 999px;
  background: rgba(255, 249, 238, 0.95);
  color: var(--green-dark);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(20, 40, 12, 0.45);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.map-chip-emoji {
  font-size: 1rem;
  line-height: 1;
}

.map-chip:hover,
.map-chip:focus-visible {
  transform: translate(-50%, -50%) scale(1.07);
  background: var(--white);
  box-shadow: 0 5px 15px rgba(20, 40, 12, 0.55);
  z-index: 5;
}

.map-badge:focus-visible,
.map-chip:focus-visible {
  outline: 3px solid var(--birdie);
  outline-offset: 2px;
}

/* MOBILE: don't shrink the map to an unreadable postcard — pin it to a
   fixed width and let visitors swipe across it, badges staying tappable. */
@media (max-width: 700px) {
  .map-swipe-hint {
    display: block;
  }
  .map-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .map-scroll::-webkit-scrollbar {
    height: 8px;
  }
  .map-scroll::-webkit-scrollbar-thumb {
    background: var(--card-line);
    border-radius: 999px;
  }
  .map-stage {
    /* Explicit width (not min-width vs width:100%) so WebKit sizes the swipeable
       stage deterministically: 900px wide is wider than the phone viewport, so
       the container's scrollWidth exceeds its clientWidth and it swipes. Height
       still comes from the aspect-ratio above. */
    width: 900px;
    scroll-snap-align: start;
  }
  .map-badge {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-badge,
  .map-chip {
    transition: none;
  }
  .map-badge:hover,
  .map-badge:focus-visible,
  .map-chip:hover,
  .map-chip:focus-visible {
    transform: translate(-50%, -50%);
  }
}

/* ---------- 3D tour overlay ---------- */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100vh;
  height: 100dvh;
  background: rgba(12, 59, 30, 0.94);
}

.tour-frame-wrap,
.tour-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.tour-close {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 101;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 2px solid var(--fiesta-yellow);
  background: var(--green-dark);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}

.tour-close:active {
  transform: scale(0.94);
}

/* ---------- fullscreen course-map viewer (assets/map-viewer.js) ---------- */

/* wrapper so the "View full map" chip pins over the map without scrolling with
   the mobile swipe container inside it */
.map-frame {
  position: relative;
}

.map-fullscreen-btn {
  position: absolute;
  bottom: 0.7rem;
  right: 0.7rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--fiesta-yellow);
  border-radius: 999px;
  background: rgba(0, 79, 38, 0.92);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(20, 40, 12, 0.42);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.15s ease;
}
.map-fullscreen-btn:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}
.map-fullscreen-btn:active {
  transform: scale(0.96);
}
.map-fullscreen-btn:focus-visible {
  outline: 3px solid var(--birdie);
  outline-offset: 2px;
}

.mv-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;                /* above page + scroll-ball(15) + nav(20); below tour(100) */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(1200px 720px at 50% 28%, rgba(0, 79, 38, 0.97), rgba(3, 32, 16, 0.985));
  /* the map fills the screen — nothing here scrolls, and this stops the browser
     from hijacking drags into back-swipe navigation while the viewer is up */
  touch-action: none;
}
.mv-overlay[hidden] {
  display: none !important;
}

/* the cloned stage. 2-class specificity (.mv-overlay .map-stage) intentionally
   beats every base .map-stage rule, including the 900px mobile swipe width. It's
   absolutely centred and NEVER rotated — each orientation is a pre-baked asset.

   ORIENTATION IS DRIVEN BY JS (assets/map-viewer.js), NOT by CSS @media. A real
   iPhone rotation makes the orientation media query flip-flop through the
   mid-gesture square-ish frames; driving the swap from JS lets us settle on ONE
   orientation (debounced matchMedia) and toggle .mv-stage-landscape /
   .mv-stage-portrait — which now swap the artwork's ratio + size only (JS swaps
   the image src + badge coordinate set to match). The ONLY thing that ever
   transitions here is opacity: the mode swap is a calm opacity dip, no motion. */
.mv-overlay .map-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1500 / 656;
  height: auto;
  line-height: 0;
  /* landscape natural fill is the default until JS resolves orientation */
  width: min(100vw, calc(100dvh * 1500 / 656));
  transform: translate(-50%, -50%); /* centring only — never a rotation */
  /* opacity ONLY — deliberately NOT transform: the swap fades, never moves */
  transition: opacity 0.15s ease;
  will-change: opacity;
}
/* landscape + desktop: the wide artwork, as large as its ratio allows inside the
   viewport. JS also pins width inline from visualViewport (iOS-fresh). */
.mv-overlay .map-stage.mv-stage-landscape {
  aspect-ratio: 1500 / 656;
  width: min(100vw, calc(100dvh * 1500 / 656));
}
/* portrait phones: the pre-rotated tall artwork (656x1500), using the phone's
   long axis. No transform — the image and badge coordinates are already portrait. */
.mv-overlay .map-stage.mv-stage-portrait {
  aspect-ratio: 656 / 1500;
  width: min(96vw, calc(96dvh * 656 / 1500));
}
/* while JS snaps the stage to a new orientation it adds this class so the snap
   (size + ratio + image + coordinates) is instantaneous — no property transition. */
.mv-overlay .map-stage.mv-stage-snapping {
  transition: none !important;
}

.mv-overlay .map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.mv-close {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 3;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 2px solid var(--fiesta-yellow);
  background: var(--green-dark);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.mv-close:active {
  transform: scale(0.94);
}

.visit-details {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* stretch (the grid default) so the three cards in a row share one height and
     stop ragging at the bottom; their content still flows from the top. */
  align-items: stretch;
}

.visit-details .info-card a {
  font-weight: 800;
}

/* soft serve menu board — styled after the real yellow sign */
.menu-tagline {
  text-align: center;
  font-weight: 700;
  color: #5a6b57;
  margin: -0.5rem auto 1.5rem;
  max-width: 34rem;
}

.menu-board {
  background: #f9f0b8;
  border: 10px solid var(--white);
  outline: 1px solid #d8d0b0;
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 1.75rem 1.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.menu-heading {
  font-family: var(--font-display);
  color: var(--green-dark);
  font-size: 1.3rem;
  margin-bottom: 0.9rem;
  border-bottom: 3px solid var(--fiesta-orange);
  padding-bottom: 0.3rem;
}

.menu-list {
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.menu-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.mi-name {
  font-weight: 800;
  color: var(--ink);
}

.mi-name small {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  color: #6b7566;
  line-height: 1.35;
}

.mi-dots {
  flex: 1;
  border-bottom: 2px dotted #b7ac7e;
  transform: translateY(-4px);
  min-width: 1.5rem;
}

.mi-price {
  font-weight: 900;
  color: var(--green-dark);
  white-space: nowrap;
}

.menu-toppings {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #5a6b57;
  margin-top: 1.4rem;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.menu-toppings strong {
  color: var(--green-dark);
}

.menu-fineprint {
  text-align: center;
  font-size: 0.8rem;
  color: #8b978a;
  margin-top: 0.5rem;
}

.scorecard-cta {
  background: linear-gradient(160deg, var(--green-dark), var(--green-deep));
  border-radius: calc(var(--radius) + 6px);
  color: var(--white);
  text-align: center;
  padding: 3rem 1.5rem;
  box-shadow: var(--shadow);
}

.scorecard-cta h2 {
  font-family: var(--font-display);
  color: var(--fiesta-yellow);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin-bottom: 0.75rem;
}

.scorecard-cta p {
  max-width: 32rem;
  margin: 0 auto 1.5rem;
  color: #d9e9de;
}

/* ---------- leaderboard page ---------- */

.lb-hero {
  padding: 2.75rem 1.25rem 3.5rem;
}

.lb-trophy {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.lb-hero h1 {
  font-size: clamp(2.4rem, 8vw, 4rem);
}

.lb-section {
  max-width: 40rem;
  padding-top: 2rem;
}

.lb-tabs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.lb-tab {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 2px solid var(--green);
  background: var(--white);
  color: var(--green-dark);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.lb-tab:active {
  transform: scale(0.96);
}

.lb-tab.active {
  background: linear-gradient(180deg, var(--fiesta-yellow), var(--fiesta-orange));
  border-color: var(--fiesta-orange);
  color: #4a2500;
}

.lb-board {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 6px solid var(--fiesta-orange);
  padding: 0.5rem 0;
  overflow: hidden;
}

.lb-status {
  text-align: center;
  font-weight: 700;
  color: #5a6b57;
  padding: 2.25rem 1.25rem;
}

.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.1rem;
}

.lb-row + .lb-row {
  border-top: 1px solid #eef3ea;
}

.lb-row.leader {
  background: linear-gradient(90deg, rgba(255, 201, 60, 0.18), rgba(255, 201, 60, 0.04));
}

.lb-place {
  flex: 0 0 2.2rem;
  text-align: center;
  font-weight: 900;
  color: var(--green-dark);
  font-size: 1rem;
}

.lb-place.has-medal {
  font-size: 1.45rem;
}

.lb-info {
  flex: 1;
  min-width: 0;
}

.lb-name {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-when {
  font-size: 0.78rem;
  font-weight: 700;
  color: #8b978a;
}

.lb-score {
  text-align: right;
}

.lb-total {
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--green-dark);
}

.lb-vspar {
  font-size: 0.78rem;
  font-weight: 800;
}

.lb-vspar.is-under { color: var(--birdie); }
.lb-vspar.is-par { color: #8b978a; }
.lb-vspar.is-over { color: var(--bogey); }

.lb-count {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #8b978a;
  margin-top: 0.75rem;
}

.lb-cta {
  text-align: center;
  margin-top: 2.25rem;
}

.lb-cta p {
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 0.75rem;
}

.site-footer {
  background: var(--green-deep);
  color: #bcd6c3;
  text-align: center;
  padding: 2rem 1.25rem;
  font-size: 0.9rem;
}

.footer-logo {
  width: clamp(8rem, 22vw, 10rem);
  margin: 0 auto 0.6rem;
}

.site-footer p {
  margin-top: 0.4rem;
}

/* Quiet designer's signature — chubs.io studio mark, tinted to the fiesta
   palette. Reads as a soft credit on the dark-green footer, not an ad. */
.design-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.95rem;
  color: #9dbfa7;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.design-credit:hover,
.design-credit:focus-visible {
  opacity: 1;
  color: #dcecdf;
}
.design-credit-mark {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  flex: none;
}

/* ============================================================================
   Signature scroll interaction — the "putted" golf ball (assets/scroll-ball.js)
   Everything here is a fixed overlay, built and driven entirely by JS, so it
   causes zero layout shift and simply never appears if the script doesn't run
   or the visitor prefers reduced motion.
   ============================================================================ */

/* The SVG logo ball is hidden the same frame the traveling ball spawns, so the
   two never paint together. Three classes deep beats the inline SVG's own
   `.ff-ball` rule on specificity, and it only touches opacity — the intro
   assemble animation and the reduced-motion states are left untouched. */
.hero-logo .ff-ball.is-putted { opacity: 0; }

.sb-root {
  position: fixed;
  inset: 0;
  z-index: 15;               /* above content, below the sticky nav + 3D tour */
  pointer-events: none;      /* never intercept a tap */
  overflow: visible;
  opacity: 0;
  visibility: hidden;
}
.sb-root.sb-visible {
  opacity: 1;
  visibility: visible;
}

.sb-ball {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;    /* transform-only, translate3d updates */
}
.sb-spin {
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* The visible ball: white with a soft radial sheen, a soft drop shadow and a
   hairline outline so it reads on both the dark video hero and cream sections. */
.sb-core {
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #ffffff 0%, #f4f7f4 58%, #dbe6de 100%);
  box-shadow:
    0 3px 9px rgba(20, 50, 25, 0.35),
    0 1px 2px rgba(20, 50, 25, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset -2px -3px 5px rgba(20, 60, 30, 0.14);
  outline: 1px solid rgba(30, 60, 35, 0.12);
}
/* short motion streak on the strike */
.sb-core::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 34%;
  height: 160%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
}

/* strike: quick squash then launch pop (no putter geometry) */
.sb-core.sb-launch { animation: sbLaunch 0.43s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.sb-core.sb-launch::before { animation: sbStreak 0.43s ease-out both; }
@keyframes sbLaunch {
  0%   { transform: scale(1, 1); }
  18%  { transform: scale(1.32, 0.7); }   /* squash */
  46%  { transform: scale(0.86, 1.2); }   /* launch */
  70%  { transform: scale(1.06, 0.95); }
  100% { transform: scale(1, 1); }
}
@keyframes sbStreak {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.4); }
  30%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.15); }
}

/* sink (top-down): a tiny lip nudge, then the ball shrinks + darkens + drops
   straight into the hole and vanishes — reads as falling in from directly above. */
.sb-core.sb-sink { animation: sbSink 0.62s cubic-bezier(0.34, 0.9, 0.44, 1) forwards; }
@keyframes sbSink {
  0%   { transform: translateY(0) scale(1);     opacity: 1; filter: brightness(1); }
  18%  { transform: translateY(-4px) scale(1.03); opacity: 1; filter: brightness(1.02); }  /* nudge over the lip */
  46%  { transform: translateY(1px) scale(0.9);  opacity: 1; filter: brightness(0.92); }
  100% { transform: translateY(4px) scale(0.28); opacity: 0; filter: brightness(0.5); }    /* shrink into the dark */
}

/* the top-down hole fixture (small green patch + cut hole) */
.sb-cup {
  position: absolute;
  width: 64px;
  height: 56px;
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transform-origin: 50% 100%;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.sb-cup.sb-cup-show { transform: translateY(0) scale(1); }
/* settle bounce: the rim + highlight give a little "plip" as the ball drops in */
.sb-hole-rim,
.sb-hole-highlight {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.sb-cup.sb-cup-pop .sb-hole-rim,
.sb-cup.sb-cup-pop .sb-hole-highlight {
  animation: sbRimPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes sbRimPop {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Belt-and-suspenders: even if the script is served to a reduced-motion client
   by mistake, keep the whole fixture invisible and inert. */
@media (prefers-reduced-motion: reduce) {
  .sb-root { display: none !important; }
  .hero-logo .ff-ball.is-putted { opacity: 1; }
}

/* ============================================
   "Find the Ball" daily game (assets/ball-hunt.js)
   Dormant unless the server reports enabled:true, so none of this shows
   on production. Overlay-only: the ball sits on top of a walk card/tile
   as its own hit target and never blocks the card's tap-to-tour.
   ============================================ */

/* one-line teaser under the Explore intro (enabled + unclaimed only) */
.bh-teaser {
  text-align: center;
  max-width: 42rem;
  margin: -0.35rem auto 1.4rem;
  font-weight: 800;
  color: var(--fiesta-red-orange);
  font-size: 0.98rem;
  line-height: 1.35;
}

/* tiny "found already today" line by the Explore heading (claimed state) */
.bh-note {
  display: block;
  width: 100%;
  text-align: center;
  max-width: 42rem;
  margin: -0.35rem auto 1.4rem;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--green-dark);
  font-size: 0.95rem;
  line-height: 1.35;
}
button.bh-note {
  background: none;
  border: 0;
  cursor: pointer;
}
button.bh-note:hover {
  text-decoration: underline;
}

/* the hidden golf ball, absolutely placed inside a walk card/feature at x%,y% */
.bh-ball {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  z-index: 6;
  opacity: 0.92;
  -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #f3f4ee 42%, #cfd3c4 78%, #a4a893 100%);
  box-shadow:
    inset -2px -2px 3px rgba(0, 0, 0, 0.3),
    inset 2px 2px 3px rgba(255, 255, 255, 0.75),
    0 2px 5px rgba(0, 0, 0, 0.35);
  animation: bh-shimmer 2.6s ease-in-out infinite;
}
/* enlarge the finger hit target without growing the visible ball */
.bh-ball::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
}
/* a faint hint of dimples */
.bh-ball::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  opacity: 0.7;
  background:
    radial-gradient(circle at 50% 34%, rgba(0, 0, 0, 0.11) 0.6px, transparent 1.3px),
    radial-gradient(circle at 32% 60%, rgba(0, 0, 0, 0.09) 0.6px, transparent 1.3px),
    radial-gradient(circle at 68% 60%, rgba(0, 0, 0, 0.09) 0.6px, transparent 1.3px);
}
.bh-ball:hover {
  opacity: 1;
}
.bh-ball:active {
  transform: translate(-50%, -50%) scale(0.9);
}

@keyframes bh-shimmer {
  0%, 100% {
    box-shadow:
      inset -2px -2px 3px rgba(0, 0, 0, 0.3),
      inset 2px 2px 3px rgba(255, 255, 255, 0.75),
      0 2px 5px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(255, 236, 150, 0);
  }
  50% {
    box-shadow:
      inset -2px -2px 3px rgba(0, 0, 0, 0.3),
      inset 2px 2px 3px rgba(255, 255, 255, 0.75),
      0 2px 5px rgba(0, 0, 0, 0.35),
      0 0 8px 2px rgba(255, 236, 150, 0.6);
  }
}

/* celebration / late-finder modal */
.bh-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 30, 16, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: bh-fade 0.2s ease;
}
.bh-overlay[hidden] {
  display: none;
}
.bh-modal {
  position: relative;
  width: 100%;
  max-width: 23rem;
  background: var(--cream);
  border-radius: 22px;
  border: 3px solid var(--fiesta-yellow);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  padding: 1.9rem 1.4rem 1.5rem;
  text-align: center;
  animation: bh-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.bh-modal-close {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.bh-modal-close:hover {
  background: rgba(0, 0, 0, 0.16);
}
.bh-modal-emoji {
  display: block;
  font-size: 2.9rem;
  line-height: 1;
}
.bh-modal-title {
  font-family: var(--font-display);
  color: var(--green-dark);
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 0.55rem 0 0.2rem;
}
.bh-modal-date {
  font-weight: 800;
  color: var(--fiesta-orange);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.bh-code {
  display: block;
  font-family: var(--font-display);
  letter-spacing: 0.16em;
  font-size: 2.1rem;
  color: #4a2500;
  background: linear-gradient(180deg, var(--fiesta-yellow), var(--fiesta-orange));
  border-radius: 14px;
  padding: 0.5rem 0.4rem 0.45rem 0.56rem;
  margin: 0 auto 1rem;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.4), 0 3px 10px rgba(0, 0, 0, 0.2);
}
.bh-redeem {
  font-weight: 800;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.35;
  margin-bottom: 0.55rem;
}
.bh-fine {
  font-size: 0.72rem;
  color: #6a7a63;
  line-height: 1.4;
}
.bh-cta {
  margin-top: 1.15rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1rem;
  color: var(--white);
  cursor: pointer;
  background: linear-gradient(180deg, var(--green), var(--green-dark));
  box-shadow: 0 4px 12px rgba(0, 80, 40, 0.32);
}
.bh-cta:hover {
  filter: brightness(1.05);
}

@keyframes bh-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bh-pop {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bh-ball { animation: none; }
  .bh-overlay, .bh-modal { animation: none; }
}

/* ---------- fullscreen map viewer: markers shrink, targets don't ----------
   At 42px across, eighteen badges plus four chips covered ~18% of the course
   artwork — the thing people opened the viewer to look at. Shrink what's drawn
   and restore the touch target with a transparent pad, so the numbers stay just
   as easy to hit while the map is actually visible underneath them. */
.mv-overlay .map-badge {
  width: 1.65rem;
  height: 1.65rem;
  min-width: 26px;
  min-height: 26px;
  border-width: 2px;
  box-shadow: 0 1px 5px rgba(20, 40, 12, 0.45);
}

.mv-overlay .map-badge-num {
  font-size: 0.78rem;
}

/* Invisible 44px hit area centred on the badge — part of the button, so it
   takes the tap without drawing anything. */
.mv-overlay .map-badge::after,
.mv-overlay .map-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.mv-overlay .map-chip {
  font-size: 0.7rem;
  padding: 0.24rem 0.5rem;
  min-height: 0;        /* the ::after pad carries the touch target now */
  border-width: 1.5px;
}

.mv-overlay .map-chip-emoji {
  font-size: 0.82rem;
}

/* Keep the press feedback proportional to the smaller marker. */
.mv-overlay .map-badge:hover,
.mv-overlay .map-badge:focus-visible {
  transform: translate(-50%, -50%) scale(1.22);
}

/* ============================================
   Rates card + hours + visit notes (owner content, Aug 2026)
   ============================================ */

/* Rates sit in the third card under the hero — the first thing most people
   want to know after "what is it". Dotted leaders match the soft serve menu. */
.rate-list,
.hours-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  text-align: left;
}

.rate-list li,
.hours-list li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.rate-list li + li,
.hours-list li + li {
  border-top: 1px dashed var(--card-line, #dfe9e0);
}

.rate-who,
.hr-day { flex: 0 1 auto; }

/* A plain dash between label and price. Dotted leaders looked tidy in theory
   but read as one run-on string — "Adult$14.50" — the moment the dots were
   faint or the row was narrow. */
.rate-sep {
  flex: 1 1 auto;
  text-align: right;
  padding-right: 0.5rem;
  color: #9bb3a3;
  font-weight: 700;
}

.rate-price,
.hr-time {
  flex: none;
  font-weight: 900;
  color: var(--green-dark, #007337);
  font-variant-numeric: tabular-nums;
}

.rate-list .rate-free .rate-price { color: var(--fiesta-orange, #f77f00); }

.rate-note,
.hours-note {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #5a6b57;
}

/* Hours read as a block: day left, time right, with a guaranteed gap between
   them so they never crowd on a narrow card. */
.hours-list li {
  justify-content: space-between;
  gap: 1rem;
}
.hours-list .hr-day { font-weight: 800; white-space: nowrap; }
.hours-list .hr-time { white-space: nowrap; }

/* Practical notes under the Visit cards: parties, buses, holiday hours. */
/* Second row of Visit cards — same card as the first row, just further down. */
.visit-notes { margin-top: 1.1rem; }