/* Static map legend. Keep this structural: the legend must render before JavaScript. */
.opening-stat {
  height: 76px;
  grid-template-rows: 54px 22px;
}

.opening-stat__item {
  grid-row: 1;
}

.map-legend {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 2.4vw, 15px);
  padding: 2px 8px 3px;
  color: var(--cgb-ink-700);
  background: var(--cgb-white);
  border-top: 1px solid var(--cgb-neutral-200);
  font-family: var(--font-condensed);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

.map-legend__item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.map-legend__marker {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  display: block;
  box-sizing: border-box;
  transform: rotate(-45deg);
  background: var(--cgb-white);
  border: 2px solid var(--cgb-navy-950);
  border-radius: 50% 50% 50% 0;
}

.map-legend__marker--cal-bar {
  background: var(--cgb-navy-900);
  border-color: var(--cgb-navy-900);
}

.map-legend__marker--cal-bar::after,
.map-legend__marker--fan-added::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
}

.map-legend__marker--cal-bar::after {
  background: var(--cgb-white);
}

.map-legend__marker--fan-added::after {
  background: var(--cgb-navy-950);
}

.map-legend__marker--watch-party {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  background: var(--cgb-gold-400);
  border-color: var(--cgb-gold-400);
}

.map-legend__marker--watch-party::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--cgb-navy-950);
  border-radius: 50%;
}

.map-legend__marker--watch-party::after {
  content: '★';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cgb-white);
  font-family: Arial, sans-serif;
  font-size: 6px;
  line-height: 1;
  transform: rotate(45deg);
}

@media (max-width: 390px) {
  .map-legend {
    gap: 7px;
    padding-inline: 6px;
    font-size: .54rem;
  }

  .map-legend__item {
    gap: 4px;
  }
}