:root {
  --cold: #D8F7FF;
  --defensive: #090712;
  --blush: #FF3D9A;
  --secret-soft: #FFF1D6;
  --rival: #FF2442;
  --cyan: #23D7FF;
  --lemon: #FFE45C;
  --silver: #B8C8D8;
  --chrome-sweep: linear-gradient(115deg, #D8F7FF 0%, #B8C8D8 28%, #FFFFFF 43%, #6B7A96 62%, #23D7FF 100%);
  --title-font: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --body-font: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --soft-font: "M PLUS Rounded 1c", "Arial Rounded MT Bold", system-ui, sans-serif;
  --mono-font: "Space Mono", "SFMono-Regular", Consolas, monospace;
  --heat: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: #FFFFFF;
  background: #090712;
  font-family: var(--body-font);
}

body.chapter-frost { --heat: 0; }
body.chapter-thorn { --heat: .25; }
body.chapter-locker { --heat: .48; }
body.chapter-reactor { --heat: .78; }
body.chapter-ending { --heat: 1; }

.ambient-grid,
.temperature-wash,
.route-line {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ambient-grid {
  background:
    repeating-linear-gradient(96deg, rgba(216,247,255,.08) 0 1px, transparent 1px 9vw),
    repeating-linear-gradient(-6deg, rgba(255,61,154,.07) 0 1px, transparent 1px 14vh),
    radial-gradient(circle at 84% 20%, rgba(35,215,255,.22), transparent 30%),
    radial-gradient(circle at 18% 76%, rgba(255,61,154,.18), transparent 32%);
  transform: rotate(-4deg) scale(1.08);
  filter: contrast(1.2);
}

.temperature-wash {
  background:
    linear-gradient(125deg, rgba(216,247,255,calc(.34 - var(--heat) * .16)), transparent 45%),
    linear-gradient(305deg, rgba(255,61,154,calc(var(--heat) * .44)), transparent 55%),
    #090712;
  mix-blend-mode: screen;
  opacity: .76;
  transition: background .7s ease;
}

.route-line {
  z-index: 2;
  inset: 8% auto 8% 2.1rem;
  width: 3px;
  background: linear-gradient(#23D7FF, #D8F7FF, #FF3D9A);
  box-shadow: 0 0 18px #23D7FF;
  transform-origin: top;
  transform: scaleY(var(--route-progress, .05));
}

.charm-nav {
  position: fixed;
  z-index: 20;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .7rem;
}

.charm {
  width: 3.3rem;
  height: 3.3rem;
  border: 1px solid rgba(216,247,255,.55);
  border-radius: 45% 55% 44% 56%;
  color: #090712;
  background: var(--chrome-sweep);
  box-shadow: inset 0 0 12px #FFFFFF, 0 0 16px rgba(35,215,255,.35);
  font-family: var(--mono-font);
  cursor: pointer;
  transform: rotate(-10deg) scale(.92);
  transition: transform .25s ease, filter .25s ease;
}

.charm span { display: block; font-size: .62rem; }
.charm i { font-style: normal; font-size: 1rem; }
.charm.is-active { filter: hue-rotate(112deg) saturate(1.6); transform: rotate(8deg) scale(1.08); }
.charm:hover { transform: rotate(14deg) scale(1.12); }

.labyrinth { position: relative; z-index: 3; }
.stage {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 6rem clamp(1.3rem, 5vw, 6rem);
  overflow: hidden;
}

.gate { background: linear-gradient(132deg, rgba(9,7,18,.96) 0 48%, rgba(216,247,255,.12) 49% 100%); }
.chrome-slab, .black-lacquer, .shard { position: absolute; inset: auto; }
.chrome-slab {
  width: 72vw; height: 72vh; left: -12vw; top: 8vh;
  background: var(--chrome-sweep);
  clip-path: polygon(0 12%, 76% 0, 100% 78%, 14% 100%);
  opacity: .78;
  transform: rotate(-8deg);
  box-shadow: inset 0 0 55px #FFFFFF, 0 0 45px rgba(35,215,255,.35);
}
.black-lacquer {
  width: 68vw; height: 74vh; right: -10vw; bottom: -4vh;
  background: linear-gradient(140deg, #090712, #171020 55%, #090712);
  clip-path: polygon(16% 0, 100% 12%, 86% 100%, 0 82%);
  border: 1px solid rgba(255,61,154,.32);
}
.shard { background: rgba(216,247,255,.28); border: 1px solid #D8F7FF; filter: blur(.2px); }
.shard-a { width: 20vw; height: 42vh; left: 13vw; top: 7vh; clip-path: polygon(42% 0, 100% 44%, 57% 100%, 0 30%); animation: twitch 4s infinite; }
.shard-b { width: 18vw; height: 24vh; right: 12vw; bottom: 12vh; clip-path: polygon(0 20%, 100% 0, 68% 100%, 18% 82%); animation: twitch 5s infinite reverse; }

.gate-content {
  position: relative;
  width: min(1050px, 92vw);
  padding: 3rem 2rem;
  transform: rotate(-4deg);
}
.route-tag {
  font-family: var(--mono-font);
  color: #23D7FF;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: clamp(.68rem, 1vw, .88rem);
}
.wordmark {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--title-font);
  font-size: clamp(5rem, 16vw, 14rem);
  line-height: .78;
  letter-spacing: .025em;
  text-shadow: 4px 4px 0 #FF3D9A, -3px -3px 0 #23D7FF, 0 0 35px #D8F7FF;
}
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  left: 2rem;
  top: 3.6rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(216,247,255,.42);
  transform: translate(1.5vw, -1vh);
}
.warning-tape {
  position: absolute;
  left: 0;
  width: 100%;
  padding: .55rem 1rem;
  overflow: hidden;
  white-space: nowrap;
  color: #090712;
  background: repeating-linear-gradient(45deg, #FF2442 0 18px, #FFE45C 18px 36px);
  font-family: var(--mono-font);
  font-weight: 900;
  box-shadow: 0 0 20px rgba(255,36,66,.6);
  transition: transform .28s cubic-bezier(.2,1.7,.4,1);
}
.tape-one { top: 40%; transform: rotate(-10deg); }
.tape-two { top: 54%; transform: rotate(8deg); }
.gate:hover .tape-one, .gate.tape-snap .tape-one { transform: rotate(-18deg) translateX(12vw); }
.gate:hover .tape-two, .gate.tape-snap .tape-two { transform: rotate(15deg) translateX(-10vw); }
.taunt { font-family: var(--title-font); font-size: clamp(2rem, 5vw, 5rem); color: #D8F7FF; text-shadow: 0 0 16px #23D7FF; }
.ignore-button, .reactor-button, .continue-button {
  border: 1px solid #D8F7FF;
  background: #090712;
  color: #D8F7FF;
  padding: .9rem 1.2rem;
  font-family: var(--mono-font);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(35,215,255,.25), 0 0 18px rgba(255,61,154,.24);
}
.ignore-button:hover, .reactor-button:hover, .continue-button:hover { color: #FFF1D6; border-color: #FF3D9A; transform: translateY(-3px) rotate(-2deg); }
.hidden-note {
  width: max-content;
  max-width: 90%;
  margin-top: 1rem;
  padding: .8rem 1rem;
  opacity: 0;
  transform: translateY(-8px) rotate(2deg);
  background: #FFF1D6;
  color: #090712;
  font-family: var(--soft-font);
  border-radius: 16px 7px 18px 8px;
  transition: opacity .3s ease, transform .3s ease;
}
.hidden-note.revealed { opacity: 1; transform: translateY(0) rotate(-2deg); }
.sticker-field { position: absolute; inset: 12% 8% auto auto; display: grid; gap: .8rem; transform: rotate(9deg); }
.sticker-field span { background: #FFE45C; color: #090712; border: 2px solid #FFFFFF; padding: .5rem .7rem; font-family: var(--mono-font); box-shadow: 4px 5px 0 #FF3D9A; animation: pop 2.8s infinite alternate; }

.corridor { background: linear-gradient(100deg, rgba(9,7,18,.98), rgba(16,23,39,.95)); }
.chapter-ribbon { position: absolute; top: 13vh; left: -4vw; padding: .8rem 8vw; transform: rotate(-7deg); background: #FF2442; color: #FFFFFF; font-family: var(--mono-font); letter-spacing: .1em; }
.speech-track { width: min(1050px, 90vw); display: grid; gap: 1.3rem; transform: rotate(-3deg); }
.speech {
  position: relative;
  width: min(720px, 82vw);
  padding: 1.3rem 1.5rem 2rem;
  color: #090712;
  background: rgba(216,247,255,.86);
  clip-path: polygon(4% 0, 100% 6%, 92% 82%, 72% 82%, 62% 100%, 55% 84%, 0 92%);
  box-shadow: 10px 12px 0 rgba(255,61,154,.5), inset 0 0 22px #FFFFFF;
  animation: bounceIn .7s both;
}
.bubble-right { justify-self: end; clip-path: polygon(0 8%, 96% 0, 100% 88%, 44% 84%, 36% 100%, 27% 82%, 7% 84%); }
.speech h2 { margin: 0; font-family: var(--title-font); font-size: clamp(3rem, 8vw, 6rem); color: #090712; }
.speech p { margin: .2rem 0; font-weight: 700; }
.soft-correction { display: inline-block; margin-top: .6rem; padding: .45rem .65rem; background: #FFF1D6; color: #FF3D9A; font-family: var(--soft-font); border-radius: 999px; box-shadow: 0 0 14px rgba(255,241,214,.55); }
.scoot-card { transition: transform .22s ease; }
.scoot-card.scooted { transform: translateX(-38px) rotate(-4deg); }
.thorn-vine { position: absolute; left: 12vw; right: 12vw; bottom: 12vh; height: 3px; background: linear-gradient(90deg, #23D7FF, #FF3D9A); box-shadow: 0 0 14px #23D7FF; transform: rotate(-5deg); }
.thorn-vine i { position: absolute; width: 18px; height: 18px; background: #FF2442; clip-path: polygon(50% 0, 100% 100%, 0 100%); top: -16px; left: calc(var(--i, 1) * 18%); }
.thorn-vine i:nth-child(1){--i:1}.thorn-vine i:nth-child(2){--i:2}.thorn-vine i:nth-child(3){--i:3}.thorn-vine i:nth-child(4){--i:4}.thorn-vine i:nth-child(5){--i:5}

.locker { background: linear-gradient(180deg, #090712, #111827 48%, #090712); align-content: center; gap: 2rem; }
.locker-header { width: min(980px, 90vw); transform: rotate(3deg); }
.locker-header h2, .reactor-copy h2, .ticket h2 { margin: .1rem 0; font-family: var(--title-font); font-size: clamp(4rem, 10vw, 8.6rem); line-height: .82; }
.locker-row { width: min(1180px, 92vw); display: flex; gap: 1rem; transform: rotate(-2deg); overflow: visible; }
.locker-door {
  position: relative;
  flex: 1 1 0;
  min-height: 45vh;
  border: 1px solid #D8F7FF;
  color: #090712;
  background: var(--chrome-sweep);
  clip-path: polygon(8% 0, 100% 4%, 90% 100%, 0 94%);
  box-shadow: inset 0 0 35px #FFFFFF, 0 15px 0 rgba(255,36,66,.45);
  cursor: pointer;
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2,1.6,.3,1), filter .35s ease;
}
.locker-door:hover, .locker-door.open { transform: perspective(750px) rotateY(-23deg) translateY(-8px); filter: saturate(1.35); }
.locker-door::after { content: attr(data-secret); position: absolute; inset: auto 12% 16% 12%; padding: .8rem; background: #FFF1D6; color: #090712; font-family: var(--soft-font); border-radius: 8px; transform: rotate(4deg) scale(.8); opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.locker-door.open::after { opacity: 1; transform: rotate(-3deg) scale(1); }
.door-num { position: absolute; top: 1rem; left: 1rem; font-family: var(--mono-font); color: #FF2442; }
.locker-door b { display: block; margin-top: 14vh; font-family: var(--title-font); font-size: clamp(2.2rem, 5vw, 4.8rem); transform: rotate(90deg); }
.locker-door em { position: absolute; bottom: 1rem; left: 1rem; font-family: var(--mono-font); font-style: normal; color: #6B7A96; }
.secret-display { padding: .8rem 1rem; background: #090712; color: #FFE45C; border: 1px dashed #FFE45C; font-family: var(--soft-font); transform: rotate(1deg); }

.reactor { background: radial-gradient(circle at center, rgba(255,61,154,.22), transparent 38%), #090712; grid-template-columns: 1fr 1fr; gap: 2rem; }
.reactor-copy { max-width: 520px; transform: rotate(-3deg); }
.reactor-core { position: relative; width: min(74vw, 520px); aspect-ratio: 1; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; border: 2px solid #D8F7FF; box-shadow: inset 0 0 26px #23D7FF, 0 0 26px rgba(255,61,154,.42); }
.ring-a { inset: 3%; animation: spin 12s linear infinite; border-style: dashed; }
.ring-b { inset: 15%; animation: spin 7s linear infinite reverse; border-color: #FF3D9A; }
.ring-c { inset: 27%; animation: spin 5s linear infinite; border-color: #FFE45C; }
.spiked-heart { width: 34%; aspect-ratio: 1; display: grid; place-items: center; color: #FF3D9A; font-size: clamp(5rem, 12vw, 8rem); text-shadow: 0 0 22px #FF3D9A; animation: pulse 1.1s infinite; }
.spiked-heart::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; background: #FF2442; clip-path: polygon(50% 0, 60% 34%, 98% 18%, 73% 51%, 100% 80%, 61% 68%, 50% 100%, 39% 68%, 0 80%, 27% 51%, 2% 18%, 40% 34%); z-index: -1; opacity: .38; }
.meter { position: absolute; left: 18%; right: 18%; bottom: 13%; height: 18px; border: 1px solid #D8F7FF; background: rgba(9,7,18,.88); transform: skewX(-18deg); }
.meter span { display: block; height: 100%; width: var(--meter, 38%); background: linear-gradient(90deg, #23D7FF, #FF3D9A, #FFE45C); box-shadow: 0 0 18px #FF3D9A; transition: width .4s ease; }
.reactor-button { position: absolute; bottom: 14vh; left: 16vw; }

.ending { background: linear-gradient(180deg, #090712 0%, #131225 55%, #1a1020 100%); }
.moon { position: absolute; top: 10vh; right: 16vw; width: 18vw; max-width: 190px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 35%, #FFFFFF, #FFF1D6 52%, #D8F7FF 72%); box-shadow: 0 0 44px #D8F7FF; }
.platform-lines { position: absolute; left: 0; right: 0; bottom: 15vh; height: 26vh; background: repeating-linear-gradient(178deg, transparent 0 26px, rgba(216,247,255,.28) 27px 28px); transform: perspective(480px) rotateX(58deg); }
.ticket { width: min(620px, 88vw); padding: 2rem; color: #090712; background: #FFF1D6; clip-path: polygon(5% 0, 95% 0, 100% 12%, 96% 20%, 100% 28%, 96% 36%, 100% 44%, 96% 52%, 100% 60%, 96% 68%, 100% 76%, 96% 84%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 4% 84%, 0 76%, 4% 68%, 0 60%, 4% 52%, 0 44%, 4% 36%, 0 28%, 4% 20%, 0 12%); box-shadow: 0 0 45px rgba(255,61,154,.4); transform: rotate(-4deg); }
.ticket .route-tag { color: #FF3D9A; }
.admission { font-family: var(--soft-font); font-size: 1.25rem; }
.closing-line { position: absolute; bottom: 6vh; color: #D8F7FF; font-family: var(--soft-font); opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.closing-line.revealed { opacity: 1; transform: translateY(0); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.12); filter: saturate(1.8); } }
@keyframes twitch { 50% { transform: translate(8px, -6px) rotate(4deg); } }
@keyframes pop { from { transform: scale(.9) rotate(-3deg); } to { transform: scale(1.08) rotate(5deg); } }
@keyframes bounceIn { from { opacity: 0; transform: translateY(28px) scale(.9); } 65% { transform: translateY(-8px) scale(1.03); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 820px) {
  .charm-nav { right: .35rem; }
  .stage { padding: 5rem 1rem; }
  .gate-content, .speech-track, .locker-header, .locker-row, .reactor-copy { transform: none; }
  .locker-row { flex-direction: column; }
  .locker-door { min-height: 22vh; }
  .locker-door b { transform: none; margin: 4rem 1rem 3rem; }
  .reactor { grid-template-columns: 1fr; }
  .reactor-button { position: static; justify-self: start; }
}