/* Horror Project 1 ÔÇö interface only.

   Deliberately plain: flat greys, one face, square corners, no scanlines, no blur, no
   vignette, no CRT curvature. The look comes from the renderer's 320x240 target, vertex
   snapping and affine texture warping; the DOM stays out of the way. */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: #c8c8c4;
  overflow: hidden;
  font-family: "Lucida Console", "DejaVu Sans Mono", "Courier New", ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: none;
  cursor: default;
}

body[data-state="play"],
body[data-state="ending"] { cursor: none; }

/* ---------------------------------------------------------------- the picture */
#view {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 0;
}

/* collider debug overlay (F5), drawn in CSS pixels over the letterboxed view */
#overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  z-index: 1;
}

#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1px 0 0 -1px;
  background: #d8d8d2;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
body[data-state="play"] #crosshair,
body[data-state="ending"] #crosshair { opacity: 0.7; }

/* ---------------------------------------------------------------- layers */
.layer {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07080a;
  z-index: 60;
}
.layer.hidden { display: none; }

.panel {
  width: min(46rem, 84vw);
  padding: 2.2rem 2.4rem;
  background: #0b0d10;
  border: 1px solid #2a2f36;
  box-shadow: 0 0 0 1px #05060a inset;
  text-align: left;
}

.kicker {
  margin: 0 0 1.1rem 0;
  color: #5f6873;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 0.8rem 0;
  font-size: 2.1rem;
  font-weight: normal;
  letter-spacing: 0.14em;
  color: #e2e2dc;
  text-transform: uppercase;
}

h2 {
  margin: 0 0 1rem 0;
  font-size: 1.15rem;
  font-weight: normal;
  letter-spacing: 0.12em;
  color: #d6d6d0;
}

.tag {
  margin: 0 0 1.6rem 0;
  color: #8d949c;
}

.hint {
  margin: 0.5rem 0 0 0;
  color: #6a727c;
  font-size: 0.86rem;
}
.hint.tiny { font-size: 0.74rem; color: #4f565e; letter-spacing: 0.02em; }

.note { margin-top: 1.2rem; color: #a9b0b8; }
.note p { margin: 0.35rem 0 0 0; }

/* ---------------------------------------------------------------- the opening form */
label#formLabel {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: #6f7883;
  margin-bottom: 0.6rem;
}

#formInput {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #39404a;
  color: #e8e8e2;
  font: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  outline: none;
}
#formInput:focus { border-bottom-color: #7f8a96; }

/* ---------------------------------------------------------------- note overlay */
#note {
  background: rgba(4, 4, 6, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms steps(4, end);
  z-index: 30;
}
#note.visible { opacity: 1; pointer-events: auto; }

/* the note is the sheet of paper the player just took off the wall, held up in the dark:
   warm paper, brown ink, so the thing read and the thing seen are the same object */
.panel.sheet {
  width: min(38rem, 82vw);
  background: #cfc7ae;
  background-image: linear-gradient(158deg, rgba(255,255,255,0.40), rgba(116,96,62,0.18));
  border: 1px solid #8d8770;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.6);
  color: #2e2519;
}
.panel.sheet h2 {
  color: #403422;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.panel.sheet #noteBody {
  color: #2b2217;
  font-size: 1.02rem;
  line-height: 1.75;
  min-height: 5rem;
}
.panel.sheet #noteBody p { margin: 0 0 0.7rem 0; }
.panel.sheet .hint { color: #6d6148; }

/* the page when it stops being paper */
#note.possessed { background: rgba(0, 0, 0, 0.94); }
#note.possessed .panel.sheet {
  background: #9c8b74;
  color: #1a100c;
  animation: sheetShake 0.12s steps(2, end) infinite;
  box-shadow: 0 0 0 1px #4a1010, 0 0.5rem 2rem rgba(0, 0, 0, 0.8);
}
#note.possessed .panel.sheet h2,
#note.possessed .panel.sheet #noteBody,
#note.possessed .panel.sheet .hint { color: #3a1212; }
@keyframes sheetShake {
  50% { transform: translate(2px, -1px) rotate(-0.4deg); }
}

#stillhere {
  z-index: 80;
  background: #000;
  color: #e6e2da;
}
#stillhere p {
  margin: 0;
  font-size: clamp(1.2rem, 4vw, 2rem);
  letter-spacing: 0.22em;
  text-transform: lowercase;
}

#jumpscare {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: none;
  pointer-events: none;
  background: #1a0504;
}
#jumpscare.on {
  display: block;
  animation: woundHit 0.18s linear;
}
#jumpscare canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes woundHit {
  0% { filter: brightness(6) contrast(2.2); }
  12% { filter: brightness(2.2) contrast(1.6); }
  100% { filter: brightness(1) contrast(1.15); }
}

