/* ==========================================
   G.A.I.A. SIM - V4.0 Stylesheet
   ========================================== */

/* --- Grundlegendes & Farbschema --- */
:root {
    --bg-color: #1a1a1a;
    --panel-bg: #2a2a2a;
    --border-color: #444;
    --accent-color: #39ff14; /* Limetten-Grün (Neon) */
    --text-color: #e0e0e0;
    --text-muted: #9e9e9e;
    --error-color: #ff5252;
    --success-color: var(--accent-color);
    --font-primary: 'Orbitron', sans-serif; /* Sci-Fi Schrift */
    --font-secondary: 'Roboto', sans-serif; /* Lesbare Schrift */
}

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-secondary);
    line-height: 1.6;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column; /* Header, Status, Main */
    min-height: 100vh; /* Mindestens volle Höhe */
}

h1, h2, h3, h4 {
    font-family: var(--font-primary);
    color: var(--text-color);
    margin-top: 0; /* Standard-Margin oben entfernen */
    margin-bottom: 0.5em; /* Einheitlicher unterer Margin */
    text-transform: uppercase;
}

p {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-top: 0;
    margin-bottom: 1em; /* Standard-Absatzabstand */
}

.accent {
    color: var(--accent-color);
    font-weight: bold;
}

/* --- Haupt-Header & Navigation --- */
.main-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* Header soll nicht schrumpfen */
    position: sticky; /* Sticky Header */
    top: 0;
    z-index: 1000; /* Über Statusleiste */
}

.main-header h1 {
    margin: 0;
    font-size: 1.8em;
    margin-right: auto; /* Schiebt Navi nach rechts */
}

#main-nav {
    display: flex;
    gap: 10px;
}

.nav-button {
    padding: 8px 15px;
    font-family: var(--font-secondary);
    font-size: 0.9em;
    background-color: var(--bg-color);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    display: flex; /* Für Icon + Text */
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.nav-button:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.nav-button.active {
    background-color: var(--accent-color);
    color: var(--bg-color);
    border-color: var(--accent-color);
    font-weight: bold;
}

.nav-button img { /* Platzhalter für Icons in Buttons */
    height: 16px;
    width: 16px;
    opacity: 0.7;
}

.nav-button.active img {
    opacity: 1;
    filter: brightness(0); /* Macht Icon schwarz auf hellem Button */
}

/* --- Statusleiste --- */
#status-display {
    background-color: var(--panel-bg);
    border-bottom: 1px solid var(--border-color); /* Trennlinie nach unten */
    padding: 8px 20px; /* Etwas kompakter */
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px; /* Zeilenabstand / Spaltenabstand */
    justify-content: center; /* Zentriert Items bei Umbruch */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Leichter Schatten nach unten */
    flex-shrink: 0; /* Statusleiste soll nicht schrumpfen */
    position: sticky; /* Bleibt beim Scrollen oben */
    top: 61px; /* Höhe des Headers (anpassen!) */
    z-index: 900; /* Unter Header, über Content */
}

.status-item {
    font-family: var(--font-primary);
    font-size: 0.85em; /* Etwas kleiner */
    white-space: nowrap;
    cursor: help; /* Tooltip-Hinweis */
    display: inline-flex; /* Für Icon + Text */
    align-items: center;
    gap: 4px;
}

.status-item span {
    color: var(--accent-color);
    font-weight: bold;
}

/* Veraltet?: .status-item.message { white-space: normal; width: 100%; text-align: center; margin-top: 5px; cursor: default;} */
/* Veraltet?: .status-item.message span { color: var(--text-color); font-weight: normal; } */

#resource-versorgung[data-negative="true"] {
    color: var(--error-color);
    text-shadow: 0 0 5px var(--error-color);
}

#resource-influence[data-low="true"] {
    color: var(--error-color);
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { text-shadow: 0 0 3px var(--error-color); }
    50% { text-shadow: 0 0 10px var(--error-color); }
    100% { text-shadow: 0 0 3px var(--error-color); }
}


