/* =============================================================================
   LOST IN THE FOREST — green-phosphor CRT, framed as a DOS/EGA screen.
   Plain static CSS, no build step (lab980 convention).
   ========================================================================== */

/* Authentic IBM VGA (Code Page 437) text-mode font — the real DOS letterforms.
   Bundled locally (no external requests): "Px437 IBM VGA 8x16" from VileR's
   Ultimate Oldschool PC Font Pack, CC BY-SA 4.0 — see fonts/NOTICE.txt. */
@font-face {
  font-family: "PxIBMVGA";
  src: url("fonts/Px437_IBM_VGA_8x16.woff2") format("woff2"),
       url("fonts/Px437_IBM_VGA_8x16.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --phosphor: #3bff74;
  --phosphor-dim: #1f9c3f;
  --phosphor-faint: #1c7a38;   /* dividers/scrollbar: >=3:1 on the screen bg */
  --trail: #238f42;            /* visited-ground glyph: >=4.5:1 (WCAG AA text) */
  --paper: #d6ffe2;          /* brightest — headings, player, station */
  --amber: #ffc24d;          /* warnings, the bear, fire */
  --danger: #ff5b4d;         /* death, low stats */
  --water: #57c9ff;
  --berry: #e07be0;
  --sky-night: #7fa8ff;
  --glow: none;              /* no phosphor bloom — flat text in every palette */
  --mono: "PxIBMVGA", "Courier New", "DejaVu Sans Mono", "Liberation Mono", monospace;
}

/* No glow anywhere: flatten every text-shadow inside the screen. */
#screen, #screen * { text-shadow: none; }

/* -----------------------------------------------------------------------------
   TRUE-EGA palette (opt-in via the "palette" command). The exact 16-colour EGA
   hardware values on black, no phosphor bloom. Authentic, and mostly legible:
   glyph/text colours land >=4:1 on black (most >=6.7) by using the high-
   intensity half of the palette; only the dark-grey dividers (decorative,
   exempt) fall below 3:1 — the inherent cost of the real hardware colours.
   -------------------------------------------------------------------------- */
body[data-theme="ega"] {
  --phosphor: #55FF55;       /* light green  15.8:1 */
  --phosphor-dim: #00AA00;   /* green         6.8:1 */
  --phosphor-faint: #555555; /* dark gray     2.8:1  (dividers only, decorative) */
  --trail: #00AA00;          /* green         6.8:1 */
  --paper: #FFFFFF;          /* white        21.0:1 */
  --amber: #FFFF55;          /* yellow       19.7:1 */
  --danger: #FF5555;         /* light red     6.7:1 */
  --water: #55FFFF;          /* light cyan   17.1:1 */
  --berry: #FF55FF;          /* light magenta 8.0:1 */
  --sky-night: #5555FF;      /* light blue    4.1:1 */
  --hill: #AA5500;           /* brown         4.0:1 */
  --clearing: #55FF55;       /* light green  15.8:1 */
  --cave: #AAAAAA;           /* light gray    9.0:1 */
  --ravine: #FF5555;         /* light red     6.7:1 */
  --fire: #FFFF55;           /* yellow       19.7:1 */
  --glow: 0 0 0 transparent; /* EGA had no phosphor bloom */
}
body[data-theme="ega"] #crt {
  background: #000;
}
body[data-theme="ega"] #desk {
  background: radial-gradient(120% 90% at 50% 30%, #111 0%, #060606 55%, #000 100%);
}
/* flatten every glow in EGA mode (beats the per-class coloured text-shadows) */
body[data-theme="ega"] #screen,
body[data-theme="ega"] #screen * { text-shadow: none; }

* { box-sizing: border-box; }

/* ---- "rotate your device" guard --------------------------------------------
   On a small screen held in landscape the 4:3 box + keypad can't fit and the
   on-screen keyboard covers everything. Cover the game and ask for portrait.
   Only touch devices; desktops (fine pointer) never see it. */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  color: var(--phosphor);
  font-family: var(--mono);
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 24px;
  line-height: 1.5;
}
#rotate .banner { color: var(--paper); font-weight: bold; letter-spacing: 0.12em;
  font-size: clamp(15px, 5.5vw, 26px); margin: 0 0 14px; }
#rotate p { margin: 4px 0; font-size: clamp(13px, 4vw, 18px); }
#rotate .dim { color: var(--phosphor-dim); }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotate { display: flex; }
}

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: var(--phosphor);
  font-family: var(--mono);
  overflow: hidden;
}

