/* The draw gets its own screen. Every effect uses flat colors. */
[hidden]{display:none!important}
body.show-reveal{overflow:hidden}
#reveal{position:fixed;inset:0;z-index:10;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);padding:18px 22px max(24px,env(safe-area-inset-bottom));min-height:100dvh}
.reveal-inner{width:min(100%,440px);margin:auto;text-align:center}
.reveal-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:800;font-size:12px}
.reveal-top button{font-size:12px;border-color:#dce3ec;min-height:38px}
.reveal-eyebrow{font-size:13px;letter-spacing:2px;color:var(--teal);font-weight:800;margin:42px 0 12px}
#reveal-title{font-size:clamp(24px,7vw,32px);margin:0;line-height:1.4;min-height:45px}
#capsule-scene{height:310px;position:relative;display:grid;place-items:center;margin:16px auto 8px;width:100%;max-width:360px}
.big-capsule{width:170px;height:187px;z-index:2;overflow:visible;transform-origin:center}
.lid,.base{transform-origin:40px 44px;transition:transform .48s cubic-bezier(.22,.8,.35,1),opacity .4s}
.capsule-color{fill:var(--red)}
.is-reward .capsule-color{fill:var(--teal)}
.orbit{position:absolute;width:235px;height:235px;border:3px dashed #d9edf0;animation:orbit 2s linear infinite}
.orbit i{position:absolute;width:18px;height:18px;border:4px solid var(--ink);background:var(--yellow)}
.orbit i:nth-child(1){left:-10px;top:-10px}.orbit i:nth-child(2){right:-10px;top:-10px;background:var(--red)}.orbit i:nth-child(3){right:-10px;bottom:-10px;background:var(--teal)}.orbit i:nth-child(4){left:-10px;bottom:-10px;background:var(--red)}
.capsule-caption{position:absolute;bottom:0;font-size:15px;font-weight:800;margin:0}
.burst{position:absolute;width:240px;height:240px;background:var(--yellow);clip-path:polygon(50% 0,58% 27%,78% 8%,73% 35%,100% 30%,80% 50%,100% 70%,73% 65%,78% 92%,58% 73%,50% 100%,42% 73%,22% 92%,27% 65%,0 70%,20% 50%,0 30%,27% 35%,22% 8%,42% 27%);opacity:0;transform:scale(.2)}
.pixel-sparkles{position:absolute;left:50%;top:45%;z-index:3;pointer-events:none}
.pixel-sparkles i{position:absolute;width:10px;height:10px;background:var(--color);opacity:0}
.skip{margin:16px 0;color:#637188;border-color:#dce3ec;font-size:13px;min-height:44px}
[data-phase=swirl] .big-capsule{animation:capsule-swirl .85s ease-in-out infinite}
[data-phase=land] .orbit,[data-phase=open] .orbit,[data-phase=result] .orbit{display:none}
[data-phase=land] .big-capsule{animation:capsule-land .7s ease-out both}
[data-phase=open] .lid{transform:translate(-10px,-30px) rotate(-18deg)}
[data-phase=open] .base{transform:translate(8px,22px) rotate(12deg)}
[data-phase=open] .burst{animation:burst .7s ease-out both}
[data-phase=result] .lid{transform:translate(-5px,-22px) rotate(-14deg)}
[data-phase=result] .base{transform:translate(5px,17px) rotate(10deg)}
[data-phase=result] #capsule-scene{height:114px;margin:8px auto}
[data-phase=result] .big-capsule{width:68px;height:75px}
[data-phase=result] .capsule-caption{font-size:13px}
[data-phase=result] .burst{width:104px;height:104px;opacity:1;transform:scale(1)}
[data-phase=result] .pixel-sparkles i{animation:pixel-party .9s ease-out both}
#reveal #result{border:0;margin:20px 0 0;padding:0;animation:result-arrive .35s ease-out both}
#reveal .tag{display:inline-block;font-size:14px;border:2px solid var(--ink);padding:6px 15px;font-weight:900}
#reveal #mission{font-size:clamp(40px,12.8vw,62px);font-weight:950;line-height:1.35;margin:24px 0 22px;word-break:normal;overflow-wrap:anywhere;text-wrap:balance}
#reveal #result p{font-size:14px;margin-bottom:22px}
#reveal #complete{font-size:19px;min-height:60px}
#reveal #result-parent{margin-top:24px}
[data-phase=result] .reveal-eyebrow{margin-top:26px}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes capsule-swirl{0%,100%{transform:translateY(-12px) rotate(-12deg) scale(.85)}50%{transform:translateY(10px) rotate(12deg) scale(.95)}}
@keyframes capsule-land{0%{transform:translateY(-100px) scale(.75)}55%{transform:translateY(12px) scale(1.06,.9)}78%{transform:translateY(-10px) scale(.96,1.04)}100%{transform:translateY(0) scale(1)}}
@keyframes burst{0%{opacity:0;transform:scale(.2) rotate(-15deg)}40%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.25)}}
@keyframes pixel-party{0%{opacity:1;transform:translate(0,0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--rot))}}
@keyframes result-arrive{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@media(max-height:700px){.reveal-eyebrow{margin-top:18px}#capsule-scene{height:245px}[data-phase=result] #capsule-scene{height:96px}[data-phase=result] .reveal-eyebrow{margin-top:12px}#reveal #mission{margin:18px 0}}
@media(prefers-reduced-motion:reduce){#reveal *,#reveal *::before{animation:none!important;transition:none!important}.pixel-sparkles{display:none}}

#reveal-title{margin-top:24px}.capsule-caption:empty{display:none}