:root {
  /* IBM Plex Sans Condensed’s bureaucratic compression */
  --blackout: #08090B;
  --bone: #F1E8D0;
  --parchment: #D8C69A;
  --shadow: #4A1417;
  --violet: #21162E;
  --red: #B3131B;
  --verdigris: #28645F;
  --amber: #D8902F;
  --cinzel: 'Cinzel', serif;
  --plex: 'IBM Plex Sans Condensed', sans-serif;
  --literata: 'Literata', serif;
  --mono: 'Noto Sans Mono', monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--bone);
  background:
    radial-gradient(circle at 18% 8%, rgba(179, 19, 27, .22), transparent 28rem),
    radial-gradient(circle at 92% 48%, rgba(216, 144, 47, .12), transparent 34rem),
    linear-gradient(115deg, var(--blackout), var(--violet) 52%, var(--blackout));
  font-family: var(--literata);
  overflow-x: hidden;
}

.grain, .siren-wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.grain {
  opacity: .18;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(241, 232, 208, .55) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(87deg, rgba(216, 198, 154, .12) 0 1px, transparent 1px 7px);
}

.siren-wash {
  opacity: .5;
  background: radial-gradient(circle at var(--lamp-x, 15%) var(--lamp-y, 12%), rgba(216, 144, 47, .28), transparent 17rem), radial-gradient(circle at 82% 18%, rgba(179, 19, 27, .18), transparent 22rem);
  transition: background .25s linear;
}

.permit-strip {
  position: fixed;
  z-index: 60;
  top: 1rem;
  right: .8rem;
  display: grid;
  gap: .25rem;
  transform: rotate(1deg);
}

.permit-strip a {
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--plex);
  letter-spacing: .14em;
  font-size: .75rem;
  background: rgba(8, 9, 11, .76);
  border: 1px solid rgba(216, 198, 154, .38);
  padding: .32rem .55rem;
  box-shadow: inset 0 0 0 1px rgba(74, 20, 23, .8);
}

.permit-strip a.active { color: var(--red); border-color: var(--red); }

.route-map {
  position: fixed;
  inset: 0 auto 0 50%;
  width: 28vw;
  min-width: 210px;
  height: 100vh;
  z-index: 8;
  transform: translateX(-50%) rotate(-7deg);
  opacity: .9;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(179, 19, 27, .75));
}

#routePath {
  fill: none;
  stroke: var(--red);
  stroke-width: .75;
  stroke-dasharray: 800;
  stroke-dashoffset: calc(800 - (var(--draw, .04) * 800));
  transition: stroke-width .4s ease, stroke .4s ease;
}

body.route-barricade #routePath { stroke-width: 1.5; stroke: var(--amber); }
body.route-orbit #routePath { stroke: var(--bone); stroke-width: .5; }
body.route-horizon #routePath { stroke: var(--amber); stroke-width: 2; }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: [noentry] minmax(1rem, 9vw) [alley] 1.1fr [square] 1.4fr [barricade] .8fr [archive] minmax(1rem, 8vw);
  align-items: center;
  overflow: hidden;
  padding: 5rem 0;
}

.scene::before {
  content: attr(data-level);
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  font: 600 .75rem/1 var(--mono);
  color: rgba(216, 198, 154, .55);
  letter-spacing: .28em;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 9, 11, .7), transparent 18%, transparent 78%, rgba(8, 9, 11, .75)), repeating-linear-gradient(135deg, rgba(216, 198, 154, .035) 0 2px, transparent 2px 14px);
}

.district-card {
  position: relative;
  z-index: 12;
  background: linear-gradient(145deg, rgba(216, 198, 154, .94), rgba(241, 232, 208, .82));
  color: var(--blackout);
  border: 1px solid rgba(74, 20, 23, .55);
  padding: clamp(1.2rem, 3vw, 2.5rem);
  box-shadow: 0 1.4rem 3rem rgba(0,0,0,.45), inset 0 0 3rem rgba(74, 20, 23, .15);
  clip-path: polygon(0 3%, 94% 0, 100% 90%, 6% 100%);
  transform: translateY(2rem) rotate(-1deg);
  opacity: .72;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
}

.scene.active .district-card { transform: translateY(0) rotate(-1deg); opacity: 1; }

.checkpoint {
  margin: 0 0 .75rem;
  font: 700 .85rem/1 var(--plex);
  letter-spacing: .24em;
  color: var(--shadow);
}

