:root{--ink:#314b44;--muted:#7a8981;--paper:#f7f3e9;--green:#38775d;--line:#e4e7dc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,'Avenir Next',system-ui,sans-serif}.app{max-width:1360px;margin:auto;padding:28px 44px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfe4d7;padding-bottom:24px}.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;font-size:48px;line-height:1}.brand>span{font-weight:800;font-size:29px;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:4px;margin-top:7px}.population{display:flex;gap:12px;align-items:center}.population>span{font-size:32px;background:#e5ebd9;border-radius:50%;width:48px;height:48px;text-align:center}.population strong{font-size:25px}.population small{display:block;font-size:11px;color:var(--muted)}.intro{display:flex;justify-content:space-between;align-items:center;padding:40px 0 28px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:2px;color:var(--muted)}h1{font-family:Georgia,serif;font-weight:400;font-size:48px;letter-spacing:-1.8px;line-height:1.12;margin:15px 0}h1 span{color:#d59d60}.intro p{font-size:13px;color:var(--muted)}.day{display:flex;gap:14px;align-items:center;font-size:45px;color:#d3a059;padding-right:15px}.day span{font-size:12px;line-height:1.7;color:var(--muted)}.workspace{display:grid;grid-template-columns:1.03fr 1fr;gap:24px;align-items:start}.card{background:#fffdf8;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 24px #34544105}.panel-heading{padding:23px 25px 20px;display:flex;justify-content:space-between;align-items:center;gap:8px}h2{font-size:18px;font-weight:650;letter-spacing:-.5px;margin:8px 0 0}.badge{white-space:nowrap;font-size:10px;background:#edf1e6;border:1px solid #e0e7d7;border-radius:20px;padding:7px 10px}.scene{position:relative;background:#dcece6;overflow:hidden}canvas{display:block;width:100%;height:auto;touch-action:manipulation;cursor:pointer}.scene-label{position:absolute;left:20px;top:18px;color:#638278;font-size:10px;pointer-events:none}.dot{display:inline-block;width:6px;height:6px;background:#6a9a70;border-radius:50%;margin-right:4px}.scene-bottom{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:10px;pointer-events:none}.scene-bottom span{padding:7px 10px;border-radius:18px;background:#fffdf8d9}.floating-score{position:absolute;top:30%;width:100%;text-align:center;color:#38775d;font-size:25px;font-weight:750;pointer-events:none;text-shadow:0 2px 0 #fff;transition:opacity .3s}.controls{padding:18px 22px 10px;display:grid;grid-template-columns:1fr auto;gap:10px}.primary,.secondary{font:inherit;font-size:12px;cursor:pointer;border-radius:11px;padding:15px 18px;border:0;font-weight:700}.primary{background:var(--green);color:white}.primary span{float:right;margin-left:18px}.primary:hover:enabled{background:#285f48}.secondary{background:#f2efe5;color:var(--ink)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,label:focus-within{outline:3px solid #dfa554;outline-offset:3px}.controls p{grid-column:1/-1;font-size:10px;color:var(--muted);text-align:center;margin:0 0 5px}.map{position:relative;background:#e9eddc;margin:0 16px;border-radius:14px;padding:19px 20px 12px;overflow:hidden}.park{display:flex;justify-content:center;align-items:center;gap:22px;color:#65916a;font-size:40px;height:58px}.park span{font-size:10px;letter-spacing:1px;color:#809173}.plots{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 14px;position:relative;margin:18px 0}.plots:after{content:'';position:absolute;left:-40px;right:-40px;top:calc(50% - 15px);height:30px;background:#d8d5bc;border-block:3px solid #f8f5e8;pointer-events:none}.plot{height:116px;border:1px dashed #b9c5a8;border-radius:14px;background:#f5f4e870;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#71846d;padding:10px 3px;font:inherit;transition:background .2s,transform .2s}.plot:hover{background:#fff9e9;transform:translateY(-2px)}.plot.selected{border:2px solid #6c9b76;background:#f9f6df}.plot .plus{font-size:25px;color:#9aa98d;line-height:1.5}.plot small{font-size:9px;z-index:1}.plot .plot-name{font-size:9px;margin-top:7px}.mini-house{width:62px;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(3px 4px 0 #53654816)}.mini-roof{height:12px;width:100%;background:#ac6b50;clip-path:polygon(50% 0,100% 100%,0 100%)}.mini-floor{width:100%;height:8px;border-bottom:1px solid #b9956e;background:repeating-linear-gradient(90deg,#ead4aa 0px,#ead4aa 8px,#789c9a 8px,#789c9a 13px,#ead4aa 13px,#ead4aa 20px)}.street{text-align:center;color:#a19e85;font-size:7px;letter-spacing:2px;background:#d8d5bc;padding:12px;margin:22px -20px 0;border-block:3px solid #f8f5e8}.map-decoration{display:flex;align-items:center;justify-content:space-between;color:#65916a;font-size:32px;padding:4px 6px 0}.map-decoration span{font-size:9px;color:#8a987e}.city-note{display:flex;gap:13px;padding:23px 24px 15px}.city-note>span{color:#ca9e57;font-size:25px}.city-note strong{font-size:12px}.city-note p{color:var(--muted);font-size:11px;line-height:1.8;margin:7px 0 0}.save-line{margin:0 24px;padding:14px 0 18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;font-size:9px;color:var(--muted)}.save-line>span{width:100%}.save-line button,.import-label,footer button{border:0;background:none;color:var(--muted);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}input[type=file]{display:none}footer{display:flex;justify-content:space-between;font-size:10px;color:#8d968b;padding:24px 2px}dialog{border:1px solid var(--line);border-radius:24px;max-width:380px;width:calc(100% - 36px);padding:32px;text-align:center;background:#fffdf8;color:var(--ink)}dialog::backdrop{background:#243f3780;backdrop-filter:blur(5px)}dialog p{font-size:14px;line-height:1.7;color:var(--muted)}dialog .primary{width:100%;margin-top:10px}.result-icon{font-size:65px;color:#d49b61;margin-bottom:8px}@media(max-width:850px){.app{padding:22px}.workspace{gap:16px}.panel-heading{padding:18px 16px}h2{font-size:15px}.map{padding-inline:12px;margin-inline:10px}.plots{gap:48px 8px}.controls{padding-inline:14px}.primary,.secondary{padding:14px 10px;font-size:11px}}@media(max-width:650px){.app{padding:18px 14px}.intro{padding:26px 4px 18px}h1{font-size:37px}.intro p{font-size:11px;max-width:260px;line-height:1.7}.day{display:none}.workspace{grid-template-columns:1fr;gap:20px}.brand{font-size:40px}.brand>span{font-size:25px}.eyebrow{font-size:8px;letter-spacing:1.6px}.population strong{font-size:21px}.population>span{width:40px;height:40px;font-size:27px}.scene{max-height:490px}canvas{max-height:490px;object-fit:contain}.city .map{margin-inline:14px}.plot{height:110px}.controls{padding:16px 16px 10px}.primary,.secondary{font-size:12px}.scene-label{font-size:9px}.scene-bottom{left:12px;right:12px}footer{gap:15px;font-size:9px;line-height:1.8}footer span{max-width:200px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}
/* Version 0.2: architecture studio, illustrated neighbourhood and construction. */
.app{max-width:1460px}.intro{padding:28px 0 22px}h1{font-size:43px}.intro h1 br{display:none}.workspace{grid-template-columns:1fr 1.08fr}.project-picker{margin-bottom:24px;background:#edeede;border:1px solid #dde2ce;border-radius:18px;padding:18px;display:grid;grid-template-columns:195px 1fr;gap:16px;align-items:center}.picker-title h2{font-family:Georgia,serif;font-size:23px;font-weight:400;line-height:1.2}.picker-title p{font-size:10px;line-height:1.5;color:#7a8976;margin:8px 0 0}.types{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.type-button{position:relative;text-align:left;background:#faf8ef;border:1px solid #e0e3d6;border-radius:12px;padding:12px;cursor:pointer;color:var(--ink);font:inherit;transition:transform .2s,box-shadow .2s}.type-button:hover{transform:translateY(-3px)}.type-button.chosen{border:2px solid #56856a;padding:11px;box-shadow:0 4px 12px #56734c12;background:#fffcf0}.type-button.chosen:after{content:'✓';position:absolute;top:9px;right:10px;color:#56856a;font-size:12px}.type-button strong{display:block;font-size:11px;margin-top:5px}.type-button small{display:block;font-size:8px;line-height:1.5;color:#7e8878;margin-top:4px}.type-art{display:flex;width:35px;height:35px;align-items:center;justify-content:center;font-size:26px;border-radius:9px}.home-art{background:#f0dcba;color:#a77952}.cafe-art{background:#f0d1c4;color:#a76d5a}.library-art{background:#d3e2e4;color:#668d9e}.garden-art{background:#dbe5bd;color:#64815f}.build-meta{display:flex;justify-content:space-between;background:#eef1e5;border-top:1px solid #e3e9d9;padding:9px 21px;color:#7c8b75;font-size:9px}.build-meta span:last-child{color:#4c7b60;font-weight:700}.scene-label{top:10px;left:14px;font-size:9px}.floating-score{top:35%;font-size:24px}.scene-bottom{bottom:8px;left:12px;right:12px}.scene-bottom span{padding:6px 9px}.map{margin:0 14px;padding:0 19px 0;background:#cfdcbc;border:1px solid #c9d5b7;background-image:radial-gradient(#a7be9133 1px,transparent 1px);background-size:8px 8px}.park{height:84px;margin:0 -19px;padding:12px 22px;justify-content:space-between;gap:12px;background:linear-gradient(120deg,#b9d1a8,#dae4bf);border-bottom:5px solid #e5dfc8}.park>span{font-size:9px;letter-spacing:1.4px}.park small{display:block;font-size:8px;letter-spacing:0;margin-top:6px}.park .park-trees{font-size:34px;letter-spacing:-7px;color:#5f8e6a;white-space:nowrap}.park .pond{height:37px;width:70px;border-radius:55% 40% 50% 45%;background:#9cc6bc;border:4px solid #cadab7;box-shadow:inset 0 2px 0 #8fb9ae;transform:rotate(-12deg)}.plots{gap:61px 12px;margin:20px 0 16px;isolation:isolate}.plots:after{top:calc(50% - 24px);height:44px;background:#a4aca3;border-top:5px solid #e6e1ce;border-bottom:5px solid #e6e1ce;z-index:-1}.plots:before{content:'';position:absolute;top:calc(50% - 1px);left:-30px;right:-30px;height:2px;background:repeating-linear-gradient(90deg,#eff0d8 0 17px,transparent 17px 32px);z-index:-1}.plot{height:174px;background:#e7ecd6b3;border:1px dashed #9bb48a;border-radius:8px;padding:6px 3px 10px;justify-content:flex-end;overflow:hidden;min-width:0}.plot.occupied{border:1px solid #bbcda7;background:#e4e9d4;box-shadow:0 3px 0 #a6bc8f33}.plot.selected{border:2px solid #6e9671;background:#f0edcf}.plot svg{display:block;width:100%;height:121px;flex-shrink:0;overflow:hidden}.plot .plot-type{font-size:9px;font-weight:650;margin:0 0 4px;position:relative;z-index:1}.plot small{font-size:9px}.plot .plot-name{font-size:8px;margin-top:4px;color:#89917b}.empty-lot{height:111px;width:100%;display:flex;align-items:center;justify-content:center}.empty-lot>span{display:block;width:53px;height:45px;line-height:45px;background:#d2ddbf;border:1px dashed #9caf8c;transform:skewY(-8deg);font-size:24px;color:#7f9b74;border-radius:5px;box-shadow:7px 7px 0 #bdcfa344}.street{margin:0 -19px;padding:14px 0 13px;background:#9ea9a1;border-block:5px solid #e8e1cd;position:relative;color:#edf0e0;font-size:7px}.street:after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:repeating-linear-gradient(90deg,#eff0d855 0 17px,transparent 17px 34px)}.street span{position:relative;z-index:1;background:#9ea9a1;padding:0 9px}.car{position:absolute;left:12%;top:5px;width:24px;height:11px;border-radius:4px;background:#d4a360;box-shadow:2px 2px 0 #52615544;animation:drive 24s linear infinite}.car:after{content:'';position:absolute;inset:2px 7px;border-radius:2px;background:#8ca7a4}.car.second{background:#ba7866;top:auto;bottom:4px;left:75%;animation-direction:reverse;animation-duration:30s}.map-decoration{position:relative;margin:0 -19px;padding:15px 16px 18px;background:#a9cdc1;border-top:8px solid #d9d4b8;color:#638f86}.map-decoration:after{content:'≈     ≈      ≈      ≈      ≈';position:absolute;bottom:2px;left:18px;color:#d7e5cf;font-size:16px;letter-spacing:18px;white-space:nowrap}.map-decoration span{font-size:8px;color:#5c8b82}.map-decoration .riverside{letter-spacing:1.7px;font-size:7px}.city-note{padding-top:17px;padding-bottom:12px}.city-note p{font-size:10px}.save-line{padding-top:10px;padding-bottom:14px}dialog #rebuild{width:100%;font-size:11px;margin-top:5px}dialog #rebuild[hidden]{display:none}@keyframes drive{from{transform:translateX(-80px)}to{transform:translateX(360px)}}@media(max-width:1050px){.project-picker{grid-template-columns:1fr}.picker-title{display:flex;align-items:center;gap:15px}.picker-title h2{font-size:20px;margin:0}.picker-title p{margin:0;margin-left:auto}.picker-title .eyebrow{display:none}.plot{height:164px}.plot svg{height:112px}.types{gap:8px}}@media(max-width:700px){.workspace{grid-template-columns:1fr}.app{padding:16px 12px}.intro{padding:23px 3px 15px}.intro h1{font-size:32px;line-height:1.2;max-width:330px}.intro p{max-width:340px}.project-picker{padding:13px;gap:13px;margin-bottom:18px}.picker-title{display:block}.picker-title h2{font-size:23px}.picker-title p{margin-top:5px}.types{grid-template-columns:1fr 1fr}.type-button{padding:11px 10px 11px 52px;min-height:79px}.type-button.chosen{padding:10px 9px 10px 51px}.type-art{position:absolute;left:10px;top:15px;width:32px;height:36px}.type-button strong{font-size:10px;padding-right:8px}.type-button small{font-size:8px}.type-button.chosen:after{top:4px;right:5px;font-size:10px}.scene{max-height:none}canvas{max-height:none}.scene-label{font-size:8px}.floating-score{font-size:21px}.map{padding-inline:11px}.park{margin-inline:-11px;padding-inline:12px}.plots{gap:56px 7px;margin-top:15px}.plot{height:161px}.plot svg{height:108px}.plot .plot-type{font-size:8px}.plot small{font-size:8px}.plot .plot-name{font-size:7px}.street,.map-decoration{margin-inline:-11px}.map-decoration span{font-size:7px}.map-decoration:after{letter-spacing:9px}.build-meta{padding-inline:14px;font-size:8px}.panel-heading{padding:18px 15px}.panel-heading h2{font-size:15px}.scene-bottom{font-size:9px}.city .panel-heading h2{font-size:19px}}@media(prefers-reduced-motion:reduce){.car{animation:none}}
.plots:after{background:repeating-linear-gradient(90deg,#edf0d9 0 16px,transparent 16px 31px) center/100% 2px no-repeat,#a4aca3}
/* 0.3 — city planning and pendulum experiment */
.city-dashboard{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;background:#fffdf5;border:1px solid #dfe5d5;border-radius:18px;padding:22px;margin-bottom:24px}.goal strong{display:block;font-size:13px;margin:8px 0}.metric{border-left:1px solid #e4e7dc;padding-left:20px}.metric strong{font-size:29px;display:block;font-family:Georgia,serif;font-weight:400}.metric span{font-size:10px;color:var(--muted)}progress{appearance:none;border:0;background:#e8eddf;border-radius:9px;width:100%;height:7px;overflow:hidden;display:block}progress::-webkit-progress-bar{background:#e8eddf;border-radius:9px}progress::-webkit-progress-value{background:#7b9e70;border-radius:9px}progress::-moz-progress-bar{background:#7b9e70}.need label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:9px}.need label span{color:#7e8d78;font-size:10px}.city-dashboard>p{grid-column:1/-1;font-size:12px;line-height:1.6;margin:0;color:#6c806b}.city-dashboard details{grid-column:1/-1;font-size:11px;color:#6b7d6a}.city-dashboard summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.city-dashboard details p{line-height:1.7}.swing-option{padding:10px 20px;background:#fbf6e6;border-top:1px solid #eee6d2}.swing-option label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700}.swing-option input{accent-color:#38775d;width:16px;height:16px}.swing-option>span{display:block;font-size:9px;color:#889077;line-height:1.5;margin:5px 0 0 25px}.map-hint{font-size:10px;line-height:1.6;margin:0 20px 13px;min-height:32px;color:#6e836e}.neighbourhood{position:relative;padding:12px 0;background:radial-gradient(ellipse at 14% 16%,#e8edc699 0 9%,transparent 10%),radial-gradient(ellipse at 85% 76%,#b0ca9d 0 6%,transparent 7%);isolation:isolate}.plots{grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 7px;margin:0;position:relative;z-index:2;isolation:auto}.plots:before,.plots:after{display:none}.plot,.plot.occupied{border:1px solid transparent;box-shadow:none;border-radius:35% 35% 8px 8px;background:transparent;height:146px;overflow:visible;padding:0 0 7px;min-width:0;transition:background .2s,transform .2s}.plot:nth-child(4n + 2){margin-right:6px}.plot:nth-child(4n + 3){margin-left:6px}.plot svg{height:108px;position:relative;z-index:2;filter:drop-shadow(3px 5px 2px #44613b18)}.plot.occupied:before{content:'';position:absolute;bottom:34px;left:7%;width:86%;height:28px;background:#dce0c7;border:2px solid #ece8d1;transform:skewY(-5deg);border-radius:50%;z-index:0}.plot.selected{background:#faf0b060;border:1px dashed #c3ac62}.plot.in-range{background:#91cba066;border:1px solid #5b9c72;box-shadow:0 0 0 2px #7fba8e22}.plot:hover{background:#fff8dd66;transform:translateY(-2px)}.plot .plot-type{font-size:8px;line-height:1.3;margin-bottom:2px;background:#d4dfbfbb;border-radius:5px;padding:2px 4px;text-align:center}.plot small{font-size:8px}.plot .plot-name{font-size:7px;margin-top:3px;white-space:nowrap;color:#6d8368}.empty-lot{height:97px}.empty-lot>span{background:#d6dfbd77;border-color:#91ac7c;width:45px;height:33px;line-height:30px;box-shadow:5px 5px 0 #91ac7c11;font-size:21px}.plot.locked .empty-lot{opacity:.45}.plot.locked .plot-type{font-weight:400;color:#8c987d}.avenue{position:absolute;left:-20px;right:-20px;height:28px;background:repeating-linear-gradient(90deg,#e7ebcf 0 12px,transparent 12px 24px) center/100% 1px no-repeat,#a3afa0;border-block:4px solid #e6e1c9;z-index:0}.avenue.one{top:159px}.avenue.two{top:343px}.cross-street{position:absolute;top:0;bottom:0;left:calc(50% - 9px);width:18px;background:#d6d7b9;border-inline:2px solid #eeead2;z-index:1}.square{position:absolute;top:calc(50% - 17px);left:calc(50% - 17px);height:34px;width:34px;border-radius:50%;background:#afc7b6;border:5px solid #e5dfc7;z-index:1;color:#f3edc9;text-align:center;line-height:24px}.map{background-color:#cbdcb4}.park{height:72px}.map-decoration{padding-bottom:22px}.city-note p{line-height:1.65}#rebuild{line-height:1.5}@media(max-width:1050px) and (min-width:701px){.workspace{grid-template-columns:1fr}.scene canvas{max-height:540px}.scene{max-height:540px}.plots{gap:38px 16px}.plot svg{width:125px;max-width:100%}}@media(max-width:700px){.city-dashboard{padding:15px;gap:15px 10px;grid-template-columns:1fr 1fr 1fr}.goal{grid-column:1/-1}.metric{padding-left:0;border:0}.metric:nth-child(3){grid-column:2/4}.metric strong{font-size:25px}.need label{display:block;font-size:10px}.need label span{display:block;margin-top:5px;font-size:9px}.city-dashboard>p{font-size:11px}.swing-option{padding-inline:14px}.map-hint{font-size:9px;margin-inline:15px}.map{margin-inline:9px!important;padding-inline:8px}.neighbourhood{padding-top:10px}.plots{gap:33px 3px}.plot,.plot.occupied{height:118px;padding-bottom:5px}.plot svg{height:84px}.plot .plot-type{font-size:6px;padding:1px 2px}.plot small{font-size:7px}.plot .plot-name{font-size:6px}.plot.occupied:before{bottom:30px;height:21px;left:0;width:100%}.empty-lot{height:80px}.empty-lot>span{width:33px;height:27px;line-height:25px;font-size:19px}.avenue{height:24px}.avenue.one{top:132px}.avenue.two{top:283px}.cross-street{width:12px;left:calc(50% - 6px)}.square{width:25px;height:25px;left:calc(50% - 12px);line-height:15px;font-size:12px}.park{padding-inline:10px;height:65px}.park>span{font-size:7px}.park small{font-size:6px}.park .pond{width:46px;height:28px}.park .park-trees{font-size:26px}.plot:nth-child(4n + 2){margin-right:3px}.plot:nth-child(4n + 3){margin-left:3px}}
/* 0.4 — readable playful city and touch-friendly map */
:root{--ink:#304c44;--paper:#f8f5eb;--green:#327958}
body{font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;font-size:14px}
h1,.picker-title h2,.metric strong{font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;font-weight:750;letter-spacing:-.8px}
.intro h1{font-size:clamp(31px,3.7vw,48px)}
.tutorial{border:1px solid #d5e3cc;background:#e9f0dd;border-radius:16px;padding:16px 20px;margin-bottom:20px;font-weight:650;font-size:14px;line-height:1.6;color:#3e7055}
.city-dashboard{gap:18px 22px}.city-dashboard .metric strong{font-size:clamp(25px,2.8vw,38px)}.city-dashboard .goal strong{font-size:14px;line-height:1.5}.need label{font-size:12px}
.map-tools{display:flex;align-items:center;gap:8px;padding:0 18px 14px;flex-wrap:wrap}.map-tools button,.city-actions button{background:#e6efde;border:1px solid #cbd9c3;border-radius:10px;padding:9px 13px;color:#355c47;font:inherit;font-weight:700;cursor:pointer;min-height:38px}.map-tools button:first-child,.map-tools button:nth-child(2){font-size:19px;min-width:38px}.map-tools span{font-size:11px;color:#738576}
.city .map{height:570px;overflow:hidden;touch-action:none;cursor:grab;padding:0;user-select:none}.city .map:active{cursor:grabbing}.map-world{width:980px;transform-origin:0 0;will-change:transform;position:relative;background:#ccddbd;padding:0 10px 14px;min-height:100%}.map-world .park{margin:0 -10px}.map-world .neighbourhood{padding:8px 12px}.map-world .plots{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 8px}.map-world .plot{height:148px;min-width:0}.map-world .plot:nth-child(4n + 2),.map-world .plot:nth-child(4n + 3){margin-left:0;margin-right:0}.map-world .plot:nth-child(6n+3){margin-right:10px}.map-world .plot:nth-child(6n+4){margin-left:10px}.map-world .street,.map-world .map-decoration{margin:0 -10px}.map-world .avenue{width:16px}.map-world .avenue.one{left:33%}.map-world .avenue.two{left:66%}.map-world .cross-street{top:34%;height:21px}.map-world .square{top:34%}
.city-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:15px 24px 10px}.city-actions span{flex:1 1 100%;font-size:12px;line-height:1.5;color:#6b806d}.city-actions button:disabled{opacity:.4}.plot.locked{opacity:.55;filter:grayscale(.35)}
.plot.in-range{outline:2px solid #469d78;outline-offset:-3px}
@media(max-width:700px){.city-dashboard{grid-template-columns:1fr 1fr;gap:15px}.goal{grid-column:1/-1}.metric{padding-left:12px}.need label{font-size:11px}.city-dashboard>p,.city-dashboard details{grid-column:1/-1}.city .map{height:450px;margin-inline:10px}.map-tools{padding-inline:12px}.map-tools span{flex:1 1 100%}.tutorial{padding:13px 15px;font-size:12px}.project-picker .type-button strong{font-size:11px}.project-picker .type-button small{font-size:9px}.city .map-hint{font-size:12px}}

/* v0.5 · readable village and roads */
body{font-size:16px;line-height:1.48;font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif}
button,input{font-family:inherit}
.city-dashboard{background:#fffdf8;box-shadow:0 5px 16px #526c4720}
.metric strong{font-size:clamp(30px,3vw,42px)}.metric span{font-size:13px;line-height:1.5}
.need label{font-size:13px;font-weight:650}.need label span{font-size:12px}
.city-dashboard>p,.map-hint,.map-tools span{font-size:13px;line-height:1.65}
.city-actions{border:2px solid #d5e5ce;background:#f0f6e9;border-radius:18px;padding:16px;gap:10px;margin:18px 20px}
.city-actions #actionText{font-size:16px;font-weight:850;color:#2e6249}
.city-actions .selection-help{font-size:13px;line-height:1.5;flex:1 1 100%;color:#587861}
.city-actions button{background:#fffef6;padding:12px 18px;min-height:45px;font-size:14px;box-shadow:0 2px 0 #b9ceb3}
.city-actions button:disabled{opacity:.48;box-shadow:none}
.plot.focused{outline:4px solid #318968!important;outline-offset:3px;border-radius:16px;background:#e1f5cfb8!important;box-shadow:0 0 0 7px #fffcdfaa!important;z-index:4}
.plot.moving-source{outline:4px solid #e89a3c!important;background:#fff0c2cc!important}
.plot.move-target{outline:2px dashed #3a9c65;outline-offset:-2px;background:#d5f4c655}
.plot .plot-type{font-size:11px!important;font-weight:850!important;line-height:1.3!important}
.plot small,.plot .plot-name{font-size:10px!important;line-height:1.5!important}
.map-world .plot{height:158px}
.map-world .plots{gap:26px 9px;position:relative;z-index:2}
.map-world .neighbourhood{position:relative;isolation:isolate;padding:10px 12px}
.district-roads{position:absolute;inset:0 0 0 0;pointer-events:none;z-index:1}
.district-roads i{position:absolute;display:block;background:#a2ada4;box-shadow:inset 0 4px 0 #efe8d5,inset 0 -4px 0 #efe8d5}
.district-roads .north-south{top:0;bottom:0;width:18px;background:repeating-linear-gradient(to bottom,transparent 0 20px,#eaece0 20px 28px,transparent 28px 45px) center/2px 100% no-repeat,#a2ada4;box-shadow:inset 4px 0 #efe8d5,inset -4px 0 #efe8d5}
.district-roads .north-south.a{left:33.333%}.district-roads .north-south.b{left:66.666%}
.district-roads .east-west{left:0;right:0;height:22px;background:repeating-linear-gradient(90deg,transparent 0 18px,#eaece0 18px 32px,transparent 32px 54px) center/100% 2px no-repeat,#a2ada4}
.district-roads .east-west.r1{top:16.3%}.district-roads .east-west.r2{top:32.9%}.district-roads .east-west.r3{top:49.5%}.district-roads .east-west.r4{top:66.2%}.district-roads .east-west.r5{top:82.8%}
.map-world .avenue,.map-world .cross-street,.map-world .square{display:none}
.city .map{height:630px}
@media(max-width:700px){.city .map{height:490px}.city-actions{margin:15px 10px;padding:13px}.city-actions button{font-size:13px;flex:1}.city-dashboard{gap:15px}.city-dashboard .metric strong{font-size:30px}.plot .plot-type{font-size:10px!important}.plot small,.plot .plot-name{font-size:9px!important}.map-world .plot{height:158px}}

/* v0.6 · upgrade studio, influence and readable economy */
.city-dashboard{grid-template-columns:1.8fr 1fr 1fr 1fr}.city-dashboard .metric{min-width:0}.budget-metric strong{color:#986b35}.budget-metric{background:#fbf4e5;border-radius:14px;padding:10px 12px;border-left:0}.city-actions .impact-details{flex:1 1 100%;background:#fffdf5;border:1px solid #d8e5d6;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.6;color:#42644c}.plot.impact-full{outline:4px solid #50a77c!important;background:#bfe9c3aa!important}.plot.impact-partial{outline:4px solid #dcae55!important;background:#fff0bdaf!important}.plot.impact-out{outline:3px dashed #98a7a2!important;background:#eceeeb77!important}.plot.focused{outline:5px solid #237e62!important}.upgrade-dialog{max-width:510px;width:min(94vw,510px);padding:26px;text-align:left;max-height:90vh;overflow:auto}.upgrade-dialog h2{font-size:25px;margin-bottom:14px}.upgrade-preview{display:flex;align-items:center;justify-content:center;min-height:210px;background:linear-gradient(#e1efe9,#f4f0da);border-radius:16px}.upgrade-preview svg{height:210px;width:230px}.upgrade-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:13px 0}.tier-option{padding:10px 3px;font:inherit;font-size:12px;border:1px solid #cbdacb;border-radius:10px;background:#f7f7ef;color:#355b4e;cursor:pointer}.tier-option.active{background:#d5ead5;border:2px solid #438966;font-weight:800}.tier-option:disabled:not(.active){opacity:.55}.upgrade-impact{font-size:15px;line-height:1.7;color:#43604f;background:#f2f5ea;border-radius:12px;padding:12px}.upgrade-buttons{display:flex;gap:10px;margin-top:12px}.upgrade-buttons button{flex:1;font-size:14px}@media(max-width:920px){.city-dashboard{grid-template-columns:repeat(2,1fr)}.city-dashboard .goal{grid-column:1/-1}}@media(max-width:520px){.city-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}.city-dashboard .metric strong{font-size:26px}.upgrade-tiers{grid-template-columns:repeat(2,1fr)}}

/* 0.6.1: drag-to-relocate + demolition */
.relocation-ghost{position:fixed;z-index:99999;width:110px;height:115px;pointer-events:none;transform:translate(-50%,-75%);filter:drop-shadow(0 14px 14px #1d443e55);opacity:.91;background:#e8f1deaa;border:3px solid #36845b;border-radius:20px;display:grid;place-items:center}
.relocation-ghost[hidden]{display:none!important}.relocation-ghost svg{width:110px;height:105px}.relocation-ghost.invalid{border-color:#c6745b;background:#fae4d6bb}
.plot.moving-source{outline:5px solid #e69f42!important;background:#f9e1ac!important;cursor:grab;touch-action:none}
.plot.drop-candidate{outline:5px solid #42a773!important;background:#b8ecc0!important;box-shadow:0 0 0 8px #6dcc8038!important}
#demolishBuilding{background:#f9eee9;color:#9c4a3d;border:1px solid #e9cdc1}
#undoDemolish{background:#e2f3e4;color:#236943;border:1px solid #aad5b7}
#undoDemolish[hidden]{display:none!important}

/* v0.6.2 — крупный счетчик этажей */
.floor-hud{position:absolute;top:38px;right:14px;z-index:4;display:flex;flex-direction:column;align-items:center;
padding:9px 14px;border:1px solid #dfebdc;background:#fffdf1e8;border-radius:13px;
box-shadow:0 4px 16px #35594a19;pointer-events:none;min-width:112px}
.floor-hud strong{font-size:16px;letter-spacing:.1px;color:#2b624e;font-weight:850}
.floor-hud small{font-size:11px;color:#627c6f;margin-top:3px}
@media(max-width:650px){.floor-hud{top:33px;right:9px;min-width:95px;padding:7px 9px}
.floor-hud strong{font-size:13px}.floor-hud small{font-size:10px}}

/* v0.6.3 — торжественное завершение и декоративные уровни */
#result{max-width:490px;padding:35px 32px;background:linear-gradient(170deg,#fffef9,#f7f1e3);border:2px solid #dfebd8;box-shadow:0 24px 65px #243d3455}
#result .result-icon{font-size:54px;background:#edf2dc;width:78px;height:78px;line-height:78px;margin:0 auto 16px;border-radius:50%;color:#c38c4d}
#resultTitle{font-size:28px;line-height:1.22;margin:15px 0;font-weight:850}
#resultText{font-size:14px;line-height:1.8;max-width:400px;margin:12px auto 20px;color:#4f6960}
.celebrate-title{font-size:15px;font-weight:850;color:#34735a;margin:14px auto 13px}
.reward-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.reward-grid>div{background:#e9efdf;border-radius:12px;min-width:0;padding:13px 4px;display:flex;flex-direction:column;gap:3px}
.reward-grid strong{font-size:19px;color:#2c6650}.reward-grid small{font-size:10px;line-height:1.25;color:#5f786e}
#result .achievement{background:#fff1cc;border:1px solid #ebd697;border-radius:12px;color:#84642f;padding:10px 12px;font-weight:750;font-size:12px}
.upgrade-preview svg{height:250px;width:265px;overflow:visible}
.plot .plot-type{font-weight:800;line-height:1.1}
@media(max-width:550px){#result{padding:26px 20px}#resultTitle{font-size:23px}.reward-grid strong{font-size:16px}.reward-grid small{font-size:9px}}

/* v0.6.4 — showcase view for map-selected buildings */
.building-preview[hidden]{display:none!important}
.building-preview{position:absolute;inset:0;z-index:6;background:linear-gradient(155deg,#b9d7d7 0%,#d6e9d7 54%,#efe7c8 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
.preview-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,#fffbeaa8,transparent 69%);top:2%;left:50%;transform:translateX(-50%);animation:glow-shift 5s ease-in-out infinite alternate}
.preview-art{position:relative;width:min(86%,460px);height:69%;max-height:425px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(9px 18px 8px #355c422f);animation:showcase-in .5s ease-out both,showcase-float 5s 0.5s ease-in-out infinite}
.preview-art svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 1px #e1edd1)}
.preview-description{position:relative;text-align:center;background:#fffdf3d9;border:1px solid #f8f3dd;border-radius:17px;padding:13px 17px;max-width:88%;box-shadow:0 8px 24px #4f68431d}
.preview-description h3{margin:6px 0;font-size:21px;color:#315749}.preview-description p{font-size:14px;margin:6px 0;font-weight:700;color:#4b7660}.preview-description small{font-size:11px;color:#6d8174}
#result .reward-grid{margin:18px 0}#result #retryResult{width:100%;margin-top:9px;padding:15px}#result #closeResult{font-size:15px}#result p{font-size:14px;line-height:1.65}
@keyframes showcase-in{from{opacity:0;transform:translateY(25px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes showcase-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes glow-shift{to{opacity:.65;transform:translateX(-50%) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.preview-art,.preview-glow{animation:none}}
@media(max-width:650px){.preview-art{height:65%}.preview-description h3{font-size:16px}.preview-description p{font-size:12px}.preview-description small{font-size:10px}}

/* v0.6.5: живой двор вокруг увеличенной постройки */
.building-preview{isolation:isolate;background:linear-gradient(180deg,#a9cfd4 0%,#dcead7 62%,#e8e4c6 100%)}
.preview-glow{z-index:0}.showcase-land{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.showcase-hills{position:absolute;bottom:20%;left:-12%;width:130%;height:31%;background:linear-gradient(170deg,#a9c6a4,#86ae86);clip-path:polygon(0 58%,11% 38%,23% 53%,38% 22%,55% 52%,71% 30%,87% 45%,100% 22%,100% 100%,0 100%)}
.showcase-footpath{position:absolute;bottom:15%;height:13%;left:0;right:0;background:linear-gradient(#dfd6b8,#e9ddbe);border-top:4px solid #eff0dd;border-bottom:4px solid #b4c7a2}
.showcase-road{position:absolute;bottom:3%;height:12%;left:0;right:0;background:#9aa8a0;border-top:5px solid #e4e0c7;border-bottom:5px solid #e4e0c7}
.showcase-road:before{content:"";position:absolute;top:49%;left:0;width:100%;height:2px;background:repeating-linear-gradient(90deg,#f9f4d5 0 22px,transparent 22px 44px)}
.showcase-car{position:absolute;top:11%;width:37px;height:17px;border-radius:7px 9px 4px 4px;box-shadow:0 4px 0 #45604b30}
.showcase-car:after{content:"";position:absolute;left:10px;top:3px;width:16px;height:7px;border-radius:3px;background:#d5eeea}
.car-a{background:#deaa64;animation:showcase-drive 13s linear infinite;left:-60px}.car-b{background:#b9766f;top:61%;animation:showcase-drive-back 17s linear infinite;right:-60px}
.showcase-walker{position:absolute;bottom:18%;width:9px;height:19px;background:#62869a;border-radius:4px 4px 2px 2px;animation:showcase-walk 17s linear infinite;left:-30px;transform-origin:bottom center}
.showcase-walker i{position:absolute;top:-8px;left:-1px;width:11px;height:11px;border-radius:50%;background:#d1a27e}
.showcase-walker:before,.showcase-walker:after{content:"";position:absolute;bottom:-8px;width:3px;height:10px;background:#55737d}.showcase-walker:before{left:1px;transform:rotate(14deg)}.showcase-walker:after{right:1px;transform:rotate(-14deg)}
.walker-b{background:#c87f70;animation-delay:-6s;animation-duration:21s;bottom:19%}.walker-c{background:#77926b;animation-delay:-11s;animation-duration:24s;bottom:17%}
.preview-art{z-index:2;height:63%;max-height:385px;margin-bottom:8%;animation:showcase-in .5s ease-out both}
.preview-art svg{filter:drop-shadow(0 8px 6px #314f4830)}
.preview-description{z-index:3;position:absolute;bottom:2%;max-width:90%;box-shadow:0 8px 24px #4f684333;padding:10px 17px}
.preview-description h3{font-size:19px}.preview-description p{font-size:12px}
@keyframes showcase-drive{from{left:-65px}to{left:calc(100% + 70px)}}
@keyframes showcase-drive-back{from{right:-65px}to{right:calc(100% + 70px)}}
@keyframes showcase-walk{from{left:-30px}to{left:calc(100% + 30px)}}
/* Ландшафт за пределами кварталов: луга, холмы и обработанные поля */
.map-world{isolation:isolate;background:linear-gradient(160deg,#b9d1a6,#d9dfb1 48%,#a5c68f 100%)}
.map-world .landscape{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 8% 23%,#98bd86 0 8%,transparent 9%),radial-gradient(ellipse at 96% 65%,#a4c78d 0 12%,transparent 13%)}
.landscape-hill{position:absolute;width:45%;height:28%;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#a4c88f 0%,#91b780 55%,#84ab7a 100%);opacity:.85;filter:blur(2px)}
.hill-a{top:8%;left:-27%;transform:rotate(-20deg)}.hill-b{bottom:7%;right:-30%;transform:rotate(14deg)}
.landscape-field{position:absolute;width:28%;height:15%;border:4px solid #c7bd91;border-radius:38% 10% 30% 8%;background:repeating-linear-gradient(160deg,#c9d6a0 0 10px,#abc58b 10px 17px,#dfd6a6 17px 21px);opacity:.7}
.field-a{top:23%;left:-17%;transform:rotate(15deg)}.field-b{top:52%;right:-18%;transform:rotate(-11deg)}.field-c{bottom:3%;left:-17%;transform:rotate(-9deg)}
.landscape-trees{position:absolute;bottom:12px;right:2%;font-size:30px;color:#6f9872;opacity:.7}
.map-world .park,.map-world .neighbourhood,.map-world .street,.map-world .map-decoration{position:relative;z-index:1}
.map-world .neighbourhood{background:linear-gradient(#d3e5bd,#cfdfba);border-inline:6px solid #bfd2a5}
.map-world .plots{z-index:2}
.rebuild-dialog{max-width:440px;text-align:center}.rebuild-dialog h2{font-size:25px;line-height:1.3}.rebuild-dialog p{font-size:14px;color:#6b8075;line-height:1.7}
.rebuild-buttons{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:20px}.rebuild-buttons button{font-size:13px}
@media(max-width:650px){.preview-art{height:60%}.preview-description{bottom:3%;padding:9px 11px}.preview-description h3{font-size:15px}.preview-description p{font-size:11px}.rebuild-buttons{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.showcase-car,.showcase-walker{animation:none}.car-a{left:18%}.car-b{right:18%}.walker-a{left:24%}.walker-b{left:66%}.walker-c{left:44%}}

/* v0.6.6 — контрастный природный пояс вокруг кварталов */
.map-world{width:1280px!important;padding:0!important;background:#9fbd8d!important}
.map-world .park,.map-world .neighbourhood,.map-world .street,.map-world .map-decoration{width:980px;margin-left:150px!important;margin-right:150px!important}
.map-world .landscape{background:linear-gradient(115deg,#8bae7b 0%,#adc88a 35%,#d5d5a0 80%,#a3c183 100%)}
.nature-river{position:absolute;inset:0;height:100%;width:100%;z-index:2;opacity:.88;filter:drop-shadow(5px 2px 0 #8bac8c)}
.nature-meadow,.nature-forest,.nature-farmland{position:absolute;z-index:1;display:grid;place-items:center;overflow:hidden;color:#426b4d;font-size:10px;font-weight:800;letter-spacing:2px}
.nature-meadow{left:3%;bottom:3%;height:22%;width:30%;border-radius:55% 45% 16% 55%;background:radial-gradient(#f6e3a7 1.5px,transparent 2.4px) 0 0/19px 19px,radial-gradient(#e9ced3 2px,transparent 3px) 6px 6px/26px 25px,#9fc98b}
.nature-forest{right:1%;top:5%;width:26%;height:29%;border-radius:36% 55% 32% 28%;background:radial-gradient(ellipse,#3c7e5d 28%,transparent 34%) 0 0/34px 44px,radial-gradient(ellipse,#5b9770 32%,transparent 37%) 13px 15px/37px 41px,#7ca878}
.nature-farmland{right:0;bottom:13%;width:29%;height:23%;transform:rotate(-11deg);border-radius:20px 30px 8px 20px;background:repeating-linear-gradient(135deg,#c7ba80 0 12px,#e4d49d 12px 20px,#a6b67f 20px 27px,#d4c68b 27px 35px)}
.nature-meadow span,.nature-forest span,.nature-farmland span{background:#fff9dfc9;padding:5px 7px;border-radius:9px;transform:rotate(0deg)}
.tower-entry{order:2;border:2px solid #c7a25c;border-radius:15px;padding:6px 12px;background:#fff4ca;color:#536b4c;font:800 14px ui-rounded,system-ui;cursor:pointer;box-shadow:0 4px 0 #c5ad7580}
.tower-entry small{display:block;font-size:10px;margin-top:3px}
.tower-dialog{max-width:550px;width:calc(100% - 24px);padding:22px}.tower-title h2{font-size:26px}.tower-title p{font-size:13px;line-height:1.5;color:#678276}
.tower-stage{position:relative;max-width:460px;margin:10px auto}.tower-stage canvas{width:100%;height:auto;border-radius:15px;touch-action:manipulation}
.tower-stats{position:absolute;top:12px;left:12px;background:#fffbedeb;border-radius:10px;padding:8px 12px;display:grid;gap:3px}
.tower-stats strong{font-size:18px}.tower-stats span{font-size:12px}
.tower-buttons{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;margin-top:12px}.tower-buttons button{padding:12px 8px}
#towerMessage{font-size:13px;min-height:20px;text-align:center;color:#537c67}
.cancel-construction{grid-column:1/-1;color:#956443;background:#f5e7d6}
@media(max-width:650px){.tower-buttons{grid-template-columns:1fr 1fr}.tower-buttons #towerDrop{grid-column:1/-1}.tower-dialog{padding:14px}}

/* v0.6.7 — no bare map gaps, readable progression */
.city .map{background:repeating-linear-gradient(125deg,#a9c58f 0 38px,#b5d09b 38px 76px,#acc890 76px 114px)!important}
.map-world .landscape{background:linear-gradient(115deg,#8bae7b 0%,#adc88a 35%,#d5d5a0 80%,#a3c183 100%)}
.nature-meadow,.nature-forest,.nature-farmland{color:transparent;font-size:0}
.next-goal{margin:0 0 18px;padding:17px 21px;border:1px solid #d5e4ca;background:#fdfcf3;border-radius:20px;color:#335e4d;box-shadow:0 4px 16px #446a3b0a}
.next-goal-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.next-goal h2{font-size:20px;margin:5px 0}.next-goal p{font-size:12px;color:#6b8270;margin:3px 0 0}.goal-prize{background:#f8efd5;padding:9px 12px;border-radius:12px;font-size:12px;font-weight:700;white-space:nowrap}
.goal-tracks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px}.goal-tracks label{font-size:12px;display:flex;justify-content:space-between;margin-bottom:8px;gap:5px}.goal-tracks progress{height:11px}
.tower-milestones{padding:12px 14px;border-radius:12px;background:#edf2e5;margin:12px 0;color:#375b4b;text-align:left}.tower-milestone-head{display:flex;justify-content:space-between;gap:12px;font-size:12px}.tower-milestones progress{height:10px;margin:8px 0}.tower-milestones small{font-size:11px;color:#647c65}
@media(max-width:650px){.next-goal{padding:14px}.next-goal-heading{align-items:flex-start}.next-goal h2{font-size:16px}.goal-prize{white-space:normal;text-align:center;font-size:10px}.goal-tracks{grid-template-columns:1fr;gap:11px}}

/* v0.6.8: actionable income and tower shortcut */
.collect-coin{position:absolute;right:-7px;top:-5px;z-index:20;border:2px solid #f6d67b;background:#ffedaf;
 color:#76501f;border-radius:16px;padding:4px 7px;font-size:12px;line-height:1;white-space:nowrap;
 box-shadow:0 3px 9px #62522e4d;cursor:pointer;font-weight:900;animation:coin-pop 2.5s ease-in-out infinite;touch-action:manipulation}
.collect-coin:focus-visible{outline:3px solid #368d6c;outline-offset:3px}
@keyframes coin-pop{50%{transform:translateY(-3px)}}
.income-rate{display:block;color:#667f65;font-size:11px;line-height:1.45;margin-top:6px;font-weight:700}
.tower-shortcut{background:linear-gradient(135deg,#ffe9a4,#efc768)!important;border:2px solid #bd8b30!important;color:#554021!important;
 font:900 13px ui-rounded,system-ui,sans-serif;box-shadow:0 3px 0 #a98a4770;border-radius:12px;white-space:nowrap;padding:10px 13px!important}
.tower-shortcut:hover{filter:brightness(1.04)}
@media(max-width:700px){.collect-coin{right:-4px;top:-8px;padding:4px 5px;font-size:10px}
.tower-shortcut{font-size:11px!important;white-space:normal;max-width:180px}}
@media(prefers-reduced-motion:reduce){.collect-coin{animation:none}}

/* v0.7 economy and new buildings */
.project-picker .types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.type-button.locked{opacity:.65;cursor:not-allowed;background:#eae9df}
.type-button.locked strong:after{content:" 🔒";font-size:.8em}
@media(max-width:800px){.project-picker .types{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v0.7.1: compact mobile game layout */
@media(max-width:700px){
 html{scroll-padding-top:12px}body{overflow-x:hidden}.app{padding:10px 12px 70px;max-width:100vw}
 .app>header{padding:8px 2px 12px}.app>header .brand{font-size:20px}
 .hero,.intro,.welcome{display:none!important}
 .mobile-status{display:flex;position:sticky;top:0;z-index:30;align-items:center;justify-content:space-between;gap:5px;background:#f7f3e9f2;border:1px solid #dce6d3;border-radius:15px;padding:10px 9px;margin:8px 0;box-shadow:0 4px 15px #314b4414;font-size:13px}
 .mobile-status button{border:0;background:#e1ead8;color:#315b49;padding:9px;border-radius:9px;font-weight:750;font-size:12px}
 .workspace{display:flex!important;flex-direction:column;gap:12px;min-width:0}
 .workspace>.builder{order:0}.workspace>.city{order:1}
 .workspace>.card,.project-picker,.city-dashboard,.next-goal{min-width:0;width:100%;margin:8px 0;padding:14px!important;border-radius:18px}
 .builder .panel-heading,.city .panel-heading{gap:8px}.builder .panel-heading h2,.city .panel-heading h2{font-size:19px}
 .scene{max-height:65svh;min-height:290px}.scene canvas{max-height:65svh}
 .controls{gap:8px}.controls button{min-height:46px}
 .city .map{height:55svh;min-height:320px;max-height:550px;touch-action:none}
 .map-tools{display:flex;flex-wrap:wrap;gap:6px}.map-tools>span{font-size:11px;flex-basis:100%}.map-tools button{min-height:40px}
 .project-picker{order:3}.city-dashboard{order:4}.next-goal{order:5}.mobile-tutorial{order:6}
 .project-picker.mobile-picker-closed .picker-title,.project-picker.mobile-picker-closed .types{display:none!important}
 .mobile-choose{display:block;width:100%;border:1px solid #c9d9c4;background:#e7efde;color:#315b49;border-radius:12px;padding:13px;font-weight:800;text-align:left}
 .project-picker .types{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .city-dashboard.mobile-collapsed:not(.mobile-expanded),.next-goal.mobile-collapsed:not(.mobile-expanded){display:none!important}
 .city-dashboard.mobile-expanded,.next-goal.mobile-expanded{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:12px}
 .city-dashboard .goal,.city-dashboard .metric,.city-dashboard .need{min-width:0;max-width:100%;overflow-wrap:anywhere}
 .city-dashboard .metric strong{font-size:27px}.city-dashboard .budget-metric{max-width:100%}
 .city-actions{max-width:100%;overflow-wrap:anywhere}.city-actions button{font-size:13px}
 .mobile-coach{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:16px;right:16px;z-index:200;background:#fffdf3;border:2px solid #6b9d7e;box-shadow:0 12px 60px #223c3590;border-radius:20px;padding:17px;color:#314b44}
 .mobile-coach strong{font-size:18px}.mobile-coach p{margin:9px 0 13px;line-height:1.4}.mobile-coach>div{display:flex;gap:8px;justify-content:flex-end}.mobile-coach button{border:0;border-radius:10px;padding:10px 15px;background:#e4ebdc;color:#314b44;font-weight:700}.mobile-coach #coachNext{background:#38775d;color:white}
 .coach-highlight{outline:3px solid #d4ad53;outline-offset:2px}
 dialog{max-width:calc(100vw - 22px)!important;max-height:90svh;overflow-y:auto}
}
@media(min-width:701px){.mobile-status,.mobile-choose,.mobile-coach{display:none!important}}

/* v0.7.2 — MOBILE GAME SCREEN: map/build/selection/progress, not a long article */
@media(max-width:700px){
 :root{--mobile-dock-height:calc(64px + env(safe-area-inset-bottom,0px))}
 html{scroll-behavior:auto;scroll-padding-top:0}
 body.mobile-game{background:#f6f3e9;overflow-x:hidden;padding-bottom:var(--mobile-dock-height)}
 .mobile-game .app{max-width:100vw;width:100%;padding:0 10px 20px}
 .mobile-game .app>header{height:55px;min-height:55px;padding:4px 5px 4px 8px;gap:8px;border-bottom:0}
 .mobile-game .app>header .brand{font-size:30px;gap:6px;min-width:0}
 .mobile-game .app>header .brand>span{font-size:22px;font-weight:900;letter-spacing:-.8px;white-space:nowrap}
 .mobile-game .app>header .brand small{font-size:7px;letter-spacing:2.5px;margin-top:3px}
 .mobile-game .app>header .population{display:none}
 .mobile-game .intro,.mobile-game .day{display:none!important}
 .mobile-game .game-mobile-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.38fr;gap:5px;align-items:center;background:#fffdf7;border:1px solid #e1e7d8;border-radius:14px;padding:6px;margin:0 0 9px;box-shadow:0 3px 15px #56705113;min-height:51px}
 .mobile-game .ms-resource{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;font-size:12px;font-weight:850;color:#355c49;white-space:nowrap}
 .mobile-game .ms-resource b{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
 .mobile-game .ms-resource span{font-size:13px}
 .mobile-game .ms-project{font:800 11px ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#335b48;border:1px solid #c5d7bd;border-radius:10px;background:#eaf2df;display:flex;align-items:center;justify-content:center;gap:3px;min-height:39px;padding:4px 7px;min-width:0}
 .mobile-game .ms-project span#mPickLabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 .mobile-game .workspace{display:block!important;margin:0!important;min-width:0;gap:0!important}
 .mobile-game .workspace>.card{width:100%;min-width:0;padding:0!important;margin:0!important;border-radius:17px;box-shadow:0 5px 20px #3257460d;overflow:hidden}
 body.mobile-game[data-mobile-tab="city"] #builder{display:none!important}
 body.mobile-game[data-mobile-tab="build"] .workspace>.city{display:none!important}
 body.mobile-game[data-mobile-tab="goals"] .workspace{display:none!important}
 .mobile-game .city .panel-heading,.mobile-game #builder .panel-heading{padding:12px 14px 9px;min-height:60px;gap:7px}
 .mobile-game .city .panel-heading h2,.mobile-game #builder .panel-heading h2{font-size:18px;margin-top:3px;line-height:1.15}
 .mobile-game .city .panel-heading .eyebrow,.mobile-game #builder .panel-heading .eyebrow{letter-spacing:1.25px;font-size:8px}
 .mobile-game .city .badge,.mobile-game #builder .badge{font-size:10px;padding:5px 8px}
 .mobile-game .map-hint{display:none!important}
 .mobile-game .city .map-tools{padding:3px 11px 8px;gap:6px;display:flex;flex-wrap:nowrap;overflow:hidden}
 .mobile-game .city .map-tools button{padding:5px 10px;min-height:36px;flex:0 0 auto;font-size:14px}
 .mobile-game .city .map-tools button#mapCenter{font-size:12px}
 .mobile-game .city .map-tools button#towerShortcut{font-size:11px!important;padding:6px 7px!important;flex:1 1 auto;min-width:0;max-width:none;line-height:1.15}
 .mobile-game .city .map-tools>span{display:none!important}
 .mobile-game .city .map{height:min(55svh,calc(100vw - 40px))!important;min-height:270px!important;max-height:650px!important;margin:0 9px 9px!important;padding:0!important;border-radius:12px!important;touch-action:none!important;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
 .mobile-game .city .map *{touch-action:none}
 .mobile-game .city .map .plot{cursor:pointer}
 .mobile-game .city-note{display:none!important}
 .mobile-game .city-actions{display:none!important;margin:8px 9px 12px;padding:12px;gap:8px;border-radius:13px}
 .mobile-game.mobile-has-selection .city-actions{display:flex!important}
 .mobile-game .city-actions #actionText{font-size:15px}
 .mobile-game .city-actions .impact-details{font-size:12px;line-height:1.45;padding:9px}
 .mobile-game .city-actions button{flex:1 1 calc(50% - 6px);padding:9px;min-height:43px;font-size:12px}
 .mobile-game .city-actions .selection-help{font-size:12px}
 .mobile-game .city .save-line{display:none!important}
 .mobile-game .builder .swing-option{padding:6px 13px}
 .mobile-game .builder .swing-option label{font-size:12px}
 .mobile-game .builder .swing-option>span{display:none!important}
 .mobile-game .builder .build-meta{padding:6px 12px;font-size:10px}
 .mobile-game #builder .scene{max-height:none!important;min-height:0!important;overflow:hidden}
 .mobile-game #builder .scene canvas{max-height:none!important;width:100%;height:auto}
 .mobile-game .builder .controls{padding:11px 12px 8px;grid-template-columns:1.7fr 1fr}
 .mobile-game .builder .controls button{font-size:13px;padding:11px 9px;min-height:47px}
 .mobile-game .builder .controls p{font-size:11px}
 .mobile-game .project-picker{display:none!important}
 body.mobile-game.mobile-picker-open .project-picker{display:block!important;position:fixed!important;z-index:1102!important;left:8px;right:8px;top:auto;bottom:calc(var(--mobile-dock-height) + 6px);width:auto!important;max-height:min(70svh,690px);overflow:auto;margin:0!important;padding:11px!important;border-radius:20px 20px 13px 13px;box-shadow:0 -10px 80px #1529215f;background:#f5f3e8;border:2px solid #cfdeca}
 .mobile-game .mobile-picker-heading{display:flex;justify-content:space-between;align-items:center;padding:0 3px 10px}
 .mobile-game .mobile-picker-heading strong{font-size:17px;font-weight:900}
 .mobile-game #mPickerClose{font-size:19px;font-weight:700;border:0;border-radius:9px;padding:7px 11px;background:#e2e8d8;color:#365847}
 .mobile-game .project-picker .picker-title{display:none!important}
 .mobile-game .project-picker .types{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .mobile-game .project-picker .type-button{min-width:0;min-height:91px;padding:9px!important;overflow:hidden}
 .mobile-game .project-picker .type-button strong{font-size:13px!important}
 .mobile-game .project-picker .type-button small{font-size:10px!important;line-height:1.35!important}
 .mobile-game .project-picker .type-art{font-size:22px;width:30px;height:30px}
 .mobile-game .mobile-picker-backdrop{display:none}
 body.mobile-game.mobile-picker-open .mobile-picker-backdrop{display:block;position:fixed;inset:0;z-index:1100;border:0;background:#172e286b;cursor:pointer}
 .mobile-game .city-dashboard,.mobile-game .next-goal,.mobile-game main>.save-line{display:none!important}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard,body.mobile-game[data-mobile-tab="goals"] .next-goal{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%;margin:0 0 10px;padding:14px!important;border-radius:16px}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .goal,body.mobile-game[data-mobile-tab="goals"] .city-dashboard .metric,body.mobile-game[data-mobile-tab="goals"] .city-dashboard .need{min-width:0;max-width:100%;overflow-wrap:anywhere;grid-column:1/-1;padding:0;border:0}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .metric{display:flex;align-items:center;justify-content:space-between;gap:12px}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .metric strong{font-size:28px}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .budget-metric{display:block;padding:10px;border-radius:12px}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .need label{font-size:13px}
 body.mobile-game[data-mobile-tab="goals"] .next-goal .goal-tracks{grid-template-columns:1fr}
 body.mobile-game[data-mobile-tab="goals"] main>.save-line{display:flex!important;flex-wrap:wrap;gap:9px;border:1px solid #dce4d5;border-radius:14px;background:#fffef8;padding:15px;margin:0 0 12px}
 .mobile-game #tutorial,.mobile-game footer{display:none!important}
 .mobile-game .game-mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:5px;position:fixed;z-index:1200;left:0;right:0;bottom:0;height:var(--mobile-dock-height);padding:6px 10px calc(5px + env(safe-area-inset-bottom,0px));background:#fffdf8f5;border-top:1px solid #d8e3d2;box-shadow:0 -4px 22px #36544218;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
 .mobile-game .game-mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;height:52px;border:0;border-radius:11px;background:transparent;color:#71857a;font:800 11px ui-rounded,'Trebuchet MS',system-ui,sans-serif;cursor:pointer}
 .mobile-game .game-mobile-nav button .nav-icon{font-size:21px;line-height:1.25}
 .mobile-game .game-mobile-nav button.active{color:#245f47;background:#e4efde}
 .mobile-game .game-mobile-coach{position:fixed;z-index:1201;bottom:calc(var(--mobile-dock-height) + 12px);left:14px;right:14px;border:2px solid #e6c477;border-radius:17px;padding:12px 15px;background:#fffdf3;box-shadow:0 10px 32px #122a2366;color:#365446;max-width:520px;margin-inline:auto}
 .mobile-game .game-mobile-coach::after{content:'⬆';position:absolute;top:-24px;left:32px;color:#d4a03b;font-size:22px;filter:drop-shadow(0 2px 1px #fff)}
 .mobile-game .game-mobile-coach strong{font-size:16px}
 .mobile-game .game-mobile-coach p{font-size:12px;line-height:1.4;margin:5px 0 10px}
 .mobile-game .game-mobile-coach .coach-arrow{display:none}
 .mobile-game .game-mobile-coach .coach-buttons{display:flex;gap:8px;justify-content:flex-end}
 .mobile-game .game-mobile-coach button{font:700 12px ui-rounded,system-ui,sans-serif;padding:9px 13px;border:0;background:#e8eddf;color:#355b48;border-radius:9px}
 .mobile-game .game-mobile-coach [data-action="next"]{background:#34785a;color:white}
 .mobile-game dialog{max-height:calc(100svh - 70px)!important;max-width:calc(100vw - 18px)!important;overflow:auto}
 .mobile-game #result{font-size:14px}
 .mobile-game #result h2{font-size:23px}
 .mobile-game .reward-grid{gap:5px}
 .mobile-game .reward-grid strong{font-size:18px}
}
@media(min-width:701px){.game-mobile-status,.game-mobile-nav,.game-mobile-coach,.mobile-picker-heading,.mobile-picker-backdrop{display:none!important}}
@media(max-width:350px){.mobile-game .game-mobile-status{gap:3px}.mobile-game .ms-project{font-size:10px;padding:3px}.mobile-game .city .map-tools button#towerShortcut{font-size:10px!important}.mobile-game .game-mobile-nav button{font-size:10px}}

/* v0.7.3: dynamic construction demand, fully filled cards */
.project-picker .type-button{position:relative;transition:background-color .25s,border-color .25s,box-shadow .25s;isolation:isolate;min-height:104px;padding-bottom:33px!important}
.project-picker .type-button.demand-urgent{background:#c7e5c6!important;border:2px solid #65ad7c!important;color:#214f39}
.project-picker .type-button.demand-good{background:#dbe9b9!important;border:2px solid #a6bd65!important;color:#3d5838}
.project-picker .type-button.demand-optional{background:#fff0c1!important;border:2px solid #d3ae62!important;color:#65532f}
.project-picker .type-button.demand-low{background:#f2d9d1!important;border:2px solid #d8a39b!important;color:#6c4947}
.project-picker .type-button.chosen{outline:3px solid #2d7663!important;outline-offset:0;box-shadow:0 4px 0 #254f4840!important}
.project-picker .type-button.locked{background:#ebeae3!important;color:#828781!important;opacity:.7;filter:grayscale(.12);border:1px solid #dcdfd5!important}
.project-picker .type-priority{position:absolute;bottom:8px;left:12px;padding:3px 9px;border-radius:20px;background:#fff9e7aa;border:1px solid #ffffff7a;color:inherit;font-size:10px;font-weight:850;letter-spacing:.08px;white-space:nowrap}
.project-picker .type-button.chosen .type-priority{background:#fffef1db}
.project-picker .type-button strong,.project-picker .type-button small{position:relative;z-index:1}
.type-legend{display:flex;align-items:center;flex-wrap:wrap;gap:7px 13px;margin-top:13px;padding:8px 11px;border:1px solid #d4dece;border-radius:13px;background:#fffdf6b8;color:#486c56;font-size:11px;line-height:1.35}
.type-legend strong{font-weight:800}
.type-legend small{width:100%;color:#667f70;font-size:10px}
.legend-item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.legend-item i{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid #748b7555}
.legend-urgent{background:#c7e5c6}.legend-good{background:#dbe9b9}.legend-optional{background:#fff0c1}.legend-low{background:#f2d9d1}
/* Calendar as part of the existing header; don't add another sprawling dashboard */
.header-right{display:flex;align-items:center;gap:22px}
.game-clock{display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid #d5e3d2;border-radius:13px;background:#ecf2e6;white-space:nowrap}
.game-clock .clock-icon{font-size:25px;color:#d6a75b}
.game-clock strong{display:block;font-weight:850;font-size:13px;color:#315b4a}
.game-clock small{display:block;font-size:10px;color:#759082;margin-top:2px}
/* Desktop actions directly below the large building preview: no scroll to below map */
@media(min-width:701px){
 .builder.has-selected-building .scene{height:380px!important;min-height:380px!important;}
 .builder.has-selected-building .building-preview .preview-art{height:67%;max-height:310px;margin-bottom:5%}
 .builder.has-selected-building .building-preview .preview-description{bottom:2%;padding:7px 14px;max-width:94%}
 .builder.has-selected-building .building-preview .preview-description h3{font-size:16px;margin:3px 0}
 .builder.has-selected-building .building-preview .preview-description p{font-size:11px;margin:3px 0}
 .builder .desktop-action-dock{display:none;margin:0 14px 8px;padding:12px;border-radius:14px;gap:7px;border:1px solid #cfdfca;background:#edf5e9}
 .builder.has-selected-building .desktop-action-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
 .builder .desktop-action-dock #actionText{grid-column:1/-1;font-size:13px}
 .builder .desktop-action-dock .selection-help{grid-column:1/-1;font-size:11px;line-height:1.4}
 .builder .desktop-action-dock .impact-details{grid-column:1/-1;padding:6px 9px;font-size:11px;line-height:1.45;max-height:80px;overflow-y:auto}
 .builder .desktop-action-dock button{font-size:11px;min-height:40px;padding:8px 5px;white-space:normal}
 .builder.has-selected-building .controls{padding-top:9px}
 .builder.has-selected-building .controls #drop,.builder.has-selected-building .controls #finish{display:none}
 .builder.has-selected-building .controls #hint{grid-column:1/-1;margin:0 0 7px}
}
@media(max-width:700px){
 .game-clock{display:none}
 .mobile-game .game-mobile-status{flex-wrap:wrap}
 .mobile-game .ms-clock{flex-basis:100%;font-size:11px;color:#49745d;font-weight:800;line-height:1.15;padding:0 2px}
 .mobile-game .project-picker .type-button{min-height:105px!important;padding-bottom:30px!important}
 .mobile-game .project-picker .type-priority{font-size:9px;bottom:6px;left:7px;padding:2px 7px}
 .mobile-game .type-legend{font-size:10px}
}

/* Place the color key BELOW the entire picker on desktop; do not reserve an empty grid column. */
.project-picker>.type-legend{grid-column:1/-1;grid-row:auto;width:100%;margin-top:0;align-self:start}
@media(min-width:1051px){.project-picker>.type-legend{padding:8px 12px}.project-picker>.type-legend small{width:auto;flex:1 1 220px;text-align:right}}

/* v0.7.4: polished responsive gameplay and accessible desktop toolbar */
@media (min-width:701px){
 .desktop-game-toolbar{position:sticky;top:0;z-index:900;display:flex;align-items:center;gap:20px;padding:8px 14px;min-height:58px;border:1px solid #d9e5d4;border-radius:0 0 15px 15px;background:rgba(250,249,239,.96);box-shadow:0 5px 22px #314b4419;backdrop-filter:blur(14px);font-size:13px;color:#365c4d;font-weight:800}
 .desktop-game-toolbar>span{display:flex;align-items:center;gap:6px;white-space:nowrap}
 .desktop-game-toolbar>span b{font-size:16px;font-variant-numeric:tabular-nums}
 .desktop-game-toolbar .desk-coins{margin-left:auto}
 .desktop-game-toolbar .desk-clock{color:#6d806f}
 .desktop-select-project{max-width:min(38%,350px);display:flex;align-items:center;gap:8px;padding:10px 15px;border-radius:12px;border:1px solid #8faf92;background:#e4f0dc;color:#315b48;font:850 14px ui-rounded,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
 .desktop-select-project span{overflow:hidden;text-overflow:ellipsis}
 .desktop-select-project b{margin-left:auto;font-size:19px}
 .app>header .header-right{display:none}
 .intro{padding-top:15px;padding-bottom:19px}
 .intro h1{font-size:clamp(29px,3vw,40px)}
 .desktop-project-backdrop{display:none}
 body.desktop-picker-open .desktop-project-backdrop{display:block;position:fixed;inset:0;z-index:905;background:#152c2466;border:0}
 body.desktop-picker-open .project-picker{display:grid;position:fixed!important;top:var(--picker-top,72px)!important;left:max(20px,calc((100vw - 1370px)/2));right:max(20px,calc((100vw - 1370px)/2));width:auto;max-height:calc(100svh - 90px);overflow:auto;z-index:906!important;box-shadow:0 18px 65px #1c302e69;grid-template-columns:160px minmax(0,1fr);background:#f3f3e8}
 body.desktop-picker-open .desktop-game-toolbar{z-index:907}
 .workspace{margin-bottom:17px}
 .project-picker{margin-bottom:20px}
 .city-dashboard{margin-bottom:14px}
}
@media(min-width:701px) and (max-width:1040px){
 .desktop-game-toolbar{gap:10px}.desktop-game-toolbar>span b{font-size:14px}
 body.desktop-picker-open .project-picker{grid-template-columns:1fr}
}
@media(max-width:700px){
 /* One connected city + construction screen; nav buttons are quick jumps, not separate pages. */
 body.mobile-game[data-mobile-tab="city"] #builder,
 body.mobile-game[data-mobile-tab="build"] #builder,
 body.mobile-game[data-mobile-tab="city"] .workspace>.city,
 body.mobile-game[data-mobile-tab="build"] .workspace>.city{display:block!important}
 .mobile-game .workspace{display:flex!important;flex-direction:column!important;gap:10px!important}
 .mobile-game .workspace>.city{order:0!important}
 .mobile-game .workspace>#builder{order:1!important}
 body.mobile-game[data-mobile-tab="goals"] .workspace{display:none!important}
 .mobile-game .workspace>.card{flex:none}
 .mobile-game .game-mobile-status{position:sticky;top:0;z-index:100;grid-template-columns:repeat(3,minmax(0,1fr))!important;min-height:49px;gap:4px;padding:7px 8px!important;align-items:center}
 .mobile-game .ms-clock{grid-column:1 / 2;grid-row:1;flex-basis:auto!important;font-size:10px!important;line-height:1.2!important}
 .mobile-game .ms-resource{font-size:13px!important}
 .mobile-game .ms-resource b{font-size:14px!important}
 .mobile-game .ms-resource:nth-of-type(2){grid-column:2;grid-row:1}
 .mobile-game .ms-resource:nth-of-type(3){grid-column:3;grid-row:1}
 .mobile-game .ms-resource:nth-of-type(4){grid-column:1;grid-row:2}
 .mobile-game .ms-project{grid-column:2/-1;grid-row:2;font-size:12px!important;min-height:34px!important}
 .mobile-game .game-mobile-nav{z-index:1050}
 .mobile-game .mobile-jump-to-build,.mobile-game .mobile-jump-to-city{display:flex;align-items:center;justify-content:center;width:calc(100% - 22px);margin:0 11px 8px;min-height:34px;background:#e7efdc;color:#356349;border:1px solid #c7d8bc;border-radius:9px;font:850 12px ui-rounded,system-ui,sans-serif;gap:6px}
 .mobile-game .mobile-jump-to-city{margin:0 11px 8px;background:#faf5e7}
 .mobile-game .city .map{height:min(49svh,calc(100vw - 30px))!important;min-height:240px!important;max-height:560px!important}
 .mobile-game .city .map-tools{padding:4px 10px 5px}
 .mobile-game .city .panel-heading,.mobile-game #builder .panel-heading{padding:10px 12px 7px;min-height:53px}
 .mobile-game .city .panel-heading h2,.mobile-game #builder .panel-heading h2{font-size:17px}
 /* Full card fix: icon flows ABOVE text; never overlaps names. */
 .mobile-game .project-picker .type-button{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-height:122px!important;padding:9px 10px 29px!important;border-radius:14px}
 .mobile-game .project-picker .type-button .type-art{position:static!important;flex:0 0 32px;width:32px!important;height:32px!important;font-size:19px!important;margin:0 0 2px}
 .mobile-game .project-picker .type-button strong{position:static!important;display:block;z-index:1;font-size:13px!important;line-height:1.15!important;padding:0!important;max-width:100%;overflow-wrap:break-word}
 .mobile-game .project-picker .type-button small{display:block;font-size:10px!important;line-height:1.3!important;max-width:100%;overflow-wrap:break-word}
 .mobile-game .project-picker .type-priority{bottom:7px!important;left:10px!important;font-size:9px!important;max-width:calc(100% - 15px)}
 .mobile-game .project-picker .type-button.chosen:after{top:6px;right:8px}
 .mobile-game.mobile-picker-open .project-picker{max-height:min(73svh,700px)}
 /* Statistics use paired value/label tiles. */
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;padding:11px!important}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .goal{grid-column:1/-1;background:#f4f5e9;padding:12px;border-radius:12px}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .metric{grid-column:auto!important;min-width:0;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important;background:#f0f4e9;border:1px solid #e0e8d9;border-radius:12px;padding:11px!important;overflow-wrap:anywhere}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .metric strong{font-size:clamp(23px,7.5vw,32px)!important;font-weight:900!important;line-height:1.1;color:#2b5c49;max-width:100%;overflow-wrap:anywhere}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .metric span{font-size:11px!important;color:#5f786c;line-height:1.25}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .budget-metric{background:#fff4dd!important}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .budget-metric small{font-size:10px;line-height:1.35;color:#647d6e;margin-top:4px}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .need{grid-column:1/-1!important;padding:8px 10px!important;background:#f8f9f1;border-radius:10px}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .need label{display:flex!important;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard .need label span{display:inline!important;white-space:nowrap;font-size:12px;margin:0}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard>p,body.mobile-game[data-mobile-tab="goals"] .city-dashboard>details{grid-column:1/-1}
 body.mobile-game[data-mobile-tab="goals"] .next-goal{padding:12px!important}
 body.mobile-game[data-mobile-tab="goals"] .next-goal-heading h2{font-size:17px}
 .mobile-game .builder .scene-label{font-size:9px}
 .mobile-game .building-preview .preview-description{max-width:92%;font-size:11px}
}
@media(max-width:355px){
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard{gap:6px!important}
 .mobile-game .game-mobile-status{padding:5px!important}
 .mobile-game .ms-clock{font-size:9px!important}
}

@media(min-width:701px){body.desktop-picker-open .project-picker{max-height:calc(100svh - var(--picker-top,72px) - 12px)}}

/* v0.7.5 — miniatures must remain distinct from green terrain at any zoom. */
.map-world .neighbourhood{background:linear-gradient(180deg,#a9c5a9,#b5cdb0 48%,#afc8b0)!important;border-inline-color:#99b69c!important}
.map-world .plots .plot{background:linear-gradient(158deg,rgba(244,241,217,.86),rgba(229,235,213,.74))!important;border:1px solid rgba(91,119,102,.24);border-radius:16px;box-shadow:inset 0 1px 0 #fff9e8a1,0 4px 9px #39554b12;isolation:isolate}
.map-world .plots .plot.occupied{background:linear-gradient(155deg,#faf5e8e8,#e5ecdbdb)!important;border-color:#8aa694;box-shadow:0 2px 0 #a9bca5,0 7px 14px #3c5e4a25,inset 0 1px #fffdf6}
.map-world .plots .plot.occupied::before{background:#fbf4df!important;border:2px solid #d6cfad!important;box-shadow:0 3px 7px #45634c2e;opacity:1}
.map-world .plots .plot svg{filter:drop-shadow(1px 1px 0 rgba(46,80,69,.6)) drop-shadow(3px 6px 3px rgba(34,60,51,.3))!important;overflow:visible}
.map-world .plots .plot .plot-type{background:#f9f3dfed!important;color:#35564b!important;border:1px solid #d9dcc7;font-weight:850!important}
.map-world .plots .plot small,.map-world .plots .plot-name{color:#435f53!important;text-shadow:0 1px #fff9e6;font-weight:650}
.map-world .plots .plot:not(.occupied){background:rgba(176,199,173,.22)!important;border:1px dashed #89a58f;box-shadow:none}
.map-world .plots .plot.locked{opacity:.52;filter:grayscale(.25)}
.map-world .plots .plot.focused{background:#eef5cf!important;outline:4px solid #216b57!important;box-shadow:0 0 0 6px #fff9dcc9,0 10px 18px #23533b35!important}
.map-world .plots .plot.in-range,.map-world .plots .plot.impact-full{background:#daefd5!important}
.map-world .plots .plot.impact-partial{background:#fff2c9!important}
.map-world .plots .plot.move-target{background:#d5f2d5!important}
.map-world .district-roads .east-west,.map-world .district-roads .north-south{filter:brightness(.91) saturate(.78)}
@media(max-width:700px){.map-world .plots .plot{border-radius:13px}.map-world .plots .plot svg{filter:drop-shadow(1px 1px 0 rgba(46,80,69,.65)) drop-shadow(3px 4px 2px rgba(34,60,51,.32))!important}}

/* v0.7.6: 8×8 город с сохранением старого квартала в центре */
.map-world .plots{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:21px 7px!important}
.map-world .plot{height:146px!important}
.map-world .plot:nth-child(6n+3),.map-world .plot:nth-child(6n+4){margin:0!important}
.map-world .neighbourhood{width:1220px!important;margin-left:30px!important;margin-right:30px!important}
.map-world .park,.map-world .street,.map-world .map-decoration{width:1220px!important;margin-left:30px!important;margin-right:30px!important}
.map-world{width:1280px!important}
.map-world .district-roads .north-south.a{left:25%}.map-world .district-roads .north-south.b{left:75%}
.map-world .district-roads .east-west.r1{top:12.4%}.map-world .district-roads .east-west.r2{top:24.9%}.map-world .district-roads .east-west.r3{top:37.4%}.map-world .district-roads .east-west.r4{top:62.4%}.map-world .district-roads .east-west.r5{top:87.4%}
.map-world .plot.locked{opacity:1!important;filter:none!important;background:linear-gradient(155deg,#d4d9c5,#bdcbb7)!important;border:2px dashed #899e8b!important}
.map-world .plot.locked .empty-lot>span{background:#f1e9d3;color:#59745e;border-color:#9bad91}
.map-world .plot.locked .plot-type{font-size:10px!important;color:#536f5c!important}
.land-dialog{border:2px solid #b6cbb1;border-radius:24px;padding:24px;max-width:min(94vw,450px);color:#314b44;background:#f7f5e9;box-shadow:0 15px 50px #263d3338}
.land-dialog::backdrop{background:#20352d88}.land-dialog h2{font-size:27px}.land-dialog p{line-height:1.6}.land-req{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.land-req div{padding:14px;border-radius:14px;background:#e6eddb;display:flex;flex-direction:column;gap:6px}.land-req strong{font-size:20px}.land-req small{font-size:12px}.land-buttons{display:flex;gap:12px}.land-buttons button{flex:1}

/* v0.7.7 — compact building information badge: keep pedestrians and road visible */
.builder.has-selected-building .building-preview .preview-description,
.building-preview .preview-description {
  position:absolute;
  top:14px;
  bottom:auto;
  left:14px;
  right:auto;
  width:max-content;
  max-width:min(43%,290px);
  padding:9px 12px;
  border-radius:13px;
  text-align:left;
  background:rgba(255,253,243,.93);
  box-shadow:0 3px 14px #36534424;
  z-index:4;
}
.building-preview .preview-description .eyebrow{font-size:9px;letter-spacing:.13em}
.builder.has-selected-building .building-preview .preview-description h3,
.building-preview .preview-description h3{font-size:14px;line-height:1.25;margin:3px 0 2px}
.builder.has-selected-building .building-preview .preview-description p,
.building-preview .preview-description p{font-size:11px;line-height:1.35;margin:2px 0}
.building-preview .preview-description small{display:none}
@media(max-width:650px){
 .builder.has-selected-building .building-preview .preview-description,
 .mobile-game .building-preview .preview-description,
 .building-preview .preview-description{
   top:9px;bottom:auto;left:9px;right:auto;
   max-width:55%;padding:7px 9px;border-radius:11px
 }
 .building-preview .preview-description .eyebrow{font-size:8px}
 .builder.has-selected-building .building-preview .preview-description h3,
 .building-preview .preview-description h3{font-size:12px}
 .builder.has-selected-building .building-preview .preview-description p,
 .building-preview .preview-description p{font-size:10px}
}

/* v0.7.8: daily tower challenges */
.tower-daily{background:#f4f3e7;border:1px solid #d6dfc8;border-radius:18px;padding:14px;margin:12px 0;color:#34564b}.tower-daily>strong{display:block;font-size:1.05rem}.tower-daily>small{display:block;margin:4px 0 10px;color:#687e73}.tower-daily-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #dbe3d1}.tower-daily-item strong{white-space:nowrap}#towerAttempts{font-size:.83rem;margin:10px 0 0;color:#60796b}


/* v0.8.2: mobile toolbar, balanced plots, result dialog and visible gems */
@media(max-width:700px){
 .mobile-game .map-tools{display:grid!important;grid-template-columns:44px 44px minmax(0,1fr) minmax(0,1fr);gap:7px!important;overflow:visible!important;padding:8px 10px!important;align-items:stretch}
 .mobile-game .map-tools button{box-sizing:border-box;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.18;min-height:40px}
 .mobile-game .map-tools #zoomOut{grid-column:1;grid-row:1}
 .mobile-game .map-tools #zoomIn{grid-column:2;grid-row:1}
 .mobile-game .map-tools #mapCenter{grid-column:3 / 5;grid-row:1}
 .mobile-game .map-tools #towerShortcut{grid-column:1 / 3;grid-row:2;max-width:none!important;font-size:11px!important;overflow-wrap:normal}
 .mobile-game .map-tools .wonder-shop-button{grid-column:3 / 5;grid-row:2;font-size:11px!important;padding:7px 6px!important}
 .mobile-game .map-tools .weather-badge{grid-column:1 / 3;grid-row:3;justify-content:center}
 .mobile-game .map-tools .daynight-indicator{grid-column:3 / 5;grid-row:3;justify-content:center}
 .mobile-game .map-tools .crystal-hud{display:none!important}
 .mobile-game .game-mobile-status .ms-crystals{grid-column:2;grid-row:2}
 .mobile-game .game-mobile-status .ms-project{grid-column:3;grid-row:2}
 .mobile-game .game-mobile-status .ms-crystals b{color:#7150a4}
}
.map-world .plots{align-items:stretch}
.map-world .plots .plot{min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box;overflow:visible}
.map-world .plots .plot.occupied:before{display:none!important}
.map-world .plots .plot.occupied{padding-left:4px!important;padding-right:4px!important}
.map-world .plots .plot .plot-type{
 box-sizing:border-box!important;display:block!important;max-width:100%!important;
 width:calc(100% - 4px)!important;white-space:normal!important;overflow-wrap:break-word!important;
 text-align:center!important;line-height:1.12!important;padding:3px 2px!important;
 font-size:10px!important;border-radius:7px!important;
}
.map-world .plots .plot svg{width:100%!important;max-width:100%!important;min-width:0!important;height:83px!important;overflow:hidden!important}
.map-world .plots .plot .plot-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-world .plots .plot .collect-coin{right:0!important;top:0!important;max-width:90%;font-size:9px!important}
#result{position:relative;max-height:min(90dvh,900px);overflow-y:auto;box-sizing:border-box}
#result #resultRewards{position:static!important;clear:both}
#result #resultText{position:static!important;clear:both;margin-bottom:16px!important}
#result #closeResult,#result #discardResult,#result #retryResult{
 position:static!important;float:none!important;display:block!important;
 width:100%!important;box-sizing:border-box!important;
 height:auto!important;min-height:48px!important;line-height:1.3!important;
 margin:12px 0 0!important;transform:none!important;clear:both!important;
}
#result #closeResult[hidden],#result #discardResult[hidden],#result #retryResult[hidden]{display:none!important}
.weather-fx .weather-pedestrian{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;width:30px;height:30px;font-size:19px;filter:drop-shadow(0 2px 2px #2b4b5470)}
.weather-fx .weather-pedestrian i{font-style:normal;position:absolute;left:8px;top:-9px;font-size:20px;transform:rotate(-12deg);filter:drop-shadow(0 1px 1px #345)}

/* keep weather/time indicators visible despite legacy mobile span-hiding rules */
.map-tools .weather-badge,.map-tools .daynight-indicator{display:inline-flex!important;flex:0 0 auto!important;font-size:12px!important;line-height:1.25!important}
@media(max-width:700px){
 .mobile-game .map-tools .weather-badge,.mobile-game .map-tools .daynight-indicator{display:inline-flex!important;flex-basis:auto!important}
 .mobile-game .map-tools .weather-badge{grid-column:1 / 3;grid-row:3}
 .mobile-game .map-tools .daynight-indicator{grid-column:3 / 5;grid-row:3}
}

/* v0.8.4 — stable modal position on mobile Safari, even with long dialogs */
@media(max-width:700px){
 html.domiki-modal-open{overflow:hidden!important;overscroll-behavior:none}
 body.mobile-game dialog[open]{
   position:fixed!important;
   inset:auto!important;
   top:50%!important;left:50%!important;
   transform:translate(-50%,-50%)!important;
   margin:0!important;
   width:min(92vw,520px)!important;
   max-width:calc(100vw - 24px)!important;
   max-height:calc(100dvh - 38px)!important;
   overflow-y:auto!important;
   overscroll-behavior:contain;
   -webkit-overflow-scrolling:touch;
   box-sizing:border-box!important;
 }
 body.mobile-game #towerDialog[open]{max-height:calc(100dvh - 36px)!important}
 body.mobile-game #result[open]{max-height:calc(100dvh - 36px)!important}
}
/* Day/night labels are always legible on the construction scene. */
.builder .scene .scene-label,.builder .scene .floating-score{
 color:#214d40!important;text-shadow:0 1px 2px #fffffff0,0 0 8px #ffffffaa!important;
}

/* v0.8.5: pending building placement is explicit; retain readable buildings at night */
.city.awaiting-building-placement .plot:not(.occupied):not(.locked){outline:3px dashed #e8b652;outline-offset:-3px;animation:plotReadyPulse 1.5s ease-in-out infinite alternate}
@keyframes plotReadyPulse{to{outline-color:#f6e4a5;background-color:#fff5b92b}}
.city .map .plot.occupied svg .lit-window{pointer-events:none}
@media(max-width:700px){.mobile-game #drop:not(:disabled){min-height:55px}}

/* v0.8.6 — mobile tower gameplay always visible before daily challenges */
.tower-lives{font-size:13px;font-weight:800;text-align:center;color:#9d565b;margin:7px 0 3px}
.tower-record-preview{background:#f2f5e8;border:1px solid #d4dfc8;border-radius:15px;padding:12px;margin:12px 0;display:grid;gap:8px}
.tower-record-mini{height:104px;position:relative;overflow:hidden;border-radius:11px;background:linear-gradient(#c2dfe5,#e9efd3);display:flex;align-items:flex-end;justify-content:center}
.tower-mini-sky{position:absolute;top:9px;left:12px;font-size:12px;font-weight:800;color:#365f58}
.tower-mini-building{display:block;width:46px;background:repeating-linear-gradient(0deg,#edc994 0 6px,#5c94a0 7px 10px,#edc994 11px 13px);border:2px solid #c6a16d;border-bottom:0}
.tower-showcase{width:min(94vw,520px);max-height:92dvh;text-align:center;overflow:auto}
.tower-showcase canvas{width:100%;height:auto;max-height:65dvh;object-fit:contain;border-radius:13px}
.tower-showcase button{width:100%}
@media(max-width:700px){
 body.mobile-game #towerDialog[open]{padding:10px 12px!important;scroll-padding-top:0}
 .tower-dialog .tower-play{display:flex;flex-direction:column;align-items:stretch;gap:3px}
 .tower-dialog .tower-stage{width:min(100%,43dvh);margin:0 auto!important}
 .tower-dialog .tower-stage canvas{display:block;width:100%;height:auto}
 .tower-dialog .tower-buttons{margin:2px 0 0;gap:5px;grid-template-columns:1.6fr 1fr 1fr}
 .tower-dialog .tower-buttons #towerDrop{grid-column:auto}
 .tower-dialog .tower-buttons button{padding:10px 4px;font-size:12px;min-height:42px}
 .tower-dialog .tower-title{margin-top:14px}
 .tower-dialog .tower-title p{font-size:12px}
 .mobile-game .city .map-tools>span.weather-badge,.mobile-game .city .map-tools>span.daynight-indicator{display:inline-flex!important;visibility:visible!important;opacity:1!important}
 .mobile-game .city .map-tools .weather-badge{grid-column:1/3;grid-row:3}
 .mobile-game .city .map-tools .daynight-indicator{grid-column:3/5;grid-row:3}
}

/* v0.8.7 — phone-first construction scene and full-height Tower City play mode */
@media(max-width:700px){
  /* City construction: a tall scene improves visibility of the crane and the drop line. */
  body.mobile-game #builder .scene{
    height:clamp(425px,68dvh,720px)!important;
    min-height:425px!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body.mobile-game #builder .scene canvas#game{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:fill!important;
    touch-action:manipulation;
  }
  body.mobile-game #builder .controls{padding:10px 12px 12px!important;gap:8px!important}
  body.mobile-game #builder #drop{min-height:54px!important;font-size:14px!important}

  /* Prevent nested dialog scroll and keep every action within thumb reach. */
  body.mobile-game dialog#towerDialog[open]{
    position:fixed!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    inset:auto!important;
    top:calc(6px + env(safe-area-inset-top,0px))!important;
    left:6px!important;
    margin:0!important;
    transform:none!important;
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    max-height:none!important;
    padding:8px!important;
    border-radius:17px!important;
    overscroll-behavior:contain!important;
  }
  body.mobile-game #towerDialog .tower-play{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    flex:1 1 auto!important;
    gap:8px!important;
  }
  body.mobile-game #towerDialog .tower-stage{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
    flex:1 1 auto!important;
    border-radius:12px!important;
    overflow:hidden!important;
    background:#bad8cb;
  }
  body.mobile-game #towerDialog .tower-stage canvas#towerCanvas{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    max-height:none!important;
    margin:0!important;
    object-fit:fill!important;
    border-radius:12px!important;
    touch-action:manipulation;
  }
  body.mobile-game #towerDialog .tower-buttons{
    position:relative!important;
    z-index:8!important;
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1.35fr .9fr .9fr!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
  }
  body.mobile-game #towerDialog .tower-buttons button{
    box-sizing:border-box!important;
    min-width:0!important;
    min-height:53px!important;
    padding:9px 4px!important;
    font-weight:850!important;
    font-size:clamp(11px,3.45vw,15px)!important;
    line-height:1.1!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent;
  }
  body.mobile-game #towerDialog .tower-buttons #towerDrop{grid-column:auto!important}
  body.mobile-game #towerDialog .tower-buttons #towerLife:not([hidden]){grid-column:1/-1;grid-row:1;background:#ffe8ea;color:#813c4e;}
  body.mobile-game #towerDialog .tower-buttons:has(#towerLife:not([hidden])) #towerDrop{grid-column:1;grid-row:2}
  body.mobile-game #towerDialog .tower-buttons:has(#towerLife:not([hidden])) #towerRestart{grid-column:2;grid-row:2}
  body.mobile-game #towerDialog .tower-buttons:has(#towerLife:not([hidden])) #towerClose{grid-column:3;grid-row:2}
  body.mobile-game #towerDialog .tower-stats{
    position:absolute!important;top:9px!important;left:9px!important;
    z-index:5!important;margin:0!important;
    pointer-events:none!important;
    padding:6px 9px!important;border-radius:10px!important;
  }
  body.mobile-game #towerDialog #towerLives{
    position:absolute!important;
    left:9px!important;bottom:44px!important;
    z-index:5!important;
    padding:6px 8px!important;
    margin:0!important;
    width:max-content!important;max-width:calc(100% - 18px)!important;
    border-radius:9px!important;
    background:#fff9e6e8!important;
    font-size:clamp(10px,2.7vw,13px)!important;
    line-height:1.25!important;
    box-shadow:0 2px 8px #18363223;
    pointer-events:none!important;
  }
  body.mobile-game #towerDialog #towerMessage{
    position:absolute!important;left:9px!important;right:9px!important;bottom:7px!important;
    z-index:6!important;width:auto!important;
    margin:0!important;padding:6px 9px!important;
    border-radius:8px!important;
    background:#fffdf3e8!important;
    color:#285548!important;
    font-size:clamp(10px,2.6vw,12px)!important;
    line-height:1.25!important;
    font-weight:800!important;
    pointer-events:none!important;
    max-height:36px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.mobile-game #towerDialog .tower-info{
    position:absolute!important;right:17px!important;top:18px!important;
    z-index:12!important;
    width:max-content!important;
    max-width:calc(100% - 27px)!important;
    color:#32584e;
    border-radius:12px;
  }
  body.mobile-game #towerDialog .tower-info>summary{
    display:block;cursor:pointer;list-style:none;
    border:1px solid #b9ccaf;background:#fff6d9eb;
    box-shadow:0 2px 8px #2049342a;
    border-radius:12px;padding:8px 11px;
    font-size:12px;font-weight:900;
  }
  body.mobile-game #towerDialog .tower-info>summary::-webkit-details-marker{display:none}
  body.mobile-game #towerDialog .tower-info[open]{
    width:min(94%,360px)!important;
    max-height:calc(100% - 28px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    background:#fffdf5;
    box-shadow:0 8px 32px #162d36a0;
    padding:8px!important;
  }
  body.mobile-game #towerDialog .tower-info .tower-title{margin-top:8px!important}
  body.mobile-game #towerDialog .tower-info .tower-title p{font-size:11px!important;line-height:1.35!important}
  body.mobile-game #towerDialog .tower-info .tower-milestones,
  body.mobile-game #towerDialog .tower-info .tower-record-preview,
  body.mobile-game #towerDialog .tower-info .tower-daily{margin:7px 0!important;padding:9px!important}
}
@media(min-width:701px){
  .tower-dialog .tower-info{padding:0;margin:0}
  .tower-dialog .tower-info>summary{cursor:pointer;font-weight:800;background:#f6f2df;border-radius:12px;padding:9px}
  .tower-dialog .tower-play .tower-stats{z-index:4}
  .tower-dialog .tower-play .tower-lives{position:relative}
  .tower-dialog .tower-play #towerMessage{position:relative;margin:8px 0 0}
}
/* Construction finished without a predetermined lot: accessible animated hints. */
.city.awaiting-building-placement .map-hint{
  color:#285944!important;font-weight:850!important;
  background:#fff0b9!important;
  border:2px solid #dfb35b!important;
  box-shadow:0 4px 14px #a78e4c30!important;
  border-radius:13px!important;
  padding:9px 12px!important;
}
.map-world .plots .plot.ready-for-building:not(.occupied):not(.locked){
  background:#eff8ba!important;
  border:3px solid #e0ad4e!important;
  outline:3px solid #fff3b5!important;
  outline-offset:-6px!important;
  box-shadow:0 0 0 4px #f9d86390,0 0 24px 6px #ffce6b88!important;
  animation:readyLot087 1.13s ease-in-out infinite alternate!important;
  isolation:auto!important;
}
.map-world .plots .plot.ready-for-building .empty-lot>span{color:#267851!important;background:#fffae5!important;transform:scale(1.2)}
@keyframes readyLot087{
  0%{transform:scale(1);box-shadow:0 0 0 1px #d7a94b88,0 0 6px 1px #e7c86c55}
  100%{transform:scale(1.06);box-shadow:0 0 0 7px #eaca6888,0 0 21px 7px #f7d15da5}
}
@media(prefers-reduced-motion:reduce){.map-world .plots .plot.ready-for-building{animation:none!important}}

/* v0.8.7 finishing touches */
.tower-record-mini{height:140px}
.tower-mini-canvas{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.tower-record-mini .tower-mini-sky{z-index:1;max-width:95%;background:#fffdf0ed;padding:5px 8px;border-radius:6px}
@media(max-width:700px){
 body.mobile-game #towerDialog #towerLives{top:70px!important;bottom:auto!important}
 body.mobile-game #towerDialog .tower-buttons button:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
}

/* Immersive normal construction on phones: large building canvas, always-visible actions. */
@media(max-width:700px){
  body.mobile-game[data-mobile-tab="build"] #builder.is-active{
    position:fixed!important;
    inset:0 0 calc(72px + env(safe-area-inset-bottom,0px)) 0!important;
    width:100vw!important;height:auto!important;
    max-width:100vw!important;
    z-index:1040!important;
    display:flex!important;flex-direction:column!important;
    border-radius:0!important;
    background:#fffcf6!important;
    overflow:hidden!important;
    margin:0!important;
  }
  body.mobile-game[data-mobile-tab="build"] #builder.is-active .panel-heading{
    padding:7px 12px!important;min-height:50px!important;flex:0 0 auto!important;
  }
  body.mobile-game[data-mobile-tab="build"] #builder.is-active .mobile-jump-to-city{
    min-height:36px!important;max-height:36px!important;margin:0 10px 4px!important;
    flex:0 0 auto!important;
  }
  body.mobile-game[data-mobile-tab="build"] #builder.is-active .swing-option{
    padding:7px 10px!important;flex:0 0 auto!important;
  }
  body.mobile-game[data-mobile-tab="build"] #builder.is-active .build-meta{
    padding:5px 10px!important;flex:0 0 auto!important;
  }
  body.mobile-game[data-mobile-tab="build"] #builder.is-active .scene{
    flex:1 1 auto!important;
    min-height:0!important;max-height:none!important;
    width:100%!important;height:auto!important;
    overflow:hidden!important;
  }
  body.mobile-game[data-mobile-tab="build"] #builder.is-active .controls{
    position:relative!important;z-index:7!important;
    flex:0 0 auto!important;
    background:#fffaf0!important;
    border-top:1px solid #dfe9d6!important;
    padding:9px 12px 5px!important;
    gap:7px!important;
  }
  body.mobile-game[data-mobile-tab="build"] #builder.is-active .controls p{
    font-size:10px!important;line-height:1.2!important;margin:0!important;
  }
}

/* v0.8.7: unmistakable placement phase visible above the map on phones. */
.city.awaiting-building-placement #mapHint,
.mobile-game .city.awaiting-building-placement .map-hint {
  display:block!important;
  min-height:auto!important;
  margin:6px 12px 9px!important;
  padding:11px 13px!important;
  font-size:12px!important;
  line-height:1.4!important;
  color:#37572b!important;
  background:#fff3bc!important;
  border:2px solid #e2b75e!important;
  border-radius:12px!important;
  box-shadow:0 3px 15px #b39c4a35!important;
}
/* Keep the instruction readable even while the map pans beneath it. */
.city.awaiting-building-placement .ready-for-building{cursor:pointer!important}
@media(max-width:700px){
 .mobile-game .city.awaiting-building-placement .panel-heading{padding-bottom:6px!important}
}

/* v0.8.8 resource dashboard */
.resource-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:12px 0 16px;padding:11px;border:1px solid #dbe5d5;border-radius:19px;background:#fffdf8;box-shadow:0 4px 16px #315d4210}
.resource-bar>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:8px 4px;border-radius:12px;background:#f0f4e9}
.resource-bar small{font-size:11px;font-weight:750;color:#61796d;white-space:nowrap}.resource-bar strong{font-size:clamp(17px,2vw,25px);font-variant-numeric:tabular-nums;color:#305d4b;line-height:1.4}
@media(max-width:700px){.mobile-game .resource-bar,.resource-bar{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px;margin:8px 0 12px;border-radius:15px}.resource-bar>div{padding:8px 1px}.resource-bar small{font-size:clamp(8px,2.2vw,11px)}.resource-bar strong{font-size:clamp(15px,4vw,21px)}.mobile-game .app>header{padding-bottom:5px}}
/* v0.9.0: city progression */
.city-progression{margin:14px auto 18px;padding:19px 22px;border:1px solid #d5dfce;border-radius:22px;background:#fbfcf5;box-shadow:0 8px 24px #345c4010;color:#31564b;max-width:1200px}
.city-progression-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.city-progression h3{margin:5px 0;font-size:clamp(19px,2.2vw,25px)}
.city-progression p{margin:4px 0 9px}.progress-percent{font-weight:900;font-size:20px}
.progress-track{height:13px;border-radius:50px;background:#e6eddd;overflow:hidden;margin:12px 0}
#progressFill{height:100%;width:0;background:linear-gradient(90deg,#83b78a,#3e896c);border-radius:50px;transition:width .5s ease}
.progress-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.progress-actions button{padding:10px 15px}.progress-unlocks{border-top:1px solid #e0e8da;padding-top:11px;display:grid;gap:4px;font-size:14px}.progress-unlocks small{opacity:.75}
@media(max-width:700px){.city-progression{margin:10px 16px 14px;padding:15px;border-radius:18px}.city-progression h3{font-size:19px}.progress-unlocks{font-size:12px}}

/* v0.9.1 — map first on mobile; one visible resource dashboard */
@media(max-width:700px){
 body.mobile-game .game-mobile-status{display:none!important}
 body.mobile-game .resource-bar{position:relative;z-index:2;margin:5px 10px 8px!important}
 body.mobile-game .resource-bar>div{padding:7px 2px!important}
 body.mobile-game .resource-bar small{font-size:clamp(8px,2.3vw,11px)!important;letter-spacing:-.02em}
 body.mobile-game .resource-bar strong{font-size:clamp(15px,4.3vw,23px)!important}
 body.mobile-game .city-progression,body.mobile-game .city-dashboard,body.mobile-game .next-goal{display:none!important}
 body.mobile-game.domiki-show-goals .city-progression{display:block!important;scroll-margin-top:12px}
 body.mobile-game.domiki-show-goals .city-dashboard{display:grid!important}
 body.mobile-game.domiki-show-goals .next-goal{display:block!important}
 body.mobile-game .city{order:0!important}
 body.mobile-game .city .map{height:min(72dvh,760px)!important;min-height:480px!important}
 body.mobile-game .city .map-tools{flex-wrap:wrap!important;overflow:visible!important}
 body.mobile-game .city .map-tools #cityStatsToggle{font-size:12px!important;min-height:36px!important;background:#e6eee0;color:#35594c;border:1px solid #c6d6bf;border-radius:10px}
 body.mobile-game .game-mobile-nav{z-index:100!important}
 body.mobile-game .game-mobile-nav button{min-width:0!important;flex:1 1 0!important}
 body.mobile-game .game-mobile-nav .nav-icon{display:block}
 body.mobile-game .city-progression{margin:10px 12px!important}
 body.mobile-game .app .intro{display:none!important}
}
/* v0.9.2 mobile: development action occupies a full toolbar row */
@media(max-width:700px){
 body.mobile-game .city .map-tools #cityStatsToggle{
  grid-column:1 / -1!important;grid-row:4!important;
  display:block!important;width:100%!important;max-width:none!important;
  min-width:0!important;white-space:nowrap!important;overflow-wrap:normal!important;
  word-break:normal!important;padding:11px 14px!important;
  font-size:14px!important;line-height:1.3!important;text-align:center!important;
 }
}
/* v0.9.3 — district development and city contracts */
.districts-panel{background:#fffdf6;border:1px solid #d7e3d0;border-radius:24px;padding:22px;margin:22px 0;box-shadow:0 8px 24px #344d3510;color:#345549}
.districts-heading,.district-item-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.districts-heading h3,.contracts-heading h3{font-size:1.45rem;margin:5px 0}
.districts-count{background:#eaf1e4;padding:8px 12px;border-radius:30px;font-weight:700;white-space:nowrap}
.districts-sub{color:#708578;line-height:1.45;margin:8px 0 18px}
.districts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.district-item{background:#f1f5ec;border:1px solid #e1e9db;border-radius:15px;padding:12px;min-width:0}
.district-item-head{font-size:13px}.district-item-head strong{overflow-wrap:anywhere}.district-item small{display:block;margin-top:5px;color:#668272}
.district-track{height:8px;background:#dce5d6;border-radius:9px;overflow:hidden;margin-top:10px}.district-track i{display:block;height:100%;background:linear-gradient(90deg,#8ab583,#4f9074);border-radius:9px}
.contracts-heading{margin-top:22px}.contract-row{display:flex;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid #e3e9de;padding:13px 0}.contract-main{flex:1;min-width:0}.contract-main strong,.contract-main small{display:block}.contract-main small{color:#6c8074;margin-top:5px}.contract-row button{flex-shrink:0;background:#377a61;color:white;border:0;border-radius:11px;padding:10px 12px;font-weight:700}.contract-row button:disabled{background:#e5ebdf;color:#758879}
@media(max-width:700px){.districts-panel{padding:16px;margin:14px 0}.districts-grid{gap:7px}.district-item{padding:9px}.district-item-head{font-size:11px}.district-item small{font-size:10px}.contract-row button{font-size:12px;padding:9px}}

/* v0.9.4 — mobile app-like screens; no long page scrolling between map and crane. */
@media(max-width:700px){
 body.mobile-game{overflow-x:hidden}
 body.mobile-game .app{padding-bottom:calc(85px + env(safe-area-inset-bottom))!important}
 body.mobile-game .app>header{display:none!important}
 body.mobile-game .resource-bar{position:sticky!important;top:0!important;z-index:70!important;background:#fbfaf3!important;margin:0 0 7px!important;padding:7px 8px!important;box-shadow:0 3px 12px #314b4414}
 body.mobile-game .workspace{display:block!important}
 body.mobile-game[data-mobile-tab="city"] #builder,
 body.mobile-game[data-mobile-tab="goals"] #builder{display:none!important}
 body.mobile-game[data-mobile-tab="build"] .city,
 body.mobile-game[data-mobile-tab="goals"] .city{display:none!important}
 body.mobile-game[data-mobile-tab="build"] .city-progression,
 body.mobile-game[data-mobile-tab="build"] .city-dashboard,
 body.mobile-game[data-mobile-tab="build"] .next-goal,
 body.mobile-game[data-mobile-tab="city"] .city-progression,
 body.mobile-game[data-mobile-tab="city"] .city-dashboard,
 body.mobile-game[data-mobile-tab="city"] .next-goal{display:none!important}
 body.mobile-game[data-mobile-tab="goals"] .city-progression{display:block!important}
 body.mobile-game[data-mobile-tab="goals"] .city-dashboard{display:grid!important}
 body.mobile-game[data-mobile-tab="goals"] .next-goal{display:block!important}
 body.mobile-game .city{margin:0 8px 10px!important;padding:9px!important}
 body.mobile-game .city .panel-heading{padding:5px 3px!important;margin:0 0 6px!important}
 body.mobile-game .city .panel-heading h2{font-size:18px!important}
 body.mobile-game .city .mobile-jump-to-build{margin:3px 0 7px!important;min-height:38px!important}
 body.mobile-game .city .map-tools{margin:4px 0 7px!important;gap:5px!important}
 body.mobile-game .city .map-tools button{min-height:35px!important}
 body.mobile-game .city .map{height:calc(100dvh - 285px)!important;min-height:330px!important;max-height:none!important}
 body.mobile-game[data-mobile-tab="build"] #builder{margin:0 8px 10px!important}
 body.mobile-game[data-mobile-tab="build"] #builder .scene{height:calc(100dvh - 310px)!important;min-height:300px!important;max-height:650px!important}
 body.mobile-game .game-mobile-nav{padding-bottom:env(safe-area-inset-bottom)!important}
 body.mobile-game .city-note{display:none!important}
 body.mobile-game .city .save-line{margin-top:12px}
}

/* v0.9.5: phone-first map, width-fit zoom, compact toolbar */
@media(max-width:700px){
 body.mobile-game[data-mobile-tab="city"] .city .map{height:calc(100dvh - 225px)!important;min-height:390px!important;}
 body.mobile-game .city .map-tools{display:grid!important;grid-template-columns:44px 44px minmax(0,1fr) 86px!important;gap:5px!important;padding:4px 1px!important;}
 body.mobile-game .city .map-tools #zoomOut{grid-column:1!important;grid-row:1!important;}
 body.mobile-game .city .map-tools #zoomIn{grid-column:2!important;grid-row:1!important;}
 body.mobile-game .city .map-tools #mapCenter{grid-column:3!important;grid-row:1!important;}
 body.mobile-game .city .map-tools #mapMoreTools{grid-column:4!important;grid-row:1!important;display:block!important;background:#e4eee0!important;color:#365e4d!important;border:1px solid #cbd9c5!important;font-size:12px!important;}
 body.mobile-game .city .map-tools #towerShortcut,
 body.mobile-game .city .map-tools .wonder-shop-button,
 body.mobile-game .city .map-tools .weather-badge,
 body.mobile-game .city .map-tools .daynight-indicator,
 body.mobile-game .city .map-tools #cityStatsToggle{display:none!important;}
 body.mobile-game .city.map-tools-expanded .map-tools #towerShortcut,
 body.mobile-game .city.map-tools-expanded .map-tools .wonder-shop-button,
 body.mobile-game .city.map-tools-expanded .map-tools .weather-badge,
 body.mobile-game .city.map-tools-expanded .map-tools .daynight-indicator,
 body.mobile-game .city.map-tools-expanded .map-tools #cityStatsToggle{display:flex!important;grid-column:1/-1!important;grid-row:auto!important;justify-content:center!important;align-items:center!important;}
 body.mobile-game .city .panel-heading{margin-bottom:2px!important;}
 body.mobile-game .city .mobile-jump-to-build{margin:2px 0 4px!important;min-height:34px!important;}
 body.mobile-game .city .map-tools{margin:2px 0 4px!important;}
 body.mobile-game .city .map{touch-action:none;}
 body.mobile-game .resource-bar strong{white-space:nowrap!important;}
}

/* v0.9.6 — district campaign lives in Goals, not above the map. */
@media(max-width:700px){
 body.mobile-game .districts-panel{display:none!important}
 body.mobile-game[data-mobile-tab="goals"] .districts-panel{display:block!important;margin:8px 8px 12px!important;padding:15px!important}
 body.mobile-game[data-mobile-tab="city"] .city .map{height:calc(100dvh - 218px)!important;min-height:400px!important}
 body.mobile-game .city .map{overflow:hidden!important}
}
.mayor-panel{max-width:100%;box-sizing:border-box}
.mayor-task{padding:14px;border-radius:15px;background:#f0f5e9;border:1px solid #d8e5d1}
.mayor-task h4{font-size:20px;color:#315a49;margin:8px 0}
.mayor-task p{margin:4px 0 10px;color:#617969}
.mayor-task-foot{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#345b4c}
.mayor-task>button{width:100%;border:0;background:#367c60;color:white;font-weight:800;border-radius:11px;padding:12px;margin-top:12px}
.mayor-task>button:disabled{background:#dce6d6;color:#6c8172}
.mayor-finished{padding:14px;background:#e9f3e5;border-radius:12px;color:#366b51;font-weight:700}
.district-milestones{margin-top:14px;border:1px solid #dce6d5;border-radius:14px;padding:12px}
.district-milestones>summary{cursor:pointer;font-weight:800;color:#31594b;display:flex;justify-content:space-between}
.district-milestones .districts-grid{margin-top:10px}
.district-claim{border:0;border-radius:9px;background:#3b8266;color:white;font-size:12px;font-weight:800;padding:8px 10px;margin-top:9px;width:100%}
/* v0.9.7: mobile building action bottom sheet */
@media(max-width:700px){
 .city #cityActions{display:none!important}
 .building-quick-menu[hidden]{display:none!important}
 .building-quick-menu{position:fixed;z-index:10050;left:12px;right:12px;bottom:calc(105px + env(safe-area-inset-bottom,0px));padding:10px 15px 15px;background:#fffdf5;border:2px solid #cdddc8;border-radius:24px;box-shadow:0 15px 65px #142f2860;max-height:65dvh;overflow-y:auto;color:#34564b}
 .quick-grip{height:4px;width:46px;border-radius:9px;background:#c4d4c2;margin:0 auto 12px}
 .quick-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
 .quick-head small{font-size:10px;letter-spacing:.15em;font-weight:800;color:#7b9383}
 .quick-head h3{font-size:19px;line-height:1.2;margin:6px 0;color:#34564b}
 .quick-head p{font-size:12px;line-height:1.4;margin:0 0 12px;color:#738679}
 #quickClose{flex:none;width:38px;height:38px;border-radius:13px;background:#edf2e7;border:1px solid #d4e1d0;color:#395d4e;font-size:18px}
 .quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
 .quick-actions button{min-height:54px;border-radius:14px;border:1px solid #cfddc9;background:#e7f0df;color:#345d4b;font-size:14px;font-weight:800;padding:8px 4px}
 .quick-actions button:first-child{background:#36785c;color:white;border-color:#36785c}
 .quick-actions button.quick-danger{background:#fff0e8;border-color:#efcdc1;color:#9e4c42}
 .quick-actions button:disabled{opacity:.4;filter:grayscale(.6)}
 .quick-tip{font-size:11px;line-height:1.35;color:#849184;margin:11px 2px 0}
 /* Avoid the original huge vertical green gutters; map remains pannable. */
 .city .map{height:min(70dvh,650px)!important;min-height:440px}
}
@media(min-width:701px){.building-quick-menu{display:none!important}}

/* v0.9.8 — Mac / desktop game cockpit. The city is the hero; the rest is a sidebar. */
@media(min-width:701px){
 body{background:radial-gradient(ellipse at 65% 8%,#e7eee1 0,transparent 48%),#f3f1e8}
 .app{max-width:1900px!important;padding:12px clamp(16px,2.1vw,38px) 32px!important}
 .app>header{padding:5px 6px 8px!important;margin:0!important;min-height:46px!important}
 .app>header .brand{font-size:24px!important}
 .desktop-game-toolbar{top:0!important;border-radius:16px!important;min-height:48px!important;margin:0 0 9px!important;gap:clamp(8px,1.4vw,24px)!important;padding:7px 13px!important}
 .desktop-game-toolbar .desk-pop,.desktop-game-toolbar .desk-happy,.desktop-game-toolbar .desk-coins{font-size:12px!important}
 .resource-bar{margin:0 0 12px!important;padding:7px!important;gap:7px!important;border-radius:15px!important}
 .resource-bar>div{padding:4px 8px!important;min-height:44px!important;display:flex!important;flex-direction:row!important;gap:10px!important}
 .resource-bar small{font-size:11px!important}.resource-bar strong{font-size:21px!important}
 .intro{display:none!important}
 main{display:flex;flex-direction:column}
 .desktop-cockpit{order:-10;min-width:0}
 .desktop-cockpit .workspace{display:grid!important;grid-template-columns:minmax(0,1.8fr) minmax(340px,.9fr)!important;gap:14px!important;align-items:stretch!important;margin:0!important}
 .desktop-cockpit .workspace>.city{grid-column:1;grid-row:1;min-width:0!important;max-width:none!important;margin:0!important;padding:12px!important;display:flex!important;flex-direction:column!important;border-radius:22px!important;box-shadow:0 15px 34px #36513a16!important}
 .desktop-cockpit .city .panel-heading{padding:6px 8px 9px!important;margin:0!important}
 .desktop-cockpit .city .panel-heading h2{font-size:23px!important}
 .desktop-cockpit .city .map-hint{min-height:0!important;margin:0 8px 6px!important;font-size:11px!important}
 .desktop-cockpit .city .map-tools{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0 5px 9px!important;align-items:center!important}
 .desktop-cockpit .city .map-tools button{min-height:34px!important;padding:6px 10px!important;font-size:12px!important;border-radius:10px!important}
 .desktop-cockpit .city .map-tools>span{display:none!important}
 .desktop-cockpit .city .map{flex:1 1 auto!important;height:clamp(560px,calc(100dvh - 230px),900px)!important;min-height:560px!important;max-height:none!important;margin:0!important;border-radius:15px!important;overflow:hidden!important}
 .desktop-cockpit .city .city-note{padding:8px 6px 2px!important}.desktop-cockpit .city .city-note p{margin:0!important}
 .desktop-cockpit .city .save-line{padding:5px 6px!important}
 .cockpit-side{grid-column:2;grid-row:1;min-width:0;min-height:0;height:clamp(690px,calc(100dvh - 120px),1030px);overflow:auto;overscroll-behavior:contain;border:1px solid #d9e4d3;border-radius:22px;background:#fffdf7;box-shadow:0 15px 34px #36513a14;padding:12px;scrollbar-width:thin}
 .cockpit-side-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 12px}
 .cockpit-side-heading small{display:block;font-size:10px;letter-spacing:.17em;color:#82958a;font-weight:850}
 .cockpit-side-heading strong{display:block;margin-top:3px;font-size:22px;color:#315b49}
 .cockpit-online{font-size:11px;color:#44896c;background:#eaf5e6;border-radius:20px;padding:7px 10px;white-space:nowrap}
 .cockpit-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;background:#edf2e9;padding:5px;border-radius:13px;position:sticky;top:-12px;z-index:12;margin-bottom:10px}
 .cockpit-tab{border:0;border-radius:9px;padding:11px 3px;cursor:pointer;background:transparent;color:#6a8174;font:800 12px system-ui,sans-serif;white-space:nowrap}
 .cockpit-tab.active{background:#367a60;color:#fff;box-shadow:0 3px 8px #315c492b}
 .cockpit-panel[hidden]{display:none!important}
 .cockpit-panel{min-width:0}
 .cockpit-panel #builder{width:100%!important;max-width:none!important;margin:0!important;min-width:0!important;box-shadow:none!important;border:0!important;border-radius:12px!important}
 .cockpit-panel #builder .panel-heading{padding:12px 10px!important}
 .cockpit-panel #builder .scene{height:clamp(330px,43dvh,520px)!important;min-height:330px!important;max-height:520px!important}
 .cockpit-panel #builder.has-selected-building .scene{height:330px!important;min-height:330px!important}
 .cockpit-panel #builder .controls{padding:10px!important}
 .cockpit-panel #builder .desktop-action-dock{margin:6px 7px!important;padding:9px!important;gap:5px!important}
 .cockpit-panel #builder .desktop-action-dock button{font-size:10px!important;padding:6px 3px!important}
 .cockpit-panel .city-progression,.cockpit-panel .city-dashboard,.cockpit-panel .next-goal,.cockpit-panel .districts-panel{margin:0 0 11px!important;width:100%!important;max-width:none!important;box-sizing:border-box!important;padding:13px!important;border-radius:15px!important;box-shadow:none!important}
 .cockpit-panel .city-dashboard{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .cockpit-panel .city-dashboard .goal{grid-column:1/-1!important}
 .cockpit-panel .city-dashboard .metric{border-left:0!important;padding:8px!important;background:#f0f4e9;border-radius:11px}
 .cockpit-panel .city-dashboard .metric strong{font-size:23px!important}
 .cockpit-panel .city-dashboard .need{grid-column:1/-1!important}
 .cockpit-panel .districts-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .cockpit-panel .next-goal-heading{flex-wrap:wrap}
 .desktop-cockpit+.project-picker{display:none!important}
 body.desktop-picker-open .project-picker{display:grid!important}
 main>footer{margin-top:12px!important}
}
@media(min-width:701px) and (max-width:1080px){
 .desktop-cockpit .workspace{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)!important;gap:9px!important}
 .cockpit-side{padding:8px}
 .resource-bar small{font-size:10px!important}.resource-bar strong{font-size:18px!important}
 .desktop-cockpit .city .map{min-height:510px!important}
}


/* v0.9.9 adaptive building inspector */
@media(min-width:701px){
 .cockpit-panel #builder[hidden]{display:none!important}
 .desktop-building-inspector[hidden]{display:none!important}
 .desktop-building-inspector{background:linear-gradient(180deg,#f6f8ef,#fffdf7 46%);border:1px solid #d5e4cf;border-radius:18px;padding:18px 16px 15px;box-shadow:0 12px 28px #3359470e;color:#33574b}
 .inspector-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .inspector-kicker{font-size:10px;letter-spacing:.15em;font-weight:900;color:#789081}
 #inspectorClose{border:1px solid #d4e2d0;background:#eef4e9;border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:16px;color:#426753}
 .desktop-building-inspector h2{font-size:25px;line-height:1.12;margin:10px 0 4px;color:#2f5d4b}
 .inspector-address{font-size:13px;color:#748b7e;margin:0 0 10px}
 .inspector-illustration{display:flex;align-items:center;justify-content:center;overflow:hidden;height:clamp(180px,29dvh,280px);border-radius:15px;border:1px solid #d5e6d5;background:radial-gradient(ellipse at 50% 80%,#e6edce,#d5e9e2 65%,#d5eaf1);padding:10px}
 .inspector-illustration svg{display:block;max-height:100%;max-width:100%;width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 10px 9px #42664b22)}
 .inspector-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
 .inspector-metric{border:1px solid #d9e7d5;background:#f0f5eb;border-radius:12px;padding:10px;min-width:0}
 .inspector-metric small{display:block;font-size:11px;color:#6d897a}
 .inspector-metric strong{display:block;font-size:20px;margin-top:3px;color:#315b4a}
 .inspector-help{font-size:11px;color:#7a8d7f;line-height:1.5;margin:6px 0 12px}
 .desktop-building-inspector #cityActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important}
 .desktop-building-inspector #cityActions #actionText,.desktop-building-inspector #cityActions #selectionHelp,.desktop-building-inspector #cityActions #impactDetails{grid-column:1/-1!important;margin:0!important}
 .desktop-building-inspector #cityActions #actionText{font-size:12px!important;font-weight:800!important}
 .desktop-building-inspector #cityActions #selectionHelp{font-size:11px!important}
 .desktop-building-inspector #cityActions #impactDetails{max-height:120px!important;overflow:auto!important;font-size:11px!important}
 .desktop-building-inspector #cityActions button{min-height:47px!important;border-radius:12px!important;font-size:12px!important;font-weight:800!important;padding:8px!important;white-space:normal!important}
 .desktop-building-inspector #demolishBuilding{background:#fff0e9!important;color:#a74f43!important;border-color:#e8c1b5!important}
 .desktop-building-inspector #cityActions button[hidden]{display:none!important}
}
@media(max-width:700px){.desktop-building-inspector{display:none!important}}