body:has(.city-page){overflow:hidden}.city-page{background:#beebff;height:calc(100vh - 8rem);overflow:hidden}.city-topbar{z-index:9;background:#fff8ec;border-bottom:2px solid #15110d;flex-direction:column;gap:1rem;width:100%;padding:1rem 1.5rem;display:flex;position:relative}.city-topbar__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;display:grid}.city-topbar__stats div{background:#fff;border:2px solid #15110d;border-radius:.5rem;padding:.45rem .65rem;box-shadow:3px 3px #15110d}.city-topbar__stats span{color:#847c70;letter-spacing:.08em;text-transform:uppercase;font-family:JetBrains Mono,ui-monospace,monospace;font-size:.58rem;font-weight:700;display:block}.city-topbar__stats strong{margin-top:.1rem;font-size:1rem;line-height:1;display:block}.city-stage{background:linear-gradient(135deg,#fff8ec38 0 12%,#0000 12% 100%),linear-gradient(45deg,#4cc9f040 0 18%,#0000 18% 100%),#beebff;border-bottom:2px solid #15110d;height:calc(100vh - 14rem);position:relative;overflow:hidden}.city-scroll{cursor:grab;overscroll-behavior:contain;scrollbar-width:none;touch-action:none;-webkit-user-select:none;user-select:none;background:#beebff;padding:5.5rem 2rem 9rem;position:absolute;inset:0;overflow:auto}.city-scroll::-webkit-scrollbar{display:none}.city-scroll.is-dragging{cursor:grabbing}.city-map{grid-template-columns:repeat(var(--city-cols), 2.05rem);zoom:var(--city-zoom);transform-origin:0 0;grid-auto-rows:2.05rem;gap:.08rem;min-width:max-content;padding:1.25rem 18rem 4rem 1.25rem;display:grid;transform:skewY(-6deg)}.city-tile{z-index:1;width:2.05rem;height:2.05rem;box-shadow:none;border:1px solid #0000;border-radius:.32rem;position:relative}.city-toolbar,.city-zoom-controls,.city-pan-controls,.city-plot-dock{z-index:10000}.city-plot-dock{z-index:10020}button.city-tile{cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}button.city-tile:hover,button.city-tile:focus-visible{z-index:8;border-color:#15110d;outline:none;transform:translate(-2px,-2px);box-shadow:4px 4px #15110d}.city-terrain-land{background:radial-gradient(circle at 22% 24%,#fff8ec6b 0 .14rem,#0000 .16rem),radial-gradient(circle at 72% 68%,#15110d12 0 .1rem,#0000 .12rem),#eedfa4}.city-terrain-water{background:repeating-linear-gradient(135deg,#fff8ec59 0 .12rem,#0000 .12rem .55rem),#4cc9f0;border-color:#1d2b5338;box-shadow:inset -2px -2px #15110d17}.city-plot-available{background:linear-gradient(135deg,#fff8ecbf,#fff8ec59),#eedfa4;border:1px dashed #15110d61;box-shadow:inset -2px -2px #15110d14}.city-plot-available:after{content:"";background:#ffd23f;border:1px solid #15110d;border-radius:.08rem;width:.34rem;height:.34rem;position:absolute;bottom:.22rem;right:.22rem;transform:skewY(6deg)}.city-plot-claimed{border-color:#15110d}.city-kind-landmark{box-shadow:inset -3px -3px #15110d14,0 0 0 3px #ffd23f73}.city-detail-tree:before,.city-detail-tree-alt:before,.city-detail-shrub:before,.city-detail-lamp:before,.city-detail-bench:before,.city-detail-flower:before,.city-detail-wave:before,.city-detail-car-hot:before,.city-detail-car-sky:before,.city-detail-crossing:before,.city-detail-fountain:before{content:"";z-index:2;position:absolute;transform:skewY(6deg)}.city-detail-tree:before,.city-detail-tree-alt:before{background:#2fbf71;border:2px solid #15110d;border-radius:50% 50% 42% 42%;width:.72rem;height:.72rem;top:.34rem;left:.55rem;box-shadow:.18rem .5rem 0 -.12rem #7b5b34}.city-detail-tree-alt:before{background:#c2f04a;top:.28rem;left:.72rem}.city-detail-shrub:before{background:#2fbf71;border:2px solid #15110d;border-radius:999px;width:1rem;height:.48rem;top:.72rem;left:.48rem}.city-detail-lamp:before{background:#15110d;border:1px solid #15110d;width:.16rem;height:1.05rem;top:.35rem;left:.92rem;box-shadow:0 -.18rem 0 .16rem #ffd23f}.city-detail-bench:before{background:#a66a3f;border:2px solid #15110d;border-radius:.12rem;width:1rem;height:.32rem;top:.82rem;left:.48rem;box-shadow:0 .34rem 0 -.1rem #15110d}.city-detail-flower:before{background:#ff4d8d;border-radius:50%;width:.26rem;height:.26rem;top:.6rem;left:.62rem;box-shadow:.34rem .1rem #ffd23f,.64rem -.08rem #ff3d2e,.24rem .44rem #fff8ec}.city-detail-wave:before{border-top:3px solid #fff8eccc;border-radius:50%;width:1.28rem;height:.46rem;top:.78rem;left:.34rem}.city-detail-car-hot:before,.city-detail-car-sky:before{background:#ff3d2e;border:2px solid #15110d;border-radius:.18rem;width:1.1rem;height:.54rem;top:.72rem;left:.48rem;box-shadow:.12rem .42rem 0 -.1rem #15110d,.72rem .42rem 0 -.1rem #15110d}.city-detail-car-sky:before{background:#4cc9f0}.city-detail-crossing:before{background:repeating-linear-gradient(90deg,#fff8ec 0 .16rem,#0000 .16rem .34rem);inset:.28rem .25rem}.city-detail-fountain:before{background:radial-gradient(circle,#fff8ec 0 .16rem,#4cc9f0 .18rem .36rem,#0000 .38rem),#dff6ff;border:2px solid #15110d;border-radius:50%;width:1rem;height:1rem;top:.46rem;left:.5rem}.city-building{border:2px solid #15110d;border-radius:.24rem .24rem .1rem .1rem;width:1.12rem;min-height:1.18rem;display:block;position:absolute;bottom:.28rem;left:50%;transform:translate(-50%)skewY(6deg);box-shadow:3px 3px #15110d4d}.city-building:before,.city-building:after{content:"";background:#fff8ec;border:1px solid #15110d;position:absolute}.city-building:before{width:.2rem;height:.2rem;top:.26rem;left:.18rem}.city-building:after{width:.2rem;height:.2rem;top:.26rem;right:.18rem}.city-building-house,.city-building-villa{clip-path:polygon(50% 0,100% 34%,100% 100%,0 100%,0 34%);min-height:1rem}.city-building-tower{width:.95rem;min-height:1.85rem}.city-building-workshop{width:1.45rem;min-height:1.15rem}.city-building-loft{width:1.25rem;min-height:1.5rem}.city-building-studio{border-radius:50% 50% .1rem .1rem;width:1.15rem;min-height:1.25rem}.city-building-shop{width:1.55rem;min-height:1.12rem}.city-building-flagship{width:1.5rem;min-height:1.9rem}.city-building-warehouse{width:1.75rem;min-height:1rem}.city-building-billboard{border-radius:.1rem;width:1.85rem;min-height:1.35rem}.city-building-mall{width:1.85rem;min-height:1.55rem}.city-building-kiosk{border-radius:.5rem .5rem .1rem .1rem;width:1rem;min-height:1rem}.city-building-depot{clip-path:polygon(0 32%,52% 0,100% 32%,100% 100%,0 100%);width:1.75rem;min-height:1.25rem}.city-building-hall{clip-path:polygon(50% 0,100% 30%,92% 100%,8% 100%,0 30%);width:1.95rem;min-height:1.8rem}.city-building-gate{clip-path:polygon(0 20%,30% 20%,30% 0,70% 0,70% 20%,100% 20%,100% 100%,66% 100%,66% 54%,34% 54%,34% 100%,0 100%);width:1.9rem;min-height:1.9rem}.city-building-market{clip-path:polygon(0 36%,14% 0,28% 36%,42% 0,56% 36%,70% 0,84% 36%,100% 0,100% 100%,0 100%);width:1.95rem;min-height:1.15rem}.city-building-monument{clip-path:polygon(50% 0,70% 18%,70% 72%,100% 100%,0 100%,30% 72%,30% 18%);width:1.1rem;min-height:1.8rem}.city-mini-label{z-index:2;opacity:0;text-overflow:ellipsis;white-space:nowrap;background:#fff8ec;border:1px solid #15110d;border-radius:.2rem;max-width:4.4rem;padding:.1rem .24rem;font-family:JetBrains Mono,ui-monospace,monospace;font-size:.42rem;font-weight:700;line-height:1.1;transition:opacity .12s;position:absolute;top:-1.05rem;left:50%;overflow:hidden;transform:translate(-50%)skewY(6deg);box-shadow:2px 2px #15110d40}button.city-tile:hover .city-mini-label,button.city-tile:focus-visible .city-mini-label{opacity:1}.city-price{color:#15110d;opacity:0;background:#fff8ecc7;border:1px dashed #15110d;border-radius:.25rem;justify-content:center;align-items:center;font-family:JetBrains Mono,ui-monospace,monospace;font-size:.42rem;font-weight:700;transition:opacity .12s;display:flex;position:absolute;inset:.3rem;transform:skewY(6deg)}button.city-tile:hover .city-price,button.city-tile:focus-visible .city-price{opacity:1}.city-toolbar,.city-zoom-controls,.city-plot-dock{z-index:10000;position:absolute}.city-toolbar{color:#847c70;letter-spacing:.08em;text-transform:uppercase;background:#fff8ecf0;border:2px solid #15110d;border-radius:.5rem;flex-wrap:wrap;gap:.65rem;max-width:calc(100% - 2rem);padding:.55rem .75rem;font-family:JetBrains Mono,ui-monospace,monospace;font-size:.58rem;font-weight:700;display:flex;top:1rem;left:1rem;box-shadow:4px 4px #15110d}.city-zoom-controls{background:#fff8ecf0;border:2px solid #15110d;border-radius:.55rem;align-items:center;gap:.45rem;padding:.45rem;display:flex;bottom:1rem;left:1rem;box-shadow:4px 4px #15110d}.city-zoom-controls button{background:#fff;border:2px solid #15110d;border-radius:.4rem;justify-content:center;align-items:center;width:2rem;height:2rem;font-family:JetBrains Mono,ui-monospace,monospace;font-weight:900;line-height:1;display:flex}.city-zoom-controls input{accent-color:#ff3d2e;width:8rem}.city-zoom-controls span{min-width:2.6rem;font-family:JetBrains Mono,ui-monospace,monospace;font-size:.68rem;font-weight:800}.city-plot-dock{z-index:10020;width:min(23rem,100vw - 2rem);top:1rem;right:1rem}.city-plot-card{background:#fff;border:2px solid #15110d;border-radius:.55rem;max-height:calc(100vh - 11rem);padding:1.25rem;overflow:auto;box-shadow:7px 7px #15110d}.city-key{border:1px solid #15110d;border-radius:.2rem;width:.8rem;height:.8rem;display:inline-block}.city-key-land{background:#f7e7b2}.city-key-water{background:#4cc9f0}@media (width>=900px){.city-topbar{flex-direction:row;justify-content:space-between;align-items:center}.city-topbar__stats{grid-template-columns:repeat(4,minmax(7rem,1fr))}}@media (width<=760px){.city-stage{min-height:calc(100vh - 17rem)}.city-scroll{padding:5.75rem 1rem 15rem}.city-map{grid-template-columns:repeat(var(--city-cols), 1.75rem);grid-auto-rows:1.75rem;padding-right:2rem}.city-tile{width:1.75rem;height:1.75rem}.city-plot-dock{z-index:45;width:auto;position:fixed;inset:auto .75rem .75rem}.city-plot-card{max-height:42vh;padding:1rem}}.city-map{grid-template-columns:repeat(var(--city-cols), 74px);transform-origin:0 0;grid-auto-rows:52px;gap:0;padding:5rem 24rem 10rem 5rem;transform:none}.city-tile{width:74px;height:52px;box-shadow:none;background:0 0;border:0;border-radius:0;overflow:visible}.city-sprite,.city-building{object-fit:contain;pointer-events:none;width:96px;max-width:none;height:96px;display:block;position:absolute;top:-28px;left:-11px}.city-sprite-terrain{z-index:1}.city-tile:before{content:none}.city-tile{background:0 0!important}.city-plot-available:after,.city-detail-tree:before,.city-detail-tree-alt:before,.city-detail-shrub:before,.city-detail-lamp:before,.city-detail-bench:before,.city-detail-flower:before,.city-detail-wave:before,.city-detail-car-hot:before,.city-detail-car-sky:before,.city-detail-crossing:before,.city-detail-fountain:before{display:none}.city-plot-claimed:before{opacity:.86}.city-building{z-index:4;min-height:0;box-shadow:none;pointer-events:none;border:0;border-radius:0;transform:none}.city-building:before,.city-building:after{content:none}.city-building-house,.city-building-villa,.city-building-workshop,.city-building-loft,.city-building-studio,.city-building-shop,.city-building-flagship,.city-building-mall,.city-building-kiosk,.city-building-depot,.city-building-tower,.city-building-billboard,.city-building-hall,.city-building-market,.city-building-gate,.city-building-monument{clip-path:none;border-radius:0}button.city-tile{border:0}button.city-tile:hover,button.city-tile:focus-visible{z-index:30;box-shadow:none;transform:none}button.city-tile:hover:before,button.city-tile:focus-visible:before,button.city-tile:hover .city-sprite,button.city-tile:focus-visible .city-sprite,button.city-tile:hover .city-building,button.city-tile:focus-visible .city-building{filter:none}.city-price{z-index:6;background:#fff8ec;border:2px solid #15110d;width:auto;min-width:3.2rem;height:auto;padding:.18rem .32rem;font-size:.5rem;inset:auto auto -.55rem 50%;transform:translate(-50%);box-shadow:2px 2px #15110d}.city-mini-label{z-index:8;top:-1.2rem;transform:translate(-50%)}@media (width<=760px){.city-map{grid-template-columns:repeat(var(--city-cols), 64px);grid-auto-rows:45px;padding:5rem 4rem 14rem 2rem}.city-tile{width:64px;height:45px}.city-sprite,.city-building{width:96px;height:96px;top:-34px;left:-16px}}.city-map{--iso-x:60px;--iso-y:30px;--sprite-size:160px;width:var(--city-map-width);height:var(--city-map-height);zoom:var(--city-zoom);transform-origin:0 0;min-width:0;margin:2rem 24rem 12rem 7rem;padding:0;display:block;position:relative;transform:none}.city-tile{left:var(--left);top:var(--top);width:var(--sprite-size);height:var(--sprite-size);z-index:var(--z);box-shadow:none;border:0;border-radius:0;position:absolute;overflow:visible;background:0 0!important;transition:none!important;transform:none!important}.city-sprite,.city-building,.city-detail-sprite,.city-flat-land,.city-hitbox,.city-claim-outline{width:var(--sprite-size);height:var(--sprite-size);pointer-events:none;top:0;left:0}.city-flat-land{z-index:1;width:calc(var(--iso-x) + var(--iso-x));height:calc(var(--iso-y) + var(--iso-y));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:radial-gradient(circle at 31% 36%,#fff8ec2e 0 1px,#0000 1.8px),radial-gradient(circle at 66% 61%,#446f2038 0 1px,#0000 1.7px),linear-gradient(135deg,#fff8ec1a,#0000 45%),linear-gradient(215deg,#2d581d14,#0000 50%),#86c522;position:absolute;top:54px;left:20px;box-shadow:inset 0 0 0 1px #2b561d38,inset 9px 0 #fff8ec09,inset -8px 0 #385e1f0b}.city-claim-outline{z-index:2;width:calc(var(--iso-x) + var(--iso-x));height:calc(var(--iso-y) + var(--iso-y));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);pointer-events:none;background:0 0;position:absolute;top:54px;left:20px}.city-hitbox{z-index:20;width:calc(var(--iso-x) + var(--iso-x));height:calc(var(--iso-y) + var(--iso-y));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);pointer-events:auto;background:0 0;position:absolute;top:54px;left:20px}.city-claim-outline:after{content:"";clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:.38;border:2px solid #fff8ec29;position:absolute;inset:8px}.city-tile.is-selected .city-claim-outline{filter:drop-shadow(0 0 #15110d)drop-shadow(1px 0 #15110d)drop-shadow(-1px 0 #15110d)drop-shadow(0 1px #15110d)drop-shadow(0 -1px #15110d)drop-shadow(0 0 8px #ffd23f85);background:radial-gradient(circle at 50% 52%,#fff8ec47 0 12%,#0000 13%),#ffd23f94}.city-tile.is-selected .city-claim-outline:before{content:"";clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:2px solid #15110d47;position:absolute;inset:10px}.city-tile.is-selected .city-claim-outline:after{opacity:.56;border-color:#15110d38;inset:19px}.city-detail-sprite{z-index:5;object-fit:contain;width:72px;height:72px;transform:scale(var(--tree-scale,.9)) scaleX(var(--tree-flip,1));transform-origin:50% 92%;position:absolute}.city-detail-sprite-tree-pine{left:var(--tree-x,44px);top:var(--tree-y,42px)}.city-detail-sprite-tree-spruce{left:var(--tree-x,46px);top:var(--tree-y,38px)}.city-detail-sprite-tree-round{left:var(--tree-x,56px);top:var(--tree-y,42px)}.city-detail-sprite-tree-bushy{left:var(--tree-x,58px);top:var(--tree-y,52px)}.city-detail-sprite-tree-autumn{left:var(--tree-x,52px);top:var(--tree-y,42px)}.city-building{z-index:6;width:var(--sprite-size);height:var(--sprite-size);object-fit:contain;object-position:center bottom;position:absolute;top:0;left:0}.city-building-hall,.city-building-gate,.city-building-monument{width:104px;height:108px;top:-30px;left:0}.city-building-market{width:108px;height:100px;top:-22px;left:-2px}button.city-tile{appearance:none;cursor:pointer;pointer-events:none;touch-action:none;margin:0;padding:0}button.city-tile .city-hitbox{pointer-events:auto}button.city-tile .city-detail-sprite,.city-map>div.city-tile{pointer-events:none}.city-tile,.city-tile *{-webkit-user-select:none;user-select:none}.city-detail-tree-pine,.city-detail-tree-spruce,.city-detail-tree-round,.city-detail-tree-bushy,.city-detail-tree-autumn{z-index:calc(var(--z) + 8)}button.city-tile:hover,button.city-tile:focus,button.city-tile:focus-visible,button.city-tile:active{z-index:var(--z);box-shadow:none;filter:none!important;outline:none!important;transform:none!important}button.city-tile:hover:before,button.city-tile:focus:before,button.city-tile:focus-visible:before,button.city-tile:active:before,button.city-tile:hover .city-sprite,button.city-tile:focus .city-sprite,button.city-tile:focus-visible .city-sprite,button.city-tile:active .city-sprite,button.city-tile:hover .city-building,button.city-tile:focus .city-building,button.city-tile:focus-visible .city-building,button.city-tile:active .city-building,button.city-tile:hover .city-detail-sprite,button.city-tile:focus .city-detail-sprite,button.city-tile:focus-visible .city-detail-sprite,button.city-tile:active .city-detail-sprite{filter:none!important}button.city-tile:hover .city-sprite,button.city-tile:focus .city-sprite,button.city-tile:focus-visible .city-sprite,button.city-tile:active .city-sprite,button.city-tile:hover .city-building,button.city-tile:focus .city-building,button.city-tile:focus-visible .city-building,button.city-tile:active .city-building{transform:none!important}.city-tile.is-selected{z-index:calc(var(--z) + 40)}.city-tile.is-selected:after,.city-tile.is-selected:before,.city-kind-resident.is-selected:after,.city-kind-store.is-selected:after,.city-kind-landmark.is-selected:after,.city-kind-resident.is-selected:before,.city-kind-store.is-selected:before,.city-kind-landmark.is-selected:before{content:none}.city-kind-resident.is-selected .city-building,.city-kind-store.is-selected .city-building,.city-kind-landmark.is-selected .city-building{filter:drop-shadow(0 0 #15110d)drop-shadow(0 0 5px #ffd23fe6)!important}.city-pan-controls{z-index:10000;background:#fff8ecf0;border:2px solid #15110d;border-radius:.55rem;grid-template-rows:repeat(3,2.15rem);grid-template-columns:repeat(3,2.15rem);gap:.25rem;padding:.45rem;display:grid;position:absolute;bottom:1rem;right:1rem;box-shadow:4px 4px #15110d}.city-pan-controls button{background:#fff;border:2px solid #15110d;border-radius:.4rem;justify-content:center;align-items:center;display:flex}.city-pan-controls svg{fill:#15110d;width:1.05rem;height:1.05rem}.city-pan-up{grid-area:1/2}.city-pan-left{grid-area:2/1}.city-pan-right{grid-area:2/3}.city-pan-down{grid-area:3/2}.city-plot-close{z-index:10030;background:#ff3d2e;border:2px solid #15110d;border-radius:999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;display:flex;position:absolute;top:-.75rem;right:-.75rem;box-shadow:3px 3px #15110d}.city-plot-close svg{fill:none;stroke:#fff8ec;stroke-width:3px;stroke-linecap:round;width:1rem;height:1rem}@media (width<=760px){.city-map{--iso-x:48px;--iso-y:24px;--sprite-size:128px;margin:2rem 4rem 14rem 3rem}.city-flat-land,.city-hitbox,.city-claim-outline{top:43px;left:16px}.city-detail-sprite{width:58px;height:58px}.city-pan-controls{bottom:4.7rem;right:.75rem}}