/* ═══════════════════════════════════════════════
   ISS TERMINAL — style.css
   Palette mirrors icestreams.io exactly:
     --ice:     #A8D8EA
     --steel:   #2E86AB
     --signal:  #39FF14
     --spice:   #FF8C00
     --white:   #F0F4F8
     --dim:     #6B7B8D
     --base:    #080808
     --surface: #0E1014
     --border:  #1C2028
═══════════════════════════════════════════════ */

:root {
  --ice:        #A8D8EA;
  --steel:      #2E86AB;
  --signal:     #39FF14;
  --spice:      #FF8C00;
  --white:      #F0F4F8;
  --dim:        #6B7B8D;
  --base:       #080808;
  --surface:    #0E1014;
  --border:     #1C2028;
  --border-ice: rgba(168,216,234,0.15);

  --font-mark: 'Orbitron', sans-serif;
  --font-ui:   'JetBrains Mono', monospace;
  --font-body: 'Crimson Pro', serif;

  --header-h: 52px;
  --footer-h: 40px;
  --sidebar-w: 300px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--base);
  color: var(--white);
  font-family: var(--font-ui);
}

/* ── Canvas background ── */
#stream-canvas {
  position: fixed; inset: 0; z-index: 0;
  opacity: 0.06; pointer-events: none;
}

/* ── Scanlines ── */
.scanlines {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.10) 4px
  );
}

/* ── Grain ── */
.grain {
  position: fixed; inset: -50%; z-index: 9990; pointer-events: none;
  width: 200%; height: 200%; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(1) infinite;
}
@keyframes grain-shift {
  0%{transform:translate(0,0)} 15%{transform:translate(-2%,-3%)} 30%{transform:translate(3%,1%)}
  45%{transform:translate(-1%,4%)} 60%{transform:translate(4%,-2%)} 75%{transform:translate(-3%,3%)}
  90%{transform:translate(2%,-4%)} 100%{transform:translate(0,0)}
}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h); z-index: 9999;
  background: rgba(8,8,8,0.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 clamp(14px,2vw,28px); gap: 12px;
}

.back-link {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--dim);
  font-size: 0.72rem; letter-spacing: 0.1em;
  transition: color 0.2s ease;
  flex-shrink: 0;
}
.back-link:hover { color: var(--ice); }
.back-arrow { font-size: 0.85rem; }

.wordmark {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mark); flex-shrink: 0;
}
.wm-iss   { font-size: clamp(0.8rem,1.4vw,1.1rem); font-weight: 900; color: var(--ice); letter-spacing: 0.1em; }
.wm-sep   { font-size: 0.75rem; color: var(--dim); font-family: var(--font-ui); }
.wm-term  { font-size: clamp(0.7rem,1.1vw,0.9rem); font-weight: 700; color: var(--steel); letter-spacing: 0.18em; }

.header-status {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 8px var(--signal);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100%{opacity:1;box-shadow:0 0 8px var(--signal)}
  50%{opacity:0.4;box-shadow:0 0 3px var(--signal)}
}
.status-text {
  font-size: clamp(0.58rem,0.85vw,0.76rem);
  color: var(--signal); letter-spacing: 0.14em;
}

/* ══════════════════════════════════════
   APP LAYOUT
══════════════════════════════════════ */
#app-layout {
  position: fixed;
  top: var(--header-h); bottom: var(--footer-h);
  left: 0; right: 0;
  display: flex; z-index: 2; overflow: hidden;
}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: rgba(14,16,20,0.96);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden; z-index: 10;
}

