:root {
    --night: #14101C;
    --parchment: #E8D9B7;
    --vermilion: #B63A2B;
    --indigo: #34306B;
    --brass: #C69B45;
    --sage: #91A886;
    --lavender: #A99BC4;
    --font-seal: 'Fraunces', serif;
    --font-body: 'Commissioner', sans-serif;
    --font-note: 'Noto Serif', serif;
    --font-rule: 'Azeret Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
    margin: 0;
    color: var(--parchment);
    font-family: var(--font-body);
    background:
        radial-gradient(circle at 20% 18%, rgba(52, 48, 107, .62), transparent 34rem),
        radial-gradient(circle at 80% 72%, rgba(182, 58, 43, .16), transparent 28rem),
        linear-gradient(135deg, #14101C 0%, #191326 52%, #0d0a13 100%);
    overflow-x: hidden;
}

.grain {
    position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .22;
    background-image:
        radial-gradient(circle, rgba(232,217,183,.24) 0 1px, transparent 1.5px),
        linear-gradient(90deg, transparent 0 96%, rgba(198,155,69,.08) 97% 100%);
    background-size: 17px 19px, 83px 100%;
    mix-blend-mode: screen;
}

.cursor-seal {
    position: fixed; left: 0; top: 0; width: 74px; height: 74px; margin: -37px 0 0 -37px;
    border: 1px solid rgba(198,155,69,.52); border-radius: 50%; z-index: 40; pointer-events: none;
    box-shadow: inset 0 0 0 9px rgba(182,58,43,.06), 0 0 34px rgba(198,155,69,.18);
    transform: translate3d(-120px,-120px,0) rotate(0deg); transition: border-color .3s ease, opacity .3s ease;
}
.cursor-seal::before, .cursor-seal::after { content: ''; position: absolute; inset: 14px; border: 1px dashed rgba(145,168,134,.5); border-radius: 50%; }
.cursor-seal::after { inset: 28px; border-color: rgba(169,155,196,.5); }

.token-nav {
    position: fixed; z-index: 50; left: 1.2rem; top: 50%; transform: translateY(-50%);
    display: grid; gap: .78rem;
}
.token-nav a {
    color: var(--parchment); text-decoration: none; font: 700 .62rem var(--font-rule); letter-spacing: .12em;
    text-transform: uppercase; writing-mode: vertical-rl; padding: .62rem .35rem; min-height: 4.2rem;
    border: 1px solid rgba(198,155,69,.45); background: rgba(20,16,28,.72); border-radius: 99px;
    box-shadow: inset 0 0 20px rgba(52,48,107,.45); transition: .45s ease;
}
.token-nav a.active, .token-nav a:hover { color: var(--night); background: var(--brass); border-color: var(--parchment); transform: translateX(.35rem); }

.village { position: relative; }
.room {
    min-height: 100vh; position: relative; overflow: hidden; padding: clamp(4.5rem, 8vw, 7rem) clamp(2rem, 7vw, 7rem);
    display: grid; place-items: center;
    border-bottom: 1px solid rgba(198,155,69,.18);
    isolation: isolate;
}
.room::before {
    content: ''; position: absolute; inset: 5vw; border: 1px solid rgba(232,217,183,.09);
    clip-path: polygon(0 10%, 88% 0, 100% 74%, 16% 100%); z-index: -1;
}
.room::after {
    content: '{};{};{};{};{};{};{};{};{};{}'; position: absolute; color: rgba(198,155,69,.14);
    font: 600 .75rem var(--font-rule); letter-spacing: 1.2rem; left: 8vw; right: 8vw; bottom: 2.2rem; overflow: hidden;
}

.room-title h2, .stamp-lockup h1, .final-seal h2 { font-family: var(--font-seal); font-weight: 900; line-height: .88; margin: 0; }
.stamp-lockup { position: relative; text-align: left; width: min(760px, 70vw); transform: translate(-6vw, 2vh); z-index: 2; }
.stamp-lockup h1 { font-size: clamp(4.6rem, 15vw, 15rem); color: var(--vermilion); text-shadow: 0 .08em 0 rgba(20,16,28,.7), 0 0 38px rgba(182,58,43,.28); filter: url('#none'); animation: stampIn 1.25s cubic-bezier(.2,.9,.1,1) both .35s; }
.artifact-copy { max-width: 34rem; color: var(--parchment); font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.55; margin: 1.2rem 0 0 1rem; }
.rule-id { font-family: var(--font-rule); color: var(--brass); letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; }
.codex-note { position: absolute; max-width: 15rem; color: var(--lavender); font: italic 500 .95rem/1.55 var(--font-note); padding-left: 1rem; border-left: 1px solid var(--brass); }
.note-one { right: 9vw; top: 18vh; } .note-two { left: 13vw; bottom: 11vh; } .note-three { right: 9vw; bottom: 14vh; } .note-four { left: 10vw; top: 17vh; } .note-five { right: 12vw; top: 20vh; } .note-six { left: 12vw; bottom: 14vh; }

.moon-disc { position: absolute; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, rgba(232,217,183,.09), rgba(52,48,107,.09) 45%, transparent 67%); left: 6vw; top: 7vh; }
.ritual-ring { position: absolute; width: min(78vw, 680px); height: min(78vw, 680px); right: 5vw; top: 9vh; transform: rotate(-18deg); }
.ritual-ring circle { fill: none; stroke-width: 2; }
.ring-faint { stroke: rgba(198,155,69,.22); }
.ring-drawn { stroke: var(--brass); stroke-dasharray: 1288; stroke-dashoffset: 1288; filter: drop-shadow(0 0 10px rgba(198,155,69,.45)); }
.active .ring-drawn { animation: drawRing 2.8s ease both; }
.chalk-marks path { stroke: var(--sage); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.active .chalk-marks path { animation: markIn .5s ease forwards; }
.active .chalk-marks path:nth-child(2) { animation-delay: .25s; } .active .chalk-marks path:nth-child(3) { animation-delay: .5s; } .active .chalk-marks path:nth-child(4) { animation-delay: .75s; } .active .chalk-marks path:nth-child(5) { animation-delay: 1s; } .active .chalk-marks path:nth-child(6) { animation-delay: 1.25s; }
.scroll-cue { position: absolute; bottom: 8vh; right: 19vw; color: var(--sage); font: 700 .72rem var(--font-rule); letter-spacing: .18em; text-transform: uppercase; }

.procession-line { position: absolute; width: 120vw; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), var(--sage), transparent); transform: rotate(-21deg); opacity: .55; }
.diagonal-title { position: absolute; top: 16vh; right: 12vw; transform: rotate(-7deg); }
.room-title h2 { font-size: clamp(3.2rem, 8vw, 8.5rem); color: var(--parchment); text-shadow: .06em .06em 0 rgba(52,48,107,.8); }
.council-orbit { width: min(64vw, 640px); aspect-ratio: 1; border: 1px dashed rgba(145,168,134,.45); border-radius: 50%; position: relative; transform: translate(-7vw, 7vh); animation: slowTurn 26s linear infinite; }
.seal { position: absolute; inset: 17%; border-radius: 50%; border: 3px double var(--sage); display: grid; place-items: center; color: var(--sage); background: rgba(20,16,28,.58); box-shadow: inset 0 0 50px rgba(145,168,134,.15); }
.seal span { font: 900 5rem var(--font-seal); } .seal i { position: absolute; bottom: 28%; font: italic 700 1rem var(--font-note); } .seal b { position: absolute; right: 28%; top: 25%; color: var(--brass); font: 700 2rem var(--font-rule); }
.bead { position: absolute; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--brass); box-shadow: 0 0 22px rgba(198,155,69,.55); }
.bead-a { left: 49%; top: -.6rem; } .bead-b { right: 5%; top: 70%; background: var(--sage); } .bead-c { left: 10%; bottom: 14%; background: var(--lavender); }
.artifact { background: linear-gradient(135deg, rgba(232,217,183,.12), rgba(52,48,107,.16)); border: 1px solid rgba(198,155,69,.48); box-shadow: 0 24px 80px rgba(0,0,0,.35), inset 0 0 45px rgba(232,217,183,.05); padding: clamp(1.2rem, 3vw, 2.2rem); color: var(--parchment); }
.artifact h3 { margin: 0 0 .8rem; color: var(--brass); font: 800 clamp(1.6rem, 3.2vw, 3rem) var(--font-seal); }
.artifact p, .artifact li { font-size: clamp(1rem, 1.55vw, 1.22rem); line-height: 1.55; }
.permitted { position: absolute; width: min(35rem, 42vw); right: 9vw; bottom: 13vh; clip-path: polygon(4% 0, 100% 6%, 94% 100%, 0 90%); }
.permitted ul { color: var(--sage); margin-bottom: 0; }

