/* The Backrooms HUD. Nothing here may look like a game: no bars, no icons, no boxes, no colour.
   One monospace face, shades of off-white on black, most of it absent most of the time. */

/* index.html links only this stylesheet, so the page reset lives here: no body margin, black ground,
   the canvas as a block so nothing peeks out around it. */
html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
#app { position: fixed; inset: 0; }
#app > canvas { display: block; }

#hud, #hud * { box-sizing: border-box; }
#hud {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px; line-height: 1.6; letter-spacing: 0.04em;
  color: #d9d2b0;
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
#hud .line { white-space: pre-wrap; min-height: 1.6em; }
#hud .line.blank { min-height: 0.8em; }

/* ---- level card (bottom-left) --------------------------------------------------------- */
#hud-card {
  position: absolute; left: 28px; bottom: 26px;
  opacity: 0; transition: opacity 900ms ease;
  max-width: 46ch;
}
#hud-card.on { opacity: 0.7; }
#hud-card .line:first-child { letter-spacing: 0.12em; margin-bottom: 0.35em; }
#hud-card .line:last-child { margin-top: 0.35em; }

/* ---- single message line (bottom-centre) ------------------------------------------------ */
#hud-msg {
  position: absolute; left: 0; right: 0; bottom: 30px;
  text-align: center; white-space: pre-wrap;
  opacity: 0; transition: opacity 500ms ease;
}
#hud-msg.on { opacity: 0.7; }

/* ---- low stamina: the edges of vision breathe ----------------------------------------- */
#hud-breath {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  --breath: 0;
}
#hud-breath.on {
  opacity: var(--breath);
  animation: hud-breathe 3.4s ease-in-out infinite;
}
@keyframes hud-breathe {
  0%   { transform: scale(1.06); opacity: calc(var(--breath) * 0.5); }
  50%  { transform: scale(1.0);  opacity: var(--breath); }
  100% { transform: scale(1.06); opacity: calc(var(--breath) * 0.5); }
}

/* ---- sanity whispers: a line, somewhere, for a third of a second ------------------------ */
#hud .whisper {
  position: absolute; white-space: nowrap;
  opacity: 0.5; color: #d9d2b0;
}

/* ---- inventory row, only while Tab is held --------------------------------------------- */
#hud-inv {
  position: absolute; left: 0; right: 0; bottom: 64px;
  text-align: center; opacity: 0; transition: opacity 120ms linear;
  white-space: pre;
}
#hud-inv.on { opacity: 0.6; }
#hud-inv .slot { display: inline-block; margin: 0 1.2ch; }
#hud-inv .slot .n { opacity: 0.55; margin-right: 0.6ch; }

/* ---- interaction prompt: a dot and a name, centre --------------------------------------- */
#hud-prompt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: none; align-items: center; gap: 1ch;
  opacity: 0.5; white-space: nowrap;
}
#hud-prompt.on { display: flex; }
#hud-prompt .dot { width: 3px; height: 3px; border-radius: 50%; background: #d9d2b0; }

/* ---- fade to black for transitions ------------------------------------------------------ */
#hud-fade {
  position: absolute; inset: 0; background: #000;
  opacity: 0; transition: opacity 600ms linear;
}

/* ---- gate / paused (menu.js) ------------------------------------------------------------ */
#hud-gate {
  position: absolute; inset: 0; background: #000;
  pointer-events: auto; cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #cfc8a8;
}
#hud-gate .intro { max-width: 62ch; text-align: left; opacity: 0.55; padding: 0 24px; }
#hud-gate .enter { margin-top: 3em; opacity: 0; transition: opacity 1200ms ease; letter-spacing: 0.14em; }
#hud-gate .enter.on { opacity: 0.6; }
#hud-paused {
  position: absolute; left: 20px; top: 16px; opacity: 0; transition: opacity 300ms ease;
  color: #8a8577; letter-spacing: 0.14em;
}
#hud-paused.on { opacity: 0.7; }

/* ---- death (death.js) ------------------------------------------------------------------- */
#hud-death {
  position: absolute; inset: 0; background: #000; display: none;
  pointer-events: auto;
  color: #cfc9b0;
}
#hud-death.on { display: block; }
#hud-death .body { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44ch; opacity: 0.8; }
#hud-death .cause { margin-bottom: 1.4em; }
#hud-death .record { opacity: 0.7; }
/* the share code: smaller, italic, a touch off the line, like a reference pencilled in afterwards */
#hud-death .ref {
  margin-top: 1.6em; padding-left: 1ch;
  font-size: 12px; font-style: italic; letter-spacing: 0.2em;
  color: #a39d86; opacity: 0; transform: rotate(-0.6deg);
  transition: opacity 900ms ease;
}
#hud-death .ref.on { opacity: 0.55; }
#hud-death .enter { margin-top: 2.4em; opacity: 0; transition: opacity 900ms ease; letter-spacing: 0.14em; }
#hud-death .enter.on { opacity: 0.55; }

