/* ==========================================================================
   Map Visualization Styles
   Radar minimap + full-screen map overlay
   ========================================================================== */

/* --------------------------------------------------------------------------
   Radar minimap (shown in single-company view)
   -------------------------------------------------------------------------- */

.map-radar {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  width: 180px;
  height: 162px;
  border-radius: 6px;
  background: rgba(10, 12, 20, 0.85);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-radar:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

/* Map background fills the radar container */
.map-radar .map-bg {
  position: absolute;
  inset: 0;
  background-image: url('/images/map-middle-earth.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}

/* Dot container — sits on top of the map background */
.map-radar .map-dots {
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   Shared dot styles (radar + full map)
   -------------------------------------------------------------------------- */

.map-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: none;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Currently viewed own company — green dot, gold pulse */
.map-dot--active {
  background: #3a9c3a;
  width: 8px;
  height: 8px;
  animation: map-pulse-gold 1.8s ease-in-out infinite;
  z-index: 2;
}

/* Other own companies — green */
.map-dot--own {
  background: #3a9c3a;
  z-index: 1;
}

/* Opponent companies — red */
.map-dot--opponent {
  background: #c04040;
  z-index: 1;
}

/* Currently viewed opponent company — red dot, gold pulse */
.map-dot--opponent-active {
  background: #c04040;
  width: 8px;
  height: 8px;
  animation: map-pulse-gold 1.8s ease-in-out infinite;
  z-index: 2;
}

/* Own destination site — light green */
.map-dot--destination {
  background: #8de08d;
  z-index: 1;
}

/* Opponent destination site — light red */
.map-dot--opponent-destination {
  background: #e08080;
  z-index: 1;
}

@keyframes map-pulse-gold {
  0%   { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, 0.7), 0 0 0 2.5px rgba(212, 168, 32, 0.7); }
  50%  { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, 0.7), 0 0 0 9.5px rgba(212, 168, 32, 0); }
  100% { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, 0.7), 0 0 0 2.5px rgba(212, 168, 32, 0); }
}

/* --------------------------------------------------------------------------
   Full-screen map overlay
   -------------------------------------------------------------------------- */

.map-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-fullscreen-inner {
  position: relative;
  width: min(98vw, calc(94vh * 1241 / 1114));
  height: min(94vh, calc(98vw * 1114 / 1241));
  border-radius: 8px;
  overflow: hidden;
  background: #0b0d12;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Close button (×) — top-right corner */
.map-fullscreen-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-fullscreen-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Map image container — fills the inner container, top padding reserves space for controls */
.map-fullscreen-map {
  position: absolute;
  inset: 0;
  padding-top: 44px;
}

/* The actual map image */
.map-fullscreen-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Dots layer inside the full map — covers the map exactly */
.map-fullscreen-dots {
  position: absolute;
  inset: 0;
}

/* Larger dots for the full map view */
.map-dot--full {
  width: 12px;
  height: 12px;
  pointer-events: auto;
  cursor: default;
}

/* Own company full-map dots are clickable */
.map-dot--full.map-dot--own,
.map-dot--full.map-dot--active {
  cursor: pointer;
}

.map-dot--full.map-dot--active {
  width: 14px;
  height: 14px;
}

/* Tooltip that appears on hover inside the full map */
.map-dot-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.85);
  color: #e0d8c8;
  font-size: 11px;
  white-space: nowrap;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 5;
}

.map-dot:hover .map-dot-tooltip {
  display: block;
}

/* --------------------------------------------------------------------------
   Layer button bar (top-left of full-screen overlay)
   -------------------------------------------------------------------------- */

.map-layer-bar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.map-layer-btn {
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #ccc;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.map-layer-btn:last-child {
  border-right: none;
}

.map-layer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.map-layer-btn--active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Under-deeps map mode — same surface map image, darkened and desaturated
   -------------------------------------------------------------------------- */

/* Grayscale + sepia tint on the map image in Under-deeps mode */
.map-fullscreen-img--under-deeps {
  filter: grayscale(1) sepia(0.35) brightness(0.5);
}

/* Brownish semi-transparent overlay rendered above the image */
.map-underdeeps-color-overlay {
  position: absolute;
  inset: 0;
  background: rgba(60, 30, 10, 0.35);
  pointer-events: none;
  z-index: 1;
}

/* Dots layer sits above the colour overlay */
.map-fullscreen-dots {
  z-index: 2;
}

/* Dots and agents on the other level are nearly invisible.
   On hover the full dot + tooltip become visible so the player can still read them. */
.map-dot--other-level,
.map-agent--other-level {
  opacity: 0.5;
}

.map-dot--other-level:hover,
.map-agent--other-level:hover {
  opacity: 1;
}

/* Radar: darken the map background in Under-deeps mode */
.map-radar--under-deeps-mode .map-bg {
  filter: grayscale(1) sepia(0.3) brightness(0.45);
}

/* --------------------------------------------------------------------------
   Movement overlay — dashed SVG line layer
   -------------------------------------------------------------------------- */

/* SVG layer stretched over the full map container to draw movement lines */
.map-destination-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Under-deeps schematic
   -------------------------------------------------------------------------- */

/* Container div that holds the Under-deeps SVG */
.map-underdeeps {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* The SVG element itself fills its container */
.map-underdeeps-svg {
  width: 100%;
  height: 100%;
}

/* Message shown when Under-deeps coords are not yet loaded */
.map-underdeeps-unavailable {
  color: #667;
  font-size: 13px;
  padding: 16px;
  margin: 0;
  text-align: center;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Agent diamond markers (Phase 5)
   -------------------------------------------------------------------------- */

/* Agent marker — square positioned like company dots */
.map-agent {
  position: absolute;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border: none;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 1;
}

/* Own agent, face-up — green */
.map-agent--own-revealed {
  background: #3a9c3a;
}

/* Own agent, face-down — dark green, semi-transparent */
.map-agent--own-hidden {
  background: #1a5a1a;
  opacity: 0.7;
}

/* Opponent face-up agent — red */
.map-agent--opponent-revealed {
  background: #c04040;
}

/* Larger diamond for the full-map overlay; enables pointer events for tooltip hover */
.map-agent--full {
  width: 10px;
  height: 10px;
  pointer-events: auto;
  cursor: default;
}

/* Show tooltip on hover for full-map agent diamonds */
.map-agent--full:hover .map-dot-tooltip {
  display: block;
}

/* --------------------------------------------------------------------------
   Hidden-agents badge (Phase 5)
   Shows a count of opponent face-down agents whose positions are not revealed.
   -------------------------------------------------------------------------- */

.map-hidden-agents-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 10;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #c07830;
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid rgba(192, 120, 48, 0.4);
  pointer-events: none;
}