/* Action scenes replace the shop artwork in the existing game panel. */
.shop-scene.has-action-scene>svg,.shop-scene.has-action-scene>.scene-toolbar,.shop-scene.has-action-scene>.scene-footer{display:none}
#actionCinema{display:block;position:static;width:100%;padding:0;background:#f8fbf8;color:#253e45;border:0;border-radius:0;box-sizing:border-box}
#actionCinema .cinema-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px}
#actionCinema h2{font-size:17px;margin:3px 0}#actionCinema small{font-size:11px;color:#526e70}#cinemaSkip{font-size:12px;min-height:36px;padding:6px 10px}
#actionCinema .cinema-stage{position:relative;overflow:hidden;background:#dfe9e5}
#actionCinema svg{display:block;width:100%;height:auto;aspect-ratio:12/5;min-height:170px;max-height:300px;margin:0;border-radius:0;animation:shot-in .5s ease-out both}
#cinemaCaption{padding:8px 12px;margin:0;font-size:13px;line-height:1.4;min-height:20px;color:#4b6169}
#actionCinema progress{display:block;width:100%;height:4px;accent-color:#3d8775}#actionCinema [hidden]{display:none!important}
.scene-result{padding:12px;border-top:1px solid #d5dfd9;background:#fff}.scene-result h3{margin:0 0 6px;font-size:16px}.scene-result p{white-space:pre-line;font-size:13px;line-height:1.5;margin:0 0 10px}.scene-result button{width:100%}
.shop-stage .shop-scene{scroll-margin-top:calc(var(--metrics-height,100px) + 8px)}
@media(max-width:900px){#actionCinema svg{max-height:260px}#actionCinema .cinema-head{padding:6px 10px}#actionCinema h2{font-size:15px}.scene-result{padding:10px}}

/* Story beats: subtitle per beat and a segmented timeline. */
#actionCinema .subs{position:absolute;left:0;right:0;bottom:10px;height:30px;display:flex;justify-content:center;pointer-events:none}
#actionCinema .subs span{position:absolute;bottom:0;max-width:88%;box-sizing:border-box;padding:5px 13px;border-radius:999px;background:rgba(13,32,44,.8);color:#fff;font-size:14px;line-height:1.35;text-align:center;opacity:0;animation:sub var(--len) ease var(--t) both;animation-fill-mode:none;box-shadow:0 2px 8px #0b223340}
#actionCinema .subs span.last{opacity:1;animation:sub-last .45s ease var(--t) both}
#actionCinema .beat-bar{position:absolute;left:10px;right:10px;top:8px;display:flex;gap:4px;pointer-events:none}
#actionCinema .beat-bar i{flex:1;height:3px;border-radius:2px;background:#ffffff70;overflow:hidden;position:relative}
#actionCinema .beat-bar i:after{content:'';position:absolute;inset:0;background:#fff;transform-origin:left;animation:beat-fill var(--len) linear var(--t) both}
@keyframes sub{0%{opacity:0;translate:0 6px}10%,90%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes sub-last{from{opacity:0;translate:0 6px}}
@keyframes beat-fill{from{transform:scaleX(0)}}
@keyframes shot-in{from{opacity:.2;filter:blur(2px)}}
@media(max-width:600px){#actionCinema svg{min-height:150px}#actionCinema .subs{position:relative;bottom:auto;height:34px;background:#16303b}#actionCinema .subs span{bottom:5px;font-size:12px;padding:4px 10px;box-shadow:none;background:transparent}}

/* Camera and generic timed effects (--t delay, --d duration). Base styles are the final frame. */
#actionCinema .cam{animation:cam var(--dur,5s) ease-in-out both}
@keyframes cam{from{scale:1}to{scale:1.07}}
#actionCinema .a-in{animation:a-in .45s ease-out var(--t,0s) both}
#actionCinema .a-in.snap{animation:a-snap-in .01s linear var(--t,0s) both}
#actionCinema .a-out{opacity:0;animation:a-out .35s ease-in var(--t,0s) both}
#actionCinema .a-out.snap{animation:a-out .01s linear var(--t,0s) both}
#actionCinema .a-pop{transform-box:fill-box;transform-origin:center;animation:a-pop .5s cubic-bezier(.3,1.6,.5,1) var(--t,0s) both}
#actionCinema .a-move{animation:a-move var(--d,.8s) cubic-bezier(.33,.8,.4,1) var(--t,0s) both}
#actionCinema .a-to{translate:var(--x,0) var(--y,0);animation:a-to var(--d,.8s) ease-in-out var(--t,0s) both}
#actionCinema .a-grow,#actionCinema .a-flap,#actionCinema .a-flap2{transform-box:fill-box;transform-origin:bottom;animation:a-grow var(--d,.5s) ease-out var(--t,0s) both}
#actionCinema .a-growx{animation:a-reveal var(--d,.8s) ease-out var(--t,0s) both}
#actionCinema .a-growx2{transform-box:fill-box;transform-origin:center;animation:a-growx2 var(--d,2s) ease-out var(--t,0s) both}
#actionCinema .a-stamp{transform-box:fill-box;transform-origin:center;animation:a-stamp .45s cubic-bezier(.2,1.4,.5,1) var(--t,0s) both}
#actionCinema .a-flash{opacity:0;animation:a-flash .55s ease-out var(--t,0s) both}
#actionCinema .a-draw path{stroke-dasharray:100;animation:a-draw var(--d,1s) ease-out var(--t,0s) both}
#actionCinema .a-dim{opacity:var(--o,.72);animation:a-dim 1s ease-in var(--t,0s) both}
#actionCinema .a-lift{opacity:0;animation:a-lift var(--d,1s) ease-out var(--t,0s) both}
#actionCinema .a-up{translate:0 -250px;animation:a-up var(--d,1.2s) ease-in-out var(--t,0s) both}
#actionCinema .a-down{animation:a-down var(--d,1.2s) ease-in var(--t,0s) both}
#actionCinema .a-door{transform-box:fill-box;transform-origin:left;scale:.12 1;animation:a-door .6s ease-in var(--t,0s) both}
#actionCinema .a-jump{translate:-26px -34px;rotate:-20deg;animation:a-jump .8s ease-out var(--t,0s) both}
#actionCinema .a-float{opacity:0;animation:a-float 1.7s ease-out var(--t,0s) infinite}
#actionCinema .a-pulse{animation:a-pulse .7s ease-in-out infinite alternate}
#actionCinema .a-blink{animation:a-blink .7s steps(2,start) infinite}
#actionCinema .a-spin{transform-box:fill-box;transform-origin:center;animation:spin .8s linear var(--t,0s) var(--n,infinite)}#actionCinema .a-spin.back{animation-direction:reverse}
#actionCinema .a-spin-rev{transform-box:fill-box;transform-origin:center;animation:spin 1.2s linear infinite reverse}
#actionCinema .a-spin-slow{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
#actionCinema .a-ring{animation:a-ring 1s ease-out var(--t,0s) infinite}
#actionCinema .a-flow path{animation:flow .7s linear infinite}
#actionCinema .a-dots circle{animation:dot .9s ease-in-out infinite}#actionCinema .a-dots circle:nth-child(2){animation-delay:.15s}#actionCinema .a-dots circle:nth-child(3){animation-delay:.3s}
#actionCinema .a-bob{animation:bob .45s ease-in-out infinite alternate}
#actionCinema .a-sway{animation:sway 2.8s ease-in-out infinite alternate}
#actionCinema .a-lamp{animation:lamp 3s ease-in-out infinite alternate}
#actionCinema .a-pass{animation:pass 7s linear infinite}
#actionCinema .a-drift-slow{animation:drift 45s linear infinite}
#actionCinema .a-scroll-far{animation:drift 10s linear infinite}
#actionCinema .a-scroll-mid{animation:drift 3.6s linear infinite}
#actionCinema .a-road{animation:road .45s linear infinite}
#actionCinema .bg-still .a-scroll-far,#actionCinema .bg-still .a-scroll-mid,#actionCinema .bg-still .a-road{animation-play-state:paused}
#actionCinema .a-birds{animation:birds 9s linear infinite}
#actionCinema .a-snow{animation:snow 4s linear var(--t,0s) infinite}
#actionCinema .a-rain{animation:rain .7s linear var(--t,0s) infinite}
#actionCinema .a-drip{animation:drip 1.3s ease-in var(--t,0s) infinite}
#actionCinema .a-leaf{animation:leaf 5s linear var(--t,0s) infinite}
#actionCinema .a-steam{animation:steam 1.6s ease-out infinite}
#actionCinema .a-route{animation:route 3s ease-in-out var(--t,0s) both}
#actionCinema .a-feed{animation:feed 4.5s linear var(--t,0s) infinite}
#actionCinema .a-ripple{transform-box:fill-box;transform-origin:center;animation:ripple 2.2s ease-out var(--t,0s) infinite}
#actionCinema .a-float-bob{animation:bob .9s ease-in-out infinite alternate}
#actionCinema .a-neon{animation:neon 2.4s linear infinite}
#actionCinema .a-tv{animation:lamp 1.4s ease-in-out infinite alternate}
#actionCinema .a-clock-h{animation:spin 50s linear infinite}#actionCinema .a-clock-m{animation:spin 6s linear infinite}
@keyframes a-in{from{opacity:0;translate:0 8px}}@keyframes a-snap-in{from{opacity:0}}@keyframes a-out{from{opacity:1}to{opacity:0}}
@keyframes a-pop{from{opacity:0;scale:.2}}@keyframes a-move{from{translate:var(--x,0) var(--y,0)}}@keyframes a-to{from{translate:0 0}}
@keyframes a-grow{from{scale:1 0}}@keyframes a-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes a-growx2{from{scale:.1 1}}
@keyframes a-stamp{from{opacity:0;scale:2.4}}@keyframes a-flash{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}@keyframes a-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes a-dim{from{opacity:0}}@keyframes a-lift{from{opacity:.88}}@keyframes a-up{from{translate:0 0}}@keyframes a-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes a-door{from{scale:1 1}}@keyframes a-jump{from{translate:0 12px;rotate:40deg;opacity:0}}
@keyframes a-float{0%{opacity:0;translate:0 0}25%{opacity:1}100%{opacity:0;translate:0 -42px}}
@keyframes a-pulse{to{opacity:.3}}@keyframes a-blink{50%{opacity:.15}}@keyframes spin{to{rotate:360deg}}
@keyframes a-ring{from{opacity:1}to{opacity:.15}}@keyframes flow{to{stroke-dashoffset:-18}}@keyframes dot{0%,100%{translate:0 0}40%{translate:0 -4px}}
@keyframes bob{to{translate:0 -2px}}@keyframes sway{from{rotate:-2deg}to{rotate:2deg}}@keyframes lamp{from{opacity:.75}to{opacity:1}}
@keyframes pass{from{translate:-40px 0}to{translate:260px 0}}@keyframes drift{to{translate:-720px 0}}@keyframes road{to{stroke-dashoffset:86}}
@keyframes birds{from{translate:-80px 70px}to{translate:800px 30px}}@keyframes snow{from{translate:0 -10px}to{translate:var(--x,0) 320px}}@keyframes rain{to{translate:-24px 320px}}
@keyframes drip{from{translate:0 0;opacity:1}85%{opacity:1}to{translate:0 200px;opacity:0}}@keyframes leaf{from{translate:0 0;rotate:0deg}to{translate:var(--x,0) 330px;rotate:540deg}}
@keyframes steam{from{opacity:.9;translate:0 0}to{opacity:0;translate:2px -16px}}
@keyframes route{0%{translate:10px 140px}33%{translate:30px 95px}66%{translate:60px 60px}100%{translate:80px 20px}}
@keyframes feed{to{translate:0 -336px}}@keyframes ripple{from{scale:.3;opacity:1}to{scale:1.6;opacity:0}}@keyframes neon{0%,100%{opacity:1}92%{opacity:1}94%{opacity:.4}96%{opacity:1}}

/* Characters: walking legs only while a walker wrapper moves them; gestures; blinking and talking. */
#actionCinema .leg-f,#actionCinema .leg-b{transform-origin:0 -50px}
#actionCinema .leg-f{animation:leg .32s ease-in-out var(--wt1,0s) var(--wn1,0) alternate,leg .32s ease-in-out var(--wt2,0s) var(--wn2,0) alternate,leg .32s ease-in-out var(--wt3,0s) var(--wn3,0) alternate,leg .32s ease-in-out var(--wt4,0s) var(--wn4,0) alternate}
#actionCinema .leg-b{animation:leg-r .32s ease-in-out var(--wt1,0s) var(--wn1,0) alternate,leg-r .32s ease-in-out var(--wt2,0s) var(--wn2,0) alternate,leg-r .32s ease-in-out var(--wt3,0s) var(--wn3,0) alternate,leg-r .32s ease-in-out var(--wt4,0s) var(--wn4,0) alternate}
#actionCinema .person{animation:breathe 3.2s ease-in-out infinite}
#actionCinema .head{transform-origin:0 -104px;animation:head 3.4s ease-in-out infinite}
#actionCinema .eye{transform-box:fill-box;transform-origin:center;animation:blink 4.2s infinite}
#actionCinema .talking .mouth{transform-box:fill-box;transform-origin:center;animation:talk .2s ease-in-out infinite alternate}
#actionCinema .arm-g{transform-origin:11px -89px;animation:arm-g 1.1s ease-in-out infinite alternate}
#actionCinema .arm-t{transform-origin:11px -89px;animation:arm-t .22s ease-in-out infinite alternate}
#actionCinema .arm-w{transform-origin:11px -89px;animation:arm-w .38s ease-in-out infinite alternate}
#actionCinema .arm-s{animation:arm-s .26s ease-in-out 6 alternate}
@keyframes leg{from{rotate:-15deg}to{rotate:15deg}}@keyframes leg-r{from{rotate:15deg}to{rotate:-15deg}}
@keyframes breathe{50%{translate:0 -1px}}@keyframes head{0%,100%{rotate:0deg}50%{rotate:3deg}}
@keyframes blink{0%,94%,100%{scale:1 1}97%{scale:1 .1}}@keyframes talk{to{scale:1.1 2.2}}
@keyframes arm-g{from{rotate:6deg}to{rotate:-16deg}}@keyframes arm-t{to{rotate:6deg}}@keyframes arm-w{from{rotate:8deg}to{rotate:-14deg}}@keyframes arm-s{to{translate:0 3px}}

/* Reduced motion and finished playback show the final frame of the scene. */
#actionCinema.still *,#actionCinema.still *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){#actionCinema *,#actionCinema *::after{animation:none!important}}

.live-statistics{padding:12px;background:white;border:1px solid #d5dfe5;border-radius:10px}.live-statistics .kicker{margin:0 0 8px}.live-statistics #salesDetails{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}.live-statistics .detail{font-size:12px;margin:0;padding:4px 0;gap:8px}.live-statistics p{font-size:11px;margin:3px 0}.live-statistics .owner{font-size:12px;padding:6px 0}.game>.metrics{position:sticky;top:0;z-index:7;background:#f1f5f2;padding:4px 0}.shop-stage{position:static}
.shop-stage .shop-scene{top:calc(var(--metrics-height,64px) + 4px)}
.live-statistics .panel{padding:0;border:0;box-shadow:none}.live-statistics #salesDetails>p{grid-column:1/-1}.live-statistics .owner{line-height:1.5;border-top:1px solid #e1e8e3;margin-top:8px}@media(max-width:900px){.shop-stage .shop-scene{position:static}.live-statistics .detail{font-size:11px}}
@media(max-width:900px){.play-layout{display:flex;flex-direction:column;gap:8px}.play-layout>.workbench{order:2;width:100%;box-sizing:border-box}.shop-stage .shop-scene{order:0;width:100%;box-sizing:border-box}.shop-stage .scene{order:1;width:100%;box-sizing:border-box}.live-statistics{order:3;width:100%;box-sizing:border-box}}