:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --panel: rgba(8, 17, 28, .82);
  --panel-strong: rgba(7, 15, 25, .95);
  --panel-border: rgba(169, 216, 255, .28);
  --text: #edf7ff;
  --muted: #a9bfd1;
  --accent: #6bd6ff;
  --danger: #ff7b88;
  --quick-slot: clamp(48px, 14vw, 56px);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0d1722; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; touch-action: none; overscroll-behavior: none; }
button { min-width: 0; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
#game-shell { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
#game-canvas { display: block; width: 100%; height: 100%; background: #314737; image-rendering: auto; touch-action: none; }
body[data-terminal-placement="true"] #game-canvas { cursor: grab; }

#status-hud { position: fixed; z-index: 20; top: calc(12px + var(--safe-top)); left: calc(12px + var(--safe-left)); width: clamp(142px, 39vw, 156px); pointer-events: none; filter: drop-shadow(0 5px 12px rgba(0,0,0,.32)); }
.meter { margin-bottom: 5px; }
.meter-head { display: flex; justify-content: space-between; align-items: end; margin: 0 4px 2px; font-size: 10px; line-height: 1; text-shadow: 0 1px 3px #000; }
.meter-head span { font-weight: 800; letter-spacing: .08em; }
.meter-head b { font-size: 9px; color: #f4fbff; }
.meter-track { height: 20px; padding: 3px; overflow: hidden; border: 1px solid rgba(230,246,255,.42); border-radius: 8px; background: rgba(4,10,17,.76); box-shadow: inset 0 1px 5px rgba(0,0,0,.55); }
.energy-meter .meter-track { height: 16px; }
.meter-fill { width: 100%; height: 100%; border-radius: 5px; transition: width .12s linear; }
.hp-meter .meter-fill { background: linear-gradient(90deg,#cf4960,#ff7081); box-shadow: 0 0 8px rgba(255,93,115,.4); }
.energy-meter .meter-fill { background: linear-gradient(90deg,#318bd8,#b8efff); box-shadow: 0 0 9px rgba(108,205,255,.46); }
.food-slots { display: flex; gap: 5px; margin-top: 8px; }
.food-slot { display: grid; place-items: center; width: clamp(40px, 11vw, 44px); aspect-ratio: 1; border: 1px solid rgba(211,236,255,.28); border-radius: 11px; background: linear-gradient(145deg,rgba(19,38,57,.87),rgba(8,18,29,.88)); box-shadow: inset 0 0 0 2px rgba(101,200,255,.05); }
.food-slot span { color: rgba(195,221,238,.48); font-size: 19px; font-weight: 300; }

.inventory-panel { position: fixed; z-index: 20; top: calc(150px + var(--safe-top)); left: calc(12px + var(--safe-left)); width: 124px; padding: 8px 10px; border: 1px solid rgba(169,216,255,.22); border-radius: 11px; background: rgba(7,15,25,.72); color: var(--text); pointer-events: none; box-shadow: 0 5px 16px rgba(0,0,0,.18); }
.inventory-panel div { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; line-height: 1.55; }
.inventory-panel span { color: var(--muted); }
.inventory-panel b { min-width: 2.5em; color: #f2fbff; text-align: right; }

#world-hud { position: fixed; z-index: 20; top: calc(12px + var(--safe-top)); right: calc(12px + var(--safe-right)); width: 184px; pointer-events: none; }
.world-hud-top { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.time-weather { display: flex; align-items: center; justify-content: space-between; width: 84px; height: 36px; padding: 0 8px; border: 1px solid var(--panel-border); border-radius: 11px; background: var(--panel); box-shadow: 0 5px 16px rgba(0,0,0,.24); }
.time-weather b { font-size: 11px; }
.time-weather span { color: #ffe38a; font-size: 9px; }
.settings-button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel); font-size: 19px; pointer-events: auto; }
.bag-button { display: grid; grid-template-rows: 25px 10px; place-items: center; width: 48px; height: 48px; padding: 4px 3px 3px; border: 1px solid rgba(131,214,255,.46); border-radius: 13px; background: linear-gradient(145deg,rgba(26,66,91,.94),rgba(8,23,37,.94)); box-shadow: 0 5px 16px rgba(0,0,0,.26),inset 0 0 0 1px rgba(123,220,255,.08); pointer-events: auto; }
.bag-button:active { transform: translateY(1px); }
.bag-button:disabled { opacity: .45; pointer-events: none; }
.bag-button-label { color: #dff7ff; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.bag-glyph { position: relative; width: 21px; height: 17px; border: 2px solid #a7e8ff; border-radius: 5px 5px 7px 7px; }
.bag-glyph::before { content: ''; position: absolute; left: 4px; top: -8px; width: 9px; height: 7px; border: 2px solid #a7e8ff; border-bottom: 0; border-radius: 7px 7px 0 0; }
.bag-glyph::after { content: ''; position: absolute; left: 4px; right: 4px; top: 5px; border-top: 2px solid rgba(167,232,255,.72); }
.minimap { position: relative; width: 96px; height: 96px; margin: 7px 0 0 auto; overflow: hidden; border: 2px solid rgba(205,235,255,.44); border-radius: 50%; background: radial-gradient(circle at 44% 55%,#65864f 0 35%,#315e69 36% 50%,#527248 51% 100%); box-shadow: 0 7px 20px rgba(0,0,0,.28), inset 0 0 18px rgba(7,14,20,.36); }
.minimap-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size: 16px 16px; }
.player-marker { position: absolute; left: 50%; top: 50%; color: #d7f6ff; font-size: 13px; transform: translate(-50%,-50%); text-shadow: 0 0 7px #3bd1ff; }
.quest-card { width: 130px; min-height: 58px; margin: 7px 0 0 auto; padding: 9px 10px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel); box-shadow: 0 7px 20px rgba(0,0,0,.22); }
.quest-card span { display: block; margin-bottom: 3px; color: var(--accent); font-size: 9px; }
.quest-card b { display: block; font-size: 11px; line-height: 1.3; }

.debug-panel { position: fixed; z-index: 26; top: calc(164px + var(--safe-top)); bottom: calc(12px + var(--safe-bottom)); left: calc(12px + var(--safe-left)); width: min(296px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); padding: 9px 11px; overflow-y: auto; border: 1px solid rgba(164,211,255,.2); border-radius: 11px; background: rgba(7,13,21,.88); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; line-height: 1.36; pointer-events: none; }
.debug-panel.hidden { display: none; }
.debug-panel div { display: flex; gap: 10px; justify-content: space-between; }
.debug-panel span { color: #91a8ba; }
.debug-panel b { color: #e9f7ff; font-weight: 600; text-align: right; }

.menu-panel { position: fixed; z-index: 50; top: calc(12px + var(--safe-top)); right: calc(12px + var(--safe-right)); width: min(318px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))); max-height: calc(100vh - 24px - var(--safe-top) - var(--safe-bottom)); padding: 15px; overflow-y: auto; border: 1px solid rgba(125,199,255,.35); border-radius: 17px; background: var(--panel-strong); box-shadow: 0 18px 60px rgba(0,0,0,.5); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .16s ease; }
.menu-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.menu-title-row { display: flex; justify-content: space-between; align-items: center; }
.menu-title-row h2 { margin: 0; font-size: 17px; }
.menu-title-row span { color: var(--muted); font-size: 10px; }
.menu-title-row > button { width: 48px; height: 48px; margin: -8px -6px -8px 0; border: 0; background: transparent; font-size: 27px; }
.menu-note { margin: 7px 0 10px; color: var(--muted); font-size: 11px; }
.menu-panel fieldset { margin: 9px 0; padding: 7px; border: 1px solid rgba(121,191,255,.2); border-radius: 11px; }
.menu-panel legend { padding: 0 5px; color: var(--muted); font-size: 10px; }
.segmented { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.segmented.two-columns { grid-template-columns: repeat(2,1fr); }
.shore-modes button { display: grid; place-items: center; gap: 1px; }
.shore-modes b { color: var(--accent); font-size: 13px; }
.shore-modes span { font-size: 9px; }
.debug-layer-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.menu-panel button { min-height: 48px; border: 1px solid rgba(121,191,255,.28); border-radius: 10px; background: #18304a; }
.menu-panel > button { width: 100%; margin-top: 7px; }
.segmented button { min-height: 42px; padding: 0; font-size: 11px; }
.segmented button.selected { border-color: rgba(112,221,255,.84); background: #1e5475; box-shadow: 0 0 0 1px rgba(107,214,255,.25) inset; }
.debug-layer-grid button { min-height: 40px; padding: 4px; font-size: 10px; }
.debug-layer-grid button.selected { border-color: rgba(112,221,255,.84); background: #1e5475; box-shadow: 0 0 0 1px rgba(107,214,255,.25) inset; }
.menu-panel button:active { transform: translateY(1px); }
.menu-panel .danger { background: #48242c; border-color: rgba(255,123,136,.34); }
.save-chip { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.save-dot { width: 8px; height: 8px; border-radius: 50%; background: #77e69b; box-shadow: 0 0 10px rgba(119,230,155,.8); }
.save-chip[data-state="saving"] .save-dot { background: #ffd36b; }
.save-chip[data-state="error"] .save-dot { background: var(--danger); }

.bag-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: calc(14px + var(--safe-top)) calc(14px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left)); background: rgba(2,7,13,.74); opacity: 0; pointer-events: none; transition: opacity .14s ease; }
.bag-modal.open { opacity: 1; pointer-events: auto; }
.bag-dialog { display: flex; flex-direction: column; width: min(430px,100%); max-height: 100%; overflow: hidden; border: 1px solid rgba(126,207,255,.48); border-radius: 20px; background: linear-gradient(180deg,rgba(10,25,39,.985),rgba(6,15,25,.985)); box-shadow: 0 24px 72px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.05); transform: translateY(8px) scale(.985); transition: transform .14s ease; }
.bag-modal.open .bag-dialog { transform: translateY(0) scale(1); }
.bag-dialog-header { display: flex; align-items: center; justify-content: space-between; min-height: 67px; padding: 12px 14px 10px 17px; border-bottom: 1px solid rgba(129,200,240,.17); }
.bag-dialog-header h2 { margin: 1px 0 0; font-size: 21px; letter-spacing: .04em; }
.bag-kicker { color: #75cef2; font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.bag-close { width: 48px; height: 48px; padding: 0; border: 1px solid rgba(157,211,239,.18); border-radius: 13px; background: rgba(24,50,70,.72); font-size: 26px; }
.bag-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 10px 12px; background: rgba(3,10,17,.34); }
.bag-tabs[data-workbench="false"] { grid-template-columns: repeat(2,1fr); }
.bag-tab { min-height: 46px; border: 1px solid rgba(137,202,237,.22); border-radius: 12px; background: rgba(19,43,62,.7); color: #aac2d2; font-size: 13px; font-weight: 800; }
.bag-tab.selected { border-color: rgba(106,218,255,.74); background: linear-gradient(180deg,rgba(36,100,134,.9),rgba(24,70,98,.9)); color: #f2fbff; box-shadow: inset 0 0 0 1px rgba(151,230,255,.12); }
.bag-content { min-height: 292px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 12px; }
.bag-tab-panel[hidden] { display: none; }
.bag-section-note { margin: 7px 3px 10px; color: var(--muted); font-size: 11px; }
.inventory-list { display: grid; gap: 7px; }
.bag-robot-slots { display: contents; }
.inventory-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; min-height: 61px; padding: 8px 12px 8px 9px; border: 1px solid rgba(126,193,230,.16); border-radius: 13px; background: rgba(15,34,50,.72); }
.inventory-row strong { min-width: 3em; color: #f5fbff; font-size: 18px; text-align: right; }
.terminal-inventory-actions { display: grid; justify-items: end; gap: 5px; }
.terminal-inventory-actions button { min-width: 86px; min-height: 44px; padding: 0 10px; border: 1px solid rgba(112,222,255,.55); border-radius: 10px; background: linear-gradient(180deg,#287da4,#185676); color: #f3fbff; font-size: 12px; font-weight: 900; }
.terminal-inventory-actions button[hidden] { display: none; }
.item-copy { display: grid; gap: 3px; }
.item-copy b { font-size: 13px; }
.item-copy small { color: #859dad; font-size: 9px; }
.item-copy small.analyzed { color: #76ddb8; }
.item-mark,.recipe-icon { position: relative; display: block; width: 28px; height: 28px; margin: auto; border: 2px solid #8fdcff; border-radius: 7px; opacity: .88; }
.material-mark { border-radius: 5px 10px 5px 9px; transform: rotate(-10deg); }
.stone-mark { border-color: #b9c9d7; border-radius: 45% 55% 42% 58%; transform: rotate(12deg); }
.fiber-mark { width: 25px; border: 0; border-left: 3px solid #7dd8aa; border-radius: 50%; transform: rotate(21deg); }
.fiber-mark::after { content: ''; position: absolute; left: 5px; top: 5px; width: 15px; height: 9px; border: 2px solid #7dd8aa; border-left: 0; border-radius: 0 100% 0 100%; }
.adhesive-mark { border-color: #8ed9ff; border-radius: 50% 50% 46% 46%; background: linear-gradient(180deg,rgba(153,231,255,.45),rgba(42,118,156,.35)); }
.log-mark { border-color: #deb679; background: linear-gradient(145deg,#c69a62,#765033 54%,#3e2a1f); box-shadow: inset 0 0 0 2px rgba(250,219,172,.24); }
.rope-mark { border-color: #d8d3b0; border-radius: 50%; background: repeating-radial-gradient(circle,#8c875f 0 2px,#d8d3b0 3px 5px); }
.gel-mark { border-color: #75ddd1; border-radius: 52% 48% 58% 42%; background: radial-gradient(circle at 36% 28%,rgba(224,255,249,.78) 0 12%,transparent 14%),linear-gradient(155deg,rgba(105,220,206,.62),rgba(27,105,112,.42)); }
.recipe-card + .recipe-card { margin-top: 12px; }
.terminal-mark { border-color: #7bd8ff; border-radius: 6px; box-shadow: inset 0 0 0 4px rgba(48,124,158,.32); }
.terminal-mark::before,.terminal-mark::after { content: ''; position: absolute; bottom: -6px; width: 5px; height: 5px; border: 2px solid #7bd8ff; border-top: 0; }
.terminal-mark::before { left: 2px; }.terminal-mark::after { right: 2px; }
.repair-station-mark { display: grid; place-items: center; border-color: #8ed9ff; background: rgba(57,128,165,.28); color: #e4f8ff; font-size: 13px; font-weight: 900; }
.lumber-station-mark { display: grid; place-items: center; border-color: #dfbd78; background: rgba(112,78,38,.38); color: #fff0c9; font-size: 13px; font-weight: 900; }
.robot-mark { border-color: #ad9870; border-radius: 50% 50% 42% 42%; background: rgba(116,95,64,.34); box-shadow: inset 0 0 0 4px rgba(75,55,36,.22); }
.robot-mark::after { content: ''; position: absolute; left: 9px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #7dd8ee; box-shadow: 0 0 7px rgba(125,216,238,.7); }
.robot-state-broken { color: #f1bd86 !important; }
.repair-target-list { display: grid; gap: 7px; margin-bottom: 10px; }
.repair-target-button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; width: 100%; min-height: 58px; padding: 8px 11px; border: 1px solid rgba(126,193,230,.2); border-radius: 12px; background: rgba(15,34,50,.72); color: #eef8ff; text-align: left; }
.repair-target-button.selected { border-color: rgba(112,222,255,.68); background: rgba(26,73,99,.86); }
.repair-target-button span { display: grid; gap: 2px; }
.repair-target-button small { color: #9ab2c1; font-size: 9px; }
.repair-target-button b:last-child { color: #d8e8f1; font-size: 11px; }
.robot-repair-card[hidden] { display: none; }
.recipe-card { padding: 13px; border: 1px solid rgba(111,209,250,.32); border-radius: 16px; background: linear-gradient(155deg,rgba(20,52,72,.8),rgba(9,26,39,.82)); }
.recipe-card.locked { border-color: rgba(147,169,183,.22); filter: saturate(.72); }
.recipe-heading { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; }
.recipe-heading h3 { margin: 2px 0 0; font-size: 16px; }
.recipe-heading > div > span { color: #77cdeb; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.recipe-lock-badge { padding: 5px 7px; border: 1px solid rgba(141,210,237,.25); border-radius: 8px; color: #9eb5c5; font-size: 9px; font-weight: 800; }
.recipe-lock-badge.unlocked { border-color: rgba(107,224,183,.34); color: #7ee4bd; }
.recipe-analysis-detail { min-height: 1.45em; margin: 11px 2px 8px; color: #b4c6d2; font-size: 10px; line-height: 1.45; }
.recipe-requirements { overflow: hidden; border: 1px solid rgba(134,197,228,.16); border-radius: 12px; }
.recipe-requirements div { display: flex; justify-content: space-between; padding: 9px 11px; background: rgba(5,17,27,.42); font-size: 12px; }
.recipe-requirements div + div { border-top: 1px solid rgba(134,197,228,.12); }
.recipe-requirements span { color: #b6c8d4; }
.recipe-requirements b { color: #d9e7ef; }
.recipe-requirements b.sufficient { color: #7ee4bd; }
.recipe-reason { min-height: 1.45em; margin: 10px 2px 8px; color: #ffd08a; font-size: 11px; text-align: center; }
.recipe-reason.ready { color: #7ee4bd; }
.craft-button { width: 100%; min-height: 48px; border: 1px solid rgba(112,222,255,.62); border-radius: 12px; background: linear-gradient(180deg,#277ba1,#185675); color: #f3fbff; font-size: 14px; font-weight: 900; }
.craft-button:disabled { border-color: rgba(145,172,187,.18); background: #1c3140; color: #718897; }
.bag-close-footer { flex: 0 0 auto; min-height: 48px; margin: 0 12px 12px; border: 1px solid rgba(126,197,232,.24); border-radius: 12px; background: rgba(23,51,70,.82); font-size: 13px; font-weight: 800; }
.facility-recover-button { width: calc(100% - 24px); margin-top: 10px; border-color: rgba(241,183,126,.32); background: rgba(72,50,37,.82); }
.bag-dialog button:focus-visible,.bag-button:focus-visible { outline: 3px solid rgba(113,219,255,.7); outline-offset: 2px; }
.logging-robot-modal { position: fixed; z-index: 92; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(2,7,13,.76); opacity: 0; pointer-events: none; transition: opacity .14s ease; }
.logging-robot-modal.open { opacity: 1; pointer-events: auto; }
.logging-robot-dialog { width: min(390px,100%); padding: 18px 16px 6px; border: 1px solid rgba(126,207,255,.48); border-radius: 18px; background: linear-gradient(180deg,rgba(10,25,39,.99),rgba(6,15,25,.99)); box-shadow: 0 24px 72px rgba(0,0,0,.62); }
.logging-robot-dialog h2 { margin: 3px 0 4px; font-size: 20px; }
.logging-robot-options { display: grid; gap: 8px; margin: 10px 0 14px; }
.logging-robot-option { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; min-height: 58px; padding: 8px 10px; border: 1px solid rgba(137,202,237,.3); border-radius: 12px; background: rgba(19,43,62,.82); color: #effaff; text-align: left; }
.logging-robot-option span { display: grid; gap: 2px; }
.logging-robot-option small { color: var(--muted); }

.motion-test-panel { position: fixed; z-index: 45; left: 50%; bottom: calc(220px + var(--safe-bottom)); width: min(330px,calc(100vw - 24px - var(--safe-left) - var(--safe-right))); padding: 9px; border: 1px solid rgba(112,218,255,.48); border-radius: 15px; background: rgba(6,18,29,.94); box-shadow: 0 14px 36px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.04); transform: translateX(-50%); pointer-events: auto; touch-action: none; }
.motion-test-panel[hidden] { display: none; }
.motion-test-panel.collapsed { width: min(310px,calc(100vw - 24px - var(--safe-left) - var(--safe-right))); }
.motion-test-heading { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin: 0 2px; }
.motion-test-heading span { color: #6bcff6; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.motion-test-heading h2 { margin: 1px 0 0; font-size: 14px; }
.motion-test-heading b { color: #dff7ff; font-size: 10px; text-align: right; }
.motion-test-heading button { min-width: 52px; min-height: 44px; padding: 0 8px; border: 1px solid rgba(112,218,255,.4); border-radius: 10px; background: #183c55; color: #e5f8ff; font-size: 10px; font-weight: 900; }
.motion-asset-status { margin: 2px 0 0; color: #7de1ba; font-size: 9px; }
.motion-asset-status[data-state="error"] { color: #ffb687; }
.motion-test-controls { max-height: calc(100dvh - 310px - var(--safe-top) - var(--safe-bottom)); margin-top: 7px; overflow-y: auto; overscroll-behavior: contain; }
.motion-test-panel.collapsed .motion-test-controls { display: none; }
.motion-test-panel fieldset { margin: 7px 0; padding: 6px; border: 1px solid rgba(129,202,237,.2); border-radius: 10px; }
.motion-test-panel legend { padding: 0 4px; color: #a8bdcb; font-size: 9px; }
.motion-segmented { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.motion-segmented.two-options { grid-template-columns: repeat(2,1fr); }
.motion-segmented button { min-height: 44px; padding: 0; border: 1px solid rgba(123,196,232,.27); border-radius: 9px; background: #18344b; color: #c9dde9; font-size: 11px; font-weight: 800; }
.motion-segmented button.selected { border-color: #75dbff; background: #216082; color: #fff; box-shadow: inset 0 0 0 1px rgba(129,225,255,.18); }
.motion-test-panel output { display: block; margin-top: 5px; color: #a9c4d4; font-size: 9px; text-align: center; }
.axe-test-button { width: 100%; min-height: 48px; margin-top: 2px; border: 1px solid rgba(113,220,255,.58); border-radius: 11px; background: linear-gradient(180deg,#287da4,#185676); color: #f2fbff; font-size: 13px; font-weight: 900; }
.axe-test-button.playing { border-color: #a8e9ff; background: linear-gradient(180deg,#3697bd,#1c6688); }
.motion-test-controls > small { display: block; margin-top: 6px; color: #829aaa; font-size: 8px; text-align: center; }

.terminal-placement-hud { position: fixed; z-index: 35; left: 50%; bottom: calc(12px + var(--safe-bottom)); display: grid; gap: 9px; width: min(590px,calc(100vw - 24px - var(--safe-left) - var(--safe-right))); padding: 10px; border: 1px solid rgba(113,220,255,.48); border-radius: 14px; background: rgba(6,18,29,.94); box-shadow: 0 12px 32px rgba(0,0,0,.42); transform: translateX(-50%); pointer-events: auto; }
.terminal-placement-hud[hidden] { display: none; }
.terminal-placement-copy { display: grid; gap: 3px; min-width: 0; }
.terminal-placement-hud b { color: #e5f8ff; font-size: 12px; }
.terminal-placement-hud span { overflow: hidden; color: #7ee4bd; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.terminal-placement-hud small { color: #95adbc; font-size: 8px; line-height: 1.35; }
.terminal-placement-hud[data-valid="false"] span { color: #ffb3a8; }
.terminal-placement-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.terminal-placement-hud button { min-height: 48px; padding: 0 8px; border: 1px solid rgba(143,211,239,.46); border-radius: 11px; background: rgba(24,68,91,.94); color: #eefaff; font-size: 11px; font-weight: 900; touch-action: manipulation; }
.terminal-placement-hud button.confirm { border-color: rgba(116,236,176,.58); background: rgba(27,105,77,.94); }
.terminal-placement-hud button.cancel { border-color: rgba(255,183,175,.46); background: rgba(91,43,48,.92); color: #fff2ef; }
.terminal-placement-hud button:disabled { opacity: .38; filter: grayscale(.45); }

#touch-controls { position: fixed; inset: 0; z-index: 22; pointer-events: none; }
.joystick-zone { position: absolute; left: calc(10px + var(--safe-left)); bottom: calc(72px + var(--safe-bottom)); width: 120px; height: 120px; border-radius: 50%; pointer-events: auto; touch-action: none; }
.joystick-base { position: absolute; inset: 8px; border: 2px solid rgba(218,239,255,.25); border-radius: 50%; background: rgba(8,18,28,.42); box-shadow: inset 0 0 30px rgba(101,200,255,.09),0 5px 18px rgba(0,0,0,.2); }
.joystick-knob { position: absolute; left: 29px; top: 29px; width: 42px; height: 42px; border: 2px solid rgba(239,250,255,.6); border-radius: 50%; background: rgba(213,239,255,.52); box-shadow: 0 5px 16px rgba(0,0,0,.3); transform: translate(0,0); }
body[data-action-lock="gathering"] .joystick-zone { opacity: .48; filter: saturate(.55); }
.action-zone { position: absolute; right: calc(10px + var(--safe-right)); bottom: calc(72px + var(--safe-bottom)); width: 142px; height: 136px; pointer-events: none; }
.action-button { position: absolute; border: 2px solid rgba(220,242,255,.38); border-radius: 50%; color: #f3fbff; font-weight: 800; text-shadow: 0 1px 3px #000; box-shadow: 0 7px 20px rgba(0,0,0,.25),inset 0 0 20px rgba(255,255,255,.05); pointer-events: auto; }
.primary-action { right: 0; bottom: 0; width: 92px; height: 92px; background: radial-gradient(circle at 42% 35%,rgba(76,157,205,.86),rgba(20,64,94,.9)); font-size: 15px; }
.primary-action.gathering { border-color: rgba(181,235,250,.7); background: radial-gradient(circle at 42% 35%,rgba(70,139,174,.88),rgba(17,52,76,.94)); }
.primary-action.placing { border-color: rgba(135,235,190,.78); background: radial-gradient(circle at 42% 35%,rgba(61,161,125,.9),rgba(18,75,60,.94)); }
.primary-action.placing.invalid { border-color: rgba(255,154,154,.68); background: radial-gradient(circle at 42% 35%,rgba(151,74,78,.9),rgba(76,31,39,.94)); }
body[data-terminal-placement="true"] .build-action,
body[data-terminal-placement="true"] #quickbar,
body[data-terminal-placement="true"] .motion-test-panel { opacity: .42; pointer-events: none; }
body[data-terminal-placement="true"] #touch-controls,
body[data-terminal-placement="true"] #quickbar { visibility: hidden; pointer-events: none; }
body[data-terminal-placement="true"] #menu-toggle,
body[data-terminal-placement="true"] #bag-toggle { opacity: .42; pointer-events: none; }
.build-action { left: 0; top: 0; width: 62px; height: 62px; background: rgba(43,64,83,.88); font-size: 11px; }
.gather-context { position: absolute; right: 0; bottom: 99px; width: 132px; padding: 6px 8px; border: 1px solid rgba(159,220,244,.3); border-radius: 9px; background: rgba(7,16,25,.88); color: #e9f9ff; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; text-shadow: 0 1px 2px #000; pointer-events: none; }
.gather-context[hidden] { display: none; }

#quickbar { position: fixed; z-index: 24; left: 50%; bottom: calc(10px + var(--safe-bottom)); display: flex; gap: 4px; transform: translateX(-50%); pointer-events: auto; }
.quick-slot { position: relative; display: grid; place-items: center; width: var(--quick-slot); height: var(--quick-slot); padding: 0; border: 1px solid rgba(213,238,255,.3); border-radius: 10px; background: rgba(7,17,27,.78); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.quick-slot.selected { border-color: #7ddcff; background: rgba(24,65,91,.9); box-shadow: 0 0 0 2px rgba(125,220,255,.28),0 0 16px rgba(67,192,242,.24); }
.quick-slot span { position: absolute; left: 4px; top: 2px; color: var(--muted); font-size: 9px; }
.quick-slot b { font-size: clamp(9px,2.5vw,11px); }

.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(circle at center,rgba(32,58,75,.96),rgba(7,13,21,.99)); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.overlay.visible { opacity: 1; pointer-events: auto; }
.loading-card { width: min(360px,calc(100vw - 40px)); padding: 24px; border: 1px solid rgba(121,205,255,.26); border-radius: 20px; background: rgba(9,17,28,.9); text-align: center; }
.loading-emblem { color: var(--accent); font-size: 42px; text-shadow: 0 0 18px rgba(101,200,255,.8); animation: pulse 1.2s infinite ease-in-out; }
.loading-card h1 { margin: 6px 0 8px; font-size: 19px; }
.loading-card p { min-height: 2.5em; margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.progress-track { height: 7px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.08); }
.progress-bar { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4caeff,#88e6ff); transition: width .12s linear; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(148px + var(--safe-bottom)); max-width: calc(100vw - 30px); padding: 10px 14px; border: 1px solid rgba(137,205,255,.25); border-radius: 12px; background: rgba(8,16,26,.94); color: #f1faff; font-size: 12px; text-align: center; transform: translate(-50%,15px); opacity: 0; pointer-events: none; transition: .18s ease; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.gather-notifications { position: fixed; z-index: 59; top: 29%; left: 50%; display: grid; gap: 5px; width: min(220px,calc(100vw - 40px)); transform: translateX(-50%); pointer-events: none; }
.gather-notification { padding: 7px 11px; border: 1px solid rgba(166,220,242,.24); border-radius: 9px; background: rgba(8,17,27,.88); color: #f1faff; font-size: 12px; font-weight: 700; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .72; } }

@media (hover:hover) and (pointer:fine) and (min-width:720px) {
  .joystick-zone { display: none; }
  .action-zone { bottom: calc(16px + var(--safe-bottom)); }
  .toast { bottom: 82px; }
  .motion-test-panel { left: auto; right: calc(16px + var(--safe-right)); top: calc(112px + var(--safe-top)); bottom: auto; transform: none; }
}
@media (max-width:350px) {
  #status-hud { width: 142px; }
  #world-hud { width: 100px; }
  .time-weather { display: none; }
  .weather-label { display: none; }
  .minimap { width: 84px; height: 84px; }
  .quest-card { width: 116px; min-height: 52px; padding: 7px 8px; }
  .food-slots { gap: 4px; }
}
@media (max-height:650px) {
  .minimap { width: 78px; height: 78px; }
  .quest-card { min-height: 48px; }
  .debug-panel { top: calc(132px + var(--safe-top)); font-size: 8px; line-height: 1.27; }
  .bag-dialog-header { min-height: 58px; padding-block: 7px; }
  .bag-content { min-height: 220px; }
  .inventory-row { min-height: 54px; }
}
@media (max-height:590px) {
  .quest-card { display: none; }
}