:root {
  /* Compliance typography tokens: IBM Plex Sans KR** for explanatory text */
  --blackout: #070707;
  --paper: #F3E6C8;
  --seal: #8B1E2D;
  --blue: #26364A;
  --brass: #D0A243;
  --olive: #2D312A;
  --ash: #D8D0BF;
  --route-progress: 0;
  --seal-rotation: -7deg;
  --stain-x: 28%;
  --stain-y: 36%;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--blackout);
}

body {
  margin: 0;
  color: var(--ash);
  background: var(--blackout);
  font-family: "IBM Plex Sans KR", Inter, sans-serif;
  overflow-x: hidden;
  cursor: crosshair;
}

button { font: inherit; color: inherit; }

.cloth-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(38, 54, 74, .36), transparent 28%),
    radial-gradient(circle at 77% 12%, rgba(139, 30, 45, .13), transparent 22%),
    repeating-linear-gradient(35deg, rgba(243, 230, 200, .025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(92deg, rgba(216, 208, 191, .018) 0 1px, transparent 1px 5px),
    var(--blackout);
  mix-blend-mode: normal;
}

.quest {
  position: relative;
  z-index: 1;
}

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 72px);
  isolation: isolate;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(216, 208, 191, .14);
  clip-path: polygon(0 3%, 95% 0, 100% 89%, 4% 100%);
  pointer-events: none;
}

.paper,
.corridor-paper,
.scrap,
.memory-card {
  color: var(--blackout);
  background:
    radial-gradient(circle at var(--stain-x) var(--stain-y), rgba(139, 30, 45, .12), transparent 19%),
    radial-gradient(circle at 78% 72%, rgba(45, 49, 42, .16), transparent 24%),
    repeating-linear-gradient(0deg, rgba(7, 7, 7, .035) 0 1px, transparent 1px 13px),
    var(--paper);
  box-shadow: 0 30px 80px rgba(0,0,0,.58), inset 0 0 0 1px rgba(7,7,7,.12);
}

.chapter-seal {
  background: radial-gradient(circle at 50% 43%, rgba(38, 54, 74, .28), transparent 38%);
}

.first-paper {
  width: min(76vw, 780px);
  height: min(64vh, 490px);
  position: relative;
  display: grid;
  place-items: center;
  transform: perspective(900px) rotateX(7deg) rotateZ(-2deg) scale(.92);
  clip-path: polygon(2% 5%, 94% 0, 100% 92%, 8% 100%);
  transition: transform 1000ms cubic-bezier(.2,.8,.18,1), clip-path 1000ms ease;
}

body.unfolded .first-paper {
  transform: perspective(900px) rotateX(0deg) rotateZ(.5deg) scale(1);
  clip-path: polygon(0 0, 100% 2%, 98% 100%, 1% 96%);
}

.fold {
  position: absolute;
  inset-block: 0;
  width: 1px;
  background: rgba(7,7,7,.18);
  box-shadow: 16px 0 34px rgba(38,54,74,.23), -10px 0 28px rgba(255,255,255,.18);
}
.fold-a { left: 34%; transform: rotate(-1deg); }
.fold-b { left: 68%; transform: rotate(1.8deg); }

.red-string {
  position: absolute;
  height: 9px;
  width: 118%;
  background: repeating-linear-gradient(90deg, var(--seal) 0 7px, #6d1320 7px 12px);
  box-shadow: 0 8px 10px rgba(7,7,7,.35);
}
.red-string.diagonal { transform: rotate(-17deg); }

.stamp-title {
  font-family: "Noto Serif KR", serif;
  font-size: clamp(48px, 10vw, 132px);
  font-weight: 900;
  color: var(--seal);
  transform: rotate(var(--seal-rotation));
  letter-spacing: -.08em;
  text-shadow: 2px 1px 0 rgba(7,7,7,.18), -2px 0 rgba(139,30,45,.25);
  mix-blend-mode: multiply;
  animation: inkPulse 3s ease-in-out infinite;
}

.marginal {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  font-family: "Song Myung", serif;
  color: var(--olive);
  transform: rotate(-3deg);
}

.artifact-button {
  position: absolute;
  right: 30px;
  bottom: 28px;
  border: 1px solid var(--seal);
  background: rgba(139, 30, 45, .08);
  color: var(--seal);
  padding: 11px 16px;
  font-family: "IBM Plex Sans KR", sans-serif;
  letter-spacing: .04em;
  transition: transform .25s ease, background .25s ease;
}
.artifact-button:hover { transform: rotate(-2deg) translateY(-2px); background: rgba(139, 30, 45, .16); }

.seal-mark,
.stamp-impact,
.release-stamp,
.tiny-stamp {
  font-family: "Black Han Sans", sans-serif;
  color: var(--seal);
  border: 4px solid currentColor;
  padding: .1em .28em;
}

.seal-mark {
  position: absolute;
  top: 28px;
  right: 42px;
  font-size: 36px;
  transform: rotate(12deg) scale(.94);
  opacity: .82;
}

.brass-token {
  position: fixed;
  left: 7vw;
  top: 53vh;
  z-index: 12;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--brass);
  background: radial-gradient(circle at 35% 30%, #ffe19b, var(--brass) 45%, #806221 100%);
  border-radius: 50%;
  box-shadow: 16px 22px 24px rgba(0,0,0,.5), 0 0 0 5px rgba(208,162,67,.14);
  transform: translate3d(0,0,0);
  transition: opacity .4s ease;
}

.route-map {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .85;
}
.route-path,
.route-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route-shadow { stroke: rgba(7,7,7,.6); stroke-width: 10; transform: translateY(7px); }
.route-path {
  stroke: var(--seal);
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--route-progress));
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.55));
}

