/* ═══════════════════════════════════════════════════════════════════════════
 *  v118 · آیکن هدیه‌های انیمیشنی و صحنهٔ پخششان
 * ═══════════════════════════════════════════════════════════════════════════ */

/*  آیکن داخل پنل هدیه: هم‌اندازهٔ آیکن‌های SVG قبلی بنشیند  */
.gp-cell .g118i{
  display:block; object-fit:contain; margin:0 auto;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.45));
}
.gp-cell.sel .g118i{ animation:g118pop .5s cubic-bezier(.2,1.6,.4,1) }
@keyframes g118pop{ 0%{ transform:scale(.82) } 60%{ transform:scale(1.12) } 100%{ transform:scale(1) } }

/*  صحنهٔ پخش: تمام‌صفحه، روی همه‌چیز، با یک ضربه رد می‌شود  */
#gfx118{
  position:fixed; inset:0; z-index:240; display:none; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 90% 70% at 50% 45%, rgba(12,4,26,.55), rgba(4,1,10,.82));
  animation:g118in .22s ease both;
}
#gfx118.on{ display:flex }
@keyframes g118in{ from{ opacity:0 } }
#gfx118c{
  width:auto; height:88vh; max-width:100vw; aspect-ratio:375/812;
  pointer-events:none;
}
.gfx118-t{
  position:absolute; inset-inline:0; top:7%; text-align:center; pointer-events:none;
  font-family:inherit; font-size:13px; font-weight:800; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.85);
}
.gfx118-t b{ color:#ffd76a; font-weight:900 }

/*  v204: اندازه با نسبت خود انیمیشن (در JS)، جای انیمیشن و پس‌زمینه طبق تنظیم پنل  */
#gfx118c{ height:auto; aspect-ratio:auto; max-height:100vh }
#gfx118.top{ align-items:flex-start; padding-top:12vh }
#gfx118.bottom{ align-items:flex-end; padding-bottom:10vh }
#gfx118.nodim{ background:none }

/*  v206: ظرف انیمیشن div است؛ کتابخانه بوم را داخلش می‌سازد و با AspectFit وسط می‌گذارد  */
#gfx118c{ position:relative; overflow:hidden; flex:none; aspect-ratio:auto; max-width:none; max-height:none }
#gfx118c canvas{ display:block; pointer-events:none }
/*  v206: برنامه راست‌به‌چپ است؛ بوم ۷۵۰ پیکسلی کتابخانه در ظرف کوچک‌تر به لبهٔ راست
 *  می‌چسبید ولی ماتریس جاگذاری‌اش با فرض چپ‌چین حساب می‌شود — انیمیشن به چپ و بیرون
 *  از کادر می‌رفت. ظرف انیمیشن همیشه چپ‌به‌راست است.  */
#gfx118c{ direction:ltr; text-align:left }
/*  v207: صحنهٔ هدیه هم‌عرض قاب لایو (left/width در JS)؛ انیمیشن لبه‌به‌لبه، اضافهٔ قد بریده شود  */
#gfx118{ overflow:hidden }