@media (min-width: 769px) { 
        .container .jumbotron {
            width: 50%;
        }
        .col-md-12 {
            margin-left: 0;
        }
        
        /* Center canvas row accounting for toggle panel */
        .row:has(#canvas-container) .col-md-12 {
            margin-left: 55px;
        }
        #playback-controls {
            bottom: 20px !important; /* Sits low since footer is gone */
            width: auto;
            min-width: 320px;
        }
     
    }

    html {
        min-height: 100vh;
    }

    #canvas-container {
        text-align: center;
        margin: 0 auto;
    }
    
    canvas {
        display: block;
        margin: 0 auto;
    }

    /* --- Button and Control Base Styles --- */
    .controls { text-align: center; margin: 20px 0; }
    .btn-custom { background-color: #444; color: #fff; border: 1px solid #666; padding: 8px 20px; margin: 0 5px; cursor: pointer; transition: all 0.2s; font-family: 'Open Sans Condensed', Arial, sans-serif; font-size:14px; }
    .btn-custom:hover { background-color: #555; }
    .btn-pressed { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
    .btn-playing { background-color: #28a745 !important; border-color: #28a745 !important; }
    .debug-info { font-size: 12px; color: #999; margin-top: 10px; }
    #data-toggle-btn { font-size: 10px; padding: 2px 6px; margin-top: 3px; background: none; border: 1px solid #666; color: #999; cursor: pointer; }
    #master-volume { width: 200px; height: 6px; -webkit-appearance: none; appearance: none; background: #444; outline: none; border-radius: 3px; display: inline-block; }
    #master-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #888; cursor: pointer; border-radius: 50%; }
    #master-volume::-moz-range-thumb { width: 16px; height: 16px; background: #888; cursor: pointer; border-radius: 50%; border: none; }
    
    /* --- Toggle switch styling --- */
    .switch { position: relative; display: inline-block; width: 36px !important; height: 18px; margin-left: 0 !important; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .3s; border-radius: 18px; margin-left: 0 !important; width: 36px !important; }
    .slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
    input:checked + .slider { background-color: #28a745; }
    input:checked + .slider:before { transform: translateX(18px); }

    /* ---------------------------------------------------------------------- */
    /* MOBILE (phone size <= 768px) STYLES */
    /* ---------------------------------------------------------------------- */

    @media (max-width: 768px) { 

        /* --- 1. Toggle Panel Styling --- */
        #toggle-panel {
            top: auto !important;           
            right: auto !important;
            bottom: 10px !important; /*was 30px*/
            left: 50% !important;
            transform: translateX(-50%) !important; 
            
            width: auto !important;
            max-width: 98% !important;

            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            justify-content: center !important;
            padding: 8px 4px !important;
        }

        /* Inner Wrapper: Force single row */
        #toggle-panel > div {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            justify-content: center !important;
            gap: 4px !important; 
            padding: 0 !important;
            background: transparent !important;
        }

        /* Standard Columns (First 3 items) */
        #toggle-panel > div > div {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            margin: 0 !important;
            min-width: 55px !important;
        }

        /* "Auto Reseed" Column - The Grid Layout */
        #toggle-panel > div > div:last-child {
            display: grid !important;
            grid-template-columns: auto auto !important; 
            grid-template-rows: auto auto !important; 
            align-items: start !important; 
            justify-items: center !important;
            gap: 0 8px !important; 
            min-width: auto !important; 
            margin: 0 0 0 4px !important;
        }

        /* The Label */
        #toggle-panel > div > div:last-child > label:first-of-type {
            grid-column: 1 / -1 !important; 
            grid-row: 1 !important;
            width: 100% !important;
            text-align: left !important;
            padding-left: 2px !important;
            margin-bottom: 3px !important; 
        }

        /* The Switch */
        #toggle-panel > div > div:last-child > .switch {
            grid-column: 1 !important;
            grid-row: 2 !important;
            align-self: start !important;
            margin: 0 !important; 
        }

        /* The Dropdown Container */
        #autoreseed-time-container {
            grid-column: 2 !important;
            grid-row: 2 !important;
            position: static !important;   
            transform: none !important;
            width: auto !important;
            display: block !important;
            height: auto !important;
            overflow: visible !important;
            margin: -2px 0 0 0 !important; 
        }
        
        #autoreseed-time {
            margin: 0 !important;
            width: auto !important;
            font-size: 11px !important; 
        }

        /* --- 2. Standard Mobile Optimizations --- */
        #footer { display: none !important; } 
        
        #canvas-container { width: 100% !important; max-width: 100vw !important; }
        canvas { max-width: 100% !important; height: auto !important; }
        .col-md-12 { padding-left: 0 !important; padding-right: 0 !important; }
        
        /* Zone button rules */
        .scene-btn, .btn-custom { padding: 4px 8px !important; font-size: 11px !important; margin: 2px !important; }
        #scene-controls { max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; }
        
        /* Force slider visibility */
        label.switch .slider { display: block !important; position: absolute !important; width: 36px !important; height: 18px !important; background-color: #555 !important; }
        label.switch { position: relative !important; display: inline-block !important; width: 36px !important; height: 18px !important; }
        input:checked + .slider { background-color: #28a745 !important; }

         #playback-controls {
            bottom: 70px !important; /* Sits higher to clear the Toggle Panel below */
            width: 75%;              /* Fit screen width better on phone */
            min-width: auto;
            padding: 8px 15px;       /* Slightly tighter padding */
            left: 50% !important;    /* Re-center explicitly */
            transform: translateX(-50%) !important;
            right: auto !important;
        }

        #world-selector {
            margin-bottom: 15px !important;
        }

    } /*end small screen*/
    
    /* --- 3. LANDSCAPE Specific Fixes (iPhone/Mobile) --- */
    @media (max-width: 768px) and (orientation: landscape) {
        
        /* Reduce Logo/Jumbotron Size */
        .jumbotron {
            padding-top: 5px !important;
            padding-bottom: 5px !important;
            margin-bottom: 5px !important;
            width: 350px !important; /* Narrow width to match dropdown area */
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .jumbotron img {
            max-width: 250px !important; /* Make logo significantly smaller */
            width: auto !important;
        }

        /* Move Toggle Panel to the Left */
        #toggle-panel {
            left: 20px !important;
            right: auto !important;
            transform: none !important;
            bottom: 10px !important;
        }

        /* Move Playback Controls to the Right of Toggle Panel */
        #playback-controls {
            left: auto !important;
            right: 20px !important; /* Pin to right edge */
            transform: none !important;
            bottom: 10px !important; /* Align with toggle panel */
            width: auto !important;
            min-width: unset !important;
            padding: 5px 15px !important; /* Compact padding */
            gap: 10px !important;
        }

        /* Make volume slider smaller in landscape to save space */
        #master-volume {
            width: 100px !important; 
        }
        
        /* Make stop button slightly smaller */
        #stop-all-btn {
            width: 32px;
            height: 32px;
            font-size: 12px;
        }

    }

    /* --- Other General Styles --- */
    .notice { background: url(); background-color:#e2ca2b; }
    #custom_h1_title { color: white; font-family: Open Sans Condensed; font-size: 40px; font-weight: 200; }

    /* --- Dropdown Dark Mode Styling --- */
    #world-selector {
        background-color: #222;
        color: #eee;
        border: 1px solid #666;
    }
    
    /* Keep it dark when clicked/focused */
    #world-selector:focus {
         outline: none;
         border-color: #888;
         background-color: #222;
    }

    /* Force the list options to be dark (fixes the white flash) */
    #world-selector option {
        background-color: #222;
        color: #eee;
    }

    /* --- Control Deck (Stop & Volume) --- */
    /* 1. Base Styles (The "Pill" Look) - Shared by both Desktop & Mobile */
    #playback-controls {
        position: fixed !important;
        left: 50%;
        transform: translateX(-50%); /* Perfectly Center Horizontally */
        
        /* Glassy Dark Look */
        background-color: rgba(20, 20, 20, 0.5);
        border: 1px solid #222;
        border-radius: 50px;
        padding: 10px 25px;
        z-index: 2000;
        
        /* Layout */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    /* Remove top margin from slider so it aligns with the button */
    #master-volume {
        margin-top: 0 !important; 
        vertical-align: middle;
    }

    /* --- Circular Stop Button Styling --- */
    #stop-all-btn {
        /* Force Red Background and Border */
        background-color: #d9534f !important; 
        /*border-color: #d43f3a !important;*/
        color: #fff !important;
        
        /* Shape & Size */
        border-radius: 50% !important;  /* Force Circle */
        width: 40px;
        height: 40px;
        padding: 0 !important;          /* Remove standard button padding */
        
        /* Center the Icon */
        display: flex;
        align-items: center;
        justify-content: center;
        
        font-size: 16px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        transition: all 0.2s ease;
       }
        /* Fix alignment of the stop icon inside the circle */
        #stop-all-btn .glyphicon {
            top: 0 !important;      /* Remove Bootstrap's default 1px drop */
            margin-top: -1px;       /* Optional: Pull it up one more pixel for optical centering */
        }

    /* --- Info Icon and Modal --- */
    .info-icon {
        position: absolute;
        left: -10px;
        bottom: -10px;
        font-size: 32px;
        color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 100;
        line-height: 1;
        text-decoration: none;
    }
    .info-icon:hover {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        transform: scale(1.1);
    }

    /* Modal */
    #info-modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
        background: rgba(42, 42, 42, 0.95);
        border: 2px solid #444;
        border-radius: 8px;
        z-index: 9999;
        padding: 25px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.6);
        color: #ddd;
        font-family: 'Open Sans', sans-serif;
    }
    
    #info-modal h3 {
        margin-top: 0;
        color: #fff;
        /*border-bottom: 1px solid #555;*/
        padding-bottom: 10px;
        margin-bottom: 15px;
        font-weight: 300;
    }
    
    #info-modal p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .modal-close {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 24px;
        cursor: pointer;
        color: #999;
        transition: color 0.2s;
    }
    .modal-close:hover {
        color: #fff;
    }
    
    /* Modal Overlay */
    #info-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
    }

    /* ---------------------------------------------------------------------- */
    /* LOGIN PAGE STYLES                                                       */
    /* ---------------------------------------------------------------------- */
    
    /* Darken background for login page - scoped to .login-page */
    .login-page {
         height: 100%;
        /* background-color: #000 !important;  Override default body bg */
    }
    
    .login-page .jumbotron {
        opacity: 0.6; /* Dim the header logo area */
    }
    
    .login-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        pointer-events: none; /* Let clicks pass through transparent areas if needed, but container needs pointer-events: auto */
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .login-container { 
        pointer-events: auto;
        width: 90%; 
        max-width: 400px; 
        padding: 40px; 
        background: #2a2a2a; 
        border-radius: 8px; 
        text-align: center; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    }
    
    .btn-patreon { background-color: #f96854; color: white; border: none; padding: 12px 20px; border-radius: 4px; font-size: 16px; font-weight: bold; width: 100%; display: block; text-decoration: none; transition: background 0.2s; }
    .btn-patreon:hover { background-color: #e85b46; color: white; text-decoration: none; }
    
    .or-divider { margin: 25px 0; position: relative; text-align: center; }
    .or-divider:before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #444; z-index: 0; }
    .or-divider span { background: #2a2a2a; padding: 0 10px; position: relative; z-index: 1; color: #888; font-size: 12px; text-transform: uppercase; }
    
    .form-control { background: #333; border: 1px solid #444; color: #fff; height: 45px; }
    .form-control:focus { border-color: #f96854; box-shadow: none; outline: none; }
    
    /* Explicit styling for enter button to force visibility */
    button.btn-guest { 
        background-color: #444 !important; 
        color: #ffffff !important; 
        width: 100%; 
        border: none; 
        padding: 12px; 
        margin-top: 15px; 
        border-radius: 4px; 
        font-weight: bold; 
        text-transform: uppercase;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        transition: background 0.2s; 
        visibility: visible !important; 
        opacity: 1 !important; 
        display: block;
    }
    button.btn-guest:hover { background-color: #555 !important; }
    
    .error { color: #ff6b6b; margin-bottom: 15px; font-size: 14px; }
    
    .login-page h3 { margin-top: 0; margin-bottom: 30px; color: #fff; font-weight: 300; }
    
    .logo-img { max-width: 200px; margin-bottom: 30px; display: block; margin-left: auto; margin-right: auto; }