/* THE DEEP END — css/style.css (Stage A)
 * Base styles: fullscreen canvas, loading/error overlays, UI root, toasts.
 * Stage B adds: title screen, help overlay, terminals, mobile touch controls,
 * interact prompt, VR button. (Stage A temporary toolbar removed in stage B.) */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #020608;
  color: #cfe8f0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}

#canvas-wrap, #canvas-wrap canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

#ui-root {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10;
}
#ui-root button, #ui-root input, #ui-root label { pointer-events: auto; }

/* ---- loading overlay ---- */
#loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, #06222e 0%, #020608 75%);
}
.load-inner { text-align: center; }
.load-title {
  font-size: 42px; letter-spacing: 14px; color: #7fd4e8;
  text-shadow: 0 0 24px rgba(127, 212, 232, 0.5);
}
.load-sub { margin-top: 12px; color: #4a7a8a; letter-spacing: 4px; }

/* ---- error overlay ---- */
#error-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 8, 0.85);
}
.err-box {
  max-width: 640px; padding: 24px;
  background: #0a1418; border: 1px solid #a33;
  border-radius: 8px;
}
.err-title { font-size: 18px; color: #ff9a8a; margin-bottom: 12px; }
.err-msg {
  white-space: pre-wrap; font-size: 13px; color: #cfe8f0;
  max-height: 300px; overflow: auto;
}
.err-box button { margin-top: 12px; }

/* ---- toasts ---- */
#toast-area {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 50; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.toast {
  background: rgba(6, 24, 32, 0.92);
  border: 1px solid #2a6a7a; border-radius: 6px;
  padding: 8px 16px; font-size: 14px; color: #bfe8f4;
  transition: opacity 0.6s;
}
.toast.fade { opacity: 0; }

