:root{--bg: #0b0d0c;--panel: #14181a;--panel-edge: #2b3438;--ink: #cfe0d6;--ink-dim: #7c8f86;--accent: #d9a441;--accent-dim: #8a6a2a;--good: #6fbf73;--bad: #d1453b;--font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:13px;overflow:hidden;-webkit-user-select:none;user-select:none}#app{height:100%}.menu{height:100%;display:grid;place-items:center}.menu__panel{width:min(560px,92vw);background:var(--panel);border:1px solid var(--panel-edge);padding:24px}.menu__title{font-size:30px;letter-spacing:.5em;color:var(--accent);margin:0 0 4px}.menu__sub{color:var(--ink-dim);margin:0 0 20px}.menu__row{display:flex;gap:8px;margin-bottom:12px}.menu__list{border:1px solid var(--panel-edge);max-height:220px;overflow-y:auto;margin-bottom:12px}.menu__item{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--panel-edge)}.menu__item:last-child{border-bottom:0}.menu__empty{padding:14px 10px;color:var(--ink-dim)}input,button{font:inherit;color:var(--ink);background:#1c2225;border:1px solid var(--panel-edge);padding:7px 12px}input{flex:1}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.4;cursor:default}button.primary{border-color:var(--accent-dim);color:var(--accent)}.status{color:var(--ink-dim);min-height:18px}.status--bad{color:var(--bad)}.game{height:100%;display:grid;grid-template-columns:1fr 200px}.viewport{position:relative;overflow:hidden}.viewport canvas{display:block;cursor:crosshair}.sidebar{background:var(--panel);border-left:1px solid var(--panel-edge);display:flex;flex-direction:column;min-height:0}.sidebar__minimap{border-bottom:1px solid var(--panel-edge);background:#000}.sidebar__stats{padding:8px 10px;border-bottom:1px solid var(--panel-edge)}.sidebar__credits{color:var(--accent);font-size:18px}.power{height:8px;background:#000;border:1px solid var(--panel-edge);margin-top:6px;position:relative}.power__fill{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background:var(--good)}.power__fill--low{background:var(--bad)}.tabs{display:flex;border-bottom:1px solid var(--panel-edge)}.tabs button{flex:1;border:0;border-right:1px solid var(--panel-edge);padding:6px 0;font-size:11px;background:transparent;color:var(--ink-dim)}.tabs button.active{color:var(--accent);background:#1c2225}.build{flex:1;overflow-y:auto;padding:6px;display:grid;gap:4px}.build__item{position:relative;text-align:left;padding:6px 8px;overflow:hidden}.build__item .name{display:block;position:relative}.build__item .cost{color:var(--ink-dim);font-size:11px;position:relative}.build__item .bar{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent-dim);opacity:.45;width:0}.build__item.ready{border-color:var(--good);color:var(--good)}.build__item .queued{position:absolute;right:6px;top:6px;color:var(--accent)}.log{border-top:1px solid var(--panel-edge);padding:6px 8px;height:92px;overflow-y:auto;font-size:11px;color:var(--ink-dim)}.banner{position:absolute;top:12px;left:50%;transform:translate(-50%);background:#000c;border:1px solid var(--panel-edge);padding:8px 16px;pointer-events:none}.banner--bad{border-color:var(--bad);color:var(--bad)}.debug{position:absolute;left:8px;bottom:8px;font-size:11px;color:var(--ink-dim);background:#0000008c;padding:4px 8px;pointer-events:none;white-space:pre}