:root {
  --plum: #4B244A;
  --moon: #86D8FF;
  --brass: #B68A4A;
  --void: #060710;
  --midnight: #171129;
  --wine: #8E2F46;
  --moss: #9AF6C1;
  --parchment: #E8DEC6;
  --title: 'Cormorant Garamond', serif;
  --clue: 'Fraunces', serif;
  --hand: 'Averia Serif Libre', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --reader: 'Lora', serif;
}

/* IBM Plex Mono is used sparingly for cipher strings and ledger marks. */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #060710;
}

body {
  margin: 0;
  color: #E8DEC6;
  font-family: var(--body);
  background:
    radial-gradient(circle at 50% 0%, rgba(134, 216, 255, .12), transparent 34rem),
    radial-gradient(circle at 5% 35%, rgba(75, 36, 74, .82), transparent 38rem),
    linear-gradient(160deg, #060710 0%, #171129 48%, #060710 100%);
  overflow-x: hidden;
}

button, a { font: inherit; }
button { cursor: pointer; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .21;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232, 222, 198, .34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 15%, rgba(182, 138, 74, .2) 0 1px, transparent 1.8px),
    radial-gradient(circle at 35% 75%, rgba(134, 216, 255, .18) 0 1px, transparent 1.5px);
  background-size: 90px 120px, 130px 150px, 70px 80px;
  mix-blend-mode: screen;
}

.wisp {
  width: 1rem;
  height: 1rem;
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 19;
  pointer-events: none;
  background: #86D8FF;
  box-shadow: 0 0 18px #86D8FF, 0 0 44px rgba(154, 246, 193, .55), 0 0 80px rgba(134, 216, 255, .25);
  opacity: .82;
  transition: width .4s ease, height .4s ease;
}

.wisp.listening { width: 1.45rem; height: 1.45rem; }

.moth-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.dust {
  position: absolute;
  width: .26rem;
  height: .26rem;
  border-radius: 50%;
  background: #E8DEC6;
  box-shadow: 0 0 12px #B68A4A;
  opacity: .46;
  animation: drift var(--speed) linear infinite;
}

@keyframes drift {
  from { transform: translate3d(var(--x), 105vh, 0) rotate(0deg); }
  to { transform: translate3d(calc(var(--x) + var(--sway)), -10vh, 0) rotate(360deg); }
}

.spiral-nav {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 18;
  display: grid;
  gap: .72rem;
}

.nav-rune {
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  color: #B68A4A;
  text-decoration: none;
  font: 500 .72rem var(--mono);
  border: 1px solid rgba(182, 138, 74, .36);
  border-radius: 50%;
  background: rgba(6, 7, 16, .58);
  box-shadow: inset 0 0 22px rgba(134, 216, 255, .08);
  transition: transform .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
}

.nav-rune.active {
  color: #86D8FF;
  border-color: #86D8FF;
  transform: translateX(-.4rem) scale(1.12) rotate(-12deg);
  box-shadow: 0 0 24px rgba(134, 216, 255, .4), inset 0 0 22px rgba(134, 216, 255, .16);
}

.labyrinth { position: relative; z-index: 2; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 8vw, 9rem);
  overflow: hidden;
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 5vw;
  border: 1px solid rgba(232, 222, 198, .12);
  border-radius: 2rem;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(6, 7, 16, .55), 0 0 90px rgba(6, 7, 16, .45);
}

.chamber::after {
  content: "";
  position: absolute;
  width: 52rem;
  height: 52rem;
  border-radius: 45% 55% 49% 51%;
  background: radial-gradient(circle, rgba(134, 216, 255, .09), transparent 61%);
  filter: blur(1px);
  z-index: -1;
  animation: breathe 9s ease-in-out infinite alternate;
}

@keyframes breathe {
  to { transform: scale(1.12) rotate(18deg); opacity: .58; }
}

h1, h2 {
  font-family: var(--title);
  font-weight: 500;
  margin: 0;
  line-height: .92;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 0 24px rgba(134, 216, 255, .2);
}

