/* 
  Non-Human Signals // Web Mapper GPT Suite
  Interface notes:
  - The map is intentionally sparse: glowing countries, graticules, and small point symbols.
  - UI panels are stronger in the visual hierarchy than the base map, echoing a sci-fi "loadout" console.
  - z-index values keep map SVG below all DOM controls, popups below modals, and modals above everything.
*/

:root{
  --bg:#001218;
  --void:#00080b;
  --cyan:#12b9d6;
  --cyan-bright:#1ce9ff;
  --cyan-soft:#98ecff;
  --yellow:#ffd51d;
  --blue:#53dfff;
  --magenta:#f45dff;
  --green:#00f0b7;
  --orange:#ff9f1c;
  --panel:#061d28ee;
  --panel-deep:#021018f2;
  --panel-border:#0bb9d6;
  --text:#def7ff;
  --muted:#8ccddd;
  --danger:#ff4a7a;
  --glass:rgba(0, 20, 28, .72);
  --shadow:0 0 24px rgba(0, 210, 255, .32), inset 0 0 22px rgba(10, 190, 220, .12);
}

*{box-sizing:border-box}
html,body,#app-shell{
  height:100%;
  margin:0;
  overflow:hidden;
  background:radial-gradient(circle at 55% 45%, #062839 0%, #01141a 45%, #000508 100%);
  color:var(--text);
  font-family:"Rajdhani",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{color:var(--cyan-bright); text-decoration:none}
a:hover{text-decoration:underline}

#app-shell{position:relative; isolation:isolate;}

#map-wrap{
  position:absolute;
  inset:0;
  z-index:1;
}

#map-svg{
  display:block;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 50% 52%, rgba(7, 115, 145, .22), transparent 47%),
    linear-gradient(180deg, #00131a, #00080d);
  cursor:grab;
  touch-action:none;
}
#map-svg:active{cursor:grabbing}

.map-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 58%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 20%, transparent 78%, rgba(0,0,0,.42));
  mix-blend-mode:multiply;
  z-index:2;
}

.sphere{
  fill:#000f17;
  stroke:#075869;
  stroke-width:1.4px;
}
.graticule{
  fill:none;
  stroke:#0d9bb9;
  stroke-opacity:.22;
  stroke-width:.6px;
  vector-effect:non-scaling-stroke;
}
.country{
  fill:#0a2730;
  stroke:#0a7b8e;
  stroke-width:.65px;
  stroke-opacity:.52;
  vector-effect:non-scaling-stroke;
  transition:fill .2s ease, stroke-opacity .2s ease;
}
.country:hover{
  fill:#0d3540;
  stroke-opacity:.82;
}

.event-node{
  pointer-events:all;
}
.event-hit{
  fill:transparent;
  stroke:transparent;
  cursor:pointer;
}
.event-dot{
  stroke:#def7ff;
  stroke-opacity:.78;
  stroke-width:.9px;
  paint-order:stroke fill;
  cursor:pointer;
  filter:drop-shadow(0 0 6px rgba(255, 213, 29, .38));
  transition:fill-opacity .14s ease, stroke-width .14s ease;
  vector-effect:non-scaling-stroke;
}
.event-node.iconic_world .event-dot{fill-opacity:.92}
.event-node.war_gov_ufo .event-dot{
  stroke:#fff;
  stroke-width:1px;
  stroke-opacity:1;
  animation:war-outline-breathe 5s ease-in-out infinite;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.2));
}
.event-ring{
  fill:none;
  stroke:#fff;
  stroke-width:2px;
  opacity:0;
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}
.event-node:hover .event-dot,
.event-node.is-active .event-dot{
  stroke-width:1.8px;
}
.event-node.war_gov_ufo:hover .event-dot,
.event-node.war_gov_ufo.is-active .event-dot{
  fill-opacity:.2;
  stroke:#fff;
}
.event-node.war_gov_ufo:hover .event-ring,
.event-node.war_gov_ufo.is-active .event-ring{
  opacity:1;
  animation:pulse-ring 1.1s infinite ease-out;
}
.event-node.dimmed{
  opacity:.08;
  pointer-events:none;
}
.event-node.filtered{
  display:none;
}

