:root {
  --night: #0b1230;
  --night-deep: #070b22;
  --ink: #201c39;
  --cream: #fff8ec;
  --cream-muted: rgba(255, 248, 236, 0.68);
  --moon: #f7d98b;
  --petal: #ff9fbd;
  --violet: #8068d6;
  --violet-deep: #4f3d9b;
  --red: #e94b63;
  --red-deep: #a9254e;
  --line: rgba(255, 248, 236, 0.18);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --display: 'Noto Serif SC', 'STSong', 'Songti SC', serif;
  --body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--night-deep);
  color: var(--cream);
  font-family: var(--body);
}

body { overflow: hidden; }
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--moon); outline-offset: 4px; }

.sky-noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.star-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.star-field span {
  position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
  left: var(--left);
  top: var(--top);
  border-radius: 50%;
  background: var(--color);
  box-shadow: 0 0 12px var(--color);
  opacity: var(--opacity);
  animation: twinkle var(--duration) ease-in-out infinite var(--delay);
}

@keyframes twinkle {
  0%, 100% { transform: scale(0.72); opacity: calc(var(--opacity) * 0.6); }
  50% { transform: scale(1.35); opacity: var(--opacity); }
}

.splash,
.app-shell {
  position: fixed;
  inset: 0;
}

.splash {
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 26%, rgba(128, 104, 214, 0.34), transparent 31%),
    radial-gradient(circle at 20% 90%, rgba(255, 159, 189, 0.1), transparent 34%),
    var(--night);
  transition: opacity 700ms ease, visibility 700ms ease;
}

.splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-card { position: relative; z-index: 2; width: min(100%, 430px); text-align: center; }
.splash-card h1 { margin: 20px 0 18px; font: 500 clamp(2.8rem, 11vw, 5rem)/1.06 var(--display); letter-spacing: -0.08em; }
.splash-card h1 em,
h2 em { color: var(--moon); font-style: normal; }
.splash-date { margin: 0; color: var(--cream-muted); font: 11px/1 body; letter-spacing: 0.18em; text-transform: uppercase; }
.splash-note { margin: 0 auto 30px; color: var(--cream-muted); font-size: 13px; letter-spacing: 0.06em; }

.splash-orbit {
  position: absolute;
  width: min(82vw, 360px);
  height: min(82vw, 360px);
  border: 1px solid rgba(247, 217, 139, 0.14);
  border-radius: 50%;
  animation: orbit-rotate 18s linear infinite;
}
.splash-orbit::after { content: ''; position: absolute; inset: 26px; border: 1px dashed rgba(255, 159, 189, 0.17); border-radius: 50%; }
.orbit-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 18px currentColor; }
.orbit-dot-a { top: 2%; left: 50%; color: var(--moon); background: currentColor; }
.orbit-dot-b { right: 7%; bottom: 20%; color: var(--petal); background: currentColor; }
.orbit-dot-c { left: 8%; bottom: 16%; color: #b9d7ff; background: currentColor; }
@keyframes orbit-rotate { to { transform: rotate(360deg); } }

.app-shell { z-index: 10; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 600ms ease; }
.app-shell.is-ready { opacity: 1; visibility: visible; }
.topbar { position: absolute; z-index: 4; top: max(22px, env(safe-area-inset-top)); left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; }
.brand-mark { color: var(--cream-muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.brand-star { color: var(--moon); margin-right: 5px; }
.sound-toggle { display: inline-flex; gap: 7px; align-items: center; border: 0; padding: 5px 0; color: var(--cream-muted); background: transparent; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.sound-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--moon); font-size: 14px; }
.sound-toggle.is-muted .sound-icon { color: var(--cream-muted); }

.progress-rail { position: absolute; z-index: 4; top: max(72px, calc(env(safe-area-inset-top) + 48px)); left: 24px; right: 24px; display: flex; gap: 12px; align-items: center; }
.progress-label { min-width: 42px; color: var(--cream-muted); font-size: 10px; letter-spacing: 0.1em; }
.progress-line { display: block; width: 100%; height: 1px; background: var(--line); }
.progress-line span { display: block; width: 20%; height: 100%; background: var(--moon); transition: width 500ms ease; }

.story { position: relative; width: 100%; height: 100%; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 116px 24px 38px; opacity: 0; visibility: hidden; transform: translateY(26px) scale(0.98); transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.8,.2,1), visibility 650ms; overflow: hidden; }
.scene.is-active { opacity: 1; visibility: visible; transform: none; }
.scene-kicker,
.section-kicker { margin: 0; color: var(--moon); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.hero-copy { position: relative; z-index: 2; margin-top: -18vh; }
.hero-copy h2,
.scene-heading h2,
.summary-copy h2,
.lottery-header h2,
.final-copy h2 { margin: 18px 0 16px; font: 500 clamp(2.5rem, 10vw, 5.1rem)/1.08 var(--display); letter-spacing: -0.09em; }
.hero-copy h2 span { color: var(--petal); }
.hero-description { color: var(--cream-muted); font-size: 14px; line-height: 1.8; }

.flower-meadow { position: absolute; z-index: 1; inset: 36% -4% 0; min-height: 350px; overflow: hidden; background: linear-gradient(180deg, transparent 0%, rgba(33, 55, 91, 0.28) 32%, #142a38 67%, #16352f 100%); }
.flower-meadow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(247, 217, 139, 0.3), transparent 31%); }
.moon { position: absolute; top: 9%; left: 50%; width: clamp(70px, 19vw, 124px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--moon); box-shadow: 0 0 80px rgba(247, 217, 139, 0.35), 0 0 150px rgba(247, 217, 139, 0.12); }
.moon::before { content: ''; position: absolute; inset: 14% 18% 18% 14%; border-radius: 50%; background: rgba(255, 248, 236, 0.13); box-shadow: 24px 12px 0 rgba(196, 158, 80, 0.08), -20px 31px 0 rgba(196, 158, 80, 0.08); }
.mountain { position: absolute; bottom: 34%; width: 110%; left: -5%; clip-path: polygon(0 100%, 14% 59%, 27% 83%, 42% 31%, 54% 66%, 68% 43%, 78% 76%, 89% 51%, 100% 100%); }
.mountain-back { height: 45%; background: #243858; opacity: 0.7; }
.mountain-front { height: 36%; background: #183748; opacity: 0.95; }
.grass-line { position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(160deg, transparent 0 38%, rgba(76, 140, 112, 0.6) 39% 40%, transparent 41%), linear-gradient(178deg, transparent 0 56%, rgba(76, 140, 112, 0.44) 57% 58%, transparent 59%), #15362f; }
.flower-cluster { position: absolute; bottom: 21%; display: flex; align-items: flex-end; gap: 3px; transform-origin: bottom center; animation: meadow-sway 5s ease-in-out infinite; }
.cluster-left { left: 8%; transform: scale(1.16) rotate(-4deg); }
.cluster-center { left: 43%; bottom: 14%; transform: scale(1.35); animation-delay: -1s; }
.cluster-right { right: 7%; transform: scale(1.07) rotate(4deg); animation-delay: -2.1s; }
.flower-cluster::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 2px; height: 88px; background: linear-gradient(transparent, #589d72); transform: translateX(-50%); }
.flower-cluster i { position: relative; display: block; width: 17px; height: 17px; margin-bottom: 52px; border-radius: 50%; background: var(--petal); box-shadow: 9px 8px 0 #f59db4, -7px 10px 0 #ffc4cf, 1px 1px 0 4px rgba(255, 248, 236, 0.16), 0 0 14px rgba(255, 159, 189, 0.6); transform: rotate(var(--flower-rotate, 0deg)); }
.flower-cluster i:nth-child(2) { margin-bottom: 78px; background: var(--moon); transform: scale(.74); }
.flower-cluster i:nth-child(3) { margin-bottom: 35px; background: #c1b4ff; transform: scale(.88); }
.flower-cluster i:nth-child(4) { margin-bottom: 66px; background: #ffc6d8; transform: scale(.68); }
.flower-cluster i:nth-child(5) { margin-bottom: 24px; background: var(--moon); transform: scale(.58); }
.flower-cluster i:nth-child(6) { margin-bottom: 51px; background: #b8d5ff; transform: scale(.62); }
@keyframes meadow-sway { 0%, 100% { rotate: -1deg; } 50% { rotate: 1.5deg; } }

.hero-bottom { position: absolute; z-index: 3; bottom: max(28px, env(safe-area-inset-bottom)); left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; }
.scroll-hint { display: inline-flex; align-items: center; gap: 8px; color: var(--cream-muted); font-size: 11px; letter-spacing: 0.08em; }
.scroll-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--petal); box-shadow: 0 0 12px var(--petal); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.8); opacity: .5; } }
.circle-button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 248, 236, 0.35); border-radius: 50%; color: var(--night); background: var(--moon); font-size: 21px; cursor: pointer; transition: transform 220ms ease, box-shadow 220ms ease; }
.circle-button:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(247, 217, 139, 0.25); }

.scene-moments { background: radial-gradient(circle at 92% 20%, rgba(128, 104, 214, .26), transparent 30%); }
.scene-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.scene-heading h2 { margin-bottom: 0; font-size: clamp(2.2rem, 8vw, 4rem); }
.demo-note { max-width: 120px; margin: 0 0 5px; color: var(--cream-muted); font-size: 10px; line-height: 1.5; text-align: right; }
.moment-window { width: 100%; overflow: hidden; }
.moment-track { display: flex; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.moment-card { flex: 0 0 100%; padding: 0 2px; }
.moment-art { position: relative; height: min(53vh, 430px); min-height: 300px; overflow: hidden; border-radius: 18px; box-shadow: var(--shadow); background: #526da3; }
.moment-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255, 255, 255, .26), transparent 28%), linear-gradient(180deg, transparent 55%, rgba(14, 23, 50, .54)); }
.moment-art::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 11%; height: 35%; border-radius: 50% 50% 0 0; background: rgba(255, 248, 236, .14); filter: blur(12px); }
.moment-art.art-dawn { background: linear-gradient(180deg, #f6c19f 0%, #f1979d 43%, #604f9c 72%, #1b2753 100%); }
.moment-art.art-sea { background: linear-gradient(180deg, #b7d6e4 0%, #7bb6cc 38%, #3e7493 62%, #182d59 100%); }
.moment-art.art-green { background: linear-gradient(180deg, #c8d9b1 0%, #7aaf91 37%, #3f796b 67%, #173a43 100%); }
.moment-art.art-night { background: radial-gradient(circle at 65% 25%, #f7d98b 0 3%, transparent 4%), linear-gradient(155deg, #553875 0%, #202856 53%, #101b3a 100%); }
.moment-art.art-rose { background: linear-gradient(180deg, #f8bfd0 0%, #d589aa 43%, #72538d 71%, #1a294e 100%); }
.art-sun { position: absolute; top: 16%; right: 14%; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 242, 187, .88); box-shadow: 0 0 60px rgba(255, 241, 190, .58); }
.art-horizon { position: absolute; right: -7%; bottom: 21%; left: -7%; height: 34%; clip-path: polygon(0 88%, 16% 55%, 28% 69%, 47% 25%, 60% 67%, 78% 43%, 100% 78%, 100% 100%, 0 100%); background: rgba(24, 43, 74, .68); }
.art-caption { position: absolute; z-index: 2; right: 19px; bottom: 19px; left: 19px; color: var(--cream); }
.art-caption p { margin: 0 0 8px; color: rgba(255, 248, 236, .72); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.art-caption strong { display: block; max-width: 230px; font: 500 clamp(1.5rem, 6vw, 2.4rem)/1.16 var(--display); letter-spacing: -.08em; }
.moment-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--cream-muted); font-size: 11px; }
.moment-meta strong { color: var(--moon); font-weight: 500; }
.moment-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.quiet-button { border: 0; padding: 8px 0; color: var(--cream-muted); background: transparent; font-size: 11px; cursor: pointer; }
.quiet-button:disabled { opacity: .28; cursor: default; }
.moment-counter { color: var(--moon); font: 600 18px/1 var(--display); letter-spacing: .06em; }
.moment-counter .counter-divider { margin: 0 6px; color: var(--cream-muted); font: 11px var(--body); }

.scene-summary { align-items: center; text-align: center; background: radial-gradient(circle at 50% 34%, rgba(128, 104, 214, .34), transparent 32%); }
.summary-copy { position: relative; z-index: 2; max-width: 470px; }
.summary-copy h2 { font-size: clamp(2.4rem, 9vw, 4.6rem); }
.summary-body { margin: 0 auto; max-width: 300px; color: var(--cream-muted); font-size: 14px; line-height: 1.9; }
.summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 390px); margin: 38px auto 26px; }
.summary-stat { padding: 16px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-stat strong { display: block; color: var(--moon); font: 500 28px/1 var(--display); }
.summary-stat span { display: block; margin-top: 7px; color: var(--cream-muted); font-size: 10px; }
.summary-constellation { position: absolute; inset: 0; pointer-events: none; }
.constellation-star { position: absolute; color: var(--moon); text-shadow: 0 0 22px currentColor; animation: constellation-pulse 2.8s ease-in-out infinite; }
.star-one { top: 18%; left: 18%; font-size: 22px; }
.star-two { top: 32%; right: 16%; color: var(--petal); font-size: 18px; animation-delay: -1s; }
.star-three { bottom: 20%; left: 21%; font-size: 15px; animation-delay: -.5s; }
.constellation-line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(247, 217, 139, .46), transparent); transform-origin: left; opacity: .65; }
.line-one { top: 22%; left: 23%; width: 28%; rotate: 29deg; }
.line-two { top: 37%; right: 20%; width: 22%; rotate: 123deg; }
.line-three { bottom: 22%; left: 26%; width: 26%; rotate: -38deg; }
@keyframes constellation-pulse { 50% { transform: scale(1.28); opacity: .58; } }

.primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-width: 210px; border: 0; border-radius: 999px; padding: 15px 16px 15px 22px; color: var(--night); background: var(--moon); box-shadow: 0 14px 34px rgba(247, 217, 139, .16); font-size: 12px; letter-spacing: .04em; cursor: pointer; transition: transform 220ms ease, box-shadow 220ms ease; }
.primary-button:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(247, 217, 139, .3); }
.button-arrow { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--cream); background: var(--night); font-size: 16px; }

.scene-lottery { background: radial-gradient(circle at 50% 15%, rgba(233, 75, 99, .17), transparent 31%); }
.lottery-header { text-align: center; }
.lottery-header h2 { margin: 15px 0 10px; font-size: clamp(2.25rem, 8.5vw, 4.2rem); }
.lottery-header > p:last-child { margin: 0; color: var(--cream-muted); font-size: 12px; }
.lottery-stations { display: flex; justify-content: center; gap: 8px; margin: 22px auto 16px; }
.station-pill { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 9px; color: var(--cream-muted); font-size: 9px; transition: color 300ms ease, background 300ms ease, border-color 300ms ease; }
.station-pill.is-current { color: var(--night); background: var(--moon); border-color: var(--moon); }
.station-pill.is-done { color: var(--moon); border-color: rgba(247, 217, 139, .45); }
.station-pill b { font: 600 11px var(--display); }
.game-stage { width: min(100%, 420px); margin: 0 auto; }
.game-card { position: relative; overflow: hidden; border: 1px solid rgba(255, 248, 236, .2); border-radius: 24px; padding: 19px; background: linear-gradient(145deg, rgba(255, 248, 236, .1), rgba(255, 248, 236, .035)); box-shadow: var(--shadow); }
.game-card::before { content: ''; position: absolute; top: -90px; right: -70px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 159, 189, .15); filter: blur(12px); }
.game-label { position: relative; z-index: 1; display: flex; justify-content: space-between; color: var(--cream-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.game-title { position: relative; z-index: 1; margin: 10px 0 7px; font: 500 25px/1.1 var(--display); letter-spacing: -.07em; }
.game-description { position: relative; z-index: 1; margin: 0 0 16px; color: var(--cream-muted); font-size: 11px; line-height: 1.6; }
.game-action { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; margin-top: 16px; }
.game-action .primary-button { min-width: 185px; }
.result-message { position: relative; z-index: 1; margin: 14px 0 0; color: var(--moon); font: 500 18px var(--display); text-align: center; letter-spacing: -.04em; }
.result-message small { display: block; margin-top: 6px; color: var(--cream-muted); font: 11px var(--body); letter-spacing: 0; }

.wheel-wrap { position: relative; display: grid; place-items: center; height: 250px; }
.wheel-pointer { position: absolute; z-index: 3; top: 2px; width: 0; height: 0; border-right: 9px solid transparent; border-left: 9px solid transparent; border-top: 25px solid var(--moon); filter: drop-shadow(0 5px 5px rgba(0,0,0,.25)); }
.wheel-dial { position: relative; width: 218px; aspect-ratio: 1; border: 8px solid rgba(255, 248, 236, .24); border-radius: 50%; background: conic-gradient(#e94b63 0deg 45deg, #c43f68 45deg 90deg, #e94b63 90deg 135deg, #9b3d85 135deg 180deg, #e94b63 180deg 225deg, #c43f68 225deg 270deg, #e94b63 270deg 315deg, #8e477e 315deg 360deg); box-shadow: 0 0 0 5px rgba(233, 75, 99, .12), 0 14px 35px rgba(0,0,0,.25); transition: transform 1800ms cubic-bezier(.12,.78,.18,1); }
.wheel-dial::after { content: ''; position: absolute; inset: 31%; border: 3px solid rgba(255, 248, 236, .38); border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 8px rgba(247, 217, 139, .08); }
.wheel-label { position: absolute; z-index: 2; top: 50%; left: 50%; color: var(--cream); font: 600 10px var(--body); transform: translate(-50%, -50%) rotate(var(--label-angle)) translateY(-82px) rotate(calc(var(--label-angle) * -1)); white-space: nowrap; }
.wheel-label.is-thanks { color: var(--moon); }
.wheel-center { position: absolute; z-index: 4; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid rgba(247, 217, 139, .4); border-radius: 50%; color: var(--night); background: var(--moon); font: 600 11px var(--display); }
.red-packet { position: absolute; z-index: 1; width: 30px; height: 38px; border-radius: 6px; color: var(--moon); background: var(--red); box-shadow: 0 7px 12px rgba(0,0,0,.2); font-size: 15px; line-height: 38px; text-align: center; transform: rotate(var(--packet-rotate)); }
.packet-a { top: 22px; left: 14px; }
.packet-b { top: 46px; right: 4px; }
.packet-c { bottom: 25px; left: 24px; }

.slot-machine { position: relative; display: flex; justify-content: center; gap: 8px; padding: 19px 14px; border: 6px solid var(--red); border-radius: 17px; background: linear-gradient(145deg, #fa7180, #ad2457); box-shadow: inset 0 0 0 3px rgba(255, 248, 236, .2), 0 14px 28px rgba(0,0,0,.25); }
.slot-reel { display: grid; place-items: center; width: 78px; height: 94px; overflow: hidden; border: 4px solid #ffe5ab; border-radius: 10px; background: #fff7e2; box-shadow: inset 0 5px 13px rgba(90, 36, 47, .19); }
.slot-symbol { color: var(--red-deep); font-size: 44px; line-height: 1; transform: translateY(0); }
.slot-reel.is-spinning .slot-symbol { animation: slot-spin 180ms linear infinite; }
@keyframes slot-spin { 0% { transform: translateY(-17px); } 50% { transform: translateY(17px); } 100% { transform: translateY(-17px); } }
.slot-mark { position: absolute; top: -14px; left: 50%; padding: 4px 12px; border-radius: 99px; color: var(--red-deep); background: var(--moon); font-size: 10px; font-weight: 700; letter-spacing: .08em; transform: translateX(-50%); }
.slot-caption { margin: 13px 0 0; color: var(--cream-muted); font-size: 11px; text-align: center; }

.gacha-machine { position: relative; height: 230px; }
.gacha-top { position: absolute; z-index: 2; top: 4px; left: 50%; width: 110px; height: 54px; border: 6px solid var(--moon); border-bottom: 0; border-radius: 60px 60px 0 0; background: #e94b63; transform: translateX(-50%); }
.gacha-top::after { content: 'DREAM'; position: absolute; top: 15px; left: 0; right: 0; color: var(--moon); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-align: center; }
.gacha-globe { position: absolute; z-index: 1; top: 31px; left: 50%; width: 190px; height: 155px; border: 6px solid var(--moon); border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 36% 30%, rgba(255,248,236,.37), transparent 10%), radial-gradient(circle at 50% 56%, rgba(128,104,214,.7), rgba(74,47,126,.88)); box-shadow: inset 0 -20px 36px rgba(0,0,0,.18), 0 14px 30px rgba(0,0,0,.22); transform: translateX(-50%); }
.capsule { position: absolute; z-index: 3; left: 50%; bottom: 29px; display: grid; place-items: center; width: 62px; height: 62px; border: 3px solid var(--cream); border-radius: 50%; color: var(--night); background: var(--moon); box-shadow: 0 8px 17px rgba(0,0,0,.25); font-size: 27px; transform: translateX(-50%) scale(.7); opacity: 0; }
.gacha-machine.is-open .capsule { animation: capsule-pop 900ms cubic-bezier(.2,.88,.22,1) forwards; }
@keyframes capsule-pop { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.6) rotate(-18deg); } 58% { opacity: 1; transform: translate(-50%, -20px) scale(1.08) rotate(10deg); } 100% { opacity: 1; transform: translate(-50%, -8px) scale(1) rotate(0); } }
.gacha-machine.is-shaking .gacha-globe { animation: gacha-shake 110ms linear 12; }
@keyframes gacha-shake { 25% { rotate: -3deg; } 75% { rotate: 3deg; } }

.scene-final { align-items: center; text-align: center; background: radial-gradient(circle at 50% 24%, rgba(247, 217, 139, .26), transparent 28%), var(--night); }
.final-copy { position: relative; z-index: 2; width: min(100%, 460px); }
.final-copy h2 { font-size: clamp(2.45rem, 9vw, 4.4rem); }
.final-ticket { position: relative; overflow: hidden; margin: 27px auto 21px; padding: 17px 18px 16px; color: var(--night); background: var(--moon); box-shadow: var(--shadow); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 80%, 2% 76%, 0 72%, 0 56%, 2% 52%, 0 48%, 0 32%, 2% 28%, 0 24%); }
.final-ticket::before { content: ''; position: absolute; inset: 12px; border: 1px dashed rgba(11, 18, 48, .4); pointer-events: none; }
.ticket-topline, .ticket-bottomline { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ticket-prize { position: relative; z-index: 1; margin: 26px 0; font: 600 clamp(2.1rem, 9vw, 4.3rem)/.9 var(--display); letter-spacing: -.1em; }
.ticket-prize span { color: var(--red-deep); }
.final-note { margin: 0 auto 28px; max-width: 290px; color: var(--cream-muted); font-size: 13px; line-height: 1.85; }
.final-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.final-confetti::before, .final-confetti::after { content: '✦  ·  ✧  ·  ✦  ·  ✧'; position: absolute; color: var(--moon); font-size: 20px; letter-spacing: 24px; white-space: nowrap; animation: confetti-float 9s linear infinite; }
.final-confetti::before { top: 20%; left: -20%; transform: rotate(15deg); }
.final-confetti::after { bottom: 18%; left: -10%; color: var(--petal); animation-delay: -4s; transform: rotate(-13deg); }
@keyframes confetti-float { from { translate: -8% 0; } to { translate: 30% 12%; } }

.toast { position: fixed; z-index: 50; left: 50%; bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px)); max-width: calc(100% - 48px); padding: 10px 14px; border: 1px solid rgba(255, 248, 236, .18); border-radius: 999px; color: var(--cream); background: rgba(11, 18, 48, .88); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity 250ms ease, transform 250ms ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 600px) {
  .scene { padding-right: max(7vw, 48px); padding-left: max(7vw, 48px); }
  .topbar, .progress-rail, .hero-bottom { left: max(7vw, 48px); right: max(7vw, 48px); }
  .flower-meadow { inset-right: 0; }
}

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