/* SPACE_EMPIRE_V5_3_0_PLANET_SURFACE_CIVILIZATION_SN050 - world-overlay only */
#planetWorldOverlay.v5-city-mode .world-layout{grid-template-columns:minmax(0,1fr)!important}
#planetWorldOverlay.v5-city-mode .world-visual-wrap{display:none!important}
#planetWorldOverlay.v5-city-mode .world-interface{min-width:0}
.v5-city-shell{--accent:#7fd5ff;--accent2:#d7f4ff;--ground:#182234;--ground2:#0d1726;--bldg:#5e7f99;--bldg2:#263b50;display:grid;gap:12px;min-height:590px;color:#dcecf5}
.v5-city-shell.doctrine-federation{--accent:#79d8ff;--accent2:#d9f7ff;--bldg:#7ca8be;--bldg2:#253d55}
.v5-city-shell.doctrine-forge{--accent:#ffb35e;--accent2:#ffe0b7;--bldg:#8a735e;--bldg2:#382d29}
.v5-city-shell.doctrine-organic{--accent:#8ce6b0;--accent2:#d9ffe7;--bldg:#4f8b6a;--bldg2:#183a2b}
.v5-city-shell.doctrine-frontier{--accent:#d7c79d;--accent2:#fff1c8;--bldg:#927f62;--bldg2:#3a3229}
.v5-city-shell.doctrine-pirate{--accent:#ff6d62;--accent2:#ffd4b0;--bldg:#8b645d;--bldg2:#321f27}
.v5-city-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);background:linear-gradient(135deg,rgba(10,24,39,.88),rgba(6,13,23,.82));border-radius:14px}
.v5-city-head small{font:700 10px/1.2 system-ui;letter-spacing:.18em;color:var(--accent)}.v5-city-head h2{margin:4px 0 2px;font-size:22px}.v5-city-head p{margin:0;color:#8fa8b8;font-size:12px}
.v5-city-actions{display:flex;align-items:center;gap:6px}.v5-city-actions button{height:32px;min-width:32px;border:1px solid rgba(160,205,230,.2);border-radius:8px;background:rgba(15,31,47,.8);color:#e9f8ff;font-weight:700}.v5-city-actions button:hover{border-color:var(--accent)}.v5-city-actions span{min-width:48px;text-align:center;font-size:11px;color:#9fc3d7}
.v5-city-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.v5-city-metrics article{display:grid;gap:2px;padding:8px 10px;border:1px solid rgba(147,195,219,.12);border-radius:10px;background:rgba(7,18,30,.62)}.v5-city-metrics span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#7694a7}.v5-city-metrics b{font-size:14px}.v5-city-metrics i{font:normal 9px system-ui;color:#61c993}.v5-city-metrics i.warn{color:#ff9b72}
.v5-city-stage{position:relative;overflow:hidden;min-height:440px;border-radius:16px;border:1px solid rgba(129,191,222,.18);background:radial-gradient(circle at 50% 8%,rgba(68,133,174,.24),transparent 35%),linear-gradient(180deg,#07111e 0 36%,var(--ground2) 36% 100%);outline:none}
.v5-city-horizon{position:absolute;inset:0;pointer-events:none}.v5-city-sun{position:absolute;width:110px;height:110px;border-radius:50%;right:11%;top:5%;background:radial-gradient(circle,#fffbe9 0 4%,rgba(255,224,143,.65) 16%,rgba(255,189,92,.10) 48%,transparent 68%);filter:blur(.2px)}.v5-city-atmo{position:absolute;left:-10%;right:-10%;top:27%;height:85px;background:linear-gradient(180deg,transparent,rgba(72,158,202,.07),transparent);filter:blur(10px)}
.v5-city-shell.climate-ice{--ground:#203542;--ground2:#0c202d}.v5-city-shell.climate-desert{--ground:#493627;--ground2:#211811}.v5-city-shell.climate-ocean{--ground:#173744;--ground2:#09212c}.v5-city-shell.climate-temperate{--ground:#22382f;--ground2:#0e2019}.v5-city-shell.climate-gas{--ground:#3b3249;--ground2:#151222}
.v5-city-viewport{position:absolute;left:50%;top:55%;width:690px;height:690px;transform:translate(-50%,-50%) scale(var(--city-zoom));transform-origin:center;transition:transform .18s ease}
.v5-city-map{position:absolute;left:50%;top:50%;width:530px;height:530px;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-45deg);transform-style:preserve-3d;background:linear-gradient(135deg,color-mix(in srgb,var(--ground) 92%,#fff 8%),var(--ground2));border:1px solid rgba(142,201,228,.17);box-shadow:0 32px 80px rgba(0,0,0,.55),inset 0 0 80px rgba(0,0,0,.25);border-radius:26px}
.v5-city-map:before,.v5-city-map:after{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none}.v5-city-map:before{background-image:linear-gradient(rgba(142,191,214,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(142,191,214,.06) 1px,transparent 1px);background-size:44px 44px}.v5-city-map:after{box-shadow:inset 0 0 70px rgba(0,0,0,.42)}
.v5-city-cell{--u:44px;position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:38px;height:38px;border:0;background:transparent;padding:0;transform-style:preserve-3d;color:#dcecf5}
.v5-city-cell.road i{position:absolute;inset:13px -4px;background:rgba(98,118,129,.32);border-top:1px solid rgba(185,215,229,.10);border-bottom:1px solid rgba(0,0,0,.26)}
.v5-city-cell.building{cursor:pointer}.v5-bldg-mass{position:absolute;left:5px;bottom:6px;width:28px;height:calc(12px + var(--lvl)*5px);transform:translateZ(calc(var(--lvl)*5px));background:linear-gradient(135deg,var(--bldg),var(--bldg2));border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);box-shadow:7px 9px 14px rgba(0,0,0,.36)}
.v5-bldg-mass:before,.v5-bldg-mass:after{content:"";position:absolute}.v5-bldg-mass:before{left:4px;right:4px;top:5px;height:2px;background:var(--accent);box-shadow:0 7px 0 color-mix(in srgb,var(--accent) 55%,transparent),0 14px 0 color-mix(in srgb,var(--accent) 32%,transparent)}.v5-bldg-mass:after{left:50%;top:-5px;width:1px;height:6px;background:var(--accent)}
.v5-city-cell.industry .v5-bldg-mass{width:34px;height:calc(10px + var(--lvl)*3px)}.v5-city-cell.industry .v5-bldg-mass:after{width:4px;height:12px;top:-12px;left:6px;background:#40505a;box-shadow:15px 2px 0 #40505a}.v5-city-cell.spaceport .v5-bldg-mass{width:38px;height:8px;border-radius:18px 18px 5px 5px}.v5-city-cell.agriculture .v5-bldg-mass{height:9px;border-radius:50%;background:radial-gradient(circle,var(--accent),rgba(43,96,68,.65))}.v5-city-cell.energy .v5-bldg-mass{clip-path:polygon(50% 0,100% 100%,0 100%)}.v5-city-cell.extractive .v5-bldg-mass{height:12px;clip-path:polygon(0 35%,20% 0,55% 12%,100% 4%,88% 100%,12% 90%)}.v5-city-cell.security .v5-bldg-mass{border-radius:2px 2px 10px 10px}.v5-city-cell.civic .v5-bldg-mass{border-radius:9px 9px 2px 2px}.v5-city-cell.utility .v5-bldg-mass{border-radius:50% 50% 4px 4px}.v5-city-cell.logistics .v5-bldg-mass{height:14px;width:36px}
.v5-city-cell small{position:absolute;left:50%;top:100%;width:110px;transform:translate(-50%,7px) rotateZ(45deg) rotateX(-58deg);transform-origin:center;font:700 9px/1 system-ui;color:#d9edf7;text-shadow:0 1px 4px #000;opacity:0;pointer-events:none}.v5-city-cell:hover small{opacity:1}
.v5-city-cell:hover .v5-bldg-mass{outline:2px solid var(--accent);filter:brightness(1.15)}
.v5-city-lod{position:absolute;left:13px;bottom:12px;display:grid;gap:2px;padding:8px 10px;border:1px solid rgba(133,190,216,.14);border-radius:9px;background:rgba(4,12,21,.64);backdrop-filter:blur(7px)}.v5-city-lod span,.v5-city-lod small{font-size:9px;color:#7896a7}.v5-city-lod b{font-size:11px;color:var(--accent)}
.v5-city-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v5-city-footer>div{display:grid;gap:3px;padding:9px 11px;border:1px solid rgba(133,190,216,.12);border-radius:10px;background:rgba(7,17,28,.62)}.v5-city-footer b{font-size:11px;color:var(--accent2)}.v5-city-footer span{font-size:10px;color:#849fac}

/* Progressive LOD: zoom-out physically removes fine city detail. */
.v5-city-shell.lod-districts .v5-city-cell.road,.v5-city-shell.lod-districts .v5-city-cell.civic,.v5-city-shell.lod-districts .v5-city-cell.utility,.v5-city-shell.lod-districts .v5-city-cell.logistics{display:none}
.v5-city-shell.lod-districts .v5-city-cell small,.v5-city-shell.lod-buildings .v5-city-cell small{display:none}
.v5-city-shell.lod-districts .v5-city-map:before{opacity:.22}
.v5-city-shell.lod-districts .v5-bldg-mass:before,.v5-city-shell.lod-districts .v5-bldg-mass:after,.v5-city-shell.lod-buildings .v5-bldg-mass:after{display:none}
.v5-city-shell.lod-districts .v5-city-cell.security,.v5-city-shell.lod-districts .v5-city-cell.extractive{opacity:.35}
.v5-city-shell.lod-activity .v5-city-cell:hover small,.v5-city-shell.lod-fine .v5-city-cell:hover small{opacity:1}

@media(max-width:900px){.v5-city-metrics{grid-template-columns:repeat(3,1fr)}.v5-city-head{flex-direction:column}.v5-city-stage{min-height:390px}.v5-city-viewport{width:600px;height:600px}.v5-city-map{width:480px;height:480px}.v5-city-cell{--u:40px}.v5-city-footer{grid-template-columns:1fr}}
@media(max-height:760px){.v5-city-shell{min-height:480px}.v5-city-stage{min-height:330px}.v5-city-metrics article{padding:5px 8px}.v5-city-viewport{top:57%;transform:translate(-50%,-50%) scale(calc(var(--city-zoom)*.86))}}