/* touch. Hidden until the body is marked, and only while there is something to do. */
#touch { display: none; }
body.touch[data-state="play"] #touch,
body.touch[data-state="read"] #touch,
body.touch[data-state="ending"] #touch { display: block; }
#touch .pad {
  position: fixed;
  bottom: 1.2rem;
  width: 42vw;
  height: 46vh;
  z-index: 40;
  touch-action: none;
}
#touchStick { left: 0; }
#touchLook { right: 0; }
#touchButtons {
  position: fixed;
  right: 0.6rem;
  bottom: 0.7rem;
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#touchButtons button {
  min-width: 4.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  background: rgba(8, 8, 10, 0.72);
  color: #d5d2cb;
  border: 1px solid #3a3a3a;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  touch-action: none;
}
#touchHold.down { color: #e6d27a; border-color: #8a7a3a; }

/* ---------------------------------------------------------------- voice, prompt, debug */
#subtitle {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8vh;
  margin: 0 auto;
  width: min(50rem, 86vw);
  text-align: center;
  color: #dfe2e6;
  font-size: 1.1rem;
  line-height: 1.6;
  text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}
#subtitle.visible { opacity: 1; }

#prompt {
  position: fixed;
  left: 50%;
  top: calc(50% + 2.2rem);
  transform: translateX(-50%);
  color: #cfd3d8;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}
#prompt.visible { opacity: 1; }

/* ---------------------------------------------------------------- the meters
   Three bars in one column in the upper left: the body, the mind, and the lamp under them. Each
   block keeps its own fixed position, so the column reads top to bottom in that order and the
   three can be read in one glance without crossing the picture. A bar is a plain percentage: the
   filled part is the colour of the thing it measures and the missing part is the dark track, so
   "80 % health" is four fifths red and one fifth nothing. */
.meter {
  position: fixed;
  left: 1.7rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms steps(4, end);
  z-index: 20;
}
body[data-state="play"] .meter,
body[data-state="ending"] .meter { opacity: 1; }

/* one block is a label line and a bar, 30 px all told, so a 2.1rem pitch leaves a small gap */
#hp { top: 1.7rem; }
#sanity { top: 3.8rem; }

.meterLabel {
  margin: 0 0 0.35rem 0;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #6a727c;
  text-shadow: 0 1px 0 #000;
}
.meterLabel b { font-weight: normal; letter-spacing: 0.06em; color: #8d949c; }

.meterBar {
  width: 8.6rem;
  height: 0.42rem;
  background: #0a0c0f;
  border: 1px solid #333a42;
  box-shadow: 0 0 0 1px #05060a inset;
}
#hpFill, #sanityFill { display: block; height: 100%; width: 100%; }

/* the body is the warning colour of the three, and the only one that is not a mood */
#hpFill { background: #b8392c; }
#hp .meterLabel b { color: #bd766c; }

/* the mind is a dark lavender: cold, and deliberately close to the colour of the dark itself */
#sanityFill { background: #6f6096; }
#sanity .meterLabel b { color: #a294c0; }

/* ---------------------------------------------------------------- the lamp gauge
   The lamp is the only thing the player holds, so its gauge closes the column of bars in the
   upper left. It is part of play rather than an overlay: the bar is the charge, and it pulses on
   steps while the hand is winding, so "I am shaking the lamp" and "the lamp is coming back" are
   one read. The fill's own colour is written by `js/game.js` from the light the cell is giving --
   yellow at full, greyish yellow as it dims -- rather than by a class here, because the ramp is a
   continuous one. */
#lamp {
  position: fixed;
  left: 1.7rem;
  top: 5.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms steps(4, end);
  z-index: 20;
}
body[data-state="play"] #lamp,
body[data-state="ending"] #lamp { opacity: 1; }

#lampLabel {
  margin: 0 0 0.35rem 0;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #6a727c;
  text-shadow: 0 1px 0 #000;
}
#lampLabel b { font-weight: normal; letter-spacing: 0.06em; color: #8d949c; }

#lampBar {
  width: 8.6rem;
  height: 0.42rem;
  background: #0a0c0f;
  border: 1px solid #333a42;
  box-shadow: 0 0 0 1px #05060a inset;
}
/* full charge, and the colour `js/game.js` fades from. The class rules below change the label
   and the pulse only: the fill's colour is the light level, and an inline style outranks a
   class, so a colour rule here would be a rule that never applies. */
#lampFill { display: block; height: 100%; width: 100%; background: #d9c451; }

/* the beam is about to die: the same threshold the voice warns at */
#lamp.low #lampLabel { color: #9a7c48; }
#lamp.low #lampLabel b { color: #c9a45e; }

/* the hand is working. The pulse is stepped, like everything else on this screen. */
#lamp.charging #lampLabel { color: #cfc7ae; }
#lamp.charging #lampLabel b { color: #e8e0c2; }
#lamp.charging #lampFill { animation: lampCharge 460ms steps(2, end) infinite; }
@keyframes lampCharge {
  0% { opacity: 1; }
  50% { opacity: 0.42; }
  100% { opacity: 1; }
}

