:root {
  color-scheme: dark;
  --ink: #f4efe4;
  --muted: #c9c0b2;
  --line: rgba(244, 239, 228, 0.45);
  --bg: #05060a;
  --blue: rgba(186, 214, 255, 0.9);
  --crimson: rgba(196, 64, 72, 0.95);
  --serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  overflow: hidden;
  font-family: var(--serif);
}

button, a { font: inherit; color: inherit; }

button { cursor: pointer; }

img { display: block; max-width: none; }

[hidden] { display: none !important; }

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

.skip-link {
  position: fixed;
  left: 12px;
  top: -48px;
  z-index: 80;
  background: #111;
  color: var(--ink);
  padding: 10px 14px;
}

.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 1px solid #f3e6c4;
  outline-offset: 3px;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.45) 0.4px, transparent 0.45px);
  background-size: 3px 3px;
}

.hamburger,
.menu-scrim { display: none; }

.menu-drop { display: contents; }

.hamburger {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #f4efe4;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

.top-right,
#skip-intro,
#replay-intro,
#return-house {
  position: fixed;
  z-index: 30;
  display: none;
}

.top-right {
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

#skip-intro { top: 12px; left: 12px; }
#return-house { top: 12px; left: 12px; }
#replay-intro { top: 58px; left: 12px; }
body[data-act="hall"] #replay-intro { top: 12px; }

body[data-act="arrival"] #skip-intro { display: inline-flex; }
body[data-act="hall"] #replay-intro { display: inline-flex; }
html[data-returning="true"]:not([data-replay]) body[data-act="arrival"] #replay-intro { display: inline-flex; }
body[data-act="room"] #return-house { display: inline-flex; }
#chapters-open { display: none; }
body[data-act="hall"] #chapters-open,
body[data-act="room"] #chapters-open { display: inline-flex; }
#official-site { display: none; text-transform: none; letter-spacing: 0.04em; }
body[data-act="hall"] #official-site,
body[data-act="room"] #official-site { display: inline-flex; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(5, 6, 10, 0.45);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.listen-label {
  color: var(--ink);
  letter-spacing: 0.18em;
  font-family: var(--sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  min-height: 0;
  padding: 0.4rem 0 0;
  width: 100%;
  margin: 0;
}

.btn:hover {
  background: rgba(244, 239, 228, 0.08);
}

.looks button[aria-pressed="true"] {
  border-color: rgba(244, 210, 200, 0.8);
  background: rgba(90, 16, 24, 0.35);
}

.act {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.frame {
  position: relative;
  width: min(100vw, calc(100dvh * 1280 / 720));
  aspect-ratio: 1280 / 720;
  overflow: hidden;
  background: #000;
}

.world, .world-shift, .plate, .doors {
  position: absolute;
  inset: 0;
}

.plate, .plate-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.plate-crop img { position: absolute; inset: 0; }

.world { animation: drift 46s ease-in-out infinite alternate; }

.world-shift { transform: scale(1.02); }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1.018); }
  to { transform: translate3d(-10px, 6px, 0) scale(1.028); }
}

.fog, .glint, .dust, .vignette, .curtains, .petals, .tint, .room-shade {
  position: absolute;
  pointer-events: none;
}

.fog {
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(198, 208, 216, 0.2), transparent 74%);
  filter: blur(12px);
  animation: fog 26s ease-in-out infinite alternate;
}

@keyframes fog {
  from { transform: translateX(-3%); opacity: 0.75; }
  to { transform: translateX(4%); opacity: 1; }
}

.glint {
  left: 42%;
  top: 4%;
  width: 16%;
  height: 18%;
  background: radial-gradient(ellipse at center, rgba(255, 236, 206, 0.22), transparent 68%);
  mix-blend-mode: screen;
  animation: glint 8.5s ease-in-out infinite;
}

@keyframes glint {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

.dust { inset: 0; }

.dust::before, .dust::after {
  pointer-events: none;
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    12vw 20vh 0 rgba(255, 255, 255, 0.45),
    28vw 48vh 0 rgba(255, 255, 255, 0.3),
    46vw 18vh 0 rgba(210, 220, 255, 0.4),
    63vw 36vh 0 rgba(255, 255, 255, 0.28),
    78vw 22vh 0 rgba(255, 255, 255, 0.4),
    18vw 70vh 0 rgba(255, 255, 255, 0.25),
    70vw 64vh 0 rgba(255, 236, 210, 0.35),
    88vw 46vh 0 rgba(255, 255, 255, 0.3);
  animation: rise-dust 36s linear infinite;
}

.dust::after { animation-duration: 48s; animation-delay: -12s; opacity: 0.7; }

@keyframes rise-dust {
  from { transform: translateY(16px); }
  to { transform: translateY(-36px); }
}

.vignette {
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.58) 100%);
}

