/* Global + hub styles. Palette: night #07050d, dust #e8935a, rust #b4492a, cream #ffe9cf, sky #7fd4ff */
:root{--night:#07050d;--dust:#e8935a;--rust:#b4492a;--cream:#ffe9cf;--sky:#7fd4ff;--font:'Fredoka','Trebuchet MS','Segoe UI Rounded',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--night);color:var(--cream);font-family:var(--font);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
#hub,#gl{position:fixed;inset:0}
#gl canvas{display:block;width:100%;height:100%;touch-action:none}
#pins{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.hud{position:fixed;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;pointer-events:none}
.hud>*{pointer-events:auto}
.hud h1{margin:0;font-weight:600;font-size:clamp(20px,3vw,30px);letter-spacing:.02em;text-shadow:0 2px 12px #000a}
#replay{justify-self:start;background:#0008;border:2px solid #ffffff30;border-radius:999px;padding:6px 14px;font-size:14px;backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
#replay:hover{background:#b4492acc;border-color:var(--dust)}
.hint{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;font-size:14px;opacity:.75;text-shadow:0 1px 6px #000;white-space:nowrap}
/* map pins: drawn buildings/machines standing on the surface point (JS sets translate+scale; art is anchored bottom-centre) */
.pin{position:absolute;left:0;top:0;width:0;height:0;padding:0;margin:0;background:none;border:0;overflow:visible;pointer-events:auto;will-change:transform;--st:#8b72b8}
.pin.active{--st:#2f9e6a}.pin.dormant{--st:#d49a3a}.pin.crashed{--st:#c24a4a}.pin.ended{--st:#6f7fb8}
.pin-art{position:absolute;left:0;bottom:-3px;display:block;width:108px;transform:translateX(-50%);transform-origin:50% 100%;transition:transform .22s cubic-bezier(.3,1.6,.5,1),filter .2s;filter:drop-shadow(0 3px 3px #0007)}
.pin.small .pin-art{width:50px}
.pin-art svg{display:block;width:100%;height:auto;overflow:visible}
.pin.small .pin-art::after{content:'';position:absolute;top:0;right:2px;width:11px;height:11px;border-radius:50%;background:var(--st);border:2px solid #150c18}
.pin.lost svg,.pin.dormant svg{filter:saturate(.6) brightness(.93)}
.pin-label{position:absolute;top:8px;left:0;transform:translateX(-50%);display:grid;justify-items:center;padding:2px 10px;border-radius:16px;background:#120a14e6;border:2px solid var(--c);font-size:13px;font-weight:500;white-space:nowrap;line-height:1.2;transition:.2s}
.pin-desc{font-size:11px;font-weight:400;opacity:0;max-height:0;overflow:hidden;transition:opacity .18s,max-height .18s}
.pin:hover .pin-desc,.pin:focus-visible .pin-desc{opacity:.85;max-height:18px}
.pin.small .pin-label{opacity:0;transform:translate(-50%,-4px)}
/* highlight on hover / keyboard focus / press */
.pin:hover .pin-art,.pin:focus-visible .pin-art,.pin:active .pin-art{transform:translateX(-50%) translateY(-7px) scale(1.12);filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff8) drop-shadow(0 0 14px var(--c))}
.pin:hover .pin-label,.pin:focus-visible .pin-label{opacity:1;transform:translate(-50%,0);background:var(--c);color:#1a0d2e}
.pin:focus-visible{outline:none}
/* drawing parts */
.o{stroke:#2a1d33;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.pad{fill:#000;opacity:.3;transition:.2s}.pin:hover .pad,.pin:focus-visible .pad{fill:var(--c);opacity:.7}
.lit{fill:#7fd4ff;transition:fill .2s}.lit.warm{fill:#ffcf6b}
.pin:hover .lit,.pin:focus-visible .lit{fill:#fffbd0;filter:drop-shadow(0 0 3px #fff)}
.accent{fill:var(--c)}
.neon{animation:neon 2.4s ease-in-out infinite}
.blink{animation:blink 1.6s steps(2,jump-none) infinite}
.twinkle{animation:twinkle 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.wave{opacity:0;stroke-dasharray:3 5}.pin:hover .wave,.pin:focus-visible .wave{opacity:1;animation:wave 1s linear infinite}
.drone{transform-box:fill-box;transform-origin:center;animation:bob 1.8s ease-in-out infinite}
.panel-art{display:inline-block;width:64px;margin-right:10px;vertical-align:middle}.panel-art svg{display:block;width:100%}
@keyframes neon{50%{opacity:.6}}@keyframes blink{50%{opacity:.25}}@keyframes twinkle{50%{opacity:.35;transform:scale(.7)}}
@keyframes wave{to{stroke-dashoffset:-16}}@keyframes bob{50%{transform:translateY(-3px)}}
/* zone panel */
#panel{position:fixed;right:16px;bottom:16px;top:70px;width:min(400px,calc(100% - 32px));padding:22px;border-radius:24px;background:#150c18f0;border:2px solid #ffffff22;overflow:auto;transform:translateX(110%);transition:transform .35s cubic-bezier(.2,.9,.3,1);backdrop-filter:blur(10px)}
#panel.open{transform:none}
#panel h2{margin:10px 0 4px;font-size:26px}
#panel .tag{margin:0 0 16px;opacity:.8}
#panel .x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:#ffffff18}
.badge{display:inline-block;padding:2px 12px;border-radius:999px;font-size:13px;background:#ffffff18}
.badge.active{background:#2f9e6a}.badge.dormant{background:#b8842b}.badge.lost{background:#6b5a8a}.badge.crashed{background:#a43a3a}.badge.base{background:#2b6cb0}.badge.ended{background:#4b5b8a}.badge.exhibit{background:#3f6fd1}.badge+.badge{margin-left:6px}
.todo{padding:14px 16px;border-radius:16px;background:#ffffff0f;border:2px dashed #ffffff33;font-size:14px;line-height:1.5}
.todo b{color:var(--dust)}.todo ul{margin:8px 0 0;padding-left:20px}
/* zone panel: program chip + memorial site cards (js/features/memorial-sites.js) */
.grp{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;background:#ffffff16;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.mem .mem-chips{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.mem .mem-kind{background:#ffffff18;border-color:#ffffff2a}
.mem-loc{margin:0 0 10px;font-size:13px;opacity:.7}
.mem-exhibit{margin:0 0 12px;padding:8px 10px;border:1px dashed #7fd4ff66;border-radius:10px;font-size:13px;line-height:1.45;background:#7fd4ff10}
.mem-sum{margin:0 0 14px;line-height:1.5}
.mem h3{margin:16px 0 6px;font-size:15px;letter-spacing:.05em;text-transform:uppercase;opacity:.8}
.mem-facts,.mem-relics{margin:0;padding-left:18px;font-size:14px;line-height:1.55}
.mem-facts li,.mem-relics li{margin-bottom:6px}
.mem-facts a{color:var(--sky)}
.mem-todo{font-size:11px;opacity:.5;white-space:nowrap}
.mem-story{margin:0;padding:10px 12px;border-left:3px solid var(--dust);border-radius:0 10px 10px 0;background:#ffffff0c;font-style:italic;line-height:1.6}
.mem-draft{margin:14px 0 0;font-size:12px;opacity:.6}
.mem .dg-btn.big{width:100%;margin-top:16px}
.mem-load{opacity:.7}
#loader{position:fixed;inset:0;display:grid;place-items:center;background:var(--night);z-index:40;transition:opacity .6s}
#loader[hidden]{display:none}#loader.done{opacity:0;pointer-events:none}
@media(max-width:600px){.pin-art{width:84px}.pin.small .pin-art{width:42px}.hint{font-size:12px}#panel{top:auto;height:55%;right:8px;left:8px;width:auto}.hud h1{display:none}}
@media(prefers-reduced-motion:reduce){.blink,.twinkle,.drone,.wave,.neon{animation:none!important}.pin-art{transition:none}}