/* ==========================================================================
   REMNANT — Act I storybook view.

   Same monitor, same phosphor, same scanlines: only the "video mode"
   changes. Inside the story the machine shows pictures and book lettering;
   anything outside the story is the plain VGA text of REMNANT.

   Fonts (SIL Open Font License 1.1, see fonts/*-LICENSE.txt):
     Jacquard 24      — pixel blackletter: titles, decorated initials, the end
     IM Fell English  — the narration: a 17th-century book face, set the
                        way a storybook would be (italic for letters and
                        notes, small capitals for the carving)
   ========================================================================== */

@font-face {
  font-family: "Remnant Jacquard";
  src: url("../fonts/Jacquard24.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Remnant Fell";
  src: url("../fonts/IMFellEnglish.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Remnant Fell";
  font-style: italic;
  src: url("../fonts/IMFellEnglish-Italic.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Remnant Fell SC";
  src: url("../fonts/IMFellEnglishSC.woff2") format("woff2");
  font-display: block;
}

/* --------------------------------------------------------------------
   Layout: the story on the left, as in the prologue; the picture on the
   right, 4:3, like a cinema screen. On a tall screen the picture goes on
   top and the story runs underneath.
   -------------------------------------------------------------------- */
#story {
  padding: max(12px, 3vh) max(16px, 3.4vw) max(10px, 2.5vh);
  color: var(--fg);
  text-shadow: 0 0 3px var(--glow), 0 0 10px var(--glow-soft);
}
#story.visible { display: flex; justify-content: center; }

#story-frame {
  width: 100%;
  max-width: 1500px;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: clamp(14px, 2.8vw, 44px);
}

#story-plate {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
#story-art {
  display: block;
  /* a thin dotted frame, like a window on the page */
  outline: 1px dotted rgba(138, 99, 32, 0.6);
  outline-offset: 6px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* the phosphor bleeds a little around bright pixels, like the text */
  filter: brightness(1.18) drop-shadow(0 0 3px rgba(232, 163, 61, 0.28));
  transition: filter 1.2s ease-out;
}
/* While an ending is told, the picture slowly goes out. */
body.story-ending #story-art {
  filter: brightness(0.22) drop-shadow(0 0 2px rgba(232, 163, 61, 0.1));
  transition: filter 16s ease-in;
}
/* A word from outside the story: the picture jumps. */
body.frame-slip #story-art { filter: brightness(1.5) contrast(1.4) drop-shadow(0 0 6px rgba(232, 163, 61, 0.5)); transform: translateX(2px); transition: none; }
body.no-pictures #story-plate { display: none; }

#story-scroll {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  max-width: 70ch;
  overflow-y: auto;
  padding-top: 0.9em;
  scrollbar-width: none;
  /* older lines scroll up and fade */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.6em);
          mask-image: linear-gradient(to bottom, transparent 0, #000 2.6em);
}
#story-scroll::-webkit-scrollbar { width: 0; height: 0; }
body.no-pictures #story-scroll { max-width: 80ch; margin: 0 auto; }

/* Tall screens: picture on top, story below. */
body.story-stacked #story-frame { flex-direction: column; align-items: center; gap: 0; }
body.story-stacked #story-plate { width: 100%; }
body.story-stacked #story-scroll { width: 100%; max-width: 80ch; }
/* The title: the picture alone in the middle of the glass. */
body.story-title #story-frame { flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; }
body.story-title #story-scroll { flex: none; width: 100%; max-width: 80ch; overflow: visible; -webkit-mask-image: none; mask-image: none; }
body.story-title #story-art { outline: none; }

#story-out {
  font-family: "Remnant Fell", Georgia, serif;
  font-size: calc(var(--cell) * 1.25);
  line-height: 1.32;
  white-space: normal;
  letter-spacing: 0;
}

/* Every piece of the story arrives the same way: the ink comes up. */
.st-r {
  opacity: 0;
  filter: blur(1.4px);
  transition: opacity 650ms ease-out, filter 650ms ease-out;
}
.st-r.in { opacity: 1; filter: none; }
.st-r.now { transition: none; }
#story-out > .lift { opacity: 0 !important; transform: translateY(-0.4em); transition: opacity 220ms ease-in, transform 220ms ease-in; }

