body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 500px;
  width: 90%;
}

.period-area {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #0056b3;
    font-weight: bold;
}

.name-area {
    margin-bottom: 15px;
    text-align: left;
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
}

.name-area label:first-child { 
    font-weight: bold;
    margin-right: 5px;
}

#creature-name-input {
    flex-grow: 1; 
    min-width: 150px; 
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    margin-right: 10px; 
}

#creature-name-input:disabled {
    background-color: #e9e9e9;
    color: #777;
    cursor: not-allowed;
}

.auto-name-label {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #555;
    margin-right: 10px; 
}

.auto-name-label input[type="checkbox"] {
    margin-right: 3px;
}

#creature-name-display {
    margin-top: 10px;
    font-size: 1.5em;
    color: #333;
    text-align: center;
    width: 100%; 
}

#creature-display {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#creature-image {
  max-width: 100%;
  max-height: 300px;
  margin-bottom: 10px;
}

#creature-description {
  font-style: italic;
  color: #555;
  min-height: 1.2em; 
}

.survival-text {
    margin-top: 10px;
    font-weight: bold;
    color: #28a745; 
}

.input-area {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  margin-bottom: 15px; 
}

#evolution-suggestion {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#evolve-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#evolve-button:hover {
  background-color: #0056b3;
}

.extinction-button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.extinction-button:hover {
    background-color: #c82333;
}

#loading {
  margin-top: 15px;
  color: #007bff;
}

.hidden {
    display: none;
}

#extinction-info {
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed #dc3545;
  border-radius: 4px;
  background-color: #fff3f3;
  text-align: left;
}

#extinction-info h2 {
  margin-top: 0;
  color: #dc3545;
  font-size: 1.2em;
}

#extinction-info p {
  margin-bottom: 0.5em;
  font-size: 0.9em;
  color: #333;
}

#extinction-challenge-info {
    font-weight: bold;
    color: #dc3545;
}

.survival-prompt-text {
    font-weight: bold;
    color: #007bff;
    margin-top: 1em;
}

#history-area {
    margin-top: 30px;
    text-align: left;
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

#history-area h3 {
    margin-top: 0;
    color: #333;
}

#evolution-history-list {
    list-style: none;
    padding: 0;
    max-height: 200px; 
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
}

#evolution-history-list li {
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 0.9em;
}

#evolution-history-list li strong {
    color: #007bff;
}

#save-load-area {
    margin-top: 30px;
    padding: 15px;
    border: 1px solid #6c757d;
    border-radius: 4px;
    background-color: #e9ecef;
    text-align: center;
}

#save-load-area h3 {
    margin-top: 0;
    color: #5a6268;
    font-size: 1.2em;
    margin-bottom: 10px;
}

#save-code-input {
    width: 95%;
    height: 80px;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8em;
    resize: vertical; /* Allow vertical resizing */
}

#save-load-area button {
    padding: 8px 12px;
    margin: 0 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
    margin-bottom: 5px; /* Add margin for wrapping */
}

#save-button {
    background-color: #28a745;
    color: white;
}

#save-button:hover {
    background-color: #218838;
}

#load-button {
    background-color: #007bff;
    color: white;
}

#load-button:hover {
    background-color: #0056b3;
}

#convert-save-button {
    background-color: #ffc107; /* Warning yellow */
    color: black;
}

#convert-save-button:hover {
    background-color: #e0a800;
}

#convert-message {
    margin-top: 10px;
    font-size: 0.9em;
    font-weight: bold;
}

#save-load-area p {
    margin-top: 10px;
    font-size: 0.9em;
}

#save-message {
    color: #28a745;
    font-weight: bold;
}

#load-message {
    color: #007bff;
    font-weight: bold;
}

.error-message {
    color: #dc3545;
    font-weight: bold;
}

#size-comparison-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background-color: #e9f7ff;
    text-align: center;
}

#size-comparison-area h3 {
    margin-top: 0;
    color: #0056b3;
    font-size: 1.2em;
}

#size-comparison-area p {
    margin-bottom: 0.5em;
    font-size: 0.9em;
    color: #333;
}

.comparison-item {
    display: flex;
    align-items: center;
    justify-content: center; 
    margin-bottom: 10px;
}

.comparison-icon {
    width: 30px; 
    height: auto;
    margin-right: 10px;
}

.planck-icon {
    width: 40px; 
}