@media (orientation: portrait) {
  .frame {
    width: min(100vw, calc(100dvh * 720 / 1280));
    aspect-ratio: 720 / 1280;
  }
  .wide-only { display: none !important; }
}

@media (orientation: landscape) {
  .tall-only { display: none !important; }
}

.arrival-frame {
  transform: scale(0.78);
  filter: brightness(0.45) saturate(0.85);
  opacity: 0.2;
  animation: approach 7.5s ease-out forwards;
}

@keyframes approach {
  from { transform: scale(0.72); filter: brightness(0.28) saturate(0.8); opacity: 0.12; }
  to { transform: scale(0.9); filter: brightness(0.72) saturate(0.9); opacity: 0.92; }
}

body.is-crossing .arrival-frame {
  animation: cross 2.35s ease forwards;
}

@keyframes cross {
  0% { transform: scale(0.9); filter: brightness(0.72); opacity: 0.92; }
  58% { transform: scale(1.06); filter: brightness(1); opacity: 1; }
  80% { transform: scale(1.1); filter: brightness(0.15); opacity: 0.35; }
  100% { transform: scale(1.14); filter: brightness(0); opacity: 0; }
}

html[data-returning="true"]:not([data-replay]) .arrival-frame {
  animation: none;
  transform: scale(0.94);
  filter: brightness(0.7);
  opacity: 0.9;
}

html[data-returning="true"]:not([data-replay]) body.is-crossing .arrival-frame {
  animation: cross 0.7s ease forwards;
}

.arrival-copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 12vh 8vw 10vh;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.55) 72%);
}

.arrival-copy button { pointer-events: auto; }

.eyebrow, .kicker, .chapter-kicker, .themes {
  font-family: var(--sans);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0;
}

h1, .room-title {
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 6rem);
  letter-spacing: 0.045em;
  line-height: 0.95;
  margin: 0.35rem 0 0.8rem;
  text-transform: uppercase;
}

.lead, .hall-line, .welcome {
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  max-width: 28rem;
  margin: 0.4rem 0;
}

.kicker { color: var(--muted); margin: 0.8rem 0 1.4rem; }

.rise { opacity: 0; animation: rise 1.3s ease forwards; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.return-only { display: none; }
html[data-returning="true"]:not([data-replay]) .return-only { display: block; }
html[data-returning="true"]:not([data-replay]) .rise {
  animation: none;
  opacity: 1;
  transform: none;
}

.hall-line {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 25;
  text-align: center;
  width: min(34rem, calc(100% - 2rem));
  margin: 0;
  text-shadow: 0 2px 16px #000;
  pointer-events: none;
}

.door { position: absolute; }

.hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.door[data-theme="unknown"] .hit {
  background: radial-gradient(ellipse at 50% 16%, rgba(214, 230, 255, 0.55), transparent 46%);
}

.door[data-theme="unknown"][data-state="explored"] .hit {
  background: radial-gradient(ellipse at 50% 16%, rgba(232, 242, 255, 0.85), transparent 58%);
  box-shadow: 0 16px 28px rgba(150, 190, 255, 0.28);
}

.door[data-theme="cry"] .hit {
  background: radial-gradient(ellipse at 50% 16%, rgba(176, 48, 60, 0.5), transparent 50%);
}

.door[data-theme="cry"][data-state="explored"] .hit {
  background: radial-gradient(ellipse at 50% 16%, rgba(255, 170, 160, 0.78), transparent 58%);
  box-shadow: 0 16px 28px rgba(150, 30, 42, 0.32);
}

.door[data-state="sealed"] .hit { box-shadow: none; animation: flicker 14s ease-in-out infinite; }

@keyframes flicker {
  0%, 90%, 100% { box-shadow: none; }
  93% { box-shadow: inset 0 0 16px rgba(255, 214, 160, 0.16); }
  96% { box-shadow: none; }
}

.door::after { pointer-events: none; }

.door[data-row="lower"]::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -7%;
  height: 14%;
  opacity: 0;
}

.door[data-row="lower"][data-theme="unknown"]::after {
  opacity: 0.85;
  background: radial-gradient(ellipse at center, rgba(190, 216, 255, 0.55), transparent 70%);
}

.door[data-row="lower"][data-theme="cry"]::after {
  opacity: 0.8;
  background: radial-gradient(ellipse at center, rgba(190, 48, 56, 0.5), transparent 70%);
}

.door[data-row="lower"][data-state="explored"]::after { opacity: 1; filter: blur(0.2px); }

@media (hover: hover) and (pointer: fine) {
  .door[data-theme="unknown"]:hover .hit,
  .door[data-theme="unknown"]:focus-within .hit {
    background: radial-gradient(ellipse at 50% 16%, rgba(236, 244, 255, 0.95), transparent 62%);
    box-shadow: 0 0 26px rgba(170, 205, 255, 0.45);
  }
  .door[data-theme="cry"]:hover .hit,
  .door[data-theme="cry"]:focus-within .hit {
    background: radial-gradient(ellipse at 50% 16%, rgba(255, 186, 176, 0.9), transparent 62%);
    box-shadow: 0 0 26px rgba(170, 36, 48, 0.45);
  }
  .door:hover .card,
  .door:focus-within .card { opacity: 1; }
}

.door.is-armed .card { opacity: 1; }

.card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  min-width: 9.5rem;
  padding: 0.45rem 0.6rem 0.5rem;
  background: rgba(6, 7, 12, 0.78);
  border: 1px solid rgba(244, 239, 228, 0.28);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.door[data-edge="start"] .card { left: 0; transform: none; }
.door[data-edge="end"] .card { left: auto; right: 0; transform: none; }
.door[data-card="below"] .card {
  bottom: auto;
  top: calc(100% + 6px);
}

.card p {
  margin: 0;
  font-family: var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  white-space: nowrap;
}

.card .enter {
  pointer-events: auto;
  margin-top: 0.35rem;
  display: none;
}

.door.is-armed .enter,
.door:focus-within .enter { display: inline-flex; justify-content: center; }

.mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  bottom: 18%;
  pointer-events: none;
  animation: mote 1.7s ease-out forwards;
}

@keyframes mote {
  to { transform: translate(var(--dx), -70px); opacity: 0; }
}

.room-stage { position: absolute; inset: 0; overflow: hidden; background: #000; }

.planet-layer {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: #05060a top center / cover no-repeat;
}

body[data-step="threshold"] .planet-layer { display: block; }

.planet-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: transparent;
  filter: grayscale(1);
}

.plate-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.theme-unknown-only img { animation: ken 48s ease-out forwards; }
#room-stage[data-look="runway"] .theme-unknown-only img {
  filter: brightness(0.5) contrast(1.14) saturate(0.92);
}
#room-stage[data-look="runway"] .theme-unknown-only::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 10, 18, 0.22) 0%, rgba(6, 10, 18, 0.46) 30%, rgba(6, 10, 18, 0.4) 52%, transparent 70%);
}

@keyframes ken {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.theme-cry-only img {
  transform: scale(1.42);
  filter: sepia(0.45) saturate(2.6) hue-rotate(-32deg) brightness(0.58) contrast(1.14);
  animation: ken-cry 42s ease-out forwards;
}

.cry-wall-plate img { object-position: center 68%; }

@keyframes ken-cry {
  from { transform: scale(1.42); }
  to { transform: scale(1.5); }
}

#room-stage[data-theme="unknown"] .theme-cry-only { display: none; }
#room-stage[data-theme="cry"] .theme-unknown-only { display: none; }
#room-stage[data-look="street"] .cry-wall-plate,
#room-stage[data-look="room"] .cry-street-plate,
#room-stage[data-look="wall"] .cry-street-plate { opacity: 0; }
#room-stage[data-look="threshold"] .theme-unknown-only { filter: brightness(0.55); }
#room-stage.is-cut .cry-street-plate,
#room-stage.is-cut .cry-wall-plate { transition: none; }
.cry-street-plate, .cry-wall-plate { transition: opacity 1.6s ease; }

#room.is-walking #room-stage,
#room.is-walking .room-copy,
#room.is-walking .memory-door,
#room.is-walking .walk-line { opacity: 0; }

#room-stage, #room .room-copy, .memory-door, .walk-line { transition: opacity 0.9s ease; }

.memory-door {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(22vw, 148px);
  height: min(46vh, 280px);
  min-width: 88px;
  min-height: 168px;
  padding: 0;
  border: 1px solid rgba(255, 214, 170, 0.45);
  background:
    linear-gradient(to top, rgba(92, 36, 18, 0.55), rgba(255, 196, 140, 0.2) 46%, rgba(0, 0, 0, 0.15));
  box-shadow: 0 0 48px rgba(255, 168, 110, 0.28);
  color: rgba(255, 232, 214, 0.86);
}

.memory-door.is-thin,
.memory-door.is-shut {
  top: auto;
  bottom: 18vh;
  width: min(148px, calc((100vw - 5.25rem) / 4));
  min-width: 0;
  height: min(38vh, 260px);
  border-color: rgba(244, 239, 228, 0.28);
  background:
    linear-gradient(to right, rgba(255, 236, 220, 0.05), transparent 18% 82%, rgba(0, 0, 0, 0.28)),
    linear-gradient(to top, rgba(8, 6, 8, 0.86), rgba(62, 22, 26, 0.45));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.memory-door.is-shut { cursor: default; }

body[data-step="wall"] #door-film.is-thin,
body[data-step="threshold"] #door-film.is-thin { transform: translateX(calc(-200% - 1.875rem)); }
body[data-step="wall"] #walk-door.is-thin,
body[data-step="threshold"] #walk-door.is-thin { transform: translateX(calc(-100% - 0.625rem)); }
body[data-step="wall"] #door-club.is-thin,
body[data-step="threshold"] #door-club.is-thin { transform: translateX(0.625rem); }
body[data-step="wall"] #door-third.is-thin,
body[data-step="threshold"] #door-third.is-thin { transform: translateX(calc(100% + 1.875rem)); }

body[data-step="threshold"] #door-film.is-thin {
  transform: none;
  left: calc(50% - (var(--door-w) * 2) - 1.875rem);
}
body[data-step="threshold"] #walk-door.is-thin {
  transform: none;
  left: calc(50% - var(--door-w) - 0.625rem);
}
body[data-step="threshold"] #door-club.is-thin {
  transform: none;
  left: calc(50% + 0.625rem);
}
body[data-step="threshold"] #door-third.is-thin {
  transform: none;
  left: calc(50% + var(--door-w) + 1.875rem);
}

