:root {
  color-scheme: dark;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", Inter, ui-sans-serif, system-ui, sans-serif;
  --ink: #070a09;
  --ink-soft: #0d1210;
  --panel: rgba(10, 16, 14, 0.84);
  --panel-strong: rgba(8, 13, 11, 0.94);
  --line: rgba(209, 218, 205, 0.24);
  --line-strong: rgba(226, 232, 222, 0.52);
  --paper: #edf1e9;
  --paper-dim: #a6afa5;
  --amber: #d5a94f;
  --amber-bright: #f0c66d;
  --red: #a84d43;
  --red-bright: #ef9e8d;
  --green: #7ea481;
  --blue: #8babb1;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #030504;
}

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  letter-spacing: 0.01em;
}

button {
  border: 0;
  font: inherit;
}

button:focus-visible {
  outline: 2px solid var(--amber-bright);
  outline-offset: 3px;
}

.app-shell {
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(84, 102, 78, 0.14), transparent 42%),
    #030504;
}

.game-frame {
  position: relative;
  width: min(1280px, 100vw, calc(100svh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.game-frame::after {
  position: absolute;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.35)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.32), transparent 14%, transparent 88%, rgba(0, 0, 0, 0.2));
  box-shadow: inset 0 0 0 1px rgba(222, 231, 218, 0.13), inset 0 0 80px rgba(0, 0, 0, 0.42);
}

.door-stage,
.door-scene {
  position: absolute;
  inset: 0;
}

.door-scene {
  --door-asset: none;
  --impact-distance: 0px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 44%, rgba(90, 108, 96, 0.14), transparent 36%),
    linear-gradient(135deg, #141a17, #070b09 55%, #020403);
}

.hud-panel {
  border: 1px solid var(--line);
  background: linear-gradient(130deg, rgba(15, 23, 19, 0.92), rgba(7, 12, 10, 0.78));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(8px);
}

.hud-label,
.eyebrow,
.contact-meter__label,
.message-card__meta,
.result-kicker,
.scene-caption__kicker,
.scene-status,
.deck-footer,
.frame-brand span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hud-label,
.eyebrow,
.message-card__meta,
.result-kicker,
.scene-caption__kicker { color: var(--amber-bright); }

/* Shelter / quarter-view */
.shelter-layer {
  --shelter-asset: none;
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #101511;
  transition: opacity 220ms ease;
}

.shelter-layer::before,
.shelter-layer::after {
  position: absolute;
  inset: 0;
  content: "";
}

.shelter-layer::before {
  background-image: var(--shelter-asset);
  background-position: center;
  background-size: cover;
  filter: saturate(0.72) contrast(1.07) brightness(0.68);
  transform: scale(1.012);
}

.shelter-layer::after {
  background:
    linear-gradient(90deg, rgba(2, 5, 3, 0.58), transparent 25%, transparent 73%, rgba(2, 5, 3, 0.61)),
    linear-gradient(0deg, rgba(2, 5, 3, 0.88), transparent 33%, rgba(2, 5, 3, 0.24));
}

.has-shelter-asset .shelter-layer::before { opacity: 1; }

.shelter-plate {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.shelter-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
}

[data-phase="shelter"] .shelter-layer {
  opacity: 1;
  pointer-events: auto;
}

[data-phase="shelter"] .door-slab,
[data-phase="shelter"] .peephole-shell,
[data-phase="shelter"] .peephole-hud,
[data-phase="shelter"] .scene-caption,
[data-phase="shelter"] .scene-status {
  opacity: 0;
  pointer-events: none;
}

.shelter-hud { position: absolute; z-index: 5; }
.shelter-hud--left { top: 24px; left: 28px; width: 288px; }
.shelter-hud--right { top: 24px; right: 28px; width: 298px; }

.hud-clock { margin-bottom: 12px; text-shadow: 0 2px 12px #000; }
.hud-clock__day { display: block; color: var(--paper-dim); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
.hud-clock strong { display: block; margin-top: 1px; color: var(--paper); font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }

.hud-objective { display: grid; min-height: 80px; gap: 5px; padding: 12px 14px; border-left: 3px solid var(--amber); }
.hud-objective strong { font-size: 15px; }
.hud-objective > span:last-child { color: var(--paper-dim); font-size: 11px; line-height: 1.35; }

.hud-focus { display: grid; min-height: 52px; gap: 4px; margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--green); }
.hud-focus strong { font-size: 12px; line-height: 1.35; }
.shelter-focus-readout__kicker { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: 0.13em; }

.hud-integrity { display: grid; min-height: 52px; gap: 4px; padding: 10px 12px; }
.hud-integrity strong { font-size: 13px; }
.hud-meter { display: block; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.09); }
.hud-meter i { display: block; width: 100%; height: 100%; background: var(--green); transition: width 220ms ease, background 220ms ease; }

.hud-utilities { display: flex; justify-content: flex-end; gap: 16px; margin-top: 10px; color: var(--paper-dim); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; }
.hud-utilities b { margin-left: 3px; color: var(--paper); }

.shelter-hotspots { position: absolute; z-index: 8; inset: 0; }
.shelter-hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  min-width: 148px;
  min-height: 60px;
  gap: 10px;
  padding: 10px 13px;
  cursor: pointer;
  border: 1px solid rgba(229, 235, 225, 0.62);
  border-left: 3px solid var(--amber);
  border-radius: 2px;
  color: var(--paper);
  background: rgba(5, 10, 8, 0.72);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  text-align: left;
  transition: 160ms ease;
}

.shelter-hotspot::after {
  position: absolute;
  right: -18px;
  width: 18px;
  height: 1px;
  content: "";
  background: var(--amber);
}

.shelter-hotspot:hover:not(:disabled),
.shelter-hotspot[data-active="true"] {
  border-color: var(--amber-bright);
  background: rgba(89, 70, 27, 0.76);
  transform: translateY(-2px);
}

.shelter-hotspot:disabled { cursor: default; opacity: 0; }
.shelter-hotspot--radio { top: 58%; left: 7.5%; }
.shelter-hotspot--supplies { top: 70.8%; left: 33.6%; }
.shelter-hotspot--residents { top: 36.7%; left: 55.9%; }
.shelter-hotspot--door { top: 38.3%; right: 11.7%; }
.shelter-hotspot__index { color: var(--amber-bright); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; }
.shelter-hotspot__label { font-size: 13px; font-weight: 800; white-space: nowrap; }