h1 {
  font-size: clamp(4.5rem, 15vw, 14rem);
  color: #E8DEC6;
  animation: moonWrite 2.8s ease both;
}

h2 {
  max-width: 980px;
  font-size: clamp(3rem, 8vw, 7.5rem);
  color: #E8DEC6;
}

@keyframes moonWrite {
  from { opacity: 0; filter: blur(18px); letter-spacing: .24em; }
  to { opacity: 1; filter: blur(0); letter-spacing: .08em; }
}

.room-kicker, .room-plate, .clue-heading {
  font-family: var(--clue);
  color: #B68A4A;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.room-kicker { margin: 0 0 1rem; }

.room-plate {
  position: absolute;
  top: clamp(2rem, 5vw, 4.5rem);
  left: clamp(1.5rem, 7vw, 7rem);
  padding: .8rem 1.1rem;
  border: 1px solid rgba(182, 138, 74, .48);
  border-radius: 999px;
  background: rgba(6, 7, 16, .52);
  box-shadow: inset 0 0 20px rgba(182, 138, 74, .1);
  font-size: .78rem;
}

.riddle-line, .annotation, .riddle-fragment, .mirror-caption {
  font-family: var(--hand);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: rgba(232, 222, 198, .78);
  text-align: center;
  max-width: 760px;
  line-height: 1.55;
}

.threshold { background: radial-gradient(circle at 50% 58%, rgba(75, 36, 74, .44), transparent 34rem); }

.threshold-lens {
  position: absolute;
  width: 72vmin;
  height: 72vmin;
  border-radius: 50%;
  border: 1px solid rgba(134, 216, 255, .22);
  box-shadow: inset 0 0 80px rgba(134, 216, 255, .08), 0 0 110px rgba(75, 36, 74, .34);
}

.keyhole {
  position: absolute;
  top: 23%;
  width: 4rem;
  height: 8rem;
  background: linear-gradient(#060710 0 42%, transparent 42%), radial-gradient(circle at 50% 28%, #060710 0 1.45rem, transparent 1.48rem), linear-gradient(90deg, transparent 25%, #060710 25% 75%, transparent 75%);
  filter: drop-shadow(0 0 30px rgba(134, 216, 255, .42));
}

.keyhole-glow {
  position: absolute;
  left: 50%;
  top: 25%;
  width: 1.2rem;
  height: 1.2rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #9AF6C1;
  box-shadow: 0 0 26px #9AF6C1, 0 0 80px #86D8FF;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.4); opacity: .65; } }

.threshold-seal, .clue-object {
  border: 1px solid rgba(182, 138, 74, .55);
  color: #E8DEC6;
  background: rgba(23, 17, 41, .72);
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease, background .5s ease;
}

.threshold-seal {
  margin-top: 2rem;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  font-family: var(--hand);
}

.clue-object:hover, .clue-object.collected {
  transform: translateY(-.35rem) rotate(-1deg);
  border-color: #86D8FF;
  box-shadow: 0 0 32px rgba(134, 216, 255, .34), inset 0 0 26px rgba(154, 246, 193, .11);
}

.collected-note {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .55s ease, transform .55s ease;
  color: #9AF6C1;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  margin-top: 1rem;
}

.collected-note.visible { opacity: 1; transform: translateY(0); }

.scroll-whisper {
  position: absolute;
  bottom: 2.2rem;
  font-family: var(--hand);
  color: rgba(182, 138, 74, .75);
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob { 50% { transform: translateY(.55rem); } }

.key-hall { background: radial-gradient(circle at 25% 35%, rgba(142, 47, 70, .2), transparent 28rem); }

.key-vault {
  position: absolute;
  inset: 14% 10%;
  pointer-events: none;
}

.skeleton-key {
  position: absolute;
  width: 12rem;
  height: 3rem;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.skeleton-key::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  width: 2.4rem;
  height: 2.4rem;
  border: .35rem solid #B68A4A;
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(182, 138, 74, .25);
}

.skeleton-key::after {
  content: "";
  position: absolute;
  left: 2.6rem;
  top: 1.45rem;
  width: 8rem;
  height: .32rem;
  background: #B68A4A;
  box-shadow: 5.8rem .6rem 0 #B68A4A, 6.8rem -.6rem 0 #B68A4A;
}

.skeleton-key span {
  position: absolute;
  left: 3.3rem;
  top: .72rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #86D8FF;
  box-shadow: 0 0 20px #86D8FF;
}

.key-one { left: 4%; top: 20%; transform: rotate(-24deg); }
.key-two { right: 7%; top: 14%; transform: rotate(18deg); opacity: .68; }
.key-three { right: 17%; bottom: 18%; transform: rotate(-8deg); opacity: .5; }

.drawer-card {
  max-width: 720px;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(232, 222, 198, .14);
  background: linear-gradient(140deg, rgba(23, 17, 41, .9), rgba(75, 36, 74, .42));
  border-radius: 2rem;
  box-shadow: 0 20px 90px rgba(6, 7, 16, .7);
}

.drawer-card h2 { font-size: clamp(2.5rem, 6vw, 5.5rem); text-align: left; }
.drawer-card p:last-child { font-family: var(--reader); line-height: 1.8; color: rgba(232, 222, 198, .74); }

.brass-peephole {
  position: absolute;
  right: 17%;
  bottom: 22%;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: radial-gradient(circle, #060710 0 32%, #B68A4A 34% 48%, #4B244A 50%);
  box-shadow: 0 0 26px rgba(182, 138, 74, .35);
}

.brass-peephole::after {
  content: attr(data-peep);
  position: absolute;
  right: 120%;
  top: 50%;
  width: 18rem;
  transform: translateY(-50%) scale(.8);
  opacity: 0;
  color: #86D8FF;
  font-family: var(--hand);
  transition: opacity .45s ease, transform .45s ease;
}

.brass-peephole:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }

.observatory { background: radial-gradient(circle at 70% 34%, rgba(134, 216, 255, .12), transparent 32rem); }

.cracked-lens {
  position: absolute;
  width: min(64vmin, 38rem);
  height: min(64vmin, 38rem);
  border-radius: 50%;
  border: 1px solid rgba(134, 216, 255, .35);
  box-shadow: inset 0 0 65px rgba(134, 216, 255, .13), 0 0 75px rgba(134, 216, 255, .09);
  transform: rotate(var(--lens-rotate, 0deg));
  transition: transform .4s ease;
}

.lens-ring {
  position: absolute;
  inset: 13%;
  border: 1px dashed rgba(232, 222, 198, .24);
  border-radius: 50%;
}

.lens-crack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #86D8FF, transparent);
  transform-origin: left;
}
.c1 { transform: rotate(23deg); }
.c2 { transform: rotate(118deg); }
.c3 { transform: rotate(245deg); }

.moth-specimen {
  position: relative;
  width: 13rem;
  height: 8rem;
  border: 0;
  background: transparent;
  margin-top: 3rem;
}

.wing {
  position: absolute;
  top: 1rem;
  width: 5.4rem;
  height: 5.8rem;
  background: radial-gradient(circle at 35% 35%, #86D8FF, #E8DEC6 24%, #B68A4A 25% 29%, rgba(232, 222, 198, .18) 31%), linear-gradient(135deg, rgba(232, 222, 198, .92), rgba(75, 36, 74, .45));
  border: 1px solid rgba(232, 222, 198, .45);
  transition: transform .4s ease;
}
.wing.left { left: 1.2rem; border-radius: 80% 12% 70% 18%; transform-origin: right center; }
.wing.right { right: 1.2rem; border-radius: 12% 80% 18% 70%; transform-origin: left center; }
.body { position: absolute; left: 50%; top: 1.2rem; width: .7rem; height: 5.8rem; border-radius: 999px; background: #B68A4A; transform: translateX(-50%); }
.moth-specimen:hover .wing.left, .moth-specimen.collected .wing.left { transform: rotate(-16deg); }
.moth-specimen:hover .wing.right, .moth-specimen.collected .wing.right { transform: rotate(16deg); }

.constellation {
  position: absolute;
  inset: 15% 12%;
  pointer-events: none;
}
.constellation span {
  position: absolute;
  color: #86D8FF;
  font-family: var(--title);
  font-size: 3rem;
  text-shadow: 0 0 22px #86D8FF;
  opacity: .18;
  transition: opacity .6s ease, transform .6s ease;
}
.constellation span:nth-child(1) { left: 15%; top: 18%; }
.constellation span:nth-child(2) { left: 37%; top: 32%; }
.constellation span:nth-child(3) { left: 52%; top: 17%; }
.constellation span:nth-child(4) { left: 71%; top: 43%; }
.constellation span:nth-child(5) { left: 82%; top: 12%; }
.constellation.revealed span { opacity: .85; transform: scale(1.2); }

.mirror-room { background: radial-gradient(circle at 50% 50%, rgba(6, 7, 16, .2), #060710 70%); }
.blackwater-mirror {
  position: relative;
  width: min(76vmin, 42rem);
  height: min(76vmin, 42rem);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 48% 45%, rgba(134, 216, 255, .16), rgba(23, 17, 41, .8) 45%, #060710 72%);
  border: 1rem solid rgba(182, 138, 74, .24);
}
.blackwater-mirror::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle, transparent 0 18px, rgba(134, 216, 255, .08) 19px 20px);
  transform: scale(.4);
  opacity: 0;
  transition: transform .8s ease, opacity .8s ease;
}
.blackwater-mirror.disturbed::before { transform: scale(1.3); opacity: 1; }
.mirror-letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 clamp(8rem, 26vw, 18rem) var(--title);
  color: #86D8FF;
  filter: blur(18px);
  opacity: 0;
  transition: opacity .9s ease, filter .9s ease;
}
.blackwater-mirror.disturbed .mirror-letter, .blackwater-mirror.collected .mirror-letter { opacity: .72; filter: blur(1px); }
.water-ring { position: absolute; inset: 35%; border: 1px solid rgba(134, 216, 255, .38); border-radius: 50%; opacity: 0; }
.disturbed .water-ring { animation: ripple 1.5s ease-out; }
.disturbed .r2 { animation-delay: .18s; }
.disturbed .r3 { animation-delay: .36s; }
@keyframes ripple { from { transform: scale(.2); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

.moss-stair { background: radial-gradient(circle at 20% 78%, rgba(154, 246, 193, .13), transparent 31rem); }
.stair-stack {
  display: grid;
  width: min(82vw, 740px);
  gap: .75rem;
  transform: perspective(900px) rotateX(14deg);
}
.cipher-step {
  height: clamp(4rem, 9vw, 6.6rem);
  border: 1px solid rgba(154, 246, 193, .4);
  color: #9AF6C1;
  font: 500 clamp(1.5rem, 4vw, 3rem) var(--mono);
  background: linear-gradient(90deg, rgba(23, 17, 41, .94), rgba(75, 36, 74, .5));
  box-shadow: inset 0 -20px 28px rgba(154, 246, 193, .06);
  transform: translateX(var(--step-shift, 0));
}
.cipher-step:nth-child(1) { --step-shift: -5rem; }
.cipher-step:nth-child(2) { --step-shift: -2.5rem; }
.cipher-step:nth-child(4) { --step-shift: 2.5rem; }
.cipher-step:nth-child(5) { --step-shift: 5rem; }
.cipher-step.collected { background: linear-gradient(90deg, rgba(154, 246, 193, .22), rgba(75, 36, 74, .74)); }

.thread-library { background: radial-gradient(circle at 62% 54%, rgba(142, 47, 70, .18), transparent 36rem); }
.thread-map {
  position: relative;
  width: min(86vw, 980px);
  height: min(60vh, 540px);
  border: 1px solid rgba(232, 222, 198, .12);
  border-radius: 1.6rem;
  background: linear-gradient(135deg, rgba(6, 7, 16, .72), rgba(75, 36, 74, .34));
  box-shadow: inset 0 0 70px rgba(6, 7, 16, .55);
}
.thread-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thread-path {
  fill: none;
  stroke: #8E2F46;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  filter: drop-shadow(0 0 10px rgba(142, 47, 70, .75));
  transition: stroke-dashoffset 1.9s ease;
}
.thread-path.second { stroke: #B68A4A; transition-delay: .35s; }
.thread-map.unwound .thread-path { stroke-dashoffset: 0; }
.wax-seal {
  position: absolute;
  left: 48%;
  top: 44%;
  width: 6rem;
  height: 6rem;
  border-radius: 48% 52% 45% 55%;
  border: 0;
  color: #E8DEC6;
  background: #8E2F46;
  font: 500 3rem var(--title);
  box-shadow: 0 0 35px rgba(142, 47, 70, .45), inset 0 0 20px rgba(6, 7, 16, .28);
}
.node { position: absolute; width: .85rem; height: .85rem; border-radius: 50%; background: #86D8FF; box-shadow: 0 0 16px #86D8FF; }
.n1 { left: 7%; bottom: 16%; } .n2 { left: 39%; top: 32%; } .n3 { right: 28%; top: 43%; } .n4 { right: 10%; top: 18%; }

.final-door { background: radial-gradient(circle at 50% 44%, rgba(134, 216, 255, .12), transparent 30rem); }
.nested-doors { position: relative; display: grid; place-items: center; }
.door-frame {
  position: relative;
  width: min(72vw, 38rem);
  height: min(82vh, 44rem);
  border-radius: 18rem 18rem 1.4rem 1.4rem;
  border: 2px solid #B68A4A;
  background: linear-gradient(180deg, rgba(75, 36, 74, .86), rgba(6, 7, 16, .96));
  box-shadow: 0 0 70px rgba(182, 138, 74, .24), inset 0 0 90px rgba(6, 7, 16, .7);
  overflow: hidden;
}
.door-frame.open { transform: translateY(-.35rem) scale(1.02); background: radial-gradient(circle at 50% 50%, rgba(154, 246, 193, .3), rgba(23, 17, 41, .93) 46%, #060710 88%); }
.question-mark {
  font: 500 clamp(10rem, 30vw, 22rem) var(--title);
  color: #86D8FF;
  text-shadow: 0 0 32px #86D8FF;
}
.small-door {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  width: 22%;
  height: 25%;
  border-radius: 5rem 5rem .5rem .5rem;
  border: 1px solid #9AF6C1;
  background: rgba(6, 7, 16, .78);
  box-shadow: inset 0 0 22px rgba(154, 246, 193, .18);
}
.final-door h2, .final-door .riddle-line, .clue-ledger, .answer-panel { position: relative; z-index: 2; }
.final-riddle { margin-top: 1rem; }
.clue-ledger {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  max-width: 920px;
  margin-top: 1.4rem;
}
.clue-ledger span {
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(182, 138, 74, .32);
  color: rgba(232, 222, 198, .52);
  font: .72rem var(--mono);
  transition: color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.clue-ledger span.found { color: #9AF6C1; border-color: #9AF6C1; box-shadow: 0 0 18px rgba(154, 246, 193, .22); }
.answer-panel {
  margin-top: 1.4rem;
  opacity: 0;
  transform: translateY(1rem);
  color: #86D8FF;
  font: clamp(1.4rem, 3vw, 2.3rem) var(--hand);
  transition: opacity .7s ease, transform .7s ease;
}
.answer-panel.visible { opacity: 1; transform: translateY(0); }

body.has-clue .spiral-nav { filter: drop-shadow(0 0 14px rgba(154, 246, 193, .25)); }

@media (max-width: 760px) {
  .spiral-nav { right: .7rem; gap: .4rem; }
  .nav-rune { width: 1.75rem; height: 1.75rem; }
  .room-plate { left: 1rem; top: 1.2rem; }
  .chamber { padding-inline: 1rem; }
  .key-vault { opacity: .6; }
  .drawer-card h2 { text-align: center; }
  .cipher-step:nth-child(n) { --step-shift: 0; }
}