/* Destri (Zornfang) - animiertes Maskottchen. Sprite-Atlas: 8 Spalten x 9 Reihen,
   eine Zelle = 192 x 208px, Gesamtgroesse 1536 x 1872px. Siehe dragon.js fuer die
   Reihenzuordnung (idle/run/wave/fire/...). */
/* Breite/Hoehe/background-size werden bewusst nicht hier, sondern in dragon.js
   gesetzt (scaleFor()): die Groesse haengt von der Viewport-Breite ab und muss
   exakt zu den Sprite-Offsets passen, die dieselbe Funktion fuer die Frame-
   Animation berechnet - sonst laufen Sichtbild und Frame-Ausschnitt auseinander
   (Ruckeln/Flackern, v.a. beim Wechsel zwischen den Breakpoints). */
.destri-dragon
{
   position: fixed;
   left: 0;
   top: 0;
   background-image: url('images/dragon/zornfang.webp');
   background-repeat: no-repeat;
   image-rendering: pixelated;
   pointer-events: none;
   z-index: 9500;
   display: none;
}
.destri-dragon.is-active
{
   display: block;
}
/* Comic-Sprechblase: weiss, schwarzer Rand, flacher Versatz-Schatten, Schwaenzchen
   aus zwei versetzten Dreiecken (schwarz aussen, weiss innen = wirkt umrandet). */
.destri-bubble
{
   position: absolute;
   left: 50%;
   bottom: 100%;
   transform: translateX(-50%) scale(0.85);
   transform-origin: 50% 100%;
   margin-bottom: 16px;
   width: max-content;
   max-width: 180px;
   padding: 10px 14px;
   background: #fff;
   border: 3px solid #111;
   border-radius: 46% 46% 46% 8% / 62% 62% 38% 38%;
   color: #111;
   font-family: Arial, sans-serif;
   font-weight: bold;
   font-size: 12.5px;
   line-height: 1.3;
   text-align: center;
   box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.85);
   opacity: 0;
   transition: opacity 180ms linear, transform 180ms linear;
}
.destri-bubble.is-visible
{
   opacity: 1;
   transform: translateX(-50%) scale(1);
}
.destri-bubble::before,
.destri-bubble::after
{
   content: "";
   position: absolute;
   top: 100%;
   left: 22%;
   width: 0;
   height: 0;
   border-style: solid;
}
.destri-bubble::before
{
   border-width: 12px 6px 0 0;
   border-color: #111 transparent transparent transparent;
   margin-top: -1px;
}
.destri-bubble::after
{
   border-width: 9px 4px 0 0;
   border-color: #fff transparent transparent transparent;
   margin-left: 2px;
}
@media (prefers-reduced-motion: reduce)
{
   .destri-dragon
   {
      display: none !important;
   }
}