/* ---- the desk the monitor sits on ---------------------------------------- */
#desk {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* --vh tracks the *visible* viewport (above the keyboard) via JS; falls back
     to the dynamic viewport height. This keeps the input above the keyboard. */
  height: var(--vh, 100dvh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 18px);
  padding: clamp(6px, 2vmin, 22px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 30%, #14170f 0%, #0a0b07 55%, #000 100%);
}
/* While the on-screen keyboard is up, drop the (now redundant) keypad so all
   the visible height goes to the screen and the input stays above the keys. */
body.kbd #keypad { display: none; }

/* Touch devices: anchor the screen to the top so the on-screen keyboard just
   covers the bottom instead of shoving a vertically-centred box around. */
@media (pointer: coarse) {
  #desk { justify-content: flex-start; }
}

/* ---- monitor bezel around an EGA-proportioned (4:3) screen --------------- */
#monitor {
  position: relative;
  aspect-ratio: 4 / 3;                 /* EGA 640x350 shown 4:3 on a CRT */
  width: min(95vw, 122vh);
  max-width: 1060px;
  padding: 2.4%;
  border-radius: 18px / 22px;
  background: linear-gradient(160deg, #4a4a44 0%, #34342e 40%, #24241f 100%);
  box-shadow:
    0 2px 0 #5a5a52 inset,
    0 -8px 26px rgba(0,0,0,0.6) inset,
    0 26px 60px rgba(0,0,0,0.75),
    0 0 0 2px #1a1a16;
}

#crt {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 10px / 13px;
  background: radial-gradient(ellipse at center, #061206 0%, #040a04 65%, #010301 100%);
  box-shadow:
    0 0 30px rgba(59,255,116,0.10) inset,
    0 0 0 3px #0c0c0a,
    0 0 8px rgba(0,0,0,0.9) inset;
  overflow: hidden;
  container-type: size;                 /* text scales with the screen */
}

#scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.30) 3px);
  mix-blend-mode: multiply;
  animation: flicker 6s infinite steps(60);
}
#scanlines::after {                     /* screen curvature / vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
}
@keyframes flicker { 0%,96%,100%{opacity:1} 97%{opacity:.85} 98%{opacity:.96} }

#glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 3.2cqw 3.4cqw;
}

/* the LAB980 EGA nameplate on the bezel */
#badge {
  position: absolute;
  bottom: 0.4%;
  left: 50%;
  transform: translateX(-50%);
  font: bold clamp(8px, 1.5vmin, 12px)/1 var(--mono);
  letter-spacing: 0.28em;
  color: #8f8f84;
  text-shadow: 0 1px 0 #000;
}
#badge span { color: #c9a24a; }

/* ---- screen contents ----------------------------------------------------- */
#screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.4cqh;
  font-size: 2.15cqw;
  line-height: 1.32;
  color: var(--phosphor);
  text-shadow: var(--glow);
}

/* HUD only shows while playing */
body[data-mode="idle"] #hud,
body[data-mode="boot"] #hud,
body[data-mode="menu"] #hud { display: none; }
body[data-mode="idle"] #keypad,
body[data-mode="boot"] #keypad,
body[data-mode="menu"] #keypad { visibility: hidden; }

/* Title / boot / power-on: these screens must fit without scrolling. Tighten
   the line spacing and never scroll (the log only scrolls during play). */
body[data-mode="menu"] #log,
body[data-mode="boot"] #log,
body[data-mode="idle"] #log { overflow: hidden; }
body[data-mode="menu"] #log p,
body[data-mode="boot"] #log p,
body[data-mode="idle"] #log p { margin-bottom: 0.2em; }
body[data-mode="menu"] #log hr { margin: 0.35em 0; }

.blink { animation: blink 1.1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

#hud {
  display: flex;
  gap: 3cqw;
  border-bottom: 1px solid var(--phosphor-faint);
  padding-bottom: 1.6cqh;
  flex: 0 0 auto;
}
#map {
  margin: 0;
  font-size: 2.5cqw;
  line-height: 1.15;
  letter-spacing: 0.12em;
  white-space: pre;
}
#panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1cqh;
  min-width: 0;
  font-size: 1.9cqw;
}
#stats, #env, #pack { margin: 0; white-space: pre-wrap; }

