/* Stardrift Manifest CYOA - Dark Sci-Fi Aesthetic */

/* ===== Color Palette =====
   Background: #0d1117 (dark navy/steel)
   Surface: #161b22 (slightly lighter)
   Border: #30363d (subtle)
   Text Primary: #e6edf3
   Text Secondary: #8b949e
   Text Muted: #484f58
   Accent Blue: #58a6ff
   Accent Cyan: #39d5e6
   Accent Teal: #3fb950
   Danger: #f85149
   Warning: #d29922
   ============================= */

:root {
    --sf-bg: #0d1117;
    --sf-surface: #161b22;
    --sf-surface-light: #1c2128;
    --sf-border: #30363d;
    --sf-border-light: #3d444d;
    --sf-text: #e6edf3;
    --sf-text-secondary: #8b949e;
    --sf-text-muted: #484f58;
    --sf-accent: #58a6ff;
    --sf-accent-bright: #79c0ff;
    --sf-cyan: #39d5e6;
    --sf-teal: #3fb950;
    --sf-danger: #f85149;
    --sf-warning: #d29922;
    --sf-psionic: #a855f7;
}

body {
    background-color: var(--sf-bg);
    color: var(--sf-text);
    font-family: 'Exo 2', 'Segoe UI', sans-serif;
    background-image:
        /* Bright stars */
        radial-gradient(3px 3px at 47px 36px, rgba(255,255,255,0.8), transparent 50%),
        radial-gradient(3.5px 3.5px at 313px 113px, rgba(200,230,255,0.7), transparent 50%),
        radial-gradient(3px 3px at 431px 319px, rgba(255,250,240,0.75), transparent 50%),
        /* Medium stars */
        radial-gradient(2.5px 2.5px at 207px 159px, rgba(255,255,255,0.6), transparent 50%),
        radial-gradient(2.5px 2.5px at 123px 91px, rgba(200,220,255,0.55), transparent 50%),
        radial-gradient(2.5px 2.5px at 389px 241px, rgba(255,255,255,0.6), transparent 50%),
        radial-gradient(2px 2px at 261px 47px, rgba(255,240,220,0.55), transparent 50%),
        radial-gradient(2px 2px at 89px 347px, rgba(210,220,255,0.5), transparent 50%),
        /* Dim stars */
        radial-gradient(2px 2px at 69px 217px, rgba(180,200,255,0.4), transparent 50%),
        radial-gradient(2px 2px at 183px 293px, rgba(255,255,255,0.35), transparent 50%),
        radial-gradient(1.5px 1.5px at 17px 173px, rgba(220,220,255,0.35), transparent 50%),
        radial-gradient(1.5px 1.5px at 149px 67px, rgba(200,210,255,0.3), transparent 50%);
    background-size:
        509px 521px, 461px 479px, 523px 541px,
        347px 359px, 293px 307px, 373px 389px, 401px 413px, 409px 421px,
        251px 263px, 443px 457px, 317px 331px, 353px 367px;
    background-attachment: fixed;
}

/* Main container */
.cyoa-container {
    max-width: 1200px;
    background-color: transparent;
}

/* Section styling */
.section-container {
    background-color: rgba(22, 27, 34, 0.92);
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    margin-bottom: 24px;
}

.section-title {
    color: var(--sf-accent);
    border-bottom: 1px solid var(--sf-border);
}

.section-description {
    color: var(--sf-text-secondary);
}

/* Entry styling */
.entry-container {
    background-color: var(--sf-surface-light);
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.entry-container:hover {
    border-color: var(--sf-border-light);
}

.entry-container.selected {
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 1px var(--sf-accent);
}

.entry-title {
    color: var(--sf-text);
}

.entry-description {
    color: var(--sf-text-secondary);
}

/* Character sheet */
.character-sheet {
    background-color: var(--sf-surface);
    border: 1px solid var(--sf-border);
    color: var(--sf-text);
}

/* Resource display */
.meta-resource-value {
    color: var(--sf-accent);
}

.meta-resource-value.negative {
    color: var(--sf-danger);
}

/* Buttons */
.btn-primary {
    background-color: var(--sf-accent);
    color: var(--sf-bg);
    border: none;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--sf-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--sf-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sf-border-light);
}

/* Text utility classes */
.t-accent { color: var(--sf-accent); }
.t-cyan { color: var(--sf-cyan); }
.t-teal { color: var(--sf-teal); }
.t-danger { color: var(--sf-danger); }
.t-warning { color: var(--sf-warning); }
.t-muted { color: var(--sf-text-muted); }
.t-secondary { color: var(--sf-text-secondary); }
.t-number { color: var(--sf-cyan); font-weight: 500; }
.t-positive { color: var(--sf-teal); }
.t-negative { color: var(--sf-danger); }

/* Stardrift-specific text classes */
.t-stat { color: var(--sf-cyan); font-weight: 500; }
.t-skill { color: var(--sf-accent-bright); }
.t-psionic { color: var(--sf-psionic); }

/* ===== Info Tables ===== */
.info-table {
    margin-top: 0.75rem;
    margin-left: auto;
    margin-right: auto;
    background: rgba(88, 166, 255, 0.06);
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    overflow: hidden;
}
.info-table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--sf-border);
}
.info-table-row:last-child { border-bottom: none; }
.info-table-label {
    color: var(--sf-text-secondary);
    font-size: 0.85em;
}
.info-table-value {
    font-weight: 600;
    color: var(--sf-cyan);
    text-align: right;
}

/* Two-column table layout */
.two-column-tables {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
}
.two-column-tables .table-column {
    flex: 1;
    min-width: 280px;
}
.two-column-tables .info-table {
    margin-top: 0.5rem;
}
@media (max-width: 700px) {
    .two-column-tables {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Stat warning */
.stat-warning { color: var(--sf-warning); font-style: italic; }

/* Ship stat display in descriptions */
.ship-stat-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    margin: 8px 0;
}

.ship-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 8px;
    border-radius: 3px;
    background-color: rgba(88, 166, 255, 0.05);
}

.ship-stat-label {
    color: var(--sf-text-secondary);
    font-size: 0.85em;
}

.ship-stat-value {
    color: var(--sf-cyan);
    font-weight: 600;
}

/* Crew skill display - rendered by crew-display handler via pip bars */

/* Slot/capacity indicators */
.capacity-indicator {
    display: flex;
    gap: 3px;
    margin: 4px 0;
}

.capacity-slot {
    width: 12px;
    height: 12px;
    border: 1px solid var(--sf-border);
    border-radius: 2px;
    background-color: transparent;
}

.capacity-slot.filled {
    background-color: var(--sf-accent);
    border-color: var(--sf-accent);
}

/* Negative value highlight in character sheet */
.negative-value {
    color: var(--sf-danger) !important;
}

/* Input styling for dark theme */
input, select, textarea {
    background-color: var(--sf-surface-light);
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
    border-radius: 4px;
}

/* ===== Power Tree Grid Groups ===== */

/* Power tree container */
.power-tree .grid-group-container {
    background: linear-gradient(135deg, var(--sf-surface) 0%, rgba(13, 17, 23, 0.9) 100%);
    border: 1px solid var(--sf-border);
}

