:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "Lucida Console", monospace;
  --terminal-font: "VT323", "Lucida Console", monospace;
  --phosphor: #40eaff;
  --mint: #80e7ff;
  --cyan: #80d5ed;
  --line: #294553;
  color: #e0edf5;
  background: #070d10;
  font-synthesis: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at top, #17252b, #070d10 70%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.topbar { flex: 0 0 58px; padding: 10px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-text { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.brand-astronaut { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 5px #40eaff); }
.topbar { overflow-x: auto; }
.brand h1 { margin: 0; font-size: 16px; letter-spacing: .13em; font-weight: 500; }
.brand h1 strong { color: var(--mint); }
.brand small { font: 9px var(--mono); letter-spacing: .15em; color: #91a8ba; }
.status-light { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px #66dfff77; }
.layout { flex: 1; min-height: 0; width: 100%; max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); gap: 14px; padding: 14px 20px; }
.left, .right { min-width: 0; min-height: 0; border: 1px solid var(--line); background: #101b22; box-shadow: 0 10px 30px #0004; overflow: hidden; }
.left { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 8px; }
.panelhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #15242a; }
.panelhead h2 { margin: 0; font: 11px var(--mono); letter-spacing: .13em; }
.panelhead > span { font: 9px var(--mono); color: var(--mint); text-align: right; }
.live { display: flex; align-items: center; gap: 7px; }
.signal-antenna { width: 19px; height: 19px; flex-shrink: 0; filter: drop-shadow(0 0 3px currentColor); }
.panelhead .live { color: #ffdd40; animation: weak-signal 1.8s steps(1, end) infinite; }
.live .status-light { background: currentColor; box-shadow: 0 0 10px currentColor; }
@keyframes weak-signal {
  0%, 100% { color: #ffdd40; opacity: 1; }
  33% { color: #ff8f28; opacity: .7; }
  66% { color: #ff4040; opacity: 1; }
}
.map-area { min-height: 0; min-width: 0; margin: 0 12px; display: flex; align-items: center; justify-content: center; container-type: size; }
.mapframe { position: relative; width: min(100%, calc((100dvh - 285px) * 888 / 861)); aspect-ratio: 888 / 861; overflow: hidden; border: 1px solid #3a535b; background: #050a10; line-height: 0; }
@supports (height: 1cqh) { .mapframe { width: min(100%, calc(100cqh * 888 / 861)); } }
.mapframe > img { width: 100%; height: 100%; display: block; filter: contrast(1.08) brightness(.83) saturate(.8); }
.astronaut { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); background: #052b3b; border: 1px solid #75eaff; border-radius: 50%; padding: 4px; font-size: clamp(12px, 1.3vw, 18px); line-height: 1.2; box-shadow: 0 0 12px #0fdcf9; pointer-events: none; }
.door { position: absolute; transform: translate(-50%, -50%); border: 1px solid #ffd7d7; background: #c3444a; color: white; border-radius: 3px; min-width: 24px; height: 23px; display: flex; align-items: center; justify-content: center; pointer-events: auto; box-shadow: 0 0 0 2px #0008; font: bold 14px var(--mono); }
.door.open { background: #138257; border-color: #adffe0; }
.door:hover { filter: brightness(1.3); }
.right { display: flex; flex-direction: column; background: #08131c; font-family: var(--mono); }
.right .panelhead { background: #112332; }
.right .panelhead h2 { color: var(--mint); }
.terminal-strip { flex-shrink: 0; display: flex; justify-content: space-between; gap: 8px; padding: 8px 14px; color: #8ca6ba; font-size: 9px; letter-spacing: .09em; border-bottom: 1px dashed #254353; }
.terminal-indicator { color: var(--mint); }
.chat { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 16px; display: flex; flex-direction: column; gap: 18px; font-family: var(--terminal-font); background: repeating-linear-gradient(0deg, transparent 0 2px, #0003 2px 3px), radial-gradient(ellipse at center, #0b1e30, #020810 85%); box-shadow: inset 0 0 40px #0008; }
.message { max-width: 100%; flex-shrink: 0; font-size: clamp(13px, 1vw, 15px); line-height: 1.45; letter-spacing: .035em; }
.message .author { font-size: 9px; letter-spacing: .12em; margin-bottom: 6px; font-weight: 700; color: #91b4cf; }
.message.bot .author::before { content: 'RX ◂ '; color: var(--mint); }
.message .bubble { padding: 3px 0 3px 12px; background: transparent; border-left: 2px solid #3e839f; color: #b8eaff; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 0 10px #86dcff1a; }
.message.bot.code .bubble { color: #f0f3f5; border-left-color: #7e9098; text-shadow: none; }
.message.bot.code .author { color: #b6c1c7; }
.message.bot.code .author::before { color: #dce4e8; }
.message.bot.gpt .author { color: var(--mint); }
.message.bot.gpt .bubble { color: var(--phosphor); border-left-color: #249fc6; text-shadow: 0 0 2px #40eaff66, 0 0 8px #40eaff38; }
.message.bot.gpt .author { color: var(--phosphor); }
.message.bot.gpt .author::before { color: var(--phosphor); }
.message.user { align-self: flex-end; max-width: 90%; }
.message.user .author { text-align: right; color: #8dc3d5; }
.message.user .author::before { content: 'TX ▸ '; }
.message.user .bubble { padding: 9px 12px; border: 1px solid #294b57; border-right: 2px solid var(--cyan); background: #10232b; color: #c2e8f4; text-shadow: none; }
.actions { flex-shrink: 0; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid #284353; background: #0b1926; }
.action { background: #122738; color: #b7d7ef; border: 1px solid #365b71; padding: 7px 9px; font: 10px var(--mono); }
.action:hover { border-color: var(--mint); color: var(--mint); }
#chat-form { flex-shrink: 0; padding: 0 12px 9px; display: flex; align-items: stretch; gap: 7px; }
#chat-form::before { content: '>'; display: flex; align-items: center; color: var(--mint); font-size: 20px; }
input { min-width: 0; background: #06111c; border: 1px solid #36556c; color: #d0f2ff; padding: 10px; outline: none; border-radius: 0; }
input:focus { border-color: var(--mint); box-shadow: 0 0 0 1px #80e7ff22; }
input::placeholder { color: #86a4bb; }
#message { flex: 1; font: 18px var(--terminal-font); color: #fff; letter-spacing: .035em; }
#chat-form button, 
.disclaimer { flex-shrink: 0; color: #9aafc5; font: 9px/1.5 var(--mono); margin: 0; padding: 0 12px 9px; overflow-wrap: anywhere; }
#ai-status { display: inline-block; max-width: 100%; }
.disclaimer:has(#ai-status:empty) { display: none; }
.chat, 
dialog { background: #10221b; border: 1px solid #54896a; box-shadow: 0 25px 100px #000b; color: #ddf2e4; width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; padding: 25px; font-family: var(--mono); }
dialog::backdrop { background: #020810ce; }
dialog p { font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
@media (max-width: 820px) {
  .topbar { flex-basis: 50px; padding: 8px 12px; }
  .brand h1 { font-size: 12px; }.brand small { font-size: 8px; letter-spacing: .05em; }
  .layout { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 35%) minmax(0, 1fr); gap: 8px; padding: 8px; }
  .left { grid-template-columns: minmax(0, 1fr) minmax(125px, 32%); grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding-bottom: 6px; }
  .left .panelhead { grid-column: 1 / -1; padding: 8px 10px; }
  .map-area { margin: 0 0 0 6px; }.mapframe { width: min(100%, calc(23dvh * 888 / 861)); }
  @supports (height: 1cqh) { .mapframe { width: min(100%, calc(100cqh * 888 / 861)); } }
  .legend, 
  .right .panelhead { padding: 9px 12px; }.terminal-strip { padding: 6px 12px; font-size: 8px; }
  .chat { padding: 12px; gap: 13px; }.message { font-size: 12px; }
  .actions { padding: 7px 10px; }.action { padding: 6px; font-size: 9px; }
  #chat-form { padding: 0 10px 7px; }#message { font-size: 16px; padding: 9px; }
  .disclaimer { padding: 0 10px 7px; font-size: 8px; }
}
@media (max-width: 420px) {
  .brand { gap: 7px; }.brand h1 { font-size: 10px; }.brand small { font-size: 7px; }
  .panelhead h2 { font-size: 9px; }.panelhead > span { font-size: 8px; }
  .door { min-width: 19px; height: 19px; font-size: 12px; }.astronaut { padding: 2px; font-size: 11px; }
  #chat-form button { padding: 0 8px; font-size: 9px; }
}
@media (max-height: 480px) {
  body { min-height: 480px; height: auto; overflow: auto; }
  .layout { height: 430px; flex: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }.api-meter { flex-shrink: 0; padding: 8px 12px; border-bottom: 1px solid #294553; background: #0d2030; font: 9px/1.5 var(--mono); color: #9fb8cf; }
.api-meter-main { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; }
.api-meter-main b { color: #bdefff; margin-left: 5px; font-size: 11px; }
#api-tokens { margin-left: auto; }
#api-meter-reset { color: #aacbe3; background: transparent; border: 1px solid #375b70; padding: 3px 6px; font: inherit; }
.api-meter details { margin-top: 3px; }.api-meter summary { cursor: pointer; }.api-meter p { margin: 5px 0 0; }
.api-meter details[open] { max-height: 90px; overflow: auto; }
@media (max-width: 820px) { .api-meter { padding: 5px 10px; font-size: 8px; }.api-meter-main { gap: 3px 8px; }.api-meter-main b { font-size: 10px; } }
.right { position: relative; isolation: isolate; }
.oxygen-panel { flex-shrink: 0; padding: 8px 12px; border-bottom: 1px solid #294553; color: #bdefff; font: 10px var(--mono); }
.oxygen-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.oxygen-panel progress { display: block; width: 100%; height: 10px; accent-color: #70d9ff; }
.oxygen-panel.low { color: #ffd482; }.oxygen-panel.low progress { accent-color: #ffd482; }
.oxygen-panel.critical { color: #ff8585; }.oxygen-panel.critical progress { accent-color: #ff8585; }
.chat-screen { position: relative; display: flex; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; }
.chat-static { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url('estatica.png') center / cover; opacity: .04; animation: static-idle 900ms steps(1, end) infinite; }
.waiting-response .chat-static { animation: static-waiting 450ms steps(1, end) infinite; }
@keyframes static-idle {
  0%, 100% { opacity: .025; background-position: 50% 50%; transform: scale(1, 1); }
  15%, 61% { opacity: .055; background-position: 48% 53%; transform: scale(-1, 1); }
  28%, 78% { opacity: .035; background-position: 53% 47%; transform: scale(1, -1); }
  43%, 92% { opacity: .08; background-position: 49% 51%; transform: scale(-1, -1); }
}
@keyframes static-waiting {
  0%, 100% { opacity: .12; background-position: 50% 50%; transform: scale(1, 1); }
  17%, 68% { opacity: .23; background-position: 48% 54%; transform: scale(-1, 1); }
  34%, 85% { opacity: .16; background-position: 54% 46%; transform: scale(1, -1); }
  51% { opacity: .30; background-position: 49% 52%; transform: scale(-1, -1); }
}
.transmission-status { flex: 0 0 26px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #7998b3; font: 9px var(--mono); letter-spacing: .08em; border-top: 1px dashed #213b50; }
.transmitting .transmission-status { color: #a7e5ff; }
#transmission-glyph { width: 10px; color: var(--mint); }
#transmission-wait { color: #fff; font-weight: bold; text-shadow: 0 0 5px #ffffff55; animation: terminal-cursor 800ms step-end infinite; }
#transmission-wait[hidden] { display: none; }
#skip-typing { margin-left: auto; color: #b9daef; background: transparent; border: 1px solid #36556c; padding: 2px 5px; font: 9px var(--mono); }
#skip-typing[hidden] { display: none; }
.bubble.typing > span[aria-hidden]::after { content: '▌'; color: currentColor; animation: terminal-cursor 850ms step-end infinite; }
.bubble .chat-highlight { color: #fff; text-shadow: 0 0 4px #ffffff30; }
@keyframes terminal-cursor { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
#chat-form::before { animation: terminal-cursor 1100ms step-end infinite; }
.right.waiting-response #chat-form::before { visibility: hidden; animation: none; }
#chat-form:has(#message:disabled)::before { visibility: hidden; animation: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .chat-static { opacity: .025; }.waiting-response .chat-static { opacity: .08; } *, *::before, *::after { animation: none !important; } }
.reference-map { grid-template-rows: auto minmax(0, 1fr) auto auto; padding-bottom: 12px; }
.inventory-panel { margin: 0 12px; padding: 8px 12px; border: 1px solid #294553; background: #08131c; font: 10px/1.5 var(--mono); }
.inventory-panel h3 { margin: 0 0 5px; color: #bdefff; font: inherit; letter-spacing: .08em; }
#inventory-items { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; max-height: 74px; overflow: auto; }
#inventory-items li { padding: 3px 7px; border: 1px solid #32627c; background: #123047; color: #40eaff; overflow-wrap: anywhere; max-width: 100%; }
#inventory-status { display: block; color: #8fa6bd; font-size: 9px; }
#inventory-status:empty { display: none; }
.reference-map .oxygen-panel { margin: 0 12px; border: 1px solid #294553; background: #08131c; }
#map-markers { position: absolute; inset: 0; pointer-events: none; }
#map-markers .door { pointer-events: auto; cursor: default; }
#map-markers .door { filter: drop-shadow(0 1px 2px #000); background: transparent; border: 0; color: #ff4040; box-shadow: none; font-size: 0; }
#map-markers .door.open { background: transparent; border: 0; color: #39ff69; }
#map-markers .door::before { content: ''; width: 21px; height: 25px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M6 12V8a6 6 0 0 1 12 0v4' fill='none' stroke='white' stroke-width='3'/%3E%3Crect x='3' y='11' width='18' height='15' rx='2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; }
#map-markers .door.open::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 12V8a5 5 0 0 1 10 0' fill='none' stroke='white' stroke-width='3'/%3E%3Crect x='3' y='11' width='18' height='15' rx='2' fill='white'/%3E%3C/svg%3E"); }
#map-markers .astronaut { z-index: 2; pointer-events: auto; cursor: default; user-select: none; width: clamp(28px, 3vw, 40px); padding: 0; border-radius: 0; border: 0; background: transparent; box-shadow: none; transition: left 1.5s ease, top 1.5s ease; }
#map-markers .astronaut img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 3px #40eaff) drop-shadow(0 0 8px #40eaff99); }
#map-markers .door { user-select: none; }
.map-objective { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: default; user-select: none; color: #fff; font: bold 28px/1 var(--mono); text-shadow: 0 0 5px #40eaff, 0 1px 3px #000; }
#map-markers [tabindex]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#map-tooltip { position: fixed; z-index: 100; pointer-events: none; max-width: min(300px, calc(100vw - 16px)); padding: 10px 13px; border: 1px solid #75eaff; border-radius: 3px; background: #071521f5; color: #d7f5ff; box-shadow: 0 0 12px #40eaff30, 0 5px 18px #0009; font: 12px/1.6 var(--mono); white-space: pre-line; text-align: center; }
#map-tooltip[hidden] { display: none; }
#map-markers .astronaut, .map-objective { animation: astronaut-signal 3s linear infinite; }
#map-markers .astronaut::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, #fff9 0 1px, transparent 1px 3px); animation: astronaut-static 3s steps(1, end) infinite; }
@keyframes astronaut-signal {
  0%, 94%, 96%, 97%, 99%, 100% { opacity: 1; }
  94.5%, 95.5%, 97.5%, 98.5% { opacity: .3; }
  95%, 98% { opacity: .85; }
}
@keyframes astronaut-static {
  0%, 94%, 96%, 99%, 100% { opacity: 0; }
  94.5%, 95.5%, 97.5%, 98.5% { opacity: .65; }
}
.reference-map .mapframe { aspect-ratio: 1; width: min(100%, calc(100dvh - 245px)); }
@supports (height: 1cqh) { .reference-map .mapframe { width: min(100%, 100cqh); } }
.actions button[hidden] { display: none; }
#chat-form[hidden], #chat-actions[hidden] { display: none; }
#start-game { width: 100%; padding: 12px; text-align: center; font-weight: bold; animation: rescue-attention 1.4s steps(1, end) infinite; }
@keyframes rescue-attention {
  0%, 100% { background: #fff; color: #06111c; border-color: #fff; box-shadow: 0 0 14px #ffffff88; }
  50% { background: #122738; color: #fff; border-color: #80e7ff; box-shadow: 0 0 5px #40eaff44; }
}
#chat-form { padding-top: 9px; }
#chat-form #send-message { font-size: 28px; line-height: 1; min-width: 48px; padding: 0 12px; }
.cover { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; background: #020810; }
.cover img { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(100dvh - 115px); object-fit: contain; border: 1px solid #87ddff; box-shadow: 0 0 35px #000; }
.cover button, .tutorial-buttons button { padding: 12px 30px; border: 1px solid #80e7ff; background: #87ddff; color: #06111c; font: 22px var(--terminal-font); }
.cover button { min-width: 200px; box-shadow: 0 0 18px #40eaff44; }
#victory-screen { position: fixed; inset: 0; z-index: 1000; background: #020810; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; }
#victory-screen[hidden] { display: none; }
#victory-screen img { max-width: 100%; max-height: calc(100dvh - 115px); object-fit: contain; border: 1px solid #87ddff; }
#game-screen { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cover[hidden], #game-screen[hidden] { display: none; }
#tutorial { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: hidden; }
#tutorial::backdrop { background: transparent; }
#tutorial-spotlight { position: absolute; pointer-events: none; border: 2px solid #80e7ff; border-radius: 5px; box-shadow: 0 0 0 9999px #020810d9, 0 0 18px #40eaff66; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
#tutorial-card { position: absolute; z-index: 2; width: min(400px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid #80e7ff; background: #071521; color: #e0edf5; box-shadow: 0 0 25px #40eaff30; padding: 20px; font-family: var(--mono); transition: left .25s ease, top .25s ease; }

#tutorial h2 { margin: 12px 0; font: bold 16px/1.4 var(--mono); color: #fff; }
#tutorial p { margin: 0; font: 12px/1.7 var(--mono); white-space: normal; }
#tutorial-text strong { color: #40eaff; }
.tutorial-buttons { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.tutorial-buttons button { padding: 9px 20px; font: 12px var(--mono); }
#tutorial-play { background: transparent; color: #d7f5ff; }
#tutorial-next[hidden] { display: none; }
.tutorial-target { outline: 2px solid #80e7ff; outline-offset: -3px; box-shadow: inset 0 0 20px #40eaff30; }
@media (max-width: 820px) { #tutorial-card { padding: 16px; }.cover { padding: 12px; } }
@media (max-width: 820px) {
  .reference-map { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; padding-bottom: 0; }
  .reference-map .oxygen-panel { grid-column: 1 / -1; grid-row: 3; margin: 0 6px 6px; padding: 5px 8px; font-size: 9px; }
  .reference-map .inventory-panel { grid-column: 1 / -1; grid-row: 4; margin: 0 6px 6px; padding: 5px 8px; font-size: 9px; }
  #inventory-items { max-height: 46px; }
}