/* Ефектен слой за дуела — частици, тресене, аларма, финална винетка.
   Включва се СЛЕД duel-visual.css (duel.css → duel-visual.css → duel-effects.css),
   за да може да надгражда без да пипа съществуващите правила.
   Принципи: само transform / opacity / filter / box-shadow — никакъв layout.
   Всички времена са в ms и са коментирани до стойността. */

/* ═══════════════════════════════════════════════════════════
   1) ТАЙМЕР В АЛАРМА — пулсиращ червен пръстен + трептене на цифрата
   ═══════════════════════════════════════════════════════════ */

/* червения цвят идва и от .urgent, тук само го фиксираме за .alarm */
#timer.alarm {
  --tc: #ff6f61;
  /* спираме цялостния urgentPulse (1 s), за да не се дублира мащабът:
     движението е в пръстена, сянката и цифрата */
  animation: none;
}

/* пръстенът пулсира: мащаб + сияние през filter (drop-shadow работи след mask) */
#timer.alarm .timer-ring {
  animation: fxAlarmRing 1000ms ease-in-out infinite; /* 1000 ms, безкрайно */
  will-change: transform, filter;
}

/* цифрата леко трепти — под 1 px, за да не отвлича */
#timer.alarm .timer-num {
  color: #ff9a8d;
  text-shadow: 0 0 10px rgba(255, 111, 97, .45);
  animation: fxAlarmNum 900ms ease-in-out infinite; /* 900 ms, безкрайно */
  will-change: transform;
}

/* ореолът зад таймера (::before вече съществува в duel.css) */
#timer.alarm::before {
  background: radial-gradient(circle, rgba(217, 83, 78, .40), transparent 68%);
  opacity: .9;
  animation: fxAlarmHalo 1000ms ease-in-out infinite; /* 1000 ms, безкрайно */
  will-change: transform, opacity;
}

@keyframes fxAlarmRing {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 111, 97, .45)); }
  50%      { transform: scale(1.035); filter: drop-shadow(0 0 12px rgba(255, 111, 97, .85)); }
}

@keyframes fxAlarmNum {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  25%      { transform: translate3d(-.5px, 0, 0) scale(1.02); opacity: .92; }
  60%      { transform: translate3d(.5px, -.5px, 0) scale(1.01); opacity: 1; }
  80%      { transform: translate3d(0, .5px, 0) scale(.995); opacity: .95; }
}

@keyframes fxAlarmHalo {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* ── изтекло време: сиво, изгаснало, без движение ── */
/* правилата са след .alarm, за да печелят при еднаква специфичност */
#timer.timeout,
#timer.alarm.timeout {
  animation: none;
  --tc: #6b7570;
  filter: saturate(.12) brightness(.82);
  opacity: .62;
}

#timer.timeout .timer-ring,
#timer.alarm.timeout .timer-ring {
  animation: none;
  filter: none;
}

#timer.timeout .timer-num,
#timer.alarm.timeout .timer-num {
  animation: none;
  color: rgba(236, 229, 211, .42);
  text-shadow: none;
}

#timer.timeout::before,
#timer.alarm.timeout::before {
  animation: none;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════
   2) ИСКРИ — .spark се създава от JS: position: fixed + left/top
   и CSS променливи --dx / --dy (посока), --s (размер), --dur (време)
   ═══════════════════════════════════════════════════════════ */
.spark {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  /* 6–9 px: зачита --s от JS, но не позволява по-дребно/по-голямо */
  --sz: clamp(6px, var(--s, 7px), 9px);
  width: var(--sz);
  height: var(--sz);
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); /* центърът на искрата е в точката */
  border-radius: 50%;
  background: radial-gradient(circle,
      #fffbe6 0%,
      #f2dd9b 34%,
      rgba(201, 162, 39, .85) 62%,
      rgba(127, 168, 135, .55) 84%,
      transparent 100%);
  filter: drop-shadow(0 0 6px rgba(242, 221, 155, .85));
  will-change: transform, opacity;
  animation: fxSparkFly var(--dur, 650ms) cubic-bezier(.15, .7, .35, 1) forwards; /* 650 ms по подразбиране, JS дава 700 ms */
}

@keyframes fxSparkFly {
  0%   { transform: translate3d(0, 0, 0) scale(.55); opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: .8; }
  100% {
    /* +8px надолу = лека гравитация, за да не летят идеално прави */
    transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) + 8px), 0) scale(.12);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   3) РАЗКЛАЩАНЕ НА КАРТАТА С ВЪПРОСА — #qCard.shake, 400 ms, ±6 px
   ═══════════════════════════════════════════════════════════ */
/* qIn е изписан със същите параметри като в duel.css и остава в списъка,
   за да не се рестартира влизането на картата, когато .shake се махне. */