.memory-door.is-thin::before,
.memory-door.is-shut::before,
.memory-door.is-thin::after,
.memory-door.is-shut::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.memory-door.is-thin::before,
.memory-door.is-shut::before {
  inset: 12px;
  border: 1px solid rgba(244, 239, 228, 0.18);
}

.memory-door.is-thin::after,
.memory-door.is-shut::after {
  right: 18px;
  top: 52%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(244, 239, 228, 0.38);
}

body[data-step="threshold"],
body[data-step="wall"] {
  --door-w: min(185px, calc((100vw - 4.5rem) / 4));
  --door-h: min(47.5vh, 325px);
  --door-bottom: 4.5vh;
}

body[data-step="threshold"] {
  --door-w: min(157px, calc((100vw - 4.5rem) / 4 * 0.85));
  --door-h: min(24.65vh, 223px);
  --door-bottom: 36px;
}

body[data-step="threshold"] .memory-door.is-thin,
body[data-step="wall"] .memory-door.is-thin {
  bottom: var(--door-bottom);
  width: var(--door-w);
  height: var(--door-h);
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body[data-step="threshold"] .memory-door.is-thin::before,
body[data-step="threshold"] .memory-door.is-thin::after,
body[data-step="wall"] .memory-door.is-thin::before,
body[data-step="wall"] .memory-door.is-thin::after {
  content: none;
}

.door-face,
.door-glow,
.door-shadow,
.door-haze { display: none; }

body[data-step="threshold"] .memory-door.is-thin .door-face,
body[data-step="wall"] .memory-door.is-thin .door-face,
body[data-step="threshold"] .memory-door.is-thin .door-shadow,
body[data-step="wall"] .memory-door.is-thin .door-shadow,
body[data-step="threshold"] .memory-door.is-thin:not(.is-locked) .door-glow,
body[data-step="wall"] .memory-door.is-thin:not(.is-locked) .door-glow,
body[data-step="wall"] .memory-door.is-thin:not(.is-locked) .door-haze {
  display: block;
}

.door-face {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 6px solid #b8945a;
  background: linear-gradient(180deg, #3b2419 0%, #2a1a14 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.28),
    0 0 14px rgba(255, 207, 138, 0.28);
  transform-origin: left center;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.door-face::before {
  content: "";
  position: absolute;
  inset: 16px 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 12px 16px rgba(255, 255, 255, 0.05),
    inset 0 -14px 18px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.door-plaque {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 8px;
  right: 8px;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #b8945a;
}

.door-plaque:empty { display: none; }

.door-knob {
  position: absolute;
  z-index: 2;
  right: 14px;
  top: 56%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8efd4, #b8945a 46%, #6a5128 82%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.55);
}

.door-shadow {
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  bottom: -7px;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 72%);
  pointer-events: none;
}

.door-glow {
  position: absolute;
  z-index: 0;
  left: 4%;
  right: 4%;
  bottom: -22px;
  height: 42px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 207, 138, 0.4), transparent 70%);
  transition: opacity 0.5s ease, filter 0.5s ease;
}

.door-haze {
  position: absolute;
  z-index: 0;
  inset: -6% -14% 8%;
  background: radial-gradient(ellipse at center, rgba(255, 59, 78, 0.34), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

body[data-step="threshold"] .door-plaque,
body[data-step="wall"] .door-plaque { display: none; }

.door-photo,
.door-caption { display: none; }

body[data-step="threshold"] .memory-door.is-thin {
  mix-blend-mode: screen;
}

body[data-step="threshold"] .door-face {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform 300ms ease, filter 300ms ease;
}

body[data-step="threshold"] .door-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

body[data-step="threshold"] .door-caption {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  pointer-events: none;
}

body[data-step="threshold"] .door-face::before { content: none; }

body[data-step="threshold"] .door-knob { display: none; }

body[data-step="threshold"] .memory-door.is-thin .door-shadow,
body[data-step="threshold"] .memory-door.is-thin .door-glow,
body[data-step="threshold"] .memory-door.is-thin:not(.is-locked) .door-glow {
  display: none;
}

@keyframes unknown-door-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body[data-step="threshold"] #door-film.is-thin .door-face { animation: unknown-door-in 600ms ease both; }
body[data-step="threshold"] #walk-door.is-thin .door-face { animation: unknown-door-in 600ms ease 150ms both; }
body[data-step="threshold"] #door-club.is-thin .door-face { animation: unknown-door-in 600ms ease 300ms both; }
body[data-step="threshold"] #door-third.is-thin .door-face { animation: unknown-door-in 600ms ease 450ms both; }

body[data-step="threshold"] .memory-door.is-locked,
body[data-step="wall"] .memory-door.is-locked {
  opacity: 0.78;
  cursor: not-allowed;
}

body[data-step="threshold"] .memory-door.is-locked .door-face,
body[data-step="wall"] .memory-door.is-locked .door-face {
  filter: brightness(0.62) saturate(0.75);
  box-shadow: inset 0 1px 0 rgba(255, 236, 210, 0.12);
}

body[data-step="threshold"] .memory-door.is-locked .door-plaque,
body[data-step="wall"] .memory-door.is-locked .door-plaque { opacity: 0.55; }

body[data-step="wall"] .door-face {
  border-color: #c4866b;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.16), transparent 26%, transparent 62%, rgba(255, 220, 210, 0.08) 80%, transparent),
    linear-gradient(180deg, #34141a 0%, #1f0d10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 210, 0.22),
    0 0 12px rgba(255, 59, 78, 0.22);
}

body[data-step="wall"] .door-plaque { color: #c4866b; }

body[data-step="wall"] .door-knob {
  background: radial-gradient(circle at 35% 30%, #f6d7cb, #c4866b 46%, #7a4336 82%);
}

body[data-step="wall"] .memory-door.is-thin:not(.is-locked) .door-glow {
  background: radial-gradient(ellipse at center, rgba(255, 59, 78, 0.35), transparent 70%);
  animation: door-heartbeat 3s ease-in-out infinite;
}

body[data-step="wall"] .walk-line {
  bottom: calc(var(--door-bottom) + var(--door-h) + 0.9rem);
  opacity: 0.78;
}

body[data-step="wall"] .memory-door.is-locked:hover ~ .walk-line { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  body[data-step="threshold"] .memory-door.is-thin:not(.is-locked):hover .door-face,
  body[data-step="wall"] .memory-door.is-thin:not(.is-locked):hover .door-face {
    transform: perspective(800px) rotateY(-18deg);
  }

  body[data-step="threshold"] .memory-door.is-thin:not(.is-locked):hover .door-face,
  body[data-step="threshold"] .memory-door.is-thin:not(.is-locked):focus-visible .door-face {
    transform: translateY(-6px) scale(1.04);
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.45));
    box-shadow: none;
  }

  body[data-step="threshold"] .memory-door.is-thin:not(.is-locked):hover .door-glow {
    opacity: 1;
    filter: brightness(1.45);
  }

  body[data-step="wall"] .memory-door.is-thin:not(.is-locked):hover .door-face {
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 210, 0.3),
      0 0 22px rgba(255, 59, 78, 0.5);
  }

  body[data-step="wall"] .memory-door.is-thin:not(.is-locked):hover .door-glow {
    animation: none;
    opacity: 1;
    filter: brightness(1.35);
  }

  body[data-step="wall"] .memory-door.is-thin:not(.is-locked):hover .door-haze { opacity: 1; }
}

@keyframes door-heartbeat {
  0%, 100% { opacity: 0.42; }
  16% { opacity: 1; }
  32% { opacity: 0.5; }
  48% { opacity: 0.92; }
  70% { opacity: 0.46; }
}

.reel {
  position: fixed;
  inset: 0;
  z-index: 28;
  background: #000;
}

.reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.reel.is-mono video { filter: grayscale(1); }

#return-room {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
}

#walk-door-name {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 14%;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.wave-title {
  position: absolute;
  z-index: 3;
  top: 12vh;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 3vw;
  pointer-events: none;
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 7.6vw, 7.6rem);
  line-height: 0.9;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: rgba(244, 239, 228, 0.94);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 16px 42px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  animation: unknown-wave 18s ease-in-out infinite;
}

