@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#183b36;background:#edf3ef;font-synthesis:none;--ink:#173a35;--paper:#f4f7f2;--orange:#ef9b45;--yellow:#f2bf55;--blue:#75aeb5}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit}button:focus-visible{outline:3px solid #ef9b45;outline-offset:3px}.menu-screen{position:relative;width:100%;height:100%;min-height:600px;padding:clamp(24px,4vw,62px);background:#eff4ef;overflow:hidden;isolation:isolate}.brand{position:relative;z-index:2;display:flex;align-items:center;gap:13px;font:800 clamp(22px,2vw,30px) "Manrope";letter-spacing:-1px}.brand-mark,.mini-brand b,.city-brand>b{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ink);color:#f6c253;font:800 22px Manrope}.hero{position:absolute;z-index:2;left:clamp(24px,7vw,110px);top:50%;width:min(540px,46vw);transform:translateY(-48%)}.hero-kicker{margin:0 0 23px;color:#df7742;font-weight:700;letter-spacing:.04em}.hero h1{margin:0;font:800 clamp(58px,7.4vw,116px)/.9 "Manrope";letter-spacing:-.075em;color:#163a35}.hero-copy{max-width:500px;margin:34px 0 28px;color:#52706a;font-size:clamp(17px,1.35vw,21px);line-height:1.6}.menu-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.primary-btn{border:0;border-radius:15px;padding:18px 22px;background:#173c36;color:#fff;font-weight:700;box-shadow:0 11px 25px #173c3633;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:36px;min-width:250px}.primary-btn span{font-size:26px;line-height:.5;color:#f5bd54}.continue-btn{min-width:330px;border:1px solid #cad9d1;border-radius:15px;background:#ffffffb8;padding:12px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left}.continue-btn .save-dot{width:9px;height:9px;border-radius:50%;background:#6aa36c}.continue-btn span:nth-child(2){display:flex;flex-direction:column}.continue-btn small{color:#7a918b;margin-top:2px}.continue-btn i{margin-left:auto;font-size:22px}.map-art{position:absolute;z-index:0;width:58vw;height:116vh;right:-4vw;top:-7vh;transform:rotate(-6deg);background:#9dc8c4;clip-path:polygon(21% 0,100% 0,100% 100%,3% 95%,10% 72%,0 48%);box-shadow:inset 20px 0 60px #1c4c4826}.map-grid{position:absolute;inset:0;background-image:linear-gradient(35deg,transparent 46%,rgba(255,255,255,.22) 47%,rgba(255,255,255,.22) 49%,transparent 50%),linear-gradient(-30deg,transparent 46%,rgba(41,91,84,.14) 47%,rgba(41,91,84,.14) 49%,transparent 50%);background-size:90px 80px}.river{position:absolute;width:130%;height:25%;left:-12%;top:42%;background:#77b2bb;transform:rotate(-18deg);border-block:5px solid rgba(255,255,255,.4);box-shadow:0 0 0 25px #58908b40}.block{position:absolute;background:#d4dfc5;border:8px solid rgba(255,255,255,.55);box-shadow:0 15px 40px #2b574c24}.block-a{width:170px;height:230px;right:12%;top:12%;transform:rotate(8deg)}.block-b{width:240px;height:160px;right:36%;bottom:13%;transform:rotate(-13deg)}.block-c{width:120px;height:120px;right:5%;bottom:17%}.map-road{position:absolute;height:13px;background:#f0eee1;border:2px solid #75978f;box-shadow:0 0 0 5px #ffffff4d}.road-a{width:90%;top:33%;right:-4%;transform:rotate(22deg)}.road-b{width:72%;bottom:29%;right:10%;transform:rotate(-35deg)}.map-pin{position:absolute;top:28%;left:46%;width:82px;height:82px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);background:#f2b749;box-shadow:0 16px 35px #3f52484d;display:grid;place-items:center}.map-pin span{width:25px;height:25px;border-radius:50%;background:#f7f2de}.menu-footer{position:absolute;z-index:2;left:clamp(24px,4vw,62px);right:clamp(24px,4vw,62px);bottom:25px;display:flex;justify-content:space-between;align-items:center;color:#7c938d;font-size:10px;letter-spacing:.14em}.menu-footer button{border:1px solid #c6d4cf;background:transparent;border-radius:50%;width:32px;height:32px;cursor:pointer}.menu-footer button.muted{text-decoration:line-through}.select-screen{min-height:100%;background:#e9f0ec;padding:40px clamp(28px,6vw,90px) 30px;display:flex;flex-direction:column}.select-header{display:grid;grid-template-columns:65px 1fr auto;align-items:center;max-width:1350px;width:100%;margin:0 auto 30px}.select-header>div:nth-child(2) span{font-size:13px;color:#749089}.select-header h1{font:800 clamp(32px,4vw,56px) "Manrope";letter-spacing:-.045em;margin:2px 0}.back-btn{width:46px;height:46px;border-radius:50%;border:1px solid #c3d3cd;background:#f5f8f5;font-size:28px;cursor:pointer}.mini-brand{display:flex;align-items:center;gap:9px;font:700 20px Manrope}.mini-brand b{width:30px;height:30px;border-radius:8px;font-size:16px}.map-list{width:100%;max-width:1350px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;min-height:0}.map-card{min-width:0;padding:0;border:2px solid transparent;border-radius:22px;background:#f6f8f4;text-align:left;overflow:hidden;cursor:pointer;transition:transform .2s,border .2s,box-shadow .2s}.map-card:hover{transform:translateY(-4px)}.map-card.selected{border-color:#e5a344;box-shadow:0 18px 45px #2c4d4524}.preview{height:clamp(180px,28vh,320px);position:relative;overflow:hidden;background:var(--terrain);isolation:isolate}.preview:before{content:"";position:absolute;width:80%;height:150%;right:-23%;top:-25%;background:#76aeb7;border:10px solid rgba(255,255,255,.3);border-radius:45%;transform:rotate(17deg)}.preview:after{content:"";position:absolute;left:-10%;right:-10%;height:9px;top:48%;transform:rotate(-13deg);background:#e9e6d8;box-shadow:0 0 0 3px #728f88}.preview-road{position:absolute;z-index:2;width:10px;height:120%;left:46%;top:-10%;background:#e9e6d8;transform:rotate(25deg);box-shadow:0 0 0 3px #728f88}.preview-trees i{position:absolute;z-index:1;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#356e54;box-shadow:4px 5px #2a534126}.difficulty{position:absolute;z-index:3;left:15px;top:15px;background:#f4f8f4e0;border-radius:20px;padding:7px 11px;font-size:11px;font-weight:700}.selected-check{display:none;position:absolute;z-index:4;right:16px;top:16px;width:31px;height:31px;border-radius:50%;background:#e9a746;color:#fff;text-align:center;line-height:31px;font-weight:700}.selected .selected-check{display:block}.map-copy{padding:20px 22px 24px}.map-copy span{font-size:12px;color:#d47845;font-weight:700}.map-copy h3{font:800 25px Manrope;letter-spacing:-.04em;margin:4px 0 7px}.map-copy p{margin:0;color:#6e847e;line-height:1.45;font-size:13px;max-width:36ch}.select-footer{max-width:1350px;width:100%;margin:25px auto 0;display:flex;align-items:center;justify-content:space-between}.select-footer>div{display:flex;align-items:center;gap:10px;color:#6e837e;font-size:12px}.select-footer i{width:1px;height:20px;background:#c9d6d1;margin:0 5px}.legend-dot{width:9px;height:9px;border-radius:50%;background:#e9a746}.select-footer .primary-btn{min-width:210px}.game-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#a6cbc4;touch-action:none}#game-canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}.game-topbar{position:absolute;z-index:3;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));height:67px;background:#f7faf7f0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 30px #27484226;border-radius:18px;display:flex;align-items:center;padding:8px 12px}.city-brand{display:flex;align-items:center;gap:10px;border:0;background:transparent;cursor:pointer;padding:0 15px 0 0;min-width:210px;text-align:left}.city-brand>b{width:39px;height:39px;border-radius:11px}.city-brand span{display:flex;flex-direction:column}.city-brand strong{font:700 14px Manrope}.city-brand small{font-size:10px;color:#759089;margin-top:2px}.city-brand i{margin-left:auto}.city-stats{height:42px;border-left:1px solid #d7e0dc;border-right:1px solid #d7e0dc;display:flex;align-items:center;flex:1;justify-content:center;gap:clamp(18px,3vw,55px)}.city-stats>div{display:flex;align-items:center;gap:8px;min-width:100px}.city-stats p{margin:0;display:flex;flex-direction:column}.city-stats b{font:700 14px Manrope}.city-stats small{font-size:9px;color:#7d918c}.stat-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:12px}.people{background:#dbece6;color:#3d826d}.happy{background:#f7ebc8;color:#d7992e}.coin{background:#f6ddca;color:#cf7447}.time-control{display:flex;align-items:center;gap:4px;padding-left:14px}.time-control>span{font-size:11px;color:#6f8580;margin-right:8px}.time-control button{border:0;background:transparent;border-radius:7px;width:28px;height:28px;cursor:pointer;color:#718781}.time-control button.active{background:#173c36;color:#fff}.demand-panel{position:absolute;z-index:2;top:96px;right:18px;width:162px;background:#f7faf7e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:13px 15px;border-radius:13px;box-shadow:0 8px 24px #2748421f}.demand-panel h3{font-size:11px;margin:0 0 8px}.demand-panel label{display:grid;grid-template-columns:58px 1fr;align-items:center;font-size:9px;color:#668079;margin:5px 0}.demand-panel i{height:5px;background:#dce5e0;border-radius:4px;overflow:hidden}.demand-panel b{display:block;height:100%;background:#5ba46c;border-radius:4px}.demand-panel label:nth-child(3) b{background:#5a9fc4}.demand-panel label:nth-child(4) b{background:#d8b34e}.zoom-controls{position:absolute;z-index:3;right:18px;bottom:112px;display:flex;flex-direction:column;background:#f6f8f5;border-radius:11px;overflow:hidden;box-shadow:0 6px 18px #27484224}.zoom-controls button{width:38px;height:38px;border:0;background:transparent;font-size:20px;cursor:pointer}.zoom-controls button+button{border-top:1px solid #d7e0dc}.tool-dock{position:absolute;z-index:4;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);background:#f8faf7f5;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:17px;padding:7px;display:flex;gap:3px;box-shadow:0 10px 35px #21433d33;max-width:calc(100vw - 30px);overflow-x:auto}.tool-dock button{flex:0 0 61px;height:61px;border:0;background:transparent;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}.tool-dock button span{font:600 23px Manrope;line-height:1}.tool-dock small{font-size:9px}.tool-dock button.active{background:#173c36;color:#fff}.tool-dock button.active span{color:#f3bb50}.tool-dock .save-button{border-left:1px solid #d7e0dc;border-radius:0;margin-left:3px;padding-left:5px}.tool-info{position:absolute;z-index:2;left:18px;bottom:112px;display:flex;align-items:center;gap:10px;background:#f7faf7e8;padding:10px 14px;border-radius:12px;box-shadow:0 8px 22px #27484221}.tool-info>b{width:34px;height:34px;border-radius:9px;background:#173c36;color:#f1b850;display:grid;place-items:center;font-size:20px}.tool-info span{display:flex;flex-direction:column}.tool-info strong{font-size:12px}.tool-info small{font-size:9px;color:#7a8d88;margin-top:2px}.tutorial{display:none;position:absolute;z-index:5;left:25px;top:102px;width:285px;background:#173c36;color:#fff;padding:22px 22px 18px;border-radius:16px;box-shadow:0 14px 40px #1436314d}.tutorial.show{display:block;animation:pop .3s ease-out}.tutorial-index{color:#e7b450;font-size:10px;font-weight:700}.tutorial h3{font:700 18px Manrope;margin:7px 0}.tutorial p{color:#bad0c9;font-size:12px;line-height:1.5;margin:0 0 15px}.tutorial-next{border:0;background:#f0b44b;border-radius:8px;padding:8px 12px;font-size:11px;font-weight:700;cursor:pointer}.close-tutorial{position:absolute;right:11px;top:9px;border:0;background:transparent;color:#aac3bc;font-size:20px;cursor:pointer}.toast{position:absolute;z-index:10;left:50%;top:90px;transform:translate(-50%,-10px);background:#173c36;color:#fff;border-radius:25px;padding:10px 17px;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%)}.game-menu-popover{display:none;position:absolute;z-index:10;left:19px;top:90px;width:210px;background:#f7faf7;padding:7px;border-radius:13px;box-shadow:0 15px 40px #1b3c3633}.game-menu-popover.open{display:flex;flex-direction:column}.game-menu-popover button{border:0;background:transparent;text-align:left;padding:11px;border-radius:8px;cursor:pointer;font-size:12px}.game-menu-popover button:hover{background:#e9f0ec}@keyframes pop{0%{opacity:0;transform:translateY(-8px) scale(.98)}}@media(max-width:800px){.menu-screen{min-height:500px;padding:22px}.map-art{width:100vw;height:58vh;top:auto;bottom:-10vh;right:-20vw;opacity:.85}.hero{left:25px;top:44%;width:calc(100% - 50px);transform:translateY(-50%)}.hero h1{font-size:clamp(48px,13vw,78px)}.hero-copy{max-width:470px;font-size:15px;margin:22px 0}.menu-footer{display:none}.select-screen{padding:20px 18px}.select-header{grid-template-columns:52px 1fr;margin-bottom:15px}.mini-brand{display:none}.select-header h1{font-size:34px}.map-list{grid-template-columns:repeat(3,minmax(260px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px}.map-card{scroll-snap-align:center}.preview{height:220px}.select-footer>div{display:none}.select-footer{justify-content:flex-end;margin-top:8px}.game-topbar{height:62px}.city-brand{min-width:170px}.city-stats{justify-content:flex-end;border-right:0;gap:12px}.city-stats>div{min-width:auto}.city-stats small,.stat-icon,.city-stats>div:nth-child(2){display:none}.time-control{position:absolute;right:7px;top:70px;background:#f7faf7ed;border-radius:11px;padding:5px}.time-control>span{display:none}.demand-panel{top:139px}.tutorial{top:86px;left:15px;width:260px}.tool-dock{left:15px;right:15px;transform:none}.tool-info{display:none}.zoom-controls{bottom:105px}.tool-dock button{flex-basis:58px}.tool-dock .save-button{margin-left:auto}.city-brand i{display:none}}@media(max-width:520px){.hero{top:41%}.hero-kicker{margin-bottom:13px}.hero-copy{line-height:1.45}.continue-btn{min-width:min(330px,100%)}.primary-btn{padding:15px 18px}.brand{font-size:22px}.brand-mark{width:34px;height:34px}.map-art{height:52vh}.city-stats>div:nth-child(3){display:none}.demand-panel{display:none}.tool-dock button{flex-basis:56px}.tool-dock small{font-size:8px}.tutorial{top:85px}.zoom-controls{right:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}