:root{--red:#bf2824;--paper:#f8eddb;--ink:#29231f;--line:#ffffff42}*{box-sizing:border-box}body{margin:0;background:var(--red);color:var(--paper);font-family:Arial,"Noto Sans JP","Yu Gothic",sans-serif;-webkit-tap-highlight-color:transparent}.shell{max-width:1440px;margin:auto;padding:30px 64px 28px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:23px}h1{font-size:clamp(64px,10.8vw,150px);line-height:.9;letter-spacing:-.075em;margin:0;font-weight:900}h1 span{display:inline-block;font-weight:400;margin:0 .03em;transform:skew(-9deg)}.score{display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-variant-numeric:tabular-nums}#fraction{font-size:42px;font-weight:700;letter-spacing:-.06em}#round{font-size:12px;letter-spacing:.2em}.playground{height:clamp(340px,49vh,530px);min-height:340px;position:relative;display:grid;place-items:center;isolation:isolate}.scene{width:min(660px,100%);height:100%;display:grid;place-items:center;position:relative}.scene.initial{animation:arrive .55s cubic-bezier(.16,1,.3,1)}.scene svg{width:100%;height:100%;max-height:470px;overflow:visible;filter:drop-shadow(0 24px 19px #60130d30)}.controls{border-top:1px solid var(--line);padding:24px 50px;min-height:84px;position:relative;display:grid;place-items:center;text-align:center}h2{font-size:22px;letter-spacing:.08em;font-weight:700;margin:0}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,.scene:focus-visible{outline:3px solid white;outline-offset:6px}.progress{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(10,1fr);gap:12px}.progress li{border-top:3px solid #ffffff30;padding-top:14px;font-size:12px;color:#f8eddbba;font-variant-numeric:tabular-nums}.progress li.done{border-color:var(--paper);color:var(--paper);font-weight:bold}.progress li.current{border-color:#f8eddb80}.verdict{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-weight:900;font-size:clamp(55px,10vw,140px);letter-spacing:-.05em;text-shadow:0 4px 30px #74191065;opacity:0}.verdict.show{animation:stamp .65s cubic-bezier(.1,.8,.2,1) forwards}.scene.resolved{transition:opacity .4s}.scene.dim{opacity:.2}.object-action{cursor:pointer;outline:none}.object-action:focus-visible{filter:drop-shadow(0 0 5px #fff)}.idle-reel{animation:reel .11s linear infinite}.running .idle-reel{animation-duration:.07s}.result .idle-reel{animation:none}.ready-pulse{animation:breathe 2.6s ease-in-out infinite}.running .ready-pulse,.result .ready-pulse{animation:none}.running .shake{animation:rattle .13s linear infinite}.running .coin{animation:coinflip .3s linear infinite;transform-origin:320px 202px}.running .key{animation:turnkey 1.3s ease-in-out both;transform-origin:320px 230px}.running .dart{animation:throwdart 1s cubic-bezier(.2,.6,.6,1) both}.running .tile-draw{animation:tiledraw 1s ease both}.running .phone-card{animation:cardshake .3s ease-in-out infinite;transform-origin:320px 210px}.running .save-bar{animation:save 1.3s ease forwards}.running .power-led{fill:#f5edb9;filter:drop-shadow(0 0 8px #fff)}.running .filament{animation:flicker .15s steps(2) infinite}.running .bread{animation:toast .25s ease-in-out infinite}.result.win .bread{animation:pop .65s cubic-bezier(.2,1.3,.4,1) both}.result.lose .bread{animation:pop .65s cubic-bezier(.2,1.3,.4,1) both;fill:#342621}.running .capsule{animation:rattle .15s linear infinite}.rays{opacity:0}.result.win .rays{opacity:1;animation:glow .6s ease both}.spark{animation:spark 1s ease-out both;transform-origin:320px 210px}.result-message{font-weight:700;fill:#342822;font-family:Arial,"Yu Gothic",sans-serif}.screen-blue{fill:#1737b7}.clear-scene{font-size:120px;font-weight:900;letter-spacing:-8px}.clear-scene .one{font-size:66px}.clear-scene line{stroke:var(--paper);stroke-width:3}.final .playground{background:radial-gradient(ellipse,#d34432,transparent 65%)}@keyframes arrive{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}@keyframes stamp{from{opacity:0;transform:scale(1.35) rotate(-6deg)}to{opacity:1;transform:scale(1) rotate(-6deg)}}@keyframes reel{from{transform:translateY(-60px)}to{transform:translateY(60px)}}@keyframes breathe{50%{opacity:.45}}@keyframes rattle{25%{transform:translate(2px,-2px) rotate(.3deg)}75%{transform:translate(-2px,1px) rotate(-.3deg)}}@keyframes coinflip{50%{transform:scaleX(.05) translateY(-20px)}}@keyframes turnkey{40%{transform:rotate(90deg)}70%{transform:rotate(90deg)}100%{transform:rotate(0)}}@keyframes throwdart{0%{transform:translate(180px,200px) scale(1.8);opacity:0}60%{transform:translate(0) scale(1);opacity:1}70%{transform:rotate(2deg)}100%{transform:none}}@keyframes tiledraw{0%{transform:translate(180px,-65px) rotate(30deg);opacity:0}80%{transform:translate(0) rotate(-5deg);opacity:1}100%{transform:none}}@keyframes cardshake{50%{transform:rotate(2deg) scale(1.03)}0%,100%{transform:rotate(-2deg)}}@keyframes save{from{width:0}to{width:225px}}@keyframes flicker{50%{opacity:.15}}@keyframes toast{50%{transform:translateY(3px)}}@keyframes pop{0%{transform:translateY(0)}50%{transform:translateY(-110px) rotate(-5deg)}100%{transform:translateY(-65px)}}@keyframes glow{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes spark{to{opacity:0;transform:scale(1.7)}}@media(min-width:1600px){.shell{padding-top:45px}.playground{height:53vh}}@media(max-width:650px){.shell{padding:25px 23px 26px}header{padding-bottom:23px}h1{font-size:73px}#fraction{font-size:29px}#round{font-size:10px}.score{gap:8px}.playground{height:50vh;min-height:330px;max-height:480px}.scene{width:calc(100% + 24px)}.controls{padding:23px 0;gap:10px}h2{font-size:17px;letter-spacing:.03em}.progress{gap:7px;grid-template-columns:repeat(5,1fr);row-gap:20px}.progress li{font-size:10px;padding-top:9px}.verdict{font-size:75px}}@media(max-width:360px){h1{font-size:61px}.shell{padding-inline:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.verdict.show{opacity:1}.result.win .bread,.result.lose .bread{transform:translateY(-65px)}}
/* Finite mechanical movements are deliberately different for each object. */
.running .key{transform-origin:320px 181px}
.running .bread{animation:toastdown .6s cubic-bezier(.4,0,.2,1) forwards}
.result.lose .discard{animation:discard .6s cubic-bezier(.2,.7,.3,1) both}
.result.lose .ron{animation:ron .4s .4s both}
.running .idle-reel{animation:brake 1.6s cubic-bezier(.12,.72,.22,1) forwards;filter:blur(1px)}
.result.win .phone-card{animation:revealcard .5s cubic-bezier(.16,1,.3,1) both;transform-origin:320px 210px}
.result.lose .phone-card{animation:revealcard .4s ease both;transform-origin:320px 210px}
@keyframes toastdown{to{transform:translateY(70px)}}
@keyframes discard{0%{transform:translate(0)}60%{transform:translate(40px,-75px) rotate(15deg)}100%{transform:translate(40px,-70px) rotate(10deg)}}
@keyframes ron{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes brake{0%{transform:translateY(-120px)}30%{transform:translateY(120px)}31%{transform:translateY(-120px)}60%{transform:translateY(120px)}61%{transform:translateY(-110px)}100%{transform:translateY(0);filter:blur(0)}}
@keyframes revealcard{from{transform:scaleX(.04) scaleY(.9)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.running .bread{transform:translateY(70px)}.result.lose .discard{transform:translate(40px,-70px) rotate(10deg)}}
/* A single stage wipe bridges the exit and the landing without adding UI. */
.playground.switching{overflow:hidden}
.playground.switching .scene{animation:none;pointer-events:none}
.playground.switching .scene *{animation-play-state:paused!important}
.playground::after{content:"";position:absolute;inset:-15% -20%;z-index:3;background:#a9211f;border-right:2px solid #edaa825c;transform:translateX(-125%) skewX(-14deg);pointer-events:none;visibility:hidden}
.playground.switching::after{visibility:visible;animation:stage-wipe .78s cubic-bezier(.65,0,.25,1) both}
.controls.switching{pointer-events:none}
@keyframes stage-wipe{0%{transform:translateX(-125%) skewX(-14deg)}100%{transform:translateX(125%) skewX(-14deg)}}
@media(prefers-reduced-motion:reduce){.playground.switching::after{display:none}}

/* The object is the primary control; retry is the sole auxiliary control. */
[hidden]{display:none!important}
#reset{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #f8eddbb0;border-radius:50%;background:transparent;color:var(--paper);font:700 15px Arial,sans-serif;transition:background .15s}
#reset::after{content:"";position:absolute;inset:-6px;border-radius:50%}
#reset:hover{background:#ffffff18}
#reset:active{background:#ffffff30}
#reset:disabled{pointer-events:none}
.verdict{text-shadow:0 4px 0 #68171180,0 12px 20px #4b100d70;filter:drop-shadow(2px 4px 2px #4d100b55)}
@media(max-width:650px){.controls{padding:23px 44px;min-height:80px}}
.scene:focus-visible{outline:none;filter:none}
.scene:focus-visible svg{filter:drop-shadow(0 24px 19px #60130d30) drop-shadow(0 0 3px #fff)}
/* First-pass motions for the ten additional events. */
.running .fishing-line{animation:fishing-pull 1.1s ease-in-out both}
.running .launch-rocket{animation:rocket-lift 1.2s ease-in both}
.running .rocket-flame{animation:flame-pulse .2s ease-in-out infinite;transform-origin:320px 263px}
.running .firework-rise{animation:firework-rise 1.2s ease-out both}
.result.win .firework-burst{animation:firework-bloom .5s ease-out both;transform-origin:320px 155px}
.running .clock-hands{animation:clock-spin 1s linear;transform-origin:320px 218px}
.result.win .clock-bells{animation:rattle .16s linear 5}
.running .vending-stock{animation:rattle .15s linear infinite}
.result.win .vending-can{animation:can-drop .4s ease-out both}
.running .umbrella-canopy{animation:umbrella-open 1s ease-out both;transform-origin:320px 150px}
@keyframes paper-pull{from{transform:translateY(65px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes bat-swing{0%,15%{transform:rotate(15deg)}65%{transform:rotate(95deg)}100%{transform:rotate(110deg)}}
@keyframes baseball-pitch{from{transform:translate(120px,-25px) scale(.6)}to{transform:translate(-80px,30px) scale(1)}}
@keyframes soccer-kick{from{transform:translateY(0) scale(1)}to{transform:translateY(-115px) scale(.6)}}
@keyframes basket-throw{0%{transform:translate(0,0)}55%{transform:translate(100px,-180px)}100%{transform:translate(188px,-100px)}}
@keyframes fishing-pull{0%,25%{transform:translateY(0)}100%{transform:translateY(-90px)}}
@keyframes rocket-lift{0%,20%{transform:translateY(20px)}100%{transform:translateY(-75px)}}
@keyframes flame-pulse{50%{transform:scaleY(.65)}}
@keyframes firework-rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-116px);opacity:.3}}
@keyframes firework-bloom{from{transform:scale(.15);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes clock-spin{to{transform:rotate(360deg)}}
@keyframes can-drop{from{transform:translateY(-24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes umbrella-open{from{transform:scaleX(.8)}to{transform:scaleX(2.8)}}
/* Four-event refinement: anticipation, contact and a distinct follow-through. */
.fortune-tube{transform-origin:320px 340px}
.running .fortune-tube{animation:fortune-rattle 1.5s ease-in-out both}
.running .fortune-stick{animation:fortune-stick-rise 1.5s ease-out both}
.fortune-slip{transform-origin:329px 190px}
.result .fortune-slip{animation:fortune-unfold .65s cubic-bezier(.2,.8,.2,1) both}
.result .fortune-ink{animation:fortune-print .3s .3s ease-out both}
.result.lose .fortune-slip{transform:rotate(-4deg)}
.diamond-bat{transform-origin:320px 310px}
.running .diamond-bat{animation:diamond-swing 1.4s cubic-bezier(.3,0,.2,1) both}
.bat-follow{transform:rotate(110deg)}
.diamond-ball{transform-origin:320px 245px}
.running .diamond-ball{animation:diamond-pitch 1.4s linear both}
.home-run{transform:translate(160px,-170px) scale(.6)}
.result.win .home-run{animation:diamond-homer .8s cubic-bezier(.12,.5,.3,1) both}
.caught-ball{transform:translate(66px,35px) scale(.9)}
.result.lose .caught-ball{animation:diamond-catch .36s ease-out both}
.result.lose .catch-mitt{animation:mitt-close .36s ease-out both;transform-origin:397px 268px}
.result.win .bat-contact{animation:contact-ring .3s ease-out both;transform-origin:320px 245px}
.goal-keeper{transform-origin:320px 220px}
.running .goal-keeper{animation:keeper-dive 1.5s ease-in-out both}
.result .goal-keeper{transform:translateX(-74px) rotate(-53deg)}
.kick-boot{transform-origin:261px 332px}
.running .kick-boot{animation:boot-strike 1.5s ease-in-out both}
.goal-ball{transform-origin:320px 326px}
.running .goal-ball{animation:penalty-flight 1.5s cubic-bezier(.2,.6,.3,1) both}
.goal-in{transform:translate(0,-80px) scale(.65)}
.result.win .goal-in{animation:goal-settle .7s ease-out both}
.result.win .goal-net{animation:goal-ripple .6s ease-out both;transform-origin:320px 200px}
.wide-shot{transform:translate(190px,-20px) scale(.8)}
.result.lose .wide-shot{animation:post-rebound .8s ease-out both}
.result.lose .goal-post{animation:post-shiver .35s linear both}
.shoot-hand{transform-origin:195px 349px}
.running .shoot-hand{animation:hand-release 1.6s ease-out both}
.hoop-ball{transform-origin:222px 297px}
.hoop-spin{transform-origin:222px 297px}
.running .hoop-ball{animation:hoop-arc 1.6s linear both}
.running .hoop-spin{animation:hoop-spin 1.6s linear both}
.swish-ball{transform:translate(189px,26px)}
.result.win .swish-ball{animation:hoop-drop .8s linear both}
.result.win .hoop-net{animation:net-swish .55s .12s ease-out both;transform-origin:411px 182px}
.rim-miss{transform:translate(293px,33px)}
.result.lose .rim-miss{animation:rim-bounce .8s linear both}
.result.lose .hoop-rim{animation:post-shiver .35s ease-out both}
@keyframes fortune-rattle{0%,100%{transform:none}10%,30%,50%{transform:rotate(-8deg) translateY(-8px)}20%,40%,60%{transform:rotate(8deg) translateY(-8px)}75%{transform:rotate(-3deg)}90%{transform:rotate(2deg)}}
@keyframes fortune-stick-rise{0%,50%{transform:translateY(70px);opacity:0}60%{opacity:1}75%{transform:translateY(-8px)}100%{transform:translateY(0);opacity:1}}
@keyframes fortune-unfold{0%{transform:translateY(80px) scaleY(.2);opacity:0}60%{transform:translateY(-6px) scaleY(1.04);opacity:1}100%{transform:translateY(0) scaleY(1);opacity:1}}
@keyframes fortune-print{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@keyframes diamond-swing{0%{transform:rotate(0)}28%{transform:rotate(-23deg)}53%{transform:rotate(-23deg)}70%{transform:rotate(73deg)}90%,100%{transform:rotate(110deg)}}
@keyframes diamond-pitch{0%{transform:translate(150px,-100px) scale(.65)}45%{transform:translate(90px,-60px) scale(.8)}75%,100%{transform:translate(0,0) scale(1)}}
@keyframes diamond-homer{0%{transform:translate(0,0) scale(1)}35%{transform:translate(85px,-120px) scale(.8)}100%{transform:translate(160px,-170px) scale(.6)}}
@keyframes diamond-catch{0%{transform:translate(0,0)}80%{transform:translate(70px,36px) scale(.9)}100%{transform:translate(66px,35px) scale(.9)}}
@keyframes mitt-close{0%{transform:scale(1.15) rotate(-8deg)}65%{transform:scale(.92) rotate(3deg)}100%{transform:none}}
@keyframes contact-ring{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
@keyframes boot-strike{0%,15%{transform:rotate(12deg) translateX(-12px)}35%{transform:rotate(-40deg) translateX(15px)}65%,100%{transform:none}}
@keyframes keeper-dive{0%,35%{transform:none}55%{transform:translate(-25px,-8px) rotate(-18deg)}100%{transform:translateX(-74px) rotate(-53deg)}}
@keyframes penalty-flight{0%,30%{transform:translate(0,0) scale(1)}55%{transform:translate(0,-100px) scale(.8)}100%{transform:translate(0,-136px) scale(.65)}}
@keyframes goal-settle{0%{transform:translate(0,-136px) scale(.65)}28%{transform:translate(0,-144px) scale(.6)}70%{transform:translate(0,-65px) scale(.65)}100%{transform:translate(0,-80px) scale(.65)}}
@keyframes goal-ripple{0%{transform:scale(1)}25%{transform:scale(1.04,.94)}55%{transform:scale(.98,1.02)}100%{transform:scale(1)}}
@keyframes post-rebound{0%{transform:translate(0,-136px) scale(.65)}35%{transform:translate(135px,-130px) scale(.65)}55%{transform:translate(166px,-160px) scale(.7)}100%{transform:translate(190px,-20px) scale(.8)}}
@keyframes post-shiver{20%,60%{transform:translateX(3px)}40%,80%{transform:translateX(-2px)}100%{transform:none}}
@keyframes hand-release{0%{transform:rotate(8deg)}20%{transform:rotate(-12deg)}45%,70%{transform:rotate(-20deg) translateY(-10px)}100%{transform:none}}
@keyframes hoop-arc{0%{transform:translate(0,0)}15%{transform:translate(-8px,10px)}40%{transform:translate(45px,-140px)}65%{transform:translate(115px,-195px)}85%{transform:translate(166px,-180px)}100%{transform:translate(189px,-151px)}}
@keyframes hoop-spin{to{transform:rotate(240deg)}}
@keyframes hoop-drop{0%{transform:translate(189px,-151px)}30%{transform:translate(189px,-90px)}65%{transform:translate(189px,32px)}82%{transform:translate(189px,-5px)}100%{transform:translate(189px,26px)}}
@keyframes net-swish{0%{transform:scale(1)}35%{transform:translateY(7px) scale(.8,1.3)}70%{transform:translateY(-2px) scale(1.06,.92)}100%{transform:none}}
@keyframes rim-bounce{0%{transform:translate(189px,-151px)}20%{transform:translate(224px,-126px)}45%{transform:translate(253px,-174px)}75%{transform:translate(281px,23px)}88%{transform:translate(289px,-6px)}100%{transform:translate(293px,33px)}}
/* Second group: tension, ignition, bloom and mechanical ringing. */
.rod-bend{transform-origin:171px 329px}
.running .rod-bend{animation:rod-tension 1.8s ease-in-out both}
.running .reel-line{animation:line-reel 1.8s ease-in-out both;transform-origin:389px 99px}
.running .float-bob{animation:float-nibble .3s .4s 3 ease-in-out}
.water-ripples{transform-origin:389px 304px}
.running .water-ripples{animation:water-rings .8s ease-out 2}
.result.win .caught-fish{animation:fish-wriggle .2s ease-in-out 4;transform-origin:389px 195px}
.result .hook-sway{animation:hook-swing .8s ease-out both;transform-origin:389px 179px}
.result .water-ripples{animation:water-rings .8s ease-out both}
.result .water-drops{animation:water-lift .5s ease-out both}
.result.win .rod-bend{animation:rod-recoil .5s ease-out both}
.rocket-ship{transform-origin:320px 200px}
.running .rocket-ship{animation:rocket-ignite 1.7s ease-in both}
.running .launch-smoke{animation:smoke-roll 1.7s ease-out both;transform-origin:320px 330px}
.engine-flame{transform-origin:320px 263px}
.running .engine-flame{animation:engine-flicker .18s linear infinite}
.rocket-away{transform:translateY(-75px) scale(.72)}
.result.win .rocket-away{animation:rocket-escape .8s ease-out both}
.result.win .engine-flame{animation:engine-flicker .2s linear 4}
.rocket-fall{transform:translate(40px,65px) rotate(28deg)}
.result.lose .rocket-fall{animation:rocket-stall .8s ease-out both}
.result .launch-smoke{animation:smoke-clear .8s ease-out both;transform-origin:320px 330px}
.result.lose .rocket-fumes{animation:fume-rise .8s ease-out both}
.running .fuse-spark{animation:fuse-burn .55s ease-out both;transform-origin:365px 302px}
.running .sky-shell{animation:shell-rise 1.8s ease-in-out both}
.sky-bloom{transform-origin:320px 145px}
.result.win .sky-bloom{animation:sky-expand 1s cubic-bezier(.16,1,.3,1) both}
.result.win .bloom-heart{animation:heart-fade .45s ease-out both}
.result.win .bloom-dust{animation:dust-fall 1.1s ease-out both;transform-origin:320px 145px}
.result.lose .fuse-smoke{animation:fume-rise .9s ease-out both}
.alarm-body{transform-origin:320px 325px}
.running .alarm-minute{animation:minute-advance 1.4s ease-out both;transform-origin:320px 218px}
.running .alarm-hour{animation:hour-advance 1.4s ease-out both;transform-origin:320px 218px}
.running .alarm-second{animation:second-tick 1.4s steps(12) both;transform-origin:320px 218px}
.result.win .alarm-body{animation:alarm-shake .1s linear 7}
.result.win .alarm-bells{animation:bell-rock .12s linear 7;transform-origin:320px 100px}
.result.win .alarm-hammer{animation:hammer-tap .1s linear 7;transform-origin:320px 110px}
.result.win .alarm-rings{animation:ring-fade .7s ease-out both}
.result.lose .alarm-body{animation:alarm-droop .5s ease-out both}
.result.lose .alarm-second{animation:second-stall .45s ease-out both;transform-origin:320px 218px}
.result.lose .empty-battery{animation:battery-reveal .4s ease-out both}
@keyframes rod-tension{0%,20%{transform:rotate(0)}45%{transform:rotate(4deg)}70%{transform:rotate(7deg)}85%{transform:rotate(-5deg)}100%{transform:none}}
@keyframes line-reel{0%{transform:translateY(-22px) rotate(-5deg)}30%,65%{transform:none}75%{transform:translateY(8px)}100%{transform:translateY(-106px)}}
@keyframes float-nibble{50%{transform:translateY(9px)}}
@keyframes water-rings{from{transform:scale(.3);opacity:.8}to{transform:scale(1.8);opacity:0}}
@keyframes fish-wriggle{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}100%{transform:none}}
@keyframes hook-swing{0%{transform:rotate(15deg)}35%{transform:rotate(-10deg)}70%{transform:rotate(4deg)}100%{transform:none}}
@keyframes water-lift{from{transform:translateY(14px);opacity:1}to{transform:translateY(-15px);opacity:0}}
@keyframes rod-recoil{30%{transform:rotate(-4deg)}65%{transform:rotate(2deg)}100%{transform:none}}
@keyframes rocket-ignite{0%,15%{transform:translateY(0)}20%,30%{transform:translate(2px,2px)}25%,35%{transform:translate(-2px,2px)}50%{transform:translateY(-5px)}100%{transform:translateY(-40px) scale(.9)}}
@keyframes smoke-roll{from{transform:scale(.3);opacity:0}30%{opacity:.7}to{transform:scale(1.8,.8);opacity:.1}}
@keyframes engine-flicker{50%{transform:scale(.85,.7)}100%{transform:scale(1,1)}}
@keyframes rocket-escape{from{transform:translateY(-40px) scale(.9)}to{transform:translateY(-75px) scale(.72)}}
@keyframes rocket-stall{0%{transform:translateY(-40px) scale(.9)}30%{transform:translate(0,-28px) rotate(5deg)}75%{transform:translate(35px,72px) rotate(30deg)}100%{transform:translate(40px,65px) rotate(28deg)}}
@keyframes smoke-clear{from{transform:scale(1);opacity:.6}to{transform:scale(1.8,.4);opacity:0}}
@keyframes fume-rise{from{transform:translateY(12px);opacity:.2}to{transform:translateY(-20px);opacity:.65}}
@keyframes fuse-burn{0%{opacity:1;transform:scale(.5)}50%{transform:scale(1.2)}100%{opacity:0;transform:scale(.4)}}
@keyframes shell-rise{0%,30%{transform:none;opacity:0}35%{opacity:1}100%{transform:translateY(-132px);opacity:.9}}
@keyframes sky-expand{0%{transform:scale(.02);opacity:1}50%{transform:scale(.85);opacity:1}100%{transform:scale(1);opacity:.8}}
@keyframes heart-fade{to{opacity:0;transform:scale(1.2)}}
@keyframes dust-fall{0%{transform:scale(.1);opacity:0}35%{opacity:1}100%{transform:translateY(28px) scale(1.35);opacity:.3}}
@keyframes minute-advance{from{transform:rotate(-35deg)}to{transform:none}}
@keyframes hour-advance{to{transform:rotate(-124deg)}}
@keyframes second-tick{to{transform:rotate(360deg)}}
@keyframes alarm-shake{25%{transform:translateX(-2px) rotate(-2deg)}75%{transform:translateX(2px) rotate(2deg)}100%{transform:none}}
@keyframes bell-rock{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}100%{transform:none}}
@keyframes hammer-tap{50%{transform:rotate(16deg)}}
@keyframes ring-fade{0%,35%{opacity:1}100%{opacity:.3}}
@keyframes alarm-droop{50%{transform:rotate(-5deg)}100%{transform:rotate(-2deg)}}
@keyframes second-stall{30%{transform:rotate(12deg)}65%{transform:rotate(-4deg)}100%{transform:none}}
@keyframes battery-reveal{from{opacity:0}to{opacity:1}}
/* Third group: dispensing, opening, reel inertia and a physical tile reveal. */
.running .drink-choice{animation:choice-press 1.6s ease-out both;transform-origin:319px 219px}
.running .inserted-coin{animation:coin-insert .55s ease-in both;transform-origin:370px 244px}
.running .selected-can{animation:can-feed 1.6s ease-in both;transform-origin:319px 150px}
.pickup-flap{transform-origin:319px 295px}
.result.win .pickup-flap{animation:flap-open .7s ease-in-out both}
.drink-drop{transform-origin:319px 308px;transform:translateY(19px) rotate(90deg)}
.result.win .drink-drop{animation:drink-deliver .8s ease-out both}
.result.lose .selected-can{animation:can-jam .55s ease-out both;transform-origin:319px 150px}
.result.lose .sold-out{animation:soldout-show .45s ease-out both}
.result.lose .returned-coin{animation:coin-return .75s ease-out both;transform-origin:385px 339px}
.umbrella-fabric{transform-origin:320px 175px}
.running .umbrella-fabric{animation:fabric-open 1.4s cubic-bezier(.2,.8,.3,1) both}
.running .umbrella-runner{animation:runner-slide 1.4s ease-out both}
.running .umbrella-wind{animation:gust-pass 1.4s ease-out both}
.result.win .umbrella-fabric{animation:fabric-settle .65s ease-out both}
.result.win .umbrella-wind{animation:gust-pass .6s ease-out both}
.result.lose .umbrella-inverted{animation:fabric-flip .75s ease-out both}
.result.lose .umbrella-frame{animation:wind-tug .65s ease-out both;transform-origin:320px 310px}
.result.lose .umbrella-wind{animation:gust-pass .65s ease-out both}
.slot-strip{animation:slot-idle .18s linear infinite}
.running .slot-strip{animation:slot-coast 1.85s cubic-bezier(.12,.78,.2,1) both}
.slot-lever{transform-origin:509px 184px}
.running .slot-lever{animation:lever-pull .45s ease-out both}
.result .slot-stop{animation:reel-catch .35s ease-out both}
.result.win .slot-lamps{animation:lamp-pulse .28s ease-in-out 3}
.result.lose .slot-frame{animation:stop-clunk .28s ease-out both}
.running .tsumo-move{animation:tsumo-travel 1.6s cubic-bezier(.3,.7,.2,1) both;transform-origin:317px 265px}
.tsumo-reveal{transform-origin:317px 265px}
.result .tsumo-reveal{animation:tile-flip .25s ease-out both}
.result.win .tsumo-place{animation:tile-land .4s ease-out both}
.result.lose .discard-slide{animation:tile-discard .7s ease-in-out both;transform-origin:317px 265px;transform:translate(35px,-70px) rotate(10deg)}
.result.win .yakuman-text{animation:yakuman-reveal .4s .3s ease-out both}
.result.lose .ron-call{animation:ron-hit .25s .5s ease-out both;transform-origin:320px 95px}
@keyframes choice-press{0%,100%{transform:none}8%,20%{transform:translateY(2px) scaleX(.94);fill:#f2d198}25%,75%{fill:#f2d198}}
@keyframes coin-insert{0%{transform:translate(42px,-12px) scaleX(1);opacity:1}70%{transform:translate(0) scaleX(.3);opacity:1}100%{transform:translateY(3px) scaleX(.05);opacity:0}}
@keyframes can-feed{0%,45%{transform:none}55%{transform:rotate(-5deg) translateY(4px)}65%{transform:rotate(4deg) translateY(10px)}100%{transform:translateY(100px)}}
@keyframes flap-open{0%{transform:scaleY(1)}25%,65%{transform:scaleY(.15)}100%{transform:scaleY(1)}}
@keyframes drink-deliver{0%{transform:translateY(-58px);opacity:0}15%{opacity:1}55%{transform:translateY(22px) rotate(105deg)}75%{transform:translateY(10px) rotate(85deg)}100%{transform:translateY(19px) rotate(90deg);opacity:1}}
@keyframes can-jam{0%{transform:translateY(15px) rotate(5deg)}35%{transform:translateY(4px) rotate(-4deg)}65%{transform:translateY(3px) rotate(2deg)}100%{transform:none}}
@keyframes soldout-show{from{opacity:0}40%{opacity:1}60%{opacity:.4}to{opacity:1}}
@keyframes coin-return{0%{transform:translateY(-65px) scaleX(.3);opacity:0}25%{opacity:1}60%{transform:translateY(4px) scaleX(1)}80%{transform:translateY(-8px) scaleX(.5)}100%{transform:none;opacity:1}}
@keyframes fabric-open{0%{transform:translateY(36px) scale(.08,1.25)}35%{transform:translateY(20px) scale(.16,1.1)}70%{transform:scale(1.05,.96)}85%{transform:scale(.98,1.02)}100%{transform:scale(1)}}
@keyframes runner-slide{0%,20%{transform:translateY(57px)}70%{transform:translateY(-3px)}100%{transform:none}}
@keyframes gust-pass{0%{transform:translateX(-35px);opacity:0}30%{opacity:.6}100%{transform:translateX(55px);opacity:0}}
@keyframes fabric-settle{0%{transform:scale(1.02,.96)}40%{transform:scale(.99,1.02)}100%{transform:none}}
@keyframes fabric-flip{0%{transform:scaleY(-.65)}35%{transform:scaleY(.15)}60%{transform:scaleY(1.1)}80%{transform:scaleY(.95)}100%{transform:scaleY(1)}}
@keyframes wind-tug{0%{transform:rotate(0)}35%{transform:translateX(7px) rotate(5deg)}65%{transform:translateX(-3px) rotate(-2deg)}100%{transform:none}}
@keyframes slot-idle{from{transform:translateY(-240px)}to{transform:translateY(0)}}
@keyframes slot-coast{0%{transform:translateY(-960px);filter:blur(2px)}75%{filter:blur(.8px)}94%{transform:translateY(7px);filter:blur(0)}100%{transform:translateY(0);filter:blur(0)}}
@keyframes lever-pull{0%{transform:rotate(0)}35%{transform:rotate(28deg)}70%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes reel-catch{0%{transform:translateY(6px)}45%{transform:translateY(-3px)}100%{transform:none}}
@keyframes lamp-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes stop-clunk{30%{transform:translateY(2px)}65%{transform:translateY(-1px)}100%{transform:none}}
@keyframes tsumo-travel{0%{transform:translate(160px,-105px) rotate(8deg)}35%{transform:translate(130px,-115px) rotate(12deg)}80%{transform:translate(-3px,-6px) rotate(-2deg)}100%{transform:none}}
@keyframes tile-flip{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
@keyframes tile-land{from{transform:translateY(-8px)}60%{transform:translateY(2px)}to{transform:none}}
@keyframes tile-discard{0%,35%{transform:none}70%{transform:translate(35px,-78px) rotate(13deg)}100%{transform:translate(35px,-70px) rotate(10deg)}}
@keyframes yakuman-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ron-hit{from{opacity:0;transform:translateY(-5px) scale(1.15)}to{opacity:1;transform:none}}
/* Fourth group: boot sequence, reveal, write/commit and a falling coin. */
.pc-power{transform-origin:442px 288px}
.running .pc-power{animation:power-press .3s ease-out both}
.running .pc-led{animation:led-on .6s ease-out both}
.boot-display{transform-origin:320px 180px}
.running .boot-display{animation:screen-wake .65s ease-out both}
.running .boot-spinner{animation:boot-spin .8s .25s linear 2;transform-origin:320px 180px}
.running .boot-progress{stroke-dasharray:92;animation:boot-load 1.9s ease-in-out both}
.result.win .pc-desktop{animation:desktop-arrive .65s ease-out both}
.result.win .pc-taskbar{animation:taskbar-rise .5s .15s ease-out both}
.result.lose .crash-screen{animation:screen-crash .25s steps(2) both}
.result.lose .crash-lines{animation:crash-print .4s .15s ease-out both}
.running .gacha-touch{animation:power-press .3s ease-out both}
.running .gacha-orbit{animation:pack-orbit 1.7s ease-out both;transform-origin:320px 188px}
.running .gacha-card{animation:pack-rise 1.7s ease-in-out both;transform-origin:320px 190px}
.running .gacha-sleeve{animation:sleeve-down 1.7s ease-in-out both}
.gacha-card{transform-origin:320px 190px}
.result.win .gacha-card{transform:translateY(-12px);animation:rare-reveal .65s cubic-bezier(.16,1,.3,1) both}
.result.lose .gacha-card{transform:translateY(8px);animation:plain-reveal .55s ease-out both}
.result .gacha-rank{animation:rank-print .25s .2s ease-out both}
.result.win .card-gleam{animation:foil-sweep .65s .2s ease-out both}
.result.win .gacha-sparks{animation:pack-sparks .65s ease-out both;transform-origin:320px 190px}
.file-progress{transform-origin:205px 268px;transform:scaleX(.02)}
.running .file-progress{animation:file-write 1.8s ease-in-out both}
.running .save-writing{stroke-dasharray:119;animation:line-write 1.8s ease-out both}
.result .save-status{animation:save-message .35s ease-out both}
.result.win .save-sheet{animation:commit-settle .45s ease-out both;transform-origin:317px 290px}
.result.win .save-complete-line{stroke-dasharray:214;animation:commit-line .4s ease-out both}
.result.lose .save-sheet{animation:write-error .3s ease-out both}
.result.lose .restart-scan{animation:restart-sweep 1.1s ease-in-out infinite}
.toss-coin,.coin-turn,.coin-back{transform-origin:320px 236px}
.coin-back{opacity:0;transform:scaleX(-1)}
.running .toss-coin{animation:coin-toss 1.76s linear both}
.running .coin-turn{animation:coin-turn .22s linear 8}
.running .coin-front{animation:front-face .22s steps(1) 8}
.running .coin-back{animation:back-face .22s steps(1) 8}
.coin-ground{transform-origin:320px 371px}
.running .coin-ground{animation:toss-shadow 1.76s ease-in-out both}
.coin-drop{transform:translateY(66px) scale(.9,.68)}
.result.win .coin-drop{animation:coin-land .8s ease-out both}
.result.lose .coin-drop{animation:coin-wobble .8s ease-out both}
.result .coin-ground{animation:land-shadow .8s ease-out both}
@keyframes power-press{40%{transform:translateY(2px)}100%{transform:none}}
@keyframes led-on{0%{opacity:.3}35%{opacity:1}50%{opacity:.6}100%{opacity:1}}
@keyframes screen-wake{0%{transform:scaleY(.01);opacity:0}35%{transform:scaleY(.03);opacity:1}100%{transform:scaleY(1);opacity:1}}
@keyframes boot-spin{to{transform:rotate(360deg)}}
@keyframes boot-load{0%,20%{stroke-dashoffset:92}60%{stroke-dashoffset:40}100%{stroke-dashoffset:0}}
@keyframes desktop-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes taskbar-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes screen-crash{0%{transform:translateX(3px);opacity:.7}50%{transform:translateX(-2px);opacity:1}100%{transform:none;opacity:1}}
@keyframes crash-print{from{opacity:0;transform:translateY(4px)}to{opacity:.7;transform:none}}
@keyframes pack-orbit{0%{transform:rotate(0);opacity:.5}70%{opacity:1}100%{transform:rotate(160deg);opacity:.5}}
@keyframes pack-rise{0%{transform:translateY(18px)}20%{transform:translate(1px,20px) rotate(2deg)}30%{transform:translate(-2px,18px) rotate(-2deg)}45%{transform:translate(1px,14px) rotate(1deg)}100%{transform:translateY(-28px)}}
@keyframes sleeve-down{0%,45%{transform:none}100%{transform:translateY(18px);opacity:.3}}
@keyframes rare-reveal{0%{transform:translateY(-28px) scaleX(.04)}55%{transform:translateY(-15px) scale(1.06)}100%{transform:translateY(-12px) scale(1)}}
@keyframes plain-reveal{0%{transform:translateY(-28px) scaleX(.04)}50%{transform:translateY(12px) scaleX(1)}75%{transform:translateY(5px)}100%{transform:translateY(8px)}}
@keyframes rank-print{from{opacity:0}to{opacity:1}}
@keyframes foil-sweep{0%{transform:translateX(-40px);opacity:0}25%{opacity:.55}100%{transform:translateX(130px);opacity:0}}
@keyframes pack-sparks{from{opacity:1;transform:scale(.65)}to{opacity:0;transform:scale(1.15)}}
@keyframes file-write{0%{transform:scaleX(.02)}20%{transform:scaleX(.2)}45%{transform:scaleX(.45)}70%{transform:scaleX(.8)}90%,100%{transform:scaleX(.98)}}
@keyframes line-write{0%,30%{stroke-dashoffset:119}80%,100%{stroke-dashoffset:0}}
@keyframes save-message{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes commit-settle{0%{transform:translateY(-3px) rotate(.6deg)}60%{transform:translateY(1px)}100%{transform:none}}
@keyframes commit-line{from{stroke-dashoffset:214}to{stroke-dashoffset:0}}
@keyframes write-error{25%{transform:translateX(-3px)}55%{transform:translateX(3px)}80%{transform:translateX(-1px)}100%{transform:none}}
@keyframes restart-sweep{0%{transform:translateX(0);opacity:0}20%{opacity:.7}100%{transform:translateX(160px);opacity:0}}
@keyframes coin-toss{0%{transform:none}15%{transform:translateY(-67px) scale(.93)}40%,50%{transform:translateY(-118px) scale(.86)}75%{transform:translateY(-76px) scale(.93)}100%{transform:none}}
@keyframes coin-turn{0%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.04)}50%{transform:scaleX(-1)}}
@keyframes front-face{0%,100%{opacity:1}25%{opacity:0}75%{opacity:1}}
@keyframes back-face{0%,100%{opacity:0}25%{opacity:1}75%{opacity:0}}
@keyframes toss-shadow{0%,100%{transform:scaleX(1);opacity:.25}45%{transform:scaleX(.5);opacity:.1}}
@keyframes coin-land{0%{transform:translateY(0) scale(1)}55%{transform:translateY(70px) scale(.92,.57)}75%{transform:translateY(52px) scale(.9,.8)}100%{transform:translateY(66px) scale(.9,.68)}}
@keyframes coin-wobble{0%{transform:translateY(0) scale(1)}55%{transform:translateY(70px) rotate(-8deg) scale(.92,.57)}75%{transform:translateY(58px) rotate(5deg) scale(.9,.8)}90%{transform:translateY(66px) rotate(-2deg) scale(.9,.68)}100%{transform:translateY(66px) scale(.9,.68)}}
@keyframes land-shadow{0%{transform:scaleX(.8);opacity:.15}55%{transform:scaleX(1.1);opacity:.3}100%{transform:scaleX(1);opacity:.25}}