/* ⚡ Leistungs-Stufen der Webseite (gesteuert durch perf.js, Klasse am <html>-Element):
 *   fx-full   = alle Effekte wie ursprünglich gestaltet
 *   fx-normal = Standard: gleiche Optik, aber ohne die kostspieligsten Details (Blur auf kleinen Bedienelementen, Vollbild-HUD steht still, weniger CSS-Funken)
 *   fx-low    = sparsam: kein Hintergrund-Canvas, keine Dauer-Animationen, kein Blur  (automatisch bei schwacher Hardware / „Animationen reduzieren“ / Datensparen)
 *   fx-idle   = zusätzlich: nach 30 s ohne Bedienung wird ALLES Animierte angehalten (Leerlauf kostet fast nichts) */

/* --- Leerlauf: alle CSS-Animationen anhalten --- */
html.fx-idle *:not(.tn-ticker):not(.tn-ticker *), html.fx-idle *:not(.tn-ticker):not(.tn-ticker *)::before, html.fx-idle *:not(.tn-ticker):not(.tn-ticker *)::after { animation-play-state: paused !important; }   /* Liveticker (.tn-ticker) läuft immer – auch im Leerlauf und bei „Animationen aus“ */

/* --- Normal: gleiche Optik, weniger Last --- */
html.fx-normal :is(button, select, input, textarea, .btn, [class*="-btn"], .top-select, .discord-login-field) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.fx-normal #video-bg-fx::after, html.fx-normal .hud-scan-beam { animation-play-state: paused; }
html.fx-normal .logo-embers > .ember:nth-child(n+6) { display: none; }
html.fx-normal #god-intro .gi-scan { display: none; }
/* Aurora-Hintergrund (Vollbild, animierter Filter = teuer): in normal/sparsam ein ruhiges Standbild */
html.fx-normal body::before, html.fx-low body::before { animation: none !important; }

