.baseball-page {
  --bg: #eef8ec;
  --bg-soft: #d7ecd2;
  --panel: rgba(250, 255, 248, 0.88);
  --panel-strong: rgba(250, 255, 248, 0.97);
  --text: #233427;
  --muted: #5d755e;
  --accent: #3e8a4d;
  --accent-strong: #1f6130;
  --sand: #79ae72;
  --sand-soft: #bfe0b8;
  --outline: rgba(48, 99, 53, 0.16);
  --shadow: 0 18px 40px rgba(36, 82, 41, 0.14);
  --ballpark-marker-unvisited: url("../images/ball.svg");
  --ballpark-marker-visited: url("../images/strike.svg");
  background:
    linear-gradient(145deg, rgba(70, 142, 80, 0.2), transparent 34%),
    linear-gradient(90deg, transparent, rgba(206, 58, 58, 0.08) 48%, transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg-soft));
}

.baseball-page h1 {
  max-width: 12ch;
  font-family: "Arial Black", "Segoe UI Black", Impact, sans-serif;
  font-size: 4.6rem;
  font-weight: 900;
  font-style: italic;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.baseball-page .hero-copy,
.baseball-page .stats-card,
.baseball-page .panel {
  border-color: rgba(48, 99, 53, 0.18);
}

.baseball-page .button-solid,
.baseball-page .filter-chip.is-active,
.baseball-page .progress-fill {
  background: #3e8a4d;
}

.baseball-page .button-solid:hover {
  background: #1f6130;
}

.baseball-page .filter-chip,
.baseball-page .search-field input {
  border-color: rgba(48, 99, 53, 0.18);
}

.baseball-options-card {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.5rem;
}

.baseball-options-grid {
  display: grid;
  gap: 0.35rem;
}

.baseball-option-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0;
  margin-left: 0;
  width: 100%;
}

.baseball-page .usa-image-map {
  aspect-ratio: 16 / 10;
}

.baseball-page .ballpark-map-frame {
  background:
    linear-gradient(180deg, rgba(218, 240, 248, 0.9), rgba(237, 249, 233, 0.92));
}

.ballpark-legend-dot {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: center / contain no-repeat var(--ballpark-marker-unvisited);
}

.ballpark-legend-dot::before,
.ballpark-legend-dot::after {
  content: none;
}

.ballpark-legend-dot-visited {
  background-image: var(--ballpark-marker-visited);
}

.baseball-pin-style-pins {
  --ballpark-marker-unvisited: url("../images/pin-unvisited.svg");
  --ballpark-marker-visited: url("../images/pin-visited.svg");
}

.ballpark-map {
  position: absolute;
  inset: 0;
}

.ballpark-map-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ballpark-map-water {
  fill: rgba(190, 219, 230, 0.92);
}

.ballpark-map-country {
  fill: rgba(249, 255, 246, 0.96);
  stroke: rgba(64, 119, 70, 0.32);
  stroke-linejoin: round;
  stroke-width: 1.15;
}

.ballpark-map-country-secondary {
  fill: rgba(229, 244, 225, 0.9);
}

.ballpark-map-admin-boundary {
  fill: none;
  stroke: rgba(64, 119, 70, 0.24);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}

.ballpark-map-marker {
  cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(35, 49, 39, 0.28));
}

body[data-page="baseball-map-only"] .ballpark-map-marker {
  cursor: default;
}

.ballpark-map-label {
  pointer-events: none;
}

.ballpark-map-label-text {
  fill: #1f6130;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.ballpark-map-marker:focus-visible {
  outline: none;
}

.ballpark-map-marker:focus-visible .ballpark-map-marker-image {
  filter: drop-shadow(0 0 0.35rem rgba(31, 97, 48, 0.8));
}

.ballpark-map-watermark {
  fill: rgba(31, 97, 48, 0.52);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .baseball-page h1 {
    font-size: 3rem;
  }
}