:root {
    /* Interactions are artifact-based—peeling stickers */
    --night: #10131F;
    --crt: #3B7DFF;
    --pink: #FF7AC8;
    --mint: #7FFFD4;
    --cream: #F8E9C8;
    --champagne: #D8B56D;
    --burgundy: #6B1E3B;
    --ghost: #E9FFF9;
    --sans: "Noto Sans JP", sans-serif;
    --pixel: "DotGothic16", monospace;
    --round: "M PLUS Rounded 1c", sans-serif;
    --serif: "Noto Serif JP", serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--night);
    color: var(--ghost);
    font-family: var(--sans);
    cursor: none;
}

button { font: inherit; color: inherit; cursor: none; }

.scanline-veil {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(233,255,249,.055) 0 1px, transparent 1px 4px), radial-gradient(circle at 50% 40%, transparent 0 55%, rgba(16,19,31,.45));
    mix-blend-mode: screen;
    animation: scanDrift 7s linear infinite;
}

.ghost-cursor {
    position: fixed;
    width: 34px;
    height: 38px;
    z-index: 120;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 10px var(--mint));
}

.ghost-cursor span,
.mascot b {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(233,255,249,.95), rgba(127,255,212,.6));
    border-radius: 50% 50% 42% 42%;
    position: relative;
}

.ghost-cursor span:before,
.mascot b:before {
    content: "";
    position: absolute;
    left: 27%;
    top: 34%;
    width: 8%;
    height: 8%;
    background: var(--night);
    box-shadow: 16px 0 0 var(--night);
}

.ghost-cursor span:after,
.mascot b:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 11px;
    background: radial-gradient(circle at 17% 0, transparent 0 9px, rgba(127,255,212,.6) 10px), radial-gradient(circle at 50% 0, transparent 0 9px, rgba(127,255,212,.6) 10px), radial-gradient(circle at 83% 0, transparent 0 9px, rgba(127,255,212,.6) 10px);
}

.route-band, .annotation-rail {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 140px 1fr 120px;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    background: linear-gradient(180deg, rgba(16,19,31,.92), rgba(16,19,31,.42));
    border-bottom: 1px solid rgba(127,255,212,.35);
    backdrop-filter: blur(9px);
}

.route-band { top: 0; }

.annotation-rail {
    bottom: 0;
    border-top: 1px solid rgba(216,181,109,.35);
    border-bottom: 0;
    grid-template-columns: 64px 1fr 64px;
    background: linear-gradient(0deg, rgba(16,19,31,.92), rgba(16,19,31,.45));
}

.annotation-rail button {
    border: 1px solid rgba(248,233,200,.35);
    background: rgba(107,30,59,.58);
    border-radius: 999px;
    height: 36px;
}

.line-plate {
    border: 1px solid rgba(127,255,212,.4);
    border-radius: 3px;
    padding: 8px;
    text-align: center;
    background: rgba(59,125,255,.14);
}

.train-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    align-items: center;
}

.train-map:before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 22px;
    height: 5px;
    border-radius: 9px;
    background: linear-gradient(90deg, var(--champagne), var(--pink), var(--mint), var(--crt));
    box-shadow: 0 0 18px var(--mint);
}

.train-line-stop {
    position: relative;
    border: 0;
    background: transparent;
    color: var(--ghost);
    display: grid;
    place-items: center;
    gap: 4px;
    font-family: var(--pixel);
    font-size: 12px;
    opacity: .72;
    transition: opacity .25s, transform .25s;
}

.train-line-stop:before {
    content: "";
    width: 21px;
    height: 21px;
    border: 3px solid var(--ghost);
    background: var(--night);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16,19,31,.8), 0 0 15px rgba(233,255,249,.4);
}

.train-line-stop.active {
    opacity: 1;
    transform: translateY(-3px);
    color: var(--mint);
}

.train-line-stop.active:before { background: var(--pink); box-shadow: 0 0 18px var(--pink), 0 0 34px var(--mint); }
.train-line-stop em { font-style: normal; font-size: 10px; }

.ghost-train {
    height: 100vh;
    display: flex;
    width: 700vw;
    transform: translate3d(0,0,0);
    transition: transform 900ms cubic-bezier(.16,.9,.24,1);
}

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