/* --- Sparsam --- */
html.fx-low #god-bg-canvas, html.fx-low .hud-scan-beam, html.fx-low .logo-embers, html.fx-low .hero-glow-ring, html.fx-low #video-bg-fx::after { display: none !important; }
html.fx-low *, html.fx-low *::before, html.fx-low *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.fx-low *:not(#god-ld):not(#god-ld *):not(#god-intro):not(#god-intro *):not(.tn-slot):not(.tn-slot *):not(.tn-ticker):not(.tn-ticker *) { animation-iteration-count: 1 !important; }
html.fx-low *:not(#god-ld):not(#god-ld *):not(#god-intro):not(#god-intro *):not(.tn-slot):not(.tn-slot *):not(.tn-ticker):not(.tn-ticker *)::before, html.fx-low *:not(#god-ld):not(#god-ld *):not(#god-intro):not(#god-intro *):not(.tn-slot):not(.tn-slot *):not(.tn-ticker):not(.tn-ticker *)::after { animation-iteration-count: 1 !important; }
html.fx-low #god-intro .gi-bg { filter: brightness(.55); } html.fx-low #god-intro .gi-scan, html.fx-low #god-intro canvas.gi-fx { display: none; }
/* --- AUS: gar keine Animationen (vom Besucher gewählt) --- */
html.fx-off *:not(#god-ld):not(#god-ld *):not(#god-fx-toast):not(#god-intro):not(#god-intro *):not(.tn-ticker):not(.tn-ticker *), html.fx-off *:not(#god-intro):not(#god-intro *):not(.tn-ticker):not(.tn-ticker *)::before, html.fx-off *:not(#god-intro):not(#god-intro *):not(.tn-ticker):not(.tn-ticker *)::after { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }   /* Animationen „springen“ sofort in den Endzustand – so bleiben Einblend-Effekte (Kacheln) sichtbar, nichts läuft mehr */
html.fx-off #god-bg-canvas, html.fx-off #fluid-canvas, html.fx-off .hud-scan-beam, html.fx-off .logo-embers, html.fx-off .hero-glow-ring, html.fx-off #video-bg-fx::after { display: none !important; }
html.fx-off *, html.fx-off *::before, html.fx-off *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body { --fx-level: 1; }

/* --- Schalter „Animationen AN/AUS“: links am Rand, zweizeilig; nur beim ersten Besuch groß, danach als kleine Lasche (beim Darüberfahren klappt er auf) --- */
#god-anim-wrap { position: fixed; left: 0; top: 58%; z-index: 2147481000; }
#god-anim-sw { position: relative; display: flex; align-items: center; gap: 10px; max-width: 230px; padding: clamp(7px, 0.4vw + 4px, 12px) clamp(12px, 0.7vw + 6px, 20px) clamp(7px, 0.4vw + 4px, 12px) clamp(9px, 0.5vw + 5px, 14px); border: 1px solid rgba(46, 204, 113, 0.65); border-left: 0; border-radius: 0 16px 16px 0; background: rgba(8, 12, 18, 0.94); color: #e9edf2; font: 600 clamp(0.66rem, 0.45rem + 0.35vw, 0.86rem)/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: left; cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(46, 204, 113, 0.22); transition: transform .15s, background .15s; }
#god-anim-sw:hover, #god-anim-sw:focus-visible { background: rgba(20, 30, 28, 0.98); transform: translateX(3px); outline: none; }
#god-anim-sw .dot { width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 10px #2ecc71; flex: none; }
#god-anim-sw .full b { color: #2ecc71; font-weight: 700; } #god-anim-sw .short { display: none; }
#god-anim-sw.off, #god-anim-wrap .off { border-color: rgba(255, 120, 120, 0.7); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 90, 90, 0.2); } #god-anim-sw.off .dot { background: #ff6b6b; box-shadow: 0 0 10px #ff6b6b; } #god-anim-sw.off .full b { color: #ff9a9a; }
#god-anim-min { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: #0c1118; color: #fff; font: 700 0.8rem/1 system-ui, sans-serif; cursor: pointer; padding: 0; display: grid; place-items: center; }
#god-anim-min:hover { background: #2a3340; }
/* klein: nur die Lasche mit Punkt */
#god-anim-wrap.min #god-anim-min { display: none; } #god-anim-wrap.min #god-anim-sw .dot { width: 14px; height: 14px; }
#god-anim-wrap.min #god-anim-sw { max-width: 40px; padding: 14px 10px 14px 10px; overflow: hidden; white-space: nowrap; gap: 0; justify-content: center; }
#god-anim-wrap.min #god-anim-sw .full, #god-anim-wrap.min #god-anim-sw .short { display: none; }
#god-anim-wrap.min:hover #god-anim-sw, #god-anim-wrap.min:focus-within #god-anim-sw { max-width: 230px; overflow: visible; gap: 10px; justify-content: flex-start; padding: clamp(7px, 0.4vw + 4px, 12px) clamp(12px, 0.7vw + 6px, 20px) clamp(7px, 0.4vw + 4px, 12px) clamp(9px, 0.5vw + 5px, 14px); white-space: normal; }
#god-anim-wrap.min:hover #god-anim-sw .full, #god-anim-wrap.min:focus-within #god-anim-sw .full { display: block; }
#god-anim-sw:hover::after, #god-anim-sw:focus-visible::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: min(290px, 38vw); min-width: 200px; padding: 12px 14px; border-radius: 12px; background: #151c25; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65); color: #eef1f3; font: 400 0.78rem/1.5 system-ui, sans-serif; letter-spacing: 0; white-space: normal; text-align: left; }
#god-anim-hint { position: fixed; left: 14px; top: calc(58% + 64px); z-index: 2147481000; max-width: min(250px, 40vw); padding: 12px 14px; border-radius: 12px; background: rgba(12, 17, 24, 0.97); border: 1px solid rgba(46, 204, 113, 0.7); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); color: #e9edf2; font: 500 0.8rem/1.45 system-ui, sans-serif; } #god-anim-hint b { color: #2ecc71; }
@media (max-width: 1100px) { #god-anim-sw .full { display: none; } #god-anim-sw .short { display: inline; } #god-anim-wrap.min:hover #god-anim-sw .full { display: none; } #god-anim-wrap.min:hover #god-anim-sw .short { display: inline; } }
@media (max-height: 520px) { #god-anim-wrap { top: 46%; } #god-anim-hint { top: calc(46% + 56px); } }
/* Handy: Animationen grundsätzlich aus, Schalter und Hinweise gar nicht anzeigen */
html.is-phone #god-anim-wrap, html.is-phone #god-anim-sw, html.is-phone #god-anim-hint, html.is-phone #fx-toggle-btn, html.is-phone #god-fx-toast { display: none !important; }
@media print { #god-anim-wrap, #god-anim-hint { display: none; } }

/* ⚙️ Einstellungs-Fenster (früher Zahnrad oben rechts) – öffnet sich mittig, schließt per ✕, Esc oder Klick daneben */
.settings-wrapper { position: static !important; top: auto !important; right: auto !important; z-index: auto !important; }   /* z-index auto: sonst bildet der Wrapper (Flex-Element) einen eigenen Stapel und liegt UNTER dem Hintergrund-Schleier */
#settings-backdrop { position: fixed; inset: 0; z-index: 2147481500; background: rgba(3, 5, 9, 0.6); opacity: 0; pointer-events: none; transition: opacity .2s; }
html.settings-open #settings-backdrop { opacity: 1; pointer-events: auto; }
.theme-container { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; width: min(420px, 92vw); max-height: 88vh; overflow-y: auto; z-index: 2147481600; transform: translate(-50%, -46%) !important; padding: 18px !important; gap: 12px !important; border-radius: 16px !important; }
.theme-container.active { transform: translate(-50%, -50%) !important; }
.theme-container .set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-family: 'Orbitron', system-ui, sans-serif; letter-spacing: 0.08em; color: #fff; font-size: 0.9rem; }
.theme-container .set-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff; cursor: pointer; font-size: 0.95rem; } .theme-container .set-x:hover { background: rgba(255, 255, 255, 0.15); }
html.is-phone .theme-container #fx-toggle-btn { display: none !important; }