/* --------------------------------------------------------------------
   The narration
   -------------------------------------------------------------------- */
.st-p {
  white-space: pre-wrap;
  margin: 0 0 0.6em;
  color: var(--fg);
}
.st-intro { color: var(--fg); }
.st-p.st-exits, .st-p.st-people { color: var(--fg-dim); font-style: italic; margin-bottom: 0.25em; }
.st-p.st-people { margin-bottom: 0.7em; }
.st-intro:first-child { margin-top: 0.3em; }

/* Room titles: blackletter, centred, with a small dotted rule. */
.st-title {
  font-family: "Remnant Jacquard", "Remnant VGA", serif;
  font-size: calc(var(--cell) * 2);
  line-height: 1;
  color: var(--fg-bright);
  text-shadow: 0 0 3px rgba(255, 188, 85, 0.55), 0 0 12px rgba(255, 188, 85, 0.22);
  text-align: center;
  margin: 0.35em 0 0.4em;
  white-space: pre-wrap;
}
.st-title::after {
  content: "";
  display: block;
  width: 9em;
  max-width: 60%;
  height: 4px;
  margin: 0.3em auto 0;
  background:
    radial-gradient(circle, var(--fg-dim) 1.2px, transparent 1.6px) center / 8px 4px repeat-x;
}

/* The decorated initial: a blackletter capital in a small dithered box,
   two lines tall. */
.dropcap {
  float: left;
  font-family: "Remnant Jacquard", "Remnant VGA", serif;
  font-size: 2.55em;
  line-height: 0.86;
  height: 1.02em;
  min-width: 0.9em;
  text-align: center;
  margin: 0.07em 0.22em 0 0;
  padding: 0.05em 0.1em 0;
  color: var(--fg-bright);
  border: 2px solid var(--fg-dim);
  background:
    radial-gradient(circle, rgba(138, 99, 32, 0.55) 0.9px, transparent 1.2px) 0 0 / 4px 4px;
  text-shadow: 2px 2px 0 var(--bg-solid), -1px -1px 0 var(--bg-solid), 0 0 6px rgba(255, 188, 85, 0.4);
  box-shadow: inset 0 0 0 2px var(--bg-solid), 0 0 6px rgba(232, 163, 61, 0.2);
}

/* Runs of capitals (notices, carvings, the watch log), softened. */
.caps { letter-spacing: 0.05em; }
/* On the parchment the capitals stand upright, like a printed heading. */
.st-doc .caps { font-style: normal; letter-spacing: 0.06em; }

/* Letters, notices, notes: a sheet of lit parchment (inverse video). */
.st-doc {
  white-space: pre-wrap;
  margin: 0.2em 6% 0.9em;
  padding: 0.55em 1.1em 0.6em;
  font-style: italic;
  color: #120b03;
  background: #cf9338;
  text-shadow: none;
  box-shadow: 0 0 14px rgba(232, 163, 61, 0.28);
  clip-path: polygon(0 4px, 3% 0, 22% 3px, 41% 0, 63% 2px, 81% 0, 100% 3px,
                     100% calc(100% - 4px), 88% 100%, 66% calc(100% - 2px), 47% 100%, 24% calc(100% - 3px), 6% 100%, 0 calc(100% - 2px));
}
/* A carving in stone: no parchment, a double border, Roman capitals. */
.st-doc.carved {
  font-family: "Remnant Fell SC", "Remnant Fell", Georgia, serif;
  font-style: normal;
  font-size: 1.15em;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--fg-bright);
  background: transparent;
  border: 4px double var(--fg-dim);
  clip-path: none;
  box-shadow: none;
  text-shadow: 0 0 3px rgba(255, 188, 85, 0.5);
  padding: 0.45em 0.8em;
}

/* --------------------------------------------------------------------
   Death and endings
   -------------------------------------------------------------------- */
