:root {
  /* DESIGN TYPOGRAPHY TOKEN MATCH: Space Mono* Mono** used sparingly for turn numbers */
  --void: #09031F;
  --violet: #15113A;
  --green: #39FF14;
  --cyan: #00E5FF;
  --magenta: #FF2BD6;
  --yellow: #FFE600;
  --orange: #FF7A00;
  --parchment: #F6E9C9;
  --display: 'Caveat Brush', cursive;
  --hand: 'Kalam', cursive;
  --body: 'BioRhyme', serif;
  --code: 'Space Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--parchment);
  background:
    radial-gradient(circle at 20% 8%, rgba(0, 229, 255, 0.22), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(255, 43, 214, 0.19), transparent 26rem),
    linear-gradient(125deg, var(--void), var(--violet) 46%, #0d062c 100%);
  font-family: var(--body);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.16;
  background-image:
    linear-gradient(90deg, rgba(246, 233, 201, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(246, 233, 201, 0.06) 1px, transparent 1px);
  background-size: 37px 37px;
  mix-blend-mode: overlay;
}

.constellation {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(circle, rgba(255, 230, 0, 0.8) 0 2px, transparent 2.5px);
  background-size: 140px 120px;
  opacity: 0.18;
  transform: rotate(-7deg) scale(1.1);
}

.rulebook-board { position: relative; z-index: 2; }

.chapter {
  min-height: 100vh;
  position: relative;
  padding: 8vw 7vw;
  isolation: isolate;
}

.tabletop {
  display: grid;
  place-items: center;
  min-height: 112vh;
  perspective: 1000px;
}

.tilt-plane {
  position: relative;
  width: min(1120px, 92vw);
  min-height: 760px;
  transform: rotateX(9deg) rotateZ(-3deg);
  border: 2px solid rgba(246, 233, 201, 0.16);
  border-radius: 9% 6% 12% 5% / 8% 12% 6% 10%;
  background:
    linear-gradient(100deg, rgba(246, 233, 201, 0.08), transparent 34%),
    radial-gradient(circle at 55% 45%, rgba(255, 230, 0, 0.08), transparent 24rem),
    rgba(21, 17, 58, 0.74);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.5), inset 0 0 90px rgba(0, 229, 255, 0.13);
}

.hero-copy {
  position: absolute;
  left: 8%;
  top: 23%;
  max-width: 600px;
  z-index: 5;
}

.kicker, .chapter-label, .coordinate, .code {
  font-family: var(--code);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.kicker { color: var(--green); text-shadow: 0 0 14px var(--green); }

h1, h2 {
  font-family: var(--display);
  margin: 0;
  line-height: 0.87;
  font-weight: 400;
}

h1 {
  font-size: clamp(5rem, 17vw, 13rem);
  color: var(--cyan);
  text-shadow: 5px 5px 0 var(--magenta), 0 0 24px rgba(0, 229, 255, 0.82), 0 0 70px rgba(255, 43, 214, 0.48);
  transform: rotate(-2deg);
}

h2 {
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  color: var(--void);
}

h3 {
  margin: 0.4rem 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  color: var(--void);
}

p { line-height: 1.7; }

.opening-note {
  max-width: 520px;
  font-size: 1.08rem;
  background: rgba(9, 3, 31, 0.58);
  border-left: 5px solid var(--yellow);
  padding: 1rem 1.25rem;
  box-shadow: 0 0 26px rgba(255, 230, 0, 0.14);
}

.open-book {
  position: absolute;
  left: 14%;
  bottom: 15%;
  border: 0;
  padding: 1rem 1.7rem;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--void);
  background: var(--yellow);
  border-radius: 51% 49% 43% 57% / 58% 38% 62% 42%;
  box-shadow: 0 0 0 4px var(--void), 0 0 30px var(--yellow);
  cursor: pointer;
  transform: rotate(4deg);
}

.portal-blob, .blob-space {
  position: absolute;
  border: 3px solid rgba(246, 233, 201, 0.55);
  filter: drop-shadow(0 0 22px currentColor);
}

.portal-blob { opacity: 0.72; animation: pulseBlob 4.6s ease-in-out infinite; }
.blob-a { width: 310px; height: 240px; right: 12%; top: 12%; color: var(--cyan); background: radial-gradient(circle at 38% 32%, var(--cyan), rgba(0, 229, 255, 0.14) 46%, transparent 70%); border-radius: 58% 42% 63% 37% / 45% 61% 39% 55%; }
.blob-b { width: 260px; height: 300px; right: 31%; bottom: 7%; color: var(--magenta); background: radial-gradient(circle at 42% 40%, var(--magenta), rgba(255, 43, 214, 0.14) 48%, transparent 72%); border-radius: 41% 59% 38% 62% / 58% 39% 61% 42%; animation-delay: -1.7s; }

.rule-card, .index-card {
  position: absolute;
  background: var(--parchment);
  color: var(--void);
  padding: 1.15rem;
  width: 230px;
  border-radius: 9px 18px 12px 21px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.34), inset 0 0 0 2px rgba(255, 122, 0, 0.24);
  font-family: var(--hand);
}
.card-one { right: 6%; top: 38%; transform: rotate(9deg); }
.card-two { left: 45%; top: 7%; transform: rotate(-11deg); }
.dagger { color: var(--magenta); font-size: 2rem; }

.bookmark {
  position: absolute;
  top: -16px;
  padding: 0.7rem 1.2rem 1.6rem;
  font-family: var(--hand);
  font-size: 1.1rem;
  color: var(--void);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  animation: flutter 2.8s ease-in-out infinite;
}
.bookmark-cyan { right: 18%; background: var(--cyan); }
.bookmark-magenta { left: 27%; background: var(--magenta); animation-delay: -0.9s; }

.neon-sundial {
  position: absolute;
  right: 11%;
  bottom: 21%;
  width: 190px;
  height: 190px;
  border: 4px solid var(--cyan);
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(0, 229, 255, 0.3), 0 0 28px rgba(0, 229, 255, 0.58);
}
.dial-hand { position: absolute; left: 50%; top: 50%; width: 6px; height: 82px; background: var(--yellow); transform-origin: 50% 0; animation: rewind 8s linear infinite; box-shadow: 0 0 16px var(--yellow); }
.neon-sundial span { position: absolute; font-family: var(--display); font-size: 1.6rem; color: var(--yellow); }
.neon-sundial span:nth-child(2) { left: 44%; top: 3%; } .neon-sundial span:nth-child(3) { right: 7%; top: 43%; } .neon-sundial span:nth-child(4) { left: 12%; bottom: 9%; }

.dice, .cap-meeple {
  position: absolute;
  display: grid;
  place-items: center;
  font-family: var(--display);
  color: var(--void);
  box-shadow: 0 0 26px currentColor;
  animation: floatRoll 5s ease-in-out infinite;
}
.dice { width: 66px; height: 66px; background: var(--orange); border-radius: 18px 12px 16px 10px; font-size: 2.2rem; }
.dice-one { right: 35%; top: 31%; } .dice-two { left: 7%; bottom: 34%; background: var(--green); animation-delay: -1.2s; }
.cap-meeple { right: 28%; top: 48%; width: 74px; height: 82px; border-radius: 44% 44% 51% 49%; background: var(--yellow); font-size: 3rem; }

.path { position: absolute; border: 0; pointer-events: none; opacity: 0.95; }
.path::before { content: ''; position: absolute; inset: 0; border: 7px dotted var(--cyan); border-left-color: var(--magenta); border-bottom-color: var(--yellow); filter: drop-shadow(0 0 9px var(--cyan)); }
.path-start { left: 17%; bottom: -18%; width: 50%; height: 27%; transform: rotate(8deg); }
.path-start::before { border-radius: 50%; border-top-color: transparent; }
.path-one { left: 12%; top: -4%; width: 58%; height: 76%; transform: rotate(-14deg); }
.path-one::before, .path-two::before, .path-three::before, .path-four::before { border-radius: 50%; border-right-color: transparent; background: transparent; }
.path-two { right: 8%; top: -8%; width: 52%; height: 64%; transform: rotate(28deg); }
.path-three { left: 2%; top: -12%; width: 66%; height: 71%; transform: rotate(-24deg); }
.path-four { right: 18%; top: -14%; width: 58%; height: 73%; transform: rotate(18deg); }

.blob-space {
  position: relative;
  max-width: 680px;
  padding: clamp(2rem, 5vw, 4rem);
  color: var(--void);
  z-index: 4;
  box-shadow: inset 0 0 45px rgba(246, 233, 201, 0.24), 0 0 55px currentColor;
}
.yellow-blob { margin: 5vh 0 0 8vw; background: radial-gradient(circle at 26% 18%, #F6E9C9, var(--yellow) 62%, var(--orange)); color: var(--yellow); border-radius: 62% 38% 48% 52% / 46% 61% 39% 54%; transform: rotate(-3deg); }
.cyan-blob { margin: 2vh 0 0 auto; background: radial-gradient(circle at 30% 20%, #F6E9C9, var(--cyan) 61%, var(--magenta)); color: var(--cyan); border-radius: 42% 58% 59% 41% / 58% 40% 60% 42%; transform: rotate(4deg); }
.green-blob { margin: 3vh 0 0 12vw; background: radial-gradient(circle at 36% 26%, #F6E9C9, var(--green) 58%, var(--cyan)); color: var(--green); border-radius: 55% 45% 36% 64% / 39% 57% 43% 61%; transform: rotate(-5deg); }
.orange-blob { margin: 4vh auto 0; background: radial-gradient(circle at 40% 20%, #F6E9C9, var(--orange) 57%, var(--magenta)); color: var(--orange); border-radius: 44% 56% 63% 37% / 60% 42% 58% 40%; transform: rotate(2deg); }

.coordinate { display: inline-block; margin-bottom: 1rem; color: var(--void); background: rgba(246, 233, 201, 0.66); padding: 0.3rem 0.55rem; }
.chapter-label { position: absolute; left: 8vw; top: 6vh; color: var(--green); }
.margin-note { position: absolute; max-width: 260px; font-family: var(--hand); color: var(--parchment); font-size: 1.4rem; text-shadow: 0 0 15px var(--magenta); }
.note-left { right: 10vw; top: 18vh; transform: rotate(9deg); }
.note-right { right: 10vw; bottom: 15vh; transform: rotate(-7deg); }

.hourglass-pawn { position: absolute; right: 26%; bottom: 16%; width: 110px; height: 160px; background: linear-gradient(var(--cyan), var(--magenta)); clip-path: polygon(22% 0, 78% 0, 62% 44%, 84% 100%, 16% 100%, 38% 44%); filter: drop-shadow(0 0 28px var(--cyan)); animation: floatRoll 6s ease-in-out infinite; }
.hourglass-pawn span { position: absolute; inset: 23% 30%; background: var(--yellow); clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); }
.scrap-stack { position: absolute; left: 7vw; top: 11vh; width: 310px; height: 310px; z-index: 5; }
.cyan-scrap { left: 0; top: 0; transform: rotate(-8deg); border-top: 12px solid var(--cyan); }
.magenta-scrap { left: 55px; top: 142px; transform: rotate(7deg); border-top: 12px solid var(--magenta); }
.curved-arrow { position: absolute; left: 47%; top: 22%; font-family: var(--hand); font-size: 7rem; color: var(--yellow); text-shadow: 0 0 22px var(--yellow); transform: rotate(29deg); }
.ledger-ribbon { position: absolute; left: 36vw; top: 12vh; padding: 1rem 2rem; background: var(--magenta); color: var(--void); font-family: var(--hand); font-size: 1.35rem; transform: rotate(5deg); box-shadow: 0 0 24px var(--magenta); }
.moon-domino { position: absolute; right: 20vw; top: 21vh; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0.7rem; background: var(--parchment); color: var(--void); border-radius: 12px; font-family: var(--code); font-size: 1.6rem; transform: rotate(13deg); box-shadow: 0 0 25px var(--yellow); }
.moon-domino span { padding: 0.8rem; border: 2px solid var(--void); }
.final-seal { margin: 5rem auto 0; width: 220px; height: 220px; border-radius: 57% 43% 46% 54%; display: grid; place-items: center; text-align: center; background: var(--parchment); color: var(--void); font-family: var(--hand); box-shadow: 0 0 45px var(--yellow); animation: pulseBlob 4s infinite; }
.final-seal span { display: block; font-size: 4rem; color: var(--orange); }
.book-spine { position: absolute; bottom: 4vh; width: 80px; height: 310px; border-radius: 14px; background: linear-gradient(90deg, #2b1243, #56234f, #120822); box-shadow: inset 8px 0 0 rgba(255,230,0,.42), 0 0 25px rgba(255,43,214,.35); }
.spine-one { left: 7vw; transform: rotate(7deg); } .spine-two { right: 9vw; transform: rotate(-9deg); background: linear-gradient(90deg, #332205, #7a3d00, #1d0e08); }
.footnote-hop { position: absolute; z-index: 6; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--void); border: 3px solid var(--green); color: var(--green); font-family: var(--code); box-shadow: 0 0 22px var(--green); animation: hop 2.4s ease-in-out infinite; }
.footnote-hop { left: 54%; bottom: 17%; } .second { left: 42%; top: 57%; } .third { right: 30%; bottom: 24%; } .fourth { left: 64%; top: 25%; }

.arrival { opacity: 0; transform: translateY(32px) rotate(var(--r, 0deg)); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2,.9,.2,1); }
.arrival.in { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
.reveal { opacity: 0; transform: translateY(90px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.9,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-piece { transition: transform 0.8s ease, opacity 0.8s ease; }

body.book-open .tilt-plane { animation: tableOpen 1.1s ease forwards; }
body.book-open .path::before { animation: pathGlow 1.4s ease both; }

@keyframes pulseBlob { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.07) rotate(3deg); } }
@keyframes flutter { 0%, 100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(11px) rotate(-4deg); } }
@keyframes rewind { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes floatRoll { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(13deg); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.1); } }
@keyframes tableOpen { 50% { transform: rotateX(2deg) rotateZ(0deg) scale(1.02); } 100% { transform: rotateX(7deg) rotateZ(-2deg) scale(1); } }
@keyframes pathGlow { from { filter: drop-shadow(0 0 2px var(--cyan)); opacity: 0.1; } to { filter: drop-shadow(0 0 14px var(--cyan)); opacity: 1; } }

@media (max-width: 760px) {
  .chapter { padding: 6rem 1.2rem; }
  .tilt-plane { min-height: 860px; transform: rotateZ(-1deg); }
  .hero-copy { left: 6%; top: 18%; }
  .rule-card, .neon-sundial, .bookmark-magenta { display: none; }
  .open-book { left: 8%; bottom: 9%; }
  .blob-space { margin-left: 0; margin-right: 0; }
  .scrap-stack, .margin-note, .ledger-ribbon, .moon-domino, .book-spine { position: relative; inset: auto; margin: 1.5rem 0; }
  .scrap-stack { height: 420px; }
}