@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#741522;--gold:#ffda94;--cream:#fff1d7;--muted:#e7bdab;--line:#ffdca63b;--serif:'Playfair Display',Georgia,serif;--sans:'Be Vietnam Pro',sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 35%,#b03a33 0,#821f28 48%,#5d0d20 100%);color:var(--cream);font:16px/1.6 var(--sans)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed}button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button svg{width:24px;height:24px;flex-shrink:0}h1,h2,p{margin:0}h2{font:400 1.8rem/1.3 var(--serif)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.grain{position:fixed;pointer-events:none;inset:0;opacity:.12;z-index:10;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E")}
.motif{display:block;flex-shrink:0;width:100px;aspect-ratio:1;background:url('assets/festival-motifs.png') no-repeat;background-size:300% 100%;pointer-events:none}.motif.lantern{background-position:0% 50%}.motif.lion{background-position:50% 50%}.motif.mooncake{background-position:100% 50%}
.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:1px solid transparent;border-radius:100px;padding:15px 30px;min-height:56px;font-weight:500;font-size:1rem;transition:background .2s,box-shadow .2s,transform .2s}.primary{background:var(--gold);color:#671426}.button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 35px #ffd18a33}.secondary{border-color:var(--line);background:transparent}.icon-button{width:44px;height:44px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;background:#6c172770;border:1px solid var(--line);color:var(--gold)}.icon-button:hover{background:#b03c3b}.icon-button:disabled{opacity:.4}
/* The countdown itself is the home screen. */
.countdown-scene{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;isolation:isolate;overflow:hidden;padding:60px 40px 155px}.countdown-halo{position:absolute;width:min(76vw,820px);aspect-ratio:1;border-radius:50%;border:1px solid #f0ba6630;box-shadow:0 0 0 35px #f0ba6606,0 0 0 36px #f0ba6612,0 0 150px #e7a84b13;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.countdown-halo:after{content:'';position:absolute;inset:10%;border-radius:50%;border:1px dashed #ffd9971a;animation:orbit 160s linear infinite}.lantern-clock{width:min(1120px,100%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;margin:0 0 35px;position:relative}.timer-lantern{position:relative;aspect-ratio:1;transform-origin:50% 0;animation:sway 7s ease-in-out infinite;animation-delay:calc(var(--order) * -1.8s);filter:drop-shadow(0 12px 35px #33050b50)}.timer-lantern:before{content:'';position:absolute;width:1px;height:60vh;background:linear-gradient(transparent,#ffd68e66);left:50%;bottom:100%;pointer-events:none}.timer-lantern .motif{width:100%;filter:drop-shadow(0 0 14px #ffb43825)}.lantern-value{position:absolute;left:24%;right:24%;top:29%;height:34%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(ellipse,#841525e8 25%,#89132790 65%,transparent 73%);text-shadow:0 2px 6px #510611;color:#fff2c9}.lantern-value strong{display:block;font:500 clamp(2.3rem,5vw,4.6rem)/1.05 var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.025em}.lantern-value>span{font-size:.75rem;letter-spacing:.1em;margin-top:6px;color:#ffe9bd}.timer-lantern:nth-child(even){margin-top:50px}.unlock-button{z-index:1;min-width:200px;background:#65132688;border:1px solid #e6b76e75;color:#e7c9a4;box-shadow:inset 0 1px 0 #ffd99720;letter-spacing:.02em}.unlock-button:disabled{opacity:.68}.ready .unlock-button{background:var(--gold);color:#741522;border-color:#ffe8b1;animation:unlock-glow 3s ease-in-out infinite}.ready .timer-lantern .motif{filter:drop-shadow(0 0 22px #ffc04760)}.side-lantern{position:absolute;top:-15px;width:155px;opacity:.4;z-index:-1;animation:sway 9s ease-in-out infinite;transform-origin:50% 0}.side-lantern.left{left:1%;transform:rotate(8deg)}.side-lantern.right{right:1%;animation-delay:-4s}.festival-floor{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;gap:35px;pointer-events:none}.festival-floor .lion{width:130px}.festival-floor .mooncake{width:110px;transform:rotate(-12deg);margin-bottom:12px;opacity:.8}.festival-floor .mooncake:last-child{transform:rotate(12deg)}.starfield,.sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.starfield{z-index:-1}.sparkles i,.starfield i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff3ba;box-shadow:0 0 13px 4px #f9db9870;animation:float 7s ease-in-out infinite;opacity:0}
/* Both gifts share one image-led screen. */
.gifts-page{max-width:1320px;margin:auto;padding:20px 5% 40px;animation:enter .5s ease}.gift-nav{height:65px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-bottom:20px}.gift-nav>:last-child{justify-self:end}.nav-lantern{width:70px;justify-self:center}.gifts-layout{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:6%}.picture-gift,.cash-gift{min-width:0}.art-stage{position:relative;aspect-ratio:1;border:1px solid #ffda9466;padding:7px;border-radius:28px;background:#ac424440;box-shadow:0 20px 60px #36061335;overflow:hidden}.art-stage img{display:block;width:100%;height:100%;object-fit:contain;border-radius:22px;animation:breathe 15s ease-in-out infinite}.motion-toggle{position:absolute;bottom:18px;right:18px;background:#651522bd;backdrop-filter:blur(10px)}.paused *{animation-play-state:paused!important}.picture-ornament{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:15px}.picture-ornament .motif{width:70px}.picture-ornament>span:not(.motif){font:2rem var(--serif);color:var(--gold)}.wheel-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}.wheel-option{min-width:0;border:1px solid #ffdca63b;border-radius:17px;padding:12px 5px;background:#65132644;display:flex;align-items:center;flex-direction:column;gap:8px;transition:background .2s,border-color .2s}.wheel-option[aria-pressed=true]{background:#d18c3829;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.wheel-option:disabled{opacity:.4}.wheel-option[aria-pressed=true]:disabled{opacity:1}.wheel-prices{font-size:.69rem;font-weight:500;text-align:center;white-space:nowrap}.wheel-option small{font-size:.6rem;color:var(--muted);text-align:center;line-height:1.3}.mini-wheel{width:45px;aspect-ratio:1;border-radius:50%;border:2px solid #ffd99b;display:grid;place-items:center;box-shadow:0 3px 8px #0002;background:repeating-conic-gradient(#e9c98f 0deg 36deg,#ab3040 36deg 72deg)}.mini-wheel>span{display:grid;place-items:center;width:17px;height:17px;background:#842331;border:1px solid #efd29b;border-radius:50%;font-size:.6rem;color:var(--gold)}.mini-0{background:repeating-conic-gradient(#f8d49c 0deg 35deg,#a74331 35deg 36deg)}.mini-1{background:conic-gradient(#f0cf91 0deg 36deg,#eaaa68 36deg 72deg,#d58c54 72deg 108deg,#c76342 108deg 144deg,#b6493b 144deg 180deg,#a93438 180deg 216deg,#98243a 216deg 252deg,#842139 252deg 288deg,#732337 288deg 324deg,#602036 324deg 360deg)}.mini-2{background:conic-gradient(#e9c98f 0deg 180deg,#ab3040 180deg 360deg)}.wheel-wrap{position:relative;width:min(100%,370px);margin:auto;padding:10px}.wheel-wrap canvas{display:block;width:100%;height:auto;border-radius:50%;filter:drop-shadow(0 16px 20px #35061040)}.pointer{position:absolute;top:0;left:calc(50% - 12px);z-index:1;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:26px solid var(--gold);filter:drop-shadow(0 2px 2px #0005)}.wheel-result{text-align:center;margin-top:18px;min-height:86px}.wheel-result .primary{min-width:185px}.spin-hint{font-size:.75rem;color:var(--muted);margin-top:11px}.result-amount{display:block;font:400 clamp(2rem,4vw,3.2rem)/1.3 var(--serif);color:var(--gold)}.result-check{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #ffda9480;border-radius:50%;color:var(--gold);margin-bottom:8px}.result-check svg{width:19px;height:19px}
dialog{background:#821e2b;color:var(--cream);border:1px solid #d5b36d70;border-radius:18px;padding:32px;width:min(470px,calc(100% - 32px));max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #0007}dialog::backdrop{background:#30050ed4;backdrop-filter:blur(8px)}dialog p{margin-top:15px;color:var(--muted);font-size:.9rem}.actions{display:flex;justify-content:center;gap:14px;margin-top:25px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#f2ddb4;color:#651525;padding:14px 22px;border-radius:9px;z-index:20;transition:.3s;max-width:90%;font-size:.85rem}#toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes unlock-glow{50%{box-shadow:0 0 35px #ffda9460,0 0 75px #ffda9420}}@keyframes breathe{50%{transform:scale(1.04)}}@keyframes float{0%,100%{opacity:0;transform:translateY(15px)}40%{opacity:.8}80%{transform:translateY(-60px);opacity:0}}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.countdown-scene{padding-right:15px;padding-left:15px}.lantern-value strong{font-size:clamp(2rem,5.8vw,4rem)}.lantern-value>span{font-size:.7rem}.gifts-layout{gap:4%}.wheel-prices{font-size:.58rem}.wheel-option small{font-size:.55rem}.wheel-wrap{max-width:320px}.gifts-page{padding:16px 4% 30px}}
@media(max-width:700px){.countdown-scene{padding:35px 18px 140px;justify-content:center}.lantern-clock{width:min(390px,100%);grid-template-columns:repeat(2,minmax(0,1fr));gap:0 6px;margin:0 0 22px}.timer-lantern:nth-child(even){margin-top:22px}.timer-lantern:before{display:none}.timer-lantern .motif{filter:drop-shadow(0 0 10px #ffb43835)}.lantern-value strong{font-size:clamp(2.2rem,9vw,3.3rem)}.lantern-value>span{font-size:.65rem;margin-top:3px}.countdown-halo{width:90vw;top:42%;box-shadow:0 0 0 18px #f0ba6606,0 0 0 19px #f0ba6612}.side-lantern{width:90px;opacity:.32}.side-lantern.left{left:-5px}.side-lantern.right{right:-5px}.festival-floor{gap:22px}.festival-floor .lion{width:96px}.festival-floor .mooncake{width:76px;margin-bottom:8px}.unlock-button{min-height:54px;min-width:185px}.gifts-layout{grid-template-columns:1fr;gap:30px}.gifts-page{padding:12px 5% 36px}.gift-nav{margin-bottom:20px;height:54px}.art-stage{border-radius:22px;padding:5px}.art-stage img{border-radius:17px}.picture-ornament{margin-top:12px;gap:25px}.picture-ornament .motif{width:57px}.wheel-options{gap:7px;margin-bottom:20px}.wheel-prices{font-size:.63rem}.wheel-option small{font-size:.57rem}.wheel-option{padding:12px 3px;gap:8px}.wheel-wrap{width:100%;max-width:340px}.wheel-result{margin-top:16px}.motion-toggle{bottom:13px;right:13px}.mini-wheel{width:43px}.result-amount{font-size:2.8rem}.actions .button{padding:12px 20px}.spin-hint{font-size:.75rem}}
@media(max-width:360px){.wheel-prices{font-size:.56rem}.wheel-option small{font-size:.52rem}.countdown-scene{padding-bottom:115px}.lantern-clock{max-width:290px}.lantern-value strong{font-size:2rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wheel-prices{font-size:.875rem;white-space:normal;line-height:1.4}.wheel-option small{font-size:.75rem;line-height:1.4}.wheel-option{justify-content:flex-start}.wheel-prices{min-height:2.8em;display:flex;align-items:center;justify-content:center}
@media(max-width:700px){.wheel-prices{font-size:.8rem}.wheel-option small{font-size:.7rem}}

/* The wheel is the spin control, including keyboard activation. */
button.wheel-wrap{display:block;border:0;border-radius:50%;background:transparent;color:inherit;transition:filter .2s,transform .2s;-webkit-tap-highlight-color:transparent}
button.wheel-wrap:not(:disabled):hover{filter:drop-shadow(0 0 15px #ffda9445)}
button.wheel-wrap:not(:disabled):active{transform:scale(.98)}
button.wheel-wrap:disabled{cursor:default}
button.wheel-wrap[aria-busy="true"]{cursor:wait}
.wheel-wrap .pointer{pointer-events:none}
.wheel-prices{color:var(--gold)}

.gift-nav{grid-template-columns:44px minmax(0,1fr) 44px}
.gift-title{font:400 clamp(1.75rem,3vw,2.5rem)/1.2 var(--serif);color:var(--gold);text-align:center;white-space:nowrap}