/* ==========================================================================
   HỆ THỐNG HIỆU ỨNG GAME ĐỈNG CAO (AAA GAME EFFECTS ENGINE) - 5SU
   ========================================================================== */

/* 1. Canvas hạt toàn màn hình (siêu mượt 60fps) */
#fxMasterCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999990;
}

/* 2. Sóng loang phản hồi khi chạm (Touch Ripple Wave) */
.fx-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999995;
  border: 2px solid rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.65), inset 0 0 8px rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) scale(0.15);
  animation: fxRippleAnim 0.55s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes fxRippleAnim {
  0% { transform: translate(-50%, -50%) scale(0.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* 3. Dòng chữ khen ngợi bay bổng 3D (Floating Praise Text) */
.fx-float-praise {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  font-family: 'Baloo 2', system-ui, -apple-system, sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 0 16px rgba(234, 179, 8, 0.95), 0 3px 6px rgba(0, 0, 0, 0.85);
  transform: translate(-50%, -50%) scale(0.5);
  animation: fxFloatPraiseAnim 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

@keyframes fxFloatPraiseAnim {
  0% { opacity: 0; transform: translate(-50%, 0%) scale(0.4) rotate(-6deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(4deg); }
  65% { opacity: 1; transform: translate(-50%, -90%) scale(1.05) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(0.8); }
}

/* 4. Rung chấn màn hình khi ăn điểm / đi nước cờ quyết định (Screen Shake) */
.fx-screen-shake {
  animation: fxShakeAnim 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes fxShakeAnim {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

/* 5. Tia hào quang mặt trời xoay tròn sau Cúp Chiến Thắng (Sunburst Rays) */
.fx-sunburst-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-sunburst-rays {
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(251, 191, 36, 0.28) 0deg 15deg,
    transparent 15deg 30deg
  );
  border-radius: 50%;
  animation: fxSunburstSpin 16s linear infinite;
  filter: blur(1.5px);
  mask-image: radial-gradient(circle, black 35%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, black 35%, transparent 72%);
}

@keyframes fxSunburstSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 6. Hiệu ứng 3 Ngôi Sao nảy tưng bừng lần lượt (3-Star Pop Celebration) */
.fx-star-1 {
  animation: fxStarPopIn 0.5s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
.fx-star-2 {
  animation: fxStarPopIn 0.5s 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
.fx-star-3 {
  animation: fxStarPopIn 0.5s 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes fxStarPopIn {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-60deg);
    filter: brightness(2.5) drop-shadow(0 0 20px #ffd600);
  }
  60% {
    transform: scale(1.4) rotate(15deg);
    filter: brightness(1.8) drop-shadow(0 0 15px #ffd600);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 0 8px rgba(251, 191, 36, 0.7));
  }
}

/* 7. Ánh kim quang lướt qua nút bấm (Shimmer Beam Sweep) */
.fx-shimmer-btn {
  position: relative;
  overflow: hidden !important;
}

.fx-shimmer-btn::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: fxShimmerSweep 3.2s infinite;
  pointer-events: none;
}

@keyframes fxShimmerSweep {
  0%, 75% { left: -70%; }
  100% { left: 150%; }
}

/* 8. Nút bấm và thẻ bài nảy đàn hồi (Spring Click Feedback) */
.fx-pressable {
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease !important;
}
.fx-pressable:active {
  transform: scale(0.92) !important;
}