#current-size-display {
    color: #0056b3;
    font-size: 1.1em;
}

#current-population-display {
    color: #28a745; 
}

.suggestion-area {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

#get-suggestions-button {
    padding: 8px 12px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
}

#get-suggestions-button:hover {
    background-color: #218838;
}

#get-suggestions-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#suggestions-list {
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed #28a745;
    border-radius: 4px;
    background-color: #e9ffe9;
    text-align: left;
}

#suggestions-list p {
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: bold;
    color: #1e7e34;
    font-size: 0.9em;
}

.suggestion-item {
    display: block; 
    width: 100%;
    text-align: left;
    padding: 8px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9em;
    color: #333;
}

.suggestion-item:hover {
    background-color: #e2f0cb;
    border-color: #a3c293;
}

.easter-egg {
    margin-top: 15px;
    font-weight: bold;
    color: #8A2BE2; 
    font-size: 1em;
}

#biological-details-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ffc107; 
    border-radius: 4px;
    background-color: #fffbe9; 
    text-align: left;
}

#biological-details-area h3 {
    margin-top: 0;
    color: #ff9800; 
    font-size: 1.2em;
    text-align: center;
}

#biological-details-area p {
    margin-bottom: 0.5em;
    font-size: 0.9em;
    color: #333;
}

.detail-label {
    color: #e65100; 
    margin-right: 5px;
}

.dark-mode #biological-details-area p, 
.dark-mode #biological-details-area span {
    color: var(--dm-text-secondary);
}

.dark-mode #biological-details-area .detail-label {
    color: var(--dm-warning);
}

.dark-mode #biological-details-area strong { 
    color: var(--dm-text-primary);
}

#genes-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #6f42c1; /* Purple */
    border-radius: 4px;
    background-color: #f4eefc;
    text-align: left;
}

#genes-area h3 {
    margin-top: 0;
    color: #5a32a3;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
}

#genes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.gene-pill {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.gene-pill:hover {
    transform: translateY(-2px);
}

.gene-pill.positive {
    background-color: #28a745; /* Green */
    border: 1px solid #1e7e34;
}
.gene-pill.negative {
    background-color: #dc3545; /* Red */
    border: 1px solid #c82333;
}
.gene-pill.neutral {
    background-color: #6c757d; /* Grey */
    border: 1px solid #5a6268;
}

.dark-mode #genes-area {
    background-color: rgba(140, 93, 221, 0.1);
    border-color: var(--dm-primary-accent);
}

.dark-mode #genes-area h3 {
    color: var(--dm-primary-accent);
}

.dark-mode .gene-pill {
    color: var(--dm-bg);
}

.dark-mode .gene-pill.positive {
    background-color: var(--dm-success);
    border-color: #4CAF50;
}
.dark-mode .gene-pill.negative {
    background-color: var(--dm-error);
    border-color: #f44336;
}
.dark-mode .gene-pill.neutral {
    background-color: var(--dm-border-light);
    border-color: #9E9E9E;
    color: var(--dm-text-primary);
}

#evolution-tips-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px dashed #6c757d; 
    border-radius: 4px;
    background-color: #e9ecef; 
    text-align: left;
    font-size: 0.9em;
    color: #333;
}

#evolution-tips-area h3 {
    margin-top: 0;
    color: #5a6268; 
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

#evolution-tips-area h3 .toggle-button { 
    font-size: 0.8em;
    padding: 4px 8px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px; 
}

#evolution-tips-area h3 .toggle-button:hover {
    background-color: #5a6268;
}

#evolution-tips-content { 
    margin-top: 10px; 
}

#evolution-tips-area p {
    margin-bottom: 8px;
    line-height: 1.4;
}

#evolution-tips-area ul {
    margin-top: 8px;
    padding-left: 20px;
    list-style-type: disc;
}

#evolution-tips-area li {
    margin-bottom: 6px;
    line-height: 1.4;
}

#evolution-tips-area strong {
    color: #0056b3; 
}

#food-chain-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #007bff; 
    border-radius: 4px;
    background-color: #e9f7ff; 
    text-align: left;
}

#food-chain-area h3 {
    margin-top: 0;
    color: #0056b3; 
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
}

#food-chain-area p {
    margin-bottom: 0; 
    font-size: 0.9em;
    color: #333;
    text-align: center;
}

#food-chain-role-display {
    color: #0056b3;
}

#achievements-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #6a0dad; 
    border-radius: 4px;
    background-color: #f3e8ff; 
    text-align: left;
}

#achievements-area h3 {
    margin-top: 0;
    color: #4b0082; 
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#achievements-area h3 .toggle-button {
    font-size: 0.8em;
    padding: 4px 8px;
    background-color: #6a0dad;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#achievements-area h3 .toggle-button:hover {
    background-color: #4b0082;
}

#achievements-content {
    margin-top: 10px;
}

#achievements-list {
    list-style: none;
    padding: 0;
    max-height: 250px; 
    overflow-y: auto;
    border: 1px solid #d1b3e6; 
    border-radius: 4px;
    padding: 10px;
}

#achievements-list li {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    transition: background-color 0.3s, border-color 0.3s;
}

#achievements-list li.unlocked {
    background-color: #e6ffe6; 
    border: 1px solid #a3c293;
    border-left: 5px solid #28a745; 
}

#achievements-list li.unlocked strong {
    color: #1e7e34;
}

#achievements-list li.locked {
    background-color: #f0f0f0; 
    border: 1px solid #ddd;
    border-left: 5px solid #ccc;
    opacity: 0.7;
}

#achievements-list li.locked strong {
    color: #555;
}

#achievements-list li strong { 
    display: block;
    margin-bottom: 4px;
    font-size: 1em;
}

#achievements-list li p { 
    font-size: 0.85em;
    color: #333;
    margin: 0;
    line-height: 1.3;
}

.achievement-difficulty {
    font-weight: normal;
    font-size: 0.8em;
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 3px;
    color: #fff; /* Default text color, will be overridden */
}

#achievements-list li.difficulty-easy .achievement-difficulty { background-color: #28a745; color: #000; } /* Green */
#achievements-list li.difficulty-medium .achievement-difficulty { background-color: #ffc107; color: #000; } /* Yellow */
#achievements-list li.difficulty-hard .achievement-difficulty { background-color: #dc3545; color: #fff; } /* Red */
#achievements-list li.difficulty-insane .achievement-difficulty { background-color: #6f42c1; color: #fff; } /* Purple */

#achievement-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); 
    background-color: #28a745; 
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    font-size: 1.1em;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    text-align: center;
}

#achievement-notification.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(100px); 
    pointer-events: none;
}

#achievement-notification.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0); 
}

#settings-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px dashed #4b0082; 
    border-radius: 4px;
    background-color: #f3e8ff;
    text-align: left;
}

#settings-area h3 {
    margin-top: 0;
    color: #4b0082;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#settings-area h3 .toggle-button {
    font-size: 0.8em;
    padding: 4px 8px;
    background-color: #6a0dad;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#settings-area h3 .toggle-button:hover {
    background-color: #4b0082;
}

#settings-content {
    margin-top: 10px;
}

.setting-item {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d1b3e6;
}

.setting-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.setting-item h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #5a0c99;
    font-size: 1.05em;
}

#theme-toggle-checkbox {
    margin-left: 5px;
    vertical-align: middle;
}

#cheat-warning {
    font-size: 0.85em;
    color: #dc3545; 
    margin-bottom: 8px;
}

#cheat-code-input {
    width: calc(100% - 22px); 
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 0.9em;
}

#submit-cheat-button {
    padding: 8px 12px;
    background-color: #ffc107; 
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
}

#submit-cheat-button:hover {
    background-color: #d99000; 
}

#cheat-output {
    margin-top: 10px;
    padding: 8px;
    background-color: #fffbe9;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    font-size: 0.85em;
    min-height: 2em;
    white-space: pre-wrap; 
    word-wrap: break-word;
}

#disease-info-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px dashed #e67e22; 
    border-radius: 4px;
    background-color: #fdf3e6; 
    text-align: left;
}

#disease-info-area h3 {
    margin-top: 0;
    color: #d35400; 
    font-size: 1.2em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#disease-info-area h3 .material-icons-outlined {
    margin-right: 8px;
    color: #d35400;
}

#disease-info-area p {
    margin-bottom: 0.5em;
    font-size: 0.9em;
    color: #333;
}

#disease-name-display, #disease-infected-display, #disease-turns-remaining-display {
    color: #c0392b; 
}

