@font-face{font-family:'Doto';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/zoe-ui/doto-500.ttf') format('truetype')}
@font-face{font-family:'Doto';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/zoe-ui/doto-700.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/zoe-ui/ibm-plex-mono-400.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/zoe-ui/ibm-plex-mono-500.ttf') format('truetype')}
/* Copper phosphor: keep the world visible, give text a stable dark backing. */
:root{--copper:#f3b18a;--phosphor:#ffd9b1;--hud-glow:0 0 5px #e88b5266,0 0 14px #cd63302e,0 2px 3px #080403;--teal:#9fe0c9}
header,.objective,.controls,#archive,#inventory,#tokenQuota,#radioState,#interaction,#notice{color:var(--copper);text-shadow:var(--hud-glow)}
header{font-size:11px;letter-spacing:.2em}
header strong{color:var(--phosphor)}
header a,#fps,#archive{color:#e5a27f}
.objective{top:58px;width:min(84vw,800px);gap:6px;background:radial-gradient(ellipse,rgba(16,9,6,.56),transparent 74%);padding:9px 18px}
.objective small{font-size:10px;color:#dc9270}
.objective b{font-size:14px;line-height:1.45;color:var(--phosphor);letter-spacing:.045em}
.objective span{font-size:9px;color:#d49d7e}
.controls{bottom:15px;font-size:10px;letter-spacing:.07em;padding:7px 13px;background:#140b0773;border-top:1px solid #d389554a}
#interaction{font-size:13px;color:var(--phosphor);background:#180d09b3}
#archive{top:56px;font-size:10px}
#tokenQuota{font-size:11px;width:200px;bottom:54px;color:#b9dacf}
#radioState{bottom:52px!important;font-size:10px;color:var(--copper);width:330px;max-width:calc(50vw - 30px);line-height:1.35;padding:5px 8px;background:#140b0780;border-right:1px solid #d389554a;display:grid;grid-template-columns:auto auto 1fr;gap:2px 10px;align-items:center;justify-items:end}
#radioState small,#radioState a{font-size:9px;color:#d69e81}
#radioState{pointer-events:none}
#radioState .radio-track{font:500 9px 'IBM Plex Mono',monospace;color:#d69e81;grid-column:1/-1;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#inventory{position:static;max-width:120px;line-height:1.35}
#inventory small{display:none}
#inventoryItems{font-size:10px}
#radioState[data-state="MUTED"] b{color:#d89c79}
#partAnnotation{font-size:12px;max-width:310px;color:#d9e9df;text-shadow:0 0 6px #183025,0 2px 4px #080403}
.reticle{font-size:18px;color:#f5bb8c;text-shadow:0 0 7px #ff9b64}

#dialogue{inset:119px 24px 90px auto;width:clamp(370px,34vw,490px);display:grid;grid-template-rows:42px 86px minmax(0,1fr) minmax(0,1.05fr);gap:9px;background:none;transform:none;filter:none;text-shadow:var(--hud-glow);pointer-events:none}
#dialogue[hidden]{display:grid;transform:translateX(26px);opacity:0;visibility:hidden;transition:transform .9s ease,opacity .9s ease,visibility 0s .9s}
.zoe-identity,.zoe-response-layer,.zoe-question-layer{position:relative;inset:auto!important;width:100%;height:auto;min-height:0;right:auto;top:auto}
.zoe-identity{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;border-bottom:1px solid #f3b18a66;background:linear-gradient(90deg,transparent,#160c0999)}
.zoe-identity .speaker{padding:0 6px 6px;gap:3px;border:0}
.speaker small{font-size:10px;color:#dfa280;letter-spacing:.09em}
.speaker b{font-size:24px;color:var(--phosphor);letter-spacing:.16em}
.speaker span{font-size:9px;color:#bad5cb}
.zoe-signal>i{background:var(--copper);box-shadow:0 0 5px #ffa05d77}
.zoe-instruments{display:grid;grid-template-columns:1fr 1.65fr;gap:12px;align-items:center;min-height:0;padding:5px 10px;background:#170c0999;border-inline:1px solid #d48c5d55}
#dialogue .compass{position:relative;inset:auto;left:auto;right:auto;top:auto;width:auto;transform:none;justify-content:center;gap:10px;font-size:10px;color:#c88b6a}
#dialogue .compass b{font-size:17px;color:var(--phosphor);min-width:24px;text-align:center}
#dialogue .compass i{background:#ffbc87;box-shadow:0 0 6px #fc935b;bottom:-8px}
#dialogue #dangerState{position:relative;inset:auto;left:auto;right:auto;top:auto;width:auto;margin-top:20px;justify-content:center;gap:5px;font-size:10px;color:#d8a78a;opacity:1;letter-spacing:.08em}
#dangerState small{font-size:9px}
.geiger{display:grid;grid-template-columns:23px 1fr auto;gap:1px 7px;align-items:center;border-left:1px solid #d48c5d55;padding-left:10px;min-width:0}
.hud-icon{width:22px;height:22px;background:var(--copper);mask:url('../assets/zoe-ui/radioactive.svg') center/contain no-repeat;grid-row:1/3;filter:drop-shadow(0 0 4px #e99a5577)}
.geiger small{font-size:9px;letter-spacing:.09em;color:#e1a582;grid-column:2/4}
.geiger strong{font-size:20px;letter-spacing:.04em;color:var(--phosphor);white-space:nowrap;line-height:1.2}
.geiger strong em{font-size:10px;font-style:normal;color:var(--copper)}
.geiger b{font-size:10px;color:#c49c85;text-align:right}
.geiger svg{width:100%;height:18px;grid-column:1/-1;overflow:visible}
.geiger polyline{fill:none;stroke:#f4b58b;stroke-width:1.4;filter:drop-shadow(0 0 2px #ffac5d)}
.geiger-scale{grid-column:1/-1;height:3px;background:#59372388;overflow:hidden}
.geiger-scale i{display:block;height:100%;background:#e99a64;transition:width .3s;box-shadow:0 0 5px #ffaa66}
.geiger p{margin:1px 0 0;grid-column:1/-1;font-size:8px;letter-spacing:.035em;color:#b7dccd;white-space:nowrap}
.geiger[data-level="EXTREME"] strong{color:#ffd0a3}

.zoe-response-layer{display:flex;flex-direction:column;padding:9px 10px 0;background:linear-gradient(90deg,#150c0788,#150c07b3);overflow:hidden;mask-image:none;border-left:1px solid #f3b18a40}
.zoe-response-layer p{margin:0 0 8px;padding:0;max-height:none;min-height:40px;flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#bc7752 #24150b;text-align:left;white-space:pre-line;font-size:13px;line-height:1.5;color:#f8d2b5;background:none;pointer-events:auto}
.zoe-response-layer #zoeVisual{height:clamp(106px,15vh,148px);max-height:none;flex:none;margin:0;width:100%;background:transparent!important;border:0;overflow:hidden;position:relative}
#zoeVisual:before,#zoeVisual:after{content:none;animation:none}
.diagram-title{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #d6976255;padding-top:5px;font-size:9px;letter-spacing:.06em;color:#efb78c;height:19px}
.diagram-title b{font-weight:400;font-size:8px;color:#b6d3c6;white-space:nowrap}
#zoeVisual svg{height:calc(100% - 19px);width:100%;overflow:visible;fill:none;stroke:#dca27b;stroke-width:1;filter:drop-shadow(0 0 2px #ed9b452e)}
#zoeVisual text{fill:#edc3a2;stroke:none;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.2px}
#zoeVisual .diagram-grid{stroke:#bd896633;stroke-width:.5}
#zoeVisual .safe{stroke:var(--teal)}#zoeVisual text.safe{fill:var(--teal);stroke:none}
#zoeVisual .alert{stroke:#f6a171}#zoeVisual text.alert{fill:#f6ad82;stroke:none}
#zoeVisual .safe-fill{stroke:#9fe0c9;fill:#609b8540}
#zoeVisual .alert-fill{stroke:#f3a178;fill:#b35d3730}
#zoeVisual .unknown{stroke:#ad8c70;stroke-dasharray:3 3}
#zoeVisual .failed{stroke:#be7150;stroke-dasharray:1 3;fill:#b35d3711}
#zoeVisual .witness{fill:#ffedcf;stroke:#ffd49d;stroke-width:2}
#zoeVisual .reserve-fill{fill:#cd944b77;stroke:#f0bd78}
#zoeVisual text.reserve{fill:#f0bd78}
#zoeVisual .diagram-route{stroke:#dfb384;stroke-dasharray:3 4}
#zoeVisual .diagram-icon{opacity:.72}

.zoe-question-layer{display:grid;grid-template-rows:18px minmax(0,1fr) 28px;gap:6px;padding:6px 10px 9px;background:linear-gradient(90deg,#140b0780,#140b07a6);border-left:1px solid #dc9a7455}
.zoe-question-layer .question-label{font-size:9px;color:#d8aa8c;letter-spacing:.04em;text-align:left}
.zoe-question-layer #dialogueChoices{display:grid;grid-auto-rows:minmax(34px,auto);align-content:start;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ae6a46 transparent;padding:0 4px 0 0}
.zoe-slot{height:auto;min-height:34px}
.zoe-slot button,.zoe-question-layer #dialogueChoices>button{font:500 12px/1.4 'IBM Plex Mono',monospace;height:auto;min-height:32px;padding:5px 8px;color:#e9b695;border-left:1px solid #ca845555;background:transparent;white-space:normal;text-shadow:var(--hud-glow)}
.zoe-slot button.selected,.zoe-question-layer #dialogueChoices>button.selected{color:#ffe1bd;background:linear-gradient(90deg,#98552e66,#57311811);border-left:2px solid #ffbd89;box-shadow:-4px 0 14px #fda05b22,inset 0 1px #ffd2971a}
.zoe-slot button.quest:after{font-size:8px;letter-spacing:.04em;color:#f5c48b;padding:2px 0 0 8px}
.zoe-question-layer #computeMeter{margin:0;padding:0;width:100%;min-width:0;gap:3px 9px}
#computeMeter small{font-size:9px;letter-spacing:.06em;color:#b7cebf}
#computeMeter b{font-size:15px;color:#ffcca0}
#computeMeter span{height:3px!important;background:#60452b55}
#computeMeter span i{background:linear-gradient(90deg,#83bba5,#edb57e);box-shadow:0 0 6px #e8a26455}
#computeDelta{top:auto;bottom:104px;right:auto;left:22px;font:12px 'IBM Plex Mono',monospace;max-width:min(390px,90vw);background:#152019ed}

.radiation{opacity:.26;z-index:64;mix-blend-mode:screen}
.radiation:before{animation:none;opacity:0}
.radiation:after{opacity:.07;animation:static .28s steps(2) infinite}
#radiationPixels{position:fixed;inset:0;width:100%;height:100%;z-index:65;pointer-events:none;opacity:.65;mix-blend-mode:screen}
body::after{content:'';position:fixed;inset:0;z-index:66;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,#00000020 2px,#00000020 3px);opacity:.34}
#dialogue:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.11;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffd8a922 3px 4px);mix-blend-mode:screen}
.overlay-panel{color:#efba96;text-shadow:var(--hud-glow)}
.overlay-panel small{font-size:11px;color:#d89f7a}
.overlay-panel p{font-size:11px;color:#d0a285;line-height:1.6}
.menu-actions button{font-size:13px;color:#e8b797;padding:13px;background:#201109b3;border-color:#b4775355}
.menu-actions button:hover,.menu-actions button:focus{box-shadow:0 0 12px #fa985033;color:#ffe2c6}
#startMenu{padding:25px;background:radial-gradient(ellipse at 50% 40%,#25190ced,#0e0906f5);overflow:auto}
#startMenu:before{inset:8%;border-color:#cd865440}
#startMenu p{font-size:13px;max-width:680px;color:#dfb392}
#startGame{justify-self:center;width:220px;border-color:#e4a474;box-shadow:0 0 16px #da86351a,inset 0 0 16px #f1b35b0e;color:#ffe0ba;font-size:16px;letter-spacing:.18em}
.asset-credits{font-size:10px;margin-top:16px;opacity:.85}
.asset-credits a{color:#c7a487;text-decoration:none;pointer-events:auto}

@media(max-height:760px){
  #dialogue{inset:109px 20px 86px auto;grid-template-rows:34px 76px minmax(0,1.4fr) minmax(0,1fr);gap:6px}
  .speaker b{font-size:20px}.speaker small,.speaker span{font-size:8px}
  .zoe-response-layer p{font-size:12px;line-height:1.4;min-height:34px}
  .zoe-response-layer #zoeVisual{height:100px}
  .zoe-slot{min-height:31px}.zoe-slot button,.zoe-question-layer #dialogueChoices>button{font-size:11px;min-height:30px;padding:4px 7px}
}
@media(max-width:900px){
  #dialogue{width:min(47vw,410px);right:14px;left:auto}
  .controls{font-size:8px;white-space:normal;width:96vw;text-align:center}
  .objective{width:95vw;top:44px}.objective b{font-size:12px}
  header{font-size:9px}header strong{display:none}
  #archive{top:44px;font-size:8px}.speaker small{font-size:8px}
  .geiger p{font-size:7px}.geiger strong{font-size:16px}.geiger b{font-size:8px}
  #tokenQuota{font-size:9px;width:170px}
}
@media(max-width:600px){
  #dialogue{width:calc(100vw - 28px);max-width:410px;inset:114px 14px 84px auto;background:#140a0588}
  .zoe-instruments{grid-template-columns:1fr 1.7fr}
  .objective b{font-size:11px}#archive{display:none}
  #tokenQuota{width:140px;font-size:8px}#radioState{font-size:8px;max-width:160px}
  #radioState a{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .radiation:after,.zoe-signal>i,#dangerState[data-state="DETECTED"]{animation:none}
  #dialogue,#dialogue[hidden]{transition:opacity .15s,visibility .15s;transform:none}
}

.zoe-instruments{background-image:url("../assets/zoe-ui/copper-frame.svg");background-size:100% 100%;background-repeat:no-repeat}