:root {
  --abyss: #05040B;
  --indigo: #14102A;
  --earth: #2B1A12;
  --parchment: #D8B982;
  --magenta: #FF2BD6;
  --gold: #D9A441;
  --cyan: #00F5FF;
  --ivory: #F4E7C5;
  --hex: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  font-family: "Rajdhani", Inter, sans-serif;
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 43, 214, 0.18), transparent 28rem),
    radial-gradient(circle at 18% 48%, rgba(0, 245, 255, 0.11), transparent 25rem),
    linear-gradient(120deg, #05040B 0%, #14102A 48%, #05040B 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(244, 231, 197, 0.025) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(0, 245, 255, 0.025) 0 1px, transparent 1px 72px);
  mix-blend-mode: screen;
  z-index: 1;
}

.map-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 560vh;
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
}

.route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.2s linear;
}

.bg-orbit {
  position: fixed;
  width: 62vmin;
  height: 62vmin;
  clip-path: var(--hex);
  border: 1px solid rgba(217, 164, 65, 0.18);
  background: rgba(20, 16, 42, 0.36);
  z-index: 0;
  animation: palaceDrift 26s ease-in-out infinite alternate;
}

.orbit-one { top: -18vmin; right: -8vmin; box-shadow: inset 0 0 60px rgba(0, 245, 255, 0.08); }
.orbit-two { bottom: -24vmin; left: -16vmin; transform: rotate(18deg); animation-duration: 31s; box-shadow: inset 0 0 70px rgba(255, 43, 214, 0.08); }

.palace { position: relative; z-index: 3; }

.court {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 9vw, 9rem) clamp(1.2rem, 6vw, 7rem);
  display: grid;
  align-items: center;
  isolation: isolate;
}

.court::after {
  content: attr(data-chamber);
  position: absolute;
  right: 4vw;
  bottom: 4vh;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(7rem, 24vw, 19rem);
  font-weight: 700;
  color: rgba(244, 231, 197, 0.035);
  z-index: -1;
}

.chapter {
  position: absolute;
  top: 2.1rem;
  left: clamp(1.2rem, 6vw, 7rem);
  color: var(--cyan);
  font: 700 0.92rem/1 "Rajdhani", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(0, 245, 255, 0.7);
}

.hex { clip-path: var(--hex); }

.aperture {
  width: min(64vw, 760px);
  min-height: min(64vw, 680px);
  margin-left: auto;
  margin-right: 1vw;
  padding: clamp(3rem, 7vw, 7rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(140deg, rgba(20,16,42,0.92), rgba(5,4,11,0.86));
  border: 2px solid rgba(0, 245, 255, 0.55);
  box-shadow: inset 0 0 70px rgba(0, 245, 255, 0.08), 0 0 42px rgba(0, 245, 255, 0.18), -28px 28px 0 rgba(217, 164, 65, 0.08);
  transform: rotate(-8deg);
}

.aperture > * { transform: rotate(8deg); }
.small-inscription { font-family: "Cinzel", serif; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; }
h1, h2 { font-family: "Space Grotesk", sans-serif; margin: 0; letter-spacing: -0.04em; }
h1 { font-size: clamp(3.4rem, 10vw, 9rem); line-height: 0.82; text-transform: uppercase; color: var(--ivory); text-shadow: 0 0 18px rgba(255,43,214,0.4); }
h2 { max-width: 760px; font-size: clamp(2.8rem, 8vw, 7rem); line-height: 0.9; color: var(--ivory); text-transform: uppercase; }
p { font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.35; }

.parchment {
  color: var(--earth);
  background:
    radial-gradient(circle at 20% 25%, rgba(43, 26, 18, 0.18), transparent 4.5rem),
    radial-gradient(circle at 84% 74%, rgba(43, 26, 18, 0.16), transparent 5rem),
    linear-gradient(135deg, #F4E7C5, var(--parchment) 44%, #BE9363);
  box-shadow: inset 0 0 25px rgba(43, 26, 18, 0.35), 0 16px 48px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(217, 164, 65, 0.36);
  padding: 1.3rem 1.5rem;
  font-size: 1.15rem;
  line-height: 1.3;
  clip-path: polygon(2% 8%, 19% 2%, 34% 7%, 51% 1%, 72% 8%, 94% 4%, 98% 24%, 94% 47%, 99% 73%, 91% 96%, 65% 91%, 47% 98%, 22% 91%, 4% 96%, 8% 70%, 1% 44%);
}

.parchment b { display: block; font-family: "Cinzel", serif; color: var(--earth); margin-bottom: 0.55rem; letter-spacing: 0.07em; text-transform: uppercase; }
.parchment span { display: block; font-weight: 600; }
.torn-left { position: absolute; left: 7vw; bottom: 10vh; width: min(360px, 70vw); transform: rotate(-7deg); }

.vertex { position: absolute; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 20px var(--magenta); }
.v1 { right: 19vw; top: 15vh; } .v2 { right: 43vw; bottom: 24vh; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); } .v3 { left: 25vw; top: 39vh; }

.river { align-content: center; }
.river-band { display: flex; gap: clamp(0.5rem, 2vw, 1.5rem); align-items: center; transform: rotate(-5deg); min-width: 900px; margin-left: -8vw; }
.stepping { flex: 0 0 clamp(150px, 20vw, 280px); height: clamp(135px, 18vw, 245px); display: grid; place-items: center; background: rgba(20, 16, 42, 0.72); border: 1px solid rgba(0,245,255,0.52); color: var(--cyan); font: 700 2rem "Space Grotesk"; box-shadow: inset 0 0 35px rgba(0,245,255,0.08), 0 0 24px rgba(0,245,255,0.13); }
.s2, .s4 { transform: translateY(8vh); }
.s3 { transform: translateY(-6vh) rotate(12deg); color: var(--magenta); border-color: rgba(255,43,214,0.54); }
.parchment-cell { background: linear-gradient(135deg, #F4E7C5, var(--parchment)); color: var(--earth); border-color: rgba(217,164,65,0.75); font: 700 1.2rem "Cinzel"; text-align: center; padding: 1.5rem; }
.river-note { width: min(460px, 78vw); margin: 14vh 0 0 auto; transform: rotate(4deg); }

.dome { grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1fr); gap: 4vw; }
.mandala { position: relative; width: min(46vw, 560px); aspect-ratio: 1; display: grid; place-items: center; }
.ring { position: absolute; inset: 0; border: 2px solid var(--gold); box-shadow: 0 0 28px rgba(217,164,65,0.26), inset 0 0 60px rgba(255,43,214,0.08); transition: transform 1.4s ease; }
.ring-b { inset: 13%; border-color: var(--magenta); transform: rotate(18deg); }
.ring-c { inset: 26%; border-color: var(--cyan); transform: rotate(-12deg); }
.seal-core { width: 22%; aspect-ratio: 1; display: grid; place-items: center; clip-path: var(--hex); background: var(--gold); color: var(--earth); font: 700 4rem "Cinzel"; box-shadow: 0 0 36px rgba(217,164,65,0.46); z-index: 2; }
.dome.active .ring-a, .mandala.aligned .ring-a { transform: rotate(0deg) scale(1.02); }
.dome.active .ring-b, .mandala.aligned .ring-b { transform: rotate(0deg) scale(0.98); }
.dome.active .ring-c, .mandala.aligned .ring-c { transform: rotate(0deg) scale(1.04); }
.dome-line { max-width: 620px; color: rgba(244,231,197,0.76); border-left: 1px solid var(--gold); padding-left: 1.4rem; }

.lost { grid-template-columns: 1fr 0.7fr; gap: 6vw; }
.broken-field { display: grid; grid-template-columns: repeat(3, minmax(90px, 190px)); gap: -0.5rem; transform: rotate(7deg); }
.shard { height: clamp(90px, 14vw, 180px); background: rgba(20, 16, 42, 0.68); border: 1px solid rgba(0,245,255,0.46); box-shadow: inset 0 0 26px rgba(0,245,255,0.08); transition: transform 1.2s ease, opacity 1.2s ease; }
.sh2, .sh7 { opacity: 0.08; border-style: dashed; }
.sh3 { transform: translate(1.4rem, -1rem) rotate(-10deg); }
.sh4 { transform: translate(-1.2rem, 1.1rem) rotate(17deg); }
.sh6 { transform: translate(1.1rem, 1.6rem) rotate(-18deg); }
.sh9 { transform: translate(-1rem, -0.6rem) rotate(8deg); }
.lost.active .shard { transform: translate(0,0) rotate(0deg); opacity: 1; }
.lost-note { align-self: end; transform: rotate(-5deg); }

.final { place-items: center; text-align: center; }
.final-seal { display: grid; place-items: center; gap: 2rem; }
.gold-seal { width: min(54vw, 440px); aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle, rgba(217,164,65,0.34), rgba(20,16,42,0.9) 62%); border: 2px solid var(--gold); box-shadow: 0 0 54px rgba(217,164,65,0.28), inset 0 0 75px rgba(255,43,214,0.08); animation: sealTurn 18s linear infinite; }
.gold-seal span { font: 700 clamp(5rem, 16vw, 11rem) "Cinzel"; color: var(--gold); text-shadow: 0 0 24px rgba(217,164,65,0.7); }
.medallion { width: min(480px, 78vw); transform: rotate(2deg); }

.progress-rune { position: fixed; right: 1.2rem; top: 50%; z-index: 6; width: 3rem; height: 3rem; display: grid; place-items: center; clip-path: var(--hex); background: rgba(20,16,42,0.88); color: var(--gold); border: 1px solid var(--gold); font: 700 1rem "Space Grotesk"; box-shadow: 0 0 24px rgba(217,164,65,0.28); }

.court .parchment, .court h2, .court .river-band, .court .mandala, .court .broken-field, .court .final-seal { opacity: 0; transform: translateY(28px) scale(0.98); transition: opacity 1s ease, transform 1.1s ease; }
.court.active .parchment, .court.active h2, .court.active .river-band, .court.active .mandala, .court.active .broken-field, .court.active .final-seal { opacity: 1; }
.gate.active .parchment { transform: rotate(-7deg) translateY(0); }
.river.active .river-band { transform: rotate(-5deg) translateY(0); }
.river.active .parchment { transform: rotate(4deg) translateY(0); }
.dome.active .mandala, .dome.active h2 { transform: translateY(0) scale(1); }
.lost.active .broken-field, .final.active .final-seal { transform: translateY(0) scale(1); }
.lost.active .parchment { transform: rotate(-5deg) translateY(0); }

@keyframes palaceDrift { from { transform: rotate(0deg) translate3d(0,0,0); } to { transform: rotate(13deg) translate3d(2vw, -2vh, 0); } }
@keyframes sealTurn { to { transform: rotate(360deg); } }

@media (max-width: 850px) {
  .court { padding-left: 1rem; padding-right: 1rem; overflow: hidden; }
  .aperture { width: 94vw; min-height: 74vw; margin: 0 auto; }
  .torn-left { position: relative; left: auto; bottom: auto; margin-top: 2rem; }
  .river-band { min-width: 760px; margin-left: -160px; }
  .dome, .lost { grid-template-columns: 1fr; }
  .mandala { width: 88vw; margin: auto; }
  .broken-field { grid-template-columns: repeat(3, 30vw); }
  .progress-rune { display: none; }
}