:root{color-scheme:dark;--ink:#060b16;--aqua:#a8e8df;--gold:#e9c890;--muted:#adc1bf}
*{box-sizing:border-box}html,body{height:100%;margin:0;overscroll-behavior:none;background:var(--ink);font-family:system-ui,"Segoe UI",sans-serif;color:#f8e7c6}
button,a{color:inherit;font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
a{text-decoration:none}button{border:0}
[hidden]{display:none!important}
.world{height:100dvh;min-height:500px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 50%,#16253a,#080d19 69%,#040713)}
#universeCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;z-index:1}
#universeCanvas.dragging{cursor:grabbing}
.shade{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 46%,transparent 20%,#0408107a 100%)}
.hud-header{position:absolute;z-index:5;left:0;right:0;top:0;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:linear-gradient(#07101dcb,#07101d00)}
.brand{font:27px Georgia,serif;letter-spacing:.08em;white-space:nowrap;color:var(--gold)}
.brand span{font:700 13px system-ui;letter-spacing:.15em;vertical-align:middle}
.path{font:11px Georgia,serif;letter-spacing:.13em;text-align:center;color:#bcd7d1}
.top-links{display:flex;gap:6px}
.top-links a{padding:10px 12px;border:1px solid #a2d7cd5e;border-radius:10px;background:#1326369c;font-size:10px;letter-spacing:.08em;white-space:nowrap}
.top-links a:hover{border-color:#b9f4e9}
.map-toolbar{position:absolute;z-index:6;top:86px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:15px;border:1px solid #d8bc9659;background:#0b1726c9;backdrop-filter:blur(10px);max-width:calc(100% - 25px)}
.map-toolbar button{border-radius:10px;padding:11px 14px;white-space:nowrap;font:700 10px system-ui;letter-spacing:.08em;background:transparent;color:#b1bebe}
.map-toolbar button.current{color:#152632;background:#ead1a2}
.time{position:absolute;top:146px;left:22px;z-index:4;display:flex;flex-direction:column;gap:7px;align-items:flex-start;background:#091a28a6;border:1px solid #aedcd351;padding:12px 14px;border-radius:13px;backdrop-filter:blur(9px);min-width:165px}
.time-kicker{font:9px system-ui;letter-spacing:.12em;color:#b2ded4;display:flex;gap:7px;align-items:center}
.live-dot{height:6px;width:6px;border-radius:50%;background:#abf7bf;box-shadow:0 0 10px #abf7bf}
.time strong{font:21px Georgia,serif;letter-spacing:.07em}
.time>span:not(.time-kicker){font:10px system-ui;letter-spacing:.06em;color:#c7cfbd}
.time .time-date{opacity:.67}
.overview-caption{position:absolute;top:149px;left:50%;transform:translateX(-50%);z-index:4;text-align:center;white-space:nowrap;letter-spacing:.14em;font:10px system-ui;color:#e0d1b5;text-shadow:0 0 18px #000b}
.map-nav{position:absolute;right:22px;top:150px;z-index:5;display:flex;flex-direction:column;gap:7px}
.map-nav button{width:45px;height:45px;border-radius:13px;border:1px solid #b8e1d36d;background:#112635c9;font-size:24px}
.map-nav button:hover{background:#214e4e}
.map-hint{position:absolute;z-index:3;left:50%;bottom:116px;transform:translateX(-50%);font-size:9px;white-space:nowrap;letter-spacing:.12em;color:#9ac3bf;text-shadow:0 0 15px #000}
.focus-panel{position:absolute;z-index:6;left:20px;bottom:148px;width:min(350px,calc(100vw - 40px));min-height:170px;max-height:min(47vh,390px);overflow:auto;padding:17px;background:#0a1828e8;border:1px solid #d7c28a80;border-radius:17px;box-shadow:0 15px 50px #0009;backdrop-filter:blur(18px)}
.focus-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.focus-top span{font:700 9px system-ui;letter-spacing:.17em;color:#a9e0d6}
.focus-top button{background:transparent;color:#bfdfd7;padding:3px 7px;font-size:18px}
.focus-panel h1{margin:9px 0;font:clamp(24px,4vw,36px)/1.15 Georgia,serif;color:#f3deb4}
.focus-panel p{margin:0;font:13px/1.55 Georgia,serif;color:#c5d6d0}
.focus-meta{font:10px/1.5 system-ui;letter-spacing:.09em;color:#e9be8d;margin-top:11px}
.focus-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.focus-actions button,.focus-actions a{padding:11px 12px;border-radius:10px;background:#ddc390;color:#172b35;font:800 10px system-ui;letter-spacing:.09em;border:1px solid #ead3a6}
.focus-actions .secondary{background:#173342;color:#c3f3e4;border-color:#8bdbc1}
.level-list{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;margin-top:14px}
.level-list button{aspect-ratio:1;display:grid;place-items:center;border-radius:7px;border:1px solid #91bbae66;background:#183544a0;font:10px system-ui}
.level-list button.active{border-color:#e9d09b;background:#72603f;color:#fff2c7}
.lower-bar{position:absolute;z-index:6;left:17px;right:17px;bottom:41px;min-height:66px;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 15px;border-radius:17px;border:1px solid #bad1bc4d;background:#0a1a27e0;backdrop-filter:blur(14px)}
.unification{display:flex;flex-direction:column;gap:6px}.unification>div{font-size:12px;font-weight:700;letter-spacing:.08em}.unification strong{font:19px Georgia,serif;color:#e9d1a3;padding-left:9px}
.unification small{font-size:9px;color:#9ec8bc}.accent{color:#b9f5d0;font-size:18px}
.inventory-preview{display:flex;gap:14px;color:#d4e4d5;font-size:12px;white-space:nowrap}
.inventory-preview span{display:flex;align-items:center;gap:5px}.inventory-preview b{font:18px Georgia,serif;color:#ead4a5}
#openSystems{padding:13px 15px;border-radius:12px;border:1px solid #bddcba96;background:#1b3e43;color:#d4f8e4;font-size:10px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
#openSystems span{margin-left:7px}
.footer{position:absolute;z-index:3;bottom:10px;left:16px;right:16px;display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:.07em;color:#94a8ab}
.drawer{position:absolute;z-index:15;inset:0;background:#030812c9;display:flex;justify-content:flex-end}
.drawer-content{width:min(560px,100%);background:radial-gradient(ellipse at 80% 0%,#203743,#07101c 75%);border-left:1px solid #c9d9b67e;display:flex;flex-direction:column;padding:24px;gap:19px;box-shadow:-30px 0 80px #0009;overflow:auto}
.drawer-header{display:flex;align-items:flex-start;justify-content:space-between}.drawer-header small{font-size:10px;letter-spacing:.18em;color:#acd6c9}
.drawer-header h2{font:31px Georgia,serif;margin:7px 0}.drawer-header>button{width:41px;height:41px;background:#1a303a;border:1px solid #b4dacc55;border-radius:11px;font-size:21px}
.drawer-tabs{display:flex;gap:7px;flex-wrap:wrap}
.drawer-tabs button{font-size:10px;padding:10px;border:1px solid #9abeba70;border-radius:10px;background:#152e3b;color:#b3c8c6}
.drawer-tabs button.selected{background:#e8d09e;color:#182733;border-color:#f0daa8}
.drawer-panel{display:flex;flex-direction:column;gap:12px}
.drawer-panel h3{font:24px Georgia,serif;margin:8px 0 2px}
.drawer-panel p{font:13px/1.65 system-ui;color:#b2cac8;margin:3px 0}
.drawer-panel .entry{padding:15px 14px;border:1px solid #9fb7ae54;background:#142838a6;border-radius:13px;display:flex;flex-direction:column;gap:7px}
.drawer-panel .entry strong{font:17px Georgia,serif;color:#f6e0b6}
.drawer-panel .entry em{font:12px/1.5 system-ui;color:#bad2ce;font-style:normal}
.drawer-panel .entry button,.drawer-panel .entry a{align-self:flex-start;padding:9px 12px;border-radius:10px;background:#d4b984;color:#172833;font-size:11px;font-weight:800;margin-top:4px}
.drawer-panel .entry button:disabled{opacity:.45;cursor:not-allowed}
.drawer-panel .resource-line{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.drawer-panel .resource-line b{font:20px Georgia,serif;color:#e8cc9c}
.drawer-panel .note{padding:12px;border-left:2px solid #9ed9ca;color:#d5dfd2;background:#162c34a9;font:12px/1.6 system-ui}
.drawer-foot{font:10px/1.5 system-ui;color:#a6bcb9;margin:auto 0 0}
.toast{position:absolute;z-index:30;left:50%;top:66px;transform:translate(-50%,-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;padding:12px 15px;border:1px solid #e3ce9d90;border-radius:12px;background:#112e35e9;color:#fff0c5;font-size:11px;text-align:center;min-width:170px}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:820px){.hud-header{padding:13px}.brand{font-size:22px}.brand span{font-size:10px}.top-links a{padding:9px 8px;font-size:9px}
.path{display:none}.map-toolbar{top:68px}.time{top:130px;left:9px;padding:10px;min-width:115px}.time strong{font-size:16px}.map-nav{right:9px;top:137px}.map-nav button{width:36px;height:36px}.overview-caption{display:none}
.focus-panel{left:9px;bottom:111px;padding:12px;width:min(330px,calc(100vw - 18px));max-height:34dvh;min-height:0}
.focus-panel h1{font-size:23px}.focus-panel p{font-size:12px}.focus-meta{font-size:9px}.focus-actions{margin-top:9px}.focus-actions button,.focus-actions a{padding:9px;font-size:9px}
.map-hint{bottom:94px;font-size:8px}
.lower-bar{bottom:27px;left:8px;right:8px;padding:8px 10px;min-height:63px;gap:7px}.unification small{display:none}.unification>div{font-size:9px}.unification strong{font-size:14px}
.inventory-preview{gap:7px;font-size:10px}.inventory-preview b{font-size:15px}#openSystems{padding:10px;font-size:9px}
.footer{bottom:6px;left:10px;right:10px;font-size:7px}.footer span:last-child{display:none}
.drawer-content{padding:17px}.drawer-header h2{font-size:27px}}
@media(max-width:450px){.top-links a span{display:none}.top-links a{font-size:16px;padding:6px 9px}.brand span{font-size:10px}
.map-toolbar{gap:0;width:calc(100% - 12px);justify-content:space-evenly}.map-toolbar button{font-size:8px;letter-spacing:0;padding:10px 7px}
.time{top:122px;font-size:9px;min-width:100px}.time strong{font-size:15px}
.map-nav{top:122px}.map-hint{bottom:99px;font-size:7px;max-width:100%;text-align:center}
.focus-panel{bottom:107px;max-height:31dvh}
.lower-bar{bottom:26px}.inventory-preview span:nth-child(3){display:none}#openSystems{font-size:8px;max-width:115px;white-space:normal;line-height:1.4}
.unification>div{max-width:130px}.footer{font-size:6px}
}
@media(prefers-reduced-motion:reduce){.orb{animation:none}.toast{transition:none}}