:root {
  --era-paper: #F7EEDB;
  --ink-black: #1C1A17;
  --broadcast-vermilion: #D6402A;
  --purikura-pink: #FF8BC8;
  --arcade-cyan: #21B8D6;
  --keitai-indigo: #263C8F;
  --cd-pearl: #D8D7FF;
  --convenience-green: #2FA66A;
  --title: 'Zen Antique Soft', serif;
  --round: 'M PLUS Rounded 1c', sans-serif;
  --lcd: 'DotGothic16', monospace;
  --serif: 'Noto Serif JP', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-black);
  background: var(--era-paper);
  font-family: var(--serif);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(28,26,23,.09) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255,139,200,.16) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 20%, rgba(28,26,23,.04));
  background-size: 7px 7px, 11px 11px, 100% 100%;
  mix-blend-mode: multiply;
}

.era-hinge {
  position: fixed;
  top: 0;
  left: 50%;
  width: 6px;
  height: 100vh;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(var(--broadcast-vermilion), var(--arcade-cyan), var(--keitai-indigo));
  box-shadow: 0 0 24px rgba(33,184,214,.45);
  transform: translateX(-50%);
  opacity: .78;
}
.era-hinge span { display:block; height: var(--hinge, 0%); background: #F7EEDB; opacity: .72; }

.time-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: grid;
  gap: 10px;
  font-family: var(--lcd);
}
.time-rail a {
  color: var(--ink-black);
  background: rgba(247,238,219,.72);
  border: 1px solid currentColor;
  text-decoration: none;
  padding: 6px 8px;
  box-shadow: 3px 3px 0 var(--broadcast-vermilion);
}

.room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 72px);
  isolation: isolate;
}
.room::before, .room::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.label, .artifact, .receipt, .ticket p, .ticket small, .suica-card, .konbini, .final-stamp, .minidisc {
  font-family: var(--round);
  letter-spacing: .04em;
}
.narrative { max-width: 680px; }
.narrative h1, .narrative h2 {
  font-family: var(--title);
  font-weight: 400;
  line-height: 1.04;
  margin: 0 0 18px;
  font-size: clamp(42px, 7vw, 104px);
}
.narrative p { font-size: clamp(17px, 2vw, 25px); line-height: 1.65; margin: 0 0 16px; }
.label { font-size: 14px; text-transform: uppercase; color: var(--broadcast-vermilion); font-weight: 800; }

