:root {
  /* Typography intent: create old station literature sparingly for ticket numbers. Interpret “yami chika” as **dark basement / hidden underground** underground** */
  --design-token-underground: "underground**";
  --design-token-underground-star: "underground*";
  --design-token-undergroun: "undergroun";
  --basement-ink: #08090B;
  --rice-paper: #F4E7C5;
  --oxidized-brass: #A97835;
  --lantern-vermilion: #D83A2E;
  --indigo-tile: #17243A;
  --moss-concrete: #566A52;
  --vending-cyan: #61E2E8;
  --mincho: "Yu Mincho", "Hiragino Mincho ProN", "Songti SC", Georgia, serif;
  --jp-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, Inter, system-ui, sans-serif;
  --antique: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--basement-ink); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--rice-paper);
  background:
    radial-gradient(circle at 76% 18%, rgba(97, 226, 232, .08), transparent 24rem),
    linear-gradient(180deg, #08090B 0%, #0A0D13 20%, #101A2B 45%, #08090B 74%, #F4E7C5 100%);
  font-family: var(--jp-sans);
}

.grain, .pointer-halo, .fixed-scenery, .red-thread { pointer-events: none; }
.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  opacity: .17;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 14% 21%, rgba(244,231,197,.11) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(86,106,82,.08) 12px 13px);
}
.pointer-halo {
  position: fixed;
  left: 0;
  top: 0;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  z-index: 20;
  opacity: .35;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(97,226,232,.18), rgba(216,58,46,.05) 36%, transparent 66%);
  filter: blur(10px);
}
.ceiling-soot {
  position: fixed;
  inset: 0 0 auto 0;
  height: 11vh;
  z-index: 22;
  background: linear-gradient(#08090B, rgba(8,9,11,.0));
}
.rail {
  position: fixed;
  z-index: 25;
  top: -10vh;
  width: 2px;
  height: 120vh;
  background: linear-gradient(var(--oxidized-brass), rgba(169,120,53,.05));
  opacity: .45;
  transform-origin: top;
}
.rail-left { left: 7vw; transform: rotate(5deg); }
.rail-right { right: 12vw; transform: rotate(-3deg); }
.noren-shadow {
  position: fixed;
  z-index: 24;
  top: 0;
  right: 18vw;
  width: 18vw;
  height: 18vh;
  opacity: .22;
  background: repeating-linear-gradient(90deg, #08090B 0 28px, transparent 28px 40px);
  filter: blur(1px);
}
.red-thread {
  position: fixed;
  left: 50%;
  top: 0;
  width: 18vw;
  min-width: 120px;
  height: 100vh;
  z-index: 35;
  transform: translateX(-50%);
  opacity: .95;
  filter: drop-shadow(0 0 10px rgba(216,58,46,.55));
}
#threadPath {
  fill: none;
  stroke: var(--lantern-vermilion);
  stroke-width: .75;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

.station-map {
  position: fixed;
  z-index: 60;
  left: 2.3vw;
  bottom: 3vh;
  width: 13rem;
  padding: .75rem .85rem;
  background: rgba(8,9,11,.62);
  border-left: 1px solid var(--oxidized-brass);
  backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.station-map a {
  display: block;
  color: rgba(244,231,197,.58);
  text-decoration: none;
  padding: .24rem 0;
  transition: color .4s, transform .4s;
}
.station-map a span { color: var(--oxidized-brass); margin-right: .45rem; }
.station-map a.active { color: var(--vending-cyan); transform: translateX(.35rem); }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(1.2rem, 8vw) repeat(6, 1fr) minmax(1.2rem, 8vw);
  grid-template-rows: repeat(6, 1fr);
  isolation: isolate;
}
.chamber::before {
  content: attr(data-chamber);
  position: absolute;
  right: 3vw;
  top: 4vh;
  font: .72rem var(--mono);
  color: rgba(169,120,53,.6);
  letter-spacing: .25em;
}
.copy-plaque { position: relative; z-index: 5; }
.copy-plaque h1, .copy-plaque h2, .giant-clipped, .wordmark-final {
  font-family: var(--mincho);
  font-weight: 400;
  line-height: .9;
  margin: 0;
}
.copy-plaque h1 { font-size: clamp(3.8rem, 10vw, 11rem); letter-spacing: -.08em; }
.copy-plaque h2 { font-size: clamp(2.7rem, 7vw, 7rem); letter-spacing: -.06em; }
.copy-plaque p, .poem {
  font-family: var(--antique);
  font-size: clamp(.92rem, 1.35vw, 1.25rem);
  line-height: 1.85;
  color: rgba(244,231,197,.78);
}
.mono { font-family: var(--mono) !important; font-size: .68rem !important; letter-spacing: .18em; color: var(--oxidized-brass) !important; text-transform: uppercase; }
.brass { color: var(--rice-paper); text-shadow: 0 0 24px rgba(169,120,53,.28); }
.paper {
  background: linear-gradient(135deg, rgba(244,231,197,.95), rgba(244,231,197,.74));
  color: var(--basement-ink);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.paper p { color: rgba(8,9,11,.78); }
.paper .mono { color: var(--lantern-vermilion) !important; }
.dark {
  background: rgba(8,9,11,.58);
  border: 1px solid rgba(86,106,82,.45);
  padding: 2rem;
}

.street-grate { background: radial-gradient(circle at 50% 45%, #17243A 0%, #08090B 48%, #050506 100%); }
.surface-rain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(244,231,197,.11), transparent 16rem),
    repeating-linear-gradient(112deg, transparent 0 38px, rgba(97,226,232,.06) 39px 40px);
  animation: rainSheen 8s linear infinite;
}
.grate-shadow {
  position: absolute;
  inset: 14vh 8vw 20vh 8vw;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2vw;
  transform: translateY(var(--grate-shift, 0px));
  transition: transform .08s linear;
}
.grate-shadow span { border: 1px solid rgba(169,120,53,.32); background: linear-gradient(90deg, rgba(8,9,11,.88), rgba(23,36,58,.35), rgba(8,9,11,.9)); box-shadow: inset 0 0 40px #08090B; }
.reflection-wordmark {
  grid-column: 2 / 8;
  grid-row: 4;
  align-self: center;
  justify-self: center;
  font-family: var(--mincho);
  font-size: clamp(2.4rem, 8vw, 9rem);
  letter-spacing: -.08em;
  color: rgba(97,226,232,.18);
  transform: scaleY(-1) skewX(-8deg);
  filter: blur(.6px);
  animation: trainVibration 5s ease-in-out infinite;
}
.plaque-top { grid-column: 2 / 7; grid-row: 2 / 4; align-self: end; }
.edge-right { grid-column: 6 / 8; grid-row: 5; justify-self: end; border-right: 1px solid var(--lantern-vermilion); padding-right: 1rem; }
.vibration-line { position: absolute; left: 0; right: 0; top: 46%; height: 1px; background: var(--vending-cyan); opacity: .25; animation: passingTrain 5s ease-in-out infinite; }

.stairwell-breath { background: linear-gradient(130deg, #08090B 0 36%, #17243A 37% 62%, #08090B 63%); }
.stairwell-cut { grid-column: 4 / 9; grid-row: 1 / 7; transform: skewY(-10deg); opacity: .92; }
.tread { height: 12vh; margin: 2vh 0; background: linear-gradient(180deg, rgba(169,120,53,.26), rgba(8,9,11,.88)); border-top: 1px solid rgba(244,231,197,.16); box-shadow: 0 28px 38px rgba(0,0,0,.42); }
.left-third { grid-column: 2 / 5; grid-row: 3 / 5; padding: 2rem; transform: rotate(-4deg); }
.ticket-stub { cursor: pointer; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s; }
.ticket-stub.flipped { transform: rotate(4deg) rotateY(180deg); filter: hue-rotate(15deg); }
.ticket-stub em { font: .6rem var(--mono); color: var(--moss-concrete); letter-spacing: .18em; text-transform: uppercase; }
.wall-label { grid-column: 7; grid-row: 2 / 5; writing-mode: vertical-rl; font-family: var(--mincho); font-size: 4rem; color: rgba(244,231,197,.08); }
.brass-arrow { grid-column: 3; grid-row: 5; color: var(--oxidized-brass); font-size: 8rem; opacity: .4; }

.tile-corridor { background: linear-gradient(90deg, #0A0D13, #17243A 48%, #08090B); }
.tile-plane { position: absolute; inset: 7vh 0 8vh 14vw; background-image: linear-gradient(rgba(244,231,197,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(244,231,197,.09) 1px, transparent 1px); background-size: 76px 58px; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.condensation-sign { grid-column: 2 / 5; grid-row: 2 / 4; align-self: center; font-family: var(--mincho); color: rgba(244,231,197,.08); filter: blur(7px); transition: color 1.4s, filter 1.4s, transform 1.4s; }
.condensation-sign.visible { color: rgba(244,231,197,.86); filter: blur(0); transform: translateX(3vw); }
.condensation-sign span { display: block; font-size: clamp(4rem, 12vw, 12rem); line-height: .85; }
.condensation-sign strong { font-weight: 400; font-size: 1rem; font-family: var(--mono); letter-spacing: .24em; color: var(--vending-cyan); }
.corridor-note { grid-column: 5 / 8; grid-row: 4; align-self: end; }
.vending-bank { grid-column: 7; grid-row: 2 / 5; display: grid; gap: .9rem; align-self: center; }
.vending-bank button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(97,226,232,.45); background: radial-gradient(circle, var(--vending-cyan), #17243A 68%); box-shadow: 0 0 25px rgba(97,226,232,.48); animation: vendingPulse 2.4s ease-in-out infinite; }
.vending-bank button:nth-child(2n) { animation-delay: .8s; }
.drain-channel { position: absolute; bottom: 9vh; left: 20vw; right: 10vw; display: flex; gap: 1.2rem; opacity: .5; }
.drain-channel i { flex: 1; height: 1rem; border: 1px solid var(--moss-concrete); }

.lantern-niche { background: radial-gradient(circle at 36% 42%, rgba(216,58,46,.25), transparent 19rem), linear-gradient(180deg, #08090B, #11131A 54%, #08090B); }
.niche-arch { grid-column: 2 / 6; grid-row: 2 / 6; border: 1px solid rgba(169,120,53,.28); border-radius: 50% 50% 0 0; background: radial-gradient(circle at 50% 30%, rgba(216,58,46,.12), transparent 58%); }
.lantern { position: absolute; left: 33vw; top: 13vh; z-index: 8; transform-origin: 50% 0; animation: lanternSway 4.8s ease-in-out infinite; }
.lantern-cord { width: 2px; height: 17vh; margin: auto; background: var(--lantern-vermilion); }
.lantern-body { width: 7.4rem; height: 10rem; border-radius: 48% 48% 42% 42%; background: radial-gradient(circle at 50% 42%, #F4E7C5, #D83A2E 54%, #7A1716 100%); box-shadow: 0 0 80px rgba(216,58,46,.62); display: grid; place-items: center; color: #08090B; font: 2rem var(--mincho); }
.lantern-tail { width: 2px; height: 5rem; margin: auto; background: var(--lantern-vermilion); }
.paper-charms { grid-column: 2 / 4; grid-row: 5; display: flex; gap: .65rem; transform: rotate(-4deg); }
.paper-charms span { display: block; padding: 1.2rem .45rem; background: var(--rice-paper); color: #08090B; font-family: var(--mono); font-size: .65rem; writing-mode: vertical-rl; }
.right-third { grid-column: 5 / 8; grid-row: 3 / 5; }
.fox-silhouette { position: absolute; right: 16vw; bottom: 14vh; width: 5rem; height: 2.4rem; background: #08090B; clip-path: polygon(0 100%, 12% 28%, 28% 62%, 47% 12%, 60% 60%, 100% 38%, 77% 100%); opacity: .82; }

.closed-shop-arcade { background: linear-gradient(180deg, #17243A, #08090B 72%); }
.shop-shutter { position: absolute; inset: 15vh 6vw 22vh 22vw; display: grid; align-content: stretch; border: 1px solid rgba(169,120,53,.36); overflow: hidden; }
.shop-shutter i { background: linear-gradient(180deg, rgba(244,231,197,.08), rgba(8,9,11,.7)); border-bottom: 1px solid rgba(169,120,53,.22); position: relative; }
.shop-shutter i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(97,226,232,.18), transparent); transform: translateX(var(--glint, -110%)); }
.kissaten-sign { grid-column: 2 / 4; grid-row: 2; color: var(--lantern-vermilion); font: clamp(2rem, 6vw, 7rem) var(--mincho); text-shadow: 0 0 28px rgba(216,58,46,.46); }
.silhouette-walkers { position: absolute; left: 28vw; right: 12vw; bottom: 25vh; height: 7rem; overflow: hidden; }
.silhouette-walkers span { position: absolute; bottom: 0; width: 1.1rem; height: 4rem; border-radius: 1rem 1rem .2rem .2rem; background: rgba(8,9,11,.92); animation: walker 12s linear infinite; }
.silhouette-walkers span:nth-child(2) { animation-delay: -4s; height: 5rem; }
.silhouette-walkers span:nth-child(3) { animation-delay: -8s; height: 3.5rem; }
.ticket-layer { grid-column: 6 / 8; grid-row: 2 / 5; display: grid; gap: .7rem; align-self: center; transform: rotate(5deg); }
.ticket-layer b { background: rgba(244,231,197,.85); color: #08090B; padding: .55rem .85rem; font: .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.giant-clipped { position: absolute; left: -3vw; bottom: -2vh; font-size: clamp(5rem, 16vw, 17rem); color: rgba(244,231,197,.08); white-space: nowrap; }
.arcade-note { grid-column: 3 / 6; grid-row: 5; align-self: end; color: rgba(244,231,197,.72); }

.first-train-above { background: linear-gradient(180deg, #08090B 0%, #17243A 30%, #F4E7C5 100%); color: #08090B; }
.dawn-map { grid-column: 2 / 8; grid-row: 2 / 5; align-self: center; opacity: .88; }
.dawn-map svg { width: 100%; filter: drop-shadow(0 20px 50px rgba(8,9,11,.28)); }
.map-grid { fill: none; stroke: rgba(86,106,82,.34); stroke-width: 1; }
.train-line { fill: none; stroke: var(--lantern-vermilion); stroke-width: 5; stroke-linecap: round; }
.dawn-map circle { fill: var(--rice-paper); stroke: var(--lantern-vermilion); stroke-width: 3; }
.final-plaque { grid-column: 2 / 5; grid-row: 4 / 6; padding: 2rem; background: rgba(244,231,197,.86); }
.wordmark-final { grid-column: 5 / 8; grid-row: 5; align-self: end; justify-self: end; font-size: clamp(3rem, 9vw, 10rem); color: rgba(8,9,11,.18); transform: translateY(1rem); }

@keyframes rainSheen { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
@keyframes trainVibration { 0%, 86%, 100% { transform: scaleY(-1) skewX(-8deg) translateX(0); } 88% { transform: scaleY(-1) skewX(-11deg) translateX(-10px); } 90% { transform: scaleY(-1) skewX(-6deg) translateX(8px); } 92% { transform: scaleY(-1) skewX(-9deg) translateX(-4px); } }
@keyframes passingTrain { 0%, 82%, 100% { opacity: 0; transform: translateX(-100%); } 88% { opacity: .4; } 96% { opacity: 0; transform: translateX(100%); } }
@keyframes vendingPulse { 0%,100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes lanternSway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes walker { from { transform: translateX(-8vw); opacity: 0; } 12% { opacity: .75; } 76% { opacity: .55; } to { transform: translateX(60vw); opacity: 0; } }

@media (max-width: 760px) {
  .station-map { display: none; }
  .red-thread { left: 84%; }
  .chamber { grid-template-columns: 1rem repeat(4, 1fr) 1rem; }
  .plaque-top, .left-third, .right-third, .final-plaque, .corridor-note, .arcade-note { grid-column: 2 / 6; }
  .edge-right { grid-column: 2 / 6; justify-self: start; }
  .vending-bank { grid-column: 5; }
  .copy-plaque h1 { font-size: 4rem; }
}