/* ============================================================
   Fake Casino – Effekte
   Gehoert zu js/core/fx.js. Konfetti, Muenzen, Gewinnfeier und
   Ladeplatzhalter. Alles rein visuell, nichts hier traegt
   Information, deshalb faellt es bei "Bewegung reduzieren"
   ersatzlos weg.
   ============================================================ */

/* Eine Ebene ueber allem, die selbst keine Klicks abfaengt. Sonst wuerde
   herunterfallendes Konfetti den Auszahlen-Knopf blockieren. */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}

.fx-confetti {
  position: absolute;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: fx-fall 1.6s cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
}
@keyframes fx-fall {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

.fx-coin {
  position: absolute;
  font-size: 1.4rem;
  font-style: normal;
  opacity: 0;
  animation: fx-coin 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
/* Hoch und wieder runter, damit es nach Wurf aussieht und nicht nach Rakete. */
@keyframes fx-coin {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20%  { opacity: 1; }
  60%  { transform: translate(calc(var(--dx) * 0.7), var(--dy)) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--dx), 40px) scale(0.8); }
}

.fx-bigwin {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--overlay);
  border: 1px solid var(--line-strong);
  box-shadow: var(--e-4);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.fx-bigwin.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fx-bigwin small {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.fx-bigwin b {
  font-family: var(--font-num);
  font-size: clamp(1.9rem, 7vw, 3rem);
  font-weight: 900;
  color: var(--accent-strong);
  text-shadow: 0 2px 20px rgba(var(--accent-rgb), 0.5);
  font-variant-numeric: tabular-nums;
}

/* Ladeplatzhalter: zeigt die Form dessen, was gleich kommt. */
.fx-skeleton {
  border-radius: var(--r-xs);
  margin-bottom: var(--sp-2);
  background: linear-gradient(
    90deg,
    var(--surface-sunken) 0%,
    rgba(255, 255, 255, 0.07) 50%,
    var(--surface-sunken) 100%
  );
  background-size: 200% 100%;
  animation: fx-shimmer 1.3s ease-in-out infinite;
}
@keyframes fx-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
html.reduce-motion .fx-skeleton { animation: none; }

/* ============================================================
   Gekaufte Gewinn-Effekte

   Jeder hat eine eigene Form und eine eigene Bewegung. Nur die
   Farbe zu tauschen hätte fünf Mal dasselbe Konfetti ergeben.
   Alles hier fällt bei "Bewegung reduzieren" weg (fx.js prüft das,
   bevor überhaupt ein Teilchen entsteht).
   ============================================================ */

/* --- Münzflut: springt von unten hoch und fällt zurück --- */
.fx-muenze {
  position: absolute;
  bottom: -40px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff6d8, #f4d782 45%, #b98b16);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: fx-muenze-flug 1.5s cubic-bezier(0.2, 0.7, 0.5, 1) forwards;
}
@keyframes fx-muenze-flug {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.7); }
  12%  { opacity: 1; }
  45%  { transform: translate(calc(var(--seit) * 0.6), calc(var(--hoch) * -1)) rotate(var(--dreh)) scale(1); }
  100% { opacity: 0; transform: translate(var(--seit), 30px) rotate(calc(var(--dreh) * 1.6)) scale(0.85); }
}

/* --- Goldregen: dichter Vorhang dünner Streifen, streng senkrecht --- */
.fx-strahl {
  position: absolute;
  top: -80px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, #ffd76e 25%, #fff6d8 60%, transparent);
  animation: fx-strahl-fall linear forwards;
}
@keyframes fx-strahl-fall {
  to { transform: translateY(115vh); }
}
.fx-goldschein {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 215, 110, 0.3), transparent 45%);
  animation: fx-aus 1.6s ease-out forwards;
}
@keyframes fx-aus { to { opacity: 0; } }

/* --- Feuerwerk: Punkte fliegen radial auseinander --- */
.fx-funke {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: fx-funke-flug 1.1s cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
}
@keyframes fx-funke-flug {
  0%   { opacity: 1; transform: translate(0, 0) scale(1.2); }
  /* Am Ende etwas nach unten: Funken fallen, sie schweben nicht. */
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(0.4); }
}

