:root{color-scheme:dark;--bg:#03070a;--line:#173038;--ink:#cfe6e2;--dim:#71908f;--friend:#3fe0bd;--friend2:#9af6df;--hostile:#ff5a4f;--amber:#ffb547;
  --op-economy:#3fe0bd;--op-remote:#6fd3ff;--op-reserve:#b7a6ff;--op-build:#ffa94d;--op-defense:#3fe0bd;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:12px/1.35 var(--mono)}
body{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh}
.dim{color:var(--dim)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);background:linear-gradient(#071118,#050c10)}
.bar h1{margin:0;font-size:13px;font-weight:500;letter-spacing:.12em;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar strong{color:var(--friend2);font-weight:700}
.sigil{width:14px;height:14px;flex:none;border:1px solid var(--friend);border-radius:50%;position:relative}.sigil:after{content:"";position:absolute;left:6px;top:-1px;width:1px;height:7px;background:var(--friend)}
#updated{white-space:nowrap;letter-spacing:.08em}
.bar-right{display:flex;align-items:center;gap:14px;min-width:0}
.signin{position:relative}
.signin summary{list-style:none;cursor:pointer;padding:4px 10px;border:1px solid var(--friend);border-radius:4px;color:var(--friend2);letter-spacing:.1em;white-space:nowrap}
.signin summary::-webkit-details-marker{display:none}
.signin summary:hover,.signin[open] summary{background:rgba(63,224,189,.12)}
.signin summary:focus-visible{outline:2px solid var(--friend2);outline-offset:2px}
.signin-form{position:absolute;right:0;top:calc(100% + 8px);z-index:10;width:min(280px,calc(100vw - 20px));display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:6px;background:#061117;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.signin-form p{margin:0 0 6px}
.signin-form input{width:100%;padding:8px;border:1px solid var(--line);border-radius:4px;background:#03080b;color:var(--ink);font:inherit}
.signin-form input:focus-visible{outline:2px solid var(--friend);border-color:transparent}
.signin-form button{margin-top:8px;padding:8px;border:1px solid var(--friend);border-radius:4px;background:rgba(63,224,189,.12);color:var(--friend2);font:inherit;letter-spacing:.1em;cursor:pointer}
.signin-form button:hover{background:rgba(63,224,189,.22)}
.main{container-type:size;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#06141a 0,#03080b 70%)}
.stage{position:relative;width:min(100cqw,100cqh);height:min(100cqw,100cqh)}
#terrain,#map{position:absolute;inset:0;width:100%;height:100%;display:block}
#terrain{image-rendering:pixelated}
#map{touch-action:none;cursor:grab}#map:active{cursor:grabbing}
.zoom{position:absolute;right:8px;bottom:8px;display:grid;gap:4px;z-index:2}.zoom[hidden]{display:none}
.zoom button{width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:4px;background:rgba(6,17,23,.88);color:var(--friend2);font:15px/1 var(--mono);cursor:pointer}
.zoom button:hover:not(:disabled){border-color:var(--friend)}.zoom button:disabled{opacity:.35;cursor:default}
.zoom button:focus-visible{outline:2px solid var(--friend2);outline-offset:1px}
.empty{position:absolute;left:50%;top:40%;transform:translateX(-50%);margin:0;padding:14px 18px;border:1px solid var(--line);background:#061117}
.empty[hidden]{display:none}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:6px 14px;border-top:1px solid var(--line);background:#050c10;color:var(--dim)}
.foot p{margin:0}.readout{color:var(--ink);min-height:1.35em}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px}.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border:1.5px solid currentColor;display:inline-block}
.lg-own{color:var(--friend)}.lg-res{color:var(--friend);border-style:dashed!important}.lg-foreign{color:var(--hostile)}.lg-npc{color:var(--amber)}.lg-hw{color:#3a6170}
.lg-remote{color:var(--op-remote)}.lg-reserve{color:var(--op-reserve)}.lg-build{color:var(--op-build)}

/* Map (viewBox units: a room is 50) */
#map text{font-family:var(--mono);fill:var(--ink);paint-order:stroke;stroke:#020507;stroke-width:2.5px;stroke-linejoin:round}
.grid-lines{fill:none;stroke:#1a3a40;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.65}
.range-ring{fill:none;stroke:#1f5a55;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:2 5;opacity:.6}
.hw{fill:#0c1d22;opacity:.35}
.lbl{font-size:10px;fill:#9fbab8!important}.lbl.key{fill:var(--friend2)!important;font-weight:700}
.rcl{font-size:11px;font-weight:700;fill:var(--friend)!important}
.owner{font-size:7.5px;fill:#ffb2ab!important}
.rname{display:none;font-size:7px;fill:#5f8583!important}.rtype{font-size:6px;letter-spacing:.08em;fill:#4a6d6b!important}
#map.zoomed .rname{display:inline}#map:not(.deep) .rtype{display:none}
.terr-own{fill:rgba(63,224,189,.1);stroke:var(--friend);stroke-width:1.6;vector-effect:non-scaling-stroke}
.terr-res{fill:rgba(63,224,189,.04);stroke:var(--friend);stroke-width:1.2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.terr-res.foreign{stroke:var(--amber);fill:rgba(255,181,71,.05)}
.th-hostile{fill:url(#hatch-red);stroke:rgba(255,90,79,.75);stroke-width:1.2;vector-effect:non-scaling-stroke}
.th-npc{fill:none;stroke:var(--amber);stroke-width:1.2;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.hatch-red{stroke:rgba(255,90,79,.22);stroke-width:1.4}
.bezel{fill:none;stroke:#11302f;stroke-width:1;vector-effect:non-scaling-stroke}
.bezel-tick{stroke:#1e4c47;stroke-width:1;vector-effect:non-scaling-stroke}
.compass{font-size:12px;letter-spacing:.1em;fill:#3f8c80!important}
.vec{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:7 5;animation:march 1.6s linear infinite;opacity:.92}
@keyframes march{to{stroke-dashoffset:-24}}
.vec-head{stroke:none}
.op-economy{stroke:var(--op-economy);fill:var(--op-economy)}.op-remote{stroke:var(--op-remote);fill:var(--op-remote)}.op-reserve{stroke:var(--op-reserve);fill:var(--op-reserve)}
.op-build{stroke:var(--op-build);fill:var(--op-build)}.op-defense{stroke:var(--op-defense);fill:var(--op-defense)}
path.vec{fill:none}
.sweep-arm{stroke:#62ffd5;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.55}
.sweep-trail{fill:#3fffc8}
.home-dot{fill:var(--friend2)}
.beacon-ring{fill:none;stroke:var(--friend2);stroke-width:1.4;vector-effect:non-scaling-stroke}.beacon-ring.outer{stroke:var(--friend);opacity:.6}
.beacon-label{font-size:9px;letter-spacing:.14em;fill:var(--friend2)!important;font-weight:700}
.pulse{animation:pulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
.select-box{fill:none;stroke:var(--friend2);stroke-width:1.6;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:reduce){.vec,.pulse{animation:none}.pulse{opacity:.8}}
@media (max-width:600px){.bar{padding:6px 10px}.bar-right{gap:8px}#updated{display:none}.bar h1{font-size:11px;letter-spacing:.06em}.foot{font-size:10.5px}}