/* المشهد: إطار المصنع، مشاهد المراحل، السير، الشخصية، وكل الحركات المتكررة (CSS فقط = أخف على المعالج). */

#sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
#fx { inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 35; }
#bg { inset: 0; }
#bg svg { width: 100%; height: 100%; display: block; }

#center {
  left: calc(var(--m-left) + 424px); right: calc(var(--m-right) + 424px);
  top: calc(var(--m-top) + 140px); bottom: calc(var(--m-bottom) + 126px);
}
#scene-frame {
  position: absolute; inset: 0; border: 8px solid var(--ink); border-radius: 38px; overflow: hidden;
  background: linear-gradient(180deg, #FFEBB8 0%, #FFD27C 100%);
  box-shadow: 0 10px 0 rgba(43, 20, 7, .5), inset 0 0 0 5px rgba(255, 255, 255, .45);
}
#scene-frame::before { /* بلاط خفيف على الجدار */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(155, 78, 14, .10) 3px, transparent 3px), linear-gradient(90deg, rgba(155, 78, 14, .10) 3px, transparent 3px);
  background-size: 118px 80px;
}
#views { position: absolute; left: 0; right: 0; top: 0; bottom: 150px; }
.view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.view.active { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease; }
.view > svg { width: 100%; height: 100%; display: block; overflow: visible; }
#belt-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(180deg, rgba(107, 58, 30, 0) 0%, rgba(107, 58, 30, .25) 55%, rgba(107, 58, 30, .55) 100%); }
#belt-wrap .belt-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bags { position: absolute; inset: 0; pointer-events: none; }
.bag { position: absolute; left: 0; top: 0; width: 54px; height: 76px; will-change: transform; }
.bag svg { width: 100%; height: 100%; display: block; overflow: visible; }
#belt-box { position: absolute; left: 6px; bottom: 36px; width: 122px; height: 106px; transition: transform .35s ease, opacity .3s; }
#belt-box svg { width: 100%; height: 100%; display: block; }
#belt-box .cnt { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); font: 900 30px var(--f-body); color: var(--cream); }
#belt-box.hidden-box { transform: translateY(40px) scale(.6); opacity: 0; }

/* ───── حركات SVG ───── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-r { to { transform: rotate(-360deg); } }
@keyframes swing { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes belt-move { to { transform: translateX(-38px); } }
@keyframes oil-wave { to { transform: translateX(-108px); } }
@keyframes bubble { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-96px) scale(1.1); opacity: 0; } }
@keyframes steam { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: .85; } 100% { transform: translateY(-74px) scale(1.55); opacity: 0; } }
@keyframes flick {
  0% { transform: scale(calc(.72 + var(--fire, .5) * .26), calc(.5 + var(--fire, .5) * .62)); }
  100% { transform: scale(calc(.8 + var(--fire, .5) * .32), calc(.62 + var(--fire, .5) * .76)); }
}
@keyframes flow { to { stroke-dashoffset: -32; } }
@keyframes pulse-win { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes exhaust { 0% { transform: translate(0, 0) scale(.5); opacity: .9; } 100% { transform: translate(-16px, -50px) scale(1.7); opacity: 0; } }
@keyframes idle-shake { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

.spin-slow { animation: spin 16s linear infinite; }
.spin-slow-r { animation: spin-r 11s linear infinite; }
.lamp { animation: swing 5s ease-in-out infinite; transform-origin: 0 0; }
.lamp-b { animation-delay: -1.6s; } .lamp-c { animation-delay: -3.2s; }
.belt-tread { animation: belt-move var(--belt-dur, 1s) linear infinite; }
.roller-spin { animation: spin var(--roller-dur, 1.2s) linear infinite; }
.roll-spin { animation: spin 5s linear infinite; }
.mixer { animation: spin 1.4s linear infinite; }
.oil-wave { animation: oil-wave 2.6s linear infinite; }
.bubble { transform-box: fill-box; transform-origin: 50% 50%; animation: bubble 1.7s ease-in infinite; }
.steam { transform-box: fill-box; transform-origin: 50% 100%; animation: steam 3s ease-out infinite; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .5s ease-in-out infinite alternate; }
.exhaust { transform-box: fill-box; transform-origin: 50% 100%; animation: exhaust 1.6s ease-out infinite; }
.wheel { animation: spin .6s linear infinite paused; }
#view-deliver.driving .wheel { animation-play-state: running; }
#dv-truck-big.idle { animation: idle-shake .35s linear infinite; }
body.belt-stopped .belt-tread, body.belt-stopped .roller-spin { animation-play-state: paused; }

/* القلي */
#view-fry .chips-raw { display: none; }
#view-fry.raw .chips-gold { display: none; }
#view-fry.raw .chips-raw { display: inline; }
#fry-ice { opacity: 0; transition: opacity .45s; }
#view-fry.cold #fry-ice { opacity: 1; }
#view-fry.cold .flame { filter: hue-rotate(180deg) saturate(.6); }
#fry-basket { transition: transform .9s cubic-bezier(.3, 1.4, .5, 1); }
#fry-merc, #chop-bar { transition: y .18s linear, height .18s linear, width .18s linear; }
#fry-needle { transition: transform .25s ease-out; }
#view-fry.cold #fry-basket { animation: idle-shake .12s linear infinite; }