@keyframes unknown-wave {
  0% { transform: translate3d(-6vw, 0, 0); }
  25% { transform: translate3d(-1vw, -2.4vh, 0); }
  50% { transform: translate3d(6vw, 0.6vh, 0); }
  75% { transform: translate3d(1vw, -1.4vh, 0); }
  100% { transform: translate3d(-6vw, 0, 0); }
}

.walk-line {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  width: min(32rem, calc(100% - 2rem));
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: clamp(1.15rem, 2.5vw, 1.7rem);
  text-shadow: 0 2px 16px #000;
}

body[data-step="street"] .room-copy,
body[data-step="wall"] .room-copy,
body[data-step="threshold"] .room-copy {
  max-height: none;
  display: flex;
  justify-content: center;
  padding-bottom: 7vh;
}

body[data-step="street"] .room-shade,
body[data-step="wall"] .room-shade,
body[data-step="threshold"] .room-shade { height: 46%; }

#walk-next { margin-top: 1.1rem; }

.tint { inset: 0; }
#room-stage[data-theme="unknown"] .tint {
  background: #091628;
  mix-blend-mode: color;
  opacity: 0.62;
}
#room-stage[data-theme="cry"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 2, 6, 0.82), transparent);
}

#room-stage[data-theme="cry"] .tint {
  background: #7a0e1c;
  mix-blend-mode: multiply;
  opacity: 0.58;
}

