/* ── map.css — Leaflet map, rad rings, party dots, garrison markers, rad banner ── */

  /* ── MAP ── */
  #map {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  /* Desaturate only the tile layer — markers + SVG territory circles keep full color */
  #map .leaflet-tile-pane {
    filter: saturate(0.15) brightness(0.55) sepia(0.4);
  }

  /* ── Map recenter button ── */
  #map-recenter-btn {
    position: fixed;
    bottom: 72px;
    right: 14px;
    width: 44px;
    height: 44px;
    z-index: 150;
    background: rgba(8,8,6,0.72);
    border: 1.5px solid rgba(232,137,12,0.65);
    border-radius: 50%;
    color: var(--amber);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom 0.2s ease, opacity 0.15s, transform 0.1s, background 0.15s;
    opacity: 0.88;
    box-shadow: 0 2px 8px rgba(0,0,0,0.75);
  }
  #map-recenter-btn:hover  { opacity: 1; background: rgba(8,8,6,0.9); }
  #map-recenter-btn:active { transform: scale(0.9); }
  /* Nudge up when critical rad banner is visible */
  body:has(#rad-banner.visible) #map-recenter-btn { bottom: 116px; }

  /* ── Ruin marker (circular PNG + border ring) ── */
  .ruin-marker {
    width: 28px;
    height: 28px;
    background: rgba(8,8,6,0.88);
    border: 2px solid #4a5a3a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
  }

  /* ── Rad-level ring colours ── */
  .ruin-marker.rad-low  { border-color: #4a9a4a; box-shadow: 0 0 7px rgba(74,154,74,0.25); }
  .ruin-marker.rad-med  { border-color: #e8890c; box-shadow: 0 0 7px rgba(232,137,12,0.25); }
  .ruin-marker.rad-high { border-color: #e83232; box-shadow: 0 0 9px rgba(232,50,50,0.35);
                          animation: rad-high-pulse 1.6s ease-in-out infinite; }

  /* ── In-range brightens the glow, keeps the rad colour ── */
  .ruin-marker.in-range.rad-low  { border-color: #5ec45e; box-shadow: 0 0 16px rgba(74,154,74,0.7); }
  .ruin-marker.in-range.rad-med  { border-color: #e8890c; box-shadow: 0 0 16px rgba(232,137,12,0.7); }
  .ruin-marker.in-range.rad-high { border-color: #e83232; box-shadow: 0 0 20px rgba(232,50,50,0.85);
                                    animation: rad-high-pulse 0.9s ease-in-out infinite; }
  /* Cooldown: marker stays on map but fades to 25% and loses glow */
  .ruin-marker.on-cooldown { opacity: 0.25; filter: grayscale(0.7); box-shadow: none !important; cursor: default; }

  /* ── Claimed ruin: garrison fort marker ── */
  /* Border color and box-shadow are set inline per faction color.           */
  /* Out-of-range: 65% opacity so it's distinct from active markers.        */
  /* In-range: full opacity + brighter inline glow (amplified via filter).  */
  .claimed-ruin-marker {
    width: 28px;
    height: 28px;
    background: rgba(8,8,6,0.92);
    border: 2px solid;          /* color set inline */
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s ease, filter 0.15s ease;
  }
  .claimed-ruin-marker.in-range {
    opacity: 1;
    filter: brightness(1.25);
  }
  .claimed-ruin-marker.on-cooldown {
    opacity: 0.25;
    filter: grayscale(0.7);
    box-shadow: none !important;
    cursor: default;
  }

  @keyframes rad-high-pulse {
    0%, 100% { opacity: 1;    box-shadow: 0 0 9px  rgba(232,50,50,0.35); }
    50%       { opacity: 0.65; box-shadow: 0 0 18px rgba(232,50,50,0.75); }
  }

  .player-marker {
    width: 16px;
    height: 16px;
    background: var(--amber);
    border-radius: 50%;
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 3px rgba(232,137,12,0.3), 0 0 20px rgba(232,137,12,0.4);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(232,137,12,0.3), 0 0 20px rgba(232,137,12,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(232,137,12,0.1), 0 0 30px rgba(232,137,12,0.5); }
  }

  /* ── Party movement dots ─────────────────────────────────────────────────── */
  /* One dot per active mission.  Color is injected as an inline style from JS  */
  /* so faction-specific hues survive without coupling CSS to faction names.    */
  .party-marker {
    width:         12px;
    height:        12px;
    border-radius: 50%;
    border:        2px solid rgba(255,255,255,0.25);
    box-sizing:    border-box;
  }

  /* Normal travel — gentle scale pulse to show the dot is moving */
  .party-marker--moving {
    animation: party-dot-pulse 2s ease-in-out infinite;
  }

  /* Popup shown on click of a party marker dot */
  .leaflet-popup-content-wrapper.party-marker-popup,
  .party-marker-popup .leaflet-popup-content-wrapper,
  .party-marker-popup .leaflet-popup-tip {
    background: transparent;
    border:     none;
    box-shadow: none;
    padding:    0;
  }
  .party-marker-popup .leaflet-popup-content {
    margin: 0;
  }

  /* All party members at hp = 0 — grey body, red danger glow */
  .party-marker--incapacitated {
    background:   #444444 !important;
    border-color: #e83232;
    box-shadow:   0 0 6px rgba(232,50,50,0.45) !important;
    animation:    party-dot-incap 1.6s ease-in-out infinite;
  }

  @keyframes party-dot-pulse {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%       { opacity: 0.6; transform: scale(1.25); }
  }

  @keyframes party-dot-incap {
    0%, 100% { box-shadow: 0 0  4px rgba(232,50,50,0.35); }
    50%       { box-shadow: 0 0 10px rgba(232,50,50,0.75); }
  }

  /* Raid travel — fast red glow pulse (2× per second) */
  .party-marker--raid {
    animation: party-dot-raid 0.25s ease-in-out infinite alternate;
  }

  @keyframes party-dot-raid {
    from { box-shadow: 0 0  4px rgba(232,50,50,0.4);  opacity: 0.75; }
    to   { box-shadow: 0 0 14px rgba(232,50,50,0.95), 0 0 28px rgba(232,50,50,0.35); opacity: 1; }
  }

  /* ── Critical RAD banner ─────────────────────────────────────────────────── */
  /* State-driven: updateHUD() adds/removes .visible based on player RAD >= 900. */
  #rad-banner {
    display: none;
    position: fixed;
    bottom: 60px; left: 0; right: 0;
    background: rgba(232,50,50,0.82);
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    color: #000;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-align: center;
    /* top padding clears the ::before hazard-stripe band (10px) + 4px breathing room */
    padding: 14px 12px 7px;
    z-index: 110;
    pointer-events: none;
    overflow: hidden;
  }
  /* Hazard-stripe band across the top ~25% of the banner.                        */
  /* Black diagonals over the red background via repeating-linear-gradient;        */
  /* transparent gaps let the red show through to form the classic hazard pattern. */
  #rad-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
    background: repeating-linear-gradient(
      -45deg,
      #000 0px,        #000 6px,
      transparent 6px, transparent 12px
    );
    opacity: 0.65;
  }
  #rad-banner.visible {
    display: block;
    animation: radPulse 2.5s ease-in-out infinite;
  }
  @keyframes radPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.88; }
  }