/* ============================================================
   kaart.css — live-locatie kaart in scoreboard + spelleiding
   Werkt op Leaflet 1.9 met CartoDB dark-tiles
   ============================================================ */

.kaart-canvas {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  background: var(--board-bg);
}

/* Admin-variant: lichter, ronde hoeken, geen rand-omhulsel */
.admin-card-kaart { padding: 0; overflow: hidden; }
.kaart-canvas-admin {
  background: var(--paper-warm);
  height: 64vh;
  min-height: 520px;
}
.kaart-legenda-licht {
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  font-weight: 600;
}
.kaart-legenda-licht .legenda-dot.legenda-oud {
  background: rgba(107, 117, 110, .35);
  border-color: var(--mute);
}
.kaart-legenda-licht .legenda-dot.legenda-vers {
  border-color: var(--clay);
}
.kaart-legenda-licht .legenda-dot.legenda-recent {
  border-color: var(--willow-deep);
}

.kaart-leeg {
  display: grid;
  place-items: center;
  height: 70vh;
  color: rgba(255, 255, 255, .4);
  font-family: var(--sans);
  font-style: italic;
  font-size: 14px;
}

.kaart-legenda {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .8);
  border-top: 1px solid rgba(255, 255, 255, .08);
  flex-wrap: wrap;
}
.legenda-rij { display: inline-flex; align-items: center; gap: 8px; }
.legenda-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid;
  box-sizing: border-box;
  flex-shrink: 0;
}
.legenda-dot.legenda-vers   { background: var(--clay);   border-color: var(--clay-soft); }
.legenda-dot.legenda-recent { background: var(--willow); border-color: var(--willow-tint); }
.legenda-dot.legenda-oud    { background: rgba(255, 255, 255, .25); border-color: rgba(255, 255, 255, .45); }


/* ── Team-marker op Leaflet ──────────────────────────────── */
/* Leaflet wikkelt onze HTML in een .leaflet-marker-icon — we
   gebruiken div-icon (geen img) en geven 0,0 size mee zodat de
   class-positionering uit team-marker zelf bepaalt. */

.team-marker-wrap {
  background: transparent !important;
  border: none !important;
}

.team-marker {
  position: relative;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.team-marker-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--surface);
  background: var(--clay);
  border: 2.5px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  position: relative;
}

.team-marker-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--surface);
  background: rgba(15, 28, 22, .88);
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 6px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(4px);
}

/* Versheid-varianten */
.team-marker-vers .team-marker-dot {
  background: var(--clay);
  box-shadow: 0 0 0 6px rgba(176, 83, 46, .25), 0 4px 12px rgba(0, 0, 0, .4);
  animation: markerPuls 2s ease-in-out infinite;
}
.team-marker-recent .team-marker-dot {
  background: var(--willow);
}
.team-marker-oud .team-marker-dot {
  background: rgba(120, 120, 120, .7);
  border-color: rgba(255, 255, 255, .5);
}
.team-marker-oud .team-marker-label {
  color: rgba(255, 255, 255, .5);
  font-style: italic;
}

@keyframes markerPuls {
  0%, 100% { box-shadow: 0 0 0 4px rgba(176, 83, 46, .25), 0 4px 12px rgba(0, 0, 0, .4); }
  50%      { box-shadow: 0 0 0 10px rgba(176, 83, 46, 0),   0 4px 12px rgba(0, 0, 0, .4); }
}

@media (prefers-reduced-motion: reduce) {
  .team-marker-vers .team-marker-dot { animation: none; }
}


/* ── Puzzel-marker (statische opdracht-locaties) ─────────── */

.puzzel-marker-wrap {
  background: transparent !important;
  border: none !important;
  z-index: 100 !important;  /* onder team-markers */
}
.puzzel-marker {
  position: relative;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.puzzel-marker-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--willow);
  border: 2px solid var(--willow-tint);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.puzzel-marker-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--willow-tint);
  background: rgba(15, 28, 22, .82);
  padding: 2px 7px;
  border-radius: 6px;
  margin-top: 4px;
  white-space: nowrap;
  border: 1px solid rgba(198, 210, 201, .25);
  text-transform: uppercase;
}

/* Op admin-kaart (light tiles): donkere tekst-label */
.kaart-canvas-admin ~ * .puzzel-marker-label,
.kaart-canvas-admin .puzzel-marker-label,
.admin-card-kaart .puzzel-marker-label {
  color: var(--surface);
  background: var(--willow);
  border-color: var(--willow-deep);
}