/* ---- journal (journal.js) --------------------------------------------------------------- */
/* A sheet of paper, not a panel: grain, a slightly torn edge, faint ruling, ink a little grey. */
#hud-journal {
  position: absolute; inset: 0; display: none; pointer-events: auto;
  background: rgba(0,0,0,0.55);
  align-items: center; justify-content: center;
}
#hud-journal.on { display: flex; }
#hud-journal .sheet {
  /* the shadow lives on the wrapper so it follows the torn clip-path of the paper inside */
  filter: drop-shadow(0 22px 34px rgba(0,0,0,0.6)) drop-shadow(0 2px 3px rgba(0,0,0,0.45));
  transform: rotate(0.3deg);
  animation: hud-paper-in 220ms ease-out;
}
@keyframes hud-paper-in { from { opacity: 0; transform: rotate(0.3deg) translateY(6px); } to { opacity: 1; transform: rotate(0.3deg); } }
#hud-journal .paper {
  --grain: none;
  width: min(62ch, calc(100vw - 48px)); height: min(78vh, 720px);
  color: #3d3a33;
  padding: 34px 40px 34px 44px; overflow: hidden; outline: none;
  background-color: #e4ddc6;
  background-image:
    var(--grain),
    /* faint ruling, one line per line of text */
    repeating-linear-gradient(to bottom, transparent 0, transparent 19.8px, rgba(96, 84, 60, 0.12) 19.8px, rgba(96, 84, 60, 0.12) 20.8px),
    /* a red-brown margin line, almost gone */
    linear-gradient(to right, transparent 34px, rgba(150, 70, 50, 0.16) 34px, rgba(150, 70, 50, 0.16) 35px, transparent 35px),
    /* yellowing towards the corners, a thumb-worn patch lower right */
    radial-gradient(ellipse at 30% 20%, rgba(255,250,235,0.35), rgba(255,250,235,0) 60%),
    radial-gradient(ellipse at 90% 95%, rgba(120, 95, 50, 0.22), rgba(120, 95, 50, 0) 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 60%, rgba(90, 70, 40, 0.16) 100%);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 34px, 0 0, 0 0, 0 0, 0 0;
  text-shadow: 0 0 0.6px rgba(40, 35, 25, 0.35);
}
#hud-journal .paper .scroll { height: 100%; overflow-y: auto; scrollbar-width: none; padding-right: 8px; }
#hud-journal .paper .scroll::-webkit-scrollbar { display: none; }
#hud-journal h1, #hud-journal h2 { font-size: 13px; font-weight: normal; margin: 0; }
#hud-journal h1 { letter-spacing: 0.18em; text-transform: uppercase; color: #4a463d; }
#hud-journal .sub { color: #77705f; margin: 0.3em 0 0; white-space: pre-wrap; }
#hud-journal .ref { color: #8a836e; font-size: 12px; font-style: italic; letter-spacing: 0.16em; margin: 0.2em 0 1.8em; }
#hud-journal .rule { border-top: 1px solid rgba(61,58,51,0.28); margin: 1.2em 0; }
#hud-journal .entry { margin-bottom: 1.8em; }
#hud-journal .entry h2 { letter-spacing: 0.1em; color: #4a463d; margin-bottom: 0.3em; }
#hud-journal .entry .meta { color: #77705f; font-size: 12px; margin-bottom: 0.4em; white-space: pre-wrap; }
#hud-journal .entry p { margin: 0 0 0.6em; white-space: pre-wrap; }
#hud-journal .empty { color: #77705f; }
#hud-journal .hint { color: #8f887a; font-size: 12px; margin-top: 2em; letter-spacing: 0.1em; white-space: pre-wrap; }

/* ---- motion ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #hud-breath.on { animation: none; opacity: calc(var(--breath) * 0.7); }
  #hud-card, #hud-msg, #hud-inv, #hud-paused, #hud-gate .enter, #hud-death .enter, #hud-death .ref { transition-duration: 150ms; }
  #hud-journal .sheet { animation: none; }
}