/* ============================================
   FPS Monitor - Spezifische Styles
   Nutzt Liquid Glass Design aus liquid-glass.css
   ============================================ */

.fps-monitor {
    position: fixed;
    top: 20px;
    right: calc(20px + 48px + 12px);
    height: 48px;
    min-height: 48px;
    min-width: 120px;
    z-index: 10000;
    border-radius: 30px;
    border: none;
    background: transparent; /* Transparent - Liquid Glass übernimmt Hintergrund */
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
    display: none !important; /* Deaktiviert: FPS-Anzeige ist unsichtbar */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important; /* Verhindert Interaktion */
}

@media (min-width: 1024px) {
    .fps-monitor {
        height: 60px;
        min-height: 60px;
        border-radius: 60px;
        top: 20px;
        right: auto;
        left: calc(50% + 325px + 20px);
        transform: none;
    }
}

/* Spezifische Gradient-Stops für FPS Monitor (überschreibt generischen conic-gradient) */
/* Linear-Gradient für längliche, abgerundete Form */
.fps-monitor .liquidGlass-wrapper::after {
    background: linear-gradient(
        var(--gradient-angle, 195deg), /* Nutzt CSS-Variable für dynamischen Winkel */
        rgba(255, 255, 255, 0.75) 6%,
        rgba(255, 255, 255, 0) 8%,
        rgba(255, 255, 255, 0) 90%,
        rgba(255, 255, 255, 0.75) 93%
    );
}

/* FPS Monitor Content */
.fps-monitor-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    height: 100%;
    position: relative;
    isolation: isolate;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit; /* Erbt von .liquidGlass-text */
    pointer-events: none;
    user-select: none;
}

.fps-value {
    font-size: 15px;
    font-weight: 700;
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: inherit;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.fps-label {
    font-size: 10px;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.fps-separator {
    font-size: 11px;
    opacity: 0.4;
    margin: 0 8px;
    font-weight: 300;
}

.latency-value {
    font-size: 15px;
    font-weight: 700;
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: inherit;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.latency-label {
    font-size: 10px;
    opacity: 0.75;
    text-transform: lowercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Mobile: Anpassungen für kleinere Bildschirme */
@media (max-width: 767px) {
    .fps-monitor-content {
        padding: 0 var(--spacing-sm);
        font-size: 11px;
    }
    
    .fps-value {
        font-size: 13px;
        min-width: 28px;
    }
    
    .fps-label {
        font-size: 9px;
        letter-spacing: 0.8px;
    }
    
    .fps-separator {
        font-size: 10px;
        margin: 0 6px;
    }
    
    .latency-value {
        font-size: 13px;
        min-width: 36px;
    }
    
    .latency-label {
        font-size: 9px;
        letter-spacing: 0.8px;
    }
}

/* ============================================
   Luminanz Sample-Fläche
   ============================================ */

.luminance-sample-area {
    position: fixed;
    z-index: 9999;
    border: none;
    background: transparent;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: 4px;
    display: none; /* Deaktiviert: Sampling-Fläche ist unsichtbar */
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
}

.luminance-sample-text {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-blue, #4070E1);
    text-align: center;
    user-select: none;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

@media (min-width: 1024px) {
    .luminance-sample-area {
        border-radius: 8px;
    }
    
    .luminance-sample-text {
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    .luminance-sample-text {
        font-size: 9px;
    }
}

/* Accessibility: Verstecke bei prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .fps-monitor {
        display: none;
    }
    
    .luminance-sample-area {
        display: none;
    }
}