.st-death { color: var(--fg); }
.st-dead {
  font-family: "Remnant Jacquard", "Remnant VGA", serif;
  font-size: 1.8em;
  line-height: 1;
  text-align: center;
  color: var(--fg-bright);
  margin: 0.6em 0 0.8em;
}
.st-endline { text-align: center; margin: 0 0 0.35em; }
body.story-ending .st-endline { color: var(--fg); }
.st-theend {
  font-family: "Remnant Jacquard", "Remnant VGA", serif;
  font-size: 2.2em;
  line-height: 1;
  text-align: center;
  color: var(--fg-bright);
  margin: 1em 0 0.5em;
}
.st-theend::before, .st-theend::after {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 4px;
  margin: 0 0.4em;
  vertical-align: 0.3em;
  background: radial-gradient(circle, var(--fg-dim) 1.2px, transparent 1.6px) center / 8px 4px repeat-x;
}
.st-press, .tc-press {
  text-align: center;
  color: var(--fg-dim);
  margin-top: 0.4em;
}
.st-press.in, .tc-press.in { animation: press-pulse 2.6s ease-in-out infinite; }
@keyframes press-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --------------------------------------------------------------------
   The title card
   -------------------------------------------------------------------- */
.title-card {
  text-align: center;
  padding-top: 0.6em;
  opacity: 0;
  transition: opacity 1600ms ease-out;
}
.title-card.in { opacity: 1; }
.title-card.out { opacity: 0; transition: opacity 600ms ease-in; }
/* "ACT I": a plain, letter-spaced label over the blackletter, so it reads
   at a glance; the blackletter is kept for the name of the act. */
.tc-act {
  font-family: "Remnant Fell SC", "Remnant Fell", Georgia, serif;
  font-size: calc(var(--cell) * 1.55);
  line-height: 1;
  color: var(--fg);
  letter-spacing: 0.42em;
  padding-left: 0.42em; /* balance the trailing letter-space */
  text-shadow: 0 0 6px rgba(255, 188, 85, 0.35);
}
.tc-act::before, .tc-act::after {
  content: "";
  display: inline-block;
  width: 2.2em;
  height: 4px;
  margin: 0 0.7em 0 0.3em;
  vertical-align: 0.28em;
  background: radial-gradient(circle, var(--fg-dim) 1.2px, transparent 1.6px) center / 8px 4px repeat-x;
}
.tc-act::before { margin: 0 0.75em 0 0; }
.tc-name {
  font-family: "Remnant Jacquard", "Remnant VGA", serif;
  font-size: calc(var(--cell) * 4);
  line-height: 1.05;
  color: var(--fg-bright);
  text-shadow: 0 0 4px rgba(255, 188, 85, 0.6), 0 0 16px rgba(255, 188, 85, 0.25);
  margin-top: 0.05em;
}
.tc-press {
  font-size: 1em;
  margin-top: 1.2em;
  opacity: 0;
  transition: opacity 900ms ease-out;
}
.tc-press.in { opacity: 1; }
body.story-title #story-input,
body.story-wait #story-input { visibility: hidden; }

/* --------------------------------------------------------------------
   REMNANT, for a moment, inside the story (help, hints, the machine's
   own commands): the plain VGA characters, capitals, high intensity.
   -------------------------------------------------------------------- */
.st-remnant {
  font-family: "Remnant VGA", monospace;
  font-size: var(--cell);
  line-height: 1;
  white-space: pre-wrap;
  color: var(--fg-bright);
  text-shadow: 0 0 3px rgba(255, 188, 85, 0.5), 0 0 11px rgba(255, 188, 85, 0.22);
  margin: 0.3em 0 1.1em;
  filter: none;
}
.st-remnant.in { animation: remnant-in 240ms steps(3) both; }
@keyframes remnant-in {
  0%   { opacity: 0; }
  34%  { opacity: 1; filter: brightness(1.8); }
  67%  { opacity: 0.6; }
  100% { opacity: 1; filter: none; }
}

/* Lines the terminal itself prints into the story: what you typed. */
#story-out .ln {
  display: block;
  font-family: "Remnant VGA", monospace;
  font-size: var(--cell);
  line-height: 1;
  white-space: pre-wrap;
  margin: 0.5em 0 0.75em;
}
#story-out .ln.usr { color: var(--fg); opacity: 0.8; }
#story-out .ln.sys { color: var(--fg-bright); margin: 0 0 0.2em; }

