/**
 * Theory Game FX — "Vương Quốc Cờ" P1 juice pack.
 *
 * Cosmetic layer only: every animation uses transform/opacity (compositor
 * friendly, tablet-safe). All nodes live inside .ckfx-layer (pointer-events
 * none) or are short-lived overlays that clean themselves up. Honors
 * prefers-reduced-motion (particles/confetti/shake are suppressed both here
 * and in theory-game-fx.js).
 */

/* ---- FX layer (absolute canvas over the board wrap) ---- */
.ckfx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: visible;
}

/* ---- Capture pop: ghost ring + dust particles at the capture square ---- */
.ckfx-capture-ghost {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.55) 0%, rgba(251, 191, 36, 0) 70%);
  transform: scale(0.4);
  opacity: 0.9;
  animation: ckfxCapturePop 0.5s ease-out forwards;
}
@keyframes ckfxCapturePop {
  0%   { transform: scale(0.4); opacity: 0.9; }
  60%  { transform: scale(1.35); opacity: 0.55; }
  100% { transform: scale(1.6); opacity: 0; }
}
.ckfx-dust {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.95;
  animation: ckfxDustFly 0.55s ease-out forwards;
}
@keyframes ckfxDustFly {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.95; }
  100% { transform: translate(var(--ckfx-dx, 0px), var(--ckfx-dy, -22px)) scale(0.35); opacity: 0; }
}

/* ---- Move trail: soft light streak from origin to destination ---- */
.ckfx-trail {
  position: absolute;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.45) 60%, rgba(96, 165, 250, 0.75) 100%);
  transform-origin: left center;
  animation: ckfxTrail 0.26s ease-out forwards;
}
@keyframes ckfxTrail {
  0%   { transform: rotate(var(--ckfx-angle, 0deg)) scaleX(0); opacity: 0.9; }
  70%  { transform: rotate(var(--ckfx-angle, 0deg)) scaleX(1); opacity: 0.7; }
  100% { transform: rotate(var(--ckfx-angle, 0deg)) scaleX(1); opacity: 0; }
}

/* ---- Correct-move sparkle: little stars bursting from the square ---- */
.ckfx-spark {
  position: absolute;
  font-size: 15px;
  line-height: 1;
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
  animation: ckfxSparkFly 0.6s ease-out forwards;
}
@keyframes ckfxSparkFly {
  0%   { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--ckfx-dx, 0px), var(--ckfx-dy, -30px)) scale(1.15) rotate(var(--ckfx-rot, 40deg)); opacity: 0; }
}

/* ---- Wrong move: gentle shake (never harsh, never red-flash) ---- */
.ckfx-shake {
  animation: ckfxBoardShakeSoft 0.26s ease-in-out 1;
}
@keyframes ckfxBoardShakeSoft {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  50%      { transform: translateX(4px); }
  75%      { transform: translateX(-2px); }
}

/* ---- Encouraging toast (wrong-move feedback, rotating messages) ---- */
.ckfx-toast {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff7ed;
  border: 2px solid #fdba74;
  color: #9a3412;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(154, 52, 18, 0.15);
  opacity: 0;
  animation: ckfxToastPop 1.5s ease-out forwards;
  white-space: nowrap;
  z-index: 40;
}
@keyframes ckfxToastPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.85); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); }
  20%  { transform: translateX(-50%) translateY(0) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(0.96); }
}

/* ---- Combo chip ("Chuỗi đúng ×N") ---- */
.ckfx-combo {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  opacity: 0;
  animation: ckfxComboPop 1.3s ease-out forwards;
  z-index: 40;
}
@keyframes ckfxComboPop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-6deg); }
  15%  { opacity: 1; transform: scale(1.15) rotate(2deg); }
  30%  { transform: scale(1) rotate(0deg); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.92); }
}

