:root { --cyan:#67f7ff; --orange:#ff7800; --ink:#02070a; --panel:rgba(1,9,13,.94); --muted:#8baeb3; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#000306; color:#d9ffff; font-family:"Courier New",monospace; }
body { overflow-x:hidden; }
#matrix { position:fixed; inset:0; width:100%; height:100%; z-index:0; background:#000306; }
.top-nav { position:relative; z-index:20; display:flex; justify-content:center; flex-wrap:wrap; gap:12px; padding:24px 160px 0; }
.top-nav a { color:var(--cyan); font-size:12px; letter-spacing:.18em; text-decoration:none; padding:10px 15px; border:1px solid rgba(103,247,255,.55); background:rgba(0,5,8,.88); box-shadow:0 0 10px rgba(0,234,255,.18); }
.top-nav a:hover,.top-nav a.active { color:white; border-color:var(--orange); box-shadow:0 0 14px rgba(255,120,0,.65); }
.audio-control { position:fixed; top:24px; right:24px; z-index:100; }
.map-page { position:relative; z-index:5; width:min(1240px,calc(100% - 40px)); margin:34px auto 70px; }
.map-hero,.chart-panel { border:1px solid rgba(103,247,255,.45); background:linear-gradient(120deg,rgba(0,234,255,.07),transparent 46%,rgba(255,120,0,.055)),var(--panel); box-shadow:0 0 34px rgba(0,234,255,.14),inset 0 0 40px rgba(0,234,255,.03); }
.map-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(360px,.8fr); gap:30px; align-items:end; padding:38px 42px; border-bottom-color:rgba(255,120,0,.55); }
.eyebrow { margin:0 0 13px; color:var(--orange); font-size:11px; letter-spacing:.24em; font-weight:bold; }
h1 { margin:0; font-family: "Orbitron", "Arial Black", sans-serif; font-size:clamp(44px,6vw,78px); line-height:.92; color:#03090c; -webkit-text-stroke:2px var(--cyan); text-shadow:0 0 18px rgba(103,247,255,.55); }
h1 span { color:#080604; -webkit-text-stroke-color:var(--orange); text-shadow:0 0 18px rgba(255,120,0,.58); }
.hero-copy { margin:18px 0 0; color:#a9c9cd; letter-spacing:.12em; }
.chart-index { display:grid; grid-template-columns:repeat(2,1fr); margin:0; border-top:1px solid rgba(103,247,255,.35); border-left:1px solid rgba(103,247,255,.35); }
.chart-index div { padding:13px 15px; border-right:1px solid rgba(103,247,255,.35); border-bottom:1px solid rgba(103,247,255,.35); }
.chart-index dt { color:#63858a; font-size:9px; letter-spacing:.2em; }
.chart-index dd { margin:5px 0 0; color:var(--cyan); font-weight:bold; font-size:12px; letter-spacing:.12em; }
.chart-panel { margin-top:18px; padding:28px; }
.chart-toolbar { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:20px; }
.chart-toolbar h2 { margin:0; color:var(--cyan); font-size:clamp(20px,2.5vw,32px); letter-spacing:.16em; text-shadow:0 0 10px rgba(103,247,255,.65); }
.chart-toolbar>p { max-width:390px; margin:0; color:#88a8ad; font-size:12px; line-height:1.6; text-align:right; }
.paradigm-chart { position:relative; height:clamp(580px,58vw,720px); overflow:hidden; border:1px solid rgba(103,247,255,.5); background-color:rgba(0,7,11,.95); background-image:linear-gradient(rgba(0,255,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.065) 1px,transparent 1px); background-size:48px 48px; box-shadow:inset 0 0 70px rgba(0,234,255,.04),0 0 18px rgba(0,234,255,.16); }
.territory-map { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.territory-boundary { fill:rgba(0,48,56,.25); stroke:rgba(103,247,255,.65); stroke-width:2; filter:drop-shadow(0 0 7px rgba(103,247,255,.65)); }
.terminus-territory { fill:rgba(255,120,0,.13); stroke:rgba(255,120,0,.55); stroke-width:2; filter:drop-shadow(0 0 7px rgba(255,120,0,.45)); }
.map-location { position:absolute; z-index:3; width:max-content; padding:0; border:0; color:inherit; background:transparent; text-align:center; transform:translate(-50%,-50%); cursor:pointer; font:inherit; }
.map-node { display:block; width:22px; height:22px; margin:0 auto 12px; border:2px solid var(--cyan); transform:rotate(45deg); background:#02090c; box-shadow:0 0 10px var(--cyan),0 0 24px rgba(103,247,255,.7); }
.map-node.capital { width:64px; height:64px; border-width:3px; border-color:var(--orange); background:radial-gradient(circle at center,rgba(255,120,0,.42) 0 24%,#02090c 28% 100%); box-shadow:0 0 14px var(--orange),0 0 34px rgba(255,120,0,.9),inset 0 0 18px rgba(255,120,0,.28); }
.map-label,.map-description { display:block; position:relative; z-index:5; width:max-content; margin-inline:auto; background:rgba(0,7,11,.92); padding:2px 8px; white-space:nowrap; }
.map-label { color:var(--cyan); font-size:clamp(14px,1.55vw,21px); font-weight:bold; letter-spacing:.14em; text-shadow:0 0 10px rgba(103,247,255,.9); }
.map-description { margin-top:4px; color:rgba(180,245,255,.62); font-size:10px; letter-spacing:.13em; }
.terminus .map-label { color:var(--orange); font-size:clamp(18px,2vw,26px); text-shadow:0 0 12px rgba(255,120,0,.9); }
.gateway{left:50%;top:11%}.archives{left:30%;top:48%}.forge{left:70%;top:48%}.terminus{left:50%;top:64%}.watchtower{left:50%;top:85%}
.map-location:hover .map-node,.map-location:focus-visible .map-node,.map-location.is-active .map-node { background:rgba(103,247,255,.38); transform:rotate(45deg) scale(1.15); }
.map-location:hover .map-label,.map-location:focus-visible .map-label,.map-location.is-active .map-label { color:white; }
.terminus:hover .map-node,.terminus:focus-visible .map-node,.terminus.is-active .map-node { background:rgba(255,120,0,.4); }
.map-location:focus-visible,.outer-sectors:focus-visible,.dossier-close:focus-visible { outline:2px solid white; outline-offset:6px; }
.outer-sectors { position:absolute; z-index:3; bottom:0; left:5%; width:90%; padding:15px 0 10px; border:0; border-top:1px dashed rgba(255,120,0,.55); color:var(--orange); background:rgba(0,7,11,.85); font:inherit; letter-spacing:.3em; cursor:pointer; }
.outer-sectors span,.outer-sectors small { display:block; }.outer-sectors small { margin-top:6px; color:rgba(255,120,0,.55); font-size:10px; }
.location-dossier { position:relative; margin-top:22px; padding:30px; border:1px solid rgba(103,247,255,.55); background:linear-gradient(120deg,rgba(0,234,255,.055),transparent 55%,rgba(255,120,0,.045)),rgba(0,7,11,.97); box-shadow:inset 0 0 35px rgba(0,234,255,.035); }
.location-dossier[hidden] { display:none; }
.dossier-close { position:absolute; top:16px; right:16px; width:38px; height:38px; border:1px solid var(--orange); color:var(--orange); background:#030609; font-size:24px; cursor:pointer; }
.dossier-kicker { color:var(--orange); font-size:11px; letter-spacing:.23em; }
.location-dossier h2 { margin:8px 55px 14px 0; color:var(--cyan); font-size:clamp(28px,4vw,46px); letter-spacing:.12em; text-shadow:0 0 11px rgba(103,247,255,.7); }
.dossier-description { color:#a9c8cc; line-height:1.7; }
.dossier-summary,.dossier-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.dossier-summary { margin:24px 0 16px; }.dossier-summary>div,.dossier-columns section { padding:17px; border:1px solid rgba(103,247,255,.24); background:rgba(0,234,255,.025); }
.dossier-summary dt,.dossier-columns h3 { color:var(--orange); font-size:11px; letter-spacing:.18em; }.dossier-summary dd { margin:7px 0 0; line-height:1.5; }
.dossier-columns h3 { margin:0 0 10px; color:var(--cyan); }.dossier-columns ul { margin:0; padding-left:20px; color:#a9c8cc; line-height:1.75; }
#locationStatus { color:var(--cyan); font-weight:bold; }
@media(max-width:940px){.top-nav{padding:20px 110px 0}.map-hero{grid-template-columns:1fr}.chart-toolbar{align-items:start}.paradigm-chart{height:680px}.map-label{font-size:14px}.map-description{font-size:8px}}
@media(max-width:650px){.top-nav{padding:80px 12px 0;gap:7px}.top-nav a{font-size:9px;padding:8px}.audio-control{top:18px;right:18px}.map-page{width:calc(100% - 20px);margin-top:24px}.map-hero,.chart-panel{padding:22px 15px}.map-hero{gap:24px}.chart-toolbar{display:block}.chart-toolbar>p{text-align:left;margin-top:12px}.paradigm-chart{height:125vw;min-height:520px}.map-node.capital{width:52px;height:52px}.map-label{font-size:11px;padding:2px 4px}.map-description{font-size:7px;padding:2px 4px}.archives{left:26%}.forge{left:74%}.dossier-summary,.dossier-columns{grid-template-columns:1fr}}

.location-interface-link { display:inline-flex; align-items:center; margin-top:20px; padding:12px 15px; border:1px solid var(--orange); color:#ff9a55; background:rgba(255,120,0,.045); font-size:10px; font-weight:bold; letter-spacing:.16em; text-decoration:none; box-shadow:0 0 12px rgba(255,120,0,.14); }
.location-interface-link:hover,.location-interface-link:focus-visible { color:#fff; border-color:var(--cyan); box-shadow:0 0 14px rgba(103,247,255,.3); }
.location-interface-link[hidden] { display:none; }

/* Tactical cartographic display */
.map-page {
  width:min(1560px,calc(100% - 32px));
}

.map-hero,.chart-panel {
  border-color:rgba(103,247,255,.68);
  box-shadow:
    0 0 42px rgba(0,234,255,.2),
    inset 0 0 55px rgba(0,234,255,.045),
    inset 0 -2px rgba(255,120,0,.2);
}

.chart-panel {
  padding:32px;
}

.paradigm-chart {
  isolation:isolate;
  height:clamp(700px,62vw,900px);
  border-color:rgba(103,247,255,.9);
  background-color:rgba(0,7,11,.97);
  background-image:
    linear-gradient(rgba(103,247,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,247,255,.13) 1px,transparent 1px),
    linear-gradient(rgba(103,247,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,247,255,.22) 1px,transparent 1px),
    radial-gradient(circle at 50% 58%,rgba(255,120,0,.08),transparent 34%);
  background-size:40px 40px,40px 40px,200px 200px,200px 200px,100% 100%;
  box-shadow:
    inset 0 0 105px rgba(0,234,255,.09),
    inset 0 0 24px rgba(103,247,255,.15),
    0 0 24px rgba(0,234,255,.3);
}

.paradigm-chart::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(103,247,255,.18),transparent 12%,transparent 88%,rgba(255,120,0,.15)),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(103,247,255,.022) 6px);
}

.paradigm-chart::after {
  content:"";
  position:absolute;
  inset:14px;
  z-index:6;
  pointer-events:none;
  border:1px solid rgba(103,247,255,.16);
  box-shadow:inset 0 0 45px rgba(0,0,0,.65);
}

.chart-scan {
  position:absolute;
  z-index:2;
  top:-16%;
  left:0;
  width:100%;
  height:16%;
  pointer-events:none;
  opacity:.72;
  background:linear-gradient(180deg,transparent,rgba(103,247,255,.025) 36%,rgba(103,247,255,.34) 100%);
  border-bottom:1px solid rgba(103,247,255,.8);
  box-shadow:0 10px 24px rgba(103,247,255,.2);
  animation:chart-scan 7s linear infinite;
}

.chart-noise {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.16;
  background-image:repeating-linear-gradient(90deg,transparent 0 97px,rgba(255,120,0,.14) 98px,transparent 99px);
  animation:signal-flicker 5s steps(1,end) infinite;
}

.chart-bracket {
  position:absolute;
  z-index:7;
  width:38px;
  height:38px;
  pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(103,247,255,.75));
}
.bracket-nw{top:18px;left:18px;border-top:3px solid var(--cyan);border-left:3px solid var(--cyan)}
.bracket-ne{top:18px;right:18px;border-top:3px solid var(--orange);border-right:3px solid var(--orange)}
.bracket-sw{bottom:18px;left:18px;border-bottom:3px solid var(--orange);border-left:3px solid var(--orange)}
.bracket-se{right:18px;bottom:18px;border-right:3px solid var(--cyan);border-bottom:3px solid var(--cyan)}

.chart-coordinate {
  position:absolute;
  z-index:7;
  pointer-events:none;
  color:rgba(159,241,247,.66);
  font-size:9px;
  font-weight:bold;
  letter-spacing:.18em;
  text-shadow:0 0 7px rgba(103,247,255,.65);
}
.coordinate-nw{top:28px;left:70px}
.coordinate-ne{top:28px;right:70px;color:rgba(255,153,78,.82);text-shadow:0 0 7px rgba(255,120,0,.65)}
.coordinate-sw{bottom:31px;left:70px;color:rgba(255,153,78,.72)}
.coordinate-se{right:70px;bottom:31px}

.territory-map {
  z-index:1;
  overflow:visible;
}

.territory-boundary {
  fill:rgba(0,65,76,.3);
  stroke:rgba(103,247,255,.94);
  stroke-width:2.7;
  stroke-dasharray:15 7;
  filter:drop-shadow(0 0 9px rgba(103,247,255,.9));
  animation:route-flow 2.6s linear infinite;
}

.terminus-territory {
  fill:rgba(255,120,0,.19);
  stroke:rgba(255,153,68,.95);
  stroke-width:3;
  stroke-dasharray:18 8;
  filter:drop-shadow(0 0 12px rgba(255,120,0,.85));
  animation:route-flow 2s linear infinite reverse,territory-surge 4s ease-in-out infinite;
}

.map-node {
  border-width:3px;
  animation:node-pulse 3s ease-in-out infinite;
}
.archives .map-node{animation-delay:-.65s}
.forge .map-node{animation-delay:-1.3s}
.watchtower .map-node{animation-delay:-1.95s}

.map-node.capital {
  position:relative;
  width:78px;
  height:78px;
  border-width:4px;
  background:
    radial-gradient(circle at center,var(--orange) 0 8%,rgba(255,120,0,.3) 10% 27%,#02090c 30% 100%);
  animation:capital-surge 2.5s ease-in-out infinite;
}

.map-node.capital::after {
  content:"";
  position:absolute;
  inset:-13px;
  border:1px solid rgba(255,120,0,.48);
  animation:capital-ring 2.5s ease-out infinite;
}

.map-label {
  border-left:2px solid var(--cyan);
  border-right:2px solid rgba(103,247,255,.25);
  box-shadow:0 0 13px rgba(0,234,255,.16);
}
.terminus .map-label {
  border-left-color:var(--orange);
  border-right-color:rgba(255,120,0,.3);
  box-shadow:0 0 17px rgba(255,120,0,.22);
}

.outer-sectors {
  bottom:10px;
  border-top:1px solid rgba(255,120,0,.82);
  box-shadow:0 -8px 24px rgba(255,120,0,.06);
}

@keyframes chart-scan {
  0%{transform:translateY(0)}
  100%{transform:translateY(725%)}
}
@keyframes route-flow {
  to{stroke-dashoffset:-44}
}
@keyframes territory-surge {
  0%,100%{fill:rgba(255,120,0,.14)}
  50%{fill:rgba(255,120,0,.27)}
}
@keyframes node-pulse {
  0%,100%{box-shadow:0 0 8px var(--cyan),0 0 21px rgba(103,247,255,.58)}
  50%{box-shadow:0 0 16px var(--cyan),0 0 42px rgba(103,247,255,.95)}
}
@keyframes capital-surge {
  0%,100%{box-shadow:0 0 15px var(--orange),0 0 36px rgba(255,120,0,.78),inset 0 0 18px rgba(255,120,0,.3)}
  50%{box-shadow:0 0 25px var(--orange),0 0 70px rgba(255,120,0,1),inset 0 0 30px rgba(255,120,0,.52)}
}
@keyframes capital-ring {
  0%{opacity:.8;transform:scale(.76)}
  100%{opacity:0;transform:scale(1.38)}
}
@keyframes signal-flicker {
  0%,89%,93%,100%{opacity:.14}
  90%{opacity:.28}
  91%{opacity:.05}
}

@media(max-width:940px){
  .map-page{width:min(100% - 24px,920px)}
  .paradigm-chart{height:720px}
  .chart-coordinate{font-size:8px}
}

@media(max-width:650px){
  .map-page{width:calc(100% - 20px)}
  .chart-panel{padding:22px 15px}
  .paradigm-chart{height:135vw;min-height:560px;max-height:700px;background-size:28px 28px,28px 28px,140px 140px,140px 140px,100% 100%}
  .chart-coordinate{display:none}
  .chart-bracket{width:25px;height:25px}
  .map-node.capital{width:58px;height:58px}
}

@media(prefers-reduced-motion:reduce){
  .chart-scan,.chart-noise,.territory-boundary,.terminus-territory,.map-node,.map-node.capital,.map-node.capital::after{animation:none}
}

/* Electrical forcefield refinement */
.paradigm-chart {
  background-image:
    linear-gradient(rgba(103,247,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,247,255,.13) 1px,transparent 1px),
    linear-gradient(rgba(103,247,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,247,255,.22) 1px,transparent 1px),
    radial-gradient(circle at 50% 58%,rgba(255,120,0,.035),transparent 36%);
}

.territory-boundary {
  fill:rgba(0,34,42,.1);
  stroke:rgba(103,247,255,.32);
  stroke-width:1.4;
  stroke-dasharray:none;
  filter:drop-shadow(0 0 5px rgba(103,247,255,.3));
  animation:none;
}

.terminus-territory {
  fill:rgba(255,120,0,.065);
  stroke:rgba(255,153,68,.35);
  stroke-width:1.6;
  stroke-dasharray:none;
  filter:drop-shadow(0 0 5px rgba(255,120,0,.32));
  animation:territory-surge-dark 5s ease-in-out infinite;
}

.forcefield-energy {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
  filter:url(#forcefieldDistortion);
}

.forcefield-cyan {
  stroke:var(--cyan);
  stroke-width:2.8;
  stroke-dasharray:2 5 17 4 3 7;
  filter:url(#forcefieldDistortion) drop-shadow(0 0 5px var(--cyan)) drop-shadow(0 0 13px rgba(103,247,255,.95));
  animation:lightning-run 1.15s linear infinite,lightning-flash 2.8s steps(1,end) infinite;
}

.forcefield-orange {
  stroke:var(--orange);
  stroke-width:3.1;
  stroke-dasharray:3 4 13 6 2 5;
  filter:url(#forcefieldDistortion) drop-shadow(0 0 6px var(--orange)) drop-shadow(0 0 15px rgba(255,120,0,.92));
  animation:lightning-run .9s linear infinite reverse,lightning-flash 2.1s steps(1,end) infinite reverse;
}

@keyframes territory-surge-dark {
  0%,100%{fill:rgba(255,120,0,.045)}
  50%{fill:rgba(255,120,0,.1)}
}
@keyframes lightning-run {
  to{stroke-dashoffset:-62}
}
@keyframes lightning-flash {
  0%,17%,20%,63%,66%,100%{opacity:.82}
  18%,64%{opacity:.28}
  19%,65%{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .forcefield-energy{animation:none}
}

/* Slower, sharper lightning behavior */
.forcefield-cyan {
  stroke-width:2;
  stroke-dasharray:44 4 12 3 68 5 21 3;
  animation:electric-drift 6.8s linear infinite,electric-break 5.6s steps(1,end) infinite;
}

.forcefield-orange {
  stroke-width:2.2;
  stroke-dasharray:38 4 9 3 56 5 17 3;
  animation:electric-drift 5.4s linear infinite reverse,electric-break 4.8s steps(1,end) infinite reverse;
}

.forcefield-spark {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
  stroke-width:1.15;
  stroke-dasharray:1 31 2 47 1 68;
  filter:url(#forcefieldDistortion);
}

.forcefield-spark-cyan {
  stroke:#e7feff;
  filter:url(#forcefieldDistortion) drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px var(--cyan));
  animation:spark-crawl 9s linear infinite,spark-flash 4.6s steps(1,end) infinite;
}

.forcefield-spark-orange {
  stroke:#fff0df;
  filter:url(#forcefieldDistortion) drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px var(--orange));
  animation:spark-crawl 7.5s linear infinite reverse,spark-flash 3.9s steps(1,end) infinite reverse;
}

@keyframes electric-drift {
  to{stroke-dashoffset:-96}
}
@keyframes electric-break {
  0%,12%,15%,58%,61%,100%{opacity:.74}
  13%,59%{opacity:.22}
  14%,60%{opacity:1}
}
@keyframes spark-crawl {
  to{stroke-dashoffset:-154}
}
@keyframes spark-flash {
  0%,8%,11%,47%,51%,82%,85%,100%{opacity:.2}
  9%,49%,83%{opacity:1}
  10%,50%,84%{opacity:.05}
}

@media(prefers-reduced-motion:reduce){
  .forcefield-spark{animation:none}
}

/* Restrained forcefield intensity */
.forcefield-cyan {
  stroke-width:1.45;
  opacity:.56;
  filter:url(#forcefieldDistortion) drop-shadow(0 0 3px rgba(103,247,255,.8)) drop-shadow(0 0 8px rgba(103,247,255,.48));
  animation:electric-drift 12s linear infinite,electric-break-calm 10s steps(1,end) infinite;
}

.forcefield-orange {
  stroke-width:1.6;
  opacity:.6;
  filter:url(#forcefieldDistortion) drop-shadow(0 0 3px rgba(255,120,0,.82)) drop-shadow(0 0 9px rgba(255,120,0,.5));
  animation:electric-drift 10s linear infinite reverse,electric-break-calm 9s steps(1,end) infinite reverse;
}

.forcefield-spark {
  stroke-width:.8;
  opacity:.08;
}

.forcefield-spark-cyan {
  filter:url(#forcefieldDistortion) drop-shadow(0 0 3px rgba(103,247,255,.55));
  animation:spark-crawl 18s linear infinite,spark-flash-calm 12s steps(1,end) infinite;
}

.forcefield-spark-orange {
  filter:url(#forcefieldDistortion) drop-shadow(0 0 3px rgba(255,120,0,.58));
  animation:spark-crawl 15s linear infinite reverse,spark-flash-calm 10s steps(1,end) infinite reverse;
}

@keyframes electric-break-calm {
  0%,46%,49%,100%{opacity:.56}
  47%{opacity:.28}
  48%{opacity:.72}
}
@keyframes spark-flash-calm {
  0%,61%,64%,100%{opacity:.06}
  62%{opacity:.45}
  63%{opacity:.02}
}

/* Contained Outer Sectors status rail */
.outer-sectors {
  bottom:12px;
  left:5%;
  display:flex;
  min-height:70px;
  width:90%;
  padding:11px 150px 10px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(255,120,0,.52);
  color:var(--orange);
  background:rgba(0,4,7,.97);
  box-shadow:
    inset 0 0 24px rgba(255,120,0,.055),
    0 0 14px rgba(255,120,0,.1);
  line-height:1.15;
}

.outer-sectors span {
  font-size:13px;
  line-height:1.2;
}

.outer-sectors small {
  margin-top:7px;
  font-size:9px;
  line-height:1.2;
}

@media(max-width:650px){
  .outer-sectors{min-height:64px;padding:10px 15px}
  .outer-sectors span{font-size:11px}
  .outer-sectors small{font-size:8px}
}

/* Full-width Outer Sectors rail with the Watchtower identity inside it */
.watchtower {
  z-index:5;
  top:85%;
}

.outer-sectors {
  left:0;
  width:100%;
  min-height:78px;
  padding:48px 150px 7px;
  justify-content:flex-end;
  border-right:0;
  border-left:0;
}

.watchtower .map-label,
.watchtower .map-description {
  background:rgba(0,4,7,.98);
  transform:translateY(20px);
}

@media(max-width:650px){
  .outer-sectors{min-height:74px;padding:45px 14px 6px}
  .watchtower .map-label,.watchtower .map-description{transform:translateY(18px)}
}

/* Mobile cartography: keep navigation on one rail and give every site room to read. */
@media(max-width:760px){
  body nav.top-nav{
    min-height:56px;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:0;
    padding:0 8px !important;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body nav.top-nav::-webkit-scrollbar{display:none}
  body nav.top-nav>a,
  body nav.top-nav>details>summary{
    flex:0 0 auto;
    min-height:56px;
    padding-inline:9px;
    font-size:clamp(8px,2.4vw,10px);
    letter-spacing:.08em;
  }
}

@media(max-width:650px){
  .map-page{width:calc(100% - 12px);margin-top:14px}
  .chart-panel{padding:14px 10px}
  .chart-toolbar{margin-bottom:14px}
  .chart-toolbar h2{font-size:clamp(17px,5vw,23px);letter-spacing:.1em}
  .paradigm-chart{
    height:min(112vw,460px);
    min-height:430px;
    max-height:460px;
    background-size:24px 24px,24px 24px,120px 120px,120px 120px,100% 100%;
  }
  .map-label{font-size:12px;letter-spacing:.09em;padding:3px 5px}
  .map-description{font-size:9px;letter-spacing:.055em;padding:2px 4px}
  .gateway{top:12%}
  .archives{left:25%;top:39%}
  .forge{left:75%;top:39%}
  .terminus{top:56%}
  .outer-sectors{
    bottom:0;
    min-height:56px;
    padding:6px 12px;
    justify-content:center;
  }
  .outer-sectors span{font-size:11px;letter-spacing:.22em}
  .outer-sectors small{font-size:8px;letter-spacing:.15em}
  .watchtower{top:70%}
  .watchtower .map-label,.watchtower .map-description{transform:none}
  .dossier-summary,.dossier-columns{grid-template-columns:1fr}
  .location-dossier{padding:22px 16px}
}

/* Valor-shield artwork: preserve the live location buttons over the new map image. */
.map-pan{width:100%;overflow:hidden;overscroll-behavior-x:contain}
.paradigm-chart{
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:16 / 9;
  background-color:#02070d;
  background-image:linear-gradient(rgba(0,5,10,.08),rgba(0,5,10,.08)),url("../images/paradigm-valor-shield-map-v2.png");
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.paradigm-chart::before{background:linear-gradient(90deg,rgba(0,12,24,.16),transparent 20%,transparent 80%,rgba(0,12,24,.16))}
.chart-scan,.chart-noise,.territory-map,.map-path{display:none!important}
.chart-scan{display:block!important;z-index:6;opacity:.48}
.shield-spine{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.shield-spine polyline{fill:none;stroke:#eaffff;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #65faff) drop-shadow(0 0 9px #65faff)}
.shield-spine .gateway-spine{stroke:#eaffff;stroke-width:1.5px;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #65faff) drop-shadow(0 0 9px #65faff)}
.map-location{z-index:8}
.map-location .map-label{font-size:13px;letter-spacing:.1em;padding:2px 5px}
.map-location .map-description{font-size:8px;letter-spacing:.07em;padding:1px 4px}
.map-location.terminus .map-label{font-size:15px}
.map-location{
  display:block;
  width:15%;
  height:19%;
  padding:5px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(101,250,255,.56);
  background:linear-gradient(145deg,rgba(0,15,22,.25),rgba(0,5,10,.08));
  box-shadow:inset 0 0 16px rgba(101,250,255,.08),0 0 10px rgba(101,250,255,.18);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  touch-action:manipulation;
}
.map-location .map-node{display:none}
.map-location .map-label,.map-location .map-description{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  background:rgba(0,5,10,.9);
  text-shadow:0 1px 5px #000,0 0 10px currentColor;
}
.map-location .map-label{top:auto;bottom:22px}
.map-location .map-description{top:auto;bottom:5px;font-size:8px}
.map-location:hover,.map-location:focus-visible,.map-location.is-active{border-color:#eaffff;background:linear-gradient(145deg,rgba(0,26,34,.45),rgba(0,7,12,.3));box-shadow:inset 0 0 20px rgba(101,250,255,.2),0 0 18px rgba(101,250,255,.45)}
.map-location.terminus{border-color:rgba(255,196,77,.68);box-shadow:inset 0 0 18px rgba(255,120,24,.1),0 0 12px rgba(255,120,24,.18)}
.map-location.terminus:hover,.map-location.terminus:focus-visible,.map-location.terminus.is-active{border-color:#ffc44d;box-shadow:inset 0 0 24px rgba(255,120,24,.2),0 0 20px rgba(255,120,24,.48)}
.map-location.terminus .map-label{color:#ffc44d}
.gateway{left:50%;top:17.8%}
.archives{left:31.5%;top:39.8%;width:18%;height:24%}
.forge{left:68.5%;top:39.8%;width:18%;height:24%}
.terminus{left:50%;top:51%;width:22%;height:22%}
.watchtower{left:50%;top:75.2%;width:18%;height:18%;display:block}
.outer-sectors{z-index:8}

@media(max-width:650px){
  .map-pan{
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-color:rgba(101,250,255,.65) rgba(0,7,11,.9);
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .paradigm-chart{width:720px;max-width:none;height:auto;min-height:0;aspect-ratio:16 / 9}
  .map-location .map-label{font-size:11px;letter-spacing:.08em;padding:2px 4px}
  .map-location .map-description{font-size:7px;letter-spacing:.045em;padding:1px 3px}
  .map-location.terminus .map-label{font-size:13px}
  .gateway{top:17.8%}
  .archives{left:31.5%;top:39.8%}
  .forge{left:68.5%;top:39.8%}
  .terminus{top:51%}
  .watchtower{top:75.2%}
}