/* ============================================================
   EFFECTS — hiệu ứng quà ảo theo tầng (đi cùng js/effects.js).
   Layer phủ toàn màn, không chặn thao tác; mọi màu qua var(--…).
   ============================================================ */

.fx-layer {
  position: fixed; inset: 0; z-index: 130;
  pointer-events: none; overflow: hidden;
}

/* ---------- Mưa quà ---------- */
.fx-drop {
  position: absolute; top: -60px;
  width: var(--fx-size, 30px); height: var(--fx-size, 30px);
  animation: fx-fall 3.4s ease-in forwards;
  filter: drop-shadow(0 4px 10px rgba(var(--shadow-rgb), .4));
}
.fx-drop__pic { width: 100%; height: 100%; object-fit: contain; display: block; }
.fx-emoji { display: grid; place-items: center; font-size: calc(var(--fx-size, 30px) * .82); width: 100%; height: 100%; }
@keyframes fx-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(var(--fx-dx, 0), 108vh) rotate(var(--fx-rot, 120deg)); opacity: .9; }
}

/* ---------- Nổ giữa màn (tier 2) ---------- */
.fx-burst {
  position: absolute; left: 50%; top: 44%;
  width: 96px; height: 96px;
  transform: translate(-50%, -50%);
  animation: fx-burst 2.2s cubic-bezier(.16, 1.2, .3, 1) forwards;
  filter: drop-shadow(0 10px 26px rgba(var(--shadow-rgb), .55));
}
.fx-burst__pic { width: 100%; height: 100%; object-fit: contain; display: block; }
.fx-burst .fx-emoji { font-size: 76px; }
@keyframes fx-burst {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  30%  { transform: translate(-50%, -50%) scale(1); }
  72%  { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
  100% { transform: translate(-50%, -58%) scale(.92); opacity: 0; }
}

/* ---------- Lấp lánh ---------- */
.fx-spark {
  position: absolute; opacity: 0;
  animation: fx-spark 1.5s ease-in-out forwards;
  text-shadow: 0 0 10px currentColor;
}
@keyframes fx-spark {
  0%   { opacity: 0; transform: scale(.3) rotate(0); }
  45%  { opacity: 1; transform: scale(1.15) rotate(40deg); }
  100% { opacity: 0; transform: scale(.4) rotate(90deg); }
}

/* ---------- Confetti (tier 4) ---------- */
.fx-conf {
  position: absolute; top: -20px;
  width: 8px; height: 13px; border-radius: 2px;
  animation: fx-conf 3.2s ease-in forwards;
}
@keyframes fx-conf {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--fx-dx, 0), 108vh) rotate(560deg); opacity: .85; }
}

/* ---------- Banner "A tặng B" (tier 3–4) ---------- */
.fx-banner {
  position: absolute; left: 50%; top: 16%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 460px);
  padding: 10px 18px 10px 12px; border-radius: 100px;
  background: rgba(var(--scrim-rgb), .78);
  border: 1px solid color-mix(in srgb, var(--fx-color, var(--cyan)) 55%, transparent);
  box-shadow: 0 12px 40px -10px color-mix(in srgb, var(--fx-color, var(--cyan)) 55%, transparent),
              inset 0 0 22px color-mix(in srgb, var(--fx-color, var(--cyan)) 12%, transparent);
  backdrop-filter: blur(8px);
  animation: fx-banner 3.8s ease forwards;
}
.fx-banner--big { top: 62%; padding: 13px 24px 13px 15px; animation-duration: 4.8s; }
.fx-banner__pic { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; }
.fx-banner--big .fx-banner__pic { width: 58px; height: 58px; }
.fx-banner__img { width: 100%; height: 100%; object-fit: contain; }
.fx-banner__pic .fx-emoji { font-size: 34px; }
.fx-banner--big .fx-banner__pic .fx-emoji { font-size: 44px; }
.fx-banner__txt  { text-align: left; min-width: 0; }
.fx-banner__who  { font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-banner__who b { color: var(--ink); }
.fx-banner--big .fx-banner__who { font-size: 15px; }
.fx-banner__what {
  font-size: 12.5px; font-weight: 700; margin-top: 1px;
  color: var(--fx-color, var(--cyan));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-banner--big .fx-banner__what { font-size: 14px; }
@keyframes fx-banner {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(.92); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.96); }
}

/* ---------- Takeover huyền thoại (tier 4) ---------- */
.fx-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(var(--scrim-rgb), .25), rgba(var(--scrim-rgb), .68));
  animation: fx-scrim 4.4s ease forwards;
}
@keyframes fx-scrim { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }

.fx-hero {
  position: absolute; left: 50%; top: 40%;
  width: 150px; height: 150px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  animation: fx-hero 4.4s cubic-bezier(.16, 1.15, .3, 1) forwards;
}
.fx-hero__pic { width: 76%; height: 76%; object-fit: contain; position: relative; z-index: 2;
  filter: drop-shadow(0 14px 34px rgba(var(--shadow-rgb), .6)); }
.fx-hero .fx-emoji { font-size: 96px; position: relative; z-index: 2; }
.fx-hero__halo {
  position: absolute; inset: -46%; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg,
    transparent, color-mix(in srgb, var(--fx-color, var(--gold)) 45%, transparent) 24%,
    transparent 52%, color-mix(in srgb, var(--fx-color, var(--gold)) 38%, transparent) 76%, transparent);
  animation: fx-halo 3.2s linear infinite;
  opacity: .9;
}
.fx-hero__ring {
  position: absolute; inset: -14%; border-radius: 50%; z-index: 1;
  border: 2px solid color-mix(in srgb, var(--fx-color, var(--gold)) 70%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--fx-color, var(--gold)) 45%, transparent),
              inset 0 0 24px color-mix(in srgb, var(--fx-color, var(--gold)) 25%, transparent);
}
@keyframes fx-halo { to { transform: rotate(360deg); } }
@keyframes fx-hero {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-14deg); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(3deg); }
  24%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(.9); }
}

/* ---- Video alpha (VAP) — hiệu ứng quà "như TikTok" (P3.5) ---- */
.fx-video {
  position: fixed; inset: 0; z-index: 2;               /* trong #fxLayer, nổi trên mưa quà */
  display: grid; place-items: center; overflow: hidden;
  animation: fx-video-in .45s var(--ease) both;
}
.fx-video canvas { max-width: 96vw; max-height: 80vh; filter: drop-shadow(0 18px 44px rgba(var(--shadow-rgb), .55)); }
@media (max-width: 480px) {
  .fx-video canvas { max-width: none; max-height: none; }   /* mobile: canvas phóng cover, .fx-video cắt mép */
}
@keyframes fx-video-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* Mobile: banner gọn lại, hero nhỏ hơn chút */
@media (max-width: 480px) {
  .fx-banner { max-width: 94vw; gap: 9px; padding: 8px 14px 8px 10px; }
  .fx-hero   { width: 118px; height: 118px; }
  .fx-hero .fx-emoji { font-size: 74px; }
}