/* Colony command screen: the scene is the primary control surface. */
.shell{max-width:1920px;padding:12px 18px}.top{margin-bottom:10px;padding-bottom:9px}.brand{font-size:17px}.brand small{font-size:9px}.resources{gap:5px;margin-bottom:10px}.resource{padding:6px 9px}.resource span{font-size:10px}.resource strong{font-size:15px}.resource em{font-size:10px}.layout{grid-template-columns:172px minmax(0,1fr) 268px;gap:10px}.main{padding:12px;min-width:0}.aside{padding:15px}.nav{padding:8px}.nav button{padding:11px}.nav h4{margin:12px 9px}.heading{margin:0 0 7px}.heading h1{font-size:20px}.planet-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.planet-head .heading{margin:0}.planet-head .toolbar{align-items:center}.planet-head select{padding:6px;font-size:12px}.planet-head .heading .sub{font-size:12px}.planet-head .tag{display:none}
.colony-world{position:relative;isolation:isolate;height:min(68vh,670px);min-height:470px;border:1px solid color-mix(in srgb,var(--lit) 60%,#344a5e);background:#102431;border-radius:7px;overflow:hidden;box-shadow:0 0 0 3px #05111b,0 22px 55px #000a,inset 0 0 100px #030b13}
.colony-world:before{content:"";position:absolute;inset:0 0 48% 0;background:linear-gradient(#09233855,#1d354784 70%,#162d3b),var(--scene-image) center 33%/cover;opacity:.72;filter:saturate(.8);pointer-events:none}
.colony-world.race-Imperium{--scene-image:url('assets/imperium_colony.webp')}.colony-world.race-Synthetics{--scene-image:url('assets/synthetics_colony.webp')}.colony-world.race-Swarms{--scene-image:url('assets/swarms_colony.webp')}.colony-world.race-Archons{--scene-image:url('assets/archons_colony.webp')}.colony-world.race-Nomads{--scene-image:url('assets/nomads_colony.webp')}.colony-world.race-Parasites{--scene-image:url('assets/parasites_colony.webp')}
.colony-world:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 42%,transparent 36%,#02101cbb 100%)}
.world-map{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}.world-hud{position:absolute;z-index:3;top:17px;left:21px;pointer-events:none;text-shadow:0 2px 9px #000,0 2px 18px #000}.world-hud span{display:block;color:var(--lit);font-size:10px;font-weight:800;letter-spacing:.19em}.world-hud strong{display:block;font-size:24px;letter-spacing:.02em}.world-hud small{color:#d3e4e7;font-size:11px}.world-legend{position:absolute;z-index:3;right:14px;bottom:12px;display:flex;align-items:center;gap:6px;color:#c5d8e3;font-size:10px;background:#061a26dd;border:1px solid #63839388;padding:6px 9px}.legend-lit,.legend-empty{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lit);box-shadow:0 0 8px var(--lit)}.legend-empty{background:transparent;border:1px solid #adbdc8;box-shadow:none;margin-left:9px}
.world-activity{position:absolute;z-index:1;inset:0;pointer-events:none}.activity-dot{position:absolute;border-radius:50%;width:3px;height:3px;background:var(--lit);box-shadow:0 0 10px 4px var(--lit);opacity:.6;animation:drift 18s ease-in-out infinite}.activity-dot.a{left:28%;top:58%}.activity-dot.b{left:53%;top:72%;animation-delay:-7s}.activity-dot.c{left:81%;top:55%;animation-delay:-12s}@keyframes drift{50%{transform:translate(75px,-12px);opacity:1}}
.world-map .main-road{fill:none;stroke:#8497a3;stroke-opacity:.17;stroke-width:28;stroke-linecap:round}.world-map .road-light{fill:none;stroke:#a1edf4;stroke-opacity:.22;stroke-width:2;stroke-dasharray:12 14}.world-map .ridge{fill:none;stroke:#ccbcaa;stroke-opacity:.25;stroke-width:6}.world-map .base-lights circle{fill:var(--lit);opacity:.6;filter:drop-shadow(0 0 6px var(--lit))}
.site{cursor:pointer;outline:none;transition:filter .2s}.site .site-shadow{fill:#020b12a8;filter:blur(9px)}.site .site-pad{fill:#21384b;stroke:#7eabb8;stroke-width:3;transition:fill .2s,stroke .2s}.site .site-edge{fill:none;stroke:#91b6c1;stroke-width:4;opacity:.65}.site .structure{filter:drop-shadow(0 5px 4px #020912);transform-box:fill-box;transform-origin:center bottom;transform:scale(calc(.83 + var(--tier)*.035));transition:transform .25s}.site .structure>path{stroke-opacity:.8}.site .power-pulse{fill:var(--lit);filter:drop-shadow(0 0 8px var(--lit));animation:power 3.4s ease-in-out infinite}.site .upgrade-wing{fill:var(--dark);stroke:var(--trim);stroke-width:2}.site .foundation{fill:none;stroke:#9ab4bc;stroke-width:2;opacity:.9}.site.unbuilt .site-pad{fill:#24394a88;stroke:#638496;stroke-dasharray:6 4}.site.unbuilt .site-caption{opacity:.83}.site .site-caption rect{fill:#061520ed;stroke:#7d9bab;stroke-width:1}.site .site-caption text{font-family:Inter,system-ui,Arial,sans-serif;paint-order:stroke;stroke:none;fill:#f2f8fb}.site .site-name{font-size:10px;font-weight:700}.site .site-level{font-size:9px;fill:var(--lit)!important}.site:hover,.site:focus-visible,.site.selected{filter:drop-shadow(0 0 12px var(--lit))}.site:hover .site-pad,.site:focus-visible .site-pad,.site.selected .site-pad{fill:#2d5361;stroke:var(--lit)}.site:hover .structure,.site:focus-visible .structure,.site.selected .structure{transform:translateY(-6px) scale(calc(.86 + var(--tier)*.035))}.site.selected .site-caption rect{stroke:var(--lit);stroke-width:2}.site .construction-ring{stroke:var(--lit);stroke-width:3;stroke-dasharray:10 8;filter:drop-shadow(0 0 5px var(--lit));animation:construction 8s linear infinite}@keyframes construction{to{stroke-dashoffset:-108}}@keyframes power{50%{opacity:.3;transform:scale(1.4)}}
.build-focus{margin:9px 0 0;padding:13px 16px;border:1px solid color-mix(in srgb,var(--accent) 48%,#465362);border-left:3px solid var(--accent);background:linear-gradient(90deg,#152e3b,#0c1d2b);box-shadow:inset 0 1px #ffffff16;display:grid;grid-template-columns:minmax(185px,1fr) minmax(230px,1.7fr) auto;gap:16px;align-items:center}.build-focus h2{font-size:16px;margin:3px 0}.build-focus .focus-status{color:#95deda;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.build-focus .focus-effect{font-size:12px;line-height:1.5;color:#d8e7ed}.build-focus .focus-cost{font-size:11px;color:#adc7d7;line-height:1.6}.build-focus .focus-actions{text-align:right}.build-focus .focus-actions .btn{display:block;width:100%;margin:5px 0}.build-focus .focus-actions small{display:block;color:#acbcc9}.build-focus .focus-actions .btn:disabled{opacity:.55}.build-focus p{margin:3px 0;color:#aec0cc;font-size:11px}
.infra-disclosure{margin-top:10px;padding:0;border:1px solid #4e6f8170;background:#0d202de0}.infra-disclosure summary{list-style:none;cursor:pointer;padding:10px 13px;color:#d8e8f0;font-size:12px;font-weight:700;letter-spacing:.03em}.infra-disclosure summary::-webkit-details-marker{display:none}.infra-disclosure summary:before{content:'▸';color:var(--accent);margin-right:8px}.infra-disclosure[open] summary:before{content:'▾'}.infra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:6px;padding:0 10px 12px}.infra-item{border:1px solid #50728870;background:#193342;padding:8px;color:#dceef2;text-align:left;border-radius:4px;font-size:11px}.infra-item:hover,.infra-item.active{border-color:var(--accent);background:#225166}.infra-item span{float:right;color:var(--accent)}
.aside .section{margin-top:17px;border-top:1px solid #61829a56;padding-top:13px}.aside h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase}.aside .hint,.aside .report{line-height:1.45}.aside .report{max-height:72px;overflow:hidden}.queue span{float:none;display:block;margin:3px 0}.queue .statbar{margin-top:7px}.queue b{display:block}.queue{padding:8px}.queue .mini{opacity:.75}
@media(max-width:1180px){.layout{grid-template-columns:155px minmax(0,1fr)}.aside{grid-column:2}.colony-world{height:min(62vh,600px)}.build-focus{grid-template-columns:1fr 1.5fr}.build-focus .focus-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px}.build-focus .focus-actions .btn{max-width:230px}}
@media(max-width:700px){.shell{padding:7px}.top{padding:6px}.resources{display:flex;overflow-x:auto;scrollbar-width:thin}.resource{min-width:124px}.layout{display:block}.nav{position:static;display:flex;overflow-x:auto;padding:4px;margin-bottom:8px}.nav button{min-width:84px}.main,.aside{padding:9px;margin-bottom:8px}.planet-head .heading h1{font-size:16px}.colony-world{height:480px;min-height:0;overflow-x:auto}.world-map{width:850px;max-width:none}.world-legend{position:sticky;left:60%;width:max-content;top:447px;bottom:auto}.build-focus{display:block;padding:11px}.build-focus>div{margin:8px 0}.build-focus .focus-actions{display:flex;align-items:center}.world-hud{left:11px;top:10px}.world-hud strong{font-size:18px}.world-hud small{display:none}.infra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.aside{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.activity-dot,.power-pulse,.construction-ring{animation:none!important}.site,.site .structure{transition:none}}

.colony-world.race-Synthetics{--terrain-top:#35535a;--terrain-mid:#24444c;--terrain-bottom:#122f39}
.colony-world.race-Swarms{--terrain-top:#4a5140;--terrain-mid:#34483a;--terrain-bottom:#182c2b}
.colony-world.race-Archons{--terrain-top:#45405e;--terrain-mid:#2d3455;--terrain-bottom:#181f3b}
.colony-world.race-Nomads{--terrain-top:#5a4a40;--terrain-mid:#453e3c;--terrain-bottom:#262d35}
.colony-world.race-Parasites{--terrain-top:#51414b;--terrain-mid:#3e3346;--terrain-bottom:#28203b}
.world-swipe{display:none}
@media(max-width:700px){.world-swipe{display:block;position:absolute;z-index:3;right:7px;top:9px;background:#071b2acc;border:1px solid #789bab99;padding:4px 6px;color:#d4ebf2;font-size:9px;pointer-events:none}}

.colony-world:before{inset:0;background:linear-gradient(180deg,#09233822 0%,#172b3b70 45%,#102431dd 100%),var(--scene-image) center/cover;opacity:.6;filter:saturate(.7) blur(1px)}

/* Native SVG viewports keep atlas regions stable in Chrome, Firefox and Safari. */
.site .structure,.site:hover .structure,.site.selected .structure,.site:focus-visible .structure{transform:none;filter:none}
.site .building-sprite{overflow:hidden;pointer-events:none;filter:drop-shadow(0 5px 4px #030b12)}
.site.stage-1 .building-sprite{filter:saturate(.8) brightness(.95) drop-shadow(0 5px 4px #030b12)}
.site.stage-4 .building-sprite,.site.stage-5 .building-sprite{filter:drop-shadow(0 5px 4px #030b12) drop-shadow(0 0 4px var(--lit))}
svg.unit-portrait{display:block;width:100%;height:100%;background:none;overflow:hidden;filter:none!important}
.unit-open{padding:4px;cursor:pointer;color:inherit;border-radius:8px;transition:border-color .2s,box-shadow .2s}
.unit-open:hover,.unit-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.card-head .unit-open{width:88px;height:104px}
.dossier-panel{max-width:760px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--accent) 17%,#0b1a27),#071420 70%);border-top:3px solid var(--accent)}
.dossier-panel>h2{font-size:24px;letter-spacing:.04em;margin-bottom:16px}
.dossier-head{display:flex;align-items:center;gap:22px;border-bottom:1px solid #6c92a655;padding-bottom:16px}
.dossier-portrait{width:150px;height:188px;flex:none;background:#020b12;border:1px solid var(--accent);padding:5px;box-shadow:0 0 25px #010810}
.dossier-kicker{font-size:10px;letter-spacing:.15em;color:var(--accent)}.dossier-head h3{font-size:22px;margin:9px 0}.dossier-panel .dossier-motto{font-style:italic;color:var(--accent);font-size:13px}.dossier-panel p{font-size:13px;line-height:1.55}
.dossier-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:15px 0}.dossier-stats div{padding:10px;background:#16303a80;border:1px solid #7794ab44}.dossier-stats span{display:block;font-size:10px;color:#aec6d7}.dossier-stats strong{display:block;font-size:20px;color:#edf8ff;margin-top:5px}
.dossier-section{padding:12px 14px;border-left:2px solid var(--accent);background:#15304155;margin-top:10px}.dossier-section h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}.dossier-section p{margin:5px 0}.dossier-section.weaknesses{border-color:#db9a91}.dossier-section.weaknesses h3{color:#e9b1a7}
@media(max-width:550px){.dossier-panel{padding:16px}.dossier-head{gap:12px}.dossier-portrait{width:108px;height:142px}.dossier-head h3{font-size:17px}.dossier-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dossier-panel>h2{font-size:20px}}

.site:focus-within .site-pad{stroke:var(--lit);stroke-width:4}.site-hit{outline:none}
img.game-art{object-fit:contain;background:none;width:100%;height:100%;display:block}.unit-full-render.game-art{width:100%;height:280px;object-fit:contain;margin:12px 0;background:radial-gradient(ellipse,#22374966,transparent 70%)}.deployment-sprite.game-art{height:72px;width:72px;display:inline-block;vertical-align:middle}.dossier-portrait>.game-art{object-fit:contain}

.colony-pages{position:absolute;top:92px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5;max-width:90%;flex-wrap:wrap}.colony-pages button{background:#081b2dea;border:1px solid #477386;color:#d4e9ee;padding:7px 12px;border-radius:4px;cursor:pointer}.colony-pages button[aria-pressed="true"]{border-color:#a5e9ff;background:#18405a}.infra-disclosure{max-height:70vh;overflow:auto}.infra-item span{display:block}.site-name{font-size:9px}@media(max-width:700px){.colony-pages{top:126px}.infra-disclosure{max-height:60vh}}

/* =========================================================
   CITY V31 — cinematic district-based planet view
   Four large districts; the scene itself is the interaction surface.
   ========================================================= */
.city-v31{height:min(76vh,780px);min-height:590px;border-radius:14px;border:1px solid #7795ab66;background:#030a12;box-shadow:0 20px 70px #000b,inset 0 0 0 1px #ffffff0a;overflow:hidden;position:relative;isolation:isolate}
.city-v31:before,.city-v31:after{content:none!important;background:none!important;display:none!important}
.city-v31 .city-art{position:absolute;inset:-1px;background-image:linear-gradient(180deg,#02091418 0%,transparent 40%,#0207114d 100%),var(--city-art);background-repeat:no-repeat;background-size:cover;background-position:center;will-change:transform,background-position,background-size;transition:background-position .65s cubic-bezier(.2,.72,.16,1),background-size .65s cubic-bezier(.2,.72,.16,1),transform .2s ease;transform-origin:center;filter:saturate(1.04) contrast(1.02)}
.city-v31.view-district .city-art{background-size:var(--focus-zoom) auto;background-position:var(--focus-x) var(--focus-y);filter:saturate(1.08) contrast(1.035)}
.city-v31 .city-atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#02101c22 0 58%,#020811b8 100%),radial-gradient(ellipse at 50% 45%,transparent 35%,#02071066 100%);box-shadow:inset 0 0 100px #02060daa}
.city-v31.view-district .city-atmosphere{background:linear-gradient(180deg,#02081325 0 55%,#020710c2 100%),radial-gradient(ellipse at 50% 48%,transparent 48%,#02071070 100%)}
.city-title{position:absolute;z-index:5;left:24px;top:20px;max-width:410px;padding:13px 17px;border-left:3px solid var(--accent);background:linear-gradient(90deg,#061322e8,#071525b8 75%,transparent);text-shadow:0 2px 10px #000}.city-title span,.district-title span{font-size:10px;letter-spacing:.18em;color:var(--accent);font-weight:800}.city-title h2,.district-title h2{margin:3px 0 2px;font-size:27px;line-height:1.05;color:#fff}.city-title p,.district-title p{margin:0;color:#d5e3ea;font-size:11px;line-height:1.45}
.city-overview-hotspots{position:absolute;inset:0;z-index:4}.city-district-card{position:absolute;left:var(--dx);top:var(--dy);transform:translate(-50%,-50%);min-width:270px;display:flex;align-items:center;gap:11px;padding:12px 13px;min-height:60px;border:1px solid #90a8b996;border-left:3px solid var(--accent);border-radius:5px;background:#071321ed;color:#edf8ff;text-align:left;cursor:pointer;box-shadow:0 8px 24px #0009,0 0 0 1px #ffffff08;backdrop-filter:blur(6px);transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.city-district-card:hover,.city-district-card:focus-visible{transform:translate(-50%,-50%) scale(1.045);border-color:var(--accent);background:#10263bea;box-shadow:0 10px 30px #000b,0 0 22px color-mix(in srgb,var(--accent) 32%,transparent);outline:none}.district-symbol{width:32px;height:32px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 60%,#7f93a2);border-radius:50%;color:var(--accent);background:#06111dcc;font-size:17px}.city-district-card b{display:block;font-size:13px}.city-district-card small{display:block;margin-top:2px;color:#a9c2d2;font-size:9px;letter-spacing:.03em}
.city-district-nav{position:absolute;z-index:7;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:stretch;gap:4px;padding:5px;border:1px solid #67869d66;border-radius:8px;background:#06101ce8;box-shadow:0 10px 30px #0009;backdrop-filter:blur(10px);max-width:calc(100% - 28px);overflow-x:auto;scrollbar-width:none}.city-district-nav::-webkit-scrollbar{display:none}.city-district-nav button{flex:0 0 auto;min-width:112px;border:1px solid transparent;border-radius:5px;padding:8px 11px;background:transparent;color:#b9ccd8;font:inherit;font-size:10px;cursor:pointer;white-space:nowrap}.city-district-nav button small{margin-left:6px;color:#7894a8}.city-district-nav button:hover{background:#14283a;color:#fff}.city-district-nav button[aria-pressed=true]{border-color:var(--accent);background:linear-gradient(#17334a,#102739);color:#fff;box-shadow:inset 0 0 15px color-mix(in srgb,var(--accent) 13%,transparent)}.city-overview-nav{min-width:72px!important}
.city-help,.district-hint{position:absolute;z-index:4;bottom:76px;left:50%;transform:translateX(-50%);padding:6px 10px;border-radius:4px;background:#030b14bf;color:#9fb4c2;font-size:9px;letter-spacing:.05em;white-space:nowrap;pointer-events:none}
.city-back{position:absolute;z-index:8;left:20px;top:20px;padding:8px 12px;border:1px solid #87a5b888;border-radius:5px;background:#071420e8;color:#dcecf3;cursor:pointer;backdrop-filter:blur(8px)}.city-back:hover{border-color:var(--accent);color:#fff}
.district-title{position:absolute;z-index:5;left:20px;top:64px;width:min(350px,42%);padding:11px 15px;border-left:3px solid var(--accent);background:linear-gradient(90deg,#061322ed,#071525c8 78%,transparent);text-shadow:0 2px 9px #000}.district-title h2{font-size:23px}
.district-site-layer{position:absolute;inset:0;z-index:4}.city-site-marker{position:absolute;left:var(--sx);top:var(--sy);transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;border:0;padding:0;background:none;color:#fff;cursor:pointer;text-align:left;filter:drop-shadow(0 4px 8px #000b)}.city-site-marker .site-beacon{position:relative;width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:1px solid #b8d0dcaa;background:#06111ecc;box-shadow:0 0 0 4px #06111e66}.city-site-marker .site-beacon:after{content:"";position:absolute;inset:-8px;border:1px solid #9db6c45c;border-radius:50%;opacity:.5;transition:transform .2s,opacity .2s}.city-site-marker .site-beacon i{position:absolute;inset:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent)}.city-site-marker.unbuilt .site-beacon i{background:transparent;border:1px dashed #a7bac6;box-shadow:none}.city-site-marker.constructing .site-beacon:after{border-color:var(--accent);border-style:dashed;animation:construction 7s linear infinite}.city-site-marker .site-chip{display:block;min-width:116px;max-width:190px;padding:6px 8px;border:1px solid #7894a86d;border-radius:4px;background:#06121ee8;backdrop-filter:blur(6px);box-shadow:0 5px 18px #0007}.city-site-marker .site-chip b{display:block;font-size:10px;line-height:1.15}.city-site-marker .site-chip small{display:block;margin-top:2px;color:#9cb4c3;font-size:8px;white-space:nowrap}.city-site-marker:hover,.city-site-marker:focus-visible,.city-site-marker.selected{z-index:10;outline:none}.city-site-marker:hover .site-beacon:after,.city-site-marker:focus-visible .site-beacon:after,.city-site-marker.selected .site-beacon:after{transform:scale(1.28);opacity:1;border-color:var(--accent)}.city-site-marker:hover .site-chip,.city-site-marker:focus-visible .site-chip,.city-site-marker.selected .site-chip{border-color:var(--accent);background:#102538f2;box-shadow:0 5px 20px #000b,0 0 16px color-mix(in srgb,var(--accent) 25%,transparent)}
/* The four roles stay visually readable even when faction art is radically different. */
.city-v31.district-central{--district-glow:var(--accent)}.city-v31.district-knowledge{--district-glow:#7fdcff}.city-v31.district-war{--district-glow:#ffb28b}.city-v31.district-industry{--district-glow:#ffd074}
/* Faction atmosphere: architecture remains in the art, UI only follows the faction accent. */
.city-v31.race-Imperium{--accent:#d9b56c}.city-v31.race-Synthetics{--accent:#5de8ff}.city-v31.race-Swarms{--accent:#ff825e}.city-v31.race-Archons{--accent:#cba6ff}.city-v31.race-Nomads{--accent:#f3a853}.city-v31.race-Parasites{--accent:#ff69cf}
@media(max-width:1050px){.city-v31{height:min(72vh,690px);min-height:540px}.city-district-card{min-width:175px;padding:8px 10px}.city-district-card b{font-size:11px}.district-title{width:48%}.city-site-marker .site-chip{min-width:100px;max-width:150px}.city-site-marker .site-chip b{font-size:9px}}
@media(max-width:700px){.city-v31{height:560px;min-height:0;overflow:hidden}.city-title{left:12px;top:12px;max-width:80%;padding:9px 12px}.city-title h2{font-size:19px}.city-title p{font-size:9px}.city-district-card{min-width:0;width:132px;padding:7px 8px;gap:7px}.district-symbol{width:25px;height:25px;font-size:13px}.city-district-card b{font-size:9px}.city-district-card small{font-size:7px}.city-district-nav{bottom:9px;left:9px;right:9px;transform:none;max-width:none}.city-district-nav button{min-width:100px;padding:7px 9px}.city-help,.district-hint{bottom:61px;font-size:8px}.city-back{left:10px;top:10px;padding:6px 8px;font-size:9px}.district-title{left:10px;top:48px;width:70%;padding:8px 10px}.district-title h2{font-size:17px}.district-title p{font-size:9px}.city-v31.view-district .city-art{background-size:235% auto}.city-site-marker .site-beacon{width:22px;height:22px;flex-basis:22px}.city-site-marker .site-chip{min-width:86px;max-width:118px;padding:5px 6px}.city-site-marker .site-chip b{font-size:8px}.city-site-marker .site-chip small{font-size:7px}}

.city-subzone{position:absolute;left:var(--dx);top:var(--dy);transform:translate(-50%,-50%);z-index:3;min-width:265px;padding:8px 11px;border:1px solid #6f879777;border-left:3px solid color-mix(in srgb,var(--accent) 60%,#8899a7);border-radius:4px;background:#071321ef;color:#dce8ef;box-shadow:0 6px 18px #0008;pointer-events:none}.city-subzone b{display:block;font-size:10px}.city-subzone small{display:block;margin-top:2px;font-size:8px;color:#8fa8b8}.city-district-card{z-index:4}
@media(max-width:1050px){.city-subzone{min-width:165px}}@media(max-width:700px){.city-subzone{display:none}}
.district-mobile-sites{display:none}
@media(max-width:700px){
 .city-site-marker .site-chip{display:none}
 .city-site-marker .site-beacon{width:26px;height:26px;flex-basis:26px;box-shadow:0 0 0 5px #06111e70,0 0 12px #000}
 .district-mobile-sites{display:flex;position:absolute;z-index:8;left:8px;right:8px;bottom:58px;gap:5px;overflow-x:auto;padding:5px;border:1px solid #607d9180;border-radius:6px;background:#06101ce8;backdrop-filter:blur(8px);scrollbar-width:none}
 .district-mobile-sites::-webkit-scrollbar{display:none}
 .district-mobile-site{flex:0 0 auto;min-width:112px;max-width:150px;padding:6px 8px;border:1px solid #5d7688;border-radius:4px;background:#0b1b29;color:#dbe9f0;text-align:left;font:inherit}
 .district-mobile-site b{display:block;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .district-mobile-site small{display:block;margin-top:2px;font-size:7px;color:#91a9b8}
 .district-mobile-site.selected{border-color:var(--accent);background:#163047}
 .district-hint{display:none}
}
html[data-labels-state="off"] .city-site-marker .site-chip{opacity:0;pointer-events:none}
html[data-labels-state="off"] .city-site-marker:hover .site-chip,html[data-labels-state="off"] .city-site-marker.selected .site-chip{opacity:1}
html[data-hud="hidden"] .city-title,html[data-hud="hidden"] .city-district-card,html[data-hud="hidden"] .city-subzone,html[data-hud="hidden"] .city-district-nav,html[data-hud="hidden"] .city-help,html[data-hud="hidden"] .district-title,html[data-hud="hidden"] .city-back,html[data-hud="hidden"] .city-site-marker .site-chip,html[data-hud="hidden"] .district-mobile-sites,html[data-hud="hidden"] .district-hint{visibility:hidden;pointer-events:none}
.city-v31 .city-camera{position:absolute;inset:0;z-index:2;transform-origin:center;will-change:transform}
.city-v31 .city-camera .city-art{z-index:0}
.city-v31 .city-camera .city-overview-hotspots,.city-v31 .city-camera .district-site-layer{z-index:3}