:root {
  --phosphor: #3cf63c;
  --phosphor-dim: #1e7a1e;
  --phosphor-glow: rgba(60, 246, 60, 0.55);
  --bg: #050805;
  --screen-bg: #0a120a;
  --plot-bg: #071007;
  --lvl0: #4f9c4f;
  --lvl1: #49ff49;
  --lvl2: #38d838;
  --lvl3: #2cb02c;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', 'Courier New', monospace;
}

#rig {
  display: flex;
  gap: 14px;
  width: min(1380px, calc(100vw - 20px));
  height: min(660px, 100dvh);
}

#crt {
  position: relative;
  flex: 11;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at center, var(--screen-bg) 0%, #040904 100%);
  border-radius: 12px;
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(60, 246, 60, 0.08);
  overflow: hidden;
}

#titlebar, #statusbar, #surveybar, #surveyfoot {
  flex: none;
  padding: 8px 16px;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--phosphor-dim);
  text-shadow: 0 0 4px var(--phosphor-glow);
  user-select: none;
}

#titlebar, #surveybar { border-bottom: 1px solid rgba(60, 246, 60, 0.15); }
#statusbar, #surveyfoot { border-top: 1px solid rgba(60, 246, 60, 0.15); }

#statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

#maptoggle, #modetoggle, #soundtoggle, #resetbtn {
  padding: 2px 10px;
  border: 1px solid var(--phosphor-dim);
  border-radius: 3px;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: var(--phosphor-dim);
  text-shadow: inherit;
  cursor: pointer;
}

#maptoggle { display: none; }
#modetoggle { margin-left: auto; }

#maptoggle:hover, #modetoggle:hover, #soundtoggle:hover, #resetbtn:hover {
  color: var(--phosphor);
  border-color: var(--phosphor);
}

.led {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 8px var(--phosphor-glow);
  animation: led-pulse 2.5s ease-in-out infinite;
}

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

#screen {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  font-size: 21px;
  line-height: 1.25;
  color: var(--phosphor);
  text-shadow: 0 0 6px var(--phosphor-glow);
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-dim) transparent;
}

#output .line { white-space: pre-wrap; word-break: break-word; min-height: 1.25em; }
#output .echo { color: var(--phosphor-dim); }

#promptline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#cmd {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  text-transform: uppercase;
  caret-color: var(--phosphor);
}

#scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.18) 3px,
      rgba(0, 0, 0, 0) 4px
    );
  mix-blend-mode: multiply;
  animation: flicker 0.12s infinite;
}

@keyframes flicker {
  0%   { opacity: 0.92; }
  50%  { opacity: 1; }
  100% { opacity: 0.95; }
}

/* --- survey plot panel (a storage tube draws vectors: no scanlines) --- */

#survey {
  position: relative;
  flex: 9;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at center, var(--plot-bg) 0%, #030803 100%);
  border-radius: 12px;
  box-shadow:
    inset 0 0 110px rgba(0, 0, 0, 0.85),
    0 0 40px rgba(60, 246, 60, 0.06);
  overflow: hidden;
}

#surveybar, #surveyfoot { font-size: 15px; }

#surveysvg {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
  filter: drop-shadow(0 0 3px rgba(60, 246, 60, 0.45));
}

/* grid: the faint graph sheet */
.m-grid line { stroke: rgba(60, 246, 60, 0.055); stroke-width: 1; }

/* passages */
.m-edge { fill: none; stroke-width: 1.6; }
.m-edge.m-lvl0 { stroke: var(--lvl0); }
.m-edge.m-lvl1 { stroke: var(--lvl1); }
.m-edge.m-lvl2 { stroke: var(--lvl2); }
.m-edge.m-lvl3 { stroke: var(--lvl3); }

/* solid passages draw themselves on like a plotter pen */
.m-edges path:not(.m-trail):not(.m-magic) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease 0.1s;
}
.m-edges path.m-on:not(.m-trail):not(.m-magic) { stroke-dashoffset: 0; }

/* dashed styles fade in instead (dash pattern conflicts with the pen trick) */
.m-trail, .m-magic { opacity: 0; transition: opacity 0.9s ease 0.1s; }
.m-trail.m-on { opacity: 0.85; }
.m-magic.m-on { opacity: 0.95; }
.m-trail { stroke-dasharray: 3 5; stroke-width: 1.2; }
.m-magic { stroke-dasharray: 7 6; stroke-width: 1.3; }

.m-ticks line { stroke-width: 1.3; }
.m-ticks.m-lvl1 line { stroke: var(--lvl1); }
.m-ticks.m-lvl2 line { stroke: var(--lvl2); }
.m-ticks.m-lvl3 line { stroke: var(--lvl3); }

.m-magiclabel {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 3px;
  fill: var(--phosphor-dim);
  text-anchor: middle;
}

/* unexplored leads */
.m-stub line { stroke: var(--phosphor-dim); stroke-width: 1.1; stroke-dasharray: 3 3; opacity: 0.8; }
.m-stub text {
  font-family: inherit;
  font-size: 13px;
  fill: var(--phosphor-dim);
  text-anchor: middle;
  opacity: 0.9;
}