.taboo-room { background: radial-gradient(circle at 72% 28%, rgba(182,58,43,.22), transparent 28rem); }
.shelf { position: absolute; width: 88vw; height: 18rem; bottom: 18vh; border-top: 2px solid var(--brass); border-bottom: 1px solid rgba(198,155,69,.35); transform: rotate(-3deg); background: linear-gradient(transparent, rgba(52,48,107,.2)); }
.shelf-title { position: absolute; left: 10vw; top: 13vh; }
.ledger { width: min(42rem, 72vw); transform: translate(8vw, 4vh) rotate(2deg); background: linear-gradient(135deg, rgba(232,217,183,.18), rgba(20,16,28,.68)); }
.redactions { display: grid; gap: .7rem; margin-top: 1.2rem; }
.redactions span { position: relative; font: 700 .82rem var(--font-rule); letter-spacing: .08em; color: var(--lavender); text-transform: uppercase; padding: .65rem 1rem; border: 1px solid rgba(169,155,196,.25); }
.redactions span::after { content: ''; position: absolute; left: .6rem; right: .6rem; top: 50%; height: .72rem; background: rgba(182,58,43,.85); transform: translateY(-50%) rotate(-1deg); }
.ribbon { position: absolute; background: var(--vermilion); color: var(--parchment); font: 700 .74rem var(--font-rule); letter-spacing: .12em; text-transform: uppercase; padding: .75rem 7rem; box-shadow: 0 18px 45px rgba(0,0,0,.36); }
.ribbon-one { left: 7vw; bottom: 31vh; transform: rotate(-24deg); } .ribbon-two { right: 3vw; top: 43vh; transform: rotate(18deg); }
.mask-symbol { position: absolute; right: 16vw; top: 20vh; color: rgba(169,155,196,.3); font: 900 12rem var(--font-seal); }

