:root {
  /* typography compliance tokens: only tiny save-file timestamps Mono—avoiding repository's heavily used mono-first corporate treatments. */
  --ink: #171225;
  --blush: #FF7FB6;
  --lavender: #B8A2FF;
  --paper: #FFF3DE;
  --teal: #63D8CF;
  --vermilion: #E83F5B;
  --plum: #40233F;
  --mincho: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", Inter, system-ui, sans-serif;
  --hand: "Yomogi", "Bradley Hand", "Comic Sans MS", cursive;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--rounded);
  overflow-x: hidden;
}

button, a { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,243,222,.8) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(99,216,207,.65) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(255,127,182,.18) 49% 50%, transparent 51%);
  background-size: 37px 41px, 43px 47px, 11px 11px;
  mix-blend-mode: screen;
}

.cursor-ribbon {
  position: fixed;
  width: 18px;
  height: 18px;
  border: 1px solid var(--blush);
  border-radius: 50% 50% 50% 8%;
  transform: translate(-50%, -50%) rotate(30deg);
  pointer-events: none;
  z-index: 60;
  box-shadow: 0 0 24px var(--blush);
  opacity: .72;
}

.charm-bracelet {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.bead {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--plum);
  border: 1px solid rgba(255,243,222,.55);
  box-shadow: inset 0 0 8px rgba(23,18,37,.9), 0 0 0 rgba(184,162,255,0);
  text-decoration: none;
  transition: .4s ease;
}

.bead::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -14px;
  width: 2px;
  height: 14px;
  background: rgba(255,243,222,.35);
}

.bead:first-child::before { display: none; }
.bead.active { background: var(--blush); box-shadow: 0 0 24px var(--blush); }
.bead span {
  position: absolute;
  right: 24px;
  top: -5px;
  white-space: nowrap;
  font-family: var(--hand);
  color: var(--paper);
  opacity: 0;
  transform: translateX(8px);
  transition: .3s ease;
}
.bead:hover span { opacity: 1; transform: translateX(0); }

.room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.room::after {
  content: attr(data-chapter);
  position: absolute;
  left: 4vw;
  bottom: 4vh;
  font-family: var(--mono);
  color: rgba(255,243,222,.24);
  letter-spacing: .28em;
  font-size: 12px;
}

h1, h2 {
  font-family: var(--mincho);
  font-weight: 500;
  margin: 0;
  letter-spacing: .035em;
}

p { line-height: 1.7; }
.save-time { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }

.station {
  background:
    radial-gradient(circle at 78% 18%, rgba(99,216,207,.18), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(255,127,182,.22), transparent 31%),
    linear-gradient(145deg, #171225 0%, #20162f 52%, #40233F 100%);
}

.rain { position: absolute; inset: 0; background-image: linear-gradient(105deg, transparent 0 47%, rgba(99,216,207,.45) 48%, transparent 49%); background-size: 80px 180px; animation: rain 2.8s linear infinite; opacity: .34; }
.pane-two { animation-duration: 4.6s; opacity: .2; transform: skewX(-18deg); }

.platform-line {
  position: absolute;
  width: 150vw;
  height: 34vh;
  left: -20vw;
  bottom: 1vh;
  transform: rotate(-9deg);
  background: linear-gradient(180deg, rgba(255,243,222,.06), rgba(255,243,222,.015)), repeating-linear-gradient(90deg, rgba(255,243,222,.28) 0 7px, transparent 7px 42px);
  border-top: 2px solid rgba(99,216,207,.65);
  box-shadow: 0 -16px 55px rgba(99,216,207,.2);
}

.signal-post { position: absolute; left: 13vw; top: 0; width: 8px; height: 65vh; background: linear-gradient(var(--teal), transparent); opacity: .48; }
.destination-board {
  position: absolute;
  left: 17vw;
  top: 18vh;
  padding: 24px 34px 28px;
  min-width: min(680px, 68vw);
  transform: rotate(-2deg) skewX(-5deg);
  background: rgba(23,18,37,.76);
  border: 1px solid rgba(99,216,207,.75);
  box-shadow: 0 0 42px rgba(99,216,207,.35), inset 0 0 35px rgba(99,216,207,.1);
}

.destination-board h1 { font-size: clamp(58px, 10vw, 146px); line-height: .95; text-shadow: 0 0 20px var(--teal), 0 0 45px rgba(255,127,182,.35); animation: flicker 4.8s infinite; }
.destination-board i { color: var(--blush); font-style: normal; }
.vending-glow { position: absolute; right: 10vw; bottom: 18vh; width: 90px; height: 230px; border-radius: 16px; background: linear-gradient(var(--teal), var(--lavender)); filter: blur(18px); opacity: .42; }

.ticket-cloud span, .waiting-ticket {
  background: var(--paper);
  color: var(--plum);
  border: 1px dashed rgba(64,35,63,.42);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.ticket-cloud span { position: absolute; width: 66px; height: 28px; border-radius: 5px; animation: driftUp 12s infinite linear; }
.ticket-cloud span:nth-child(1){ left: 6vw; bottom: -10vh; animation-delay: -1s; transform: rotate(12deg); }
.ticket-cloud span:nth-child(2){ left: 31vw; bottom: -12vh; animation-delay: -4s; }
.ticket-cloud span:nth-child(3){ left: 52vw; bottom: -12vh; animation-delay: -8s; transform: rotate(-16deg); }
.ticket-cloud span:nth-child(4){ left: 69vw; bottom: -10vh; animation-delay: -2s; }
.ticket-cloud span:nth-child(5){ left: 83vw; bottom: -12vh; animation-delay: -6s; }
.ticket-cloud span:nth-child(6){ left: 18vw; bottom: -15vh; animation-delay: -10s; }

.waiting-ticket {
  position: absolute;
  left: 9vw;
  bottom: 13vh;
  display: grid;
  gap: 4px;
  padding: 18px 26px;
  border-radius: 10px;
  cursor: pointer;
  transform: rotate(4deg);
  transition: .35s ease;
}
.waiting-ticket:hover { transform: rotate(-2deg) translateY(-8px); box-shadow: 0 0 32px rgba(255,127,182,.45); }
.waiting-ticket b { font-family: var(--mincho); color: var(--vermilion); font-size: 24px; }
.waiting-ticket span { font-family: var(--hand); font-size: 22px; }
.waiting-ticket em { font-family: var(--mono); font-size: 10px; color: var(--blush); text-transform: uppercase; }
.chapter-caption { position: absolute; right: 12vw; top: 62vh; font-family: var(--hand); font-size: clamp(24px, 4vw, 54px); color: var(--lavender); transform: rotate(-9deg); }

.locker { background: linear-gradient(100deg, #171225, #271832 44%, #40233F); }
.ink-bloom { position: absolute; width: 55vw; height: 55vw; border-radius: 50%; filter: blur(18px); background: radial-gradient(circle, rgba(255,127,182,.26), rgba(184,162,255,.12) 43%, transparent 68%); animation: pulse 8s ease-in-out infinite; }
.bloom-left { left: -20vw; top: 10vh; }
.corridor-title { position: absolute; left: 8vw; top: 10vh; max-width: 440px; z-index: 2; }
.corridor-title h2, .thread-copy h2, .shrine-copy h2, .final-confession h2 { font-size: clamp(42px, 7vw, 92px); color: var(--paper); text-shadow: 0 0 30px rgba(184,162,255,.25); }
.corridor-title p, .thread-copy p, .shrine-copy p { color: rgba(255,243,222,.78); max-width: 440px; }
.locker-row { position: absolute; right: -4vw; bottom: 8vh; display: flex; align-items: flex-end; gap: 12px; perspective: 900px; }
.locker-panel { position: relative; width: 17vw; min-width: 150px; height: 62vh; padding: 20px; background: linear-gradient(165deg, rgba(255,243,222,.13), rgba(64,35,63,.86)); border: 1px solid rgba(255,243,222,.2); box-shadow: -18px 28px 50px rgba(0,0,0,.32); transform-origin: left center; transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s; }
.locker-panel:hover { transform: rotateY(-15deg) translateY(-18px); box-shadow: 0 0 45px rgba(99,216,207,.25); }
.locker-panel.tall { height: 76vh; background: linear-gradient(165deg, rgba(232,63,91,.24), rgba(64,35,63,.9)); }
.locker-panel.rain-window { height: 68vh; background-image: linear-gradient(165deg, rgba(99,216,207,.2), rgba(64,35,63,.86)), repeating-linear-gradient(100deg, transparent 0 14px, rgba(99,216,207,.25) 15px 16px); }
.locker-face span { font-family: var(--mono); color: var(--teal); }
.locker-face b { display: block; margin-top: 18px; font-family: var(--mincho); font-size: 28px; color: var(--paper); writing-mode: vertical-rl; }
.handwritten { position: absolute; left: 20px; right: 20px; bottom: 28px; font-family: var(--hand); font-size: 22px; color: var(--paper); transform: rotate(-4deg); }
.charm-note { color: var(--blush); }
.erased { opacity: .62; text-decoration: line-through; }
.petal { position: absolute; width: 42px; height: 24px; border-radius: 80% 10% 80% 10%; background: var(--blush); filter: blur(.3px); opacity: .65; animation: petal 9s ease-in-out infinite; }
.petal-a { left: 18vw; bottom: 18vh; } .petal-b { right: 23vw; top: 19vh; animation-delay: -4s; }

.thread { background: radial-gradient(circle at 60% 45%, rgba(184,162,255,.14), transparent 30%), linear-gradient(140deg, #171225, #22152d 55%, #171225); }
.thread-copy { position: absolute; left: 7vw; top: 14vh; z-index: 5; }
.thread-map { position: absolute; inset: 10vh 0 0 0; width: 100%; height: 82vh; filter: drop-shadow(0 0 16px rgba(255,127,182,.28)); }
.route { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: drawRoute 4.5s ease forwards, threadPulse 3s ease-in-out infinite; }
.route-red { stroke: var(--vermilion); animation-delay: .3s, 4.8s; }
.route-lavender { stroke: var(--lavender); animation-delay: .7s, 5s; }
.route-teal { stroke: var(--teal); animation-delay: 1.1s, 5.2s; }
.island { position: absolute; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 44% 56% 55% 45%; background: radial-gradient(circle at 30% 28%, var(--paper), rgba(255,243,222,.72)); color: var(--plum); font-family: var(--hand); font-size: 23px; box-shadow: 0 0 36px rgba(255,243,222,.25); transition: transform .45s ease; }
.island-one { left: 17vw; top: 58vh; } .island-two { left: 49vw; top: 35vh; } .island-three { right: 11vw; top: 22vh; }
.island.tugged { transform: translate(var(--tx), var(--ty)) rotate(5deg) scale(1.05); }
.lantern { position: absolute; width: 24px; height: 38px; border-radius: 13px; background: var(--teal); box-shadow: 0 0 28px var(--teal); animation: lantern 6s ease-in-out infinite; }
.lantern-a { left: 34vw; top: 24vh; } .lantern-b { right: 24vw; bottom: 20vh; animation-delay: -2s; background: var(--blush); box-shadow: 0 0 28px var(--blush); } .lantern-c { left: 58vw; bottom: 13vh; animation-delay: -4s; background: var(--lavender); box-shadow: 0 0 28px var(--lavender); }

.shrine { background: linear-gradient(180deg, #171225, #291630 58%, #40233F); }
.shrine-copy { position: absolute; right: 7vw; top: 11vh; z-index: 6; text-align: right; }
.shrine-copy p { margin-left: auto; }
.torii-stack { position: absolute; left: 5vw; bottom: 0; width: 62vw; height: 86vh; perspective: 800px; }
.torii { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-left: 18px solid var(--vermilion); border-right: 18px solid var(--vermilion); }
.torii::before, .torii::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: var(--vermilion); box-shadow: 0 0 24px rgba(232,63,91,.32); }
.torii::before { top: -35px; width: 150%; height: 24px; border-radius: 4px; }
.torii::after { top: -8px; width: 120%; height: 14px; }
.torii-1 { width: 52vw; height: 54vh; opacity: .95; }
.torii-2 { width: 40vw; height: 43vh; opacity: .66; transform: translateX(-50%) translateZ(-120px) translateY(-8vh); }
.torii-3 { width: 29vw; height: 32vh; opacity: .43; transform: translateX(-50%) translateZ(-240px) translateY(-15vh); }
.torii-4 { width: 18vw; height: 22vh; opacity: .24; transform: translateX(-50%) translateZ(-360px) translateY(-21vh); }
.choice-seals { position: absolute; right: 9vw; bottom: 13vh; display: grid; gap: 18px; z-index: 8; }
.seal { position: relative; width: 260px; padding: 18px 24px; border: 1px solid rgba(255,243,222,.36); border-radius: 50% 8px 50% 8px; background: rgba(232,63,91,.78); color: var(--paper); font-family: var(--hand); font-size: 24px; cursor: pointer; box-shadow: 0 16px 40px rgba(0,0,0,.28); transition: .35s ease; }
.seal::after { content: attr(data-alt); position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; color: var(--teal); background: rgba(23,18,37,.9); opacity: 0; transform: translateX(-20px); transition: .35s ease; text-shadow: 0 0 18px var(--teal); }
.seal:hover { transform: translateX(-16px) rotate(-3deg); box-shadow: 0 0 38px rgba(184,162,255,.38); }
.seal:hover::after { opacity: 1; transform: translateX(0); }

.moon { background: radial-gradient(circle at 28% 45%, rgba(255,243,222,.12), transparent 34%), linear-gradient(160deg, #171225 0%, #100d1c 100%); }
.moon-disc { position: absolute; width: min(68vw, 760px); height: min(68vw, 760px); left: -8vw; top: 8vh; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #FFF3DE, #f2d9c4 52%, #d9bda5 100%); box-shadow: 0 0 80px rgba(255,243,222,.5), inset -45px -35px 80px rgba(64,35,63,.18); }
.moon-disc::before, .moon-disc::after { content: ""; position: absolute; border-radius: 50%; background: rgba(64,35,63,.12); }
.moon-disc::before { width: 22%; height: 22%; left: 54%; top: 22%; } .moon-disc::after { width: 14%; height: 14%; left: 30%; top: 58%; }
.rabbit { position: absolute; right: 28%; bottom: 28%; width: 70px; height: 48px; border-radius: 50%; background: rgba(64,35,63,.22); }
.rabbit::before, .rabbit::after { content: ""; position: absolute; width: 16px; height: 48px; border-radius: 50%; background: rgba(64,35,63,.22); top: -32px; }
.rabbit::before { left: 10px; transform: rotate(-18deg); } .rabbit::after { left: 32px; transform: rotate(20deg); }
.final-confession { position: absolute; right: 8vw; top: 27vh; max-width: 520px; z-index: 4; }
.final-confession p { font-family: var(--hand); font-size: clamp(28px, 4vw, 54px); line-height: 1.25; color: var(--paper); text-shadow: 0 0 28px rgba(255,127,182,.36); }
.orbit { position: absolute; left: 21vw; top: 44vh; width: 44vw; height: 44vw; border-radius: 50%; animation: orbit 26s linear infinite; }
.orbit-two { animation-duration: 32s; animation-direction: reverse; width: 55vw; height: 55vw; left: 16vw; top: 36vh; }
.orbit-three { animation-duration: 39s; width: 62vw; height: 62vw; left: 10vw; top: 28vh; }
.fragment { position: absolute; right: 0; top: 50%; padding: 9px 14px; background: rgba(255,243,222,.9); color: var(--plum); border-radius: 8px; font-family: var(--hand); font-size: 22px; transform: rotate(8deg); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.ribbon-name { position: absolute; right: 0; bottom: 14vh; height: 70px; width: 0; overflow: hidden; background: linear-gradient(90deg, var(--vermilion), var(--blush)); color: var(--paper); display: grid; place-items: center; font-family: var(--mincho); font-size: clamp(36px, 7vw, 82px); box-shadow: 0 0 34px rgba(232,63,91,.45); transition: width 1.8s cubic-bezier(.2,.8,.2,1); }
.moon.visible .ribbon-name { width: 62vw; }

@keyframes rain { to { background-position: 80px 180px; } }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: .92; } 96% { opacity: .7; } }
@keyframes driftUp { to { transform: translateY(-118vh) rotate(26deg); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.16); opacity: .74; } }
@keyframes petal { 50% { transform: translate(70px, -80px) rotate(80deg); } }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
@keyframes threadPulse { 50% { stroke-width: 7; filter: drop-shadow(0 0 12px currentColor); } }
@keyframes lantern { 50% { transform: translateY(-26px); opacity: .62; } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .destination-board { left: 6vw; min-width: 80vw; }
  .locker-row { right: auto; left: 5vw; overflow: visible; transform: scale(.82); transform-origin: left bottom; }
  .locker-panel { min-width: 120px; }
  .shrine-copy, .final-confession { right: 14vw; }
  .choice-seals { right: 14vw; }
  .moon-disc { left: -28vw; top: 12vh; }
}