:root{--bg: #070b10;--panel: #0e1520;--panel2: #121b28;--border: #1e2a3a;--text: #e8eef5;--muted: #8b9bb0;--accent: #ff5500;--accent2: #2bb8c9;--danger: #e53e3e;--ok: #38a169;--warn: #d69e2e;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}#app{height:100%}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:8px;padding:.4rem .7rem}button:hover{border-color:var(--accent)}button.active,button.primary{background:color-mix(in srgb,var(--accent) 30%,var(--panel2));border-color:var(--accent);color:#fff}button:disabled{opacity:.45;cursor:not-allowed}.auth-screen{min-height:100%;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(ellipse at 30% 20%,rgba(255,85,0,.12),transparent 50%),var(--bg)}.auth-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.5rem}.auth-card h1{font-family:Outfit,Inter,sans-serif;margin:0 0 .25rem;font-size:1.5rem}.auth-card .tag{color:var(--muted);margin:0 0 1.25rem;font-size:.9rem}.field{margin-bottom:.85rem}.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem}.field input{width:100%;padding:.55rem .65rem;border-radius:8px;border:1px solid var(--border);background:#0a1018;color:var(--text)}.auth-error{color:var(--danger);font-size:.85rem;min-height:1.2rem;margin-bottom:.5rem}.auth-actions{display:flex;gap:.5rem}.auth-actions button{flex:1}.game-shell{display:grid;grid-template-columns:280px 1fr 300px;grid-template-rows:48px 1fr;height:100%}.topbar{grid-column:1 / -1;display:flex;align-items:center;gap:.75rem;padding:0 .75rem;border-bottom:1px solid var(--border);background:var(--panel)}.topbar .brand{font-family:Outfit,sans-serif;font-weight:700;display:flex;align-items:center;gap:.4rem}.topbar .brand img{width:22px;height:22px}.topbar .spacer{flex:1}.speed-group{display:flex;gap:.25rem}.left-panel,.right-panel{background:var(--panel);border-right:1px solid var(--border);overflow:auto;padding:.65rem}.right-panel{border-right:none;border-left:1px solid var(--border)}.map-wrap{position:relative;overflow:hidden;background:linear-gradient(180deg,#5b9bd5,#9ec9e8);cursor:crosshair;box-shadow:inset 0 0 0 1px #0003}#map-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.panel-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:.4rem 0 .45rem;font-weight:700}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-bottom:.75rem}.tool-grid button{font-size:.78rem;padding:.45rem .35rem}.build-list{display:flex;flex-direction:column;gap:.3rem}.build-item{text-align:left;padding:.45rem .5rem;font-size:.8rem}.build-item small{display:block;color:var(--muted);font-size:.7rem}.build-item .swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.35rem;vertical-align:middle}.meter{margin-bottom:.55rem}.meter-label{display:flex;justify-content:space-between;font-size:.75rem;margin-bottom:.2rem}.meter-bar{height:8px;background:#1a2332;border-radius:99px;overflow:hidden}.meter-bar>span{display:block;height:100%;background:var(--accent2);border-radius:99px}.meter-bar.cap>span{background:#9f7aea}.meter-bar.align>span{background:#68d391}.meter-bar.emerge>span{background:var(--danger)}.meter-bar.power>span{background:#ecc94b}.meter-bar.money>span{background:var(--ok)}.stat-row{display:flex;justify-content:space-between;font-size:.8rem;padding:.2rem 0;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.stat-row .v{font-variant-numeric:tabular-nums}.alerts{margin-top:.5rem}.alert{font-size:.75rem;padding:.35rem .45rem;margin-bottom:.3rem;border-radius:6px;background:color-mix(in srgb,var(--danger) 18%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}.alert.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.event-log{font-size:.72rem;color:var(--muted);max-height:120px;overflow:auto}.overlay-bar{position:absolute;left:.5rem;bottom:.5rem;display:flex;gap:.3rem;z-index:2}.overlay-bar button{font-size:.72rem;background:#0a1018d9}.lobby{max-width:560px;margin:2rem auto;padding:1rem}.lobby h2{font-family:Outfit,sans-serif}.city-list{list-style:none;padding:0}.city-list li{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem .75rem;border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;background:var(--panel)}.city-list li.empty-cities{justify-content:center;border-style:dashed;background:transparent}.city-actions{display:flex;gap:.4rem;flex-shrink:0}button.danger{background:color-mix(in srgb,var(--danger) 18%,var(--panel2));border-color:color-mix(in srgb,var(--danger) 55%,var(--border));color:#fecaca}button.danger:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 32%,var(--panel2))}.lobby-msg{font-size:.85rem;color:var(--ok);margin:.25rem 0 .75rem}.win-banner,.lose-banner{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#000000a6;z-index:10}.win-banner .card,.lose-banner .card{background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:1.5rem 2rem;text-align:center;max-width:360px}.lose-banner .card{border-color:var(--danger)}.hint{font-size:.75rem;color:var(--muted);margin:.35rem 0 .6rem}.help-box{font-size:.75rem;line-height:1.35;padding:.5rem .55rem;margin-bottom:.65rem;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}button.linkish{border:none;background:transparent;color:var(--accent);padding:0 .25rem;text-decoration:underline;font-size:inherit}.build-cat{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.45rem 0 .25rem;font-weight:700}.query-panel{font-size:.78rem;line-height:1.4;padding:.45rem;border-radius:8px;background:var(--panel2);border:1px solid var(--border);min-height:4rem}@media(max-width:960px){.game-shell{grid-template-columns:1fr;grid-template-rows:48px auto 1fr auto}.left-panel,.right-panel{max-height:180px}}