/* النكهة */
.tank { transition: opacity .4s; transform-box: view-box; }
.tank.win { animation: pulse-win .7s ease-in-out infinite alternate; }
.tank.lose { opacity: .4; }
.tank .crown { opacity: 0; transition: opacity .3s, transform .4s; transform: translateY(10px); }
.tank.win .crown { opacity: 1; transform: none; }
.tank .powder, .tank circle[data-flavor] { fill: #ccc; }
.pipe-flow { opacity: 0; }
.pipe-flow.on { opacity: .95; animation: flow .5s linear infinite; }
.powder { transition: y .3s ease-out, height .3s ease-out; }
#fl-machine.run .mixer { animation-duration: .5s; }

/* التغليف */
#pack-bag { transition: transform .12s ease-out; transform-box: fill-box; transform-origin: 50% 0; }
#pack-jaw-l, #pack-jaw-r { transition: transform .1s ease-in; }

/* التوصيل */
#dv-pins .pin text { font-family: var(--f-body); font-weight: 900; }
#dv-pins .pin { transition: opacity .3s; }
#dv-pins .pin.win .ring { animation: pulse-win .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
#dv-truck-big { transition: transform 1.3s cubic-bezier(.5, 0, .9, .6), opacity 1.1s ease-in 0.3s; }
#dv-truck-big.leave { transform: translate(300px, 30px) scale(.35) !important; opacity: 0; }

/* ═════════ شخصية المدير ═════════ */
.mgr-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mgr .mx, .mgr .sweat, .mgr .mgr-zzz { display: none; }
.mgr[data-mood="idle"] .eyes-open, .mgr[data-mood="idle"] .m-smile,
.mgr[data-mood="happy"] .eyes-happy, .mgr[data-mood="happy"] .m-open,
.mgr[data-mood="cheer"] .eyes-happy, .mgr[data-mood="cheer"] .m-open,
.mgr[data-mood="worried"] .eyes-wide, .mgr[data-mood="worried"] .m-frown, .mgr[data-mood="worried"] .sweat,
.mgr[data-mood="shock"] .eyes-wide, .mgr[data-mood="shock"] .m-o,
.mgr[data-mood="sleep"] .eyes-closed, .mgr[data-mood="sleep"] .m-smile, .mgr[data-mood="sleep"] .mgr-zzz { display: inline; }
.mgr[data-mood="worried"] .brow-l { transform: rotate(-10deg); transform-origin: 124px 92px; }
.mgr[data-mood="worried"] .brow-r { transform: rotate(10deg); transform-origin: 176px 92px; }
.mgr-body, .mgr-head { animation: mgr-bob 2.4s ease-in-out infinite; }
.mgr-arm-wave { animation: mgr-wave 1.2s ease-in-out infinite; transform-origin: 212px 202px; }
.mgr-arm-hold { animation: mgr-hold 2.4s ease-in-out infinite; transform-origin: 88px 202px; }
.mgr[data-mood="cheer"] .mgr-arm-wave { animation-duration: .45s; }
.mgr[data-mood="cheer"] .mgr-arm-hold { animation: mgr-cheer-hold .45s ease-in-out infinite; }
.mgr[data-mood="cheer"] .mgr-body, .mgr[data-mood="cheer"] .mgr-head { animation: mgr-jump .5s ease-in-out infinite; }
.mgr[data-mood="shock"] .mgr-hat { animation: mgr-hat .5s ease-out 1; }
.mgr[data-mood="shock"] .mgr-body, .mgr[data-mood="shock"] .mgr-head { animation: mgr-shake .12s linear infinite; }
.mgr[data-mood="sleep"] .mgr-arm-wave, .mgr[data-mood="sleep"] .mgr-arm-hold { animation: none; }
.mgr[data-mood="sleep"] .mgr-head { transform: rotate(5deg); transform-origin: 150px 190px; animation: none; }
.mgr[data-mood="sleep"] .mgr-zzz { animation: mgr-zzz 2s ease-in-out infinite; }
@keyframes mgr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mgr-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes mgr-wave { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(16deg); } }
@keyframes mgr-hold { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes mgr-cheer-hold { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-26deg); } }
@keyframes mgr-hat { 0% { transform: translateY(0); } 40% { transform: translateY(-34px) rotate(-8deg); } 100% { transform: translateY(0); } }
@keyframes mgr-shake { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes mgr-zzz { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-8px); } }
.mgr-img { width: 100%; height: 100%; object-fit: contain; animation: mgr-bob 2.4s ease-in-out infinite; }
.mgr[data-mood="cheer"] .mgr-img, .mgr[data-mood="happy"] .mgr-img { animation: mgr-jump .5s ease-in-out infinite; }
.mgr[data-mood="shock"] .mgr-img { animation: mgr-shake .12s linear infinite; }
.mgr[data-mood="sleep"] .mgr-img { animation: none; transform: rotate(4deg); filter: brightness(.85); }

#fry-flames { transform-box: fill-box; transform-origin: 50% 100%; }
#dv-truck-flip { transform-box: fill-box; transform-origin: 50% 50%; }
#dv-pins .bub { transition: opacity .25s; }

/* ═════════ أحداث طارئة داخل المشهد ═════════ */
#giant-bag { position: absolute; left: 50%; top: 44%; width: 280px; height: 396px; margin: -198px 0 0 -140px; z-index: 5; display: none; pointer-events: none; }
#giant-bag .in { width: 100%; height: 100%; transform: scale(var(--gb, .9)); transition: transform .2s ease-out; --bag-main: var(--yellow); --bag-dark: var(--orange-dark); --bag-accent: var(--red); }
#giant-bag .wob { width: 100%; height: 100%; }
#giant-bag svg { width: 100%; height: 100%; display: block; overflow: visible; }
#giant-bag.show { display: block; animation: gb-in .55s cubic-bezier(.3, 1.5, .5, 1); }
#giant-bag.show .wob { animation: gb-wobble .45s ease-in-out infinite alternate; }
#giant-bag.pop { display: block; animation: gb-pop .55s ease-out forwards; }
#giant-bag.fail { display: block; animation: gb-fail .9s ease-in forwards; }
@keyframes gb-in { from { transform: translateY(-260px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gb-wobble { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes gb-pop { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes gb-fail { 0% { transform: none; opacity: 1; } 100% { transform: translate(-520px, 120px) rotate(-160deg) scale(.6); opacity: 0; } }

#mouse-actor { position: absolute; left: 0; bottom: 132px; width: 130px; height: 90px; z-index: 5; display: none; pointer-events: none; }
#mouse-actor svg { width: 100%; height: 100%; display: block; overflow: visible; }
#mouse-actor.run { display: block; animation: mouse-run 3.6s ease-in-out infinite alternate; }
#mouse-actor.run svg { animation: mouse-hop .22s ease-in-out infinite alternate; }
#mouse-actor.win { display: block; animation: mouse-win 1.1s cubic-bezier(.3, .1, .6, 1) forwards; left: var(--mx, 40%); }
#mouse-actor.fail { display: block; animation: mouse-fail .8s ease-in forwards; left: var(--mx, 40%); }
@keyframes mouse-run { from { left: 6%; } to { left: 74%; } }
@keyframes mouse-hop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-9px) rotate(3deg); } }
@keyframes mouse-win { 0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } 45% { transform: translateY(-300px) rotate(540deg) scale(1.1); opacity: 1; } 100% { transform: translateY(-420px) rotate(900deg) scale(.2); opacity: 0; } }
@keyframes mouse-fail { 0% { transform: none; opacity: 1; } 100% { transform: translateX(-620px); opacity: 0; } }
#mouse-bubble { position: absolute; z-index: 6; display: none; padding: 6px 18px; background: var(--cream); color: var(--ink); border: 5px solid var(--ink); border-radius: 22px; font: 900 34px var(--f-body); box-shadow: 0 5px 0 rgba(43, 20, 7, .5); }
#mouse-bubble.show { display: block; animation: pop-in .3s cubic-bezier(.3, 1.6, .5, 1); }

body.rush #scene-frame { animation: rush-glow .5s ease-in-out infinite alternate; }
@keyframes rush-glow { from { box-shadow: 0 10px 0 rgba(43, 20, 7, .5), inset 0 0 0 5px rgba(255, 255, 255, .45), 0 0 0 0 rgba(255, 199, 44, 0); } to { box-shadow: 0 10px 0 rgba(43, 20, 7, .5), inset 0 0 0 5px rgba(255, 199, 44, .9), 0 0 36px 6px rgba(255, 199, 44, .8); } }