:root {
            /* Default fallback colors - will be overridden by GAME_CONFIG */
            --index-body-gradient-start: #87CEEB;
            --index-body-gradient-end: #6A5ACD;
            --index-panel-bg-color: rgba(255, 255, 255, 0.2);
            --index-panel-shadow-color: rgba(0, 0, 0, 0.3);
            --index-level-node-gradient-start: #FFD700;
            --index-level-node-gradient-end: #FFA500;
            --index-level-node-border-color: #FFECB3;
            --index-level-node-locked-gradient-start: #B0BEC5;
            --index-level-node-locked-gradient-end: #78909C;
            --index-level-node-locked-border-color: #CFD8DC;
            --index-level-node-overlay-color: rgba(0, 0, 0, 0.3);
            --index-complete-screen-bg-color: rgba(0, 0, 0, 0.85);
            --index-complete-screen-title-color: #FFD700;
            --index-complete-screen-text-color: #ffffff;
            --index-complete-button-next-bg: #4CAF50;
            --index-complete-button-next-hover: #45a049;
            --index-complete-button-home-bg: #007bff;
            --index-complete-button-home-hover: #0056b3;
            --index-bg-animal-opacity: 0.1;

            /* Loading Screen Specific CSS Variables */
            --loading-bg-color: #1a1a2e; /* Dark blue/purple */
            --loading-text-color: #e0e0e0;
            --loading-bar-bg: #333;
            --loading-bar-fill: #00bcd4; /* Cyan */
            --loading-bar-border: #0097a7;
        }

        /* Loading Screen Styles */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--loading-bg-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Ensure it's on top */
            color: var(--loading-text-color);
            font-family: 'Open Sans', sans-serif;
            transition: opacity 0.5s ease-out; /* Smooth fade out */
        }

        #loading-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

        #loading-text {
            font-family: 'Luckiest Guy', cursive;
            font-size: 2.5em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .progress-container {
            width: 80%;
            max-width: 500px;
            background-color: var(--loading-bar-bg);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            border: 2px solid var(--loading-bar-border);
        }

        .progress-bar {
            height: 30px;
            width: 0%;
            background-color: var(--loading-bar-fill);
            border-radius: 10px;
            text-align: center;
            line-height: 30px;
            color: white;
            font-weight: bold;
            transition: width 0.3s ease-in-out;
            font-size: 1.1em;
        }

        /* General Styles & Background */
        body {
            margin: 0;
            font-family: 'Open Sans', sans-serif;
            overflow: hidden;
            background: linear-gradient(to bottom right, var(--index-body-gradient-start), var(--index-body-gradient-end)); /* Dynamic gradient */
            display: flex;
            flex-direction: column; /* Changed to column to stack title and container */
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            position: relative;
            color: var(--index-complete-screen-text-color); /* Dynamic default text color */
        }

        /* Game Title Styling */
        #game-title {
            font-family: 'Luckiest Guy', cursive;
            font-size: 4em;
            color: var(--index-complete-screen-title-color); /* Dynamic title color */
            text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
            margin-bottom: 30px; /* Space below title */
            z-index: 2; /* Ensure it's above background elements */
            text-align: center;
        }

        /* Animated Background Elements Container */
        .background-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }
        /* Individual background animal elements */
        .bg-element {
            position: absolute;
            border-radius: 50%; /* Ensure circular shape for animal heads */
            object-fit: cover; /* Cover the area */
            opacity: var(--index-bg-animal-opacity); /* Dynamic opacity */
            /* Animation handled by JavaScript now */
        }

        /* Level Selection Container */
        .level-selection-container {
            padding: 20px;
            background-color: var(--index-panel-bg-color); /* Dynamic panel background */
            border-radius: 20px;
            box-shadow: 0 8px 30px var(--index-panel-shadow-color); /* Dynamic panel shadow */
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 20px;
        }

        /* Level Node Styling */
        .level-node {
            width: 120px;
            height: 120px;
            background-color: var(--index-level-node-gradient-start); /* Fallback */
            background-image: linear-gradient(var(--index-level-node-overlay-color), var(--index-level-node-overlay-color)), /* Black overlay */
                                 linear-gradient(to right, var(--index-level-node-gradient-start), var(--index-level-node-gradient-end)); /* Dynamic gradient */
            background-size: cover; /* Ensure image covers */
            background-position: center; /* Center image */
            background-blend-mode: overlay; /* Blend overlay with image */
            border-radius: 50%;
            display: flex;
            flex-direction: column; /* Stack level number and name */
            justify-content: center;
            align-items: center;
            cursor: pointer;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            border: 4px solid var(--index-level-node-border-color); /* Dynamic border */
            transition: transform 0.2s ease-out, background 0.3s ease-out, box-shadow 0.2s ease-out;
            margin: auto;
            text-align: center; /* Center text within the node */
        }

        .level-node:hover:not(.locked) {
            transform: scale(1.08);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        /* Locked Level Node */
        .level-node.locked {
            background-image: linear-gradient(var(--index-level-node-overlay-color), var(--index-level-node-overlay-color)), /* Black overlay */
                                 linear-gradient(to right, var(--index-level-node-locked-gradient-start), var(--index-level-node-locked-gradient-end)); /* Dynamic greyed out gradient */
            border-color: var(--index-level-node-locked-border-color); /* Dynamic locked border */
            cursor: not-allowed;
            filter: grayscale(80%);
            opacity: 0.8;
        }

        .level-node h2 {
            font-family: 'Luckiest Guy', cursive;
            color: #fff;
            margin: 0;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
            z-index: 2;
        }

        .level-node .level-name { /* New style for level name */
            font-family: 'Open Sans', sans-serif;
            font-size: 0.7em;
            color: rgba(255, 255, 255, 0.9);
            margin-top: 5px;
            z-index: 2;
            line-height: 1.2; /* Adjust line height for better fit */
        }

        .level-node.locked h2,
        .level-node.locked .level-name { /* Hide level name when locked */
            visibility: hidden;
        }

        /* Lock Icon */
        .lock-icon {
            position: absolute;
            font-size: 4em;
            color: rgba(0, 0, 0, 0.4);
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
            pointer-events: none;
            z-index: 1;
            display: none;
        }
        .level-node.locked .lock-icon {
            display: block;
        }

        /* Level Complete Screen Styling */
        #level-complete-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--index-complete-screen-bg-color); /* Dynamic background */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none;
            color: var(--index-complete-screen-text-color); /* Dynamic text color */
            text-align: center;
            backdrop-filter: blur(5px);
        }

        #level-complete-screen h2 {
            font-family: 'Luckiest Guy', cursive;
            font-size: 3.5em;
            color: var(--index-complete-screen-title-color); /* Dynamic title color */
            text-shadow: 3px 3px 6px rgba(0,0,0,0.6);
            margin-bottom: 20px;
        }

        #level-complete-screen p {
            font-size: 1.5em;
            margin-bottom: 30px;
        }

        .complete-button {
            padding: 15px 30px;
            margin: 10px;
            border: none;
            border-radius: 10px;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            color: var(--index-complete-screen-text-color); /* Dynamic button text color */
        }

        .complete-button.next-level {
            background-color: var(--index-complete-button-next-bg); /* Dynamic button background */
        }
        .complete-button.next-level:hover {
            background-color: var(--index-complete-button-next-hover); /* Dynamic hover background */
            transform: translateY(-2px);
        }

        .complete-button.home {
            background-color: var(--index-complete-button-home-bg); /* Dynamic button background */
        }
        .complete-button.home:hover {
            background-color: var(--index-complete-button-home-hover); /* Dynamic hover background */
            transform: translateY(-2px);
        }