/* 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.webp') 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-platinum{--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-platinum[data-motion=on][data-ready=ready] .reward-hero{animation:reward-platinum 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-platinum{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}

/* Medal assembly: symbol first, metal body second, raised rim seals on impact. */
.medal-cinematic{--alloy:#efb078;--alloy-light:#fff0d7;--alloy-dark:#754024;--energy:#ffb966;--highlight:#ffedc4;background:radial-gradient(ellipse at 50% 38%,#343045 0%,#0b1533 52%,#050919);overflow-x:clip}
.medal-cinematic::before{opacity:.08}
.medal-cinematic.celebration-rank-silver{--alloy:#bccfdf;--alloy-light:#ffffff;--alloy-dark:#475d7c;--energy:#b4dcff;--highlight:#e2f3ff}
.medal-cinematic:is(.celebration-rank-gold,.celebration-rank-complete){--alloy:#ffc928;--alloy-light:#fff7bd;--alloy-dark:#8b5408;--energy:#ffd900;--highlight:#fff18a}
.medal-cinematic.celebration-rank-platinum{--alloy:#d9e5ef;--alloy-light:#fff;--alloy-dark:#4a5a74;--energy:#ffe600;--highlight:#fff500;background:radial-gradient(ellipse at 50% 35%,#334052 0%,#111b3a 44%,#050816 88%)}
.medal-cinematic .celebration-tag{border-color:var(--alloy);background:#111c38;color:var(--alloy-light)}
.medal-stage{height:clamp(280px,46svh,430px);isolation:isolate;perspective:850px;overflow:visible}
.medal-camera{position:absolute;inset:0;display:grid;place-items:center;perspective:850px;z-index:3}
/* A front-facing rest pose keeps the raised emblem concentric with the medal. */
.medal-assembly{--size:min(58vw,260px,30svh);width:var(--size);height:var(--size);position:relative;transform-style:preserve-3d;transform:none}
.medal-face,.medal-depth,.medal-seal{position:absolute;inset:0;border-radius:50%;box-sizing:border-box}
.medal-depth{background:repeating-conic-gradient(from 0deg,var(--alloy-dark) 0deg 4deg,var(--alloy) 4deg 6deg);transform:translateZ(var(--depth));box-shadow:0 2px 0 var(--alloy-dark)}
.medal-face{background:conic-gradient(from 20deg,var(--alloy-light),var(--alloy-dark) 14%,var(--alloy) 26%,var(--alloy-light) 40%,var(--alloy-dark) 57%,var(--alloy) 72%,var(--alloy-light) 88%,var(--alloy));border:5px solid var(--alloy);box-shadow:inset 0 0 0 2px var(--alloy-light),inset 0 0 24px #0007,0 18px 35px #0006;transform:translateZ(1px);overflow:hidden}
.medal-engraving{position:absolute;inset:11%;border-radius:50%;border:2px solid var(--alloy-dark);background:radial-gradient(circle at 34% 25%,var(--alloy-light),var(--alloy) 43%,var(--alloy-dark));box-shadow:0 0 0 2px #ffffff80,inset 0 3px 10px #0007}
.medal-sheen{position:absolute;inset:-70%;background:linear-gradient(110deg,transparent 38%,#fff0 40%,#ffffffb0 47%,#fff3 53%,transparent 58%);transform:translateX(70%)}
.medal-seal{inset:0;border:10px double var(--alloy-light);box-shadow:inset 0 0 0 4px var(--alloy-dark),0 0 0 2px var(--alloy-dark),0 0 0 5px var(--alloy),0 2px 0 7px var(--alloy-dark);transform:translateZ(20px);pointer-events:none}
.celebration-rank-platinum .medal-seal{border-color:#eef6ff;box-shadow:inset 0 0 0 3px #515e73,inset 0 0 0 5px #ffe600,0 0 0 2px #5d6a80,0 0 0 5px #e7f0fa,0 0 0 7px #ffe600,0 0 28px #ffe60055}
.medal-symbol{position:absolute;inset:20%;display:grid;place-items:center;transform:translateZ(28px);font-size:calc(var(--size)*.39);line-height:1;filter:drop-shadow(0 5px 2px #0009);z-index:2}
.medal-symbol img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid var(--alloy-light);box-sizing:border-box;box-shadow:0 3px 8px #0007}
.medal-symbol span{filter:drop-shadow(0 1px 0 #fff8)}
.medal-halo{position:absolute;inset:0;background:radial-gradient(ellipse,var(--energy),transparent 63%);opacity:.2;transform:scale(.8)}
.medal-orbit{position:absolute;width:min(82%,390px);aspect-ratio:1;left:50%;top:50%;border:1px solid var(--alloy);border-radius:50%;opacity:.28;transform:translate(-50%,-50%) rotateX(65deg) rotateZ(-28deg);box-shadow:0 0 18px color-mix(in srgb,var(--energy),transparent 65%)}
.orbit-b{transform:translate(-50%,-50%) rotateY(62deg) rotateZ(28deg);border-style:dashed}
.medal-rays{position:absolute;inset:0;opacity:.16;pointer-events:none}
.medal-rays i{position:absolute;left:50%;top:50%;height:48%;width:3%;transform-origin:50% 0;transform:rotate(var(--ray));background:linear-gradient(var(--energy),transparent);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.medal-ground{position:absolute;bottom:3%;left:15%;right:15%;height:11%;border-radius:50%;background:radial-gradient(ellipse,var(--energy),transparent 68%);opacity:.2;transform:rotateX(60deg)}
.medal-impact{position:absolute;left:50%;top:50%;width:100px;height:100px;border:4px solid var(--energy);border-radius:50%;box-shadow:0 0 24px var(--energy),inset 0 0 12px var(--energy);transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:4;pointer-events:none}
.medal-particles{position:absolute;inset:0;z-index:4;perspective:850px;pointer-events:none;overflow:hidden}
.medal-spark{position:absolute;left:50%;top:50%;width:4px;height:11px;background:var(--energy);box-shadow:0 0 8px var(--highlight);opacity:0;border-radius:2px}
.medal-spark:nth-child(3n){background:var(--alloy-light);width:3px;height:3px}
.medal-rank-label{font-size:16px;font-weight:900;letter-spacing:.3em;color:var(--energy);margin:15px 0 0;text-shadow:0 0 20px color-mix(in srgb,var(--energy),transparent 60%)}
.medal-cinematic .celebration-title{color:var(--alloy-light);text-shadow:0 3px 5px #0008}
.medal-cinematic .celebration-words{margin-top:0}
.ceremony-progress{width:90px;height:3px;background:#ffffff20;border-radius:3px;margin:18px auto 0;overflow:hidden;flex-shrink:0}
.ceremony-progress i{display:block;height:100%;background:var(--energy);transform-origin:left}
.medal-cinematic .celebration-actions{background:linear-gradient(#080f2300,#080f23 30%)}
@media(prefers-reduced-motion:no-preference){
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-assembly{animation:medal-camera var(--ceremony) ease-in-out both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-symbol{animation:medal-symbol-in var(--ceremony) cubic-bezier(.2,.75,.25,1) both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] :is(.medal-face,.medal-depth){animation:medal-body-in var(--ceremony) cubic-bezier(.22,.7,.2,1) both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-seal{animation:medal-seal-in var(--ceremony) cubic-bezier(.24,.72,.25,1) both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-sheen{animation:medal-polish var(--ceremony) ease-in-out both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-halo{animation:medal-halo var(--ceremony) ease-out both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-impact{animation:medal-wave .85s var(--impact) ease-out both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .impact-b{animation-delay:calc(var(--impact) + .14s);border-width:2px}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-spark{animation:medal-sparks var(--burst-end) calc(var(--impact) + var(--lag)) cubic-bezier(.1,.7,.3,1) both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-orbit{animation:medal-orbit var(--ceremony) ease-in-out both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-rays{animation:medal-rays var(--ceremony) ease-out both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .ceremony-progress i{animation:medal-progress var(--ceremony) linear both}
body:not(.no-motion) .medal-cinematic[data-motion=on][data-ready=ready] .medal-rank-label{animation:medal-caption var(--ceremony) ease-out both}
body:not(.no-motion) .medal-cinematic.celebration-rank-platinum[data-motion=on][data-ready=ready] .medal-assembly{animation-name:platinum-camera}
body:not(.no-motion) .medal-cinematic.celebration-rank-platinum[data-motion=on][data-ready=ready] .medal-seal{animation-name:platinum-seal}
body:not(.no-motion) .medal-cinematic.celebration-rank-platinum[data-motion=on][data-ready=ready] .medal-camera{animation:platinum-impact .55s var(--impact) ease-out both}
}
@keyframes medal-camera{0%{transform:rotateX(12deg) rotateY(-28deg) scale(.95)}35%{transform:rotateX(-10deg) rotateY(20deg) scale(1.03)}55%{transform:rotateX(-4deg) rotateY(-7deg)}62%{transform:rotateX(-9deg) rotateY(-14deg) scale(.96)}80%{transform:rotateX(-8deg) rotateY(-10deg)}100%{transform:none}}
@keyframes medal-symbol-in{0%{opacity:0;transform:translateZ(380px) rotateY(-35deg) scale(1.15);filter:blur(7px)}14%{opacity:1;filter:drop-shadow(0 8px 4px #0008)}35%{transform:translateZ(55px) rotateY(0) scale(1)}55%,100%{opacity:1;transform:translateZ(28px);filter:drop-shadow(0 5px 2px #0009)}}
@keyframes medal-body-in{0%,15%{opacity:0;transform:translateZ(-340px) rotateX(65deg) rotateY(-70deg) scale(.6)}40%{opacity:1;transform:translateZ(calc(var(--depth,1px) - 15px)) rotateX(-7deg) rotateY(12deg) scale(1.02)}55%,100%{opacity:1;transform:translateZ(var(--depth,1px))}}
@keyframes medal-seal-in{0%,30%{opacity:0;transform:translateZ(310px) rotateZ(-90deg) scale(1.8)}42%{opacity:1}55%{transform:translateZ(20px) rotateZ(0) scale(1)}61%{transform:translateZ(28px) rotateZ(2deg) scale(1.015)}70%,100%{opacity:1;transform:translateZ(20px)}}
@keyframes platinum-camera{0%{transform:rotateY(-40deg) rotateX(12deg) scale(.86)}28%{transform:rotateY(36deg) rotateX(-14deg) scale(.95)}48%{transform:rotateY(-24deg) rotateX(8deg) scale(1.04)}62%{transform:rotateY(-8deg) rotateX(-5deg) scale(1.12)}68%{transform:rotateY(6deg) rotateX(-14deg) scale(.98)}84%{transform:rotateY(-10deg) rotateX(-8deg) scale(1.05)}100%{transform:none}}
@keyframes platinum-seal{0%,34%{opacity:0;transform:translateZ(290px) rotateZ(-180deg) scale(1.8)}43%{opacity:1;transform:translateZ(135px) rotateZ(-80deg) scale(1.28)}55%{transform:translateZ(100px) rotateZ(-15deg) scale(1.15)}62%{transform:translateZ(20px) rotateZ(0) scale(1)}65%{transform:translateZ(32px) rotateZ(3deg) scale(1.03)}72%,100%{opacity:1;transform:translateZ(20px)}}
@keyframes platinum-impact{0%,100%{transform:translate(0,0)}10%{transform:translate(-5px,4px)}24%{transform:translate(5px,-3px)}38%{transform:translate(-4px,-2px)}52%{transform:translate(3px,3px)}70%{transform:translate(-2px,1px)}85%{transform:translate(1px,-1px)}}
@keyframes medal-polish{0%,57%{transform:translateX(-65%)}80%,100%{transform:translateX(65%)}}
@keyframes medal-halo{0%{opacity:0;transform:scale(.3)}45%{opacity:.12;transform:scale(.9)}63%{opacity:.5;transform:scale(1.2)}100%{opacity:.2;transform:scale(.8)}}
@keyframes medal-wave{0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}8%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(4.8)}}
@keyframes medal-sparks{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}10%{opacity:1}100%{opacity:0;transform:translate3d(var(--px),var(--py),var(--pz)) rotate(var(--turn)) scale(.1)}}
@keyframes medal-orbit{0%{opacity:0;transform:translate(-50%,-50%) rotateX(70deg) rotateZ(-100deg) scale(.4)}30%{opacity:.6}100%{opacity:.28;transform:translate(-50%,-50%) rotateX(60deg) rotateZ(30deg) scale(1)}}
@keyframes medal-rays{0%,30%{opacity:0;transform:rotate(-35deg) scale(.4)}65%{opacity:.3}100%{opacity:.16;transform:rotate(15deg) scale(1)}}
@keyframes medal-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes medal-caption{0%,55%{opacity:0;transform:translateY(12px);letter-spacing:.6em}75%,100%{opacity:1;transform:translateY(0);letter-spacing:.3em}}
@media(max-height:650px){.medal-stage{height:245px}.medal-assembly{--size:min(55vw,190px)}.medal-cinematic .celebration-top{gap:8px}.medal-cinematic .celebration-words{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.medal-impact,.medal-particles{display:none}}
/* Three level ceremonies share the original padlock artwork. */
.unlock-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 28px}
.unlock-preview{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:12px 5px;border:1px solid #d8e9ff8c;border-radius:17px;color:#fff;background:linear-gradient(145deg,#165cac,#102553);font:inherit;cursor:pointer}
.unlock-preview[data-level=difficile]{background:linear-gradient(145deg,#934520,#302059);border-color:#ffc069}
.unlock-preview[data-level=expert]{background:linear-gradient(145deg,#7f3eca,#1c1b68);border-color:#ede077;box-shadow:0 0 18px #854fff33}
.unlock-preview strong{font-size:16px}.unlock-preview span:not(.unlock-preview-art){font-size:13px;line-height:1.3;min-height:34px}.unlock-preview small{font-size:13px;color:#ffe49d}
.unlock-preview-art{display:block;width:clamp(56px,18vw,82px);aspect-ratio:1;background:url('./images/reward-lock.png') 0 0/200% 100% no-repeat;filter:drop-shadow(0 4px 5px #0008)}
.celebration-unlock{--lock-energy:#ffe19b;--lock-shake:2px}
.celebration-unlock[data-unlock=difficile]{--lock-energy:#ffae42;--lock-shake:5px;background:radial-gradient(ellipse at 50% 33%,#693115,#23134b 53%,#061b43)}
.celebration-unlock[data-unlock=expert]{--lock-energy:#ffee79;--lock-shake:8px;background:radial-gradient(ellipse at 50% 33%,#5334ae,#17154c 50%,#03172e)}
.unlock-stage{perspective:850px;height:clamp(250px,43svh,380px)}
.unlock-camera{position:absolute;inset:8% 7%;transform-style:preserve-3d}
.unlock-lock{position:absolute;width:78%;max-width:300px;left:50%;top:50%;transform:translate(-50%,-50%);background-position:100% 0;filter:drop-shadow(0 20px 14px #0009)}
.unlock-key-light{position:absolute;left:46%;top:56%;width:8%;height:12%;border-radius:50%;background:#fffbe0;box-shadow:0 0 18px 8px var(--lock-energy),0 0 60px 18px var(--lock-energy);opacity:0;mix-blend-mode:screen}
.unlock-charge,.unlock-halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(ellipse,var(--lock-energy),transparent 64%);opacity:.2}
.unlock-charge{opacity:0;inset:12%}.unlock-halo{inset:0}
.unlock-chain{position:absolute;left:-4%;right:-4%;top:37%;height:38%;transform:rotate(-18deg);opacity:0}
.unlock-chain[data-row="1"]{transform:rotate(22deg);top:28%}
.unlock-chain-half{position:absolute;inset:0;background:url('./images/unlock-chain.png') center/100% auto no-repeat;filter:drop-shadow(0 3px 2px #0009)}
.chain-left{clip-path:inset(0 50% 0 0)}.chain-right{clip-path:inset(0 0 0 50%)}
.unlock-wave{position:absolute;left:15%;right:15%;top:17%;aspect-ratio:1;border:3px solid var(--lock-energy);border-radius:50%;box-shadow:0 0 28px var(--lock-energy),inset 0 0 20px var(--lock-energy);opacity:0}
.unlock-wave-two{border-width:1px}
.unlock-rays{position:absolute;inset:-25%;background:repeating-conic-gradient(from 0deg,transparent 0deg 16deg,#fff4a370 18deg,transparent 20deg);mask-image:radial-gradient(ellipse,transparent 18%,#0008 40%,transparent 64%);opacity:0}
.unlock-particles{position:absolute;inset:0;pointer-events:none}.unlock-particle{position:absolute;left:50%;top:56%;width:4px;height:10px;background:var(--lock-energy);border-radius:2px;box-shadow:0 0 7px var(--lock-energy);opacity:0}
.unlock-particle:nth-child(3n){height:4px;border-radius:50%}
.celebration-unlock[data-ready=loading] .unlock-stage{visibility:hidden}
@media(prefers-reduced-motion:no-preference){
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .unlock-camera{animation:unlock-camera var(--unlock-duration) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready][data-unlock=expert] .unlock-camera{animation-name:unlock-camera-expert}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .unlock-lock{animation:unlock-open var(--unlock-duration) steps(1,end) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] :is(.unlock-charge,.unlock-key-light){animation:unlock-charge var(--unlock-duration) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .unlock-halo{animation:unlock-halo var(--unlock-duration) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .unlock-chain{animation:unlock-chain var(--unlock-duration) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .chain-left{animation:unlock-break-left var(--unlock-duration) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .chain-right{animation:unlock-break-right var(--unlock-duration) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .unlock-wave{animation:unlock-wave var(--unlock-duration) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .unlock-wave-two{animation-delay:.12s}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .unlock-rays{animation:unlock-rays var(--unlock-duration) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .unlock-particle{animation:unlock-spark var(--unlock-duration) var(--lag) both}
body:not(.no-motion) .celebration-unlock[data-motion=on][data-ready=ready] .celebration-words{animation:unlock-caption var(--unlock-duration) both}
}
@keyframes unlock-open{0%{background-position:0 0}60%,100%{background-position:100% 0}}
@keyframes unlock-camera{0%{opacity:0;transform:translateY(30px) scale(.7) rotateY(-22deg)}15%{opacity:1;transform:none}38%,46%,54%{transform:translateX(calc(-1 * var(--lock-shake))) rotate(-2deg)}42%,50%,58%{transform:translateX(var(--lock-shake)) rotate(2deg)}61%{transform:scale(1.1) translateZ(35px)}68%{transform:scale(.98)}80%,100%{transform:none;opacity:1}}
@keyframes unlock-camera-expert{0%{opacity:0;transform:translateZ(250px) rotateY(-100deg) scale(.7)}20%{opacity:1;transform:rotateY(22deg)}30%{transform:rotateY(-14deg)}38%{transform:rotateY(10deg)}45%,51%,57%{transform:translateX(-8px) rotate(-3deg)}48%,54%,59%{transform:translateX(8px) rotate(3deg)}61%{transform:translateZ(70px) scale(1.15)}64%{transform:translate(-7px,3px) scale(1.04)}67%{transform:translate(5px,-2px)}70%{transform:translateX(-3px)}80%,100%{opacity:1;transform:none}}
@keyframes unlock-charge{0%,20%{opacity:0;transform:scale(.25)}50%{opacity:.45;transform:scale(.75)}59%{opacity:.8;transform:scale(1.1)}64%{opacity:.6;transform:scale(1.8)}79%,100%{opacity:0;transform:scale(2.2)}}
@keyframes unlock-halo{0%{opacity:0;transform:scale(.7)}50%{opacity:.25}61%{opacity:.65;transform:scale(1.1)}90%,100%{opacity:.22;transform:scale(1)}}
@keyframes unlock-chain{0%,10%{opacity:0}22%,66%{opacity:1}80%,100%{opacity:0}}
@keyframes unlock-break-left{0%,58%{transform:none}65%{transform:translate(-30%,-18%) rotate(-20deg)}85%,100%{transform:translate(-100%,65%) rotate(-65deg)}}
@keyframes unlock-break-right{0%,58%{transform:none}65%{transform:translate(30%,-18%) rotate(20deg)}85%,100%{transform:translate(100%,65%) rotate(65deg)}}
@keyframes unlock-wave{0%,58%{opacity:0;transform:scale(.2) rotateX(30deg)}62%{opacity:.8}84%,100%{opacity:0;transform:scale(2.2) rotateX(30deg)}}
@keyframes unlock-rays{0%,58%{opacity:0;transform:rotate(-16deg) scale(.5)}66%{opacity:.9}90%,100%{opacity:0;transform:rotate(24deg) scale(1.4)}}
@keyframes unlock-spark{0%,59%{opacity:0;transform:translate(0,0) scale(.1)}62%{opacity:1}95%,100%{opacity:0;transform:translate(var(--px),var(--py)) rotate(var(--spin)) scale(.5)}}
@keyframes unlock-caption{0%,62%{opacity:0;transform:translateY(12px) scale(.95)}78%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.unlock-chain,.unlock-particles,.unlock-wave,.unlock-rays,.unlock-charge,.unlock-key-light{display:none}}