:root{--background:#050505;--surface:#161616;--panel:#1c1c1c;--text:#c9c5bd;--heading:#f2efe6;--accent:#ab3232;--line:#3a3a3a;--body-font:"Open Sans",Arial,sans-serif;--display-font:Barlow,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--text);font:16px/1.5 var(--body-font);height:100dvh;display:flex;flex-direction:column;background:var(--background)}
::selection{background:var(--accent);color:#fff}
[hidden]{display:none!important}
#alpha-banner{flex:none;background:var(--accent);color:#fff;text-align:center;font:600 .8rem/1.4 var(--body-font);padding:8px 16px;letter-spacing:.01em;z-index:1001}
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:10px 22px;background:#0d0d0d;color:var(--heading);border-bottom:2px solid var(--accent);z-index:1000}
.brand-link{display:block;flex:none}
.brand-link img{display:block;width:190px;height:auto}
h1{font:800 clamp(1rem,2vw,1.5rem) var(--display-font);letter-spacing:.01em;margin:0;text-transform:uppercase}
h2{font:800 1.3rem var(--display-font);letter-spacing:.01em;margin:0 0 .6rem;text-transform:uppercase}
.atlas-title{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center}
.atlas-title p{margin:0;font:italic 400 .82rem var(--body-font);color:#9c968c}
nav{display:flex;gap:8px}
button,input,select{font:600 .95rem var(--body-font)}
button{padding:9px 14px;min-height:44px;cursor:pointer;color:var(--heading);border:1px solid #4a4a4a;background:#232323}
button:hover{background:#2d2d2d}
a{color:#e6a24a;text-underline-offset:3px}
a:hover{color:#f2b968}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
main{position:relative;flex:1;min-height:0;overflow:hidden}

/* --- The retro newsreel map surface --- */
/* Dark grey sea with heavy grain rather than flat black -- pure black read
   as a void; a dark grey ground lets the noise texture actually show up
   over open water instead of disappearing into it. */
#map{position:absolute;inset:0;background:#2b2b2e}
#map .leaflet-container{background:#2b2b2e}
/* film grain + vignette + faint scanlines, layered above the vector map,
   below the Leaflet panes' own z-index range (which start around 400/600) */
#map::before{content:'';position:absolute;inset:0;z-index:390;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .65'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.6'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:160px 160px;mix-blend-mode:overlay;opacity:.9}
/* Messy inked-paper fibre, not CRT scanlines: directional turbulence
   (different x/y frequencies) reads as streaky fibre grain rather than
   uniform cloud noise, multiply-blended so it darkens unevenly like ink
   soaking into paper instead of washing the map out. */
#map::after{content:'';position:absolute;inset:0;z-index:440;pointer-events:none;
  box-shadow:inset 0 0 22vw #000000cc,inset 0 0 4vw #00000080;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.9 0.3' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .5 .05 .4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:240px 240px;mix-blend-mode:multiply;opacity:.5}
.faction-fill{stroke:#0a0a0a;stroke-width:1.4;fill-opacity:.9;filter:saturate(.6) contrast(1.1) brightness(1.08)}
.faction-fill.is-affiliated{stroke-dasharray:3 3;stroke-width:1.2}
.faction-fill:hover,.faction-fill.is-selected{stroke:#f2efe6;stroke-width:2.4;fill-opacity:1}
.leaflet-interactive:focus{outline:none;stroke:#f2efe6;stroke-width:3}
/* Per-state mosaic, drawn on top of .faction-fill: each state a slight
   shade of its faction's colour (set inline per-feature by atlas.js, from
   data/states.geojson) with a thin border between neighbours -- reads as
   individual states once zoomed in, flat from a distance since the shade
   difference is subtle. interactive:false in atlas.js means these paths
   never receive clicks/hover themselves (both fall through to the
   .faction-fill layer beneath); .is-selected is toggled by faction id
   instead of relying on the (now-hidden-underneath) faction layer's own
   selection stroke. */
.state-fill{filter:saturate(.6) contrast(1.1) brightness(1.08)}
.state-fill.is-selected{stroke-width:2px!important;stroke-opacity:.9!important}
.land-base{fill:#b3ab9c;stroke:#5c5648;stroke-width:.6;fill-opacity:1}
.river-line{fill:none;stroke:#6fa0b8;stroke-width:1.5;stroke-linecap:round;opacity:.9}
.road-line{fill:none;stroke:#ab3232;stroke-width:1.1;stroke-linecap:round;opacity:.75;stroke-dasharray:1 3}
/* Briefing-card style label chip: a solid dark tag with a diamond glyph,
   echoing the reference "SACRAMENTO" callout rather than plain map text.
   Leaflet's own divIcon wrapper is a fixed 12x12 box (its only job is to
   anchor the marker's position); it does NOT size to this chip's actual
   content. `.capital-mark` must stay inline-flex, not flex -- a block-level
   flex box's auto width fills that 12px containing block instead of
   shrink-wrapping its content, so the dark background only ever covered
   the diamond and the name text spilled out past it with no backing. */
.capital-dot{background:none;border:0;pointer-events:none!important}
.capital-mark{display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 5px;white-space:nowrap;pointer-events:none;
  background:#14110dd9;border:1px solid #00000080;border-radius:3px;transition:opacity .15s ease,transform .15s ease;
  --scale:.55;transform:scale(var(--scale));transform-origin:left center}
.capital-mark::before{content:'\25C6';font-size:9px;line-height:1;color:#f2efe6}
.capital-mark span{font:700 10px/1.1 var(--display-font);letter-spacing:.03em;text-transform:uppercase;color:#f2efe6}

.territory-tooltip{background:#111;border:1px solid #4a4a4a;color:var(--heading);box-shadow:0 3px 16px #00000080;padding:8px 12px;white-space:normal;min-width:140px;max-width:220px;font:15px/1.3 var(--body-font)}
.territory-tooltip strong{display:block;font:800 15px var(--display-font);text-transform:uppercase;letter-spacing:.02em}
.territory-tooltip::before{display:none}
.leaflet-control-zoom a,.leaflet-control-attribution{background:#191919!important;color:#c9c5bd!important;border-color:#4a4a4a!important}
.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important}
.leaflet-control-attribution a{color:#e6a24a}
.leaflet-top.leaflet-right{top:14px;right:14px}

.state-label{background:none;border:0;pointer-events:none!important}
.state-label-text{color:#f2efe6;font:800 11px/1.1 var(--display-font);letter-spacing:.03em;text-transform:uppercase;text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap;pointer-events:none}

/* --- Info panel --- */
#panel{position:absolute;left:22px;top:22px;width:340px;max-height:calc(100% - 66px);
  display:flex;flex-direction:column;padding:0;overflow:hidden;z-index:800;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 26px #00000080}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  padding:12px 16px;border-bottom:1px solid var(--line);background:#141414}
.panel-heading h2{margin:0;font-size:1.05rem}
.panel-heading button{flex:none;padding:0;width:40px;font-size:1.5rem;line-height:1;border:0;background:transparent;color:var(--heading)}
.panel-body{padding:16px;overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-gutter:stable}
#panel.panel-collapsed{max-height:none}
#panel.panel-collapsed .panel-body{display:none}
.panel-body p{margin:0 0 1rem}
#welcome p:last-child{margin-bottom:0}
fieldset{border:0;border-top:1px solid var(--line);padding:12px 0;margin:0}
legend{font:700 .9rem var(--display-font);text-transform:uppercase;letter-spacing:.02em;padding-right:8px;color:var(--heading)}
label{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.92rem}
input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}

.faction-list{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.faction-list button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;text-align:left;
  background:#141414;border:1px solid var(--line);color:var(--text)}
.faction-list button:hover{background:#1f1f1f}
.faction-swatch{flex:none;width:18px;height:18px;border:1px solid #00000080}

#details{margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--line)}
#detail-name{font-size:1.15rem}
#detail-description{white-space:pre-line}
.flag-buy{display:inline-block;margin:0 0 12px;font:600 .8rem var(--body-font);color:#e6a24a;text-decoration:none;border-bottom:1px dotted #e6a24a;white-space:nowrap}
.flag-buy:hover{color:#f2b968;border-color:#f2b968}
#detail-flag{display:block;width:120px;height:72px;object-fit:cover;margin-bottom:10px;border:1px solid var(--line);box-shadow:0 2px 10px #00000080}
#detail-link{display:inline-block;margin-top:2px;font-size:.9rem}
.wiki{display:block;margin-top:18px;font:600 .95rem var(--body-font)}

@media(max-width:760px){
  #alpha-banner{font-size:.7rem;padding:6px 10px}
  header{padding:8px 12px;gap:8px;flex-wrap:wrap}
  .brand-link img{width:96px}
  h1{font-size:.9rem}
  .atlas-title p{display:none}
  nav{width:100%;justify-content:flex-end}
  #panel{left:10px;right:10px;top:auto;bottom:14px;width:auto;max-height:min(50%,24rem)}
  .panel-body{font-size:15px;padding:12px 16px}
}
@media(hover:none){.territory-tooltip{display:none!important}}