/* PC command centre: the simulation is the screen, controls are instruments. */
.game{min-width:1080px}.game-footer{font-size:10px}.game-footer #map-hint{font-size:10px}
.build-panel{width:min(1020px,calc(100% - 410px));max-height:235px;border-top:2px solid #d3b978}
.build-tabs{height:54px;min-height:54px;padding-right:164px}.build-tabs button{font-size:10px;min-width:67px;padding:9px 7px}.build-tabs button>span{font-size:10px}
.tools-list{height:147px;gap:9px;padding:10px}.tool{min-width:118px;flex-basis:118px;max-height:121px;height:121px}.tool .tool-portrait{width:112px;height:74px}.tool-name strong{font-size:11px;line-height:1.15}.tool-name small{font-size:10px;margin-top:5px}.tool-search input{font-size:11px}.tool-detail{max-width:410px}.tool-detail p{font-size:12px;line-height:1.6}.dock-context p{font-size:12px}.dock-context .eyebrow{font-size:10px}.dock-context small{font-size:10px}
.hud-mission p{font-size:11px}.hud-mission strong{font-size:15px}.hud-mission small{font-size:10px}.map-label small{font-size:9px}.map-buttons button{height:35px;min-width:35px}.map-buttons .layers-launch{width:auto;display:flex;gap:7px;padding:0 11px;color:#bddfea}.layers-launch span{font-size:11px}.layers-launch.selected-layer{border-color:#e3bc72;color:#f6d992}
.camera-rotation{position:absolute;right:16px;bottom:250px;z-index:4;display:flex;align-items:center;gap:5px;padding:4px 7px;background:var(--hud);border:1px solid #93bfc641;border-radius:4px}.camera-rotation button{color:#c9e1df;font-size:20px;display:flex;align-items:center;gap:4px;padding:3px 6px}.camera-rotation kbd{font-size:8px;padding:2px 4px}.camera-rotation>span{font-size:10px;font-weight:700;color:#f1c67a;width:16px;text-align:center}
.analysis-panel{position:absolute;z-index:7;left:16px;top:174px;bottom:267px;width:300px;background:var(--hud);border:1px solid #98c5cc4a;border-top:2px solid #87cdd7;border-radius:5px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}.analysis-panel[hidden]{display:none}.analysis-panel>header{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid #abd3d82b}.analysis-panel h3{font-size:19px;margin-top:5px}.analysis-panel .eyebrow{font-size:8px;color:#85d4df}.analysis-panel .icon-button{width:27px;height:27px}.analysis-scroll{overflow-y:auto;padding:12px}.analysis-group{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#84b3be;margin:8px 0}.analysis-layers{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:13px}.analysis-layers button{display:flex;align-items:center;gap:7px;min-height:39px;padding:7px 9px;background:#2546557d;border:1px solid #8abaC326;border-radius:3px;color:#b6d2dc;text-align:left}.analysis-layers span{font-size:10px;line-height:1.3}.analysis-layers svg{flex-shrink:0;color:#719fab}.analysis-layers button.active{background:#386474;box-shadow:inset 2px 0 #a4e6e0;border-color:#9ae3e050;color:#ecffed}.analysis-layers button.active svg{color:#b4f4d4}
.game.analysis-open .hud-left{display:none}.game.analysis-open .map-legend{left:330px;top:174px}.xray-switch{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:13px 2px;border-top:1px solid #81b6c732}.xray-switch span{display:flex;align-items:center;gap:8px}.xray-switch input{width:18px;height:18px}.analysis-description{font-size:11px;color:#a9c6d0;line-height:1.6;padding:3px 0 12px}.analysis-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 12px}.analysis-metrics>div{background:#0c2632b8;border:1px solid #8bbdc527;border-radius:3px;padding:10px}.analysis-metrics b{display:block;font-size:18px;color:#e4deb7;margin-bottom:5px}.analysis-metrics span{font-size:9px;color:#8eb6c1}.analysis-panel .button{font-size:10px;padding:9px 8px}.analysis-panel .button:disabled{opacity:.55}
.map-legend{top:358px;background:var(--hud);border-color:#8ac7d24a;font-size:10px;padding:10px 12px;max-width:224px}.map-legend span{font-size:10px}.legend-gradient{background:linear-gradient(90deg,#e66554,#deb553,#49ccbd)}.legend-gradient.inverse{background:linear-gradient(90deg,#49ccbd,#deb553,#e66554)}
.layer-hover{position:absolute;pointer-events:none;right:195px;bottom:266px;z-index:6;min-width:192px;max-width:280px;padding:13px 17px;background:#102a37f3;border:1px solid #78b6ca75;border-left:3px solid #8dcdd6;border-radius:4px;box-shadow:var(--shadow)}.layer-hover[hidden]{display:none}.layer-hover span{font-size:10px;color:#9ec4cf;display:block}.layer-hover strong{display:block;font-size:25px;color:#dfebce;margin:6px 0}.layer-hover small{font-size:10px;color:#83aebb}
.overview-panel{width:336px;bottom:267px}.overview-panel p{font-size:12px}.growth-checks>div{font-size:11px}.inspect-values div{font-size:12px}.housing-profile{margin:14px 0;padding:13px;background:#254d5366;border:1px solid #99c7ac32;border-radius:4px}.housing-profile h4{font-size:15px;margin:8px 0}.housing-profile p{font-size:11px;color:#a2c2c2;line-height:1.6;margin-bottom:10px}.housing-profile>div{display:flex;justify-content:space-between;font-size:10px;padding:7px 0;border-top:1px solid #b1c6bc1f;gap:8px}.housing-profile b{color:#d9dec1;text-align:right}.building-personality{padding:10px 0;display:flex;flex-wrap:wrap;gap:7px}.building-personality small{display:block;font-size:10px;color:#99b9c4;line-height:1.5}.building-personality button{font-size:10px}
.urban-awards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.urban-awards article{background:#203d48;border:1px solid #8db9a632;border-radius:4px;padding:17px}.urban-awards article.earned{border-color:#90d8a659;background:#26463e}.urban-awards article>div:first-child{display:flex;align-items:center;gap:8px}.urban-awards h3{font-size:14px;flex:1}.urban-awards strong{font-size:12px;color:#e5bb72;white-space:nowrap}.urban-awards p{font-size:11px;color:#a9c5c5;line-height:1.6;margin:12px 0}.urban-awards small{font-size:10px;color:#95b9c2}.urban-awards .growth-track{margin:12px 0 9px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.settings-grid h3{font-size:19px;margin-bottom:20px}.settings-grid label{font-size:12px;margin-bottom:20px}.settings-check{display:flex;gap:10px;align-items:center}.settings-check input{width:18px;height:18px}.settings-grid .muted{font-size:12px;line-height:1.7;margin:15px 0 22px}.game.cinematic .camera-rotation,.game.cinematic .analysis-panel,.game.cinematic .layer-hover{display:none}
#pc-required{display:none}
.production-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}.production-overview>div{padding:15px;border:1px solid #8bc4bd30;background:#20475370;border-radius:4px}.production-overview span{font-size:11px;color:#9cc4c7}.production-overview strong{display:block;font-size:23px;color:#e2d5ae;margin-top:10px}.production-table{width:100%;border-collapse:collapse;margin:20px 0 30px;font-size:12px}.production-table th,.production-table td{text-align:right;padding:12px 8px;border-bottom:1px solid #92b9bd28}.production-table th:first-child{text-align:left}.production-table thead{color:#83bbc4;font-size:10px}.production-table small{display:block;font-size:9px;color:#80aebb;margin-top:4px}.production-sites{display:grid;grid-template-columns:1fr 1fr;gap:9px}.production-sites>button{display:flex;align-items:center;gap:12px;background:#28475399;border:1px solid #91bcb838;border-radius:4px;color:#c5dcda;text-align:left;padding:14px}.production-sites>button>span{flex:1}.production-sites strong{font-size:12px}.production-sites small{display:block;font-size:10px;color:#7eacb7;margin-top:6px}.production-sites b{font-size:11px;color:#e2c784}.housing-breakdown>div{display:flex;justify-content:space-between;font-size:11px;padding:9px 0;border-bottom:1px solid #8bb6bd24}.housing-breakdown b{color:#d1d9bc}.inspect-resources{padding:12px 0;border-top:1px solid #7eb4b82b}.inspect-resources>div{display:flex;align-items:center;justify-content:space-between;font-size:10px;padding:6px 0;color:#8db5c1}.inspect-resources b{color:#becdcc}
@media(min-width:1800px){.build-panel{width:1080px}.tools-list{height:157px}.tool{height:131px;max-height:131px;min-width:131px;flex-basis:131px}.tool .tool-portrait{width:120px;height:80px}.tool-name strong{font-size:12px}.tool-name small{font-size:11px}.hud-left{width:260px}.overview-panel{width:365px}.analysis-panel{width:318px}.game.analysis-open .map-legend{left:348px}}
@media(max-width:1279px){.build-panel{width:calc(100% - 330px);left:164px;transform:none}.build-tabs{padding-right:0}.tool-search{top:-37px;width:176px}.overview-panel{width:304px}.analysis-panel{width:272px}.game.analysis-open .map-legend{left:301px}.layers-launch span{display:none}.map-label small{font-size:7px}.map-buttons .layers-launch{min-width:35px;padding:0 8px}.map-top{gap:12px}.camera-rotation{bottom:250px}}
@media(max-height:780px){.analysis-panel,.overview-panel{top:163px;bottom:232px}.build-panel{max-height:201px}.tools-list{height:134px}.tool{height:111px;max-height:111px}.tool .tool-portrait{height:65px}.tool-name strong{font-size:10px}.build-tabs{height:48px;min-height:48px}.layer-hover{bottom:231px}.camera-rotation{bottom:250px}.analysis-panel>header{padding:8px 12px}.analysis-panel h3{font-size:17px}.analysis-scroll{padding:9px}.analysis-layers{gap:4px}.analysis-layers button{min-height:35px}.analysis-layers span{font-size:9px}}
@media(max-width:1023px){#pc-required{display:flex;position:fixed;inset:0;z-index:1000;background:#102635f7;align-items:center;justify-content:center;text-align:center;padding:50px;color:#dbecd8;flex-direction:column;gap:17px}#pc-required h2{font-size:28px}#pc-required p{max-width:430px;line-height:1.8;color:#9dbecc}}

.map-generation-options{margin:16px 0}.map-generation-options>div{padding-top:22px}.map-generation-options .button{font-size:11px}.map-generation-options span{display:block;margin-top:9px}.terrain.islands{background:radial-gradient(ellipse at 30% 45%,#a9b990 20%,transparent 22%),radial-gradient(ellipse at 72% 60%,#a9b990 25%,transparent 27%),#82b6c4}.terrain.highland{background:linear-gradient(25deg,#818d80 20%,#b5b09a 21%,#809270 40%,#929989 42%,#cdc6b7 80%)}.terrain.farmland{background:repeating-linear-gradient(15deg,#97ac77 0 12px,#b7b48b 13px 25px)}

.planning-tabs{overflow-x:auto;flex-wrap:nowrap}.planning-tabs button{flex-shrink:0;white-space:nowrap}

#performance-badge{font-variant-numeric:tabular-nums;white-space:nowrap;color:#d8c791;font-size:10px}#performance-badge[hidden]{display:none!important}.tool:focus{background:linear-gradient(150deg,#47665f,#2a4c59);border-color:#b6d6c7}.tool.selected:focus{background:linear-gradient(#806b3b,#365047)}.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}.settings-grid h3{font-size:16px}.settings-grid label{margin-bottom:15px}.settings-grid .muted{font-size:11px;line-height:1.6}

.comparison-table{width:100%;border-collapse:collapse;font-size:11px;color:#c9d7c4}.comparison-table th{text-align:left;color:#a4bcad}.comparison-table th,.comparison-table td{padding:9px 7px;border-bottom:1px solid #829c9633}.comparison-table button{font-size:10px}.scenario-callout{border:1px solid #d2b77455;background:#47513b33;padding:14px;margin-bottom:20px}.scenario-callout strong{color:#e4cf95}.scenario-callout p{font-size:12px;margin:9px 0}.scenario-callout .button{font-size:11px}

.game-header .brand-button{width:39px;height:39px;min-width:39px;display:grid;place-items:center;position:relative;border:1px solid #8cb9b641;border-radius:4px;color:#c2d6c4;background:#234a5399}.game-header .city-title{position:static;min-width:155px;flex-shrink:0;padding-left:0;border:0}
.game-header .brand-button{position:absolute;left:16px;top:14px;width:43px;height:72px}.game-header .city-title{position:absolute;top:14px;left:64px;width:174px;max-width:174px;min-width:0;height:72px;display:flex;flex-direction:column;justify-content:center;padding:12px!important;background:var(--hud);border:1px solid #8cb9b641!important;border-radius:4px;pointer-events:auto}.game-header .city-title>.eyebrow{display:block;font-size:8px;letter-spacing:1px;margin-bottom:9px}.game-header .city-name{font-size:13px;max-width:150px;min-height:18px}

/* Short feedback only: no permanent motion or animated large backdrops. */
.modal{animation:municipal-panel-in .18s cubic-bezier(.2,.8,.2,1) both}
.analysis-panel:not([hidden]),.overview-panel:not(.closed){animation:municipal-side-in .17s ease-out both}
.tool{transition:transform .13s ease-out,border-color .13s ease-out,box-shadow .13s ease-out;animation:municipal-tool-in .17s ease-out backwards}.tool.locked{animation:none}
.tool:nth-child(2){animation-delay:.018s}.tool:nth-child(3){animation-delay:.036s}.tool:nth-child(4){animation-delay:.054s}.tool:nth-child(5){animation-delay:.072s}.tool:nth-child(6){animation-delay:.09s}.tool:nth-child(7){animation-delay:.108s}.tool:nth-child(8){animation-delay:.126s}
.tool.selected{border-color:#f0cf89;box-shadow:inset 0 -3px #e3c784,inset 0 1px #f4dfb02b,0 3px 12px #07192366}
.tool.selected .tool-name strong{color:#fff0c9}.tool.selected .tool-name small{color:#f3d397}
.tool:hover:not(:disabled){box-shadow:inset 0 1px #d4eee522,0 4px 12px #07192355}
.tool:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 9px #0a25345c}
.build-tabs button,.planning-tabs button,.analysis-layers button,.map-buttons button,.camera-rotation button,.time-controls button,.button{transition:border-color .12s ease-out,background-color .12s ease-out,color .12s ease-out,box-shadow .12s ease-out}
.build-tabs button.active{background:linear-gradient(0deg,#d7bc7022,transparent 90%);text-shadow:0 0 12px #e9c77e33}
.map-buttons button:hover,.camera-rotation button:hover,.analysis-layers button:hover{border-color:#b6d4c888;box-shadow:inset 0 1px #d8efdd1c,0 2px 7px #081b2b44}
.map-buttons button:active,.camera-rotation button:active,.time-controls button:active{box-shadow:inset 0 2px 7px #081b2b99}
.game button:focus-visible,.modal button:focus-visible,.game select:focus-visible,.modal input:focus-visible,.modal select:focus-visible{outline:2px solid #f3d397;outline-offset:3px}
.build-preview:not([hidden]){animation:municipal-readout-in .13s ease-out both}.build-preview>div>strong{color:#e4f4dc}.build-preview.invalid>div>strong{color:#ffd2bd}
.toast{animation:municipal-toast-in .2s cubic-bezier(.2,.8,.2,1) both}.toast.good{border-left-color:#a8e2b8}.toast.bad{border-left-color:#efac8e}
@keyframes municipal-panel-in{from{opacity:.35;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes municipal-side-in{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes municipal-tool-in{from{opacity:.3}to{opacity:1}}
@keyframes municipal-readout-in{from{opacity:.2}to{opacity:1}}
@keyframes municipal-toast-in{from{opacity:.2;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.modal,.analysis-panel,.overview-panel,.tool,.toast,.build-preview{animation:none!important;transition:none!important}.tool:hover:not(:disabled),.tool:active:not(:disabled){transform:none}}