@keyframes pulse-ring{
  from{stroke-opacity:.95; transform:scale(.88)}
  to{stroke-opacity:0; transform:scale(2.15)}
}

@keyframes war-outline-breathe{
  0%,100%{stroke-opacity:1}
  50%{stroke-opacity:.55}
}

.map-title{
  position:absolute;
  top:24px;
  left:28px;
  z-index:20;
  display:flex;
  gap:14px;
  align-items:flex-start;
  max-width:min(760px, calc(100vw - 420px));
  pointer-events:none;
  text-shadow:0 0 12px rgba(0, 240, 255, .42);
}
.sigil{
  width:38px;
  height:38px;
  border:1px solid var(--cyan);
  display:grid;
  place-items:center;
  color:var(--yellow);
  background:rgba(0,12,18,.72);
  box-shadow:var(--shadow);
  font-family:"Share Tech Mono",monospace;
  appearance:none;
  cursor:pointer;
  pointer-events:auto;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.sigil:hover{
  background:rgba(28,233,255,.16);
  transform:translateY(-1px);
}
.sigil[aria-pressed="false"]{
  color:rgba(222,247,255,.58);
  border-color:rgba(140,205,221,.45);
  box-shadow:inset 0 0 12px rgba(255,255,255,.04);
}
.eyebrow{
  margin:0 0 2px;
  color:var(--yellow);
  letter-spacing:.22em;
  font-family:"Share Tech Mono",monospace;
  font-size:12px;
  text-transform:uppercase;
}
h1{
  margin:0;
  line-height:.92;
  letter-spacing:.04em;
  font-family:"Teko",Impact,sans-serif;
  font-size:clamp(44px, 7.2vw, 110px);
  color:#f4fbff;
  text-transform:uppercase;
}
.subtitle{
  max-width:660px;
  margin:6px 0 0;
  color:#a8e7f5;
  font-family:"Share Tech Mono",monospace;
  font-size:clamp(11px, 1.45vw, 15px);
}
.subtitle.is-erased-by-signal{
  display:none;
}
.glitch{
  position:relative;
  animation:title-flicker 13s infinite steps(1,end);
}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:.34;
  pointer-events:none;
}
.glitch::before{
  color:var(--cyan-bright);
  transform:translate(2px,-1px);
  clip-path:inset(0 0 54% 0);
}
.glitch::after{
  color:var(--yellow);
  transform:translate(-2px,1px);
  clip-path:inset(48% 0 0 0);
}
@keyframes title-flicker{
  0%, 96%, 100%{filter:none}
  97%{filter:brightness(1.45) blur(.25px)}
  98%{filter:none}
  99%{filter:drop-shadow(0 0 10px rgba(255,213,29,.55))}
}
.glitch.alien-shift{
  animation:alien-signal-chop .18s infinite steps(2,end);
  font-size:.78em;
  letter-spacing:.025em;
  white-space:nowrap;
}
@keyframes alien-signal-chop{
  0%{filter:brightness(1.1) contrast(1.15) blur(0); transform:translate(0,0) skewX(0deg)}
  24%{filter:brightness(2.1) contrast(1.5) drop-shadow(0 0 12px var(--cyan-bright)); transform:translate(2px,-1px) skewX(-2deg)}
  52%{filter:brightness(.72) contrast(1.75); transform:translate(-3px,1px) skewX(3deg)}
  76%{filter:brightness(1.8) drop-shadow(0 0 14px var(--yellow)); transform:translate(1px,0) skewX(-1deg)}
  100%{filter:brightness(1.05); transform:translate(0,0)}
}