.consensus-room { background: radial-gradient(circle at 50% 55%, rgba(145,168,134,.11), transparent 34rem); }
.table-map { position: relative; width: min(84vw, 980px); height: min(70vh, 590px); border: 2px solid rgba(198,155,69,.52); border-radius: 50% / 38%; background: linear-gradient(160deg, rgba(52,48,107,.38), rgba(20,16,28,.72)); box-shadow: inset 0 0 90px rgba(0,0,0,.35); }
.thread-map { position: absolute; inset: 8% 6%; width: 88%; height: 84%; overflow: visible; }
.thread { fill: none; stroke: var(--sage); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.thread-two { stroke: var(--lavender); }
.active .thread { animation: threadDraw 2.8s ease both .25s; }
.thread-map circle { fill: var(--brass); stroke: var(--night); stroke-width: 3; }
.table-title { position: absolute; left: 7%; top: 7%; }
.treaty { position: absolute; right: 8%; bottom: 9%; width: min(30rem, 46vw); clip-path: polygon(0 0, 96% 8%, 100% 100%, 7% 92%); }

.exception-room { background: radial-gradient(circle at 55% 38%, rgba(198,155,69,.15), transparent 26rem); }
.shrine-arch { position: absolute; width: min(52vw, 520px); height: min(72vh, 650px); border: 2px solid rgba(198,155,69,.55); border-bottom: 0; border-radius: 999px 999px 0 0; left: 14vw; bottom: 0; box-shadow: inset 0 0 70px rgba(182,58,43,.1); }
.shrine-title { position: absolute; left: 22vw; top: 16vh; }
.charm { width: min(34rem, 42vw); transform: translate(20vw, 10vh); }
.hanging-scroll { position: absolute; left: 19vw; bottom: 18vh; width: 14rem; min-height: 20rem; padding: 2rem 1rem; background: var(--parchment); color: var(--night); display: grid; place-items: center; gap: 1rem; font-family: var(--font-note); clip-path: polygon(7% 0, 100% 3%, 92% 100%, 0 96%); }
.hanging-scroll span, .hanging-scroll b, .hanging-scroll i { font-size: 1.4rem; color: var(--vermilion); }
.ink-bloom { position: absolute; right: 18vw; top: 25vh; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle, rgba(182,58,43,.4), rgba(182,58,43,.12) 36%, transparent 69%); filter: blur(5px); transform: scale(.3); opacity: 0; }
.active .ink-bloom { animation: bloom 2.4s ease both .2s; }

