:root{--bg:#0d1117;--panel:#121822eb;--panel-border:#78a0c838;--text:#d8e2ee;--muted:#8fa3ba;--accent:#4fa3ff;--good:#52d17a;--warn:#e8c14a;--bad:#e8615a;--ui-font:ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--ui-font);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}#app{position:fixed;inset:0}#view,.overlay{width:100%;height:100%;display:block;position:absolute;inset:0}#view{touch-action:none;cursor:crosshair}.overlay{pointer-events:none}.hidden{display:none!important}.menu{z-index:40;background:radial-gradient(at 50% 30%,#16202e 0%,#0a0e14 70%);place-items:center;padding:24px;display:grid;position:absolute;inset:0;overflow-y:auto}.menu-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;width:min(560px,100%);padding:28px 30px 24px;box-shadow:0 24px 70px #0000008c}.menu-panel h1{letter-spacing:5px;background:linear-gradient(100deg,#ff8a5b,#ffd15b 55%,#6fd3ff);color:#0000;background-clip:text;margin:0;font-size:34px;font-weight:800}.menu-sub{color:var(--muted);margin:6px 0 22px;font-size:13px}.menu-section{border-top:1px solid var(--panel-border);margin-top:16px;padding-top:16px}.menu-section h2{letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-size:13px;font-weight:600}.row{gap:10px;display:flex}button.primary{color:var(--text);font:inherit;cursor:pointer;background:linear-gradient(#385e8ca6,#223856a6);border:1px solid #78aae659;border-radius:8px;flex:1;padding:11px 14px;font-weight:600;transition:transform 80ms,background .15s,border-color .15s}button.primary:hover{border-color:var(--accent);background:linear-gradient(#4c80becc,#2c4a72cc)}button.primary:active{transform:translateY(1px)}button.wide{width:100%;margin-top:6px}.field{margin-bottom:10px;display:block}.field span{letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-size:11px;display:block}.field input{border:1px solid var(--panel-border);width:100%;color:var(--text);font:inherit;background:#080c12d9;border-radius:7px;padding:9px 11px;font-size:14px}.field input:focus{border-color:var(--accent);outline:none}.hint{color:var(--muted);margin:10px 0 0;font-size:11.5px;line-height:1.5}.lobby-status{white-space:pre-wrap;font-family:var(--mono);color:var(--text);border:1px solid var(--panel-border);background:#080c1299;border-radius:8px;min-height:60px;padding:12px;font-size:12.5px;line-height:1.6}.controls{border-top:1px solid var(--panel-border);margin-top:18px;padding-top:12px}.controls summary{cursor:pointer;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-size:12px}.controls-grid{grid-template-columns:auto 1fr;align-items:center;gap:6px 14px;margin-top:12px;font-size:12.5px;display:grid}.controls-grid kbd{font-family:var(--mono);border:1px solid var(--panel-border);white-space:nowrap;color:var(--text);background:#080c12e6;border-bottom-width:2px;border-radius:5px;padding:3px 7px;font-size:11px}.controls-grid span{color:var(--muted)}.hud{pointer-events:none;z-index:20;font-size:13px;position:absolute;inset:0}.hud-top{align-items:center;gap:10px;display:flex;position:absolute;top:12px;left:12px}.credits{pointer-events:auto;background:var(--panel);border:1px solid var(--panel-border);font-family:var(--mono);color:var(--warn);text-align:right;font-variant-numeric:tabular-nums;border-radius:8px;min-width:110px;padding:7px 14px;font-size:17px;font-weight:700}.status{background:var(--panel);border:1px solid var(--panel-border);color:var(--muted);border-radius:8px;padding:7px 12px;font-size:12px}.status[data-tone=ok]{color:var(--good)}.status[data-tone=warn]{color:var(--warn)}.status[data-tone=bad]{color:var(--bad)}.hud-side{pointer-events:auto;flex-direction:column;gap:10px;width:208px;display:flex;position:absolute;top:12px;right:12px}.minimap{aspect-ratio:1;border:1px solid var(--panel-border);cursor:pointer;width:100%;image-rendering:pixelated;background:#0a0e14;border-radius:8px}.build-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;flex-direction:column;gap:5px;padding:7px;display:flex}.build-btn{color:var(--muted);font:inherit;cursor:pointer;text-align:left;background:#0a0f16bf;border:1px solid #78a0c824;border-radius:6px;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:8px 10px;font-size:12px;transition:border-color .15s,color .15s;display:grid;position:relative;overflow:hidden}.build-btn.affordable{color:var(--text);border-color:#78aae666}.build-btn:hover.affordable{border-color:var(--accent)}.build-btn.ready{border-color:var(--good);color:var(--good);animation:1.3s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #52d17a66}50%{box-shadow:0 0 0 5px #52d17a00}}.build-progress{pointer-events:none;background:linear-gradient(90deg,#4fa3ff52,#4fa3ff1f);width:0;transition:width .12s linear;position:absolute;top:0;bottom:0;left:0}.build-name,.build-key,.build-cost,.build-badge{position:relative}.build-key{font-family:var(--mono);opacity:.6;border:1px solid;border-radius:3px;padding:1px 4px;font-size:10px}.build-cost{font-family:var(--mono);color:var(--warn);text-align:right;min-width:52px;font-size:11px}.build-badge{font-family:var(--mono);color:var(--accent);font-size:10px;position:absolute;top:3px;right:6px}.selection-info{background:var(--panel);border:1px solid var(--panel-border);max-width:min(620px,100% - 250px);color:var(--text);pointer-events:auto;border-radius:8px;padding:8px 13px;font-size:12.5px;position:absolute;bottom:12px;left:12px}.banner{text-align:center;pointer-events:auto;backdrop-filter:blur(3px);background:#06090eb8;place-content:center;display:grid;position:absolute;inset:0}.banner-title{letter-spacing:8px;text-transform:uppercase;background:linear-gradient(100deg,#ff8a5b,#ffd15b);color:#0000;background-clip:text;font-size:52px;font-weight:800}.banner-sub{color:var(--muted);margin-top:10px;font-size:14px}.loading{background:var(--bg);color:var(--muted);z-index:50;place-content:center;justify-items:center;gap:16px;display:grid;position:absolute;inset:0}.spinner{border:3px solid #8cb4dc33;border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.85s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.fatal{background:var(--panel);border:1px solid var(--bad);z-index:60;border-radius:12px;width:min(520px,100% - 40px);height:fit-content;margin:auto;padding:22px 24px;position:absolute;inset:0}.fatal h2{color:var(--bad);margin:0 0 10px;font-size:17px}.fatal pre{white-space:pre-wrap;font-family:var(--mono);color:var(--muted);background:#080c12b3;border-radius:7px;max-height:240px;padding:12px;font-size:12px;overflow:auto}