:root {
    --dm-bg: #121212;
    --dm-surface: #1e1e1e;
    --dm-surface-light: #2c2c2c;
    --dm-text-primary: #e0e0e0;
    --dm-text-secondary: #b0b0b0;
    --dm-border: #3a3a3a;
    --dm-border-light: #555555;
    --dm-primary-accent: #bb86fc;
    --dm-secondary-accent: #03dac6;
    --dm-error: #cf6679;
    --dm-success: #66bb6a; 
    --dm-warning: #ffab40; 
    --dm-info: #4fc3f7; 
}

body.dark-mode {
    background-color: var(--dm-bg);
    color: var(--dm-text-primary);
}

.dark-mode .container {
    background-color: var(--dm-surface);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4 {
    color: var(--dm-text-primary);
}

.dark-mode p, .dark-mode label, .dark-mode span, .dark-mode li, .dark-mode strong, .dark-mode div {
    color: var(--dm-text-secondary);
}
.dark-mode strong { 
    color: var(--dm-text-primary);
}

.dark-mode input[type="text"],
.dark-mode input[type="checkbox"], 
.dark-mode textarea {
    background-color: var(--dm-surface-light);
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-border);
}
.dark-mode input[type="text"]:focus,
.dark-mode textarea:focus {
    border-color: var(--dm-primary-accent);
    box-shadow: 0 0 0 2px rgba(187, 134, 252, 0.2);
}
.dark-mode input[type="checkbox"] {
    accent-color: var(--dm-primary-accent); 
}

.dark-mode button {
    background-color: var(--dm-surface-light);
    color: var(--dm-text-primary);
    border: 1px solid var(--dm-border);
}
.dark-mode button:hover {
    background-color: var(--dm-border); 
}
.dark-mode button:disabled {
    background-color: #2a2a2a;
    color: #555;
    border-color: #404040;
    cursor: not-allowed;
}

.dark-mode .period-area { 
    color: var(--dm-info); 
}
.dark-mode .period-area strong { 
    color: var(--dm-info); 
}
.dark-mode #creature-name-input:disabled { 
    background-color: var(--dm-border); 
    color: var(--dm-text-secondary); 
}
.dark-mode #creature-name-display { 
    color: var(--dm-text-primary); 
}
.dark-mode #current-environment-display, .dark-mode #total-knowledge-display {
    color: var(--dm-info);
}
.dark-mode #creature-display { 
    border-color: var(--dm-border); 
}
.dark-mode #creature-description { 
    color: var(--dm-text-secondary); 
}
.dark-mode .survival-text { 
    color: var(--dm-success); 
} 
.dark-mode .survival-text[style*="color: rgb(220, 53, 69)"], 
.dark-mode .survival-text[style*="color: #dc3545"] {
    color: var(--dm-error) !important;
}

.dark-mode #evolve-button { 
    background-color: var(--dm-primary-accent); 
    color: var(--dm-bg); 
}
.dark-mode #evolve-button:hover { 
    background-color: #a065e0; 
} 

.dark-mode .extinction-button { 
    background-color: var(--dm-error); 
    color: var(--dm-bg); 
}
.dark-mode .extinction-button:hover { 
    background-color: #b04c5a; 
} 

.dark-mode #loading { 
    color: var(--dm-info); 
}
.dark-mode #extinction-info { 
    background-color: rgba(207, 102, 121, 0.1); 
    border-color: var(--dm-error); 
}
.dark-mode #extinction-info h2 { 
    color: var(--dm-error); 
}
.dark-mode #extinction-info p { 
    color: var(--dm-text-secondary); 
}
.dark-mode #extinction-challenge-info { 
    color: var(--dm-error); 
}
.dark-mode .survival-prompt-text { 
    color: var(--dm-info); 
}

.dark-mode #history-area { 
    border-top-color: var(--dm-border); 
}
.dark-mode #history-area h3 { 
    color: var(--dm-text-primary); 
}
.dark-mode #evolution-history-list { 
    border-color: var(--dm-border); 
}
.dark-mode #evolution-history-list li { 
    background-color: var(--dm-surface-light); 
    border-color: var(--dm-border); 
    color: var(--dm-text-secondary); 
}
.dark-mode #evolution-history-list li strong { 
    color: var(--dm-info); 
}