.living-room { background: radial-gradient(circle at 50% 50%, rgba(52,48,107,.58), transparent 36rem), var(--night); }
.final-seal { position: relative; width: min(78vw, 760px); aspect-ratio: 1; display: grid; place-items: center; }
.seal-ring { position: absolute; border-radius: 50%; border: 2px solid; inset: 0; }
.ring-a { border-color: var(--brass); animation: slowTurn 32s linear infinite; }
.ring-b { inset: 9%; border-color: var(--sage); border-style: dashed; animation: slowTurn 24s linear infinite reverse; }
.ring-c { inset: 19%; border-color: var(--vermilion); border-style: double; box-shadow: inset 0 0 50px rgba(182,58,43,.14); animation: pulseSeal 4s ease-in-out infinite; }
.seal-glyphs { position: absolute; inset: -1.7rem; border-radius: 50%; color: var(--lavender); font: 700 .72rem var(--font-rule); letter-spacing: .15em; text-transform: uppercase; display: grid; place-items: start center; padding-top: .2rem; }
.final-seal h2 { color: var(--parchment); font-size: clamp(3.8rem, 11vw, 11rem); text-shadow: 0 0 30px rgba(198,155,69,.28); }
.charter { position: absolute; right: 8vw; bottom: 11vh; width: min(33rem, 42vw); background: rgba(20,16,28,.72); }

.room .artifact, .room .room-title, .room .codex-note { opacity: 0; transform: translateY(32px) rotate(var(--tilt, 0deg)); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.room.active .artifact, .room.active .room-title, .room.active .codex-note { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }

@keyframes stampIn { 0% { opacity: 0; transform: scale(1.4) rotate(-4deg); filter: blur(10px); } 62% { opacity: 1; transform: scale(.94) rotate(1deg); filter: blur(0); } 100% { transform: scale(1) rotate(0); } }
@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes markIn { to { opacity: 1; } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes threadDraw { to { stroke-dashoffset: 0; } }
@keyframes bloom { 0% { opacity: 0; transform: scale(.25); } 60% { opacity: .75; } 100% { opacity: .45; transform: scale(1.25); } }
@keyframes pulseSeal { 50% { box-shadow: inset 0 0 90px rgba(182,58,43,.28), 0 0 38px rgba(182,58,43,.16); } }

@media (max-width: 760px) {
    .token-nav { left: .5rem; gap: .35rem; }
    .token-nav a { min-height: 3.4rem; font-size: .5rem; }
    .room { padding-left: 3.4rem; padding-right: 1.2rem; }
    .stamp-lockup, .permitted, .ledger, .treaty, .charm, .charter { width: min(100%, 31rem); position: relative; right: auto; left: auto; bottom: auto; top: auto; transform: none; }
    .room-title, .diagonal-title, .shelf-title, .table-title, .shrine-title { position: relative; left: auto; right: auto; top: auto; transform: none; justify-self: start; }
    .codex-note { display: none; }
    .ritual-ring { right: -26vw; top: 16vh; width: 105vw; height: 105vw; }
    .council-orbit { width: 78vw; transform: none; }
    .table-map { height: 74vh; }
    .hanging-scroll, .shrine-arch, .ribbon-two { display: none; }
}