/* World-first city interface: goals explain decisions; details stay on demand. */
:root{--city-paper:#f8ebcf;--city-ink:#102a2b;--city-line:#91d9bf44}body{font-size:calc(16px * var(--ui-scale,1))}main{max-width:1600px;padding:0 20px 24px}.site-head{padding:10px 20px;font-size:calc(14px * var(--ui-scale,1));height:48px}.city-heading{padding:12px 0 6px;gap:12px}.city-heading h1{font-size:calc(27px * var(--ui-scale,1))}#save-status{font-size:calc(12px * var(--ui-scale,1))}.district-head{padding:6px 0 10px;align-items:center}.district-head h2{font-size:calc(18px * var(--ui-scale,1))}.district-head #scale{display:none}#region-label{margin:0;color:var(--muted);font-size:calc(12px * var(--ui-scale,1))}.district-head nav button{min-width:44px;min-height:44px}.goal-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:14px 16px;background:linear-gradient(110deg,#25463e,#182f34);border:1px solid #e5c57a66;border-radius:12px;margin:0 0 10px}.goal-strip .eyebrow{font-size:calc(11px * var(--ui-scale,1));margin-bottom:4px}.goal-copy h2{font-size:calc(21px * var(--ui-scale,1));margin:0}.goal-copy p{font-size:calc(14px * var(--ui-scale,1));line-height:1.45;margin:5px 0}.goal-copy progress{display:block;width:100%;height:5px;accent-color:var(--mint)}.goal-actions{display:flex;flex-direction:column;gap:6px;justify-content:center}.goal-actions button{font-size:calc(14px * var(--ui-scale,1));min-height:44px;max-width:245px}.goal-actions .secondary-action{background:transparent;color:#f1dfb9;border-color:var(--city-line)}.city-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}.city-tools button{font-size:calc(14px * var(--ui-scale,1));min-height:44px;background:#203d3b;color:#f8ebcf;border-color:var(--city-line)}.city-tools span{font-size:calc(12px * var(--ui-scale,1));color:var(--muted)}#chapter-progress{margin-left:auto}.town-shell{grid-template-columns:minmax(0,1fr) 340px;gap:12px}.town-shell:has(.inspector:not(.selected):not(.show-overview)){grid-template-columns:1fr}.inspector:not(.selected):not(.show-overview){display:none}.inspector{padding:16px;max-height:calc(100dvh - 200px);font-size:calc(15px * var(--ui-scale,1))}.inspector h2{font-size:calc(23px * var(--ui-scale,1))}.inspector h3{font-size:calc(16px * var(--ui-scale,1));margin:18px 0 8px}.inspector p,.inspector small,.action-note{font-size:calc(14px * var(--ui-scale,1))!important;line-height:1.5}.inspector button{min-height:44px;font-size:calc(14px * var(--ui-scale,1))}.inspector .hero-switch{display:grid;grid-template-columns:1fr;gap:6px}.inspector .hero-switch button{font-size:calc(14px * var(--ui-scale,1))}.inspector .metrics span{font-size:calc(13px * var(--ui-scale,1))}.resident-button{min-height:56px;font-size:calc(15px * var(--ui-scale,1))}.resident-button small{font-size:calc(13px * var(--ui-scale,1))!important}.visitor-list{max-height:280px}.place-art{height:100px}.upgrade-choice{padding:12px;border:1px solid var(--city-line);border-radius:10px;background:#142d2d;margin:12px 0}.upgrade-choice h3{margin-top:0}.upgrade-choice button{width:100%}.place-customize{border-top:1px solid var(--city-line);padding-top:12px;margin-top:14px}.place-customize summary{min-height:44px;cursor:pointer;font-size:calc(14px * var(--ui-scale,1))}.map-toolbar{padding:10px 12px;font-size:calc(14px * var(--ui-scale,1));min-height:50px}.map-toolbar button{font-size:calc(13px * var(--ui-scale,1));min-height:44px}.map-toolbar>span{max-width:none}.city-view{height:clamp(340px,calc(100dvh - 335px),780px);max-height:none}.fit .world-stage{width:min(100%,calc((100dvh - 335px)*1.5));margin:auto}.detail .world-stage{width:1320px}.world-status{font-size:calc(13px * var(--ui-scale,1));min-height:34px}.lot-target>span{font-size:calc(13px * var(--ui-scale,1));padding:7px 9px;min-width:94px;box-shadow:0 2px 8px #0005}.lot-target small{font-size:calc(12px * var(--ui-scale,1))}.lot-target.empty>span{background:#173630ef}.lot-target:hover,.lot-target[aria-pressed=true]{border:2px solid var(--gold);background:#f0ce7830}.lot-target{border-radius:12px}.city-dialog{background:#152d30;color:var(--city-paper);border:1px solid #e5c57a77;border-radius:16px;width:min(700px,calc(100vw - 24px));max-height:85dvh;padding:22px;box-shadow:0 20px 80px #0009}.city-dialog::backdrop{background:#061117b8;backdrop-filter:blur(5px)}.dialog-close{float:right;width:44px;height:44px;padding:0;background:#28463f;color:#fff0ce;font-size:calc(24px * var(--ui-scale,1))}.city-dialog h2{font-size:calc(24px * var(--ui-scale,1));margin:8px 0 14px}.city-dialog p,.city-dialog small,.city-dialog .action-note{font-size:calc(15px * var(--ui-scale,1))!important}.city-dialog button{min-height:44px;font-size:calc(15px * var(--ui-scale,1))}.city-dialog .ambition{padding:0;border:0;background:none;margin:0}.city-dialog .project-milestones{grid-template-columns:1fr 1fr}.city-dialog .milestone strong{font-size:calc(14px * var(--ui-scale,1))}.city-dialog .milestone small{font-size:calc(13px * var(--ui-scale,1))!important}.city-dialog .supply-bar{grid-template-columns:repeat(2,1fr);margin:16px 0}.city-dialog .supply span{font-size:calc(14px * var(--ui-scale,1))}.city-dialog .supply small{font-size:calc(12px * var(--ui-scale,1))!important}.city-dialog .supply{min-height:76px}.city-dialog .block-actions{display:flex;flex-wrap:wrap}.city-dialog .fresh-start p{font-size:calc(14px * var(--ui-scale,1))}.city-dialog .next-block-choices{grid-template-columns:1fr}.city-dialog .league-name{display:block;font-size:calc(14px * var(--ui-scale,1))}.city-dialog .league-name input{font-size:calc(16px * var(--ui-scale,1));padding:12px;min-height:44px;width:100%}.city-dialog #network-content>button{display:block;width:100%;margin:6px 0;text-align:left}.region-choice{border:1px solid var(--city-line);padding:14px;border-radius:10px;margin:12px 0}.region-choice h3{font-size:calc(20px * var(--ui-scale,1));margin:0}.region-choice summary{padding:14px 0;cursor:pointer;font-size:calc(14px * var(--ui-scale,1))}.region-choice a{font-size:calc(14px * var(--ui-scale,1))}.region-choice [aria-pressed=true]{outline:2px solid var(--mint)}.arcade-section,.how-it-works{font-size:calc(15px * var(--ui-scale,1))}#feedback{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);max-width:min(700px,90vw);z-index:45;background:#193e35;color:#fff0cb;border-radius:12px;padding:12px 18px;font-size:calc(14px * var(--ui-scale,1));box-shadow:0 5px 30px #0006;pointer-events:none}#feedback:empty{display:none}.city-dialog progress{accent-color:var(--mint)}.city-dialog .primary-action{min-width:0}.opening-hud h2{font-size:calc(21px * var(--ui-scale,1))}.opening-hud p{font-size:calc(14px * var(--ui-scale,1))}.opening-timeline li{font-size:calc(12px * var(--ui-scale,1))}.opening-score{font-size:calc(14px * var(--ui-scale,1))}.opening-skip{font-size:calc(14px * var(--ui-scale,1));min-height:44px}.world-panel:has(#opening-hud:not([hidden])) .city-view{height:clamp(300px,calc(100dvh - 370px),600px);max-height:600px}
@media(max-width:760px){main{padding:0 10px 20px}.site-head{padding:8px 12px;height:44px}.city-heading{padding:10px 0 3px}.city-heading h1{font-size:calc(23px * var(--ui-scale,1))}#save-status{font-size:calc(11px * var(--ui-scale,1));max-width:140px}.district-head{padding:3px 0 7px}.district-head h2{font-size:calc(16px * var(--ui-scale,1))}.district-head #region-label{font-size:calc(11px * var(--ui-scale,1))}.district-head nav button{padding:7px 10px;min-height:40px}.goal-strip{padding:11px 12px;gap:10px;grid-template-columns:minmax(0,1fr) 115px}.goal-copy h2{font-size:calc(18px * var(--ui-scale,1));line-height:1.2}.goal-copy p{font-size:calc(13px * var(--ui-scale,1));line-height:1.4}.goal-strip .eyebrow{font-size:calc(10px * var(--ui-scale,1))}.goal-actions button{font-size:calc(13px * var(--ui-scale,1));padding:9px 8px;min-height:44px}.city-tools{gap:5px;margin-bottom:7px}.city-tools button{font-size:calc(13px * var(--ui-scale,1));padding:8px 10px}.city-tools #visit-count{font-size:calc(12px * var(--ui-scale,1));margin-left:auto}.city-tools #chapter-progress{display:none}.town-shell{grid-template-columns:1fr}.city-view{height:clamp(320px,calc(100dvh - 320px),520px);max-height:none}.detail .world-stage{width:960px}.fit .world-stage{width:100%;margin:0}.map-toolbar{padding:6px 8px;font-size:calc(12px * var(--ui-scale,1));min-height:48px}.map-toolbar>span{max-width:105px;line-height:1.3}.map-toolbar button{font-size:calc(12px * var(--ui-scale,1));padding:8px}.lot-target>span{font-size:calc(13px * var(--ui-scale,1));padding:6px 8px;min-width:98px}.lot-target small{font-size:calc(12px * var(--ui-scale,1))}.inspector.selected,.inspector.show-overview{display:block;position:fixed;bottom:0;left:0;right:0;top:auto;z-index:30;border-radius:16px 16px 0 0;max-height:43dvh;overflow:auto;box-shadow:0 -8px 40px #0008;padding:14px 14px calc(18px + env(safe-area-inset-bottom))}.town-shell:has(.inspector.selected) .city-view,.town-shell:has(.inspector.show-overview) .city-view{height:clamp(220px,calc(100dvh - 590px),300px);max-height:none}.inspector .place-art{float:right;width:85px;height:85px;margin:0 0 6px 10px}.inspector h2{font-size:calc(21px * var(--ui-scale,1))}.inspector .hero-switch{grid-template-columns:1fr 1fr}.world-status{font-size:calc(12px * var(--ui-scale,1))}.city-dialog{padding:16px;max-height:88dvh}.city-dialog .project-milestones{grid-template-columns:1fr 1fr}.city-dialog .supply-bar{grid-template-columns:1fr 1fr}.city-dialog .supply{padding:10px;gap:8px}.city-dialog .supply strong{font-size:calc(24px * var(--ui-scale,1))}.city-dialog .supply span{font-size:calc(13px * var(--ui-scale,1))}.city-dialog .ambition-choices{display:grid;grid-template-columns:1fr}.opening-hud{padding:12px}.opening-hud h2{font-size:calc(19px * var(--ui-scale,1))}.opening-hud p{font-size:calc(13px * var(--ui-scale,1))}.opening-timeline li{font-size:calc(11px * var(--ui-scale,1))}.world-panel:has(#opening-hud:not([hidden])) .city-view{height:320px;max-height:none}#feedback{font-size:calc(13px * var(--ui-scale,1));bottom:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.goal-strip{position:sticky;top:0;z-index:14;box-shadow:0 3px 18px #0003}.city-view{height:clamp(300px,calc(100dvh - 410px),780px)}.detail .world-stage{margin:0}.demo-banner{font-size:calc(12px * var(--ui-scale,1));padding:5px}.demo-grant{font-size:calc(12px * var(--ui-scale,1));min-height:34px;margin-left:8px;padding:6px 10px}.arcade-drawer{margin-top:16px;padding:12px;border-top:1px solid var(--city-line)}.arcade-drawer>summary{font-size:calc(15px * var(--ui-scale,1));min-height:44px;cursor:pointer}.arcade-drawer .arcade-section{margin-top:10px}@media(max-width:760px){.goal-copy p{font-size:calc(14px * var(--ui-scale,1))}.goal-strip{top:0}.demo-banner{font-size:calc(11px * var(--ui-scale,1));line-height:1.3}.demo-grant{display:block;margin:4px auto 0}.city-view{height:clamp(300px,calc(100dvh - 365px),500px)}.town-shell:has(.inspector.selected) .city-view,.town-shell:has(.inspector.show-overview) .city-view{height:220px}}

.city-tools{position:sticky;top:calc(var(--goal-height,150px) + 5px);z-index:13;background:#0d191ef5;padding:5px 0}.world-panel{scroll-margin-top:calc(var(--goal-height,150px) + 70px)}.city-view{cursor:grab;user-select:none}.city-view.panning{cursor:grabbing}.city-view .lot-target{cursor:pointer}.city-view.fit .lot-target>span{min-width:70px;font-size:calc(12px * var(--ui-scale,1))}.city-view.fit .lot-target small{font-size:calc(11px * var(--ui-scale,1))}@media(max-width:760px){.world-panel{scroll-margin-top:calc(var(--goal-height,150px) + 80px)}.town-shell:has(.inspector.selected) .city-view,.town-shell:has(.inspector.show-overview) .city-view{height:200px;min-height:200px}.city-tools #visit-count{display:none}}

.lot-target[data-building=true]{border-color:#edc66fcc;box-shadow:0 0 0 3px #edc66f33}.lot-target[data-building=true]>span{background:#584720f0}.city-dialog #city-sound{background:#26463f;color:#f8ebcf}.city-dialog #city-sound[aria-pressed=true]{border-color:var(--mint)}

.opening-active .goal-strip,.opening-active .city-tools,.opening-active .district-head{display:none}.opening-active .world-panel .city-view{height:clamp(260px,calc(100dvh - 450px),540px);max-height:none}.opening-active .world-panel{scroll-margin-top:0}@media(max-width:760px){.opening-active .world-panel .city-view{height:clamp(260px,calc(100dvh - 510px),400px)}}

.city-dialog{overflow:auto}.inspector input{font-size:calc(16px * var(--ui-scale,1));min-height:44px}.inspector .rename{display:flex;gap:6px;flex-wrap:wrap}.inspector .rename input{max-width:100%;flex:1;min-width:140px}

.city-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0}.city-topbar .city-heading{padding:0;display:block}.city-topbar #save-status{font-size:calc(12px * var(--ui-scale,1));max-width:none;margin-top:2px}.city-topbar .district-head{padding:0;gap:14px}.goal-actions{flex-direction:row;align-items:center;max-width:360px}.goal-actions button{min-width:110px}.city-view{height:clamp(320px,calc(100dvh - 335px),780px)}#mobile-goal-details{display:none}.world-panel{position:relative}.world-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;background:#193e35ee;color:#fff0ce;padding:14px 18px;border:1px solid #edc66f55;border-radius:12px;pointer-events:none;font-size:calc(15px * var(--ui-scale,1));box-shadow:0 8px 25px #0004;text-align:center}.opening-active .city-topbar{display:none}@media(max-width:760px){.city-topbar{gap:8px;padding:7px 0}.city-topbar .city-heading h1{font-size:calc(22px * var(--ui-scale,1))}.city-topbar #save-status{font-size:calc(11px * var(--ui-scale,1))}.city-topbar .district-head{gap:6px}.city-topbar #region-label{display:none}.city-topbar .district-head h2{font-size:calc(14px * var(--ui-scale,1));max-width:130px;line-height:1.3}.city-topbar .district-head nav{gap:3px}.city-topbar .district-head nav button{min-width:36px;padding:5px 8px;min-height:44px}.goal-strip{grid-template-columns:minmax(0,1fr) 110px}.goal-actions{flex-direction:column;width:110px;max-width:110px}.goal-actions #goal-details{display:none}.goal-actions button{min-width:0;width:110px}.city-tools #mobile-goal-details{display:block}.city-tools{gap:4px}.city-tools button{padding:8px 9px;font-size:calc(12px * var(--ui-scale,1))}.city-view{height:clamp(300px,calc(100dvh - 330px),520px)}.world-loading{font-size:calc(14px * var(--ui-scale,1));max-width:90%}.town-shell:has(.inspector.selected) .city-view,.town-shell:has(.inspector.show-overview) .city-view{height:200px;min-height:200px}}

.goal-actions{width:350px;max-width:350px;flex-shrink:0}.goal-actions #goal-action{min-width:180px;max-width:none;flex:1}.goal-actions #goal-details{min-width:140px;max-width:none}@media(max-width:760px){.goal-actions{width:110px;max-width:110px}.goal-actions #goal-action{min-width:0;max-width:110px;width:110px;flex:none}}

.world-panel{scroll-margin-top:calc(var(--goal-height,150px) + var(--tools-height,60px) + 14px)}#city-text-size{margin-left:8px;background:#26463f;color:#f8ebcf}.opening-active .world-panel{scroll-margin-top:0}

.city-topbar .city-heading{min-width:0;flex:1}.city-topbar #city-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.city-topbar .district-head{flex-shrink:0}@media(max-width:760px){.town-shell:has(.inspector.selected),.town-shell:has(.inspector.show-overview){padding-bottom:43dvh}.town-shell:has(.inspector.selected) .city-view,.town-shell:has(.inspector.show-overview) .city-view{height:max(140px,calc(57dvh - var(--goal-height,150px) - var(--tools-height,54px) - 100px));min-height:140px}.large-ui .inspector.selected,.large-ui .inspector.show-overview{max-height:35dvh}.large-ui .town-shell:has(.inspector.selected),.large-ui .town-shell:has(.inspector.show-overview){padding-bottom:35dvh}.large-ui .town-shell:has(.inspector.selected) .city-view,.large-ui .town-shell:has(.inspector.show-overview) .city-view{height:max(140px,calc(65dvh - var(--goal-height,190px) - var(--tools-height,100px) - 100px));min-height:140px}}