.dark-mode #save-load-area { 
    background-color: var(--dm-surface-light); 
    border-color: var(--dm-border-light); 
}
.dark-mode #save-load-area h3 { 
    color: var(--dm-text-primary); 
}
.dark-mode #save-code-input { 
    background-color: var(--dm-bg); 
    border-color: var(--dm-border); 
    color: var(--dm-text-primary); 
}
.dark-mode #save-button { 
    background-color: var(--dm-success); 
    color: var(--dm-bg); 
}
.dark-mode #save-button:hover { 
    background-color: #4a9b4f; 
} 
.dark-mode #load-button { 
    background-color: var(--dm-info); 
    color: var(--dm-bg); 
}
.dark-mode #load-button:hover { 
    background-color: #3c9bca; 
} 
.dark-mode #save-message { 
    color: var(--dm-success); 
}
.dark-mode #load-message { 
    color: var(--dm-info); 
}
.dark-mode .error-message { 
    color: var(--dm-error); 
}

.dark-mode #size-comparison-area { 
    background-color: rgba(79, 195, 247, 0.1); 
    border-color: var(--dm-info); 
}
.dark-mode #size-comparison-area h3 { 
    color: var(--dm-info); 
}
.dark-mode #size-comparison-area p { 
    color: var(--dm-text-secondary); 
}
.dark-mode #current-size-display { 
    color: var(--dm-info); 
}
.dark-mode .comparison-icon { 
    filter: invert(0.8); 
} 
.dark-mode .planck-icon { 
    filter: invert(0.1) contrast(2) brightness(0.9); 
} 

.dark-mode #get-suggestions-button { 
    background-color: var(--dm-success); 
    color: var(--dm-bg); 
}
.dark-mode #get-suggestions-button:hover { 
    background-color: #4a9b4f; 
} 
.dark-mode #suggestions-list { 
    background-color: rgba(102, 187, 106, 0.1); 
    border-color: var(--dm-success); 
}
.dark-mode #suggestions-list p { 
    color: var(--dm-success); 
}
.dark-mode .suggestion-item { 
    background-color: var(--dm-surface-light); 
    border-color: var(--dm-border); 
    color: var(--dm-text-primary); 
}
.dark-mode .suggestion-item:hover { 
    background-color: var(--dm-border); 
    border-color: var(--dm-success); 
}

.dark-mode .easter-egg { 
    color: var(--dm-secondary-accent); 
}

.dark-mode #biological-details-area { 
    background-color: rgba(255, 171, 64, 0.1); 
    border-color: var(--dm-warning); 
}
.dark-mode #biological-details-area h3 { 
    color: var(--dm-warning); 
}
.dark-mode #biological-details-area p { 
    color: var(--dm-text-secondary); 
}
.dark-mode .detail-label { 
    color: var(--dm-warning); 
}

.dark-mode #evolution-tips-area { 
    background-color: var(--dm-surface-light); 
    border-color: var(--dm-border-light); 
}
.dark-mode #evolution-tips-area h3 { 
    color: var(--dm-text-primary); 
}
.dark-mode #evolution-tips-area h3 .toggle-button { 
    background-color: var(--dm-border-light); 
    color: var(--dm-text-primary); 
}
.dark-mode #evolution-tips-area h3 .toggle-button:hover { 
    background-color: var(--dm-border); 
}
.dark-mode #evolution-tips-area p, .dark-mode #evolution-tips-area li { 
    color: var(--dm-text-secondary); 
}
.dark-mode #evolution-tips-area strong { 
    color: var(--dm-info); 
}

.dark-mode #food-chain-area { 
    background-color: rgba(79, 195, 247, 0.1); 
    border-color: var(--dm-info); 
}
.dark-mode #food-chain-area h3 { 
    color: var(--dm-info); 
}
.dark-mode #food-chain-area p { 
    color: var(--dm-text-secondary); 
}
.dark-mode #food-chain-role-display { 
    color: var(--dm-info); 
}

.dark-mode #achievements-area { 
    background-color: rgba(187, 134, 252, 0.1); 
    border-color: var(--dm-primary-accent); 
}
.dark-mode #achievements-area h3 { 
    color: var(--dm-primary-accent); 
}
.dark-mode #achievements-area h3 .toggle-button { 
    background-color: var(--dm-primary-accent); 
    color: var(--dm-bg); 
}
.dark-mode #achievements-area h3 .toggle-button:hover { 
    background-color: #a065e0; 
} 
.dark-mode #achievements-list { 
    border-color: var(--dm-primary-accent); 
}
.dark-mode #achievements-list li.unlocked { 
    background-color: rgba(102, 187, 106, 0.15); 
    border-color: var(--dm-success); 
    border-left-color: var(--dm-success); 
}
.dark-mode #achievements-list li.unlocked strong { 
    color: var(--dm-success); 
}
.dark-mode #achievements-list li.unlocked p { 
    color: var(--dm-text-secondary); 
}
.dark-mode #achievements-list li.locked { 
    background-color: var(--dm-surface-light); 
    border-color: var(--dm-border); 
    border-left-color: var(--dm-border-light); 
    opacity: 0.7; 
}
.dark-mode #achievements-list li.locked strong { 
    color: var(--dm-text-secondary); 
}
.dark-mode #achievements-list li.locked p { 
    color: var(--dm-text-secondary); 
}