.shelter-player {
  --player-x: 18%;
  --player-y: 63%;
  position: absolute;
  z-index: 7;
  top: var(--player-y);
  left: var(--player-x);
  width: 44px;
  height: 64px;
  pointer-events: none;
  transform: translate(-50%, -84%);
  transition: top 620ms cubic-bezier(0.18, 0.84, 0.24, 1), left 620ms cubic-bezier(0.18, 0.84, 0.24, 1);
}
.shelter-player[data-movement-key="radio"] { --player-x: 19%; --player-y: 67%; }
.shelter-player[data-movement-key="supplies"] { --player-x: 42%; --player-y: 76%; }
.shelter-player[data-movement-key="residents"] { --player-x: 61%; --player-y: 51%; }
.shelter-player[data-movement-key="door"] { --player-x: 77%; --player-y: 52%; }
.shelter-player__body {
  position: absolute;
  inset: 7px 7px 0;
  display: block;
  border: 1px solid rgba(229, 235, 225, 0.42);
  border-radius: 48% 48% 40% 40%;
  background:
    radial-gradient(circle at 50% 18%, #b7b7a7 0 10%, transparent 11%),
    linear-gradient(90deg, transparent 39%, rgba(218, 184, 104, 0.9) 40% 59%, transparent 60%),
    linear-gradient(160deg, #303a33, #121a16 70%);
  box-shadow: 0 0 0 3px rgba(5, 9, 7, 0.58), 0 12px 20px rgba(0, 0, 0, 0.46);
}
.shelter-player__route {
  position: absolute;
  z-index: -1;
  top: 72%;
  left: -82px;
  width: 82px;
  height: 1px;
  transform-origin: right;
  background: linear-gradient(90deg, transparent, rgba(240, 198, 109, 0.78));
  box-shadow: 0 0 10px rgba(240, 198, 109, 0.34);
}
.shelter-player__label {
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  width: max-content;
  padding-top: 5px;
  color: var(--amber-bright);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 4px #000;
  transform: translateX(-50%);
}

.shelter-resident-card {
  position: absolute;
  z-index: 9;
  top: 24px;
  left: 50%;
  display: grid;
  width: 360px;
  min-height: 80px;
  gap: 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--green);
  color: var(--paper-dim);
  font-size: 10px;
  transform: translateX(-50%);
}
.shelter-resident-card strong { color: var(--paper); font-size: 14px; }
.shelter-resident-card__kicker { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; }
.shelter-resident-card[aria-hidden="true"] { display: none; }
.shelter-resident-list { display: grid; gap: 4px; padding: 0; margin: 1px 0 0; list-style: none; }
.shelter-resident-list li { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.shelter-resident-list b { color: var(--paper); font-size: 11px; }
.shelter-resident-list span { overflow: hidden; color: var(--paper-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.hud-radio { position: absolute; z-index: 8; bottom: 80px; left: 28px; display: grid; width: 298px; min-height: 116px; gap: 7px; padding: 12px 14px; border-left: 3px solid var(--blue); }
.hud-radio strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hud-radio__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.radio-wave { display: flex; flex: 1; align-items: end; height: 14px; gap: 4px; }
.radio-wave i { display: block; width: 3px; height: 35%; background: var(--blue); animation: radio-signal 1.1s ease-in-out infinite alternate; }
.radio-wave i:nth-child(2), .radio-wave i:nth-child(6) { height: 80%; animation-delay: -0.3s; }
.radio-wave i:nth-child(3), .radio-wave i:nth-child(5) { height: 50%; animation-delay: -0.6s; }
.radio-wave i:nth-child(4) { height: 100%; animation-delay: -0.8s; }
.radio-play-button { min-width: 118px; min-height: 48px; padding: 8px 11px; border: 1px solid rgba(89, 164, 192, 0.62); color: var(--paper); background: rgba(12, 34, 43, 0.92); font: inherit; font-size: 10px; font-weight: 900; letter-spacing: 0.08em; cursor: pointer; }
.radio-play-button:hover:not(:disabled), .radio-play-button[aria-pressed="true"] { border-color: var(--blue); background: rgba(25, 73, 88, 0.96); box-shadow: 0 0 22px rgba(89, 164, 192, 0.25); }
.radio-play-button:disabled { cursor: default; opacity: 0.42; }
.hud-radio[data-radio-playing="true"] { border-left-color: var(--green); box-shadow: 0 0 28px rgba(117, 169, 123, 0.12); }
.hud-radio[data-radio-playing="true"] .radio-wave i { background: var(--green); }

.hud-inventory { position: absolute; z-index: 8; bottom: 24px; left: 50%; width: 532px; transform: translateX(-50%); }
.hud-inventory > .hud-label { display: block; margin-bottom: 7px; color: var(--paper-dim); text-align: center; }
.inventory-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.inventory-slots span { display: grid; min-height: 82px; place-content: center; border: 1px solid var(--line); background: rgba(7, 12, 10, 0.82); color: var(--paper-dim); font-size: 10px; text-align: center; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28); }
.inventory-slots b { display: block; margin-bottom: 6px; color: var(--amber-bright); font-size: 11px; letter-spacing: 0.12em; }
.inventory-slots i { display: block; color: var(--paper-dim); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: 0.08em; }
.inventory-slots em { display: block; margin-top: 4px; color: var(--paper); font-size: 11px; font-style: normal; font-weight: 800; }

.shelter-log { position: absolute; z-index: 8; right: 28px; bottom: 90px; width: 318px; }
.hud-visitor-log { display: grid; min-height: 52px; gap: 4px; padding: 10px 12px; border-right: 3px solid var(--amber); text-align: right; }
.hud-visitor-log strong { font-size: 12px; }
.hud-visitor-log > span:last-child { color: var(--paper-dim); font-size: 10px; }

/* OTS door and peephole */
.door-scene::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background-image: var(--door-asset);
  background-position: center;
  background-size: cover;
  filter: saturate(0.5) contrast(1.08) brightness(0.42);
  opacity: 0;
}
.door-scene.has-door-asset::before { opacity: 0.8; }

.door-frame {
  position: absolute;
  z-index: 2;
  inset: 5.5%;
  pointer-events: none;
  border: clamp(8px, 1vw, 14px) solid rgba(73, 51, 36, 0.72);
  box-shadow: inset 0 0 0 1px rgba(218, 185, 124, 0.16), inset 0 0 48px rgba(0, 0, 0, 0.74);
  opacity: 0.05;
  transition: opacity 220ms ease, border-color 220ms ease, filter 220ms ease;
}
[data-phase="intro"] .door-frame { opacity: 0.92; }
.door-scene[data-door-frame]:not([data-door-frame="0"]) .door-frame {
  border-color: rgba(155, 75, 61, 0.9);
  filter: contrast(1.22);
}
.door-scene[data-door-frame="2"] .door-frame,
.door-scene[data-door-frame="3"] .door-frame {
  box-shadow: inset 0 0 0 1px rgba(239, 158, 141, 0.62), inset 0 0 48px rgba(0, 0, 0, 0.74), 0 0 20px rgba(168, 77, 67, 0.28);
}

.door-slab {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0.08;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 28%, rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(93deg, rgba(138, 94, 55, 0.08) 0 1px, transparent 1px 28px),
    linear-gradient(113deg, #3d2d23, #1b1714 52%, #30251d);
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.68);
  transition: opacity 220ms ease;
}
[data-phase="intro"] .door-slab { opacity: 1; }

.door-slab::after { position: absolute; inset: 5%; content: ""; border: 1px solid rgba(230, 208, 167, 0.08); }
.door-grain { position: absolute; width: 72%; height: 1px; background: rgba(190, 138, 89, 0.17); transform: rotate(-6deg); }
.door-grain--one { top: 26%; left: -4%; }
.door-grain--two { top: 72%; right: -12%; transform: rotate(3deg); }
.door-number { position: absolute; top: 11%; left: 9%; color: rgba(222, 197, 157, 0.58); font-size: clamp(34px, 5vw, 64px); font-weight: 300; letter-spacing: 0.08em; }
.door-number span { color: var(--amber); font-size: 0.62em; }
.door-chain, .door-lock { position: absolute; right: 9%; border: 2px solid rgba(194, 165, 116, 0.46); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); transition: border-color 180ms ease, filter 180ms ease, transform 180ms ease; }
.door-chain { top: 35%; width: 10%; height: 8%; border-left: 0; border-radius: 0 100% 100% 0; transform: rotate(7deg); }
.door-lock { top: 49%; width: 18px; height: 28px; border-radius: 4px; }
.door-chain::after, .door-lock::after { position: absolute; content: ""; opacity: 0; transition: opacity 180ms ease; }
.door-chain::after { top: 42%; left: 21%; width: 148%; height: 2px; background: var(--red-bright); box-shadow: 0 0 7px rgba(239, 158, 141, 0.7); transform: rotate(-34deg); }
.door-lock::after { inset: 28% -28%; border-top: 2px solid var(--red-bright); box-shadow: 0 0 7px rgba(239, 158, 141, 0.7); transform: rotate(-35deg); }
.door-scene[data-door-chain]:not([data-door-chain="0"]) .door-chain { border-color: var(--red-bright); filter: saturate(1.3); transform: rotate(12deg) translateX(4px); }
.door-scene[data-door-chain]:not([data-door-chain="0"]) .door-chain::after,
.door-scene[data-door-lock]:not([data-door-lock="0"]) .door-lock::after { opacity: 1; }
.door-scene[data-door-lock]:not([data-door-lock="0"]) .door-lock { border-color: var(--red-bright); filter: saturate(1.3); }

.ots-bridge {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: -9%;
  left: 0;
  height: 70%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-7%) translateY(4%);
  transition: opacity 220ms ease, transform 420ms cubic-bezier(0.18, 0.84, 0.24, 1);
}
[data-phase="intro"] .ots-bridge { opacity: 1; transform: translateX(0) translateY(0); }
.ots-bridge__shoulder {
  position: absolute;
  bottom: -8%;
  left: -6%;
  width: 41%;
  height: 71%;
  border-radius: 48% 58% 0 0;
  background: radial-gradient(ellipse at 74% 18%, rgba(68, 80, 70, 0.74), rgba(10, 15, 13, 0.96) 57%, #020403 78%);
  box-shadow: 22px -20px 48px rgba(0, 0, 0, 0.62);
  transform: rotate(-7deg);
}
.ots-bridge__hand {
  position: absolute;
  bottom: 24%;
  left: 28%;
  width: 11%;
  height: 30%;
  border-radius: 58% 42% 46% 48%;
  background: linear-gradient(130deg, #625244, #27231f 70%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.52);
  transform: rotate(-44deg);
}
.ots-bridge__line {
  position: absolute;
  right: 13%;
  bottom: 33%;
  left: 34%;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 198, 109, 0.72), transparent 56%);
  box-shadow: 0 0 10px rgba(240, 198, 109, 0.22);
}