/* The readout is a developer's overlay and the meters now hold the upper left, so it takes the
   other corner: both are legible at once and neither hides the other. */
#debug,
#fps {
  position: fixed;
  right: 0.8rem;
  top: 0.8rem;
  text-align: right;
  color: #9fe08a;
  font-size: 0.7rem;
  line-height: 1.45;
  text-shadow: 0 1px 0 #000;
  opacity: 0;
  pointer-events: none;
  z-index: 21;
  white-space: pre-line;
}
#debug.visible,
#fps.visible { opacity: 1; }

/* The counter and the overlay share the corner, so the overlay steps down when both are up and
   the counter keeps the first line. */
body.fpsshow #debug { top: 2.05rem; }

/* ---------------------------------------------------------------- the end */
#fade {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.2s linear;
  z-index: 40;
}
#fade.visible { opacity: 1; }

#card { z-index: 50; background: #000; }

#again {
  margin-top: 1.6rem;
  padding: 0.7rem 1.6rem;
  background: #14171b;
  border: 1px solid #39404a;
  color: #c8c8c4;
  font: inherit;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
#again:hover, #again:focus { background: #1d2228; border-color: #6d7883; outline: none; }

/* ---------------------------------------------------------------- failure */
.fatal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #000;
  color: #b04a4a;
  white-space: pre-wrap;
  text-align: center;
  z-index: 99;
}

/* ---------------------------------------------------------------- the developer console
   Opened with the tilde key. It sits over everything, including the boot and pause layers,
   because it is a tool rather than a part of the game: a developer who has just broken
   something needs it to open whatever screen the game is stuck on. The palette is the
   renderer's own terminal green on black, deliberately unlike the interface, so there is never
   a question of whether a line on this panel is the game talking. */
.devconsole {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62vh;
  min-height: 14rem;
  background: rgba(4, 6, 5, 0.94);
  border-top: 1px solid #2f3a30;
  box-shadow: 0 -1px 0 #000;
  color: #a8c8a0;
  font-size: 0.78rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  z-index: 80;
  cursor: text;
}
.devconsole.hidden { display: none; }