.dark-mode #achievements-list li.difficulty-easy .achievement-difficulty { 
    background-color: var(--dm-success); 
    color: var(--dm-bg); 
}
.dark-mode #achievements-list li.difficulty-medium .achievement-difficulty { 
    background-color: var(--dm-warning); 
    color: var(--dm-bg); 
}
.dark-mode #achievements-list li.difficulty-hard .achievement-difficulty { 
    background-color: var(--dm-error); 
    color: var(--dm-bg); 
}
.dark-mode #achievements-list li.difficulty-insane .achievement-difficulty { 
    background-color: #8a63d2; 
    color: var(--dm-bg); 
}

.dark-mode #achievement-notification { 
    background-color: var(--dm-success); 
    color: var(--dm-bg); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
}

.dark-mode #settings-area {
    background-color: rgba(187, 134, 252, 0.05); 
    border-color: var(--dm-primary-accent);
}
.dark-mode #settings-area h3 {
    color: var(--dm-primary-accent);
}
.dark-mode #settings-area h3 .toggle-button {
    background-color: var(--dm-primary-accent);
    color: var(--dm-bg);
}
.dark-mode #settings-area h3 .toggle-button:hover {
    background-color: #a065e0;
}
.dark-mode .setting-item {
    border-bottom-color: var(--dm-border);
}
.dark-mode .setting-item h4 {
    color: var(--dm-secondary-accent);
}
.dark-mode #cheat-warning {
    color: var(--dm-error);
}
.dark-mode #cheat-code-input {
    background-color: var(--dm-surface-light);
    color: var(--dm-text-primary);
    border-color: var(--dm-border);
}
.dark-mode #submit-cheat-button {
    background-color: var(--dm-warning);
    color: var(--dm-bg);
}
.dark-mode #submit-cheat-button:hover {
    background-color: #d99000; 
}
.dark-mode #cheat-output {
    background-color: rgba(255, 171, 64, 0.1);
    border-color: var(--dm-warning);
    color: var(--dm-text-secondary);
}

.dark-mode #disease-info-area {
    background-color: rgba(230, 126, 34, 0.1); 
    border-color: var(--dm-warning); 
}

.dark-mode #disease-info-area h3 {
    color: var(--dm-warning);
}
.dark-mode #disease-info-area h3 .material-icons-outlined {
    color: var(--dm-warning);
}

.dark-mode #disease-info-area p {
    color: var(--dm-text-secondary);
}

.dark-mode #disease-name-display,
.dark-mode #disease-infected-display,
.dark-mode #disease-turns-remaining-display {
    color: var(--dm-error); 
}

#unreleased-update-banner {
    background-color: #4CAF50; /* Green background */
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: bold;
}

#unreleased-update-banner p {
    margin: 0;
    color: white !important; /* Ensure text is white even in dark mode */
}

.dark-mode #unreleased-update-banner {
    background-color: var(--dm-success); /* Use success color from dark mode variables */
}

.dark-mode #unreleased-update-banner p {
    color: var(--dm-bg) !important; /* Dark text on light green background */
}

#how-to-play-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px dashed #17a2b8; /* Info color */
    border-radius: 4px;
    background-color: #e8f7f9; 
    text-align: left;
    font-size: 0.9em;
    color: #333;
}

#how-to-play-area h3 {
    margin-top: 0;
    color: #0c5460; /* Darker info color */
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

#how-to-play-area h3 .toggle-button { 
    font-size: 0.8em;
    padding: 4px 8px;
    background-color: #17a2b8;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px; 
}

#how-to-play-area h3 .toggle-button:hover {
    background-color: #117a8b;
}

#how-to-play-content { 
    margin-top: 10px; 
}