.curtains, .petals { display: none; }
#room-stage[data-theme="cry"] .curtains,
#room-stage[data-theme="cry"] .petals { display: block; }

.curtains::before, .curtains::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16%;
  background: linear-gradient(to right, rgba(42, 4, 10, 0.55), transparent);
  animation: sway 16s ease-in-out infinite alternate;
}
.curtains::after {
  right: 0;
  left: auto;
  transform: scaleX(-1);
  animation-delay: -4s;
}

@keyframes sway {
  from { transform: translateX(0); }
  to { transform: translateX(10px); }
}

.petals span {
  position: absolute;
  top: -8%;
  width: 8px;
  height: 11px;
  border-radius: 70% 30% 70% 30%;
  background: rgba(150, 28, 42, 0.55);
  animation: petal 18s linear infinite;
}
.petals span:nth-child(1) { left: 12%; animation-duration: 19s; }
.petals span:nth-child(2) { left: 28%; animation-duration: 23s; animation-delay: -6s; }
.petals span:nth-child(3) { left: 47%; animation-duration: 17s; animation-delay: -3s; }
.petals span:nth-child(4) { left: 63%; animation-duration: 21s; animation-delay: -9s; }
.petals span:nth-child(5) { left: 76%; animation-duration: 18s; animation-delay: -4s; }
.petals span:nth-child(6) { left: 88%; animation-duration: 24s; animation-delay: -11s; }

@keyframes petal {
  from { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  12% { opacity: 0.8; }
  to { transform: translateY(110vh) rotate(220deg); opacity: 0.2; }
}

.room-shade {
  inset: auto 0 0 0;
  height: 68%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.28) 55%, transparent);
}

.room-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-height: 76%;
  overflow: auto;
  padding: 0.4rem 8vw 1.2rem;
}

.room-title { font-size: clamp(2rem, 4.6vw, 3.5rem); margin: 0.15rem 0; }
.subtitle {
  font-family: var(--sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.74rem;
  margin: 0 0 0.8rem;
}
.themes, .release { color: var(--muted); margin: 0 0 0.9rem; }
.story { max-width: 40rem; font-size: 1rem; line-height: 1.45; }
.story p { margin: 0 0 0.5rem; }
blockquote {
  margin: 0.55rem 0;
  font-style: italic;
  font-size: 1.08rem;
}
.actions, .looks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
  align-items: center;
  margin-top: 0.6rem;
}

.panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 6, 10, 0.72);
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.panel .card, .chapters-card, .film-card {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  transform: none;
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  z-index: auto;
  text-align: left;
  width: min(560px, 100%);
  background: rgba(10, 11, 16, 0.94);
  border: 1px solid rgba(244, 239, 228, 0.2);
  padding: 1.4rem 1.3rem 1.2rem;
}

#sealed { z-index: 56; }
#film { z-index: 60; background: rgba(0, 0, 0, 0.88); }

.film-card { width: min(960px, 100%); }
.film-card iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}
#film-close { margin-top: 0.8rem; }

#sealed-line {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-style: italic;
  margin: 0 0 1rem;
}

.chapters-card { max-height: min(78vh, 720px); overflow: auto; }
.chapters-card h2 {
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
}
#memory-count { margin: 0 0 0.8rem; color: var(--muted); font-style: italic; }
.chapter-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.8rem;
  width: 100%;
  margin: 0;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(244, 239, 228, 0.12);
  border-radius: 0;
  letter-spacing: 0.04em;
  text-transform: none;
  font-family: var(--serif);
  font-size: 1rem;
  background: transparent;
  color: var(--ink);
  min-height: 44px;
  padding: 0.75rem 0.2rem;
  cursor: default;
}
.chapter-row .num, .chapter-row .name, .chapter-row .status {
  font-family: var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.chapter-row .num { font-variant-numeric: tabular-nums; }
.chapter-row .name { letter-spacing: 0.12em; }
.chapter-row .meta {
  grid-column: 2;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: none;
  font-family: var(--serif);
  font-size: 0.92rem;
}
.chapter-row .explored[data-state="explored"] { color: var(--ink); }
#reset-memories, #chapters-close { margin-top: 0.8rem; margin-right: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .world, .world-shift { transform: none !important; }
  .rise, .arrival-frame { opacity: 1 !important; filter: none; transform: none; }
  html[data-returning="true"] .arrival-frame { filter: brightness(0.75); }
  .theme-cry-only img { transform: scale(1.42) !important; }
  .wave-title { animation: none !important; transform: none !important; }
  .door-face,
  .memory-door:hover .door-face,
  .memory-door:focus-visible .door-face { transform: none !important; }
  body[data-step="threshold"] .door-face { animation: none !important; }
  .door-glow { animation: none !important; }
  .planet-layer video { display: none !important; }
}

