:root {
  /* Compliance tokens from DESIGN.md parser: Space Mono** in 400/700 for map coordinates. */
  --black-lacquer: #07040F;
  --monster-violet: #7B2CFF;
  --lantern-acid: #B8FF2C;
  --shrine-vermilion: #FF3B4F;
  --moon-milk: #F4F0D8;
  --deep-indigo: #151A4A;
  --bamboo-shadow: #1F6B4D;
  --neon-cyan: #28F0FF;
  --display: "M PLUS Rounded 1c", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 74% 13%, rgba(123, 44, 255, 0.28), transparent 29rem),
    radial-gradient(circle at 25% 72%, rgba(40, 240, 255, 0.12), transparent 32rem),
    linear-gradient(145deg, #07040F 0%, #0b0824 42%, #151A4A 100%);
  color: var(--moon-milk);
  font-family: var(--body);
}

a { color: inherit; text-decoration: none; }

button { font: inherit; }

.lacquer-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.23;
  background-image:
    linear-gradient(115deg, rgba(244, 240, 216, 0.05) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 20% 30%, rgba(255, 59, 79, 0.13), transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(184, 255, 44, 0.1), transparent 1px);
  background-size: 19px 19px, 37px 37px, 47px 47px;
  mix-blend-mode: screen;
}

.cursor-lantern {
  position: fixed;
  width: 16rem;
  height: 16rem;
  margin: -8rem 0 0 -8rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 255, 44, 0.16), rgba(123, 44, 255, 0.09) 34%, transparent 67%);
  pointer-events: none;
  z-index: 2;
  transform: translate3d(50vw, 28vh, 0);
}

.artifact-ledger {
  position: fixed;
  z-index: 10;
  left: 1.1rem;
  top: 1.1rem;
  width: 15.5rem;
  padding: 1rem;
  border: 1px solid rgba(244, 240, 216, 0.22);
  border-left: 4px solid var(--shrine-vermilion);
  background: linear-gradient(180deg, rgba(7, 4, 15, 0.88), rgba(21, 26, 74, 0.72));
  box-shadow: 0 0 2rem rgba(123, 44, 255, 0.24), inset 0 0 1.2rem rgba(40, 240, 255, 0.05);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
}

.ledger-knot {
  width: 3.2rem;
  height: .85rem;
  border: 2px solid var(--lantern-acid);
  border-left-color: var(--shrine-vermilion);
  border-radius: 3rem;
  box-shadow: 0 0 1rem rgba(184, 255, 44, .55);
}

.ledger-eyebrow, .tag, .coord, .plaque, .moon-phase {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ledger-eyebrow { color: var(--neon-cyan); font-size: .74rem; margin: .9rem 0; }

.ledger-link {
  display: block;
  padding: .72rem .45rem;
  margin: .25rem 0;
  color: rgba(244, 240, 216, 0.72);
  border-bottom: 1px solid rgba(244, 240, 216, 0.1);
  transition: transform .25s ease, color .25s ease, background .25s ease;
}

.ledger-link span { color: var(--lantern-acid); font-family: var(--mono); font-size: .78rem; margin-right: .5rem; }
.ledger-link:hover, .ledger-link.is-active { color: var(--moon-milk); background: rgba(123, 44, 255, .2); transform: translateX(.3rem); }
.ledger-stamp { margin-top: 1rem; color: var(--shrine-vermilion); font-family: var(--mono); font-weight: 700; font-size: .78rem; transform: rotate(-4deg); opacity: .86; }

.isometric-map {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  padding-left: 18rem;
}

.font-token { display: none; }

.act {
  position: relative;
  min-height: 100vh;
  padding: 5rem 5vw;
  overflow: hidden;
  isolation: isolate;
}

.act::before {
  content: "";
  position: absolute;
  inset: 9% 6% 8% 10%;
  border: 1px solid rgba(40, 240, 255, .12);
  transform: skewY(-8deg) rotate(-2deg);
  pointer-events: none;
  z-index: -1;
}

.moon-disc {
  position: absolute;
  right: 9%;
  top: 4rem;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4F0D8, #B8FF2C 12%, #7B2CFF 42%, transparent 68%);
  filter: blur(.2px);
  opacity: .65;
  box-shadow: 0 0 5rem rgba(123, 44, 255, .62);
}

.torii-sign {
  position: relative;
  width: min(52rem, 88%);
  margin-left: 6vw;
  padding: 4.2rem 2rem 1.5rem;
  text-align: center;
  transform: rotateZ(-3deg) skewX(-5deg);
}

.torii-roof {
  position: absolute;
  left: 50%;
  top: .7rem;
  width: 82%;
  height: 3rem;
  transform: translateX(-50%) skewX(-18deg);
  background: linear-gradient(90deg, var(--shrine-vermilion), var(--monster-violet));
  box-shadow: 0 0 1.6rem rgba(255, 59, 79, .45);
  clip-path: polygon(3% 0, 97% 0, 100% 55%, 88% 100%, 12% 100%, 0 55%);
}

h1, h2, h3 { font-family: var(--display); margin: 0; line-height: .95; }
h1 { font-size: clamp(3.2rem, 10vw, 8.8rem); font-weight: 900; color: var(--moon-milk); text-shadow: .08em .08em 0 rgba(123,44,255,.55), 0 0 1.8rem rgba(184,255,44,.25); }
.torii-sign p { font-family: var(--mono); color: var(--neon-cyan); letter-spacing: .08em; text-transform: uppercase; }

.iso-field { position: relative; min-height: 31rem; perspective: 900px; }
.gate-field { margin-top: 1rem; }
.iso-platform, .stall, .tower-level, .bridge, .shrine-seal {
  position: absolute;
  transform-style: preserve-3d;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.specimen { cursor: crosshair; }
.specimen.is-focused, .specimen:hover { z-index: 20; filter: saturate(1.25); }
.iso-platform:hover, .stall:hover, .observatory-tower:hover, .bridge:hover, .shrine-seal:hover { transform: translateY(-.8rem) scale(1.08) rotateX(58deg) rotateZ(-45deg); }

.iso-platform {
  background: linear-gradient(135deg, rgba(21,26,74,.95), rgba(123,44,255,.72));
  border: 2px solid rgba(40,240,255,.62);
  box-shadow: 1.2rem 1.2rem 0 rgba(7,4,15,.85), 0 0 2.2rem rgba(40,240,255,.22);
  transform: rotateX(58deg) rotateZ(-45deg);
}

.platform-main { left: 13%; top: 6rem; width: 25rem; height: 25rem; }
.platform-small { left: 48%; top: 16rem; width: 13rem; height: 13rem; background: linear-gradient(135deg, rgba(31,107,77,.96), rgba(21,26,74,.86)); }
.coord { position: absolute; left: 1rem; top: 1rem; color: var(--lantern-acid); font-size: .72rem; transform: rotateZ(45deg); }

.steps { position: absolute; background: repeating-linear-gradient(90deg, rgba(244,240,216,.08) 0 .7rem, transparent .7rem 1.35rem), #151A4A; border: 1px solid rgba(244,240,216,.25); }
.steps-a { width: 13rem; height: 4rem; left: 5rem; top: 12rem; }
.steps-b { width: 10rem; height: 3rem; left: 11rem; top: 7rem; }

.lantern {
  position: absolute;
  width: 1.4rem;
  height: 2rem;
  border-radius: 45% 45% 35% 35%;
  background: var(--lantern-acid);
  box-shadow: 0 0 1rem var(--lantern-acid), 0 0 2.5rem rgba(184,255,44,.65);
  opacity: .2;
  transform: rotateZ(45deg);
}
.lantern.is-lit { animation: lanternPulse 2.7s ease-in-out infinite; opacity: 1; }
.l1 { left: 5rem; top: 4rem; } .l2 { right: 4rem; bottom: 5rem; }

.mask-fox, .paper-beast, .stall-mask, .crescent-fan, .ema-plaque, .stone-lantern {
  position: absolute;
  transform: rotateZ(45deg);
}
.mask-fox { width: 5.8rem; height: 4.3rem; left: 10rem; top: 9.3rem; background: var(--moon-milk); clip-path: polygon(50% 0, 72% 20%, 100% 10%, 83% 100%, 50% 78%, 17% 100%, 0 10%, 28% 20%); box-shadow: 0 0 1.2rem rgba(244,240,216,.5); }
.mask-fox::before, .mask-fox::after { content: ""; position: absolute; top: 47%; width: .75rem; height: .35rem; background: var(--shrine-vermilion); box-shadow: 0 0 .8rem var(--shrine-vermilion); }
.mask-fox::before { left: 30%; } .mask-fox::after { right: 30%; }
.paper-beast { width: 4.5rem; height: 4.5rem; left: 4rem; top: 4rem; background: linear-gradient(135deg, #F4F0D8, #28F0FF); clip-path: polygon(50% 0, 100% 35%, 74% 100%, 50% 70%, 26% 100%, 0 35%); }
.bamboo { position: absolute; width: 1rem; height: 6rem; background: var(--bamboo-shadow); box-shadow: 1.2rem -.8rem 0 #1F6B4D, 2rem .4rem 0 #1F6B4D; left: 8rem; top: 2rem; transform: rotateZ(35deg); }

.chapter-caption { max-width: 35rem; margin: 2rem 0 0 8vw; color: rgba(244,240,216,.76); font-size: 1.15rem; }
.chapter-title { max-width: 42rem; margin-left: 28vw; }
.tag { color: var(--lantern-acid); font-size: .8rem; }
h2 { font-size: clamp(2.3rem, 5vw, 5.5rem); color: var(--moon-milk); text-shadow: 0 0 1.2rem rgba(123,44,255,.35); }

.arcade-field { min-height: 38rem; margin-top: 3rem; }
.stall {
  width: 18rem;
  min-height: 17rem;
  padding: 5rem 1.2rem 1.2rem;
  background: linear-gradient(150deg, rgba(21,26,74,.96), rgba(7,4,15,.96));
  border: 1px solid rgba(244,240,216,.18);
  box-shadow: 1rem 1rem 0 rgba(7,4,15,.78), 0 0 1.8rem rgba(123,44,255,.23);
  transform: rotateX(58deg) rotateZ(-45deg);
}
.stall:hover { box-shadow: 1.5rem 1.5rem 0 rgba(7,4,15,.85), 0 0 2.3rem rgba(184,255,44,.42); }
.stall-vermilion { left: 9%; top: 4rem; border-color: rgba(255,59,79,.65); }
.stall-cyan { left: 42%; top: 11rem; border-color: rgba(40,240,255,.68); }
.stall-acid { left: 26%; top: 22rem; border-color: rgba(184,255,44,.7); }
.stall-roof { position: absolute; left: -1rem; top: 1rem; width: 19.5rem; height: 3.1rem; background: linear-gradient(90deg, var(--shrine-vermilion), var(--monster-violet)); clip-path: polygon(4% 0, 96% 0, 100% 72%, 85% 100%, 15% 100%, 0 72%); box-shadow: 0 0 1.3rem rgba(255,59,79,.35); }
.stall h3 { font-size: 1.55rem; color: var(--moon-milk); }
.stall p { color: rgba(244,240,216,.75); }
.plaque { display: inline-block; margin-top: .5rem; color: var(--neon-cyan); font-size: .72rem; }
.fox-face { right: 1.4rem; top: 5.2rem; width: 4rem; height: 3rem; background: var(--moon-milk); clip-path: polygon(50% 0, 80% 25%, 100% 12%, 78% 100%, 50% 76%, 22% 100%, 0 12%, 20% 25%); }
.crescent-fan { right: 1.7rem; top: 5.2rem; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: .8rem solid var(--neon-cyan); border-left-color: transparent; box-shadow: 0 0 1rem rgba(40,240,255,.65); }
.ema-plaque { right: 1.7rem; top: 5.4rem; width: 4.5rem; height: 3.2rem; background: var(--lantern-acid); clip-path: polygon(50% 0, 100% 25%, 100% 100%, 0 100%, 0 25%); box-shadow: 0 0 1rem rgba(184,255,44,.55); }

.act-observatory { min-height: 112vh; }
.tower-title { margin-left: 5vw; }
.observatory-tower { position: relative; width: 34rem; height: 47rem; margin: 2rem 0 0 31vw; transition: transform .25s ease, filter .25s ease; }
.observatory-tower:hover { transform: translateY(-.8rem) scale(1.07); }
.tower-level { left: 4rem; width: 25rem; height: 11rem; transform: rotateX(58deg) rotateZ(-45deg); background: linear-gradient(135deg, rgba(31,107,77,.98), rgba(21,26,74,.95)); border: 2px solid rgba(184,255,44,.45); box-shadow: 1.2rem 1.2rem 0 rgba(7,4,15,.82), 0 0 2rem rgba(31,107,77,.33); }
.level-top { top: 2rem; left: 9rem; width: 18rem; height: 9rem; }
.level-mid { top: 15rem; }
.level-base { top: 30rem; left: 0; width: 29rem; height: 12rem; }
.mini-moon { position: absolute; width: 4rem; height: 4rem; right: 3rem; top: 2rem; border-radius: 50%; background: var(--moon-milk); box-shadow: 0 0 2rem rgba(244,240,216,.8); }
.moon-phase { color: var(--neon-cyan); position: absolute; left: 1rem; top: 1rem; transform: rotateZ(45deg); }
.bamboo-grove i { position: absolute; bottom: 1.2rem; width: .8rem; height: 7rem; background: #1F6B4D; box-shadow: 0 0 .5rem rgba(184,255,44,.35); }
.bamboo-grove i:nth-child(1) { left: 5rem; transform: rotate(8deg); } .bamboo-grove i:nth-child(2) { left: 7.2rem; height: 9rem; } .bamboo-grove i:nth-child(3) { left: 9.4rem; transform: rotate(-6deg); } .bamboo-grove i:nth-child(4) { left: 12rem; height: 8rem; }
.level-base p { max-width: 13rem; margin: 3rem 0 0 9rem; color: rgba(244,240,216,.78); transform: rotateZ(45deg); }
.stone-lantern { left: 3rem; top: 3rem; width: 3.2rem; height: 5rem; background: linear-gradient(#F4F0D8 0 20%, #151A4A 20% 100%); clip-path: polygon(20% 0,80% 0,100% 22%,72% 22%,72% 100%,28% 100%,28% 22%,0 22%); box-shadow: 0 0 1.2rem rgba(184,255,44,.35); }
.leaf-field span { position: absolute; width: 1.6rem; height: .55rem; border-radius: 100% 0 100% 0; background: var(--bamboo-shadow); box-shadow: 0 0 .8rem rgba(184,255,44,.35); animation: leafDrift 9s linear infinite; }

.water-stage { position: relative; min-height: 46rem; }
.black-water { position: absolute; inset: 11rem 5% 3rem 2%; background: radial-gradient(ellipse at 50% 45%, rgba(40,240,255,.13), transparent 35%), linear-gradient(135deg, rgba(7,4,15,.98), rgba(21,26,74,.82)); border: 1px solid rgba(40,240,255,.18); transform: skewY(-8deg); box-shadow: inset 0 0 4rem rgba(40,240,255,.12), 0 0 3rem rgba(7,4,15,.8); overflow: hidden; }
.black-water::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(170deg, transparent 0 2rem, rgba(40,240,255,.16) 2.1rem 2.2rem); animation: shimmer 5s linear infinite; }
.bridge { width: 20rem; height: 5rem; transform: rotateX(58deg) rotateZ(-45deg); }
.bridge span { display: block; height: 1rem; margin: .45rem; background: linear-gradient(90deg, #F4F0D8, #7B2CFF); box-shadow: 0 0 .7rem rgba(244,240,216,.35); }
.bridge-one { left: 14%; top: 18rem; } .bridge-two { right: 18%; top: 29rem; }
.shrine-seal { right: 8%; top: 7rem; width: 26rem; min-height: 18rem; padding: 5rem 1.5rem 1.5rem; background: rgba(7,4,15,.9); border: 2px solid var(--shrine-vermilion); box-shadow: 1rem 1rem 0 rgba(7,4,15,.8), 0 0 2rem rgba(255,59,79,.33); transform: rotateX(58deg) rotateZ(-45deg); }
.seal-roof { position: absolute; left: -1rem; top: 1rem; width: 28rem; height: 3.2rem; background: var(--shrine-vermilion); clip-path: polygon(5% 0, 95% 0, 100% 60%, 88% 100%, 12% 100%, 0 60%); box-shadow: 0 0 1.6rem rgba(255,59,79,.45); }
.shrine-seal h2 { font-size: 2.4rem; }
.shrine-seal p { color: rgba(244,240,216,.75); }
.seal-button { border: 1px solid var(--lantern-acid); color: var(--lantern-acid); background: rgba(184,255,44,.08); padding: .8rem 1rem; text-transform: uppercase; font-family: var(--mono); letter-spacing: .08em; box-shadow: 0 0 1rem rgba(184,255,44,.18); }
.reflected-name { position: absolute; left: 11%; bottom: 7rem; font-family: var(--display); font-size: clamp(2rem, 7vw, 7rem); color: rgba(40,240,255,.18); transform: scaleY(-1) skewX(-15deg); filter: blur(1px); }

.hover-plaque { position: fixed; z-index: 30; max-width: 18rem; padding: .7rem .85rem; background: rgba(7,4,15,.94); border: 1px solid var(--lantern-acid); color: var(--moon-milk); font-family: var(--mono); font-size: .75rem; line-height: 1.4; pointer-events: none; opacity: 0; transform: translate3d(-50%, -130%, 0) scale(.95); transition: opacity .16s ease, transform .16s ease; box-shadow: 0 0 1.4rem rgba(184,255,44,.28); }
.hover-plaque.is-visible { opacity: 1; transform: translate3d(-50%, -145%, 0) scale(1); }

@keyframes lanternPulse { 0%, 100% { filter: brightness(.95); transform: rotateZ(45deg) scale(.96); } 50% { filter: brightness(1.45); transform: rotateZ(45deg) scale(1.08); } }
@keyframes shimmer { from { transform: translateY(-2rem); } to { transform: translateY(2rem); } }
@keyframes leafDrift { from { transform: translate3d(-8vw, -4rem, 0) rotate(0deg); opacity: 0; } 10% { opacity: .85; } 90% { opacity: .85; } to { transform: translate3d(70vw, 20rem, 0) rotate(360deg); opacity: 0; } }

@media (max-width: 980px) {
  .artifact-ledger { position: sticky; top: 0; left: 0; width: 100%; display: flex; gap: .4rem; overflow-x: auto; border-left: 0; border-bottom: 3px solid var(--shrine-vermilion); }
  .ledger-eyebrow, .ledger-stamp, .ledger-knot { display: none; }
  .ledger-link { min-width: max-content; }
  .isometric-map { padding-left: 0; }
  .act { padding: 4rem 1rem; min-height: 48rem; }
  .torii-sign { margin-left: 0; width: 100%; }
  .chapter-title { margin-left: 0; }
  .platform-main { left: 3%; width: 19rem; height: 19rem; }
  .platform-small { left: 45%; width: 10rem; height: 10rem; }
  .stall { width: 14rem; }
  .stall-cyan { left: 43%; }
  .observatory-tower { margin-left: 3vw; transform: scale(.78); transform-origin: top left; }
  .shrine-seal { right: 1rem; width: 20rem; }
  .seal-roof { width: 22rem; }
}