#how-to-play-area h4 {
    color: #0c5460;
    margin-top: 10px;
    margin-bottom: 8px;
}
#how-to-play-area h5 {
    color: #117a8b;
    margin-top: 10px;
    margin-bottom: 5px;
}

#how-to-play-area p {
    margin-bottom: 8px;
    line-height: 1.4;
}

#how-to-play-area ul {
    margin-top: 8px;
    padding-left: 20px;
    list-style-type: disc;
}

#how-to-play-area li {
    margin-bottom: 6px;
    line-height: 1.4;
}

#how-to-play-area strong {
    color: #0056b3; 
}

.dark-mode #how-to-play-area { 
    background-color: rgba(79, 195, 247, 0.1); /* Light blueish from var(--dm-info) */
    border-color: var(--dm-info); 
}
.dark-mode #how-to-play-area h3 { 
    color: var(--dm-info); 
}
.dark-mode #how-to-play-area h3 .toggle-button { 
    background-color: var(--dm-info); 
    color: var(--dm-bg); 
}
.dark-mode #how-to-play-area h3 .toggle-button:hover { 
    background-color: #3c9bca; 
}
.dark-mode #how-to-play-area h4 {
    color: var(--dm-info);
}
.dark-mode #how-to-play-area h5 {
    color: var(--dm-secondary-accent); /* A slightly different accent for sub-headers */
}
.dark-mode #how-to-play-area p, 
.dark-mode #how-to-play-area li { 
    color: var(--dm-text-secondary); 
}
.dark-mode #how-to-play-area strong { 
    color: var(--dm-primary-accent); /* Or var(--dm-secondary-accent) for consistency with h5 */
}

.dark-mode #convert-save-button {
    background-color: var(--dm-warning);
    color: var(--dm-bg);
}
.dark-mode #convert-save-button:hover {
    background-color: #d99000; /* Darker yellow */
}

.dark-mode #convert-message.success {
    color: var(--dm-success);
}
.dark-mode #convert-message.error {
    color: var(--dm-error);
}
.dark-mode #convert-message.info {
    color: var(--dm-info);
}

.setting-item .setting-note {
    font-size: 0.8em;
    color: #555; /* Slightly muted text color */
    margin-top: 5px;
    margin-bottom: 0; /* Remove extra bottom margin if any */
    line-height: 1.3;
}

.dark-mode .setting-item .setting-note {
    color: var(--dm-text-secondary);
    opacity: 0.8;
}

#vision-area {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #17a2b8; /* Teal/Info color */
    border-radius: 4px;
    background-color: #e8f7f9;
    text-align: center;
}

#vision-area h3 {
    margin-top: 0;
    color: #0c5460;
    font-size: 1.2em;
    margin-bottom: 10px;
}

#vision-area h4 {
    margin-top: 15px;
    margin-bottom: 8px;
    color: #117a8b;
    font-size: 1.05em;
}

#vision-description {
    font-style: italic;
    color: #333;
    margin-bottom: 15px;
    font-size: 0.9em;
    min-height: 1.2em;
}

#vision-display {
    border: 1px solid #ccc;
    padding: 5px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

#creature-pov-image {
    max-width: 100%;
    max-height: 300px;
}

#spectrum-comparison-area {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 20px; /* Space for the indicator text */
}

.spectrum-bar {
    display: flex;
    width: 100%;
    height: 25px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #555;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
}

.spectrum-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.spectrum-segment.ir {
    flex: 1;
    background: linear-gradient(to right, #400000, #ff0000);
}

.spectrum-segment.visible {
    flex: 2;
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

.spectrum-segment.uv {
    flex: 1;
    background: linear-gradient(to right, #4c007d, #9400d3, #ba55d3);
}

.spectrum-indicator {
    position: absolute;
    top: -2px; /* to overlap the border */
    height: 29px; /* slightly taller than the bar */
    border: 2px solid white;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    transition: left 0.5s ease, width 0.5s ease;
}

.spectrum-indicator::after {
    content: 'Creature Vision';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8em;
    color: #333;
    white-space: nowrap;
}

/* NEW Tweak Placeholder Style */
.tweak-placeholder-message {
    font-style: italic;
    color: #888;
    margin-top: 5px;
}
.dark-mode .tweak-placeholder-message {
    color: var(--dm-text-secondary);
    opacity: 0.7;
}

#achievements-list li.difficulty-easy-cheat .achievement-difficulty { 
    background-color: #ffc107; /* Warning yellow */
    color: #000; 
}