.dawn {
  background:
    linear-gradient(rgba(214,64,42,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,64,42,.05) 1px, transparent 1px),
    var(--era-paper);
  background-size: 86px 86px;
}
.calendar-grid { position:absolute; inset: 7vh 8vw; border: 2px solid rgba(28,26,23,.22); }
.calendar-grid::before { content:"平成 元年 日曜日"; position:absolute; top:16px; left:18px; font-family:var(--round); color:var(--broadcast-vermilion); }
.corner-peel { position:absolute; right:0; top:0; border-style:solid; border-width:0 26vw 26vw 0; border-color:transparent rgba(216,215,255,.74) transparent transparent; filter: drop-shadow(-12px 12px 12px rgba(28,26,23,.16)); transform-origin: top right; animation: peel 5s ease-in-out infinite alternate; }
.vertical-stamp { position:absolute; left:8vw; top:8vh; writing-mode:vertical-rl; font-family:var(--title); color:var(--ink-black); display:flex; align-items:center; gap:22px; }
.kanji { font-size: clamp(92px, 15vw, 210px); line-height: .85; }
.domain { font-size: clamp(30px, 5vw, 74px); border-left: 5px solid var(--broadcast-vermilion); padding-left: 12px; }
.substamp { font-family:var(--round); font-size:16px; color:var(--convenience-green); }
.seal { position:absolute; right:13vw; top:12vh; width:180px; height:180px; border-radius:50%; display:grid; place-items:center; background:var(--broadcast-vermilion); color:var(--era-paper); font-family:var(--title); font-size:48px; box-shadow:0 0 0 12px rgba(214,64,42,.18); transform:rotate(-11deg); animation: drySeal 7s both infinite alternate; }
.dawn-note { position:absolute; right:8vw; bottom:10vh; }
.receipt { position:absolute; left:9vw; bottom:8vh; background:#fffaf0; padding:22px 18px 70px; border-top:12px solid var(--convenience-green); box-shadow:8px 8px 0 rgba(28,26,23,.12); transform:rotate(4deg); }

.morning { background: linear-gradient(90deg, var(--arcade-cyan) 0 19%, var(--era-paper) 19% 52%, #fff9e9 52% 100%); }
.morning::before { inset:0; background: repeating-linear-gradient(90deg, rgba(38,60,143,.24) 0 2px, transparent 2px 74px); }
.timetable { position:absolute; left:0; top:0; bottom:0; width:22vw; min-width:210px; padding:10vh 28px; display:grid; align-content:space-around; background:var(--arcade-cyan); color:white; font-family:var(--lcd); font-size:clamp(18px, 2.3vw, 34px); text-shadow:2px 2px 0 var(--keitai-indigo); }
.timetable span { border-bottom:2px dashed rgba(255,255,255,.5); transform:translateX(var(--tick, 0)); }
.ticket { position:absolute; left:31vw; top:23vh; width:min(520px, 52vw); min-height:245px; padding:30px; background:var(--era-paper); border:3px solid var(--ink-black); border-radius:26px 26px 8px 8px; box-shadow:14px 14px 0 var(--broadcast-vermilion); transform:rotate(-5deg); }
.ticket::before, .ticket::after { content:""; position:absolute; top:50%; width:42px; height:42px; border-radius:50%; background:var(--arcade-cyan); transform:translateY(-50%); }
.ticket::before { left:-23px; } .ticket::after { right:-23px; }
.ticket strong { font-family:var(--title); font-size:clamp(72px, 12vw, 156px); display:block; }
.suica-card { position:absolute; right:9vw; top:13vh; width:250px; height:155px; border-radius:28px; background:linear-gradient(135deg, var(--convenience-green), var(--cd-pearl)); padding:26px; color:white; box-shadow:0 16px 40px rgba(28,26,23,.25); }
.side-writing { position:absolute; right:8vw; bottom:10vh; max-width:540px; }

.noon { background: radial-gradient(circle at 70% 40%, rgba(255,139,200,.65), transparent 28%), linear-gradient(135deg, var(--keitai-indigo), var(--arcade-cyan)); color:white; }
.arcade-bezel { position:absolute; left:7vw; top:10vh; right:21vw; bottom:12vh; border:18px solid #1C1A17; border-radius:42px; background:rgba(28,26,23,.42); box-shadow:inset 0 0 60px rgba(33,184,214,.75), 0 0 0 12px rgba(216,215,255,.45); padding:7vw; }
.scanlines { position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0 2px, transparent 2px 7px); animation: scan 1.2s linear infinite; }
.score, .lcd { font-family:var(--lcd); color:var(--cd-pearl); font-size:clamp(24px, 5vw, 70px); }
.arcade-bezel h2 { font-family:var(--title); font-size:clamp(56px, 11vw, 150px); margin:8vh 0 12px; }
.arcade-bezel p:not(.score) { font-size:24px; max-width:520px; }
.cd { position:absolute; right:5vw; top:17vh; width:31vw; height:31vw; min-width:260px; min-height:260px; border-radius:50%; background: conic-gradient(from 30deg, #D8D7FF, #21B8D6, #FF8BC8, #F7EEDB, #2FA66A, #D8D7FF); mix-blend-mode:screen; opacity:.86; animation: spin 9s linear infinite; }
.cd::after { content:""; position:absolute; inset:35%; border-radius:50%; background:var(--keitai-indigo); }
.cassette { position:absolute; left:11vw; bottom:6vh; width:340px; height:150px; border:4px solid white; border-radius:18px; background:rgba(247,238,219,.22); display:flex; align-items:center; justify-content:space-around; font-family:var(--round); }
.cassette span { width:72px; height:72px; border:10px double white; border-radius:50%; }
.cassette b { position:absolute; bottom:12px; }
.minidisc { position:absolute; right:13vw; bottom:9vh; background:var(--cd-pearl); color:var(--keitai-indigo); padding:28px; border-radius:12px; transform:rotate(7deg); }
.pixel-mascot { position:absolute; right:7vw; top:9vh; font-family:var(--lcd); font-size:42px; color:var(--purikura-pink); }

.after-school { background: linear-gradient(rgba(255,139,200,.18) 1px, transparent 1px), linear-gradient(90deg, var(--era-paper), #fff4fb); background-size:100% 36px, 100% 100%; }
.after-school::before { inset:0; background:radial-gradient(circle, var(--purikura-pink) 0 2px, transparent 3px); background-size:42px 42px; opacity:.28; }
.sticker-copy { position:absolute; left:7vw; top:12vh; }
.sticker-board { position:absolute; right:7vw; top:8vh; width:min(48vw, 620px); height:78vh; }
.sticker { position:absolute; display:grid; place-items:center; text-align:center; background:white; border:7px solid var(--purikura-pink); border-radius:24px; box-shadow:9px 9px 0 var(--cd-pearl); font-family:var(--round); font-weight:800; color:var(--keitai-indigo); transition: transform .5s ease; }
.sticker::after { content:"✦"; position:absolute; right:-18px; top:-20px; color:var(--broadcast-vermilion); font-size:34px; animation:sparkle 1.8s infinite; }
.s1 { width:240px; height:180px; left:4%; top:7%; transform:rotate(-8deg); }
.s2 { width:300px; height:210px; right:0; top:24%; transform:rotate(5deg); }
.s3 { width:190px; height:190px; left:20%; bottom:18%; transform:rotate(10deg); border-radius:50%; }
.s4 { width:250px; height:130px; right:8%; bottom:4%; transform:rotate(-5deg); }
.tamagotchi { position:absolute; left:12vw; bottom:12vh; width:150px; height:190px; border-radius:50% 50% 46% 46%; background:var(--convenience-green); display:grid; place-items:center; color:var(--era-paper); font-size:50px; box-shadow:8px 8px 0 var(--ink-black); }
.tamagotchi span { position:absolute; bottom:34px; width:64px; height:32px; background:var(--cd-pearl); border:3px solid var(--ink-black); }

.dusk { background:linear-gradient(180deg, var(--keitai-indigo), #151a45 68%, var(--ink-black)); color:var(--era-paper); }
.dusk::before { inset:0; background:radial-gradient(circle at 18% 20%, rgba(33,184,214,.45), transparent 22%), radial-gradient(circle at 80% 70%, rgba(255,139,200,.25), transparent 26%); }
.flip-phone { position:absolute; left:10vw; top:10vh; width:min(430px, 38vw); perspective:900px; }
.phone-top, .phone-bottom { border:5px solid var(--cd-pearl); background:linear-gradient(160deg, #1f2c75, #21B8D6); border-radius:34px; box-shadow:0 26px 50px rgba(0,0,0,.36); }
.phone-top { height:310px; transform-origin:bottom; transform:rotateX(var(--phone-open, -18deg)); display:grid; place-items:center; }
.phone-hinge { height:34px; margin:6px 34px; border-radius:20px; background:var(--purikura-pink); }
.phone-bottom { height:265px; padding:42px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.phone-bottom span { font-family:var(--round); border:1px solid var(--cd-pearl); border-radius:12px; display:grid; place-items:center; }
.charm { position:absolute; left:43vw; top:29vh; width:140px; height:290px; transform-origin:top center; animation:swing 3.2s ease-in-out infinite; }
.charm i { display:block; margin:auto; width:2px; height:170px; background:var(--cd-pearl); }
.charm b { display:block; width:78px; height:78px; margin:auto; border-radius:50%; background:var(--purikura-pink); box-shadow:inset -10px -10px 0 rgba(28,26,23,.18); }
.dusk-copy { position:absolute; right:8vw; top:17vh; max-width:570px; }
.konbini { position:absolute; right:12vw; bottom:8vh; background:#fff; color:var(--ink-black); padding:24px 20px 90px; border-top:14px solid var(--convenience-green); transform:rotate(-3deg); }

.midnight { background:var(--ink-black); color:var(--era-paper); }
.snow-field { position:absolute; inset:0; background: repeating-radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgba(216,215,255,.12) 0 2px, transparent 2px 9px); opacity:.22; animation:snow .34s steps(2) infinite; }
.vhs { position:absolute; inset:9vh 8vw 14vh; border:6px solid var(--cd-pearl); border-radius:18px; background:linear-gradient(180deg, rgba(38,60,143,.9), rgba(28,26,23,.95)); box-shadow:0 0 60px rgba(216,215,255,.32); overflow:hidden; }
.tracking { position:absolute; inset:0; background:repeating-linear-gradient(180deg, transparent 0 42px, rgba(255,139,200,.25) 42px 48px, transparent 48px 94px); animation:tracking 2.8s linear infinite; }
.vhs-label { position:absolute; left:8%; right:8%; top:20%; min-height:45%; background:var(--era-paper); color:var(--ink-black); padding:clamp(28px, 6vw, 72px); border-radius:10px; box-shadow:12px 12px 0 var(--broadcast-vermilion); }
.vhs-label p { font-family:var(--lcd); color:var(--keitai-indigo); font-size:34px; margin:0; }
.vhs-label h2 { font-family:var(--title); font-size:clamp(64px, 12vw, 160px); margin:0 0 12px; }
.vhs-label span { font-family:var(--serif); font-size:24px; }
.final-stamp { position:absolute; right:8vw; bottom:7vh; color:var(--cd-pearl); font-size:28px; text-align:right; }

@keyframes peel { to { transform:rotate(-8deg); } }
@keyframes drySeal { from { filter:saturate(1.4); opacity:1; } to { filter:saturate(.45) contrast(1.4); opacity:.72; } }
@keyframes scan { to { transform:translateY(14px); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes sparkle { 50% { transform:scale(1.6) rotate(20deg); opacity:.55; } }
@keyframes swing { 50% { transform:rotate(10deg); } }
@keyframes snow { 50% { transform:translate(5px, -4px); } }
@keyframes tracking { to { transform:translateY(94px); } }

@media (max-width: 820px) {
  .time-rail { display:none; }
  .era-hinge { left:18px; }
  .vertical-stamp, .dawn-note, .ticket, .side-writing, .arcade-bezel, .sticker-copy, .sticker-board, .flip-phone, .dusk-copy, .vhs { position:relative; inset:auto; width:auto; right:auto; left:auto; top:auto; bottom:auto; margin:24px 0; }
  .room { min-height:auto; padding:34px 24px 90px; }
  .kanji { font-size:96px; }
  .seal, .receipt, .suica-card, .cd, .cassette, .minidisc, .pixel-mascot, .tamagotchi, .charm, .konbini, .final-stamp { position:relative; inset:auto; margin:24px 0; }
  .sticker-board { height:760px; }
  .sticker { transform:none; }
  .timetable { position:relative; width:auto; min-width:0; margin:-34px -24px 24px; }
  .flip-phone { width:100%; }
  .vhs-label { position:relative; left:auto; right:auto; top:auto; margin:40px 18px; }
}