/* --- Spiel-Inhalt & Screen Management --- */
#game-screens {
    flex-grow: 1; /* Nimmt restlichen Platz ein */
    padding: 20px; /* Abstand zum Rand */
    position: relative;
    overflow-y: auto; /* Haupt-Scrollbereich HIER */
}

.game-screen {
    display: none; /* Standardmäßig alle Screens ausblenden */
    animation: screenFadeIn 0.4s ease;
}

.game-screen.active-screen {
    display: block; /* Nur den aktiven Screen anzeigen */
}

@keyframes screenFadeIn {
    from { opacity: 0; /* transform: translateY(10px); */ } /* Leichter Slide optional */
    to { opacity: 1; /* transform: translateY(0); */ }
}

.screen-message-log {
    background-color: rgba(57, 255, 20, 0.05);
    border: 1px dashed var(--accent-color);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 0.9em;
    font-family: var(--font-secondary);
}

/* --- Kolonie Screen: Hauptcontainer & Panels --- */
.main-container { /* Gilt jetzt nur noch innerhalb von #screen-colony */
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 4px;
    width: 48%;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column; /* Wichtig für flex-grow der Container */
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.panel-header h2 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.2em;
}

.panel-header button { /* Kauf-Button */
    padding: 5px 10px; font-size: 0.8em; font-family: var(--font-secondary); cursor: pointer;
    background: var(--panel-bg); color: var(--accent-color); border: 1px solid var(--accent-color);
    border-radius: 3px; transition: all 0.2s ease; white-space: nowrap;
     display: inline-flex; align-items: center; gap: 5px;
}
.panel-header button .cost { font-size: 0.9em; color: var(--text-muted); }
.panel-header button:hover { background: rgba(57, 255, 20, 0.1); box-shadow: 0 0 5px rgba(57, 255, 20, 0.4); }
.panel-header button:disabled { color: var(--text-muted); border-color: var(--border-color); background: #333; cursor: not-allowed; box-shadow: none; }
.panel-header button img { height: 14px; width: 14px; opacity: 0.7;}
.panel-header button:hover img { opacity: 1;}


.panel > p { margin-top: 0; }

.creature-container, .structure-container {
    min-height: 200px;
    padding: 10px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
    flex-grow: 1; /* Nimmt verfügbaren Platz im Panel ein */
    /* KEIN max-height oder overflow-y hier! */
}
.empty-pool-message { /* Nachricht bei leerem Pool */
     text-align: center; color: var(--text-muted); margin-top: 20px;
}

/* --- Kreaturenkarte --- */
.creature-card {
    border: 1px solid var(--border-color); background: linear-gradient(145deg, #333, #222);
    color: var(--text-color); padding: 10px; padding-bottom: 35px; /* Platz für Fähigkeiten */ margin: 8px 5px;
    border-radius: 4px; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4); overflow: hidden; position: relative;
}
.creature-card::before { /* Akzent-Streifen */
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background-color: var(--accent-color); opacity: 0.7; transition: all 0.3s ease;
}
.creature-card:hover { border-color: var(--accent-color); transform: translateY(-3px) scale(1.02); box-shadow: 0 0 15px rgba(57, 255, 20, 0.3); }
.creature-card:hover::before { opacity: 1; }
.creature-card.selected { border-color: var(--accent-color); box-shadow: 0 0 10px var(--accent-color), inset 0 0 10px rgba(57, 255, 20, 0.2); }
.creature-card.selected::before { opacity: 1; box-shadow: 0 0 5px var(--accent-color); }
.creature-card h4 { margin: 0 0 8px 8px; font-size: 1em; font-family: var(--font-primary); color: var(--accent-color); }
.creature-stats-bars { display: flex; flex-direction: column; gap: 3px; padding-left: 8px; }
.stat-bar-container { display: flex; align-items: center; font-size: 0.8em; color: var(--text-muted); }
.stat-label { width: 30px; text-transform: uppercase; }
.stat-bar { height: 8px; background-color: #444; border-radius: 4px; flex-grow: 1; margin: 0 5px; overflow: hidden; }
.stat-bar-fill { height: 100%; background-color: var(--accent-color); border-radius: 4px; width: 0%; transition: width 0.5s ease-out; box-shadow: inset 0 0 3px rgba(0,0,0,0.5); }
.stat-value { min-width: 15px; text-align: right; font-weight: bold; color: var(--text-color); }
.creature-abilities { position: absolute; bottom: 5px; left: 8px; right: 5px; display: flex; flex-wrap: wrap; gap: 4px; font-size: 1.1em; }
.ability-symbol { background-color: rgba(0,0,0,0.5); padding: 1px 4px; border-radius: 3px; cursor: help; transition: all 0.2s ease; }
.ability-symbol:hover { background-color: var(--accent-color); color: var(--bg-color); }


/* --- Strukturen & Slots --- */
.structure { border: 1px solid var(--border-color); background-color: #2f2f2f; padding: 10px; margin-bottom: 15px; border-radius: 4px; }
.structure h3 { margin-top: 0; margin-bottom: 10px; color: var(--text-color); font-size: 1.1em; border-bottom: 1px dashed var(--border-color); padding-bottom: 5px; }
.structure h3 .bonus { font-size: 0.8em; color: var(--text-muted); float: right; font-family: var(--font-secondary); text-transform: none; }
.structure-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: 105px; /* Mindesthöhe für leere Slots */ }
.slot {
    border: 2px dashed var(--border-color); background-color: rgba(0,0,0,0.3);
    min-width: 150px; flex-basis: 150px; /* Feste Basisbreite für Umbruch */ flex-grow: 1; /* Wachsen, um Platz zu füllen */
    min-height: 105px; display: flex; justify-content: center; align-items: center;
    color: var(--text-muted); border-radius: 4px; padding: 0; /* Kein Padding, wenn Karte drin ist */
    transition: all 0.3s ease; position: relative; cursor: default;
}
.slot.empty { /* Styling für explizit leere Slots */
    cursor: pointer;
    padding: 5px; /* Padding nur, wenn leer */
}
.slot.empty:hover { border-color: var(--accent-color); background-color: rgba(57, 255, 20, 0.05); }
.slot.empty.can-assign::after { /* Hinweis nur, wenn leer UND auswählbar */
    content: '+ Zuweisen +'; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
    background: var(--accent-color); color: var(--bg-color); padding: 2px 5px; font-size: 0.7em;
    border-radius: 3px; white-space: nowrap; font-family: var(--font-secondary); z-index: 10;
}
.slot .creature-card { /* Karte im Slot */
    margin: 0; width: 100%; height: 100%; box-shadow: none; cursor: pointer; border: none; background: none;
}
.slot .creature-card:hover { transform: none; box-shadow: none; } /* Kein Hover-Effekt im Slot */


/* --- Hauptbutton --- */
#next-turn-button {
    display: block; margin: 20px auto; /* Weniger Margin, da Teil des Screens */ padding: 12px 25px;
    font-size: 1.2em; font-family: var(--font-primary); cursor: pointer;
    background: linear-gradient(145deg, var(--accent-color), #2aaa0f); color: var(--bg-color);
    border: none; border-radius: 4px; transition: all 0.3s ease; text-transform: uppercase;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
}
#next-turn-button:hover { background: linear-gradient(145deg, #4aff2a, var(--accent-color)); box-shadow: 0 0 15px rgba(57, 255, 20, 0.7); transform: scale(1.05); }
#next-turn-button:disabled { background: #555; color: #999; cursor: not-allowed; box-shadow: none; transform: none; }

/* --- Modal Fenster --- */
.modal { display: none; position: fixed; z-index: 1500; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); animation: fadeIn 0.3s ease forwards; }
.modal-content {
    background-color: var(--panel-bg); margin: 10% auto; padding: 25px; border: 1px solid var(--accent-color);
    border-radius: 5px; width: 90%; max-width: 650px; box-shadow: 0 5px 15px rgba(57, 255, 20, 0.3);
    position: relative; animation: slideIn 0.3s ease forwards;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
.modal.closing { animation: fadeOut 0.3s ease forwards; }
.modal.closing .modal-content { animation: slideOut 0.3s ease forwards; }

.close-button { color: var(--text-muted); position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s ease; }
.close-button:hover, .close-button:focus { color: var(--accent-color); text-decoration: none; }
.modal-header { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 15px; }
.modal-image { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; border: 2px solid var(--accent-color); background-color: #333; /* Falls Bild fehlt */ }
#modal-creature-name { margin: 0; font-size: 1.8em; color: var(--accent-color); }
.modal-body h3 { font-size: 1.2em; color: var(--text-color); margin-top: 20px; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); padding-bottom: 3px; }
#modal-creature-stats { list-style: none; padding: 0; }
#modal-creature-stats li { margin-bottom: 5px; font-size: 1em; }
#modal-creature-stats li .stat-name { display: inline-block; width: 100px; color: var(--text-muted); }
#modal-creature-stats li .stat-value { font-weight: bold; color: var(--accent-color); }
#modal-creature-quote { font-style: italic; color: var(--text-muted); border-left: 3px solid var(--accent-color); padding-left: 15px; margin-top: 10px; margin-bottom: 0;}
/* Fähigkeiten im Modal */
#modal-creature-abilities { list-style: none; padding: 0; margin-top: 5px; }
#modal-creature-abilities li { margin-bottom: 8px; font-size: 0.95em; border-left: 2px solid var(--accent-color); padding-left: 8px; }
#modal-creature-abilities li .ability-name { font-weight: bold; color: var(--text-color); display: block; margin-bottom: 2px; }
#modal-creature-abilities li .ability-desc { color: var(--text-muted); font-size: 0.9em; }
#modal-creature-abilities li .ability-symbol-inline { display: inline-block; margin-right: 5px; font-size: 1.1em; }

/* Modal Actions */
.modal-actions { margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; /* Umbruch bei vielen Buttons */ }
.modal-actions button {
    padding: 8px 15px; font-size: 0.9em; font-family: var(--font-secondary); cursor: pointer;
    border: 1px solid var(--accent-color); border-radius: 3px; transition: all 0.2s ease; white-space: nowrap;
}
.modal-actions button .cost { font-size: 0.9em; color: var(--text-muted); }
/* Select Button */
#modal-select-button { background-color: var(--accent-color); color: var(--bg-color); }
#modal-select-button:hover { background-color: #4aff2a; box-shadow: 0 0 8px rgba(57, 255, 20, 0.5); }
/* Unassign Button */
#modal-unassign-button { background-color: transparent; color: var(--accent-color); }
#modal-unassign-button:hover { background-color: rgba(57, 255, 20, 0.1); border-color: #4aff2a; }
/* Discard Button */
#modal-discard-button { background-color: transparent; color: var(--error-color); border-color: var(--error-color); }
#modal-discard-button:hover { background-color: rgba(255, 82, 82, 0.1); box-shadow: 0 0 8px rgba(255, 82, 82, 0.5); }
.modal-actions button:disabled {
    background: #444 !important; color: var(--text-muted) !important; border-color: #555 !important;
    cursor: not-allowed; box-shadow: none !important; opacity: 0.6;
}

/* --- Forschungs-Screen spezifische Stile --- */
#screen-research h2 {
    text-align: center;
    margin-bottom: 20px;
}

.research-container {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: auto; /* Scrollen, falls Baum größer als SVG-Element */
}

#research-tree-svg {
    display: block; /* Verhindert extra Platz unter SVG */
    /* Hintergrund kann hier oder im Container gesetzt werden */
}

