/* ============================================================
   CARTE LIVE — compléments
   Chargé uniquement sur /map (voir $pageCss dans map.php)
   ============================================================ */
.map-area { grid-auto-flow: dense; transform-origin: center center; transition: transform 0.3s ease; }
.map-canvas-wrap { overflow: auto; }
.map-online-count { margin-left: auto; font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.08em; color: #44ff88; }

/* Boss sur zone Cristal (Korvus) */
.zone-boss-crystal { border-color: var(--crystal) !important; box-shadow: 0 0 12px rgba(51,170,255,0.45); }

/* Le point joueur passe en haut à droite pour ne pas masquer le nom */
.map-zone .player-dot { top: 8px; left: auto; right: 8px; transform: none; }
.player-dot::after {
  content: attr(data-count); position: absolute; top: -4px; right: 12px; font-family: var(--font-heading);
  font-size: 0.55rem; color: #44ff88; text-shadow: 0 0 4px rgba(0,0,0,0.9);
}
.op-more { color: var(--text-muted); font-size: 0.78rem; text-align: center; padding-top: 8px; font-style: italic; }

/* Légende */
.map-legend { display: flex; flex-direction: column; gap: 8px; font-size: 0.82rem; color: var(--text-light); }
.map-legend > div { display: flex; align-items: center; gap: 10px; }
.legend-swatch { width: 16px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-lava    { background: linear-gradient(135deg, #3a1000, #5a2000); border: 1px solid rgba(255,106,0,0.6); }
.legend-arcane  { background: linear-gradient(135deg, #1a0830, #2a1050); border: 1px solid rgba(155,45,202,0.6); }
.legend-crystal { background: linear-gradient(135deg, #001830, #002848); border: 1px solid rgba(51,170,255,0.6); }
.legend-boss    { background: transparent; border: 2px solid var(--lava-bright); box-shadow: 0 0 6px rgba(255,170,34,0.5); }
.legend-dot     { width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: #44ff88; box-shadow: 0 0 8px #44ff88; display: inline-block; }

/* Info-bulle de zone (générée par map.js) */
.map-tooltip {
  position: fixed; z-index: 2000; pointer-events: none; background: rgba(6,4,8,0.95); border: 1px solid var(--border-arcane);
  border-radius: 6px; padding: 8px 12px; font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.05em;
  color: var(--text-white); box-shadow: var(--glow-arcane); white-space: nowrap;
}

@media (max-width: 900px) {
  .map-area { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; grid-auto-rows: 80px; }
  .zone-span-3 { grid-column: span 2; }
}