h1, h2 {
  font-family: var(--cinzel);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .055em;
}

h1 { font-size: clamp(3.3rem, 12vw, 11rem); line-height: .82; }
h1 em { display: block; color: var(--red); font-style: normal; }
h2 { font-size: clamp(2.4rem, 7vw, 7rem); line-height: .88; }

.narrative {
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1.55;
  max-width: 38rem;
}

.code, .coordinates, .closing-code, .scroll-order {
  font-family: var(--mono);
  letter-spacing: .16em;
  font-size: .72rem;
  text-transform: uppercase;
}

.seal-scene { background: radial-gradient(circle at 50% 38%, rgba(74, 20, 23, .7), transparent 15rem), var(--blackout); }
.blackout-map { position: absolute; inset: 8% 12%; opacity: .42; background: linear-gradient(90deg, transparent 49.6%, rgba(216,198,154,.25) 50%, transparent 50.4%), linear-gradient(0deg, transparent 49.5%, rgba(216,198,154,.18) 50%, transparent 50.5%); border: 1px solid rgba(216,198,154,.12); transform: perspective(700px) rotateX(58deg) rotateZ(-9deg); }
.map-fold, .district-line { position: absolute; background: rgba(216,198,154,.26); }
.fold-a { inset: 0 auto 0 28%; width: 1px; }
.fold-b { inset: 0 auto 0 63%; width: 1px; }
.line-a { width: 80%; height: 1px; top: 28%; left: 8%; transform: rotate(-15deg); }
.line-b { width: 52%; height: 1px; top: 54%; left: 32%; transform: rotate(24deg); }
.line-c { width: 38%; height: 1px; top: 72%; left: 12%; transform: rotate(-32deg); }
.seal-core { position: absolute; top: 18%; left: 50%; width: clamp(9rem, 22vw, 18rem); aspect-ratio: 1; transform: translateX(-50%) rotate(var(--seal-rot, 0deg)); border-radius: 50%; background: radial-gradient(circle, var(--red) 0 27%, var(--shadow) 28% 38%, var(--red) 39% 62%, transparent 63%), repeating-conic-gradient(from 7deg, var(--red) 0 10deg, var(--shadow) 10deg 15deg); box-shadow: 0 0 3rem rgba(179,19,27,.62); transition: transform .2s linear; }
.seal-ring { position: absolute; inset: 13%; border: 2px solid rgba(241,232,208,.72); border-radius: 50%; display: grid; place-items: center; font: 700 .7rem/1 var(--plex); text-align: center; letter-spacing: .22em; color: var(--bone); }
.seal-star { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: var(--bone); }
.seal-crack { position: absolute; left: 50%; top: 18%; width: 2px; height: 65%; background: var(--blackout); transform-origin: top; opacity: .8; }
.crack-one { transform: rotate(17deg); }
.crack-two { transform: rotate(-28deg); top: 31%; height: 43%; }
.opening-copy { grid-column: alley / archive; align-self: end; padding: 0 9vw; z-index: 13; transform: translateY(calc(3rem - var(--draw, .04) * 5rem)); opacity: calc(.55 + var(--draw, .04)); }
.opening-copy p:last-child { max-width: 38rem; font-size: 1.3rem; }
.scroll-order { position: absolute; bottom: 2rem; left: 9vw; color: var(--parchment); }

.hatch-zone { position: absolute; top: 0; bottom: 0; width: 15vw; background: repeating-linear-gradient(45deg, rgba(216,198,154,.13) 0 5px, transparent 5px 15px); }
.left-zone { left: 0; } .right-zone { right: 0; }
.barricade { position: absolute; left: -5%; right: -5%; top: 48%; height: 4.5rem; background: repeating-linear-gradient(135deg, var(--red) 0 2rem, var(--blackout) 2rem 4rem); transform: rotate(-8deg); box-shadow: 0 1rem 2rem rgba(0,0,0,.5); opacity: .86; }
.notice-card { grid-column: alley / square; margin-left: 5vw; }
.notice-stack { grid-column: square / archive; z-index: 11; display: grid; gap: 1rem; transform: rotate(2deg); }
.notice-stack article { background: var(--parchment); color: var(--shadow); padding: 1.1rem; font: 700 1.05rem/1.2 var(--plex); letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--shadow); box-shadow: .5rem .5rem 0 rgba(8,9,11,.6); }
.redacted span { display: inline-block; width: 4.5rem; height: .8rem; background: var(--blackout); }
.wall-word { position: absolute; font: 900 clamp(5rem, 18vw, 17rem)/.8 var(--cinzel); color: rgba(241,232,208,.08); letter-spacing: .05em; pointer-events: none; }
.martial { left: -3vw; bottom: 4vh; transform: rotate(-6deg); }
.artifact { position: absolute; font: 700 .8rem var(--plex); color: var(--parchment); border: 1px dashed var(--parchment); padding: .6rem; }
.shoes { right: 9vw; bottom: 12vh; }

