/* Giftfelder des Pestbringers (.sq.poisoned > .poisonPool, render/poison-pool.js).
   Truebes, saeuregruenes Miasma im Feld, aus dem vereinzelt Blasen aufsteigen.
   Kein Rahmen, kein Symbol, kein Pulsieren, keine harte Kante. Saeuregruen
   statt Teal, damit sich das Feld von den Hollow-Figuren und vom Blau der
   Faehigkeiten abhebt; Gift von Weiss ist lila (.poisonPool--w). Liegt unter
   der Figur. Der Codex (piece-codex-demo.js, .pcx-poison) nutzt denselben
   Baustein. */
.poisonPool {
  --poison: 158, 224, 74;
  --poison-deep: 52, 96, 28;
  position: absolute;
  inset: 0;
  /* volle Flaeche, aber zum Rand hin weich auslaufend statt harter
     Feldkante: zwei Verlaufsmasken (waagerecht, senkrecht) uebereinander */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* truebes Miasma: zum Rand hin dichter, die Mitte bleibt fuer die Figur ruhig */
  background:
    radial-gradient(ellipse 85% 60% at 50% 100%, rgba(var(--poison), .26), transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(var(--poison-deep), .18) 25%, rgba(var(--poison-deep), .50) 72%, rgba(var(--poison), .30) 100%);
}

/* Gift von Weiss: lila statt gruen (Besitzer in game.poisonOwners). Gleicher
   Aufbau, nur andere Toene. */
.poisonPool--w {
  --poison: 190, 122, 255;
  --poison-deep: 84, 26, 136;
}

/* Pestgemisch (Besitzer 'wb'): ein Pestbringer hat auf dem Giftfeld des Gegners
   geschlagen, beide Gifte haben sich gemischt, das Feld toetet jede Figur.
   Fast schwarzer, zaeher Grund statt farbigem Miasma; die Blasen steigen weiter
   in beiden Giftfarben auf (::after lila, i gruen). Darueber treibt sehr langsam
   ein matter Oelfilm-Schimmer in beiden Toenen. Kein Leuchten. */
.poisonPool--mix {
  --poison: 190, 122, 255;
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(40, 26, 48, .45), transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(7, 5, 10, .62) 22%, rgba(3, 2, 6, .86) 70%, rgba(26, 18, 32, .7) 100%);
}
.poisonPool--mix i { --poison: 158, 224, 74; }
.poisonPool--mix::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg,
    transparent 36%, rgba(190, 122, 255, .2) 45%, rgba(120, 140, 160, .07) 50%,
    rgba(158, 224, 74, .16) 55%, transparent 64%);
  background-size: 260% 260%;
  animation: poisonMixSheen 16s ease-in-out infinite;
  animation-delay: var(--poison-phase-c, 0s);
}
@keyframes poisonMixSheen {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

/* Misch-Moment (poison-pool.js buildPoisonPools): das Dunkel breitet sich wie ein
   Tintentropfen von der Mitte aus, das alte Gift darunter blendet aus. Die
   Verzoegerung kommt aus der Uhr, ein Neu-Rendern setzt den Wechsel fort. */
.poisonPool--mixing {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent),
    radial-gradient(circle closest-side, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent),
    radial-gradient(circle closest-side, #000 50%, transparent 100%);
  mask-composite: intersect, intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: poisonMixSpread 1.1s cubic-bezier(.25, .6, .3, 1) var(--mix-delay, 0ms) both;
}
@keyframes poisonMixSpread {
  from { -webkit-mask-size: 100% 100%, 100% 100%, 0% 0%;     mask-size: 100% 100%, 100% 100%, 0% 0%; }
  to   { -webkit-mask-size: 100% 100%, 100% 100%, 320% 320%; mask-size: 100% 100%, 100% 100%, 320% 320%; }
}
.poisonPool--fading {
  animation: poisonMixFade 1.1s ease-in var(--mix-delay, 0ms) both;
}
@keyframes poisonMixFade {
  0%, 30% { opacity: 1; }
  100%    { opacity: 0; }
}

/* Aufsteigende Blasen: zwei Gruppen mit eigenem Takt. Die Phase kommt aus der
   Uhr (poison-pool.js), damit alle Felder gleich laufen und ein Neu-Rendern die
   Blasen nicht zuruecksetzt. */
.poisonPool i,
.poisonPool::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background:
    radial-gradient(circle at 28% 88%, rgba(var(--poison), .85) 0 2.2%, rgba(var(--poison), 0) 3.6%),
    radial-gradient(circle at 62% 94%, rgba(var(--poison), .7) 0 1.6%, rgba(var(--poison), 0) 2.8%);
  opacity: 0;
  animation: poisonBubble 4.2s ease-in infinite;
  animation-delay: var(--poison-phase-a, 0s);
}
.poisonPool i {
  background:
    radial-gradient(circle at 46% 92%, rgba(var(--poison), .8) 0 1.8%, rgba(var(--poison), 0) 3%),
    radial-gradient(circle at 78% 86%, rgba(var(--poison), .6) 0 1.3%, rgba(var(--poison), 0) 2.4%);
  animation-duration: 5.3s;
  animation-delay: var(--poison-phase-b, -2.4s);
}
@keyframes poisonBubble {
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: .8; }
  100% { transform: translateY(-58%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .poisonPool::after,
  .poisonPool i,
  .poisonPool--mix::before,
  .poisonPool--mixing { animation: none; }
  .poisonPool--fading { display: none; }
}