/* ---- title screen (stage B) ---- */
#title-screen {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, #06222e 0%, #020608 78%);
  pointer-events: auto;
}
.title-inner { text-align: center; max-width: 640px; padding: 24px; }
.title-game {
  font-size: 54px; letter-spacing: 18px; color: #7fd4e8;
  text-shadow: 0 0 32px rgba(127, 212, 232, 0.55);
}
.title-sub { margin: 14px 0 30px; color: #4a7a8a; letter-spacing: 2px; font-size: 15px; }
.title-btns { display: flex; gap: 14px; justify-content: center; margin-bottom: 26px; }
.title-btns button, #vr-button {
  background: #0e3a4a; color: #cfe8f0;
  border: 1px solid #2a6a7a; border-radius: 6px;
  padding: 12px 28px; font-size: 16px; letter-spacing: 2px; cursor: pointer;
  pointer-events: auto;
}
.title-btns button:hover, #vr-button:hover { background: #155063; }
.title-controls { color: #6a9aaa; font-size: 13px; line-height: 1.8; }
.title-note { margin-top: 12px; color: #3f6a7a; font-size: 12px; letter-spacing: 1px; }

/* ---- VR button (in-game) ---- */
#vr-button {
  position: absolute; top: 10px; right: 10px;
  padding: 8px 16px; font-size: 13px;
}

/* ---- help overlay ---- */
#help-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  background: rgba(2, 8, 12, 0.72);
  pointer-events: auto;
}
.help-box {
  background: #08141a; border: 1px solid #2a6a7a; border-radius: 10px;
  padding: 22px 28px; max-width: 520px; max-height: 86vh; overflow: auto;
}
.help-title { color: #7fd4e8; letter-spacing: 3px; font-size: 15px; margin-bottom: 8px; }

/* ---- terminals ---- */
.terminal {
  position: fixed; z-index: 60;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, 92vw); max-height: 80vh;
  display: none; flex-direction: column;
  background: rgba(4, 18, 24, 0.97);
  border: 1px solid #2a6a7a; border-radius: 10px;
  pointer-events: auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.term-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #1d4a58;
}
.term-title { color: #7fd4e8; letter-spacing: 3px; font-size: 14px; }
.term-close {
  background: none; border: 1px solid #2a6a7a; border-radius: 4px;
  color: #cfe8f0; padding: 4px 10px; cursor: pointer; font-size: 13px;
}
.term-tabs { display: flex; gap: 6px; padding: 10px 14px 0; }
.term-tab {
  background: #0a222b; color: #8ab8c8;
  border: 1px solid #1d4a58; border-bottom: none; border-radius: 6px 6px 0 0;
  padding: 8px 16px; font-size: 13px; letter-spacing: 1px; cursor: pointer;
}
.term-tab.active { background: #0e3a4a; color: #cfe8f0; }
.term-body { padding: 16px; overflow: auto; font-size: 14px; }
.term-table { border-collapse: collapse; width: 100%; }
.term-table td { padding: 6px 10px; border-bottom: 1px solid #123240; }
.term-table td:first-child { color: #4a7a8a; letter-spacing: 1px; width: 38%; }
.term-dim { color: #4a7a8a; font-size: 13px; }

/* ---- fabrication tab (stage C) ---- */
.term-body button[data-build], .term-body button[data-kit] {
  background: #0e3a4a; color: #cfe8f0;
  border: 1px solid #2a6a7a; border-radius: 4px;
  padding: 3px 10px; margin-left: 8px; cursor: pointer;
  font-size: 12px; letter-spacing: 1px;
}
.term-body button[data-build]:hover:not(:disabled),
.term-body button[data-kit]:hover:not(:disabled) { background: #155063; }
.term-body button[data-build]:disabled { opacity: 0.35; cursor: default; }
.fab-bar {
  display: inline-block; width: 140px; height: 10px;
  background: #0a222b; border: 1px solid #1d4a58; border-radius: 3px;
  vertical-align: middle; overflow: hidden;
}
.fab-fill { height: 100%; background: #3fd4c0; }

/* ---- interact prompt ---- */
#interact-prompt {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 55; display: none;
  background: rgba(6, 24, 32, 0.92);
  border: 1px solid #2a6a7a; border-radius: 6px;
  padding: 7px 16px; font-size: 13px; color: #ffe28a;
  pointer-events: none; white-space: nowrap;
}

/* ---- mobile touch controls (stage B) ---- */
#touch-ui { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#joy-zone {
  position: absolute; left: 0; bottom: 0; width: 45%; height: 55%;
  pointer-events: auto;
}
#joy-base {
  position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border: 2px solid #2a6a7a; border-radius: 50%;
  background: rgba(10, 34, 43, 0.45); display: none;
}
#joy-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(127, 212, 232, 0.35); border: 2px solid #7fd4e8;
}
#vert-slider {
  position: absolute; right: 18px; bottom: 120px; width: 64px; height: 220px;
  pointer-events: auto;
}
#vert-track {
  position: relative; width: 100%; height: 100%;
  border: 2px solid #2a6a7a; border-radius: 12px;
  background: rgba(10, 34, 43, 0.45);
}
#vert-knob {
  position: absolute; left: 6px; right: 6px; height: 34px; top: 50%;
  margin-top: -17px; border-radius: 8px;
  background: rgba(127, 212, 232, 0.35); border: 2px solid #7fd4e8;
}
.vert-label {
  text-align: center; color: #4a7a8a; font-size: 12px; margin-top: 6px;
}
#touch-btns {
  position: absolute; right: 18px; bottom: 24px;
  display: flex; gap: 10px; pointer-events: auto;
}
#touch-btns button {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(14, 58, 74, 0.85); color: #cfe8f0;
  border: 2px solid #2a6a7a; font-size: 12px; letter-spacing: 1px;
}
#touch-btns button.on { border-color: #ffe28a; color: #ffe28a; }
/* Stage I: the SOS button reads as an emergency control. */
#touch-btns #tb-sos { border-color: #a03a2a; color: #ff9a7a; }

