/* Earat CYOA Theme Styles */
:root {
    --primary-color: #3a5a78; --primary-hover: #2d4a66;
    --secondary-color: #c9d1d9; --accent-color: #fa972c; --dark-accent-color: #f0a04b;
    --text-color: #333; --bg-color: #f8f9fa; --card-bg: #fff;
    --error-color: #dc3545; --success-color: #28a745; --info-color: #007bff; --neutral-color: #6c757d;
    --border-light: #ddd; --border-lighter: #eee; --text-muted: #666;
    --roll-purple: #6d28d9; --roll-purple-hover: #5b21b6; --roll-bg: #f5f3ff; --roll-border: #d4c6ff;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6;
    background-image: linear-gradient(rgba(248, 249, 250, 0.591), rgba(248, 249, 250, 0.591)), url('images/background.jpg');
    background-repeat: repeat; background-size: 200px 200px;
}
h1, h2, h3 { color: var(--primary-color); }

/* Back Link */
.back-link {
    background-color: var(--card-bg); color: var(--primary-color);
    border: 2px solid var(--primary-color); border-radius: 6px;
    padding: 10px 18px; font-weight: 600; font-size: 0.95em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); opacity: 1;
}
.back-link:hover {
    background-color: var(--primary-color); color: white;
    transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    text-decoration: none;
}

/* Buttons */
.btn { background-color: var(--primary-color); color: white; border: none; border-radius: 4px; }
.btn:hover { background-color: var(--primary-hover); transform: translateY(-1px); }
.btn-secondary { background-color: var(--neutral-color); }
.btn-secondary:hover { background-color: #5a6268; }
.btn-roll { background-color: var(--info-color); }
.btn-roll:hover { background-color: #0069d9; }

/* Section */
.section { background-color: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.section-title { border-bottom: 2px solid var(--primary-color); }
.info-box { background-color: #e1f5fe; border-left: 4px solid #29b6f6; border-radius: 4px; }
.element-group { border-bottom: 1px dashed var(--border-light); }
.group-description { color: var(--text-muted); }

/* Choice/Option Items */
.choice-item, .option-item, .roll-item { background-color: var(--secondary-color); border: 2px solid transparent; border-radius: 6px; }
.choice-item:hover, .option-item:hover { border-color: var(--accent-color); transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.choice-item.selected, .option-item.selected { background-color: var(--accent-color); color: white; border-color: var(--primary-color); }

/* Effects */
.destiny-indicator, .requirements-indicator, .effect-item { border-radius: 4px; }
.requirements-indicator, .effect-special { background-color: rgba(0, 123, 255, 0.2); color: var(--info-color); border: 1px solid var(--info-color); }
.effect-positive { background-color: rgba(40, 167, 69, 0.2); color: var(--success-color); border: 1px solid var(--success-color); }
.effect-negative { background-color: rgba(220, 53, 69, 0.2); color: var(--error-color); border: 1px solid var(--error-color); }
.effect-neutral { background-color: rgba(108, 117, 125, 0.2); color: var(--neutral-color); border: 1px solid var(--neutral-color); }

/* Roll */
.roll-container { background-color: #f5f5f5; border-radius: 8px; border: 1px solid var(--border-light); }
.dice-result { color: var(--primary-color); }
.roll-details { color: var(--text-muted); }
.roll-item { background-color: var(--roll-bg); border: 1px solid var(--roll-border); border-radius: 8px; }
.roll-item:hover { background-color: #ebe5ff; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.roll-button { background-color: var(--roll-purple); color: white; border: none; border-radius: 4px; }
.roll-button:hover:not(:disabled) { background-color: var(--roll-purple-hover); }
.roll-button:disabled, .reroll-button:disabled, .selection-button:disabled { background-color: #9ca3af; }
.dice-roll { background-color: #f3f4f6; border: 1px solid #d1d5db; border-radius: 4px; }
.selectable-roll:hover { background-color: #e5e7eb; transform: scale(1.05); }
.roll-effects { background-color: #e8f4f8; border-radius: 8px; border-left: 4px solid #17a2b8; }
.selected-roll { background-color: #c7d2fe; border-color: #818cf8; transform: scale(1.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.roll-container + hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(109, 40, 217, 0.5), rgba(0, 0, 0, 0)); margin: 30px 0; }
.roll-completed { font-weight: bold; color: var(--primary-color); border-radius: 4px; background-color: rgba(58, 90, 120, 0.1); }
.default-execute-message { font-style: italic; color: var(--info-color); font-size: 0.9em; }

/* Character Sheet */
.character-sheet { background-color: var(--card-bg); box-shadow: 0 -4px 10px rgba(0,0,0,0.1); }
.character-sheet-header { border-bottom: 1px solid var(--border-light); }
.character-sheet-toggle, .section-preview-button, .section-minimize-toggle { background-color: var(--primary-color); color: white; border: none; border-radius: 4px; }
.section-preview-button:hover, .section-minimize-toggle:hover { background-color: var(--primary-hover); transform: translateY(-1px); }
.stat-group { background-color: #f9f9f9; border-radius: 4px; }
.stat-title, .meta-resources-summary { border-bottom: 1px solid var(--border-light); }
.meta-resources-summary { background-color: #f2f2f2; }

/* Roll Results Table */
.roll-results-table { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 5px; }
.roll-results-table th { background-color: #3a3a3a; color: white; }
.roll-results-table td { color: black; border-bottom: 1px solid var(--border-light); }
.roll-results-table tr:nth-child(even) { background-color: #f9f9f9; }
.roll-results-table tr:hover { background-color: #f1f1f1; }

/* Disabled Choice */
.disabled-choice { background-color: #eaeaea !important; border-color: transparent; }
.disabled-choice.selected { opacity: 1.0; background-color: var(--dark-accent-color) !important; border-color: var(--primary-color); }
.disabled-choice:hover { border-color: var(--border-light) !important; }
.locked-indicator { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; color: #888; }

/* Reroll/Selection Buttons */
.reroll-button, .selection-button { background-color: var(--success-color); color: white; border: none; border-radius: 4px; }
.reroll-button:hover:not(:disabled), .selection-button:hover:not(:disabled) { background-color: #218838; }
.influence-cost-info { background-color: #f8d7da; color: #721c24; border-radius: 4px; }
.select-message { color: #495057; }
.selection-message { color: var(--success-color); }

/* Entity/Requirements */
.entity-requirements { background-color: #f2f7ff; border-left: 3px solid #4a6fa5; border-radius: 4px; }
.requirements-title { color: var(--primary-color); }
.execute-entity-title { color: #6b7280; }
.execute-subcontainer, .entity-entry { border-left: 2px solid #e5e7eb; }
.entity-description { color: #555; }
.entity-test-info { background-color: var(--bg-color); border-left: 3px solid var(--primary-color); border-radius: 4px; }
.entity-modifiers, .entry-description { color: var(--text-muted); }
.success-effects { color: var(--success-color); }
.fail-effects { color: var(--error-color); }

/* Roll Details */
.roll-details-container { background-color: #f5f5f5; border-radius: 5px; }
.roll-modifiers { background-color: var(--bg-color); border: 1px solid #dee2e6; border-radius: 4px; color: #495057; }

/* Test Result */
.test-result.success, .test-result.failure { border-radius: 5px; }
.test-result.success { background-color: rgba(76, 175, 80, 0.2); color: #2e7d32; border: 1px solid #2e7d32; }
.test-result.failure { background-color: rgba(244, 67, 54, 0.2); color: #c62828; border: 1px solid #c62828; }
.selectable-roll.success-roll { border-color: #2e7d32; background-color: rgba(76, 175, 80, 0.2); }
.selectable-roll.failure-roll { border-color: #c62828; background-color: rgba(244, 67, 54, 0.2); }

/* Preview */
.preview-button { background-color: #4a6fa5; color: white; border: none; border-radius: 4px; }
.preview-button:hover { background-color: var(--primary-color); }
.preview-container { background-color: white; border: 1px solid var(--border-light); color: black; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.preview-title { background-color: var(--primary-color); color: white; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.preview-close-button { color: white; }
.preview-entity-header { color: var(--primary-color); border-bottom: 1px solid #e5e7eb; }
.preview-separator { background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(58, 90, 120, 0.3), rgba(0, 0, 0, 0)); }
.preview-error { color: #e74c3c; background-color: #feeaea; border-radius: 4px; }
.preview-missing { color: #e67e22; background-color: #fff5e6; border-radius: 4px; }
.preview-container .roll-results-table tr:hover { background-color: #f0f0f0; }

/* Tooltip */
.tooltip .tooltip-text { background-color: var(--primary-color); color: #fff; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.tooltip .tooltip-text::after { border-color: var(--primary-color) transparent transparent transparent; }

/* Summary */
.summary-container { background-color: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); color: black; }
.summary-section h3, .summary-character-sheet h2, .summary-selections h2, .summary-journal h2, .credits-container h3, .changelog-container h3 { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); }
.summary-group h4, .summary-container li::before { color: var(--accent-color); }

/* Export Popup */
.export-popup-overlay { background-color: rgba(0, 0, 0, 0.7); animation: fadeIn 0.1s ease; }
.export-popup-content { background-color: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); animation: slideIn 0.1s ease; }
.export-popup-header { background-color: var(--primary-color); color: white; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.export-popup-header h2, .export-popup-close { color: white; }

/* Summary Character Sheet */
.summary-character-sheet { border-bottom: 2px solid var(--primary-color); }
.summary-journal { border-top: 2px solid var(--primary-color); }
.summary-stat-group, .journal-entries { background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.summary-stat-group h3 { color: var(--primary-color); border-bottom: 1px solid #e0e0e0; }
.summary-stats-table tr:not(:last-child) { border-bottom: 1px solid var(--border-lighter); }
.summary-stat-name { color: #444; }
.summary-stat-value { color: var(--primary-color); }
.summary-stat-empty { color: #999; }
.summary-stat-description { color: var(--text-muted); border-bottom: 1px dashed var(--border-light); }
.journal-entries p { border-bottom: 1px solid #e0e0e0; }
.journal-entries strong { color: var(--primary-color); }

/* Images */
.section-image img { border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.entry-image img, .roll-image img { border-radius: 6px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); }

/* Footer */
.footer-toggle { background-color: var(--primary-color); color: white; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.footer-toggle:hover { background-color: var(--primary-hover); }
.footer-section { background-color: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.credits-container p, .changelog-entry .description { color: var(--text-muted); }
.changelog-entry { border-bottom: 1px solid var(--border-lighter); }
.changelog-entry .version { color: var(--primary-color); }

/* Title */
.title-container { background-color: rgba(255, 255, 255, 0.9); border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border-bottom: 3px solid var(--accent-color); }
.title-container h1 { color: var(--primary-color); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }

/* Control Buttons */
.control-buttons { background-color: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.control-btn { border-radius: 4px; }
.reset-btn { background-color: var(--error-color); color: white; }
.reset-btn:hover { background-color: #c82333; transform: translateY(-1px); }
.save-build-btn, .music-btn { background-color: var(--success-color); color: white; }
.save-build-btn:hover, .music-btn:hover { background-color: #218838; transform: translateY(-1px); }
.load-build-btn { background-color: var(--info-color); color: white; }
.load-build-btn:hover { background-color: #0069d9; }

/* Navigation Menu */
.navigation-menu { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95)); border: 2px solid var(--primary-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); backdrop-filter: blur(5px); }
.nav-header { background: linear-gradient(135deg, var(--primary-color), #4a6a88); color: #fff; border-bottom: 1px solid var(--primary-color); border-radius: 6px 6px 0 0; }
.nav-header:hover { background: linear-gradient(135deg, #4a6a88, var(--primary-color)); }
.nav-section-title { color: var(--primary-color); border-left: 3px solid transparent; }
.nav-section-title:hover { background: rgba(58, 90, 120, 0.1); border-left-color: var(--accent-color); color: var(--text-color); }
.nav-subsection-header { padding: 6px 12px; color: var(--primary-color); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.nav-subsection-header:hover { opacity: 1; }
.nav-subsection-toggle { font-family: monospace; font-size: 0.7rem; }
.nav-divider { height: 1px; background: linear-gradient(to right, transparent, var(--primary-color), transparent); margin: 4px 8px; opacity: 0.3; }

/* Navigation Scrollbar */
.navigation-menu::-webkit-scrollbar, .nav-content::-webkit-scrollbar { width: 6px; }
.navigation-menu::-webkit-scrollbar-track, .nav-content::-webkit-scrollbar-track { background: rgba(248, 249, 250, 0.5); }
.navigation-menu::-webkit-scrollbar-thumb, .nav-content::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 3px; }
.navigation-menu::-webkit-scrollbar-thumb:hover, .nav-content::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }