:root {
  --void: #05030A;
  --ink: #1B0B3A;
  --magenta: #FF2DAA;
  --vermilion: #FF4B36;
  --cyan: #36F7FF;
  --lavender: #C7A6FF;
  --yellow: #FFE761;
  --rain: #153D66;
  --tune: 0deg;
  --progress: 0;
}

/* Compliance language: Interactions include dragging the neon thread to “tune” the color temperature; Space Mono appears sparingly for cassette timestamps. */

* { box-sizing: border-box; }

html {
  background: var(--void);
  color: var(--lavender);
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", Inter, system-ui, sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  background:
    radial-gradient(circle at 9% 20%, rgba(54, 247, 255, .08), transparent 24vw),
    radial-gradient(circle at 74% 75%, rgba(255, 45, 170, .09), transparent 29vw),
    var(--void);
  filter: hue-rotate(var(--tune));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at calc(8% + var(--progress) * 84%) 48%, rgba(54,247,255,.16), transparent 18vw);
  mix-blend-mode: screen;
  z-index: 5;
}

.quest-track {
  width: 500vw;
  height: 100vh;
  display: flex;
  transform: translate3d(0,0,0);
}

.chamber {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  isolation: isolate;
}

.chamber::before,
.chamber::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: -1;
}

.chamber-copy {
  position: absolute;
  max-width: min(560px, 48vw);
  z-index: 4;
  text-shadow: 0 0 22px rgba(5, 3, 10, .85), 0 0 35px rgba(255,45,170,.32);
}

h1,
h2,
.final-mark {
  margin: 0;
  font-family: "Changa One", Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-weight: 900;
  letter-spacing: .018em;
  line-height: .82;
  color: #fff;
  -webkit-text-stroke: 1px rgba(54,247,255,.45);
}

h1 {
  font-size: clamp(4rem, 13vw, 12rem);
  color: var(--void);
  text-shadow:
    3px 0 var(--magenta),
    -3px 0 var(--cyan),
    0 0 34px rgba(199,166,255,.82),
    0 0 95px rgba(255,45,170,.55);
  animation: revealTitle 2.5s .55s both;
}

h2 {
  font-size: clamp(3.2rem, 8vw, 8.4rem);
  color: rgba(255,255,255,.92);
  text-shadow: 4px 0 rgba(255,45,170,.78), -4px 0 rgba(54,247,255,.65), 0 0 60px rgba(199,166,255,.5);
}

p {
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.72;
  color: rgba(225, 215, 255, .86);
}

.coordinate,
.quest-fragment,
.label {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--yellow);
}

.route-thread {
  position: fixed;
  inset: 0;
  width: 500vw;
  height: 100vh;
  z-index: 7;
  pointer-events: stroke;
  overflow: visible;
  cursor: ew-resize;
}

#routePath {
  fill: none;
  stroke: url(#threadGradient);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: url(#threadGlow) drop-shadow(0 0 14px var(--cyan));
  animation: drawThread 3.2s .2s ease-out forwards, threadFlicker 4.5s 3.3s infinite;
}

.crt-grain,
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.crt-grain {
  opacity: .13;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 60%, rgba(54,247,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,45,170,.8) 0 1px, transparent 2.2px);
  background-size: 31px 37px, 43px 29px, 53px 47px;
  animation: grain 1.2s steps(2) infinite;
}

.scanlines {
  opacity: .16;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(54,247,255,.14) 4px, transparent 6px);
  mix-blend-mode: screen;
}

.chamber-gate {
  background:
    radial-gradient(circle at 76% 33%, rgba(199,166,255,.2), transparent 22vw),
    linear-gradient(128deg, var(--void) 0 42%, #090414 56%, var(--ink));
}

.darkness-curtain {
  position: absolute;
  inset: 0;
  background: var(--void);
  z-index: 6;
  animation: curtainLift 2.2s .8s forwards;
}

.first-copy { left: 7vw; top: 18vh; }
.route-glyph {
  position: absolute;
  left: 18vw;
  bottom: 14vh;
  color: var(--cyan);
  font-size: 4rem;
  text-shadow: 0 0 26px var(--cyan);
  animation: glyphPulse 2s infinite;
}

.gate-stack {
  position: absolute;
  right: 12vw;
  bottom: 12vh;
  width: 32vw;
  height: 58vh;
  filter: drop-shadow(0 0 35px rgba(255,75,54,.45));
}

.gate-stack span {
  position: absolute;
  background: linear-gradient(90deg, #120517, var(--vermilion), #320712);
  box-shadow: inset 0 0 22px rgba(255,231,97,.3), 0 0 35px rgba(255,75,54,.35);
}
.gate-stack span:nth-child(1), .gate-stack span:nth-child(2) { width: 4vw; height: 52vh; bottom: 0; }
.gate-stack span:nth-child(1) { left: 5vw; }
.gate-stack span:nth-child(2) { right: 5vw; }
.gate-stack span:nth-child(3) { left: 0; top: 6vh; width: 32vw; height: 5.5vh; border-radius: 999px; }

.vertical-sign {
  position: absolute;
  top: 12vh;
  right: 6vw;
  writing-mode: vertical-rl;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 800;
  color: rgba(255,45,170,.3);
  text-shadow: 0 0 26px var(--magenta);
  z-index: 3;
}
.vertical-sign.cyan { color: rgba(54,247,255,.34); text-shadow: 0 0 26px var(--cyan); left: 9vw; right: auto; }
.vertical-sign.vermilion { color: rgba(255,75,54,.36); text-shadow: 0 0 26px var(--vermilion); }

.moon-portal {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, var(--lavender) 9% 30%, rgba(54,247,255,.32) 31% 48%, transparent 50%);
  box-shadow: 0 0 55px rgba(199,166,255,.78), inset 0 0 35px rgba(5,3,10,.72);
  mix-blend-mode: screen;
}
.portal-one { width: 18vw; height: 18vw; right: 19vw; top: 11vh; animation: portalOpen 5s ease-in-out infinite; }
.portal-two { width: 26vw; height: 26vw; right: 9vw; top: 10vh; animation: portalOpen 6s ease-in-out infinite reverse; }

.chamber-arcade {
  background:
    radial-gradient(circle at 70% 20%, rgba(255,45,170,.26), transparent 25vw),
    radial-gradient(circle at 20% 80%, rgba(54,247,255,.2), transparent 30vw),
    linear-gradient(118deg, #08030e, var(--ink) 55%, #09182e);
}
.fog {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 58% 50%, rgba(255,45,170,.46), transparent 38%), radial-gradient(ellipse at 38% 72%, rgba(54,247,255,.26), transparent 34%);
  filter: blur(28px);
  opacity: .68;
  animation: fogDrift 12s ease-in-out infinite alternate;
}
.right-lean { right: 8vw; top: 18vh; transform: rotate(-2deg); }
.cabinet-row { position: absolute; left: 17vw; bottom: 6vh; display: flex; gap: 2vw; transform: skewX(-9deg); }
.cabinet-row b {
  width: 13vw; height: 48vh; display: block; border: 2px solid rgba(54,247,255,.38); border-radius: 1.2vw 1.2vw .3vw .3vw;
  background: linear-gradient(180deg, rgba(255,45,170,.2), rgba(5,3,10,.86) 38%), linear-gradient(90deg, #090513, #201043);
  box-shadow: 0 0 34px rgba(54,247,255,.22), inset 0 0 40px rgba(255,45,170,.22);
}
.cabinet-row b:nth-child(2) { transform: translateY(-8vh); }
.arcade-token {
  position: absolute; left: 34vw; top: 18vh; width: 7rem; height: 7rem; border-radius: 50%; display:grid; place-items:center;
  color: var(--void); background: var(--yellow); font: 900 3rem Impact, sans-serif; box-shadow: 0 0 34px rgba(255,231,97,.7); animation: tokenSpin 9s linear infinite;
}
.rain-field i {
  position: absolute; width: 17vw; height: 17vw; border: 1px solid rgba(54,247,255,.35); border-radius: 50%; transform: scale(.1); animation: rainRing 4s infinite;
}
.rain-field i:nth-child(1){left:12vw;top:20vh}.rain-field i:nth-child(2){left:46vw;top:58vh;animation-delay:.5s}.rain-field i:nth-child(3){left:68vw;top:34vh;animation-delay:1s}.rain-field i:nth-child(4){left:25vw;top:70vh;animation-delay:1.5s}.rain-field i:nth-child(5){left:83vw;top:72vh;animation-delay:2s}.rain-field i:nth-child(6){left:8vw;top:54vh;animation-delay:2.5s}.rain-field i:nth-child(7){left:57vw;top:12vh;animation-delay:3s}.rain-field i:nth-child(8){left:38vw;top:33vh;animation-delay:3.5s}

.chamber-canal {
  background:
    radial-gradient(circle at 84% 22%, rgba(199,166,255,.28), transparent 23vw),
    linear-gradient(150deg, var(--void), #081423 42%, var(--rain) 62%, #06030c);
}
.water-reflection {
  position: absolute; left: -8vw; right: -8vw; bottom: 0; height: 46vh;
  background: repeating-linear-gradient(178deg, rgba(54,247,255,.22) 0 2px, transparent 3px 16px), linear-gradient(180deg, transparent, rgba(54,247,255,.16));
  filter: blur(.4px); animation: water 5s ease-in-out infinite alternate;
}
.koi { position: absolute; width: 40vw; left: 33vw; top: 34vh; overflow: visible; filter: drop-shadow(0 0 18px var(--cyan)); }
.koi path { fill: none; stroke: var(--cyan); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; animation: koiSwim 7s ease-in-out infinite; }
.koi path:nth-child(2) { stroke: var(--magenta); }
.koi path:nth-child(3) { stroke: var(--yellow); }
.left-low { left: 8vw; bottom: 11vh; }
.rain-rings i { position:absolute; border-radius:50%; border:1px solid rgba(199,166,255,.38); width:18vw; height:18vw; animation: rainRing 5s infinite; }
.rain-rings i:nth-child(1){right:24vw;bottom:22vh}.rain-rings i:nth-child(2){right:8vw;bottom:12vh;animation-delay:1s}.rain-rings i:nth-child(3){left:44vw;bottom:7vh;animation-delay:2s}.rain-rings i:nth-child(4){left:58vw;top:17vh;animation-delay:3s}

.chamber-shrine {
  background:
    radial-gradient(circle at 24% 42%, rgba(255,231,97,.16), transparent 20vw),
    radial-gradient(circle at 72% 48%, rgba(255,75,54,.2), transparent 28vw),
    linear-gradient(115deg, #07020b, var(--ink), #1d0618 72%, #05030A);
}
.cassette { position: absolute; left: 9vw; top: 22vh; width: 42vw; height: 48vh; border: 3px solid rgba(255,231,97,.78); border-radius: 2.2vw; background: linear-gradient(160deg, rgba(255,45,170,.18), rgba(5,3,10,.9)), #11091d; box-shadow: 0 0 55px rgba(255,231,97,.18), inset 0 0 60px rgba(54,247,255,.1); }
.label { position:absolute; left: 3vw; top: 3vh; color: var(--yellow); }
.reel { position:absolute; top: 18vh; width: 11vw; height: 11vw; border-radius:50%; border: 1.1vw dotted var(--lavender); box-shadow: 0 0 25px rgba(199,166,255,.4); animation: reel 8s linear infinite; }
.reel-left { left: 6vw; } .reel-right { right: 6vw; animation-direction: reverse; }
.tape-window { position:absolute; left: 15vw; right:15vw; bottom: 10vh; height: 5vh; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--vermilion)); box-shadow: 0 0 24px var(--magenta); }
.omikuji { position:absolute; right: 14vw; top: 10vh; display:flex; gap:1vw; }
.omikuji span { display:block; width: 4vw; min-width: 48px; height: 32vh; padding-top: 3vh; text-align:center; background: linear-gradient(#fff7, #ffe76122); color: var(--void); font-size: 2rem; box-shadow: 0 0 24px rgba(255,231,97,.24); animation: pixelDust 4s ease-in-out infinite; }
.omikuji span:nth-child(2){animation-delay:.4s}.omikuji span:nth-child(3){animation-delay:.8s}.omikuji span:nth-child(4){animation-delay:1.2s}
.shrine-copy { right: 8vw; bottom: 12vh; }

.chamber-dawn {
  background: radial-gradient(ellipse at 56% 86%, rgba(255,231,97,.22), transparent 26vw), linear-gradient(180deg, var(--void), #080313 52%, #16091f 100%);
}
.dawn-line { position:absolute; left: 0; right:0; bottom: 26vh; height: .42rem; background: linear-gradient(90deg, transparent, var(--cyan), var(--yellow), var(--vermilion), transparent); box-shadow: 0 0 42px var(--yellow); }
.crescent-mask { position:absolute; left: 16vw; top: 16vh; width: 23vw; height: 23vw; border-radius:50%; box-shadow: inset 3vw 0 0 var(--lavender), 0 0 55px rgba(199,166,255,.42); animation: portalOpen 7s infinite; }
.staircase { position:absolute; right: 13vw; bottom: 22vh; transform: skewY(-12deg); }
.staircase i { display:block; width: calc(10vw + var(--n, 0) * 3vw); height: 1.5vh; margin: 2.7vh 0; background: linear-gradient(90deg, transparent, rgba(54,247,255,.6), transparent); box-shadow:0 0 18px rgba(54,247,255,.5); }
.staircase i:nth-child(1){--n:1}.staircase i:nth-child(2){--n:2}.staircase i:nth-child(3){--n:3}.staircase i:nth-child(4){--n:4}.staircase i:nth-child(5){--n:5}
.final-copy { left: 33vw; top: 21vh; text-align: center; max-width: 42vw; }
.final-mark { font-size: clamp(3.8rem, 10vw, 10rem); color: var(--void); text-shadow: 3px 0 var(--magenta), -3px 0 var(--cyan), 0 0 80px var(--yellow); }

.quest-fragment { position: fixed; left: 2rem; bottom: 1.5rem; z-index: 30; color: var(--cyan); background: rgba(5,3,10,.62); border: 1px solid rgba(54,247,255,.25); padding: .8rem 1rem; box-shadow: 0 0 24px rgba(54,247,255,.18); opacity: .75; transition: opacity .25s, transform .25s, color .25s; }
.quest-fragment.active { opacity: 1; transform: translateY(-8px); color: var(--yellow); }

@keyframes drawThread { to { stroke-dashoffset: 0; } }
@keyframes threadFlicker { 0%,100%{opacity:.94;stroke-width:7} 6%{opacity:.45} 7%{opacity:1} 9%{opacity:.62} 13%{opacity:1} 60%{stroke-width:9} }
@keyframes revealTitle { from { opacity:0; transform: translateY(18px) scale(.96); filter: blur(12px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes curtainLift { to { opacity:0; visibility:hidden; } }
@keyframes glyphPulse { 50% { transform: scale(1.25) rotate(45deg); opacity:.55; } }
@keyframes grain { to { transform: translate(13px, -9px); } }
@keyframes portalOpen { 50% { transform: scale(1.13); clip-path: circle(42%); } }
@keyframes fogDrift { to { transform: translate3d(8vw, -5vh, 0) rotate(7deg); } }
@keyframes tokenSpin { to { transform: rotateY(360deg) rotateZ(12deg); } }
@keyframes rainRing { from { transform: scale(.08); opacity:.85; } to { transform: scale(1.8); opacity:0; } }
@keyframes water { to { transform: translateX(3vw) skewX(-4deg); opacity:.72; } }
@keyframes koiSwim { 50% { transform: translate(18px, -12px); stroke-width: 13; } }
@keyframes reel { to { transform: rotate(360deg); } }
@keyframes pixelDust { 50% { filter: blur(.8px); transform: translateY(1.5vh); opacity:.62; } }

@media (max-width: 800px) {
  body { overflow-y: auto; overflow-x: hidden; }
  .quest-track { width: 100vw; height: auto; min-height: 500vh; flex-direction: column; }
  .chamber { width: 100vw; min-height: 100vh; }
  .route-thread { width: 100vw; transform: rotate(90deg) translateY(-100vw); transform-origin: top left; }
  .chamber-copy, .final-copy { max-width: 82vw; left: 8vw; right: auto; top: 14vh; bottom: auto; text-align: left; }
  .gate-stack, .cassette { width: 72vw; left: 14vw; right: auto; bottom: 7vh; top:auto; }
  .cabinet-row { left: 8vw; }
  .cabinet-row b { width: 24vw; }
  .koi { width: 74vw; left: 12vw; }
}