/* --- Blitzschlag: Aufblitzen plus gezackte Bahn --- */
.fx-blitz {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 25%, rgba(126, 249, 255, 0.5), rgba(255, 255, 255, 0.16) 40%, transparent 70%);
  animation: fx-blitz-an 0.44s steps(1, end) forwards;
}
@keyframes fx-blitz-an {
  0% { opacity: 0; } 10% { opacity: 1; } 22% { opacity: 0.12; }
  34% { opacity: 0.95; } 55% { opacity: 0.1; } 100% { opacity: 0; }
}
.fx-zacke {
  position: absolute;
  top: -4vh;
  width: 26px;
  height: 70vh;
  /* Der Zacken ist eine ausgeschnittene Fläche, kein Bild: so bleibt er
     bei jeder Bildschirmgröße scharf. */
  background: linear-gradient(180deg, #ffffff, #7ef9ff 40%, rgba(34, 211, 238, 0));
  clip-path: polygon(52% 0, 30% 44%, 56% 44%, 30% 100%, 62% 40%, 40% 40%, 66% 0);
  filter: drop-shadow(0 0 8px rgba(126, 249, 255, 0.9));
  animation: fx-zacke-an 0.46s steps(1, end) forwards;
}
@keyframes fx-zacke-an {
  0% { opacity: 0; } 12% { opacity: 1; } 26% { opacity: 0; }
  38% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; }
}

/* --- Sternenfall: wenige große Sterne, langsam und schräg, mit Schweif --- */
.fx-stern {
  position: absolute;
  width: 1em;
  height: 1em;
  background: #fff6d8;
  /* Vierzackiger Stern statt Kreis, damit er sich vom Konfetti absetzt. */
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 10px rgba(255, 246, 216, 0.9));
  animation: fx-stern-flug 2.3s cubic-bezier(0.35, 0.1, 0.4, 1) forwards;
}
@keyframes fx-stern-flug {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(45vw, 85vh) rotate(220deg) scale(1.1); }
}

/* ============================================================
   Wucht: die Effekte werden mit der Größe des Gewinns stärker.
   Was hier steht, sind die Teile, die es erst ab Stufe 3 gibt.
   ============================================================ */

/* Farbschwall über den ganzen Bildschirm. Läuft ab Stufe 3 bei JEDEM Effekt
   mit, damit ein großer Gewinn groß wirkt, egal welchen man gekauft hat. */
.fx-schwall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--fx-farbe), 0.42), transparent 62%),
    linear-gradient(180deg, rgba(var(--fx-farbe), 0.22), transparent 45%, rgba(var(--fx-farbe), 0.22));
  animation: fx-schwall-an 0.9s ease-out forwards;
}
@keyframes fx-schwall-an {
  0% { opacity: 0; transform: scale(1.06); }
  22% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* Münzen, die von OBEN fallen (zweite Richtung ab Stufe 3). */
.fx-muenze-fall {
  top: -50px;
  bottom: auto;
  animation: fx-muenze-regen 1.9s cubic-bezier(0.3, 0.5, 0.6, 1) forwards;
}
@keyframes fx-muenze-regen {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(112vh) rotate(var(--dreh)); }
}

/* Der Knall im Zentrum einer Feuerwerks-Salve. */
.fx-knall {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  animation: fx-knall-an 0.5s ease-out forwards;
}
@keyframes fx-knall-an {
  0% { transform: scale(0.4); opacity: 1; filter: blur(0); }
  100% { transform: scale(9); opacity: 0; filter: blur(6px); }
}

/* Bildschirm-Beben beim Blitzschlag ab Stufe 3. */
@keyframes fx-beben-an {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-5px, 3px); }
  30% { transform: translate(4px, -4px); }
  45% { transform: translate(-3px, -2px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(-2px, 1px); }
}
.fx-beben { animation: fx-beben-an 0.6s ease-out; }
html.reduce-motion .fx-beben { animation: none; }

/* Salut: Bänder aus den unteren Ecken. Nur aus dem Wiedereröffnungs-Paket. */
.fx-band {
  position: absolute;
  border-radius: 2px;
  opacity: 0;
  animation: fx-band-flug cubic-bezier(0.15, 0.75, 0.35, 1) forwards;
}
@keyframes fx-band-flug {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8% { opacity: 1; }
  /* Am Ende weit unten: Bänder fliegen hoch und fallen dann. */
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 70vh)) rotate(var(--rot)); }
}