.panel{
  background:linear-gradient(180deg, rgba(8,36,48,.96), rgba(1,16,24,.96));
  border:2px solid var(--panel-border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.loadout{
  position:absolute;
  right:28px;
  bottom:58px;
  width:378px;
  max-width:calc(100vw - 56px);
  max-height:calc(100vh - 118px);
  z-index:30;
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 28px, 100% 100%, 0 100%);
  display:flex;
  flex-direction:column;
}
.panel-cap{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#13aeca;
  padding:16px 20px 10px 26px;
}
.panel-cap h2{
  margin:0;
  color:white;
  font-family:"Teko",Impact,sans-serif;
  font-size:39px;
  letter-spacing:.13em;
}
.panel-toggle{
  appearance:none;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(0,0,0,.2);
  color:#fff;
  width:28px;
  height:28px;
  cursor:pointer;
  font-family:"Share Tech Mono",monospace;
  font-size:19px;
}
.panel-toggle:hover{background:rgba(255,255,255,.12)}

.panel-body{
  padding:20px 24px 22px;
  min-height:0;
  overflow:auto;
  scrollbar-color:var(--cyan) rgba(255,255,255,.1);
}
.panel-body label,.year-row label{
  display:block;
  margin:0 0 8px;
  color:var(--yellow);
  font-family:"Share Tech Mono",monospace;
  letter-spacing:.14em;
  font-size:16px;
  text-transform:uppercase;
}
.panel-body select{
  width:100%;
  margin:0 0 18px;
  appearance:none;
  border:1px solid #0ab8d6;
  border-radius:4px;
  color:var(--text);
  background:
    linear-gradient(45deg, transparent 50%, var(--text) 50%) calc(100% - 18px) calc(50% - 3px)/7px 7px no-repeat,
    linear-gradient(135deg, var(--text) 50%, transparent 50%) calc(100% - 13px) calc(50% - 3px)/7px 7px no-repeat,
    #020b10;
  padding:12px 42px 12px 14px;
  font-family:"Rajdhani",sans-serif;
  font-size:18px;
  font-weight:700;
  outline:none;
}
.panel-body select:focus{
  border-color:#fff;
  box-shadow:0 0 0 2px #0a7cff, 0 0 20px rgba(0, 180, 255, .55);
}
.year-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
#year-output{
  font-family:"Share Tech Mono",monospace;
  color:#bef7ff;
  font-size:12px;
  padding-bottom:8px;
}
.range-stack{
  position:relative;
  height:30px;
}
.range-stack input[type="range"]{
  position:absolute;
  inset:0;
  width:100%;
  margin:0;
  pointer-events:none;
  appearance:none;
  background:transparent;
}
.range-stack input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  border-radius:10px;
  background:#3a3a3a;
  border:1px solid #737373;
}
.range-stack input[type="range"]::-moz-range-track{
  height:8px;
  border-radius:10px;
  background:#3a3a3a;
  border:1px solid #737373;
}
.range-stack input[type="range"]::-webkit-slider-thumb{
  pointer-events:all;
  appearance:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--yellow);
  border:0;
  margin-top:-8px;
  box-shadow:0 0 10px rgba(255,213,29,.75);
  cursor:pointer;
}
.range-stack input[type="range"]::-moz-range-thumb{
  pointer-events:all;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--yellow);
  border:0;
  box-shadow:0 0 10px rgba(255,213,29,.75);
  cursor:pointer;
}
#year-min::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--yellow), var(--yellow))}
.ticks{
  display:flex;
  justify-content:space-between;
  font-family:"Share Tech Mono",monospace;
  color:var(--muted);
  font-size:12px;
  margin-bottom:18px;
}
.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}
.chip-btn,.hud-button{
  appearance:none;
  border:1px solid var(--cyan);
  background:rgba(1,12,18,.86);
  color:var(--text);
  font-family:"Share Tech Mono",monospace;
  letter-spacing:.08em;
  padding:9px 12px;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:inset 0 0 12px rgba(0,220,255,.08);
}
.chip-btn:hover,.hud-button:hover{
  color:#001017;
  background:var(--cyan-bright);
  box-shadow:0 0 18px rgba(0,220,255,.6);
}
.readout{
  margin-top:18px;
  font-family:"Teko",sans-serif;
  font-size:31px;
  color:#fff;
}
.readout small{
  font-family:"Share Tech Mono",monospace;
  color:var(--muted);
  font-size:12px;
}
.symbol-filter{
  margin-top:12px;
  border-top:1px solid rgba(18,185,214,.42);
  padding-top:12px;
}
.symbol-filter-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
  color:var(--yellow);
  font-family:"Share Tech Mono",monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.symbol-filter-head small{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
}
.symbol-toggles{
  display:grid;
  gap:6px;
}
.symbol-toggle{
  appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(18,185,214,.34);
  background:rgba(0,8,12,.62);
  color:#dff8ff;
  cursor:pointer;
  padding:6px 8px;
  font-family:"Share Tech Mono",monospace;
  font-size:11px;
  text-align:left;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.symbol-toggle::before{
  content:"";
  flex:0 0 18px;
  width:18px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.52);
  background:var(--swatch);
  box-shadow:0 0 8px color-mix(in srgb, var(--swatch), transparent 45%);
}
.symbol-toggle:hover,
.symbol-toggle.is-selected{
  border-color:var(--swatch);
  background:color-mix(in srgb, var(--swatch), transparent 88%);
  box-shadow:0 0 14px color-mix(in srgb, var(--swatch), transparent 70%);
}
.symbol-toggle:not(.is-selected).has-selection{
  opacity:.42;
}
.symbol-toggle[data-symbol="war.gov release"]{
  order:-10;
}
.symbol-toggle[data-symbol="war.gov release"]::before{
  border-color:#fff;
  animation:war-outline-breathe 5s ease-in-out infinite;
}