#qCard.shake {
  animation: qIn 580ms cubic-bezier(.2, .75, .2, 1) both, /* 580 ms — непроменен от duel.css */
             fxCardShake 400ms cubic-bezier(.36, .07, .19, .97) both; /* 400 ms */
  will-change: transform;
}

@keyframes fxCardShake {
  0%   { transform: translate3d(0, 0, 0); }
  12%  { transform: translate3d(-6px, 0, 0); }
  28%  { transform: translate3d(5px, 0, 0); }
  44%  { transform: translate3d(-4px, 0, 0); }
  60%  { transform: translate3d(3px, 0, 0); }
  76%  { transform: translate3d(-2px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ═══════════════════════════════════════════════════════════
   4) ВЕРЕН ОТГОВОР — двоен пулс на рамката върху .opt.correct
   Не пипаме нищо от duel.css / duel-visual.css (те ползват ::after за ✓
   и !important сенки); пулсът е отделен слой в ::before.
   ═══════════════════════════════════════════════════════════ */
.opt.correct::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  animation: fxCorrectRing 900ms ease-out 60ms 1 both; /* 900 ms, два удара, 60 ms закъснение */
}

@keyframes fxCorrectRing {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(127, 168, 135, 0), 0 0 0 rgba(127, 168, 135, 0); }
  16%  { opacity: 1; box-shadow: 0 0 0 2px rgba(127, 168, 135, .65), 0 0 16px rgba(127, 168, 135, .45); }
  38%  { opacity: .15; box-shadow: 0 0 0 2px rgba(127, 168, 135, .2), 0 0 8px rgba(127, 168, 135, .12); }
  58%  { opacity: 1; box-shadow: 0 0 0 2px rgba(127, 168, 135, .65), 0 0 16px rgba(127, 168, 135, .45); }
  100% { opacity: 0; box-shadow: 0 0 0 5px rgba(127, 168, 135, 0), 0 0 24px rgba(127, 168, 135, 0); }
}

/* ═══════════════════════════════════════════════════════════
   5) ИЗБРАНА ОПЦИЯ — лек бриз на светлина по ръба (.opt.picked)
   ::after се ползва само когато няма ✓/✕, за да не се бие с duel.css.
   ═══════════════════════════════════════════════════════════ */
.opt.picked:not(.correct):not(.wrong)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: fxPickSheen 700ms ease-out both; /* 700 ms, еднократно */
}

@keyframes fxPickSheen {
  0%   { opacity: 0; box-shadow: inset 0 0 0 1px rgba(242, 221, 155, 0), inset 0 0 0 rgba(201, 162, 39, 0); }
  30%  { opacity: 1; box-shadow: inset 0 0 0 1px rgba(242, 221, 155, .60), inset 0 0 18px rgba(201, 162, 39, .40); }
  70%  { opacity: .8; box-shadow: inset 0 0 0 1px rgba(242, 221, 155, .45), inset 0 0 12px rgba(201, 162, 39, .26); }
  100% { opacity: .55; box-shadow: inset 0 0 0 1px rgba(242, 221, 155, .32), inset 0 0 8px rgba(201, 162, 39, .16); }
}

/* ═══════════════════════════════════════════════════════════
   6) ФИНАЛ — винетка по краищата, ако клиентът сложи body.finish
   ═══════════════════════════════════════════════════════════ */
body.finish::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30; /* над конфетите (20), под тоста (40) */
  pointer-events: none;
  background:
    radial-gradient(125% 95% at 50% 46%,
      transparent 36%,
      rgba(5, 9, 7, .28) 64%,
      rgba(3, 6, 5, .60) 84%,
      rgba(2, 4, 3, .78) 100%);
  animation: fxFadeIn 900ms ease-out both; /* 900 ms */
}

@keyframes fxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   ДОСТЪПНОСТ — при prefers-reduced-motion остават само цветове/сенки
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #timer.alarm,
  #timer.alarm .timer-ring,
  #timer.alarm .timer-num,
  #timer.alarm::before,
  #timer.timeout,
  #timer.timeout .timer-ring,
  #timer.timeout .timer-num,
  #timer.timeout::before,
  #qCard.shake,
  .opt.correct::before,
  .opt.picked::after,
  body.finish::after {
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }

  /* искрите са чист декор — скриваме ги напълно */
  .spark { display: none; }

  /* статични, само цветови състояния */
  #timer.alarm .timer-ring { filter: drop-shadow(0 0 8px rgba(255, 111, 97, .55)); }
  #timer.alarm::before { opacity: .45; }
  .opt.picked:not(.correct):not(.wrong)::after {
    opacity: .55;
    box-shadow: inset 0 0 0 1px rgba(242, 221, 155, .32), inset 0 0 8px rgba(201, 162, 39, .16);
  }
  .opt.correct::before { opacity: 0; }
  body.finish::after { opacity: 1; }
}