:root {
  --ink: #0b1013;
  --ink-2: #10191f;
  --blueblack: #17232b;
  --blueblack-2: #21323c;
  --blueblack-3: #2c414c;
  --paper: #eee2c5;
  --paper-hi: #faf2da;
  --paper-lo: #cdbf9d;
  --moon: #79bec5;
  --moon-hi: #a6e4e5;
  --moon-dim: #477c82;
  --safelight: #9f2529;
  --safelight-hi: #d55251;
  --safelight-dark: #5e161b;
  --brass: #d1a84e;
  --brass-hi: #f0ce72;
  --brass-dark: #76591d;
  --positive: #73c29b;
  --warning: #d99a49;
  --danger: #d95b5b;
  --muted: #85939a;
  --line: #4b606b;
  --line-soft: rgb(121 190 197 / 22%);
  --black: #05080a;
  --white: #fffdf4;
  --shadow-color: rgb(0 0 0 / 58%);
  --shadow-sm: 0 3px 0 rgb(0 0 0 / 28%);
  --shadow-md: 0 10px 28px rgb(0 0 0 / 38%);
  --shadow-lg: 0 22px 70px rgb(0 0 0 / 62%);
  --inset-line: inset 0 0 0 1px rgb(255 255 255 / 7%);
  --serif: Georgia, "Times New Roman", "Batang", "바탕", serif;
  --sans: "Pretendard", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --mono: "Cascadia Mono", "D2Coding", Consolas, "Malgun Gothic", monospace;
  --header-h: 66px;
  --inventory-w: clamp(210px, 14vw, 238px);
  --stage-ratio: 16 / 9;
  color-scheme: dark;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  color: var(--paper);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
  user-select: none;
}

body::before {
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background:
    repeating-radial-gradient(circle at 18% 23%, transparent 0 1px, rgb(255 255 255 / 9%) 1px 2px, transparent 2px 4px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 8%) 0 1px, transparent 1px 4px);
}

button,
input,
select,
textarea {
  margin: 0;
  border: 0;
  color: inherit;
  font: inherit;
}

button,
[role="button"] {
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.46;
  filter: saturate(0.35);
}

input,
textarea {
  user-select: text;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.hotspot:focus-visible {
  z-index: 2;
  outline: 3px solid var(--moon-hi);
  outline-offset: 3px;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

.is-hidden,
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.screen {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: none;
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

.screen.is-active {
  z-index: 1;
  display: flex;
}

/* ---------- Shared controls ---------- */

.btn,
.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.modal-close,
.puzzle-button,
.control-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.68rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(180deg, #2d414c, #1b2a33 58%, #131e25);
  color: var(--paper-hi);
  box-shadow: var(--shadow-sm), var(--inset-line);
  font-weight: 750;
  letter-spacing: 0.025em;
  text-decoration: none;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease, filter 120ms ease;
}

.btn::after,
.primary-btn::after,
.secondary-btn::after,
.puzzle-button::after,
.control-button::after {
  position: absolute;
  inset: 4px;
  border: 1px solid rgb(255 255 255 / 5%);
  pointer-events: none;
  content: "";
}

.btn:hover:not(:disabled),
.secondary-btn:hover:not(:disabled),
.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.puzzle-button:hover:not(:disabled),
.control-button:hover:not(:disabled) {
  border-color: var(--moon);
  background: linear-gradient(180deg, #36515d, #223640 60%, #17252d);
  color: var(--white);
}

.btn:active:not(:disabled),
.primary-btn:active:not(:disabled),
.secondary-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.puzzle-button:active:not(:disabled),
.control-button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgb(0 0 0 / 35%), var(--inset-line);
}

.primary-btn {
  border-color: var(--brass-dark);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, #a97d28);
  color: #17140d;
  box-shadow: 0 4px 0 #5c451d, 0 12px 24px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 34%);
}

.primary-btn:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.06);
}

.ghost-btn {
  border-color: rgb(121 190 197 / 34%);
  background: rgb(10 17 21 / 48%);
  box-shadow: none;
  color: var(--moon-hi);
}

.danger-btn {
  border-color: #b34448;
  background: linear-gradient(180deg, #b33d42, #812328);
  color: #fff4e6;
  box-shadow: 0 3px 0 #4d1216;
}

.icon-btn,
.modal-close {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.modal-close {
  border-color: #d67473;
  background: linear-gradient(145deg, #c64c4f, #9b2c31);
  color: #fff8ec;
  box-shadow: 0 3px 0 #5f161b, inset 0 0 0 1px rgb(255 255 255 / 16%);
  font: 900 1.25rem/1 var(--sans);
}

.modal-close:hover {
  filter: brightness(1.12);
}

.field-label {
  display: grid;
  gap: 0.45rem;
  color: var(--paper-lo);
  font: 700 0.78rem/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-input,
.code-input,
input[type="text"],
input[type="number"] {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #0c151b;
  color: var(--paper-hi);
  box-shadow: inset 0 2px 10px rgb(0 0 0 / 38%);
  caret-color: var(--moon-hi);
}

.text-input::placeholder,
.code-input::placeholder,
input::placeholder {
  color: #687982;
}

.code-input {
  min-width: min(100%, 13rem);
  color: var(--brass-hi);
  font: 800 1.4rem/1 var(--mono);
  letter-spacing: 0.24em;
  text-align: center;
}

/* ---------- Title ---------- */

#title-screen {
  align-items: stretch;
  justify-content: center;
  overflow: auto;
  background:
    radial-gradient(circle at 52% 36%, rgb(121 190 197 / 14%), transparent 34%),
    radial-gradient(circle at 18% 78%, rgb(159 37 41 / 17%), transparent 32%),
    linear-gradient(135deg, #05080a, #101a20 48%, #090e12);
}

#title-screen::before,
#title-screen::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}

#title-screen::before {
  inset: 0;
  opacity: 0.34;
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(121 190 197 / 9%) 8.1% 8.25%, transparent 8.35% 91%, rgb(121 190 197 / 9%) 91.1% 91.25%, transparent 91.35%),
    repeating-linear-gradient(0deg, transparent 0 41px, rgb(255 255 255 / 2.5%) 42px, transparent 43px);
}

#title-screen::after {
  top: -8vmin;
  right: -5vmin;
  width: 40vmin;
  aspect-ratio: 1;
  border: 1px solid rgb(121 190 197 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 3vmin rgb(121 190 197 / 3%), 0 0 0 8vmin rgb(121 190 197 / 2%);
}

.title-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  width: min(1440px, 100%);
  min-height: 100dvh;
  margin: auto;
  padding: clamp(18px, 3vw, 48px);
  gap: clamp(18px, 3vw, 54px);
}

.title-scene {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid #354a55;
  background:
    linear-gradient(180deg, transparent 0 68%, rgb(4 8 11 / 88%) 100%),
    radial-gradient(ellipse at 62% 30%, rgb(121 190 197 / 23%), transparent 24%),
    linear-gradient(120deg, #101a20 0 28%, #26343b 28.4% 29%, #11191e 29.4% 64%, #492026 64.4% 65%, #11171c 65.4%);
  box-shadow: var(--shadow-lg), inset 0 0 90px rgb(0 0 0 / 48%);
}

.title-scene::before {
  position: absolute;
  inset: 5%;
  border: 14px solid #090e11;
  box-shadow: inset 0 0 0 1px #3d5059, 0 0 0 1px #263640;
  content: "";
}

.title-scene::after {
  position: absolute;
  right: 10%;
  bottom: 12%;
  width: 42%;
  aspect-ratio: 1.35;
  border: 8px solid #11191e;
  transform: rotate(-4deg);
  background:
    linear-gradient(135deg, transparent 0 48%, rgb(121 190 197 / 30%) 49% 51%, transparent 52%),
    radial-gradient(circle at 66% 42%, #0a0f12 0 6%, #65737a 6.5% 7.5%, transparent 8%),
    linear-gradient(160deg, #d8cba7, #968867);
  box-shadow: 0 12px 30px rgb(0 0 0 / 55%);
  content: "";
}

.title-card {
  position: relative;
  align-self: center;
  display: grid;
  gap: clamp(18px, 3vh, 32px);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  background:
    linear-gradient(110deg, rgb(255 255 255 / 2.5%), transparent 30%),
    #121e25;
  box-shadow: var(--shadow-lg), inset 0 0 0 5px #0c1419, inset 0 0 0 6px #354852;
}

.title-card::before {
  width: 62px;
  height: 5px;
  background: linear-gradient(90deg, var(--safelight), var(--brass));
  content: "";
}

.eyebrow,
.kicker,
.system-label,
.section-label {
  margin: 0;
  color: var(--moon-hi);
  font: 800 0.68rem/1.3 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.title-card h1,
.ending-card h1 {
  margin: 0;
  color: var(--paper-hi);
  font: 700 clamp(2.45rem, 5vw, 5.2rem)/0.98 var(--serif);
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-shadow: 0 5px 18px rgb(0 0 0 / 54%);
}

.title-card h1 strong {
  display: block;
  margin-top: 0.18em;
  color: var(--brass-hi);
  font-size: 0.48em;
  letter-spacing: 0.2em;
}

.title-subtitle {
  max-width: 34rem;
  margin: 0;
  color: var(--paper-lo);
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
}

.title-actions,
.mode-actions {
  display: grid;
  gap: 10px;
}

.mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mode-card {
  position: relative;
  min-height: 112px;
  padding: 1rem;
  border: 1px solid #415660;
  background: #0d171d;
  color: var(--paper);
  text-align: left;
  box-shadow: inset 0 0 0 4px #101a20;
}

.mode-card:hover,
.mode-card.is-selected {
  border-color: var(--brass);
  background: #17262e;
}

.mode-card.is-selected::after {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brass-hi);
  box-shadow: 0 0 14px var(--brass);
  content: "";
}

.mode-card strong,
.mode-card small {
  display: block;
}

.mode-card strong {
  margin-bottom: 0.35rem;
  color: var(--paper-hi);
}

.mode-card small {
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- Prologue / documents ---------- */

#prologue-screen {
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 38%, #29363c 0, #111a20 45%, #070b0e 100%);
}

.prologue-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(330px, 1fr);
  width: min(1120px, 100%);
  min-height: min(700px, calc(100dvh - 40px));
  border: 1px solid #4b5f69;
  background: #101a20;
  box-shadow: var(--shadow-lg);
}

.package-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgb(209 168 78 / 11%), transparent 33%),
    repeating-linear-gradient(90deg, #11191e 0 18px, #0d151a 19px 20px);
}

.package-scene::before {
  width: min(70%, 340px);
  aspect-ratio: 1.45;
  border: 1px solid #735f36;
  transform: rotate(-2.5deg);
  background:
    linear-gradient(90deg, transparent 47%, #947a47 47.5% 52.5%, transparent 53%),
    linear-gradient(168deg, #aa9870, #6e6147);
  box-shadow: 0 18px 34px rgb(0 0 0 / 48%), inset 0 0 35px rgb(74 53 24 / 42%);
  content: "";
}

.prologue-copy {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: clamp(22px, 4vw, 52px);
  border-left: 1px solid #344852;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 6%) 1px, transparent 1px),
    var(--paper);
  background-size: 6px 100%;
  color: #27271f;
}

.prologue-copy h1,
.prologue-copy h2 {
  margin: 0 0 1.25rem;
  color: #171c1f;
  font: 700 clamp(1.75rem, 3vw, 2.8rem)/1.15 var(--serif);
}

.prologue-text {
  flex: 1;
  overflow: auto;
  padding-right: 0.75rem;
  white-space: pre-line;
  line-height: 1.9;
}

.letter-signature {
  margin-top: 1.3rem;
  color: var(--safelight-dark);
  font: italic 700 1.1rem/1.4 var(--serif);
}

/* ---------- Game shell ---------- */

#game-screen {
  display: none;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: #070b0e;
}

#game-screen.is-active {
  display: flex;
}

.game-hud {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  height: var(--header-h);
  min-height: var(--header-h);
  padding: 0 clamp(10px, 1.5vw, 24px);
  border-bottom: 1px solid #40535e;
  background:
    linear-gradient(90deg, rgb(121 190 197 / 4%), transparent 18% 82%, rgb(159 37 41 / 5%)),
    #101a20;
  box-shadow: 0 5px 18px rgb(0 0 0 / 42%);
}

.game-hud::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 2px;
  opacity: 0.7;
  background: linear-gradient(90deg, var(--moon-dim), transparent 42%, var(--safelight-dark));
  content: "";
}

.hud-room {
  min-width: 0;
}

.hud-room .system-label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.58rem;
}

.hud-room-name {
  display: block;
  overflow: hidden;
  color: var(--paper-hi);
  font: 800 clamp(0.9rem, 1.4vw, 1.12rem)/1.25 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-progress,
.room-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.progress-dot,
.room-dot {
  width: 9px;
  height: 9px;
  border: 1px solid #5a717c;
  border-radius: 50%;
  background: #0a1115;
}

.progress-dot.is-current,
.room-dot.is-current {
  border-color: var(--moon-hi);
  background: var(--moon);
  box-shadow: 0 0 13px rgb(121 190 197 / 58%);
}

.progress-dot.is-complete,
.room-dot.is-complete {
  border-color: var(--brass);
  background: var(--brass);
}

.hud-actions {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  gap: 7px;
}

.hud-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: 8px;
  padding: 0 0.75rem;
  border: 1px solid #435763;
  background: #0c151a;
  color: var(--paper-lo);
  box-shadow: inset 0 0 0 3px #121f26;
  font: 750 0.76rem/1 var(--mono);
}

.hud-chip strong {
  color: var(--brass-hi);
  font-size: 0.9rem;
}

.hud-timer {
  min-width: 82px;
  color: var(--brass-hi);
  font: 800 1.05rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
}

.hud-timer.is-urgent {
  color: #ff817b;
  animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
  50% { filter: brightness(1.45); }
}

.workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) var(--inventory-w);
  overflow: hidden;
  background: #05090b;
}

.stage-column {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: clamp(5px, 0.8vw, 12px);
  background:
    radial-gradient(ellipse at 50% 50%, #152127, #070c0f 72%),
    #070c0f;
}

.stage-column::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(255 255 255 / 1.6%) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  opacity: 0.22;
}

#room-stage {
  position: relative;
  width: min(100%, calc((100dvh - var(--header-h) - 24px) * 16 / 9));
  max-height: calc(100dvh - var(--header-h) - 18px);
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  border: clamp(4px, 0.55vw, 8px) solid #101920;
  outline: 1px solid #425864;
  background: #10181d;
  box-shadow: 0 18px 52px rgb(0 0 0 / 58%), inset 0 0 0 1px rgb(255 255 255 / 8%);
  contain: layout paint;
  isolation: isolate;
}

#room-stage::before,
#room-stage::after {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  content: "";
}

#room-stage::before {
  inset: 0;
  border: 1px solid rgb(121 190 197 / 22%);
  box-shadow: inset 0 0 64px rgb(0 0 0 / 52%);
}

#room-stage::after {
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(0 0 0 / 25%) 4px);
}

#world,
.room-bg,
.hotspot-layer {
  position: absolute;
  inset: 0;
}

#world {
  transform-origin: 0 0;
}

.room-bg {
  z-index: 0;
  overflow: hidden;
  background: #131e24;
}

.room-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: contrast(1.04) saturate(0.9) brightness(0.88);
}

[data-room="darkroom"] .room-bg img,
.room-darkroom .room-bg img {
  filter: contrast(1.06) saturate(0.82) brightness(0.82) sepia(0.06);
}

[data-room="archive"] .room-bg img,
.room-archive .room-bg img {
  filter: contrast(1.08) saturate(0.76) brightness(0.8);
}

.hotspot-layer {
  z-index: 6;
}

.hotspot,
.hotspot-layer [data-object] {
  position: absolute;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

.hotspot:hover,
.hotspot:focus-visible,
.hotspot-layer [data-object]:hover,
.hotspot-layer [data-object]:focus-visible {
  border-color: rgb(121 190 197 / 54%);
  background: rgb(121 190 197 / 6%);
  box-shadow: 0 0 0 2px rgb(11 16 19 / 38%), inset 0 0 22px rgb(121 190 197 / 8%);
}

.hotspot::after,
.hotspot-layer [data-object]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  content: "";
  opacity: 0;
  transition: opacity 130ms ease, transform 130ms ease;
}

.hotspot:hover::after,
.hotspot:focus-visible::after,
.hotspot-layer [data-object]:hover::after,
.hotspot-layer [data-object]:focus-visible::after {
  border-color: var(--moon-hi);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.75;
}

.hotspot.is-used,
.hotspot-layer [data-object].is-used {
  filter: saturate(0.68);
}

.hotspot.is-used:hover,
.hotspot-layer [data-object].is-used:hover {
  border-color: rgb(209 168 78 / 42%);
  background: rgb(209 168 78 / 5%);
}

/* CSS-only photographer / investigator avatar. */
.player {
  position: absolute;
  z-index: 9;
  width: clamp(22px, 2.7%, 34px);
  aspect-ratio: 0.62;
  border-radius: 42% 42% 18% 18% / 30% 30% 12% 12%;
  transform: translate(-50%, -74%);
  transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, transparent 0 17%, #11191d 18% 30%, transparent 31% 68%, #11191d 69% 81%, transparent 82%) bottom / 100% 28% no-repeat,
    linear-gradient(90deg, #1a282f 0 24%, #d1a84e 25% 31%, #263941 32% 68%, #d1a84e 69% 75%, #1a282f 76%) 50% 66% / 100% 48% no-repeat,
    linear-gradient(180deg, #222f35, #0e171c);
  box-shadow: 0 5px 0 -1px rgb(0 0 0 / 52%), 0 7px 14px rgb(0 0 0 / 45%), inset 0 0 0 1px rgb(121 190 197 / 28%);
  transition: left 460ms cubic-bezier(.25,.8,.25,1), top 460ms cubic-bezier(.25,.8,.25,1);
  pointer-events: none;
}

.player::before {
  position: absolute;
  top: -28%;
  left: 50%;
  width: 70%;
  aspect-ratio: 0.94;
  border: 2px solid #0b1114;
  border-radius: 46% 46% 42% 42%;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #121a1e 0 23%, transparent 24%),
    radial-gradient(circle at 50% 52%, #c79c76 0 46%, #8d684f 48% 57%, transparent 59%);
  box-shadow: 0 -3px 0 #17232b;
  content: "";
}

.player::after {
  position: absolute;
  top: 33%;
  left: 50%;
  width: 54%;
  aspect-ratio: 1.18;
  border: 2px solid #080d10;
  border-radius: 4px 4px 7px 7px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 50%, #6fb9c1 0 19%, #0a1115 21% 39%, #d1a84e 41% 48%, #17232b 50%);
  box-shadow: 0 2px 0 rgb(0 0 0 / 55%);
  content: "";
}

.player.is-walking {
  animation: player-step 230ms ease-in-out infinite alternate;
}

@keyframes player-step {
  to { margin-top: -2px; filter: brightness(1.08); }
}

.stage-caption,
.room-caption {
  position: absolute;
  z-index: 14;
  right: 12px;
  bottom: 10px;
  max-width: min(60%, 460px);
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--moon);
  background: rgb(7 12 15 / 82%);
  color: var(--paper-lo);
  box-shadow: 0 4px 18px rgb(0 0 0 / 28%);
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  pointer-events: none;
}

/* ---------- Inventory ---------- */

.inventory-panel {
  position: relative;
  z-index: 10;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-left: 1px solid #40525c;
  background:
    linear-gradient(150deg, rgb(121 190 197 / 4%), transparent 28%),
    #111b22;
  box-shadow: -8px 0 28px rgb(0 0 0 / 34%);
}

.inventory-panel::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: rgb(255 255 255 / 6%);
  content: "";
}

.inventory-header {
  display: grid;
  min-height: 64px;
  padding: 0.8rem 0.85rem 0.7rem;
  border-bottom: 1px solid #31444e;
  gap: 2px;
}

.inventory-header .system-label {
  font-size: 0.56rem;
}

.inventory-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inventory-title {
  color: var(--paper-hi);
  font-size: 0.92rem;
  font-weight: 850;
}

.inventory-count {
  color: var(--brass-hi);
  font: 800 0.7rem/1 var(--mono);
}

#inventory-grid,
.inventory-grid {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(90px, 102px);
  align-content: start;
  gap: 7px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--moon-dim) #0c1419;
  scrollbar-width: thin;
}

#inventory-grid::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.modal-inventory::-webkit-scrollbar,
.prologue-text::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#inventory-grid::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.modal-inventory::-webkit-scrollbar-track,
.prologue-text::-webkit-scrollbar-track {
  background: #0b1216;
}

#inventory-grid::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.modal-inventory::-webkit-scrollbar-thumb,
.prologue-text::-webkit-scrollbar-thumb {
  border: 2px solid #0b1216;
  background: var(--moon-dim);
}

.inventory-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 90px;
  align-content: center;
  justify-items: center;
  padding: 7px 4px 6px;
  overflow: hidden;
  border: 1px solid #445762;
  border-radius: 2px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 38%),
    #17252d;
  color: var(--paper-lo);
  box-shadow: inset 0 0 0 3px #101a20;
  text-align: center;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.inventory-item:hover:not(:disabled) {
  border-color: var(--moon);
  background: #20343d;
}

.inventory-item.is-equipped,
.inventory-item[aria-pressed="true"] {
  border-color: var(--brass-hi);
  background: linear-gradient(145deg, #2f3e39, #1d2c30);
  box-shadow: inset 0 0 0 3px #101a20, inset 0 -3px var(--brass);
}

.inventory-item.is-equipped::before,
.inventory-item[aria-pressed="true"]::before {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass-hi);
  box-shadow: 0 0 10px var(--brass);
  content: "";
}

.inventory-item.is-consumed {
  opacity: 0.34;
  filter: grayscale(0.8);
}

.inventory-item-name,
.item-name {
  display: block;
  width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: inherit;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 160px;
  place-items: center;
  padding: 1rem;
  border: 1px dashed #3d4f59;
  color: #6e7d84;
  font: 700 0.67rem/1.55 var(--mono);
  text-align: center;
}

.equipped-readout {
  min-height: 48px;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid #31444e;
  background: #0b1419;
  color: var(--muted);
  font: 700 0.63rem/1.4 var(--mono);
}

.equipped-readout strong {
  color: var(--brass-hi);
}

/* Distinct, legible CSS inventory illustrations. */
.item-icon {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 4px;
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%));
}

.item-icon::before,
.item-icon::after {
  position: absolute;
  content: "";
}

.item-icon[data-icon="red-filter"],
.item-icon[data-icon="blue-filter"],
.item-icon[data-icon="filter"] {
  border: 4px solid #303a3f;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(159 37 41 / 78%) 0 54%, #6f171c 56% 65%, #1b252a 67%);
  box-shadow: inset 0 0 0 2px #0b1013, 0 0 0 1px #596a71;
}