/* survey stations */
.m-room { opacity: 0; transition: opacity 0.7s ease; }
.m-room.m-on { opacity: 1; }
.m-room circle { fill: var(--plot-bg); stroke-width: 1.7; }
.m-room.m-lvl0 circle { stroke: var(--lvl0); }
.m-room.m-lvl1 circle { stroke: var(--lvl1); }
.m-room.m-lvl2 circle { stroke: var(--lvl2); }
.m-room.m-lvl3 circle { stroke: var(--lvl3); }

.m-label {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.9s ease 0.3s;
}
.m-label.m-on { opacity: 0.95; }
.m-label.m-lvl0 { fill: var(--lvl0); }
.m-label.m-lvl1 { fill: var(--lvl1); }
.m-label.m-lvl2 { fill: var(--lvl2); }
.m-label.m-lvl3 { fill: var(--lvl3); }

/* you are here */
.m-cursor {
  transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
  will-change: transform;
}
.m-cursor line { stroke: #d9ffd9; stroke-width: 1.4; }
.m-cursor-ring { fill: none; stroke: #d9ffd9; stroke-width: 1.4; }
.m-cursor-pulse {
  fill: none;
  stroke: var(--phosphor);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: m-pulse 2.2s ease-out infinite;
}

@keyframes m-pulse {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* sheet furniture */
.m-north line { stroke: var(--phosphor-dim); stroke-width: 1.4; }
.m-north path { fill: none; stroke: var(--phosphor-dim); stroke-width: 1.4; }
.m-north text {
  font-family: inherit;
  font-size: 15px;
  fill: var(--phosphor-dim);
  text-anchor: middle;
}
.m-titleblock rect { fill: none; stroke: var(--phosphor-dim); stroke-width: 1; opacity: 0.8; }
.m-titleblock text { font-family: inherit; fill: var(--phosphor-dim); }
.m-tb1 { font-size: 15px; letter-spacing: 2px; }
.m-tb2 { font-size: 11px; letter-spacing: 1px; }

/* --- atmosphere: light modes and transient effects --- */

#screen, #titlebar, #statusbar, #surveybar, #surveyfoot, #cmd, #output .echo {
  transition: color 1.4s ease, text-shadow 1.4s ease;
}
#surveysvg { transition: opacity 1.4s ease; }

/* warm carbide-lamp vignette, present only underground with the lamp lit */
#crt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  background: radial-gradient(
    ellipse at 50% 62%,
    rgba(255, 190, 90, 0.11),
    rgba(255, 190, 90, 0.025) 55%,
    transparent 75%
  );
}

body.lamplight #crt::after {
  opacity: 1;
  animation: lampflicker 3.4s ease-in-out infinite;
}

@keyframes lampflicker {
  0%, 100% { opacity: 0.72; }
  18% { opacity: 1; }
  37% { opacity: 0.6; }
  58% { opacity: 0.94; }
  79% { opacity: 0.68; }
}

body.lamplight #screen { color: #63f142; text-shadow: 0 0 6px rgba(190, 255, 80, 0.5); }
body.lamplight #output .echo { color: #2d7a24; }

/* pitch black: the cave swallows the phosphor; your typing barely shows */
body.dark #screen { color: #123312; text-shadow: none; }
body.dark #output .echo { color: #0d240d; }
body.dark #cmd { color: #205420; caret-color: #205420; }
body.dark #titlebar, body.dark #statusbar { color: #112911; text-shadow: none; }
body.dark #surveybar, body.dark #surveyfoot { color: #112911; text-shadow: none; }
body.dark #surveysvg { opacity: 0.14; }
body.dark .led { opacity: 0.35; }

/* a knife whistles past */
body.shake #crt { animation: crt-shake 0.4s linear; }

@keyframes crt-shake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-4px, 2px); }
  30%  { transform: translate(3px, -2px); }
  45%  { transform: translate(-3px, -1px); }
  60%  { transform: translate(2px, 2px); }
  75%  { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}

/* a magic word rematerializes you: phosphor bloom */
body.bloom #crt { animation: crt-bloom 0.95s ease-out; }
body.bloom #surveysvg { animation: plot-bloom 0.95s ease-out; }

@keyframes crt-bloom {
  0%   { filter: brightness(1); }
  12%  { filter: brightness(2.4) blur(1.5px); }
  30%  { filter: brightness(1.6) blur(0.5px); }
  100% { filter: brightness(1); }
}

@keyframes plot-bloom {
  0%   { filter: brightness(1); }
  15%  { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}

/* the tube stutters out and back when you die */
body.deathflash #crt { animation: crt-death 1.25s ease-in-out; }

@keyframes crt-death {
  0%   { filter: brightness(1); }
  8%   { filter: brightness(2.6); }
  16%  { filter: brightness(0.12); }
  30%  { filter: brightness(0.7); }
  42%  { filter: brightness(0.08); }
  60%  { filter: brightness(0.5); }
  100% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.shake #crt, body.bloom #crt, body.bloom #surveysvg,
  body.deathflash #crt, body.lamplight #crt::after {
    animation: none;
  }
}