/* The input line: the machine's own prompt, as everywhere. */
#story-input {
  display: flex;
  align-items: center;
  min-height: 1em;
  font-family: "Remnant VGA", monospace;
  font-size: var(--cell);
  line-height: 1;
  padding-bottom: 0.4em;
}
#story-input.hidden { display: none; }
#story-input.sending { visibility: hidden; }
.story-prompt { margin-right: 1ch; color: var(--fg); }
#story-text { white-space: pre; color: var(--fg); }

/* --------------------------------------------------------------------
   PLAIN lettering (setup): everything in the system characters.
   -------------------------------------------------------------------- */
body.plain-lettering #story-out { font-family: "Remnant VGA", monospace; font-size: var(--cell); line-height: 1.15; }
body.plain-lettering .st-title,
body.plain-lettering .st-dead,
body.plain-lettering .st-theend,
body.plain-lettering .tc-act,
body.plain-lettering .tc-name,
body.plain-lettering .st-doc.carved { font-family: "Remnant VGA", monospace; text-transform: uppercase; }
body.plain-lettering .st-title,
body.plain-lettering .st-dead,
body.plain-lettering .st-theend { font-size: var(--cell); }
body.plain-lettering .tc-name { font-size: calc(var(--cell) * 2); }
body.plain-lettering .tc-act { font-size: var(--cell); }
body.plain-lettering .dropcap { float: none; font: inherit; border: 0; background: none; padding: 0; margin: 0; height: auto; min-width: 0; box-shadow: none; text-shadow: inherit; color: inherit; }
body.plain-lettering .st-doc { font-family: "Remnant VGA", monospace; font-style: normal; }

/* --------------------------------------------------------------------
   The monitor switching video mode (into and out of the story):
   the picture rolls, goes black, and comes back in the other mode.
   -------------------------------------------------------------------- */
#picture.modeswitch { animation: mode-switch 600ms linear both; }
@keyframes mode-switch {
  0%   { transform: translateY(0) scaleY(1);       filter: brightness(1); opacity: 1; }
  10%  { transform: translateY(-6%) scaleY(1.04);  filter: brightness(1.7) contrast(1.3); opacity: 1; }
  18%  { transform: translateY(14%) skewX(1.5deg); filter: brightness(0.8); opacity: 0.6; }
  26%  { opacity: 0; }
  58%  { opacity: 0; transform: translateY(0); }
  64%  { opacity: 1; transform: translateY(5%) scaleY(1.03); filter: brightness(2); }
  74%  { transform: translateY(-1.5%) scaleY(1); filter: brightness(1.3); }
  84%  { transform: translateY(0.6%); }
  100% { transform: translateY(0) scaleY(1);       filter: brightness(1); opacity: 1; }
}
/* Death: no roll. The picture is simply gone, and the machine is back. */
#picture.modeswitch-hard { animation: mode-cut 500ms steps(1, end) both; }
@keyframes mode-cut {
  0%   { opacity: 1; filter: brightness(2.2); }
  6%   { opacity: 0; }
  70%  { opacity: 1; filter: brightness(1.6); }
  85%  { filter: brightness(1.15); }
  100% { opacity: 1; filter: brightness(1); }
}
body.reduced-motion #picture.modeswitch,
body.reduced-motion #picture.modeswitch-hard { animation: none; }
body.reduced-motion .st-r { transition: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  #picture.modeswitch, #picture.modeswitch-hard { animation: none; }
}

/* --------------------------------------------------------------------
   Playtest export overlay (prototype build only)
   -------------------------------------------------------------------- */
#logbox {
  position: fixed;
  inset: 5vh 5vw;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #0d0b07;
  border: 1px solid var(--fg-dim);
  cursor: auto;
}
#logbox[hidden] { display: none; }
#logbox textarea {
  flex: 1;
  background: #060503;
  color: var(--fg);
  border: 1px solid #3a2a10;
  font: 13px/1.35 Consolas, "Courier New", monospace;
  padding: 8px;
  resize: none;
}
#logbox button {
  background: #1a140a;
  color: var(--fg-bright);
  border: 1px solid var(--fg-dim);
  padding: 6px 12px;
  margin-right: 6px;
  font: 13px Consolas, monospace;
  cursor: pointer;
}

/* The burn-in belongs to the terminal's own screen, not the story's page. */
body.in-story #burn-in { opacity: 0 !important; transition: opacity 0.4s; }