/* =========================================================
   ENVIRONMENT -- Hintergrund/Grid/Scanlines/Atmosphaere (Master Brief Abschnitt 15).
   Nur die globale Umgebungsschicht, keine Screen-spezifischen Panels.
   Aus style.css extrahiert (nicht dupliziert) -- style.css enthaelt diese Regeln
   nicht mehr.
   ========================================================= */
.bg-fx-layer {
    position: fixed; inset: 0; z-index: -1;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,0,127,0.18), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(0,240,255,0.16), transparent 40%),
        var(--ec-bg-0);
    background-size: cover; background-position: center;
    opacity: 1; pointer-events: none;
    transform: scale(1);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.bg-fx-layer.matrix-active { transform: scale(1.06); filter: brightness(1.1); }

/* Terminal-Pattern Micro-Overlay -- sehr subtil (0.025 Opazitaet), Inhalte bleiben
   immer dominant (Master Brief Abschnitt 15: "Grid und Scanlines muessen so subtil
   sein, dass Inhalte immer dominant bleiben"). */
.app-container::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(0deg, rgba(245,247,255,0.025) 0px, rgba(245,247,255,0.025) 1px, transparent 1px, transparent 3px);
    pointer-events: none;
    z-index: 1;
}

/* Cinema Focus Overlay */
.cinema-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0);
    z-index: -2; pointer-events: none;
    transition: background 0.6s ease;
}
.cinema-overlay.active { background: rgba(0,0,0,0.7); z-index: 3; }

/* Rote Rand-Vignette bei Timer-Panik (<3s) -- liegt wie .cinema-overlay HINTER dem
   Spielecontainer (z-index 3 vs. 10), kann also nie ins Spielfeld hineinbluten. */
.timer-vignette {
    position: fixed; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(239,68,68,0.5) 90%);
    opacity: 0; transition: opacity 0.3s ease;
}
.timer-vignette.active { opacity: 1; animation: vignettePulse 1s ease-in-out infinite; }
@keyframes vignettePulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }