/* ============================================
   🚀 MOBILE PERFORMANCE OPTIMIZATIONS
   Adaptive CSS based on device capabilities
   ============================================ */

/* ============================================
   TIER 1: MOBILE OPTIMIZATIONS (All Mobile Devices)
   Applied via JS: body.mobile-device
   ============================================ */

/* 🔥 SIMPLIFY BODY BACKGROUND - HIGH PRIORITY (20-30% rendering overhead) */
/* Remove complex 3-layer gradients and wood grain patterns */
body.mobile-device {
    background:
        /* Simple 2-stop gradient only */
        linear-gradient(
            to bottom,
            #1c0a00 0%,
            #2d1b00 50%,
            #1a0f00 100%
        ) !important;
    background-attachment: scroll !important; /* Don't use fixed on mobile */
}

/* 🔥 DISABLE BLUR FILTERS - Major CPU saver (20-40% improvement) */
body.mobile-device .campfire-scene-wrapper .smoke-particle,
body.mobile-device .campfire-scene-wrapper .cloud {
    filter: none !important;
}

/* 🔥 SIMPLIFY BOX-SHADOWS - 10-15% improvement */
body.mobile-device .campfire-scene-wrapper .moon {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
}

body.mobile-device .campfire-scene-wrapper .stone {
    box-shadow:
        -2px 0 8px rgba(255, 111, 0, 0.3),
        0 3px 8px rgba(0, 0, 0, 0.8) !important;
}

body.mobile-device .campfire-scene-wrapper .ground {
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6) !important;
}

/* 🔥 SIMPLIFY FIRE GLOW - Remove blur */
body.mobile-device .campfire-scene-wrapper .fire-glow {
    filter: none !important;
}

body.mobile-device .campfire-scene-wrapper .ground-glow {
    filter: none !important;
}

/* ============================================
   TIER 2: LOW-END DEVICE OPTIMIZATIONS
   Applied via JS: body.low-end-device
   ============================================ */

/* 🔥 REDUCE ANIMATION FPS - 30fps instead of 60fps (50% CPU reduction) */
body.low-end-device * {
    /* Slower animations = fewer frames = less CPU */
    animation-duration: calc(var(--original-duration, 1s) * 1.5) !important;
}

/* 🔥 DISABLE COMPLEX ANIMATIONS */
body.low-end-device .campfire-scene-wrapper .shooting-star,
body.low-end-device .campfire-scene-wrapper .meteorite,
body.low-end-device .campfire-scene-wrapper .ufo,
body.low-end-device .campfire-scene-wrapper .firefly {
    display: none !important;
}

/* 🔥 STATIC FLAMES - Remove flickering animation */
body.low-end-device .campfire-scene-wrapper .flame-layer {
    animation: none !important;
}

/* 🔥 STATIC GRASS - Remove swaying */
body.low-end-device .campfire-scene-wrapper .grass-blade {
    animation: none !important;
}

/* 🔥 DISABLE GRADIENT ANIMATIONS */
body.low-end-device .campfire-scene-wrapper .header h1 {
    animation: none !important;
    text-shadow: 0 0 20px rgba(252, 163, 17, 0.8) !important;
}

/* 🔥 STATIC TOTEM - Remove pulsing */
body.low-end-device .campfire-scene-wrapper .totem-segment.active {
    animation: none !important;
}

/* ============================================
   TIER 3: SLOW CONNECTION OPTIMIZATIONS
   Applied via JS: body.slow-connection
   ============================================ */

/* 🔥 DISABLE ALL NON-CRITICAL ANIMATIONS */
body.slow-connection .campfire-scene-wrapper .ember-particle,
body.slow-connection .campfire-scene-wrapper .smoke-particle,
body.slow-connection .campfire-scene-wrapper .star {
    animation-play-state: paused !important;
}

/* 🔥 MINIMAL FIRE - Only core flame layers */
body.slow-connection .campfire-scene-wrapper .flame-layer-1,
body.slow-connection .campfire-scene-wrapper .flame-layer-2 {
    display: none !important;
}

/* ============================================
   COMBINED: EXTREME OPTIMIZATION MODE
   low-end-device + slow-connection
   ============================================ */

body.low-end-device.slow-connection .campfire-scene-wrapper {
    /* Ultra minimal mode - static scene only */
}

body.low-end-device.slow-connection .campfire-scene-wrapper .fire-container {
    /* Show only 1 static flame layer */
}

body.low-end-device.slow-connection .campfire-scene-wrapper .flame-layer:not(.flame-layer-3) {
    display: none !important;
}

body.low-end-device.slow-connection .campfire-scene-wrapper .flame-layer-3 {
    animation: none !important;
    opacity: 1 !important;
}

/* ============================================
   ANIMATION PERFORMANCE HELPERS
   ============================================ */

/* Force hardware acceleration on critical elements */
body.mobile-device .campfire-scene-wrapper .fire-container,
body.mobile-device .campfire-scene-wrapper .flame-layer,
body.mobile-device .campfire-scene-wrapper .totem-segment {
    transform: translateZ(0);
    will-change: auto; /* Remove will-change to reduce memory on mobile */
    backface-visibility: hidden;
}

/* Reduce will-change usage - Only use when animating */
body.mobile-device [will-change] {
    will-change: auto !important;
}

/* ============================================
   GROUND PLANE SIMPLIFICATION (Mobile)
   ============================================ */

/* 🔥 CRITICAL: Simplify 80 gradients to ~10 gradients */
body.mobile-device .campfire-scene-wrapper .ground {
    background:
        /* Fire glow only */
        radial-gradient(ellipse at 50% 60%,
            rgba(255, 111, 0, 0.15) 0%,
            rgba(255, 160, 0, 0.08) 20%,
            transparent 40%
        ),

        /* Simplified grass patches (4 instead of 24) */
        radial-gradient(circle at 25% 50%, rgba(74, 124, 89, 0.6) 0%, transparent 8%),
        radial-gradient(circle at 50% 65%, rgba(74, 124, 89, 0.5) 0%, transparent 10%),
        radial-gradient(circle at 75% 55%, rgba(74, 124, 89, 0.6) 0%, transparent 8%),

        /* Simplified rocks (2 instead of 14) */
        radial-gradient(circle at 30% 48%, rgba(60, 60, 60, 0.8) 0%, transparent 2%),
        radial-gradient(circle at 70% 52%, rgba(65, 65, 65, 0.8) 0%, transparent 2.5%),

        /* Base dirt only */
        radial-gradient(ellipse at center,
            #3d2817 0%,
            #2d1b00 50%,
            #1a0f00 100%) !important;
}

/* ============================================
   BLUR REMOVAL FOR GLOBAL ELEMENTS
   ============================================ */

/* Notification panel blur */
body.mobile-device .notification-panel {
    backdrop-filter: none !important;
    background: rgba(45, 27, 0, 0.95) !important; /* Solid background instead */
}

/* Modal backdrop blur */
body.mobile-device .modal-overlay {
    backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.85) !important;
}

/* Navigation blur - CRITICAL FIX: Remove backdrop-filter (50-70% scroll jank) */
body.mobile-device .bottom-nav {
    backdrop-filter: none !important;
    background: #1c1917 !important; /* Solid background instead of blur */
}

/* ============================================
   PHONE UI OPTIMIZATIONS
   ============================================ */

body.mobile-device #phoneModal,
body.mobile-device .phone-screen {
    backdrop-filter: none !important;
}

/* ============================================
   REDUCE MOTION SUPPORT (Accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    /* All optimizations already handled in campfire-scene.css */
}

/* ============================================
   SCROLL SNAP FOR SMOOTHER FEELING
   Native browser feature for improved scroll experience
   ============================================ */

/* Enable scroll snap on main container */
body.mobile-device #app {
    scroll-snap-type: y proximity;
    scroll-padding-top: 80px; /* Account for header */
    scroll-behavior: smooth; /* Smooth scrolling animations */
}

/* Snap views to viewport edges */
body.mobile-device .view-container {
    scroll-snap-align: start;
}

/* Ensure scroll snap doesn't break modals */
body.mobile-device #app.modal-open {
    scroll-snap-type: none;
}

/* ============================================
   DEBUG INFO (Development Only)
   ============================================ */

body.mobile-device.debug-performance::before {
    content: "📱 MOBILE MODE";
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0, 255, 0, 0.8);
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 999999;
    font-weight: bold;
}

body.low-end-device.debug-performance::after {
    content: "🐌 LOW-END MODE";
    position: fixed;
    top: 40px;
    left: 10px;
    background: rgba(255, 165, 0, 0.8);
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 999999;
    font-weight: bold;
}

body.slow-connection.debug-performance::after {
    content: "🐢 SLOW CONNECTION";
    position: fixed;
    top: 70px;
    left: 10px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 999999;
    font-weight: bold;
}