.scene-stage {
    position: absolute;
    inset: 78px 0 58px;
    padding: clamp(28px, 5vw, 70px);
}

.crt-glow { text-shadow: 0 0 6px var(--ghost), 0 0 20px var(--crt), 2px 0 var(--pink), -2px 0 var(--mint); }
.lcd-caption { font-family: var(--pixel); letter-spacing: .08em; }
.fax-fade { color: rgba(16,19,31,.82); background: linear-gradient(90deg, rgba(248,233,200,.96), rgba(248,233,200,.72), rgba(233,255,249,.9)); }
.plastic-shell { background: linear-gradient(135deg, rgba(127,255,212,.36), rgba(255,122,200,.18)); border: 1px solid rgba(233,255,249,.48); box-shadow: inset 12px 12px 30px rgba(233,255,249,.18), 0 22px 65px rgba(0,0,0,.35); backdrop-filter: blur(10px); }

.vertical-date {
    position: absolute;
    right: 28px;
    top: 26px;
    writing-mode: vertical-rl;
    font-family: var(--serif);
    color: var(--champagne);
    letter-spacing: .22em;
    font-size: 20px;
}

.city-lights { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6vw, rgba(59,125,255,.25) 7vw 8vw, transparent 10vw 16vw, rgba(216,181,109,.22) 17vw 18vw); filter: blur(5px); animation: lightsPass 8s linear infinite; }
.rain-glass { position: absolute; inset: 0; background-image: linear-gradient(115deg, transparent 0 52%, rgba(233,255,249,.13) 53%, transparent 54%), radial-gradient(circle at 20% 10%, rgba(233,255,249,.2) 0 1px, transparent 2px), radial-gradient(circle at 60% 30%, rgba(233,255,249,.18) 0 1px, transparent 2px); background-size: 180px 100%, 42px 70px, 55px 88px; opacity: .55; animation: rainSlide 1.8s linear infinite; pointer-events: none; }
.rain-glass.heavy { opacity: .8; filter: drop-shadow(0 0 8px var(--crt)); }

.platform-window { background: radial-gradient(circle at 70% 35%, rgba(59,125,255,.26), transparent 35%), linear-gradient(180deg, rgba(16,19,31,.3), rgba(16,19,31,.86)); }
.hero-title-wrap { position: absolute; left: 7vw; top: 20vh; max-width: 820px; }
h1 { font-family: var(--pixel); font-size: clamp(70px, 13vw, 178px); margin: 0; letter-spacing: -.05em; color: var(--ghost); line-height: .78; }
.title-reflection { font-family: var(--pixel); font-size: clamp(54px, 10vw, 132px); transform: scaleY(-1) skewX(-8deg); opacity: .18; color: var(--mint); filter: blur(2px); }
.hero-copy { max-width: 610px; line-height: 1.8; color: rgba(233,255,249,.86); font-size: 18px; }
.route-card { position: absolute; right: 10vw; top: 22vh; width: 280px; padding: 22px; border-radius: 22px; transform: rotate(4deg); }
.mini-line { display: flex; justify-content: space-between; margin: 24px 0; border-top: 4px solid var(--mint); }
.mini-line i { width: 18px; height: 18px; border-radius: 50%; background: var(--night); border: 3px solid var(--pink); transform: translateY(-11px); }
.hero-ticket { position: absolute; left: 9vw; bottom: 12vh; padding: 14px 32px; border-radius: 0 25px 25px 0; font-family: var(--pixel); }

.mascot { position: absolute; width: 92px; height: 104px; animation: ghostDrift 4.5s ease-in-out infinite; z-index: 6; }
.mascot span { position: absolute; left: 62px; top: 8px; white-space: nowrap; font-family: var(--round); background: var(--cream); color: var(--burgundy); padding: 7px 12px; border-radius: 16px 16px 16px 2px; box-shadow: 4px 5px 0 rgba(0,0,0,.2); }
.bubble-ghost { right: 22vw; bottom: 26vh; }
.suit-ghost { left: 58vw; top: 38vh; }
.tv-ghost { right: 18vw; top: 28vh; }
.sticker-ghost { right: 20vw; bottom: 20vh; }
.avatar-ghost { left: 52vw; bottom: 18vh; }
.konbini-ghost { right: 8vw; top: 25vh; }
.notice-ghost { left: 13vw; bottom: 22vh; }
.reiwa-ghost { right: 20vw; top: 26vh; }

