/* =====================================================================
   Footer-Minispiel „Torschuss auf die Rakete"
   Fußballer links auf der grauen Footer-Linie, davor der Ball. Kunde hält
   die Maustaste / den Finger (Kraft lädt), lässt los → Ball fliegt im Bogen,
   hüpft auf der Linie. Trifft er die Rakete → Explosion. Danach Reset.
   NUR Desktop/Tablet (>=768px), nie bei prefers-reduced-motion.
   Positionen setzt das JS live (assets/js/footer-fussball-spiel.js).
   © HOCH-M.D. NATURSTEINE UG – eigenständiges Werk.
   ===================================================================== */

/* Container – dient nur als Anker; alle Kinder werden per fixed positioniert.
   Initial versteckt (display:none), damit der Fußballer beim Laden NICHT oben links
   in der Ecke aufblitzt. Das JS blendet ihn erst ein, wenn er (auf der Linie) aufgebaut ist. */
.fb-spiel {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 9998;
    pointer-events: none;
    display: none;
}

/* Der Ball (unser SVG). Positionierung + Rotation per transform aus dem JS. */
.fb-ball {
    position: fixed;
    left: 0;
    top: 0;
    width: 15px;    /* nochmals 15 % kleiner (vorher 18px), passender zum Fußballer */
    height: 15px;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}
.fb-ball svg { display: block; width: 100%; height: 100%; }

/* Unsichtbare Auslöse-Fläche (nur hier reagiert das Halten – kollidiert nicht
   mit den Footer-Links). Liegt links über der Linie um den Ball. */
.fb-trigger {
    position: fixed;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    z-index: 9998;
    touch-action: none;   /* verhindert Scrollen/Zoom beim Halten auf Touch */
}

/* Explosions-Partikel (per JS erzeugt). */
.fb-partikel {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    will-change: transform, opacity;
}

/* Vorerst nur auf echten Maus-Geräten (Desktop). Touch-Geräte (Tablet/Handy) → Spiel aus,
   bis die iOS-Positionierung separat gelöst ist. */
@media (hover: none), (pointer: coarse) {
    .fb-spiel, .fb-trigger { display: none !important; }
}
/* Barrierefreiheit: Bewegung reduzieren → Spiel aus. */
@media (prefers-reduced-motion: reduce) {
    .fb-spiel, .fb-trigger { display: none !important; }
}