.peephole-shell {
  position: absolute;
  z-index: 3;
  top: 6.7%;
  left: 50%;
  display: grid;
  width: min(48.3%, 618px);
  aspect-ratio: 1;
  place-items: center;
  border: clamp(10px, 1.1vw, 14px) solid #8c734e;
  border-radius: 50%;
  background: #030504;
  box-shadow: 0 0 0 2px rgba(222, 197, 143, 0.25), 0 26px 68px rgba(0, 0, 0, 0.72), inset 0 0 42px rgba(0, 0, 0, 0.95);
  transform: translateX(-50%);
  transition: opacity 220ms ease, transform 300ms ease;
}

.peephole-shell::before,
.peephole-shell::after { position: absolute; content: ""; border-radius: 50%; }
.peephole-shell::before { inset: -2.8%; border: 1px solid rgba(230, 198, 141, 0.22); }
.peephole-shell::after { inset: 2.2%; border: 1px solid rgba(0, 0, 0, 0.82); }
[data-phase="intro"] .peephole-shell { opacity: 0.1; transform: translateX(-50%) scale(0.78); }

.peephole-glass { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #333e3b, #0b110f 58%, #030504); box-shadow: inset 0 0 64px rgba(0, 0, 0, 0.9); }
.door-scene[data-door-peephole]:not([data-door-peephole="0"]) .peephole-shell { border-color: rgba(185, 104, 84, 0.9); box-shadow: 0 0 0 2px rgba(239, 158, 141, 0.34), 0 26px 68px rgba(0, 0, 0, 0.72), inset 0 0 42px rgba(93, 33, 29, 0.82); }
.door-scene[data-door-peephole]:not([data-door-peephole="0"]) .peephole-glass { filter: blur(calc((1 - var(--peephole-clarity, 1)) * 2.4px)) contrast(calc(0.82 + var(--peephole-clarity, 1) * 0.3)); }
.door-scene[data-door-peephole="2"] .peephole-glass,
.door-scene[data-door-peephole="3"] .peephole-glass { filter: blur(calc((1 - var(--peephole-clarity, 1)) * 4px)) contrast(calc(0.72 + var(--peephole-clarity, 1) * 0.24)); }
.hallway-light { position: absolute; inset: -2%; background-image: var(--corridor-asset, none); background-position: center; background-size: cover; opacity: 0; filter: saturate(0.62) sepia(0.08) contrast(1.14) brightness(0.56); }
.has-corridor-asset .hallway-light { opacity: 0.78; }
.hallway-light::after { position: absolute; inset: 0; content: ""; background: radial-gradient(ellipse at 52% 46%, transparent 18%, rgba(1, 3, 3, 0.64) 78%); }

.visitor-figure {
  --visitor-position: 0%;
  --visitor-pose: 0%;
  position: absolute;
  z-index: 2;
  top: 14%;
  left: 19.5%;
  width: 61%;
  height: 74%;
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  transition: opacity 340ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.has-visitor .visitor-figure { opacity: 0.94; transform: translateY(0) scale(1); }
.visitor-figure::before { position: absolute; inset: 0; content: ""; background-image: var(--visitor-asset, none); background-position: var(--visitor-position); background-size: 200% 200%; background-repeat: no-repeat; mix-blend-mode: screen; opacity: 0; filter: saturate(0.62) contrast(1.18) brightness(0.76); }
.has-visitor-asset .visitor-figure::before { opacity: 0.78; }
.has-visitor-atlas-v2 .visitor-figure::before { background-position: var(--visitor-position) var(--visitor-pose); background-size: 400% 300%; }
.has-visitor-asset .visitor-head, .has-visitor-asset .visitor-neck, .has-visitor-asset .visitor-body, .has-visitor-asset .visitor-hand { opacity: 0; }
.visitor-figure[data-pose="hands"]::before { filter: saturate(0.65) contrast(1.24) brightness(0.85); }
.visitor-figure[data-pose="step-back"]::before { opacity: 0.66; }
.visitor-figure[data-reaction="ask-name"]::before { animation: reaction-gaze 760ms ease-out; }
.visitor-figure[data-reaction="ask-purpose"]::before { animation: reaction-lean 760ms ease-out; }
.visitor-figure[data-reaction="ask-memory"]::before { animation: reaction-stutter 760ms steps(2, end); }
.visitor-figure[data-reaction="show-hands"]::before { animation: reaction-hands 520ms ease-out; }
.visitor-figure[data-reaction="step-back"]::before { animation: reaction-distance 520ms ease-out; }
.visitor-figure[data-motion^="v1-"]::before { animation-duration: 640ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
.visitor-figure[data-motion^="v2-"]::before { animation-duration: 760ms; animation-timing-function: ease-out; }
.visitor-figure[data-motion^="v3-"]::before { animation-duration: 680ms; animation-timing-function: steps(2, end); }
.visitor-figure[data-motion^="v4-"]::before { animation-duration: 820ms; animation-timing-function: cubic-bezier(0.38, 0.02, 0.42, 1); }

.visitor-head, .visitor-neck, .visitor-body, .visitor-hand { position: absolute; background: #171918; box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); }
.visitor-head { top: 4%; left: 29%; width: 43%; height: 37%; border-radius: 48% 52% 46% 54%; background: radial-gradient(circle at 60% 32%, #a98b69 0 2%, #493a2d 16%, #1c1b1b 57%); }
.visitor-neck { top: 34%; left: 41%; width: 20%; height: 19%; background: #24201e; }
.visitor-body { top: 44%; left: 11%; width: 78%; height: 58%; border-radius: 44% 44% 8% 8%; background: linear-gradient(90deg, #171a1b, #35312b 42%, #17191a 80%); }
.visitor-hand { top: 60%; width: 12%; height: 23%; border-radius: 40%; background: #78604a; }
.visitor-hand--left { left: 3%; transform: rotate(15deg); }
.visitor-hand--right { right: 3%; transform: rotate(-15deg); }
.visitor-eye { position: absolute; top: 52%; width: 8px; height: 4px; border-radius: 50%; background: #dbb976; box-shadow: 0 0 8px rgba(224, 173, 93, 0.8); }
.visitor-eye--left { left: 28%; }
.visitor-eye--right { right: 28%; }
.visitor-figure[data-accent="uncanny"] .visitor-eye { width: 5px; height: 12px; border-radius: 60%; background: #b94431; }
.visitor-figure[data-accent="uncanny"] .visitor-body { animation: wrong-breath 2.8s steps(2, end) infinite; }

.peep-reflection { position: absolute; z-index: 4; top: 8%; left: 20%; width: 32%; height: 11%; border-radius: 50%; background: rgba(235, 219, 179, 0.16); filter: blur(8px); transform: rotate(24deg); }
.peep-vignette { position: absolute; z-index: 5; inset: 0; border-radius: 50%; box-shadow: inset 0 0 52px rgba(0, 0, 0, 0.96), inset 0 0 4px rgba(235, 219, 179, 0.38); }

.peephole-hud { position: absolute; z-index: 12; inset: 0; pointer-events: none; transition: opacity 180ms ease; }
.peephole-objective { position: absolute; top: 24px; left: 28px; display: grid; width: 286px; min-height: 80px; gap: 5px; padding: 12px 14px; border-left: 3px solid var(--amber); }
.peephole-objective strong { font-size: 15px; }
.peephole-objective > span:last-child { color: var(--paper-dim); font-size: 10px; }
.peephole-contact { position: absolute; top: 24px; left: 50%; display: flex; align-items: baseline; gap: 10px; transform: translateX(-50%); text-shadow: 0 2px 10px #000; }
.peephole-contact span { color: var(--paper-dim); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
.peephole-contact strong { color: var(--amber-bright); font-size: 32px; line-height: 1; }
.peephole-visitor { position: absolute; top: 90px; right: 28px; display: grid; width: 266px; min-height: 80px; gap: 5px; padding: 12px 14px; border-right: 3px solid var(--amber); text-align: right; }
.peephole-visitor strong { font-size: 15px; }
.peephole-visitor > span:last-child { color: var(--paper-dim); font-size: 10px; line-height: 1.3; }
.peephole-system { position: absolute; z-index: 22; top: 24px; right: 28px; display: flex; align-items: center; gap: 9px; color: var(--paper-dim); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; }
[data-phase="shelter"] .peephole-system { top: 172px; }
.icon-button { display: inline-grid; min-width: 62px; height: 48px; padding: 0 11px; cursor: pointer; place-items: center; border: 1px solid var(--line-strong); color: var(--paper); background: rgba(7, 12, 10, 0.84); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; pointer-events: auto; }
.icon-button:hover, .icon-button[aria-pressed="true"] { color: var(--amber-bright); border-color: var(--amber); background: rgba(87, 67, 24, 0.72); }
.impact-readout b { color: var(--amber-bright); }

.damage-overlay { position: absolute; z-index: 9; top: 8.6%; left: 50%; width: min(46.1%, 590px); aspect-ratio: 1; pointer-events: none; border-radius: 50%; opacity: 0; background: linear-gradient(58deg, transparent 49.7%, rgba(220, 219, 205, 0.68) 50%, transparent 50.5%), linear-gradient(116deg, transparent 59%, rgba(200, 195, 179, 0.47) 59.3%, transparent 59.8%), radial-gradient(ellipse at 51% 49%, transparent 44%, rgba(8, 9, 9, 0.35) 73%, rgba(4, 5, 5, 0.72) 100%); transform: translateX(-50%); transition: opacity 240ms ease; }
.damage-overlay[data-damage="1"] { opacity: 0.45; }
.damage-overlay[data-damage="2"] { opacity: 0.7; filter: blur(0.2px); }
.damage-overlay[data-damage="3"] { opacity: 0.92; filter: blur(0.7px); }
[data-phase="shelter"] .damage-overlay { opacity: 0; }
[data-phase="shelter"] .door-scene[data-door-peephole]:not([data-door-peephole="0"]) .shelter-layer::after {
  background:
    linear-gradient(61deg, transparent 49.4%, rgba(220, 219, 205, 0.58) 49.8%, transparent 50.3%) 82% 25% / 16% 31% no-repeat,
    linear-gradient(118deg, transparent 49.4%, rgba(200, 195, 179, 0.4) 49.8%, transparent 50.3%) 82% 25% / 16% 31% no-repeat,
    linear-gradient(90deg, rgba(2, 5, 3, 0.58), transparent 25%, transparent 73%, rgba(2, 5, 3, 0.61)),
    linear-gradient(0deg, rgba(2, 5, 3, 0.88), transparent 33%, rgba(2, 5, 3, 0.24));
}
.dust-overlay { position: absolute; z-index: 10; inset: 0; pointer-events: none; opacity: 0; background-image: radial-gradient(circle, rgba(214, 184, 132, 0.55) 0 1px, transparent 2px); background-size: 23px 29px; mix-blend-mode: screen; }
.dust-overlay[data-active="true"] { opacity: 0.27; animation: dust-pulse 1.2s ease-out; }
.impact-flash { position: absolute; z-index: 11; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(232, 202, 168, 0.28), rgba(167, 67, 56, 0.2) 45%, transparent 76%); mix-blend-mode: screen; }

.scene-caption { position: absolute; z-index: 12; bottom: 44px; left: 48px; display: grid; max-width: 36%; gap: 8px; pointer-events: none; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.scene-caption strong { margin: 0; color: var(--paper); font-size: clamp(20px, 2.4vw, 34px); font-weight: 600; line-height: 1.12; }
.scene-status { position: absolute; z-index: 12; right: 42px; bottom: 30px; color: var(--paper-dim); pointer-events: none; }
[data-phase="observe"] .scene-caption, [data-phase="confirm"] .scene-caption, [data-phase="breach"] .scene-caption, [data-phase="resolve"] .scene-caption { opacity: 0; }

/* Dynamic controls are overlaid on the stage rather than occupying a permanent side deck. */
.control-deck { position: absolute; z-index: 30; inset: 0; pointer-events: none; }
.deck-header { position: absolute; top: 50%; left: 50%; display: grid; width: min(520px, calc(100% - 56px)); gap: 10px; padding: 24px; border: 1px solid var(--line); background: rgba(5, 9, 7, 0.9); text-align: center; transform: translate(-50%, -62%); backdrop-filter: blur(12px); }
.deck-header h1 { margin: 4px 0 0; font-size: clamp(26px, 3.2vw, 44px); line-height: 1; }
.contact-meter { display: none; }

.message-stack { position: absolute; z-index: 2; bottom: 92px; left: 50%; display: grid; width: 600px; max-height: 86px; gap: 8px; overflow: auto; pointer-events: auto; transform: translateX(-50%); }
.message-card { position: relative; min-height: 80px; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: rgba(7, 12, 10, 0.88); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); }
.message-card--active { border-left-color: var(--amber); }
.message-card--outcome { border-left-color: var(--green); }
.message-card--latest { border-left-color: var(--amber-bright); background: rgba(41, 34, 16, 0.9); }
.message-card__meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.message-card__body { margin: 0; color: var(--paper); font-size: 13px; line-height: 1.35; }
.message-card__evidence { display: block; margin-top: 5px; color: var(--paper-dim); font-size: 10px; line-height: 1.3; }
.message-card__reaction { position: absolute; top: 12px; right: 14px; max-width: 42%; color: var(--amber-bright); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-align: right; }

.action-panel { position: absolute; inset: 0; pointer-events: none; }
.action-panel button, .action-panel .decision-block, .action-panel .shelter-deck-card, .action-panel .ots-readout, .result-shell { pointer-events: auto; }
.action-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.action-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-row--wide { grid-template-columns: 1fr; }
.action-button { min-height: 54px; padding: 10px 13px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--paper); background: rgba(8, 14, 11, 0.9); text-align: left; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); transition: 150ms ease; backdrop-filter: blur(8px); }
.action-button:hover:not(:disabled) { border-color: var(--amber-bright); background: rgba(76, 59, 21, 0.92); transform: translateY(-1px); }
.action-button:disabled { cursor: not-allowed; opacity: 0.3; }
.action-button--primary { border-color: var(--amber); background: linear-gradient(120deg, rgba(126, 92, 25, 0.92), rgba(43, 37, 19, 0.92)); }
.action-button--danger { border-color: rgba(205, 95, 80, 0.82); color: #ffd2c8; background: rgba(95, 34, 30, 0.88); }
.action-button--muted { color: var(--paper-dim); }
.action-button__label { display: block; font-size: 13px; font-weight: 800; }
.action-button__hint { display: block; margin-top: 4px; color: var(--paper-dim); font-size: 9px; line-height: 1.2; }

.decision-block { position: absolute; bottom: 24px; left: 50%; display: grid; width: 756px; gap: 8px; transform: translateX(-50%); }
.decision-block__title { color: var(--paper-dim); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-align: center; }

[data-phase="start"] .action-panel > .action-row,
[data-phase="intro"] .action-panel > .action-row,
[data-phase="shelter"] .action-panel > .action-row,
[data-phase="resolve"] .action-panel > .action-row { position: absolute; right: 28px; bottom: 28px; width: 318px; }
[data-phase="start"] .action-panel > .action-row { right: auto; bottom: 170px; left: 50%; width: 420px; transform: translateX(-50%); }
[data-phase="start"] .message-stack { bottom: 48px; width: 600px; }
[data-phase="intro"] .action-panel > .action-row { right: auto; bottom: 42px; left: 50%; width: 420px; transform: translateX(-50%); }

[data-phase="observe"] .deck-header,
[data-phase="confirm"] .deck-header,
[data-phase="breach"] .deck-header,
[data-phase="resolve"] .deck-header,
[data-phase="intro"] .deck-header,
[data-phase="shelter"] .deck-header,
[data-phase="result"] .deck-header { display: none; }
[data-phase="shelter"] .message-stack,
[data-phase="intro"] .message-stack { display: none; }

[data-phase="shelter"] .shelter-deck-card { display: none; }
[data-phase="intro"] .ots-readout { display: none; }

[data-phase="observe"] .action-panel > .action-row--two { position: absolute; top: 184px; right: 28px; display: grid; width: 248px; grid-template-columns: 1fr; gap: 8px; }
[data-phase="observe"] .action-panel > .action-row--two .action-button { height: 54px; }
[data-phase="observe"] .decision-block { bottom: 24px; }
[data-phase="observe"] .decision-block .action-button { text-align: center; }
[data-phase="confirm"] .message-stack { bottom: 112px; }
[data-phase="confirm"] .decision-block { width: 520px; }
[data-phase="breach"] .message-stack, [data-phase="resolve"] .message-stack { bottom: 112px; }
[data-phase="breach"] .decision-block { width: 520px; }

.breach-button { min-height: 86px; border-color: var(--red); color: #ffd2c8; background: radial-gradient(circle at center, rgba(168, 77, 67, 0.34), rgba(74, 26, 23, 0.9)); text-align: center; animation: breach-pulse 1.25s ease-in-out infinite; }
.breach-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.breach-progress span { height: 5px; background: rgba(167, 67, 56, 0.2); }
.breach-progress span[data-on="true"] { background: var(--red); box-shadow: 0 0 9px rgba(167, 67, 56, 0.7); }

.deck-footer { position: absolute; z-index: 2; bottom: 10px; left: 18px; display: flex; gap: 14px; color: rgba(166, 175, 165, 0.58); pointer-events: none; }
.frame-brand { position: absolute; z-index: 42; right: 18px; bottom: 10px; display: flex; align-items: baseline; gap: 10px; color: rgba(237, 241, 233, 0.7); pointer-events: none; }
.frame-brand strong { font-size: 12px; letter-spacing: 0.12em; }
.frame-brand span { color: rgba(166, 175, 165, 0.54); }
[data-phase="observe"] .frame-brand, [data-phase="confirm"] .frame-brand, [data-phase="breach"] .frame-brand { opacity: 0.45; }

.result-shell { position: absolute; top: 50%; left: 50%; display: grid; width: min(650px, calc(100% - 80px)); gap: 14px; padding: 28px; border: 1px solid var(--line); background: rgba(5, 9, 7, 0.94); box-shadow: var(--shadow); transform: translate(-50%, -50%); backdrop-filter: blur(16px); }
.result-title { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 0.98; }
.result-summary { margin: 0; color: var(--paper-dim); font-size: 13px; line-height: 1.5; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.result-stat { padding: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.result-stat strong { display: block; margin-top: 5px; color: var(--amber-bright); font-size: 24px; }
.result-trace { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.result-trace__item { display: grid; gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--line); color: var(--paper-dim); font-size: 10px; }
.result-trace__item b { color: var(--amber); letter-spacing: 0.1em; }
[data-phase="result"] .message-stack { display: none; }
[data-phase="result"] .peephole-hud { opacity: 0.32; }
[data-phase="result"] .scene-caption { opacity: 0; }

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

.portrait-overlay { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; align-content: center; gap: 10px; padding: 32px; color: var(--paper); background: #050806; text-align: center; }
.portrait-overlay__glyph { color: var(--amber-bright); font-size: 52px; }
.portrait-overlay strong { font-size: 25px; }
.portrait-overlay span { max-width: 260px; color: var(--paper-dim); font-size: 13px; }

@keyframes radio-signal { from { opacity: 0.35; transform: scaleY(0.55); } to { opacity: 1; transform: scaleY(1); } }
@keyframes wrong-breath { 0%, 38% { transform: translateY(0); } 43% { transform: translateY(-7px); } 48%, 100% { transform: translateY(1px); } }
@keyframes reaction-gaze { 0%, 100% { filter: saturate(0.62) contrast(1.18) brightness(0.76); transform: translateX(0); } 35% { filter: saturate(0.7) contrast(1.25) brightness(0.88); transform: translateX(3px); } }
@keyframes reaction-lean { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-3px, -2px) scale(1.035); } }
@keyframes reaction-stutter { 0%, 100% { transform: translate(0, 0); } 24% { transform: translate(2px, 0); } 48% { transform: translate(-2px, 1px); } 72% { transform: translate(1px, 0); } }
@keyframes reaction-hands { 0% { transform: translateY(7px); opacity: 0.2; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes reaction-distance { 0% { transform: scale(1); } 100% { transform: scale(0.92) translateY(5px); } }
@keyframes dust-pulse { 0% { transform: scale(0.8); opacity: 0; } 25% { opacity: 0.42; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes breach-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(167, 67, 56, 0); } 50% { box-shadow: 0 0 30px rgba(167, 67, 56, 0.35); } }
@keyframes scene-impact { 0%, 100% { transform: translate(0, 0); } 18% { transform: translate(calc(var(--impact-distance) * -1), var(--impact-distance)); } 36% { transform: translate(var(--impact-distance), calc(var(--impact-distance) * -0.75)); } 55% { transform: translate(calc(var(--impact-distance) * -0.66), calc(var(--impact-distance) * 0.5)); } 74% { transform: translate(calc(var(--impact-distance) * 0.44), calc(var(--impact-distance) * -0.33)); } }
.door-scene[data-impact-severity="1"] { --impact-distance: 2px; }
.door-scene[data-impact-severity="2"] { --impact-distance: 4px; }
.door-scene[data-impact-severity="3"] { --impact-distance: 7px; }
.door-scene.is-impacting { animation: scene-impact 520ms cubic-bezier(0.2, 0.75, 0.3, 1); }
.door-scene.is-impacting .impact-flash { opacity: 0.38; }

@media (orientation: portrait) and (max-width: 900px) {
  .portrait-overlay { display: grid; }
}

@media (max-width: 900px) and (orientation: landscape), (max-height: 700px) and (orientation: landscape) {
  body { overflow: auto; }
  .app-shell { min-height: 100svh; place-items: start center; }
  .game-frame { width: 100%; min-height: 640px; aspect-ratio: auto; }
  .shelter-hud--left { top: 16px; left: 16px; width: 240px; }
  .shelter-hud--right { top: 16px; right: 16px; width: 240px; }
  .hud-clock strong { font-size: 28px; }
  .shelter-resident-card { top: 16px; width: 280px; }
  .shelter-hotspot { min-width: 112px; min-height: 52px; padding: 8px 10px; }
  .shelter-hotspot--radio { left: 5%; }
  .shelter-hotspot--supplies { left: 31%; }
  .shelter-hotspot--residents { left: auto; right: 27%; }
  .shelter-hotspot--door { right: 5%; }
  .hud-radio { bottom: 74px; left: 16px; width: 240px; }
  .hud-inventory { bottom: 16px; width: 440px; }
  .inventory-slots span { min-height: 64px; }
  .shelter-log { right: 16px; bottom: 92px; width: 260px; }
  .peephole-shell { top: 11%; width: 430px; }
  .peephole-objective { top: 16px; left: 16px; width: 238px; }
  .peephole-system { top: 16px; right: 16px; }
  [data-phase="shelter"] .peephole-system { top: 132px; }
  .peephole-visitor { top: 82px; right: 16px; width: 244px; }
  [data-phase="observe"] .action-panel > .action-row--two { top: 176px; right: 16px; width: 230px; }
  [data-phase="observe"] .action-panel > .action-row--two .action-button { min-height: 54px; }
  .message-stack { bottom: 90px; width: min(560px, calc(100% - 300px)); }
  .decision-block { bottom: 20px; width: min(600px, calc(100% - 270px)); }
  [data-phase="shelter"] .action-panel > .action-row,
  [data-phase="resolve"] .action-panel > .action-row { right: 16px; bottom: 92px; width: 260px; }
  .frame-brand { display: none; }
  .deck-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .door-scene.is-impacting { animation: none !important; }
  .door-scene.is-impacting .impact-flash { opacity: 0.58; }
}