:root { color-scheme:dark; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#eeeae1; background:#080b12; font-synthesis:none; }
* { box-sizing:border-box; }
html,body { margin:0;width:100%;height:100%;overflow:hidden; }
button { font:inherit;cursor:pointer; }
button:focus-visible { outline:2px solid #edbd79;outline-offset:4px; }
[hidden] { display:none!important; }
.game-ui { position:fixed;inset:0;z-index:5;pointer-events:none;--panel:rgba(19,23,27,.9);--line:rgba(226,226,218,.18);--amber:#edbd79; }
.game-ui button { pointer-events:auto;color:inherit;border:1px solid var(--line);background:var(--panel);transition:background .12s,border-color .12s; }
.game-ui button:hover { background:#343a3d;border-color:#a8aaa4; }
.resource-bar { position:absolute;top:22px;left:24px;display:flex;align-items:center;flex-wrap:wrap;gap:22px;padding:10px 14px;border-radius:4px;background:rgba(14,18,22,.7);max-width:calc(100% - 48px);font-size:11px;backdrop-filter:blur(8px); }
.resource-bar>span { display:inline-flex;align-items:center;gap:7px;color:#bbc3c6;white-space:nowrap; }
.resource-bar strong { color:#f2f2e9;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums; }
.resource-bar small { font-size:10px;color:#9da7ad; }
.power-resource { color:var(--amber)!important; }
.power-resource.insufficient strong { color:#ef9a7e; }
.construction { position:absolute;bottom:24px;left:24px;display:flex;align-items:center;gap:10px; }
.game-ui .build-toggle { display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:5px;font-size:14px;font-weight:600;box-shadow:0 3px 15px #0004; }
.game-ui .build-toggle[aria-expanded=true] { border-color:var(--amber); }
.build-menu { position:absolute;left:0;bottom:calc(100% + 12px);width:232px;padding:5px;border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:0 6px 30px #0005;backdrop-filter:blur(12px); }
.game-ui .build-item { display:flex;align-items:center;gap:13px;width:100%;padding:13px 12px;border:0;border-radius:3px;background:transparent;text-align:left;font-size:13px; }
.game-ui .build-item.selected { color:#f8d6a4;background:#594831; }
.build-item.unaffordable { opacity:.62; }
.selection-tools { display:flex;align-items:center;gap:7px;padding:5px 7px 5px 13px;border:1px solid var(--line);border-radius:4px;background:var(--panel);font-size:12px; }
.selected-name { margin-right:6px; }
.game-ui .selection-tools button { border:0;background:transparent;font-size:23px;width:31px;height:34px;border-radius:3px; }
.game-ui .selection-tools button:hover { background:#ffffff18; }
.notification { position:absolute;bottom:92px;left:24px;padding:9px 13px;border-radius:4px;max-width:calc(100% - 48px);background:var(--panel);color:#e3caaa;font-size:12px; }
@media(max-width:600px) { .resource-bar { top:14px;left:14px;max-width:calc(100% - 28px);gap:12px;padding:9px 11px; }.resource-bar>span { gap:5px;font-size:10px; }.resource-bar strong { font-size:11px; }.construction { bottom:16px;left:14px; }.notification { left:14px;bottom:82px; }.selected-name { max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } }
.building-status-layer { position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden; }
/* Status glyphs: a small dark bubble over the machine holding one luminous line symbol; blueprints and charging wear a progress ring. */
.callout { position:absolute;left:0;top:0;--c:#ff7d45;--lift:8px;will-change:transform;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s; }
.callout.on { opacity:1;visibility:visible;transition:opacity .25s; }
.callout[data-tone=charge] { --c:#6fe0a9; }
.callout[data-tone=construction] { --c:#7fd3ea; }
.callout[data-tone=low] { --c:#f2b45a; }
.callout-bubble { position:absolute;left:-16px;bottom:calc(var(--lift) + 6px);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1d252bf2,#0b1013f0);box-shadow:0 2px 8px #0008,0 0 12px color-mix(in srgb,var(--c) 22%,transparent);animation:glyph-float 2.6s ease-in-out infinite; }
.callout-bubble::after { content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;background:#0b1013f0;transform:rotate(45deg);border-radius:0 0 2px 0;z-index:-1; }
.callout-ring { position:absolute;inset:0;width:32px;height:32px;transform:rotate(-90deg);fill:none;stroke-width:2; }
.callout-ring circle { stroke:color-mix(in srgb,var(--c) 28%,transparent); }
.callout-ring .arc { stroke:var(--c);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;transition:stroke-dashoffset .3s;filter:drop-shadow(0 0 2px var(--c)); }
.callout[data-ring="-1"] .callout-ring .arc { opacity:0; }
.callout-glyph { width:17px;height:17px;overflow:visible;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 60%,transparent)); }
.callout[data-tone=warning] .callout-glyph { animation:glyph-pulse 1.2s ease-in-out infinite; }
.callout[data-glyph=charging] .callout-glyph { fill:color-mix(in srgb,var(--c) 30%,transparent); }
@keyframes glyph-float { 50% { translate:0 -3px; } }
@keyframes glyph-pulse { 50% { opacity:.45; } }
.game-ui .build-item { padding:10px 12px; }
.selected-reason { max-width:340px;color:#ef9a7e;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.context-hint { position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--line);border-radius:4px;background:var(--panel);font-size:12px;color:#e3dccd;white-space:nowrap; }
.context-hint kbd { display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:1px solid #edbd7980;border-radius:3px;color:var(--amber);font:600 11px Inter,ui-sans-serif,sans-serif; }
.context-hint { bottom:96px;gap:7px; }
.hint-gap { width:10px; }
.construction[data-underground=true] > :not(.context-hint) { display:none !important; }
.health-resource[data-tone=critical] strong { color:#ef7e6a; }
body[data-hurt=true]::after { content:'';position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 160px 40px #b3200f88;animation:hurt-pulse .5s ease-in-out infinite alternate; }
@keyframes hurt-pulse { from { opacity:.55; } to { opacity:1; } }
.food-resource[data-tone=hungry] strong { color:var(--amber); }
.food-resource[data-tone=starving] strong { color:#ef9a7e; }
.hotbar { position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:6px;background:rgba(14,18,22,.72);backdrop-filter:blur(8px); }
.game-ui .slot { position:relative;width:50px;height:50px;padding:0;border-radius:4px;background:#1c2328e6;display:grid;place-items:center; }
.game-ui .slot.selected { border-color:var(--amber);background:#3a3326; }
.slot kbd { position:absolute;left:4px;top:2px;z-index:1;font:600 9px Inter,ui-sans-serif,sans-serif;color:#8d979c;text-shadow:0 1px 2px #000,0 0 3px #000; }
.slot.selected kbd { color:var(--amber); }
.game-ui .slot { touch-action:none;user-select:none; }
.game-ui .slot.dragging { opacity:.35; }
.game-ui .slot.drop-target { border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset,0 0 12px #f0b45a55; }
.slot-ghost { position:fixed;left:0;top:0;width:48px;height:48px;z-index:50;pointer-events:none;filter:drop-shadow(0 4px 8px #000a); }
.slot-ghost img { width:100%;height:100%;object-fit:contain; }
.slot-ghost strong { position:absolute;right:2px;bottom:0;font-size:12px;font-weight:600;color:#f2f2e9;text-shadow:0 1px 2px #000,0 0 3px #000; }
.slot-icon { position:absolute;inset:3px;display:grid;place-items:center;pointer-events:none; }
.slot-icon img { display:block;width:100%;height:100%;object-fit:contain; }
.slot strong { position:absolute;right:4px;bottom:2px;z-index:1;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:#f2f2e9;text-shadow:0 1px 2px #000,0 0 3px #000; }
.build-menu { width:392px;display:grid;grid-template-columns:1fr 1fr;column-gap:3px;max-height:calc(100vh - 140px);overflow:auto; }
.build-menu h3 { grid-column:1/-1;margin:8px 10px 3px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8d979c; }
.game-ui .build-item { padding:8px 9px;gap:10px; }
.build-item span { flex:1; }
.build-item kbd { min-width:20px;height:20px;display:inline-grid;place-items:center;border:1px solid #ffffff2a;border-radius:3px;font:600 10px Inter,ui-sans-serif,sans-serif;color:#aab3b6; }
.build-item kbd:empty { visibility:hidden; }
.build-toggle kbd { min-width:18px;height:18px;display:inline-grid;place-items:center;margin-left:2px;border:1px solid #ffffff2a;border-radius:3px;font:600 10px Inter,ui-sans-serif,sans-serif;color:#aab3b6; }
.build-item.selected kbd { border-color:#edbd7980;color:var(--amber); }
@media(max-width:1100px) { .hotbar { left:auto;right:14px;transform:none; } }
@media(max-width:900px) { .game-ui .slot { width:40px;height:40px; } }
@media(max-width:600px) { .context-hint { bottom:78px; } .build-menu { width:min(392px,calc(100vw - 28px)); } }
.build-menu [hidden] { display:none !important; }
.hint-progress { display:inline-block;width:70px;height:5px;margin-left:4px;border-radius:3px;background:#ffffff22;overflow:hidden;vertical-align:middle; }
.hint-progress i { display:block;height:100%;background:#7fe3ff;transform-origin:left; }
.game-ui .robots-toggle { gap:7px;padding:13px 12px; }
.game-ui .robots-toggle[aria-expanded=true] { border-color:#9fd8c0; }
.robots-panel { position:absolute;left:0;bottom:calc(100% + 12px);width:max-content;padding:4px 10px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:0 6px 30px #0005;backdrop-filter:blur(12px);pointer-events:auto;font-size:12px; }
.fps-meter { position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:30;padding:2px 7px;border-radius:4px;background:#0b1013b3;color:#9fe0a8;font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none; }
.fps-meter[data-level=ok] { color:#edbd79; }
.fps-meter[data-level=bad] { color:#ff7a6b; }

/* Underground: a vignette and colour drain that deepen with --cave-depth (0 at the mouth, 1 deep inside). */
.cave-vignette { position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.2s ease;background:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 28%,rgba(1,2,4,calc(.6 + var(--cave-depth,0) * .32)) 100%); }
body[data-region=cave] .cave-vignette { opacity:1; }
canvas#game { transition:filter 1.2s ease; }
body[data-region=cave] canvas#game { filter:saturate(calc(.72 - var(--cave-depth,0) * .42)) contrast(1.08); }

/* Orbit button and the full-screen orbital view. */
.orbit-view { position:fixed;inset:0;z-index:20;background:#03050a;color:#e8ecf2; }
.orbit-canvas { position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab; }
.orbit-canvas:active { cursor:grabbing; }
.orbit-head { position:absolute;top:22px;left:26px;right:26px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none; }
.orbit-head small { font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fc4ff; }
.orbit-head h2 { margin:4px 0 0;font-size:22px;font-weight:600; }
.orbit-close { pointer-events:auto;width:36px;height:36px;border-radius:5px;border:1px solid #ffffff2e;background:#0e1420cc;color:inherit;font-size:20px;cursor:pointer; }
.orbit-panel { position:absolute;right:26px;bottom:26px;width:290px;padding:14px;border:1px solid #ffffff22;border-radius:7px;background:#0d131dd9;backdrop-filter:blur(12px);font-size:12px; }
.orbit-panel h3 { margin:14px 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9aa6b6;font-weight:600; }
.orbit-stat { display:flex;align-items:baseline;gap:6px;padding:3px 0; }
.orbit-stat span { flex:1;color:#aeb8c6; }
.orbit-stat strong { font-size:17px; }
.orbit-stat small { color:#7e8898; }
.orbit-ship { margin-top:10px;padding-top:10px;border-top:1px solid #ffffff1a;display:grid;gap:8px;color:#d6dde8; }
.orbit-return { padding:9px;border-radius:5px;border:1px solid #edbd79;background:#edbd7922;color:#f6dcb4;font-weight:600;cursor:pointer; }
.orbit-return:hover { background:#edbd7944; }
.orbit-techs { display:grid;gap:6px; }
.orbit-tech { display:grid;grid-template-columns:1fr auto;gap:3px 8px;text-align:left;padding:9px 10px;border-radius:5px;border:1px solid #ffffff22;background:#ffffff08;color:inherit;cursor:pointer; }
.orbit-tech small { grid-column:1/-1;color:#98a3b3; }
.orbit-tech em { grid-row:1;grid-column:2;font-style:normal;color:#8fc4ff;font-size:11px; }
.orbit-tech[data-state=active] { border-color:#8fc4ff; }
.orbit-tech[data-state=done] { opacity:.75;cursor:default; }
.orbit-bar { grid-column:1/-1;height:3px;border-radius:2px;background:#ffffff14;overflow:hidden; }
.orbit-bar i { display:block;height:100%;background:#8fc4ff;transform-origin:left;transform:scaleX(0); }
.orbit-nav { position:absolute;top:96px;left:26px;display:grid;gap:3px;width:150px; }
.orbit-nav button { text-align:left;padding:7px 10px;border-radius:5px;border:1px solid transparent;background:transparent;color:#aeb8c6;font:500 12px Inter,ui-sans-serif,sans-serif;cursor:pointer; }
.orbit-nav button:hover { background:#ffffff0d;color:#e8ecf2; }
.orbit-nav button[aria-pressed=true] { border-color:#8fc4ff66;background:#8fc4ff1a;color:#e8ecf2; }
.orbit-nav button[data-focus=system] { margin-bottom:6px;color:#8fc4ff; }
.orbit-facts { position:absolute;left:26px;bottom:26px;min-width:220px;padding:12px 14px;border:1px solid #ffffff22;border-radius:7px;background:#0d131dd9;backdrop-filter:blur(12px);font-size:12px; }
.orbit-facts dl { margin:0;display:grid;gap:5px; }
.orbit-facts div { display:flex;justify-content:space-between;gap:16px; }
.orbit-facts dt { color:#8e99a9; }
.orbit-facts dd { margin:0;color:#e8ecf2; }
.orbit-labels { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.orbit-label { position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;padding:2px 6px;border:0;border-radius:4px;background:#0d131d99;color:#c9d3e0;font:500 11px Inter,ui-sans-serif,sans-serif;white-space:nowrap;cursor:pointer;pointer-events:auto; }
.orbit-label:hover { color:#fff;background:#18233499; }
.orbit-label i { width:5px;height:5px;border-radius:50%;background:#8fc4ff; }
.orbit-label[hidden] { display:none; }
body[data-orbit=open] .game-ui, body[data-orbit=open] .building-status-layer { visibility:hidden; }
.research-view { position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:radial-gradient(ellipse at 30% 20%,#141b24,#05070b 70%);color:#e8ecf2; }
.research-head { display:flex;align-items:center;gap:28px;padding:22px 28px 10px; }
.research-head small { font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9aa6b6; }
.research-head h2 { margin:2px 0 0;font-size:22px;font-weight:600; }
.research-stats { display:flex;gap:22px;margin-left:auto;font-size:12px;color:#9aa6b6; }
.research-stats strong { margin:0 4px 0 6px;color:#f2f2e9;font-size:15px;font-variant-numeric:tabular-nums; }
.research-close { width:34px;height:34px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff0d;color:inherit;font-size:20px;line-height:1; }
.research-scroll { flex:1;overflow:auto;padding:6px 28px 0; }
.research-tree { position:relative; }
.research-band { position:absolute;left:0;right:0;border-top:1px solid #ffffff14; }
.research-band h3 { margin:8px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7e8a99;font-weight:600; }
.research-links { position:absolute;inset:0;pointer-events:none;overflow:visible; }
.research-links path { fill:none;stroke:#ffffff1f;stroke-width:2; }
.research-links path[data-state=open] { stroke:#8fc4ff66; }
.research-links path[data-state=done] { stroke:#edbd79aa; }
.research-node { position:absolute;width:158px;height:138px;display:grid;grid-template-rows:58px auto 1fr auto;justify-items:center;gap:2px;padding:8px 8px 7px;border-radius:7px;border:1px solid #ffffff22;background:#0d131dd9;color:inherit;text-align:center;cursor:pointer;transition:border-color .12s,background .12s; }
.research-node img { width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 4px 6px #0008); }
.research-node strong { font-size:12px;font-weight:600; }
.research-node small { font-size:10px;line-height:1.25;color:#98a3b3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.research-node:hover:not(:disabled) { border-color:#8fc4ff;background:#132030; }
.research-node[data-state=done] { border-color:#edbd7988;cursor:default; }
.research-node[data-state=done] strong { color:#edbd79; }
.research-node[data-state=locked],.research-node[data-state=hidden] { opacity:.5;cursor:not-allowed; }
.research-node[data-state=locked] img,.research-node[data-state=hidden] img { filter:grayscale(1) brightness(.6); }
.research-cost { padding:1px 7px;border-radius:9px;background:#ffffff10;color:#9aa6b6;font:600 11px ui-monospace,Menlo,monospace; }
.research-node[data-state=ready] { border-color:#8fc4ff88; }
.research-node[data-state=ready] .research-cost { background:#8fc4ff;color:#0b1220; }
.research-node[data-state=short] .research-cost { color:#e98a6b; }
.research-node[data-state=done] .research-cost { background:none;color:#edbd79; }
.research-foot { margin:0;padding:10px 28px 18px;font-size:11px;color:#7e8a99; }
.research-badge { position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:9px;background:#edbd79;color:#0b1220;font:700 10px Inter,ui-sans-serif,sans-serif; }
body[data-research=open] .game-ui, body[data-research=open] .building-status-layer { visibility:hidden; }

/* Grower crop and workstation recipe popups, opened by clicking one. */
.station { position:fixed;left:50%;bottom:140px;transform:translateX(-50%);width:max-content;max-width:min(860px,calc(100vw - 40px));padding:8px 10px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);backdrop-filter:blur(12px);box-shadow:0 6px 30px #0005;pointer-events:auto;font-size:12px;color:#e3dccd; }
.station header { display:flex;align-items:baseline;gap:10px;margin:0 2px 7px; }
.station header strong { font-size:12px;font-weight:600; }
.station header small { color:#8d979c;font-size:11px; }
.station-close { margin-left:auto;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:4px;background:none;color:#8d979c;cursor:pointer; }
.station-close:hover { background:#ffffff12;color:#e3dccd; }
.station-close svg { width:14px;height:14px; }
.station-options { display:flex;gap:6px;flex-wrap:wrap;justify-content:center; }
.station-options button { position:relative;display:grid;justify-items:center;gap:1px;width:86px;padding:6px 4px 7px;border:1px solid #ffffff14;border-radius:5px;background:#ffffff08;color:inherit;font:inherit;cursor:pointer; }
.station-options button:hover { border-color:#edbd7966;background:#edbd7912; }
.station-options button[aria-pressed=true] { border-color:var(--amber);background:#edbd7922;box-shadow:inset 0 0 0 1px #edbd7955; }
.station-options button > img { width:40px;height:40px;object-fit:contain; }
.station-options button > svg { width:28px;height:28px;margin:6px;color:var(--amber); }
.station-options button span { font-size:11px;font-weight:600;white-space:nowrap; }
.station-options button small { color:#8d979c;font-size:10px;display:flex;align-items:center;gap:1px; }
.station-options button em { font-style:normal;font-size:9.5px;color:#9fd39b;line-height:1.15;text-align:center; }
.station-inputs img { width:16px;height:16px; }
.station-inputs b { font-weight:600;color:#c9c3b6;margin-left:2px; }
.station-options button.missing > img { opacity:.45;filter:grayscale(.7); }
.station-options button.missing span { color:#9a958b; }
.station-options button.locked { opacity:.5;cursor:not-allowed; }
.station-options button.locked > img { filter:grayscale(1); }
.station-options button { overflow:hidden; }
.station-options button.working { border-color:#e8762c99; }
.station-progress { position:absolute;left:0;bottom:0;height:3px;width:calc(var(--work,0) * 100%);background:#e8762c;transition:width .1s linear; }
.station-count { position:absolute;top:4px;right:5px;min-width:15px;padding:0 3px;border-radius:8px;background:#e8762c;color:#14181b;font-size:10px;font-weight:700;line-height:15px; }

.buffs { position:fixed;top:70px;left:24px;display:flex;gap:6px;pointer-events:none; }
.buffs:empty { display:none; }
.buff { display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--line);border-radius:4px;background:var(--panel);backdrop-filter:blur(12px);color:#9fd39b;font-size:11px; }
.buff i { width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor; }
.buff small { color:#8d979c;font-variant-numeric:tabular-nums; }
.buff[data-buff=calm] { color:#e8c787; }
.buff[data-buff=stamina] { color:#ef9a7e; }
.buff[data-buff=sight] { color:#9ec9ef; }
/* Storage: one crate's slots beside the base-wide ledger; the hotbar below doubles as the pocket side. */
.store-panel { position:absolute;left:50%;bottom:96px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:6px;pointer-events:auto;font-size:12px;max-height:calc(100vh - 230px); }
.store-panel>div { display:flex;flex-direction:column;padding:8px 10px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:0 6px 30px #0005;backdrop-filter:blur(12px);min-height:0; }
.store-panel header { display:flex;align-items:baseline;gap:10px;margin-bottom:8px; }
.store-panel header strong { font-size:13px; }
.store-panel header small { color:#8d979c;font-variant-numeric:tabular-nums; }
.crate-side { display:none !important;width:340px; }
.store-panel.with-crate .crate-side { display:flex !important; }
.crate-slots { display:grid;grid-template-columns:repeat(6,50px);gap:5px;justify-content:start; }
.game-ui .crate-slot:hover,.game-ui.crate-open .hotbar .slot:hover { border-color:var(--amber);background:#3a3326; }
.crate-help { margin:9px 0 8px;color:#8d979c;font-size:11px;line-height:1.4; }
.crate-help kbd { font:600 10px Inter,ui-sans-serif,sans-serif;padding:0 3px;border:1px solid var(--line);border-radius:2px; }
.crate-actions { display:flex;gap:6px; }
.game-ui .crate-actions button { padding:7px 12px;border-radius:4px;font-size:12px;font-weight:600; }
.game-ui .crate-actions button[data-action=close-store] { margin-left:auto;padding:5px 10px;font-size:17px;line-height:1; }
.store-panel.with-crate .ledger-close { display:none; }
.game-ui .ledger-close { margin-left:auto;border:0;background:transparent;font-size:17px;line-height:1;padding:0 4px; }
.game-ui .stock-toggle[aria-expanded=true] { border-color:var(--amber); }
.reticle { position:fixed;left:0;top:0;width:80px;height:80px;z-index:4;pointer-events:none;overflow:visible;display:none;transition:opacity .15s; }
.reticle.shown { display:block; }
.reticle * { fill:none;stroke-linecap:round; }
.reticle .under,.reticle .flame-under { stroke:#0b0f14d0;stroke-width:4.4; }
.reticle .tick { stroke:#edbd79;stroke-width:2; }
.reticle .dot-under { fill:#0b0f14d0; }
.reticle .dot { fill:#f2efe6; }
.reticle .seg { stroke:#f2efe62e;stroke-width:3; }
.reticle .seg.on { stroke:#edbd79d9; }
.reticle .reload { stroke:#f2efe6;stroke-width:3;stroke-dasharray:0 1;transform:rotate(0deg);display:none; }
.reticle.reloading .reload { display:block; }
.reticle.reloading .ammo { opacity:.35; }
.reticle.empty .tick,.reticle.empty .dot { stroke:#ff6a55;fill:#ff6a55; }
.reticle .flame,.reticle .flame-under { display:none; }
.reticle.flamer .flame,.reticle.flamer .flame-under { display:block; }
.reticle.flamer .ticks { display:none; }
.reticle .flame { stroke:#edbd79;stroke-width:2;stroke-dasharray:7 6.6;transition:stroke .12s; }
.reticle.flamer .seg.on { stroke:#ff9a4a; }
.reticle.spraying .flame { stroke:#ffb15a;stroke-width:2.6;stroke-dasharray:none;filter:drop-shadow(0 0 4px #ff7a2a) drop-shadow(0 0 9px #ff5a1a99); }
.reticle.energy .flame { stroke:#8fe6ff;stroke-dasharray:3 4.2; }
.reticle.energy .seg.on { stroke:#8fe6ffd9; }
.reticle.energy.spraying .flame { stroke:#bff3ff;stroke-dasharray:none;filter:drop-shadow(0 0 4px #4fd2ff) drop-shadow(0 0 9px #2aa8ff99); }
.reticle.charging .reload { stroke:#8fe6ff; }
.reticle.charging .ammo { opacity:1; }
.reticle.charging.spraying .tick,.reticle.charging.spraying .reload { stroke:#d8f8ff;filter:drop-shadow(0 0 4px #4fd2ff); }
.reticle.far { opacity:.42; }


/* Console kit: the icons, gauges, rack trays and work-order tag are Blender renders (assets/ui, built by
   blender/build_ui_kit.py), set on plain dark glass panels. */
.game-ui { --ink:#2b2f33;--lcd:#8fe6ff;--mono:ui-monospace,"SF Mono",Menlo,monospace;--glass:rgba(14,18,22,.66); }
.hud-top { position:absolute;top:14px;left:16px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;max-width:calc(100% - 380px);pointer-events:none; }
.hud-top>* { pointer-events:auto; }
.resource-bar { position:static;max-width:none;gap:12px;padding:6px 14px 6px 8px;border:0;border-radius:12px;background:var(--glass);backdrop-filter:blur(8px); }
.vitals { display:flex;align-items:center;gap:18px;font-size:11px; }
.vitals>span { display:inline-flex;align-items:center;white-space:nowrap; }
.vitals strong { text-shadow:0 1px 2px #000,0 0 6px #000c; }
.vitals .plates,.vitals .tube { filter:drop-shadow(0 2px 3px #000b); }
.readout { gap:4px!important; }
.readout-art { width:46px;height:46px;margin:-4px 0;object-fit:contain;filter:drop-shadow(0 2px 3px #000a); }
.lcd { display:inline-flex;align-items:baseline;gap:4px;font:600 14px/1 var(--mono);color:var(--lcd);text-shadow:0 0 6px #4fd2ff88; }
.resource-bar .lcd strong { color:inherit;font:inherit; }
.resource-bar .lcd small { font-size:10px;color:#5fb7cf; }
.power-resource { color:inherit!important; }
.power-resource.insufficient .lcd { color:#ff9a6e;text-shadow:0 0 6px #ff6a3288; }
.health-resource strong,.food-resource strong { min-width:36px;font:600 12px var(--mono)!important;color:#d9dccf!important; }
.plates { display:inline-flex;gap:1px; }
.plates i { width:20px;height:24px;background:url(assets/ui/kit/plate.png) center/contain no-repeat; }
.plates i[data-state=cracked] { background-image:url(assets/ui/kit/plate-cracked.png); }
.plates i[data-state=empty] { background-image:url(assets/ui/kit/plate-empty.png); }
.health-resource[data-tone=critical] .plates i:not([data-state=empty]) { animation:gauge-warn .55s ease-in-out infinite alternate; }
.health-resource[data-tone=critical] strong { color:#ff8a70!important; }
.tube { position:relative;width:112px;height:25px;background:url(assets/ui/kit/tube-empty.png) center/100% 100% no-repeat; }
.tube i { position:absolute;inset:0;background:url(assets/ui/kit/tube-full.png) center/100% 100% no-repeat;transition:clip-path .3s; }
.food-resource[data-tone=hungry] .tube i { filter:hue-rotate(-50deg) saturate(1.4); }
.food-resource[data-tone=starving] .tube { animation:gauge-warn .55s ease-in-out infinite alternate; }
.food-resource[data-tone=hungry] strong { color:var(--amber)!important; }
.food-resource[data-tone=starving] strong { color:#ff9a7e!important; }
@keyframes gauge-warn { to { filter:brightness(1.35) sepia(.6) saturate(2.4) hue-rotate(-25deg); } }

.game-ui .build-toggle,.game-ui .robots-toggle { position:relative;gap:0;padding:4px;border:0;border-radius:12px;background:var(--glass);box-shadow:none;backdrop-filter:blur(8px);transition:transform .08s,background .12s; }
.game-ui .build-toggle:hover { background:rgba(40,48,54,.8);border-color:transparent; }
.game-ui .build-toggle:active { transform:translateY(1px); }
.game-ui .build-toggle[aria-expanded=true] { background:rgba(34,48,56,.86);box-shadow:inset 0 0 0 1.5px #7fe3ff77; }
.key-art { width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 3px #000a); }
.game-ui .build-toggle kbd { position:absolute;right:4px;bottom:4px;min-width:16px;height:16px;margin:0;border:1px solid #ffffff26;border-radius:3px;background:#0b0f12cc;color:#b9c2c5;font-size:9px; }
.build-menu,.robots-panel { border:0;border-radius:12px;background:rgba(14,18,22,.88);box-shadow:0 6px 30px #0006; }
.build-art { width:46px;height:46px;margin:-8px -2px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 2px 2px #0008); }

.objective { position:absolute;top:14px;right:16px;left:auto;width:min(340px,calc(100% - 32px)); }
.buffs { top:84px;left:16px; }
.comms { display:flex;flex-direction:row-reverse;align-items:flex-start;gap:6px;margin-top:4px; }
.game-ui .comms-unit { flex:none;width:64px;height:64px;padding:0;border:0;background:none;filter:drop-shadow(0 3px 5px #0009); }
.game-ui .comms-unit:hover { background:none;filter:drop-shadow(0 3px 5px #0009) brightness(1.12); }
.comms-unit img { display:block;width:100%;height:100%; }
.objective-message { flex:1;margin:6px 0 0;padding:9px 12px;max-height:12em;overflow:hidden;border-radius:10px;background:var(--glass);backdrop-filter:blur(8px);font:500 12px/1.45 var(--mono);color:var(--lcd);text-shadow:0 0 6px #4fd2ff55;transition:opacity .45s,max-height .45s,padding .45s; }
.objective-message:empty,.objective.tucked .objective-message { opacity:0;max-height:0;padding-top:0;padding-bottom:0; }
.objective.aside .objective-message { color:#ffd9a0;text-shadow:0 0 6px #ffb45a55; }
.objective.fresh .comms-unit { animation:comms-call .45s 6 alternate; }
@keyframes comms-call { to { filter:drop-shadow(0 0 10px #7fe3ffcc) brightness(1.25); } }
.work-order { display:flex;align-items:center;gap:8px;margin:0;padding:6px 14px 6px 6px;border-radius:12px;background:var(--glass);backdrop-filter:blur(8px); }
.objective.fresh .work-order { animation:order-call .45s 6 alternate; }
@keyframes order-call { to { box-shadow:0 0 0 1px #8fe6ff66,0 0 16px #4fd2ff44; } }
.order-art { width:52px;height:52px;flex:none;object-fit:contain;filter:drop-shadow(0 2px 3px #0007); }
.order-body { flex:1;display:grid;gap:5px;min-width:0; }
.order-label { font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7d888d; }
.objective-task { font:600 13px/1.25 var(--mono);color:var(--lcd);text-shadow:0 0 6px #4fd2ff55; }
.pips { display:flex;gap:2px; }
.pips i { flex:1;height:4px;background:#8fe6ff22; }
.pips i.on { background:var(--lcd);box-shadow:0 0 6px #4fd2ff88; }
.objective-distance { flex:none;font:600 11px var(--mono);color:var(--lcd);opacity:.7; }
.objective.complete .order-label::after { content:" · done"; }
.objective.complete .order-art { filter:drop-shadow(0 2px 2px #0006) saturate(.5); }
@media(max-width:600px) { .objective { top:auto;bottom:110px;right:12px;width:calc(100% - 24px); } .objective-message { font-size:11px; } }

.hotbar { gap:0;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;align-items:flex-end;filter:drop-shadow(0 5px 10px #0009); }
.hotbar::before,.hotbar::after { content:'';width:17px;height:74px;background:url(assets/ui/kit/rail-end.png) center/100% 100% no-repeat; }
.hotbar::after { transform:scaleX(-1); }
.game-ui .hotbar .slot,.game-ui .hotbar .slot:hover,.game-ui.crate-open .hotbar .slot:hover { width:64px;height:74px;border:0;border-radius:0;background:url(assets/ui/kit/tray.png) center/100% 100% no-repeat;transition:transform .14s ease-out; }
.game-ui .hotbar .slot.selected,.game-ui .hotbar .slot.selected:hover { background-image:url(assets/ui/kit/tray-on.png);transform:translateY(-7px); }
.game-ui .hotbar .slot:hover { filter:brightness(1.1); }
.game-ui .hotbar .slot.drop-target { filter:brightness(1.2);box-shadow:none; }
.hotbar .slot kbd { left:9px;top:3px;font:700 9px Inter,ui-sans-serif,sans-serif;color:#aeb7ba;text-shadow:none; }
.hotbar .slot.selected kbd { color:#bff0ff; }
.hotbar .slot-icon { inset:10px 7px 13px; }
.hotbar .slot strong { right:8px;bottom:12px; }
@media(max-width:1320px) { .game-ui .hotbar .slot,.game-ui .hotbar .slot:hover { width:54px;height:62px; } .hotbar::before,.hotbar::after { height:62px;width:14px; } }
@media(max-width:900px) { .game-ui .hotbar .slot,.game-ui .hotbar .slot:hover { width:46px;height:53px; } .hotbar::before,.hotbar::after { height:53px;width:13px; } }.blueprint-tip { position:fixed;left:0;top:0;z-index:6;min-width:220px;max-width:320px;padding:9px 11px 8px;border:1px solid var(--line);border-radius:5px;background:rgba(14,18,22,.95);box-shadow:0 6px 18px #0009;color:#e3dccd;font-size:12px;pointer-events:none;will-change:transform; }
.blueprint-tip header { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px; }
.blueprint-tip header strong { font-size:13px;color:#f1ebdf; }
.blueprint-tip header span { color:#7fd3ea;font-size:11px;white-space:nowrap; }
.blueprint-tip ul { display:grid;gap:3px;margin:0;padding:0;list-style:none; }
.blueprint-tip li { display:grid;grid-template-columns:22px 1fr auto;grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:3px 5px;border-radius:3px;background:#ffffff08; }
.blueprint-tip li img { grid-row:span 2;width:22px;height:22px;object-fit:contain; }
.blueprint-tip li b { font-weight:600;color:#f1ebdf; }
.blueprint-tip li small { grid-column:2 / 4;color:#9aa3a8;font-size:10.5px; }
.blueprint-tip li small:empty { display:none; }
.blueprint-tip li.done { opacity:.55; }
.blueprint-tip li.done b { color:#6fe0a9;font-weight:500; }
.blueprint-tip li.short { background:#ef7e6a1f;box-shadow:inset 2px 0 #ef7e6a; }
.blueprint-tip li.short b, .blueprint-tip li.short small { color:#ef9a7e; }
.blueprint-tip p { margin:7px 0 0;color:#b9b2a5;font-size:11px; }
.blueprint-tip p.missing { color:#ef9a7e; }
.blueprint-tip kbd { display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:1px solid #edbd7980;border-radius:3px;color:var(--amber);font:600 10px Inter,ui-sans-serif,sans-serif; }

/* Robots: a rack of bays per fleet, like the hotbar trays. Spare bays open the build tool; humanoid bays wait. */
.fleet header { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 2px 5px; }
.fleet header b { font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8d979c; }
.fleet .lcd { font-size:12px; }
.fleet .lcd small,.ledger-summary small { font-size:10px;color:#5fb7cf; }
.bays,.zones { display:flex;gap:4px;flex-wrap:wrap;max-width:300px; }
.bay { position:relative;width:64px;height:74px;display:grid;place-items:center;background:url(assets/ui/kit/tray.png) center/100% 100% no-repeat; }
.bay-art { width:50px;height:50px;object-fit:contain;margin-top:-4px;filter:drop-shadow(0 2px 2px #0008); }
.bay kbd { position:absolute;left:9px;top:4px;font:700 9px Inter,ui-sans-serif,sans-serif;color:#aeb7ba; }
.bay-lamp { position:absolute;right:9px;top:7px;width:6px;height:6px;border-radius:50%;background:#58e0a0;box-shadow:0 0 6px #58e0a0; }
.bay[data-level=low] .bay-lamp { background:#f2b45a;box-shadow:0 0 6px #f2b45a; }
.bay[data-level=fault] .bay-lamp { background:#ff6a32;box-shadow:0 0 6px #ff6a32;animation:gauge-warn .55s ease-in-out infinite alternate; }
.bay[data-level=idle] .bay-lamp { background:#56616a;box-shadow:none; }
.bay-charge { position:absolute;left:10px;right:10px;bottom:13px;height:3px;border-radius:2px;background:#ffffff1a;overflow:hidden; }
.bay-charge i { display:block;height:100%;background:var(--lcd);box-shadow:0 0 4px var(--lcd);transition:width .3s; }
.bay[data-level=low] .bay-charge i { background:#f2b45a;box-shadow:none; }
.bay-cargo { position:absolute;right:7px;bottom:17px;display:flex;align-items:center;font:600 10px var(--mono);color:#f2f2e9;text-shadow:0 1px 2px #000; }
.bay-cargo img { width:16px;height:16px; }
.game-ui .bay-zone { position:absolute;left:7px;bottom:17px;min-width:16px;height:16px;padding:0 3px;border:1px solid #f0a650;border-radius:3px;background:#0b0f12cc;color:#f0a650;font:700 9px var(--mono);line-height:14px; }
.game-ui .bay-zone:hover { background:#f0a65033; }
.game-ui .bay.spare { padding:0;border:0;border-radius:0;background:url(assets/ui/kit/tray.png) center/100% 100% no-repeat;color:#6f7b80;opacity:.75; }
.game-ui .bay.spare svg,.game-ui .zone.spare svg { width:20px;height:20px; }
.game-ui .bay.spare:hover { opacity:1;color:var(--amber);background-image:url(assets/ui/kit/tray-on.png); }
.bay.reserved { opacity:.32;color:#9aa5aa; }
.game-ui .bay.spare.idle,.game-ui .bay.spare.idle:hover { opacity:.55;color:#9aa5aa;background-image:url(assets/ui/kit/tray.png); }
.game-ui .bay.spare.idle svg { width:30px;height:30px;margin-top:-6px; }
.bay.reserved svg { width:30px;height:30px;margin-top:-6px; }
.zone { display:flex;align-items:center;gap:5px;height:30px;padding:0 4px 0 5px;border-radius:6px;background:#ffffff0a; }
.zone.exhausted { opacity:.5; }
.zone-tag { width:18px;height:18px;display:grid;place-items:center;border:1px solid #f0a650;border-radius:3px;color:#f0a650;font:700 10px var(--mono); }
.zone-kind img { width:20px;height:20px;display:block; }
.zone .lcd { font-size:11px;min-width:30px; }
.game-ui .zone button { width:20px;height:20px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:#7d888d;border-radius:3px; }
.game-ui .zone button svg { width:12px;height:12px; }
.game-ui .zone button:hover { color:#ff8a62;background:#3a2b26; }
.game-ui .zone.spare { gap:4px;padding:0 8px;border:1px dashed #ffffff22;background:transparent;color:#8d979c; }
.game-ui .zone.spare:hover:not(:disabled) { color:var(--amber);border-color:#edbd7966; }
.zone.spare kbd { font:600 9px Inter,ui-sans-serif,sans-serif;color:#aab3b6; }

/* Base stock: one tray per item with its count; hovering shows where it is. */
.ledger-side { width:332px; }
.ledger-side header { align-items:center; }
.ledger-summary { font-size:13px; }
.stock-grid { display:grid;grid-template-columns:repeat(5,60px);gap:3px;overflow:auto;min-height:0;max-height:min(360px,calc(100vh - 330px));justify-content:start; }
.game-ui .stock-tile { position:relative;width:60px;height:68px;padding:0;border:0;border-radius:0;background:url(assets/ui/kit/tray.png) center/100% 100% no-repeat;cursor:default; }
.game-ui .stock-tile:hover,.game-ui .stock-tile.focus { background-image:url(assets/ui/kit/tray-on.png); }
.stock-tile img { position:absolute;inset:8px 9px 18px;width:42px;height:42px;object-fit:contain; }
.stock-tile .lcd { position:absolute;right:8px;bottom:11px;font-size:11px; }
.stock-tile.pockets-only img { opacity:.55; }
.stock-tile.pockets-only .lcd { color:#8d979c;text-shadow:none; }
.stock-moving { position:absolute;left:9px;top:7px;width:6px;height:6px;border-radius:50%;background:#9fd8c0;box-shadow:0 0 6px #9fd8c0; }
.stock-empty { margin:10px auto;color:#56616a; }
.stock-empty svg { width:34px;height:34px; }
.stock-detail { margin-top:8px;padding:7px 8px;border-radius:6px;background:#ffffff08; }
.stock-detail strong { display:block;margin-bottom:5px;font-size:12px; }
.stock-detail div { display:flex;flex-wrap:wrap;gap:4px; }
.stock-detail span { display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:3px;background:#ffffff0c;font:600 10px var(--mono);color:#c9b48f; }
.stock-detail span b { color:var(--lcd);font-weight:600; }
.stock-detail span svg { width:13px;height:13px; }
.stock-detail span.pockets { color:#dfe3dd; }
.stock-detail span.machine { color:#9aa5aa; }
.stock-detail span.moving { color:#9fd8c0; }
.station-targets { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin-top:8px;padding-top:7px;border-top:1px solid #ffffff12; }
.station-targets > small { color:#8d979c;font-size:10px;letter-spacing:.06em;text-transform:uppercase; }
.station-targets span { display:flex;align-items:center;gap:3px;opacity:.6; }
.station-targets span.set { opacity:1; }
.station-targets img { width:20px;height:20px;object-fit:contain; }
.station-targets button { width:18px;height:18px;padding:0;border:1px solid #ffffff1c;border-radius:3px;background:#ffffff0a;color:inherit;font:600 12px/1 inherit;cursor:pointer; }
.station-targets button:hover:not(:disabled) { border-color:#edbd7988;color:var(--amber); }
.station-targets button:disabled { opacity:.35;cursor:default; }
.station-targets b { min-width:18px;text-align:center;font-size:11px; }
.station-options button:has(.station-inputs img:nth-of-type(3)) { width:104px; }