.mirrored-lobby { background: radial-gradient(circle at 30% 20%, rgba(216,181,109,.5), transparent 26%), linear-gradient(135deg, var(--burgundy), var(--night) 48%, #05070e); }
.date-card, .final-card, .station-sign { width: min(470px, 42vw); padding: 30px; border: 1px solid rgba(216,181,109,.55); background: rgba(16,19,31,.58); box-shadow: 0 25px 80px rgba(0,0,0,.35); }
.date-card span, .station-sign span, .serif-year { font-family: var(--serif); color: var(--champagne); font-size: 48px; }
h2 { margin: 8px 0 12px; font-family: var(--round); font-size: clamp(32px, 5vw, 68px); line-height: 1; }
.date-card p, .final-card p, .station-sign p, .browser-window p, .purikura-frame p, .receipt-ribbon p { line-height: 1.75; }
.md-disc { position: absolute; right: 13vw; top: 18vh; width: 330px; height: 330px; border-radius: 50%; display: grid; place-items: center; transform: rotate(-12deg); }
.disc-hole { width: 96px; height: 96px; background: var(--night); border-radius: 50%; box-shadow: inset 0 0 30px var(--crt); }
.disc-label { position: absolute; bottom: 58px; width: 180px; padding: 14px; text-align: center; background: var(--cream); color: var(--burgundy); font-family: var(--pixel); }
.pager { position: absolute; left: 28vw; bottom: 19vh; padding: 12px 22px; background: #1d2d20; color: var(--mint); border: 5px solid var(--cream); transform: rotate(7deg); }
.floor-lines { position: absolute; inset: auto -10% 0; height: 35%; background: repeating-linear-gradient(100deg, rgba(216,181,109,.3) 0 2px, transparent 2px 80px); transform: perspective(500px) rotateX(58deg); }

.living-room { background: radial-gradient(circle at 45% 45%, rgba(59,125,255,.26), transparent 33%), linear-gradient(180deg, #18213a, var(--night)); }
.crt-tv { position: absolute; left: 10vw; top: 18vh; width: 440px; height: 360px; border-radius: 38px; background: linear-gradient(135deg, #302d34, #11131a); border: 10px solid #33303a; box-shadow: 0 28px 90px rgba(0,0,0,.6); padding: 34px; }
.tv-antenna { position: absolute; top: -72px; left: 48%; width: 4px; height: 80px; background: var(--champagne); transform: rotate(-24deg); box-shadow: 54px 13px 0 var(--champagne); }
.tv-screen { height: 215px; border-radius: 38% / 12%; background: var(--crt); overflow: hidden; display: grid; place-items: center; color: var(--ghost); font-family: var(--pixel); position: relative; }
.vhs-noise { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, rgba(0,0,0,.18) 2px 5px), repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,122,200,.15) 10px 11px); animation: staticJump .35s steps(2) infinite; }
.crt-tv.tuned .vhs-noise { opacity: .22; animation-duration: 1.8s; }
.artifact-button { border: 2px solid rgba(233,255,249,.7); background: rgba(16,19,31,.72); color: var(--mint); border-radius: 999px; padding: 9px 18px; font-family: var(--pixel); box-shadow: 0 0 13px rgba(127,255,212,.35); }
.crt-tv .artifact-button { position: absolute; right: 34px; bottom: 28px; }
.living-room .receipt-ribbon { position: absolute; right: 11vw; bottom: 13vh; width: 380px; padding: 28px; transform: rotate(3deg); }
.vhs-tape { position: absolute; right: 26vw; top: 18vh; width: 300px; height: 170px; background: #171822; border: 4px solid var(--cream); transform: rotate(-8deg); display: grid; place-items: center; font-family: var(--pixel); color: var(--cream); }
.vhs-tape:before, .vhs-tape:after { content: ""; width: 72px; height: 72px; border: 12px dotted var(--champagne); border-radius: 50%; position: absolute; top: 45px; }
.vhs-tape:before { left: 48px; } .vhs-tape:after { right: 48px; }

.sticker-booth { background: radial-gradient(circle at 20% 20%, rgba(255,122,200,.45), transparent 28%), radial-gradient(circle at 80% 35%, rgba(127,255,212,.34), transparent 24%), var(--burgundy); }
.purikura-frame { position: absolute; left: 10vw; top: 15vh; width: min(560px, 52vw); min-height: 460px; background: var(--cream); color: var(--burgundy); border: 16px solid var(--pink); border-radius: 42px; padding: 38px; box-shadow: 14px 16px 0 rgba(16,19,31,.35), inset 0 0 0 8px rgba(127,255,212,.8); transform-origin: top left; transition: transform .55s cubic-bezier(.2,1.4,.3,1); }
.purikura-frame.peeled { transform: rotate(-7deg) translateY(-20px); }
.sparkles { font-family: var(--round); font-size: 34px; color: var(--pink); letter-spacing: .25em; }
.sticker-sheet { position: absolute; right: 10vw; top: 18vh; display: grid; grid-template-columns: repeat(2, 140px); gap: 18px; transform: rotate(9deg); }
.sticker-sheet span { display: grid; place-items: center; height: 110px; border-radius: 35px; background: rgba(233,255,249,.86); color: var(--crt); border: 5px dotted var(--pink); font-family: var(--round); font-weight: 900; font-size: 28px; }

.mobile-tunnel { background: linear-gradient(90deg, rgba(16,19,31,.96), rgba(59,125,255,.25), rgba(16,19,31,.95)), repeating-linear-gradient(90deg, rgba(127,255,212,.18) 0 2px, transparent 2px 68px); }
.flip-phone { position: absolute; left: 12vw; top: 15vh; width: 260px; height: 520px; border-radius: 34px; padding: 16px; transition: transform .6s cubic-bezier(.2,1.2,.2,1); transform-style: preserve-3d; }
.flip-phone.open { transform: rotate(-4deg) scale(1.05); }
.phone-top, .phone-bottom { height: 228px; border-radius: 28px; background: rgba(233,255,249,.18); border: 1px solid rgba(233,255,249,.45); padding: 22px; }
.phone-screen { height: 135px; background: #baf1d8; color: #12352e; display: grid; place-items: center; text-align: center; border-radius: 10px; }
.phone-hinge { height: 24px; margin: 8px 42px; border-radius: 999px; background: var(--champagne); }
.keypad { text-align: center; margin-top: 22px; line-height: 2.2; color: var(--ghost); }
.phone-charm { position: absolute; right: -38px; top: 242px; color: var(--pink); font-size: 34px; animation: charmSwing 2.4s ease-in-out infinite; transform-origin: top; }
.phone-charm span { display: block; width: 26px; height: 42px; background: var(--mint); border-radius: 50%; }
.browser-window { position: absolute; right: 10vw; top: 20vh; width: 520px; background: var(--cream); color: var(--night); border: 4px solid var(--crt); box-shadow: 12px 12px 0 var(--pink); }
.browser-window h2, .browser-window p, .forum-post { margin-left: 24px; margin-right: 24px; }
.browser-bar { background: linear-gradient(180deg, var(--ghost), #b9c4d6); color: var(--night); padding: 10px 16px; font-family: var(--pixel); border-bottom: 4px solid var(--crt); }
.forum-post { margin-bottom: 24px; padding: 16px; border: 1px dashed var(--burgundy); font-family: var(--pixel); background: rgba(127,255,212,.32); }

.konbini-aisle { background: linear-gradient(180deg, rgba(233,255,249,.14), transparent 38%), linear-gradient(115deg, #162131, var(--night)); }
.fluorescent-grid { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: repeating-linear-gradient(90deg, transparent 0 7%, rgba(127,255,212,.45) 7.5% 8.2%, transparent 9% 14%), repeating-linear-gradient(0deg, transparent 0 38px, rgba(233,255,249,.14) 39px 42px); filter: blur(.5px); }
.onigiri { position: absolute; left: 11vw; top: 24vh; width: 260px; height: 310px; clip-path: polygon(50% 0, 98% 86%, 2% 86%); display: grid; place-items: center; color: var(--night); }
.rice { width: 120px; height: 115px; background: var(--ghost); border-radius: 50%; }
.wrapper { position: absolute; bottom: 55px; width: 170px; padding: 10px; background: var(--night); color: var(--mint); text-align: center; font-family: var(--pixel); }
.karaoke-remote { position: absolute; right: 13vw; top: 19vh; width: 190px; height: 360px; border-radius: 28px; padding: 28px; background: #24202b; border: 3px solid var(--pink); display: grid; gap: 18px; place-items: center; transform: rotate(8deg); }
.karaoke-remote b { font-family: var(--pixel); font-size: 46px; color: var(--mint); }
.long-receipt { position: absolute; left: 38vw; bottom: 9vh; width: 360px; min-height: 430px; padding: 34px; clip-path: polygon(0 0, 100% 0, 100% 94%, 94% 100%, 88% 94%, 82% 100%, 76% 94%, 70% 100%, 64% 94%, 58% 100%, 52% 94%, 46% 100%, 40% 94%, 34% 100%, 28% 94%, 22% 100%, 16% 94%, 10% 100%, 4% 94%, 0 100%); transition: filter .35s, transform .35s; }
.long-receipt.stamped { filter: sepia(.45) saturate(1.4); transform: rotate(-2deg) scale(1.03); }

.rainy-platform { background: linear-gradient(180deg, rgba(59,125,255,.22), rgba(16,19,31,.94)), repeating-linear-gradient(115deg, transparent 0 60px, rgba(216,181,109,.24) 61px 65px); }
.station-sign { position: absolute; right: 12vw; top: 16vh; background: rgba(16,19,31,.78); }
.ic-card { position: absolute; left: 14vw; top: 18vh; width: 320px; height: 205px; border-radius: 22px; padding: 34px; font-family: var(--pixel); color: var(--night); transform: rotate(-6deg); }
.ic-card b { display: block; margin-top: 48px; font-size: 30px; color: var(--burgundy); }
.fax-roll { position: absolute; left: 35vw; bottom: 13vh; width: 480px; padding: 22px; border-radius: 28px 4px 28px 4px; font-family: var(--serif); }

.reiwa-handoff { background: radial-gradient(circle at 50% 25%, rgba(233,255,249,.2), transparent 32%), linear-gradient(180deg, var(--night), #070910); }
.final-card { position: absolute; left: 11vw; top: 18vh; width: 560px; }
.phone-notification { position: absolute; right: 17vw; top: 24vh; width: 260px; padding: 24px; border-radius: 34px; font-family: var(--pixel); text-align: center; color: var(--ghost); }
.phone-notification span { color: var(--mint); }
.capsule-toy { position: absolute; right: 33vw; bottom: 16vh; width: 170px; height: 170px; border-radius: 50%; background: linear-gradient(180deg, var(--pink) 0 48%, var(--ghost) 49% 52%, var(--mint) 53%); box-shadow: 0 0 40px rgba(255,122,200,.35); }
.capsule-toy span { position: absolute; inset: 54px; border-radius: 50%; border: 8px solid var(--ghost); }

@keyframes scanDrift { to { background-position: 0 20px, 0 0; } }
@keyframes lightsPass { to { transform: translateX(-18vw); } }
@keyframes rainSlide { to { background-position: 180px 100%, 42px 70px, 55px 88px; } }
@keyframes ghostDrift { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-22px) rotate(3deg); } }
@keyframes staticJump { 0% { transform: translate(0,0); } 50% { transform: translate(-12px, 8px); } 100% { transform: translate(8px,-4px); } }
@keyframes charmSwing { 0%,100% { transform: rotate(-13deg); } 50% { transform: rotate(15deg); } }

@media (max-width: 820px) {
    .route-band { grid-template-columns: 1fr; padding: 8px; }
    .line-plate { display: none; }
    .train-line-stop em { display: none; }
    .scene-stage { inset: 70px 0 54px; padding: 22px; }
    .hero-title-wrap, .date-card, .crt-tv, .purikura-frame, .flip-phone, .onigiri, .ic-card, .final-card { left: 22px; top: 14vh; width: calc(100vw - 44px); }
    h1 { font-size: 68px; }
    .route-card, .md-disc, .browser-window, .station-sign, .phone-notification, .karaoke-remote, .long-receipt { right: 22px; left: auto; width: calc(100vw - 44px); transform: none; }
    .mascot { display: none; }
}