/* Styling für SVG-Elemente */
.research-node {
    cursor: pointer;
    transition: all 0.2s ease;
}
.research-node circle, .research-node rect {
    stroke-width: 2px;
    stroke: var(--border-color);
    fill: var(--panel-bg); /* Hintergrund der Knoten */
    transition: all 0.2s ease;
}
.research-node text {
    fill: var(--text-muted);
    font-family: var(--font-secondary);
    font-size: 10px;
    text-anchor: middle; /* Text zentriert über/unter Knoten */
    pointer-events: none; /* Text soll Klicks nicht blockieren */
    transition: fill 0.2s ease;
}
.research-node .node-icon {
     font-size: 16px; /* Emoji/Icon Größe */
     text-anchor: middle;
     dominant-baseline: central;
      pointer-events: none;
}


/* Zustands-Styling */
.research-node.state-locked circle, .research-node.state-locked rect { fill: #333; stroke: #555; }
.research-node.state-locked text { fill: #777; }
.research-node.state-locked .node-icon { opacity: 0.5; }

.research-node.state-available:hover circle, .research-node.state-available:hover rect {
    stroke: var(--accent-color);
    fill: #3a4a3a; /* Leichter Grünton */
    transform: scale(1.1);
}
.research-node.state-available:hover text { fill: var(--accent-color); }

.research-node.state-researching circle, .research-node.state-researching rect {
    stroke: var(--accent-color);
    fill: var(--panel-bg);
    stroke-dasharray: 4; /* Gestrichelte Linie */
    animation: researchStrokeAnim 1s linear infinite;
}
.research-node.state-researching text { fill: var(--accent-color); font-weight: bold; }

.research-node.state-completed circle, .research-node.state-completed rect {
    stroke: var(--accent-color);
    fill: var(--accent-color); /* Vollständig gefüllt */
}
.research-node.state-completed text { fill: var(--bg-color); font-weight: bold; }
.research-node.state-completed .node-icon { filter: brightness(0); } /* Macht Icon schwarz */


@keyframes researchStrokeAnim {
    to { stroke-dashoffset: -8; } /* Bewegt die Strichelung */
}

/* Verbindungslinien */
.research-line {
    stroke: var(--border-color);
    stroke-width: 1.5px;
    opacity: 0.5;
}
.research-line.available { /* Linie zu verfügbarem Knoten */
     stroke: var(--text-muted);
     opacity: 0.7;
}
.research-line.completed { /* Linie von erledigtem Knoten */
    stroke: var(--accent-color);
    opacity: 1;
}

/* Info- und Current-Panels */
.research-info, .research-current {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}
.research-info h3, .research-current h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 5px;
}
.research-info p, .research-current p {
    margin-bottom: 8px;
    font-size: 0.9em;
}
.research-info span, .research-current span {
    color: var(--accent-color);
    font-weight: normal;
}
#start-research-button { /* Ähnlich wie andere Buttons */
    padding: 8px 15px; font-size: 0.9em; font-family: var(--font-secondary); cursor: pointer;
    border: 1px solid var(--accent-color); border-radius: 3px; transition: all 0.2s ease;
    background-color: var(--accent-color); color: var(--bg-color); margin-top: 10px;
}
#start-research-button:hover { background-color: #4aff2a; box-shadow: 0 0 8px rgba(57, 255, 20, 0.5); }
#start-research-button:disabled {
    background: #555 !important; color: #999 !important; border-color: #555 !important;
    cursor: not-allowed; box-shadow: none !important; opacity: 0.7;
}