/* ---- Solve celebrate v2 (replaces the legacy overlay when FX is active) ---- */
.ckfx-solve {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
}
.ckfx-solve.is-leaving .ckfx-solve-card { animation: ckfxCardLeave 0.45s ease-in forwards; }
.ckfx-solve-card {
  background: rgba(255, 255, 255, 0.96);
  border: 3px solid #fbbf24;
  border-radius: 20px;
  padding: 18px 30px;
  text-align: center;
  box-shadow: 0 12px 34px rgba(30, 41, 59, 0.22);
  animation: ckfxCardPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@keyframes ckfxCardPop {
  0%   { transform: scale(0.55); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ckfxCardLeave {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}
.ckfx-solve-stars { font-size: 42px; line-height: 1.1; letter-spacing: 4px; }
.ckfx-solve-star {
  display: inline-block;
  color: #e2e8f0;
  transform: scale(0.4);
  opacity: 0;
  animation: ckfxStarArc 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
.ckfx-solve-star.is-on { color: #fbbf24; text-shadow: 0 0 14px rgba(251, 191, 36, 0.75); }
@keyframes ckfxStarArc {
  0%   { transform: translateY(-26px) scale(0.3) rotate(-32deg); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
.ckfx-solve-msg { font-size: 19px; font-weight: 800; color: #1e293b; margin-top: 6px; }
.ckfx-solve-sub { font-size: 13px; font-weight: 600; color: #64748b; margin-top: 2px; }

/* CSS confetti (per-solve; canvas-confetti is reserved for rare ceremonies) */
.ckfx-confetti-layer { position: absolute; inset: 0; overflow: hidden; }
.ckfx-confetti {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 13px;
  opacity: 0.95;
  animation-name: ckfxConfettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
.ckfx-confetti.is-round { border-radius: 50%; width: 9px; height: 9px; }
.ckfx-confetti.is-tri {
  width: 0; height: 0; background: transparent !important;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid var(--ckfx-c, #fbbf24);
}
@keyframes ckfxConfettiFall {
  0%   { transform: translateY(0) rotate(var(--ckfx-rot, 0deg)); opacity: 0.95; }
  100% { transform: translateY(115%) rotate(calc(var(--ckfx-rot, 0deg) + 240deg)); opacity: 0; }
}

/* ---- Sound (mute) toggle button — 44px touch target ---- */
.ckfx-sound-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.ckfx-sound-btn:hover { border-color: #a5b4fc; transform: scale(1.06); }
.ckfx-sound-btn:active { transform: scale(0.95); }

/* ---- Reduced motion: suppress every decorative animation ---- */
@media (prefers-reduced-motion: reduce) {
  .ckfx-capture-ghost,
  .ckfx-dust,
  .ckfx-trail,
  .ckfx-spark,
  .ckfx-confetti,
  .ckfx-combo { display: none !important; }
  .ckfx-shake { animation: none !important; }
  .ckfx-solve-card, .ckfx-solve-star { animation-duration: 0.01s !important; }
  /* The toast's keyframes END at opacity:0 (it fades back out) — collapsing
     the animation to 0.01s would hold it INVISIBLE for motion-sensitive kids.
     Kill the animation and pin it visible instead; JS removes the node after
     1550ms anyway (review fix). */
  .ckfx-toast {
    animation: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 768px) {
  .ckfx-solve-stars { font-size: 34px; }
  .ckfx-solve-msg { font-size: 16px; }
  .ckfx-toast { font-size: 12px; padding: 7px 12px; }
}

/* ---- P16: tia chớp khi chiếu (từ quân chiếu tới vua) ------------------ */
.ckfx-bolt {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(250, 204, 21, 0.9));
  animation: ckfxBoltFlash 0.52s ease-out forwards;
  z-index: 30;
}
.ckfx-bolt-burst {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fde047;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.95);
  pointer-events: none;
  animation: ckfxBoltBurst 0.52s ease-out forwards;
  z-index: 31;
}
@keyframes ckfxBoltFlash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ckfxBoltBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(20deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) rotate(40deg); }
}

/* ---- P16: hàng trái tim [Lives] ---------------------------------------- */
.ckfx-lives {
  position: absolute;
  top: -4px;
  right: 6px;
  transform: translateY(-100%);
  display: flex;
  gap: 3px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #fecdd3;
  border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(244, 63, 94, 0.5);
  z-index: 25;
  pointer-events: none;
  font-size: 16px;
  line-height: 1;
}
.ckfx-heart.is-off { filter: grayscale(1); opacity: 0.55; }
.ckfx-lives-shake { animation: ckfxLivesShake 0.4s ease-in-out; }
@keyframes ckfxLivesShake {
  0%, 100% { transform: translateY(-100%) translateX(0); }
  25% { transform: translateY(-100%) translateX(-4px); }
  50% { transform: translateY(-100%) translateX(4px); }
  75% { transform: translateY(-100%) translateX(-2px); }
}