#game-container {
            position: relative;
            width: 400px; /* Fixed width as requested */
            height: 400px; /* Fixed height as requested */
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            background-color: #202124;
        }
        canvas {
            display: block;
            background-color: #202124; /* Default dark background for game */
            width: 100%;
            height: 100%;
            transition: background-color 1s ease-in-out; /* Smooth transition for day/night */
            /* Ensure pixel art stays sharp when scaled */
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            }

        

        /* UI Elements Styling */
        .ui-panel {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.85);
            border-radius: 8px; /* Slightly smaller border radius */
            padding: 15px; /* Reduced padding */
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7); /* Slightly smaller shadow */
            color: #eee;
            z-index: 20;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0; /* Hidden by default for animation */
            transform: scale(0.8); /* Start smaller */
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
            pointer-events: none; /* Allow clicks to pass through when hidden */
        }
        .ui-panel.active {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto; /* Enable clicks when active */
        }

        #start-screen {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 1.5em; /* Reduced font size */
        }
        #start-screen h1 {
            font-size: 2em; /* Reduced font size */
            margin-bottom: 10px; /* Reduced margin */
            color: #4CAF50;
            text-shadow: 0 0 8px rgba(76, 175, 80, 0.5); /* Reduced shadow */
            animation: fadeInScale 0.8s ease-out forwards;
        }
        #start-screen p {
            font-size: 0.7em; /* Reduced font size */
            color: #bbb;
            margin-top: 0;
            margin-bottom: 20px; /* Reduced margin */
            animation: fadeIn 1s ease-out forwards 0.2s;
            opacity: 0;
        }
        #loading-message {
            font-size: 0.9em; /* Reduced font size */
            color: #888;
            margin-top: 8px; /* Reduced margin */
            opacity: 0;
            animation: fadeIn 0.5s forwards;
        }


        #game-over-screen {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 1.8em; /* Reduced font size */
        }
        #game-over-screen h2 {
            font-size: 1.5em; /* Reduced font size */
            margin-bottom: 8px; /* Reduced margin */
            color: #FF6347;
            animation: fadeInScale 0.8s ease-out forwards;
        }
        #final-score, #final-stats {
            font-size: 0.9em; /* Reduced font size */
            margin-top: 8px; /* Reduced margin */
            color: #ddd;
            animation: fadeIn 1s ease-out forwards 0.3s;
            opacity: 0;
        }
        #final-stats p {
            margin: 4px 0; /* Reduced margin */
        }

        .action-button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px; /* Reduced padding */
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 1em; /* Reduced font size */
            margin-top: 15px; /* Reduced margin */
            cursor: pointer;
            border-radius: 6px; /* Slightly smaller border radius */
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease; /* Added filter transition */
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); /* Reduced shadow */
            font-weight: bold;
            animation: fadeInScale 0.8s ease-out forwards 0.4s;
            opacity: 0;
        }
        .action-button:hover {
            background-color: #45a049;
            transform: translateY(-2px) scale(1.03); /* Adjusted scale on hover */
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5); /* Adjusted shadow */
            filter: brightness(1.2); /* Advanced hover effect */
        }
        .action-button:active {
            transform: translateY(1px);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); /* Adjusted shadow */
            filter: brightness(0.9); /* Darken on active */
        }

        #score-display {
            position: absolute;
            top: 8px; /* Reduced top position */
            right: 15px; /* Reduced right position */
            font-size: 1.2em; /* Reduced font size */
            font-weight: bold;
            color: #ccc;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 4px 12px; /* Reduced padding */
            border-radius: 4px; /* Reduced border radius */
            min-width: 100px; /* Adjusted min-width */
            text-align: right;
            opacity: 0;
            transition: opacity 0.3s ease-out;
        }
        #score-display.active {
            opacity: 1;
        }

        #stats-dashboard {
            position: absolute;
            top: 8px; /* Reduced top position */
            left: 15px; /* Reduced left position */
            background-color: rgba(0, 0, 0, 0.6);
            padding: 8px 12px; /* Reduced padding */
            border-radius: 6px; /* Reduced border radius */
            color: #eee;
            font-size: 0.8em; /* Reduced font size */
            text-align: left;
            z-index: 10;
            opacity: 0;
            transform: translateX(-15px); /* Adjusted transform */
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        }
        #stats-dashboard.active {
            opacity: 1;
            transform: translateX(0);
        }
        #stats-dashboard p {
            margin: 2px 0; /* Reduced margin */
        }

        /* In-game feedback messages */
        .feedback-message {
            position: absolute;
            color: #fff;
            font-size: 1em; /* Reduced font size */
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Reduced shadow */
            pointer-events: none;
            animation: fadeOutUp 1.5s forwards;
            white-space: nowrap;
        }

        /* Screen shake effect */
        .shake {
            animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            perspective: 1000px;
        }

        /* Keyframe Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeInScale {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes fadeOutUp {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-50px); }
        }

        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            #game-container {
                width: 100%;
                height: 50vw;
                max-height: 400px;
            }
            #start-screen {
                font-size: 1em; /* Further reduced for mobile */
            }
            #start-screen h1 {
                font-size: 1.8em;
            }
            #start-screen p {
                font-size: 0.6em;
            }
            #game-over-screen {
                font-size: 1.2em;
            }
            .action-button {
                padding: 8px 15px;
                font-size: 0.9em;
            }
            #score-display {
                font-size: 1em;
                top: 5px;
                right: 10px;
                padding: 2px 8px;
            }
            #stats-dashboard {
                font-size: 0.65em;
                top: 5px;
                left: 10px;
                padding: 4px 8px;
            }
            .feedback-message {
                font-size: 0.8em;
            }
        }