:root {
  --archive-black: #080912;
  --vellum-gold: #E7C66B;
  --rune-cyan: #45F4FF;
  --seal-crimson: #B7193F;
  --potion-violet: #6D35FF;
  --parchment-bone: #F4E7C5;
  --controller-green: #5DFF8F;
  --font-display: "Unbounded", "Inter", sans-serif;
  --font-seal: "Pirata One", "Lora", serif;
  --font-body: "Atkinson Hyperlegible", "Inter", sans-serif;
  --font-ui: "Gabarito", "inter", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(109, 53, 255, .26), transparent 26rem),
    radial-gradient(circle at 88% 8%, rgba(69, 244, 255, .16), transparent 22rem),
    linear-gradient(135deg, #080912 0%, #0d0b18 44%, #080912 100%);
  color: var(--parchment-bone);
  font-family: var(--font-body);
}

body.charter-open .wax-seal { transform: translateY(14px) rotate(-14deg) scale(.92); filter: drop-shadow(0 0 25px var(--seal-crimson)); }
body.charter-open .route-line-one { width: 54vw; opacity: 1; }
body.charter-open .gate-bars span { transform: translateY(calc(var(--i) * 16px - 36px)) rotate(calc(var(--i) * 2deg)); }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(244, 231, 197, .18) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 94%, rgba(231, 198, 107, .18) 95% 96%, transparent 97%);
  background-size: 13px 17px, 47px 47px;
  mix-blend-mode: screen;
}

.seal-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-seal {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--vellum-gold);
  border: 2px dashed rgba(231, 198, 107, .6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 25, 63, .34), rgba(8, 9, 18, .92) 62%);
  box-shadow: inset 0 0 0 6px rgba(244, 231, 197, .04), 0 0 20px rgba(183, 25, 63, .24);
  font-family: var(--font-ui);
  transition: transform .35s ease, color .35s ease, border-color .35s ease;
}

.nav-seal span { display: block; font: 800 12px var(--font-ui); letter-spacing: .12em; }
.nav-seal b { display: block; font: 400 16px var(--font-seal); }
.nav-seal.active { color: var(--controller-green); border-color: var(--controller-green); transform: translateX(-8px) rotate(-8deg); }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 8vw 11vw 7vw 7vw;
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 2.2rem;
  border: 1px solid rgba(231, 198, 107, .18);
  clip-path: polygon(0 0, 94% 0, 100% 7%, 100% 100%, 6% 100%, 0 92%);
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--rune-cyan);
  font: 800 12px/1 var(--font-ui);
  letter-spacing: .22em;
  text-transform: uppercase;
}

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

h1 {
  max-width: 960px;
  font-size: clamp(4rem, 10vw, 11rem);
  text-shadow: 0 0 18px rgba(69, 244, 255, .2), 5px 5px 0 rgba(183, 25, 63, .48);
}

h2 { font-size: clamp(3rem, 6.8vw, 8rem); color: var(--parchment-bone); }

p { font-size: clamp(1rem, 1.25vw, 1.35rem); line-height: 1.65; }

.hero-chamber { perspective: 1100px; display: flex; align-items: flex-end; }
.dungeon-grid {
  position: absolute;
  inset: -18% -8%;
  transform: rotateX(62deg) rotateZ(-13deg) translateY(12%);
  background-image:
    linear-gradient(rgba(69, 244, 255, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 244, 255, .22) 1px, transparent 1px),
    linear-gradient(45deg, transparent 48%, rgba(231, 198, 107, .1) 49% 51%, transparent 52%);
  background-size: 86px 86px, 86px 86px, 172px 172px;
  opacity: .5;
}

.arcade-token {
  position: absolute;
  width: clamp(320px, 46vw, 720px);
  aspect-ratio: 1;
  top: 5%;
  right: 13%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 35%, rgba(244, 231, 197, .28), rgba(69, 244, 255, .12) 43%, rgba(8, 9, 18, .15) 63%, rgba(109, 53, 255, .22));
  border: 2px solid rgba(69, 244, 255, .42);
  box-shadow: 0 0 90px rgba(69, 244, 255, .18), inset 0 0 60px rgba(244, 231, 197, .08);
  animation: tokenSpin 20s linear infinite;
}
.token-rim { position: absolute; inset: 34px; border-radius: 50%; border: 10px double rgba(231, 198, 107, .38); }
.token-glyph { font: 900 clamp(4rem, 10vw, 10rem) var(--font-display); color: rgba(244, 231, 197, .18); }
.token-text { position: absolute; bottom: 27%; font: 800 12px var(--font-ui); letter-spacing: .3em; color: var(--rune-cyan); }