.mode-toggle {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.mode-btn {
  flex: 1; padding: 10px 0;
  background: transparent; border: none;
  font-family: var(--font-ui); font-size: 0.7rem;
  font-weight: 600; letter-spacing: 0.18em;
  color: var(--dim); cursor: pointer;
  transition: color 0.2s, background 0.2s;
  border-bottom: 2px solid transparent;
}
.mode-btn:hover { color: var(--ice); }
.mode-btn.active {
  color: var(--ice); background: rgba(168,216,234,0.04);
  border-bottom-color: var(--ice);
}

.side-panel {
  flex: 1; overflow-y: auto; padding: 12px 0;
}
.side-panel.hidden { display: none; }
.side-panel::-webkit-scrollbar { width: 3px; }
.side-panel::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Free mode: command reference ── */
.ref-section { margin-bottom: 16px; padding: 0 14px; }
.ref-head {
  font-size: 0.72rem; font-weight: 600; color: var(--steel);
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 7px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.ref-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  align-items: baseline;
}
.ref-cmd {
  font-size: 0.76rem; color: var(--ice);
  white-space: nowrap; font-weight: 600;
  padding: 1px 0; line-height: 1.5;
}
.ref-desc {
  font-size: 0.72rem; color: var(--dim);
  line-height: 1.5;
}
.ref-tip {
  margin: 10px 14px 0;
  padding: 9px 11px;
  background: rgba(46,134,171,0.06);
  border-left: 2px solid var(--steel);
  font-size: 0.72rem; color: var(--dim);
  line-height: 1.6;
}
.tip-label {
  display: block; color: var(--steel);
  font-size: 0.68rem; letter-spacing: 0.14em;
  margin-bottom: 4px;
}

/* ── Guided mode: mission tree ── */
.guide-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.guide-progress-label { font-size: 0.72rem; color: var(--dim); letter-spacing: 0.1em; }
.guide-progress-val   { font-size: 0.8rem; color: var(--ice); font-weight: 600; }

/* collapsible module */
.mission-module { margin-bottom: 2px; }
.module-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 7px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--steel); letter-spacing: 0.13em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
}
.module-head:hover { color: var(--ice); background: rgba(168,216,234,0.04); }
.module-head.has-active { color: var(--ice); border-left-color: var(--steel); }
.module-chevron {
  font-size: 0.65rem; color: var(--dim);
  transition: transform 0.2s ease;
  flex-shrink: 0; margin-left: 6px;
}
.mission-module.open .module-chevron { transform: rotate(90deg); }
.module-missions {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}
.mission-module.open .module-missions { max-height: 2000px; }

.mission-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px; cursor: pointer;
  transition: background 0.15s;
  border-left: 2px solid transparent;
}
.mission-item:hover { background: rgba(168,216,234,0.04); }
.mission-item.active {
  background: rgba(168,216,234,0.07);
  border-left-color: var(--ice);
}
.mission-item.complete { opacity: 0.55; }
.mission-item.complete:hover { opacity: 0.8; }

.mi-status {
  width: 13px; height: 13px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 50%;
  position: relative;
}
.mission-item.complete .mi-status {
  background: var(--signal); border-color: var(--signal);
  box-shadow: 0 0 6px rgba(57,255,20,0.4);
}
.mission-item.active .mi-status {
  border-color: var(--ice);
  box-shadow: 0 0 6px rgba(168,216,234,0.3);
}
.mi-label {
  font-size: 0.74rem; color: var(--dim); line-height: 1.4;
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.mission-item.active .mi-label  { color: var(--white); }
.mission-item.complete .mi-label{ color: var(--dim); }

/* ══════════════════════════════════════
   TERMINAL AREA
══════════════════════════════════════ */
#terminal-area {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}

/* ── Mission HUD ── */
#mission-hud {
  flex-shrink: 0;
  background: rgba(14,16,20,0.98);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
}
#mission-hud.hidden { display: none; }

.hud-inner { display: flex; flex-direction: column; gap: 4px; }
.hud-meta  { display: flex; align-items: baseline; gap: 8px; }
.hud-id    {
  font-size: 0.62rem; color: var(--steel); letter-spacing: 0.16em; font-weight: 600;
}
.hud-title { font-size: 0.72rem; color: var(--ice); font-weight: 600; letter-spacing: 0.05em; }
.hud-obj   { font-size: 0.7rem; color: var(--white); line-height: 1.5; }
.hud-actions { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; }
.hud-hint-btn {
  flex-shrink: 0; background: transparent; border: 1px solid var(--border);
  color: var(--dim); font-family: var(--font-ui); font-size: 0.58rem;
  letter-spacing: 0.14em; cursor: pointer; padding: 3px 8px;
  transition: color 0.2s, border-color 0.2s;
}
.hud-hint-btn:hover { color: var(--steel); border-color: var(--steel); }
.hud-hint { font-size: 0.65rem; color: var(--dim); line-height: 1.5; display: none; }
.hud-hint.visible { display: block; }

/* ── Mission success overlay ── */
#mission-success {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(8,8,8,0.88); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
#mission-success.hidden { display: none; }