.power-tree .grid-item {
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

/* Base power - gold/amber accent, foundation of each tree */
.base-power {
    border-left: 3px solid var(--sf-warning) !important;
}

.base-power .entry-title-container h3::before {
    content: "◆ ";
    color: var(--sf-warning);
    font-size: 0.8em;
}

/* Branch power - blue accent (overridden per theme) */
.branch-power {
    border-left: 3px solid var(--sf-accent) !important;
}

.branch-power .entry-title-container h3::before {
    content: "◇ ";
    color: var(--sf-accent);
    font-size: 0.8em;
}

/* Upgrade power - green/teal accent */
.upgrade-power {
    border-left: 3px solid var(--sf-teal) !important;
}

.upgrade-power .entry-title-container h3::before {
    content: "▸ ";
    color: var(--sf-teal);
    font-size: 0.8em;
}

/* Subsuming upgrade - cyan accent with background highlight */
.subsuming-upgrade {
    border: 1px solid var(--sf-cyan) !important;
    border-left: 3px solid var(--sf-cyan) !important;
    background: rgba(57, 213, 230, 0.05) !important;
}

.subsuming-upgrade .entry-title-container h3 {
    color: var(--sf-cyan) !important;
}

.path-exclusive .entry-title-container h3::before {
    content: "★ ";
    color: var(--sf-cyan);
    font-size: 0.85em;
}

.subsuming-upgrade.selected {
    background: rgba(57, 213, 230, 0.15) !important;
}

/* Psionic power theme - purple connectors and selected states */
.psionic-power .grid-connector.active {
    stroke: var(--sf-psionic);
}

.psionic-power .grid-item {
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.psionic-power .grid-item.selected {
    border-color: var(--sf-psionic);
    background: rgba(168, 85, 247, 0.1);
}

.psionic-power .branch-power {
    border-left-color: var(--sf-psionic) !important;
}

.psionic-power .branch-power .entry-title-container h3::before {
    color: var(--sf-psionic);
}

/* Cyber power theme - cyan connectors and selected states */
.cyber-power .grid-connector.active {
    stroke: var(--sf-cyan);
}

.cyber-power .grid-item {
    border: 1px solid rgba(57, 213, 230, 0.2);
}

.cyber-power .grid-item.selected {
    border-color: var(--sf-cyan);
    background: rgba(57, 213, 230, 0.1);
}

/* ===== Title ===== */
.title-container h1 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 2.5rem;
    color: var(--sf-text);
    text-shadow: 0 0 30px rgba(88, 166, 255, 0.2);
}

/* ===== Introduction Section: Title + Text Over Image ===== */
#section-stardrift-manifest {
    position: relative;
    overflow: hidden;
}

#section-stardrift-manifest .section-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    justify-content: flex-end;
    padding: 2.5rem 3rem 1rem 1.5rem;
    background: linear-gradient(to bottom, rgba(13, 17, 23, 0.85) 0%, rgba(13, 17, 23, 0.4) 70%, transparent 100%);
}

#section-stardrift-manifest .section-header-buttons {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

#section-stardrift-manifest .section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 0.12em;
    border-bottom: none;
    text-shadow: 0 0 40px rgba(88, 166, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.8);
}

#section-stardrift-manifest .section-image {
    margin: 0;
    position: relative;
    z-index: 0;
}

#section-stardrift-manifest .section-image img {
    max-height: none;
    width: 100%;
    display: block;
    min-height: 300px;
    max-height: 550px;
    object-fit: cover;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#section-stardrift-manifest .info-box {
    position: relative;
    z-index: 1;
    background: rgba(13, 17, 23, 0.88);
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    margin: -4rem 2rem 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Preview styling */
.preview-container {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: 4px;
}

.preview-title {
    background: var(--sf-surface-light);
    color: var(--sf-accent);
    border-bottom: 1px solid var(--sf-border);
}

.preview-close-button {
    color: var(--sf-text-secondary);
}

.preview-entity-header {
    color: var(--sf-accent);
}

.preview-separator {
    background: var(--sf-border);
}

/* Section titles */
.section-title {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 1.25rem;
}