/* Optional: Progress Bar */
.progress-bar-container { height: 10px; background-color: #444; border-radius: 5px; overflow: hidden; margin-top: 5px;}
.progress-bar-fill { height: 100%; background-color: var(--accent-color); width: 0%; transition: width 0.3s ease;}


/* --- Game Over Screen --- */
#game-over-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); display: none; /* Wird per JS auf flex gesetzt */
    justify-content: center; align-items: center; z-index: 2000;
    opacity: 0; animation: fadeInGameOver 0.5s ease forwards; text-align: center;
}
@keyframes fadeInGameOver { from { opacity: 0; } to { opacity: 1; } }
.game-over-content {
    background-color: var(--panel-bg); padding: 30px 40px; border-radius: 5px;
    border: 1px solid var(--error-color); box-shadow: 0 0 20px rgba(255, 82, 82, 0.5);
    animation: slideInGameOver 0.5s ease forwards;
}
@keyframes slideInGameOver { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.game-over-content h2 { color: var(--error-color); font-size: 2em; margin-bottom: 15px; text-shadow: 0 0 5px var(--error-color); }
.game-over-content p { color: var(--text-muted); margin-bottom: 10px; font-size: 1em; }
#game-over-message { color: var(--text-color); font-weight: bold; margin-bottom: 20px; }
.game-over-content span { color: var(--accent-color); font-weight: bold; }
#restart-button {
    display: inline-block; margin-top: 20px; padding: 10px 25px; font-size: 1.1em; font-family: var(--font-primary);
    cursor: pointer; background: linear-gradient(145deg, var(--error-color), #c62828); color: var(--text-color);
    border: none; border-radius: 4px; transition: all 0.3s ease; text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.4);
}
#restart-button:hover { background: linear-gradient(145deg, #ff6e6e, var(--error-color)); box-shadow: 0 0 15px rgba(255, 82, 82, 0.7); transform: scale(1.05); }

