/* Рівень «Поверхня планети»: canvas на весь екран + панелі по краях.
   Космічний HUD і рамка кабіни ховаються, тости (#topLeftStack) лишаються. */
body.surface-open #criticalDamageCanvas { visibility:hidden; }
.surface-open :is(#hud,#backButton,#gsOpenBtn,#combatModes,#actionDock,#spOpenInventoryBtn,#spOpenMissionsBtn,#mmOpenMenuBtn,
  #galaxyMovePanel,#galaxyStats,#voidSiegeHud,#hint,#questTracker,#eventsPanel,.toggle-ui-btn) { visibility:hidden; }
.surface-open #gameCanvas { cursor:default; }
/* Тости/тривоги лишаються видимими, але не перехоплюють наведення й кліки по мапі */
.surface-open #topLeftStack, .surface-open #topLeftStack * { pointer-events:none; }

.surface-ui { --sf-line:#48555d; --sf-ink:#edf0e8; --sf-amber:#efbc68; --sf-panel:#111b23f5; color:var(--sf-ink); font:14px/1.4 sans-serif; }
.surface-ui button { min-height:44px; border-radius:4px; border:1px solid #52616a; background:linear-gradient(#2b3942,#1c2831); color:var(--sf-ink); padding:6px 12px; cursor:pointer; font:inherit; box-shadow:inset 0 1px #ffffff09; }
.surface-ui button:hover:not(:disabled) { border-color:var(--sf-amber); background:#444841; }
.surface-ui button:focus-visible,.surface-ui input:focus-visible { outline:2px solid #edc57f; outline-offset:2px; }
.surface-ui button:disabled { opacity:.5; cursor:not-allowed; }
.surface-ui .hidden { display:none !important; }

.surface-top { position:fixed; z-index:60; top:12px; left:12px; right:12px; display:flex; align-items:center; gap:12px; pointer-events:none; }
.surface-top>* { pointer-events:auto; }
.surface-exit { font-weight:700; letter-spacing:.08em; }
.surface-title { flex:0 1 380px; min-width:0; background:var(--sf-panel); border:1px solid var(--sf-line); border-left:3px solid var(--sf-amber); border-radius:3px; padding:6px 12px; }
.surface-name { display:block; font-weight:700; letter-spacing:.1em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.surface-biome { color:#a2b5bd; font-size:11px; letter-spacing:.08em; }
.surface-view { min-width:52px; font-weight:700; letter-spacing:.08em; }
.surface-view[aria-pressed="true"] { color:var(--sf-amber); border-color:var(--sf-amber); }
.surface-power { margin-left:auto; background:var(--sf-panel); border:1px solid var(--sf-line); border-radius:3px; padding:10px 12px; color:#9fe0b8; font:700 13px/24px monospace; white-space:nowrap; }
.surface-power.short { color:var(--sf-amber); border-color:var(--sf-amber); }
.surface-power + .surface-credits { margin-left:0; }
.surface-credits { margin-left:auto; background:var(--sf-panel); border:1px solid var(--sf-line); border-radius:3px; padding:10px 16px; color:var(--sf-amber); font:700 15px/24px monospace; white-space:nowrap; }

.surface-bottom { position:fixed; z-index:60; left:12px; right:12px; bottom:12px; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.surface-bottom>* { pointer-events:auto; }
.surface-hint { max-width:100%; background:var(--sf-panel); border:1px solid var(--sf-line); border-left:3px solid #6cf0a0; border-radius:3px; padding:6px 12px; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.surface-hint.warn { border-left-color:#ff7a6a; color:#ffd2cb; }

.surface-hint.suppressed { visibility:hidden; }

/* Консоль будівництва (BuildConsole.js): вкладки-полиці + плитки з портретами, як у класичних RTS.
   --sf-console-h — зайнята знизу висота (консоль + відступ); панелі справа закінчуються над нею. */
.surface-ui { --sf-console-h:190px; --sf-tile:108px; }
.surface-ui { --sf-map:160px; }
.build-console { align-self:center; width:calc(var(--sf-map) + 488px); min-width:0; max-width:100%; display:grid; grid-template-columns:var(--sf-map) minmax(0,1fr); align-items:center; gap:8px; background:linear-gradient(130deg,#26343cf5,#111a22fa 60%); border:1px solid var(--sf-line); border-top:2px solid #b58c4f; border-radius:6px; padding:8px; box-shadow:0 8px 28px #0008,inset 0 1px #ffffff0a; }
/* Міні-мапа (MinimapView.js) — ліва колонка консолі; на вузьких телефонах — вкладка MAP */
.build-main { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.build-map { width:var(--sf-map); height:var(--sf-map); }
.build-map-canvas { display:block; width:100%; height:100%; box-sizing:border-box; touch-action:none; cursor:crosshair; background:#05070f; border:1px solid var(--sf-line); border-radius:4px; box-shadow:inset 0 0 12px #0008; }
.build-map-canvas:focus-visible { outline:2px solid #edc57f; outline-offset:2px; }
.surface-ui .build-tab.build-tab-map { display:none; }
/* Categories above cards keep the map open on either side. */
.build-tabs { display:flex; flex-direction:row; gap:6px; }
.surface-ui .build-tab { min-height:44px; flex:1 1 0; min-width:0; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; padding:4px 6px; text-align:center; letter-spacing:.08em; font-size:11px; font-weight:700; color:#a8b8bf; background:#17232c; border-color:#3c4a53; }
.surface-ui .build-tab[aria-selected="true"] { color:#ffe2ad; background:linear-gradient(#55482f,#302b23); border-color:var(--sf-amber); box-shadow:inset 0 -2px var(--sf-amber); }
.build-tab-count { min-width:20px; text-align:center; font:11px/18px monospace; color:#e4e1d6; background:#0e1214; border:1px solid #5d625b; border-radius:9px; letter-spacing:0; }
.build-shelf { display:flex; justify-content:safe center; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; padding:2px; min-width:0; }
.surface-ui .build-tile { position:relative; flex:0 0 var(--sf-tile); width:var(--sf-tile); height:var(--sf-tile); min-height:0; padding:0; overflow:hidden; background:radial-gradient(ellipse at 50% 35%,#3b4b52,#101b24 75%); border:1px solid #5a6c76; border-radius:4px; }
.surface-ui .build-tile:hover:not([aria-disabled="true"]) { border-color:var(--sf-amber); background:#0e1214; }
.surface-ui .build-tile[aria-pressed="true"] { border-color:#6cf0a0; box-shadow:0 0 0 1px #6cf0a0, inset 0 0 12px #6cf0a055; }
.build-tile-img { position:absolute; top:7px; left:8%; width:84%; height:calc(100% - 38px); object-fit:contain; image-rendering:auto; }
.build-tile.blocked { cursor:not-allowed; }
.build-tile.blocked .build-tile-img { filter:saturate(.45) brightness(.7); }
.build-name { position:absolute; left:2px; right:2px; bottom:20px; color:#e7ece9; font-size:11px; font-weight:600; line-height:14px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.build-key,.build-count { position:absolute; top:3px; font:700 11px/16px monospace; padding:0 4px; border-radius:2px; background:#0b0f11d9; border:1px solid #6b6f68; }
.build-key { left:3px; color:var(--sf-amber); }
.build-count { right:3px; color:#e4e1d6; }
.build-cost { position:absolute; left:0; right:0; bottom:0; font:700 12px/18px sans-serif; color:var(--sf-amber); background:linear-gradient(transparent,#0b0f11f0 35%); padding:6px 4px 1px; text-align:center; }
.build-lock { position:absolute; inset:0; display:none; place-items:center; font-size:20px; }
.build-tile.blocked .build-lock { display:grid; }
/* «Годинник» будівництва: затемнення, що зменшується за прогресом */
.build-timer { position:absolute; inset:0; display:none; place-items:center; font:700 13px monospace; color:#ffe2a8; text-shadow:0 1px 2px #000;
  background:conic-gradient(transparent 0 var(--progress,0deg), #05070fb3 var(--progress,0deg) 360deg); }
.build-tile.constructing .build-timer { display:grid; }
.build-tile.constructing .build-lock { display:none; }

.build-card { position:fixed; z-index:62; width:min(340px,calc(100vw - 16px)); display:grid; grid-template-columns:96px 1fr; gap:10px; background:#161c1ef7; border:1px solid var(--sf-amber); border-radius:4px; padding:10px; box-shadow:0 12px 40px #000c; pointer-events:none; }
.build-card-img { width:96px; height:96px; object-fit:contain; padding:6px; border:1px solid #52616a; border-radius:3px; background:radial-gradient(#35434b,#101b24); }
.build-card-text { min-width:0; }
.build-card-text strong { display:block; color:var(--sf-amber); letter-spacing:.06em; }
.build-card-meta { display:block; color:#aeb4aa; font-size:11px; margin-bottom:4px; }
.build-card-desc { margin:0 0 6px; color:#d6d3c8; font-size:12px; }
.build-card-levels { margin:0; padding-left:16px; color:#cfd3c9; font-size:11px; }
.build-card-reason { margin:6px 0 0; color:#ffb4a8; font-size:12px; font-weight:700; }

.surface-info-portrait { width:64px; height:64px; flex:0 0 64px; object-fit:contain; padding:6px; border:1px solid #52616a; border-radius:4px; background:radial-gradient(#3b4b52,#101b24); }
.surface-info-head .surface-info-title { flex:1; min-width:0; }

/* Картка вибраної будівлі — у консолі замість полиці (RTS «командна картка»): ліва колонка
   скролиться (портрет, статус, показники, розділи), права — колонка дій, завжди на виду.
   show-unit — той самий слот/механіка для панелі вибраного юніта (SurfaceUnits.js), але вужча:
   проста 2-колонкова сітка кнопок, без двоколонкового layout будівлі. */
.build-building { display:none; min-width:0; max-width:100%; }
.build-console.show-building .build-shelf,
.build-console.show-unit .build-shelf { display:none; }
.build-console.show-building .build-building,
.build-console.show-unit .build-building { display:block; }
.build-console.show-building { width:min(calc(var(--sf-map) + 760px), 100%); }
/* show-unit навмисно без ширини: компактна юніт-панель лишається на базовій ширині консолі
   (--sf-map + 488px, та сама, що й у звичайної полиці) — рядок вкладок тоді не стискається */
.surface-ui .build-tab.build-tab-sel { flex:1.6 1 0; color:#bfe9d8; border-color:#4f7469; }
.surface-ui .build-tab.build-tab-sel[aria-selected="true"] { color:#d9fff0; background:linear-gradient(#2f5249,#1e3330); border-color:#75d9b8; box-shadow:inset 0 -2px #75d9b8; }
.surface-info { --sf-card-h:min(340px,46dvh); display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:10px; align-items:start; }
.surface-info-body { min-width:0; max-height:var(--sf-card-h); overflow:auto; padding-right:4px; overscroll-behavior:contain; }
/* Шапка (портрет, назва, ✕) лишається видимою, коли картка скролиться */
.surface-info-body > .surface-info-head { position:sticky; top:0; z-index:1; margin:0 0 6px; padding:2px 0 6px; background:#16222a; }
.surface-info .surface-info-actions { max-height:var(--sf-card-h); overflow:auto; align-content:start; }
.surface-info .surface-info-services { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px; margin-bottom:8px; }
.surface-info-actions button { min-width:0; overflow-wrap:anywhere; }

.surface-touch { display:flex; gap:10px; }
.surface-touch button { min-width:120px; font-weight:700; }
.surface-confirm:not(:disabled) { border-color:#6cf0a0; }
/* Поворот привида — вузька квадратна кнопка, щоб три кнопки влазили на 320px */
.surface-touch .surface-rotate { min-width:48px; font-size:20px; line-height:1; }

.surface-storage { position:fixed; z-index:61; top:76px; right:12px; background:var(--sf-panel); border:1px solid var(--sf-line); border-radius:4px; padding:12px; box-shadow:0 12px 40px #000a; }
/* Склад-інвентар: дві сітки + смуга деталей (DepotUI.js); палітра — як у консолі інвентаря */
.surface-depot { width:min(600px,calc(100vw - 24px)); max-height:calc(100dvh - 76px - var(--sf-console-h) - 12px); overflow:auto; background:#1b2124; padding-bottom:0; }
.depot-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.depot-side-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; letter-spacing:.08em; }
.depot-side-head strong { color:var(--sf-amber); font-size:12px; }
.depot-counter { color:#aebca2; font-size:11px; white-space:nowrap; }
.depot-grid { display:grid; grid-template-columns:repeat(4,minmax(40px,60px)); justify-content:start; gap:6px; padding:4px; border:1px dashed transparent; border-radius:4px; }
.depot-grid.drag-over { border-color:#6cf0a0; background:#6cf0a012; }
.depot-cell { position:relative; aspect-ratio:1; min-height:48px; border:1px solid #58674f; background:#121b16; box-shadow:inset 0 2px 6px #070d09; border-radius:3px; display:grid; place-items:center; --item-icon-size:70%; }
.depot-cell.filled { cursor:pointer; }
.depot-cell.filled:hover { border-color:#c4b382; }
.depot-cell.selected { border-color:#ffd27a; box-shadow:inset 0 0 0 1px #ffd27a; }
.depot-cell.locked { opacity:.55; }
.depot-cell.overflow { border-style:dashed; border-color:#c9783e; }
.depot-cell:focus-visible { outline:2px solid #edc57f; outline-offset:1px; }
.depot-cell .item-icon { width:var(--item-icon-size); height:var(--item-icon-size); }
.depot-qty-badge { position:absolute; right:2px; bottom:2px; font:11px/1.2 monospace; color:#edbf7a; background:#0e1712e6; border:1px solid #7a8062; border-radius:2px; padding:0 3px; }
.depot-dot { position:absolute; left:4px; top:4px; width:6px; height:6px; border-radius:50%; }
/* Деталі закріплені внизу прокручуваної панелі — кнопка Store/Take завжди видима */
.depot-detail { position:sticky; bottom:0; display:grid; grid-template-columns:52px 1fr; gap:8px 10px; align-items:center; margin:10px -12px 0; padding:10px 12px 12px; background:#131d17; border-top:1px solid #5b6c51; box-shadow:0 -8px 16px #0009; }
.depot-detail-icon { width:52px; height:52px; display:grid; place-items:center; --item-icon-size:44px; background:radial-gradient(circle at 50% 45%,#2a3a2a,#0e1712 70%); border-radius:3px; }
.depot-detail-text { min-width:0; }
.depot-detail-text strong { display:block; color:#f0c783; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.depot-detail-text small { color:#aebca2; }
.depot-detail-controls { grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.depot-qty { width:76px; min-height:40px; background:#101912; color:#eadcb6; border:1px solid #7a8062; border-radius:3px; padding:4px 8px; }
.depot-move { flex:1; min-width:140px; font-weight:700; border-color:#6cf0a0 !important; }
.depot-move:disabled { border-color:#73776f !important; }
.surface-info-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.surface-info-title { font-weight:700; letter-spacing:.1em; color:var(--sf-amber); }
.surface-info-close { min-width:44px; }
.surface-info-status { margin-bottom:12px; padding:6px 9px; background:#75d9b80b; border-left:2px solid #75d9b8; color:#a8e5d0; font-size:12px; }
.surface-info[data-state="building"] .surface-info-status { border-color:var(--sf-amber); color:#ffe0a8; background:#efbc680b; }
.surface-info-meter { width:100%; height:10px; margin-bottom:8px; }
.surface-info-services { margin:0 0 14px; padding:0; list-style:none; color:#c7d2d5; font-size:13px; }
.surface-info-services li { padding:6px 0; border-bottom:1px solid #ffffff0d; }
.surface-info-actions { display:grid; gap:8px; }
.surface-ui .surface-upgrade:not(:disabled),.surface-ui .surface-collect:not(:disabled),.surface-ui .surface-garage-fuel:not(:disabled),.surface-ui .surface-garage-xp:not(:disabled) { border-color:#b99559; background:linear-gradient(#514632,#332f27); color:#ffe2ae; }
.surface-demolish { margin-top:6px; background:#271f22 !important; border-color:#64474a !important; color:#dfa5a1 !important; }
.surface-demolish.armed { background:linear-gradient(#7a3a33,#55271f) !important; border-color:#e08a7a !important; }
/* Post Terminal: наймані трейдери (SurfaceUI._renderTraders) */
.surface-traders { margin:0 0 12px; display:grid; gap:8px; }
.surface-trader-list,.surface-trader-log { margin:0; padding:0; list-style:none; }
.surface-trader { padding:7px 8px; border:1px solid #ffffff14; border-radius:4px; background:#0000002e; display:grid; gap:4px; }
.surface-trader[data-status="outbound"],.surface-trader[data-status="returning"] { border-color:#6fae7a66; }
.surface-trader-name { color:var(--sf-amber); font-size:12px; letter-spacing:.06em; }
.surface-trader-state { color:#c7d2d5; font-size:12px; }
.surface-trader-actions { display:grid; grid-template-columns:1fr auto; gap:6px; }
.surface-trader-actions button { min-height:32px; padding:4px 8px; font-size:12px; }
.surface-trader-empty { color:#8c999d; font-size:12px; }
.surface-trader-hire { display:grid; grid-template-columns:1fr auto; gap:6px; }
/* Workshop: прогрес роботи і рядки предметів трюму (іконка · назва/ціна · Upgrade) */
.surface-workshop { margin:0 0 12px; display:grid; gap:8px; }
.surface-workshop-list { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.surface-workshop-item { padding:6px 8px; border:1px solid #ffffff14; border-radius:4px; background:#0000002e; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; --item-icon-size:32px; }
.surface-workshop-name { color:var(--sf-amber); font-size:12px; letter-spacing:.04em; }
.surface-workshop-cost { color:#c7d2d5; font-size:11px; }
.surface-charter { margin:0 0 12px; display:grid; gap:6px; }
.surface-charter-label { color:#a2b5bd; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.surface-charter-name,.surface-charter-gov { min-height:40px; min-width:0; background:#151a1c; color:#e4ecff; border:1px solid #4c5a5f; border-radius:4px; font:inherit; padding:4px 8px; }
.surface-charter-emblems { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.surface-ui .surface-charter-emblem { min-height:44px; padding:6px; display:grid; place-items:center; color:#a8b8bf; }
.surface-ui .surface-charter-emblem[aria-pressed="true"] { color:var(--sf-amber); border-color:var(--sf-amber); box-shadow:inset 0 0 0 1px var(--sf-amber); }
.colony-emblem { width:24px; height:24px; display:block; }
/* Емблема колонії в тексті (тултіп планети, шапка порту) */
.colony-emblem.colony-emblem-inline { display:inline-block; width:1.1em; height:1.1em; margin-right:.35em; vertical-align:-.18em; color:#efbc68; }
.surface-charter-gov-info { color:#c7d2d5; font-size:12px; }
.surface-workshop-slot { color:#6cf0a0; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.surface-workshop-btn { min-height:32px; padding:4px 10px; font-size:12px; }
/* Казарма: квадратна плитка юніта (кадр 1 атласу lightDrone.webp, вирізаний квадрат 104px навколо
   дрона з x=73,y=43 кадру) і заливка прогресу тренування знизу вгору */
.surface-barracks-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; }
.surface-ui .surface-unit-tile { --t:64px; min-height:0; box-shadow:none; --p:0; position:relative; width:var(--t); height:var(--t); padding:0; overflow:hidden; border:1px solid #5d7a86; border-radius:6px; background:radial-gradient(circle at 50% 45%, #22323b, #10181d 75%); cursor:pointer; }
/* Кадр 1 атласу юніта: квадрат --cs px з лівим верхнім кутом (--cx, --cy) в атласі 2048×256 */
.surface-unit-tile { --cx:329; --cy:43; --cs:104; --art:url('assets/surface/units/lightDrone.webp'); }
.surface-unit-tile[data-unit="tank"] { --cx:294; --cy:20; --cs:176; --art:url('assets/surface/units/tank.webp'); }
.surface-unit-tile[data-unit="rocketLauncher"] { --cx:292; --cy:13; --cs:180; --art:url('assets/surface/units/rocketLauncher.webp'); }
.surface-unit-tile[data-unit="builderRobot"] { --cx:326; --cy:31; --cs:112; --art:url('assets/surface/units/builderRobot.webp'); }
.surface-unit-tile-art { position:absolute; inset:0; background:var(--art) no-repeat; background-size:calc(var(--t) * 2048 / var(--cs)) calc(var(--t) * 256 / var(--cs)); background-position:calc(var(--t) * var(--cx) / var(--cs) * -1) calc(var(--t) * var(--cy) / var(--cs) * -1); pointer-events:none; }
.surface-barracks-row + .surface-barracks-row { margin-top:8px; }
.surface-unit-tile-fill { position:absolute; inset:0; background:linear-gradient(to top, #efbc68aa, #efbc6833); border-top:2px solid var(--sf-amber); transform-origin:bottom; transform:scaleY(var(--p)); opacity:0; pointer-events:none; }
.surface-unit-tile-text { position:absolute; inset:0; display:grid; place-items:center; color:#fff6e0; font:700 14px/1 monospace; text-shadow:0 0 4px #000, 0 0 2px #000; pointer-events:none; }
.surface-ui .surface-unit-tile[data-state="ready"]:hover, .surface-ui .surface-unit-tile[data-state="ready"]:focus-visible { background:radial-gradient(circle at 50% 45%, #2c3e48, #121c22 75%); border-color:var(--sf-amber); box-shadow:0 0 0 1px var(--sf-amber), 0 0 10px #efbc6855; }
.surface-ui .surface-unit-tile:disabled { opacity:1; }
.surface-ui .surface-unit-tile[data-state="blocked"] { cursor:not-allowed; }
.surface-unit-tile[data-state="blocked"] .surface-unit-tile-art { filter:grayscale(1); opacity:.45; }
.surface-ui .surface-unit-tile[data-state="training"] { cursor:progress; border-color:var(--sf-amber); }
.surface-unit-tile[data-state="training"] .surface-unit-tile-art { opacity:.6; }
.surface-unit-tile[data-state="training"] .surface-unit-tile-fill { opacity:1; transition:transform 1s linear; }
.surface-barracks-name { color:var(--sf-amber); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.surface-barracks-cost { color:#b9c8ef; font:11px/1.35 monospace; }
.surface-barracks-note { color:#a8b8bf; font-size:11px; }
/* Бейдж ×N на плитці — скільки юнітів цього типу в черзі */
.surface-unit-tile-badge { position:absolute; right:3px; bottom:2px; color:#fff6e0; font:700 11px/1 monospace; text-shadow:0 0 3px #000, 0 0 2px #000; pointer-events:none; }
/* Смуга черги: UNIT_QUEUE_MAX малих слотів, перший — поточне замовлення з заливкою прогресу */
.surface-barracks-line { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:8px; border-top:1px solid #5d7a8655; }
.surface-ui .surface-barracks-slot { --t:40px; }
.surface-ui .surface-barracks-slot[data-state="empty"] { cursor:default; border-style:dashed; border-color:#5d7a8677; background:#10181d; }
.surface-barracks-slot[data-state="empty"] .surface-unit-tile-art { display:none; }
.surface-ui .surface-barracks-slot[data-state="training"] { border-color:var(--sf-amber); }
.surface-barracks-slot[data-state="training"] .surface-unit-tile-fill { opacity:1; transition:transform 1s linear; }
.surface-barracks-slot[data-state="queued"] .surface-unit-tile-art { opacity:.7; }
.surface-ui .surface-barracks-slot:not([data-state="empty"]):hover, .surface-ui .surface-barracks-slot:not([data-state="empty"]):focus-visible { border-color:#ff8a6a; }
.surface-ui .surface-barracks-slot.armed { border-color:#ff6a4a; box-shadow:0 0 0 1px #ff6a4a; }
.surface-barracks-slot.armed .surface-unit-tile-art { opacity:.35; }
.surface-barracks-slot .surface-unit-tile-text { font-size:16px; color:#ffb09a; }
@media (prefers-reduced-motion: reduce) { .surface-unit-tile[data-state="training"] .surface-unit-tile-fill, .surface-barracks-slot[data-state="training"] .surface-unit-tile-fill { transition:none; } }
/* Бейджі іконок у рядках мають z-index:1 — липкі шапки картки й майстерні мусять бути вище */
.surface-info-body > .surface-info-head { z-index:3; }
/* Майстерня: липка шапка (картка роботи + вкладки) стає під липку шапку картки (--sf-ws-top з ResizeObserver) */
.surface-workshop-sticky { position:sticky; top:var(--sf-ws-top, 0px); z-index:2; display:grid; gap:6px; padding:0 0 6px; background:#16222a; }
.surface-workshop-job { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:center; padding:6px 8px; border:1px solid #efbc6855; border-radius:4px; background:#2a271f; --item-icon-size:32px; }
.surface-workshop-job[data-state="ready"] { border-color:#6cf0a055; background:#1c2a24; }
.surface-workshop-job-title { color:var(--sf-amber); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.surface-workshop-job[data-state="ready"] .surface-workshop-job-title { color:#9fe0b8; }
.surface-workshop-job-time { color:#c7d2d5; font-size:11px; }
.surface-workshop-meter { height:6px; margin:3px 0; }
.surface-workshop-tab-count { margin-left:6px; min-width:20px; padding:0 5px; font:11px/16px monospace; letter-spacing:0; color:#e4e1d6; background:#0e1214; border:1px solid #5d625b; border-radius:8px; }
/* Рядки: мітка встановленого, характеристики, попередження, примітка */
.surface-workshop-installed { color:var(--sf-amber); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.surface-workshop-stats { color:#b9c8ef; font:11px/1.35 monospace; }
.surface-workshop-warn { color:#ff6b5a; font-size:10px; letter-spacing:.04em; }
.surface-workshop-note { color:#a8b8bf; font-size:11px; }
.surface-workshop-item.locked > :not(.surface-workshop-btn) { opacity:.55; }
.surface-workshop-item.locked .cost-chip.lock { opacity:1; }
/* Ціна чипами: бракує — червоний, потрібен рівень — бурштин */
.surface-cost { display:flex; flex-wrap:wrap; gap:3px; margin-top:2px; }
.cost-chip { white-space:nowrap; padding:0 5px; border:1px solid #ffffff1f; border-radius:3px; background:#0000003a; color:#c7d2d5; font:11px/16px monospace; }
.cost-chip.short { color:#ff6b5a; border-color:#ff6b5a; }
.cost-chip.lock { color:var(--sf-amber); border-color:var(--sf-amber); }
/* Низькі екрани: рядок «Power … grid OK» майстерні ховаємо, попередження про брак енергії лишається */
@media (max-height:420px) { .surface-info[data-type="workshop"] .surface-power-ok { display:none; } }
/* Телефони й низькі екрани: картка роботи в один рядок (назва · час · тонкий прогрес), рядки щільніші */
@media (max-width:520px), (max-height:500px) {
  .surface-workshop-job { padding:3px 6px; gap:6px; --item-icon-size:22px; }
  .surface-workshop-job-text { display:flex; align-items:center; gap:8px; min-width:0; }
  .surface-workshop-job-title { flex:1 1 auto; min-width:0; font-size:11px; }
  .surface-workshop-job-time { flex:0 0 auto; white-space:nowrap; }
  .surface-workshop-job-busy { display:none; }
  .surface-workshop-meter { flex:0 0 56px; margin:0; height:5px; }
  .surface-workshop-sticky { gap:4px; padding-bottom:4px; }
  .surface-workshop-item { padding:4px 6px; --item-icon-size:26px; }
}
/* Заголовок категорії столу CRAFT */
.surface-craft-group { margin:4px 0 0; color:#a8b8bf; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid #3c4a53; padding-bottom:2px; }
/* Вкладки майстерні UPGRADE / CRAFT — кольори вкладок консолі */
.surface-workshop-tabs { display:flex; gap:4px; }
.surface-ui .surface-workshop-tab { flex:1 1 0; min-width:0; min-height:36px; padding:4px 6px; font-size:11px; font-weight:700; letter-spacing:.08em; color:#a8b8bf; background:#17232c; border:1px solid #3c4a53; border-radius:4px; }
.surface-ui .surface-workshop-tab[aria-selected="true"] { color:#ffe2ad; background:linear-gradient(#55482f,#302b23); border-color:var(--sf-amber); box-shadow:inset 0 -2px var(--sf-amber); }
@media (pointer: coarse) { .surface-ui .surface-workshop-tab { min-height:44px; } }
/* Orbital Shipyard: картки проєктів без іконки (текст + Build), опис — звичайним текстом */
.surface-shipyard .surface-workshop-item { grid-template-columns:minmax(0,1fr) auto; }
.surface-shipyard .surface-workshop-slot { color:#b9c8ef; text-transform:none; letter-spacing:0; font-size:11px; }
.surface-shipyard-cancel { justify-self:start; }
.surface-shipyard-cancel.armed, .surface-fab-cancel.armed { border-color:#ff8a6a; color:#ffb19c; }
.surface-trader-tier { min-height:36px; min-width:0; background:#151a1c; color:#e4ecff; border:1px solid #4c5a5f; border-radius:4px; font:inherit; font-size:12px; }
.surface-ui .surface-trader-hire-btn:not(:disabled) { border-color:#6fae7a; background:linear-gradient(#35503a,#26372a); color:#d6f5da; }
.surface-trader-log li { color:#8c999d; font-size:11px; padding:2px 0; }


/* Планшети/вузькі: склад під панеллю будівлі */
@media (max-width:760px) {
  .surface-storage { left:12px; right:12px; width:auto; top:76px; bottom:auto; max-height:calc(100dvh - 76px - var(--sf-console-h) - 12px); overflow:auto; }
}
/* Телефони: компактні смуги */
@media (max-width:520px), (max-height:500px) {
  .surface-ui { font-size:13px; }
  .surface-top { top:8px; left:8px; right:8px; gap:6px; }
  .surface-title { padding:4px 8px; }
  .surface-biome { display:none; }
  .surface-credits { padding:8px; }
  .surface-power { padding:8px 5px; font-size:11px; }
  .surface-power-unit { display:none; }
  .surface-view { min-width:40px; padding-left:6px; padding-right:6px; }
  .surface-bottom { left:8px; right:8px; bottom:8px; gap:6px; }
  .surface-storage { right:8px; left:8px; width:auto; top:64px; bottom:auto; max-height:calc(100dvh - 64px - var(--sf-console-h) - 8px); overflow:auto; }
  .surface-info-portrait { width:48px; height:48px; flex-basis:48px; }
}
/* Планшети: вужча колонка дій */
@media (max-width:760px) {
  .surface-info { grid-template-columns:minmax(0,1fr) 160px; }
}
/* Телефони: одна колонка — шапка, статус, показники, дії сіткою 2×N; скролиться вся картка */
@media (max-width:520px) {
  .surface-info { --sf-card-h:none; grid-template-columns:minmax(0,1fr); max-height:min(44dvh,calc(100dvh - 64px - 96px)); overflow:auto; overscroll-behavior:contain; }
  .surface-info-body { overflow:visible; padding-right:0; }
  .surface-info .surface-info-services { grid-template-columns:minmax(0,1fr); }
  .surface-info .surface-info-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:visible; }
  .surface-info .surface-info-actions button { min-width:0; overflow-wrap:anywhere; }
  .surface-info .surface-info-actions .surface-upgrade { grid-column:span 2; }
  .build-console.show-map .build-building { display:none; }
  /* Скролиться вся картка — шапка з назвою і ✕ лишається видимою */
}
/* Малі екрани: поки відкритий склад, консоль згортається до вкладок (і мапи) — сіткам складу потрібна висота */
@media (max-width:760px), (max-height:500px) {
  .surface-ui.depot-open .build-console .build-building, .surface-ui.depot-open .build-console .build-shelf { display:none; }
}
/* Низький ландшафт: вкладки колонкою, картка поряд; дії — вузька колонка */
@media (max-height:500px) {
  .build-console.show-building { width:min(100%, calc(var(--sf-map) + 680px)); }
  /* З карткою вкладки — тонкий рядок над нею (а не високі кнопки збоку), картка на всю ширину */
  .build-console.show-building .build-main { grid-template-columns:minmax(0,1fr); gap:4px; }
  .build-console.show-building .build-tabs { flex-direction:row; }
  .surface-ui .build-console.show-building .build-tab { width:auto; flex:1 1 0; min-height:32px; padding:2px 4px; }
  .build-console.show-building .build-tab-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .surface-info { --sf-card-h:min(58dvh,calc(100dvh - 64px - 64px)); grid-template-columns:minmax(0,1fr) 160px; gap:8px; }
  .surface-info .surface-info-services { grid-template-columns:1fr; }
  .surface-info-portrait { width:40px; height:40px; flex-basis:40px; padding:3px; }
  .surface-info-head { margin-bottom:4px; }
  .surface-info-close { min-height:36px !important; }
}
/* Вузькі телефони: вкладки — рядок чипів над плитками */
@media (max-width:520px) {
  .surface-ui { --sf-console-h:170px; --sf-tile:88px; }
  .build-console { grid-template-columns:1fr; gap:6px; padding:6px; width:100%; max-width:100%; }
  /* Мапа — на місці полиці за вкладкою MAP, тієї ж висоти: консоль не стрибає */
  .build-map { display:none; order:2; justify-self:center; width:calc(var(--sf-tile) + 4px); height:calc(var(--sf-tile) + 4px); }
  .surface-ui .build-tab.build-tab-map { display:flex; }
  .build-console.show-map .build-map { display:block; }
  .build-console.show-map .build-shelf { display:none; }
  .build-tabs { flex-direction:row; }
  /* Рівні вкладки на всю ширину; лічильник ховається, назва обрізається — 4+ полиці вміщаються в 320px */
  .surface-ui .build-tab { flex:1 1 0; min-width:0; width:auto; min-height:44px; flex-direction:row; justify-content:center; padding:4px 4px; font-size:10px; letter-spacing:.04em; }
  .surface-info-services { font-size:12px; }
  .surface-info-services li { padding:4px 0; }
  .surface-info-status { margin-bottom:6px; }
  .surface-top { gap:4px; }
  .surface-exit { padding:6px 8px !important; }
  .surface-name { font-size:11px; letter-spacing:.04em; }
  .surface-credits { font-size:12px; padding:8px 6px; }
  .build-tab-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .build-tab-count { display:none; }
  .build-card { grid-template-columns:64px 1fr; }
  .build-card-img { width:64px; height:64px; }
}
/* Низькі екрани (ландшафт телефона): вузька колонка вкладок, плитки 60px */
@media (max-height:500px) {
  .surface-ui { --sf-console-h:100px; --sf-tile:76px; }
  .surface-ui { --sf-map:80px; }
  .build-console { grid-template-columns:var(--sf-map) auto; width:auto; gap:6px; padding:6px; min-width:min(360px,100%); }
  .build-main { grid-template-columns:auto 1fr; gap:6px; }
  .surface-ui .build-tab { width:76px; gap:2px; padding:2px 4px; font-size:10px; letter-spacing:.06em; }
  .build-tab-count { display:none; }
  .build-card { grid-template-columns:64px 1fr; }
  .build-card-img { width:64px; height:64px; }
  .build-card-levels { display:none; }
}
/* Вузькі телефони: сітки складу одна під одною */
@media (max-width:520px) {
  .depot-columns { grid-template-columns:1fr; }
}
/* Низькі екрани (ландшафт телефона): по 6 клітинок у ряд, компактні деталі */
@media (max-height:500px) {
  .depot-grid { grid-template-columns:repeat(6,42px); gap:4px; }
  .depot-cell { min-height:42px; }
  .depot-detail { grid-template-columns:40px 1fr auto; padding:6px 12px 8px; }
  .depot-detail-icon { width:40px; height:40px; --item-icon-size:34px; }
  .depot-detail-text small { display:none; }
  .depot-detail-controls { grid-column:auto; flex-wrap:nowrap; }
  .depot-move { min-width:110px; }
}

/* ---- Заставка посадки (SurfaceLoading.js): «жива картина» в дусі екранів завантаження «Відьмака 3».
   Шари рухаються з різною швидкістю (паралакс), лише transform/opacity — без перерахунку розкладки. */
.surface-loading { --sfl-ground:#76736e; --sfl-liquid:#464340; --sfl-ink:#efe6d2; --sfl-gold:#e2b56a;
  position:fixed; inset:0; z-index:80; overflow:hidden; background:#05070f; color:var(--sfl-ink); }
.surface-loading.leaving { animation:sfl-out .25s ease-in forwards; pointer-events:none; }
@keyframes sfl-in { from { opacity:0; } }
@keyframes sfl-out { to { opacity:0; } }
.sfl-scene { position:absolute; inset:0; overflow:hidden; animation:sfl-in .5s ease-out both; }  /* з чорного, не з рівня */
.sfl-layer { position:absolute; inset:0; pointer-events:none; }

/* 0 — зорі: крапки на плитці, найповільніший дрейф і мерехтіння */
.sfl-stars { inset:-10%; opacity:.85;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 42%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 58% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 34%, #ffe9c8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 26%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 6%, #dfe8ff 50%, transparent 51%);
  background-size:340px 260px; animation:sfl-stars 60s linear infinite, sfl-twinkle 4s ease-in-out infinite alternate; }
@keyframes sfl-stars { to { transform:translate3d(-340px, 0, 0); } }
@keyframes sfl-twinkle { from { opacity:.6; } to { opacity:.95; } }

/* 1 — фото планети (бібліотека сцен порту). Висота 150 % ховає чорні letterbox-смуги фото; Ken Burns.
   До декодування — градієнт ґрунту біому */
.sfl-planet { inset:-25% 0; background:radial-gradient(120% 70% at 50% 110%, var(--sfl-ground), transparent 70%) center/cover no-repeat;
  opacity:.55; transform-origin:58% 60%; animation:sfl-kenburns 16s ease-in-out infinite alternate; transition:opacity 1.2s ease; }
.sfl-planet.loaded { opacity:1; }
@keyframes sfl-kenburns { from { transform:scale(1.04) translate3d(1.5%, 0, 0); } to { transform:scale(1.14) translate3d(-2%, -1%, 0); } }

/* 2 — сяйво атмосфери: тон біому, дрейф проти фото і пульс */
.sfl-glow { background:radial-gradient(90% 55% at 40% 105%, var(--sfl-ground) 0%, transparent 65%),
  radial-gradient(60% 40% at 80% 90%, var(--sfl-liquid), transparent 70%);
  mix-blend-mode:screen; opacity:.35; animation:sfl-glow 9s ease-in-out infinite alternate; }
@keyframes sfl-glow { from { opacity:.22; transform:translate3d(2%, 0, 0); } to { opacity:.45; transform:translate3d(-3%, -1%, 0); } }

/* 3 — корабель гравця (preview обраного корпусу, ніс угору): спускається до поверхні */
.sfl-ship { position:absolute; left:14%; top:12%; width:clamp(110px, 24vmin, 280px); aspect-ratio:1; opacity:0;
  animation:sfl-descend 14s ease-in-out infinite alternate; transition:opacity .8s ease; }
.sfl-ship.loaded { opacity:1; }
.sfl-ship-body { position:absolute; inset:0; transform:rotate(132deg); animation:sfl-bob 3.4s ease-in-out infinite alternate; }
.sfl-ship-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px #000a); }
/* Полум'я двигунів за кормою (до повороту ніс угору, корма внизу) */
.sfl-flame { position:absolute; left:30%; right:30%; top:72%; height:44%;
  background:radial-gradient(50% 45% at 50% 18%, #fff 0%, #9fe3ff 22%, #3d8dff88 48%, transparent 72%);
  transform-origin:50% 0; animation:sfl-flame .18s ease-in-out infinite alternate; mix-blend-mode:screen; }
@keyframes sfl-descend { from { transform:translate3d(0, 0, 0) scale(1); } to { transform:translate3d(9vw, 10vh, 0) scale(.8); } }
@keyframes sfl-bob { from { transform:rotate(130deg) translate3d(0, 0, 0); } to { transform:rotate(135deg) translate3d(0, -4px, 0); } }
@keyframes sfl-flame { from { transform:scaleY(.82); opacity:.75; } to { transform:scaleY(1.08); opacity:1; } }

/* 4 — хмари переднього плану: найшвидший паралакс */
.sfl-clouds { overflow:hidden; }
.sfl-cloud { position:absolute; left:-70%; width:70%; height:28%; border-radius:50%;
  background:radial-gradient(closest-side, #ffffff2e, #ffffff12 55%, transparent); animation:sfl-cloud 11s linear infinite; }
.sfl-cloud-1 { top:58%; animation-duration:13s; }
.sfl-cloud-2 { top:72%; height:34%; animation-duration:9s; animation-delay:-4s; opacity:.8; }
.sfl-cloud-3 { top:40%; height:18%; animation-duration:17s; animation-delay:-11s; opacity:.55; }
@keyframes sfl-cloud { to { transform:translate3d(260%, -6%, 0); } }

/* 5 — віньєтка й кінематографічні смуги, темніше внизу під текст */
.sfl-vignette { background:
  linear-gradient(#000 0, #000 5vh, transparent 5vh, transparent calc(100% - 5vh), #000 calc(100% - 5vh)),
  linear-gradient(transparent 50%, #000000c8 88%),
  radial-gradient(120% 90% at 50% 45%, transparent 55%, #000000a8 100%); }

.sfl-cancel { position:absolute; z-index:2; top:calc(5vh + 12px); left:16px; min-height:44px; padding:6px 14px; border-radius:4px;
  border:1px solid #ffffff33; background:#00000099; color:var(--sfl-ink); font:700 13px/1 sans-serif; letter-spacing:.08em; cursor:pointer; }
.sfl-cancel:hover { border-color:var(--sfl-gold); }
.sfl-cancel:focus-visible { outline:2px solid var(--sfl-gold); outline-offset:2px; }

/* Оповідь знизу ліворуч */
.sfl-story { position:absolute; z-index:1; left:clamp(16px, 6vw, 96px); bottom:calc(5vh + 64px); max-width:min(620px, calc(100% - 32px));
  text-shadow:0 2px 8px #000; animation:sfl-rise .9s ease-out both; }
@keyframes sfl-rise { from { opacity:0; transform:translate3d(0, 12px, 0); } }
.sfl-kicker { margin:0 0 4px; color:var(--sfl-gold); font:700 12px/1.3 sans-serif; letter-spacing:.28em; text-transform:uppercase; }
.sfl-title { margin:0 0 8px; font:400 clamp(30px, 6vmin, 56px)/1.05 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing:.04em; overflow-wrap:anywhere; }
.sfl-colony { display:flex; align-items:center; gap:8px; margin:0 0 6px; color:var(--sfl-gold); font:600 15px/1.3 Georgia, serif; }
.sfl-emblem { width:22px; height:22px; flex:none; }
.sfl-line { margin:0 0 3px; color:#ddd3bf; font:italic 16px/1.4 Georgia, serif; }

.sfl-tip { position:absolute; z-index:1; right:clamp(16px, 5vw, 80px); bottom:calc(5vh + 64px); max-width:min(340px, 34vw); margin:0;
  padding-left:12px; border-left:2px solid var(--sfl-gold); color:#cbc2ae; font:14px/1.45 Georgia, serif; text-shadow:0 2px 6px #000;
  transition:opacity .3s ease; }
.sfl-tip.swap { opacity:0; }

/* Прогрес: тонка золота лінія над нижньою смугою */
.sfl-foot { position:absolute; z-index:1; left:clamp(16px, 6vw, 96px); right:clamp(16px, 5vw, 80px); bottom:calc(5vh + 18px);
  display:flex; align-items:center; gap:14px; }
.sfl-step { flex:none; min-width:140px; color:#bfb6a2; font:12px/1 sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.sfl-bar { position:relative; flex:1; height:2px; background:#ffffff1f; overflow:hidden; }
.sfl-fill { position:absolute; inset:0; background:linear-gradient(90deg, #8a6a33, var(--sfl-gold), #fff2cf); transform-origin:0 50%;
  transform:scaleX(0); transition:transform .5s ease; }

/* Телефони і низький ландшафт: порада ховається, текст стискається */
@media (max-width:900px) { .sfl-tip { display:none; } }
@media (max-width:640px) {
  .sfl-line { font-size:14px; }
  .sfl-step { min-width:0; letter-spacing:.1em; }
}
@media (max-height:420px) {
  .sfl-tip { display:none; }
  .sfl-story { bottom:calc(5vh + 42px); }
  .sfl-title { font-size:28px; margin-bottom:4px; }
  .sfl-line { font-size:13px; }
  .sfl-ship { top:16%; width:clamp(80px, 24vmin, 140px); }
}
@media (prefers-reduced-motion: reduce) {
  .surface-loading, .surface-loading *, .surface-loading.leaving { animation:none !important; transition:none !important; }
}
/* Electronics Fab: рядок замовлення (кількість · Max · Produce) */
.surface-fab-row { display:grid; grid-template-columns:72px auto minmax(0,1fr); gap:6px; align-items:center; }
.surface-fab-qty { min-height:32px; padding:4px 6px; font:inherit; font-size:13px; color:#e4ecff; background:#0000004d; border:1px solid #ffffff2e; border-radius:4px; }

/* Індикатор видобутку Mine / Hydroponics (SurfaceUI._updateProd): іконка товару з анімацією · підпис · прогрес до наступної одиниці.
   Анімуються лише transform/opacity; прогрес — scaleX заливки */
.surface-prod { --prod-c:#c08a4a; --prod-glow:#ffcf8a; display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; margin:0 0 10px; padding:6px 8px; border:1px solid #ffffff14; border-radius:4px; background:#0000002e; }
.surface-prod[data-good="food"] { --prod-c:#6fbf5a; --prod-glow:#bff0a0; }
.surface-prod-icon { position:relative; width:44px; height:44px; display:grid; place-items:center; --item-icon-size:38px; background:radial-gradient(circle at 50% 60%,#ffffff12,transparent 70%); border-radius:4px; }
.surface-prod-icon .item-icon { width:var(--item-icon-size); height:var(--item-icon-size); transform-origin:50% 85%; }
.surface-prod-main { min-width:0; display:grid; gap:5px; }
.surface-prod-label { color:#c7d2d5; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.surface-prod-bar { height:8px; border-radius:4px; background:#ffffff14; overflow:hidden; }
.surface-prod-fill { height:100%; background:linear-gradient(90deg,var(--prod-c),var(--prod-glow)); transform-origin:0 50%; transform:scaleX(0); transition:transform .25s linear; will-change:transform; }
/* Крихти руди / краплі-листочки — злітають від іконки */
.surface-prod-crumb { position:absolute; left:50%; top:62%; width:5px; height:5px; margin-left:-2.5px; border-radius:1px; background:var(--prod-c); opacity:0; pointer-events:none; }
.surface-prod[data-good="food"] .surface-prod-crumb { border-radius:50% 0 50% 0; background:var(--prod-glow); }
.surface-prod[data-state="working"] .item-icon { animation:surface-dig .9s ease-in-out infinite; }
.surface-prod[data-state="lowpower"] .item-icon { animation:surface-dig 1.8s ease-in-out infinite; }
.surface-prod[data-good="food"][data-state="working"] .item-icon { animation:surface-grow 1.6s ease-in-out infinite; }
.surface-prod[data-good="food"][data-state="lowpower"] .item-icon { animation:surface-grow 3.2s ease-in-out infinite; }
.surface-prod:is([data-state="working"],[data-state="lowpower"]) .surface-prod-crumb { animation:surface-crumb .9s ease-out infinite; }
.surface-prod[data-state="lowpower"] .surface-prod-crumb { animation-duration:1.8s; }
.surface-prod[data-good="food"]:is([data-state="working"],[data-state="lowpower"]) .surface-prod-crumb { animation-name:surface-sprout; animation-duration:1.6s; }
.surface-prod[data-good="food"][data-state="lowpower"] .surface-prod-crumb { animation-duration:3.2s; }
/* Паливо (Fuel Extractor): іконка «качає» вгору-вниз як станок-качалка, краплі пального злітають; бурштин */
.surface-prod[data-good="fuelCell"] { --prod-c:#e0902a; --prod-glow:#ffd36a; }
.surface-prod[data-good="fuelCell"] .surface-prod-crumb { width:4px; height:6px; margin-left:-2px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:var(--prod-glow); }
.surface-prod[data-good="fuelCell"][data-state="working"] .item-icon { animation:surface-pump 1.2s ease-in-out infinite; }
.surface-prod[data-good="fuelCell"][data-state="lowpower"] .item-icon { animation:surface-pump 2.4s ease-in-out infinite; }
.surface-prod[data-good="fuelCell"]:is([data-state="working"],[data-state="lowpower"]) .surface-prod-crumb { animation-name:surface-drip; animation-duration:1.2s; }
.surface-prod[data-good="fuelCell"][data-state="lowpower"] .surface-prod-crumb { animation-duration:2.4s; }
/* Дані (Research Lab): гліф-кристал «сканує» (пульс яскравості), біти даних-квадратики летять вгору; бірюза */
.surface-prod[data-good="researchXP"] { --prod-c:#3fb8c8; --prod-glow:#a8f0ff; }
.surface-prod[data-good="researchXP"] .item-icon-fallback { font-size:30px; line-height:1; color:var(--prod-glow); text-shadow:0 0 8px var(--prod-c); }
.surface-prod[data-good="researchXP"] .surface-prod-crumb { width:4px; height:4px; margin-left:-2px; border-radius:0; background:var(--prod-glow); }
.surface-prod[data-good="researchXP"][data-state="working"] .item-icon { animation:surface-scan 1.4s ease-in-out infinite; }
.surface-prod[data-good="researchXP"][data-state="lowpower"] .item-icon { animation:surface-scan 2.8s ease-in-out infinite; }
.surface-prod[data-good="researchXP"]:is([data-state="working"],[data-state="lowpower"]) .surface-prod-crumb { animation-name:surface-bits; animation-duration:1.4s; }
.surface-prod[data-good="researchXP"][data-state="lowpower"] .surface-prod-crumb { animation-duration:2.8s; }
.surface-prod-crumb.c1 { --dx:-12px; animation-delay:.3s !important; }
.surface-prod-crumb.c2 { --dx:10px; animation-delay:.6s !important; }
.surface-prod-crumb.c0 { --dx:2px; }
.surface-prod[data-state="lowpower"] .surface-prod-fill { background:linear-gradient(90deg,#8a7a5a,#b9a679); }
/* Склад повний — видобуток стоїть */
.surface-prod[data-state="full"] .item-icon { opacity:.55; }
.surface-prod[data-state="full"] .surface-prod-fill { background:#6b7478; }
.surface-prod[data-state="full"] .surface-prod-label { color:#efbc68; }
/* Щойно добута одиниця: короткий спалах іконки */
.surface-prod.dug .surface-prod-icon { animation:surface-dug .45s ease-out; }
@keyframes surface-dig { 0%,100% { transform:rotate(0) translateY(0); } 35% { transform:rotate(-6deg) translateY(-2px); } 55% { transform:rotate(6deg) translateY(1px); } }
@keyframes surface-grow { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@keyframes surface-crumb { 0% { opacity:0; transform:translate(0,0) scale(1); } 15% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),-18px) scale(.5) rotate(90deg); } }
@keyframes surface-sprout { 0% { opacity:0; transform:translate(0,4px) scale(.4); } 25% { opacity:.9; } 100% { opacity:0; transform:translate(calc(var(--dx) * .6),-22px) scale(1); } }
@keyframes surface-pump { 0%,100% { transform:translateY(0) scaleY(1); } 40% { transform:translateY(3px) scaleY(.94); } 70% { transform:translateY(-2px) scaleY(1.03); } }
@keyframes surface-drip { 0% { opacity:0; transform:translate(0,2px) scale(.6); } 20% { opacity:1; } 100% { opacity:0; transform:translate(calc(var(--dx) * .5),-20px) scale(1); } }
@keyframes surface-scan { 0%,100% { transform:rotate(0) scale(1); opacity:.8; } 50% { transform:rotate(30deg) scale(1.08); opacity:1; } }
@keyframes surface-bits { 0% { opacity:0; transform:translate(0,0); } 20% { opacity:1; } 60% { opacity:.3; } 70% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),-20px); } }
@keyframes surface-dug { 0% { transform:scale(1.18); filter:brightness(1.6); } 100% { transform:scale(1); filter:none; } }
@media (max-width:520px), (max-height:500px) {
  .surface-prod { grid-template-columns:34px minmax(0,1fr); gap:8px; padding:4px 6px; margin-bottom:6px; }
  .surface-prod-icon { width:34px; height:34px; --item-icon-size:30px; }
}
@media (prefers-reduced-motion: reduce) {
  .surface-prod .item-icon, .surface-prod-crumb, .surface-prod.dug .surface-prod-icon { animation:none !important; }
  .surface-prod-fill { transition:none; }
}

/* Панель вибраного наземного юніта (SurfaceUnits.js, Barracks.js): Move/Attack/Fire/Patrol/Hold
   "за аналогією зі SC2" — живе в .build-building поряд з .surface-info (build-console.show-unit),
   взаємно виключна з панеллю будівлі через свій/її .hidden-тогл. Звичайний потік, без fixed. */
.surface-unit-info { width:min(320px, 100%); background:var(--sf-panel); border:1px solid var(--sf-line); border-left:3px solid #6f9dff; border-radius:3px; padding:8px 10px; box-shadow:0 6px 24px #0008; }
.surface-unit-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.surface-unit-title { font:700 12px/1.2 sans-serif; letter-spacing:.08em; color:#6f9dff; }
.surface-unit-close { min-height:28px; min-width:28px; padding:0; line-height:1; }
.surface-unit-hp { width:100%; height:6px; margin-bottom:6px; }
.surface-unit-status { font-size:12px; opacity:.85; margin-bottom:8px; }
/* Накази — квадратні плитки з векторною іконкою (UNIT_COMMAND_ICONS у SurfaceUI.js) і підписом під нею */
.surface-unit-actions { display:grid; grid-template-columns:repeat(6, minmax(0, 52px)); gap:6px; justify-content:start; }
.surface-ui .surface-unit-btn { width:100%; height:auto; aspect-ratio:1; min-width:0; min-height:0; padding:4px 0 3px; display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  border-radius:6px; border-color:#3f5868; background:radial-gradient(circle at 50% 40%, #22323b, #10181d 80%); color:#9fbbe0; }
.surface-unit-btn svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.surface-unit-btn svg .uc-fill { fill:currentColor; fill-opacity:.35; }
.surface-unit-btn svg .uc-dim { opacity:.45; }
.surface-unit-btn svg .uc-thick { stroke-width:3.2; }
.surface-unit-btn-label { font:700 9px/1 sans-serif; letter-spacing:.06em; text-transform:uppercase; pointer-events:none; }
.surface-ui .surface-unit-btn:hover:not(:disabled) { color:var(--sf-amber); background:radial-gradient(circle at 50% 40%, #2c3e48, #121c22 80%); }
.surface-ui .surface-unit-btn.active { border-color:#6f9dff; color:#d4e2ff; background:radial-gradient(circle at 50% 40%, #2d4a6e, #172434 80%); box-shadow:0 0 0 1px #6f9dff, 0 0 10px #6f9dff55; }
.surface-ui .surface-unit-btn:disabled svg { opacity:.5; }

/* Ціль Station Zero (ZeroGuide.js): картка під шапкою + позначка плитки в BUILD.
   Лише CSS-анімації transform/opacity; reduced motion — статичні. */
.surface-quest { position:fixed; z-index:60; top:calc(12px + var(--sf-top-h, 52px) + 10px); left:12px; width:min(340px, calc(100vw - 24px)); display:grid; grid-template-columns:48px minmax(0,1fr); gap:10px; align-items:center;
  background:var(--sf-panel); border:1px solid #6b5c2c; border-left:3px solid #ffcc00; border-radius:3px; padding:8px 10px; pointer-events:none; box-shadow:0 6px 24px #0008; }
.surface-quest-icon { width:48px; height:48px; }
.surface-quest-icon svg { width:100%; height:100%; overflow:visible; fill:none; stroke:#ffcc00; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.surface-quest-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.surface-quest-title { color:#ffcc00; font:700 11px/1.2 sans-serif; letter-spacing:.1em; }
.surface-quest-text { font-size:13px; line-height:1.3; }
.surface-quest-bar { height:5px; background:#00000066; border:1px solid #6b5c2c; border-radius:3px; overflow:hidden; }
.surface-quest-fill { height:100%; width:0; background:linear-gradient(90deg,#d9a300,#ffe27a); transition:width .4s ease-out; }
.surface-quest-warn { color:var(--sf-amber); font-size:12px; }
.surface-ui.depot-open .surface-quest { display:none; }
/* Іконки кроків */
.surface-quest .zq-ground { stroke:#a2b5bd; }
.surface-quest .zq-dust { fill:#c8b47a; stroke:none; animation:zq-dust 1.4s ease-out infinite; }
.surface-quest .zq-d2 { animation-delay:.45s; } .surface-quest .zq-d3 { animation-delay:.9s; }
.surface-quest .zq-drill { animation:zq-drill 1.4s ease-in-out infinite; }
.surface-quest .zq-scan { stroke:#6cf0a0; animation:zq-scan 1.8s ease-in-out infinite; }
.surface-quest .zq-bolt { fill:#efbc6833; stroke:var(--sf-amber); animation:zq-flicker 1.1s steps(1,end) infinite; }
.surface-quest .zq-track { stroke:#ffcc0033; }
.surface-quest .zq-ring { stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:24px 24px; transition:stroke-dashoffset .4s ease-out; }
.surface-quest .zq-dial { transform-origin:24px 24px; animation:zq-spin 4s linear infinite; stroke:#ffe27a; }
@keyframes zq-drill { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }
@keyframes zq-dust { 0% { opacity:0; transform:translate(0,0); } 30% { opacity:1; } 100% { opacity:0; transform:translate(0,-8px); } }
@keyframes zq-scan { 0%,100% { transform:translateY(0); opacity:.2; } 50% { transform:translateY(16px); opacity:1; } }
@keyframes zq-flicker { 0%,60%,100% { opacity:1; } 65% { opacity:.25; } 75% { opacity:1; } 80% { opacity:.4; } }
@keyframes zq-spin { to { transform:rotate(360deg); } }

/* Плитка-ціль у BUILD: золоте кільце пульсує, подвійний шеврон над портретом підстрибує */
.surface-ui .build-tile.quest-target { border-color:#ffcc00; box-shadow:0 0 0 1px #ffcc00, inset 0 0 14px #ffcc0044; animation:zq-tile 1.6s ease-in-out infinite; }
.build-quest { display:none; position:absolute; top:2px; left:50%; width:26px; height:26px; margin-left:-13px; pointer-events:none; filter:drop-shadow(0 1px 2px #000); }
.build-tile.quest-target .build-quest { display:block; animation:zq-bounce 1s ease-in-out infinite; }
.build-quest svg { width:100%; height:100%; fill:none; stroke:#ffcc00; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.surface-ui .build-tab.quest-tab { position:relative; }
.surface-ui .build-tab.quest-tab::after { content:''; position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%; background:#ffcc00; box-shadow:0 0 6px #ffcc00; animation:zq-dot 1.2s ease-in-out infinite; }
@keyframes zq-tile { 0%,100% { box-shadow:0 0 0 1px #ffcc00, inset 0 0 14px #ffcc0044; } 50% { box-shadow:0 0 0 3px #ffcc0099, inset 0 0 22px #ffcc0077; } }
@keyframes zq-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }
@keyframes zq-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.7); } }
@media (max-width:520px), (max-height:500px) {
  .surface-quest { top:calc(8px + var(--sf-top-h, 44px) + 6px); left:8px; width:min(320px, calc(100vw - 16px)); grid-template-columns:34px minmax(0,1fr); gap:8px; padding:5px 8px; }
  .surface-quest-icon { width:34px; height:34px; }
  .surface-quest-title { font-size:10px; }
  .surface-quest-text { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .surface-quest-warn { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .build-quest { width:20px; height:20px; margin-left:-10px; }
}
@media (prefers-reduced-motion: reduce) {
  .surface-quest *, .surface-ui .build-tile.quest-target, .build-tile.quest-target .build-quest, .surface-ui .build-tab.quest-tab::after { animation:none !important; transition:none !important; }
}