.archive-scene { background: linear-gradient(115deg, rgba(33,22,46,.8), var(--blackout)); }
.folded-map { position: absolute; inset: 10% 7%; display: grid; grid-template-columns: repeat(4, 1fr); transform: rotate(4deg); opacity: .75; }
.map-panel { border: 1px solid rgba(74,20,23,.5); background: linear-gradient(145deg, rgba(216,198,154,.55), rgba(241,232,208,.25)); min-height: 70vh; box-shadow: inset 1rem 0 2rem rgba(8,9,11,.2); }
.map-panel span { display: block; padding: 1rem; font: 700 .8rem var(--plex); color: var(--shadow); letter-spacing: .18em; text-transform: uppercase; }
.panel-two, .panel-four { transform: translateY(2rem) skewY(-3deg); }
.archive-card { grid-column: square / archive; }
.decree-wall { grid-column: noentry / square; z-index: 10; display: grid; gap: .6rem; transform: rotate(-4deg); }
.decree { font: 900 clamp(3rem, 10vw, 9rem)/.8 var(--cinzel); color: rgba(179,19,27,.72); text-shadow: 0 0 1rem rgba(0,0,0,.8); }
.decree.small { color: rgba(241,232,208,.22); transform: translateX(10vw); }
.inventory { position: absolute; background: rgba(8,9,11,.82); border: 1px solid var(--amber); color: var(--amber); font: 700 .9rem var(--plex); letter-spacing: .12em; padding: 1rem; text-transform: uppercase; }
.writ { left: 12vw; bottom: 8vh; } .key { right: 14vw; top: 16vh; transform: rotate(18deg); }

.alley-scene { background: radial-gradient(circle at 20% 35%, rgba(40,100,95,.28), transparent 24rem), var(--blackout); }
.censor-field { position: absolute; inset: 12% 0; display: grid; align-content: space-around; }
.censor-field span { height: clamp(1.8rem, 5vw, 4.8rem); background: rgba(8,9,11,.94); border-top: 1px solid rgba(216,198,154,.18); border-bottom: 1px solid rgba(216,198,154,.12); transform: rotate(-3deg); }
.alley-card { grid-column: alley / square; margin-left: 3vw; }
.pass-doc { grid-column: square / archive; justify-self: center; z-index: 13; width: min(28rem, 70vw); min-height: 18rem; background: var(--bone); color: var(--blackout); padding: 2rem; border: 2px solid var(--shadow); clip-path: polygon(4% 0, 100% 7%, 94% 100%, 0 91%); transform: rotate(var(--pass-rot, 5deg)); box-shadow: 0 2rem 3rem rgba(0,0,0,.55); }
.pass-doc p { margin: 0; font: 700 1rem var(--plex); color: var(--red); letter-spacing: .3em; }
.pass-doc strong { display: block; margin: 2rem 0; font: 900 clamp(2rem, 5vw, 4.5rem)/.9 var(--cinzel); }
.pass-doc span { font: 600 .72rem var(--mono); letter-spacing: .16em; }
.symbol-grid { position: absolute; left: 8vw; bottom: 8vh; display: flex; flex-wrap: wrap; gap: .45rem; max-width: 28rem; }
.symbol-grid b { color: var(--parchment); border: 1px solid rgba(216,198,154,.35); padding: .35rem .5rem; font: 500 .8rem var(--plex); }
.quest { right: -3vw; top: 14vh; transform: rotate(90deg); color: rgba(40,100,95,.18); }