@keyframes tokenSpin { to { transform: rotate(360deg); } }

.hero-copy { position: relative; z-index: 2; width: min(940px, 84vw); transform: translateY(-4vh); }
.hero-line { max-width: 660px; color: rgba(244, 231, 197, .86); }
.archive-inscription { max-width: 560px; margin-top: 6px; color: rgba(231, 198, 107, .74); font: 400 1rem/1.5 var(--font-seal); letter-spacing: .02em; }
.charter-button {
  margin-top: 22px;
  padding: 18px 28px;
  border: 2px solid var(--vellum-gold);
  background: linear-gradient(135deg, rgba(183, 25, 63, .88), rgba(109, 53, 255, .65));
  color: var(--parchment-bone);
  font: 800 13px var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  cursor: pointer;
}

.route-line { position: absolute; height: 3px; left: 23vw; bottom: 24vh; width: 0; opacity: 0; background: linear-gradient(90deg, var(--controller-green), var(--rune-cyan), transparent); box-shadow: 0 0 22px var(--controller-green); transition: width 1.2s ease, opacity .6s ease; transform: rotate(-18deg); }
.wax-seal { position: absolute; top: 22%; left: 16%; width: 132px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #B7193F 0 48%, #7d102c 49% 67%, #B7193F 68%); color: var(--vellum-gold); font: 400 27px var(--font-seal); box-shadow: 0 18px 0 rgba(70, 0, 18, .8), 0 0 38px rgba(183,25,63,.55); animation: sealDrop 1.3s cubic-bezier(.2,.8,.2,1) both; }
.wax-seal i { position: absolute; width: 72%; height: 3px; background: var(--archive-black); transform: rotate(-22deg) scaleX(0); transition: transform .6s ease .25s; }
body.charter-open .wax-seal i { transform: rotate(-22deg) scaleX(1); }
@keyframes sealDrop { from { transform: translateY(-42vh) scale(1.2); } 70% { transform: translateY(20px) scale(.92); } to { transform: translateY(0); } }

.rule-card, .parchment-panel, .patch-note, .map-ledger, .vault-text, .clock-copy, .portal-copy {
  border: 1px solid rgba(231, 198, 107, .55);
  background: linear-gradient(135deg, rgba(244, 231, 197, .94), rgba(231, 198, 107, .72));
  color: var(--archive-black);
  box-shadow: 18px 18px 0 rgba(8, 9, 18, .42), inset 0 0 30px rgba(183, 25, 63, .08);
}
.rule-card { position: absolute; padding: 18px; width: 230px; font-family: var(--font-ui); transform: rotate(-7deg); }
.rule-card small { display: block; color: var(--seal-crimson); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.card-one { right: 5%; top: 34%; }
.card-two { right: 29%; top: 11%; transform: rotate(8deg); }
.controller-key { position: absolute; right: 23%; bottom: 18%; width: 90px; height: 90px; border: 3px solid var(--controller-green); color: var(--controller-green); display: grid; place-items: center; font-size: 46px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 18px var(--controller-green)); }
.coordinate-strip { position: absolute; left: 5vw; bottom: 28px; color: rgba(231,198,107,.74); font: 600 12px var(--font-ui); letter-spacing: .24em; }

.grant-gate { background: radial-gradient(circle at 74% 42%, rgba(183,25,63,.24), transparent 31rem); }
.gate-bars { position: absolute; inset: 10% 10% 8% 33%; display: flex; gap: 18px; align-items: stretch; transform: skewX(-9deg); }
.gate-bars span { --i: 1; flex: 1; border: 2px solid var(--vellum-gold); background: repeating-linear-gradient(0deg, rgba(231,198,107,.18) 0 14px, rgba(183,25,63,.22) 15px 22px), linear-gradient(#19111a,#080912); box-shadow: inset 0 0 22px rgba(69,244,255,.14); transition: transform .7s ease; }
.gate-bars span:nth-child(2) { --i: 2; }.gate-bars span:nth-child(3) { --i: 3; }.gate-bars span:nth-child(4) { --i: 4; }.gate-bars span:nth-child(5) { --i: 5; }
.gate-panel { position: relative; z-index: 2; width: min(630px, 76vw); padding: clamp(28px, 4vw, 58px); transform: rotate(-3deg); }
.clause-list { display: flex; flex-wrap: wrap; gap: 12px; }
.clause-list button, .patch, .rights-token { cursor: pointer; }
.clause-list button { border: 1px solid var(--seal-crimson); background: var(--archive-black); color: var(--controller-green); padding: 13px 16px; font: 800 12px var(--font-ui); letter-spacing: .15em; text-transform: uppercase; }
.boss-lock { position: absolute; right: 12%; bottom: 12%; width: 230px; height: 310px; border: 4px solid var(--vellum-gold); border-radius: 110px 110px 30px 30px; display: grid; place-items: center; color: var(--vellum-gold); font: 900 26px var(--font-display); box-shadow: inset 0 0 50px rgba(109,53,255,.3), 0 0 35px rgba(231,198,107,.18); }
.boss-lock span { font: 400 28px var(--font-seal); color: var(--rune-cyan); }
.inspector-output { position: absolute; left: 12%; bottom: 10%; color: var(--controller-green); font: 600 18px var(--font-ui); }

.rights-vault { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 4vw; background: radial-gradient(circle at 34% 47%, rgba(109,53,255,.28), transparent 34rem); }
.vault-orbit { position: relative; min-height: 620px; }
.cartridge-lock { position: absolute; left: 50%; top: 50%; width: 190px; height: 260px; transform: translate(-50%, -50%); display: grid; place-items: center; background: linear-gradient(145deg, #11131f, #080912); border: 3px solid var(--rune-cyan); color: var(--rune-cyan); font: 900 24px var(--font-display); clip-path: polygon(10% 0, 90% 0, 90% 78%, 72% 100%, 10% 100%); box-shadow: 0 0 45px rgba(69,244,255,.3); }
.rights-token { position: absolute; width: 122px; height: 122px; border-radius: 50%; border: 2px dashed var(--vellum-gold); background: radial-gradient(circle, var(--archive-black), rgba(109,53,255,.65)); color: var(--parchment-bone); font: 400 31px var(--font-seal); box-shadow: 0 0 26px rgba(231,198,107,.25); }
.token-a { left: 12%; top: 15%; }.token-b { right: 12%; top: 19%; }.token-c { left: 18%; bottom: 12%; }.token-d { right: 18%; bottom: 10%; }
.vault-orbit.is-spinning .rights-token { animation: bob .85s ease; }
@keyframes bob { 50% { transform: scale(1.13) rotate(10deg); } }
.vault-text { padding: 44px; transform: rotate(3deg); }

.territory-map { background: radial-gradient(circle at 63% 54%, rgba(69,244,255,.17), transparent 38rem); }
.map-ledger { position: relative; z-index: 2; width: min(560px, 78vw); padding: 34px; transform: rotate(2deg); }
.glow-map { position: absolute; right: 4%; top: 13%; width: min(820px, 68vw); filter: drop-shadow(0 0 18px rgba(69,244,255,.36)); }
.map-grid { fill: none; stroke: rgba(231,198,107,.26); stroke-width: 2; }
.region { fill: rgba(109,53,255,.16); stroke: var(--rune-cyan); stroke-width: 4; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.4s ease, fill .8s ease; }
.territory-map.in-view .region { stroke-dashoffset: 0; fill: rgba(93,255,143,.12); }
.compass-path { fill: none; stroke: var(--controller-green); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2s ease .4s; }
.territory-map.in-view .compass-path { stroke-dashoffset: 0; }
.map-tags { position: absolute; right: 10%; bottom: 14%; display: flex; gap: 14px; flex-wrap: wrap; width: 560px; }
.map-tags span { padding: 10px 14px; border: 1px solid var(--rune-cyan); color: var(--rune-cyan); background: rgba(8,9,18,.72); font: 800 12px var(--font-ui); text-transform: uppercase; letter-spacing: .16em; }

.modders-annex { background: radial-gradient(circle at 25% 70%, rgba(93,255,143,.15), transparent 32rem); }
.patch-note { padding: 38px; width: min(610px, 80vw); transform: rotate(-2deg); }
.sticker { position: absolute; padding: 16px 24px; font: 800 18px var(--font-ui); text-transform: uppercase; letter-spacing: .12em; transform: rotate(9deg); box-shadow: 10px 10px 0 rgba(0,0,0,.28); }
.sticker-green { right: 18%; top: 20%; background: var(--controller-green); color: var(--archive-black); }
.sticker-red { right: 36%; bottom: 21%; background: var(--seal-crimson); color: var(--parchment-bone); transform: rotate(-13deg); }
.workshop-card { right: 12%; bottom: 34%; transform: rotate(5deg); width: 330px; }
.patch-grid { position: absolute; left: 12%; bottom: 12%; display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 14px; }
.patch { padding: 22px 16px; border: 2px solid var(--vellum-gold); background: rgba(8,9,18,.86); color: var(--parchment-bone); font: 400 25px var(--font-seal); clip-path: polygon(0 0, 92% 0, 100% 28%, 100% 100%, 8% 100%, 0 72%); }
.annex-note { position: absolute; left: 12%; bottom: 5%; color: var(--controller-green); font: 700 18px var(--font-ui); }

.expiration-clock { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; background: radial-gradient(circle at 70% 48%, rgba(231,198,107,.18), transparent 34rem); }
.clock-copy { padding: 42px; transform: rotate(2deg); }
.clockwork { position: relative; min-height: 640px; }
.gear { position: absolute; border-radius: 50%; border: 16px dashed var(--vellum-gold); box-shadow: inset 0 0 50px rgba(231,198,107,.16), 0 0 30px rgba(231,198,107,.2); animation: turn 14s linear infinite; }
.gear-one { width: 380px; height: 380px; left: 18%; top: 10%; }
.gear-two { width: 245px; height: 245px; right: 13%; bottom: 14%; border-color: var(--rune-cyan); animation-direction: reverse; }
@keyframes turn { to { transform: rotate(360deg); } }
.moon { position: absolute; width: 98px; height: 98px; border-radius: 50%; background: var(--parchment-bone); box-shadow: inset -28px 0 0 var(--potion-violet), 0 0 30px rgba(244,231,197,.38); }
.moon-one { left: 10%; bottom: 16%; animation: moonDrift 7s ease-in-out infinite; }
.moon-two { right: 18%; top: 17%; animation: moonDrift 8s ease-in-out infinite reverse; }
@keyframes moonDrift { 50% { transform: translateY(-28px) scale(.88); } }
.calendar-leaf { position: absolute; left: 43%; top: 36%; width: 210px; padding: 26px; text-align: center; background: var(--parchment-bone); color: var(--archive-black); border: 8px double var(--seal-crimson); font: 800 22px var(--font-ui); transform: rotate(-7deg); }
.calendar-leaf b { display: block; font: 900 78px var(--font-display); color: var(--seal-crimson); }

.signature-portal { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 50%, rgba(109,53,255,.32), transparent 33rem); }
.signature-glyph { width: min(680px, 80vw); }
#signaturePath { fill: none; stroke: var(--parchment-bone); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1100; stroke-dashoffset: 1100; filter: drop-shadow(0 0 14px #45F4FF); transition: stroke-dashoffset 2.2s ease; }
.signature-portal.in-view #signaturePath { stroke-dashoffset: 0; }
.portal-ring { fill: none; stroke: var(--vellum-gold); stroke-width: 3; stroke-dasharray: 18 18; animation: turn 18s linear infinite; transform-origin: center; }
.ring-two { stroke: var(--rune-cyan); animation-direction: reverse; }
.portal-copy { max-width: 690px; margin-top: -130px; padding: 34px; background: rgba(8,9,18,.72); color: var(--parchment-bone); backdrop-filter: blur(8px); }
.domain-sigil { margin-top: 22px; color: var(--controller-green); font: 400 clamp(2rem, 5vw, 5rem) var(--font-seal); text-shadow: 0 0 18px rgba(93,255,143,.5); }

.lens { position: fixed; width: 150px; height: 150px; left: -200px; top: -200px; border-radius: 50%; border: 1px solid rgba(69,244,255,.7); pointer-events: none; z-index: 45; background: radial-gradient(circle, rgba(69,244,255,.14), transparent 68%); box-shadow: 0 0 40px rgba(69,244,255,.18); transform: translate(-50%, -50%); }

@media (max-width: 900px) {
  .seal-nav { right: 8px; gap: 7px; }
  .nav-seal { width: 56px; height: 56px; }
  .nav-seal b { display: none; }
  .chamber { padding: 18vh 80px 10vh 24px; }
  .rights-vault, .expiration-clock { display: block; }
  .glow-map { position: relative; width: 100%; right: auto; top: auto; margin-top: 40px; }
  .map-tags, .patch-grid { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin-top: 28px; }
  .patch-grid { grid-template-columns: 1fr; }
  .rule-card, .sticker, .workshop-card, .boss-lock { opacity: .78; transform: scale(.82); }
}