.ui-start{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(1100px 520px at 50% 18%,rgba(61,220,151,.16),transparent 60%),radial-gradient(900px 600px at 80% 90%,rgba(95,160,255,.12),transparent 60%),linear-gradient(180deg,#0a0e13,#0c141d 55%,#0a1118);animation:start-fade .35s ease}.ui-start.hidden{display:none}@keyframes start-fade{0%{opacity:0}to{opacity:1}}.start-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.start-skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:230px;opacity:.55;filter:drop-shadow(0 -8px 24px rgba(0,0,0,.5))}.start-content{position:relative;z-index:1;width:760px;max-width:92vw;padding:14px;text-align:center;animation:start-rise .4s cubic-bezier(.2,.7,.2,1)}@keyframes start-rise{0%{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}.start-logo{display:flex;align-items:center;justify-content:center;gap:12px}.start-logo.small{margin-bottom:12px}.start-mark{font-size:46px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}.start-name{font-size:48px;font-weight:900;letter-spacing:-1px;background:linear-gradient(100deg,#6ff0b6,#3ddc97 45%,#6fb3ff);-webkit-background-clip:text;background-clip:text;color:transparent}.start-logo.small .start-name{font-size:26px}.start-tag{color:var(--muted);font-size:15px;margin:8px 0 22px}.start-cta{display:flex;gap:12px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}.start-btn{padding:13px 26px;font-size:15px;font-weight:700;cursor:pointer;border-radius:12px;border:1px solid var(--border-strong);background:#ffffff0f;color:var(--text);transition:transform .12s,background .12s,box-shadow .12s}.start-btn:hover{transform:translateY(-2px);background:#ffffff1f}.start-btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-ink);border-color:#9bf0c8;box-shadow:0 8px 22px #3ddc9759}.start-btn.primary:hover{box-shadow:0 10px 28px #3ddc9780}.start-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.start-grid.grid-3{grid-template-columns:repeat(3,1fr)}.start-tile{display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;padding:15px 16px;border-radius:14px;border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);transition:transform .12s,border-color .12s,background .12s}.start-tile:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--panel-2)}.st-icon{font-size:28px;flex-shrink:0}.st-title{font-weight:700;font-size:16px}.st-desc{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}.start-foot{margin-top:20px;font-size:12px;color:var(--muted);opacity:.8}.scen-list{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}.scen-item{text-align:left;cursor:pointer;padding:12px 15px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);transition:transform .12s,border-color .12s}.scen-item:hover{transform:translateY(-2px);border-color:var(--accent)}.scen-name{font-weight:700;font-size:14.5px}.scen-desc{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}.rank-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-height:60px}.rank-info{color:var(--muted);font-size:13px;padding:14px;text-align:center}.rank-row{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:10px;background:var(--panel);border:1px solid var(--border);font-size:13px}.rank-row:nth-child(1){border-color:#ffd87399;background:#ffd87314}.rank-row:nth-child(2){border-color:#c8d2dc73}.rank-row:nth-child(3){border-color:#cd8c5a73}.rank-pos{width:22px;font-weight:800;color:var(--accent);text-align:center}.rank-name{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-pop,.rank-money,.rank-appr{color:var(--muted);font-size:12px;white-space:nowrap}.help-wrap{margin-bottom:14px}.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.help-card{text-align:left;padding:13px 15px;border-radius:12px;background:var(--panel);border:1px solid var(--border)}.help-card h4{margin:0 0 6px;font-size:14px}.help-card p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}.lobby{max-width:620px}.lobby-form{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.lobby-row{display:flex;gap:8px}.lobby-input{flex:1;padding:11px 13px;font-size:14px;border-radius:10px;border:1px solid var(--border-strong);background:#0000004d;color:var(--text)}.lobby-input:focus{outline:none;border-color:var(--accent)}.lobby-row .start-btn{flex:1}.lobby-status{font-size:13px;color:var(--muted);padding:2px;text-align:center}.lobby-status.err{color:var(--bad);font-weight:600}.lobby-head{display:flex;align-items:center;justify-content:space-between}.lobby-rooms{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:32vh;overflow-y:auto;min-height:50px}.lobby-room{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;cursor:pointer;border:1px solid var(--border);background:var(--panel);color:var(--text);transition:transform .12s,border-color .12s}.lobby-room:hover{transform:translateY(-2px);border-color:var(--accent)}.lr-name{font-weight:700}.lr-meta{font-size:12px;color:var(--muted)}.lobby-foot{display:flex;gap:8px}.lobby-foot .start-btn,.lobby-foot .ghost-btn{flex:1}.ui-chat{left:12px;bottom:14px;width:270px;max-width:60vw;display:flex;flex-direction:column;overflow:hidden}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;font-size:12.5px;font-weight:700;border-bottom:1px solid var(--border)}.chat-min{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}.chat-min:hover{color:var(--text)}.chat-log{height:168px;overflow-y:auto;padding:8px 11px;display:flex;flex-direction:column;gap:4px;font-size:12.5px}.ui-chat.collapsed .chat-log,.ui-chat.collapsed .chat-input{display:none}.chat-msg{line-height:1.35;word-break:break-word}.chat-msg.sys{color:var(--muted);font-style:italic;font-size:11.5px}.chat-from{color:var(--accent);font-weight:700}.chat-input{margin:8px;padding:8px 10px;font-size:13px;border-radius:8px;border:1px solid var(--border-strong);background:#0000004d;color:var(--text)}.chat-input:focus{outline:none;border-color:var(--accent)}.ui-scoreboard{right:12px;top:72px;width:210px;display:flex;flex-direction:column;overflow:hidden}.sb-head{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;font-size:12.5px;font-weight:700;border-bottom:1px solid var(--border)}.ui-scoreboard.collapsed .sb-list{display:none}.sb-list{display:flex;flex-direction:column;padding:5px;gap:2px;max-height:40vh;overflow-y:auto}.sb-row{display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:7px;font-size:12px}.sb-row.me{background:#3ddc9726}.sb-rank{width:20px;text-align:center}.sb-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.sb-pop{color:var(--muted);font-size:11px;white-space:nowrap}.ui-account{position:fixed;top:0;right:0;bottom:0;left:0;z-index:62;display:flex;align-items:center;justify-content:center;background:#060a0eb3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.ui-account.hidden{display:none}.account-card{width:360px;max-width:92vw;padding:22px;background:var(--panel);border:1px solid var(--border-strong);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;text-align:center}.account-body{display:flex;flex-direction:column;gap:10px}.account-info{font-size:13px;line-height:1.5}.rank-wrap{display:flex;flex-direction:column}.rank-tabs{display:flex;gap:6px;margin-bottom:8px}.rank-tab{flex:1;padding:8px;border-radius:9px;cursor:pointer;border:1px solid var(--border);background:#ffffff0d;color:var(--muted);font-size:13px}.rank-tab.active{background:#3ddc9726;border-color:var(--accent);color:var(--accent);font-weight:700}.rank-season{font-size:12px;color:var(--muted);text-align:center;margin-bottom:8px}@media(max-width:620px){.start-name{font-size:36px}.start-grid,.start-grid.grid-3,.help-grid{grid-template-columns:1fr}.rank-pop,.rank-money{display:none}}:root{--bg: #0c0f13;--panel: rgba(18, 22, 28, .74);--panel-2: rgba(36, 43, 52, .7);--border: rgba(255, 255, 255, .09);--border-strong: rgba(255, 255, 255, .16);--text: #e9eef3;--muted: #8c98a6;--accent: #3ddc97;--accent-2: #2bbf85;--accent-ink: #07140e;--good: #5fd28a;--bad: #ff7a7a;--warn: #e6c14d;--shadow: 0 10px 30px rgba(0, 0, 0, .45);--radius: 14px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}#app{position:relative;width:100vw;height:100vh}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;cursor:crosshair}.hidden,#app.hide-ui .ui{display:none!important}.ui{position:absolute;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);box-shadow:var(--shadow)}.muted{color:var(--muted)}.good{color:var(--good)}.bad{color:var(--bad)}.hud-top{top:10px;left:10px;right:10px;min-height:50px;display:flex;align-items:center;gap:12px;padding:6px 14px}.ui-spacer{flex:1}.hud-brand{color:var(--accent);font-weight:900;font-size:18px;cursor:default}.hud-stats{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.stat{display:inline-flex;align-items:center;gap:5px;font-size:14px;white-space:nowrap;color:var(--text)}.stat.money{font-weight:800;color:var(--accent);font-size:16px}.stat.money.negative{color:var(--bad)}.stat.time{gap:8px;color:var(--text);font-size:13px}.stat.time .stat-sub{color:var(--muted)}.stat-ico{font-size:14px}.hud-stats .rci{margin-left:2px}.rci{display:flex;gap:5px;align-items:flex-end;padding:0 4px}.rci-col{display:flex;flex-direction:column;align-items:center;gap:2px}.rci-track{position:relative;width:11px;height:30px;background:#00000059;border:1px solid var(--border);border-radius:4px;overflow:hidden}.rci-fill{position:absolute;left:0;right:0;height:0;border-radius:2px}.rci-label{font-size:9px;color:var(--muted)}.seg{display:inline-flex;gap:3px;background:#0000004d;border:1px solid var(--border);border-radius:10px;padding:3px}.seg-btn{background:transparent;color:var(--text);border:none;border-radius:7px;padding:5px 9px;font-size:13px;cursor:pointer;transition:background .12s}.seg-btn:hover{background:#ffffff12}.seg-btn.active{background:var(--accent);color:var(--accent-ink);font-weight:700}.hud-controls{display:flex;align-items:center;gap:6px}.hud-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:16px;cursor:pointer;transition:transform .1s,background .12s}.hud-icon:hover{background:#ffffff1f;transform:translateY(-1px)}.hud-icon.active{background:var(--accent);color:var(--accent-ink);border-color:#9bf0c8}.hud-icon.off{opacity:.4}.hud-pop{position:absolute;top:64px;right:10px;z-index:30;width:232px;max-height:78vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border-strong);border-radius:12px;padding:7px;box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);display:flex;flex-direction:column;gap:2px;animation:pop-in .12s ease}@keyframes pop-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.pop-title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:6px 8px 2px}.pop-sep{height:1px;background:var(--border);margin:4px 2px}.pop-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;background:transparent;border:none;color:var(--text);border-radius:8px;padding:8px 9px;font-size:13px;transition:background .12s}.pop-item:hover{background:#ffffff17}.pop-item.active{background:#3ddc9729;color:var(--accent)}.pop-item.off{opacity:.45}.pi-ico{width:18px;text-align:center;flex-shrink:0}.hud-obj{top:70px;left:50%;transform:translate(-50%);padding:7px 15px;font-size:12.5px;border-left:3px solid var(--accent);max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-build{bottom:14px;left:50%;transform:translate(-50%);padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:94vw}.build-active{font-size:12.5px;color:var(--accent);font-weight:700;min-height:16px}.build-tools-wrap{width:100%}.build-tools{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.tool-btn{display:flex;align-items:center;gap:8px;background:#ffffff0d;border:1px solid var(--border);border-radius:11px;padding:7px 11px;color:var(--text);cursor:pointer;transition:transform .1s,background .12s,border-color .12s}.tool-btn:hover{background:#ffffff1a;transform:translateY(-2px)}.tool-btn.active{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-color:#9bf0c8;color:var(--accent-ink);box-shadow:0 0 14px #3ddc9780}.tool-btn.locked{opacity:.4;cursor:not-allowed}.tool-btn.locked:hover{transform:none;background:#ffffff0d}.tool-ico{font-size:18px;line-height:1}.tool-meta{display:flex;flex-direction:column;line-height:1.15}.tool-name{font-size:12.5px;font-weight:600}.tool-cost{font-size:10.5px;color:var(--muted)}.tool-btn.active .tool-cost{color:#07140eb3}.build-cats{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.cat-btn{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;border-radius:9px;padding:5px 10px;color:var(--muted);cursor:pointer;font-size:12px;transition:color .12s,background .12s}.cat-btn:hover{color:var(--text);background:#ffffff0d}.cat-btn.active{color:var(--accent);background:#3ddc971f;border-color:#3ddc974d}.cat-ico{font-size:15px}.hud-drawer{top:70px;right:10px;bottom:14px;width:290px;display:flex;flex-direction:column;padding:0;overflow:hidden;transition:transform .25s ease,opacity .2s ease}.hud-drawer.closed{transform:translate(calc(100% + 18px));opacity:0;pointer-events:none}.drawer-tabs{display:flex;gap:2px;align-items:center;padding:8px 8px 0;border-bottom:1px solid var(--border)}.dtab{flex:1;background:transparent;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:8px 4px;border-radius:8px 8px 0 0;transition:color .12s,background .12s}.dtab:hover{color:var(--text)}.dtab.active{color:var(--accent);background:#3ddc971a}.drawer-close{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:12px;width:24px;height:28px;border-radius:8px;flex-shrink:0}.drawer-close:hover{color:var(--text);background:#ffffff14}.drawer-body{flex:1;overflow-y:auto;padding:10px}.dpanel{display:flex;flex-direction:column;gap:7px}.drawer-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:2px}.section-title{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:6px 0 1px}.field-label{font-size:12px;color:var(--text)}.slider{width:100%;accent-color:var(--accent)}.budget-line{display:flex;gap:8px;font-size:12.5px;font-weight:600;background:#00000040;border-radius:8px;padding:7px 9px}.wide-btn{background:#ffffff0f;border:1px solid var(--border);border-radius:9px;padding:8px 10px;color:var(--text);cursor:pointer;font-size:12.5px;transition:background .12s}.wide-btn:hover{background:#ffffff1f}.wide-btn.active{background:var(--accent);color:var(--accent-ink);border-color:#9bf0c8;font-weight:700}.btn-row{display:flex;gap:6px}.btn-row .wide-btn{flex:1;text-align:center}.toggle-row{display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:#ffffff0a;border:1px solid var(--border);border-radius:9px;padding:7px 10px;color:var(--text);cursor:pointer;font-size:12.5px;text-align:left;transition:background .12s}.toggle-row .muted{font-size:10.5px}.toggle-row:hover{background:#ffffff17}.toggle-row.active{background:#3ddc9729;border-color:#3ddc9766}.charts{width:100%;display:block;border:1px solid var(--border);border-radius:8px;background:#0e1310}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.stat-cell{display:flex;flex-direction:column;background:#ffffff0a;border:1px solid var(--border);border-radius:8px;padding:6px 9px}.stat-v{font-size:14px;font-weight:700;color:var(--accent)}.stat-l{font-size:10.5px;color:var(--muted)}.info{font-size:12.5px;line-height:1.55}.residents{margin-top:6px;padding-top:6px;border-top:1px solid var(--border);color:var(--muted);font-size:11.5px;line-height:1.5}.ui-messages{top:70px;left:12px;background:transparent;border:none;box-shadow:none;display:flex;flex-direction:column;gap:5px;max-width:330px;pointer-events:none}.toast{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--muted);border-radius:9px;padding:6px 11px;font-size:12.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:toast-in .2s ease}.toast-good{border-left-color:var(--good)}.toast-warn{border-left-color:var(--warn)}.toast-bad{border-left-color:var(--bad)}.ui-tutorial{top:110px;left:50%;transform:translate(-50%);width:390px;max-width:86vw;padding:12px 14px;border:1px solid rgba(61,220,151,.45);display:flex;flex-direction:column;gap:8px}.tut-head{display:flex;justify-content:space-between;align-items:center}.tut-step{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}.tut-skip{background:transparent;border:none;color:var(--muted);font-size:11.5px;cursor:pointer}.tut-skip:hover{color:var(--text)}.tut-text{font-size:13.5px;line-height:1.5}.ui-banner{top:50%;left:50%;transform:translate(-50%,-50%);width:360px;max-width:90vw;padding:24px;text-align:center;display:flex;flex-direction:column;gap:12px;border:1px solid var(--border-strong);box-shadow:0 20px 60px #0009}.banner-title{font-size:26px;font-weight:800}.banner-sub{font-size:14px;color:var(--muted)}.ui-region{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#080b0ed1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.region-panel{width:720px;max-width:92vw;max-height:90vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border-strong);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}.region-head{display:flex;justify-content:space-between;align-items:center}.region-title{margin:0;color:var(--accent);font-size:22px}.region-totals{display:flex;gap:14px;font-size:14px;color:var(--muted)}.region-grid{display:grid;gap:10px}.region-cell{aspect-ratio:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;border-radius:12px;border:1px solid var(--border);color:var(--text);transition:transform .1s,border-color .12s,background .12s}.region-cell:hover{transform:translateY(-2px);border-color:var(--border-strong)}.region-cell.empty{background:#ffffff08;border-style:dashed;color:var(--muted)}.region-cell.filled{background:linear-gradient(160deg,#3ddc971f,#28323c80)}.region-cell.active{border-color:var(--accent);box-shadow:0 0 14px #3ddc9766}.region-cell.remote{background:linear-gradient(160deg,#5fa0ff29,#28323c80);border-color:#5fa0ff80}.rc-name{font-weight:700;font-size:14px}.rc-stat{font-size:12px;color:var(--muted)}.rc-plus{font-size:30px;color:var(--accent);line-height:1}.rc-badge{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:2px 8px;margin-top:2px}.region-hint{font-size:12.5px;color:var(--muted);line-height:1.5}.region-io{display:flex;gap:8px}.ghost-btn{flex:1;padding:8px 10px;cursor:pointer;border-radius:9px;border:1px solid var(--border);background:#ffffff0d;color:var(--text);font-size:13px}.ghost-btn:hover{background:#ffffff1f}.achievements{display:flex;flex-direction:column;gap:5px;margin-top:6px}.ach{font-size:12.5px;padding:6px 9px;border-radius:8px;background:#ffffff08;border:1px solid var(--border);opacity:.55}.ach.got{opacity:1;border-color:#3ddc9780;background:#3ddc9714}@keyframes toast-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}