:root {
  --ink: #151018;
  --paper: #F2E7CF;
  --vermilion: #E94335;
  --mint: #8EF0C8;
  --violet: #6546A6;
  --gold: #F6B84A;
  --slate: #3E5261;
  --display: "Bricolage Grotesque", sans-serif;
  --serif: "Noto Serif", serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .25;
  background-image:
    radial-gradient(circle at 17% 23%, rgba(242, 231, 207, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 78% 61%, rgba(248, 184, 74, .14) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(101, 70, 166, .12) 48% 50%, transparent 51%);
  background-size: 19px 23px, 31px 29px, 100% 100%;
}

.proof-dock {
  position: fixed;
  right: 1.2rem;
  top: 1.2rem;
  width: 12rem;
  min-height: 4.5rem;
  z-index: 15;
  border: 1px dashed var(--gold);
  background: rgba(21, 16, 24, .78);
  padding: .7rem;
  transform: rotate(2deg);
}

.dock-label, .mono, .coordinate-tag, .stamp {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}

.proof-token {
  display: inline-block;
  margin: .35rem .2rem 0 0;
  padding: .25rem .45rem;
  border: 1px solid var(--mint);
  color: var(--mint);
  font-family: var(--mono);
  font-size: .62rem;
  transform: rotate(var(--tilt));
  animation: tokenDrift 900ms ease both;
}

.chapter {
  min-height: 100vh;
  position: relative;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 5vw, 6rem);
  overflow: hidden;
  border-bottom: 2px solid rgba(242, 231, 207, .15);
}

.chapter::before {
  content: attr(data-room);
  position: absolute;
  left: 1rem;
  top: 45%;
  font-family: var(--mono);
  color: var(--slate);
  writing-mode: vertical-rl;
  letter-spacing: .25em;
}

h1, h2 {
  font-family: var(--display);
  line-height: .9;
  margin: 0;
  letter-spacing: -.05em;
}

h1 { font-size: clamp(4.2rem, 16vw, 13rem); }
h2 { font-size: clamp(3rem, 8vw, 7rem); }
p { font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.65; }

.claim-gate {
  background:
    radial-gradient(circle at 50% 82%, rgba(246, 184, 74, .28), transparent 18rem),
    linear-gradient(165deg, var(--ink), #24162a 52%, var(--ink));
}

.torn-title {
  display: inline-block;
  max-width: 92vw;
  padding: 1rem 2rem 1.6rem;
  color: var(--ink);
  background: var(--paper);
  clip-path: polygon(0 9%, 8% 0, 18% 7%, 30% 0, 43% 8%, 56% 1%, 72% 10%, 88% 2%, 100% 12%, 96% 90%, 84% 100%, 70% 92%, 55% 100%, 41% 91%, 28% 100%, 15% 92%, 4% 100%);
  transform: rotate(-2.5deg);
  box-shadow: 1.2rem 1.1rem 0 var(--violet), -0.7rem .8rem 0 var(--vermilion);
}

.fork-scene { position: relative; min-height: 64vh; }
.route-svg { position: absolute; inset: -2rem 0 0; width: 100%; height: 100%; }
.route { fill: none; stroke-width: 10; stroke-dasharray: 2 28; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(246, 184, 74, .35)); }
.route-a { stroke: var(--mint); }
.route-b { stroke: var(--vermilion); }
.route-knot { fill: none; stroke: var(--gold); stroke-width: 8; stroke-dasharray: 580; stroke-dashoffset: 580; animation: knotDraw 4s ease-in-out infinite alternate; }
.route-swapped .route-a { stroke: var(--vermilion); }
.route-swapped .route-b { stroke: var(--mint); }

.sign {
  position: absolute;
  top: 17%;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: .9rem 1.2rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vw, 2.2rem);
  box-shadow: .45rem .45rem 0 var(--slate);
}
.sign-left { left: 14%; transform: rotate(-10deg); }
.sign-right { right: 12%; transform: rotate(8deg); }
.route-swapped .sign-left { transform: translateX(58vw) rotate(8deg); }
.route-swapped .sign-right { transform: translateX(-58vw) rotate(-10deg); }

