*{box-sizing:border-box}html{background:#050a12}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#f5f7fb;background:radial-gradient(circle at top,#18345b,#07111f 50%,#03070d)}.app{width:min(1480px,calc(100% - 20px));margin:auto;padding:18px 0 40px}.topbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}.topbar h1{font-size:clamp(2.5rem,6vw,5rem);line-height:.88;letter-spacing:-.06em;margin:4px 0;background:linear-gradient(90deg,#6de8ff,#fff,#b28cff);-webkit-background-clip:text;color:transparent}.topbar p,p{color:#a9b8ca;line-height:1.55}.kicker{font-size:.7rem;font-weight:900;letter-spacing:.18em;color:#6fe7ff}.top-actions,.button-row,.city-controls,.guide-tabs{display:flex;gap:8px;flex-wrap:wrap}button{font:inherit;border:1px solid rgba(255,255,255,.11);border-radius:12px;padding:11px 14px;background:#162942;color:#fff;font-weight:800;cursor:pointer}.primary{background:linear-gradient(135deg,#70e9ff,#79eeb6);color:#06131c;border:0}.wide{width:100%}.hidden{display:none!important}.screen{max-width:1120px;margin:3vh auto}.card{background:linear-gradient(150deg,rgba(20,38,63,.97),rgba(8,18,32,.97));border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.24)}.start{text-align:center}.intro-city{display:grid;place-items:center;height:320px;overflow:hidden;background:linear-gradient(#153658,#33556b 60%,#15283a);border-radius:18px;margin-bottom:20px}.iso-preview{position:relative;width:500px;height:260px;transform:rotateX(58deg) rotateZ(45deg);transform-style:preserve-3d}.mini-tile{position:absolute;width:120px;height:120px;background:#6f8f65;border:1px solid #8ca97e}.t1{left:80px;top:20px}.t2{left:205px;top:20px}.t3{left:330px;top:20px}.t4{left:80px;top:145px}.t5{left:205px;top:145px}.t6{left:330px;top:145px}.preview-tower,.preview-house,.preview-plant{position:absolute;transform:rotateZ(-45deg) rotateX(-58deg);transform-origin:bottom center;background:#33506b;border:1px solid #86b4cf}.preview-tower{width:60px;height:125px;left:230px;top:10px}.preview-house{width:70px;height:55px;left:100px;top:120px}.preview-plant{width:90px;height:70px;left:360px;top:100px}.hud{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:10px}.metric{padding:13px;background:#102039;border:1px solid rgba(255,255,255,.08);border-radius:15px}.metric span{display:block;color:#95a9c1;font-size:.73rem;margin-bottom:5px}.metric.danger b{color:#ff8c9a}.game-layout{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(300px,.85fr);gap:10px}.left-column,.right-column{display:grid;gap:10px;align-content:start}.section-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.badge{padding:7px 10px;border-radius:999px;background:rgba(111,231,255,.1);color:#78eaff;font-size:.75rem;font-weight:800}.viewBtn{padding:8px 10px;font-size:.74rem}.viewBtn.active{background:#2a557c}.city-viewport{position:relative;height:520px;overflow:hidden;border-radius:18px;background:linear-gradient(#183a5d 0,#527383 54%,#294658 55%,#1c3444 100%);perspective:1100px;margin-top:12px}.city-viewport:before{content:"";position:absolute;left:8%;right:8%;bottom:6%;height:25%;border-radius:50%;background:rgba(20,54,63,.6);filter:blur(4px)}.iso-city{position:absolute;left:50%;top:49%;width:720px;height:720px;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(45deg) scale(.76)}.iso-tile{position:absolute;width:108px;height:108px;border:1px solid rgba(255,255,255,.12);background:#63885e;transform-style:preserve-3d;transition:filter .25s,opacity .25s}.iso-tile.road{background:#39444e}.iso-tile.park{background:#4d8d60}.iso-tile.water{background:#286f8b}.iso-tile .lot-label{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.7);font-size:12px;transform:rotateZ(-45deg) rotateX(-58deg);pointer-events:none}.iso-building{position:absolute;left:18px;top:18px;width:72px;height:72px;transform-style:preserve-3d;transform:translateZ(1px)}.cube-top,.cube-front,.cube-side{position:absolute;background:#2b4b68;border:1px solid rgba(255,255,255,.12)}.cube-top{width:72px;height:72px;transform:translateZ(var(--bh));background:#446a87}.cube-front{width:72px;height:var(--bh);transform-origin:bottom;transform:rotateX(-90deg) translateY(calc(-1 * var(--bh)));bottom:0;background:#253f5a}.cube-side{width:var(--bh);height:72px;transform-origin:left;transform:rotateY(90deg);left:72px;background:#1e354e}.type-housing .cube-top{background:#cc9e73}.type-commerce .cube-top{background:#5bb8c9}.type-industry .cube-top{background:#7d8189}.type-education .cube-top{background:#c49cc9}.type-health .cube-top{background:#e8e5dc}.type-energy .cube-top{background:#d4b75e}.type-transport .cube-top{background:#798ca8}.type-digital .cube-top{background:#7396d9}.type-security .cube-top{background:#9a7373}.type-integration .cube-top{background:#d89f68}.type-environment .cube-top{background:#6fb478}.type-culture .cube-top{background:#c988b2}.type-research .cube-top{background:#8b80db}.type-time .cube-top{background:#9976dd;box-shadow:0 0 24px rgba(165,118,255,.7)}.overlay-economy .iso-tile{filter:saturate(.25)}.overlay-economy .type-commerce,.overlay-economy .type-industry,.overlay-economy .type-digital{filter:saturate(1.5) brightness(1.25)}.overlay-social .iso-tile{filter:saturate(.25)}.overlay-social .type-housing,.overlay-social .type-education,.overlay-social .type-health,.overlay-social .type-integration,.overlay-social .type-culture{filter:saturate(1.4) brightness(1.2)}.overlay-time .iso-tile{filter:saturate(.25)}.overlay-time .type-time{filter:saturate(1.6) brightness(1.35)}.time-glitch{position:absolute;z-index:9;left:50%;top:8%;width:6px;height:280px;background:#b27dff;box-shadow:0 0 18px #b27dff,40px 80px 0 -1px #6ceaff,-35px 155px 0 -1px #e58aff;transform:rotate(7deg);opacity:.85}.city-alert{position:absolute;z-index:20;left:16px;bottom:16px;padding:9px 12px;border-radius:10px;background:#98364d;color:#fff;font-size:.8rem;font-weight:900}.district-strip{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.district-strip span{padding:7px 9px;background:rgba(255,255,255,.06);border-radius:999px;color:#aebbc9;font-size:.75rem}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:16px}.choice{min-height:150px;text-align:left;background:linear-gradient(145deg,#26466d,#112138);padding:15px}.choice strong{display:block;margin-bottom:8px}.choice small{display:block;color:#a9b7c9;line-height:1.42}.choice .path{margin-top:10px;color:#7de9ff;font-size:.72rem}.choice.locked{opacity:.42;cursor:not-allowed}.law-box{padding:12px;border-left:4px solid #ffd36f;background:rgba(255,211,111,.08);border-radius:9px;color:#e7d9b7}.sector-bars{display:grid;gap:8px}.sector-row{display:grid;grid-template-columns:94px 1fr 32px;gap:7px;align-items:center;font-size:.75rem}.sector-row span{color:#9fb0c3}.microbar,.bar{height:8px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden}.microbar i,.bar i{display:block;height:100%;background:linear-gradient(90deg,#6de8ff,#8f83ff)}.barline{display:flex;justify-content:space-between;color:#aab8c8;font-size:.8rem}.bar{height:10px;margin:8px 0 12px}.bar i{background:linear-gradient(90deg,#6fe6a7,#ffd16a,#ff6d7d)}.bar.approval i{background:linear-gradient(90deg,#ff6d7d,#ffd16a,#68e4a3)}.warning{padding:9px;border-radius:9px;background:rgba(255,109,125,.1);border:1px solid rgba(255,109,125,.2);color:#ffc0c7;font-size:.8rem}.smallgrid{display:grid;gap:7px;color:#aab8c8;font-size:.8rem}.smallgrid b{float:right;color:#fff}.forecast-number{font-size:2rem;font-weight:900;color:#ffd36f}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}.result-grid div{padding:13px;border-radius:13px;background:#102039}.result-grid span{display:block;color:#9fb0c3;font-size:.75rem}.forecast-box{padding:14px;border-radius:13px;background:rgba(111,231,255,.06);border:1px solid rgba(111,231,255,.15);margin:14px 0}.snapshot{height:560px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;text-align:left}th{color:#91a4ba;font-size:.75rem}td{font-size:.85rem}.scorebox{padding:16px;background:#102039;border-radius:13px;line-height:1.8}dialog{width:min(760px,calc(100% - 24px));background:#0e1b2e;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px}dialog::backdrop{background:rgba(0,0,0,.78)}.dialog-close{float:right;font-size:1.3rem}.guide-tabs .active{background:#2c557c}footer{text-align:center;color:#718398;font-size:.72rem;margin-top:28px}@media(max-width:1000px){.game-layout{grid-template-columns:1fr}.hud{grid-template-columns:repeat(3,1fr)}.city-viewport{height:480px}.iso-city{scale:.9}}@media(max-width:650px){.topbar{display:block}.top-actions{margin-top:12px}.hud{grid-template-columns:repeat(2,1fr)}.choices{grid-template-columns:1fr}.city-viewport{height:370px}.iso-city{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(45deg) scale(.52)}.result-grid{grid-template-columns:repeat(2,1fr)}.section-row{align-items:flex-start;flex-direction:column}.snapshot{height:420px}}
/* V5 detailed citybuilder */
.city-viewport{background:linear-gradient(#9bc9e5 0 36%,#c9e3d5 36% 56%,#34594e 56% 100%);border:1px solid rgba(255,255,255,.12)}
.city-horizon{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.city-horizon:before{content:"";position:absolute;left:-5%;right:-5%;bottom:34%;height:22%;background:radial-gradient(ellipse at 18% 80%,#517662 0 24%,transparent 25%),radial-gradient(ellipse at 50% 80%,#426958 0 25%,transparent 26%),radial-gradient(ellipse at 78% 80%,#587863 0 24%,transparent 25%)}
.cloud{position:absolute;width:100px;height:26px;background:rgba(255,255,255,.65);border-radius:999px}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:38px;height:38px;left:16px;top:-14px}.cloud:after{width:48px;height:48px;right:12px;top:-21px}.cloud-a{left:12%;top:10%}.cloud-b{right:10%;top:18%;transform:scale(.72)}
.city-legend{position:absolute;z-index:25;left:12px;top:12px;display:flex;gap:5px;flex-wrap:wrap;max-width:72%}.city-legend span{padding:4px 7px;background:rgba(5,15,25,.66);border-radius:999px;font-size:.66rem;color:#eef6fb}
.iso-city{width:880px;height:880px}.iso-tile{width:104px;height:104px}.iso-tile.grass{background:#6f9d67}.iso-tile.road{background:linear-gradient(90deg,transparent 45%,rgba(255,255,255,.5) 46% 54%,transparent 55%),#4a5054}.iso-tile.road-h{background:linear-gradient(0deg,transparent 45%,rgba(255,255,255,.5) 46% 54%,transparent 55%),#4a5054}.iso-tile.cross{background:linear-gradient(90deg,transparent 45%,rgba(255,255,255,.45) 46% 54%,transparent 55%),linear-gradient(0deg,transparent 45%,rgba(255,255,255,.45) 46% 54%,transparent 55%),#4a5054}.iso-tile.sidewalk{box-shadow:inset 0 0 0 8px #b7b0a0}.iso-tile.water{background:repeating-linear-gradient(145deg,#2d7896 0 8px,#3a85a1 8px 16px)}.iso-tile.park{background:radial-gradient(circle at 25% 30%,#2f6f3e 0 8px,transparent 9px),radial-gradient(circle at 65% 55%,#2f6f3e 0 9px,transparent 10px),radial-gradient(circle at 40% 80%,#397947 0 7px,transparent 8px),#76a76d}.bridge-deck{position:absolute;left:0;top:39px;width:104px;height:26px;background:#796e5e;box-shadow:0 0 0 3px #998c78}.bridge-deck:after{content:"";position:absolute;left:0;right:0;top:11px;border-top:3px dashed rgba(255,255,255,.55)}
.city-object{position:absolute;left:10px;top:10px;width:84px;height:84px;transform-style:preserve-3d;transform:translateZ(2px)}.city-object .base{position:absolute;inset:10px;background:#d2c9b5;border:1px solid rgba(0,0,0,.15)}.city-object .wall{position:absolute;left:20px;top:26px;width:52px;height:46px;background:#d9c2a3;border:1px solid rgba(0,0,0,.18);transform:translateZ(22px)}.city-object .roof{position:absolute;left:16px;top:15px;width:60px;height:60px;background:#9d554c;border:1px solid rgba(0,0,0,.2);transform:translateZ(48px) rotateZ(45deg) scale(.72)}
.house-modern .wall{background:#d8e5eb}.house-modern .roof{background:#6d8795}.shop .wall{background:#d7b17b}.shop .roof{background:#6b8fa6}.shop:after{content:"SHOP";position:absolute;left:22px;top:44px;transform:translateZ(49px) rotateZ(-45deg) rotateX(-58deg);font-size:9px;font-weight:900;background:#f1db84;color:#243544;padding:2px 4px}
.apartment .wall{width:58px;height:58px;left:17px;top:14px;background:#a9b7c7;transform:translateZ(38px)}.apartment .roof{left:20px;top:17px;width:52px;height:52px;background:#6e7e8e;transform:translateZ(95px)}.apartment:after{content:"";position:absolute;left:24px;top:26px;width:42px;height:36px;transform:translateZ(97px);background:repeating-linear-gradient(90deg,#bfe8ff 0 4px,transparent 4px 10px)}
.church .nave{position:absolute;left:16px;top:28px;width:60px;height:42px;background:#d8d0bc;border:1px solid #9f9887;transform:translateZ(24px)}.church .roof2{position:absolute;left:12px;top:19px;width:68px;height:52px;background:#7d5050;transform:translateZ(65px) rotateZ(45deg) scale(.68)}.church .tower{position:absolute;left:38px;top:12px;width:22px;height:22px;background:#c8c0ab;transform:translateZ(80px)}.church .spire{position:absolute;left:40px;top:7px;width:18px;height:18px;background:#5e6974;transform:translateZ(118px) rotateZ(45deg) scale(.7)}.church .cross-mark{position:absolute;left:45px;top:4px;color:#f8e9be;font-size:18px;font-weight:900;transform:translateZ(145px) rotateZ(-45deg) rotateX(-58deg)}
.townhall .wall{width:62px;height:54px;left:15px;top:18px;background:#c3b99e;transform:translateZ(35px)}.townhall .roof{background:#57758c;transform:translateZ(90px) rotateZ(45deg) scale(.75)}.townhall:after{content:"🏛️";position:absolute;left:34px;top:32px;font-size:19px;transform:translateZ(96px) rotateZ(-45deg) rotateX(-58deg)}
.school .wall{background:#d7c68a}.school .roof{background:#8c6f5b}.school:after{content:"🏫";position:absolute;left:34px;top:34px;font-size:18px;transform:translateZ(56px) rotateZ(-45deg) rotateX(-58deg)}.hospital .wall{background:#e4e8e7}.hospital .roof{background:#a4b4b5}.hospital:after{content:"✚";position:absolute;left:38px;top:31px;color:#b64343;font-size:24px;font-weight:900;transform:translateZ(58px) rotateZ(-45deg) rotateX(-58deg)}
.factory .wall{width:62px;height:45px;left:15px;top:26px;background:#7d8286;transform:translateZ(22px)}.factory .roof{background:#5c6268;transform:translateZ(68px) rotateZ(45deg) scale(.74)}.factory .chimney{position:absolute;width:12px;height:12px;left:61px;top:15px;background:#6d5048;transform:translateZ(98px)}.factory .smoke{position:absolute;left:59px;top:8px;width:18px;height:18px;border-radius:50%;background:rgba(220,225,229,.7);transform:translateZ(125px)}
.powerplant .wall{background:#8f876c}.powerplant .roof{background:#c0a955}.powerplant:after{content:"⚡";position:absolute;left:35px;top:33px;font-size:22px;transform:translateZ(60px) rotateZ(-45deg) rotateX(-58deg)}.lab .wall{background:#a4a6c8}.lab .roof{background:#6d63aa}.lab:after{content:"🔬";position:absolute;left:33px;top:33px;font-size:20px;transform:translateZ(62px) rotateZ(-45deg) rotateX(-58deg)}.time-lab .wall{background:#8d79bc}.time-lab .roof{background:#6746b1;box-shadow:0 0 18px rgba(163,111,255,.8)}.time-lab:after{content:"🌀";position:absolute;left:32px;top:30px;font-size:24px;transform:translateZ(66px) rotateZ(-45deg) rotateX(-58deg)}
.station .wall{width:62px;height:34px;left:15px;top:34px;background:#8798a5;transform:translateZ(18px)}.station .roof{background:#526c7c;transform:translateZ(52px) rotateZ(45deg) scale(.75)}.station:after{content:"🚉";position:absolute;left:31px;top:34px;font-size:20px;transform:translateZ(58px) rotateZ(-45deg) rotateX(-58deg)}
.park-object .tree{position:absolute;width:18px;height:18px;border-radius:50%;background:#2f743f;transform:translateZ(34px)}.park-object .t1{left:18px;top:20px}.park-object .t2{left:53px;top:26px}.park-object .t3{left:36px;top:55px}
.car,.person{position:absolute;z-index:8}.car{width:18px;height:9px;border-radius:3px;background:#d75d4f;box-shadow:0 0 0 2px #26313a;animation:drive 7s linear infinite}.car.blue{background:#4e82c4;animation-delay:-3s}.car.yellow{background:#d5ad43;animation-delay:-5s}@keyframes drive{0%{left:8%;top:48%}50%{left:82%;top:48%}100%{left:8%;top:48%}}.person{width:6px;height:6px;border-radius:50%;background:#f0d1a6;box-shadow:0 6px 0 0 #47657b;animation:walk 9s ease-in-out infinite}.person.p2{animation-delay:-4s}.person.p3{animation-delay:-7s}@keyframes walk{0%,100%{left:24%;top:61%}50%{left:64%;top:36%}}

/* V6 Metropole additions */
.city-viewport.night{background:linear-gradient(#07101d 0 36%,#152435 36% 56%,#18332b 56% 100%)}
.city-viewport.night:after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(3,8,18,.28)}
.streetlight{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe7a4;box-shadow:0 0 11px #ffe7a4;transform:translateZ(18px)}
.firestation .wall{background:#c6675f}.firestation .roof{background:#8d4742}.firestation:after{content:"🚒";position:absolute;left:32px;top:32px;font-size:20px;transform:translateZ(60px) rotateZ(-45deg) rotateX(-58deg)}
.police .wall{background:#7d9ec4}.police .roof{background:#496d95}.police:after{content:"🚓";position:absolute;left:32px;top:32px;font-size:20px;transform:translateZ(60px) rotateZ(-45deg) rotateX(-58deg)}
.mall .wall{width:64px;height:44px;left:14px;top:27px;background:#b89a72;transform:translateZ(24px)}.mall .roof{background:#6f8cab;transform:translateZ(70px) rotateZ(45deg) scale(.76)}.mall:after{content:"🛍️";position:absolute;left:31px;top:33px;font-size:20px;transform:translateZ(73px) rotateZ(-45deg) rotateX(-58deg)}
.stadium .ring{position:absolute;left:11px;top:18px;width:72px;height:56px;border:12px solid #c7c7c0;border-radius:50%;background:#4f8b55;transform:translateZ(26px)}.stadium .field{position:absolute;left:29px;top:34px;width:36px;height:22px;background:#5ca15f;transform:translateZ(31px)}
.cemetery{background:repeating-linear-gradient(90deg,#79926e 0 9px,#6d8865 9px 18px)}.cemetery:after{content:"✝  ✝  ✝";position:absolute;left:18px;top:38px;color:#ddd;font-size:12px;letter-spacing:5px;transform:translateZ(15px) rotateZ(-45deg) rotateX(-58deg)}
.harbor .dock{position:absolute;left:5px;top:16px;width:90px;height:64px;background:#796954;transform:translateZ(10px)}.harbor .crane{position:absolute;left:54px;top:10px;width:8px;height:8px;background:#d39b46;transform:translateZ(70px);box-shadow:-24px 0 0 #d39b46}.harbor:after{content:"⚓";position:absolute;left:32px;top:37px;font-size:20px;transform:translateZ(24px) rotateZ(-45deg) rotateX(-58deg)}
.office .wall{width:58px;height:58px;left:17px;top:14px;background:#8ea4b7;transform:translateZ(48px)}.office .roof{left:20px;top:17px;width:52px;height:52px;background:#596e82;transform:translateZ(112px)}
.villa .wall{background:#ead9bd}.villa .roof{background:#8f5f4d}
.socialblock .wall{width:60px;height:56px;left:16px;top:16px;background:#c6b8aa;transform:translateZ(35px)}.socialblock .roof{background:#77716c;transform:translateZ(93px) rotateZ(45deg) scale(.75)}
.tram-track{position:absolute;inset:0;background:linear-gradient(90deg,transparent 37%,#b4b4b4 38% 41%,transparent 42% 58%,#b4b4b4 59% 62%,transparent 63%),#495054}
.tram{position:absolute;width:28px;height:11px;border-radius:3px;background:#c94e4e;box-shadow:0 0 0 2px #2b343d;z-index:9;animation:tramMove 10s linear infinite}@keyframes tramMove{0%{left:10%;top:64%}50%{left:78%;top:31%}100%{left:10%;top:64%}}
.bus{position:absolute;width:25px;height:10px;border-radius:3px;background:#e1bc45;box-shadow:0 0 0 2px #29323a;z-index:9;animation:busMove 8s linear infinite}@keyframes busMove{0%{left:13%;top:40%}50%{left:72%;top:58%}100%{left:13%;top:40%}}
.district-label{position:absolute;z-index:7;padding:4px 6px;border-radius:7px;background:rgba(7,17,30,.7);color:#fff;font-size:9px;font-weight:800;transform:translateZ(125px) rotateZ(-45deg) rotateX(-58deg)}

/* V7 live clock, day/night and weather */
.hud{grid-template-columns:repeat(8,1fr)}.metric small{display:block;margin-top:3px;color:#8ea6bd;font-size:.68rem}
.clock-metric{background:linear-gradient(145deg,#173c54,#10263d)}.weather-metric{background:linear-gradient(145deg,#24394c,#152738)}
#timeSpeed{border:1px solid rgba(255,255,255,.12);background:#162942;color:#fff;border-radius:12px;padding:9px 10px;font-weight:800}
.city-viewport.dawn{background:linear-gradient(#bf866f 0 27%,#e2b68b 27% 44%,#8ca18c 44% 58%,#34594e 58% 100%)}
.city-viewport.day{background:linear-gradient(#70b8e5 0 34%,#c8e8dc 34% 55%,#477064 55% 100%)}
.city-viewport.dusk{background:linear-gradient(#5e5886 0 24%,#ca826a 24% 45%,#707b70 45% 58%,#2c4a43 58% 100%)}
.city-viewport.night{background:linear-gradient(#07101d 0 35%,#142234 35% 55%,#18332b 55% 100%)}
.sun-or-moon{position:absolute;z-index:2;width:58px;height:58px;border-radius:50%;right:11%;top:8%;pointer-events:none}
.city-viewport.day .sun-or-moon,.city-viewport.dawn .sun-or-moon,.city-viewport.dusk .sun-or-moon{background:#ffe8a7;box-shadow:0 0 32px rgba(255,225,145,.6)}
.city-viewport.night .sun-or-moon{background:#dfe9f4;box-shadow:0 0 24px rgba(205,224,245,.35)}
.weather-layer{position:absolute;inset:0;z-index:18;pointer-events:none;overflow:hidden;border-radius:18px}
.weather-layer.rain{background:repeating-linear-gradient(105deg,transparent 0 13px,rgba(190,220,245,.45) 14px 16px,transparent 17px 30px);animation:rainfall .55s linear infinite}
@keyframes rainfall{from{background-position:0 0}to{background-position:40px 80px}}
.weather-layer.snow{background-image:radial-gradient(circle,#fff 0 2px,transparent 2.5px),radial-gradient(circle,#fff 0 1.6px,transparent 2px);background-size:42px 42px,30px 30px;animation:snowfall 6s linear infinite;opacity:.9}
@keyframes snowfall{to{background-position:30px 180px,-20px 140px}}
.weather-layer.storm{background:repeating-linear-gradient(105deg,transparent 0 10px,rgba(200,220,240,.55) 11px 14px,transparent 15px 24px);animation:rainfall .3s linear infinite}
.weather-layer.storm:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(25,35,48,.36),rgba(10,18,26,.46));animation:flash 4s infinite}
@keyframes flash{0%,92%,100%{opacity:.15}94%{opacity:.75}96%{opacity:.2}}
.weather-layer.heat{background:linear-gradient(rgba(255,165,80,.08),rgba(255,90,40,.13))}
.weather-layer.cold{background:linear-gradient(rgba(170,220,255,.09),rgba(110,170,220,.13))}
.weather-layer.disaster{box-shadow:inset 0 0 120px rgba(140,35,25,.2)}
.city-viewport.night .streetlight{opacity:1}.streetlight{opacity:.2}.city-viewport.dusk .streetlight{opacity:.75}
.city-viewport.night .city-object{filter:drop-shadow(2px 4px 5px rgba(0,0,0,.42))}
.city-viewport.dawn .city-object{filter:drop-shadow(10px 7px 3px rgba(0,0,0,.25))}
.city-viewport.dusk .city-object{filter:drop-shadow(-10px 6px 4px rgba(0,0,0,.28))}
@media(max-width:1050px){.hud{grid-template-columns:repeat(4,1fr)}}@media(max-width:650px){.hud{grid-template-columns:repeat(2,1fr)}}

/* ===== V8 stronger pseudo-3D + rebuild ===== */
.city-viewport{perspective:1500px}
.iso-city{
  transform:translate(-50%,-50%) rotateX(62deg) rotateZ(45deg) scale(.72);
  filter:drop-shadow(0 22px 20px rgba(0,0,0,.28));
}
.iso-tile{box-shadow:
 inset 0 0 0 1px rgba(0,0,0,.12),
 8px 10px 10px rgba(0,0,0,.08)}
.city-object{filter:drop-shadow(10px 12px 4px rgba(0,0,0,.18))}
.city-object .wall{
  background-image:linear-gradient(90deg,rgba(255,255,255,.08),transparent 35%,rgba(0,0,0,.08));
}
.city-object .roof{
  box-shadow:inset -8px -8px 0 rgba(0,0,0,.08),0 5px 8px rgba(0,0,0,.12)
}
.apartment .wall,.office .wall{
  box-shadow:inset -10px -4px 0 rgba(0,0,0,.09)
}
.apartment:before,.office:before{
  content:"";position:absolute;left:22px;top:18px;width:46px;height:52px;
  transform:translateZ(72px);
  background:repeating-linear-gradient(0deg,rgba(190,230,255,.8) 0 3px,transparent 3px 10px),
             repeating-linear-gradient(90deg,rgba(190,230,255,.8) 0 3px,transparent 3px 11px);
  opacity:.72
}
.house-small:before,.house-modern:before,.villa:before{
  content:"";position:absolute;left:28px;top:38px;width:15px;height:15px;
  transform:translateZ(50px);background:#a7d9ef;border:2px solid rgba(255,255,255,.45)
}
.factory .chimney{box-shadow:inset -4px 0 0 rgba(0,0,0,.15)}
.factory .smoke{animation:smokeRise 3s ease-out infinite}
@keyframes smokeRise{0%{opacity:.6;transform:translateZ(125px) scale(.7)}100%{opacity:0;transform:translateZ(170px) scale(1.5)}}
.city-viewport.night .apartment:before,.city-viewport.night .office:before,.city-viewport.night .house-small:before,.city-viewport.night .house-modern:before,.city-viewport.night .villa:before{
  background:#ffe6a2;box-shadow:0 0 8px #ffe2a1
}
.rebuild-panel{margin-top:14px;padding:15px;border-radius:14px;background:rgba(150,55,42,.10);border:1px solid rgba(255,120,95,.24)}
.rebuild-panel h3{margin:6px 0}.rebuild-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.rebuild-choice{text-align:left;min-height:112px;background:linear-gradient(145deg,#563329,#2f211f)}
.rebuild-choice strong{display:block;margin-bottom:6px}.rebuild-choice small{color:#d8b8ae;line-height:1.4}
.damage-tile{filter:grayscale(.65) brightness(.7)!important}
.damage-tile:after{content:"";position:absolute;inset:10px;border:3px dashed rgba(135,55,45,.72);box-shadow:inset 0 0 18px rgba(120,30,20,.24)}
.crane-build{position:absolute;z-index:10;width:5px;height:5px;background:#d7a341;transform:translateZ(80px)}
.crane-build:before{content:"";position:absolute;width:38px;height:4px;background:#d7a341;left:-5px;top:-40px}
.crane-build:after{content:"";position:absolute;width:4px;height:45px;background:#d7a341;left:0;top:-40px}
@media(max-width:650px){.rebuild-choices{grid-template-columns:1fr}.iso-city{transform:translate(-50%,-50%) rotateX(62deg) rotateZ(45deg) scale(.50)}}

/* ===== V9 raised buildings + road-bound traffic + two-task system ===== */
.decision-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.district-select{display:flex;gap:6px;align-items:center;color:#9fb0c3;font-size:.76rem}
.district-select select{background:#13253d;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 10px}
.multi-task-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px;padding:12px 14px;border-radius:13px;background:rgba(111,231,255,.06);border:1px solid rgba(111,231,255,.14)}
.multi-task-bar span{display:block;color:#93a8bf;font-size:.74rem;margin-top:3px}
.multi-task-bar button:disabled{opacity:.4;cursor:not-allowed}
.choice.selected{outline:2px solid #6fe7ff;background:linear-gradient(145deg,#31577f,#16324d)}
.choice .district-target{display:inline-block;margin-top:8px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.07);font-size:.68rem;color:#c8d7e5}

/* stronger real-height building prisms */
.city-object{transform-style:preserve-3d}
.house-small .wall,.house-modern .wall,.villa .wall{height:58px;transform:translateZ(34px)}
.house-small .roof,.house-modern .roof,.villa .roof{transform:translateZ(94px) rotateZ(45deg) scale(.72)}
.shop .wall{height:52px;transform:translateZ(30px)}.shop .roof{transform:translateZ(84px) rotateZ(45deg) scale(.72)}
.school .wall,.hospital .wall{height:60px;transform:translateZ(38px)}.school .roof,.hospital .roof{transform:translateZ(100px) rotateZ(45deg) scale(.72)}
.firestation .wall,.police .wall{height:56px;transform:translateZ(34px)}.firestation .roof,.police .roof{transform:translateZ(92px) rotateZ(45deg) scale(.72)}
.mall .wall{height:62px;transform:translateZ(38px)}.mall .roof{transform:translateZ(103px) rotateZ(45deg) scale(.76)}
.townhall .wall{height:68px;transform:translateZ(42px)}.townhall .roof{transform:translateZ(112px) rotateZ(45deg) scale(.75)}
.factory .wall{height:58px;transform:translateZ(32px)}.factory .roof{transform:translateZ(92px) rotateZ(45deg) scale(.74)}
.powerplant .wall,.lab .wall,.time-lab .wall{height:64px;transform:translateZ(38px)}
.powerplant .roof,.lab .roof,.time-lab .roof{transform:translateZ(104px) rotateZ(45deg) scale(.72)}
.apartment .wall{height:92px;transform:translateZ(48px)}.apartment .roof{transform:translateZ(142px)}
.office .wall{height:110px;transform:translateZ(55px)}.office .roof{transform:translateZ(168px)}
.socialblock .wall{height:84px;transform:translateZ(46px)}.socialblock .roof{transform:translateZ(132px) rotateZ(45deg) scale(.75)}
.city-object:after{pointer-events:none}
.iso-tile.sidewalk .city-object{transform:translateZ(5px)}
.city-viewport.night .city-object{filter:drop-shadow(12px 16px 8px rgba(0,0,0,.38))}

/* fixed road lanes for traffic */
.road-traffic-layer{position:absolute;inset:0;z-index:14;pointer-events:none;transform-style:preserve-3d}
.road-car,.road-bus,.road-tram{position:absolute;border-radius:3px;box-shadow:0 0 0 2px #27313a}
.road-car{width:18px;height:9px;background:#d65d4e}
.road-car.blue{background:#4f82c3}.road-car.yellow{background:#d4ad43}
.road-bus{width:27px;height:11px;background:#e0bd48}
.road-tram{width:34px;height:12px;background:#c64b4b}
.road-horizontal{animation:laneH 9s linear infinite}
.road-horizontal.rev{animation-direction:reverse;animation-duration:11s}
.road-vertical{animation:laneV 10s linear infinite}
.road-vertical.rev{animation-direction:reverse;animation-duration:12s}
@keyframes laneH{0%{left:15%;top:48%}100%{left:78%;top:48%}}
@keyframes laneV{0%{left:46%;top:20%}100%{left:46%;top:73%}}
@media(max-width:650px){.multi-task-bar{align-items:stretch;flex-direction:column}}