/* World Map — page styles, moved verbatim from metal_world_map.html.
 * Shared styling (nav, badges, palette, focus) lives in hmt_theme.css. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: #0d0d0d;
      color: #e0e0e0;
      font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── HEADER ─────────────────────────────────────────────────── */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 20px;
      background: linear-gradient(180deg, #1a0000 0%, #0d0d0d 100%);
      border-bottom: 1px solid #3a0000;
      flex-shrink: 0;
      gap: 16px;
    }
    .header-text { text-align: center; flex: 1; }
    .header-text h1 {
      font-size: 1.4rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: #cc0000;
      text-shadow: 0 0 24px rgba(180,0,0,0.5);
    }
    .header-text p {
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      color: #999;
      margin-top: 2px;
      text-transform: uppercase;
    }

    /* ── CROSS-FILE NAV ──────────────────────────────────────────── */
    .hmt-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .hmt-nav-link {
      color: #aaa;
      text-decoration: none;
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 4px 9px;
      border: 1px solid #444;
      border-radius: 3px;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .hmt-nav-link:hover { color: #cc0000; border-color: #cc0000; }
    #hmt-hl-badge {
      font-size: 0.58rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 3px 8px;
      border-radius: 3px;
      border: 1px solid currentColor;
      cursor: pointer;
      opacity: 0.8;
      transition: opacity 0.2s;
      display: none;
    }
    #hmt-hl-badge:hover { opacity: 1; }

    /* ── MAP ────────────────────────────────────────────────────── */
    #map-container { flex: 1; position: relative; overflow: hidden; }
    #map { width: 100%; height: 100%; display: block; }
    .sphere    { fill: #07070f; }
    .graticule { fill: none; stroke: #141420; stroke-width: 0.4; }
    .land      { fill: #1a1a1a; stroke: #2a2a2a; stroke-width: 0.3; }
    .borders   { fill: none; stroke: #252525; stroke-width: 0.5; }

    /* ── HOTSPOTS ────────────────────────────────────────────────── */
    .hotspot { cursor: pointer; }

    @keyframes pulseRing {
      0%   { opacity: 0.35; transform: scale(1);   }
      50%  { opacity: 0.08; transform: scale(1.8); }
      100% { opacity: 0.35; transform: scale(1);   }
    }
    .pulse-ring {
      animation: pulseRing 2.4s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: center;
    }
    .hotspot-label {
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-anchor: middle;
      fill: #aaa;
      pointer-events: none;
    }

    /* ── CONTROLS ────────────────────────────────────────────────── */
    #controls {
      background: #0f0f0f;
      border-top: 1px solid #222;
      padding: 7px 16px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .ctrl-label {
      font-size: 0.57rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #aaa;
      white-space: nowrap;
      flex-shrink: 0;
    }
    #genre-filters { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
    .genre-btn {
      padding: 2px 8px;
      border-radius: 3px;
      border: 1px solid transparent;
      font-size: 0.57rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      cursor: pointer;
      transition: opacity 0.2s, filter 0.2s;
    }
    .genre-btn.off { opacity: 0.22; filter: grayscale(80%); }

    #legend {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-shrink: 0;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.57rem;
      color: #aaa;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    #era-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    #era-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 170px; height: 3px;
      background: #2a2a2a;
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    #era-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 13px; height: 13px;
      border-radius: 50%;
      background: #cc0000;
      cursor: pointer;
      box-shadow: 0 0 8px rgba(200,0,0,0.6);
    }
    #era-slider::-moz-range-thumb {
      width: 13px; height: 13px;
      border-radius: 50%;
      background: #cc0000;
      cursor: pointer;
      border: none;
    }
    #era-year {
      font-size: 0.82rem;
      font-weight: 700;
      color: #cc0000;
      min-width: 34px;
      text-align: center;
    }
    #era-toggle {
      padding: 2px 8px;
      background: transparent;
      border: 1px solid #555;
      color: #aaa;
      font-size: 0.57rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      cursor: pointer;
      border-radius: 3px;
      transition: border-color 0.2s, color 0.2s;
      white-space: nowrap;
    }
    #era-toggle.on { border-color: #cc0000; color: #cc0000; }

    /* ── TOOLTIP ─────────────────────────────────────────────────── */
    #tooltip {
      position: fixed;
      background: rgba(255,255,255,0.97);
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 7px 11px;
      pointer-events: none;
      z-index: 500;
      display: none;
      max-width: 210px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
      color: #222;
    }
    .tt-name  { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
    .tt-scene { font-size: 0.62rem; color: #555; margin-top: 2px; }
    .tt-era   { font-size: 0.57rem; color: #777; margin-top: 2px; }

    /* ── MODAL ───────────────────────────────────────────────────── */
    #modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.78);
      z-index: 600;
      display: none;
    }
    #modal {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border: 1px solid #8B0000;
      border-radius: 6px;
      padding: 24px 28px 26px;
      z-index: 601;
      display: none;
      width: min(500px, 90vw);
      max-height: 84vh;
      overflow-y: auto;
      box-shadow: 0 24px 70px rgba(0,0,0,0.4);
      color: #222;
    }
    #modal::-webkit-scrollbar { width: 4px; }
    #modal::-webkit-scrollbar-track { background: #f0f0f0; }
    #modal::-webkit-scrollbar-thumb { background: #bbb; border-radius: 2px; }
    #modal-close {
      position: absolute; top: 11px; right: 13px;
      background: none; border: none;
      color: #999; font-size: 1rem;
      cursor: pointer; line-height: 1; padding: 4px;
      transition: color 0.15s;
    }
    #modal-close:hover { color: #222; }

    .m-type  { font-size: 0.57rem; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 5px; }
    .m-title { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
    .m-scene { font-size: 0.7rem; color: #555; margin-bottom: 9px; }
    .m-era   { font-size: 0.58rem; color: #777; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 13px; }
    .m-desc  { font-size: 0.77rem; line-height: 1.65; color: #333; margin-bottom: 16px; }
    .m-bands-label {
      font-size: 0.57rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #777;
      margin-bottom: 8px;
    }
    .m-bands { display: flex; flex-wrap: wrap; gap: 5px; }

    /* Grouped bands (country hotspots) */
    .m-band-group { margin-bottom: 12px; }
    .m-band-group:last-child { margin-bottom: 0; }
    .m-band-group-label {
      font-size: 0.57rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 5px;
      opacity: 0.6;
    }
    .m-band-group-tags { display: flex; flex-wrap: wrap; gap: 5px; }

    .band-tag {
      padding: 3px 9px;
      border-radius: 3px;
      border: 1px solid;
      font-size: 0.67rem;
      font-weight: 600;
      letter-spacing: 0.03em;
    }

    /* Cross-file nav buttons in modal */
    .m-nav-btns {
      display: flex;
      gap: 8px;
      margin-top: 18px;
      padding-top: 15px;
      border-top: 1px solid #e0e0e0;
    }
    .m-nav-btn {
      padding: 5px 12px;
      background: transparent;
      border: 1px solid #ccc;
      color: #555;
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.2s;
      text-decoration: none;
      display: inline-block;
    }
    .m-nav-btn:hover { border-color: #cc0000; color: #cc0000; }

/* ══ HMT-ADDED  Focus mode banner ══════════════════════════════════════
   Shown when the map has been narrowed to one pin via ?focus=<slug>.
   Sits over the map rather than in #controls so it reads as a temporary
   state, and so it cannot push the map about when it appears. */
#focus-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 24px);
  padding: 8px 10px 8px 14px;
  background: #16161f;
  border: 1px solid #5e5e5e;
  border-radius: 4px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .55);
  font-size: 13px;
  color: #ccc;
}
#focus-bar[hidden] { display: none; }
#focus-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#focus-what { color: #e8e8e8; }
#focus-clear {
  flex: 0 0 auto;
  background: #101018;
  color: #ccc;
  border: 1px solid #5e5e5e;
  border-radius: 3px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#focus-clear:hover { color: #e8e8e8; border-color: #8a8a8a; }
#focus-clear:focus-visible { outline: 2px solid #f50000; outline-offset: 2px; }
/* ══ HMT-END ══ */