.item-icon[data-icon="blue-filter"] {
  background: radial-gradient(circle, rgb(56 114 154 / 82%) 0 54%, #1d4d70 56% 65%, #1b252a 67%);
}

.item-icon[data-icon="red-filter"]::after,
.item-icon[data-icon="blue-filter"]::after,
.item-icon[data-icon="filter"]::after {
  right: -8px;
  bottom: -3px;
  width: 12px;
  height: 22px;
  border: 3px solid #192227;
  border-radius: 2px 2px 5px 5px;
  transform: rotate(-35deg);
  background: #47545a;
}

.item-icon[data-icon="film"],
.item-icon[data-icon="film-a"],
.item-icon[data-icon="film-b"],
.item-icon[data-icon="film-c"],
.item-icon[data-icon="negative"] {
  border: 3px solid #b69347;
  border-radius: 2px;
  background:
    radial-gradient(circle, #0a1013 0 2px, transparent 2.5px) 1px 1px / 9px 9px,
    linear-gradient(145deg, #335b5c, #101a20 62%);
  box-shadow: inset 0 0 0 2px #0b1013;
  transform: rotate(-4deg);
}

.item-icon[data-icon="film-b"] { transform: rotate(3deg); filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(28deg); }
.item-icon[data-icon="film-c"] { transform: rotate(-1deg); filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(-28deg); }

.item-icon[data-icon="film"]::after,
.item-icon[data-icon^="film-"]::after,
.item-icon[data-icon="negative"]::after {
  inset: 9px;
  border: 1px solid var(--moon);
  background: linear-gradient(135deg, transparent 42%, rgb(121 190 197 / 58%) 44% 49%, transparent 51%);
}

.item-icon[data-icon="mirror"] {
  width: 34px;
  height: 40px;
  margin-inline: 4px;
  border: 3px solid #8b7442;
  border-radius: 49% 49% 42% 42%;
  background: linear-gradient(135deg, #8db4ba, #e6e1c9 43%, #527981 45%, #9fc1c4);
  box-shadow: inset 0 0 0 2px #17232b;
}

.item-icon[data-icon="mirror"]::after {
  bottom: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #8b7442;
  border-top: 0;
  transform: translateX(-50%);
  background: #2a2420;
}

.item-icon[data-icon="document"],
.item-icon[data-icon="log"],
.item-icon[data-icon="ledger"],
.item-icon[data-icon="record"],
.item-icon[data-icon="receipt"],
.item-icon[data-icon="dossier"] {
  width: 34px;
  height: 40px;
  margin-inline: 4px;
  border: 2px solid #7d704e;
  border-radius: 1px;
  background:
    linear-gradient(90deg, #9f2529 0 4px, transparent 4px),
    repeating-linear-gradient(0deg, transparent 0 6px, #77735f 6px 7px),
    #e4d6b5;
  box-shadow: 3px 3px 0 #403a2e;
}

.item-icon[data-icon="document"]::after,
.item-icon[data-icon="log"]::after,
.item-icon[data-icon="ledger"]::after,
.item-icon[data-icon="record"]::after,
.item-icon[data-icon="receipt"]::after,
.item-icon[data-icon="dossier"]::after {
  top: 5px;
  right: 4px;
  width: 12px;
  height: 4px;
  background: var(--safelight);
}

.item-icon[data-icon="fragment"],
.item-icon[data-icon="contact-fragment"],
.item-icon[data-icon="shard"] {
  background:
    radial-gradient(circle at 25% 25%, #cfb45d 0 2px, transparent 2.5px),
    radial-gradient(circle at 72% 70%, #79bec5 0 2px, transparent 2.5px),
    linear-gradient(135deg, #d7caa6 0 49%, #26343b 50%);
  clip-path: polygon(5% 5%, 86% 0, 100% 32%, 79% 57%, 93% 100%, 42% 87%, 0 100%, 12% 48%);
  box-shadow: inset 0 0 0 3px #151e22;
}

.item-icon[data-item-id^="negative_"] > i,
.item-icon[data-item-id^="fragment_"] > i {
  z-index: 4;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #11191d;
  border-radius: 50%;
  background: var(--brass-hi);
  color: #11191d;
  font: 900 10px/1 var(--mono);
  box-shadow: 0 2px 0 rgb(0 0 0 / 45%);
}

.item-icon[data-item-id$="_a"] > i::after { content: "A"; }
.item-icon[data-item-id$="_b"] > i::after { content: "B"; }
.item-icon[data-item-id$="_c"] > i::after { content: "C"; }
.item-icon[data-item-id$="_d"] > i::after { content: "D"; }
.item-icon[data-item-id$="_e"] > i::after { content: "E"; }
.item-icon[data-item-id$="_f"] > i::after { content: "F"; }

.item-icon[data-item-id="fragment_b"],
.item-icon[data-item-id="negative_b"] { filter: hue-rotate(26deg); }
.item-icon[data-item-id="fragment_c"],
.item-icon[data-item-id="negative_c"] { filter: hue-rotate(58deg); }
.item-icon[data-item-id="fragment_d"],
.item-icon[data-item-id="negative_d"] { filter: hue-rotate(96deg); }
.item-icon[data-item-id="fragment_e"] { filter: hue-rotate(142deg); }
.item-icon[data-item-id="fragment_f"] { filter: hue-rotate(198deg); }

.item-icon[data-icon="pen"],
.item-icon[data-icon="masking-pen"] {
  width: 12px;
  height: 42px;
  margin-inline: 15px;
  border: 2px solid #05080a;
  border-radius: 3px 3px 8px 8px;
  transform: rotate(38deg);
  background: linear-gradient(90deg, #171d20 0 65%, #303a3e 66% 84%, #0a0d0f 85%);
}

.item-icon[data-icon="pen"]::before,
.item-icon[data-icon="masking-pen"]::before {
  top: -7px;
  left: 1px;
  border-right: 4px solid transparent;
  border-bottom: 8px solid #d4c299;
  border-left: 4px solid transparent;
}

.item-icon[data-icon="key"],
.item-icon[data-icon="car-key"],
.item-icon[data-icon="keycard"] {
  width: 40px;
  height: 24px;
  margin-block: 9px;
  border: 3px solid var(--brass);
  border-radius: 13px 5px 5px 13px;
  background: #18242a;
}

.item-icon[data-icon="key"]::before,
.item-icon[data-icon="car-key"]::before,
.item-icon[data-icon="keycard"]::before {
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--brass-hi);
  border-radius: 50%;
}

.item-icon[data-icon="key"]::after,
.item-icon[data-icon="car-key"]::after,
.item-icon[data-icon="keycard"]::after {
  right: -10px;
  bottom: 1px;
  width: 13px;
  height: 8px;
  border-bottom: 4px solid var(--brass);
  border-left: 4px solid var(--brass);
}

.item-icon[data-icon="photo"],
.item-icon[data-icon="evidence"],
.item-icon[data-icon="profile-photo"],
.item-icon[data-icon="thirteenth-photo"] {
  width: 38px;
  height: 40px;
  margin-inline: 2px;
  padding: 4px 4px 10px;
  border: 1px solid #8b8063;
  transform: rotate(-4deg);
  background: #e8ddc4;
  box-shadow: 3px 4px 0 #2a2b29;
}

.item-icon[data-icon="photo"]::before,
.item-icon[data-icon="evidence"]::before,
.item-icon[data-icon="profile-photo"]::before,
.item-icon[data-icon="thirteenth-photo"]::before {
  inset: 5px 5px 11px;
  background:
    radial-gradient(circle at 58% 36%, #98a4a3 0 13%, transparent 14%),
    linear-gradient(135deg, #29383e, #6f7c78);
}

.item-icon[data-icon="plate"],
.item-icon[data-icon="chemical-plate"],
.item-icon[data-icon="transparency"] {
  border: 2px solid var(--moon);
  border-radius: 1px;
  transform: rotate(3deg);
  background:
    linear-gradient(45deg, transparent 44%, rgb(121 190 197 / 80%) 45% 48%, transparent 49%),
    rgb(34 78 83 / 44%);
  box-shadow: inset 0 0 0 3px rgb(7 12 15 / 42%);
}

.item-icon[data-icon="canister"] {
  width: 29px;
  height: 39px;
  margin-inline: 6px;
  border: 3px solid #2e373b;
  border-radius: 6px 6px 9px 9px;
  background: linear-gradient(90deg, #292e2e, #a18c5b 38% 63%, #22282b);
  box-shadow: inset 0 0 0 2px #080c0e;
}

.item-icon[data-icon="canister"]::before {
  top: -5px;
  left: 3px;
  width: 17px;
  height: 5px;
  border: 2px solid #1a2226;
  background: #77715f;
}

.item-icon[data-icon="shutter"],
.item-icon[data-icon="shutter-release"] {
  border: 3px solid #53646c;
  border-radius: 50%;
  background: radial-gradient(circle, #d1a84e 0 12%, #0d1418 14% 34%, #5c6a6e 36% 42%, #17232b 44%);
}

.item-icon[data-icon="shutter"]::after,
.item-icon[data-icon="shutter-release"]::after {
  right: -6px;
  bottom: -2px;
  width: 25px;
  height: 18px;
  border-right: 3px solid var(--brass);
  border-bottom: 3px solid var(--brass);
  border-radius: 0 0 18px;
  transform: rotate(12deg);
}

.item-icon[data-icon="tape"] {
  border: 8px solid #9b8455;
  border-radius: 50%;
  background: #111a1f;
  box-shadow: inset 0 0 0 2px #d2bd89;
}

.item-icon[data-icon="ring"] {
  border: 8px solid var(--brass);
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px #584217;
}

.item-icon[data-icon="ring"]::before {
  top: -10px;
  left: 7px;
  width: 22px;
  height: 16px;
  border: 3px solid #594219;
  background: var(--brass-hi);
}

/* ---------- Modal system ---------- */

#modal-root {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
}

#modal-root:empty {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 24px);
  pointer-events: auto;
  background: rgb(2 5 7 / 78%);
  -webkit-backdrop-filter: blur(5px) saturate(0.72);
  backdrop-filter: blur(5px) saturate(0.72);
  animation: backdrop-in 150ms ease-out both;
}

@keyframes backdrop-in {
  from { opacity: 0; }
}

.modal {
  position: relative;
  display: grid;
  width: min(760px, 100%);
  max-height: min(880px, calc(100dvh - 32px));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #647781;
  border-radius: 2px;
  background: var(--paper);
  color: #262821;
  box-shadow: 0 0 0 5px #0e171d, 0 0 0 6px #40535d, var(--shadow-lg);
  animation: modal-in 170ms cubic-bezier(.2,.82,.3,1) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
}

.modal-wide {
  width: min(1080px, 100%);
}

.modal-machine {
  width: min(1180px, 100%);
}

.modal-document {
  width: min(820px, 100%);
}

.modal-header {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 66px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 17px;
  border-bottom: 1px solid #536874;
  background:
    linear-gradient(90deg, rgb(121 190 197 / 5%), transparent 45%, rgb(159 37 41 / 7%)),
    #16232b;
  color: var(--paper-hi);
}

.modal-title-wrap {
  min-width: 0;
}

.modal-header .system-label,
.modal-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--moon-hi);
  font: 800 0.57rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.modal-header h1,
.modal-header h2,
.modal-title {
  margin: 0;
  overflow: hidden;
  color: var(--paper-hi);
  font-size: clamp(0.96rem, 2vw, 1.18rem);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-inventory {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #273c47;
  background: #111e26;
  color: var(--paper);
  scrollbar-width: thin;
}

.modal-inventory-label {
  position: sticky;
  z-index: 2;
  left: 0;
  display: grid;
  min-width: 76px;
  min-height: 50px;
  place-items: center;
  padding: 0 8px;
  border-right: 1px solid #40545e;
  background: #111e26;
  color: var(--moon-hi);
  font: 800 0.64rem/1.3 var(--mono);
}

.modal-inventory .inventory-item,
.modal-inventory-item {
  display: grid;
  min-width: 58px;
  width: 58px;
  min-height: 50px;
  height: 50px;
  grid-template-columns: 32px;
  place-content: center;
  padding: 3px;
  border: 1px solid #4e616b;
  background: #1a2a33;
}

.modal-inventory .item-icon,
.modal-inventory-item .item-icon {
  width: 30px;
  height: 30px;
  transform: scale(0.78);
}

.modal-inventory .item-name,
.modal-inventory .inventory-item-name,
.modal-inventory-item .item-name {
  display: none;
}

.modal-body {
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 2vw, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    repeating-linear-gradient(90deg, rgb(65 56 38 / 2.8%) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, var(--paper-hi), var(--paper));
  scrollbar-color: #8f8264 #d7c9a9;
}

.modal-body > :first-child { margin-top: 0; }
.modal-body > :last-child { margin-bottom: 0; }

.modal-footer {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 9px 12px;
  border-top: 1px solid #9b8f70;
  background: linear-gradient(180deg, #eadfbe, #d9cba8);
  box-shadow: 0 -7px 16px rgb(74 62 36 / 10%);
}

.modal-footer .status-text,
.modal-status {
  min-width: 0;
  margin-right: auto;
  color: #4e4f43;
  font: 700 0.73rem/1.4 var(--mono);
}

.modal-footer .btn,
.modal-footer button {
  flex: 0 0 auto;
}

/* ---------- Documents and evidence ---------- */

.document-sheet,
.evidence-sheet,
.letter-sheet,
.record-sheet {
  position: relative;
  width: min(720px, 100%);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 46px);
  border: 1px solid #9f9477;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgb(74 73 58 / 13%) 28px 29px),
    #f2e8cd;
  box-shadow: 5px 6px 0 #afa382, 0 14px 28px rgb(68 55 31 / 18%);
  color: #313129;
}

.document-sheet::before,
.evidence-sheet::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  width: 1px;
  background: rgb(159 37 41 / 28%);
  content: "";
}

.document-sheet h2,
.evidence-sheet h2,
.record-sheet h2 {
  margin: 0 0 1.2rem;
  color: #20262a;
  font: 800 clamp(1.25rem, 2.6vw, 1.8rem)/1.25 var(--serif);
}

.document-meta,
.record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid #79745f;
  color: #686656;
  font: 750 0.72rem/1.4 var(--mono);
}

.document-stamp,
.evidence-stamp {
  display: inline-block;
  padding: 0.28rem 0.55rem;
  border: 2px solid var(--safelight);
  transform: rotate(-2deg);
  color: var(--safelight);
  font: 900 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.record-list {
  display: grid;
  gap: 0;
}

.record-row {
  display: grid;
  grid-template-columns: minmax(84px, 0.24fr) minmax(0, 1fr);
  padding: 0.82rem 0;
  border-bottom: 1px solid rgb(80 76 60 / 28%);
  gap: 1rem;
}

.record-row time,
.record-id {
  color: #595849;
  font: 800 0.72rem/1.5 var(--mono);
}

/* ---------- Shared puzzle system ---------- */

.puzzle-shell {
  display: grid;
  min-width: 0;
  gap: clamp(10px, 1.8vw, 18px);
}

.puzzle-intro {
  margin: 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--safelight);
  background: rgb(157 132 78 / 13%);
  color: #44453c;
  font-size: 0.88rem;
}

.puzzle-device,
.machine-panel,
.optical-bench {
  position: relative;
  min-width: 0;
  padding: clamp(10px, 1.5vw, 18px);
  border: 1px solid #526772;
  background:
    linear-gradient(145deg, rgb(121 190 197 / 4%), transparent 38%),
    #17252e;
  color: var(--paper);
  box-shadow: inset 0 0 0 5px #0c1419, 0 8px 0 #a79b7d;
}

.puzzle-device::before,
.machine-panel::before,
.optical-bench::before {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--moon-dim);
  box-shadow: -12px 0 #2a414c;
  content: "";
}

.device-rail,
.machine-titlebar {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -4px -4px 10px;
  padding: 0 0.65rem;
  border: 1px solid #435b66;
  background: #0f1b22;
  color: var(--moon-hi);
  font: 800 0.62rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.device-screen,
.puzzle-display,
.code-display {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: 1px solid #304b53;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgb(121 190 197 / 5%) 3px),
    #071317;
  color: var(--moon-hi);
  box-shadow: inset 0 0 17px rgb(0 0 0 / 55%);
  font: 800 clamp(0.9rem, 2vw, 1.25rem)/1.2 var(--mono);
  letter-spacing: 0.15em;
  text-align: center;
}

.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
  gap: 9px;
}

.puzzle-card,
.evidence-card,
.suspect-card,
.contact-card {
  position: relative;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid #988c6f;
  background: #f0e6ca;
  color: #30312a;
  box-shadow: 3px 4px 0 #b5a988;
  text-align: left;
}

button.puzzle-card,
button.evidence-card,
button.suspect-card,
button.contact-card {
  min-height: 84px;
}

.puzzle-card:hover,
.puzzle-card.is-selected,
.evidence-card:hover,
.evidence-card.is-selected,
.suspect-card:hover,
.suspect-card.is-selected,
.contact-card:hover,
.contact-card.is-selected {
  border-color: var(--safelight);
  box-shadow: 3px 4px 0 #b5a988, inset 0 0 0 2px rgb(159 37 41 / 28%);
}

.puzzle-card.is-selected::after,
.evidence-card.is-selected::after,
.suspect-card.is-selected::after,
.contact-card.is-selected::after {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--safelight);
  content: "";
}

.puzzle-slot,
.film-slot,
.plate-slot,
.fragment-slot,
.item-slot {
  position: relative;
  display: grid;
  min-width: 62px;
  min-height: 62px;
  place-items: center;
  border: 1px dashed #71818a;
  background:
    repeating-linear-gradient(135deg, rgb(121 190 197 / 4%) 0 8px, transparent 8px 16px),
    #101b22;
  color: #71818a;
  box-shadow: inset 0 0 16px rgb(0 0 0 / 42%);
  font: 800 0.62rem/1.3 var(--mono);
  text-align: center;
}

.puzzle-slot:hover,
.film-slot:hover,
.plate-slot:hover,
.fragment-slot:hover,
.item-slot:hover {
  border-color: var(--moon);
  color: var(--moon-hi);
}

.puzzle-slot.is-filled,
.film-slot.is-filled,
.plate-slot.is-filled,
.fragment-slot.is-filled,
.item-slot.is-filled,
[data-filled="true"] {
  border-style: solid;
  border-color: var(--brass);
  background: #1c2d34;
  color: var(--paper-hi);
}

.puzzle-controls,
.device-controls,
.modal-controls {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.puzzle-controls .status,
.device-controls .status {
  flex: 1 1 180px;
}

.puzzle-status,
.device-status,
.status-strip {
  min-height: 38px;
  padding: 0.58rem 0.75rem;
  border-left: 3px solid var(--moon-dim);
  background: #0d181e;
  color: var(--moon-hi);
  font: 750 0.68rem/1.4 var(--mono);
}

.puzzle-status.is-warning,
.device-status.is-warning {
  border-left-color: var(--warning);
  color: #f0c278;
}

.puzzle-status.is-complete,
.device-status.is-complete {
  border-left-color: var(--positive);
  color: #a1dfbf;
}

.rotate-button,
.arrow-button,
.stepper-button {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid #9d7c32;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  color: #17140d;
  box-shadow: 0 3px 0 #694c18;
  font-size: 1.3rem;
  font-weight: 900;
}

/* ---------- Calendar transparencies ---------- */

.calendar-workbench,
.transparency-workbench {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(280px, 1.28fr);
  gap: 12px;
}

.transparency-tray {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.calendar-sheet,
.transparency-sheet {
  position: relative;
  aspect-ratio: 1.2;
  border: 2px solid rgb(121 190 197 / 72%);
  background:
    linear-gradient(90deg, transparent 32%, rgb(121 190 197 / 28%) 33% 34%, transparent 35% 65%, rgb(121 190 197 / 28%) 66% 67%, transparent 68%),
    linear-gradient(0deg, transparent 32%, rgb(121 190 197 / 28%) 33% 34%, transparent 35% 65%, rgb(121 190 197 / 28%) 66% 67%, transparent 68%),
    rgb(86 151 158 / 12%);
  color: #1e2f35;
  box-shadow: 0 4px 8px rgb(0 0 0 / 22%);
}

.calendar-sheet::before,
.transparency-sheet::before {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--brass-hi);
  box-shadow: inset -3px 0 #94701f;
  content: "";
}

.calendar-sheet[data-corner="tr"]::before,
.transparency-sheet[data-corner="tr"]::before { right: 6px; left: auto; }
.calendar-sheet[data-corner="br"]::before,
.transparency-sheet[data-corner="br"]::before { inset: auto 6px 6px auto; }
.calendar-sheet[data-corner="bl"]::before,
.transparency-sheet[data-corner="bl"]::before { top: auto; bottom: 6px; }

.light-table,
.overlay-table {
  position: relative;
  display: grid;
  min-height: 300px;
  place-items: center;
  overflow: hidden;
  border: 9px solid #202a2f;
  background:
    linear-gradient(45deg, transparent 48%, rgb(69 114 119 / 18%) 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgb(69 114 119 / 18%) 49% 51%, transparent 52%),
    #d9e0cd;
  box-shadow: inset 0 0 28px rgb(45 82 86 / 28%), 0 5px 0 #0c1215;
}

.light-table.is-on,
.overlay-table.is-on {
  background-color: #eaf5dd;
  box-shadow: inset 0 0 42px rgb(121 190 197 / 36%), 0 0 24px rgb(121 190 197 / 28%), 0 5px 0 #0c1215;
}

.overlay-stack {
  position: relative;
  width: min(68%, 310px);
  aspect-ratio: 1.2;
}

.overlay-stack > * {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}

/* ---------- Phone keypad drawing ---------- */

.contact-workbench,
.phone-workbench {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(260px, 1fr);
  gap: 14px;
}

.contact-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.contact-card {
  min-height: 88px;
  padding-left: 1.05rem;
  transform: rotate(-0.3deg);
}

.contact-card:nth-child(even) { transform: rotate(0.5deg); }

.contact-card .contact-time {
  color: var(--safelight);
  font: 900 0.76rem/1.2 var(--mono);
}

.contact-card .contact-sequence {
  margin-top: 0.35rem;
  color: #333b3e;
  font: 800 0.84rem/1.4 var(--mono);
  letter-spacing: 0.08em;
}

.phone-pad-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid #51656e;
  background: #0f1a20;
  box-shadow: inset 0 0 0 7px #0a1115;
}

.phone-pad,
.keypad {
  position: relative;
  display: grid;
  width: min(100%, 340px);
  aspect-ratio: 0.82;
  grid-template-columns: repeat(3, minmax(54px, 1fr));
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  padding: 13px;
  border: 4px solid #5e6c70;
  border-radius: 16px;
  background: linear-gradient(145deg, #29353a, #121b1f);
  box-shadow: 0 8px 0 #070a0c, inset 0 0 0 2px #0c1215;
}

.phone-key,
.keypad-key,
.keypad .key {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid #78868a;
  border-radius: 7px;
  background: linear-gradient(180deg, #d1d0bd, #898d84);
  color: #161c1f;
  box-shadow: 0 4px 0 #343e42;
  font: 900 1.02rem/1 var(--mono);
}

.phone-key:hover,
.phone-key.is-path,
.keypad-key:hover,
.keypad .key:hover {
  border-color: var(--brass-hi);
  background: linear-gradient(180deg, #f0d77b, #c49c43);
}

.phone-key.is-path::after {
  position: absolute;
  inset: 22%;
  border: 2px solid var(--safelight);
  border-radius: 50%;
  content: "";
}

.phone-line-canvas,
.line-canvas {
  position: absolute;
  z-index: 3;
  inset: 13px;
  width: calc(100% - 26px);
  height: calc(100% - 26px);
  pointer-events: none;
}

/* ---------- Filter photograph / UV-like optical interaction ---------- */

.photo-viewer,
.filter-viewer {
  position: relative;
  min-height: clamp(320px, 55vh, 600px);
  overflow: hidden;
  border: 9px solid #141d22;
  outline: 1px solid #50636d;
  background: #080d0f;
  box-shadow: inset 0 0 34px rgb(0 0 0 / 64%);
  cursor: crosshair;
}

.photo-viewer img,
.filter-viewer img,
.photo-image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: contain;
  filter: grayscale(0.42) sepia(0.18) contrast(1.08) brightness(0.82);
  pointer-events: none;
}

.filter-lens,
.inspection-lens {
  position: absolute;
  z-index: 5;
  width: clamp(130px, 22vw, 250px);
  aspect-ratio: 1;
  border: 7px solid #202a2f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgb(159 37 41 / 42%);
  box-shadow: 0 0 0 2px #68777c, 0 13px 28px rgb(0 0 0 / 48%), inset 0 0 28px rgb(77 8 11 / 42%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.filter-lens.is-blue,
[data-filter="blue"] .filter-lens {
  background: rgb(38 106 156 / 48%);
  box-shadow: 0 0 0 2px #68777c, 0 13px 28px rgb(0 0 0 / 48%), inset 0 0 28px rgb(11 43 79 / 48%);
}

.filter-lens::after,
.inspection-lens::after {
  position: absolute;
  right: -14px;
  bottom: -33px;
  width: 25px;
  height: 61px;
  border: 5px solid #11191d;
  border-radius: 3px 3px 11px 11px;
  transform: rotate(-35deg);
  background: #4b585d;
  content: "";
}

.hidden-mark,
.filter-reveal {
  position: absolute;
  z-index: 4;
  color: #ffe9a2;
  font: 900 clamp(0.72rem, 1.5vw, 1rem)/1.4 var(--mono);
  text-shadow: 0 1px #3f3010, 0 0 8px rgb(255 226 133 / 58%);
  opacity: 0;
  pointer-events: none;
}

.hidden-mark.is-visible,
.filter-reveal.is-visible {
  opacity: 1;
}

/* ---------- Aperture camera ---------- */

.camera-workbench {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(190px, 0.55fr);
  gap: 14px;
}

.camera-body {
  position: relative;
  display: grid;
  min-height: 320px;
  place-items: center;
  border: 1px solid #4c5d64;
  border-radius: 8px;
  background: linear-gradient(145deg, #333b3d, #111719 64%);
  box-shadow: inset 0 0 0 8px #080c0e, 0 8px 0 #0a0e10;
}

.camera-body::before {
  width: min(48%, 250px);
  aspect-ratio: 1;
  border: 15px solid #293338;
  border-radius: 50%;
  background:
    conic-gradient(from 18deg, #0a0e10 0 13%, #435157 13.5% 25%, #0a0e10 25.5% 38%, #435157 38.5% 50%, #0a0e10 50.5% 63%, #435157 63.5% 75%, #0a0e10 75.5% 88%, #435157 88.5%),
    #080c0e;
  box-shadow: inset 0 0 0 12px #070a0b, 0 0 0 3px #66747a, 0 13px 24px rgb(0 0 0 / 48%);
  content: "";
}

.camera-aperture,
.aperture-display {
  position: absolute;
  display: grid;
  width: min(23%, 116px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--brass);
  border-radius: 50%;
  background: #05080a;
  color: var(--brass-hi);
  font: 900 clamp(0.9rem, 2.3vw, 1.3rem)/1 var(--mono);
}

.aperture-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.aperture-option {
  border: 1px solid #61727a;
  background: #18262e;
  color: var(--paper);
  box-shadow: 0 3px 0 #0a1014;
  font: 850 0.82rem/1 var(--mono);
}

.aperture-option.is-selected {
  border-color: var(--brass-hi);
  background: #55441f;
  color: #ffdfa0;
}

.camera-flash {
  position: fixed;
  z-index: 3000;
  inset: 0;
  pointer-events: none;
  background: #fffdf1;
  animation: camera-flash 520ms ease-out both;
}

@keyframes camera-flash {
  0% { opacity: 0; }
  10% { opacity: 0.98; }
  100% { opacity: 0; }
}

/* ---------- Contact sheet fragments ---------- */

.fragment-workbench,
.contact-sheet-workbench {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(300px, 1fr);
  gap: 12px;
}

.fragment-tray {
  display: grid;
  grid-template-columns: repeat(2, minmax(70px, 1fr));
  align-content: start;
  gap: 8px;
}

.fragment-piece {
  position: relative;
  min-height: 78px;
  border: 1px solid #697a82;
  background:
    radial-gradient(circle at 30% 30%, #d1a84e 0 3px, transparent 3.5px),
    radial-gradient(circle at 72% 62%, #79bec5 0 2px, transparent 2.5px),
    #1b2a31;
  color: var(--paper-lo);
  clip-path: polygon(2% 5%, 84% 0, 100% 23%, 91% 68%, 100% 95%, 47% 89%, 0 100%, 7% 44%);
}

.fragment-piece.is-selected {
  filter: brightness(1.24);
  box-shadow: inset 0 0 0 3px var(--brass);
}

.contact-sheet-grid,
.fragment-grid {
  display: grid;
  min-height: 320px;
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  grid-template-rows: repeat(3, minmax(70px, 1fr));
  gap: 4px;
  padding: 12px;
  border: 8px solid #0b1114;
  background: #d9d1b7;
  box-shadow: 0 0 0 1px #596a71, inset 0 0 24px rgb(54 49 37 / 22%);
}

.fragment-slot {
  min-width: 0;
  min-height: 0;
  border-color: #7e7967;
  background: #bdb69f;
  color: #6e6959;
}

.fragment-slot.is-filled {
  border-color: #29373c;
  background:
    radial-gradient(circle at 55% 42%, #777c79 0 12%, transparent 13%),
    linear-gradient(140deg, #1b292e, #59655f);
  box-shadow: inset 0 0 0 3px #10181c;
}

/* ---------- Chemical plates ---------- */

.chemical-bench,
.plate-workbench {
  display: grid;
  gap: 12px;
}

.plate-tray,
.plate-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
}

.chemical-plate,
.plate-card {
  position: relative;
  min-height: 126px;
  overflow: hidden;
  border: 3px solid #4f6a70;
  background:
    linear-gradient(128deg, transparent 36%, rgb(255 255 255 / 16%) 37% 41%, transparent 42%),
    rgb(37 87 92 / 42%);
  color: var(--paper-hi);
  box-shadow: inset 0 0 0 3px rgb(5 9 11 / 55%), 0 4px 0 #101719;
}

.chemical-plate::before,
.plate-card::before {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--brass-hi);
  border-radius: 50%;
  content: "";
}

.chemical-plate.is-selected,
.plate-card.is-selected {
  border-color: var(--brass-hi);
  filter: brightness(1.15);
}

.plate-slots .plate-slot {
  min-height: 140px;
}

.plate-number {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: var(--moon-hi);
  font: 850 0.68rem/1 var(--mono);
}

/* ---------- Enlarger / negative projection ---------- */

.enlarger-workbench {
  display: grid;
  grid-template-columns: minmax(170px, 0.35fr) minmax(330px, 1fr);
  gap: 14px;
}

.negative-strip,
.negative-options {
  display: grid;
  align-content: start;
  gap: 8px;
}

.negative-card {
  position: relative;
  min-height: 70px;
  padding: 0.7rem;
  border: 3px solid #1a2023;
  background:
    radial-gradient(circle at 5px 5px, transparent 0 2px, #a18b52 2.5px 3.5px, transparent 4px) 0 0 / 12px 12px,
    linear-gradient(120deg, #19282e, #415a5c 52%, #131e23);
  color: var(--paper);
  box-shadow: 0 0 0 1px #6c7370;
  font: 800 0.8rem/1.3 var(--mono);
}

.negative-card.is-selected {
  border-color: var(--brass);
  filter: brightness(1.15);
}

.projection-screen {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  border: 10px solid #121a1e;
  background:
    radial-gradient(ellipse at 50% 48%, #dfdfc9, #979e90 56%, #343e3d 100%);
  box-shadow: inset 0 0 70px rgb(0 0 0 / 43%), 0 0 0 1px #607078;
}

.projection-screen img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: grayscale(1) sepia(0.14) contrast(1.18) blur(var(--focus-blur, 8px));
}

.projection-screen::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgb(0 0 0 / 24%) 5px);
  content: "";
}

.focus-control {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: #373a35;
  font: 750 0.72rem/1 var(--mono);
}

input[type="range"] {
  width: 100%;
  height: 22px;
  padding: 0;
  background: transparent;
  accent-color: var(--brass);
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid #55646a;
  background: #16232a;
}

input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 2px solid #644b18;
  border-radius: 50%;
  -webkit-appearance: none;
  background: var(--brass-hi);
  box-shadow: 0 2px 0 #5f481b;
}

/* ---------- Film box net ---------- */

.box-net-workbench,
.net-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(170px, 0.42fr);
  gap: 14px;
}

.box-net,
.net-grid {
  display: grid;
  width: min(100%, 590px);
  aspect-ratio: 4 / 3;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  margin-inline: auto;
  gap: 3px;
  perspective: 800px;
}

.net-face,
.box-face {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  border: 2px solid #6d5930;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 13%), transparent 28%),
    #c8a858;
  color: #24231b;
  box-shadow: inset 0 0 0 3px rgb(71 54 21 / 20%);
  font: 900 clamp(0.72rem, 1.5vw, 1rem)/1.2 var(--mono);
  transition: transform 300ms ease, filter 150ms ease;
  transform-style: preserve-3d;
}

.net-face.is-empty,
.box-face.is-empty {
  visibility: hidden;
}

.net-face:hover,
.box-face:hover,
.net-face.is-selected,
.box-face.is-selected {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 3px var(--safelight);
}

.net-face.is-folded,
.box-face.is-folded {
  transform: rotateX(38deg) scale(0.94);
}

.net-corner-mark {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid var(--safelight-dark);
  border-radius: 50%;
  background: var(--paper-hi);
  color: #2a251a;
  font: 900 0.5rem/9px var(--mono);
  text-align: center;
}

.folded-box-preview {
  display: grid;
  min-height: 250px;
  place-items: center;
  border: 1px solid #4f646e;
  background: #0d171c;
  perspective: 700px;
}

.box-cube {
  position: relative;
  width: 124px;
  aspect-ratio: 1;
  transform: rotateX(-22deg) rotateY(36deg);
  transform-style: preserve-3d;
}

.box-cube > * {
  position: absolute;
  inset: 0;
  border: 2px solid #6d5930;
  background: #c8a858;
  backface-visibility: hidden;
}

/* ---------- 3×3 film mosaic / final overlay ---------- */

.film-workbench,
.mosaic-workbench {
  display: grid;
  gap: 12px;
}

.film-mosaic,
.mosaic-grid {
  position: relative;
  display: grid;
  width: min(100%, 820px);
  aspect-ratio: 1.52;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-inline: auto;
  padding: 14px;
  overflow: hidden;
  border: 8px solid #10181c;
  background: #071317;
  box-shadow: 0 0 0 1px #59707a, inset 0 0 38px rgb(0 0 0 / 55%);
}

.film-cell,
.mosaic-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #58717a;
  background:
    linear-gradient(145deg, transparent 46%, rgb(121 190 197 / 17%) 47% 49%, transparent 50%),
    #10262b;
}

.film-cell.is-selected,
.mosaic-cell.is-selected {
  border-color: var(--brass-hi);
  box-shadow: inset 0 0 0 3px var(--brass);
}

.film-cell img,
.mosaic-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.film-overlay-stage,
.registration-stage {
  position: relative;
  width: min(100%, 900px);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  border: 10px solid #0d1418;
  background:
    radial-gradient(ellipse at 50% 50%, #dce5d5, #788c88 65%, #26383c);
  box-shadow: 0 0 0 1px #5b7179, inset 0 0 38px rgb(0 0 0 / 42%);
}

.film-layer {
  position: absolute;
  inset: 5%;
  transform: rotate(var(--rotation, 0deg));
  transform-origin: center;
  mix-blend-mode: multiply;
  transition: transform 180ms ease;
}

.film-layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.62;
  pointer-events: none;
}

.registration-pin {
  position: absolute;
  z-index: 8;
  width: 16px;
  height: 16px;
  border: 3px solid #775a1e;
  border-radius: 50%;
  background: var(--brass-hi);
  box-shadow: 0 2px 0 #4f3b16, 0 0 0 2px #142026;
}

.registration-pin.pin-a { top: 5%; left: 4%; }
.registration-pin.pin-b { top: 7%; right: 6%; border-radius: 3px; }
.registration-pin.pin-c { right: 4%; bottom: 6%; width: 20px; height: 12px; border-radius: 6px; }

.film-evidence-label {
  position: absolute;
  z-index: 9;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--brass);
  background: rgb(7 13 16 / 85%);
  color: var(--brass-hi);
  font: 800 0.62rem/1.2 var(--mono);
  opacity: 0;
}

.film-evidence-label.is-visible { opacity: 1; }

/* ---------- Suspects ---------- */

.suspect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.suspect-card {
  display: grid;
  min-height: 270px;
  grid-template-rows: 132px auto 1fr;
  gap: 0.65rem;
  padding: 0.65rem;
}

.suspect-photo {
  position: relative;
  overflow: hidden;
  border: 5px solid #e1d7bd;
  background:
    radial-gradient(circle at 50% 36%, #9a9380 0 19%, transparent 20%),
    linear-gradient(150deg, #26353b, #788079);
  box-shadow: 0 0 0 1px #756f5d, 0 4px 0 #aaa087;
}

.suspect-name {
  color: #1c2225;
  font-size: 1rem;
  font-weight: 900;
}

.suspect-facts {
  display: grid;
  align-content: start;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: #4e5048;
  font-size: 0.72rem;
  list-style: none;
}

.suspect-facts li {
  padding-left: 0.75rem;
  border-left: 2px solid #9f9477;
}

/* ---------- Safe / keypad ---------- */

.safe-workbench {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(230px, 0.55fr);
  gap: 14px;
}

.safe-door {
  position: relative;
  display: grid;
  min-height: 400px;
  place-items: center;
  border: 13px solid #20292d;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 50%, #647175 0 4%, #212b2e 4.5% 17%, #78858a 17.5% 19%, transparent 19.5%),
    linear-gradient(145deg, #3b474b, #182125);
  box-shadow: inset 0 0 0 2px #67767a, inset 0 0 80px rgb(0 0 0 / 47%), 0 8px 0 #0a0f11;
}

.safe-door::before,
.safe-door::after {
  position: absolute;
  right: 7%;
  width: 18px;
  height: 18px;
  border: 4px solid #111719;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: inset 0 0 0 2px #7a5d20;
  content: "";
}

.safe-door::before { top: 17%; }
.safe-door::after { bottom: 17%; }

.safe-keypad {
  align-self: center;
}

.safe-keypad .keypad {
  width: 100%;
  max-width: 290px;
  aspect-ratio: auto;
  grid-template-rows: repeat(4, 58px);
}

.safe-code-line {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
  overflow: hidden;
  border: 1px solid #2b484d;
  background: #061216;
  color: var(--moon-hi);
  font: 900 1.2rem/1 var(--mono);
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* ---------- Redaction / transmission ---------- */

.redaction-workbench {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(190px, 0.35fr);
  gap: 14px;
}

.redaction-canvas,
.masking-canvas {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid #8f866d;
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgb(80 78 65 / 12%) 30px),
    #f3ead0;
  color: #33332b;
  box-shadow: 5px 6px 0 #aca080;
  cursor: crosshair;
  touch-action: none;
}

.redaction-document {
  position: absolute;
  inset: 0;
  padding: clamp(20px, 4vw, 42px);
  pointer-events: none;
}

.redaction-zone {
  position: absolute;
  border: 1px dashed rgb(159 37 41 / 22%);
  background: transparent;
  transition: background 100ms ease;
}

.redaction-zone.is-masked {
  border-color: #060707;
  background:
    repeating-linear-gradient(-4deg, #050606 0 5px, #121313 6px 8px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 13%);
}

.redaction-tools {
  display: grid;
  align-content: start;
  gap: 10px;
}

.pen-preview {
  display: grid;
  min-height: 120px;
  place-items: center;
  border: 1px solid #53656c;
  background: #111b20;
}

.transmission-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #465b63;
  background: #0b161b;
  color: var(--paper-lo);
  font: 750 0.7rem/1.5 var(--mono);
}

.transmission-progress {
  height: 10px;
  overflow: hidden;
  border: 1px solid #3f5960;
  background: #050b0e;
}

.transmission-progress > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--moon-dim), var(--moon-hi));
  transition: width 300ms ease;
}

/* ---------- Toasts / hints ---------- */

.toast-stack {
  position: fixed;
  z-index: 4000;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  width: min(360px, calc(100vw - 28px));
  gap: 8px;
  pointer-events: none;
}

.toast {
  position: relative;
  padding: 0.8rem 0.95rem 0.8rem 1.1rem;
  border: 1px solid #536973;
  background: rgb(14 25 31 / 96%);
  color: var(--paper-hi);
  box-shadow: var(--shadow-md);
  font-size: 0.8rem;
  animation: toast-in 210ms cubic-bezier(.2,.8,.2,1) both;
}

.toast::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--moon);
  content: "";
}

.toast.is-warning::before { background: var(--warning); }
.toast.is-danger::before { background: var(--danger); }
.toast.is-success::before { background: var(--positive); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(14px); }
}

.hint-panel {
  display: grid;
  gap: 10px;
}

.hint-card {
  padding: 0.85rem 1rem;
  border: 1px solid #a19577;
  background: #eadfbe;
  color: #34352e;
  box-shadow: 3px 3px 0 #b4a887;
}

.hint-card.is-used {
  border-left: 4px solid var(--safelight);
}

/* ---------- Ending ---------- */

#ending-screen {
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 40px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 32%, rgb(121 190 197 / 18%), transparent 28%),
    linear-gradient(160deg, #070b0e, #16232a 54%, #090d10);
}

.ending-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(340px, 1.2fr);
  width: min(1120px, 100%);
  min-height: min(650px, calc(100dvh - 40px));
  border: 1px solid #50636d;
  background: #111c22;
  box-shadow: var(--shadow-lg);
}

.ending-photo {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: #090e11;
}

.ending-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.7) sepia(0.16) brightness(0.72);
}

.ending-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, #111c22 100%), linear-gradient(0deg, rgb(0 0 0 / 58%), transparent 48%);
  content: "";
}

.ending-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 5vw, 64px);
}

