#cutscene{position:fixed;inset:0;z-index:30;height:100dvh;display:flex;flex-direction:column;background:#17182b;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:hidden}
.film-top,.film-bottom{width:min(100%,680px);margin:0 auto;flex:none}
.film-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
#filmTitle{font:700 11px/1.4 system-ui;letter-spacing:.17em;color:#dfc5a2}
.film-top button{font-size:12px;min-height:36px;padding:7px 12px;background:transparent}
#filmPicture{min-height:80px;flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;margin:5px 0}
#filmPicture svg{width:100%;height:100%;max-width:680px;display:block}
#filmCaption{font:clamp(17px,4.5vw,23px)/1.35 Georgia,serif;letter-spacing:-.02em;text-align:center;min-height:2.7em;margin:8px 0 14px;color:#f7e7ce}
.film-timeline{height:3px;background:#ffffff16;border-radius:3px;overflow:hidden;margin-bottom:12px}
#filmProgress{display:block;height:100%;width:0;background:#edb276}
.film-controls{display:flex;gap:8px}
.film-controls button{font-size:13px;min-height:42px;padding:9px 12px}
#filmContinue{flex:1}
.film-steam{fill:#a6bd7850;animation:filmSteam 2s ease-out infinite}
.film-gear{animation:filmGear 3s linear infinite;transform-origin:0 0}
.film-belt{animation:filmBelt 1s linear infinite}
.film-food-in{animation:filmFoodIn 5s ease-in-out infinite}
.film-food-out{animation:filmFoodOut 5s ease-out infinite}
.film-indicator{animation:filmGlow .9s ease-in-out infinite alternate}
.film-gloat{transform-box:fill-box;transform-origin:center bottom;animation:filmGloat 1s ease-in-out infinite alternate}
.film-thief{animation:filmTheft 6.5s ease-in-out both}
.film-porch-sweet{animation:filmSteal .75s ease-in both}
.film-neighbour{animation:filmNeighbour 1.2s ease-in-out both}
.film-lantern{transform-origin:0 -25px;animation:filmSwing 2s ease-in-out infinite alternate}
.film-rainbow{fill:none;stroke-linecap:round;animation:filmRainbow 4.5s ease-out both}
.film-deal{animation:filmDeal 1.2s cubic-bezier(.2,.8,.3,1) both;transform-origin:center;transform-box:fill-box}
.film-pair{animation:filmPair 1s ease-in-out both;transform-origin:center;transform-box:fill-box}
.film-run{transform-box:fill-box;transform-origin:center;animation:filmRun .45s ease-in-out infinite alternate}
.film-rolling{animation:filmRoll 3.4s linear infinite;opacity:0}
.film-net{animation:filmNet 2s cubic-bezier(.2,.8,.4,1) both}
.film-wobble{transform-box:fill-box;transform-origin:center;animation:filmWobble .7s ease-in-out infinite alternate}
.film-treat-rain{animation:filmTreatRain 3s ease-out infinite}
.broken .film-gear,.broken .film-belt{animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-out}
.broken .film-food-in,.broken .film-food-out{opacity:0;animation:none}
.film-spark{animation:filmSpark .5s steps(2) 4 both}
.film-paused *{animation-play-state:paused!important}
.film-finished *{animation-play-state:paused!important}
.film-finished .film-food-out{animation:none;transform:translateX(60px);opacity:1}
.film-finished .film-food-in{animation:none;opacity:0}
.film-finished .film-treat-rain,.film-finished .film-net,.film-finished .film-pair{animation:none;transform:none;opacity:1}
@keyframes filmTheft{0%{transform:translate(-70px,412px)}18%,26%{transform:translate(105px,410px)}43%,51%{transform:translate(270px,387px)}68%,76%{transform:translate(443px,411px)}100%{transform:translate(620px,420px)}}
@keyframes filmSteal{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(35px,44px) rotate(70deg)}}
@keyframes filmNeighbour{0%{opacity:0}40%,100%{opacity:1}}
@keyframes filmGear{to{transform:rotate(360deg)}}
@keyframes filmBelt{to{stroke-dashoffset:-26}}
@keyframes filmFoodIn{0%,10%{transform:translateX(0);opacity:1}42%{transform:translateX(95px);opacity:1}44%,100%{transform:translateX(95px);opacity:0}}
@keyframes filmFoodOut{0%,48%{transform:translateX(-20px);opacity:0}55%{opacity:1}95%,100%{transform:translateX(90px);opacity:1}}
@keyframes filmSteam{0%{transform:translateY(5px);opacity:.2}100%{transform:translateY(-28px);opacity:0}}
@keyframes filmGlow{to{opacity:.4}}
@keyframes filmGloat{to{rotate:5deg}}
@keyframes filmSwing{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes filmRainbow{0%,15%{opacity:0;stroke-dasharray:0 1000}75%,100%{opacity:1;stroke-dasharray:600 1000}}
@keyframes filmDeal{from{opacity:0;transform:translate(170px,180px) rotate(70deg) scale(.2)}to{opacity:1;transform:none}}
@keyframes filmPair{0%{transform:scaleX(.02);opacity:.3}100%{transform:scaleX(1);opacity:1}}
@keyframes filmRun{from{rotate:-7deg}to{rotate:7deg}}
@keyframes filmRoll{0%{opacity:0;transform:translateY(-40px)}10%{opacity:1}100%{opacity:1;transform:translateY(330px)}}
@keyframes filmNet{0%{transform:translateY(-520px)}70%{transform:translateY(15px)}100%{transform:translateY(0)}}
@keyframes filmWobble{from{rotate:-3deg}to{rotate:3deg}}
@keyframes filmTreatRain{0%{opacity:0;transform:translateY(-80px)}15%{opacity:1}100%{opacity:0;transform:translateY(340px) rotate(14deg)}}
@keyframes filmSpark{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#cutscene *{animation:none!important;transition:none!important}.film-thief{transform:translate(270px,387px)}.film-porch-sweet{opacity:.5}.film-food-out{transform:translateX(55px)}.film-rolling{opacity:1}.film-rainbow{opacity:1}}
@media(max-height:620px){#cutscene{padding-top:8px;padding-bottom:8px}.film-top button{min-height:30px}#filmCaption{font-size:16px;margin:5px 0;min-height:2.7em}.film-controls button{min-height:38px}.film-timeline{margin-bottom:7px}}