@media (max-width: 760px) {
  :root {
    --phone-frame-w: min(100vw, 100dvh * 720 / 1280);
    --phone-inset-y: max(12px, calc((100dvh - var(--phone-frame-w) * 1280 / 720) / 2 + 10px));
    --phone-inset-x: max(12px, calc((100vw - var(--phone-frame-w)) / 2 + 10px));
  }
  .menu-bar {
    position: static;
    height: 0;
    padding: 0;
    background: transparent;
  }
  .hamburger {
    display: flex;
    position: fixed;
    top: var(--phone-inset-y);
    right: var(--phone-inset-x);
    z-index: 36;
  }
  body[data-act="room"] .hamburger {
    top: 12px;
    right: 12px;
  }
  .menu-drop { display: none; }
  .menu-bar.is-open .menu-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 34;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
  }
  .menu-bar.is-open .menu-drop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    position: fixed;
    top: calc(var(--phone-inset-y) + 48px);
    right: var(--phone-inset-x);
    z-index: 35;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
  body[data-act="room"] .menu-bar.is-open .menu-drop {
    top: 60px;
    right: 12px;
  }
  .menu-bar.is-open .menu-drop .top-right,
  .menu-bar.is-open .menu-drop #skip-intro,
  .menu-bar.is-open .menu-drop #replay-intro,
  .menu-bar.is-open .menu-drop #return-house {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
  }
  .menu-bar.is-open .menu-drop .top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: auto;
  }

  .card p { white-space: normal; }

  body[data-step="runway"] .room-shade {
    height: 58%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.16) 55%, transparent);
  }
  body[data-step="room"] .room-shade {
    height: 92%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.82) 46%, rgba(0, 0, 0, 0.62) 70%, rgba(0, 0, 0, 0.22) 88%, transparent 100%);
  }
  body[data-step="runway"] .room-copy,
  body[data-step="room"] .room-copy {
    background: transparent;
    color: #f4efe4;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
    max-height: 78%;
    padding: 0.3rem 1.05rem 1rem;
  }
  body[data-step="runway"] .room-copy article,
  body[data-step="room"] .room-copy article {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.42rem;
  }
  body[data-step="runway"] .room-copy article > *:not(.actions),
  body[data-step="room"] .room-copy article > *:not(.actions) {
    display: block;
    position: static;
    width: 100%;
    margin: 0;
    color: #f4efe4;
  }
  body[data-step="runway"] .room-copy .chapter-kicker,
  body[data-step="room"] .room-copy .chapter-kicker,
  body[data-step="runway"] .room-copy .subtitle,
  body[data-step="room"] .room-copy .subtitle,
  body[data-step="runway"] .room-copy .release,
  body[data-step="room"] .room-copy .release,
  body[data-step="runway"] .room-copy .themes,
  body[data-step="room"] .room-copy .themes {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    line-height: 1.5;
  }
  body[data-step="runway"] .room-copy .room-title,
  body[data-step="room"] .room-copy .room-title {
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin: 0;
  }
  body[data-step="runway"] .room-copy .story,
  body[data-step="room"] .room-copy .story {
    font-size: 0.84rem;
    line-height: 1.4;
    color: #f4efe4;
  }
  body[data-step="runway"] .room-copy .story p,
  body[data-step="room"] .room-copy .story p {
    margin: 0 0 0.28rem;
    line-height: 1.4;
  }
  body[data-step="runway"] .room-copy blockquote,
  body[data-step="room"] .room-copy blockquote {
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0;
    color: #f4efe4;
  }
  body[data-step="runway"] .room-copy .actions,
  body[data-step="room"] .room-copy .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0;
    gap: 0.4rem 0.5rem;
  }
  body[data-step="runway"] #walk-next,
  body[data-step="room"] #walk-next { margin-top: 0.15rem; }
  body[data-step="runway"] .listen-label,
  body[data-step="room"] .listen-label {
    color: #f4efe4;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .walk-line {
    bottom: 12px;
    font-size: 0.92rem;
    line-height: 1.3;
    width: min(20rem, calc(100% - 1.5rem));
  }

  .wave-title {
    top: 7.5vh;
    font-size: clamp(1.55rem, 8.4vw, 2.7rem);
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    animation-name: unknown-wave-phone;
  }

  body[data-step="threshold"],
  body[data-step="wall"] {
    --door-w: min(42vw, 168px);
    --door-h: min(28vh, 210px);
    --door-bottom: 5vh;
  }

  body[data-step="threshold"] {
    --door-w: min(35.7vw, 143px);
    --door-h: min(13.2vh, 112px);
    --door-bottom: 28px;
  }

  body[data-step="threshold"] #door-film.is-thin,
  body[data-step="wall"] #door-film.is-thin,
  body[data-step="threshold"] #door-club.is-thin,
  body[data-step="wall"] #door-club.is-thin {
    transform: translateX(calc(-100% - 0.45rem));
  }

  body[data-step="threshold"] #walk-door.is-thin,
  body[data-step="wall"] #walk-door.is-thin,
  body[data-step="threshold"] #door-third.is-thin,
  body[data-step="wall"] #door-third.is-thin {
    transform: translateX(0.45rem);
  }

  body[data-step="threshold"] #door-film.is-thin,
  body[data-step="wall"] #door-film.is-thin,
  body[data-step="threshold"] #walk-door.is-thin,
  body[data-step="wall"] #walk-door.is-thin {
    bottom: calc(var(--door-bottom) + var(--door-h) + 0.85rem);
  }

  body[data-step="wall"] .walk-line {
    bottom: calc(var(--door-bottom) + (var(--door-h) * 2) + 1.7rem);
    font-size: 0.92rem;
  }

  .door-plaque { font-size: 0.56rem; letter-spacing: 0.1em; }
  .door-knob { width: 14px; height: 14px; right: 12px; }

  body[data-step="threshold"] #door-film.is-thin,
  body[data-step="threshold"] #door-club.is-thin {
    transform: none;
    left: calc(50% - var(--door-w) - 0.45rem);
  }

  body[data-step="threshold"] #walk-door.is-thin,
  body[data-step="threshold"] #door-third.is-thin {
    transform: none;
    left: calc(50% + 0.45rem);
  }

  body[data-step="threshold"] #door-film.is-thin,
  body[data-step="threshold"] #walk-door.is-thin {
    bottom: calc(var(--door-bottom) + var(--door-h) + 1.7rem);
  }
}

@keyframes unknown-wave-phone {
  0% { transform: translate3d(-2.5vw, 0, 0); }
  25% { transform: translate3d(0, -1.5vh, 0); }
  50% { transform: translate3d(2.5vw, 0.4vh, 0); }
  75% { transform: translate3d(0, -0.8vh, 0); }
  100% { transform: translate3d(-2.5vw, 0, 0); }
}