/* Base Styling: Deep Navy/Black */
        body {
            background-color: #0B172A; 
            font-family: 'Inter', sans-serif;
            color: #F8FAFC; 
        }

        /* 3D Grid Pattern for Background */
        .metropolis-grid {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), 
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 30px 30px;
        }

        /* Translucent Glass Effect (Central Container) */
        .glass-effect {
            background-color: rgba(23, 37, 84, 0.5); 
            backdrop-filter: blur(8px);
            border: 1:px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Gold Glow for CTA */
        .gold-glow {
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.8), inset 0 0 5px rgba(251, 191, 36, 0.4);
        }
        
        /* REFINED Logout Button Style (VERSION 6: Minimal Icon-Only & Inline Fix) */
        .logout-icon-btn {
            /* Base: Only the icon is visible, discrete. Use flex to keep icon and text aligned. */
            @apply p-2 rounded-full text-cyan-400 bg-transparent transition duration-300 ease-in-out flex items-center justify-center space-x-2;
            border: 2px solid transparent; /* Used for hover effect */
        }
        
        .logout-icon-btn:hover {
            /* Hover: Transition to Red Circle/Danger */
            @apply bg-red-600 text-white border-red-500;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.7); 
            transform: scale(1.1); /* Slight zoom for visibility */
        }
        
        /* Desktop Specific Styles */
        @media (min-width: 768px) {
             .logout-icon-btn span {
                 display: none; /* Hide text on desktop */
             }
             .logout-icon-btn {
                 margin-left: 1.5rem; /* Space it out from other links */
                 padding: 8px; /* Square padding for round icon */
             }
        }
        
        /* Mobile Specific Styles (Overrides to make it a clear button) */
        @media (max-width: 767px) {
             .logout-icon-btn {
                 /* Mobile style is a clear full-width button/banner */
                 @apply w-full py-3 px-5 rounded-lg border border-red-500/50 bg-red-900/40;
                 box-shadow: none; 
                 transform: none; /* No scaling on mobile menu */
                 margin-left: 0;
             }
             .logout-icon-btn span {
                 display: inline; /* Ensure text is visible on mobile */
                 font-weight: 700;
                 letter-spacing: 0.1em;
             }
             .mobile-logout-wrapper {
                 /* This ensures the mobile button uses the full width below the links */
                 display: block;
                 width: 100%;
                 margin-top: 0.75rem; /* mt-3 */
             }
        }
        
        /* Z-INDEX FIX: Ensure close icon is always on top */
        .header-z-fix {
            position: relative; /* For z-index to work correctly */
            z-index: 60; /* Higher than the menu and all other content */
        }
        .menu-btn-z-fix {
            z-index: 70; /* Highest z-index for the button */
        }
        
        /* Mobile Menu Positioning */
        #mobile-menu {
            z-index: 55; /* Should be between header and button */
        }

        /* Player Button/Tile Styling (Unchanged) */
        .player-tile {
            flex-grow: 1;
            padding: 8px 6px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 700;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tile-joined {
            background-color: #06B6D4; /* Cyan Filled */
            color: #0B172A;
            box-shadow: 0 0 5px rgba(6, 182, 212, 0.5);
            cursor: default;
        }
        .tile-join-here {
            background-color: #475569; /* Gray/Slate for clickable action */
            color: #F8FAFC;
            cursor: pointer;
        }
        .tile-join-here:hover {
            background-color: #334155;
        }

        /* Full Match Highlight (Unchanged) */
        .match-full {
            border: 2px solid #EF4444; /* Red Border */
            box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); 
            transform: scale(1.01);
        }

        /* Timer/Code Box Styling (Unchanged) */
        .time-code-box {
            padding: 10px 0;
            background: rgba(0, 0, 0, 0.3); 
            border-radius: 4px;
        }

        /* Filter Select Styling (Unchanged) */
        .terminal-select {
            background-color: #1E293B; 
            border: 1px solid #06B6D4; 
            color: #F8FAFC;
            padding: 8px 12px;
            appearance: none; 
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10%2012l-6-6h12l-6%206z%22%20fill%3D%2394A3B8%22%2F%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 0.6em;
            cursor: pointer;
        }