:root {
            --font-display: 'Luckiest Guy', cursive;
            --font-body: 'Nunito', sans-serif;
            
            --color-sky-top: #87CEEB;
            --color-sky-bottom: #B1E2F7;
            --color-grass: #68B83D;
            --color-grass-dark: #5A9E34;

            --color-frame-primary: #85593A; /* Woody brown */
            --color-frame-secondary: #5C3D28; /* Darker woody brown for border */
            --color-frame-content: #E7D7B7; /* Light parchment/wood grain for content background */
            --color-header-bg: #F7B500; /* Vibrant Yellow/Orange */
            --color-header-text: #FFFFFF;

            --color-button-primary: #55C33C; /* Bright Green */
            --color-button-primary-hover: #65d34c;
            --color-button-shadow: #3B872A;
            --color-button-text: #FFFFFF;

            --color-text-primary: #4F3422; /* Dark Brown */
            --color-text-secondary: #74543D;
            --color-accent: #3b87f6; /* A blue for links or highlights if needed */

            --color-success: #28a745;
            --color-error: #ef4444;
            --color-warning: #facc15;
        }

        html, body {
            height: 100%;
            overflow-x: hidden; 
        }
        body {
            position: relative;
            display: flex;
            flex-direction: column;
            color: var(--color-text-primary);
            font-family: var(--font-body);
            background: linear-gradient(to bottom, var(--color-sky-top) 0%, var(--color-sky-bottom) 100%);
        }
        main {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        header, footer {
            background-color: rgba(0,0,0,0.1);
            flex-shrink: 0;
            z-index: 1;
        }
        h1, h2, h3 {
            font-family: var(--font-display);
            letter-spacing: 1px;
            text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
        }
        
        @keyframes wave {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        body::before, body::after {
            content: '';
            position: fixed;
            left: 0;
            bottom: 0;
            width: 200vw;
            height: 150px;
            background-repeat: repeat-x;
            z-index: 0;
            animation: wave 20s linear infinite;
        }
        body::before {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 150' preserveAspectRatio='none'%3e%3cpath d='M0,80 C150,130 350,30 500,80 S850,130 1000,80 V150 H0 Z' fill='%235A9E34'/%3e%3c/svg%3e");
            background-size: 50% 150px;
            animation-duration: 25s;
            bottom: -5px;
        }
        body::after {
             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 150' preserveAspectRatio='none'%3e%3cpath d='M0,100 C200,50 350,120 500,100 S800,50 1000,100 V150 H0 Z' fill='%2368B83D'/%3e%3c/svg%3e");
             background-size: 50% 150px;
             animation-duration: 18s;
        }

        .mfp-bg {
            background: rgba(13, 17, 23, 0.7);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .mfp-zoom-in .mfp-content {
            opacity: 0;
            transform: scale(0.9);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .mfp-zoom-in.mfp-ready .mfp-content {
            opacity: 1;
            transform: scale(1);
        }
        .mfp-zoom-in.mfp-removing .mfp-content {
            opacity: 0;
            transform: scale(0.9);
        }
        #modal-container {
            background: var(--color-frame-primary);
            border: 6px solid var(--color-frame-secondary);
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0,0,0,0.2);
            padding: 0;
            overflow: visible;
            transition: opacity 0.3s ease-in-out, max-width 0.3s ease;
        }
        #modal-container.is-hiding {
            opacity: 0;
        }
        .modal-header {
            background-color: var(--color-header-bg);
            color: var(--color-header-text);
            font-family: var(--font-display);
            font-size: 1.5rem;
            text-align: center;
            padding: 0.75rem 1.5rem;
            border-radius: 12px 12px 0 0;
            border: 4px solid var(--color-frame-secondary);
            text-shadow: 2px 2px 0px rgba(0,0,0,0.15);
            margin: -6px -6px 0 -6px;
        }
        .modal-content-area {
            background-color: var(--color-frame-content);
            padding: 1.5rem;
            margin: 1rem;
            border-radius: 10px;
            border: 2px solid var(--color-frame-secondary);
        }
        
        @keyframes pulse-glow {
            0%, 100% { transform: scale(1); box-shadow: 0 5px 25px rgba(59, 135, 42, 0.4); }
            50% { transform: scale(1.05); box-shadow: 0 8px 35px rgba(59, 135, 42, 0.6); }
        }
        #hero-cta-btn {
             animation: pulse-glow 2.5s infinite ease-in-out;
             font-family: var(--font-display);
             background-color: var(--color-button-primary);
             color: var(--color-button-text);
             border-radius: 9999px;
             padding: 1rem 2.5rem;
             font-size: 1.5rem;
             border: 2px solid rgba(255,255,255,0.5);
             border-bottom: 6px solid var(--color-button-shadow);
             transition: all 0.1s ease-in-out;
             text-shadow: 2px 2px 0px rgba(0,0,0,0.15);
        }
        #hero-cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 25px rgba(59, 135, 42, 0.5);
        }
        #hero-cta-btn:active {
            transform: translateY(2px);
            border-bottom-width: 2px;
            box-shadow: 0 2px 15px rgba(59, 135, 42, 0.5);
        }
        .game-button {
             font-family: var(--font-display);
             background-color: var(--color-button-primary);
             color: var(--color-button-text);
             border-radius: 12px;
             padding: 0.75rem 1rem;
             border: 2px solid rgba(255,255,255,0.3);
             border-bottom: 5px solid var(--color-button-shadow);
             transition: all 0.1s ease-in-out;
             text-shadow: 2px 2px 0px rgba(0,0,0,0.15);
        }
        .game-button:not(:disabled):hover {
            transform: translateY(-2px);
            background-color: var(--color-button-primary-hover);
        }
        .game-button:not(:disabled):active {
            transform: translateY(1px);
            border-bottom-width: 2px;
        }
        .game-button:disabled {
            filter: grayscale(60%);
            opacity: 0.7;
            cursor: not-allowed;
        }
        .game-input {
            background: #fff;
            border: 3px solid var(--color-frame-secondary);
            border-radius: 10px;
            padding: 0.75rem 1rem;
            color: var(--color-text-primary);
            font-weight: 700;
            transition: all 0.2s ease-in-out;
        }
        .game-input:focus {
            box-shadow: 0 0 0 4px var(--color-header-bg);
            outline: none;
        }
        .resource-card {
            background-color: #fdfae5;
            border: 4px solid var(--color-frame-secondary);
            border-radius: 12px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 0 0 var(--color-frame-secondary);
        }
        .resource-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 0 0 var(--color-frame-secondary);
            border-color: var(--color-header-bg);
        }
        .resource-card.selected {
             border-color: var(--color-button-primary);
             transform: translateY(-4px);
             box-shadow: 0 8px 0 0 var(--color-button-shadow);
        }
        #generation-progress-bar-container {
            width: 100%;
            background-color: var(--color-frame-content);
            border-radius: 9999px;
            height: 1rem;
            border: 3px solid var(--color-frame-secondary);
            overflow: hidden;
            padding: 2px;
        }
        #generation-progress-bar {
            width: 0%;
            height: 100%;
            background-color: var(--color-button-primary);
            border-radius: 9999px;
            transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        #countdown-timer.urgent {
            color: var(--color-error);
            animation: pulse-urgent 1s infinite;
        }
        @keyframes pulse-urgent {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }