:root{
  --red:#FF2B33; --red2:#E01A22; --void:#0B0709; --void2:#140c0f; --panel:rgba(20,12,15,.82);
  --silver:#C9CFD8; --pale:#FFD3D5; --ink:#F5F6F8; --muted:rgba(233,236,242,.62); --amber:#e0a030;
  --hair:rgba(255,80,88,.18); --hair2:rgba(255,80,88,.08);
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace; --sans:'Sora',system-ui,Segoe UI,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%;background:var(--void);color:var(--ink);font-family:var(--sans)}
body{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}
a{color:var(--pale)}
.xr{color:var(--red);font-weight:800;letter-spacing:-.02em}
button{font:inherit;color:inherit;cursor:pointer}

/* boot */
#boot{position:fixed;inset:0;z-index:1500;background:var(--void);display:grid;place-items:center;transition:opacity .6s var(--ease)}
#boot.done{opacity:0;pointer-events:none}
.boot-inner{width:min(560px,90vw)}
.boot-mark{font-size:34px;letter-spacing:.18em;font-weight:300;margin-bottom:18px}
#bootlog{font-family:var(--mono);font-size:12.5px;color:var(--muted);min-height:150px;margin:0;white-space:pre-wrap}
#bootlog b{color:var(--red);font-weight:600}
.boot-bar{height:2px;background:var(--hair);margin-top:14px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 12px var(--red);transition:width .3s}

/* top bar */
.top{display:flex;align-items:center;gap:22px;padding:12px 20px;border-bottom:1px solid var(--hair);background:linear-gradient(180deg,#160d10,transparent);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px;font-size:20px}
.brand .slash{color:var(--muted);font-family:var(--mono)}
.brand .title{letter-spacing:.14em;font-weight:300}
.brand .title b{font-weight:800}
.brand .yr{font-family:var(--mono);font-size:11px;color:var(--red);border:1px solid var(--hair);padding:2px 6px;margin-left:6px}
.status{display:flex;gap:20px;align-items:center;margin-left:auto;font-family:var(--mono);font-size:11px;flex-wrap:wrap}
.kv em{font-style:normal;color:var(--muted);margin-right:6px}
.kv strong{color:var(--ink);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--red);color:var(--red);padding:2px 8px;letter-spacing:.12em}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
.pill.stale{border-color:var(--amber);color:var(--amber)}.pill.stale i{background:var(--amber)}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
.official{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-decoration:none;color:var(--ink);border:1px solid var(--red);padding:7px 12px;background:rgba(255,43,51,.1);transition:background .2s}
.official:hover{background:var(--red)}

/* stage */
.stage{flex:1;display:grid;grid-template-columns:1fr 400px;min-height:0}
.mapwrap{position:relative;overflow:hidden;min-height:620px;border-right:1px solid var(--hair);background:#07060a}
#map{position:absolute;inset:0;background:#07060a}
.scan{position:absolute;inset:0;pointer-events:none;z-index:450;background:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.scan::after{content:"";position:absolute;left:0;right:0;height:120px;background:linear-gradient(180deg,transparent,rgba(255,43,51,.05),transparent);animation:sweep 8s linear infinite}
@keyframes sweep{from{top:-120px}to{top:100%}}

/* leaflet skin */
.leaflet-container{font-family:var(--sans)}
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.78) contrast(1.15) saturate(.35)}
.leaflet-control-zoom{border:1px solid var(--hair) !important;box-shadow:0 0 18px rgba(255,43,51,.15) !important}
.leaflet-control-zoom a{background:var(--panel) !important;color:var(--ink) !important;border-bottom:1px solid var(--hair) !important;backdrop-filter:blur(6px)}
.leaflet-control-zoom a:hover{background:rgba(255,43,51,.3) !important}
.leaflet-control-attribution{background:rgba(11,7,9,.75) !important;color:var(--muted) !important;font-family:var(--mono);font-size:9px !important}
.leaflet-control-attribution a{color:var(--pale) !important}
.leaflet-interactive.munic{transition:fill-opacity .5s}
.munic-label{background:none;border:0;box-shadow:none;color:#fff;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;pointer-events:none;white-space:nowrap}
.munic-label::before{display:none}
.ward-label{background:none;border:0;box-shadow:none;color:var(--pale);font-family:var(--mono);font-size:9px;text-shadow:0 0 3px #000,0 0 5px #000}
.ward-label::before{display:none}

/* flight overlay */
.crew-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:640}

/* beacons + you-are-here */
.beacon{position:relative;width:34px;height:34px}
.beacon i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
.beacon b{position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);animation:ring 1.8s ease-out infinite}
.beacon b:nth-child(3){animation-delay:.6s}
.beacon.alex i{background:#fff;box-shadow:0 0 10px #fff}.beacon.alex b{border-color:#fff}
.beacon.rex i{background:var(--red)}
.beacon.hex i{background:var(--amber);box-shadow:0 0 10px var(--amber)}.beacon.hex b{border-color:var(--amber)}
.beacon.dex i{background:#7dd3fc;box-shadow:0 0 10px #7dd3fc}.beacon.dex b{border-color:#7dd3fc}
.beacon.me i{background:#22c55e;box-shadow:0 0 12px #22c55e}.beacon.me b{border-color:#22c55e}
.beacon img{position:absolute;left:50%;top:-34px;width:30px;height:30px;margin-left:-15px;border-radius:50%;border:2px solid var(--red);object-fit:cover;background:#140c0f}
.beacon .tag{position:absolute;left:38px;top:7px;white-space:nowrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;background:rgba(11,7,9,.9);border:1px solid var(--hair);padding:2px 6px;color:var(--pale)}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.map-hide-beacons .beacon{display:none}

.modes{position:absolute;top:14px;left:14px;display:flex;gap:6px;flex-wrap:wrap;z-index:800}
.modes button,.tools button{background:var(--panel);border:1px solid var(--hair);padding:7px 11px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;backdrop-filter:blur(6px)}
.modes button.on,.tools button.on{border-color:var(--red);color:#fff;background:rgba(255,43,51,.22);box-shadow:0 0 18px rgba(255,43,51,.25)}
.tools{position:absolute;top:14px;right:14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;z-index:800}
.tools .ico{color:var(--red);margin-right:3px}
.tools button.busy{opacity:.6;cursor:wait}
.crumbs{position:absolute;top:56px;left:14px;z-index:800;font-family:var(--mono);font-size:12px;display:flex;gap:10px;align-items:center}
.crumbs button{background:var(--red);border:0;padding:6px 10px;font-family:var(--mono);font-size:11px}
.legend{position:absolute;left:14px;bottom:26px;z-index:800;background:var(--panel);border:1px solid var(--hair);padding:10px 12px;font-family:var(--mono);font-size:11px;max-width:330px;backdrop-filter:blur(6px)}
.legend h4{margin:0 0 6px;font-size:10px;letter-spacing:.14em;color:var(--red);font-weight:600}
.legend .row{display:flex;flex-wrap:wrap;gap:4px 12px}
.legend .sw{display:inline-flex;align-items:center;gap:5px}
.legend .sw i{width:10px;height:10px;display:inline-block}
.legend .ramp{height:8px;width:220px;margin:4px 0 2px}
.legend .ends{display:flex;justify-content:space-between;width:220px;color:var(--muted)}
.legend p{margin:6px 0 0;color:var(--muted);font-size:10.5px}

.bot{position:absolute;right:62px;bottom:26px;display:flex;align-items:flex-end;gap:8px;z-index:800;max-width:min(500px,70%)}
.bubble{background:var(--panel);border:1px solid var(--red);padding:10px 12px;position:relative;backdrop-filter:blur(6px);box-shadow:0 0 24px rgba(255,43,51,.18);min-width:300px}
.bubble::after{content:"";position:absolute;right:-7px;bottom:78px;width:12px;height:12px;background:#1a0f12;border-right:1px solid var(--red);border-top:1px solid var(--red);transform:rotate(45deg)}
.bubble .who{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--red)}
.bubble .who img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--red)}
.bubble .who #castRole{color:var(--muted)}
.bubble p{margin:6px 0 0;font-size:13px;line-height:1.45;min-height:38px}
.bubble p::after{content:"_";color:var(--red);animation:pulse 1s steps(1) infinite}
.bubble .goto{margin-top:6px;background:transparent;border:1px solid var(--red);color:var(--pale);font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:4px 8px}
.bubble .goto:hover{background:var(--red);color:#fff}
.bubble .notnews{display:block;margin-top:7px;padding-top:6px;border-top:1px dashed var(--hair);font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--amber)}
.tip .quip::before,.detail .quip::before{content:"CREW JOKE: ";font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--amber)}
.speaker{position:relative;width:150px;height:170px;flex:none;cursor:pointer;border:1px solid var(--hair);background:radial-gradient(ellipse at 50% 70%,rgba(255,43,51,.16),rgba(11,7,9,.85) 70%);box-shadow:0 0 24px rgba(255,43,51,.15),inset 0 0 30px rgba(0,0,0,.6)}
.speaker canvas{width:150px;height:170px;display:block}
.speaker .holo{position:absolute;left:6px;bottom:4px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--muted)}
.speaker .holo b{color:var(--red)}
.speaker::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,43,51,.05) 0 1px,transparent 1px 3px);pointer-events:none}

.tip{position:absolute;z-index:900;pointer-events:none;background:rgba(11,7,9,.94);border:1px solid var(--red);padding:10px 12px;min-width:220px;max-width:300px;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.tip h3{margin:0 0 2px;font-size:14px}
.tip .meta{font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:8px;letter-spacing:.04em}
.tip .quip{margin-top:8px;color:var(--pale);font-size:11.5px;font-style:italic}

/* hud */
.hud{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,var(--void2),var(--void))}
.card{border:1px solid var(--hair);background:rgba(255,255,255,.015);padding:12px 14px;position:relative}
.card::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:2px solid var(--red);border-left:2px solid var(--red)}
.card h2{margin:0 0 10px;font-size:11px;letter-spacing:.16em;font-weight:600;font-family:var(--mono)}
.card h2 small{display:block;color:var(--muted);letter-spacing:.04em;font-weight:400;margin-top:2px}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.crew button{background:transparent;border:1px solid var(--hair);padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:border-color .2s,background .2s}
.crew button:hover,.crew button.on{border-color:var(--red);background:rgba(255,43,51,.12)}
.crew canvas{width:72px;height:72px;border-radius:50%;border:2px solid var(--hair);background:radial-gradient(circle at 50% 40%,rgba(255,43,51,.14),rgba(11,7,9,.9) 70%)}
.crew button.on canvas{border-color:var(--red);box-shadow:0 0 16px rgba(255,43,51,.55)}
.crew b{font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.crew i{font-style:normal;font-size:9.5px;color:var(--muted);line-height:1.25}
.board .p{display:grid;grid-template-columns:62px 1fr 56px;gap:8px;align-items:center;margin:6px 0;font-family:var(--mono);font-size:11.5px}
.board .bar{height:14px;background:rgba(255,255,255,.04);position:relative;overflow:hidden}
.board .bar i{position:absolute;inset:0 auto 0 0;transition:width 1.2s var(--ease);box-shadow:0 0 10px currentColor}
.board .pct{text-align:right;font-weight:600}
.board .seats{grid-column:2/4;font-size:10px;color:var(--muted);margin-top:-4px}
.stats{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.ring{position:relative;width:120px;height:120px}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring .track{stroke:var(--hair)}
.ring .fill{stroke:var(--red);stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.4s var(--ease);filter:drop-shadow(0 0 6px var(--red))}
.ringlabel{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ringlabel strong{font-size:24px}
.ringlabel em{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--muted);max-width:80px}
.stats dl{margin:0;display:grid;gap:8px}
.stats dt{font-size:10px;color:var(--muted);font-family:var(--mono);letter-spacing:.04em}
.stats dd{margin:0;font-size:16px;font-weight:600}
.detail.muted{color:var(--muted);font-size:12.5px}
.detail h3{margin:0;font-size:16px}
.detail .meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin:2px 0 10px}
.close{margin:0;padding:0;list-style:none;font-size:12px;counter-reset:c}
.close li{display:grid;grid-template-columns:22px 1fr auto;gap:6px;padding:6px 0;border-bottom:1px dashed var(--hair);cursor:pointer;counter-increment:c}
.close li::before{content:counter(c,decimal-leading-zero);font-family:var(--mono);color:var(--red);font-size:10.5px}
.close li:hover{color:#fff}
.close .gap{font-family:var(--mono);font-size:11px;color:var(--pale)}
.close .vs{grid-column:2/4;font-family:var(--mono);font-size:10px;color:var(--muted)}
.mini .p{display:grid;grid-template-columns:1fr 50px;gap:6px;margin:3px 0;font-family:var(--mono);font-size:11px;align-items:center}
.mini .nm{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .nm i{width:9px;height:9px;flex:none}
.mini .pct{text-align:right}
.mini .bar{grid-column:1/3;height:3px;background:rgba(255,255,255,.05)}
.mini .bar b{display:block;height:100%}

.legal{border-top:1px solid var(--hair);padding:12px 20px;font-size:11.5px;color:var(--muted);line-height:1.55;background:#090507}
.legal p{margin:0 0 4px;max-width:1200px}
.legal .by{font-family:var(--mono);font-size:10.5px}
.legal .by a{text-decoration:none;color:var(--ink)}

@media (max-width:1250px){.tools{top:54px}.crumbs{top:96px}}
@media (max-width:980px){
  .stage{grid-template-columns:1fr}
  .mapwrap{min-height:76vh;border-right:0;border-bottom:1px solid var(--hair)}
  .bot{max-width:94%}
  .bubble{min-width:0}
  .legend{display:none}
  .tools{top:auto;bottom:26px;left:14px;right:auto;flex-direction:column;align-items:flex-start}
  .crew i{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