.watchtower-scene { background: radial-gradient(circle at 70% 18%, rgba(241,232,208,.15), transparent 16rem), linear-gradient(180deg, var(--violet), var(--blackout) 72%); }
.moon-seal { position: absolute; top: 8vh; right: 12vw; width: clamp(10rem, 23vw, 21rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--bone), var(--parchment) 58%, var(--amber)); color: var(--shadow); display: grid; place-items: center; text-align: center; font: 900 clamp(1rem, 2vw, 1.8rem)/1 var(--cinzel); letter-spacing: .12em; box-shadow: 0 0 5rem rgba(241,232,208,.32); transform: rotate(var(--moon-rot, -8deg)); }
.searchlight { position: absolute; top: -12vh; left: var(--search-x, 15%); width: 32vw; height: 120vh; background: linear-gradient(90deg, transparent, rgba(216,198,154,.18), transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); mix-blend-mode: screen; transform: rotate(var(--search-rot, -18deg)); transition: left .1s linear, transform .1s linear; }
.tower-card { grid-column: alley / square; }
.coordinates { position: absolute; right: 10vw; bottom: 16vh; color: var(--verdigris); background: rgba(8,9,11,.8); padding: .7rem; }
.courtyard { position: absolute; left: 18vw; right: 18vw; bottom: 5vh; height: 18vh; border: 1px solid rgba(216,198,154,.18); display: grid; grid-template-columns: repeat(4,1fr); }
.courtyard span { border-right: 1px solid rgba(216,198,154,.12); background: linear-gradient(180deg, transparent, rgba(8,9,11,.8)); }

.lifting-scene { background: radial-gradient(circle at 50% 78%, rgba(216,144,47,.42), transparent 24rem), linear-gradient(180deg, var(--blackout), var(--violet) 58%, var(--shadow)); }
.tribunal-ring { position: absolute; inset: 50% auto auto 50%; width: min(78vw, 42rem); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--ring-rot, 0deg)); border: 1px solid rgba(216,198,154,.45); border-radius: 50%; box-shadow: inset 0 0 4rem rgba(216,144,47,.12); transition: transform .2s linear; }
.tribunal-ring span { position: absolute; left: 50%; top: 50%; font: 700 .95rem var(--plex); color: var(--parchment); letter-spacing: .2em; text-transform: uppercase; transform-origin: 0 0; }
.tribunal-ring span:nth-child(1) { transform: rotate(8deg) translateX(16rem); }
.tribunal-ring span:nth-child(2) { transform: rotate(99deg) translateX(16rem); }
.tribunal-ring span:nth-child(3) { transform: rotate(193deg) translateX(16rem); }
.tribunal-ring span:nth-child(4) { transform: rotate(285deg) translateX(16rem); }
.sunrise-line { position: absolute; left: 8vw; right: 8vw; bottom: 31vh; height: 3px; background: linear-gradient(90deg, transparent, var(--amber), var(--bone), var(--amber), transparent); box-shadow: 0 0 3rem var(--amber); }
.lifting-card { grid-column: square / archive; align-self: center; }
.final-stamp { position: absolute; left: 8vw; top: 20vh; font: 900 clamp(4rem, 15vw, 15rem)/1 var(--cinzel); color: transparent; -webkit-text-stroke: 2px var(--amber); transform: rotate(-11deg); opacity: .55; }
.closing-code { position: absolute; bottom: 8vh; left: 10vw; color: var(--bone); }

@keyframes stampLand { 0% { transform: scale(1.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(.92) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.scene.active h2, .scene.active .final-stamp { animation: stampLand .65s cubic-bezier(.2,.9,.1,1) both; }

@media (max-width: 800px) {
  .scene { grid-template-columns: 1rem 1fr 1rem; padding: 6rem 0; }
  .district-card, .notice-card, .archive-card, .alley-card, .tower-card, .lifting-card, .pass-doc, .notice-stack, .decree-wall { grid-column: 2; margin: 0; }
  .permit-strip { right: .25rem; top: .25rem; transform: scale(.82); transform-origin: top right; }
  .route-map { width: 62vw; opacity: .55; }
  .wall-word { opacity: .8; }
  .tribunal-ring span { transform: rotate(var(--r, 0deg)) translateX(38vw); }
  .tribunal-ring span:nth-child(1) { --r: 8deg; } .tribunal-ring span:nth-child(2) { --r: 99deg; } .tribunal-ring span:nth-child(3) { --r: 193deg; } .tribunal-ring span:nth-child(4) { --r: 285deg; }
}