.dcHead {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid #1d241d;
  background: #080b08;
}
.dcTitle { color: #d6e4cf; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.68rem; }
.dcHint { color: #5f6f5c; font-size: 0.66rem; letter-spacing: 0.06em; }
.dcHint b { color: #9aa894; font-weight: normal; }

.dcLog {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0.7rem 0.2rem 0.7rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.dcLog > div { min-height: 1.15em; }
.dcLog .dcerr { color: #d9786a; }
.dcLog .dcwarn { color: #cfae62; }
.dcLog .dcok { color: #9fd08a; }
.dcLog .dcdim { color: #5f6f5c; }
.dcLog .dcecho { color: #7f9379; }

.dcLine {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem 0.5rem 0.7rem;
  border-top: 1px solid #1d241d;
  background: #080b08;
}
.dcPrompt { color: #7fae6e; }
.dcInput {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: none;
  color: #cfe4c6;
  font: inherit;
  letter-spacing: 0.04em;
  caret-color: #9fd08a;
}
.dcInput::selection { background: #2c3a2a; }

/* The console is a tool, not a room: the meters stay readable under it so a developer poking at
   the lamp or the body can see what the change did while typing the next line. */
body[data-state="console"] .meter,
body[data-state="console"] #lamp { opacity: 1; }

/* `hud off`, for looking at the world and nothing else. */
body.nohud .meter,
body.nohud #lamp,
body.nohud #crosshair,
body.nohud #prompt,
body.nohud #subtitle { display: none !important; }


/* ---------------------------------------------------------------- dual-reality flip (first slice)
   Heart pulse on the health meter; brief Bayer-ish tear flash over the view. */
#hp.heartSpike .meterBar {
  box-shadow: 0 0 0 1px #b8392c, 0 0 10px rgba(184, 57, 44, 0.55);
  animation: heartSpikePulse 0.55s steps(3, end) 1;
}
#hp.heartSpike .meterLabel b { color: #e07068; }
@keyframes heartSpikePulse {
  0% { transform: scaleY(1); }
  35% { transform: scaleY(1.35); }
  70% { transform: scaleY(0.92); }
  100% { transform: scaleY(1); }
}

#realityTear {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  opacity: 0; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(255,0,80,0.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,220,255,0.06) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.12), transparent 55%);
  transform: none;
  transition: opacity 40ms linear;
}
#realityTear.on {
  opacity: 1;
  animation: realityTearWarp 100ms steps(2, end) 1;
}
@keyframes realityTearWarp {
  0% { transform: translate(0, 0) skewX(0deg); filter: none; }
  40% { transform: translate(-3px, 1px) skewX(-1.2deg); filter: hue-rotate(20deg) contrast(1.4); }
  70% { transform: translate(4px, -2px) skewX(1.5deg); filter: hue-rotate(-25deg) contrast(1.6); }
  100% { transform: translate(0, 0); filter: none; }
}

/* ---------------------------------------------------------------- inventory overlay (PS1 horror)
   Floaty RIGHT-side HUD: game world stays visible on the left. Distressed glowing red/noise
   border, translucent dark plate, subtle perspective tilt (PS1-ish, not modern glass).
   World keeps ticking; meters stay readable. Opened with Tab / I from game.js. */
#inventory {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 3vh 1.5vw 3vh 0;
  /* No dim plane - the left half is the live scene. */
  background: transparent;
  pointer-events: none;
  cursor: default;
}
#inventory.hidden { display: none; }

/* Perspective cradle - panel sits in 3D space without swallowing the clickable world. */
.invFloat {
  pointer-events: auto;
  perspective: 1100px;
  perspective-origin: 70% 45%;
  transform-style: preserve-3d;
  margin-right: 0.4vw;
  max-height: 94vh;
}

.invPanel {
  position: relative;
  width: min(65.8rem, 84vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(145deg, rgba(18, 10, 10, 0.55) 0%, transparent 42%),
    linear-gradient(180deg, rgba(10, 12, 16, 0.82), rgba(6, 8, 12, 0.90));
  /* crunchy multi-stroke red border */
  border: 3px solid #b83228;
  box-shadow:
    0 0 0 1px #4a100c,
    0 0 0 2px rgba(200, 48, 40, 0.55),
    0 0 0 5px rgba(80, 12, 10, 0.65),
    0 0 18px rgba(200, 40, 32, 0.45),
    0 0 42px rgba(140, 20, 16, 0.28),
    8px 14px 28px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(255, 80, 60, 0.12),
    inset 0 0 28px rgba(0, 0, 0, 0.45);
  outline: 1px dashed rgba(180, 50, 42, 0.35);
  outline-offset: -7px;
  /* PS1 float: yaw toward camera from the right, tiny pitch + skew */
  transform: rotateY(-7deg) rotateX(2.2deg) skewY(-0.55deg) translateZ(0);
  transform-origin: 100% 50%;
  image-rendering: pixelated;
  overflow: hidden;
}

/* Soft red bloom behind the plate (layered depth). */
.invGlow {
  position: absolute;
  inset: -18px -14px -22px -28px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 80% 40%, rgba(180, 28, 22, 0.28), transparent 70%),
    radial-gradient(ellipse 50% 40% at 30% 90%, rgba(120, 20, 16, 0.18), transparent 65%);
  filter: blur(2px);
  transform: translateZ(-20px);
}

/* Distressed digital noise / worn paint over the frame. */
.invNoise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(180, 40, 30, 0.08) 2px, rgba(180, 40, 30, 0.08) 3px),
    repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(0, 0, 0, 0.15) 3px, rgba(0, 0, 0, 0.15) 4px),
    radial-gradient(circle at 12% 18%, rgba(255, 90, 70, 0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 22%, rgba(255, 60, 40, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 78%, rgba(0, 0, 0, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 55%, rgba(255, 100, 80, 0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 60%, rgba(0, 0, 0, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 95% 70%, rgba(200, 40, 30, 0.3) 0 1px, transparent 2px);
  background-size: auto, auto, 48px 48px, 53px 53px, 41px 41px, 37px 37px, 59px 59px, 44px 44px;
}

/* Jagged inner edge - worn / stamped frame. */
.invEdge {
  position: absolute;
  inset: 4px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(200, 55, 45, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(40, 8, 6, 0.8),
    0 0 12px rgba(200, 40, 32, 0.25);
  /* slightly uneven corners via clip-ish shadow */
  outline: 1px solid rgba(120, 30, 24, 0.4);
  outline-offset: 2px;
}

.invHead,
.invBody,
.invFoot {
  position: relative;
  z-index: 2;
}

.invHead {
  flex: 0 0 auto;
  padding: 1.01rem 1.37rem 0.63rem;
  border-bottom: 1px solid rgba(120, 32, 26, 0.7);
  background:
    linear-gradient(180deg, rgba(50, 14, 12, 0.55), transparent 80%),
    rgba(6, 8, 10, 0.25);
}

.invTitle {
  margin: 0 0 0.7rem 0;
  text-align: center;
  font-size: 1.86rem;
  font-weight: normal;
  letter-spacing: 0.34em;
  color: #d43830;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(200, 40, 32, 0.55),
    1px 1px 0 #2a0806,
    -1px 0 0 rgba(80, 10, 8, 0.8);
}

.invTabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.39rem;
  flex-wrap: wrap;
}

.invTabKey {
  color: #6a727c;
  font-size: 1.16rem;
  letter-spacing: 0.08em;
  padding: 0 0.15rem;
}

.invTab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #7a828c;
  font: inherit;
  font-size: 1.23rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.48rem 0.81rem;
  cursor: pointer;
}
.invTab .invTabIcon {
  display: inline-block;
  min-width: 1em;
  color: #5a4240;
  margin-right: 0.12rem;
}
.invTab.active {
  color: #e2e2dc;
  border-color: #c43830;
  background: rgba(140, 28, 22, 0.4);
  box-shadow:
    0 0 0 1px rgba(200, 48, 40, 0.5) inset,
    0 0 10px rgba(180, 32, 24, 0.35);
}
.invTab.active .invTabIcon { color: #d43830; }
.invTab:hover { color: #c8c8c4; }

.invBody {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.09rem 1.37rem;
  overflow: auto;
}

.invMain {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 1.26rem;
  align-items: start;
}
.invMain.hidden { display: none; }

.invLeft { display: flex; flex-direction: column; gap: 1.01rem; }

.invSectionLabel {
  margin: 0 0 0.4rem 0;
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 0.2em;
  color: #8d949c;
  text-transform: uppercase;
}
.invSectionLabel b {
  font-weight: normal;
  color: #d43830;
  letter-spacing: 0.08em;
  margin-left: 0.3rem;
  text-shadow: 0 0 6px rgba(200, 40, 32, 0.4);
}

.invGrid {
  display: grid;
  gap: 0.55rem;
}
.invGridWeapons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.invGridKeys { grid-template-columns: repeat(4, 1fr); }
.invGridBag { grid-template-columns: repeat(5, 1fr); }

.invSlot {
  position: relative;
  appearance: none;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  background: rgba(10, 12, 16, 0.88);
  border: 2px solid #2a3038;
  box-shadow: 0 0 0 1px #050608 inset, 2px 2px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  overflow: hidden;
  image-rendering: pixelated;
}
.invSlot.empty { border-color: #1c2026; background: rgba(8, 10, 12, 0.7); }
.invSlot.selected {
  border-color: #d43830;
  box-shadow:
    0 0 0 2px rgba(212, 56, 48, 0.65),
    0 0 12px rgba(200, 40, 32, 0.4),
    0 0 0 1px #050608 inset;
}
.invSlot.examine {
  border-color: #e6d27a;
  box-shadow: 0 0 0 2px rgba(230, 210, 122, 0.45);
}
.invSlot.equipped::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 5px; height: 5px;
  background: #d43830;
  box-shadow: 0 0 4px rgba(200, 40, 32, 0.8);
}
.invSlotArt {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
.invSlotNum {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 1.02rem;
  color: #c8c8c4;
  letter-spacing: 0;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
}
.invSlotX {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a3038;
  font-size: 1.92rem;
  pointer-events: none;
}

.invDetail {
  background: rgba(4, 6, 10, 0.72);
  border: 1px solid rgba(80, 24, 20, 0.75);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.4);
  padding: 0.5rem;
  min-height: 21.8rem;
}
.invPreview {
  display: block;
  width: 100%;
  max-width: 18.2rem;
  margin: 0 auto 0.5rem;
  background: #0a0c10;
  border: 1px solid #2a3038;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
}
.invName {
  margin: 0 0 0.45rem 0;
  text-align: center;
  font-size: 1.64rem;
  font-weight: normal;
  letter-spacing: 0.18em;
  color: #e2e2dc;
  text-transform: uppercase;
}
.invDesc {
  margin: 0;
  font-size: 1.27rem;
  line-height: 1.45;
  color: #8d949c;
  letter-spacing: 0.03em;
}
.invDesc.focus {
  color: #d6d6d0;
  border-left: 2px solid #d43830;
  padding-left: 0.4rem;
}

.invStub {
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.01rem;
  padding: 1.2rem;
}
.invStub.hidden { display: none; }
.invStubKicker {
  margin: 0;
  color: #d43830;
  letter-spacing: 0.28em;
  font-size: 1.41rem;
  text-shadow: 0 0 8px rgba(200, 40, 32, 0.45);
}
.invStubText {
  margin: 0;
  color: #6a727c;
  font-size: 1.46rem;
  max-width: 24rem;
}

.invFoot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.19rem;
  justify-content: center;
  padding: 0.73rem 1.19rem 0.91rem;
  border-top: 1px solid rgba(120, 32, 26, 0.7);
  background: rgba(6, 8, 10, 0.4);
}
.invPrompt {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.13rem;
  letter-spacing: 0.08em;
  color: #8d949c;
  text-transform: uppercase;
}
.invPad, .invBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-style: normal;
  font-size: 1.05rem;
  border: 1px solid #5a626c;
  background: #1a1e24;
  color: #c8c8c4;
  letter-spacing: 0;
}
.invBtn.a { border-color: #3a6a48; color: #9fd08a; }
.invBtn.x { border-color: #3a5a8a; color: #8ab0d8; }
.invBtn.y { border-color: #8a7a3a; color: #e6d27a; }
.invBtn.b { border-color: #8a3a32; color: #d9786a; }

body.inv-open .meter,
body.inv-open #lamp { opacity: 1; }
body.inv-open #crosshair { opacity: 0; }

/* Chunky PS1 pointer whenever the inventory (or other menu layers) show a cursor. */
body.inv-open,
body.inv-open *,
#boot:not(.hidden),
#boot:not(.hidden) *,
#pause:not(.hidden),
#pause:not(.hidden) *,
#card:not(.hidden),
#card:not(.hidden) *,
#form:not(.hidden),
#form:not(.hidden) * {
  cursor: url("cursor-ps1.png") 2 2, url("./cursor-ps1.png") 2 2, crosshair !important;
}

.invTab:hover {
  color: #e2e2dc;
  border-color: rgba(200, 56, 48, 0.55);
  background: rgba(100, 24, 20, 0.28);
}
.invSlot:hover:not(.selected) {
  border-color: #8a4840;
  box-shadow: 0 0 0 1px rgba(200, 56, 48, 0.35), 0 0 0 1px #050608 inset;
  background: rgba(28, 14, 12, 0.92);
}
.invSlot.empty:hover {
  border-color: #3a3038;
  background: rgba(14, 12, 14, 0.85);
}
.invAction {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
}
.invAction:hover:not(:disabled) {
  color: #e2e2dc;
  border-color: rgba(200, 56, 48, 0.45);
  background: rgba(80, 20, 16, 0.35);
}
.invAction:disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
}
.invPromptStatic { pointer-events: none; }
.invPreview:hover {
  outline: 1px solid rgba(200, 56, 48, 0.55);
}

@media (max-width: 900px) {
  .invPanel {
    width: min(68.6rem, 98vw);
    transform: rotateY(-4deg) rotateX(1.5deg) skewY(-0.35deg);
  }
}
@media (max-width: 720px) {
  #inventory {
    justify-content: center;
    padding: 2vh 2vw;
  }
  .invMain { grid-template-columns: 1fr; }
  .invPanel {
    width: min(72.8rem, 98vw);
    max-height: 92vh;
    transform: rotateY(-2deg) rotateX(1deg);
    transform-origin: 50% 50%;
  }
}

/* ---------------------------------------------------------------- Silent Return title screen */
#boot { background: #030405; overflow: hidden; }
.titleScene {
  position: relative;
  width: min(100vw, 133.333vh);
  height: min(100vh, 75vw);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  background:
    linear-gradient(90deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.52) 56%, rgba(0,0,0,.12) 100%),
    radial-gradient(ellipse at 77% 42%, rgba(177,127,57,.24), transparent 14%),
    linear-gradient(180deg, #111720 0%, #090b0f 54%, #050506 100%);
  box-shadow: 0 0 0 1px #20232a;
  image-rendering: pixelated;
}
.titleScene::before {
  content: ""; position: absolute; inset: 0 0 0 37%; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(87,91,95,.20) 9.4% 10%, transparent 10.5% 88%, rgba(105,104,96,.2) 89% 90%, transparent 90.5%),
    linear-gradient(180deg, transparent 0 12%, rgba(108,94,71,.18) 12.4% 13%, transparent 13.5% 70%, rgba(0,0,0,.8) 100%),
    linear-gradient(90deg, #161b21, #282c2e 45%, #101317 50%, #202328 75%, #0b0d10);
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  opacity: .92;
}
.titleScene::after {
  content: ""; position: absolute; right: 15%; top: 37%; width: 5%; height: 24%;
  pointer-events: none; opacity: .78;
  background: radial-gradient(ellipse at 50% 13%, #101113 0 12%, transparent 13%),
    linear-gradient(90deg, transparent 17%, #08090a 18% 82%, transparent 83%);
  filter: drop-shadow(0 0 2px #000);
}
.titleBrand { position: absolute; z-index: 1; left: 6.5%; top: 9%; width: 43%; }
.titleRule { height: 2px; width: 96%; margin: 0 0 .35em; background: linear-gradient(90deg, #988b76, #ded4bd 68%, transparent); }
#boot .titleBrand h1 {
  margin: 0; color: #d8d1c0; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 5.2cqw, 4.2rem); letter-spacing: .045em; line-height: .9;
  text-shadow: 2px 2px 0 #301b18, -1px 0 #82766a; white-space: nowrap;
}
.titleTag { margin: .8em 0 0; color: #9e9587; font-size: clamp(.48rem, 1.1vw, .9rem); letter-spacing: .12em; text-transform: lowercase; }
.titleMenu { position: absolute; z-index: 2; left: 5%; top: 37%; width: 39%; display: grid; gap: .12em; }
.titleChoice {
  display: flex; align-items: center; gap: .6em; width: 100%; min-height: clamp(2rem, 6.2vh, 4.1rem);
  padding: .2em .55em; border: 1px solid transparent; background: rgba(13,14,17,.66);
  color: #b8b5ad; text-align: left; font: inherit; font-size: clamp(.68rem, 1.4vw, 1.18rem);
  letter-spacing: .12em; cursor: pointer; text-shadow: 1px 1px #000;
}
.titleChoice .titleArrow { width: 1em; color: transparent; font-size: .8em; }
.titleChoice.selected, .titleChoice:hover:not(:disabled) {
  color: #f0e9da; border-color: rgba(164,53,43,.65);
  background: linear-gradient(90deg, rgba(111,26,25,.8), rgba(62,18,18,.72), rgba(16,13,14,.58));
  box-shadow: inset 0 0 0 1px rgba(150,35,28,.28);
}
.titleChoice.selected .titleArrow, .titleChoice:hover:not(:disabled) .titleArrow { color: #eee4d4; }
.titleChoice:disabled { color: #66615a; cursor: default; opacity: .66; }
.titleChoice small { margin-left: auto; color: #746c62; font-size: .57em; letter-spacing: .04em; }
.titleHint, .titleControls { color: #77736c; font-size: clamp(.4rem, .72vw, .65rem); letter-spacing: .09em; }
.titleHint { margin: .65em 0 0 2.6em; }
.titleControls { position: absolute; z-index: 1; left: 5%; bottom: 3%; margin: 0; color: #57595b; }
.titleInfo { position: absolute; z-index: 3; left: 5%; top: 37%; width: 39%; padding: 1em; color: #c9c4b9; background: rgba(5,6,8,.94); border: 1px solid #574642; }
.titleInfo.hidden { display: none; }
.titleInfo h2 { color: #e0d7c9; }
.titleInfo p { font-size: clamp(.6rem, 1vw, .9rem); }
.titleInfo button { margin-top: .5em; padding: .45em .8em; border: 1px solid #59423e; background: #160f10; color: #ddd3c5; font: inherit; cursor: pointer; }

/* Tablet wheel: four tactile slots inside the live inventory overlay. */
.invReality { min-height: 21rem; padding: clamp(1rem,3vw,2.8rem); display: grid; grid-template-columns: minmax(12rem, .8fr) 1.2fr; gap: clamp(1.5rem,5vw,4.4rem); align-items: center; }
.invReality.hidden { display: none; }
.pillWheel { width: min(25vw, 17rem); aspect-ratio: 1; justify-self: center; position: relative; border: .8rem ridge #50443b; border-radius: 50%; background: repeating-conic-gradient(from 8deg, #33302d 0 22deg, #716253 24deg 27deg, #262628 29deg 90deg); box-shadow: inset 0 0 0 .55rem #141517, 0 0 0 .4rem #180d0c, 0 0 1.8rem #090909; transform: rotate(-8deg); transition: transform .18s steps(4,end), filter .18s steps(3,end); }
.pillWheel::before { content:""; position:absolute; inset:16%; border:2px solid #93816b; border-radius:50%; background: radial-gradient(circle, #101114 0 37%, #433a32 38% 42%, #171719 43%); }
.pillWheel::after { content:""; position:absolute; width:16%; height:27%; left:42%; top:4%; border-radius:9px 9px 50% 50%; background:linear-gradient(90deg,#d3cbb6,#f1e7d1 46%,#918574 100%); box-shadow:1px 2px 0 #171515; }
.pillHub { position:absolute; z-index:1; inset:39%; border-radius:50%; border:2px solid #8b7660; background:#272321; }
.invReality[data-state="uncanny"] .pillWheel { filter:hue-rotate(52deg); }
.invReality[data-state="horror"] .pillWheel { filter:hue-rotate(-24deg) saturate(1.2); }
.invReality[data-state="overdose"] .pillWheel { filter:hue-rotate(130deg) saturate(1.5); }
.pillReadout { max-width: 38rem; }
.pillReadout h2 { font-size: clamp(1rem,2.5vw,1.8rem); color:#e6ddd0; letter-spacing:.18em; }
.pillReadout #pillStateDesc { color:#9b958b; min-height:2.5em; }
.pillChoices { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin:1rem 0; }
.pillChoices button { display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border:1px solid #373331; background:rgba(0,0,0,.25); color:#a49e95; font:inherit; font-size:.72rem; letter-spacing:.07em; cursor:pointer; }
.pillChoices button.selected { color:#eee6d9; border-color:#a44638; background:rgba(95,28,22,.4); }
.pillDot { width:1rem; height:.6rem; border-radius:1rem; border:1px solid #aaa; background:#d8d0bd; box-shadow:inset -5px 0 rgba(0,0,0,.18); }
.pillDot.uncanny { background:#bac18a; }.pillDot.horror { background:#7c2823; }.pillDot.overdose { background:#9b4a9b; }
.pillHelp { color:#716c65; font-size:.62rem; letter-spacing:.05em; }
.pillTake { padding:.6rem .8rem; color:#e4d9ca; border:1px solid #884035; background:#321513; font:inherit; font-size:.7rem; letter-spacing:.1em; cursor:pointer; }
.pillTake:hover { background:#55211a; }
#realityStatus { position:fixed; z-index:8; right:1.3rem; top:1.15rem; display:flex; flex-direction:column; gap:.1rem; max-width:17rem; padding:.35rem .55rem; border-left:2px solid #74665a; background:rgba(4,5,7,.55); color:#aaa49a; font-size:.62rem; letter-spacing:.08em; pointer-events:none; }
#realityStatus b { color:#d3c7b4; font-size:.72rem; letter-spacing:.18em; }
body[data-state="boot"] #realityStatus, body[data-state="ask"] #realityStatus { display:none; }
@media (max-width: 720px) { .invReality { grid-template-columns:1fr; min-height:0; padding:1rem; gap:1rem; } .pillWheel { width:min(34vw,10rem); } .pillReadout { width:100%; } }

/* Reference title art is the background itself; controls are invisible hit areas aligned to
   the four baked-in menu bars. Keep the art's 1729:900 composition intact at every size. */
.titleScene { width:min(100vw,192.111vh); height:min(100vh,52.054vw); aspect-ratio:1729 / 900; container-type:inline-size; background:#020305; box-shadow:none; }
.titleScene::before,.titleScene::after { display:none; }
.titleArt { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; image-rendering:pixelated; }
.titleMenu { inset:0 auto auto 0; width:100%; height:100%; display:block; }
.titleChoice { position:absolute; left:4.75%; width:35.5%; height:9.15%; min-height:0; padding:0; border:1px solid transparent; background:transparent; color:transparent; box-shadow:none; }
.titleChoice:nth-child(1) { top:38.1%; }
.titleChoice:nth-child(2) { top:50.0%; }
.titleChoice:nth-child(3) { top:61.1%; }
.titleChoice:nth-child(4) { top:72.2%; }
.titleChoice.selected,.titleChoice:hover:not(:disabled),.titleChoice:focus-visible { border-color:rgba(205,53,42,.9); background:rgba(116,15,19,.16); box-shadow:inset 0 0 0 1px rgba(255,210,190,.12); outline:none; }
.titleChoice:disabled { cursor:not-allowed; }
.srOnly { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.titleHint { position:absolute; z-index:3; left:5%; bottom:2.2%; margin:0; color:rgba(221,214,202,.62); font-size:clamp(.4rem,.72vw,.65rem); letter-spacing:.09em; pointer-events:none; }
.titleInfo { left:4.75%; top:38%; width:32.7%; }
.titleHint { display:none; }
.itemReference { display:block; width:min(48vw,28rem); max-height:58vh; object-fit:contain; image-rendering:pixelated; margin:.5rem 0 1rem; border:1px solid #433831; background:#090a0b; }
.questList { display:grid; gap:.45rem; max-width:52rem; }
.questCard { padding:.55rem .7rem; border-left:2px solid #75644c; background:rgba(0,0,0,.25); color:#b7b0a5; font-size:.82rem; }
.questCard.done { border-color:#759172; color:#82927f; text-decoration:line-through; }
.questCard b { color:#e0d3bd; letter-spacing:.07em; }
.readNotes { margin-top:1.1rem; max-width:48rem; color:#827c75; font-size:.76rem; white-space:pre-line; }
.preludeFrame { position:relative; width:min(100vw,133.333vh); height:min(100vh,75vw); aspect-ratio:4/3; overflow:hidden; padding:10% 8%; box-sizing:border-box; background:radial-gradient(ellipse at 56% 50%,#1d2023,#090b0e 47%,#020304); border:1px solid #3d3330; color:#c9c1b3; }
.preludeFrame::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.20) 4px),linear-gradient(90deg,rgba(0,0,0,.8),transparent 72%); }
.preludePlayer { position:absolute; right:16%; bottom:0; width:22%; height:82%; opacity:.83; filter:drop-shadow(0 0 18px #050506); }
.preludePlayer i { position:absolute; top:7%; left:37%; width:28%; height:18%; border-radius:42% 42% 36% 36%; background:#050506; }
.preludePlayer b { position:absolute; left:22%; bottom:-4%; width:58%; height:74%; background:#050506; clip-path:polygon(31% 0,68% 0,86% 20%,100% 83%,81% 86%,69% 40%,70% 100%,50% 100%,43% 48%,37% 100%,15% 100%,25% 40%,9% 86%,0 83%,16% 20%); }
.preludeKicker { position:relative; color:#9e423b; letter-spacing:.22em; font-size:clamp(.55rem,1.3vw,1rem); }
#preludeTitle { position:relative; max-width:54%; margin:7vh 0 1rem; color:#e0d8c8; font:clamp(1.2rem,4vw,3rem) Georgia,serif; letter-spacing:.08em; }
#preludeText { position:relative; max-width:48%; min-height:4.5em; line-height:1.8; color:#aaa59d; font-size:clamp(.7rem,1.4vw,1.05rem); }
#skipPrelude { position:absolute; z-index:2; left:8%; bottom:7%; padding:.65rem 1rem; border:1px solid #59433e; background:rgba(16,10,10,.82); color:#d7cec2; font:inherit; letter-spacing:.12em; cursor:pointer; }