:root { --background:#EFF3FA; --foreground:#1D2635; --card:#FFFFFF; --border:#D9E1F2; --primary:#3366CC; --muted-foreground:#546078; --ad-blue:oklch(48% .25 264); --ad-lime:oklch(93% .23 122); --ad-ink:oklch(22% .04 262); --ad-paper:oklch(92% .017 260); }
* { box-sizing:border-box; } html,body { margin:0; }
.stage { position:relative; width:640px; height:480px; overflow:hidden; background:transparent; }
.sprite { width:240px; height:240px; background-image:url('assets/character-atlas.png'); background-size:400% 200%; background-position:0 0; background-repeat:no-repeat; image-rendering:pixelated; }
.actor { position:absolute; left:30px; top:230px; transform-origin:50% 92%; }
.prop { position:absolute; width:140px; height:140px; background-image:url('assets/props-atlas.png'); background-size:300% 200%; background-repeat:no-repeat; image-rendering:pixelated; transform-origin:center; }
.gift { width:208px; height:190px; left:218px; top:57px; background-position:0 0; }
.trial { left:235px; top:330px; background-position:50% 0; }
.pass { width:130px; height:130px; left:350px; top:330px; background-position:100% 0; }
.reward { width:140px; height:140px; left:455px; top:330px; background-image:url('assets/reward-ticket.png');background-size:100% 100%;background-position:0 0; }
.reward output { position:absolute; inset:37px 12px auto; height:45px; color:var(--ad-ink); text-align:center; font:800 32px/1 Arial,sans-serif; font-variant-numeric:tabular-nums; }
.spark { width:55px; height:55px; left:282px; top:208px; background-position:50% 100%; }
.ground-shadow { position:absolute; left:100px; top:463px; width:105px; height:5px; border-radius:50%; background:color-mix(in srgb,var(--primary) 14%,transparent); }
.stage [data-layout-ignore] { pointer-events:none; }

.actor,.trial,.pass,.reward,.spark,.ground-shadow{opacity:0}

.reward-shadow{position:absolute;left:250px;top:463px;width:340px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,transparent);opacity:0}

.gift-star{width:54px;height:54px;left:0;top:0;background-position:50% 100%;opacity:0}

.gift{will-change:transform}

.actor {width:240px;height:240px;} .body {position:absolute;left:0;top:0;transform-origin:50% 98%;}
.run-trail,.jump-lines,.impact-lines {position:absolute;opacity:0;pointer-events:none;color:var(--ad-blue);}
.run-trail {left:26px;top:401px;width:72px;height:48px;}
.run-trail i {position:absolute;height:3px;background:currentColor;left:0;width:48px;box-shadow:0 1px color-mix(in srgb,currentColor 18%,transparent);}
.run-trail i:nth-child(1){top:4px;width:62px}.run-trail i:nth-child(2){top:17px;left:15px;width:42px}.run-trail i:nth-child(3){top:31px;width:30px}
.jump-lines {left:203px;top:400px;width:80px;height:50px;}
.jump-lines i{position:absolute;width:3px;height:27px;top:0;left:0;background:currentColor;transform:rotate(32deg)}
.jump-lines i:nth-child(2){left:24px;top:12px;height:20px}.jump-lines i:nth-child(3){left:53px;top:2px;height:16px}
.impact-lines {left:270px;top:186px;width:108px;height:64px;}
.impact-lines i{position:absolute;width:4px;height:25px;background:currentColor;left:9px;top:11px;transform:rotate(-43deg)}
.impact-lines i:nth-child(2){left:49px;top:-13px;transform:rotate(4deg)}.impact-lines i:nth-child(3){left:91px;top:5px;transform:rotate(48deg)}
.dust{position:absolute;left:0;top:0;width:14px;height:14px;opacity:0;background:color-mix(in srgb,var(--primary) 24%,transparent);border:2px solid color-mix(in srgb,var(--primary) 60%,transparent);clip-path:polygon(25% 0,75% 0,75% 12%,100% 12%,100% 75%,87% 75%,87% 100%,25% 100%,25% 87%,0 87%,0 25%,25% 25%);}