/* =========================================================
   help.exe (static/js/horror.js) — the console's hidden horror game.
   An old orange-phosphor terminal and a tiny dithered pixel forest,
   in the spirit of FAITH. Nothing here applies until the game starts.
   ========================================================= */

@font-face {
  font-family: 'HX Press Start';
  src: url('/static/horror/fonts/PressStart2P.woff') format('woff');
  font-display: block;
}

/* The desktop's own picture collapses like a CRT switching off, and comes back the same way. */
html.hx-collapse #nd-desktop { animation: hx-collapse 0.42s ease-in forwards; }
html.hx-hidden #nd-desktop { visibility: hidden; animation: none; }
html.hx-expand #nd-desktop { animation: hx-expand 0.55s ease-out; }
@keyframes hx-collapse {
  0% { transform: none; filter: none; }
  55% { transform: scale(1, 0.004); filter: brightness(3); }
  100% { transform: scale(0.002, 0.004); filter: brightness(6); }
}
@keyframes hx-expand {
  0% { transform: scale(0.002, 0.004); filter: brightness(6); }
  40% { transform: scale(1, 0.004); filter: brightness(3); }
  100% { transform: none; filter: none; }
}

#hx {
  position: fixed;
  inset: 0;
  z-index: 470;
  color: #ff9a2e;
  font-family: 'HX Press Start', 'Courier New', monospace;
  font-size: clamp(9px, 1.2vw, 16px);
  line-height: 1.8;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: none;
  outline: none;
}
#hx.hx-black { background: #000; }
#hx button { font: inherit; color: inherit; text-transform: inherit; cursor: pointer; }

/* the warning card on the dead-black screen, before the terminal powers on */
.hx-pre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4em; padding: 24px; color: #8c8c8c; text-align: center; }
.hx-pre[hidden] { display: none; }
.hx-pre p { margin: 0; }
.hx-pre-title { color: #b8b8b8; }
.hx-pre-key { animation: hx-blink 1.1s steps(1) infinite; }
@keyframes hx-blink { 50% { visibility: hidden; } }

/* the "monitor" */
.hx-crt { position: absolute; inset: 0; overflow: hidden; background: #000; }
.hx-crt[hidden] { display: none; }
.hx-crt.hx-on { animation: hx-on 0.6s ease-out; }
.hx-crt.hx-off { animation: hx-off 0.45s ease-in forwards; }
@keyframes hx-on {
  0% { transform: scale(0.002, 0.004); filter: brightness(8); }
  35% { transform: scale(1, 0.004); filter: brightness(5); }
  100% { transform: none; filter: none; }
}
@keyframes hx-off {
  0% { transform: none; filter: none; }
  55% { transform: scale(1, 0.004); filter: brightness(4); }
  100% { transform: scale(0.002, 0.004); filter: brightness(8); opacity: 0; }
}

.hx-term { position: absolute; inset: 0; padding: 6vh 6vw; overflow: hidden; text-shadow: 0 0 6px rgba(255, 110, 20, 0.45); }
.hx-term[hidden] { display: none; }
.hx-line { min-height: 1.8em; white-space: pre-wrap; overflow-wrap: anywhere; }
.hx-o { color: #ff9a2e; }
.hx-r { color: #ff3b2f; text-shadow: 0 0 7px rgba(255, 40, 30, 0.55); }
.hx-w { color: #e8e2d2; text-shadow: 0 0 6px rgba(255, 240, 220, 0.3); }
.hx-p { color: #e9dfb8; text-shadow: 0 0 6px rgba(255, 240, 200, 0.3); }
.hx-d { color: #8a6a48; text-shadow: none; }

.hx-choice button, .hx-ok { padding: 0 0.4em; background: none; border: 0; }
.hx-choice button:hover, .hx-choice button:focus-visible, .hx-ok:hover, .hx-ok:focus-visible { background: #ff9a2e; color: #000; text-shadow: none; outline: none; }
#hx.hx-touch .hx-input { font-size: 16px; } /* any smaller and iOS zooms the page in on focus */
.hx-input { width: 15ch; padding: 0; background: transparent; border: 0; border-bottom: 2px solid #ff9a2e; outline: none; color: #e8e2d2; font: inherit; text-transform: uppercase; caret-color: #ff9a2e; cursor: text; }

/* forest: what the thing on the line sees, with the terminal underneath */
.hx-view { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; }
.hx-view[hidden] { display: none; }
.hx-osd, .hx-log, .hx-hint { width: var(--hx-w, 100%); max-width: 100%; }
.hx-osd { display: flex; justify-content: space-between; gap: 12px; color: #8a6a48; font-size: 0.8em; }
.hx-cv { display: block; flex: none; background: #000; image-rendering: pixelated; image-rendering: crisp-edges; }
.hx-log { height: 7.2em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-shadow: 0 0 6px rgba(255, 110, 20, 0.45); }
.hx-log .hx-line { flex-shrink: 0; } /* a long wrapped line pushes older ones out of view instead of overlapping them */
.hx-hint { min-height: 1.8em; color: #8a6a48; }
#hx.hx-touch .hx-view { justify-content: flex-start; padding-top: 44px; }

.hx-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; }
.hx-face[hidden] { display: none; }
.hx-face canvas { height: 100%; max-width: 100%; object-fit: contain; image-rendering: pixelated; }

/* scanlines + tube vignette over everything on the monitor */
.hx-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.32) 2px 3px),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.75) 100%);
  animation: hx-flicker 0.14s steps(2) infinite;
}
@keyframes hx-flicker { 50% { opacity: 0.9; } }

/* touch controls */
.hx-pad { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 18px calc(18px + env(safe-area-inset-bottom)); pointer-events: none; }
.hx-pad[hidden] { display: none; }
.hx-dpad { display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(3, 54px); pointer-events: auto; }
.hx-dpad button, .hx-act { background: rgba(255, 154, 46, 0.08); border: 2px solid rgba(255, 154, 46, 0.45); border-radius: 6px; touch-action: none; }
.hx-dpad [data-dir='up'] { grid-area: 1 / 2; }
.hx-dpad [data-dir='left'] { grid-area: 2 / 1; }
.hx-dpad [data-dir='right'] { grid-area: 2 / 3; }
.hx-dpad [data-dir='down'] { grid-area: 3 / 2; }
.hx-act { width: 76px; height: 76px; border-radius: 50%; pointer-events: auto; }
.hx-dpad button.on, .hx-act.on { background: rgba(255, 154, 46, 0.35); }
/* +/- volume: a small readout in the corner that fades out on its own */
#hx .hx-vol { position: absolute; top: 10px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 0.8em; color: #8a6a48; font-size: 0.7em; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
#hx .hx-vol.on { opacity: 1; transition: none; }
#hx .hx-vol b { display: flex; gap: 2px; }
#hx .hx-vol i { width: 0.5em; height: 1em; background: #2e2116; }
#hx .hx-vol i.lit { background: #c8782a; }