.loadout.collapsed{
  width:218px;
}
.loadout.collapsed .panel-body{display:none}
.loadout.collapsed .panel-cap{clip-path:none}
.loadout.collapsed .panel-cap h2{font-size:32px}

.legend{
  position:absolute;
  right:28px;
  bottom:58px;
  z-index:30;
  width:260px;
  max-width:calc(100vw - 56px);
  padding:0;
}
.legend-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px 8px 14px;
  background:#072534;
  border-bottom:1px solid rgba(22,185,214,.65);
}
.legend h3{
  margin:0;
  font-family:"Share Tech Mono",monospace;
  letter-spacing:.13em;
  color:var(--yellow);
}
.legend-body{
  padding:12px 14px 14px;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:24px;
  color:#dff8ff;
  font-family:"Share Tech Mono",monospace;
  font-size:12px;
}
.legend-item span{
  width:22px;
  height:14px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.5);
  background:var(--swatch);
  box-shadow:0 0 8px color-mix(in srgb, var(--swatch), transparent 45%);
}
.legend-item.war span{border-color:#fff}
.legend.collapsed .legend-body{display:none}

.top-actions{
  position:absolute;
  top:26px;
  right:28px;
  display:flex;
  gap:10px;
  z-index:40;
}

.attribution{
  position:absolute;
  left:28px;
  bottom:22px;
  z-index:25;
  font-family:"Share Tech Mono",monospace;
  font-size:11px;
  color:rgba(190,245,255,.68);
  background:rgba(0,8,12,.52);
  border:1px solid rgba(18,185,214,.28);
  padding:7px 9px;
}

.hover-card{
  position:absolute;
  z-index:45;
  max-width:260px;
  pointer-events:none;
  background:rgba(0, 8, 12, .92);
  border:1px solid var(--cyan);
  color:var(--text);
  padding:9px 11px;
  font-family:"Share Tech Mono",monospace;
  font-size:12px;
  line-height:1.35;
  box-shadow:0 0 16px rgba(0, 220, 255, .28);
  transform:translate(12px,12px);
  display:none;
}
.hover-card strong{
  display:block;
  color:#fff;
  font-family:"Rajdhani",sans-serif;
  font-size:15px;
}

.popup{
  position:absolute;
  z-index:60;
  width:min(420px, calc(100vw - 30px));
  max-height:min(78vh, 720px);
  overflow:auto;
  display:none;
  background:linear-gradient(180deg, #061821fa, #02090ef8);
  border:2px solid var(--popup-color, var(--yellow));
  box-shadow:0 0 28px color-mix(in srgb, var(--popup-color, #ffffff 15%), transparent 56%);
  color:var(--text);
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.popup-inner{padding:16px 16px 18px}
.popup-close{
  position:absolute;
  right:9px;
  top:7px;
  width:26px;
  height:26px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  z-index:2;
}
.popup h3{
  margin:0 32px 10px 0;
  color:#fff;
  font-family:"Teko",sans-serif;
  font-size:30px;
  line-height:.98;
  letter-spacing:.04em;
}
.popup .meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0 12px;
}
.meta{
  border:1px solid color-mix(in srgb, var(--popup-color), transparent 45%);
  padding:7px 8px;
  background:rgba(255,255,255,.04);
  min-width:0;
}
.meta b{
  display:block;
  color:var(--popup-color);
  font-family:"Share Tech Mono",monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.meta span{
  font-size:14px;
  line-height:1.25;
}
.popup p{
  font-family:"Rajdhani",sans-serif;
  font-size:16px;
  line-height:1.35;
  margin:8px 0;
}
.popup details{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:12px;
  padding-top:10px;
}
.popup summary{
  cursor:pointer;
  color:var(--yellow);
  font-family:"Share Tech Mono",monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.description-details[open]{
  border-color:color-mix(in srgb, var(--popup-color), transparent 55%);
}
.description-body{
  max-height:160px;
  overflow:auto;
  padding-right:8px;
  scrollbar-color:var(--popup-color) rgba(255,255,255,.1);
}
.description-body p{
  margin-top:8px;
}
.media-frame{
  margin:12px 0;
  border:1px solid color-mix(in srgb, var(--popup-color), transparent 45%);
  background:#000;
  position:relative;
}
.media-frame img{
  width:100%;
  max-height:260px;
  display:block;
  object-fit:cover;
  cursor:pointer;
}
.media-caption{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 9px;
  color:#b9ecf5;
  font-family:"Share Tech Mono",monospace;
  font-size:11px;
}
.carousel-controls{
  position:absolute;
  inset:auto 8px 38px auto;
  display:flex;
  gap:6px;
}
.carousel-controls button{
  border:1px solid rgba(255,255,255,.8);
  background:rgba(0,0,0,.72);
  color:white;
  cursor:pointer;
  font-family:"Share Tech Mono",monospace;
  padding:4px 7px;
}
.link-button{
  display:inline-block;
  margin-top:8px;
  border:1px solid var(--popup-color);
  padding:8px 10px;
  color:#fff;
  background:color-mix(in srgb, var(--popup-color), transparent 75%);
  font-family:"Share Tech Mono",monospace;
  font-size:12px;
  text-transform:uppercase;
}
.video-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:12px 0 8px;
  padding:12px 13px;
  color:var(--yellow);
  border-color:var(--orange);
  background:
    linear-gradient(90deg, rgba(255, 213, 29, .18), rgba(255, 159, 28, .09));
  box-shadow:0 0 18px rgba(255, 213, 29, .18), inset 0 0 18px rgba(255, 159, 28, .12);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  font-weight:700;
}
.video-cta span{
  color:var(--orange);
  text-decoration:none;
}
.video-cta:hover{
  color:#001017;
  text-decoration:underline;
  background:linear-gradient(90deg, var(--yellow), var(--orange));
  box-shadow:0 0 24px rgba(255, 213, 29, .46);
}
.gov-report-link{
  color:var(--yellow);
  border-bottom:2px solid var(--orange);
  background:linear-gradient(90deg, rgba(255,213,29,.14), rgba(255,159,28,.08));
  padding:1px 4px;
  font-family:"Share Tech Mono",monospace;
  font-weight:700;
  text-transform:uppercase;
}
.gov-report-link:hover{
  color:var(--orange);
}

.modal-backdrop{
  position:absolute;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(5px);
  display:none;
  place-items:center;
  padding:24px;
  pointer-events:none;
}
.modal-backdrop.is-open{
  display:grid;
  pointer-events:auto;
}
.modal-backdrop[hidden],
.modal[hidden]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.modal{
  position:relative;
  width:min(900px, 94vw);
  max-height:88vh;
  background:linear-gradient(180deg, rgba(6, 33, 45, .98), rgba(0, 10, 16, .98));
  border:2px solid var(--cyan);
  box-shadow:0 0 36px rgba(0,220,255,.35), inset 0 0 28px rgba(0,220,255,.12);
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  padding:24px 24px 20px;
}
.modal h2{
  margin:0 0 12px;
  color:#fff;
  font-family:"Teko",sans-serif;
  font-size:48px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.modal h3{
  color:var(--yellow);
  font-family:"Share Tech Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:22px 0 6px;
}
.modal p,.modal li{
  font-size:17px;
  line-height:1.45;
}
.modal-scroll{
  max-height:calc(88vh - 120px);
  overflow:auto;
  padding-right:12px;
  scrollbar-color:var(--cyan) rgba(255,255,255,.1);
}
.modal-close{
  position:absolute;
  right:12px;
  top:10px;
  width:32px;
  height:32px;
  color:#fff;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(0,0,0,.35);
  cursor:pointer;
  z-index:2;
  font-size:22px;
}

.share-modal{
  width:min(430px, 92vw);
  max-height:min(440px, 86vh);
  padding:22px 22px 24px;
}
.share-modal h2{
  margin-bottom:4px;
  font-size:42px;
}
.share-copy{
  margin:0 0 14px;
  color:var(--muted);
  font-family:"Share Tech Mono",monospace;
  font-size:13px;
}
.share-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0 16px;
}
.share-option{
  display:grid;
  place-items:center;
  min-height:44px;
  border:1px solid var(--cyan);
  background:rgba(1,12,18,.86);
  color:#fff;
  font-family:"Share Tech Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 0 12px rgba(0,220,255,.08);
}
.share-option:hover{
  color:#001017;
  background:linear-gradient(90deg, var(--yellow), var(--orange));
  border-color:var(--yellow);
  box-shadow:0 0 22px rgba(255,213,29,.42);
  text-decoration:none;
}
.share-direct{
  display:block;
  color:var(--cyan-soft);
  font-family:"Share Tech Mono",monospace;
  font-size:11px;
  overflow-wrap:anywhere;
}

.download-buttons{
  position:absolute;
  top:12px;
  right:54px;
  display:flex;
  gap:6px;
}
.download-buttons a{
  border:1px solid var(--yellow);
  color:var(--yellow);
  background:rgba(0,0,0,.25);
  padding:5px 8px;
  font-family:"Share Tech Mono",monospace;
  font-size:12px;
}
.prose h1,.prose h2{
  font-size:34px;
  line-height:1.05;
  letter-spacing:.03em;
  color:#fff;
}
.prose h2{font-size:28px; color:var(--yellow)}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{padding-left:22px}

.loading{
  position:absolute;
  inset:0;
  z-index:2000;
  display:grid;
  place-items:center;
  align-content:center;
  gap:14px;
  background:#00080c;
  color:#dffaff;
  transition:opacity .35s ease, visibility .35s ease;
}
.loading.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loading p{
  margin:0;
  font-family:"Teko",sans-serif;
  letter-spacing:.14em;
  font-size:40px;
}
.loading span{
  color:var(--muted);
  font-family:"Share Tech Mono",monospace;
}
.scanner{
  width:84px;
  height:84px;
  border:2px solid var(--cyan);
  border-top-color:var(--yellow);
  border-radius:50%;
  animation:spin 1s linear infinite;
  box-shadow:0 0 25px rgba(0,220,255,.4);
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:900px){
  .map-title{
    top:18px;
    left:16px;
    max-width:calc(100vw - 32px);
  }
  .subtitle{display:none}
  .loadout{
    right:14px;
    left:auto;
    top:auto;
    bottom:84px;
    width:min(378px, calc(100vw - 28px));
    max-height:calc(100vh - 122px);
  }
  .panel-body{padding:16px}
  .legend{
    right:14px;
    bottom:14px;
    width:230px;
  }
  .attribution{
    display:none;
  }
  .top-actions{
    top:16px;
    right:14px;
    flex-direction:column;
  }
}
@media (max-width:560px){
  .map-title .sigil{display:none}
  .eyebrow{font-size:10px}
  h1{font-size:48px}
  .loadout{bottom:74px}
  .legend{display:none}
  .popup{left:15px !important; top:90px !important}
}


/* Final production mobile refinements */
.orientation-hint{
  display:none;
  position:fixed;
  inset:0;
  z-index:2500;
  place-items:center;
  padding:24px;
  background:rgba(0,8,12,.88);
  backdrop-filter:blur(8px);
  text-align:center;
}
.orientation-card{
  max-width:330px;
  border:2px solid var(--cyan);
  background:linear-gradient(180deg, rgba(8,36,48,.98), rgba(1,16,24,.98));
  box-shadow:var(--shadow);
  padding:22px 20px;
  clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.orientation-card strong{
  display:block;
  color:var(--yellow);
  font-family:"Teko",Impact,sans-serif;
  font-size:36px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.orientation-card span{
  display:block;
  color:#dff8ff;
  font-family:"Share Tech Mono",monospace;
  font-size:13px;
  line-height:1.4;
}

@media (max-width:900px) and (orientation:portrait){
  .orientation-hint{display:grid;}
}

@media (max-width:900px){
  .map-title{
    top:10px;
    left:12px;
    right:112px;
    max-width:none;
    gap:0;
    align-items:center;
  }
  .map-title .eyebrow,
  .map-title .subtitle{
    display:none;
  }
  .map-title h1{
    white-space:nowrap;
    font-size:clamp(23px, 7.2vw, 38px);
    line-height:.9;
    letter-spacing:.035em;
  }
  .map-title h1.alien-shift{
    font-size:clamp(18px, 5.8vw, 30px);
    letter-spacing:.02em;
  }
  .top-actions{
    top:10px;
    right:10px;
    flex-direction:row;
    gap:6px;
  }
  .hud-button{
    min-width:38px;
    padding:8px 9px;
    font-size:12px;
    letter-spacing:.06em;
  }
  .loadout{
    position:fixed;
    inset:64px 10px 10px 10px;
    width:auto;
    max-width:none;
    max-height:none;
    z-index:85;
    display:flex;
    clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  }
  .loadout .panel-cap{
    padding:10px 13px 8px 16px;
    flex:0 0 auto;
  }
  .loadout .panel-cap h2{
    font-size:30px;
  }
  .loadout .panel-body{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:14px 16px 18px;
    -webkit-overflow-scrolling:touch;
  }
  .loadout.collapsed{
    inset:auto 10px 12px auto;
    width:172px;
    max-height:48px;
  }
  .loadout.collapsed .panel-cap{
    padding:9px 10px 7px 14px;
  }
  .loadout.collapsed .panel-cap h2{
    font-size:26px;
  }
  .panel-toggle{
    width:30px;
    height:30px;
    font-size:20px;
  }
  .panel-body label,.year-row label{
    font-size:13px;
  }
  .panel-body select{
    font-size:16px;
    padding:10px 38px 10px 12px;
    margin-bottom:14px;
  }
  .popup{
    position:fixed;
    left:10px !important;
    right:10px !important;
    top:56px !important;
    width:auto;
    max-height:calc(100vh - 68px);
    overflow:auto;
    z-index:95;
  }
  .popup-inner{
    padding:14px 14px 16px;
  }
  .popup h3{
    font-size:25px;
    line-height:1;
  }
  .popup .meta-grid{
    grid-template-columns:1fr;
    gap:7px;
  }
  .meta span,
  .popup p{
    font-size:16px;
  }
  .description-body{
    max-height:145px;
  }
  .media-frame img{
    max-height:190px;
  }
}

@media (max-height:520px) and (max-width:900px){
  .popup{
    top:46px !important;
    max-height:calc(100vh - 56px);
  }
  .loadout{
    inset:50px 10px 8px 10px;
  }
  .loadout.collapsed{
    inset:auto 10px 8px auto;
  }
  .loadout .panel-cap h2{
    font-size:26px;
  }
  .panel-body select{
    margin-bottom:10px;
  }
}


/* Share patch + mobile popup safeguards */
@media (max-width:900px){
  .map-title{
    right:204px;
  }
  .top-actions{
    align-items:flex-start;
  }
  .share-hud{
    min-width:56px;
  }
  .share-modal{
    width:min(390px, calc(100vw - 24px));
    max-height:calc(100vh - 28px);
    overflow:auto;
  }
  .share-options{
    grid-template-columns:1fr 1fr;
  }
  .popup{
    max-width:calc(100vw - 20px);
    max-height:calc(100vh - 68px);
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .popup-inner{
    min-height:0;
  }
}
@media (max-width:900px) and (orientation:landscape){
  .popup{
    top:48px !important;
    max-height:calc(100vh - 58px);
  }
  .popup h3{
    font-size:23px;
  }
  .popup p,
  .meta span{
    font-size:15px;
  }
  .description-body{
    max-height:120px;
  }
  .media-frame img{
    max-height:150px;
  }
}
@media (max-width:640px){
  .map-title{
    right:184px;
  }
  .hud-button{
    padding-left:7px;
    padding-right:7px;
  }
  .share-hud{
    min-width:50px;
  }
}