/* ---- refit: autopilot touch toggles ---- */
#touch-ap {
  position: absolute; left: 18px; bottom: 24px;
  display: flex; gap: 8px; pointer-events: auto;
}
#touch-ap button {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(14, 58, 74, 0.85); color: #cfe8f0;
  border: 2px solid #2a6a7a; font-size: 11px; letter-spacing: 1px;
}
#touch-ap button.on { border-color: #51ff7a; color: #51ff7a; }

/* ---- refit: autopilot + waypoint terminal buttons ---- */
.term-body button[data-ap], .term-body button[data-wp-go],
.term-body button[data-wp-del], .term-body button#wp-save {
  background: #0e3a4a; color: #cfe8f0;
  border: 1px solid #2a6a7a; border-radius: 4px;
  padding: 3px 10px; margin: 2px 4px 2px 0; cursor: pointer;
  font-size: 12px; letter-spacing: 1px;
}
.term-body button[data-ap]:hover, .term-body button[data-wp-go]:hover,
.term-body button[data-wp-del]:hover, .term-body button#wp-save:hover { background: #155063; }
.term-body input#wp-name {
  background: #0a222b; color: #cfe8f0;
  border: 1px solid #2a6a7a; border-radius: 4px;
  padding: 4px 8px; font-size: 13px;
}

/* ---- stage D: upgrades tab ---- */
.term-body button[data-mod], .term-body button[data-hull], .term-body button[data-comp] {
  background: #0e3a4a; color: #cfe8f0;
  border: 1px solid #2a6a7a; border-radius: 4px;
  padding: 3px 10px; margin-left: 8px; cursor: pointer;
  font-size: 12px; letter-spacing: 1px;
}
.term-body button[data-mod]:hover, .term-body button[data-hull]:hover,
.term-body button[data-comp]:hover { background: #155063; }
@keyframes justInstalled {
  0% { background: rgba(63, 212, 192, 0.55); }
  100% { background: transparent; }
}
.term-table tr.just-installed td { animation: justInstalled 1.5s ease-out; }

/* ---- part 1 (directive 3): dive overlay + airlock panel ---- */
#dive-overlay {
  position: fixed; right: 14px; bottom: 14px; z-index: 40;
  background: rgba(4, 20, 26, 0.82); border: 1px solid #1d4a58; border-radius: 6px;
  padding: 10px 12px; font-family: monospace; color: #9fe8ff; font-size: 13px;
  min-width: 230px; pointer-events: none;
}
#dive-overlay .dive-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#dive-overlay .dive-label { color: #3f7a8c; width: 36px; font-size: 11px; letter-spacing: 1px; }
#dive-overlay .dive-bar { flex: 1; height: 10px; background: #0a222b; border: 1px solid #1d4a58; border-radius: 3px; overflow: hidden; }
#dive-overlay .dive-fill { height: 100%; background: #51ff7a; transition: width 0.3s; }
#dive-overlay .dive-fill.bat { background: #66ccff; }
#dive-overlay .dive-val { min-width: 44px; text-align: right; }
#dive-overlay .dive-recall { color: #9fe8ff; font-size: 14px; letter-spacing: 1px; }
#dive-overlay .dive-dim { color: #3f7a8c; font-size: 11px; }

#airlock-panel {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 40;
  background: rgba(4, 20, 26, 0.9); border: 1px solid #2a6a7a; border-radius: 6px;
  padding: 10px 16px; font-family: monospace; color: #9fe8ff; text-align: center;
  min-width: 220px; pointer-events: none;
}
#airlock-panel .al-title { color: #3f7a8c; font-size: 11px; letter-spacing: 2px; }
#airlock-panel .al-state { font-size: 18px; font-weight: bold; letter-spacing: 2px; margin: 2px 0 6px; color: #66ccff; }
#airlock-panel .al-bar { height: 8px; background: #0a222b; border: 1px solid #1d4a58; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
#airlock-panel .al-fill { height: 100%; background: #2a9ac2; }
#airlock-panel .al-hint { color: #ffb04a; font-size: 12px; }

