:root {
  color-scheme: dark;
  --black: #101614;
  --paper: #f3e6cd;
  --faint: #c7ba9f;
  --gold: #d9af69;
  --line: #e4bb764d;
  --serif: Georgia, "Times New Roman", serif;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--black);
  color: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #ffdc9b;
  outline-offset: 4px;
}
:focus:not(:focus-visible) { outline: none; }
h1, h2, p, figure { margin: 0; }

.shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
}
.backdrop, .plate, .motion, .vignette, .mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.backdrop { z-index: -1; overflow: hidden; background: #161c19; }
.plate { background: center / cover no-repeat; }
body[data-entering] :is(.plate, .motion) { animation: approach .66s ease-in both; transform-origin: 56% 72%; }
body[data-entering] :is(.gate, .prologue) { animation: leave .66s ease-in both; }
@keyframes approach { to { transform: scale(1.1); filter: brightness(.74); } }
@keyframes leave { to { opacity: 0; transform: translateY(.4rem); } }
.motion { object-fit: cover; opacity: 0; }
.motion.is-playing { opacity: 1; transition: opacity .3s ease; }
body:not([data-entering]) #content > section { animation: scene-arrival .22s ease-out both; }
@keyframes scene-arrival { from { opacity: .25; } to { opacity: 1; } }
body[data-art="gate"] .motion.is-playing ~ .mist { opacity: 0; }
.vignette {
  background: linear-gradient(180deg, #0a100fe0, #10161400 23%, #10161400 51%, #0b100ef2 100%),
    radial-gradient(ellipse at 50% 44%, #10161400 25%, #10161488 100%);
}
.mist {
  inset: auto -16% 0;
  width: 132%;
  height: 42%;
  background: radial-gradient(ellipse at center, #95b8a51c, transparent 64%);
  animation: fog 11s ease-in-out infinite alternate;
}
@keyframes fog { to { transform: translateX(12%) scale(1.2); } }
body:is([data-art="room"], [data-art="cameo"]) .plate, body[data-art="room"] .motion {
  left: auto;
  right: 0;
  width: 66%;
}
body:is([data-art="room"], [data-art="cameo"]) .vignette {
  background: linear-gradient(90deg, #101614 18%, #101614f2 33%, #1016148f 49%, transparent 72%),
    linear-gradient(180deg, #0a100fc9, transparent 25%, transparent 65%, #0b100ed9);
}
body[data-art="trap"] .plate { animation: lunge .42s ease-out both; }
body[data-art="trap"] .vignette {
  background: linear-gradient(180deg, #140a07a6, #24120f33 30%, #1c0c07b3 67%, #100a08f5);
}
@keyframes lunge { from { transform: scale(1); } to { transform: scale(1.16); } }

.topbar, .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: clamp(1.25rem, 4.2vw, 4.7rem);
}
.topbar { padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.topbar nav { display: flex; align-items: center; gap: .65rem; }
.wordmark, .utility {
  border: 0;
  color: var(--paper);
  background: transparent;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 0;
  text-align: left;
  font: 1.35rem/.95 var(--serif);
}
.wordmark small, .eyebrow, .edition, .chapter, .utility, .step-label {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 650;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wordmark small { display: block; color: var(--gold); margin-top: .4rem; font-size: .56rem; }
.crest { display: inline-flex; width: 2.3rem; color: var(--gold); flex: 0 0 auto; }
.crest svg { width: 100%; }
.utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  min-height: 2.7rem;
  border: 1px solid var(--line);
  padding: .35rem .85rem;
  background: #10161494;
}
.utility:hover { background: #30332a; border-color: var(--gold); }
.sound svg { width: 1.1rem; height: 1.1rem; }
.sound-on, .sound[aria-pressed="true"] .sound-off { display: none; }
.sound[aria-pressed="true"] .sound-on { display: block; }
.footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .65rem;
  margin-inline: 0;
  padding: .25rem clamp(1.25rem, 4.2vw, 4.7rem) max(.25rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--faint);
  background: var(--black);
}
.edition { display: flex; gap: .6rem; align-items: center; }
.live-dot { width: .36rem; height: .36rem; background: var(--gold); transform: rotate(45deg); }
.chapter { text-align: right; }
.chapter span { margin-inline: .25rem; color: var(--gold); }
.footer-meta {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 1rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0 .9rem; }
:is(.footer-legal, .footer-map) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--paper);
  font-size: .85rem;
  font-weight: 650;
  text-underline-offset: .2em;
  white-space: nowrap;
}
:is(.footer-legal, .footer-map):hover { color: var(--gold); }
.progress {
  grid-column: 2;
  display: flex;
  gap: .42rem;
}
.seal {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--faint);
  background: #151b16;
}
.seal.earned {
  border-color: var(--gold);
  color: #211a12;
  background: var(--gold);
  animation: reveal .32s ease both;
}

.game {
  display: grid;
  align-items: center;
  padding: clamp(1.8rem, 4vh, 4.1rem) clamp(1.25rem, 7vw, 8rem);
}
.game[data-screen="gate"] { align-items: end; padding-block: 25vh 3.6vh; }
.gate {
  width: min(100%, 33rem);
  margin-inline: auto;
  text-align: center;
}
.sign {
  position: relative;
  display: inline-block;
  padding: 1.15rem clamp(1.6rem, 5vw, 4rem) 1.35rem;
  margin-bottom: 1.1rem;
  border: 1px solid #d9af6987;
  background: linear-gradient(180deg, #261f18f2, #151914f7);
  box-shadow: 0 16px 46px #050906b8, inset 0 0 0 5px #181b17;
}
.sign::before, .sign::after {
  content: "";
  position: absolute;
  top: .57rem;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px #d9af6977;
}
.sign::before { left: .59rem; }
.sign::after { right: .59rem; }
.eyebrow { color: var(--gold); line-height: 1.65; }
.sign h1 {
  margin-top: .32rem;
  font: 400 clamp(2.55rem, 5.55vw, 5.1rem)/.94 var(--serif);
  letter-spacing: -.055em;
  text-shadow: 0 .1em .25em #070a06;
}
.gate .fine { margin-top: .78rem; }
.game[data-screen="intro"] { align-items: end; padding-block: clamp(4rem, 14vh, 8rem) 3.6vh; }
.prologue.panel {
  width: 100%;
  max-width: 43rem;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 1.7rem);
  border: 1px solid var(--line);
  background: #151b17ed;
  text-align: center;
}
.prologue h1 { font-size: clamp(1.6rem, 4vw, 2.65rem); margin-bottom: .65rem; }
.prologue-caption {
  min-height: 3em;
  margin: 0 auto 1rem;
  max-width: 47ch;
  color: var(--paper);
  font-size: clamp(1rem, 2.5vw, 1.22rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.prologue .controls { justify-content: center; }
.prologue-transcript { margin-top: .9rem; color: var(--faint); text-align: left; }
.prologue-transcript summary { cursor: pointer; color: var(--gold); font-size: .88rem; }
.prologue-transcript p { margin-top: .52rem; line-height: 1.48; }
.fine { color: var(--faint); font-size: .78rem; line-height: 1.5; }
.primary, .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: 2.85rem;
  padding: .68rem 1.12rem;
  border: 1px solid var(--gold);
  font-size: .86rem;
  font-weight: 720;
  line-height: 1.25;
}
.primary { color: #1f1b12; background: #dfb471; box-shadow: 0 .25rem 1rem #080a0680; }
.primary:hover { background: #f7d596; }
.secondary { color: var(--paper); background: #101614ae; border-color: var(--line); }
.secondary:hover { border-color: var(--gold); background: #2a2e25; }
.arrow { font-size: 1.2em; line-height: 1; }

.panel { max-width: 33rem; }
.scene-back {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  margin: 0 0 .55rem;
  padding: 0 .6rem;
  border: 1px solid var(--line);
  color: var(--gold);
  background: #151b17e6;
  font-size: .82rem;
}
.scene-back::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.scene-back:hover { color: var(--paper); border-color: var(--gold); }
.panel.wide { max-width: 41rem; }
.panel h1, .trap-card h1 {
  margin-block: .28rem 1rem;
  font: 400 clamp(2.35rem, 4.4vw, 4.25rem)/1.01 var(--serif);
  letter-spacing: -.05em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.panel .lead { color: var(--faint); font-size: 1rem; line-height: 1.55; margin-bottom: 1rem; }
.dialogue {
  display: grid;
  gap: .53rem;
  margin-bottom: 1.25rem;
  padding: .05rem 0 .07rem .85rem;
  border-left: 2px solid #d9af699c;
  font-size: clamp(.99rem, 1.5vw, 1.17rem);
  line-height: 1.45;
  text-shadow: 0 2px 5px #080e0a;
}
.dialogue p { animation: reveal .32s ease both; }
.narrator-question, .mission {
  color: #f1ca85;
  margin-block: 0 1rem;
  line-height: 1.4;
}
.narrator-question { font-weight: 680; }
.mission { font-size: .86rem; }
.download-status { color: #ffcc96; margin-top: .6rem; font-size: .85rem; }
.download-status:empty { display: none; }
.game[data-screen="farewell"] { padding-block: clamp(1.25rem, 3vh, 2rem); }
body[data-art="banquet"] .plate { opacity: 0; }
.banquet.panel { margin-inline: auto; max-width: 73rem; width: 100%; }
.banquet h1 { margin-bottom: .8rem; font-size: clamp(2.1rem, 4.4vw, 3.35rem); }
.banquet-frame { margin: 0; }
.banquet-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 66vh;
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--line);
  background: #0d1411;
}
.banquet-enlarge {
  display: inline-block;
  color: var(--gold);
  padding-block: .48rem;
  font-size: .78rem;
}
.banquet-quip { color: var(--faint); margin: .15rem 0 .9rem; line-height: 1.4; }
@keyframes reveal { from { opacity: 0; transform: translateY(.22rem); } }
.controls { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.choices { display: grid; gap: .52rem; }
.choices.goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  align-items: center;
  column-gap: .67rem;
  text-align: left;
  border: 1px solid var(--line);
  background: #141c17e8;
  color: var(--paper);
  padding: .63rem .82rem;
  min-height: 3.2rem;
}
.choice:hover { background: #2c3528; border-color: var(--gold); }
.choice .step-label, .choice .arrow { color: var(--gold); }
.choice strong { display: block; font-size: .88rem; line-height: 1.3; }
.choice small { display: block; color: var(--faint); margin-top: .18rem; line-height: 1.3; }
.trap-card { text-align: center; margin-inline: auto; max-width: 36rem; }
.trap-card h1 { text-shadow: 0 .08em .3em #170805; }
.trap-card .controls { justify-content: center; }
.trap-card .eyebrow { color: #ffbd99; }
.brief-list { margin-block: .85rem 1.4rem; padding-inline-start: 1.25rem; }
.brief-list li { padding: .45rem .25rem; line-height: 1.45; }
.brief-list li::marker { color: var(--gold); }
form.fields { display: grid; gap: .8rem; }
.fields label { display: grid; gap: .33rem; color: var(--paper); font-size: .88rem; }
input, textarea {
  min-width: 0;
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--paper);
  background: #101614e8;
}
textarea { resize: vertical; min-height: 6rem; }

dialog {
  width: min(calc(100% - 2rem), 62rem);
  max-height: 87svh;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--paper);
  border: 1px solid var(--line);
  background: #141b17;
  box-shadow: 0 1rem 5rem #000a;
}
dialog::backdrop { background: #090e0be8; }
.dialog-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.dialog-header h2 { font: 400 clamp(2.25rem, 4vw, 3.5rem)/1.1 var(--serif); }
.cast-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; }
.cast-list figure { border: 1px solid var(--line); background: #1c231e; }
.cast-list img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 38%; }
.cast-list figcaption { padding: .55rem .5rem; color: var(--paper); font-size: .76rem; }
.cast-farewell { margin-bottom: 1rem; }

@media (min-width: 701px) {
  body[data-art="room"][data-cinematic] :is(.plate, .motion) {
    top: min(6vh, 3.5rem);
    height: calc(100% - min(6vh, 3.5rem));
    background-position: 58% center;
    object-position: 58% center;
  }
}
@media (max-width: 700px) {
  .topbar { margin-inline: 1rem; }
  .topbar { padding-block: .82rem; }
  .wordmark { font-size: 1.15rem; gap: .47rem; }
  .wordmark small { font-size: .48rem; }
  .crest { width: 1.85rem; }
  .topbar nav { gap: .34rem; }
  .utility { padding-inline: .55rem; min-height: 2.45rem; letter-spacing: .08em; }
  .sound span { display: none; }
  .footer { grid-template-columns: auto auto minmax(0, 1fr); padding-inline: 1rem; }
  .footer-meta { column-gap: .6rem; }
  :is(.footer-legal, .footer-map) { font-size: .78rem; }
  .edition, .chapter { font-size: .54rem; letter-spacing: .09em; }
  .game[data-screen="gate"] { padding-block: 32vh 3vh; }
  body:is([data-art="room"], [data-art="cameo"]) .plate, body[data-art="room"] .motion { width: 100%; height: min(62vh, 38rem); }
  body:is([data-art="room"], [data-art="cameo"]) .vignette {
    background: linear-gradient(180deg, #0a100fad, transparent 17%, #10161455 29%, #101614 60%);
  }
  .game:not([data-screen="gate"], [data-screen="intro"], [data-screen="trap"], [data-screen="farewell"]) { align-items: end; padding-top: clamp(11rem, 28vh, 17rem); }
  .panel h1, .trap-card h1 { margin-bottom: .72rem; }
  .choices.goals { grid-template-columns: 1fr; }
  .footer:has(.progress:not([hidden])) .edition > span:last-child { display: none; }
}
@media (max-width: 360px) {
  .edition > span:last-child { display: none; }
}
@media (max-width: 520px) {
  .footer { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .footer-meta { display: contents; }
  .footer-meta .chapter { grid-column: 3; justify-self: end; }
  .footer-links { grid-column: 1 / -1; justify-content: end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}