.chapter-curfew { background: linear-gradient(90deg, rgba(38,54,74,.58), rgba(7,7,7,.96)); }
.street-strip {
  position: absolute;
  left: -8vw;
  right: -8vw;
  top: 43%;
  height: 142px;
  background: linear-gradient(180deg, #111 0%, var(--olive) 48%, #050505 100%);
  transform: rotate(-2deg);
  box-shadow: 0 28px 60px rgba(0,0,0,.7);
}
.street-label {
  position: absolute;
  left: 12vw;
  top: 12px;
  font-family: "Noto Serif KR", serif;
  font-weight: 700;
  color: var(--ash);
}
.gold-line { position: absolute; left: 8%; right: 7%; top: 72px; height: 3px; background: var(--brass); box-shadow: 0 0 18px rgba(208,162,67,.45); }
.censor { position: absolute; top: -24px; height: 190px; background: var(--blackout); opacity: .9; animation: shutter 5s ease-in-out infinite; }
.shutter-one { left: 24%; width: 16%; }
.shutter-two { left: 52%; width: 9%; animation-delay: .7s; }
.shutter-three { left: 73%; width: 13%; animation-delay: 1.4s; }

.panel-left {
  justify-self: start;
  width: min(420px, 86vw);
  padding: 34px;
  transform: rotate(3deg) translateY(-10vh);
}
h2 { font-family: "Noto Serif KR", serif; font-size: clamp(36px, 6vw, 78px); line-height: 1; margin: 0 0 22px; }
.prompt { display: inline-block; margin-top: 22px; color: var(--seal); font-weight: 700; border-top: 2px solid var(--seal); }
.subway-diagram { position: absolute; right: 8vw; bottom: 14vh; width: 340px; height: 190px; border: 1px dashed rgba(216,208,191,.45); transform: rotate(-5deg); }
.subway-diagram span { position: absolute; background: var(--ash); height: 2px; width: 78%; left: 10%; transform-origin: left; }
.subway-diagram span:nth-child(1) { top: 32%; transform: rotate(14deg); background: var(--seal); }
.subway-diagram span:nth-child(2) { top: 48%; transform: rotate(-8deg); }
.subway-diagram span:nth-child(3) { top: 65%; transform: rotate(4deg); background: var(--brass); }
.subway-diagram span:nth-child(4) { top: 80%; transform: rotate(-17deg); background: var(--blue); }

.chapter-orders { background: radial-gradient(circle at 54% 55%, rgba(243,230,200,.13), transparent 26%), var(--blackout); }
.vertical-wall {
  position: absolute;
  top: 7vh;
  bottom: 7vh;
  writing-mode: vertical-rl;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 900;
  color: var(--paper);
  background: rgba(38,54,74,.72);
  padding: 28px 18px;
  box-shadow: 18px 0 48px rgba(0,0,0,.5);
}
.wall-left { left: 10vw; transform: rotate(.8deg); }
.wall-right { right: 11vw; transform: rotate(-1.4deg); color: var(--seal); }
.corridor-paper { width: min(520px, 58vw); padding: 42px; transform: rotate(-1deg); }
.chapter-kicker { font-family: "Song Myung", serif; color: var(--seal); }
.stamp-impact { position: absolute; right: 27vw; bottom: 16vh; font-size: 54px; transform: rotate(-12deg) scale(.9); animation: stampHit 2.8s ease-in-out infinite; }

.chapter-rumor { background: radial-gradient(circle at 50% 45%, rgba(38,54,74,.55), transparent 45%), var(--blackout); }
.floating-title { position: absolute; top: 10vh; left: 9vw; color: var(--paper); transform: rotate(-3deg); }
.scrap { position: absolute; padding: 22px; font-family: "Song Myung", serif; font-size: clamp(17px, 2vw, 25px); max-width: 330px; }
.scrap-a { left: 14vw; top: 33vh; transform: rotate(8deg); --stain-x: 72%; }
.scrap-b { right: 17vw; top: 24vh; transform: rotate(-10deg); background-color: var(--ash); }
.scrap-c { left: 38vw; bottom: 16vh; transform: rotate(-4deg); }
.scrap-d { right: 28vw; bottom: 28vh; transform: rotate(5deg); max-width: 290px; }
.tiny-stamp { font-size: 16px; border-width: 2px; }
.market-button { right: 12vw; bottom: 12vh; color: var(--brass); border-color: var(--brass); background: rgba(208,162,67,.08); }

.chapter-choice { background: linear-gradient(135deg, var(--olive), var(--blackout) 54%, var(--blue)); }
.choice-title { position: absolute; top: 10vh; left: 8vw; max-width: 680px; }
.choice-title span { font-family: "Song Myung", serif; color: var(--brass); }
.choice-title h2 { color: var(--paper); font-size: clamp(30px, 4.5vw, 62px); }
.barricade-scene { position: relative; width: min(940px, 88vw); height: 520px; transform: perspective(900px) rotateX(54deg) rotateZ(-3deg); transform-style: preserve-3d; }
.barrier { position: absolute; height: 42px; background: repeating-linear-gradient(90deg, var(--paper) 0 48px, var(--seal) 48px 82px); box-shadow: 0 18px 24px rgba(0,0,0,.45); }
.barrier-a { width: 64%; left: 10%; top: 42%; transform: rotate(11deg); }
.barrier-b { width: 46%; right: 7%; top: 58%; transform: rotate(-21deg); }
.barrier-c { width: 38%; left: 24%; top: 73%; transform: rotate(3deg); background: repeating-linear-gradient(90deg, var(--olive) 0 50px, var(--ash) 50px 80px); }
.route-card {
  position: absolute;
  width: 180px;
  height: 110px;
  border: 1px solid rgba(7,7,7,.28);
  background: var(--paper);
  color: var(--blackout);
  font-family: "Noto Serif KR", serif;
  font-size: 24px;
  box-shadow: 0 22px 34px rgba(0,0,0,.45);
  transform: rotateX(-54deg);
  transition: transform .25s ease, background .25s ease;
}
.route-card:hover, .route-card.chosen { transform: rotateX(-54deg) translateY(-12px); background: var(--brass); }
.route-one { left: 8%; top: 19%; }
.route-two { left: 41%; top: 33%; }
.route-three { right: 8%; top: 18%; }
.choice-note { position: absolute; bottom: 10vh; color: var(--ash); font-family: "Song Myung", serif; font-size: 24px; }

.chapter-dawn { background: linear-gradient(180deg, #070707 0%, #26364A 46%, #D8D0BF 100%); }
.dawn-horizon { position: absolute; left: -10%; right: -10%; bottom: 0; height: 38vh; background: radial-gradient(ellipse at 50% 0%, rgba(208,162,67,.52), transparent 48%), var(--ash); clip-path: polygon(0 38%, 100% 12%, 100% 100%, 0 100%); }
.refold-map { perspective: 1200px; }
.memory-card { width: min(720px, 86vw); padding: 46px; transform: rotateX(7deg) rotateZ(1deg); clip-path: polygon(0 0, 96% 4%, 100% 100%, 6% 96%); }
.release-stamp { display: inline-block; font-size: 42px; transform: rotate(8deg); color: #8B1E2D; opacity: .7; }
.hand-note { font-family: "Song Myung", serif; color: var(--olive); font-size: 25px; }

.chapter-ledger {
  position: fixed;
  z-index: 20;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
}
.chapter-ledger span {
  color: rgba(216,208,191,.45);
  font: 13px "IBM Plex Sans KR", sans-serif;
  border-left: 3px solid rgba(216,208,191,.22);
  padding-left: 9px;
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.chapter-ledger span.on { color: var(--brass); border-color: var(--brass); transform: translateX(5px); }

.brass-cursor {
  position: fixed;
  z-index: 30;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(208,162,67,.22), transparent 65%);
  transform: translate(-50%, -50%);
  opacity: .7;
}

@keyframes inkPulse {
  0%, 100% { filter: blur(.1px); opacity: .9; }
  50% { filter: blur(.7px); opacity: .78; letter-spacing: -.075em; }
}

@keyframes shutter {
  0%, 100% { transform: translateX(0) scaleX(1); }
  45% { transform: translateX(26px) scaleX(.72); }
  70% { transform: translateX(-12px) scaleX(1.12); }
}

@keyframes stampHit {
  0%, 70%, 100% { transform: rotate(-12deg) scale(.9); opacity: .72; }
  78% { transform: rotate(-12deg) scale(1.16, .82); opacity: 1; }
}

@media (max-width: 760px) {
  .route-map { opacity: .45; }
  .vertical-wall { opacity: .45; }
  .wall-left { left: 2vw; }
  .wall-right { right: 2vw; }
  .corridor-paper { width: 78vw; }
  .scrap { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 14px; }
  .chapter-rumor { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .floating-title { position: relative; left: auto; top: auto; }
  .barricade-scene { transform: none; height: 620px; }
  .route-card, .route-card:hover, .route-card.chosen { transform: none; }
  .choice-note { left: 26px; right: 26px; }
}