body {
            background-color: #000;
            margin: 0px;
            overflow: hidden;
            color: #fff;
            font-family: monospace;
            font-size: 13px;
        }
        
        .info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display: block;
        }
        
        .controls {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.9);
            padding: 15px;
            border-radius: 8px;
            z-index: 100;
            min-width: 220px;
            border: 1px solid #333;
        }
        
        .control-group {
            margin: 12px 0;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #ddd;
            font-size: 12px;
        }
        
        input[type="range"] {
            width: 180px;
            margin: 4px 0;
        }
        
        input[type="checkbox"] {
            margin-right: 8px;
            transform: scale(1.2);
        }
        
        select {
            background: #222;
            color: #fff;
            border: 1px solid #555;
            padding: 4px;
            border-radius: 3px;
            width: 100px;
        }
        
        #hint-text {
            margin-top: 20px;
            color: #aaa;
            font-size: 14px;
        }
        
        .value-display {
            color: #4a9eff;
            font-weight: bold;
        }
        
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 16px;
            z-index: 200;
        }

        /* Mobile optimizations */
@media (max-width: 768px) {
    /* Prevent zoom on input focus */
    input, select, textarea, button {
        font-size: 16px !important;
    }
    
    /* Optimize welcome screen for mobile */
    #welcome-overlay div[style*="font-size:3.2em"] {
        font-size: 2em !important;
        padding: 0 10px;
        line-height: 1.2 !important;
    }
    #continue-prompt {
        font-size: 1em !important;
        padding: 0 10px;
        line-height: 1.4 !important;
    }
    
    /* Better mobile scrolling */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Controls panel mobile optimization */
    #controls-panel {
        position: fixed !important;
        top: 15px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        width: 85vw !important;
        max-width: 380px !important;
        z-index: 10000 !important;
    }
    
    #controls-toggle {
        width: 100%;
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
        touch-action: manipulation !important;
    }
    
    .controls {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        margin-top: 6px !important;
        min-width: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .control-group {
        margin: 6px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .control-group label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        color: #ddd !important;
    }
    
    .control-group input[type="range"] {
        width: 100% !important;
        height: 32px !important;
        touch-action: pan-x !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background: #333 !important;
        border-radius: 4px !important;
        outline: none !important;
        margin: 4px 0 !important;
    }
    
    .control-group input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #4a9eff !important;
        cursor: pointer !important;
        border: 2px solid #fff !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
    .control-group input[type="range"]::-moz-range-thumb {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #4a9eff !important;
        cursor: pointer !important;
        border: 2px solid #fff !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
    .control-group input[type="checkbox"] {
        transform: scale(1.3) !important;
        margin-right: 10px !important;
    }
    
    .control-group select {
        font-size: 14px !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;
        width: 100% !important;
        height: 40px !important;
        background: #333 !important;
        color: #fff !important;
        border: 1px solid #555 !important;
        touch-action: manipulation !important;
    }
    
    .control-group input[type="file"] {
        font-size: 14px !important;
        padding: 8px !important;
        width: 100% !important;
        background: rgba(51, 51, 51, 0.95) !important;
        color: #fff !important;
        border: 1px solid #555 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
    }
    
    .control-group input[type="file"]::-webkit-file-upload-button {
        background: #4a9eff !important;
        color: #fff !important;
        border: none !important;
        padding: 6px 12px !important;
        border-radius: 4px !important;
        margin-right: 8px !important;
        font-size: 12px !important;
        cursor: pointer !important;
    }
    
    #fps-counter, #sys-info {
        display: none !important;
    }
    
    .info {
        font-size: 12px !important;
        padding: 6px 12px !important;
        bottom: 80px !important;
        top: auto !important;
        left: 15px !important;
        right: 15px !important;
        text-align: center !important;
        position: fixed !important;
        background: rgba(0,0,0,0.6) !important;
        border-radius: 6px !important;
        user-select: none !important;
    }
    
    .loading {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    /* Make bottom warning smaller on mobile */
    [style*="position: fixed; bottom: 10px;"] span {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    
    .desktop-hint {
        display: none !important;
    }
    
    .mobile-hint {
        display: inline !important;
    }
    
    /* Mobile joystick enhanced styles */
    #mobile-joystick {
        display: block !important;
        position: fixed !important;
        bottom: 30px !important;
        left: 20px !important;
        width: 100px !important;
        height: 100px !important;
        z-index: 9998 !important;
        pointer-events: auto !important;
        touch-action: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    #joystick-base {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.15) !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        position: relative !important;
        touch-action: none !important;
        pointer-events: auto !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    #joystick-knob {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.7) !important;
        position: absolute !important;
        top: 30px !important;
        left: 30px !important;
        transition: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        pointer-events: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Enhanced mobile controls accessibility */
    #controls-toggle {
        background: rgba(255,255,255,0.2) !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        min-height: 48px !important;
        min-width: 48px !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
        user-select: none !important;
        cursor: pointer !important;
    }
    
    #controls-toggle:active {
        background: rgba(255,255,255,0.3) !important;
        transform: scale(0.95) !important;
    }
    
    /* File inputs mobile enhancement */
    #custom_bg, #custom_stars {
        background: rgba(51, 51, 51, 0.95) !important;
        border: 1px solid #555 !important;
        border-radius: 6px !important;
        padding: 8px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        font-size: 14px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
    }
    
    /* Quality dropdown mobile enhancement */
    #quality {
        background: #333 !important;
        border: 1px solid #555 !important;
        border-radius: 6px !important;
        padding: 8px 10px !important;
        min-height: 44px !important;
        font-size: 14px !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
    }
    
    /* Reset camera button */
    #reset-camera {
        background: rgba(255,255,255,0.15) !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        min-height: 44px !important;
        font-size: 14px !important;
        color: #fff !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
        user-select: none !important;
    }
    
    #reset-camera:active {
        background: rgba(255,255,255,0.25) !important;
        transform: scale(0.95) !important;
    }
    
    /* Improve canvas performance on mobile */
    canvas {
        image-rendering: optimizeSpeed !important;
        image-rendering: -webkit-optimize-contrast !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
    
    /* Better mobile landscape orientation */
    @media (orientation: landscape) and (max-height: 500px) {
        #controls-panel {
            top: 10px !important;
            transform: translateX(-50%) scale(0.9) !important;
        }
        
        .info {
            bottom: 60px !important;
            font-size: 11px !important;
        }
        
        #mobile-joystick {
            bottom: 15px !important;
            transform: scale(0.8) !important;
        }
    }
    
    /* Enhanced touch feedback */
    .control-group input[type="range"]:active::-webkit-slider-thumb {
        transform: scale(1.2) !important;
    }
    
    /* Prevent text selection on mobile */
    .controls, #controls-toggle, #mobile-joystick, .info {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
}