.quest-marker {
  position: absolute;
  left: calc(50% - 2.1rem);
  bottom: 1rem;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 20px var(--gold));
}
.marker-flame, .marker-shadow { position: absolute; inset: 0; }
.marker-flame { background: var(--gold); clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.marker-shadow { background: var(--violet); clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.quest-marker::after { content: ""; position: absolute; inset: 22%; background: var(--ink); border-radius: 50%; }

.edge-note { position: absolute; max-width: 18rem; color: var(--gold); font-style: italic; }
.note-one { left: 3%; bottom: 22%; transform: rotate(-7deg); }
.note-two { right: 2%; bottom: 35%; transform: rotate(6deg); }

.bridge-room { background: linear-gradient(135deg, #1d1422, var(--ink) 55%, #101b1f); }
.paper-panel, .page, .map-half, .final-note, .reversal-card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--slate);
  box-shadow: .8rem .8rem 0 rgba(101, 70, 166, .8);
}
.paper-panel { width: min(45rem, 82vw); padding: 2rem; clip-path: polygon(2% 0, 100% 4%, 96% 94%, 8% 100%, 0 75%); }
.tilted-left { transform: rotate(-3deg); }
.stamp { color: var(--vermilion); text-decoration: line-through; text-decoration-thickness: .2rem; }
.coordinate-tag { position: absolute; right: 8%; top: 14%; color: var(--mint); }

.bridge-stage { position: absolute; right: 6%; bottom: 13%; width: min(50rem, 80vw); height: 16rem; }
.bridge-shadow { position: absolute; inset: 4rem 0 auto; height: 4rem; background: var(--violet); opacity: .62; transform: skewX(-28deg) translateX(-16rem); filter: blur(3px); transition: transform 1.1s ease; }
.bridge-planks { position: absolute; display: flex; gap: .5rem; left: 0; right: 0; top: 2rem; transform: perspective(700px) rotateX(42deg) rotateZ(-4deg); }
.bridge-planks span { flex: 1; padding: 2.8rem .3rem; background: var(--paper); color: var(--ink); border: 2px solid var(--slate); text-align: center; font-family: var(--mono); opacity: 0; transform: translateX(5rem); transition: opacity .5s ease, transform .6s ease; }
.bridge-room.active .bridge-shadow { transform: skewX(-28deg) translateX(0); }
.bridge-room.active .bridge-planks span { opacity: 1; transform: translateX(0); }
.bridge-planks span:nth-child(2) { transition-delay: .12s; }
.bridge-planks span:nth-child(3) { transition-delay: .24s; }
.bridge-planks span:nth-child(4) { transition-delay: .36s; }
.bridge-planks span:nth-child(5) { transition-delay: .48s; }
.bridge-planks span:nth-child(6) { transition-delay: .60s; }
.thread-knot, .false-key, .rule-tab, .flip-control {
  border: 1px solid var(--gold);
  background: var(--vermilion);
  color: var(--paper);
  padding: .85rem 1rem;
  font-family: var(--mono);
  text-transform: uppercase;
}
.thread-knot { position: absolute; right: 2rem; bottom: 0; }
.vertical-marginal { position: absolute; left: 7%; bottom: 8%; writing-mode: vertical-rl; color: var(--mint); }

.map-room { background: var(--paper); color: var(--ink); }
.split-map { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 74vh; transform: rotate(1.5deg); }
.map-half { padding: clamp(2rem, 5vw, 5rem); box-shadow: none; min-height: 70vh; }
.map-day { clip-path: polygon(0 0, 94% 5%, 100% 100%, 0 94%); }
.map-night { background: var(--ink); color: var(--paper); clip-path: polygon(6% 4%, 100% 0, 100% 94%, 0 100%); transform: translateY(2rem) rotate(2deg); }
.false-key { margin-top: 2rem; background: var(--slate); }
.compass { position: relative; width: 18rem; height: 18rem; margin: 2rem auto; border: 2px dashed var(--gold); border-radius: 50%; }
.needle { position: absolute; left: 50%; top: 50%; width: .55rem; height: 8rem; transform-origin: 50% 0; }
.needle-a { background: var(--mint); transform: rotate(28deg); }
.needle-b { background: var(--vermilion); transform: rotate(-38deg); }
.compass strong, .compass em { position: absolute; top: 1rem; font: 700 2rem var(--display); color: var(--gold); }
.compass strong { left: 2rem; } .compass em { right: 2rem; }
.mirror-caption { transform: rotate(180deg); color: var(--mint); }
.mountains { display: flex; justify-content: center; gap: -1rem; transform: rotate(180deg); }
.mountains span { width: 8rem; height: 8rem; background: var(--violet); clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-left: -2rem; }

.lantern-room { background: radial-gradient(circle at 15% 40%, rgba(142, 240, 200, .18), transparent 22rem), var(--ink); }
.lantern-copy { width: min(42rem, 82vw); margin-left: auto; transform: rotate(3deg); }
.lantern-grid { display: flex; justify-content: space-around; align-items: end; min-height: 48vh; }
.lantern { position: relative; width: 7rem; height: 10rem; border: 2px solid var(--gold); background: transparent; border-radius: 50% 50% 44% 44%; transition: transform .5s ease; }
.lantern span { position: absolute; inset: 18% 26%; background: var(--gold); border-radius: 50%; box-shadow: -5rem 7rem 2rem var(--violet), 4rem 6rem 2rem rgba(233, 67, 53, .55); }
.lantern:nth-child(2) { transform: translateY(7rem) rotate(-8deg); }
.lantern:nth-child(3) { transform: translateY(-2rem) rotate(8deg); }
.lantern:hover { transform: translateX(-1.5rem) rotate(-12deg); }
.lantern:hover span { box-shadow: 6rem 7rem 2rem var(--violet), -4rem 6rem 2rem rgba(233, 67, 53, .55); }
.erased-zone { color: transparent; -webkit-text-stroke: 1px var(--slate); border: 1px dashed var(--slate); padding: 2rem; width: min(34rem, 80vw); }

.gorge-room { background: linear-gradient(90deg, var(--violet) 0 30%, var(--ink) 30% 68%, var(--slate) 68%); display: grid; place-items: center; perspective: 1200px; }
.reversal-card { position: relative; width: min(46rem, 88vw); min-height: 26rem; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.2,1); background: transparent; box-shadow: none; border: 0; }
.reversal-card.flipped { transform: rotateY(180deg) rotate(-2deg); }
.card-face { position: absolute; inset: 0; padding: 3rem; backface-visibility: hidden; background: var(--paper); border: 2px solid var(--ink); box-shadow: 1rem 1rem 0 var(--gold); }
.card-back { transform: rotateY(180deg); background: var(--ink); color: var(--paper); border-color: var(--gold); }
.flip-control { position: absolute; bottom: 10%; right: 10%; background: var(--mint); color: var(--ink); }
.mask-pair { position: absolute; left: 7%; top: 18%; display: flex; gap: 1rem; }
.mask-pair span { width: 5rem; height: 7rem; background: var(--paper); border-radius: 50%; clip-path: polygon(0 15%, 100% 0, 88% 100%, 12% 85%); }
.mask-pair span:nth-child(2) { background: var(--vermilion); transform: scaleX(-1) translateY(3rem); }

.rulebook-room { background: var(--paper); color: var(--ink); }
.book-fold { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; transform: rotate(-2deg); }
.page { min-height: 62vh; padding: clamp(2rem, 5vw, 5rem); box-shadow: .6rem .6rem 0 var(--slate); }
.page-one-b { transform: rotate(180deg); background: #ead8b4; }
.page li { margin: 1.1rem 0; font-family: var(--mono); }
.page b { color: var(--vermilion); margin-left: 1rem; }
.rule-tab { position: absolute; left: 8%; bottom: 8%; background: var(--violet); }

.answer-room { background: radial-gradient(circle at 52% 52%, rgba(246, 184, 74, .12), transparent 22rem), var(--ink); display: grid; place-items: center; }
.loop-path { position: absolute; width: min(80vmin, 50rem); height: min(80vmin, 50rem); opacity: .88; }
.loop-path path, .loop-path circle { fill: none; stroke: var(--mint); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.answer-room.active .loop-path path, .answer-room.active .loop-path circle { animation: loopDraw 3s ease forwards; }
.final-note { position: relative; width: min(42rem, 88vw); padding: 2rem; transform: rotate(2deg); }

.collected { opacity: .35; filter: grayscale(.4); }

@keyframes knotDraw { to { stroke-dashoffset: 0; } }
@keyframes tokenDrift { from { opacity: 0; transform: translateY(1rem) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(var(--tilt)); } }
@keyframes loopDraw { to { stroke-dashoffset: 0; } }

@media (max-width: 760px) {
  .proof-dock { width: 9rem; font-size: .75rem; }
  .split-map, .book-fold { grid-template-columns: 1fr; }
  .page-one-b { transform: rotate(0); }
  .bridge-stage { position: relative; right: auto; bottom: auto; margin-top: 3rem; }
  .sign-left { left: 3%; }
  .sign-right { right: 3%; top: 35%; }
  .route-swapped .sign-left, .route-swapped .sign-right { transform: rotate(0); }
  .lantern-grid { flex-direction: column; align-items: center; gap: 2rem; }
}