/* --- Animated Starfield Background --- */
        canvas#starfield {
			margin: -20px;
			width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: fixed;
            background-color:rgba(0,0,0,0.2);
        }
		
        body {
            font-family: 'Inter', sans-serif;
            user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
            background-color: rgba(0,0,0,0.4); /* #1f2937; /* bg-gray-800 - Basis-Hintergrundfarbe */
            color: #e5e7eb; /* text-gray-200 */
            overflow-x: hidden; /* Verhindert horizontales Scrollen */
            min-height: 100vh; /* Stellt sicher, dass der Body mindestens die Höhe des Viewports hat */

            
            /* Wichtig: Ursprüngliche Hintergrundfarbe bleibt unter den Sternen */
            background-attachment: fixed; /* Optional: Hält den Hintergrund beim Scrollen fixiert */
        }

        /* General Button Styling */
        button {
            transition: all 150ms ease-in-out;
            border-radius: 0.375rem; /* rounded-md */
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            border: 1px solid transparent; /* Default border */
        }
        button:hover:not(:disabled) {
            filter: brightness(1.1);
            transform: translateY(-1px); /* Leichtes Anheben */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Größerer Schatten */
        }
        button:active:not(:disabled) {
            transform: scale(0.97) translateY(0px); /* Reset Anheben beim Klick */
            filter: brightness(0.95);
        }
        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: translateY(0); /* Kein Anheben für disabled */
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Normaler Schatten */
        }
        /* Hervorhebung für kaufbare Buttons */
        button.affordable-highlight {
            border-color: #4ade80; /* green-400 */
            box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
        }
        button.affordable-highlight:hover:not(:disabled) {
            box-shadow: 0 0 12px rgba(74, 222, 128, 0.8), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }

        /* --- Header Layout --- */
        .game-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background-color: rgba(0, 0, 0, 0.2); /* Leicht transparent, um Sterne durchscheinen zu lassen */ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 0.75rem; margin-bottom: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .header-left { display: flex; align-items: center; gap: 0.75rem; }
        .header-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #818cf8; margin: 0; }
        .header-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; flex-grow: 1; margin: 0.5rem 0; padding: 0 1rem; text-align: center; }
        @media (min-width: 768px) { .header-resources { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; } }
        .header-resources > div { padding: 0.25rem; background-color: rgba(0,0,0,0.2); /* Leicht transparent */ border-radius: 0.375rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 80px; box-shadow: 0 4px 6px -1px rgba(74, 122, 128, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .header-resources p:first-child { font-size: 0.75rem; color: #d1d5db; margin-bottom: 0.1rem; }
        .header-resources .resource-amount-display { font-size: 1rem; font-weight: 700; line-height: 1.1; margin-top: 0; margin-bottom: 0;}
        .capacity-display { font-size: 0.65rem; color: #9ca3af; line-height: 1; margin-top: 0; margin-bottom: 0.2rem;}
        .resource-progress-bar-container { margin-top: auto; margin-bottom: 0.1rem; background-color: rgba(75, 85, 99, 0.7); /* Leicht transparent */ border-radius: 0.25rem; overflow: hidden; height: 0.375rem; }
        .header-resources .rate-display { font-size: 0.75rem; color: #9ca3af; margin-top: 0.1rem; }
        .header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
        #notification-button.active { color: #f87171; animation: ringBell 1.5s ease-in-out infinite; }
        @keyframes ringBell { 0%, 100% { transform: rotate(0); } 10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); } 20%, 40%, 60%, 80% { transform: rotate(10deg); } }

        /* Resource Progress Bar */
        .resource-progress-bar { height: 100%; transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; }
        .resource-progress-bar-dust { background-color: #f59e0b; }
        .resource-progress-bar-energy { background-color: #22d3ee; }
        .resource-progress-bar-energy.low { background-color: #ef4444; }
        .resource-progress-bar-metal { background-color: #94a3b8; }
        .resource-progress-bar-population { background-color: #4ade80; }
        .resource-progress-bar.warning { background-color: #f97316; }

        /* Burger Menu */
        #burger-button { z-index: 60; background-color: rgba(75, 85, 99, 0.2); color: white; padding: 0.5rem; border-radius: 0.375rem; border: none; flex-shrink: 0; }
        #burger-menu-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.25); z-index: 55; opacity: 0; transition: opacity 300ms ease-in-out; pointer-events: none; }
        #burger-menu-overlay.active { opacity: 0.75; pointer-events: auto; }
        #burger-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; max-width: 80%; background-color: rgba(55, 65, 81, 0.25); /* Leicht transparent */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 1.5rem; box-shadow: 0 0 15px rgba(0,0,0,0.3); transform: translateX(-100%); transition: transform 300ms ease-in-out; z-index: 60; overflow-y: auto; }
        #burger-menu.active { transform: translateX(0); }
        .menu-item { display: block; width: 100%; text-align: left; padding: 0.75rem 1rem; margin-bottom: 0.5rem; background-color: rgba(55, 65, 81, 0.35); /*#4b5563;*/ color: #d1d5db; border: none; }
        .menu-item.active { background-color: #4f46e5; color: white; font-weight: 600; }

        /* Tab Content */
        .tab-content { display: none; animation: fadeInContent 0.5s ease-out forwards; }
        .tab-content.active { display: block; }
        @keyframes fadeInContent { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* --- Anpassung Hauptcontainer --- */
        .main-content-container {
             background-color: rgba(0, 0, 0, 0.15); /* bg-gray-800 mit Transparenz */
             backdrop-filter: blur(4px); /* Weichzeichner-Effekt */
             -webkit-backdrop-filter: blur(4px);
             padding: 1.5rem; /* p-6 */
             border-radius: 0.75rem; /* rounded-xl */
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-2xl */
             width: 100%;
             max-width: 48rem; /* max-w-3xl */
             text-align: center;
             margin-top: 1rem; /* Etwas Abstand zum Header */
         }
         @media (min-width: 768px) { /* md */
             .main-content-container {
                 padding: 2rem; /* md:p-8 */
             }
         }

        /* Toasts */
        #toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
        .toast { padding: 0.75rem 1.25rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(74, 122, 128, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		color: white; font-size: 0.875rem; max-width: 320px; opacity: 0; animation: toastEnter 0.5s ease-out forwards; position: relative; background-color: rgba(31, 41, 55, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
        .toast.toast-info { border-left: 4px solid #0e7490; } .toast.toast-threat { border-left: 4px solid #b91c1c; } .toast.toast-success { border-left: 4px solid #15803d; } .toast.toast-warning { border-left: 4px solid #b45309; }
        @keyframes toastEnter { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
        @keyframes toastExit { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
        .toast.exiting { animation: toastExit 0.5s ease-in forwards; }
        .toast-close-button { position: absolute; top: 0.25rem; right: 0.5rem; background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; box-shadow: none; }
        .toast-close-button:hover { color: red; }

        /* Animations & General Styles */
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .pulse-once { animation: pulse 0.3s ease-in-out; }
        .resource-value { transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; } .resource-value.updated { color: #6ee7b7; transform: scale(1.05); }
        @keyframes flash-bg { 0% { background-color: inherit; } 50% { background-color: rgba(255, 255, 255, 0.2); } 100% { background-color: inherit; } } .flash-upgrade { animation: flash-bg 0.4s ease-out; }
        .num { font-weight: bold; }
        .upgrade-card, .research-card, .trade-card, .shipyard-card { background-color: rgba(55, 65, 81, 0.08); /* Leicht transparent */ padding: 0.75rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 0.5rem; }
        @media (min-width: 640px) { .upgrade-card, .research-card, .trade-card, .shipyard-card { flex-direction: row; align-items: center; } .upgrade-card > div:first-child, .research-card > div:first-child, .trade-card > div:first-child, .shipyard-card > div:first-child { flex-grow: 1; } .upgrade-card > button, .research-card > button, .trade-card > button, .shipyard-card > button { width: auto; margin-top: 0; } }

        /* Progress Bars (Inner) */
        .progress-bar-container { background-color: rgba(75, 85, 99, 0.7); /* Leicht transparent */ border-radius: 0.375rem; overflow: hidden; height: 1.25rem; margin-top: 0.25rem; margin-bottom: 0.5rem;}
        .progress-bar { height: 100%; transition: width 0.4s ease-in-out; text-align: center; color: rgba(255, 255, 255, 0.9); font-size: 0.75rem; line-height: 1.25rem; font-weight: 500; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); }
        .progress-bar-threat { background-color: #ef4444; } .progress-bar-prestige { background-color: #f59e0b; } .progress-bar-population { background-color: #16a34a; } .progress-bar-fields { background-color: #ca8a04; }

        /* Modals */
        .modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; transition: opacity 300ms ease-in-out; pointer-events: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-content { background-color: rgba(31, 41, 55, 0.95); /* Leicht transparent */ padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; transform: scale(0.95); transition: transform 300ms ease-in-out; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
        .modal-overlay.active .modal-content { transform: scale(1); }
        #admin-password-input { background-color: #374151; color: #e5e7eb; border: 1px solid #4b5563; border-radius: 0.375rem; padding: 0.5rem 0.75rem; width: 100%; }
        #changelog-modal-content .changelog { margin-top: 0; padding-top: 0; border-top: none; font-size: 0.875rem; }
        #changelog-modal-content .changelog h5 { display: none; } #changelog-modal-content .changelog ul { padding-left: 1rem; }

        /* Footer */
        .game-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #4b5563; text-align: center; font-size: 0.875rem; color: #9ca3af; }
        .game-footer a { color: #a5b4fc; text-decoration: underline; transition: color 150ms ease-in-out; }
        .game-footer a:hover { color: #c7d2fe; }

        /* Planet Graphics */
        .planet-graphic { width: 150px; height: 150px; border-radius: 50%; margin: 1rem auto; background-color: rgba(0, 0, 0, 0.3); /* Leicht transparent */ display: flex; align-items: center; justify-content: center; font-size: 3rem; border: 0px solid #6b7280; box-shadow: 0 0 15px rgba(0,0,0,0.3); }
        .planet-graphic.moon {
			/*background: linear-gradient(145deg, #e0e0e0, #a0a0a0); */
			background-image: url(../img/mond.webp);
			border-color: rgba(0,0,0,0.3); color: #4b5563; }
        .planet-graphic.mars {
			/*background: linear-gradient(145deg, #e89a76, #c75e3a); */
			background-image: url(../img/mars.webp);
			border-color: rgba(0,0,0,0.3); color: #fef3c7; }
        .planet-graphic.venus {
			/*background: linear-gradient(145deg, #fef3c7, #fde68a); */
			background-image: url(../img/venus.webp);
			border-color: rgba(0,0,0,0.3); color: #78350f; }
        .planet-graphic.jupiter {
			/*background: linear-gradient(145deg, #f3d9b1, #d5a770); */
			background-image: url(../img/jupiter.webp);
			border-color: rgba(0,0,0,0.3); color: #4b5563; }

        /* Shake Animation */
        @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); } }
        .shake { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }

         /* Spezielle Styles für Elemente innerhalb des Hauptcontainers */
        .stats-tab-content, .prestige-tab-content, .leaderboard-tab-content {
             background-color: rgba(55, 65, 81, 0.08); /* bg-gray-800 mit Transparenz */
             padding: 1rem;
             border-radius: 0.5rem; /* rounded-lg */
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
         }

		/* --- Click Particles --- */
        .particle {
            position: absolute;
            width: 6px; /* Etwas größer */
            height: 6px;
            background-color: #fde047; /* Gelb/Gold-Farbe */
            border-radius: 50%;
            pointer-events: none;
            z-index: 100;
            opacity: 1;
            /* Use custom properties set by JS for destination */
            animation: particle-fade-out 0.7s ease-out forwards;
        }
        @keyframes particle-fade-out {
            to {
                transform: translate(var(--translateX, 0), var(--translateY, -50px)) scale(0.3); /* Ziel und Verkleinerung */
                opacity: 0;
            }
        }

        

    /* SCROLLBARS Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #447 #271B36;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: #271B36;
}

*::-webkit-scrollbar-thumb {
  background-color: #271B36;
  border-radius: 10px;
  border: 2px solid #447;
}