:root{--bg-primary:#0a0e14;--bg-surface:#0f172abf;--bg-surface-elevated:#1e293bd9;--bg-surface-card:#0f172ae6;--border-subtle:#ffffff14;--border-glow:#38bdf840;--border-focus:#38bdf8;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--color-res:#10b981;--color-com:#3b82f6;--color-ind:#f59e0b;--color-off:#06b6d4;--color-road:#64748b;--color-danger:#ef4444;--font-main:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;--shadow-dock:0 12px 36px #00000080, 0 0 0 1px #ffffff14;--shadow-card:0 8px 24px #0006, 0 0 0 1px #ffffff14}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body,#root{background-color:var(--bg-primary);width:100%;height:100%;color:var(--text-main);font-family:var(--font-main);-webkit-font-smoothing:antialiased;overflow:hidden}.font-mono{font-family:var(--font-mono)}.font-bold{font-weight:700}.flex-center{justify-content:center;align-items:center;display:flex}.gap-1{gap:4px}.text-xs{font-size:11px}.game-container{background:radial-gradient(circle,#111822 0%,#080c10 100%);width:100vw;height:100vh;position:relative;overflow:hidden}.simulation-canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.topbar-container{background:var(--bg-surface);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);height:52px;box-shadow:var(--shadow-dock);z-index:10;pointer-events:auto;justify-content:space-between;align-items:center;padding:0 16px;display:flex;position:absolute;top:12px;left:16px;right:16px}.topbar-section{align-items:center;gap:12px;display:flex}.brand-section{gap:16px}.logo-badge{align-items:center;gap:8px;display:flex}.logo-icon{font-size:20px}.logo-text{letter-spacing:-.02em;background:linear-gradient(135deg,#38bdf8 0%,#818cf8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:17px;font-weight:800}.city-date{border-left:1px solid var(--border-subtle);align-items:center;gap:10px;padding-left:12px;display:flex}.date-text{color:var(--text-muted);font-size:12px;font-weight:500}.clock-text{font-size:13px;font-weight:700;font-family:var(--font-mono);color:var(--text-main);border-radius:var(--radius-sm);background:#ffffff0d;border:1px solid #ffffff0f;padding:2px 8px}.phase-pill{text-transform:uppercase;letter-spacing:.04em;color:#fbbf24;border-radius:var(--radius-full);background:#f59e0b26;border:1px solid #f59e0b40;padding:3px 8px;font-size:10px;font-weight:700}.spec-badge-pill{color:#c084fc;border-radius:var(--radius-full);background:#8b5cf626;border:1px solid #8b5cf64d;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:700;display:flex}.spec-multiplier{color:#fff;background:#8b5cf6;border-radius:4px;padding:1px 5px;font-size:9px}.speed-section{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:#00000059;gap:4px;padding:3px}.speed-btn{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:28px;height:28px;transition:all .15s;display:flex}.speed-btn:hover{color:var(--text-main);background:#ffffff14}.speed-btn.active{color:#0b0f14;background:#38bdf8;box-shadow:0 0 10px #38bdf880}.ultra-speed-label{font-size:11px;font-weight:800;font-family:var(--font-mono)}.metrics-section{gap:16px}.metric-card{border-radius:var(--radius-md);align-items:center;gap:10px;padding:4px 8px;transition:background .15s;display:flex}.metric-card.clickable{cursor:pointer}.metric-card.clickable:hover{background:#ffffff0f}.metric-icon{justify-content:center;align-items:center;display:flex}.treasury-icon{color:#10b981}.pop-icon{color:#38bdf8}.happy-icon{color:#ec4899}.metric-content{flex-direction:column;display:flex}.metric-value{font-size:13px;font-weight:700;line-height:1.2}.metric-sub{color:var(--text-muted);font-size:10px;font-weight:500}.metric-sub.positive{color:#34d399}.metric-sub.negative{color:#f87171}.utils-section{gap:6px}.util-btn{border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;background:#ffffff0a;justify-content:center;align-items:center;width:32px;height:32px;transition:all .15s;display:flex}.util-btn:hover{color:var(--text-main);background:#ffffff1f;border-color:#fff3}.toolbar-wrapper{z-index:10;pointer-events:auto;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.road-type-submenu{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius-full);border:1px solid var(--border-subtle);background:#0f172ae6;align-items:center;gap:6px;padding:6px 10px;animation:.15s ease-out fadeIn;display:flex;box-shadow:0 8px 24px #0006}.road-type-chip{border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:var(--radius-full);cursor:pointer;background:#ffffff0d;padding:4px 12px;font-size:11px;font-weight:600;transition:all .15s}.road-type-chip:hover{color:var(--text-main);background:#ffffff1f}.road-type-chip.active-chip{color:#fff;background:#3b82f6;border-color:#60a5fa;box-shadow:0 0 10px #3b82f680}.demand-container{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-full);border:1px solid var(--border-subtle);background:#0f172ad9;align-items:center;gap:12px;padding:4px 14px;display:flex;box-shadow:0 4px 12px #0000004d}.demand-bar-group{align-items:center;gap:6px;display:flex}.demand-label{font-size:11px;font-weight:800}.demand-label.res{color:var(--color-res)}.demand-label.com{color:var(--color-com)}.demand-label.ind{color:var(--color-ind)}.demand-meter{border-radius:var(--radius-full);background:#ffffff1a;width:36px;height:6px;overflow:hidden}.demand-fill{border-radius:var(--radius-full);height:100%;transition:width .3s}.res-fill{background:var(--color-res)}.com-fill{background:var(--color-com)}.ind-fill{background:var(--color-ind)}.toolbar-dock{background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-dock);align-items:center;gap:4px;padding:6px 8px;display:flex}.dock-divider{background:var(--border-subtle);width:1px;height:28px;margin:0 4px}.dock-btn{color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;background:0 0;border:1px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:3px;height:48px;padding:0 10px;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.dock-btn:hover{color:var(--text-main);background:#ffffff0f;transform:translateY(-2px)}.dock-btn.active{color:#38bdf8;background:#38bdf826;border-color:#38bdf866;box-shadow:0 4px 12px #38bdf833}.dock-btn.road-btn.active{color:#60a5fa;background:#3b82f633;border-color:#3b82f6}.dock-btn.demolish-btn.active{color:#f87171;background:#ef444433;border-color:#ef4444}.dock-btn.res-btn.active{color:#34d399;background:#10b98133;border-color:#10b981}.dock-btn.com-btn.active{color:#60a5fa;background:#3b82f633;border-color:#3b82f6}.dock-btn.ind-btn.active{color:#fbbf24;background:#f59e0b33;border-color:#f59e0b}.dock-btn.off-btn.active{color:#22d3ee;background:#06b6d433;border-color:#06b6d4}.dock-btn.route-btn.active{color:#f472b6;background:#ec489933;border-color:#ec4899}.dock-btn.active-glow{color:#fb923c;background:#f9731640;border-color:#f97316;box-shadow:0 0 16px #f9731659}.dock-btn.mmo-btn:hover{color:#c084fc;background:#8b5cf626}.dock-btn-label{letter-spacing:.02em;font-size:10px;font-weight:600}.dock-shortcut{font-size:8px;font-weight:700;font-family:var(--font-mono);color:var(--text-dim);background:#00000040;border-radius:3px;padding:1px 3px;position:absolute;top:3px;right:4px}.submenu-indicator{color:var(--text-muted);position:absolute;top:4px;left:6px}.inspector-card{background:var(--bg-surface-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:310px;box-shadow:var(--shadow-card);z-index:10;animation:.2s cubic-bezier(.16,1,.3,1) slideIn;position:absolute;top:76px;right:16px;overflow:hidden}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.inspector-header{border-bottom:1px solid var(--border-subtle);background:#ffffff05;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.inspector-title{align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.inspector-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.inspector-close:hover{color:var(--text-main);background:#ffffff14}.inspector-body{flex-direction:column;gap:12px;padding:16px;display:flex}.resource-tag-box{border-radius:var(--radius-sm);color:#fbbf24;background:#f59e0b26;border:1px solid #f59e0b4d;align-items:center;gap:8px;margin-bottom:6px;padding:6px 10px;font-size:11px;font-weight:700;display:flex}.gateway-panel-box{border-radius:var(--radius-sm);background:#38bdf81a;border:1px solid #38bdf84d;flex-direction:column;gap:6px;margin-bottom:8px;padding:10px;display:flex}.gateway-header{align-items:center;gap:6px;font-size:12px;display:flex}.metering-badge{text-transform:uppercase;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:800}.metering-badge.green{color:#fff;background:#10b981}.metering-badge.yellow{color:#fff;background:#f59e0b}.metering-badge.red{color:#fff;background:#ef4444}.valve-toggle-btn{border:1px solid var(--border-subtle);color:var(--text-main);cursor:pointer;background:#ffffff14;border-radius:4px;margin-top:4px;padding:4px 8px;font-size:10px;font-weight:700}.valve-toggle-btn:hover{background:#ffffff26}.type-badge{border-radius:var(--radius-sm);letter-spacing:.04em;align-items:center;gap:6px;margin-bottom:8px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}.road-badge{color:#94a3b8;background:#64748b33;border:1px solid #64748b4d}.zone-badge-residential{color:#34d399;background:#10b98133;border:1px solid #10b9814d}.zone-badge-commercial{color:#60a5fa;background:#3b82f633;border:1px solid #3b82f64d}.zone-badge-industrial{color:#fbbf24;background:#f59e0b33;border:1px solid #f59e0b4d}.zone-badge-office{color:#22d3ee;background:#06b6d433;border:1px solid #06b6d44d}.empty-badge{color:var(--text-dim);background:#ffffff0d;border:1px solid #ffffff14}.inspector-row{justify-content:space-between;align-items:center;padding:3px 0;font-size:12px;display:flex}.inspector-row .label{color:var(--text-muted)}.inspector-row .value{color:var(--text-main);font-weight:600}.telemetry-group{flex-direction:column;gap:4px;display:flex}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background:#000000a6;justify-content:center;align-items:center;animation:.15s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-dialog{background:var(--bg-surface-elevated);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;width:90%;max-width:580px;max-height:85vh;animation:.2s cubic-bezier(.16,1,.3,1) scaleIn;display:flex;overflow:hidden;box-shadow:0 24px 48px #0009,0 0 0 1px #ffffff14}.macro-dialog{max-width:740px}.trade-dialog,.mega-dialog,.help-dialog{max-width:680px}.alert-dialog{border-color:#ef444466;max-width:500px}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{border-bottom:1px solid var(--border-subtle);background:#ffffff05;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-title{align-items:center;gap:10px;font-size:16px;font-weight:700;display:flex}.modal-close-btn{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.modal-close-btn:hover{color:var(--text-main);background:#ffffff14}.modal-body{flex-direction:column;gap:16px;padding:20px;display:flex;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-subtle);background:#0003;justify-content:flex-end;padding:14px 20px;display:flex}.region-meta-bar{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#00000059;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.region-instruction{color:var(--text-muted);font-size:12px}.macro-matrix-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.plot-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;background:#00000040;flex-direction:column;gap:6px;padding:10px;transition:all .15s;display:flex}.plot-card:hover{border-color:var(--border-glow);background:#ffffff0f;transform:translateY(-2px)}.plot-card.active-plot{background:#38bdf81f;border-color:#38bdf8;box-shadow:0 0 16px #38bdf840}.plot-header{justify-content:space-between;align-items:center;display:flex}.plot-coord{color:var(--text-dim);font-size:10px}.plot-name{font-size:13px;font-weight:700;line-height:1.2}.plot-mayor{font-size:11px}.plot-stats{justify-content:space-between;align-items:center;margin-top:4px;display:flex}.plot-stat-row{align-items:center;gap:4px;font-size:11px;display:flex}.plot-spec-badge{background:#ffffff14;border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700}.plot-active-pill{color:#38bdf8;text-align:center;background:#38bdf833;border-radius:4px;margin-top:4px;padding:4px;font-size:10px;font-weight:800}.visit-plot-btn{border:1px solid var(--border-subtle);color:var(--text-main);cursor:pointer;background:#ffffff14;border-radius:4px;justify-content:center;align-items:center;gap:4px;margin-top:4px;padding:4px 8px;font-size:10px;font-weight:700;display:flex}.visit-plot-btn:hover{color:#38bdf8;background:#38bdf84d}.commodity-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.commodity-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#00000040;flex-direction:column;gap:4px;padding:10px;display:flex}.commodity-icon-row{align-items:center;gap:6px;display:flex}.commodity-name{font-size:11px;font-weight:700}.commodity-stock{color:#38bdf8;font-size:14px;font-weight:800}.commodity-price{font-size:10px}.toll-banner{border-radius:var(--radius-md);background:#10b9811a;border:1px solid #10b9814d;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.contracts-section{flex-direction:column;gap:8px;display:flex}.section-title{font-size:13px;font-weight:700}.contracts-list{flex-direction:column;gap:8px;display:flex}.contract-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#00000040;flex-direction:column;gap:6px;padding:10px 12px;display:flex}.contract-header{justify-content:space-between;align-items:center;font-size:12px;display:flex}.contract-badge{border-radius:4px;padding:2px 6px;font-size:9px;font-weight:800}.export-badge{color:#fff;background:#10b981}.import-badge{color:#fff;background:#3b82f6}.contract-progress-bar{background:#ffffff1a;border-radius:9999px;width:100%;height:6px;overflow:hidden}.contract-fill{background:#3b82f6;border-radius:9999px;height:100%;transition:width .3s}.contract-footer{justify-content:space-between;font-size:10px;display:flex}.new-contract-box{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#0003;flex-direction:column;gap:10px;padding:12px 14px;display:flex}.form-row{grid-template-columns:1fr 1fr 1fr 1fr auto;align-items:flex-end;gap:10px;display:grid}.form-group{flex-direction:column;gap:4px;font-size:11px;display:flex}.form-select{border:1px solid var(--border-subtle);color:var(--text-main);border-radius:var(--radius-sm);background:#1e293b;padding:6px 8px;font-size:11px}.post-btn{padding:6px 12px;font-size:11px}.diplomatic-bar{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#00000059;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.mutual-aid-box{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#0003;flex-direction:column;gap:8px;padding:12px 14px;display:flex}.aid-btn-group{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.aid-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:11px;font-weight:700;transition:all .15s;display:flex}.police-btn{color:#60a5fa;background:#3b82f633;border-color:#3b82f6}.police-btn:hover{background:#3b82f659}.fire-btn{color:#f87171;background:#ef444433;border-color:#ef4444}.fire-btn:hover{background:#ef444459}.medical-btn{color:#34d399;background:#10b98133;border-color:#10b981}.medical-btn:hover{background:#10b98159}.projects-grid{flex-direction:column;gap:12px;display:flex}.project-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#00000040;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.project-card-header{align-items:center;gap:12px;display:flex}.project-icon{font-size:24px}.project-title{font-size:14px;font-weight:700}.project-desc{font-size:11px}.project-benefit-pill{border-radius:var(--radius-sm);color:#c084fc;background:#8b5cf626;border:1px solid #8b5cf64d;padding:4px 8px;font-size:11px}.funding-progress-group{flex-direction:column;gap:4px;display:flex}.funding-labels{justify-content:space-between;display:flex}.project-footer{justify-content:flex-end;display:flex}.contribute-btn{color:#fff;border-radius:var(--radius-sm);cursor:pointer;background:#8b5cf6;border:none;align-items:center;gap:6px;padding:6px 14px;font-size:11px;font-weight:700;transition:all .15s;display:flex}.contribute-btn:hover{background:#a855f7;box-shadow:0 0 12px #8b5cf680}.ledger-summary-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#00000059;justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.summary-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600}.summary-value{color:#38bdf8;margin-top:2px;font-size:20px;font-weight:800}.summary-flow{align-items:center;gap:6px;margin-top:2px;font-size:14px;font-weight:700;display:flex}.summary-flow.positive{color:#34d399}.summary-flow.negative{color:#f87171}.ledger-columns{grid-template-columns:1fr 1fr;gap:16px;display:grid}.ledger-col{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#0003;flex-direction:column;gap:8px;padding:14px;display:flex}.ledger-col-title{margin-bottom:4px;font-size:13px;font-weight:700}.ledger-item{color:var(--text-muted);justify-content:space-between;font-size:12px;display:flex}.ledger-total{border-top:1px solid;justify-content:space-between;margin-top:4px;padding-top:8px;font-size:13px;display:flex}.border-emerald{border-color:#10b98166}.border-rose{border-color:#ef444466}.tax-policies-container{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#0003;flex-direction:column;gap:12px;padding:16px;display:flex}.policy-section-title{font-size:13px;font-weight:700}.tax-slider-group{flex-direction:column;gap:6px;display:flex}.slider-header{justify-content:space-between;font-size:12px;display:flex}.slider-input{accent-color:#38bdf8;cursor:pointer;width:100%;height:4px}.guide-content{max-height:65vh}.guide-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#0003;flex-direction:column;gap:6px;padding:14px 16px;display:flex}.guide-card-header{align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.guide-card p{color:var(--text-muted);font-size:12px;line-height:1.5}.guide-list{color:var(--text-muted);padding-left:20px;font-size:12px;line-height:1.6}.formula-box{border-radius:var(--radius-sm);color:#38bdf8;background:#0006;border-left:3px solid #38bdf8;padding:8px 12px;font-size:11px}.shortcuts-grid{color:var(--text-muted);grid-template-columns:1fr 1fr;gap:6px;font-size:11px;display:grid}kbd{font-family:var(--font-mono);color:var(--text-main);background:#ffffff1a;border:1px solid #ffffff26;border-radius:4px;padding:2px 6px;font-weight:700}.primary-action-btn{color:#0b0f14;border-radius:var(--radius-md);cursor:pointer;background:#38bdf8;border:none;align-items:center;gap:8px;padding:8px 18px;font-size:13px;font-weight:700;transition:all .15s;display:inline-flex}.primary-action-btn:hover{background:#7dd3fc;box-shadow:0 0 16px #38bdf866}.secondary-action-btn{color:var(--text-main);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;background:#ffffff0f;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;display:inline-flex}.secondary-action-btn:hover{background:#ffffff1f}.bailout-btn{color:#fff;background:#10b981}.bailout-btn:hover{background:#34d399;box-shadow:0 0 16px #10b98166}.insolvency-alert{border-radius:var(--radius-md);color:#f87171;background:#ef444426;border:1px solid #ef444459;align-items:center;gap:12px;padding:12px 14px;font-size:12px;display:flex}.deficit-stat-box{border-radius:var(--radius-md);background:#0000004d;justify-content:space-between;align-items:center;margin:12px 0;padding:12px 16px;display:flex}.text-cyan{color:#06b6d4}.text-emerald{color:#10b981}.text-blue{color:#3b82f6}.text-amber{color:#f59e0b}.text-rose{color:#ef4444}.text-purple{color:#a855f7}.text-muted{color:var(--text-muted)}.text-right{text-align:right}