/**
 * Vizuální efekty — keyframes a třídy pro modul efekty.js.
 *
 * Barvy VŽDY přes CSS proměnné z palety (viz DESIGN.md), aby fungoval tmavý režim.
 * Zde jen mapujeme paletu na efektově zaměřené proměnné a definujeme animace.
 *
 * Vše je obaleno tak, aby `@media (prefers-reduced-motion: reduce)` pohyb vypnul
 * nebo zkrátil na decentní fade.
 */

:root {
  /* Efektové proměnné odvozené z palety. Když by paleta nebyla načtená,
     fallback drží rozumné hodnoty, ale primárně bereme globální proměnné. */
  --efekt-fialova:  var(--fialova, #6a5cff);
  --efekt-tyrkys:   var(--tyrkys, #12c2b8);
  --efekt-jantar:   var(--jantar, #ffb020);
  --efekt-zelena:   var(--zelena, #22c55e);
  --efekt-zelena-svetla: var(--zelena-svetla, #dcfce7);
  --efekt-koral:    var(--koral, #ff5470);
  --efekt-koral-svetla:  var(--koral-svetla, #ffe4e9);
  --efekt-text:     var(--text, #2b2540);
  --efekt-pozadi:   var(--pozadi, #ffffff);

  /* Ladění časů na jednom místě. */
  --efekt-cas-kratky: 260ms;
  --efekt-cas-stredni: 600ms;
  --efekt-cas-dlouhy: 1100ms;
}

/* ------------------------------------------------------------------ */
/* Společná vrstva pro překryvy (konfety, level up).                   */
/* Nechytá kliknutí, sedí nad obsahem.                                 */
/* ------------------------------------------------------------------ */
.efekt-vrstva {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

/* ------------------------------------------------------------------ */
/* Konfety                                                             */
/* ------------------------------------------------------------------ */
.efekt-konfeta {
  position: absolute;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  will-change: transform, opacity;
  opacity: 1;
  animation-name: efekt-konfeta-pad;
  animation-timing-function: cubic-bezier(0.35, 0.1, 0.4, 1);
  animation-fill-mode: forwards;
}

@keyframes efekt-konfeta-pad {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--efekt-dx, 0px), var(--efekt-dy, 480px)) rotate(var(--efekt-rot, 540deg)) scale(0.9);
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Správně — zelený pulz + fajfka                                      */
/* ------------------------------------------------------------------ */
.efekt-spravne {
  animation: efekt-pulz var(--efekt-cas-stredni) ease-out;
  /* Barvu záblesku řídíme přes box-shadow, ať nebouráme layout. */
}

@keyframes efekt-pulz {
  0% {
    box-shadow: 0 0 0 0 var(--efekt-zelena);
  }
  30% {
    box-shadow: 0 0 0 8px var(--efekt-zelena-svetla);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.efekt-fajfka {
  position: absolute;
  pointer-events: none;
  z-index: 10000;
  color: var(--efekt-zelena);
  animation: efekt-fajfka-pop var(--efekt-cas-stredni) cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
  transform-origin: center;
}

@keyframes efekt-fajfka-pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  40% {
    transform: scale(1.15);
    opacity: 1;
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Špatně — jemné zatřesení, korálová barva                            */
/* ------------------------------------------------------------------ */
.efekt-spatne {
  animation: efekt-shake var(--efekt-cas-kratky) ease-in-out;
  box-shadow: 0 0 0 2px var(--efekt-koral);
}

@keyframes efekt-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(1px); }
}

/* ------------------------------------------------------------------ */
/* Level up — překryv s číslem úrovně                                  */
/* ------------------------------------------------------------------ */
.efekt-levelup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 40px;
  border-radius: 20px;
  background: var(--efekt-pozadi);
  border: 2px solid var(--efekt-fialova);
  box-shadow: 0 6px 0 var(--fialova-tmava, #5346d6), 0 18px 40px rgba(0, 0, 0, 0.18);
  color: var(--efekt-text);
  font-family: Nunito, system-ui, sans-serif;
  text-align: center;
  animation: efekt-levelup-zoom var(--efekt-cas-dlouhy) cubic-bezier(0.2, 1.3, 0.35, 1) forwards;
}

.efekt-levelup-popis {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--efekt-fialova);
  font-size: 0.95rem;
}

.efekt-levelup-cislo {
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--efekt-jantar);
}

@keyframes efekt-levelup-zoom {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Odznak — toast s ikonou a jménem                                    */
/* ------------------------------------------------------------------ */
.efekt-odznak {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--efekt-pozadi);
  border: 2px solid var(--ram, #e7e3f0);
  box-shadow: 0 4px 0 var(--ram-tmavy, #d3cde3), 0 12px 30px rgba(0, 0, 0, 0.14);
  color: var(--efekt-text);
  font-family: Nunito, system-ui, sans-serif;
  animation:
    efekt-toast-slide var(--efekt-cas-stredni) cubic-bezier(0.2, 1.2, 0.4, 1) forwards,
    efekt-toast-odchod var(--efekt-cas-stredni) ease-in forwards;
  /* Odchodová animace nastartuje se zpožděním z JS (animation-delay). */
}

.efekt-odznak-ikona {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--fialova-svetla, #ece9ff);
  color: var(--efekt-jantar);
}

.efekt-odznak-ikona svg {
  width: 28px;
  height: 28px;
  display: block;
}

.efekt-odznak-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.efekt-odznak-nadpis {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--efekt-fialova);
}

.efekt-odznak-nazev {
  font-weight: 800;
  font-size: 1rem;
  color: var(--efekt-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes efekt-toast-slide {
  0% {
    transform: translateY(24px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes efekt-toast-odchod {
  0%, 100% { }
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(24px); }
}

/* ------------------------------------------------------------------ */
/* Přístupnost: prefers-reduced-motion                                 */
/* Žádné poskakování — jen decentní fade, případně statické zobrazení. */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .efekt-konfeta {
    /* Konfety v JS vůbec nespustíme; kdyby přesto vznikly, ať nepadají. */
    animation: efekt-fade-out var(--efekt-cas-kratky) ease forwards !important;
    transform: none !important;
  }

  .efekt-spravne {
    animation: efekt-fade-in var(--efekt-cas-kratky) ease !important;
    box-shadow: 0 0 0 2px var(--efekt-zelena) !important;
  }

  .efekt-fajfka {
    animation: efekt-fade-in-out var(--efekt-cas-stredni) ease forwards !important;
    transform: none !important;
  }

  .efekt-spatne {
    animation: efekt-fade-in var(--efekt-cas-kratky) ease !important;
    transform: none !important;
  }

  .efekt-levelup {
    animation: efekt-fade-in-out var(--efekt-cas-dlouhy) ease forwards !important;
    transform: translate(-50%, -50%) !important;
  }

  .efekt-odznak {
    animation: efekt-fade-in-out var(--efekt-cas-stredni) ease forwards !important;
    transform: none !important;
  }
}

@keyframes efekt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes efekt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes efekt-fade-in-out {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}