.ending-card h1 {
  margin: 0.35rem 0 1rem;
  font-size: clamp(2.1rem, 4vw, 4.3rem);
}

.ending-copy {
  color: var(--paper-lo);
  line-height: 1.8;
}

.score-board {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  margin: 1.3rem 0;
  padding: 1rem;
  border: 1px solid #425660;
  background: #0c161b;
}

.score-board dt {
  color: var(--muted);
  font: 750 0.7rem/1.4 var(--mono);
}

.score-board dd {
  margin: 0;
  color: var(--brass-hi);
  font: 850 0.8rem/1.4 var(--mono);
  text-align: right;
}

.ending-rank {
  color: var(--brass-hi);
  font: 900 clamp(2.8rem, 7vw, 6rem)/1 var(--serif);
}

.ending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* ---------- Responsive desktop-to-rail transition ---------- */

@media (max-width: 1100px) {
  :root {
    --inventory-w: 214px;
  }

  #inventory-grid,
  .inventory-grid {
    grid-auto-rows: 88px;
  }

  .inventory-item {
    min-height: 82px;
  }

  .item-icon {
    transform: scale(0.88);
  }

  .suspect-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

@media (max-width: 980px) {
  :root {
    --header-h: 60px;
  }

  .title-shell {
    grid-template-columns: 1fr;
  }

  .title-scene {
    min-height: min(48vh, 480px);
  }

  .title-card {
    align-self: start;
  }

  .prologue-shell,
  .ending-shell {
    grid-template-columns: 1fr;
  }

  .package-scene,
  .ending-photo {
    min-height: min(42vh, 390px);
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 100px;
  }

  .stage-column {
    padding: 5px;
  }

  #room-stage {
    width: min(100%, calc((100dvh - var(--header-h) - 110px) * 16 / 9));
    max-height: calc(100dvh - var(--header-h) - 106px);
  }

  .inventory-panel {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 132px;
    min-height: 100px;
    border-top: 1px solid #40525c;
    border-left: 0;
    box-shadow: 0 -8px 24px rgb(0 0 0 / 35%);
  }

  .inventory-panel::before {
    top: 4px;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }

  .inventory-header {
    min-height: 0;
    align-content: center;
    border-right: 1px solid #31444e;
    border-bottom: 0;
  }

  #inventory-grid,
  .inventory-grid {
    display: flex;
    align-items: stretch;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .inventory-item {
    min-width: 78px;
    width: 78px;
    min-height: 84px;
    height: 84px;
  }

  .equipped-readout {
    display: grid;
    min-height: 0;
    place-content: center;
    border-top: 0;
    border-left: 1px solid #31444e;
  }

  .calendar-workbench,
  .transparency-workbench,
  .contact-workbench,
  .phone-workbench,
  .fragment-workbench,
  .contact-sheet-workbench,
  .enlarger-workbench,
  .box-net-workbench,
  .net-workbench,
  .safe-workbench,
  .redaction-workbench {
    grid-template-columns: 1fr;
  }

  .fragment-tray {
    grid-template-columns: repeat(6, minmax(70px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 680px) {
  :root {
    --header-h: 56px;
  }

  .game-hud {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 8px;
  }

  .hud-progress,
  .room-indicator {
    display: none;
  }

  .hud-chip:not(.hud-timer),
  .hud-actions .btn-label {
    display: none;
  }

  .hud-actions .icon-btn {
    width: 42px;
    min-width: 42px;
  }

  .workspace {
    grid-template-rows: minmax(0, 1fr) 88px;
  }

  .stage-column {
    place-items: center start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scrollbar-color: var(--moon-dim) #080d10;
  }

  #room-stage {
    width: auto;
    min-width: max(100%, calc((100dvh - var(--header-h) - 96px) * 16 / 9));
    height: calc(100dvh - var(--header-h) - 96px);
    max-height: none;
    flex: 0 0 auto;
  }

  .inventory-panel {
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 88px;
  }

  .inventory-header {
    padding: 0.45rem;
  }

  .inventory-header .system-label,
  .inventory-count {
    display: none;
  }

  .inventory-title {
    font-size: 0.75rem;
  }

  .equipped-readout {
    display: none;
  }

  #inventory-grid,
  .inventory-grid {
    padding: 5px;
  }

  .inventory-item {
    min-width: 70px;
    width: 70px;
    min-height: 76px;
    height: 76px;
  }

  .inventory-item-name,
  .item-name {
    font-size: 0.57rem;
  }

  .item-icon {
    width: 36px;
    height: 36px;
  }

  .modal-backdrop {
    padding: 0;
  }

  .modal,
  .modal-wide,
  .modal-machine,
  .modal-document {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .modal-header {
    min-height: 58px;
    padding: 7px 8px 7px 12px;
  }

  .modal-inventory {
    min-height: 58px;
    padding-block: 4px;
  }

  .modal-inventory-label {
    min-width: 62px;
    min-height: 46px;
  }

  .modal-inventory .inventory-item,
  .modal-inventory-item {
    min-width: 52px;
    width: 52px;
    min-height: 46px;
    height: 46px;
  }

  .modal-body {
    padding: 10px;
  }

  .modal-footer {
    min-height: 58px;
    padding: 7px 8px;
  }

  .modal-footer .status-text,
  .modal-status {
    font-size: 0.62rem;
  }

  .modal-footer button,
  .modal-footer .btn {
    min-height: 44px;
    padding-inline: 0.75rem;
  }

  .mode-options,
  .camera-workbench {
    grid-template-columns: 1fr;
  }

  .plate-tray,
  .plate-slots {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }

  .suspect-grid {
    grid-template-columns: 1fr;
  }

  .suspect-card {
    min-height: 190px;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .suspect-photo {
    grid-row: 1 / 3;
  }

  .photo-viewer,
  .filter-viewer,
  .projection-screen,
  .redaction-canvas,
  .masking-canvas {
    min-height: 340px;
  }

  .contact-sheet-grid,
  .fragment-grid {
    min-height: 290px;
  }

  .film-mosaic,
  .mosaic-grid {
    min-width: 560px;
  }

  .film-workbench,
  .mosaic-workbench {
    overflow-x: auto;
  }
}

/* Very short landscape screens (phone / split laptop). Keep controls visible. */
@media (max-height: 540px) and (orientation: landscape) {
  :root {
    --header-h: 48px;
  }

  .game-hud {
    height: 48px;
    min-height: 48px;
    padding-inline: 8px;
  }

  .hud-room .system-label,
  .hud-progress,
  .room-indicator,
  .hud-chip:not(.hud-timer) {
    display: none;
  }

  .hud-room-name {
    font-size: 0.82rem;
  }

  .hud-actions .icon-btn,
  .hud-chip,
  .hud-timer {
    min-height: 38px;
    height: 38px;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr) 176px;
    grid-template-rows: minmax(0, 1fr);
  }

  .stage-column {
    padding: 3px;
  }

  #room-stage {
    width: min(100%, calc((100dvh - 54px) * 16 / 9));
    max-height: calc(100dvh - 54px);
  }

  .inventory-panel {
    display: flex;
    min-height: 0;
    border-top: 0;
    border-left: 1px solid #40525c;
  }

  .inventory-header {
    display: none;
  }

  #inventory-grid,
  .inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 74px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .inventory-item {
    min-width: 0;
    width: auto;
    min-height: 70px;
    height: 70px;
  }

  .equipped-readout {
    display: none;
  }

  .modal-backdrop {
    padding: 3px;
  }

  .modal,
  .modal-wide,
  .modal-machine,
  .modal-document {
    width: min(100%, 1040px);
    height: calc(100dvh - 6px);
    max-height: calc(100dvh - 6px);
    grid-template-rows: 48px 50px minmax(0, 1fr) 52px;
  }

  .modal:not(:has(.modal-inventory)) {
    grid-template-rows: 48px minmax(0, 1fr) 52px;
  }

  .modal:has(.modal-inventory):not(:has(.modal-footer)) {
    grid-template-rows: 48px 50px minmax(0, 1fr);
  }

  .modal-header {
    min-height: 48px;
    height: 48px;
    padding: 3px 5px 3px 10px;
  }

  .modal-close {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    height: 40px;
  }

  .modal-inventory {
    min-height: 50px;
    height: 50px;
    padding-block: 2px;
  }

  .modal-inventory-label {
    min-height: 42px;
  }

  .modal-inventory .inventory-item,
  .modal-inventory-item {
    min-height: 42px;
    height: 42px;
  }

  .modal-body {
    padding: 7px 9px;
  }

  .modal-footer {
    min-height: 52px;
    height: 52px;
    padding: 4px 7px;
  }

  .modal-footer button,
  .modal-footer .btn {
    min-height: 42px;
  }

  .photo-viewer,
  .filter-viewer,
  .projection-screen,
  .redaction-canvas,
  .masking-canvas {
    min-height: 260px;
  }

  .puzzle-device,
  .machine-panel,
  .optical-bench {
    padding: 8px;
  }

  .light-table,
  .overlay-table,
  .contact-sheet-grid,
  .fragment-grid,
  .safe-door {
    min-height: 250px;
  }
}

@media (max-width: 844px) and (max-height: 440px) and (orientation: landscape) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) 150px;
  }

  #inventory-grid,
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
  }

  .inventory-item {
    min-height: 62px;
    height: 62px;
    padding: 2px;
  }

  .inventory-item-name,
  .item-name {
    font-size: 0.5rem;
  }

  .item-icon {
    width: 31px;
    height: 31px;
    transform: scale(0.78);
  }

  .modal-body {
    font-size: 0.82rem;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .title-shell {
    padding: 10px;
  }

  .title-scene {
    min-height: 33vh;
  }

  .title-card {
    padding: 22px 18px;
  }

  .title-card h1 {
    font-size: clamp(2.15rem, 12vw, 3.4rem);
  }

  .prologue-shell,
  .ending-shell {
    min-height: 100%;
  }

  .package-scene,
  .ending-photo {
    min-height: 31vh;
  }

  .prologue-copy,
  .ending-card {
    padding: 22px 18px;
  }

  .calendar-workbench,
  .transparency-workbench,
  .contact-workbench,
  .phone-workbench,
  .camera-workbench,
  .fragment-workbench,
  .contact-sheet-workbench,
  .enlarger-workbench,
  .box-net-workbench,
  .net-workbench,
  .safe-workbench,
  .redaction-workbench {
    grid-template-columns: 1fr;
  }

  .phone-pad,
  .keypad {
    gap: 5px;
    padding: 9px;
  }

  .phone-key,
  .keypad-key,
  .keypad .key {
    min-height: 44px;
  }

  .record-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .modal-footer .status-text,
  .modal-status {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .camera-flash {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: #82949c;
    --paper: #fff0c9;
    --moon: #9df7f7;
  }

  .hotspot:hover,
  .hotspot:focus-visible,
  .hotspot-layer [data-object]:hover,
  .hotspot-layer [data-object]:focus-visible {
    border-width: 2px;
    border-color: var(--moon-hi);
    background: rgb(121 190 197 / 12%);
  }
}

@media print {
  body { overflow: visible; background: #fff; }
  .screen:not(.is-active),
  .game-hud,
  .inventory-panel,
  .modal-header,
  .modal-inventory,
  .modal-footer,
  .toast-stack { display: none !important; }
  .modal-backdrop,
  .modal,
  .modal-body { position: static; width: 100%; max-height: none; overflow: visible; box-shadow: none; }
}

/* ==========================================================================\
   Live DOM bindings
   The rules above form the reusable puzzle language. These selectors bind it
   to the compact production markup in index.html/game.js.
   ========================================================================== */

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 8px;
  left: 8px;
  padding: 0.7rem 1rem;
  border: 2px solid var(--moon-hi);
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  transition: transform 120ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell {
  width: 100%;
  height: 100%;
}

.primary-action,
.secondary-action,
.hud-button,
.icon-button {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-weight: 850;
  letter-spacing: 0.025em;
  transition: border-color 120ms ease, filter 120ms ease, transform 120ms ease, background 120ms ease;
}

.primary-action {
  padding: 0.78rem 1.35rem;
  border-color: var(--brass-dark);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 58%, #a77b28);
  color: #17140d;
  box-shadow: 0 4px 0 #5c451d, 0 11px 22px rgb(0 0 0 / 22%), inset 0 1px rgb(255 255 255 / 34%);
}

.secondary-action {
  padding: 0.75rem 1.2rem;
  background: linear-gradient(180deg, #324853, #192931);
  color: var(--paper-hi);
  box-shadow: 0 3px 0 #080d10, var(--inset-line);
}

.primary-action:hover:not(:disabled),
.secondary-action:hover:not(:disabled),
.hud-button:hover:not(:disabled) {
  border-color: var(--moon);
  filter: brightness(1.08);
}

.primary-action:active:not(:disabled),
.secondary-action:active:not(:disabled),
.hud-button:active:not(:disabled) {
  transform: translateY(2px);
}

/* Production title composition */
.title-screen {
  align-items: center !important;
  justify-content: flex-end !important;
  padding: clamp(16px, 4.5vw, 76px);
}

.title-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(5 8 10 / 16%), rgb(5 8 10 / 7%) 45%, rgb(5 8 10 / 52%)),
    radial-gradient(ellipse at 28% 43%, rgb(121 190 197 / 19%), transparent 24%),
    linear-gradient(160deg, #0a1014, #1b2930 45%, #080c0f 78%);
}

.title-atmosphere::before {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 6%;
  width: min(56vw, 860px);
  border: clamp(10px, 1.4vw, 20px) solid #080c0f;
  background:
    linear-gradient(180deg, transparent 0 70%, rgb(5 8 10 / 72%) 100%),
    radial-gradient(circle at 47% 37%, #bac9c6 0 4%, #293b41 4.5% 11%, transparent 11.5%),
    linear-gradient(90deg, #11191e 0 7%, #2b3a40 7.2% 7.8%, #121c21 8% 70%, #482126 70.2% 71%, #11191e 71.2%),
    repeating-linear-gradient(0deg, transparent 0 72px, rgb(121 190 197 / 7%) 73px 74px);
  box-shadow: 0 0 0 1px #3d5059, inset 0 0 90px rgb(0 0 0 / 62%), 0 30px 70px rgb(0 0 0 / 55%);
  content: "";
}

.title-atmosphere::after {
  position: absolute;
  bottom: 10%;
  left: 15%;
  width: min(31vw, 470px);
  aspect-ratio: 1.42;
  border: 12px solid #0c1215;
  transform: rotate(-4deg);
  background:
    linear-gradient(135deg, transparent 0 48%, rgb(121 190 197 / 26%) 49% 51%, transparent 52%),
    radial-gradient(circle at 62% 38%, #151d20 0 6%, #818b86 6.5% 7.5%, transparent 8%),
    linear-gradient(155deg, #c5b894, #746b55);
  box-shadow: 0 16px 35px rgb(0 0 0 / 66%);
  content: "";
}

.film-burn {
  position: absolute;
  border-radius: 50%;
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: blur(1px);
}

.film-burn-a {
  top: -12%;
  left: -6%;
  width: 34vw;
  aspect-ratio: 1;
  background: radial-gradient(circle, transparent 0 32%, rgb(159 37 41 / 42%) 45%, rgb(209 168 78 / 18%) 58%, transparent 70%);
}

.film-burn-b {
  right: 16%;
  bottom: -18%;
  width: 38vw;
  aspect-ratio: 1;
  background: radial-gradient(circle, transparent 0 37%, rgb(121 190 197 / 25%) 49%, transparent 68%);
}

.negative-frame {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 2.5%;
  width: 6.8%;
  opacity: 0.22;
  background:
    radial-gradient(ellipse, transparent 0 37%, #b6aa7d 40% 57%, transparent 60%) center top / 100% 5.4% repeat-y,
    linear-gradient(90deg, #070b0e 0 24%, #726a4d 25% 75%, #070b0e 76%);
}

.title-panel {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(630px, 47vw);
  min-width: 420px;
  gap: clamp(15px, 2.6vh, 26px);
  padding: clamp(26px, 4vw, 55px);
  border: 1px solid #4b606b;
  background:
    linear-gradient(130deg, rgb(255 255 255 / 3.5%), transparent 32%),
    rgb(15 25 31 / 94%);
  box-shadow: 0 0 0 5px rgb(6 10 12 / 64%), 0 0 0 6px #30444e, var(--shadow-lg);
}

.title-panel::before,
.title-panel::after {
  position: absolute;
  content: "";
}

.title-panel::before {
  top: 9px;
  right: 9px;
  bottom: 9px;
  left: 9px;
  border: 1px solid rgb(121 190 197 / 9%);
  pointer-events: none;
}

.title-panel::after {
  top: -1px;
  left: 8%;
  width: 104px;
  height: 4px;
  background: linear-gradient(90deg, var(--safelight), var(--brass));
}

.case-stamp {
  margin: 0;
  color: var(--moon-hi);
  font: 800 clamp(0.62rem, 1.1vw, 0.72rem)/1.35 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.title-logo {
  display: grid;
  gap: 5px;
}

.title-kicker {
  color: var(--brass-hi);
  font: 900 clamp(0.76rem, 1.4vw, 0.95rem)/1 var(--mono);
  letter-spacing: 0.35em;
}

.title-logo h1 {
  margin: 0;
  color: var(--paper-hi);
  font: 700 clamp(2.7rem, 5.2vw, 5.3rem)/0.96 var(--serif);
  letter-spacing: -0.065em;
  text-shadow: 0 7px 24px rgb(0 0 0 / 55%);
  text-wrap: balance;
}

.title-directive {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--safelight-hi);
  background: rgb(159 37 41 / 10%);
  color: var(--paper-lo);
  font: 650 clamp(0.82rem, 1.2vw, 0.98rem)/1.7 var(--serif);
}

.mode-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.mode-selector h2 {
  grid-column: 1 / -1;
  margin: 0;
  color: #91a1a8;
  font: 800 0.65rem/1.2 var(--mono);
  letter-spacing: 0.15em;
}

.mode-name,
.mode-detail {
  display: block;
}

.mode-name {
  margin-bottom: 0.35rem;
  color: var(--paper-hi);
  font-size: 0.86rem;
  font-weight: 900;
}

.mode-detail {
  color: #819097;
  font-size: 0.7rem;
  line-height: 1.5;
}

.title-panel .title-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr);
}

.save-note {
  margin: -8px 0 0;
  color: #73828a;
  font: 650 0.63rem/1.4 var(--mono);
  text-align: center;
}

/* Production prologue composition */
.prologue-screen {
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 24px);
  padding: clamp(14px, 3vw, 38px) !important;
}

.prologue-header {
  width: min(1120px, 100%);
  padding: 0 clamp(4px, 1.2vw, 14px);
}

.prologue-header h1 {
  margin: 0.2rem 0 0.3rem;
  color: var(--paper-hi);
  font: 700 clamp(1.8rem, 3.5vw, 3.2rem)/1.08 var(--serif);
  letter-spacing: -0.04em;
}

.prologue-header > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #a8b0b0;
  font-size: 0.84rem;
}

.prologue-grid {
  display: grid;
  width: min(1120px, 100%);
  min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(7px, 1.2vw, 14px);
}

.prologue-card {
  position: relative;
  display: grid;
  min-height: clamp(230px, 43vh, 390px);
  grid-template-rows: minmax(125px, 1fr) auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #465a64;
  background: #111b21;
  color: var(--paper);
  box-shadow: 0 9px 20px rgb(0 0 0 / 30%), inset 0 0 0 4px #0c1317;
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.prologue-card:hover,
.prologue-card:focus-visible {
  border-color: var(--brass);
  transform: translateY(-3px);
  filter: brightness(1.07);
}

.prologue-visual {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid #374a53;
  background:
    radial-gradient(circle at 50% 46%, rgb(121 190 197 / 10%), transparent 37%),
    repeating-linear-gradient(90deg, #0e171c 0 17px, #111c22 18px 19px);
}

.prologue-visual::before,
.prologue-visual::after {
  position: absolute;
  content: "";
}

.parcel-visual::before {
  width: 65%;
  aspect-ratio: 1.4;
  border: 1px solid #75603a;
  transform: rotate(-4deg);
  background:
    linear-gradient(90deg, transparent 46%, #8c7343 47% 53%, transparent 54%),
    linear-gradient(160deg, #a9976f, #685d47);
  box-shadow: 0 12px 20px rgb(0 0 0 / 45%);
}

.parcel-visual::after {
  width: 29px;
  aspect-ratio: 1;
  border: 3px double #681b20;
  border-radius: 50%;
  background: #9f2529;
  box-shadow: inset 0 0 0 4px #b84a48;
}

.letter-visual::before,
.address-visual::before {
  width: 58%;
  aspect-ratio: 0.78;
  border: 1px solid #8d8266;
  transform: rotate(3deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, #807b67 15px 16px),
    linear-gradient(90deg, #9f2529 0 4px, #e8ddc0 4px);
  box-shadow: 7px 8px 0 rgb(0 0 0 / 31%);
}

.letter-visual::after {
  bottom: 23%;
  width: 25%;
  height: 4px;
  transform: rotate(-3deg);
  background: var(--safelight);
}

.address-visual::before {
  aspect-ratio: 1.2;
  transform: rotate(-3deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, #807b67 18px 19px),
    #e8ddc0;
}

.address-visual::after {
  width: 39%;
  aspect-ratio: 1.6;
  border: 2px solid #284a50;
  transform: rotate(5deg);
  background: repeating-linear-gradient(90deg, #79bec5 0 3px, transparent 3px 7px);
  opacity: 0.64;
}

.canister-visual::before {
  width: 72px;
  height: 104px;
  border: 7px solid #1b252a;
  border-radius: 11px 11px 16px 16px;
  background:
    linear-gradient(90deg, #242b2d, #ae9a65 32% 65%, #1f272a),
    #272f32;
  box-shadow: inset 0 0 0 2px #090e11, 0 16px 23px rgb(0 0 0 / 50%);
}

.canister-visual::after {
  top: 25%;
  width: 54px;
  height: 20px;
  border: 2px solid #72571e;
  background: var(--brass);
  color: #16140e;
  content: "A";
  font: 900 0.72rem/16px var(--mono);
  text-align: center;
}

.prologue-card-copy {
  display: grid;
  min-height: 118px;
  align-content: start;
  gap: 6px;
  padding: 0.85rem;
  background: #15232a;
}

.prologue-card-copy strong {
  color: var(--paper-hi);
  font-size: 0.86rem;
}

.prologue-card-copy span {
  color: #8d9b9f;
  font-size: 0.69rem;
  line-height: 1.55;
}

.prologue-enter {
  width: min(380px, 100%);
}

/* Production HUD and workspace */
.game-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) var(--inventory-w);
  overflow: hidden;
  background: #05090b;
}

.game-hud {
  grid-template-columns: minmax(190px, 0.72fr) auto minmax(330px, 1fr);
  gap: clamp(9px, 1.4vw, 22px);
}

.room-identity {
  min-width: 0;
}

.hud-label {
  display: block;
  color: var(--moon-hi);
  font: 800 0.55rem/1.2 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.room-identity h1 {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--paper-hi);
  font-size: clamp(0.88rem, 1.35vw, 1.08rem);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-identity p {
  margin: 1px 0 0;
  overflow: hidden;
  color: #78888f;
  font-size: 0.62rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.room-trail {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.room-trail li {
  display: flex;
  align-items: center;
}

.room-trail li + li::before {
  width: 17px;
  height: 1px;
  background: #41545e;
  content: "";
}

.room-trail button {
  min-width: 66px;
  min-height: 36px;
  padding: 0 0.55rem;
  border: 1px solid #3e515a;
  background: #0a1217;
  color: #708087;
  font: 800 0.62rem/1 var(--mono);
}

.room-trail button:not(:disabled):hover {
  border-color: var(--moon);
  color: var(--moon-hi);
}

.room-trail button[aria-current="page"] {
  border-color: var(--brass);
  background: #332a18;
  color: var(--brass-hi);
  box-shadow: inset 0 -2px var(--brass);
}

.hud-button {
  min-height: 40px;
  padding: 0 0.7rem;
  border-color: #40545e;
  background: #0c151a;
  color: var(--paper-lo);
  box-shadow: inset 0 0 0 2px #142129;
  font: 800 0.68rem/1 var(--sans);
}

.room-back {
  min-width: 86px;
}

.room-back span:first-child {
  color: var(--moon-hi);
  font-size: 1rem;
}

.hud-count {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #6b5624;
  background: var(--brass);
  color: #18150e;
  font: 900 0.63rem/1 var(--mono);
}

.timer-block {
  display: grid;
  min-width: 74px;
  justify-items: end;
}

.game-timer {
  color: var(--brass-hi);
  font: 900 1rem/1.1 var(--mono);
  letter-spacing: 0.06em;
}

.game-timer.is-critical {
  color: #ff7c75;
  animation: timer-pulse 1s ease-in-out infinite;
}

.room-stage {
  flex: 0 0 auto;
}

.world,
.player-layer {
  position: absolute;
  inset: 0;
}

.world {
  overflow: hidden;
}

img.room-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: contrast(1.045) saturate(0.91) brightness(0.87);
}

.room-stage[data-room="darkroom"] img.room-bg {
  filter: contrast(1.08) saturate(0.8) brightness(0.76) sepia(0.08);
}

.room-stage[data-room="archive"] img.room-bg {
  filter: contrast(1.09) saturate(0.78) brightness(0.81);
}

.player-layer {
  z-index: 8;
  pointer-events: none;
}

.player-layer .player {
  left: var(--player-x, 50%);
  top: var(--player-y, 75%);
}

.player-shadow {
  position: absolute;
  z-index: -1;
  right: -32%;
  bottom: -8%;
  left: -32%;
  height: 18%;
  border-radius: 50%;
  background: rgb(0 0 0 / 48%);
  filter: blur(2px);
}

.player-body {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.player.facing-left { transform: translate(-50%, -74%) scaleX(-1); }
.player.facing-right { transform: translate(-50%, -74%) scaleX(1); }
.player.facing-up { filter: brightness(0.86); }

.hotspot[data-label]::before {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 5px);
  left: 50%;
  width: max-content;
  max-width: 160px;
  padding: 0.25rem 0.42rem;
  border: 1px solid #4e6570;
  transform: translate(-50%, 4px);
  background: rgb(7 13 16 / 90%);
  color: var(--paper-hi);
  content: attr(data-label);
  font: 750 0.58rem/1.25 var(--sans);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.hotspot[data-label]:hover::before,
.hotspot[data-label]:focus-visible::before {
  transform: translate(-50%, 0);
  opacity: 1;
}

.inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inventory-header h2 {
  margin: 2px 0 0;
  color: var(--paper-hi);
  font-size: 0.9rem;
  line-height: 1.2;
}

.inventory-capacity {
  display: grid;
  min-width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid #5e4c22;
  background: #292315;
  color: var(--brass-hi);
  font: 900 0.7rem/1 var(--mono);
}

.inventory-item-kind {
  display: block;
  margin-top: 2px;
  color: #6f8189;
  font: 750 0.52rem/1 var(--mono);
}

.inventory-status {
  min-height: 50px;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid #31444e;
  background: #0b1419;
  color: var(--muted);
  font: 700 0.62rem/1.45 var(--mono);
}

.evidence-document {
  display: grid;
  width: min(680px, 100%);
  min-height: 260px;
  align-content: center;
  justify-items: center;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 54px);
  border: 1px solid #a09578;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgb(74 73 58 / 12%) 28px 29px),
    #f2e8cd;
  box-shadow: 5px 6px 0 #afa382;
  color: #323329;
  text-align: center;
}

.document-emblem {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin-bottom: 1rem;
  border: 1px solid #9d9275;
  background: #ded2b2;
}

.document-emblem .item-icon {
  transform: scale(1.25);
}

/* Direct toast-root implementation */
.toast-root {
  position: fixed;
  z-index: 4000;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(370px, calc(100vw - 28px));
  padding: 0.82rem 0.95rem 0.82rem 1.12rem;
  border: 1px solid #536973;
  transform: translateY(14px);
  background: rgb(14 25 31 / 97%);
  color: var(--paper-hi);
  box-shadow: var(--shadow-md);
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast-root::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--moon);
  content: "";
}

.toast-root.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.screen-transition {
  position: fixed;
  z-index: 5000;
  inset: 0;
  background:
    radial-gradient(circle, transparent 0 16%, rgb(5 8 10 / 84%) 64%),
    #05080a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.screen-transition.is-active {
  opacity: 1;
}

.noscript-warning {
  position: fixed;
  z-index: 10001;
  inset: 0;
  display: grid;
  margin: 0;
  place-items: center;
  padding: 2rem;
  background: var(--ink);
  color: var(--paper-hi);
  text-align: center;
}

/* Ending markup in index.html */
.ending-panel {
  position: relative;
  display: grid;
  width: min(850px, 100%);
  gap: clamp(13px, 2.5vh, 24px);
  padding: clamp(26px, 5vw, 64px);
  border: 1px solid #50636d;
  background:
    linear-gradient(130deg, rgb(121 190 197 / 4%), transparent 36%),
    #111d23;
  box-shadow: 0 0 0 5px #080d10, 0 0 0 6px #334954, var(--shadow-lg);
}

.ending-panel::before {
  width: 82px;
  height: 4px;
  background: linear-gradient(90deg, var(--safelight), var(--brass));
  content: "";
}

.ending-panel > h1 {
  margin: 0;
  color: var(--paper-hi);
  font: 700 clamp(2rem, 5vw, 4.5rem)/1.04 var(--serif);
  letter-spacing: -0.05em;
}

.ending-content {
  min-height: 0;
  max-height: 48vh;
  overflow: auto;
  color: var(--paper-lo);
  line-height: 1.8;
}

/* Exact data-icon vocabulary from game-data.js */
.item-icon > i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.item-icon[data-icon="letter"],
.item-icon[data-icon="address-note"],
.item-icon[data-icon="booking-ledger"],
.item-icon[data-icon="bag-note"],
.item-icon[data-icon="photo-memo"],
.item-icon[data-icon="process-journal"],
.item-icon[data-icon="fire-record"],
.item-icon[data-icon="time-memo"],
.item-icon[data-icon="overlay-guide"],
.item-icon[data-icon="safe-guide"],
.item-icon[data-icon="contract-ledger"],
.item-icon[data-icon="oil-receipt"],
.item-icon[data-icon="identity-file"] {
  width: 34px;
  height: 40px;
  margin-inline: 4px;
  border: 2px solid #7d704e;
  border-radius: 1px;
  background:
    linear-gradient(90deg, #9f2529 0 4px, transparent 4px),
    repeating-linear-gradient(0deg, transparent 0 6px, #77735f 6px 7px),
    #e4d6b5;
  box-shadow: 3px 3px 0 #403a2e;
}

.item-icon[data-icon="address-note"] { transform: rotate(3deg); }
.item-icon[data-icon="booking-ledger"],
.item-icon[data-icon="process-journal"],
.item-icon[data-icon="contract-ledger"] { background-color: #bc9a52; box-shadow: inset 6px 0 #6d2c2f, 3px 3px 0 #302b20; }
.item-icon[data-icon="oil-receipt"] { width: 28px; background-color: #d8ca9e; }
.item-icon[data-icon="identity-file"] { background-color: #bdc6b8; box-shadow: inset 5px 0 #38555d, 3px 3px 0 #303732; }

.item-icon[data-icon^="sheet-"] {
  width: 38px;
  height: 40px;
  margin-inline: 2px;
  border: 2px solid var(--moon-dim);
  background:
    linear-gradient(90deg, transparent 31%, rgb(121 190 197 / 42%) 32% 34%, transparent 35% 65%, rgb(121 190 197 / 42%) 66% 68%, transparent 69%),
    linear-gradient(0deg, transparent 31%, rgb(121 190 197 / 42%) 32% 34%, transparent 35% 65%, rgb(121 190 197 / 42%) 66% 68%, transparent 69%),
    rgb(121 190 197 / 23%);
  box-shadow: inset 0 0 0 2px #152229;
}

.item-icon[data-icon="sheet-spring"] { filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(44deg); }
.item-icon[data-icon="sheet-summer"] { filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(8deg); }
.item-icon[data-icon="sheet-autumn"] { filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(-42deg); }
.item-icon[data-icon="sheet-winter"] { filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(174deg); }

.item-icon[data-icon="contact-card"] {
  width: 40px;
  height: 27px;
  margin-block: 7px;
  border: 2px solid #83795f;
  transform: rotate(-3deg);
  background:
    radial-gradient(circle at 11px 10px, #535d5b 0 5px, transparent 5.5px),
    repeating-linear-gradient(0deg, transparent 0 5px, #7c7765 6px 7px) 22px 5px / 13px 17px no-repeat,
    #e5d9bc;
  box-shadow: 3px 3px 0 #35342e;
}

.item-icon[data-icon="keypad-film"] {
  border: 3px solid #a48644;
  background:
    radial-gradient(circle, #79bec5 0 2px, transparent 2.5px) 5px 5px / 11px 11px,
    #17262d;
  box-shadow: inset 0 0 0 2px #080e11;
}

.item-icon[data-icon="film-can"] {
  width: 29px;
  height: 39px;
  margin-inline: 6px;
  border: 3px solid #2e373b;
  border-radius: 6px 6px 9px 9px;
  background: linear-gradient(90deg, #292e2e, #a18c5b 38% 63%, #22282b);
  box-shadow: inset 0 0 0 2px #080c0e;
}

.item-icon[data-icon="film-can"]::before {
  top: -5px;
  left: 3px;
  width: 17px;
  height: 5px;
  border: 2px solid #1a2226;
  background: #77715f;
}

.item-icon[data-icon="filter-red"],
.item-icon[data-icon="filter-blue"] {
  border: 4px solid #303a3f;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(159 37 41 / 78%) 0 54%, #6f171c 56% 65%, #1b252a 67%);
  box-shadow: inset 0 0 0 2px #0b1013, 0 0 0 1px #596a71;
}

.item-icon[data-icon="filter-blue"] {
  background: radial-gradient(circle, rgb(56 114 154 / 82%) 0 54%, #1d4d70 56% 65%, #1b252a 67%);
}

.item-icon[data-icon="filter-red"]::after,
.item-icon[data-icon="filter-blue"]::after {
  right: -8px;
  bottom: -3px;
  width: 12px;
  height: 22px;
  border: 3px solid #192227;
  border-radius: 2px 2px 5px 5px;
  transform: rotate(-35deg);
  background: #47545a;
}

.item-icon[data-icon="shutter-cable"] {
  border: 3px solid #53646c;
  border-radius: 50%;
  background: radial-gradient(circle, #d1a84e 0 12%, #0d1418 14% 34%, #5c6a6e 36% 42%, #17232b 44%);
}

.item-icon[data-icon="shutter-cable"]::after {
  right: -6px;
  bottom: -2px;
  width: 25px;
  height: 18px;
  border-right: 3px solid var(--brass);
  border-bottom: 3px solid var(--brass);
  border-radius: 0 0 18px;
  transform: rotate(12deg);
}

.item-icon[data-icon="photo-memo"],
.item-icon[data-icon="photo-thirteen"] {
  width: 38px;
  height: 40px;
  margin-inline: 2px;
  padding: 4px 4px 10px;
  border: 1px solid #8b8063;
  transform: rotate(-4deg);
  background: #e8ddc4;
  box-shadow: 3px 4px 0 #2a2b29;
}

.item-icon[data-icon="photo-memo"]::before,
.item-icon[data-icon="photo-thirteen"]::before {
  inset: 5px 5px 11px;
  background:
    radial-gradient(circle at 58% 36%, #98a4a3 0 13%, transparent 14%),
    linear-gradient(135deg, #29383e, #6f7c78);
}

.item-icon[data-icon^="plate-"] {
  border: 2px solid var(--moon);
  border-radius: 1px;
  transform: rotate(3deg);
  background:
    linear-gradient(45deg, transparent 44%, rgb(121 190 197 / 80%) 45% 48%, transparent 49%),
    rgb(34 78 83 / 44%);
  box-shadow: inset 0 0 0 3px rgb(7 12 15 / 42%);
}

.item-icon[data-icon="plate-developer"] { filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(0deg); }
.item-icon[data-icon="plate-stop"] { filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(55deg); }
.item-icon[data-icon="plate-fixer"] { filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(115deg); }
.item-icon[data-icon="plate-wash"] { filter: drop-shadow(0 3px 2px rgb(0 0 0 / 38%)) hue-rotate(180deg); }

.item-icon[data-icon="hand-mirror"] {
  width: 34px;
  height: 40px;
  margin-inline: 4px;
  border: 3px solid #8b7442;
  border-radius: 49% 49% 42% 42%;
  background: linear-gradient(135deg, #8db4ba, #e6e1c9 43%, #527981 45%, #9fc1c4);
  box-shadow: inset 0 0 0 2px #17232b;
}

.item-icon[data-icon="hand-mirror"]::after {
  bottom: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #8b7442;
  border-top: 0;
  transform: translateX(-50%);
  background: #2a2420;
}

.item-icon[data-icon="box-net"] {
  background:
    linear-gradient(90deg, transparent 32%, #6d5930 33% 35%, transparent 36% 65%, #6d5930 66% 68%, transparent 69%),
    linear-gradient(0deg, transparent 32%, #6d5930 33% 35%, transparent 36% 65%, #6d5930 66% 68%, transparent 69%),
    #c8a858;
  clip-path: polygon(33% 0, 67% 0, 67% 32%, 100% 32%, 100% 68%, 67% 68%, 67% 100%, 33% 100%, 33% 68%, 0 68%, 0 32%, 33% 32%);
}

.item-icon[data-icon="suspect-file"] {
  width: 35px;
  height: 40px;
  margin-inline: 3px;
  border: 2px solid #6e5a2a;
  background:
    radial-gradient(circle at 50% 42%, #a6a18e 0 7px, transparent 7.5px),
    linear-gradient(0deg, transparent 0 73%, #9f2529 74% 82%, transparent 83%),
    #c5a75d;
  box-shadow: inset 6px 0 #866a2e, 3px 3px 0 #302b20;
}

.item-icon[data-icon="film-fixture"] {
  border: 4px solid #52646c;
  background:
    radial-gradient(circle at 5px 5px, var(--brass) 0 2px, transparent 2.5px) 0 0 / 17px 17px,
    #14242b;
  box-shadow: inset 0 0 0 3px #070d10;
}

.item-icon[data-icon="recording-reel"] {
  border: 4px solid #5e686b;
  border-radius: 50%;
  background:
    radial-gradient(circle, #11191d 0 6px, transparent 6.5px),
    conic-gradient(#798387 0 8%, #1c272b 9% 24%, #798387 25% 33%, #1c272b 34% 49%, #798387 50% 58%, #1c272b 59% 74%, #798387 75% 83%, #1c272b 84%);
}

.item-icon[data-icon="transmit-plate"] {
  border: 3px solid var(--brass);
  background:
    linear-gradient(135deg, transparent 42%, var(--moon) 43% 48%, transparent 49%),
    linear-gradient(45deg, transparent 42%, var(--moon) 43% 48%, transparent 49%),
    #102229;
  box-shadow: inset 0 0 0 3px #070d10;
}

/* Live-layout breakpoints */
@media (max-width: 1180px) {
  .game-hud {
    grid-template-columns: minmax(150px, 0.56fr) auto minmax(285px, 0.9fr);
    gap: 8px;
  }

  .room-back span:last-child,
  .room-identity p,
  .hud-button-label {
    display: none;
  }

  .room-back {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }

  .hud-button {
    padding-inline: 0.5rem;
  }
}

@media (max-width: 980px) {
  .game-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 100px;
  }

  .inventory-panel {
    grid-template-columns: 118px minmax(0, 1fr) 132px;
  }

  .inventory-status {
    display: grid;
    min-height: 0;
    place-content: center;
    border-top: 0;
    border-left: 1px solid #31444e;
  }

  .title-screen {
    justify-content: center !important;
  }

  .title-panel {
    width: min(680px, 100%);
    min-width: 0;
  }

  .title-atmosphere::before {
    width: 88%;
    opacity: 0.52;
  }

  .prologue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
  }

  .prologue-card {
    min-height: 220px;
    grid-template-columns: minmax(110px, 0.45fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  .prologue-card-copy {
    min-height: 0;
    align-content: center;
    border-left: 1px solid #374a53;
  }
}

@media (max-width: 680px) {
  .game-hud {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .room-nav {
    display: none;
  }

  .hud-actions {
    gap: 4px;
  }

  .hud-actions .hud-button {
    min-width: 40px;
    width: 40px;
    padding: 0;
  }

  .hud-actions .icon-button {
    font-size: 0;
  }

  .hud-actions .icon-button::before {
    content: "⚙";
    font-size: 1rem;
  }

  .timer-block {
    min-width: 62px;
  }

  .timer-block .hud-label {
    display: none;
  }

  .game-workspace {
    grid-template-rows: minmax(0, 1fr) 88px;
  }

  .inventory-panel {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .inventory-status {
    display: none;
  }

  .title-screen {
    padding: 10px;
  }

  .title-panel {
    padding: 24px 18px;
    gap: 14px;
  }

  .mode-selector {
    grid-template-columns: 1fr;
  }

  .title-panel .title-actions {
    grid-template-columns: 1fr;
  }

  .prologue-screen {
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }

  .prologue-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .prologue-card {
    min-height: 150px;
  }

  .ending-panel {
    min-height: 100%;
    align-content: center;
    padding: 24px 18px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .game-workspace {
    grid-template-columns: minmax(0, 1fr) 176px;
    grid-template-rows: minmax(0, 1fr);
  }

  .inventory-status,
  .inventory-header {
    display: none;
  }

  .title-screen {
    justify-content: flex-end !important;
    padding: 8px 20px;
  }

  .title-panel {
    width: min(540px, 64vw);
    min-width: 390px;
    gap: 8px;
    padding: 14px 20px;
  }

  .title-logo h1 {
    font-size: clamp(2rem, 6.8vh, 3rem);
  }

  .title-directive {
    padding-block: 0.45rem;
    font-size: 0.72rem;
  }

  .mode-card {
    min-height: 70px;
    padding: 0.6rem;
  }

  .mode-detail,
  .save-note {
    display: none;
  }

  .prologue-screen {
    display: grid;
    grid-template-columns: minmax(250px, 0.4fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch !important;
    gap: 8px;
    padding: 8px 12px !important;
  }

  .prologue-header {
    align-self: center;
  }

  .prologue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
  }

  .prologue-card {
    min-height: 130px;
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .prologue-card-copy {
    padding: 0.55rem;
  }

  .prologue-card-copy span {
    font-size: 0.6rem;
  }

  .prologue-enter {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .ending-panel {
    padding: 18px 26px;
    gap: 8px;
  }

  .ending-content {
    max-height: 46vh;
  }
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

.reduced-motion .camera-flash {
  display: none;
}

.high-contrast {
  --line: #879ba5;
  --paper: #fff1c9;
  --paper-lo: #e9dbb8;
  --moon: #9df5f5;
  --moon-hi: #c5ffff;
}

/* ==========================================================================\
   Final game.js puzzle bindings
   ========================================================================== */

/* Buttons produced inside puzzle bodies. */
.device-action,
.secondary-device-action,
.take-found-piece,
.found-piece-tab,
.text-danger-action {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.68rem 1rem;
  border: 1px solid #526873;
  border-radius: 2px;
  background: linear-gradient(180deg, #334b56, #1a2a32 62%, #111c22);
  color: var(--paper-hi);
  box-shadow: 0 3px 0 #080d10, inset 0 0 0 1px rgb(255 255 255 / 7%);
  font-size: 0.79rem;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: 0.015em;
  text-align: center;
  transition: border-color 120ms ease, filter 120ms ease, transform 120ms ease;
}

.device-action {
  border-color: #76591d;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 58%, #a77b28);
  color: #17140d;
  box-shadow: 0 3px 0 #5c451d, inset 0 1px rgb(255 255 255 / 35%);
}

.device-action:hover:not(:disabled),
.secondary-device-action:hover:not(:disabled),
.take-found-piece:hover:not(:disabled),
.found-piece-tab:hover:not(:disabled) {
  border-color: var(--moon-hi);
  filter: brightness(1.08);
}

.device-action:active:not(:disabled),
.secondary-device-action:active:not(:disabled),
.take-found-piece:active:not(:disabled),
.found-piece-tab:active:not(:disabled),
.text-danger-action:active:not(:disabled) {
  transform: translateY(2px);
}

.danger-action,
.text-danger-action {
  border-color: #b04448;
  background: linear-gradient(180deg, #b94448, #7f2227);
  color: #fff4e8;
  box-shadow: 0 3px 0 #4e1216;
}

.text-danger-action {
  background: transparent;
  color: #b83f43;
  box-shadow: none;
}

.physical-note {
  margin: 0;
  padding: 0.62rem 0.78rem;
  border-left: 3px solid #8f8260;
  background: rgb(99 87 56 / 10%);
  color: #55564c;
  font-size: 0.74rem;
  line-height: 1.58;
}

/* ---------- Evidence documents produced by JS ---------- */

.evidence-document:has(.paper-heading) {
  display: block;
  width: min(760px, 100%);
  min-height: 0;
  padding: clamp(20px, 3vw, 36px);
  color: #303129;
  text-align: left;
}

.paper-heading {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -0.2rem 0 1.15rem;
  padding: 0 0.2rem 0.65rem;
  border-bottom: 3px double #726c58;
  color: #20262a;
  font: 900 0.8rem/1.25 var(--mono);
  letter-spacing: 0.055em;
}

.paper-heading strong {
  flex: 0 0 auto;
  padding: 0.3rem 0.5rem;
  border: 1px solid #687179;
  background: #27343a;
  color: #f1e6c7;
  font-size: 0.67rem;
  letter-spacing: 0.08em;
}

.document-note {
  margin: 0 0 1rem;
  padding: 0.65rem 0.8rem;
  border-left: 4px solid var(--safelight);
  background: rgb(159 37 41 / 8%);
  color: #4e4d42;
  font-size: 0.78rem;
}

.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.contact-document .contact-card {
  display: block;
  min-height: 150px;
  padding: 1rem;
  transform: rotate(-0.4deg);
  border-color: #8f8468;
  background:
    linear-gradient(90deg, transparent 0 92%, rgb(159 37 41 / 10%) 92%),
    #f0e5c7;
}

.contact-document .contact-card:nth-child(2) { transform: rotate(0.55deg); }
.contact-document .contact-card:nth-child(3) { transform: rotate(-0.2deg); }

.contact-document .contact-card h3 {
  margin: 0.35rem 0 0.6rem;
  color: #1e2527;
  font-size: 1rem;
}

.contact-document .contact-card p {
  margin: 0 0 0.3rem;
  color: #777160;
  font-size: 0.65rem;
}

.contact-document .contact-card > strong {
  display: block;
  color: #343a3b;
  font: 850 0.7rem/1.65 var(--mono);
  word-break: break-word;
}

.evidence-table {
  width: 100%;
  margin: 0.75rem 0;
  border-spacing: 0;
  border-collapse: collapse;
  color: #33342c;
  font-size: 0.78rem;
}

.evidence-table th,
.evidence-table td {
  padding: 0.65rem 0.7rem;
  border: 1px solid #aaa083;
  text-align: left;
}

.evidence-table th {
  background: #d9ccaa;
  color: #3f4038;
  font: 850 0.67rem/1.35 var(--mono);
}

.evidence-table tbody tr:nth-child(even) td {
  background: rgb(162 149 112 / 8%);
}

.handwriting {
  margin: 1rem 0 0;
  color: #583637;
  font: italic 700 0.9rem/1.7 var(--serif);
  transform: rotate(-0.45deg);
}

.handwriting.large {
  padding: 0.8rem 1rem;
  border-top: 1px solid #a49776;
  border-bottom: 1px solid #a49776;
  font-size: clamp(0.95rem, 2vw, 1.12rem);
}

.journal-lines {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0;
  list-style: none;
  counter-reset: journal;
}

.journal-lines li {
  position: relative;
  min-height: 48px;
  padding: 0.7rem 0.4rem 0.7rem 2.55rem;
  border-bottom: 1px solid rgb(91 87 69 / 24%);
  counter-increment: journal;
}

.journal-lines li::before {
  position: absolute;
  top: 0.72rem;
  left: 0.25rem;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #756e59;
  border-radius: 50%;
  color: #555348;
  content: counter(journal, upper-roman);
  font: 850 0.58rem/1 var(--mono);
}

.chemical-stain {
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  border: 1px solid #9a8d6b;
  background:
    radial-gradient(circle at 12% 50%, rgb(52 45 34 / 19%) 0 17px, transparent 18px),
    radial-gradient(circle at 39% 50%, rgb(255 255 255 / 43%) 0 15px, transparent 16px),
    radial-gradient(circle at 66% 50%, rgb(108 108 96 / 22%) 0 15px, transparent 16px),
    radial-gradient(circle at 90% 50%, rgb(75 127 132 / 18%) 0 16px, transparent 17px),
    #dfd3b3;
  color: #43443b;
  font: 800 0.7rem/1.5 var(--mono);
  text-align: center;
}

.machine-log {
  overflow: hidden;
  border: 1px solid #787865;
  background: #dcd5bd;
}

.machine-log p {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 43px;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid #a7a088;
}

.machine-log p:last-child { border-bottom: 0; }

.machine-log time {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid #a7a088;
  background: #26343a;
  color: var(--moon-hi);
  font: 850 0.72rem/1 var(--mono);
}

.machine-log p span {
  padding: 0.55rem 0.75rem;
  font-size: 0.76rem;
}

.receipt-document {
  width: min(460px, 100%) !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgb(70 66 51 / 10%) 23px 24px),
    #ece2c8 !important;
}

.receipt-lines {
  padding: 0.5rem 0;
  border-top: 1px dashed #77715d;
  border-bottom: 1px dashed #77715d;
  font-family: var(--mono);
}

.receipt-lines p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0.45rem 0.2rem;
}

.receipt-lines strong {
  color: var(--safelight-dark);
}

.tape-player {
  position: relative;
  display: grid;
  width: min(420px, 100%);
  aspect-ratio: 2.25;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  margin: 1rem auto;
  overflow: hidden;
  border: 9px solid #1b252a;
  border-radius: 8px;
  background: linear-gradient(145deg, #667277, #242d30 68%);
  box-shadow: inset 0 0 0 2px #0c1215, 0 6px 0 #111719;
}

.tape-reel {
  width: 46%;
  aspect-ratio: 1;
  border: 8px solid #9b9a8c;
  border-radius: 50%;
  background:
    radial-gradient(circle, #182126 0 18%, transparent 19%),
    conic-gradient(#202a2e 0 14%, #9b9a8c 15% 24%, #202a2e 25% 39%, #9b9a8c 40% 49%, #202a2e 50% 64%, #9b9a8c 65% 74%, #202a2e 75% 89%, #9b9a8c 90%);
  box-shadow: 0 0 0 3px #11191d;
}

.tape-player > i {
  position: absolute;
  right: 25%;
  bottom: 12%;
  left: 25%;
  height: 6px;
  border-radius: 5px;
  background: #16100c;
  box-shadow: 0 -88px 0 -2px #16100c;
}

.tape-document blockquote {
  margin: 1.25rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--safelight);
  background: rgb(159 37 41 / 8%);
  color: #3f4038;
  font: italic 700 0.9rem/1.8 var(--serif);
}

.identity-layout {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 2.5vw, 26px);
}

.identity-photo {
  position: relative;
  aspect-ratio: 0.78;
  margin: 0;
  overflow: hidden;
  border: 8px solid #e5dbc0;
  outline: 1px solid #7d7866;
  background: #313c3f;
  box-shadow: 4px 5px 0 #a79d82;
}

.identity-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.28) contrast(1.04);
}

.identity-layout dl {
  display: grid;
  grid-template-columns: minmax(96px, 0.28fr) minmax(0, 1fr);
  margin: 0;
  border-top: 2px solid #7b7560;
}

.identity-layout dt,
.identity-layout dd {
  margin: 0;
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid #aaa083;
  font-size: 0.74rem;
}

.identity-layout dt {
  color: #656354;
  font: 800 0.65rem/1.5 var(--mono);
}

.identity-layout dd {
  color: #2e302a;
}

.sensitive-zone {
  position: relative;
}

/* ---------- Restored thirteenth photograph ---------- */

.thirteenth-evidence {
  display: grid;
  width: min(820px, 100%);
  gap: 8px;
  margin: 0 auto;
}

.evidence-photo-wrap {
  position: relative;
  overflow: hidden;
  border: 10px solid #11181c;
  outline: 1px solid #67767a;
  background: #080d10;
  box-shadow: 0 7px 0 #8f856b, inset 0 0 48px rgb(0 0 0 / 55%);
}

.evidence-photo-wrap::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 22%), transparent 17% 83%, rgb(0 0 0 / 27%)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(0 0 0 / 10%) 4px);
  content: "";
}

.evidence-photo-wrap > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(0.85) sepia(0.12) contrast(1.12) brightness(0.84);
}

.photo-callout {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ffdc79;
  font: 900 clamp(0.52rem, 1vw, 0.66rem)/1.2 var(--mono);
  filter: drop-shadow(0 1px 2px #000);
  pointer-events: none;
}

.photo-callout > i {
  width: 28px;
  height: 1px;
  background: var(--brass-hi);
}

.photo-callout > b {
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--brass);
  background: rgb(7 12 15 / 83%);
  white-space: nowrap;
}

.hand-callout { top: 73%; left: 39%; }
.ring-callout { top: 80%; left: 48%; }
.key-callout { top: 88%; left: 49%; right: auto; bottom: auto; }
.coat-callout { top: 43%; right: 24%; flex-direction: row-reverse; }
.clock-callout { top: 17%; right: 7%; left: auto; flex-direction: column; }

.thirteenth-evidence figcaption {
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--brass);
  background: #17252c;
  color: var(--paper-lo);
  font: 750 0.7rem/1.5 var(--mono);
}

.thirteenth-evidence figcaption strong {
  float: right;
  color: var(--brass-hi);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
}

/* ---------- Physical number locks and drawers ---------- */

.physical-lock {
  display: grid;
  width: min(430px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(14px, 2.5vw, 24px);
  border: 1px solid #53666e;
  background:
    radial-gradient(circle at 12px 12px, #738085 0 3px, #1a2428 3.5px 6px, transparent 6.5px) 0 0 / 100% 100%,
    linear-gradient(145deg, #39464a, #172125 64%);
  box-shadow: inset 0 0 0 6px #0c1215, 0 7px 0 #8e846a;
  color: var(--paper);
}

.lock-hardware {
  position: relative;
  display: grid;
  min-height: 108px;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #66767b;
  background: linear-gradient(145deg, #2e393d, #101719);
  box-shadow: inset 0 0 0 3px #080d0f;
}

.lock-bolt {
  position: relative;
  width: 66px;
  aspect-ratio: 1;
  border: 9px solid #5f6b6f;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 46%, #d1a84e 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 46%, #d1a84e 47% 53%, transparent 54%),
    #172126;
  box-shadow: inset 0 0 0 5px #080d0f, 0 3px 0 #070a0c;
}

.lock-bolt::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 8px;
  border-radius: 4px;
  transform: translate(-50%, -50%) rotate(-28deg);
  background: var(--brass-hi);
  content: "";
}

.lock-display {
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: flex-end;
  padding: 0.65rem 0.9rem;
  overflow: hidden;
  border: 1px solid #294a50;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgb(121 190 197 / 5%) 3px),
    #061317;
  color: var(--moon-hi);
  box-shadow: inset 0 0 16px rgb(0 0 0 / 56%);
  font: 900 clamp(1rem, 2.5vw, 1.4rem)/1 var(--mono);
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.lock-hardware.is-denied {
  animation: lock-denied 270ms ease-in-out;
}

@keyframes lock-denied {
  25%, 75% { transform: translateX(-4px); border-color: var(--safelight-hi); }
  50% { transform: translateX(4px); }
}

.physical-lock > p {
  margin: 0;
  padding: 0.72rem 0.2rem;
  color: #a2acae;
  font-size: 0.72rem;
  line-height: 1.55;
}

.number-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: 7px;
}

.number-pad button {
  min-width: 0;
  min-height: 52px;
  padding: 0.25rem;
  border: 1px solid #6d7b7f;
  border-radius: 4px;
  background: linear-gradient(180deg, #d4d3c1, #8d9188);
  color: #121a1d;
  box-shadow: 0 3px 0 #303b3f;
  font: 900 0.92rem/1 var(--mono);
}

.number-pad button:hover {
  border-color: var(--brass-hi);
  background: linear-gradient(180deg, #f0d87f, #c79f48);
}

.number-pad button:last-child {
  border-color: #8d6925;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
}

.drawer-contents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.take-item-card {
  display: grid;
  min-width: 0;
  min-height: 110px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0.75rem;
  border: 1px solid #8e8469;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 18%), transparent 35%),
    #ded2b2;
  color: #303129;
  box-shadow: 3px 4px 0 #aaa080;
  text-align: left;
}

.take-item-card:hover {
  border-color: var(--safelight);
  background-color: #ebdfbe;
}

.take-item-card .item-icon {
  justify-self: center;
  transform: scale(1.08);
}

.take-item-card > span:last-child {
  min-width: 0;
}

.take-item-card strong,
.take-item-card small {
  display: block;
}

.take-item-card strong {
  margin-bottom: 0.3rem;
  color: #22282a;
  font-size: 0.78rem;
}

.take-item-card small {
  display: -webkit-box;
  overflow: hidden;
  color: #626258;
  font-size: 0.65rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.empty-drawer,
.empty-file-rack,
.empty-log {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px dashed #8e846a;
  background: rgb(126 113 79 / 8%);
  color: #626156;
  text-align: center;
}

.empty-drawer > span,
.empty-file-rack > span,
.empty-log > span {
  width: 76px;
  height: 38px;
  border: 5px solid #554f40;
  border-top: 0;
  box-shadow: inset 0 -5px #b8ab8b;
}

.empty-drawer p,
.empty-file-rack p,
.empty-log p { margin: 0; }

/* ---------- Incidental room details and doors ---------- */

.atmosphere-view,
.prop-closeup,
.door-view,
.recorder-empty {
  display: grid;
  min-height: 300px;
  place-items: center;
  align-content: center;
  gap: 16px;
  color: #474941;
  text-align: center;
}

.atmosphere-view p,
.prop-closeup p,
.door-view p,
.recorder-empty p {
  max-width: 580px;
  margin: 0;
  line-height: 1.75;
}

.dust-motif {
  width: min(360px, 80%);
  height: 120px;
  background:
    radial-gradient(circle at 12% 36%, #857c62 0 1px, transparent 2px),
    radial-gradient(circle at 38% 65%, #857c62 0 1px, transparent 2px),
    radial-gradient(circle at 74% 23%, #857c62 0 1px, transparent 2px),
    radial-gradient(circle at 88% 78%, #857c62 0 1px, transparent 2px),
    linear-gradient(165deg, transparent 47%, rgb(96 91 72 / 20%) 48% 50%, transparent 51%);
  background-size: 37px 29px, 43px 31px, 53px 37px, 47px 35px, 100% 100%;
}

.door-slab {
  position: relative;
  width: min(240px, 62%);
  height: 270px;
  border: 12px solid #222d32;
  background:
    linear-gradient(90deg, transparent 0 78%, #6d7a7e 79% 82%, transparent 83%),
    repeating-linear-gradient(0deg, #334147 0 39px, #29363b 40px 42px);
  box-shadow: inset 0 0 0 2px #66767a, 8px 9px 0 #11181b;
}

.door-slab::after {
  position: absolute;
  top: 49%;
  right: 13%;
  width: 22px;
  height: 10px;
  border-radius: 6px;
  background: var(--brass);
  box-shadow: 0 0 0 4px #1b2529;
  content: "";
}

.door-view.is-open .door-slab {
  transform: perspective(600px) rotateY(-22deg);
  transform-origin: left;
  box-shadow: inset -28px 0 35px rgb(121 190 197 / 16%), 18px 9px 0 #0e1518;
}

.prop-illustration {
  position: relative;
  width: min(330px, 78%);
  height: 190px;
  border: 1px solid #59676b;
  background:
    linear-gradient(145deg, transparent 46%, rgb(121 190 197 / 17%) 47% 50%, transparent 51%),
    #17242a;
  box-shadow: inset 0 0 0 7px #0d1519, 0 5px 0 #968b70;
}

.prop-illustration::before {
  position: absolute;
  top: 28%;
  left: 30%;
  width: 42%;
  height: 46%;
  transform: rotate(-8deg);
  background:
    radial-gradient(circle at 18% 24%, #d1a84e 0 3px, transparent 3.5px),
    linear-gradient(135deg, #d5c8a8 0 48%, #25353b 49%);
  clip-path: polygon(3% 3%, 91% 0, 100% 36%, 82% 58%, 95% 100%, 39% 89%, 0 100%, 9% 45%);
  content: "";
}

.take-found-piece,
.found-piece-tab {
  justify-self: center;
}

.found-piece-tab {
  width: min(560px, 100%);
  margin: 12px auto 0;
}

/* ---------- 1. Seasonal reservation overlay ---------- */

.reservation-puzzle {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(235px, 0.42fr);
  align-items: stretch;
  gap: 12px;
}

.reservation-viewer {
  position: relative;
  display: grid;
  min-height: 420px;
  place-items: center;
  overflow: hidden;
  border: 10px solid #131d22;
  outline: 1px solid #5a707a;
  background:
    linear-gradient(45deg, transparent 47%, rgb(81 130 134 / 16%) 48% 50%, transparent 51%),
    linear-gradient(-45deg, transparent 47%, rgb(81 130 134 / 16%) 48% 50%, transparent 51%),
    #aebeb2;
  box-shadow: inset 0 0 60px rgb(10 37 40 / 29%), 0 7px 0 #8c8168;
}

.reservation-puzzle.light-on .reservation-viewer {
  background-color: #e7f0d9;
  box-shadow: inset 0 0 58px rgb(121 190 197 / 34%), 0 0 22px rgb(121 190 197 / 25%), 0 7px 0 #8c8168;
}

.viewer-corner {
  position: absolute;
  z-index: 8;
  top: 14px;
  left: 14px;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 2px solid #88691f;
  border-radius: 50%;
  background: var(--brass-hi);
  color: #302616;
  box-shadow: 0 3px 0 #5c451d;
  font-size: 1.2rem;
}

.moon-corner {
  line-height: 1;
}

.reservation-viewer .calendar-sheet {
  position: absolute;
  z-index: calc(2 + var(--sheet-index));
  inset: 11%;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 2px solid rgb(36 89 94 / 64%);
  border-radius: 1px;
  transform: rotate(var(--sheet-rotation));
  transform-origin: center;
  background:
    linear-gradient(90deg, transparent 0 31%, rgb(42 95 101 / 18%) 32% 33%, transparent 34% 65%, rgb(42 95 101 / 18%) 66% 67%, transparent 68%),
    linear-gradient(0deg, transparent 0 31%, rgb(42 95 101 / 18%) 32% 33%, transparent 34% 65%, rgb(42 95 101 / 18%) 66% 67%, transparent 68%),
    rgb(86 153 159 / 9%);
  box-shadow: 0 2px 6px rgb(15 50 54 / 18%);
  transition: transform 230ms ease;
}

.reservation-viewer .calendar-sheet::before {
  display: none;
}

.sheet-spring { filter: hue-rotate(40deg); }
.sheet-summer { filter: hue-rotate(-10deg); }
.sheet-autumn { filter: hue-rotate(-58deg); }
.sheet-winter { filter: hue-rotate(148deg); }

.sheet-moon {
  position: absolute;
  top: 4%;
  left: 4%;
  color: #704f14;
  font-size: clamp(1rem, 2vw, 1.45rem);
  line-height: 1;
}

.reservation-viewer .calendar-sheet > i,
.reservation-viewer .calendar-sheet > b,
.reservation-viewer .calendar-sheet > em {
  position: absolute;
  display: block;
  height: 4px;
  border-radius: 2px;
  transform-origin: left center;
  background: rgb(40 86 91 / 64%);
  box-shadow: 0 18px 0 rgb(40 86 91 / 31%), 0 36px 0 rgb(40 86 91 / 22%);
}

.reservation-viewer .calendar-sheet > i {
  top: 24%;
  left: 17%;
  width: 63%;
  transform: rotate(17deg);
}

.reservation-viewer .calendar-sheet > b {
  top: 50%;
  left: 24%;
  width: 58%;
  transform: rotate(-25deg);
}

.reservation-viewer .calendar-sheet > em {
  top: 74%;
  left: 14%;
  width: 67%;
  transform: rotate(8deg);
}

.reservation-code {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
  background: rgb(228 244 222 / 17%);
  color: #263f42;
  text-shadow: 0 1px #f8ffe7, 0 0 18px rgb(68 137 140 / 36%);
  font: 900 clamp(2.6rem, 7vw, 5.4rem)/1 var(--mono);
  pointer-events: none;
}

.reservation-code span {
  display: grid;
  width: 0.74em;
  place-items: center;
  border-bottom: 5px solid rgb(38 74 77 / 52%);
}

.reservation-noise {
  position: absolute;
  z-index: 9;
  inset: 20%;
  pointer-events: none;
}

.reservation-noise i {
  position: absolute;
  width: 45%;
  height: 2px;
  transform: rotate(calc((var(--i, 1)) * 29deg));
  background: rgb(41 87 92 / 24%);
}

.reservation-noise i:nth-child(1) { top: 20%; left: 8%; --i: 1; }
.reservation-noise i:nth-child(2) { top: 62%; left: 41%; --i: 2; }
.reservation-noise i:nth-child(3) { top: 39%; left: 18%; --i: 3; }
.reservation-noise i:nth-child(4) { top: 78%; left: 9%; --i: 4; }

.reservation-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #526871;
  background: #121f26;
}

.sheet-control {
  display: grid;
  min-width: 0;
  min-height: 82px;
  align-content: center;
  justify-items: start;
  gap: 5px;
  padding: 0.7rem;
  border: 1px solid #526771;
  background: #1b2b33;
  color: var(--paper);
  box-shadow: inset 0 0 0 3px #111b20, 0 3px 0 #080c0f;
  text-align: left;
}

.sheet-control:hover {
  border-color: var(--brass);
  background: #243840;
}

.sheet-control span {
  color: var(--paper-lo);
  font-size: 0.65rem;
  line-height: 1.35;
}

.sheet-control strong {
  color: var(--brass-hi);
  font: 900 0.73rem/1 var(--mono);
}

.reservation-controls .device-action {
  grid-column: 1 / -1;
}

/* ---------- 2. Tracing the telephone keypad ---------- */

.phone-machine {
  display: grid;
  width: min(620px, 100%);
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 15px;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid #526871;
  border-radius: 14px;
  background: linear-gradient(145deg, #3b474b, #151e22 66%);
  box-shadow: inset 0 0 0 7px #0c1215, 0 7px 0 #8e846b;
  color: var(--paper-lo);
  text-align: center;
}

.empty-phone {
  border-style: double;
}

.phone-handset {
  position: relative;
  width: min(360px, 80%);
  height: 78px;
  border: 17px solid #111719;
  border-right-width: 28px;
  border-left-width: 28px;
  border-radius: 44px 44px 18px 18px;
  transform: rotate(-3deg);
  background: #364247;
  box-shadow: 0 6px 0 #080c0e, inset 0 0 0 2px #667276;
}

.phone-handset > i {
  position: absolute;
  right: 16%;
  bottom: -48px;
  width: 74px;
  height: 48px;
  border-right: 4px solid var(--brass);
  border-bottom: 4px solid var(--brass);
  border-radius: 0 0 40px;
}

.phone-grid {
  width: min(240px, 70%);
  aspect-ratio: 1;
  border: 8px solid #0e1518;
  border-radius: 8px;
  background:
    radial-gradient(circle, #69777b 0 10%, #172126 11% 36%, transparent 37%) 0 0 / 33.333% 33.333%,
    #263238;
}

.ghost-grid {
  opacity: 0.72;
  filter: grayscale(0.6);
}

.phone-puzzle {
  display: grid;
  gap: 11px;
}

.contact-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.contact-tabs button {
  display: grid;
  min-width: 0;
  min-height: 57px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.6rem;
  border: 1px solid #526771;
  background: #16252d;
  color: var(--paper-lo);
  box-shadow: inset 0 0 0 2px #0f1a20;
}

.contact-tabs button > span {
  color: var(--moon-hi);
  font: 850 0.62rem/1 var(--mono);
}

.contact-tabs button > strong {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-tabs button:hover,
.contact-tabs button.is-active {
  border-color: var(--brass);
  background: #2b3527;
  color: var(--paper-hi);
}

.phone-puzzle .phone-workbench {
  display: grid;
  grid-template-columns: minmax(150px, 0.48fr) minmax(280px, 1fr) minmax(130px, 0.38fr);
  align-items: center;
  gap: 12px;
}

.mini-contact-card {
  align-self: stretch;
  display: grid;
  align-content: center;
  min-height: 240px;
  padding: 1rem;
  border: 1px solid #92876b;
  transform: rotate(-1deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgb(82 78 62 / 13%) 27px 28px),
    #eee3c6;
  color: #303129;
  box-shadow: 4px 5px 0 #aea282;
  text-align: center;
}

.mini-contact-card p {
  margin: 0 0 1rem;
  color: #5c5b50;
  font-size: 0.78rem;
  font-weight: 850;
}

.mini-contact-card strong {
  color: #343a3c;
  font: 850 0.72rem/1.85 var(--mono);
  word-break: break-word;
}

.trace-keypad {
  position: relative;
  display: grid;
  width: min(100%, 340px);
  aspect-ratio: 1;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  grid-template-rows: repeat(3, minmax(58px, 1fr));
  gap: 8px;
  justify-self: center;
  padding: 14px;
  border: 6px solid #485a62;
  border-radius: 14px;
  background: linear-gradient(145deg, #2c393e, #10171a);
  box-shadow: inset 0 0 0 3px #090e10, 0 7px 0 #070b0d;
}

.trace-keypad > svg {
  position: absolute;
  z-index: 4;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  overflow: visible;
  pointer-events: none;
}

.trace-keypad polyline {
  fill: none;
  stroke: var(--safelight-hi);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
  filter: drop-shadow(0 0 2px rgb(159 37 41 / 62%));
}

.trace-keypad > button {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 54px;
  padding: 0;
  border: 1px solid #7c898c;
  border-radius: 8px;
  background: linear-gradient(180deg, #d5d5c3, #8e9289);
  color: #131a1d;
  box-shadow: 0 4px 0 #333e42;
  font: 900 1rem/1 var(--mono);
}

.trace-keypad > button:hover {
  border-color: var(--brass-hi);
  background: linear-gradient(180deg, #efd67b, #c49d47);
}

.trace-result {
  display: grid;
  min-height: 240px;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid #405962;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(121 190 197 / 5%) 4px),
    #071418;
  color: var(--moon-hi);
  box-shadow: inset 0 0 24px rgb(0 0 0 / 48%);
  text-align: center;
}

.trace-result > span {
  color: #779096;
  font: 750 0.61rem/1.3 var(--mono);
}

.trace-result > strong {
  color: var(--brass-hi);
  font: 900 clamp(2.6rem, 7vw, 5rem)/1 var(--mono);
  text-shadow: 0 0 15px rgb(209 168 78 / 26%);
}

.drawn-digit {
  position: relative;
}

.phone-puzzle > .secondary-device-action {
  justify-self: end;
}

/* ---------- 3. Coloured filter inspection ---------- */

.portrait-inspection {
  display: grid;
  gap: 11px;
}

.portrait-frame {
  --lens-x: 50%;
  --lens-y: 50%;
  position: relative;
  width: min(820px, 100%);
  max-height: min(500px, calc(100dvh - 260px));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 11px solid #11191d;
  outline: 1px solid #5e7078;
  background: #080d10;
  box-shadow: 0 7px 0 #9a8e70, inset 0 0 54px rgb(0 0 0 / 58%);
  cursor: crosshair;
}

.portrait-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.72) sepia(0.13) contrast(1.09) brightness(0.76);
  pointer-events: none;
}

.hidden-filter-copy {
  position: absolute;
  z-index: 3;
  display: grid;
  inset: 0;
  min-width: 0;
  gap: 2px;
  padding: clamp(18px, 4vw, 44px);
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.hidden-filter-copy span {
  padding: 0.35rem 0.55rem;
  border: 1px solid currentColor;
  background: rgb(8 13 16 / 82%);
  font: 900 clamp(0.95rem, 2.4vw, 1.5rem)/1 var(--mono);
}

.hidden-filter-copy strong {
  padding: 0.35rem 0.55rem;
  border: 1px solid currentColor;
  border-top: 0;
  background: rgb(8 13 16 / 82%);
  font-size: clamp(0.62rem, 1.3vw, 0.78rem);
}

.red-copy {
  align-content: end;
  justify-items: end;
  color: #ffcd87;
}

.blue-copy {
  align-content: start;
  justify-items: start;
  color: #a8e4ff;
}

.portrait-inspection.using-red .red-copy,
.portrait-inspection.using-blue .blue-copy {
  opacity: 1;
  clip-path: circle(clamp(72px, 12vw, 128px) at var(--lens-x) var(--lens-y));
}

.portrait-frame .filter-lens {
  top: var(--lens-y);
  left: var(--lens-x);
  display: none;
  width: clamp(145px, 22vw, 240px);
  border-width: 9px;
  mix-blend-mode: color;
}

.portrait-inspection.using-red .filter-lens,
.portrait-inspection.using-blue .filter-lens {
  display: block;
}

.portrait-inspection.using-red .filter-lens {
  background: rgb(172 35 40 / 56%);
}

.portrait-inspection.using-blue .filter-lens {
  background: rgb(34 105 158 / 58%);
}

.portrait-caption {
  width: min(820px, 100%);
  margin: 0 auto;
  color: #55564d;
  font-size: 0.75rem;
  line-height: 1.55;
}

/* ---------- 4. Bellows camera and aperture ---------- */

.camera-puzzle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(210px, 0.42fr);
  align-items: center;
  gap: 12px;
}

.camera-puzzle > .device-action,
.camera-puzzle > .secondary-device-action {
  grid-column: 2;
}

.shutter-action {
  border-color: var(--safelight-dark);
  background: linear-gradient(180deg, #e1b854, #aa7e2b);
}

.bellows-camera {
  position: relative;
  grid-row: 1 / span 3;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid #53666e;
  background:
    radial-gradient(ellipse at 48% 46%, rgb(121 190 197 / 8%), transparent 34%),
    linear-gradient(145deg, #1f2d33, #0a1013);
  box-shadow: inset 0 0 0 7px #0b1216, 0 7px 0 #91866b;
}

.bellows-camera::before {
  position: absolute;
  right: 7%;
  bottom: 13%;
  left: 7%;
  height: 13px;
  border: 3px solid #1b2224;
  background: linear-gradient(180deg, #9e8551, #58462a);
  box-shadow: 0 7px 0 #111719;
  content: "";
}

.camera-puzzle .camera-lens {
  position: absolute;
  z-index: 5;
  top: 25%;
  left: 9%;
  display: grid;
  width: 30%;
  max-width: 175px;
  aspect-ratio: 1;
  place-items: center;
  border: 15px solid #2f3b40;
  border-radius: 50%;
  background: radial-gradient(circle, #05080a 0 38%, #48565b 39% 45%, #11181b 46%);
  box-shadow: 0 0 0 3px #778387, 0 14px 24px rgb(0 0 0 / 45%);
}

.camera-puzzle .camera-lens > i {
  width: 52%;
  aspect-ratio: 1;
  border: 2px solid var(--brass-dark);
  border-radius: 50%;
  transform: scale(calc(1 - (var(--aperture-index) * 0.08)));
  background:
    conic-gradient(from 17deg, #111719 0 14%, #526066 14.5% 28%, #111719 28.5% 42%, #526066 42.5% 56%, #111719 56.5% 70%, #526066 70.5% 84%, #111719 84.5%);
  box-shadow: inset 0 0 0 7px #05080a;
}

.camera-bellows {
  position: absolute;
  z-index: 3;
  top: 32%;
  left: 31%;
  width: 38%;
  height: 32%;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  background: repeating-linear-gradient(90deg, #6b2a2d 0 8%, #2a1518 9% 16%);
  filter: drop-shadow(0 7px 6px rgb(0 0 0 / 42%));
}

.bellows-camera .camera-body {
  position: absolute;
  z-index: 2;
  top: 22%;
  right: 8%;
  display: block;
  width: 34%;
  min-height: 0;
  aspect-ratio: 0.92;
  border: 12px solid #1c2528;
  border-radius: 1px;
  background:
    linear-gradient(90deg, transparent 44%, #76572c 45% 55%, transparent 56%),
    linear-gradient(0deg, transparent 44%, #76572c 45% 55%, transparent 56%),
    #7f6745;
  box-shadow: inset 0 0 0 2px #b69a63, 0 10px 16px rgb(0 0 0 / 40%);
}

.bellows-camera .camera-body::before,
.bellows-camera .camera-body::after {
  display: none;
}

.release-socket {
  position: absolute;
  z-index: 6;
  right: 5%;
  bottom: 17%;
  width: 31px;
  height: 31px;
  border: 7px solid #526066;
  border-radius: 50%;
  background: #080c0e;
  box-shadow: 0 0 0 2px #11191d;
}

.release-socket.is-filled::after {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 60px;
  height: 44px;
  border-right: 4px solid var(--brass);
  border-bottom: 4px solid var(--brass);
  border-radius: 0 0 40px;
  content: "";
}

.aperture-dial {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  border: 1px solid #53666e;
  background: #111d23;
}

.aperture-dial button {
  min-width: 0;
  min-height: 52px;
  padding: 0.35rem;
  border: 1px solid #586c75;
  border-radius: 50%;
  background: radial-gradient(circle, #25333a 0 55%, #11191e 56%);
  color: var(--paper-lo);
  box-shadow: 0 3px 0 #070b0d;
  font: 850 0.72rem/1 var(--mono);
}

.aperture-dial button:hover,
.aperture-dial button[aria-checked="true"] {
  border-color: var(--brass-hi);
  background: radial-gradient(circle, #604d25 0 55%, #17140d 56%);
  color: var(--brass-hi);
}

.camera-puzzle.flash-fired::after {
  position: absolute;
  z-index: 40;
  inset: 0;
  background: #fffce9;
  content: "";
  pointer-events: none;
  animation: puzzle-flash 420ms ease-out both;
}

@keyframes puzzle-flash {
  0% { opacity: 0; }
  10% { opacity: 0.96; }
  100% { opacity: 0; }
}

/* ---------- 5. Torn contact-sheet reconstruction ---------- */

.contact-sheet-puzzle {
  display: grid;
  gap: 12px;
}

.contact-lightbox {
  position: relative;
  display: grid;
  min-height: 420px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 14px;
  overflow: hidden;
  border: 10px solid #111a1e;
  outline: 1px solid #61737b;
  background: #d8d5bd;
  box-shadow: inset 0 0 42px rgb(62 75 71 / 30%), 0 7px 0 #91866c;
}

.contact-lightbox .fragment-slot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid #525e5e;
  background:
    radial-gradient(circle at 6px 6px, #c8aa59 0 2px, transparent 2.5px) 0 0 / 16px 16px,
    #1a282c;
  color: var(--paper-lo);
  box-shadow: inset 0 0 0 4px #0c1316;
}

.contact-lightbox .fragment-slot.is-empty {
  border-style: dashed;
  border-color: #8c8875;
  background:
    repeating-linear-gradient(135deg, rgb(66 91 91 / 8%) 0 8px, transparent 8px 16px),
    #bcbba8;
  color: #747365;
  box-shadow: inset 0 0 18px rgb(59 64 56 / 18%);
}

.contact-lightbox .fragment-slot:hover {
  border-color: var(--brass);
  filter: brightness(1.08);
}

.fragment-art {
  position: absolute;
  inset: 6%;
  background:
    radial-gradient(circle at 28% 33%, #aeb1a3 0 8%, transparent 8.5%),
    linear-gradient(130deg, transparent 0 39%, rgb(121 190 197 / 36%) 40% 42%, transparent 43%),
    #25383c;
  clip-path: polygon(1% 3%, 84% 0, 100% 20%, 91% 69%, 100% 96%, 48% 88%, 0 100%, 8% 42%);
}

.fragment-art[data-fragment="fragment_a"] { transform: rotate(2deg); filter: hue-rotate(15deg); }
.fragment-art[data-fragment="fragment_b"] { transform: rotate(-2deg); filter: hue-rotate(42deg); }
.fragment-art[data-fragment="fragment_c"] { transform: rotate(1deg); filter: hue-rotate(70deg); }
.fragment-art[data-fragment="fragment_d"] { transform: rotate(-1deg); filter: hue-rotate(110deg); }
.fragment-art[data-fragment="fragment_e"] { transform: rotate(3deg); filter: hue-rotate(155deg); }
.fragment-art[data-fragment="fragment_f"] { transform: rotate(-3deg); filter: hue-rotate(205deg); }

.fragment-slot > small {
  position: absolute;
  z-index: 2;
  right: 6px;
  bottom: 5px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--brass-dark);
  background: var(--brass);
  color: #17140d;
  font: 900 0.6rem/1 var(--mono);
}

.restored-contact-grid {
  position: absolute;
  z-index: 8;
  inset: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 7px;
  border: 6px solid #0c1316;
  background: #d8d1b8;
  box-shadow: inset 0 0 26px rgb(68 61 44 / 25%);
}

.contact-lightbox.is-restored > .fragment-slot {
  opacity: 0;
  pointer-events: none;
}

.restored-contact-grid > span,
.restored-contact-grid > i {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: end start;
  padding: 5px;
  border: 2px solid #152025;
  background:
    radial-gradient(circle at 55% 38%, #9da39c 0 11%, transparent 11.5%),
    linear-gradient(145deg, #1c2b30, #5e6963);
  color: #f0d578;
  font: 900 0.62rem/1 var(--mono);
  box-shadow: inset 0 0 0 2px #0b1114;
}

.restored-contact-grid > i {
  background:
    linear-gradient(135deg, transparent 47%, rgb(91 86 70 / 26%) 48% 51%, transparent 52%),
    #b7b09a;
}

.restored-contact-grid > i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #726d5c;
  content: "—";
  transform: translate(-50%, -50%);
  font: 900 1rem/1 var(--mono);
}

/* ---------- 6. Chemical process plates ---------- */

.process-puzzle {
  display: grid;
  gap: 12px;
}

.process-machine {
  display: grid;
  min-height: 410px;
  grid-template-rows: minmax(250px, 1fr) 90px;
  gap: 12px;
  padding: 14px;
  border: 1px solid #526771;
  background:
    linear-gradient(145deg, rgb(121 190 197 / 4%), transparent 36%),
    #142128;
  box-shadow: inset 0 0 0 6px #0b1216, 0 7px 0 #91866c;
}

.process-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
}

.process-slot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 180px;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 5px;
  padding: 8px;
  border: 2px solid #5e727b;
  background:
    linear-gradient(130deg, transparent 38%, rgb(255 255 255 / 8%) 39% 42%, transparent 43%),
    #1d3439;
  color: var(--paper);
  box-shadow: inset 0 0 0 4px #0c151a, 0 4px 0 #080d10;
}

.process-slot.is-empty {
  border-style: dashed;
  background:
    repeating-linear-gradient(135deg, rgb(121 190 197 / 5%) 0 9px, transparent 9px 18px),
    #111c22;
  color: #6c818a;
}

.process-slot:hover {
  border-color: var(--brass);
}

.process-slot > strong {
  display: block;
  overflow: hidden;
  color: var(--paper-lo);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plate-art {
  position: relative;
  width: 68%;
  max-width: 115px;
  aspect-ratio: 0.72;
  border: 3px solid #58737a;
  background:
    linear-gradient(130deg, transparent 35%, rgb(255 255 255 / 17%) 36% 40%, transparent 41%),
    rgb(53 110 114 / 39%);
  box-shadow: inset 0 0 0 3px rgb(5 10 12 / 48%);
}

.plate-art::before {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--brass-hi);
  border-radius: 50%;
  content: "";
}

.plate-art[data-plate="plate_developer"] { filter: hue-rotate(0deg); }
.plate-art[data-plate="plate_stop"] { filter: hue-rotate(48deg); }
.plate-art[data-plate="plate_fixer"] { filter: hue-rotate(105deg); }
.plate-art[data-plate="plate_wash"] { filter: hue-rotate(175deg); }

.process-output {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #29474f;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(121 190 197 / 5%) 4px),
    #061216;
  box-shadow: inset 0 0 20px rgb(0 0 0 / 48%);
}

.process-output > i,
.process-output > span {
  display: grid;
  min-width: 0;
  place-items: center;
  border: 1px solid #25434a;
  background: #0c1b20;
  color: var(--brass-hi);
  font: 900 clamp(1.25rem, 3.5vw, 2rem)/1 var(--mono);
}

.process-output > i {
  background:
    linear-gradient(145deg, transparent 43%, rgb(121 190 197 / 15%) 44% 48%, transparent 49%),
    #0c1b20;
}

.process-output.is-clear {
  box-shadow: inset 0 0 24px rgb(121 190 197 / 24%), 0 0 15px rgb(121 190 197 / 13%);
}

/* ---------- 7. Enlarger, focus and mirror ---------- */

.enlarger-puzzle {
  display: grid;
  grid-template-columns: 180px minmax(360px, 1fr);
  grid-template-rows: minmax(370px, 1fr) auto;
  gap: 10px;
}

.enlarger-machine {
  position: relative;
  grid-row: 1 / 3;
  min-height: 450px;
  border: 1px solid #51646c;
  background:
    linear-gradient(90deg, transparent 46%, #657175 47% 53%, transparent 54%),
    #131f25;
  box-shadow: inset 0 0 0 6px #0b1215, 0 7px 0 #91866c;
}

.enlarger-head {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 72%;
  height: 29%;
  border: 7px solid #131a1d;
  border-radius: 5px 5px 16px 16px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 75%, #0a0e10 0 10%, #647276 11% 16%, transparent 17%),
    linear-gradient(145deg, #5d686b, #232d30);
  box-shadow: 0 8px 0 #090d0f;
}

.enlarger-head::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 46px;
  height: 120px;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgb(238 226 197 / 21%), transparent);
  content: "";
}

.negative-carrier {
  position: absolute;
  right: 10%;
  bottom: 12%;
  left: 10%;
  display: grid;
  min-height: 72px;
  place-items: center;
  padding: 0.55rem;
  overflow: hidden;
  border: 6px solid #111719;
  background:
    radial-gradient(circle at 5px 5px, #c3a85f 0 2px, transparent 2.5px) 0 0 / 13px 13px,
    #1d3136;
  color: var(--paper-lo);
  font: 800 0.59rem/1.4 var(--mono);
  text-align: center;
}

.projection {
  --mirror-x: 50%;
  --mirror-y: 50%;
  position: relative;
  min-height: 370px;
  overflow: hidden;
  border: 9px solid #121a1e;
  outline: 1px solid #65767d;
  background:
    radial-gradient(ellipse at 50% 46%, #d8ddca, #92998c 59%, #333d3c 100%);
  box-shadow: inset 0 0 64px rgb(0 0 0 / 38%), 0 6px 0 #8e846a;
  cursor: crosshair;
}

.empty-projection {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: #4f5753;
  cursor: default;
}

.empty-projection > span {
  width: 96px;
  height: 70px;
  border: 7px solid #303a3c;
  background: #11191d;
  box-shadow: inset 0 0 0 2px #697477;
}

.projection-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: blur(7px) contrast(1.07) grayscale(0.8);
  background:
    linear-gradient(90deg, transparent 0 10%, rgb(23 34 37 / 46%) 10.5% 17%, transparent 17.5% 78%, rgb(31 42 43 / 38%) 78.5% 86%, transparent 86.5%),
    linear-gradient(0deg, rgb(22 33 34 / 45%) 0 20%, transparent 20.5%),
    radial-gradient(ellipse at 52% 42%, #b5b7a9, #69716c 57%, #252f2f);
  transition: filter 120ms ease;
}

.projection.is-focused .projection-scene {
  filter: blur(0) contrast(1.12) grayscale(0.82);
}

.projected-clock {
  position: absolute;
  top: 8%;
  right: 7%;
  padding: 0.35rem 0.5rem;
  border: 1px solid #384a4d;
  background: rgb(229 227 203 / 62%);
  color: #222b2b;
  font: 900 clamp(0.8rem, 2vw, 1.08rem)/1 var(--mono);
}

.projected-visitor {
  position: absolute;
  right: 18%;
  bottom: 4%;
  width: 31%;
  height: 82%;
  border-radius: 49% 49% 12% 12% / 20% 20% 7% 7%;
  background:
    radial-gradient(circle at 50% 16%, #454c49 0 13%, transparent 13.5%),
    linear-gradient(90deg, transparent 0 12%, #3d4745 13% 87%, transparent 88%);
  opacity: 0.92;
}

.left-hand {
  position: absolute;
  top: 43%;
  left: -31%;
  width: 48%;
  height: 11%;
  border-radius: 40% 8px 8px 40%;
  transform: rotate(18deg);
  background: #5b615b;
}

.left-hand::after {
  position: absolute;
  right: -32%;
  bottom: -160%;
  width: 58%;
  height: 240%;
  border: 5px solid #2d3636;
  border-radius: 5px 5px 13px 13px;
  background: #777b70;
  content: "";
}

.square-ring {
  position: absolute;
  top: 46%;
  left: -5%;
  width: 17px;
  height: 17px;
  border: 4px solid #584c2e;
  background: var(--brass-hi);
  box-shadow: 0 0 0 2px #222a29;
}

.reversed-message {
  position: absolute;
  right: 12%;
  bottom: 9%;
  left: 8%;
  margin: 0;
  color: #202828;
  font: 900 clamp(0.68rem, 1.5vw, 0.88rem)/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-align: center;
}

.frame-caption {
  position: absolute;
  right: 10%;
  bottom: 10%;
  left: 10%;
  margin: 0;
  padding: 0.55rem;
  border-top: 1px solid #374342;
  background: rgb(226 225 205 / 48%);
  color: #303735;
  font: 750 0.7rem/1.4 var(--mono);
  text-align: center;
}

.mirror-lens {
  position: absolute;
  z-index: 8;
  top: var(--mirror-y);
  left: var(--mirror-x);
  display: none;
  width: clamp(150px, 20vw, 230px);
  aspect-ratio: 1.32;
  place-items: center;
  padding: 1rem;
  border: 9px solid #826b39;
  border-radius: 48% 48% 44% 44%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #dce4d9, #739094 47%, #cbd8d0);
  color: #162023;
  box-shadow: 0 0 0 2px #172126, 0 14px 26px rgb(0 0 0 / 43%), inset 0 0 25px rgb(47 88 92 / 35%);
  font: 900 clamp(0.58rem, 1.2vw, 0.72rem)/1.45 var(--mono);
  text-align: center;
  pointer-events: none;
}

.modal:has(.modal-inventory .inventory-item[data-item="hand_mirror"].is-equipped) .mirror-lens {
  display: grid;
}

.enlarger-controls {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #9b8f71;
  background: #ddd1b0;
}

.enlarger-controls label {
  display: grid;
  min-width: 220px;
  flex: 1 1 260px;
  grid-template-columns: auto minmax(120px, 1fr) 35px;
  align-items: center;
  gap: 8px;
  color: #41433c;
  font: 800 0.7rem/1 var(--mono);
}

.enlarger-controls output {
  color: var(--safelight-dark);
  font-weight: 900;
  text-align: center;
}

/* ---------- False wall ---------- */

.false-wall {
  display: grid;
  min-height: 380px;
  place-items: center;
  align-content: center;
  gap: 14px;
}

.wall-seams {
  display: grid;
  width: min(720px, 100%);
  min-height: 300px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 9px solid #182125;
  background:
    radial-gradient(circle at 38% 29%, rgb(0 0 0 / 25%) 0 8%, transparent 9%),
    repeating-linear-gradient(0deg, #384246 0 46px, #303a3e 47px 49px);
  box-shadow: 0 0 0 1px #68777a, inset 0 0 45px rgb(0 0 0 / 34%), 0 7px 0 #90856b;
}

.wall-seams button {
  min-width: 0;
  min-height: 100%;
  border: 0;
  border-right: 3px solid #182125;
  background: transparent;
}

.wall-seams button:last-child { border-right: 0; }

.wall-seams button:hover,
.wall-seams button:focus-visible {
  background: rgb(121 190 197 / 5%);
  box-shadow: inset 0 0 22px rgb(121 190 197 / 8%);
}

.wall-seams[data-pressed="center"] button:nth-child(2) {
  transform: perspective(700px) translateZ(-45px) scale(0.94);
  filter: brightness(0.74);
}

.opened-wall .open-seam {
  width: min(430px, 75%);
  height: 310px;
  border: 15px solid #20292d;
  background: linear-gradient(90deg, #05080a, #18272e 48%, #05080a);
  box-shadow: inset 0 0 54px #000, 0 7px 0 #8e846a;
}

/* ---------- 8. Film-box net and folded paper cube ---------- */

.film-box-puzzle {
  display: grid;
  gap: 12px;
}

.film-box-puzzle .box-net {
  display: grid;
  width: min(760px, 100%);
  min-height: 450px;
  aspect-ratio: 4 / 3;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0 auto;
  padding: 13px;
  border: 1px solid #9a8d6b;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgb(75 67 48 / 9%) 26px 27px),
    #ded1ad;
  box-shadow: 5px 6px 0 #aa9e7e;
}

.box-net .box-face {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  border: 2px dashed #7a6128;
  transform: none;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 18%), transparent 34%),
    #c8a858;
  color: #26231b;
  box-shadow: inset 0 0 0 3px rgb(82 62 20 / 14%);
  transition: filter 120ms ease, transform 220ms ease, opacity 120ms ease;
}

.box-net .face-moon { grid-area: 2 / 2; }
.box-net .face-camera { grid-area: 2 / 3; }
.box-net .face-fire { grid-area: 1 / 2; }
.box-net .face-door { grid-area: 2 / 1; }
.box-net .face-film { grid-area: 3 / 2; }
.box-net .face-clock { grid-area: 2 / 4; }

.box-net .box-face:hover {
  border-color: var(--safelight);
  filter: brightness(1.1);
}

.box-net .box-face.is-folded {
  transform: perspective(450px) rotateX(58deg) scale(0.88);
  opacity: 0.42;
  filter: saturate(0.6);
}

.box-face > span {
  font: 900 clamp(1.8rem, 5vw, 3.4rem)/1 var(--mono);
}

.box-face > i {
  position: absolute;
  right: 8px;
  bottom: 7px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #745b25;
  border-radius: 50%;
  background: var(--paper-hi);
  color: #2c281e;
  font: 900 0.7rem/1 var(--mono);
}

.film-box-puzzle.folded-state {
  min-height: 540px;
  grid-template-rows: minmax(350px, auto) auto auto;
  place-items: center;
  align-content: start;
  overflow: visible;
  perspective: 850px;
}

.paper-cube {
  position: relative;
  grid-row: 1;
  width: clamp(180px, 23vw, 240px);
  aspect-ratio: 1;
  transform: rotateX(-18deg) rotateY(calc(32deg + var(--box-turn)));
  transform-style: preserve-3d;
  transition: transform 280ms ease;
}

.paper-cube .cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 3px solid #785d22;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 22%), transparent 30%),
    #c8a858;
  color: #29251b;
  box-shadow: inset 0 0 0 5px rgb(79 59 18 / 14%);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.cube-front { transform: translateZ(clamp(88px, 11vw, 120px)); }
.cube-side { transform: rotateY(90deg) translateZ(clamp(88px, 11vw, 120px)); }
.cube-top { transform: rotateX(90deg) translateZ(clamp(88px, 11vw, 120px)); }

.cube-face > b {
  font: 900 clamp(3.2rem, 8vw, 6rem)/1 var(--mono);
}

.cube-face .corner {
  position: absolute;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 2px solid #6f541a;
  border-radius: 50%;
  background: var(--paper-hi);
  color: #272319;
  font: 900 0.72rem/1 var(--mono);
}

.cube-face .c1 { top: 8px; left: 8px; }
.cube-face .c2 { top: 8px; right: 8px; }
.cube-face .c3 { right: 8px; bottom: 8px; }
.cube-face .c4 { bottom: 8px; left: 8px; }

.rotation-controls {
  z-index: 5;
  grid-row: 2;
  display: grid;
  width: min(300px, 100%);
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 8px;
}

.film-box-puzzle.folded-state > .secondary-device-action {
  z-index: 5;
  grid-row: 3;
}

.rotation-controls button {
  min-width: 56px;
  min-height: 50px;
  border: 1px solid #84651f;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  color: #17140d;
  box-shadow: 0 3px 0 #5d461a;
  font-size: 1.4rem;
  font-weight: 900;
}

.rotation-controls output {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1px solid #425c65;
  background: #09161b;
  color: var(--moon-hi);
  font: 900 0.86rem/1 var(--mono);
}

.small-etched-note {
  width: min(580px, 100%);
  margin: 13px auto 0;
  padding: 0.85rem 1rem;
  border: 1px solid #81785f;
  background: linear-gradient(145deg, #cfc4a7, #a99e82);
  color: #34352f;
  box-shadow: inset 0 0 0 3px rgb(77 72 57 / 16%);
}

.small-etched-note strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #292d2d;
  font: 900 0.72rem/1.3 var(--mono);
}

.small-etched-note p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.55;
}

/* ---------- 9. Three-film composite registration ---------- */

.film-composite-puzzle {
  display: grid;
  gap: 10px;
}

.registration-table {
  position: relative;
  width: min(920px, 100%);
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
  border: 11px solid #111a1e;
  outline: 1px solid #60757e;
  background:
    linear-gradient(45deg, transparent 48%, rgb(68 112 116 / 14%) 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgb(68 112 116 / 14%) 49% 51%, transparent 52%),
    #9eb0a5;
  box-shadow: inset 0 0 68px rgb(25 55 57 / 33%), 0 7px 0 #91866c;
}

.film-composite-puzzle.light-on .registration-table {
  background-color: #e1ebd7;
  box-shadow: inset 0 0 65px rgb(121 190 197 / 33%), 0 0 25px rgb(121 190 197 / 22%), 0 7px 0 #91866c;
}

.fixture-pins,
.empty-pin-rail {
  position: absolute;
  z-index: 20;
  inset: 5%;
  pointer-events: none;
}

.fixture-pins > i,
.empty-pin-rail > i {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 3px solid #72571d;
  border-radius: 50%;
  background: var(--brass-hi);
  box-shadow: 0 0 0 2px #172126, 0 2px 0 #4f3b15;
}

.fixture-pins > i:nth-child(1),
.empty-pin-rail > i:nth-child(1) { top: 1%; left: 1%; }
.fixture-pins > i:nth-child(2),
.empty-pin-rail > i:nth-child(2) { top: 2%; right: 3%; border-radius: 3px; }
.fixture-pins > i:nth-child(3),
.empty-pin-rail > i:nth-child(3) { right: 1%; bottom: 3%; width: 22px; height: 13px; border-radius: 6px; }

.empty-pin-rail > i {
  border-style: dashed;
  border-color: #6d7775;
  background: transparent;
  box-shadow: none;
}

.registration-table > .empty-film-slot {
  position: absolute;
  z-index: 24;
  bottom: 13px;
  display: grid;
  width: calc((100% - 56px) / 3);
  min-width: 0;
  min-height: 54px;
  place-items: center;
  border: 1px dashed #536c73;
  background: rgb(11 24 28 / 72%);
  color: var(--moon-hi);
  box-shadow: inset 0 0 15px rgb(0 0 0 / 36%);
  font: 900 0.72rem/1 var(--mono);
}

.empty-film-slot[data-slot="a"] { left: 12px; }
.empty-film-slot[data-slot="b"] { left: calc(33.333% + 3px); }
.empty-film-slot[data-slot="c"] { right: 12px; }

.registration-table > .empty-film-slot:hover {
  border-color: var(--brass-hi);
  background: rgb(32 48 49 / 86%);
}

.registration-table .film-layer {
  position: absolute;
  z-index: 8;
  inset: 0;
  transform: none;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.registration-table .film-layer::before {
  position: absolute;
  inset: 7%;
  border: 3px solid currentColor;
  transform: rotate(var(--film-rotation));
  transform-origin: center;
  background:
    radial-gradient(circle at 24% 32%, currentColor 0 3px, transparent 3.5px),
    radial-gradient(circle at 66% 58%, currentColor 0 3px, transparent 3.5px),
    linear-gradient(140deg, transparent 0 43%, currentColor 44% 46%, transparent 47%),
    rgb(55 109 113 / 11%);
  box-shadow: inset 0 0 0 2px rgb(7 13 15 / 35%);
  content: "";
  opacity: 0.44;
  transition: transform 190ms ease;
}

.registration-table .layer-a { color: #a8494d; }
.registration-table .layer-b { color: #3a7ea3; }
.registration-table .layer-c { color: #8d773a; }

.film-sheet {
  position: absolute;
  z-index: 28;
  bottom: 12px;
  display: grid;
  width: 74px;
  min-width: 74px;
  height: 54px;
  min-height: 54px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(135deg, transparent 44%, currentColor 45% 48%, transparent 49%),
    rgb(13 30 34 / 88%);
  color: inherit;
  box-shadow: 0 3px 0 #11191d;
  pointer-events: auto;
}

.layer-a .film-sheet { left: 13px; }
.layer-b .film-sheet { left: calc(50% - 37px); }
.layer-c .film-sheet { right: 13px; }

.film-sheet:hover {
  filter: brightness(1.28);
}

.film-sheet::after {
  color: var(--paper-hi);
  content: "90°";
  font: 900 0.58rem/1 var(--mono);
}

.registration-hole {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #0c1519;
}

.registration-hole.h1 { top: 5px; left: 5px; }
.registration-hole.h2 { right: 7px; bottom: 6px; border-radius: 2px; }

.film-sheet > i,
.film-sheet > b { display: none; }

.film-eject {
  position: absolute;
  z-index: 30;
  bottom: 68px;
  min-width: 51px;
  width: 51px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #465a63;
  background: rgb(13 25 30 / 91%);
  color: var(--paper-lo);
  font: 800 0.55rem/1 var(--mono);
  pointer-events: auto;
}

.layer-a .film-eject { left: 24px; }
.layer-b .film-eject { left: calc(50% - 25px); }
.layer-c .film-eject { right: 24px; }

.composite-grain {
  position: absolute;
  z-index: 16;
  inset: 10%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.54;
  mix-blend-mode: multiply;
}

.composite-grain > i {
  position: absolute;
  width: 64%;
  height: 3px;
  transform: rotate(24deg);
  background: rgb(29 74 78 / 36%);
  box-shadow: 0 58px rgb(29 74 78 / 24%), 0 116px rgb(29 74 78 / 28%);
}

.composite-grain > i:nth-child(1) { top: 12%; left: 3%; }
.composite-grain > i:nth-child(2) { top: 42%; left: 29%; transform: rotate(-31deg); }
.composite-grain > i:nth-child(3) { top: 69%; left: 8%; transform: rotate(9deg); }

.composite-result {
  position: absolute;
  z-index: 22;
  inset: 4%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #10191d;
}

.composite-result .thirteenth-evidence {
  width: 100%;
  height: 100%;
}

.composite-result .evidence-photo-wrap {
  height: 100%;
  border-width: 5px;
  box-shadow: none;
}

.composite-result .evidence-photo-wrap > img {
  height: 100%;
  aspect-ratio: auto;
}

.composite-result figcaption {
  display: none;
}

.composite-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Culprit comparison ---------- */

.culprit-workbench {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(400px, 1fr);
  align-items: start;
  gap: 12px;
}

.culprit-workbench > .physical-note {
  grid-column: 1 / -1;
}

.culprit-workbench .thirteenth-evidence {
  position: sticky;
  top: 0;
}

.photo-placeholder {
  display: grid;
  min-height: 350px;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 9px solid #11191d;
  background: #26333a;
  color: #9aa5a7;
  box-shadow: 0 6px 0 #90866b;
  text-align: center;
}

.photo-placeholder > span {
  width: 100px;
  aspect-ratio: 1.35;
  border: 5px solid #53646b;
  background: linear-gradient(145deg, transparent 47%, #53646b 48% 51%, transparent 52%);
}

.suspect-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.suspect-choice {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 260px;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 7px 9px;
  padding: 0.65rem;
  border: 1px solid #93886b;
  background: #e4d9bb;
  color: #30322b;
  box-shadow: 3px 4px 0 #a99d7d;
  text-align: left;
}

.suspect-choice:hover,
.suspect-choice.is-selected {
  border-color: var(--safelight);
  box-shadow: 3px 4px 0 #a99d7d, inset 0 0 0 3px rgb(159 37 41 / 21%);
}

.suspect-choice.is-selected::after {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 12px;
  height: 12px;
  border: 3px solid #f3e8cb;
  border-radius: 50%;
  background: var(--safelight);
  box-shadow: 0 0 0 1px var(--safelight);
  content: "";
}

.suspect-silhouette {
  position: relative;
  display: block;
  width: 72px;
  height: 98px;
  grid-row: 1 / 3;
  overflow: hidden;
  border: 5px solid #f0e6ca;
  outline: 1px solid #807966;
  background:
    radial-gradient(circle at 50% 31%, #9a9482 0 17%, transparent 18%),
    radial-gradient(ellipse at 50% 100%, #4d5857 0 52%, transparent 53%),
    linear-gradient(145deg, #26353a, #7a8178);
  box-shadow: 2px 3px 0 #a89e85;
}

.suspect-silhouette[data-suspect="park"] { filter: sepia(0.18) hue-rotate(5deg); }
.suspect-silhouette[data-suspect="seoa"] { filter: sepia(0.12) hue-rotate(42deg); }
.suspect-silhouette[data-suspect="nam"] { filter: sepia(0.25) contrast(1.12) hue-rotate(-18deg); }
.suspect-silhouette[data-suspect="choi"] { filter: grayscale(0.45) contrast(0.95); }

.suspect-choice > span:nth-child(2) {
  min-width: 0;
}

.suspect-choice > span:nth-child(2) strong,
.suspect-choice > span:nth-child(2) small {
  display: block;
}

.suspect-choice > span:nth-child(2) strong {
  color: #202629;
  font-size: 0.85rem;
}

.suspect-choice > span:nth-child(2) small {
  margin-top: 2px;
  color: #646458;
  font-size: 0.61rem;
}

.suspect-choice dl {
  grid-column: 2;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  align-self: stretch;
  align-content: start;
  margin: 0;
  border-top: 1px solid #aaa083;
}

.suspect-choice dt,
.suspect-choice dd {
  margin: 0;
  padding: 0.32rem 0.25rem;
  border-bottom: 1px solid #b7ad92;
  font-size: 0.59rem;
  line-height: 1.35;
}

.suspect-choice dt {
  color: #727061;
  font-family: var(--mono);
  font-weight: 800;
}

.suspect-choice dd {
  color: #3b3d36;
}

.suspect-document .suspect-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.suspect-document .suspect-card {
  display: grid;
  min-height: 300px;
  grid-template-columns: 1fr;
  grid-template-rows: 118px auto auto 1fr;
  justify-items: stretch;
  padding: 0.7rem;
}

.suspect-document .suspect-silhouette {
  width: 100%;
  height: 118px;
  grid-row: auto;
}

.suspect-document .suspect-card h3,
.suspect-document .suspect-card p {
  margin: 0;
}

.suspect-document .suspect-card h3 {
  margin-top: 0.35rem;
  color: #202629;
  font-size: 0.86rem;
}

.suspect-document .suspect-card > p {
  color: #6c6b5e;
  font-size: 0.63rem;
}

.suspect-document .suspect-card dl {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-self: stretch;
  margin: 0.45rem 0 0;
}

.suspect-document .suspect-card dt,
.suspect-document .suspect-card dd {
  margin: 0;
  padding: 0.32rem 0.2rem;
  border-top: 1px solid #b3a98e;
  font-size: 0.57rem;
  line-height: 1.35;
}

.suspect-document .suspect-card dt {
  color: #747163;
  font-family: var(--mono);
  font-weight: 800;
}

/* ---------- Evidence terminal and physical redaction ---------- */

.evidence-terminal {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.terminal-banner {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0.75rem;
  border: 1px solid #45606a;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgb(121 190 197 / 5%) 3px),
    #07151a;
  color: var(--moon-hi);
  font: 850 0.62rem/1 var(--mono);
  letter-spacing: 0.07em;
}

.terminal-banner strong {
  color: var(--brass-hi);
}

.terminal-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.terminal-summary > div {
  display: grid;
  min-height: 62px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0.7rem;
  border: 1px solid #405862;
  background: #13232a;
  color: var(--paper);
}

.terminal-summary span {
  color: #81969c;
  font: 750 0.61rem/1.3 var(--mono);
}

.terminal-summary strong {
  color: var(--brass-hi);
  font-size: 0.8rem;
  text-align: right;
}

.terminal-attachments {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #445c65;
  background: #101e25;
  color: var(--paper);
}

.terminal-attachments h3 {
  margin: 0;
  color: var(--moon-hi);
  font: 850 0.64rem/1.3 var(--mono);
}

.terminal-attachments > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.terminal-attachments > p {
  margin: 0;
  color: #758990;
  font-size: 0.63rem;
}

.terminal-slot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 92px;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: minmax(30px, 1fr) auto;
  place-items: center;
  gap: 2px;
  padding: 0.4rem;
  border: 1px dashed #536b74;
  background:
    repeating-linear-gradient(135deg, rgb(121 190 197 / 4%) 0 8px, transparent 8px 16px),
    #0b161b;
  color: #71868d;
  box-shadow: inset 0 0 13px rgb(0 0 0 / 37%);
}

.terminal-slot > span:first-child {
  position: absolute;
  top: 4px;
  left: 5px;
  color: #61777e;
  font: 800 0.52rem/1 var(--mono);
}

.terminal-slot > i:not(.item-icon *) {
  grid-column: 1 / -1;
  width: 34px;
  height: 22px;
  border: 3px solid #52656c;
  border-top: 0;
}

.terminal-slot > strong {
  grid-column: 1 / -1;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-slot.is-filled {
  border-style: solid;
  border-color: var(--brass);
  background: #1c2c31;
  color: var(--paper-hi);
}

.terminal-slot.is-filled .item-icon {
  transform: scale(0.72);
}

.terminal-slot:hover {
  border-color: var(--moon-hi);
  filter: brightness(1.08);
}

.evidence-terminal .redaction-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.redaction-workbench > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.62rem 0.75rem;
  border: 1px solid #455e68;
  background: #112128;
  color: var(--paper);
}

.redaction-workbench > header h3 {
  margin: 0;
  color: var(--paper-hi);
  font-size: 0.75rem;
}

.redaction-workbench > header span {
  color: var(--moon-hi);
  font: 750 0.59rem/1.3 var(--mono);
}

.evidence-terminal .redaction-document {
  position: static;
  inset: auto;
  display: grid;
  gap: 6px;
  padding: 0;
  pointer-events: auto;
}

.redaction-paper {
  position: relative;
  display: grid;
  width: min(760px, 100%);
  min-height: 340px;
  grid-template-columns: minmax(150px, 0.36fr) minmax(0, 1fr);
  align-items: stretch;
  margin: 0 auto;
  padding: clamp(15px, 2vw, 24px);
  gap: clamp(13px, 2vw, 22px);
  overflow: hidden;
  border: 1px solid #9b9176;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgb(80 76 60 / 10%) 28px 29px),
    #efe5c9;
  color: #303129;
  box-shadow: 4px 5px 0 #a99e7f;
  touch-action: none;
}

.redaction-photo {
  width: 100%;
  height: 100%;
  min-height: 270px;
  border: 8px solid #ded5bc;
  outline: 1px solid #7f7967;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.04);
}

.redaction-copy {
  display: grid;
  align-content: start;
  border-top: 2px solid #7b7560;
}

.redaction-copy p {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 62px;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid #aba185;
}

.redaction-copy span,
.redaction-copy strong {
  padding: 0.55rem 0.65rem;
}

.redaction-copy span {
  color: #6c695a;
  font: 800 0.62rem/1.45 var(--mono);
}

.redaction-copy strong {
  color: #2d302b;
  font-size: 0.72rem;
  line-height: 1.45;
}

.redaction-paper > canvas {
  position: absolute;
  z-index: 5;
  inset: 0;
  max-width: none;
  cursor: crosshair;
  pointer-events: auto;
  touch-action: none;
}

.redaction-document > p {
  width: min(760px, 100%);
  margin: 0 auto;
  color: #787467;
  font-size: 0.64rem;
}

.terminal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px;
  border: 1px solid #405861;
  background: #101f26;
}

.terminal-line {
  display: block;
  min-height: 38px;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--moon);
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgb(121 190 197 / 5%) 3px),
    #071419;
  color: var(--moon-hi);
  font: 750 0.67rem/1.45 var(--mono);
}

/* ---------- Hints, records, settings and ending result ---------- */

.hint-film-strip {
  display: grid;
  gap: 8px;
}

.hint-panel .hint-card {
  display: grid;
  min-height: 74px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.hint-panel .hint-card > span {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 2px solid #151d20;
  background: var(--brass);
  color: #17140d;
  font: 900 0.65rem/1 var(--mono);
}

.hint-panel .hint-card p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
}

.hint-card.is-covered {
  opacity: 0.62;
  filter: grayscale(0.7);
}

.hint-panel > .device-action {
  justify-self: end;
}

.case-log {
  display: grid;
  gap: 0;
  border-top: 2px solid #776f59;
}

.case-log > article {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 12px;
  padding: 0.8rem 0.35rem;
  border-bottom: 1px solid #a99f84;
}

.case-log > article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #706953;
  background: #27343a;
  color: var(--moon-hi);
  font: 850 0.62rem/1 var(--mono);
}

.case-log h3,
.case-log p {
  margin: 0;
}

.case-log h3 {
  color: #262c2d;
  font-size: 0.8rem;
}

.case-log p {
  margin-top: 0.25rem;
  color: #5c5d53;
  font-size: 0.7rem;
  line-height: 1.55;
}

.settings-panel {
  display: grid;
  gap: 9px;
}

.setting-row {
  display: grid;
  min-height: 76px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0.75rem 0.85rem;
  border: 1px solid #9c9175;
  background: #e3d7b7;
  color: #33352e;
}

.setting-row strong,
.setting-row small {
  display: block;
}

.setting-row strong {
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
}

.setting-row small {
  color: #69685b;
  font-size: 0.65rem;
}

.setting-row input[type="checkbox"] {
  width: 46px;
  height: 25px;
  accent-color: var(--safelight);
}

.settings-panel .secondary-device-action,
.settings-panel .text-danger-action {
  justify-self: stretch;
}

.ending-negative {
  position: relative;
  display: grid;
  min-height: 120px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.2rem;
  overflow: hidden;
  border: 8px solid #090e10;
  background:
    radial-gradient(circle at 6px 6px, #d1a84e 0 2px, transparent 2.5px) 0 0 / 18px 18px,
    linear-gradient(145deg, #1c3034, #0c171b);
  color: var(--moon-hi);
  box-shadow: 0 0 0 1px #5d7077;
}

.ending-negative > span {
  font: 850 0.69rem/1.3 var(--mono);
  letter-spacing: 0.16em;
}

.ending-negative > strong {
  color: var(--brass-hi);
  font: 900 clamp(3rem, 8vw, 5.5rem)/1 var(--serif);
}

.ending-content > h2 {
  margin: 1rem 0 0.4rem;
  color: var(--paper-hi);
  font: 700 clamp(1.4rem, 3vw, 2.2rem)/1.2 var(--serif);
}

.ending-content > p {
  margin: 0;
  color: var(--paper-lo);
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0 0;
  gap: 7px;
}

.result-stats > div {
  display: grid;
  gap: 4px;
  padding: 0.7rem;
  border: 1px solid #40545e;
  background: #0c161b;
}

.result-stats dt {
  color: #798a91;
  font: 750 0.58rem/1.3 var(--mono);
}

.result-stats dd {
  margin: 0;
  color: var(--brass-hi);
  font: 850 0.72rem/1.3 var(--mono);
}

/* ---------- Puzzle responsive QA: 1366×768 and 390×844 ---------- */

@media (max-width: 900px) {
  .reservation-puzzle,
  .camera-puzzle,
  .culprit-workbench {
    grid-template-columns: 1fr;
  }

  .reservation-viewer {
    min-height: 360px;
  }

  .reservation-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .reservation-controls .device-action {
    grid-column: auto;
  }

  .camera-puzzle > .device-action,
  .camera-puzzle > .secondary-device-action {
    grid-column: auto;
  }

  .bellows-camera {
    grid-row: auto;
    min-height: 350px;
  }

  .aperture-dial {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .culprit-workbench .thirteenth-evidence {
    position: static;
  }

  .suspect-document .suspect-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 680px) {
  .paper-heading {
    min-height: 44px;
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-card-grid,
  .drawer-contents,
  .identity-layout,
  .phone-puzzle .phone-workbench,
  .enlarger-puzzle {
    grid-template-columns: 1fr;
  }

  .contact-card-grid {
    gap: 7px;
  }

  .contact-document .contact-card {
    min-height: 105px;
  }

  .identity-photo {
    width: min(210px, 70%);
    justify-self: center;
  }

  .identity-layout dl {
    grid-template-columns: 95px minmax(0, 1fr);
  }

  .photo-callout > i {
    width: 15px;
  }

  .photo-callout > b {
    padding: 0.17rem 0.24rem;
    font-size: 0.48rem;
  }

  .thirteenth-evidence figcaption strong {
    float: none;
    display: block;
    margin-top: 2px;
  }

  .physical-lock {
    padding: 11px;
  }

  .lock-hardware {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 88px;
  }

  .lock-bolt {
    width: 54px;
  }

  .number-pad {
    gap: 5px;
  }

  .number-pad button {
    min-height: 48px;
  }

  .take-item-card {
    min-height: 92px;
  }

  .reservation-puzzle {
    grid-template-columns: 1fr;
  }

  .reservation-viewer {
    min-height: 290px;
  }

  .reservation-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 7px;
  }

  .reservation-controls .device-action {
    grid-column: 1 / -1;
  }

  .sheet-control {
    min-height: 68px;
  }

  .phone-puzzle .phone-workbench {
    gap: 8px;
  }

  .mini-contact-card,
  .trace-result {
    min-height: 108px;
  }

  .trace-keypad {
    width: min(300px, 100%);
  }

  .trace-result {
    grid-template-columns: 1fr auto;
    padding: 0.7rem;
  }

  .phone-puzzle > .secondary-device-action {
    justify-self: stretch;
  }

  .portrait-frame {
    min-height: 280px;
    max-height: none;
    aspect-ratio: 4 / 3;
  }

  .hidden-filter-copy {
    min-width: 160px;
  }

  .camera-puzzle {
    grid-template-columns: 1fr;
  }

  .bellows-camera {
    grid-row: auto;
    min-height: 280px;
  }

  .aperture-dial {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .camera-puzzle > .device-action,
  .camera-puzzle > .secondary-device-action {
    grid-column: auto;
  }

  .contact-lightbox {
    min-height: 310px;
    padding: 8px;
  }

  .restored-contact-grid {
    inset: 8px;
  }

  .process-machine {
    min-height: 430px;
    grid-template-rows: minmax(320px, 1fr) 78px;
    padding: 8px;
  }

  .process-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .process-slot {
    min-height: 145px;
  }

  .plate-art {
    width: 50%;
    max-width: 74px;
  }

  .enlarger-puzzle {
    grid-template-rows: auto auto auto;
  }

  .enlarger-machine {
    grid-row: auto;
    min-height: 155px;
  }

  .enlarger-head {
    top: 8%;
    left: 25%;
    width: 32%;
    height: 52%;
  }

  .enlarger-head::after {
    height: 55px;
  }

  .negative-carrier {
    top: 22%;
    right: 6%;
    bottom: auto;
    left: 49%;
    min-height: 76px;
  }

  .projection {
    min-height: 300px;
  }

  .enlarger-controls label {
    min-width: 100%;
  }

  .wall-seams,
  .opened-wall .open-seam {
    min-height: 270px;
    height: 270px;
  }

  .film-box-puzzle .box-net {
    min-width: 510px;
    min-height: 380px;
  }

  .film-box-puzzle:not(.folded-state) {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .film-box-puzzle.folded-state {
    min-height: 480px;
  }

  .registration-table {
    min-height: 360px;
  }

  .registration-table .film-layer::before {
    bottom: 22%;
  }

  .film-sheet {
    width: 62px;
    min-width: 62px;
  }

  .layer-b .film-sheet { left: calc(50% - 31px); }

  .culprit-workbench {
    grid-template-columns: 1fr;
  }

  .suspect-choice-grid {
    grid-template-columns: 1fr;
  }

  .suspect-choice {
    min-height: 188px;
  }

  .suspect-document .suspect-grid {
    grid-template-columns: 1fr;
  }

  .terminal-banner,
  .redaction-workbench > header {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 0.65rem;
  }

  .terminal-summary {
    grid-template-columns: 1fr;
  }

  .terminal-summary > div {
    min-height: 50px;
  }

  .terminal-attachments > div {
    display: flex;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .terminal-slot {
    min-width: 116px;
    width: 116px;
    scroll-snap-align: start;
  }

  .redaction-paper {
    min-height: 500px;
    grid-template-columns: 1fr;
  }

  .redaction-photo {
    width: min(190px, 70%);
    min-height: 210px;
    justify-self: center;
  }

  .redaction-copy p {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 52px;
  }

  .terminal-actions > * {
    flex: 1 1 140px;
  }

  .result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) and (max-height: 790px) {
  .reservation-viewer,
  .contact-lightbox {
    min-height: 390px;
  }

  .bellows-camera {
    min-height: 390px;
  }

  .process-machine {
    min-height: 380px;
    grid-template-rows: minmax(235px, 1fr) 82px;
  }

  .enlarger-puzzle {
    grid-template-rows: minmax(350px, 1fr) auto;
  }

  .enlarger-machine {
    min-height: 430px;
  }

  .projection {
    min-height: 350px;
  }

  .film-box-puzzle .box-net {
    min-height: 420px;
  }

  .film-box-puzzle.folded-state {
    min-height: 440px;
  }

  .registration-table {
    min-height: 450px;
  }
}

@media (max-width: 420px) and (min-height: 700px) {
  .modal-body {
    padding: 9px;
    scroll-padding-bottom: 16px;
  }

  .modal-inventory {
    scrollbar-gutter: stable;
  }

  .modal-body > :last-child,
  .puzzle-shell > :last-child,
  .evidence-terminal > :last-child {
    margin-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .reservation-code {
    font-size: 2.7rem;
  }

  .phone-puzzle .contact-tabs button {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .filter-lens,
  .mirror-lens {
    max-width: 170px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .modal-body {
    scroll-padding-bottom: 8px;
  }

  .reservation-puzzle {
    grid-template-columns: minmax(340px, 1fr) minmax(220px, 0.42fr);
  }

  .reservation-viewer,
  .contact-lightbox,
  .registration-table {
    min-height: 300px;
  }

  .sheet-control {
    min-height: 54px;
    padding: 0.45rem;
  }

  .phone-puzzle .phone-workbench {
    grid-template-columns: 150px minmax(250px, 1fr) 120px;
  }

  .mini-contact-card,
  .trace-result {
    min-height: 210px;
  }

  .trace-keypad {
    width: 260px;
  }

  .portrait-frame {
    min-height: 250px;
    max-height: none;
  }

  .bellows-camera {
    min-height: 300px;
  }

  .contact-lightbox {
    min-height: 310px;
  }

  .process-machine {
    min-height: 310px;
    grid-template-rows: minmax(205px, 1fr) 72px;
  }

  .process-slot {
    min-height: 150px;
  }

  .enlarger-puzzle {
    grid-template-rows: minmax(290px, 1fr) auto;
  }

  .enlarger-machine {
    min-height: 360px;
  }

  .projection {
    min-height: 290px;
  }

  .film-box-puzzle .box-net {
    min-height: 330px;
  }

  .film-box-puzzle.folded-state {
    min-height: 350px;
  }

  .registration-table {
    min-height: 340px;
  }

  .terminal-actions {
    position: sticky;
    z-index: 40;
    bottom: 0;
    box-shadow: 0 -8px 16px rgb(0 0 0 / 28%);
  }
}

/* Final viewport guards: narrow HUD, short landscape, and notched standalone windows. */
@media (max-width: 760px) {
  .game-hud {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .room-nav {
    display: none;
  }
}

@media (max-width: 680px) and (max-height: 540px) and (orientation: landscape) {
  .stage-column {
    place-items: center;
    overflow: hidden;
  }

  #room-stage {
    width: min(100%, calc((100dvh - 54px) * 16 / 9));
    min-width: 0;
    height: auto;
    max-height: calc(100dvh - 54px);
    aspect-ratio: var(--stage-ratio);
  }
}

@supports (padding: max(0px)) {
  .game-hud {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .game-workspace {
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  .modal-header,
  .modal-inventory,
  .modal-footer {
    padding-right: max(8px, env(safe-area-inset-right));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .modal-header {
    padding-top: max(7px, env(safe-area-inset-top));
  }

  .modal-footer {
    padding-bottom: max(7px, env(safe-area-inset-bottom));
  }
}