/* RUNWAY — green phosphor CRT */

:root {
  --ink: #43ff6e;
  --ink-dim: #1f8f43;
  --ink-faint: #135c2c;
  --ink-bright: #b8ffcc;
  --amber: #ffc857;
  --red: #ff6b57;
  --bg: #04120a;
  --bg-deep: #010805;
  --glow: 0 0 6px rgba(67, 255, 110, 0.55);
  --app-height: 100dvh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: var(--app-height);
  background: var(--bg-deep);
  overflow: hidden;
}

body {
  font-family: "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hidden real input: kept on-screen (iOS refuses offscreen focus) and at
   16px font so mobile Safari doesn't zoom on focus */
#kbdform {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  overflow: hidden;
  opacity: 0.01;
  z-index: 1;
}
#kbd {
  width: 100%;
  height: 1px;
  font-size: 16px;
  background: transparent;
  border: none;
  color: transparent;
  outline: none;
}

#crt {
  position: relative;
  width: min(100vw, 148vh);
  height: var(--app-height);
  background: radial-gradient(ellipse at center, #071b10 0%, var(--bg) 55%, var(--bg-deep) 100%);
  overflow: hidden;
}

#frame {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: max(1.2vh, env(safe-area-inset-top))
           max(1.4vw, env(safe-area-inset-right))
           max(1.2vh, env(safe-area-inset-bottom))
           max(1.4vw, env(safe-area-inset-left));
}

/* ---- top scene pane ---- */
#scenebox {
  flex: 0 0 auto;
  margin-bottom: 0.6vh;
  text-align: center;
}
#scene {
  display: inline-block;
  text-align: left;
  white-space: pre;
  line-height: 1.08;
  color: var(--ink);
  text-shadow: var(--glow);
  overflow: hidden;
}
#sceneImg {
  display: none;
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid var(--ink-faint);
}

#scene .b { color: var(--ink-bright); }
#scene .d { color: var(--ink-dim); }
#scene .f { color: var(--ink-faint); }
#scene .a { color: var(--amber); text-shadow: 0 0 6px rgba(255, 200, 87, 0.5); }

/* ---- status bar ---- */
#statusbar {
  flex: 0 0 auto;
  display: flex;
  gap: 1.6ch;
  flex-wrap: wrap;
  padding: 0.35em 0.8ch;
  border-top: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  color: var(--ink-bright);
  text-shadow: var(--glow);
  font-size: clamp(11px, 1.9vh, 17px);
  letter-spacing: 0.03em;
}
#statusbar span:not(:last-child)::after {
  content: "│";
  color: var(--ink-faint);
  margin-left: 1.6ch;
}
#st-money.low { color: var(--amber); }
#st-money.crit { color: var(--red); }
#st-energy .bar-low { color: var(--amber); }
#st-energy .bar-crit { color: var(--red); }

/* ---- text log ---- */
#log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.8vh 0.8ch 0.4vh;
  font-size: clamp(12px, 2.1vh, 19px);
  line-height: 1.42;
  text-shadow: var(--glow);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
}
#log::-webkit-scrollbar { width: 6px; }
#log::-webkit-scrollbar-thumb { background: var(--ink-faint); }

#log p { margin: 0 0 0.5em; white-space: pre-wrap; word-wrap: break-word; }
#log .echo { color: var(--ink-dim); }
#log .sys { color: var(--ink-dim); font-style: italic; }
#log .talk { color: var(--ink-bright); }
#log .good { color: var(--ink-bright); }
#log .money { color: var(--amber); }
#log .bad { color: var(--red); }
#log .title { color: var(--ink-bright); letter-spacing: 0.15em; }
#log .choice { color: var(--ink-bright); }
#log .dim { color: var(--ink-dim); }
#log hr {
  border: none;
  border-top: 1px dashed var(--ink-faint);
  margin: 0.7em 0;
}