/* colour classes (map glyphs + inline log text) */
.me       { color: var(--paper); font-weight: bold; text-shadow: 0 0 6px var(--paper); }
.station  { color: var(--paper); font-weight: bold; text-shadow: 0 0 7px var(--paper); }
.bear     { color: var(--amber); font-weight: bold; text-shadow: 0 0 6px var(--amber); }
.fire     { color: #ff9a3c; font-weight: bold; text-shadow: 0 0 7px #ff9a3c; }
.loot     { color: var(--amber); }
.water    { color: var(--water); text-shadow: 0 0 5px rgba(87,201,255,0.55); }
.hill     { color: #a9ff8f; }
.clearing { color: #e9ffa6; }
.berry    { color: var(--berry); text-shadow: 0 0 5px rgba(224,123,224,0.5); }
.cave     { color: #8fb39a; }
.ravine   { color: #c67b5a; }
.tree     { color: var(--phosphor-dim); }
.talltree { color: var(--phosphor); }
.seen     { color: var(--trail); }

.warn { color: var(--amber); }
.bad  { color: var(--danger); text-shadow: 0 0 6px rgba(255,91,77,0.55); }
.good { color: var(--paper); }
.dim  { color: var(--phosphor-dim); }
.night{ color: var(--sky-night); }
.hint { color: var(--phosphor-dim); font-style: italic; }

/* ---- scrolling narrative log --------------------------------------------- */
#log {
  flex: 1 1 auto;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 1cqw;
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-faint) transparent;
}
#log::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-thumb { background: var(--phosphor-faint); border-radius: 4px; }

#log p {
  margin: 0 0 0.5em;
  animation: fadein 0.16s ease-out;
}
#log .echo   { color: var(--phosphor-dim); }
#log .banner { color: var(--paper); font-weight: bold; letter-spacing: 0.06em; }
#log hr { border: none; border-top: 1px dashed var(--phosphor-faint); margin: 0.6em 0; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- input line ---------------------------------------------------------- */
#prompt {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  border-top: 1px solid var(--phosphor-faint);
  padding-top: 1.4cqh;
  flex: 0 0 auto;
}
.caret { color: var(--paper); }
#cmd {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--phosphor);
  font: inherit;
  /* never below 16px: iOS auto-zooms when focusing a smaller input */
  font-size: max(16px, 1em);
  text-shadow: var(--glow);
  caret-color: var(--phosphor);
}
#cmd::placeholder { color: var(--phosphor-faint); }

/* Small screens: raise the base size so the terminal is legible on phones
   (and the >=16px input above doesn't tower over tiny body text). #crt is a
   size container, so this keys off the actual screen width. */
@container (max-width: 480px) {
  #screen { font-size: max(14px, 3.2cqw); }
  #map    { font-size: max(14px, 3.6cqw); letter-spacing: 0.05em; }
  #panel  { font-size: max(11px, 2.7cqw); }
}

/* ---- on-screen keypad ---------------------------------------------------- */
#keypad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(4px, 0.9vmin, 8px);
  width: min(95vw, 122vh);
  max-width: 1060px;
}
#keypad button {
  flex: 0 0 auto;
  min-width: clamp(34px, 6vmin, 52px);
  padding: clamp(5px, 1.1vmin, 9px) clamp(8px, 1.6vmin, 14px);
  background: #0a140a;
  color: var(--phosphor);
  border: 1px solid var(--phosphor-faint);
  border-radius: 5px;
  font: bold clamp(10px, 1.7vmin, 14px)/1 var(--mono);
  letter-spacing: 0.08em;
  text-shadow: var(--glow);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
#keypad button.wide { letter-spacing: 0.14em; }
#keypad button:hover { background: #10240f; border-color: var(--phosphor-dim); }
#keypad button:active { background: var(--phosphor-dim); color: #041004; }

/* Phones: the 4:3 box is too short to hold the HUD + log + menu. Let the
   monitor fill the vertical space (a taller portrait CRT) so nothing is
   cramped and the title screen fits without scrolling. Text still scales by
   width, so it stays the same size — only the height grows. Desktop/tablet
   keep the classic 4:3 monitor. */
@media (max-width: 560px) {
  #monitor {
    aspect-ratio: auto;
    width: 96vw;
    max-width: none;
    flex: 1 1 auto;          /* fill the height above the keypad */
    min-height: 0;
  }
  #keypad { width: 96vw; max-width: none; flex: 0 0 auto; }
}

/* short / wide viewports: give the screen more room, shrink chrome */
@media (max-height: 620px) and (min-width: 561px) {
  #monitor { width: min(96vw, 150vh); }
  #keypad button { padding: 4px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #scanlines { animation: none; }
  #log p { animation: none; }
  .blink { animation: none; }
}