/* --- teletype mode: ink on tractor-feed paper --- */

#paperedges {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#rig { transition: filter 1.4s ease; }

body.tty { background: #26221c; }

body.tty #crt {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(120, 95, 50, 0.04) 0px,
      rgba(120, 95, 50, 0) 3px,
      rgba(120, 95, 50, 0.04) 6px
    ),
    linear-gradient(175deg, #f4eeda 0%, #eee5cc 100%);
  box-shadow:
    inset 0 0 70px rgba(110, 85, 45, 0.22),
    0 8px 34px rgba(0, 0, 0, 0.55);
}

body.tty #paperedges {
  display: block;
  background:
    linear-gradient(to right,
      transparent 29px, rgba(120, 95, 50, 0.3) 29px, rgba(120, 95, 50, 0.3) 30px,
      transparent 30px, transparent calc(100% - 30px),
      rgba(120, 95, 50, 0.3) calc(100% - 30px), rgba(120, 95, 50, 0.3) calc(100% - 29px),
      transparent calc(100% - 29px)),
    radial-gradient(circle at 15px 13px, #2b2620 0px 3.4px, transparent 4.4px) left top / 30px 26px repeat-y,
    radial-gradient(circle at 15px 13px, #2b2620 0px 3.4px, transparent 4.4px) right top / 30px 26px repeat-y;
}

body.tty #screen {
  font-family: 'Cutive Mono', 'Courier New', monospace;
  font-size: 16.5px;
  line-height: 1.55;
  padding: 16px 46px;
  color: #2b2620;
  text-shadow: none;
  scrollbar-color: #b3a480 transparent;
}

body.tty #output .echo { color: #6f6452; }
body.tty #cmd { color: #2b2620; caret-color: #2b2620; }
body.tty #scanlines { display: none; }

body.tty #titlebar, body.tty #statusbar {
  color: #7a6c52;
  text-shadow: none;
  border-color: rgba(120, 95, 50, 0.3);
  padding-left: 46px;
  padding-right: 46px;
}

body.tty #maptoggle, body.tty #modetoggle, body.tty #soundtoggle, body.tty #resetbtn {
  color: #7a6c52;
  border-color: #a5977c;
}

body.tty .led {
  background: #d68f2e;
  box-shadow: 0 0 8px rgba(214, 143, 46, 0.6);
}

/* the survey becomes a pen-plotter sheet: ink on paper, red pen for you */
body.tty {
  --plot-bg: #f2ebd6;
  --lvl0: #9b8a68;
  --lvl1: #2c3448;
  --lvl2: #414d68;
  --lvl3: #5b6883;
}

body.tty #survey {
  background: radial-gradient(ellipse at center, var(--plot-bg) 0%, #e7ddc1 100%);
  box-shadow:
    inset 0 0 70px rgba(110, 85, 45, 0.2),
    0 8px 34px rgba(0, 0, 0, 0.55);
}

body.tty #surveybar, body.tty #surveyfoot {
  color: #7a6c52;
  text-shadow: none;
  border-color: rgba(120, 95, 50, 0.3);
}

body.tty #surveysvg { filter: none; }
body.tty .m-grid line { stroke: rgba(120, 95, 50, 0.15); }
body.tty .m-stub line { stroke: #8d7d5e; }
body.tty .m-stub text { fill: #8d7d5e; }
body.tty .m-magiclabel { fill: #8d7d5e; }
body.tty .m-cursor line, body.tty .m-cursor-ring { stroke: #b03a2a; }
body.tty .m-cursor-pulse { stroke: #b03a2a; }
body.tty .m-north line, body.tty .m-north path { stroke: #8d7d5e; }
body.tty .m-north text, body.tty .m-titleblock text { fill: #8d7d5e; }
body.tty .m-titleblock rect { stroke: #8d7d5e; }

/* atmosphere on paper: ink never changes color; the room light does */
body.tty.dark #rig { filter: brightness(0.22) saturate(0.6); }
body.tty.dark #screen, body.tty.lamplight #screen { color: #2b2620; text-shadow: none; }
body.tty.dark #output .echo, body.tty.lamplight #output .echo { color: #6f6452; }
body.tty.dark #cmd { color: #2b2620; caret-color: #2b2620; }
body.tty.dark #titlebar, body.tty.dark #statusbar,
body.tty.dark #surveybar, body.tty.dark #surveyfoot { color: #7a6c52; }
body.tty.dark #surveysvg { opacity: 1; }

@media (max-width: 1020px) {
  #rig { width: 100vw; height: 100dvh; }
  #crt { border-radius: 0; flex: 1; }
  #maptoggle { display: inline-block; }
  #survey {
    display: none;
    position: fixed;
    inset: 10px;
    z-index: 10;
    border: 1px solid rgba(60, 246, 60, 0.25);
  }
  body.map-open #survey { display: flex; }
}

@media (max-width: 600px) {
  #screen { font-size: 17px; padding: 12px; }
  #titlebar, #statusbar { font-size: 12px; letter-spacing: 1px; }
  #surveybar, #surveyfoot { font-size: 11px; letter-spacing: 1px; }
}