:root{--bg: #0d0f12;--panel: #16191f;--panel-2: #1f242c;--border: #2a2f37;--text: #e6e6e6;--muted: #9aa3ad;--accent: #65c66a;--warn: #f5b400;--crit: #ff5466;--hud-radius: 10px}.hud{position:absolute;inset:0;pointer-events:none;font:13px/1.4 ui-sans-serif,system-ui,sans-serif;color:var(--text);user-select:none}.hud>*{pointer-events:auto}.topbar{display:flex;gap:12px;padding:10px 14px;background:linear-gradient(to bottom,#0d0f12d9,#0d0f1200);align-items:center}.clock{background:var(--panel);border:1px solid var(--border);border-radius:var(--hud-radius);padding:6px 10px;display:flex;gap:10px;align-items:center}.clock .badge{background:var(--panel-2);border-radius:6px;padding:2px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.clock .badge.wet{color:#79c8ff}.clock .badge.dry{color:#f1c469}.clock .badge.drought{color:var(--crit)}.speed-controls{display:flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:var(--hud-radius);padding:4px}.speed-controls button{background:transparent;border:1px solid transparent;color:var(--text);width:32px;height:28px;border-radius:6px;cursor:pointer;font-weight:600}.speed-controls button.active{background:var(--panel-2);border-color:var(--accent);color:var(--accent)}.resource-bar{display:flex;gap:6px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--border);border-radius:var(--hud-radius);padding:6px 10px}.resource-bar .pill{display:flex;gap:6px;align-items:center;padding:2px 6px;border-radius:999px;background:#ffffff0a}.resource-bar .swatch{width:10px;height:10px;border-radius:2px;display:inline-block}.right-panel{position:absolute;top:60px;right:12px;width:280px;background:var(--panel);border:1px solid var(--border);border-radius:var(--hud-radius);padding:12px;display:flex;flex-direction:column;gap:10px}.right-panel h2{margin:0;font-size:14px}.right-panel .row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.bar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}.bar>div{height:100%}.bar.green>div{background:var(--accent)}.bar.amber>div{background:var(--warn)}.bar.red>div{background:var(--crit)}.bar.blue>div{background:#4ab8ff}.bottom-bar{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:10px;align-items:stretch}.bottom-bar button{background:var(--panel);border:1px solid var(--border);color:var(--text);font-weight:600;border-radius:var(--hud-radius);padding:10px 14px;cursor:pointer}.bottom-bar button:hover{background:var(--panel-2)}.bottom-bar button.primary{background:var(--accent);color:#112;border-color:var(--accent)}.build-menu{position:absolute;bottom:70px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--border);border-radius:var(--hud-radius);padding:10px;width:min(720px,calc(100vw - 24px));max-height:60vh;overflow-y:auto}.build-menu h3{margin:6px 4px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.build-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}.build-card{display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:12px;transition:border-color .1s}.build-card:hover{border-color:var(--accent)}.build-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px #65c66a2e}.build-card .label{font-weight:600}.build-card .swatch{height:16px;border-radius:3px}.build-card .cost{color:var(--muted);font-size:11px}.notifications{position:absolute;top:60px;left:12px;width:280px;display:flex;flex-direction:column;gap:4px;pointer-events:none}.notifications .alert{background:var(--panel);border-left:3px solid var(--accent);padding:6px 10px;border-radius:4px;font-size:12px}.notifications .alert.warn{border-left-color:var(--warn)}.notifications .alert.crit{border-left-color:var(--crit)}.hover-tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px;transform:translate(12px,12px)}.hover-tip.invalid{color:var(--crit);border-color:var(--crit)}