:root {
  --ink: #170606;
  --wine: #600f1e;
  --wine-bright: #9f2432;
  --red: #c9373e;
  --cream: #fff6df;
  --gold: #e9c67c;
  --gold-dark: #997240;
  --muted: #c8aa9b;
  --shadow: rgba(5, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--cream);
  background: #140504;
  font-family: "Noto Serif SC", "Songti SC", serif;
  overflow-x: hidden;
}

body.is-locked { overflow:hidden; }

.is-locked .stage { pointer-events:none; user-select:none; filter:blur(10px) brightness(.45); transform:scale(1.035); }

.lock-screen {
  position:fixed; inset:0; z-index:100; min-height:100dvh; padding:max(24px,env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom));
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(180deg,rgba(13,1,3,.43),rgba(12,1,3,.78)),url("assets/midnight-stage.png") center / cover;
  transition:opacity .72s .18s ease,visibility .72s .18s;
}
.lock-screen[aria-hidden="true"] { opacity:0; visibility:hidden; pointer-events:none; }
.lock-screen::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 42%,rgba(173,48,58,.2),transparent 42%),linear-gradient(90deg,rgba(0,0,0,.2),transparent 24% 76%,rgba(0,0,0,.2)); }
.lock-screen::after { content:""; position:absolute; inset:-20%; opacity:0; pointer-events:none; background:radial-gradient(circle,#fff3bd 0,rgba(225,155,72,.58) 13%,transparent 43%); transform:scale(.1); }
.lock-screen.is-unlocking::after { animation:unlockFlash 1.05s cubic-bezier(.2,.75,.25,1) forwards; }
.lock-screen__halo { position:absolute; width:min(88vw,430px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(232,194,116,.2); box-shadow:0 0 0 18px rgba(232,194,116,.025),0 0 0 60px rgba(232,194,116,.018),inset 0 0 60px rgba(91,8,20,.3); animation:haloBreathe 4s ease-in-out infinite; }

.lock-panel {
  position:relative; z-index:2; width:min(100%,370px); padding:25px 24px 22px; text-align:center;
  border:1px solid rgba(234,199,126,.5); border-radius:7px;
  background:linear-gradient(155deg,rgba(46,5,12,.84),rgba(15,2,5,.72));
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 4px rgba(233,198,124,.045);
  backdrop-filter:blur(16px); animation:lockEnter .9s cubic-bezier(.16,.84,.25,1) both;
  transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.25,1),filter .5s;
}
.lock-panel::before,.lock-panel::after { content:"❦"; position:absolute; top:13px; color:#d4a95d; font-size:16px; }
.lock-panel::before { left:15px; } .lock-panel::after { right:15px; transform:scaleX(-1); }
.lock-screen.is-unlocking .lock-panel { opacity:0; transform:scale(.86) translateY(-18px); filter:blur(8px); }
.lock-panel.is-error { animation:lockError .46s ease; }
.lock-panel__eyebrow { margin:0; color:#dfba70; font-size:8px; letter-spacing:3.5px; }
.lock-seal { position:relative; width:72px; height:72px; margin:15px auto 8px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#f5d795,#8a5a29); box-shadow:0 0 28px rgba(220,159,72,.3),inset 0 1px rgba(255,255,255,.6); animation:sealBreath 2.8s ease-in-out infinite; }
.lock-seal .rose-emblem { width:46px; height:46px; }
.lock-seal .rose-emblem i { width:13px; height:16px; left:15px; top:13px; }
.lock-seal .rose-emblem i::before,.lock-seal .rose-emblem i::after { width:13px; height:16px; }
.lock-seal__orbit { position:absolute; inset:-7px; border:1px solid rgba(239,204,135,.55); border-radius:50%; border-left-color:transparent; border-right-color:transparent; animation:raysSpin 8s linear infinite; }
.lock-panel h1 { margin:0; font-size:clamp(31px,9vw,42px); line-height:1.25; letter-spacing:0; text-shadow:0 5px 20px rgba(0,0,0,.45); }
.lock-panel__hint { margin:5px 0 16px; color:#c9aca1; font-size:11px; letter-spacing:1.8px; }

.code-display { position:relative; height:31px; display:grid; grid-template-columns:repeat(8,1fr); gap:9px; align-items:center; margin:0 auto 18px; max-width:270px; cursor:text; }
.code-display > span { width:12px; height:12px; justify-self:center; border-radius:50%; border:1px solid #9b7650; background:rgba(9,1,2,.48); transition:.22s cubic-bezier(.2,.75,.25,1); }
.code-display > span.is-filled { border-color:#f1ce84; background:radial-gradient(circle at 35% 30%,#f19a9e,#9d1d32 62%,#4c0713); box-shadow:0 0 11px rgba(221,76,89,.72); transform:scale(1.12); }
.access-code-input { position:absolute; inset:0; z-index:2; width:100%; border:0; opacity:.01; color:transparent; background:transparent; caret-color:transparent; cursor:text; }
.access-code-input:focus { outline:none; }
.code-display:focus-within > span:not(.is-filled) { border-color:#d0a964; box-shadow:0 0 7px rgba(215,172,96,.18); }

.number-pad { width:232px; margin:0 auto 18px; display:grid; grid-template-columns:repeat(3,56px); justify-content:space-between; gap:9px 25px; }
.number-pad button { width:56px; height:48px; padding:0; border:0; border-radius:50%; color:#f7e8ce; background:rgba(93,19,30,.38); font-size:18px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(232,192,114,.22); transition:transform .15s,background .15s,box-shadow .15s; }
.number-pad button:hover { background:rgba(133,30,43,.54); box-shadow:inset 0 0 0 1px rgba(238,204,138,.5),0 0 15px rgba(117,19,33,.25); }
.number-pad button:active { transform:scale(.88); background:rgba(197,61,73,.58); }
.number-pad__delete svg { width:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.unlock-button { width:100%; height:48px; border:1px solid #efd08c; border-radius:4px; display:flex; align-items:center; justify-content:center; gap:10px; color:#50101b; background:linear-gradient(110deg,#a97437,#f2d496 26%,#ba8847 50%,#f4dc9d 74%,#9d6c35); font-size:12px; letter-spacing:2px; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.3); transition:opacity .25s,filter .25s,transform .15s; }
.unlock-button:active { transform:scale(.98); }
.unlock-button:disabled { opacity:.38; filter:saturate(.35); cursor:not-allowed; }
.unlock-button i { font-size:17px; font-style:normal; }
.lock-status { min-height:17px; margin:7px 0 0; color:#9e837b; font-size:9px; letter-spacing:.8px; }
.lock-panel.is-error .lock-status { color:#ff9da6; }

button { font: inherit; }

.stage {
  min-height: 100dvh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 2, 2, .08), rgba(8, 2, 2, .58)),
    url("assets/midnight-stage.png") center calc(50% + var(--parallax-y, 0px)) / cover fixed;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  opacity: .14;
  mix-blend-mode: soft-light;
}

.ambient-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ambient-stars::before, .ambient-stars::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%; background: var(--gold);
  box-shadow: 12vw 18vh #efcf88, 87vw 13vh #efcf88, 76vw 34vh #fff2c9, 9vw 46vh #ba8b4a, 91vw 62vh #fff2c9, 18vw 76vh #ba8b4a, 82vw 86vh #efcf88;
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
.ambient-stars::after { left: 30vw; top: 8vh; opacity: .5; transform: scale(.65); animation-delay: -1.5s; }

.petal-rain { position:fixed; inset:-12vh 0 0; z-index:1; overflow:hidden; pointer-events:none; transform:translateX(var(--parallax-x, 0px)); transition:transform .35s ease-out; }
.falling-petal { position:absolute; top:-9vh; left:var(--left); width:var(--size); height:calc(var(--size) * 1.45); border-radius:80% 12% 76% 22%; background:linear-gradient(145deg,#b72c43,#4c0715 78%); box-shadow:inset 2px 1px 3px rgba(255,172,166,.24),0 4px 10px rgba(13,0,2,.28); opacity:var(--opacity); transform-origin:50% 100%; animation:petalFall var(--fall) linear infinite; animation-delay:var(--delay); }
.falling-petal::after { content:""; position:absolute; inset:2px 45% 3px 45%; border-radius:50%; background:rgba(255,190,174,.18); transform:rotate(28deg); }

.topbar {
  width: min(100%, 560px);
  margin: 0 auto;
  height: 58px;
  padding: max(14px, env(safe-area-inset-top)) 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.love-mark { display: flex; align-items: center; gap: 9px; color: var(--gold); font-size: 8px; letter-spacing: 2.5px; font-weight: 700; }
.love-mark__line { width: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.love-mark__line:last-child { transform: scaleX(-1); }

.sound-toggle {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(233,198,124,.45);
  background: rgba(25,4,6,.38); color: var(--gold); display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(8px);
}
.sound-toggle svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-sound-off { display: none; }
.sound-toggle.is-muted .icon-sound-on { display: none; }
.sound-toggle.is-muted .icon-sound-off { display: block; }

.experience { width: min(100%, 560px); margin: 0 auto; padding: 0 18px 158px; position:relative; z-index:2; }
.intro { text-align: center; padding-top: clamp(4px, 2vh, 22px); position: relative; z-index: 2; animation:introReveal .9s cubic-bezier(.16,.84,.25,1) both; }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-size: 9px; letter-spacing: 4px; font-weight: 700; }
.intro h1 { margin: 0; font-size: clamp(34px, 10vw, 53px); line-height: 1.16; letter-spacing: 0; font-weight: 900; text-shadow: 0 8px 28px rgba(0,0,0,.35); }
.intro h1 em { color: #f1c96e; font-family: "Ma Shan Zheng", cursive; font-size: 1.2em; font-style: normal; font-weight: 400; }
.rose-divider { height:14px; margin:2px auto 0; display:flex; align-items:center; justify-content:center; gap:6px; color:#d7ad69; }
.rose-divider span { width:27px; height:1px; background:linear-gradient(90deg,transparent,#c59655); }
.rose-divider span:last-child { transform:scaleX(-1); }
.rose-divider i { width:8px; height:8px; border-radius:60% 10% 60% 10%; background:#a82b3d; transform:rotate(45deg); box-shadow:0 0 9px rgba(213,69,84,.75); }
.hint { margin: 2px 0 0; color: #dbc7b9; font-size: 12px; letter-spacing: 1px; }

.machine-wrap { position: relative; width: min(84vw, 350px); margin: 12px auto 0; animation:machineReveal 1.05s .18s cubic-bezier(.16,.84,.25,1) both; }
.machine-shadow { position: absolute; left: 11%; right: 11%; bottom: -5px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.65); filter: blur(10px); }
.machine { position: relative; filter: drop-shadow(0 28px 32px rgba(0,0,0,.48)); transform-origin: 50% 78%; animation:machineBreathe 4.8s 1.3s ease-in-out infinite; }
.machine.is-shaking { animation: machineAnticipation 1.05s cubic-bezier(.34,.01,.3,1); }

.machine__crown {
  position: absolute; left: 15%; right: 15%; top: -5px; z-index: 4; height: 27px; border: 1px solid #d9af62;
  background: linear-gradient(180deg, #f6d99e, #b7833e 52%, #765024 54%, #dda955);
  color: #451016; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 8px; letter-spacing: 2px;
  clip-path: polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);
}
.machine__crown span { width: 18px; height: 1px; background: #7b4925; }

.machine__dome {
  height: 255px; position: relative; overflow: hidden; border: 5px solid #c99a53; border-bottom: 0;
  border-radius: 46% 46% 9% 9% / 42% 42% 8% 8%;
  background: linear-gradient(116deg, rgba(255,255,255,.25) 4%, rgba(255,255,255,.025) 20%, rgba(255,224,184,.08) 60%, rgba(255,255,255,.19) 82%, rgba(255,255,255,.03));
  box-shadow: inset 0 0 35px rgba(255,221,177,.12), inset 14px 0 12px rgba(255,255,255,.08), 0 0 0 1px #6e431f;
}
.dome-shine { position: absolute; left: 10%; top: 17%; width: 8%; height: 48%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.55), transparent); transform: rotate(8deg); filter: blur(1px); }
.capsule-field i { position: absolute; width: 55px; height: 41px; border-radius: 50%; border: 2px solid rgba(255,246,223,.4); opacity: .48; transform: rotate(var(--r)); background: linear-gradient(180deg, var(--c) 49%, rgba(255,255,255,.85) 50%); box-shadow: inset -6px -5px 9px rgba(70,0,0,.3); }
.mini-capsule--1 { --c:#d7929f; --r:18deg; left:8%; bottom:7%; }
.mini-capsule--2 { --c:#d1a652; --r:-25deg; right:7%; bottom:8%; }
.mini-capsule--3 { --c:#762030; --r:13deg; left:26%; bottom:-3%; }
.mini-capsule--4 { --c:#e4c98f; --r:-9deg; right:28%; bottom:-5%; }
.mini-capsule--5 { --c:#aa5857; --r:37deg; right:-3%; bottom:-5%; }

.hero-capsule { --capsule-scale:1; position: absolute; width: 130px; height: 130px; left: 50%; top: 52%; transform: translate(-50%,-50%) rotate(-8deg); scale:var(--capsule-scale); filter: drop-shadow(0 17px 15px rgba(32,0,0,.42)); }
.hero-capsule__top, .hero-capsule__bottom { position: absolute; left: 3px; width: 124px; height: 62px; border: 2px solid #ffc3ca; }
.hero-capsule__top { top: 4px; border-radius: 64px 64px 15px 15px; background: radial-gradient(circle at 38% 22%, #ff8796 0 4%, transparent 5%), linear-gradient(135deg,#e33f51,#7d1024 75%); box-shadow: inset 10px 8px 17px rgba(255,255,255,.22), inset -12px -8px 16px rgba(60,0,0,.35); }
.hero-capsule__bottom { bottom: 3px; border-radius: 14px 14px 64px 64px; background: linear-gradient(140deg, rgba(255,250,234,.93), rgba(224,197,160,.88)); border-color: #fff0d2; box-shadow: inset 9px 4px 14px rgba(255,255,255,.65), inset -9px -7px 15px rgba(108,66,32,.19); }
.hero-capsule__band { position: absolute; left: 0; right: 0; top: 55px; z-index: 2; height: 20px; background: linear-gradient(180deg,#f3d48c,#8d5b2f 48%,#e5b968 54%,#a26f37); border-radius: 5px; display: grid; place-items: center; color: #751525; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.hero-capsule__band span { width: 28px; height: 28px; border-radius: 50%; background: #f0cf84; display: grid; place-items: center; border: 2px solid #9d6c31; font-size: 14px; }
.rose-emblem { position:relative; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,#f0cf84,#b27a38); border:1px solid #8b572b; box-shadow:inset 0 1px rgba(255,255,255,.5); }
.rose-emblem i, .rose-emblem i::before, .rose-emblem i::after { display:block; position:absolute; width:10px; height:12px; border-radius:70% 35% 65% 35%; background:linear-gradient(145deg,#bd3548,#68111f); content:""; }
.rose-emblem i { left:8px; top:7px; transform:rotate(8deg); }
.rose-emblem i::before { left:-4px; top:3px; transform:rotate(-65deg); }
.rose-emblem i::after { left:4px; top:3px; transform:rotate(65deg); }
.machine.is-shaking .hero-capsule { animation: capsuleTumble .95s cubic-bezier(.2,.75,.35,1); }
.machine.is-shaking .capsule-field { animation:capsuleFieldToss .9s ease-in-out; }
.machine.is-shaking .machine__dome { animation:domePulse .9s ease-in-out; }

.machine__body { height: 202px; margin: -7px -7px 0; position: relative; z-index: 2; border: 4px solid #dab26b; border-radius: 10px 10px 22px 22px; background: linear-gradient(100deg,#6c101f,#b52c39 16%,#7b1425 54%,#a62331 82%,#4e0915); box-shadow: inset 8px 0 15px rgba(255,182,158,.2), inset -8px 0 15px rgba(38,0,5,.4), 0 0 0 1px #6d3f1e; }
.machine__body::before { content:""; position:absolute; inset: 11px; border: 1px solid rgba(243,203,126,.45); border-radius: 7px 7px 16px 16px; pointer-events:none; }
.machine__label { position:absolute; top:20px; left:26px; color:#f1cd87; text-align:left; }
.machine__label small { display:block; font-size:7px; letter-spacing:2px; }
.machine__label strong { font-size:10px; letter-spacing:1.5px; }
.mechanism { position:absolute; right:28px; top:21px; display:flex; gap:13px; align-items:center; }
.dial { width:69px; height:69px; position:relative; border-radius:50%; background:radial-gradient(circle,#9a703d 0 14%,#eac980 16% 28%,#6f4b27 31% 35%,#c99b50 38% 60%,#6d451e 63%); border:2px solid #f1d08c; box-shadow:0 7px 9px rgba(0,0,0,.32), inset 3px 3px 5px rgba(255,255,255,.35); }
.dial__handle { position:absolute; left:26px; top:9px; width:16px; height:52px; border-radius:6px; background:linear-gradient(90deg,#765027,#f2d28c 47%,#80562b); box-shadow:0 4px 5px rgba(0,0,0,.45); }
.dial__shine { position:absolute; width:50px; height:50px; border-radius:50%; left:7px; top:4px; border-top:1px solid rgba(255,255,255,.7); }
.machine.is-shaking .dial__handle { animation: dialTurn .75s ease-in-out; }
.coin-slot { width:24px; color:#eac77c; font-size:5px; text-align:center; }
.coin-slot span { display:block; height:40px; border-radius:12px; background:#3d1012; border:3px solid #d2a359; box-shadow:inset 0 3px 5px #090000; }
.coin-slot small { font-size:5px; letter-spacing:1px; }
.outlet { position:absolute; width:118px; height:68px; bottom:17px; left:50%; transform:translateX(-50%); border-radius:14px 14px 25px 25px; background:linear-gradient(145deg,#e8c277,#895d2e 54%,#e0ad5c); padding:7px; box-shadow:0 8px 11px rgba(0,0,0,.32); }
.outlet__dark { width:100%; height:100%; border-radius:10px 10px 20px 20px; background:radial-gradient(ellipse at 50% 75%,#5c171d,#120306 72%); box-shadow:inset 0 8px 12px #050101; }
.drop-capsule { position:absolute; width:48px; height:48px; left:35px; top:9px; border-radius:50%; opacity:0; background:linear-gradient(180deg,#c52c3d 0 47%,#edddba 50%); border:2px solid #e7bf80; box-shadow:inset 5px 3px 7px rgba(255,255,255,.2); }
.drop-capsule span { position:absolute; left:-2px; right:-2px; top:21px; height:5px; background:#caa158; }
.drop-capsule.is-dropping { animation: rollOut 1.05s cubic-bezier(.3,.75,.2,1) forwards; }
.machine__feet { display:flex; justify-content:space-between; padding:0 20px; }
.machine__feet span { width:66px; height:14px; border-radius:0 0 8px 8px; background:linear-gradient(90deg,#70451f,#d3a75e,#68401d); }

.progress { width:min(100%,390px); margin:13px auto 0; animation:softReveal .8s .7s both; }
.progress__track { height:1px; background:rgba(237,202,139,.25); margin:0 11%; position:relative; }
.progress__track span { position:absolute; left:0; top:0; height:1px; width:0; background:var(--gold); box-shadow:0 0 8px var(--gold); transition:width .7s ease; }
.progress__items { display:grid; grid-template-columns:repeat(3,1fr); margin-top:-10px; }
.progress-item { display:flex; flex-direction:column; align-items:center; gap:4px; color:#ad8f83; font-size:9px; transition:.5s ease; }
.progress-item i { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; border:1px solid #82654f; background:#310a0e; color:#b59875; font-style:normal; font-size:8px; transition:.5s ease; }
.progress-item.is-collected { color:#f1d89f; }
.progress-item.is-collected i { background:var(--gold); color:#59101d; border-color:#fff0bf; box-shadow:0 0 13px rgba(233,198,124,.6); animation:collectedPulse .65s cubic-bezier(.16,.84,.25,1); }

.controls { position:fixed; z-index:10; left:0; right:0; bottom:0; padding:14px 22px max(13px, env(safe-area-inset-bottom)); text-align:center; background:linear-gradient(180deg,transparent,#130303 27%); pointer-events:none; animation:controlsRise .9s .85s both; }
.shake-button { pointer-events:auto; width:min(100%,390px); min-height:62px; border:1px solid #f2d493; border-radius:6px; color:#481018; background:linear-gradient(110deg,#a97437,#f2d496 25%,#ba8847 48%,#f4dc9d 72%,#9d6c35); box-shadow:0 13px 28px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.65); cursor:pointer; display:flex; justify-content:center; align-items:center; gap:13px; position:relative; overflow:hidden; }
.shake-button::after { content:""; position:absolute; top:-100%; bottom:-100%; width:34px; background:rgba(255,255,255,.38); transform:rotate(24deg); animation:buttonShine 4s ease-in-out infinite; }
.shake-button:active { transform:scale(.975); }
.shake-button:disabled { filter:saturate(.3); cursor:not-allowed; }
.shake-button__icon { width:34px; height:34px; border:1px solid rgba(72,16,24,.35); border-radius:50%; display:grid; place-items:center; }
.shake-button__icon svg { width:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.shake-button__copy { display:flex; flex-direction:column; align-items:flex-start; }
.shake-button__copy strong { font-size:17px; letter-spacing:5px; }
.shake-button__copy small { font-size:7px; letter-spacing:2.3px; font-weight:700; }
.controls p { margin:5px 0 0; color:#a98b7f; font-size:9px; letter-spacing:1px; }

.reveal, .finale { position:fixed; inset:0; z-index:30; display:none; align-items:center; justify-content:center; padding:24px; overflow:hidden; }
.reveal.is-visible, .finale.is-visible { display:flex; }
.reveal__veil { position:absolute; inset:0; background:rgba(13,2,3,.78); backdrop-filter:blur(12px); opacity:0; animation:veilIn .45s forwards; }
.opening-capsule { width:190px; height:190px; position:absolute; z-index:2; filter:drop-shadow(0 20px 35px rgba(0,0,0,.5)); animation:openCapsuleIn .9s cubic-bezier(.16,.86,.18,1) forwards; }
.opening-capsule__top, .opening-capsule__bottom { position:absolute; left:5px; width:180px; height:89px; border:3px solid #f4cc8a; transition:transform .65s cubic-bezier(.15,.8,.2,1), opacity .45s; }
.opening-capsule__top { top:5px; border-radius:95px 95px 18px 18px; background:linear-gradient(145deg,#e44c5e,#7c1022); box-shadow:inset 15px 10px 23px rgba(255,255,255,.18); transform-origin:center bottom; }
.opening-capsule__top span { position:absolute; width:30px; height:54px; left:27px; top:12px; border-radius:50%; background:rgba(255,255,255,.15); transform:rotate(22deg); }
.opening-capsule__bottom { bottom:5px; border-radius:18px 18px 95px 95px; background:linear-gradient(145deg,#fff8e8,#c69c65); box-shadow:inset 13px 9px 18px white; transform-origin:center top; }
.opening-capsule__glow { position:absolute; width:30px; height:30px; border-radius:50%; left:80px; top:80px; background:#fff4b7; box-shadow:0 0 50px 28px #f4c560,0 0 100px 55px rgba(214,65,58,.55); opacity:0; transition:.5s; }
.opening-capsule__rose { position:absolute; z-index:3; left:0; right:0; top:78px; height:34px; display:grid; place-items:center; background:linear-gradient(180deg,#f2d28c,#8f602e 46%,#e8bd6f 54%,#9c6a35); box-shadow:0 4px 8px rgba(0,0,0,.35); transition:opacity .3s, transform .55s cubic-bezier(.22,.8,.25,1); }
.opening-capsule__rose .rose-emblem { width:36px; height:36px; }
.opening-capsule__rose .rose-emblem i { left:12px; top:10px; }
.opening-capsule.is-open .opening-capsule__top { transform:translateY(-100px) rotate(-22deg); opacity:0; }
.opening-capsule.is-open .opening-capsule__bottom { transform:translateY(100px) rotate(17deg); opacity:0; }
.opening-capsule.is-open .opening-capsule__rose { opacity:0; transform:scale(1.8) rotate(28deg); }
.opening-capsule.is-open .opening-capsule__glow { opacity:1; transform:scale(2.5); }
.opening-capsule.is-gone { opacity:0; transition:.4s; pointer-events:none; }

.particles { position:absolute; inset:0; z-index:3; pointer-events:none; }
.particle { position:absolute; left:50%; top:50%; color:var(--gold); font-size:var(--size); text-shadow:0 0 10px currentColor; animation:particleBurst var(--duration) cubic-bezier(.12,.7,.26,1) forwards; animation-delay:var(--delay); }

.gift-card { width:min(100%,390px); position:relative; z-index:4; padding:25px 24px 23px; text-align:center; color:#361017; background:linear-gradient(155deg,#fff9e9,#f1dfbd 68%,#d7b47d); border:1px solid #ffe9b8; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 0 0 5px rgba(125,72,32,.1); opacity:0; transform:translateY(26px) scale(.92); pointer-events:none; }
.gift-card::before, .gift-card::after { content:"❦"; position:absolute; top:10px; color:#9c2736; font-size:16px; }
.gift-card::before { left:14px; } .gift-card::after { right:14px; }
.gift-card.is-shown { animation:cardReveal .7s cubic-bezier(.16,.8,.25,1) forwards; pointer-events:auto; }
.gift-card__number { margin:0; color:#9d774c; font-size:8px; letter-spacing:3px; font-weight:700; }
.gift-card__art { width:98px; height:98px; margin:14px auto 10px; border-radius:50%; display:grid; place-items:center; font-size:54px; background:radial-gradient(circle,#fffaf0 0 45%,#eacb91 72%,transparent 73%); filter:drop-shadow(0 9px 12px rgba(91,45,16,.18)); }
.gift-card__art span { animation:giftFloat 2.3s ease-in-out infinite alternate; }
.gift-card__kicker { margin:0 0 4px; color:#a57353; font-size:10px; letter-spacing:2px; }
.gift-card h2 { margin:0 auto; max-width:290px; font-size:clamp(23px,7vw,31px); line-height:1.3; letter-spacing:0; color:#631524; }
.gift-card__rule { display:block; width:42px; height:1px; margin:13px auto; background:#b3864d; position:relative; }
.gift-card__rule::after { content:"♥"; position:absolute; left:50%; top:50%; transform:translate(-50%,-54%); background:#f5e6c9; padding:0 6px; color:#9c2736; font-size:9px; }
.gift-card__desc { min-height:46px; margin:0 auto 17px; max-width:290px; color:#6e4b42; font-size:13px; line-height:1.8; }
.collect-button { width:100%; height:48px; border:1px solid #7d2430; border-radius:4px; color:#fff5df; background:#711827; font-size:12px; letter-spacing:2px; cursor:pointer; }
.collect-button span { margin-left:8px; font-size:18px; vertical-align:-1px; }

.finale { background:radial-gradient(circle at 50% 35%,rgba(112,13,30,.5),rgba(14,1,3,.91) 82%),url("assets/midnight-stage.png") center / cover; z-index:40; text-align:center; }
.finale__rays { position:absolute; width:110vmax; height:110vmax; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(238,196,112,.08) 0 6deg,transparent 6deg 18deg); animation:raysSpin 35s linear infinite; }
.finale__particles { z-index:1; }
.finale__content { position:relative; z-index:2; width:min(100%,430px); max-height:94dvh; overflow:auto; padding:24px 12px; animation:finaleIn .8s cubic-bezier(.15,.8,.2,1); scrollbar-width:none; }
.finale__eyebrow { color:#e9c67c; font-size:9px; letter-spacing:4px; }
.finale__seal { width:58px; height:58px; margin:14px auto 2px; border-radius:50%; border:1px solid #f0d393; display:grid; place-items:center; color:#6b1523; background:linear-gradient(145deg,#f6dda5,#a87638); box-shadow:0 0 30px rgba(239,198,120,.3); animation:sealBloom 1.2s .35s cubic-bezier(.16,.84,.25,1) both; }
.finale__seal .rose-emblem { width:38px; height:38px; }
.finale__seal .rose-emblem i { left:13px; top:11px; }
.finale h2 { margin:5px 0 12px; font-size:clamp(43px,13vw,65px); letter-spacing:0; text-shadow:0 5px 24px rgba(15,0,2,.7); }
.finale h2 span { display:inline-block; font-size:.58em; animation:giftFloat 1.2s ease-in-out infinite alternate; }
.finale__letter { margin:0 auto; max-width:350px; color:#f0ddd0; font-size:14px; line-height:2; }
.finale__sign { color:#e6c37d; font-family:"Ma Shan Zheng",cursive; font-size:20px; transform:rotate(-4deg); margin:11px 0 17px; }
.collected-gifts { display:flex; justify-content:center; gap:12px; margin-bottom:20px; }
.collected-gifts span { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(238,205,139,.45); background:rgba(20,2,4,.32); font-size:28px; box-shadow:inset 0 0 14px rgba(0,0,0,.3); }
.finale__close { display:block; width:min(100%,330px); height:48px; margin:0 auto; border:1px solid #efd08c; border-radius:4px; color:#4d0d17; background:#e7c47d; cursor:pointer; }
.reset-button { margin-top:12px; border:0; padding:7px; background:transparent; color:#bca08e; font-size:10px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }

@keyframes twinkle { to { opacity:.25; transform:scale(.7); } }
@keyframes lockEnter { from{opacity:0;transform:translateY(25px) scale(.94);filter:blur(7px)} to{opacity:1;transform:none;filter:none} }
@keyframes lockError { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px) rotate(-1deg)} 40%{transform:translateX(8px) rotate(1deg)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }
@keyframes haloBreathe { 0%,100%{transform:scale(.96);opacity:.55} 50%{transform:scale(1.04);opacity:1} }
@keyframes sealBreath { 0%,100%{transform:translateY(0);box-shadow:0 0 25px rgba(220,159,72,.25)} 50%{transform:translateY(-4px);box-shadow:0 0 38px rgba(220,159,72,.5)} }
@keyframes unlockFlash { 0%{opacity:0;transform:scale(.1)} 35%{opacity:.9} 100%{opacity:0;transform:scale(2.3)} }
@keyframes petalFall { 0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0} 8%{opacity:var(--opacity)} 45%{transform:translate3d(var(--drift),52vh,0) rotate(310deg)} 100%{transform:translate3d(calc(var(--drift) * -.55),118vh,0) rotate(760deg);opacity:0} }
@keyframes introReveal { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }
@keyframes machineReveal { from{opacity:0;transform:translateY(38px) scale(.93)} to{opacity:1;transform:none} }
@keyframes machineBreathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes machineAnticipation { 0%,100%{transform:rotate(0) scale(1)} 8%{transform:translateY(4px) scale(.985,1.015)} 20%{transform:rotate(-3.5deg) translateX(-6px)} 35%{transform:rotate(3.5deg) translateX(6px)} 50%{transform:rotate(-2.5deg) translateX(-4px)} 65%{transform:rotate(2deg) translateX(3px)} 82%{transform:translateY(-5px) scale(1.015,.985)} }
@keyframes capsuleTumble { 0%{transform:translate(-50%,-50%) rotate(-8deg)} 22%{transform:translate(-58%,-76%) rotate(-42deg) scale(1.06)} 47%{transform:translate(-42%,-38%) rotate(98deg) scale(.96)} 72%{transform:translate(-54%,-67%) rotate(238deg)} 100%{transform:translate(-50%,-50%) rotate(352deg)} }
@keyframes capsuleFieldToss { 0%,100%{transform:none} 25%{transform:translateY(-13px) rotate(-2deg)} 55%{transform:translateY(4px) rotate(2deg)} 75%{transform:translateY(-5px)} }
@keyframes domePulse { 0%,100%{filter:none} 45%{filter:brightness(1.28);box-shadow:inset 0 0 55px rgba(255,221,177,.3),0 0 20px rgba(234,188,104,.2)} }
@keyframes dialTurn { 0%{transform:rotate(0)} 70%{transform:rotate(380deg)} 100%{transform:rotate(360deg)} }
@keyframes rollOut { 0%{opacity:0; transform:translate(0,-18px) rotate(0) scale(.7)} 12%{opacity:1} 48%{opacity:1; transform:translate(0,21px) rotate(250deg) scale(1.05,.92)} 62%{transform:translate(32px,42px) rotate(340deg) scale(.93,1.07)} 78%{opacity:1;transform:translate(78px,29px) rotate(455deg) scale(1)} 100%{opacity:0; transform:translate(145px,75px) rotate(650deg) scale(.8)} }
@keyframes buttonShine { 0%,60%{left:-30%;opacity:0} 68%{opacity:1} 88%,100%{left:125%;opacity:0} }
@keyframes veilIn { to{opacity:1} }
@keyframes openCapsuleIn { 0%{transform:translateY(-52vh) rotate(-260deg) scale(.52);opacity:0} 52%{opacity:1} 72%{transform:translateY(26px) rotate(16deg) scale(1.08,.92)} 84%{transform:translateY(-12px) rotate(-6deg) scale(.97,1.03)} 100%{transform:none} }
@keyframes particleBurst { 0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)} 12%{opacity:1} 72%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.2) rotate(var(--spin))} }
@keyframes cardReveal { 0%{opacity:0;transform:translateY(34px) scale(.88) rotateX(8deg);filter:blur(6px)} 70%{filter:blur(0);transform:translateY(-5px) scale(1.015)} 100%{opacity:1;transform:none;filter:none} }
@keyframes giftFloat { to{transform:translateY(-7px) rotate(3deg)} }
@keyframes raysSpin { to{transform:rotate(360deg)} }
@keyframes finaleIn { from{opacity:0;transform:translateY(25px) scale(.94)} to{opacity:1;transform:none} }
@keyframes sealBloom { 0%{opacity:0;transform:scale(.2) rotate(-80deg)} 65%{transform:scale(1.18) rotate(8deg)} 100%{opacity:1;transform:none} }
@keyframes collectedPulse { 0%{transform:scale(.5);box-shadow:0 0 0 0 rgba(233,198,124,.7)} 70%{transform:scale(1.16);box-shadow:0 0 0 12px rgba(233,198,124,0)} 100%{transform:none} }
@keyframes softReveal { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes controlsRise { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

@media (min-width: 700px) {
  .experience { padding-bottom:155px; }
  .machine-wrap { margin-top:18px; }
  .controls { padding-bottom:18px; }
}

@media (max-height: 760px) {
  .intro h1 { font-size:35px; }
  .intro { padding-top:0; }
  .machine-wrap { width:min(72vw,285px); margin-top:8px; }
  .machine__dome { height:205px; }
  .hero-capsule { --capsule-scale:.82; }
  .machine__body { height:166px; }
  .machine__label { top:16px; left:20px; }
  .mechanism { transform:scale(.8); transform-origin:top right; right:20px; top:16px; }
  .outlet { transform:translateX(-50%) scale(.8); transform-origin:bottom center; bottom:12px; }
  .progress { margin-top:8px; }
}

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