/* ---- part 2: civilization touchscreen overlay (focus mode) ---- */
/* Retro-futuristic: phosphor amber/cyan on near-black. Non-modal: the
   world keeps running while this is open (directive — no auto-pause).
   Big touch targets for mobile; comfortable reading on desktop. */
#civ-overlay {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 60; width: min(860px, 94vw); max-height: 88vh;
  display: none; flex-direction: column;
  background: rgba(5, 11, 14, 0.97);
  border: 2px solid #2a6a7a; border-radius: 10px;
  box-shadow: 0 0 40px rgba(255, 176, 74, 0.12), inset 0 0 60px rgba(0,0,0,0.6);
  font-family: monospace; color: #7fd4e8;
}
.civ-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid #1d4a58;
}
.civ-title { color: #ffb04a; font-weight: bold; letter-spacing: 3px; font-size: 16px; }
.civ-live { color: #51ff7a; font-size: 11px; letter-spacing: 2px; }
.civ-close {
  margin-left: auto; background: #0a1e26; color: #ff6a5a;
  border: 1px solid #5a2a26; border-radius: 6px; font-size: 16px;
  width: 40px; height: 40px; cursor: pointer;
}
.civ-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.civ-tab {
  background: #081418; color: #3f7a8c; border: 1px solid #1d4a58;
  border-radius: 6px; padding: 10px 14px; font-family: monospace; font-size: 13px;
  letter-spacing: 1px; cursor: pointer; min-height: 44px;
}
.civ-tab.active { background: #123240; color: #ffb04a; border-color: #ffb04a; }
.civ-transport {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid #123240;
}
.civ-tbtn {
  background: #0a1e26; color: #7fd4e8; border: 1px solid #1d4a58;
  border-radius: 6px; padding: 8px 14px; font-family: monospace; font-size: 14px;
  cursor: pointer; min-height: 44px; min-width: 56px;
}
.civ-now { color: #3f7a8c; font-size: 12px; }
.civ-body { padding: 12px 16px 16px; overflow-y: auto; font-size: 14px; }
.civ-h { color: #ffb04a; font-weight: bold; letter-spacing: 2px; font-size: 13px; margin: 10px 0 4px; }
.civ-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid #0e2833; align-items: center; }
.civ-lab { color: #3f7a8c; letter-spacing: 1px; width: 34%; flex-shrink: 0; font-size: 12px; }
.civ-val { color: #7fd4e8; flex: 1; }
.civ-row.warn .civ-val { color: #ff6a5a; }
.civ-btn {
  display: block; width: 100%; text-align: left; margin: 5px 0;
  background: #0e2a36; color: #7fd4e8; border: 1px solid #1d4a58;
  border-radius: 6px; padding: 12px 14px; font-family: monospace; font-size: 14px;
  cursor: pointer; min-height: 48px;
}
.civ-btn:hover { background: #155063; }
.civ-gap { height: 8px; }
.civ-bar { flex: 1; height: 14px; background: #0a222b; border: 1px solid #1d4a58; border-radius: 3px; overflow: hidden; }
.civ-fill { height: 100%; background: #7fd4e8; }

/* Stage I: offline "while you were away" report modal. */
#offline-report {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92vw); max-height: 86vh; overflow-y: auto;
  background: #06121a; border: 2px solid #2a7a94; border-radius: 8px;
  padding: 22px 26px; z-index: 1200; color: #bfe3ee;
  font-family: monospace; box-shadow: 0 0 40px rgba(42,122,148,.35);
}
#offline-report .term-title {
  font-size: 20px; letter-spacing: 3px; color: #7fd4e8; margin-bottom: 12px;
  text-align: center;
}
#offline-report #offline-ok {
  display: block; margin: 16px auto 0; padding: 10px 34px;
  background: #0e3a48; color: #bfe3ee; border: 1px solid #2a7a94;
  border-radius: 4px; font-family: monospace; font-size: 15px; cursor: pointer;
}
#offline-report #offline-ok:hover { background: #155063; }