/* Reward scenes use original high-resolution transparent sprite artwork. */
.celebration-preview-link{display:block;width:100%;min-height:46px;margin:0 0 18px;border:1px solid #bcdcfa80;border-radius:14px;background:linear-gradient(110deg,#1554a8,#663baa);color:#fff0bf;font-weight:700;cursor:pointer}
.celebration-preview-grid{display:grid;gap:10px;margin:18px 0}.celebration-gallery>.gloss{width:100%}.celebration-gallery .page-heading h1{font-size:28px}
body[data-screen=celebration] .app-shell {max-width:480px;min-height:100svh;padding:0;background:#05194a;box-shadow:0 0 70px #00102bc9;}
body[data-screen=celebration] .topbar,body[data-screen=celebration] footer{display:none}
body[data-screen=celebration] main{padding:0;min-height:100svh}
body[data-screen=celebration] #notice:not(:empty){position:relative;z-index:5}
.celebration-page{--accent:#ffd564;--glow:#ffb820;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;overflow:hidden;color:#fff;background:radial-gradient(ellipse at 50% 34%,#245dba80,transparent 53%),linear-gradient(155deg,#003ba0 0%,#101d62 47%,#180e48 74%,#051c4f);padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));text-align:center}
.celebration-page::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0020521a 30%,#0d114d 72%),url('./images/paris.png') center bottom / auto 100%;opacity:.18;pointer-events:none}
.celebration-rank-bronze{--accent:#ffc28d;--glow:#f87b27}
.celebration-rank-silver{--accent:#d7f5ff;--glow:#55bfff}
.celebration-rank-diamond{--accent:#8ff8ff;--glow:#25d9ff;background:radial-gradient(ellipse at 50% 33%,#106383,#0a2865 48%,#170946 95%)}
.celebration-book{background:radial-gradient(ellipse at 50% 37%,#354ac0 0%,#2c1765 44%,#101644 78%)}
.celebration-expert{background:radial-gradient(ellipse at 50% 38%,#682677 0%,#211455 40%,#070f32 78%)}
.celebration-top{position:relative;z-index:3;display:grid;gap:16px;justify-items:center}
.celebration-brand{font-size:12px;font-weight:800;letter-spacing:.24em;color:#bfdcff}
.celebration-tag{max-width:100%;font-size:13px;font-weight:800;letter-spacing:.04em;color:#ffeec0;padding:8px 16px;border:1px solid #fbd57670;border-radius:25px;background:linear-gradient(110deg,#6d410f80,#412a7770);box-shadow:inset 0 1px #fff2}
.reward-stage{position:relative;flex:none;width:calc(100% + 32px);margin:0 -16px;height:clamp(265px,43svh,385px);perspective:900px}
.reward-lights,.reward-confetti,.reward-fireworks,.reward-orbit{position:absolute;inset:0;pointer-events:none}
.reward-aura{position:absolute;inset:2% 0;border-radius:50%;background:radial-gradient(ellipse,var(--glow),transparent 68%);opacity:.25;transform:scale(.95)}
.reward-ring{position:absolute;left:50%;top:50%;width:73%;aspect-ratio:1;border:1px solid #ffdf7860;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px #ffd75420,inset 0 0 20px #ffd75420}
.ring-two{width:87%;border-style:dashed;border-color:#c9eaff25}
.reward-spotlight{position:absolute;inset:-30% 12% 5%;background:linear-gradient(#ffedb200,#ffedb23d);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);opacity:.6}
.reward-hero{--art-size:min(78vw,330px,38svh);position:absolute;inset:0;z-index:2;display:grid;place-items:center;transform:translateY(0);filter:drop-shadow(0 18px 15px #0008)}
.reward-sprite{width:var(--art-size,100%);max-width:100%;aspect-ratio:1;background-repeat:no-repeat;background-size:300% 200%;background-image:url('./images/reward-prizes.png')}
.prize-sprite[data-frame="0"]{background-position:0 0}
.prize-sprite[data-frame="1"]{background-position:50% 0}
.prize-sprite[data-frame="2"]{background-position:100% 0}
.prize-sprite[data-frame="3"]{background-position:0 100%}
.prize-sprite[data-frame="4"],.prize-sprite[data-frame="5"]{aspect-ratio:512/550;background-size:300% 186.1818%;background-position:50% 100%}
.prize-sprite[data-frame="5"]{background-position:100% 100%}
.book-sprite{background-image:url('./images/reward-book.png');background-position:100% 100%}
.lock-sprite{background-image:url('./images/reward-lock.png');background-size:200% 100%;background-position:100% 0}
.celebration-book .reward-hero{--art-size:min(94vw,430px,43svh)}
.book-seal{position:absolute;top:-4%;right:9%;width:30%;filter:drop-shadow(0 4px 8px #15152a80)}
.reward-pedestal{position:absolute;left:22%;right:22%;bottom:3%;height:8%;border-radius:50%;background:radial-gradient(ellipse,#e5b94970,transparent 65%);transform:rotateX(40deg)}
.reward-theme-image{position:absolute;left:34%;top:35%;width:32%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid var(--accent);box-shadow:0 5px 12px #0008}
.reward-orbit-image{position:absolute;left:var(--ox);top:var(--oy);width:16%;aspect-ratio:1;object-fit:cover;border-radius:20%;border:2px solid #ffe5a9;box-shadow:0 4px 12px #0009}
.celebration-explorer .reward-hero,.celebration-collection .reward-hero{--art-size:min(60vw,290px,32svh)}
.reward-perfect-score{position:absolute;z-index:3;bottom:2%;left:0;right:0;font-size:clamp(52px,16vw,78px);font-weight:900;letter-spacing:-.04em;color:#fff5c8;text-shadow:0 3px #a55215,0 8px 24px #180829,0 0 26px #ffc43595;line-height:1}
.celebration-perfect .reward-hero{--art-size:min(65vw,300px,35svh);inset:0 0 14%}
.celebration-words{position:relative;z-index:3;margin:8px 0 0}
.celebration-title{font-size:clamp(27px,7.7vw,36px);font-weight:900;line-height:1.08;margin:0 0 12px;color:#fff4d0;text-shadow:0 3px 1px #351451,0 0 22px #ffba4d30;overflow-wrap:break-word}
.celebration-reason{max-width:360px;margin:0 auto;color:#e7eeff;font-size:16px;line-height:1.5;text-wrap:pretty}
.celebration-detail{margin:7px 0 0;color:var(--accent);font-weight:800;font-size:15px}
.celebration-earned-stars{margin:8px 0 0;letter-spacing:.16em;font-size:30px;color:#ffd960;text-shadow:0 3px 8px #663905}
.celebration-other{position:relative;z-index:4;text-align:left;margin:18px 0 0;border:1px solid #ffffff30;border-radius:15px;background:#092454b8;box-shadow:inset 0 1px #fff1}
.celebration-other summary{cursor:pointer;min-height:48px;padding:13px 16px;color:#ffe4a0;font-size:14px;font-weight:700}
.celebration-gain{display:grid;gap:4px;border-top:1px solid #ffffff20;padding:12px 16px;line-height:1.4}
.celebration-gain strong{font-size:15px;color:#fff6d7}.celebration-gain span{font-size:13px;color:#d5e4ff}
.celebration-actions{position:sticky;z-index:5;bottom:0;margin-top:auto;padding:20px 0 max(12px,env(safe-area-inset-bottom));background:linear-gradient(#0c164500,#0c1645 28%)}
.celebration-continue{width:100%;min-height:56px!important;font-size:20px!important;border-radius:30px!important;box-shadow:0 6px 20px #0005,inset 0 2px 2px #a7ffd1;position:relative}
.celebration-continue:focus-visible{outline:3px solid #fff;outline-offset:4px}
.celebration-kept{margin:10px 0 0;font-size:12px;color:#b9d1f5;line-height:1.4}
.reward-confetti,.reward-fireworks{overflow:hidden}
.reward-confetto{position:absolute;left:var(--x);top:-7%;width:7px;height:13px;background:var(--color);border-radius:2px;opacity:0}
.reward-confetto:nth-child(3n){width:6px;height:6px;border-radius:50%}
.reward-burst{position:absolute;left:var(--bx);top:var(--by)}
.reward-ray{position:absolute;width:4px;height:14px;background:var(--spark-color);border-radius:50%;box-shadow:0 0 7px var(--spark-color);opacity:0;transform:rotate(var(--angle)) translateY(8px)}
.reward-star-chain{position:absolute;z-index:3;left:12%;right:12%;bottom:0;display:flex;gap:5px;justify-content:center}
.reward-chain-star{font-size:36px;color:#ffe789;text-shadow:0 3px #ac5b12,0 0 15px #ffa00080}
@media(prefers-reduced-motion:no-preference){
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .reward-hero{animation:reward-arrival 3.8s cubic-bezier(.2,.8,.2,1) both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .reward-aura{animation:reward-glow 4.3s ease-out both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .ring-two{animation:reward-ring-turn 4.6s ease-out both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .reward-confetto{animation:reward-confetti-fall 3.1s var(--fall) ease-out both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .reward-ray{animation:reward-spark .95s var(--burst-delay) cubic-bezier(.12,.65,.2,1) both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .reward-orbit-image{animation:reward-orbit-arrival 3.7s var(--orbit-delay) ease-out both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .reward-chain-star{animation:reward-star-light .9s var(--star-delay) ease-out both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .reward-perfect-score{animation:reward-score 3.8s ease-out both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .book-sprite{animation:reward-book-pages 4.6s steps(1,end) both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .book-seal{animation:reward-book-seal 4.6s ease-out both}
body:not(.no-motion) .celebration-page[data-motion=on][data-ready=ready] .lock-sprite{animation:reward-lock-open 3.6s steps(1,end) both}
body:not(.no-motion) .celebration-rank-silver[data-motion=on][data-ready=ready] .reward-hero{animation:reward-silver-turn 4s ease-out both}
body:not(.no-motion) .celebration-rank-diamond[data-motion=on][data-ready=ready] .reward-hero{animation:reward-diamond 4.5s ease-out both}
}
@keyframes reward-arrival{0%{opacity:0;transform:translateY(85px) scale(.38) rotate(-12deg)}22%{opacity:1;transform:translateY(-12px) scale(1.07) rotate(3deg)}38%{transform:translateY(0) scale(1) rotate(-2deg)}68%{transform:translateY(-9px) scale(1.025) rotate(1deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes reward-silver-turn{0%{opacity:0;transform:translateY(50px) rotateY(-115deg) scale(.6)}30%{opacity:1;transform:translateY(-10px) rotateY(18deg) scale(1.06)}55%{transform:rotateY(-8deg)}100%{opacity:1;transform:rotateY(0)}}
@keyframes reward-diamond{0%{opacity:0;transform:translateY(60px) scale(.4) rotate(-18deg);filter:drop-shadow(0 0 0 #64efff)}28%{opacity:1;transform:translateY(-12px) scale(1.08) rotate(4deg);filter:drop-shadow(0 0 25px #64efff70)}60%{transform:translateY(-4px) scale(1.02) rotate(-2deg)}100%{transform:none;filter:drop-shadow(0 18px 15px #0008)}}
@keyframes reward-glow{0%{opacity:0;transform:scale(.3)}30%{opacity:.7;transform:scale(1.15)}100%{opacity:.25;transform:scale(.95)}}
@keyframes reward-ring-turn{0%{opacity:0;transform:translate(-50%,-50%) rotate(-80deg) scale(.5)}30%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}}
@keyframes reward-confetti-fall{0%{opacity:0;transform:translate(0,-10px) rotate(0)}12%,70%{opacity:1}100%{opacity:0;transform:translate(var(--drift),390px) rotate(var(--spin))}}
@keyframes reward-spark{0%{opacity:0;transform:rotate(var(--angle)) translateY(5px) scale(.5)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(86px) scale(.15)}}
@keyframes reward-orbit-arrival{0%{opacity:0;transform:translateY(30px) scale(.2) rotate(-18deg)}35%{opacity:1;transform:translateY(-5px) scale(1.08) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes reward-star-light{0%{opacity:.12;transform:scale(.45)}60%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes reward-score{0%,16%{opacity:0;transform:scale(.45) translateY(15px)}32%{opacity:1;transform:scale(1.13) translateY(0)}58%{transform:scale(1)}75%{text-shadow:0 3px #a55215,0 0 45px #ffe66d}100%{opacity:1;transform:none}}
@keyframes reward-book-pages{0%{background-position:0 0}16%{background-position:50% 0}32%{background-position:100% 0}46%{background-position:0 100%}62%{background-position:50% 100%}79%,100%{background-position:100% 100%}}
@keyframes reward-book-seal{0%,58%{opacity:0;transform:translateY(60px) scale(.3) rotate(-16deg)}82%{opacity:1;transform:translateY(-8px) scale(1.1) rotate(5deg)}100%{opacity:1;transform:none}}
@keyframes reward-lock-open{0%{background-position:0 0}45%,100%{background-position:100% 0}}
@media(max-height:650px){.celebration-page{padding-top:max(12px,env(safe-area-inset-top))}.celebration-top{gap:8px}.reward-stage{height:255px}.celebration-title{font-size:28px}.celebration-actions{padding-top:15px}.celebration-other{margin-top:12px}}
@media(max-width:350px){.celebration-title{font-size:27px}.celebration-reason{font-size:15px}.reward-stage{height:270px}}

body.page-hidden .celebration-page *{animation-play-state:paused!important}