/* =============================================================================
   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 box 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;
  /* JS sizes this to the visible viewport (above the keyboard) and translates
     it to follow visualViewport.offsetTop; 100dvh is the pre-JS fallback. */
  height: 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%);
}

/* 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; }

/* 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 a       { color: var(--paper); text-underline-offset: 3px; }
#log a:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
#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); }
}

/* 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 visible height */
    min-height: 0;
  }
}

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

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

/* -----------------------------------------------------------------------------
   Controller verb bar — a SCUMM-style verb strip above the prompt, shown only
   while a gamepad has it open (body.padbar). Same palette vars as everything.
   -------------------------------------------------------------------------- */
#verbbar {
  display: none;
  flex-wrap: wrap;
  gap: 0.1em 0.9em;
  padding: 0.25em 0 0.15em;
  border-top: 1px dashed var(--phosphor-faint);
  font-family: var(--mono);
  user-select: none;
}
body.padbar #verbbar { display: flex; }
#verbbar span { color: var(--phosphor-dim); padding: 0 0.25em; }
#verbbar span.sel { background: var(--phosphor); color: #000; }
#verbbar .padhint { margin-left: auto; color: var(--phosphor-faint); }