/* V32: one coordinate space for artwork, buildings and interactive floors. */
.colony-world.city-v32{background:#080d19;isolation:isolate;touch-action:none}
.colony-world.city-v32:before{content:'';inset:-30px;background-image:var(--city-art);background-size:cover;background-position:center;filter:blur(24px) brightness(.3);opacity:1;pointer-events:none}
.colony-world.city-v32:after{display:none}
.city-v32-viewport{position:absolute;inset:136px 22px 92px 118px;overflow:visible}
.city-v32-camera{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.city-v32-canvas{width:100%;height:100%;overflow:visible;display:block;user-select:none}
.city-buildings,.city-placed-building{pointer-events:none}
.city-placed-building{opacity:1;filter:brightness(var(--city-building-light,1.22)) contrast(1.12) saturate(1.12) drop-shadow(0 3px 2px #020811e6)}
.city-in-progress{opacity:.82;filter:brightness(var(--city-building-light,1.22)) contrast(1.1) saturate(.85) drop-shadow(0 3px 2px #020811e6)}
.city-v32.race-Archons{--city-building-light:1.06}
.city-v32.race-Parasites{--city-building-light:1.3}
.city-slot{cursor:pointer;outline:none}
.city-slot-floor{fill:rgba(132,222,255,.02);stroke:rgba(201,239,255,.18);stroke-width:1;transition:fill .15s,stroke .15s;vector-effect:non-scaling-stroke}
.city-slot.empty .city-slot-floor{fill:rgba(170,226,255,.06);stroke:rgba(202,231,255,.33)}
.city-slot:hover .city-slot-floor,.city-slot:focus .city-slot-floor,.city-slot.selected .city-slot-floor{fill:rgba(120,215,255,.23);stroke:#e4fbff;stroke-width:2.3}
.city-slot.building .city-slot-floor,.city-slot.upgrading .city-slot-floor{stroke:#ffdc8a;stroke-dasharray:4 3;fill:rgba(255,204,86,.14)}
.city-slot-symbol,.city-slot-number{pointer-events:none;text-anchor:middle;font:600 19px system-ui;fill:#fff;paint-order:stroke;stroke:#14232d;stroke-width:2;opacity:.6}
.city-slot-number{display:none;font-size:14px}
.city-slot:hover .city-slot-symbol,.city-slot:focus .city-slot-symbol{opacity:1}
.city-level{pointer-events:none}.city-level rect{fill:#101c2b;stroke:#a6c4d1;stroke-width:.6}.city-level text{font:600 12px system-ui;text-anchor:middle;fill:#eefbff}
[data-labels-state="off"] .city-slot-symbol,[data-labels-state="off"] .city-level{opacity:0}
.city-debug .city-slot-floor{fill:#00e5ff55;stroke:#fff}.city-debug .city-slot-number{display:block}.city-debug .city-slot-symbol{display:none}
.city-v32-status{position:absolute;left:144px;bottom:91px;display:flex;gap:12px;align-items:center;padding:10px 14px;background:#09131de8;border:1px solid #abcde133;border-radius:12px;font-size:12px;pointer-events:auto}
.city-v32-status>span{color:#aec4d6}.city-v32-status>b{color:#f2faff}.city-v32-status button{color:#e6f8ff;background:#243d51;border:1px solid #6b8b9c;border-radius:7px;padding:8px 12px;cursor:pointer}
.city-v32-help{position:absolute;left:144px;bottom:68px;font-size:11px;color:#cfdeef;pointer-events:none;text-shadow:0 1px 4px #000}
.city-panel-nav{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.city-panel-nav span{color:#aed9ec;font-size:12px}.city-panel-nav button{font-size:12px}
.city-catalog{display:grid;gap:8px}.city-catalog-card{display:grid;grid-template-columns:74px 1fr;gap:12px;text-align:left;width:100%;padding:10px;border:1px solid #294053;border-radius:10px;background:#101e2c;color:#eaf5ff;cursor:pointer;align-items:center}
.city-catalog-card:hover,.city-catalog-card:focus-visible{border-color:#a1e6ff;background:#193145}.city-catalog-card img{width:74px;height:74px;object-fit:contain}.city-catalog-card b{font-size:13px;display:block;margin-bottom:5px}.city-catalog-card small{display:block;font-size:11px;line-height:1.5;color:#aac3d3}.city-catalog-card .city-lock{color:#eed299}.city-catalog-card.city-already{opacity:.73}
.city-catalog-intro{margin:0 0 15px;color:#b2c9d8;font-size:12px;line-height:1.6}.city-catalog h2{font-size:20px}
.city-building-art{object-fit:contain!important;background:none!important;border:0!important}.city-catalog-detail .building-panel-art{width:100%;height:185px;object-fit:contain}
.city-slot-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.city-slot-picker button{min-height:48px;padding:8px 5px;border:1px solid #456278;border-radius:8px;background:#142536;color:#edf9ff;font-size:12px;cursor:pointer}.city-slot-picker button[data-occupied="true"]{background:#233426;border-color:#5d8669}.city-slot-picker button:focus-visible{outline:2px solid white}.city-slot-picker small{display:block;margin-top:4px;font-size:9px;line-height:1.3;color:#b6cad5}
[data-screen="planet"] .context-panel{width:min(400px,calc(100vw - 36px));right:18px;top:156px;bottom:90px;max-height:none;background:rgba(8,18,29,.97);backdrop-filter:blur(18px)}
[data-screen="planet"] .context-panel .build-focus{display:flex;flex-direction:column;gap:12px}.city-catalog-detail .focus-cost{line-height:1.8}.city-catalog-detail .btn{min-height:44px}.city-catalog-detail .complex-hero{display:flex;flex-direction:column}.city-catalog-detail .complex-module{grid-template-columns:62px 1fr}.city-catalog-detail .complex-module-art{width:62px;height:74px}
.city-catalog-detail .complex-module-actions{flex-wrap:wrap}.city-catalog-detail .focus-actions{display:flex;flex-wrap:wrap;gap:8px}.city-catalog-detail .focus-actions small{width:100%}
[data-screen="planet"] .planet-head.scene-heading{pointer-events:none}[data-screen="planet"] .planet-head select,[data-screen="planet"] .planet-head button{pointer-events:auto}
[data-hud="hidden"] .city-v32-status,[data-hud="hidden"] .city-v32-help{display:none}
@media(max-width:900px){.city-v32-viewport{inset:148px 12px 116px 80px}.city-v32-status{left:90px;bottom:100px;gap:8px}.city-v32-help{display:none}[data-screen="planet"] .context-panel{top:146px;bottom:92px}}
@media(max-width:600px){.city-v32-viewport{inset:140px 0 154px 0}.city-v32-camera{width:100%;height:100%}.city-v32-status{left:10px;right:10px;bottom:138px;justify-content:space-between;padding:8px;font-size:11px}.city-v32-status>span{display:none}[data-screen="planet"] .context-panel{inset:148px 8px 138px;width:auto;max-height:none;padding:14px;border-radius:14px}.city-catalog-card{grid-template-columns:60px 1fr}.city-catalog-card img{width:60px;height:60px}.city-slot-picker{grid-template-columns:repeat(4,1fr)}.city-catalog-detail .building-panel-art{height:140px}[data-screen="planet"] .scene-heading h1{font-size:16px}[data-screen="planet"] .scene-heading .sub{font-size:11px}}
@media(prefers-reduced-motion:reduce){.city-slot-floor{transition:none}.city-v32-camera{will-change:auto}}

.city-panel-content{padding:16px}.city-panel-content>h2{margin:0 0 12px}.city-panel-content .city-catalog-detail .build-focus{margin:0;padding:0}.city-panel-content p{line-height:1.6}