:root {
  --night: #10192b;
  --deep: #15233b;
  --cream: #f5ebd3;
  --paper: #efe0bd;
  --ink: #27333b;
  --amber: #efa943;
  --orange: #d66c42;
  --teal: #537e78;
  --red: #ad493b;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior:none; }
body {
  background: var(--night);
  color: var(--cream);
  font-family: "YouYuan", "Yuanti SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.topbar {
  position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(0px,env(safe-area-inset-top)) clamp(22px, 4vw, 64px) 0; color: var(--cream);
}
.brand, .sound-btn {
  color: inherit; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 10px; letter-spacing: .13em;
}
.brand { font-weight: 700; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px var(--amber); }
.top-actions { display: flex; align-items: center; gap: 26px; font-size: 12px; }
.scene-count b { font-size: 18px; color: var(--amber); margin-right: 3px; }
.sound-btn { font-size: 12px; padding: 8px; }
.sound-bars { height: 16px; display: flex; align-items: end; gap: 2px; }
.sound-bars i { width: 2px; height: 5px; background: currentColor; display: block; }
.sound-btn.playing .sound-bars i { animation: bars .8s ease-in-out infinite alternate; }
.sound-btn.playing .sound-bars i:nth-child(2) { animation-delay: -.4s; }
.sound-btn.playing .sound-bars i:nth-child(3) { animation-delay: -.2s; }
body.station-active .topbar { color:#294755; }
body[data-scene="1"] .topbar,
body[data-scene="2"] .topbar,
body[data-scene="3"] .topbar,
body[data-scene="5"] .topbar { color:#294755; }
body.station-active .scene-nav button { background:rgba(37,67,80,.3); }
body.station-active .scene-nav button.active { background:#b34940;box-shadow:0 0 0 5px rgba(179,73,64,.14); }
@keyframes bars { to { height: 15px; } }

#story, .scene { position: absolute; inset: 0; }
.scene {
  visibility: hidden; opacity: 0; overflow: hidden;
  transform: scale(1.025); transition: opacity .9s ease, transform 1.2s ease, visibility 0s 1.2s;
}
.scene.active { visibility: visible; opacity: 1; transform: scale(1); transition-delay: 0s; z-index: 2; }
.eyebrow { font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .3em; font-weight: bold; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "STKaiti", "KaiTi", "YouYuan", cursive; font-weight: 600; line-height: 1.08; }
h1 em, h2 em { font-style: normal; color: var(--amber); }
.next-btn {
  border: 0; color: var(--cream); background: var(--red); padding: 13px 22px;
  cursor: pointer; letter-spacing: .12em; box-shadow: 4px 4px 0 rgba(26,29,31,.18);
  transition: transform .2s, box-shadow .2s;
}
.next-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(26,29,31,.18); }
.next-btn span { margin-left: 18px; }

/* 01 station */
.scene-station { color:#243846; background:linear-gradient(#9fd7ee 0 45%,#dce7e7 45% 100%); }
.station-world { position: absolute; inset: 0; }
.day-sky { position:absolute; inset:0 0 45%; background:linear-gradient(155deg,#78c8e9,#d8f2f8 72%); }
.day-sky i { position:absolute; width:240px; height:46px; border-radius:50%; background:rgba(255,255,255,.72); filter:blur(4px); }
.day-sky i:nth-child(1){left:8%;top:22%}.day-sky i:nth-child(2){right:16%;top:14%;transform:scale(.7)}.day-sky i:nth-child(3){right:34%;top:38%;transform:scale(.45)}
.station-canopy { position:absolute; z-index:2; top:0; right:0; width:55%; height:31%; background:#e8eff0; border-bottom:11px solid #526b78; clip-path:polygon(14% 0,100% 0,100% 100%,0 100%); box-shadow:0 12px 0 rgba(34,58,70,.12); }
.station-canopy:before { content:"";position:absolute;inset:18% 0 auto;height:9px;background:#7e929a;box-shadow:0 28px 0 #a4b2b5;transform:skewX(-15deg); }
.station-canopy span { position:absolute; top:78%; width:9px; height:62vh; background:#536a73; transform:skewX(-7deg); }
.station-canopy span:nth-child(1){left:21%}.station-canopy span:nth-child(2){left:47%}.station-canopy span:nth-child(3){left:70%}.station-canopy span:nth-child(4){left:91%}
.platform-board { position:absolute; z-index:4; right:8%; top:23%; width:118px; height:82px; color:white; background:#185b87; border:4px solid #f4f7f4; box-shadow:5px 6px 0 rgba(30,57,69,.2); display:grid;grid-template-columns:58px 1fr;align-items:center;padding:8px; }
.platform-board b { font:700 52px/1 Arial; border-right:1px solid rgba(255,255,255,.5); }
.platform-board span { font-size:15px;text-align:center}.platform-board small{position:absolute;right:8px;bottom:7px;font:7px Arial;letter-spacing:.1em}
.departure-board { position:absolute; z-index:3; right:22%; top:11%; width:285px; padding:12px 18px; color:#ebf6f5; background:#263c48; border:5px solid #d5dfe0; box-shadow:7px 8px 0 rgba(31,56,68,.16); font-family:Arial,sans-serif; }
.departure-board span,.departure-board small{display:block;font-size:9px;letter-spacing:.12em}.departure-board strong{display:block;margin:7px 0;color:#ffd25f;font-size:18px;letter-spacing:.08em}
.overhead-lines { position:absolute; z-index:1; left:0; right:0; top:36%; height:2px; background:#556a72; transform:rotate(-3deg); box-shadow:0 34px 0 rgba(65,84,92,.6),0 67px 0 rgba(65,84,92,.35); }
.train { position:absolute; z-index:2; right:-3%; bottom:27%; width:46%; height:180px; background:#f8faf7; border:3px solid #9daeb1; border-radius:80% 8px 0 0 / 100% 8px 0 0; box-shadow:inset 0 -27px 0 #e4e9e7,0 8px 0 rgba(56,76,82,.15); animation:trainIdle 4s ease-in-out infinite; }
.train:before { content:"";position:absolute;left:8%;top:35%;width:38px;height:25px;background:#263d50;border-radius:70% 20% 20% 40%;transform:skewX(-20deg); }
.train-window { position:absolute;left:32%;right:5%;top:35%;height:27px;background:repeating-linear-gradient(90deg,#29485b 0 42px,transparent 42px 58px); }
.train-stripe { position:absolute;left:10%;right:0;bottom:37px;height:10px;background:#b8473e; }
@keyframes trainIdle { 50%{transform:translateX(-5px)} }
.rail { position:absolute; z-index:2; bottom:-3%; height:11px; background:#4c5354; transform-origin:right center; box-shadow:0 7px 0 #a4a4a0; }
.rail-a { left:2%;right:-5%;transform:rotate(-8deg)}.rail-b{left:28%;right:-5%;bottom:12%;transform:rotate(-4deg)}
.platform-ground { position:absolute; inset:45% 0 0; background:linear-gradient(155deg,#e8e9e4,#bfc5c3); clip-path:polygon(0 0,100% 21%,100% 100%,0 100%); }
.platform-ground:before { content:"";position:absolute;left:0;right:0;top:34%;height:18px;background:repeating-linear-gradient(90deg,#e0b843 0 18px,#d3a937 18px 24px);transform:rotate(4deg);box-shadow:0 4px 0 rgba(70,78,77,.18)}
.platform-ground i { position:absolute;left:0;right:0;top:15%;height:4px;background:#fff;transform:rotate(4deg);box-shadow:0 22px 0 rgba(255,255,255,.75)}
.station-copy { position:absolute; left:clamp(24px,7vw,105px); top:14%; z-index:5; }
.station-copy .eyebrow { color:#315d70; }
.station-copy h1 { font-size:clamp(56px,8.2vw,116px); letter-spacing:.02em; margin:14px 0 4px; color:#213d4b; text-shadow:3px 3px 0 rgba(255,255,255,.55); }
.station-copy h1 em { color:#b34940; }
.station-copy .subtitle { letter-spacing:.38em; color:#315d70; font-weight:600; }
.ticket {
  position:absolute; z-index:6; left:clamp(24px,7vw,105px); bottom:8%; width:min(620px,50vw); min-height:226px;
  display:block; padding:0; border:1px solid #aab6b8; border-radius:5px; color:#253a43; background:#f7faf7; cursor:pointer;
  box-shadow:0 16px 35px rgba(46,72,80,.24); transition:.3s ease; overflow:hidden; text-align:left;
}
.ticket:hover { transform:translateY(-6px); box-shadow:0 23px 45px rgba(46,72,80,.3); }
.ticket-head { height:38px;padding:0 18px;display:flex;align-items:center;gap:12px;color:white;background:#21658c;font-family:Arial,sans-serif; }
.ticket-head b { font-size:13px;letter-spacing:.15em}.ticket-head small{font-size:8px;letter-spacing:.16em;opacity:.7}.ticket-head i{margin-left:auto;font-style:normal;font-size:11px;background:#f4c44f;color:#284452;padding:4px 8px}
.ticket .ticket-route { display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;padding:16px 24px 10px;text-align:center;color:#263e4b;font-family:inherit;letter-spacing:0; }
.ticket-route span small,.ticket-info small{display:block;color:#75898d;font:8px Arial,sans-serif;letter-spacing:.15em}.ticket-route span strong{display:block;font-size:22px;margin:3px 0}.ticket-route span em{font:9px Arial;color:#7b8f94;font-style:normal}
.ticket-route>b { color:#b34940;font:700 22px Arial}.ticket-route>b i{display:block;color:#315d70;font-size:9px;font-style:normal;letter-spacing:.12em;margin-bottom:4px}
.ticket-info { display:grid;grid-template-columns:1.4fr 1fr .7fr 1fr;margin:0 20px;padding:11px 4px;border-top:1px dashed #aebabc;border-bottom:1px dashed #aebabc; }
.ticket-info i { font-style:normal;padding-left:13px;border-left:1px solid #d5dcda}.ticket-info i:first-child{border:0}.ticket-info b{display:block;margin-top:3px;font:700 13px Arial,sans-serif}
.ticket-bottom { display:flex;align-items:center;justify-content:space-between;padding:10px 22px 13px;font-size:10px;color:#65777b}.ticket-bottom b{color:#b34940;letter-spacing:.08em}
.scroll-hint { position:absolute; bottom:2.5%; left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:.3em; color:#395a66; opacity:.75; }

/* 02 street */
.scene-street { color:var(--ink); background:#d8b77d; }
.scene-street:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(247,223,174,.9) 0 48%,transparent 70%),linear-gradient(0deg,#be7351 0 18%,transparent 18%); }
.street-world { position:absolute; inset:0; z-index:0; }
.shop { position:absolute; bottom:18%; background:#8d4938; border:6px solid #423c35; color:#f2d291; text-align:center; }
.shop span { display:block; padding:13px; font-size:15px; letter-spacing:.3em; background:#384b4c; }
.shop i { display:inline-block; width:75px; height:160px; margin:12px 4px 0; background:linear-gradient(#e8bd72,#9e674d); border:5px solid #3c3832; }
.shop-one { right:3%; width:360px; height:350px; }.shop-two { right:31%; width:260px; height:275px; }
.awning { position:absolute; right:29%; bottom:43%; width:300px; height:45px; background:repeating-linear-gradient(90deg,#f0d494 0 30px,#b04b3e 30px 60px); transform:skewX(-15deg); border:4px solid #433832; }
.clothes { position:absolute; right:12%; top:12%; width:350px; border-top:2px solid #4a443b; transform:rotate(-3deg); }
.clothes i { display:inline-block; width:55px; height:65px; margin:0 25px; background:#c07d58; clip-path:polygon(10% 0,35% 0,40% 8%,60% 8%,65% 0,90% 0,100% 25%,83% 35%,78% 100%,22% 100%,17% 35%,0 25%); }
.clothes i:nth-child(2){background:#6f8e82}.clothes i:nth-child(3){background:#e3c88e}
.cat { position:absolute; right:25%; bottom:14%; color:#2f3636; font:80px Arial; transform:rotate(90deg); }
.street-lamp { position:absolute; right:46%; top:16%; width:120px; height:120px; border-radius:50%; background:rgba(255,202,109,.32); filter:blur(12px); }
.story-card { position:absolute; z-index:2; }
.left-card { left:clamp(26px,8vw,120px); top:14%; width:min(480px,40vw); }
.story-card h2 { font-size:clamp(42px,5.5vw,76px); margin:15px 0 28px; }
.copy { font-size:14px; line-height:2; }
.copy p { margin-bottom:14px; }
.quote { margin:22px 0; padding:14px 18px; border-left:4px solid var(--red); color:#7d3f34; font-weight:700; line-height:1.8; background:rgba(247,224,183,.5); }
.soup-pot { position:absolute; z-index:3; right:9%; bottom:8%; width:250px; height:170px; }
.pot-body { position:absolute; bottom:0; width:220px; height:95px; border-radius:10px 10px 70px 70px; background:#324a4d; border:5px solid #263234; }
.pot-lid { position:absolute; width:180px; height:40px; bottom:87px; left:20px; border-radius:90px 90px 0 0; background:#415b5b; border:5px solid #263234; }
.pot-lid:before { content:""; position:absolute; left:72px; top:-20px; width:30px; height:17px; border-radius:50% 50% 0 0; background:#263234; }
.steam { position:absolute; bottom:130px; width:25px; height:90px; border-left:4px solid rgba(248,231,189,.8); border-radius:50%; animation:steam 2.4s infinite ease-in-out; }
.s1{left:65px}.s2{left:120px;animation-delay:-.8s}.s3{left:170px;animation-delay:-1.5s}
@keyframes steam { 0%{transform:translateY(15px) scale(.7);opacity:0} 50%{opacity:1} 100%{transform:translate(15px,-25px) scale(1.2);opacity:0} }
.soup-pot span { position:absolute; width:280px; bottom:-28px; left:-30px; text-align:center; font-size:11px; letter-spacing:.15em; }

/* 03 table */
.scene-table { color:#493a30; background:linear-gradient(145deg,#efc884 0 56%,#ce825d 100%); }
.scene-table:before { content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:#9e6c50;border-top:8px solid #684638; }
.table-light { position:absolute; width:760px; height:760px; right:-40px; top:-200px; border-radius:50%; background:radial-gradient(circle,#fff1bd 0,rgba(255,226,158,.72) 35%,transparent 70%); }
.table-copy { left:clamp(25px,8vw,120px); top:14%; width:min(600px,46vw); color:#49382f; }
.table-copy h2 { font-size:clamp(44px,6vw,80px); margin:16px 0 27px; }
.table-copy h2 em { color:#a44338; }
.wish-lines { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:22px 0 27px; color:#8d3f36; font-weight:700; }
.wish-lines i { opacity:.4; }
.still-life { position:absolute; right:5%; bottom:5%; width:44%; height:57%; }
.receipt { position:absolute; left:5%; bottom:20%; width:150px; height:230px; padding:25px 18px; background:#f1dfb9; color:#403930; font:13px/2 monospace; transform:rotate(-7deg); box-shadow:10px 12px 0 rgba(47,35,31,.2); clip-path:polygon(0 0,100% 0,100% 96%,93% 100%,86% 96%,79% 100%,72% 96%,65% 100%,58% 96%,51% 100%,44% 96%,37% 100%,30% 96%,23% 100%,16% 96%,9% 100%,0 96%); }
.tea { position:absolute; right:8%; bottom:18%; width:130px; height:110px; border-radius:4px 4px 55px 55px; background:#436764; border:6px solid #2c3d3d; }
.tea:after { content:"";position:absolute;width:50px;height:55px;right:-43px;top:17px;border:8px solid #2c3d3d;border-left:0;border-radius:0 50% 50% 0; }
.tea i { position:absolute; width:4px; height:90px; border-left:3px solid #f5ddae; border-radius:50%; top:-95px; left:52%; opacity:.65; animation:steam 2.5s infinite; }
.cake-slice { position:absolute; right:34%; bottom:14%; width:140px; height:100px; background:#e2b475; clip-path:polygon(0 35%,100% 0,94% 90%,5% 100%); border-bottom:10px solid #863d37; }
.cake-slice i { position:absolute; inset:20px 8px 40px; border-bottom:8px solid #b65343; }
.piggy { position:absolute; right:33%; top:4%; width:160px; height:115px; border-radius:50%; background:#d89372; color:#4d3931; font-size:35px; padding:20px 35px; }
.piggy:before,.piggy:after { content:"";position:absolute;top:-15px;border:22px solid transparent;border-bottom-color:#d89372; }.piggy:before{left:18px;transform:rotate(-25deg)}.piggy:after{right:18px;transform:rotate(25deg)}
.piggy span { position:absolute;width:45px;height:30px;border-radius:50%;background:#b96a59;left:58px;top:60px; }
.coin { position:absolute; left:42%; bottom:5%; width:75px; height:75px; border-radius:50%; display:grid; place-items:center; background:#e7b54f; border:6px double #8d5a2b; font:bold 22px Arial; box-shadow:4px 6px 0 #57402d; animation:coinRoll 3s ease-in-out infinite; }
@keyframes coinRoll { 50%{transform:translateX(35px) rotate(180deg)} }

/* 04 river */
.scene-river { color:#294750; background:linear-gradient(#8bcbe0 0 43%,#e7c884 43% 100%); }
.river-sky { position:absolute; inset:0; overflow:hidden; }
.river-sun { position:absolute; right:18%; top:12%; width:105px; height:105px; border-radius:50%; background:#ffcf75; box-shadow:0 0 85px rgba(255,174,93,.65);animation:sunsetGlow 4s ease-in-out infinite alternate }
.sunset-cloud{position:absolute;z-index:1;height:20px;border-radius:50%;background:rgba(255,218,176,.7);filter:blur(2px);animation:cloudSail 18s linear infinite}.cloud-a{right:8%;top:27%;width:260px}.cloud-b{right:35%;top:19%;width:180px;animation-duration:25s;opacity:.65}
.wild-geese{position:absolute;z-index:4;right:-180px;top:25%;width:180px;height:70px;animation:geeseFly 13s linear infinite}.wild-geese i{position:absolute;width:25px;height:12px;border-top:3px solid #514844;border-radius:50%;transform:rotate(18deg)}.wild-geese i:after{content:"";position:absolute;left:19px;top:-3px;width:25px;height:12px;border-top:3px solid #514844;border-radius:50%;transform:rotate(-36deg)}.wild-geese i:nth-child(2){left:48px;top:22px;transform:scale(.8) rotate(18deg)}.wild-geese i:nth-child(3){left:90px;top:7px;transform:scale(.7) rotate(18deg)}.wild-geese i:nth-child(4){left:128px;top:28px;transform:scale(.55) rotate(18deg)}
.mountain { position:absolute; left:-5%; right:-5%; bottom:23%; height:55%; clip-path:polygon(0 75%,14% 31%,25% 64%,41% 18%,56% 65%,70% 28%,83% 66%,100% 30%,100% 100%,0 100%); }
.m1 { background:#9baea5; opacity:.66; transform:scale(1.15);animation:mountainPass 22s linear infinite }.m2{background:#728f84;transform:translateY(60px);animation:mountainPass 16s linear infinite reverse}.m3{background:#4f796f;transform:translateY(120px) scaleX(1.1);animation:mountainPass 11s linear infinite}
.river-svg { position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 0 25px rgba(79,142,151,.2)); }
.river-svg .river-body { fill:#65b8cf; stroke:#dff5f5; stroke-width:5; animation:riverPulse 4s ease-in-out infinite alternate; }
.water-line{fill:none;stroke:rgba(238,255,255,.72);stroke-width:5;stroke-linecap:round;stroke-dasharray:22 34;animation:waterTravel 5s linear infinite}.line-b{animation-duration:7s;opacity:.65}.line-c{animation-duration:4s;opacity:.5}
.water-rings i{position:absolute;border:2px solid rgba(236,255,255,.75);border-radius:50%;animation:ringFlow 3.5s ease-out infinite}.water-rings i:nth-child(1){right:29%;bottom:43%;width:20px;height:8px}.water-rings i:nth-child(2){right:43%;bottom:27%;width:28px;height:10px;animation-delay:-1.2s}.water-rings i:nth-child(3){right:13%;bottom:17%;width:18px;height:7px;animation-delay:-2.4s}
@keyframes waterTravel{to{stroke-dashoffset:280}}@keyframes riverPulse{to{filter:brightness(1.08);transform:translateY(3px)}}@keyframes ringFlow{0%{transform:scale(.25);opacity:0}35%{opacity:.9}100%{transform:scale(4);opacity:0}}@keyframes sunsetGlow{to{transform:scale(1.06);filter:brightness(1.08)}}@keyframes cloudSail{to{transform:translateX(-55vw)}}@keyframes geeseFly{to{transform:translateX(-125vw) translateY(-35px)}}@keyframes mountainPass{50%{translate:22px 8px}}
.moving-skiff{filter:drop-shadow(0 5px 5px rgba(38,68,72,.22))}.skiff-hull{fill:#ac533d;stroke:#493f37;stroke-width:4}.skiff-canopy{fill:#f1d18e;stroke:#493f37;stroke-width:3}.skiff-pole{fill:none;stroke:#493f37;stroke-width:4;stroke-linecap:round}
.rock { position:absolute; border-radius:60% 50% 45% 55%; background:#647c72; box-shadow:inset 8px 10px 0 rgba(255,255,255,.12); }
.rock-a{width:130px;height:85px;right:24%;bottom:20%;transform:rotate(-10deg)}.rock-b{width:90px;height:60px;right:12%;bottom:13%}
.flower{position:absolute;right:27%;bottom:30%;color:#e5a959;font-size:26px;animation:flower 2s ease-in-out infinite}
@keyframes flower{50%{transform:rotate(15deg) scale(1.1)}}
.boat{position:absolute;right:31%;bottom:47%;font-size:50px;color:#e3a44e;transform:rotate(15deg);animation:boat 5s ease-in-out infinite}
@keyframes boat{50%{transform:translate(-50px,70px) rotate(-8deg)}}
.river-copy { position:absolute; z-index:2; left:clamp(25px,8vw,120px); top:13%; width:min(590px,47vw); }
.river-copy h2 { font-size:clamp(54px,7vw,96px); margin:14px 0 25px; }
.river-copy .copy { color:#304c52; }
.river-copy strong { color:#9b4037; }
.river-copy blockquote { margin:17px 0 22px; padding:12px 18px; border-left:3px solid #ad493b; color:#623f35; background:rgba(255,245,211,.55); font-size:18px; line-height:1.75; }
.next-btn.light { color:#25333c; background:#e2b25f; }

/* 05 letter */
.scene-birthday { color:#43362e; background:#d3a467; }
.birthday-bg { position:absolute; inset:0; background:radial-gradient(circle at 80% 38%,#ffe4aa,transparent 34%),linear-gradient(125deg,#bf6d50,#e9c88e); }
.birthday-bg i { position:absolute; width:10px;height:10px;background:#f2d58a;transform:rotate(45deg); animation:twinkle 2s infinite alternate; }
.birthday-bg i:nth-child(1){left:7%;top:20%}.birthday-bg i:nth-child(2){left:85%;top:15%;animation-delay:-1s}.birthday-bg i:nth-child(3){left:72%;top:70%;animation-delay:-.5s}.birthday-bg i:nth-child(4){left:12%;top:78%;animation-delay:-1.5s}
@keyframes twinkle{to{transform:rotate(135deg) scale(1.8);opacity:.3}}
.letter { position:absolute; z-index:3; left:8%; top:5%; width:min(700px,60vw); height:87%; padding:30px clamp(28px,4vw,60px); background:#f0e2c3; box-shadow:18px 20px 0 rgba(86,49,36,.22); transform:rotate(-.5deg); }
.letter:before { content:"";position:absolute;inset:14px;border:1px solid rgba(110,72,50,.25);pointer-events:none; }
.letter-head { display:flex;justify-content:space-between;font:10px Arial,sans-serif;letter-spacing:.25em;color:#9a5e45; }
.letter h2 { font-size:clamp(37px,4.2vw,58px); margin:15px 0 18px; }
.letter h2 em { color:#a44338; }
.letter-body { columns:2; column-gap:38px; padding-bottom:145px; font-size:12.5px; line-height:1.85; }
.letter-body p { break-inside:avoid; margin-bottom:13px; }
.cake { position:absolute; z-index:3; right:18px; bottom:8px; width:300px; height:390px; transform:scale(.55);transform-origin:bottom right;filter:drop-shadow(18px 22px 12px rgba(80,43,30,.25)); }
.plate { position:absolute;bottom:0;left:-20px;width:340px;height:32px;border-radius:50%;background:#315457; }
.cake-body { position:absolute;bottom:25px;width:300px;height:160px;border-radius:12px 12px 40px 40px;background:linear-gradient(#8abf52,#5d913e);border-bottom:30px solid #386530;display:grid;place-items:center; }
.cake-body b { font:700 35px "YouYuan","Microsoft YaHei"; color:#fff4b1;text-shadow:2px 3px 0 #3f7037; }
.cream { position:absolute;z-index:2;bottom:160px;width:300px;height:70px;border-radius:50%;background:#b9d972; }
.cream:after { content:"";position:absolute;left:20px;right:20px;top:35px;height:50px;background:#b9d972;clip-path:polygon(0 0,12% 35%,25% 5%,38% 42%,50% 8%,64% 38%,78% 0,90% 42%,100% 8%,100% 0); }
.grass-top{position:absolute;z-index:3;left:30px;bottom:205px;width:240px;height:65px}.grass-top i{position:absolute;bottom:0;width:14px;height:58px;border-radius:100% 0;background:#4c873b;transform-origin:bottom}.grass-top i:nth-child(1){left:8px;transform:rotate(-31deg)}.grass-top i:nth-child(2){left:48px;transform:rotate(18deg);height:48px}.grass-top i:nth-child(3){left:88px;transform:rotate(-12deg);height:65px}.grass-top i:nth-child(4){left:132px;transform:rotate(25deg)}.grass-top i:nth-child(5){left:180px;transform:rotate(-20deg);height:49px}.grass-top i:nth-child(6){left:220px;transform:rotate(18deg);height:62px}
.candle { position:absolute;z-index:5;bottom:225px;width:18px;height:76px;background:repeating-linear-gradient(135deg,#f7e6a6 0 10px,#db7353 10px 20px); }
.candle-a{left:82px}.candle-b{left:141px;height:88px}.candle-c{left:202px}
.flame { --music-sway:0deg;--music-scale:1;position:absolute;z-index:6;left:-3px;bottom:74px;width:24px;height:38px;border-radius:50% 50% 45% 45%;background:#ffd36a;box-shadow:0 0 35px #f7bd52;transform-origin:50% 100%;transform:rotate(var(--music-sway)) scale(var(--music-scale));transition:opacity .35s,filter .15s; }
.flame:after{content:"";position:absolute;inset:9px 7px 3px;border-radius:50%;background:#fff4b4}.cake.blown .flame{opacity:0;transform:translateY(-8px) scale(.1);filter:blur(4px)}
.wish-control{position:absolute;z-index:5;right:7%;bottom:4%;width:340px;text-align:center}.wish-button{padding:12px 22px;border:0;background:#315457;color:#fff0cd;box-shadow:4px 5px 0 rgba(72,43,33,.2);cursor:pointer;touch-action:manipulation}.wish-button:disabled{opacity:.65}.wish-control span{display:block;margin-top:9px;font-size:10px;color:#5c493d;letter-spacing:.08em}

/* handwriting-style staged copy */
.writing-line{display:block;opacity:0;transform:translateY(8px);filter:blur(2px);clip-path:inset(0 100% 0 0);transition:opacity .65s ease,transform .65s ease,filter .65s ease,clip-path 1.35s cubic-bezier(.2,.7,.2,1)}
.writing-line.written{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}

/* 06 next morning / capsule machine */
.scene-scratch { color:#29444d; background:linear-gradient(150deg,#dff2ec,#add7de 58%,#f0d39c); }
.scene-scratch:before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 17%,rgba(255,248,191,.95),transparent 24%),linear-gradient(125deg,rgba(255,255,255,.55),transparent 45%); }
.gacha-layout { position:absolute; inset:12% 8% 9%; z-index:2; display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:center; }
.gacha-heading h2 { font-size:clamp(45px,6vw,78px);margin:18px 0 25px; }
.gacha-heading h2 em { color:#b64f40; }
.gacha-heading>p:last-child { font-size:14px;line-height:2;color:#4d686b; }
.prize-board{width:min(390px,100%);margin-top:20px;border:2px solid #47686d;background:rgba(246,251,238,.62);box-shadow:6px 7px 0 rgba(49,76,79,.12)}
.prize-board-head{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;color:#f8efd5;background:#47686d}.prize-board-head b{font-size:13px;letter-spacing:.18em}.prize-board-head small{font:8px Arial;letter-spacing:.11em;opacity:.75}
.prize-board ul{display:grid;grid-template-columns:1fr;margin:0;padding:8px;list-style:none;gap:5px}
.prize-board li{position:relative;display:flex;align-items:center;gap:8px;min-height:34px;padding:5px 8px;border:1px dashed rgba(71,104,109,.42);font-size:11px;background:rgba(255,255,255,.3)}
.prize-board li i{width:24px;font-style:normal;font-size:17px;text-align:center}.prize-board li.mystery{color:#a24239;background:linear-gradient(105deg,rgba(255,236,171,.7),rgba(255,255,255,.35))}
.prize-board li.mystery i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:white;background:#b64f40;font:bold 13px Arial}.prize-board li em{margin-left:auto;font-size:9px;font-style:normal;letter-spacing:.1em}
.gacha-machine { position:relative;width:410px;height:560px;margin:auto;transform:scale(.82);transform-origin:center; }
.gacha-dome { position:absolute;z-index:2;left:55px;top:0;width:300px;height:285px;border:10px solid #35575d;border-radius:50% 50% 43% 43%;background:rgba(239,250,245,.65);overflow:hidden;box-shadow:inset 0 0 30px rgba(255,255,255,.8); }
.capsule { position:absolute;width:76px;height:54px;border:4px solid #334e52;border-radius:28px;background:linear-gradient(#efad45 0 50%,#fff1c7 50%);transform:rotate(20deg);transition:1s; }
.capsule:after { content:"";position:absolute;left:0;right:0;top:47%;height:4px;background:#334e52}.c1{left:30px;bottom:24px}.c2{left:105px;bottom:12px;transform:rotate(-13deg);background:linear-gradient(#7ab4c9 0 50%,#fff1c7 50%)}.c3{right:26px;bottom:30px;transform:rotate(37deg);background:linear-gradient(#c96957 0 50%,#fff1c7 50%)}.c4{left:65px;bottom:82px;transform:rotate(-35deg)}.c5{right:70px;bottom:94px;transform:rotate(8deg);background:linear-gradient(#80ad88 0 50%,#fff1c7 50%)}.c6{left:120px;bottom:140px;transform:rotate(50deg);background:linear-gradient(#c96957 0 50%,#fff1c7 50%)}
.gacha-body { position:absolute;left:35px;top:246px;width:340px;height:270px;border:9px solid #354f53;border-radius:28px 28px 45px 45px;background:#cf6552;box-shadow:12px 14px 0 rgba(49,76,79,.18); }
.gacha-label { position:absolute;left:35px;top:38px;width:105px;height:105px;border-radius:50%;display:grid;place-items:center;background:#fff0c6;color:#b64f40;font:bold 49px/1 Arial;text-align:center;border:5px solid #354f53}.gacha-label small{font-size:8px;letter-spacing:.12em}
.gacha-knob { position:absolute;right:40px;top:48px;width:90px;height:90px;border:8px solid #354f53;border-radius:50%;background:#f4c55a;cursor:pointer;box-shadow:0 7px 0 #913f37;touch-action:manipulation; }
.gacha-knob i { position:absolute;left:34px;top:-18px;width:13px;height:120px;border-radius:8px;background:#354f53; }
.gacha-slot { position:absolute;left:100px;bottom:25px;width:140px;height:54px;border:8px solid #354f53;border-radius:12px 12px 35px 35px;background:#263c40; }
.gacha-capsule { position:absolute;z-index:4;left:165px;bottom:-8px;width:82px;height:60px;border:4px solid #334e52;border-radius:31px;background:linear-gradient(#78b6cd 0 50%,#fff0c6 50%);opacity:0;transform:translateY(-85px) rotate(-25deg);cursor:pointer;transition:.6s cubic-bezier(.2,.9,.25,1.35);touch-action:manipulation; }
.gacha-capsule i{position:absolute;left:0;right:0;top:47%;height:4px;background:#334e52}.gacha-capsule span{position:absolute;top:66px;left:-20px;width:120px;color:#354f53;font-size:12px;font-weight:bold}
.gacha-machine.turning .gacha-knob { animation:knobTurn 1.1s ease-in-out }.gacha-machine.turning .capsule{animation:capsuleShake .24s infinite alternate}
.gacha-machine.dispensed .gacha-capsule { opacity:1;transform:translateY(0) rotate(8deg) }.gacha-capsule.open{transform:scale(1.35);opacity:0}
@keyframes knobTurn{to{transform:rotate(360deg)}}@keyframes capsuleShake{to{transform:translate(5px,-5px) rotate(-10deg)}}
.prize-modal { position:absolute;z-index:7;inset:0;display:grid;place-items:center;background:rgba(232,244,235,.78);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.4s; }
.prize-modal.show{opacity:1;visibility:visible}.prize-ticket{width:min(520px,88vw);padding:38px;color:#374348;text-align:center;background:#fff0c8;border:7px solid #b64f40;box-shadow:13px 15px 0 rgba(49,76,79,.18);transform:translateY(20px);transition:.4s}.prize-modal.show .prize-ticket{transform:none}
.prize-ticket small { letter-spacing:.3em;color:#aa493c; }
.prize-ticket h3 { font-size:27px;margin:12px 0 19px;color:#a34138; }
.prize-ticket p { font-size:12px;line-height:1.8;margin:0 0 12px; }
.prize-icon{width:88px;height:88px;margin:18px auto 8px;display:grid;place-items:center;border:2px dashed #bd765c;border-radius:50%;background:rgba(255,255,255,.35);font-size:46px}
.prize-note{display:block;color:#6c7b78;font-size:10px;letter-spacing:.08em}
.prize-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}
.prize-actions button{padding:11px 18px;border:0;background:#3b6462;color:white;cursor:pointer;touch-action:manipulation}
.prize-actions .reroll-btn{color:#704b3f;background:transparent;border:1px solid #9e7652}
.final-message { position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#31525a;background:rgba(230,244,237,.96);opacity:0;visibility:hidden;transition:opacity 1s,visibility 0s 1s; }
.final-message.show { opacity:1;visibility:visible;transition-delay:0s; }
.final-message span { font-size:18px;letter-spacing:.35em; }
.final-message strong { font:clamp(38px,6vw,84px)/1.5 "ZCOOL XiaoWei";color:#b64f40;margin-top:20px; }
.final-message em { font-style:normal;font-size:clamp(24px,3vw,45px);letter-spacing:.18em; }
.final-message small { margin-top:35px;font:12px Arial;letter-spacing:.35em; }
.final-prize-showcase{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;min-height:145px}.final-gift-icon{font-size:82px;line-height:1;filter:drop-shadow(0 8px 7px rgba(48,76,78,.16));animation:giftFloat 2.3s ease-in-out infinite}.final-gift-name{margin-top:13px;color:#a8433a;font-size:16px;font-weight:700;letter-spacing:.12em}.mystery-box{position:relative;width:105px;height:90px;display:none}.box-body{position:absolute;left:12px;bottom:0;width:82px;height:62px;background:#cf6653;border:5px solid #3d5b5e;border-radius:7px}.box-lid{position:absolute;z-index:2;left:5px;top:14px;width:96px;height:26px;background:#f0bb52;border:5px solid #3d5b5e;border-radius:7px;transform-origin:10% 100%}.mystery-box b{position:absolute;z-index:3;left:44px;top:45px;color:#fff0bd;font:bold 31px Arial}.mystery-result{display:none;margin-top:13px;max-width:330px;color:#a8433a;font-size:14px;font-weight:700}.final-prize-showcase.mystery .final-gift-icon,.final-prize-showcase.mystery .final-gift-name{display:none}.final-prize-showcase.mystery .mystery-box{display:block}.final-prize-showcase.mystery.opened .box-lid{animation:boxOpen .8s cubic-bezier(.2,.9,.25,1.3) forwards}.final-prize-showcase.mystery.opened .mystery-result{display:block;animation:resultPop .55s .65s both}
@keyframes giftFloat{50%{transform:translateY(-8px) rotate(3deg)}}@keyframes boxOpen{to{transform:translate(-18px,-40px) rotate(-35deg)}}@keyframes resultPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.restart-btn { position:absolute;z-index:9;right:4%;bottom:max(4%,env(safe-area-inset-bottom));border:1px solid rgba(49,82,90,.4);background:transparent;color:#31525a;padding:10px 15px;cursor:pointer;opacity:0;visibility:hidden;transition:.3s; }
.final-message.show~.restart-btn { opacity:.7;visibility:visible; }
.restart-btn:hover { opacity:1; }
.scene-nav { position:fixed;z-index:90;right:clamp(16px,2.5vw,40px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px; }
.scene-nav button { width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(245,235,211,.35);cursor:pointer;transition:.3s; }
.scene-nav button.active { background:var(--amber);box-shadow:0 0 0 5px rgba(239,169,67,.15); }

/* Live2D replaces the old playing label */
.live2d-widget { position:fixed;z-index:91;right:max(8px,env(safe-area-inset-right));top:max(48px,env(safe-area-inset-top));width:155px;height:155px;pointer-events:none; }
#live2dCanvas { width:100%;height:100%;pointer-events:auto;touch-action:manipulation;cursor:pointer;opacity:0;transition:opacity .5s; }
.live2d-widget.ready #live2dCanvas{opacity:1}.live2d-tip{position:absolute;right:8px;top:45px;font-size:9px;color:#51656a;background:rgba(255,247,221,.8);padding:5px 7px;border-radius:8px}
.top-actions{padding-right:128px}.sound-btn{width:34px;height:34px;justify-content:center;border-radius:50%;background:rgba(255,255,255,.2)}

@media (max-width: 850px) {
  .topbar { height:calc(55px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0; }
  .top-actions{padding-right:75px;gap:9px}.sound-btn{width:30px;height:30px}
  .scene-nav { top:auto;bottom:calc(15px + env(safe-area-inset-bottom));right:50%;transform:translateX(50%);flex-direction:row; }
  .station-copy { top:calc(10% + env(safe-area-inset-top));left:20px; }
  .station-copy h1 { font-size:min(15vw,63px); }
  .station-copy .subtitle { font-size:10px;letter-spacing:.18em;white-space:nowrap; }
  .ticket { left:4%;right:auto;bottom:calc(7% + env(safe-area-inset-bottom));width:92%;min-height:205px; }
  .ticket .ticket-route { grid-template-columns:1fr 58px 1fr;padding:13px 12px 8px; }.ticket-route span strong{font-size:17px}.ticket-info{margin:0 10px}.ticket-bottom{padding:9px 13px}.ticket-bottom span{display:none}
  .station-canopy { width:70%;height:24%;opacity:.85}.train{width:70%;height:115px;bottom:30%}.platform-board{right:5%;top:25%;transform:scale(.7);transform-origin:top right}.departure-board{display:none}
  .left-card,.table-copy,.river-copy { left:24px;top:11%;width:calc(100% - 48px); }
  .story-card h2,.river-copy h2 { font-size:45px;margin:10px 0 18px; }
  .copy { font-size:12.5px;line-height:1.75; }
  .quote { margin:12px 0;padding:8px 12px;font-size:12px; }
  .shop-one{right:-20%;transform:scale(.7);transform-origin:bottom right}.shop-two{display:none}.awning{display:none}.clothes{right:-15%;opacity:.45}.soup-pot{right:-40px;bottom:8%;transform:scale(.65)}
  .table-copy { z-index:3; }.still-life{width:100%;height:46%;right:0;opacity:.48}.table-copy .copy{max-width:90%}.wish-lines{font-size:12px;margin:12px 0}.receipt{left:10%}.tea{right:10%}.piggy{display:none}
  .river-copy blockquote { font-size:13px;line-height:1.5;margin:8px 0 12px; }.river-copy .copy p{margin-bottom:6px}.river-sun{right:8%;top:10%;width:62px;height:62px}
  .letter { left:5%;top:5%;width:90%;height:82%;padding:24px 23px; }
  .letter h2{font-size:32px;margin:10px 0}.letter-body{columns:1;padding-bottom:135px;font-size:10.7px;line-height:1.45}.letter-body p{margin-bottom:6px}.cake{right:50%;bottom:2px;transform:translateX(50%) scale(.36);transform-origin:bottom center;opacity:1}.wish-control{right:5%;bottom:calc(2% + env(safe-area-inset-bottom));width:90%}
  .gacha-layout { inset:calc(8% + env(safe-area-inset-top)) 4% calc(8% + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:0;justify-content:center; }
  .gacha-heading { width:100%; }.gacha-heading h2{font-size:37px;margin:6px 0}.gacha-heading>p:last-child{font-size:11px;line-height:1.5}
  .prize-board{margin-top:9px}.prize-board-head{padding:6px 9px}.prize-board ul{padding:5px}.prize-board li{min-height:27px;padding:3px 6px;font-size:9px}.prize-board li i{font-size:13px}
  .gacha-machine{width:410px;height:560px;transform:scale(.55);margin:-105px auto -115px}
  .prize-ticket{padding:28px 18px}.prize-ticket h3{font-size:21px}
  .live2d-widget{width:105px;height:105px;top:calc(38px + env(safe-area-inset-top));right:max(2px,env(safe-area-inset-right))}
}

@media (max-width: 390px), (max-height: 700px) and (max-width: 850px) {
  .station-copy h1{font-size:51px}.station-copy{top:10%}.ticket{bottom:6%;transform:scale(.92);transform-origin:bottom left;width:100%}
  .story-card h2,.river-copy h2{font-size:39px}.copy{font-size:11.5px}.next-btn{padding:10px 16px;font-size:12px}
  .letter{top:4%;height:82%;padding:19px}.letter h2{font-size:27px}.letter-body{padding-bottom:110px;font-size:9.7px}.cake{bottom:0;transform:translateX(50%) scale(.3)}
  .gacha-heading h2{font-size:31px}.gacha-machine{transform:scale(.49);margin:-125px auto -135px}
  .prize-board{transform:scale(.9);transform-origin:top left;width:111%;margin-bottom:-22px}
}

@media (max-height: 700px) and (min-width: 851px) {
  .left-card,.table-copy,.river-copy { top:10%; }
  .story-card h2,.river-copy h2 { font-size:55px;margin:10px 0 15px; }
  .copy { font-size:12px;line-height:1.7; }.copy p{margin-bottom:7px}.quote{margin:12px 0;padding:8px 12px}.river-copy blockquote{font-size:15px;margin:10px 0}
  .letter{top:8%;height:85%}.letter h2{font-size:43px}.letter-body{font-size:11.5px;line-height:1.65}
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important; }
}