.game-map,
.live-map {
  height: 475px;
  background: radial-gradient(ellipse at 65% 27%, #e2eee6, transparent 54%), #f0f2df;
}

.game-map::before,
.game-map::after,
.live-map::before,
.live-map::after { display: none; }

.garda-coordinates {
  position: absolute;
  z-index: 1;
  top: 37px;
  left: 50%;
  height: min(calc(100% - 112px), calc((100vw - 60px) * 1.136));
  aspect-ratio: 2500 / 2840;
  transform: translateX(-50%);
}

.garda-map-outline {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 9px 9px rgb(20 54 66 / 15%));
}

.garda-coordinates .map-pin,
.garda-coordinates .camera-pin { z-index: 3; }
.game-map .pin-dot { background: var(--yellow); border-color: var(--ink); }
.game-map .map-pin.is-active .pin-dot { border-color: #fff; }

.camera-pin i {
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
}
.camera-pin.is-selected i { border-color: #fff; }

/* Pozycje odnoszą się do współrzędnych z mapy źródłowej (2500 × 2840). */
.pin-riva { left: 82%; top: 3%; flex-direction: row-reverse; transform: translateX(-100%); }
.pin-limone { left: 69%; top: 19%; flex-direction: row-reverse; transform: translateX(-100%); }
.pin-malcesine { left: 75%; top: 29%; }
.pin-bardolino { left: 60%; top: 74%; }
.pin-sirmione { left: 40%; top: 89%; flex-direction: row-reverse; transform: translateX(-100%); }
.pin-desenzano { left: 43%; top: 76%; flex-direction: row-reverse; transform: translateX(-100%); }
.pin-peschiera { left: 55%; top: 94%; }
.camera-riva { left: 82%; top: 2%; flex-direction: row-reverse; transform: translateX(-100%); }
.camera-torbole { left: 87%; top: 11%; flex-direction: row-reverse; transform: translateX(-100%); }
.camera-limone { left: 75%; top: 20%; flex-direction: row-reverse; transform: translateX(-100%); }
.camera-malcesine { left: 75%; top: 30%; }
.camera-peschiera { left: 55%; top: 94%; }

.map-caption,
.live-map > small { max-width: calc(100% - 26px); line-height: 1.25; }
.map-caption a,
.live-map > small a { color: inherit; text-underline-offset: 2px; }

@media (max-width: 650px) {
  .game-map,
  .live-map { height: 460px; }
  .garda-coordinates { top: 38px; }
  .map-legend { bottom: 43px; }
  .map-caption,
  .live-map > small { font-size: 10px; }
}