/* ===== Navigation Menu ===== */
.navigation-menu {
    background: rgba(22, 27, 34, 0.97) !important;
    border: 1px solid var(--sf-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.nav-header {
    background: rgba(28, 33, 40, 0.95) !important;
    color: var(--sf-text) !important;
    border-bottom: 1px solid var(--sf-border) !important;
}

.nav-title {
    color: var(--sf-accent) !important;
}

.nav-content {
    background: transparent !important;
}

.nav-section-title {
    color: var(--sf-text-secondary) !important;
    border-radius: 3px;
}

.nav-section-title:hover {
    color: var(--sf-accent) !important;
    background: rgba(88, 166, 255, 0.08) !important;
}

.nav-section-title.nav-danger {
    color: var(--sf-danger) !important;
}

.nav-section-title.nav-danger:hover {
    color: #ff6b6b !important;
}

/* ===== Selected State Enhancement ===== */
.choice-item.selected,
.option-item.selected {
    background-color: rgba(88, 166, 255, 0.06);
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 1px var(--sf-accent), 0 0 12px rgba(88, 166, 255, 0.08);
}

.choice-item:hover,
.option-item:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ===== Destiny Indicators ===== */
.destiny-indicator {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    color: var(--sf-text-secondary);
}

.destiny-indicator.cost {
    color: var(--sf-danger);
    background: rgba(248, 81, 73, 0.1);
}

.destiny-indicator.gain {
    color: var(--sf-teal);
    background: rgba(63, 185, 80, 0.1);
}

/* ===== Requirements Indicators ===== */
.requirements-indicator {
    color: var(--sf-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}

/* ===== Tooltip ===== */
.tooltip .tooltip-text {
    background-color: var(--sf-surface);
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.tooltip .tooltip-text::after {
    border-color: var(--sf-surface) transparent transparent transparent;
}

/* ===== Effect Colors (Dark Theme) ===== */
.effect-description, .description-effect {
    color: var(--sf-text-muted) !important;
}

.effect-characteristic { color: var(--sf-accent) !important; }
.effect-skill { color: var(--sf-cyan) !important; }
.effect-resource, .requirement-age { color: var(--sf-warning) !important; }
.effect-descriptor, .requirement-descriptor { color: #e87d8a !important; }
.requirement-descriptor-not { color: #e87d8a !important; }
.effect-execute { color: var(--sf-psionic) !important; }
.meta-resource-effect { color: var(--sf-warning) !important; }
.effect-descriptor-remove { color: var(--sf-danger) !important; }

/* ===== Buttons & Controls ===== */
button, .btn {
    background: var(--sf-surface-light);
    border: 1px solid var(--sf-border);
    color: var(--sf-text);
}

button:hover, .btn:hover {
    background: var(--sf-border);
    border-color: var(--sf-border-light);
}

.control-btn {
    background: var(--sf-surface-light);
    border: 1px solid var(--sf-border);
    color: var(--sf-text);
}

.control-btn:hover {
    background: rgba(88, 166, 255, 0.1);
    border-color: var(--sf-accent);
    color: var(--sf-accent);
}

.section-preview-button, .section-minimize-toggle {
    background: var(--sf-surface-light);
    border: 1px solid var(--sf-border);
    color: var(--sf-text-secondary);
}

.section-preview-button:hover, .section-minimize-toggle:hover {
    color: var(--sf-text);
    border-color: var(--sf-border-light);
}

/* ===== Roll Styling ===== */
.roll-details-container {
    background: rgba(255, 255, 255, 0.03) !important;
    border-left-color: var(--sf-border) !important;
}

.roll-details-container .roll-details {
    color: var(--sf-text-secondary) !important;
}

.roll-modifiers {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--sf-border);
    color: var(--sf-text-secondary);
}

.test-result-container .test-result.success {
    color: var(--sf-teal) !important;
    background: rgba(63, 185, 80, 0.1) !important;
}

.test-result-container .test-result.failure {
    color: var(--sf-danger) !important;
    background: rgba(248, 81, 73, 0.1) !important;
}

.roll-button {
    background: var(--sf-accent);
    color: var(--sf-bg);
    border: none;
    font-weight: 600;
}

.roll-button:hover {
    background: var(--sf-accent-bright);
}

.roll-button:disabled {
    background: var(--sf-border);
    color: var(--sf-text-muted);
}

.dice-roll {
    background: var(--sf-surface-light);
    border: 1px solid var(--sf-border);
    color: var(--sf-cyan);
    border-radius: 4px;
}

.roll-effects {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--sf-border);
    border-radius: 4px;
}

.reroll-button, .selection-button {
    background: var(--sf-surface-light);
    border: 1px solid var(--sf-border);
    color: var(--sf-text);
}

.reroll-button:hover, .selection-button:hover {
    background: var(--sf-border);
}

.influence-cost-info {
    background: rgba(88, 166, 255, 0.08);
    border-radius: 4px;
    color: var(--sf-text-secondary);
}

/* Roll results table */
.roll-results-table th {
    background: var(--sf-surface-light);
    color: var(--sf-text-secondary);
    border-bottom: 1px solid var(--sf-border);
}

.roll-results-table td {
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}

.roll-results-table {
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    overflow: hidden;
}

/* ===== Character Sheet ===== */
.character-sheet {
    background-color: var(--sf-surface) !important;
    border: 1px solid var(--sf-border) !important;
    border-top: 2px solid var(--sf-accent) !important;
}

.character-sheet.minimized {
    background: var(--sf-surface) !important;
    border-top: 2px solid var(--sf-accent) !important;
}

.character-sheet-header h3 {
    color: var(--sf-accent);
}

.character-sheet-toggle {
    background: var(--sf-surface-light) !important;
    border: 1px solid var(--sf-border) !important;
    color: var(--sf-text) !important;
}

.character-sheet-toggle:hover {
    background: var(--sf-border) !important;
}

.stat-group {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.stat-title {
    color: var(--sf-accent);
    border-bottom: 1px solid var(--sf-border);
    padding-bottom: 6px;
}

.stat-name, .meta-resource-label {
    color: var(--sf-text-secondary);
}

/* ===== Export/Save Modals ===== */
.export-popup-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

.export-popup-content {
    background: var(--sf-surface) !important;
    border: 1px solid var(--sf-border) !important;
    color: var(--sf-text) !important;
}

.export-popup-header {
    background: var(--sf-surface-light) !important;
    border-bottom: 1px solid var(--sf-border) !important;
}

.export-popup-header h2 {
    color: var(--sf-text) !important;
}

.export-popup-close {
    color: var(--sf-text-secondary) !important;
    background: transparent !important;
    border: none !important;
}

.export-popup-close:hover {
    color: var(--sf-text) !important;
}

.export-popup-body {
    background: var(--sf-surface) !important;
    color: var(--sf-text) !important;
}

.export-popup-copy {
    background: var(--sf-accent) !important;
    color: var(--sf-bg) !important;
    border: none !important;
}

.export-popup-copy:hover {
    background: var(--sf-accent-bright) !important;
}

/* Save/Load */
.save-load-modal-body {
    background: var(--sf-surface);
    color: var(--sf-text);
}

.save-slots-info {
    background: rgba(88, 166, 255, 0.1) !important;
    border-left-color: var(--sf-accent) !important;
    color: var(--sf-text-secondary) !important;
}

.save-slot {
    background: var(--sf-surface-light) !important;
    border: 1px solid var(--sf-border);
}

.save-slot-name {
    color: var(--sf-text) !important;
}

.save-slot-date {
    color: var(--sf-text-muted) !important;
}

.save-slot-name-input {
    background: var(--sf-bg) !important;
    color: var(--sf-text) !important;
    border-color: var(--sf-accent) !important;
}

.import-export-section {
    border-top-color: var(--sf-border) !important;
}

.import-export-header {
    color: var(--sf-text) !important;
}

.import-textarea {
    background: var(--sf-bg) !important;
    color: var(--sf-text) !important;
    border-color: var(--sf-border) !important;
}

.import-warning {
    background: rgba(210, 153, 34, 0.15) !important;
    border-left-color: var(--sf-warning) !important;
    color: var(--sf-text-secondary) !important;
}

/* Mobile Suggestion Modal */
.mobile-suggestion-content h3 {
    color: var(--sf-text) !important;
}

.mobile-suggestion-content p {
    color: var(--sf-text-secondary) !important;
}

.mobile-suggestion-note {
    color: var(--sf-text-muted) !important;
}

.mobile-suggestion-btn {
    background: var(--sf-accent) !important;
    color: var(--sf-bg) !important;
}

/* ===== Footer ===== */
.footer-section {
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-border);
    color: var(--sf-text-muted);
}

.footer-toggle {
    background: var(--sf-surface-light);
    border: 1px solid var(--sf-border);
    color: var(--sf-text-secondary);
}

.footer-toggle:hover {
    color: var(--sf-text);
}

.changelog-entry {
    border-left: 2px solid var(--sf-accent);
    padding-left: 1rem;
}

.changelog-entry .version {
    color: var(--sf-accent);
}

/* ===== Summary ===== */
.summary-container {
    color: var(--sf-text);
}

.summary-character-sheet h2,
.summary-selections h2,
.summary-journal h2 {
    color: var(--sf-accent) !important;
    border-bottom: 1px solid var(--sf-border);
}

.summary-stat-group {
    background: var(--sf-surface-light) !important;
    border: 1px solid var(--sf-border);
}

.summary-stat-group h3 {
    color: var(--sf-cyan) !important;
    border-bottom: 1px solid var(--sf-border) !important;
}

.summary-stats-table td {
    border-bottom: 1px solid var(--sf-border);
}

.summary-stat-name {
    color: var(--sf-text-secondary) !important;
}

.summary-stat-value {
    color: var(--sf-text) !important;
}

.summary-stat-description {
    color: var(--sf-text-muted) !important;
}

.summary-stat-empty {
    color: var(--sf-text-muted) !important;
}

.summary-section h3 {
    color: var(--sf-warning) !important;
    border-bottom: 1px solid var(--sf-border) !important;
}

.summary-group h4 {
    color: var(--sf-text) !important;
}

.summary-container ul {
    color: var(--sf-text-secondary);
}

.summary-container li::before {
    color: var(--sf-accent);
}

/* ===== Journal ===== */
.journal-entry {
    background: rgba(255, 255, 255, 0.02) !important;
    border-left-color: var(--sf-border) !important;
}

.journal-entry-header {
    color: var(--sf-text) !important;
}

.journal-entry-roll {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--sf-cyan) !important;
}

.journal-entry-description {
    color: var(--sf-text-secondary) !important;
}

.journal-entry-effect.stat-change { background: rgba(88, 166, 255, 0.12); color: var(--sf-accent); }
.journal-entry-effect.skill-change { background: rgba(57, 213, 230, 0.12); color: var(--sf-cyan); }
.journal-entry-effect.descriptor-gain { background: rgba(232, 125, 138, 0.12); color: #e87d8a; }
.journal-entry-effect.resource-gain { background: rgba(210, 153, 34, 0.12); color: var(--sf-warning); }
.journal-entry-effect.descriptor-remove { background: rgba(248, 81, 73, 0.12); color: var(--sf-danger); }

.journal-entries li {
    color: var(--sf-text-secondary) !important;
}

/* ===== Cost Modifiers ===== */
.cost-modifier.potential {
    color: var(--sf-text-muted) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.cost-modifier.applied {
    color: var(--sf-teal) !important;
    background: rgba(63, 185, 80, 0.1) !important;
}

/* ===== Links ===== */
a, .back-link {
    color: var(--sf-accent);
}

a:hover, .back-link:hover {
    color: var(--sf-accent-bright);
}

/* ===== Banners ===== */
.group-requirements-banner {
    background: rgba(88, 166, 255, 0.06);
    border-left-color: var(--sf-accent);
}

.section-requirements-banner {
    background: rgba(88, 166, 255, 0.06);
    border-left-color: var(--sf-accent);
}

/* ===== Text Selection ===== */
::selection {
    background: rgba(88, 166, 255, 0.3);
    color: var(--sf-text);
}

/* ===== Locked/Disabled ===== */
.locked-indicator {
    background: rgba(255, 255, 255, 0.05);
    color: var(--sf-text-muted);
    border-radius: 3px;
}

/* ===== Repeatable Controls ===== */
.repeatable-controls {
    background: rgba(255, 255, 255, 0.04);
}

.repeatable-btn {
    background: var(--sf-surface-light);
    color: var(--sf-text);
    border: 1px solid var(--sf-border);
}

.repeatable-btn:not(:disabled):hover {
    background: var(--sf-border);
}

.repeatable-count {
    color: var(--sf-cyan);
}

/* ===== Stat Display: Pip Bars + Capacity Blocks ===== */
/* Generic display used by ship-display-handler.js for ships, weapons, crew, etc. */

/* 2-column grid for ship selection */
#section-ship-selection .choices-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    align-items: start !important;
}

#section-ship-selection .choice-item {
    overflow: hidden;
    flex: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Floating image inside ship entries */
#section-ship-selection .entry-image {
    float: left;
    width: 240px;
    margin: 0 16px 8px 0;
}

#section-ship-selection .entry-image img {
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: cover;
    border-radius: 4px;
}

#section-ship-selection .custom-handler-container {
    clear: both;
}

/* Stats display container (generic) */
.stats-display {
    display: flex;
    gap: 20px;
    padding: 10px 12px;
    margin-top: 8px;
    background: rgba(88, 166, 255, 0.04);
    border: 1px solid var(--sf-border);
    border-radius: 4px;
}

.stats-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Individual stat pip row */
.stat-pip-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-pip-label {
    font-size: 0.7em;
    color: var(--sf-text-muted);
    min-width: 62px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.stat-pip-track {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.stat-pip-track .pip {
    width: 4px;
    height: 12px;
    background: var(--sf-cyan);
    border-radius: 1px;
    opacity: 0.65;
}

.stat-pip-track .pip-gap {
    width: 5px;
}

.stat-pip-num {
    font-size: 0.8em;
    color: var(--sf-cyan);
    font-weight: 600;
    min-width: 20px;
    text-align: right;
}

/* Capacity indicators (generic) */
.stats-capacity {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.capacity-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.capacity-row-label {
    font-size: 0.7em;
    color: var(--sf-text-muted);
    min-width: 100px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.capacity-blocks {
    display: flex;
    gap: 3px;
    align-items: center;
}

.capacity-block {
    width: 9px;
    height: 9px;
    background: var(--sf-accent);
    border-radius: 2px;
    opacity: 0.7;
}

.capacity-num {
    font-size: 0.8em;
    color: var(--sf-accent);
    font-weight: 600;
    min-width: 16px;
    text-align: right;
}

/* Responsive: single column + no float on mobile */
@media (max-width: 900px) {
    #section-ship-selection .choices-container {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    #section-ship-selection .entry-image {
        float: none;
        width: 100%;
        margin: 0 0 12px 0;
    }

    #section-ship-selection .entry-image img {
        max-height: 180px;
        width: 100%;
    }

    .stats-display {
        flex-direction: column;
        gap: 10px;
    }

    .stats-capacity {
        min-width: 0;
    }
}

/* ===== Weapon Stat Bars ===== */
.weapon-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 16px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--sf-border);
}

.weapon-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weapon-stat-label {
    font-size: 0.72em;
    color: var(--sf-text-muted);
    min-width: 58px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.weapon-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.weapon-bar-fill {
    height: 100%;
    background: var(--sf-cyan);
    border-radius: 2px;
    display: block;
    opacity: 0.7;
}

/* ===== Crew Section: 2-Column Layout ===== */
#section-crew .choices-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    align-items: start !important;
}

#section-crew .option-item {
    overflow: hidden;
    flex: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Floating crew images */
#section-crew .entry-image {
    float: right;
    width: 168px;
    margin: 0 0 8px 14px;
}

#section-crew .entry-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

#section-crew .custom-handler-container {
    clear: both;
}

/* Crew character quotes */
.crew-quote {
    font-style: italic;
    color: var(--sf-text-muted);
    border-left: 2px solid var(--sf-border);
    padding-left: 10px;
    margin: 8px 0 4px;
    font-size: 0.9em;
}

@media (max-width: 900px) {
    #section-crew .choices-container {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    #section-crew .entry-image {
        float: none;
        width: 100%;
        margin: 0 0 12px 0;
    }

    #section-crew .entry-image img {
        max-height: 200px;
        width: 100%;
        object-fit: cover;
    }
}