/* --- Platzhalter Styling --- */
.resource-icon-placeholder { height: 14px; width: 14px; vertical-align: middle; margin-right: 3px; opacity: 0.6; background-color: #555; border-radius: 2px;}
.panel-image-placeholder { width: 100%; height: 100px; object-fit: cover; margin-bottom: 15px; border-radius: 3px; opacity: 0.5; background-color: #444; }
.placeholder-content {
    border: 2px dashed var(--border-color); padding: 40px; margin: 20px 0; text-align: center;
    color: var(--text-muted); font-family: var(--font-primary); background-color: rgba(0,0,0,0.2);
    border-radius: 5px; min-height: 200px; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;
}
.placeholder-content img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; z-index: -1; }


/* --- Responsive Anpassungen --- */
@media (max-width: 900px) {
     .main-header { flex-direction: column; align-items: stretch; position: static; /* Kein Sticky mehr bei Umbruch */}
     .main-header h1 { text-align: center; margin-bottom: 10px; margin-right: 0;}
     #main-nav { justify-content: center; flex-wrap: wrap;}
      #status-display { position: static; /* Kein Sticky mehr bei Umbruch */ }
}

@media (max-width: 800px) {
    .main-container { /* Innerhalb #screen-colony */
        flex-direction: column;
        gap: 15px;
    }
    .panel { /* Gilt für alle Panels in allen Screens */
        width: 100%; /* Volle Breite auf Mobile */
        margin: 0 auto;
    }
    #game-screens { padding: 10px; }
    #status-display { justify-content: space-between; gap: 5px 10px;} /* Weniger Gap, mehr Verteilung */
    .status-item { font-size: 0.8em; } /* Noch kleiner */
    h1 { font-size: 1.6em; }
    header h2 { font-size: 0.85em;}
    .modal-content { width: 95%; margin: 5% auto; padding: 15px; } /* Modal anpassen */
    .modal-header { flex-direction: column; text-align: center; gap: 10px;} /* Bild über Name */
    .modal-image { width: 80px; height: 80px; }
    #modal-creature-name { font-size: 1.5em;}
    .modal-actions { justify-content: center; } /* Buttons zentrieren */
}

@media (max-width: 480px) { /* Sehr kleine Screens */
     #status-display { gap: 5px; justify-content: center; }
     .nav-button { padding: 6px 10px; font-size: 0.8em; }
     .modal-content { padding: 10px; }
     .game-over-content { padding: 20px; }
     .game-over-content h2 { font-size: 1.5em; }
}