.ms-inner {
  max-width: 460px; width: 90%;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 2px solid var(--signal);
  padding: clamp(20px,3vh,32px) clamp(20px,3vw,32px);
  display: flex; flex-direction: column; gap: 14px;
}
.ms-signal {
  font-size: 0.72rem; color: var(--signal); letter-spacing: 0.18em;
  text-shadow: 0 0 12px rgba(57,255,20,0.4);
}
.ms-msg { font-family: var(--font-body); font-size: 1.08rem; color: var(--white); line-height: 1.65; }
.ms-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-next {
  padding: 8px 20px; background: var(--ice); color: var(--base);
  border: none; font-family: var(--font-ui); font-size: 0.7rem;
  font-weight: 600; letter-spacing: 0.12em; cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.ms-next:hover { background: #c4e8f5; box-shadow: 0 4px 16px rgba(168,216,234,0.3); }
.ms-free {
  padding: 8px 16px; background: transparent; color: var(--dim);
  border: 1px solid var(--border); font-family: var(--font-ui);
  font-size: 0.7rem; letter-spacing: 0.1em; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.ms-free:hover { color: var(--white); border-color: var(--dim); }

/* ── Terminal ── */
#terminal-wrap {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 14px 20px 10px;
  cursor: text;
  background: var(--base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}
#terminal-wrap::-webkit-scrollbar { width: 4px; }
#terminal-wrap::-webkit-scrollbar-track { background: transparent; }
#terminal-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Output lines */
#term-output { font-family: var(--font-ui); font-size: clamp(0.72rem,1vw,0.88rem); line-height: 1.65; }
.term-line { white-space: pre-wrap; word-break: break-word; min-height: 1.65em; }
.term-line.tl-prompt { margin-top: 4px; }

/* Input row */
.term-input-row {
  display: flex; align-items: center; gap: 0;
  padding: 2px 0 4px;
  font-family: var(--font-ui); font-size: clamp(0.72rem,1vw,0.88rem);
}
.ps1 { white-space: nowrap; flex-shrink: 0; }
.ps1-user { color: var(--ice); }
.ps1-at   { color: var(--dim); }
.ps1-host { color: var(--ice); }
.ps1-sep  { color: var(--dim); }
.ps1-path { color: var(--steel); }
.ps1-dollar { color: var(--dim); margin-right: 6px; }

#term-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--white); font-family: var(--font-ui);
  font-size: clamp(0.72rem,1vw,0.88rem); caret-color: var(--ice);
  letter-spacing: 0.01em;
}
#term-input::selection { background: rgba(168,216,234,0.25); }

/* Terminal output color classes */
.c-err  { color: var(--spice); }
.c-ok   { color: var(--signal); }
.c-dim  { color: var(--dim); }
.c-ice  { color: var(--ice); }
.c-dir  { color: var(--ice); font-weight: 600; }
.c-exe  { color: var(--signal); }
.c-link { color: var(--steel); }
.c-perm { color: var(--dim); font-family: var(--font-ui); }
.c-cmd  { color: var(--white); }

/* Prompt echo in output */
.prompt-echo { color: var(--dim); margin-top: 4px; display: block; }
.prompt-echo .pe-cmd { color: var(--white); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
#site-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--footer-h); z-index: 9999;
  background: rgba(8,8,8,0.94);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 clamp(14px,2vw,28px); gap: 12px;
}
.footer-mark { font-family: var(--font-ui); font-size: 0.62rem; color: var(--ice); letter-spacing: 0.14em; }
.footer-note { font-family: var(--font-ui); font-size: 0.58rem; color: var(--dim); letter-spacing: 0.08em; }
.footer-copy { font-family: var(--font-ui); font-size: 0.56rem; color: var(--border); letter-spacing: 0.06em; }

/* ══════════════════════════════════════
   VIM EDITOR OVERLAY
══════════════════════════════════════ */
#vim-overlay {
  position: absolute; inset: 0; z-index: 60;
  background: var(--base);
  display: flex; flex-direction: column;
  font-family: var(--font-ui);
  font-size: clamp(0.72rem,1vw,0.88rem);
}
#vim-overlay.hidden { display: none; }

#vim-topbar {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 5px 14px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.vim-filename  { color: var(--ice); font-weight: 600; font-size: 0.7rem; flex-shrink: 0; }
.vim-keyhints  { color: var(--dim); font-size: 0.58rem; letter-spacing: 0.06em; }

#vim-editor-area {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: auto;
}
#vim-editor-area::-webkit-scrollbar { width: 3px; }
#vim-editor-area::-webkit-scrollbar-thumb { background: var(--border); }

#vim-lines { min-height: 100%; line-height: 1.65; }