/* ---- input line ---- */
#inputline {
  flex: 0 0 auto;
  padding: 0.5vh 0.8ch;
  font-size: clamp(12px, 2.1vh, 19px);
  color: var(--ink-bright);
  text-shadow: var(--glow);
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 1.6em;
}
#prompt { color: var(--ink); margin-right: 1ch; }
#caret {
  animation: blink 1.06s steps(1) infinite;
  color: var(--ink-bright);
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- hint bar ---- */
#hintbar {
  flex: 0 0 auto;
  padding: 0.3vh 0.8ch 0.6vh;
  color: var(--ink-faint);
  font-size: clamp(10px, 1.7vh, 15px);
  letter-spacing: 0.04em;
  min-height: 1.4em;
}
#hintbar b { color: var(--ink-dim); font-weight: normal; }

/* ---- CRT overlays ---- */
#scanlines {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px
  );
  mix-blend-mode: multiply;
}
#vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%);
}

/* ---- small screens ---- */
@media (max-width: 620px) {
  #frame {
    padding: max(0.8vh, env(safe-area-inset-top))
             max(2vw, env(safe-area-inset-right))
             max(0.8vh, env(safe-area-inset-bottom))
             max(2vw, env(safe-area-inset-left));
  }
  #statusbar { font-size: 10px; gap: 1ch; }
  #statusbar span:not(:last-child)::after { margin-left: 1ch; }
  #log { font-size: 14px; }
  #inputline {
    min-height: 22px;
    padding: 2px 0.8ch;
    font-size: 14px;
    line-height: 18px;
  }
  /* The contextual options consumed a full row on an already short phone
     screen. HELP remains available whenever the player wants the command list. */
  #hintbar { display: none; }
}

/* When the iPhone keyboard is open, keep the scene and HUD anchored above the
   log instead of allowing WebKit to pan them beyond the visible viewport. */
html.keyboard-open #frame {
  padding-top: max(4px, env(safe-area-inset-top));
  padding-bottom: 3px;
}
html.keyboard-open #scenebox { margin-bottom: 2px; }
html.keyboard-open #statusbar {
  gap: 0.7ch;
  padding: 2px 0.5ch;
  font-size: 9px;
  line-height: 1.15;
}
html.keyboard-open #statusbar span:not(:last-child)::after { margin-left: 0.7ch; }
html.keyboard-open #log {
  min-height: 36px;
  padding-top: 3px;
  font-size: 12px;
  line-height: 1.25;
}
html.keyboard-open #inputline {
  min-height: 20px;
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 18px;
}
html.keyboard-open #hintbar { display: none; }

/* The iOS app supplies a native command row pinned to the keyboard, so the web
   input line and its hidden form are unused there. The hint bar, however, stays
   visible just above the native command row so the contextual commands are
   always on screen. */
html.native-ios #inputline,
html.native-ios #kbdform { display: none !important; }

/* Under the native wrapper the web view is resized by Auto Layout as the
   keyboard animates, which makes height-based (vh) type jump size every time
   the keyboard opens or closes. Anchor type to the viewport WIDTH — which the
   keyboard never changes — so text stays a constant size. These come after the
   .keyboard-open block on purpose, at equal specificity, so they win. */
html.native-ios #statusbar { font-size: clamp(10px, 3vw, 15px); }
html.native-ios #log { font-size: clamp(13px, 3.7vw, 18px); line-height: 1.42; }
html.native-ios #hintbar {
  display: block !important;
  font-size: clamp(10px, 3vw, 14px);
  padding: 0.3vh 0.8ch 0.5vh;
  min-height: 1.4em;
}

@media (prefers-reduced-motion: no-preference) {
  #crt::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(rgba(67,255,110,0.035), rgba(67,255,110,0));
    animation: flicker 4.3s infinite;
  }
  @keyframes flicker {
    0%, 100% { opacity: 0.55; }
    3% { opacity: 0.8; }
    6% { opacity: 0.45; }
    52% { opacity: 0.66; }
    54% { opacity: 0.42; }
  }
}