:root{--ink:#173f43;--ink-2:#2a5558;--paper:#f8e8b9;--glass:rgba(247,226,166,.92);--orange:#e8784e;--sun:#f0c953;--blue:#3d8f9b;--green:#588157;--shadow:0 5px 0 rgba(10,42,45,.25),0 16px 34px rgba(5,32,35,.2);font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-size:16px}
*{box-sizing:border-box}html,body,.game-shell{width:100%;height:100%;margin:0;overflow:hidden;background:#174d52}button,input{font:inherit}button{color:inherit}.game-shell{position:relative;isolation:isolate}#cityCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:none}.glass{background:var(--glass);border:2px solid rgba(18,61,65,.72);box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topbar{position:absolute;top:18px;left:18px;right:18px;height:68px;border-radius:16px;display:flex;align-items:center;padding:8px 10px 8px 16px;gap:20px;z-index:3}.brand{display:flex;align-items:center;gap:10px;min-width:165px}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--ink);color:var(--sun);font-size:20px;box-shadow:inset 0 -3px rgba(0,0,0,.16)}.brand-name{font-size:.78rem;line-height:.95;letter-spacing:.13em}.brand-name b{font-size:.92rem}.city-name-wrap{display:flex;flex-direction:column;gap:2px;min-width:180px;max-width:360px;flex:1}.city-name-wrap span{font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;opacity:.58}.city-name-wrap input{border:0;border-bottom:1px solid rgba(25,54,59,.18);background:transparent;padding:3px 0 4px;font-size:1.08rem;font-weight:750;color:var(--ink);outline:none}.city-name-wrap input:focus{border-color:var(--orange)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:7px}.icon-btn,.save-btn{border:0;border-radius:11px;min-width:42px;height:42px;background:rgba(25,54,59,.07);cursor:pointer;font-weight:800;transition:.18s}.icon-btn:hover,.icon-btn:focus-visible{background:rgba(25,54,59,.14);transform:translateY(-1px)}.save-btn{display:flex;align-items:center;gap:8px;padding:0 17px;background:var(--ink);color:#fff}.save-btn span{color:var(--sun);font-size:.7rem}.save-btn:hover{background:#244b51}
.map-mode-wrap{display:flex;flex-direction:column;gap:2px;min-width:150px}.map-mode-wrap span{font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em;opacity:.58}.map-mode-wrap select{border:1px solid rgba(25,54,59,.22);border-radius:6px;background:#fff3c8;color:var(--ink);padding:5px 28px 5px 8px;font-weight:750;outline:none}.map-mode-wrap select:focus{border-color:var(--orange)}
.toolbox{position:absolute;left:18px;top:104px;width:184px;border-radius:18px;padding:13px 10px 10px;z-index:3}.toolbox-title{margin:0 8px 9px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.55}.tool-list{display:flex;flex-direction:column;gap:3px}.tool{height:45px;width:100%;border:0;background:transparent;border-radius:11px;display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:7px;padding:4px 9px 4px 5px;text-align:left;font-size:.87rem;font-weight:700;cursor:pointer;transition:.16s}.tool:hover{background:rgba(25,54,59,.07)}.tool.active{background:var(--ink);color:#fff;box-shadow:0 7px 16px rgba(25,54,59,.22)}.swatch{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:1.18rem;background:#d9d2c2;color:var(--ink)}.swatch.road{background:#6e7778;color:#fff}.swatch.house{background:#ee8a5e;color:#fff}.swatch.tree{background:#6c9869;color:#fff}.swatch.water{background:#5eb7c8;color:#fff}.swatch.bridge{background:#bd8f68;color:#fff}.swatch.park{background:#91b66f;color:#fff}.swatch.erase{background:#e1d8c6}.swatch.pan{background:#e8c95a}kbd{font:600 .66rem/1 system-ui;padding:3px 5px;border-radius:5px;background:rgba(25,54,59,.08);opacity:.65}.tool.active kbd{background:rgba(255,255,255,.14)}.toolbox-divider{height:1px;background:rgba(25,54,59,.12);margin:8px 4px}.pan-tool{margin-top:0}
.help-card{position:absolute;right:18px;top:104px;display:flex;align-items:center;gap:12px;max-width:355px;padding:12px 42px 12px 13px;border-radius:16px;z-index:3;transition:.2s}.help-card.hidden{opacity:0;pointer-events:none;transform:translateY(-7px)}.mouse-art{width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:14px;font-size:1.2rem}.help-card b{display:block;font-size:.87rem}.help-card span:not(.mouse-art){font-size:.75rem;line-height:1.45;opacity:.66}.close-help{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:1.25rem;cursor:pointer;opacity:.5}.zoom-controls{position:absolute;right:18px;bottom:68px;display:flex;align-items:center;border-radius:14px;padding:5px;z-index:3}.zoom-controls button{border:0;background:transparent;width:38px;height:38px;border-radius:9px;font-size:1.2rem;font-weight:800;cursor:pointer}.zoom-controls button:hover{background:rgba(25,54,59,.08)}.zoom-controls span{width:54px;text-align:center;font-size:.74rem;font-weight:800}.zoom-controls .home{border-left:1px solid rgba(25,54,59,.13);border-radius:0 9px 9px 0;margin-left:4px}.status-pill{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font-size:.74rem;font-weight:700;z-index:3;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:#70a66a;box-shadow:0 0 0 3px rgba(112,166,106,.16)}.separator{height:12px;width:1px;background:rgba(25,54,59,.17)}
dialog{width:min(520px,calc(100vw - 28px));border:0;border-radius:24px;background:var(--paper);color:var(--ink);padding:0;box-shadow:0 30px 90px rgba(13,42,45,.35)}dialog::backdrop{background:rgba(16,41,43,.45);backdrop-filter:blur(5px)}dialog form{padding:24px}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head small{font-size:.7rem;font-weight:850;letter-spacing:.14em;color:var(--orange)}.dialog-head h2{font-size:1.55rem;margin:4px 0 8px}.dialog-head>button{border:0;background:rgba(25,54,59,.08);border-radius:50%;width:36px;height:36px;font-size:1.3rem;cursor:pointer}dialog p{line-height:1.55;color:#52676a}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}.dialog-actions button,.import-label{border:1px solid rgba(25,54,59,.13);background:#fff;border-radius:11px;padding:13px;font-weight:750;text-align:center;cursor:pointer}.dialog-actions .danger{color:#ae4b36}.import-label input{display:none}dialog footer{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid rgba(25,54,59,.1);padding-top:18px}dialog footer span{font-size:.72rem;line-height:1.4;opacity:.58}.primary{border:0;background:var(--ink);color:#fff;border-radius:11px;padding:12px 16px;font-weight:750;white-space:nowrap;cursor:pointer}.toast{position:absolute;left:50%;top:104px;transform:translate(-50%,-10px);background:var(--ink);color:#fff;padding:11px 17px;border-radius:11px;font-size:.82rem;font-weight:700;opacity:0;pointer-events:none;transition:.22s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:700px){.topbar{top:10px;left:10px;right:10px;height:60px;padding-left:10px;gap:7px}.brand{min-width:auto}.brand-name{display:none}.brand-mark{width:39px;height:39px}.city-name-wrap{min-width:0}.city-name-wrap span{display:none}.city-name-wrap input{font-size:.86rem}.map-mode-wrap{min-width:112px}.map-mode-wrap span{display:none}.map-mode-wrap select{max-width:112px;font-size:.72rem;padding:6px 4px}.top-actions{gap:3px}.top-actions .icon-btn:nth-child(-n+2){display:none}.save-btn{width:42px;padding:0;justify-content:center;font-size:0}.save-btn span{font-size:.8rem}.toolbox{left:10px;right:10px;top:auto;bottom:10px;width:auto;padding:7px;border-radius:16px}.toolbox-title,.toolbox-divider,.tool span:not(.swatch),.tool kbd{display:none}.tool-list{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.tool{height:47px;display:grid;grid-template-columns:1fr;padding:4px}.toolbox .pan-tool{display:none}.swatch{width:100%;height:39px}.status-pill{bottom:82px}.zoom-controls{right:10px;bottom:112px;flex-direction:column}.zoom-controls span{display:none}.zoom-controls .home{border-left:0;border-top:1px solid rgba(25,54,59,.13);margin:3px 0 0;border-radius:0 0 9px 9px}.help-card{display:none}.toast{top:80px}dialog footer{align-items:flex-end;flex-direction:column}.dialog-actions{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media (min-width:701px){.topbar{right:auto;width:min(910px,calc(100vw - 36px));border-radius:10px;padding-left:12px;gap:18px}.toolbox{border-radius:10px}.help-card{border-radius:10px}}
.icon-btn,.save-btn{border:2px solid rgba(19,58,61,.52);border-radius:7px;background:#f5d779;box-shadow:0 3px 0 rgba(19,58,61,.2);color:var(--ink)}.save-btn{background:#f0c953}.save-btn span{color:#e46645}.icon-btn:hover,.icon-btn:focus-visible,.save-btn:hover{background:#ffe58c}.tool{border-radius:7px}.tool.active{box-shadow:0 4px 0 rgba(7,35,38,.22)}.swatch{border-radius:6px}
.palette{position:absolute;left:216px;top:104px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 8px;border-radius:9px}.palette>span{font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.color-chip{width:28px;height:28px;border:2px solid rgba(12,48,51,.48);border-radius:6px;background:var(--chip);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}.color-chip.active{outline:3px solid #fff;outline-offset:1px;transform:scale(1.07)}
@media (max-width:700px){.palette{display:none}}
.swatch.edit{background:#725b82;color:#fff}.inspector{position:absolute;right:18px;top:188px;width:280px;padding:14px;border-radius:10px;z-index:4;transition:.2s}.inspector.hidden{opacity:0;pointer-events:none;transform:translateX(12px)}.inspector-head{display:flex;align-items:start;justify-content:space-between;gap:10px}.inspector-head small{display:block;font-size:.62rem;font-weight:900;letter-spacing:.1em;opacity:.55}.inspector-head strong{font-size:1.05rem}.inspector-head button{border:0;background:transparent;font-size:1.25rem;cursor:pointer}.floor-readout{display:flex;justify-content:space-between;margin:14px 0 9px;padding:8px 10px;border-radius:7px;background:rgba(255,255,255,.38);font-size:.82rem}.inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.inspector-grid button{border:1px solid rgba(25,54,59,.18);border-radius:7px;background:#fff4cd;padding:9px 6px;font-size:.76rem;font-weight:800;cursor:pointer}.inspector-grid button:hover{background:#fff}.inspector-grid .danger{grid-column:1/-1;color:#a64639;background:#f7d7c5}.exit-photo{position:absolute;right:18px;top:18px;z-index:30;border:2px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(16,42,45,.72);color:#fff;padding:10px 16px;font-weight:800;cursor:pointer;display:none}.photo-mode .topbar,.photo-mode .toolbox,.photo-mode .palette,.photo-mode .help-card,.photo-mode .zoom-controls,.photo-mode .status-pill,.photo-mode .inspector{opacity:0!important;pointer-events:none!important}.photo-mode .exit-photo{display:block}.photo-mode #cityCanvas{cursor:grab}@media (max-width:700px){.tool-list{grid-template-columns:repeat(8,1fr)}.inspector{left:10px;right:auto;top:80px;width:min(280px,calc(100vw - 80px))}}
#lightModeBtn{font-size:1.05rem}.photo-mode #lightModeBtn{opacity:0!important}