.vim-line {
  display: flex; align-items: baseline;
  min-height: 1.65em;
}
.vim-line-number {
  width: 44px; flex-shrink: 0;
  color: var(--dim); text-align: right;
  padding-right: 14px;
  user-select: none; font-size: 0.8em;
  border-right: 1px solid var(--border);
}
.vim-line.active-line .vim-line-number {
  color: var(--white);
}
.vim-line-content {
  flex: 1; white-space: pre; padding: 0 10px;
  color: var(--white); position: relative;
}
.vim-line.active-line .vim-line-content {
  background: rgba(168,216,234,0.04);
}
.vim-tilde {
  padding-left: 10px;
  color: var(--border); user-select: none;
  width: 100%;
}
.vim-cursor-block {
  display: inline-block;
  background: var(--ice); color: var(--base);
  min-width: 0.55em;
}
.vim-cursor-insert {
  display: inline-block;
  border-left: 2px solid var(--ice);
  min-width: 0;
}

#vim-statusbar {
  flex-shrink: 0;
  background: var(--steel);
  padding: 2px 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.65rem; color: var(--base); font-weight: 700;
  letter-spacing: 0.06em;
}
#vim-statusbar.mode-insert  { background: var(--signal); }
#vim-statusbar.mode-command { background: var(--dim); }

#vim-cmdbar {
  flex-shrink: 0;
  background: var(--base);
  border-top: 1px solid var(--border);
  padding: 3px 10px;
  min-height: 1.8em; font-size: clamp(0.7rem,1vw,0.86rem);
  color: var(--white);
  display: flex; align-items: center;
  white-space: pre;
}
.vim-cmdprompt { color: var(--white); }
.vim-cmdtext   { color: var(--white); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
/* ══════════════════════════════════════
   MOBILE BAR & DRAWER  (hidden desktop)
══════════════════════════════════════ */
#mobile-bar {
  display: none; /* shown only on mobile */
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  z-index: 900;
  background: rgba(10,12,16,0.98);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  height: 42px;
  align-items: stretch;
  flex-shrink: 0;
}
#mobile-tabs {
  display: flex; flex: 1;
}
.mob-tab {
  flex: 1; padding: 0;
  background: transparent; border: none;
  font-family: var(--font-ui); font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.2em;
  color: var(--dim); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.mob-tab:hover  { color: var(--ice); }
.mob-tab.active { color: var(--ice); border-bottom-color: var(--ice); }

#mob-guide-controls {
  display: flex; align-items: center;
  gap: 10px; padding: 0 12px;
  border-left: 1px solid var(--border);
}
#mob-guide-controls.hidden { display: none; }
#mob-modules-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--ice); font-family: var(--font-ui);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: 3px; cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
#mob-modules-btn:hover { background: rgba(168,216,234,0.08); border-color: var(--ice); }
#mob-chevron { display: inline-block; transition: transform 0.2s ease; }
#mob-drawer.open #mob-chevron { transform: rotate(180deg); }
#mob-mission-progress {
  font-size: 0.68rem; color: var(--dim);
  white-space: nowrap; font-family: var(--font-ui);
}

/* Drawer — slides down from under mobile bar */
#mob-drawer {
  display: none; /* shown only on mobile */
  position: fixed;
  top: calc(var(--header-h) + 42px);
  left: 0; right: 0;
  z-index: 850;
  background: rgba(10,12,16,0.98);
  border-bottom: 1px solid var(--border);
  max-height: 0; overflow: hidden;
  transition: max-height 0.25s ease;
}
#mob-drawer.open { max-height: 60vh; overflow-y: auto; }

/* Mission items inside mobile drawer — same classes, looser touch targets */
#mob-mission-tree .module-head  { padding: 10px 16px 9px; font-size: 0.74rem; }
#mob-mission-tree .mission-item { padding: 10px 16px; }
#mob-mission-tree .mi-label     { font-size: 0.78rem; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 720px) {
  :root {
    --mob-bar-h: 42px;
  }

  /* Hide desktop sidebar entirely */
  #sidebar { display: none !important; }

  /* Show mobile bar and drawer */
  #mobile-bar { display: flex; }
  #mob-drawer  { display: block; }

  /* Push app layout down to clear header + mobile bar */
  #app-layout {
    top: calc(var(--header-h) + var(--mob-bar-h));
  }

  /* When drawer is open, push terminal area down so it's not covered */
  body.drawer-open #app-layout {
    top: calc(var(--header-h) + var(--mob-bar-h));
  }

  .footer-note { display: none; }
}

@media (max-width: 480px) {
  #term-input, .term-input-row, #term-output { font-size: 0.8rem; }
}