/**
 * WESTWARD DYNASTY - Stylesheet
 * Pioneer-themed UI with sepia tones and period-appropriate aesthetics
 */

/* ===== CSS Variables ===== */
:root {
    /* Colors - Sepia/Pioneer Theme */
    --color-bg-dark: #2a1f14;
    --color-bg-medium: #3d2e1f;
    --color-bg-light: #5a4633;
    --color-bg-lighter: #6d563f;

    --color-parchment: #f4e4bc;
    --color-parchment-dark: #d4c4a0;

    --color-text-primary: #f4e4bc;
    --color-text-secondary: #c4b490;
    --color-text-muted: #8a7a60;

    --color-accent: #c9a227;
    --color-accent-light: #e6c040;
    --color-accent-dark: #9a7a1a;

    --color-positive: #4a7c3f;
    --color-negative: #8c3030;
    --color-warning: #b58a30;
    --color-info: #3a6a8c;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Borders */
    --border-radius: 4px;
    --border-color: #5a4633;

    /* Fonts */
    --font-primary: 'Georgia', 'Times New Roman', serif;
    --font-secondary: 'Arial', sans-serif;
    --font-display: 'Georgia', serif;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ===== Reset & Base ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-bg-dark);
    background-image:
        radial-gradient(ellipse at top, var(--color-bg-medium) 0%, transparent 70%),
        radial-gradient(ellipse at bottom, var(--color-bg-light) 0%, transparent 70%);
}

/* ===== Layout ===== */
.game-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr auto auto;
    height: 100vh;
    width: 100%;
}

/* Header */
.game-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg-medium);
    border-bottom: 2px solid var(--color-accent-dark);
}

.game-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--color-accent);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
}

.header-controls {
    display: flex;
    gap: var(--spacing-sm);
}

.date-display {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-right: var(--spacing-lg);
}

/* Sidebar */
#sidebar {
    background: var(--color-bg-medium);
    padding: var(--spacing-sm);
    border-right: 2px solid var(--color-border);
    overflow-y: auto;
}

/* CK2-Style Character Panel */
.ck2-character-panel {
    background: linear-gradient(to bottom, var(--color-bg-light) 0%, var(--color-bg-medium) 100%);
    border: 2px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: border-color 0.2s;
}

.ck2-character-panel:hover {
    border-color: var(--color-accent);
}

/* Portrait Frame - CK2 Style */
.ck2-portrait-frame {
    position: relative;
    width: 140px;
    height: 175px;
    margin: 0 auto var(--spacing-sm);
}

.ck2-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--color-bg-dark);
}

.ck2-portrait-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid;
    border-image: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-accent-dark) 50%, #3d2e1f 100%) 1;
    pointer-events: none;
}

.ck2-settings-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 5px;
    min-width: auto;
    font-size: 12px;
    opacity: 0.6;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--color-accent-dark);
}

.ck2-settings-btn:hover {
    opacity: 1;
}

/* Name Block */
.ck2-name-block {
    text-align: center;
    margin-bottom: var(--spacing-xs);
}

.ck2-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-accent-light);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 2px;
}

.ck2-title {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* Dynasty Row */
.ck2-dynasty-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    margin-bottom: var(--spacing-xs);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
}

.ck2-dynasty-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.ck2-dynasty-divider {
    color: var(--color-border);
}

/* Traits Row */
.ck2-traits-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    min-height: 28px;
}

.ck2-trait {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: 14px;
    cursor: help;
}

.ck2-trait.positive {
    border-color: var(--color-positive);
    background: rgba(74, 124, 63, 0.3);
}

.ck2-trait.negative {
    border-color: var(--color-negative);
    background: rgba(140, 48, 48, 0.3);
}

/* Status Bars - CK2 Style */
.ck2-status-bars {
    margin: var(--spacing-xs) 0;
}

.ck2-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ck2-bar-icon {
    width: 18px;
    text-align: center;
    font-size: 12px;
}

.ck2-bar-track {
    flex: 1;
    height: 10px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.ck2-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.ck2-bar-fill.health {
    background: linear-gradient(to bottom, #6a3, #483);
}

.ck2-bar-fill.hunger {
    background: linear-gradient(to bottom, #a86, #754);
}

.ck2-bar-fill.energy {
    background: linear-gradient(to bottom, #68a, #457);
}

.ck2-bar-value {
    width: 40px;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-align: right;
}

/* Conditions */
.ck2-conditions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 4px 0;
    min-height: 20px;
    font-size: 0.75rem;
}

.ck2-condition-healthy {
    color: var(--color-positive);
    font-style: italic;
}

.ck2-condition-tag {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
}

.ck2-condition-tag.mild {
    background: var(--color-warning);
    color: var(--color-bg-dark);
}

.ck2-condition-tag.severe {
    background: var(--color-negative);
    color: var(--color-parchment);
}

/* Skills Preview */
.ck2-skills-preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--color-border);
    font-size: 0.7rem;
}

.ck2-skill-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 6px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 3px;
}

.ck2-skill-name {
    color: var(--color-text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.ck2-skill-value {
    color: var(--color-accent);
    font-weight: bold;
    font-size: 0.8rem;
}

.ck2-no-skills {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.75rem;
}

/* Money Display */
.ck2-money-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    margin-top: var(--spacing-sm);
    background: linear-gradient(to bottom, #4a3f2a, #3a2f1a);
    border: 2px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
}

.ck2-money-icon {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-accent);
}

.ck2-money-value {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-accent-light);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Inventory Panel */
.ck2-inventory-panel {
    margin-top: var(--spacing-sm);
    background: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.ck2-inventory-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: linear-gradient(to bottom, var(--color-bg-lighter), var(--color-bg-light));
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.ck2-inventory-header:hover {
    background: linear-gradient(to bottom, var(--color-bg-light), var(--color-bg-medium));
}

.ck2-inventory-title {
    flex: 1;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--color-accent);
}

.ck2-inventory-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-right: 8px;
}

.ck2-inventory-toggle {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    transition: transform 0.2s;
}

.ck2-inventory-toggle.expanded {
    transform: rotate(180deg);
}

.ck2-inventory-content {
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.ck2-inventory-content.collapsed {
    max-height: 0;
    padding: 0;
    overflow: hidden;
}

.ck2-inventory-categories {
    padding: 8px;
}

.ck2-inv-category {
    margin-bottom: 8px;
}

.ck2-inv-category:last-child {
    margin-bottom: 0;
}

.ck2-inv-cat-header {
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
}

.ck2-inv-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ck2-inv-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: help;
}

.ck2-inv-item:hover {
    border-color: var(--color-accent-dark);
    background: var(--color-bg-medium);
}

.ck2-inv-item-icon {
    font-size: 0.9rem;
}

.ck2-inv-item-name {
    color: var(--color-text-primary);
}

.ck2-inv-item-qty {
    color: var(--color-accent);
    font-weight: bold;
}

.ck2-inv-empty {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 2px 0;
}

/* Generic Expandable Panel */
.ck2-expandable-panel {
    margin-top: var(--spacing-sm);
    background: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.ck2-expand-header {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(to bottom, var(--color-bg-lighter), var(--color-bg-light));
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.ck2-expand-header:hover {
    background: linear-gradient(to bottom, var(--color-bg-light), var(--color-bg-medium));
}

.ck2-expand-title {
    flex: 1;
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--color-accent);
}

.ck2-expand-value {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-text-primary);
    margin-right: 8px;
}

.ck2-expand-toggle {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    transition: transform 0.2s;
}

.ck2-expand-toggle.expanded {
    transform: rotate(180deg);
}

.ck2-expand-content {
    max-height: 300px;
    overflow-y: auto;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 8px;
}

.ck2-expand-content.collapsed {
    max-height: 0;
    padding: 0 8px;
    overflow: hidden;
}

/* Reputation Panel */
.ck2-rep-details {
    font-size: 0.8rem;
}

.ck2-rep-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ck2-rep-label {
    color: var(--color-text-secondary);
}

.ck2-rep-value {
    color: var(--color-text-primary);
    font-weight: bold;
}

.ck2-rep-value.positive {
    color: var(--color-positive);
}

.ck2-rep-value.negative {
    color: var(--color-negative);
}

.ck2-rep-bar-container {
    height: 8px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    margin: 6px 0;
}

.ck2-rep-bar {
    height: 100%;
    background: linear-gradient(to right, var(--color-negative), var(--color-warning), var(--color-positive));
    transition: width 0.3s ease;
}

.ck2-rep-modifiers {
    margin-top: 6px;
    font-size: 0.7rem;
}

.ck2-rep-modifier {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px dotted var(--color-border);
}

.ck2-rep-modifier:last-child {
    border-bottom: none;
}

.ck2-rep-mod-positive {
    color: var(--color-positive);
}

.ck2-rep-mod-negative {
    color: var(--color-negative);
}

/* Land/Property Panel */
.ck2-land-details {
    font-size: 0.8rem;
}

.ck2-land-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ck2-land-label {
    color: var(--color-text-secondary);
}

.ck2-land-value {
    color: var(--color-text-primary);
    font-weight: bold;
}

.ck2-land-properties {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

.ck2-property-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    margin-bottom: 4px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: 0.75rem;
}

.ck2-property-icon {
    font-size: 1rem;
}

.ck2-property-info {
    flex: 1;
}

.ck2-property-name {
    color: var(--color-text-primary);
    font-weight: bold;
}

.ck2-property-location {
    color: var(--color-text-muted);
    font-size: 0.65rem;
}

/* Legacy styles for compatibility */
.character-panel {
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.character-panel h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.char-stat {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}

.char-stat .label {
    color: var(--color-text-secondary);
}

.char-stat .value {
    color: var(--color-text-primary);
    font-weight: bold;
}

/* Combined Pioneer Layout */
.pioneer-combined-layout {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.pioneer-combined-layout .portrait-container {
    flex-shrink: 0;
    margin-bottom: 0;
}

.pioneer-combined-layout .char-portrait {
    width: 100px;
    height: 125px;
    min-height: 125px;
}

.pioneer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.pioneer-info .char-stat {
    margin-bottom: 2px;
    font-size: 0.85rem;
}

/* Status Section - Compact Horizontal Bars */
.status-section {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.status-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 4px;
}

.status-label {
    width: 50px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.status-bar-container.compact {
    flex: 1;
    height: 12px;
    margin: 0;
}

.status-value {
    width: 55px;
    font-size: 0.75rem;
    color: var(--color-text-primary);
    text-align: right;
    flex-shrink: 0;
}

/* Conditions Section */
.conditions-section {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.conditions-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.conditions-section .conditions-display {
    margin: 0;
    flex: 1;
}

/* Traits Section */
.traits-section {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.traits-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.traits-section .traits-icons {
    flex: 1;
    font-size: 0.85rem;
}

/* Skills Section */
.skills-section {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.skills-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 4px;
}

.skills-section .mini-skills {
    font-size: 0.8rem;
}

/* Status Bar Container (shared) */
.health-bar-container,
.status-bar-container {
    background: var(--color-bg-dark);
    border-radius: var(--border-radius);
    height: 16px;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

/* Health Bar */
.health-bar-fill {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.health-bar-fill.healthy {
    background: linear-gradient(to bottom, #5a9a4a, #3a7a2a);
}

.health-bar-fill.warning {
    background: linear-gradient(to bottom, #c9a227, #9a7a1a);
}

.health-bar-fill.danger {
    background: linear-gradient(to bottom, #a04040, #802020);
}

/* Hunger Bar */
.hunger-bar-fill {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.hunger-bar-fill.satisfied {
    background: linear-gradient(to bottom, #8b6914, #6b4910);
}

.hunger-bar-fill.hungry {
    background: linear-gradient(to bottom, #c9a227, #9a7a1a);
}

.hunger-bar-fill.starving {
    background: linear-gradient(to bottom, #a04040, #802020);
}

/* Energy Bar */
.energy-bar-fill {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.energy-bar-fill.rested {
    background: linear-gradient(to bottom, #4a7a9a, #2a5a7a);
}

.energy-bar-fill.tired {
    background: linear-gradient(to bottom, #7a6a4a, #5a4a2a);
}

.energy-bar-fill.exhausted {
    background: linear-gradient(to bottom, #5a4a3a, #3a2a1a);
}

/* Conditions Display */
.conditions-display {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    min-height: 24px;
}

.condition-none {
    color: var(--color-positive);
    font-style: italic;
    font-size: 0.9rem;
}

.condition-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: bold;
}

.condition-tag.mild {
    background: var(--color-warning);
    color: var(--color-bg-dark);
}

.condition-tag.moderate {
    background: #b06020;
    color: var(--color-parchment);
}

.condition-tag.severe {
    background: var(--color-negative);
    color: var(--color-parchment);
}

/* Location Display */
.location-display {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 3px solid var(--color-accent-dark);
    box-shadow: var(--shadow-lg);
}

.location-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    background: linear-gradient(to bottom, #87CEEB 0%, #E0F0FF 60%, #8B7355 60%, #5a4633 100%);
}

.location-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
    color: var(--color-parchment);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* Main View */
#main-view {
    padding: var(--spacing-lg);
    overflow-y: auto;
    background: var(--color-bg-dark);
}

/* Open World View - Compact Layout */
.open-world-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.location-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.location-header-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.location-type-badge {
    background: var(--color-accent-dark);
    color: var(--color-parchment);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: bold;
}

.location-pop-badge {
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.location-desc {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

.travel-quick {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.travel-label {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: bold;
}

.btn-travel-quick {
    font-size: 0.75rem;
    padding: 4px 10px;
    background: linear-gradient(to bottom, var(--color-bg-lighter), var(--color-bg-light));
    border: 1px solid var(--color-accent-dark);
}

.btn-travel-quick:hover:not(.btn-disabled) {
    background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-dark));
}

.btn-travel-quick .travel-days {
    opacity: 0.7;
    font-size: 0.7rem;
}

.no-travel {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* Resource Bar */
#resource-bar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--color-bg-medium);
    border-top: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
}

.resource-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.resource-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.resource-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-accent);
}

/* Action Panel */
#action-panel {
    grid-column: 1 / -1;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    max-height: 400px;
    overflow-y: auto;
}

/* Action Categories Grid - Enhanced Role-Playing Actions */
.action-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
}

.action-category-block {
    background: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
}

.action-category-block.category-disabled {
    opacity: 0.6;
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

.category-icon {
    font-size: 1.1rem;
}

.category-name {
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--color-accent-light);
    flex: 1;
}

.category-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-bg-dark);
    padding: 2px 6px;
    border-radius: 10px;
}

.category-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.btn-action-small {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-width: 1px;
    flex: 1 0 auto;
    min-width: 80px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.btn-action-small .action-cost {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.btn-action-small.btn-disabled {
    background: var(--color-bg-dark);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.btn-action-small:not(.btn-disabled):hover {
    transform: translateY(-1px);
    background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-dark));
}

/* Event Log */
#event-log {
    grid-column: 1 / -1;
    max-height: 150px;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: var(--color-bg-dark);
    border-top: 2px solid var(--color-border);
    font-size: 0.85rem;
}

.log-entry {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border-left: 3px solid var(--color-border);
    animation: fadeIn 0.3s ease;
}

.log-entry.log-info { border-left-color: var(--color-info); }
.log-entry.log-positive { border-left-color: var(--color-positive); }
.log-entry.log-negative { border-left-color: var(--color-negative); }
.log-entry.log-warning { border-left-color: var(--color-warning); }
.log-entry.log-story { border-left-color: var(--color-accent); color: var(--color-accent-light); }
.log-entry.log-family { border-left-color: #c070c0; }
.log-entry.log-death { border-left-color: #600; color: #c99; }
.log-entry.log-achievement { border-left-color: gold; color: gold; }
.log-entry.log-historical { border-left-color: #8080ff; color: #aaf; font-style: italic; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Buttons ===== */
.btn {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
    background: linear-gradient(to bottom, var(--color-bg-lighter), var(--color-bg-light));
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn:hover {
    background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-dark));
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-dark));
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent));
}

.btn-danger {
    background: linear-gradient(to bottom, #a04040, #802020);
    border-color: #600;
}

.btn-danger:hover {
    background: linear-gradient(to bottom, #c05050, #a03030);
}

.btn-work {
    font-size: 1.3rem;
    padding: var(--spacing-md) var(--spacing-xl);
    min-width: 200px;
}

.btn-work .work-income {
    display: block;
    font-size: 0.9rem;
    color: var(--color-positive);
}

.btn-small {
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.btn-block {
    display: block;
    width: 100%;
    margin-bottom: var(--spacing-sm);
}

.btn-choice {
    display: block;
    width: 100%;
    margin-bottom: var(--spacing-sm);
    text-align: left;
}

/* ===== View Headers ===== */
.view-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.view-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.view-header p {
    color: var(--color-text-secondary);
}

/* ===== Preparation Phase ===== */
.preparation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.prep-section {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.prep-section h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

/* Trail Options */
.trail-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.trail-option {
    background: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.trail-option:hover {
    border-color: var(--color-accent);
}

.trail-option.selected {
    border-color: var(--color-accent);
    background: var(--color-bg-lighter);
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
}

.trail-option h4 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

.trail-option p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.trail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.trail-stats span {
    background: var(--color-bg-dark);
    padding: 2px 8px;
    border-radius: 3px;
}

/* Supply Shop */
.shop-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.shop-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

.shop-item span:first-child {
    font-weight: bold;
}

/* Wagon Status */
.wagon-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.wagon-stat {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

/* Depart Section */
.depart-section {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
}

.depart-section .warning {
    color: var(--color-warning);
}

.btn-large {
    font-size: 1.4rem;
    padding: var(--spacing-md) var(--spacing-xl);
}

/* ===== Journey Phase ===== */
.journey-view {
    max-width: 900px;
    margin: 0 auto;
}

.journey-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.journey-header h2 {
    color: var(--color-accent);
}

.journey-date {
    color: var(--color-text-secondary);
}

/* Progress Bar */
.journey-progress {
    margin-bottom: var(--spacing-lg);
}

.progress-bar-container {
    position: relative;
    background: var(--color-bg-dark);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    height: 30px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(to right, var(--color-accent-dark), var(--color-accent));
    transition: width 0.5s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.progress-stats {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Journey Info Grid */
.journey-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.info-panel {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.info-panel h3 {
    color: var(--color-accent);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.location-name {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
}

.next-location {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Journey Event */
.journey-event {
    background: var(--color-bg-light);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.journey-event h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.journey-event p {
    margin-bottom: var(--spacing-md);
}

.event-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 400px;
    margin: 0 auto;
}

/* Journey Controls */
.journey-controls {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.journey-controls label {
    color: var(--color-text-secondary);
    margin-right: var(--spacing-sm);
}

.journey-controls select {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
}

/* Journey Actions */
.journey-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

/* ===== Settlement Phase ===== */
.settlement-view {
    max-width: 1200px;
    margin: 0 auto;
}

.settlement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.settlement-header h2 {
    color: var(--color-accent);
}

.settlement-level {
    background: var(--color-accent);
    color: var(--color-bg-dark);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius);
    font-weight: bold;
}

/* Tabs */
.settlement-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--color-text-primary);
}

.tab-btn.active {
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    margin-bottom: -2px;
}

/* Settlement Overview */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.overview-panel {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.overview-panel h3 {
    color: var(--color-accent);
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.stat-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.stat-row {
    display: flex;
    justify-content: space-between;
}

.stat-row span:first-child {
    color: var(--color-text-secondary);
}

.income-breakdown {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.net-worth .big-number {
    font-size: 2rem;
    color: var(--color-accent);
    text-align: center;
    padding: var(--spacing-md);
}

/* Buildings Tab */
.buildings-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.building-tier h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

.building-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.building-card {
    background: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.building-card.disabled {
    opacity: 0.6;
}

.building-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}

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

.building-owned {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.building-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.building-cost {
    font-weight: bold;
    margin-bottom: var(--spacing-sm);
}

.requirement {
    font-size: 0.8rem;
    color: var(--color-warning);
}

/* Land Tab */
.land-management {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.land-section, .cattle-section, .workers-section {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.land-section h3, .cattle-section h3, .workers-section h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

.action-group {
    margin-bottom: var(--spacing-md);
}

.action-group h4 {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.buy-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.cattle-actions, .land-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Family Tab */
.family-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.family-member {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.family-member.primary {
    border-color: var(--color-accent);
}

.family-member.spouse {
    border-color: #c070c0;
}

.family-member h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.family-member.deceased {
    opacity: 0.6;
}

.deceased-label {
    color: var(--color-text-muted);
    font-style: italic;
}

.family-action {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border: 1px dashed var(--color-border);
}

/* Family Portraits */
.family-portrait-container {
    flex-shrink: 0;
}

.family-portrait {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border: 2px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
    background: var(--color-bg-dark);
}

.family-portrait-small {
    width: 50px;
    height: 60px;
    object-fit: cover;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-dark);
    margin-right: var(--spacing-sm);
}

.family-info {
    flex: 1;
}

.children-section {
    grid-column: 1 / -1;
}

.children-section h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

.children-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
}

.family-member.child {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
}

.child-name {
    font-weight: bold;
    width: 100%;
}

.child-age, .child-gender {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Legacy Tab */
.legacy-view {
    max-width: 800px;
    margin: 0 auto;
}

.legacy-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.legacy-points {
    font-size: 3rem;
    color: var(--color-accent);
    font-weight: bold;
}

.legacy-upgrades h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

.upgrade-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.legacy-upgrade {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

.legacy-upgrade.disabled {
    opacity: 0.6;
}

.upgrade-info {
    flex: 1;
}

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

.upgrade-level {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-left: var(--spacing-sm);
}

.upgrade-desc {
    flex-basis: 100%;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0;
}

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

/* ===== Modal ===== */
#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#modal-overlay.show {
    display: flex;
}

#modal-content {
    background: var(--color-bg-medium);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
    color: var(--color-accent);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--color-text-primary);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* ===== Notifications ===== */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    background: var(--color-bg-medium);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
    z-index: 2000;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.3s ease;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification-success {
    border-color: var(--color-positive);
}

.notification-error {
    border-color: var(--color-negative);
}

.notification-achievement {
    border-color: gold;
    color: gold;
}

.notification-family {
    border-color: #c070c0;
}

.notification-historical {
    border-color: #8080ff;
    font-style: italic;
}

/* ===== Floating Text ===== */
.floating-text {
    position: fixed;
    pointer-events: none;
    font-weight: bold;
    font-size: 1.2rem;
    animation: floatUp 1s ease-out forwards;
    z-index: 2000;
}

.floating-money {
    color: var(--color-positive);
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

/*
 * Cycle-6 onboarding gate (R1: Staged action-button reveal).
 * Categories tagged with this class stay hidden until Game.state.statistics.totalClicks
 * crosses the threshold for that category. Used by UI.updateActionPanel to skip
 * #commerce, #travel/exploration, and #settlement on a fresh save (t=0). Reveal
 * thresholds: travel/exploration after click 1, commerce after click 3, settlement after click 5.
 * The dynamic render in ui.js consults Game.cycle6OnboardingGate; this static class is
 * a fallback for the legacy markup in index.html (#travel-actions / #commerce-actions /
 * #settlement-actions) which is overwritten by updateActionPanel but kept for safety.
 */
.cycle6-onboarding-hidden { display: none !important; }

/* ===== Form Elements ===== */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.form-group input,
.form-group select {
    width: 100%;
    font-family: var(--font-primary);
    font-size: 1rem;
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* ===== Export/Import ===== */
.export-import {
    display: grid;
    gap: var(--spacing-lg);
}

.export-section textarea,
.import-section textarea {
    width: 100%;
    height: 100px;
    font-family: monospace;
    font-size: 0.85rem;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
    padding: var(--spacing-sm);
    resize: vertical;
    margin: var(--spacing-sm) 0;
}

/* ===== Achievements ===== */
.achievements-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.achievements-list h3 {
    color: var(--color-accent);
    margin: var(--spacing-md) 0;
}

.achievement {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

.achievement.unlocked {
    border-left: 3px solid gold;
}

.achievement.locked {
    opacity: 0.6;
    border-left: 3px solid var(--color-border);
}

.ach-name {
    font-weight: bold;
    width: 100%;
}

.ach-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ===== Settings ===== */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-row label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

/* ===== Death Screen ===== */
.death-screen {
    text-align: center;
}

.death-screen h3 {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.deceased-portrait-container {
    margin-bottom: var(--spacing-md);
}

.deceased-portrait {
    width: 120px;
    height: 150px;
    object-fit: cover;
    border: 3px solid var(--color-text-muted);
    border-radius: var(--border-radius);
    filter: sepia(50%) grayscale(30%);
    opacity: 0.8;
}

.heir-info {
    background: var(--color-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin: var(--spacing-lg) 0;
}

.heir-info h4 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.heir-portrait {
    width: 100px;
    height: 125px;
    object-fit: cover;
    border: 3px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

/* ===== Spouse Selection ===== */
.spouse-candidates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
}

.candidate-card {
    background: var(--color-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    text-align: center;
}

.candidate-card h4 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.candidate-portrait {
    width: 100px;
    height: 125px;
    object-fit: cover;
    border: 3px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
    background: var(--color-bg-dark);
    margin-bottom: var(--spacing-sm);
}

/* ===== Quick Actions ===== */
.quick-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ===== Earnings Display ===== */
.work-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.earnings-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-dark);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.earnings-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.earnings-amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-positive);
}

.time-info {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ===== Menu ===== */
.menu-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .game-container {
        grid-template-columns: 1fr;
    }

    #sidebar {
        display: none;
    }

    .journey-info-grid {
        grid-template-columns: 1fr;
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .game-header {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .game-title {
        font-size: 1.4rem;
    }

    #resource-bar {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .resource-item {
        min-width: 80px;
    }

    .btn-work {
        min-width: 150px;
    }

    .settlement-tabs {
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 1;
        min-width: 80px;
        text-align: center;
    }
}

/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-bg-lighter);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-dark);
}

/* ===== Save Info ===== */
.save-info {
    background: var(--color-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin: var(--spacing-md) 0;
}

.save-info p {
    margin-bottom: var(--spacing-xs);
}

/* ===== Starting Info ===== */
.starting-info {
    background: var(--color-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

.starting-info p {
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-secondary);
}

/* ===== New Game Setup ===== */
.new-game-setup .form-group select {
    font-size: 0.9rem;
}

/* ===== API Key Config ===== */
.api-key-config {
    text-align: left;
}

.api-key-config p {
    margin-bottom: var(--spacing-sm);
}

.api-key-config a {
    color: var(--color-accent);
    text-decoration: none;
}

.api-key-config a:hover {
    text-decoration: underline;
}

.info-text {
    background: var(--color-bg-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

/* ===== OPEN WORLD UI STYLES ===== */

/* Time Display in Header */
.time-display {
    font-size: 1.1rem;
    color: var(--color-accent);
    font-weight: bold;
    margin-right: var(--spacing-md);
}

/* Location Panel in Sidebar */
.location-info {
    flex-direction: column;
    align-items: flex-start;
}

.location-current {
    font-size: 1rem;
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

.location-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.feature-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-tag.available {
    background: var(--color-positive);
    color: var(--color-parchment);
    border-color: var(--color-positive);
}

/* Location Name Overlay */
.location-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
    color: var(--color-parchment);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* Open World Content */
.open-world-content {
    padding: var(--spacing-md);
}

/* Activity Grid */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.activity-card {
    background: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.activity-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.activity-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.activity-card.disabled:hover {
    border-color: var(--color-border);
    transform: none;
    box-shadow: none;
}

.activity-card h4 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

.activity-card p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.activity-requirements {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.activity-requirements span {
    display: inline-block;
    margin-right: var(--spacing-sm);
}

/* Action Categories Panel */
.action-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    width: 100%;
}

.action-category {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    min-width: 120px;
}

.action-category h4 {
    color: var(--color-accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.btn-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    min-width: 100px;
}

.btn-action .action-info {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.btn-action:hover .action-info {
    color: var(--color-parchment);
}

.btn-action.btn-travel {
    background: linear-gradient(to bottom, var(--color-info), #2a5a7c);
    border-color: var(--color-info);
}

.btn-action.btn-travel:hover {
    background: linear-gradient(to bottom, #4a8aac, var(--color-info));
}

.btn-action.btn-mining {
    background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-dark));
    border-color: var(--color-accent);
}

/* Travel Panel */
.travel-panel {
    background: var(--color-bg-medium);
    border: 2px solid var(--color-info);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.travel-panel h3 {
    color: var(--color-info);
    margin-bottom: var(--spacing-md);
}

.travel-progress {
    margin-bottom: var(--spacing-lg);
}

.travel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.travel-stat {
    background: var(--color-bg-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    text-align: center;
}

.travel-stat .label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.travel-stat .value {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-text-primary);
}

.travel-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

/* Homestead Panel */
.homestead-panel {
    background: var(--color-bg-medium);
    border: 2px solid var(--color-positive);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.homestead-panel h3 {
    color: var(--color-positive);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.homestead-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.homestead-stat {
    background: var(--color-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
}

.homestead-stat h4 {
    color: var(--color-accent);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
}

.homestead-stat .value {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Hidden Class */
.hidden {
    display: none !important;
}

/* Travel Destination Selection */
.travel-destinations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.destination-card {
    background: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.destination-card:hover {
    border-color: var(--color-info);
    background: var(--color-bg-lighter);
}

.destination-card.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
}

.destination-card h4 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.destination-card .destination-type {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.destination-card .travel-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: 0.85rem;
}

.destination-card .travel-info span {
    background: var(--color-bg-dark);
    padding: 2px 8px;
    border-radius: 3px;
}

.destination-card .travel-info .danger-low {
    color: var(--color-positive);
}

.destination-card .travel-info .danger-medium {
    color: var(--color-warning);
}

.destination-card .travel-info .danger-high {
    color: var(--color-negative);
}

/* Work Selection Modal */
.work-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.work-option {
    background: var(--color-bg-light);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.work-option:hover {
    border-color: var(--color-positive);
    background: var(--color-bg-lighter);
}

.work-option h4 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

.work-option .wage {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-positive);
    margin-bottom: var(--spacing-xs);
}

.work-option .description {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Trade Panel */
.trade-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.trade-section {
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.trade-section h4 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.trade-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: var(--color-bg-medium);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

.trade-item .item-name {
    font-weight: bold;
}

.trade-item .item-price {
    color: var(--color-accent);
}

.trade-item .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
}

/* Land Claim Panel */
.land-claim-info {
    background: var(--color-bg-light);
    border: 2px solid var(--color-positive);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.land-claim-info h4 {
    color: var(--color-positive);
    margin-bottom: var(--spacing-sm);
}

.land-claim-info p {
    margin-bottom: var(--spacing-sm);
}

.land-claim-requirements {
    background: var(--color-bg-dark);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

.land-claim-requirements h5 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.land-claim-requirements ul {
    list-style: disc;
    margin-left: var(--spacing-lg);
    color: var(--color-text-secondary);
}

/* Region Badge */
.region-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.region-badge.east {
    background: #4a7c3f;
    color: white;
}

.region-badge.plains {
    background: #c9a227;
    color: #2a1f14;
}

.region-badge.mountains {
    background: #6a8caf;
    color: white;
}

.region-badge.southwest {
    background: #b86b3f;
    color: white;
}

.region-badge.great_basin {
    background: #8a7a60;
    color: white;
}

.region-badge.california {
    background: #e6c040;
    color: #2a1f14;
}

.region-badge.pacific_northwest {
    background: #2a6a4a;
    color: white;
}

/* Connection Lines for Travel Map */
.connection-indicator {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--color-border);
    vertical-align: middle;
    margin: 0 var(--spacing-xs);
}

/* Day/Night Indicator */
.time-period {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.8rem;
    margin-left: var(--spacing-sm);
}

.time-period.morning {
    background: #f0e68c;
    color: #4a4a00;
}

.time-period.afternoon {
    background: #e6c040;
    color: #4a4a00;
}

.time-period.evening {
    background: #c07030;
    color: white;
}

.time-period.night {
    background: #2a3a5a;
    color: #aaccff;
}

/* Energy Warning */
.energy-warning {
    color: var(--color-warning);
    font-size: 0.85rem;
    text-align: center;
    padding: var(--spacing-sm);
    background: rgba(181, 138, 48, 0.2);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

/* Food Warning */
.food-warning {
    color: var(--color-negative);
    font-size: 0.85rem;
    text-align: center;
    padding: var(--spacing-sm);
    background: rgba(140, 48, 48, 0.2);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

/* Gold Rush Indicator */
.gold-rush-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(to right, #c9a227, #e6c040, #c9a227);
    color: #2a1f14;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: goldShimmer 2s infinite;
}

@keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Homestead Act Badge */
.homestead-act-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-positive);
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive adjustments for open world UI */
@media (max-width: 900px) {
    .action-categories {
        flex-direction: column;
        align-items: center;
    }

    .action-category {
        width: 100%;
        max-width: 300px;
    }

    .action-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .travel-stats {
        grid-template-columns: 1fr;
    }

    .trade-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .activity-grid {
        grid-template-columns: 1fr;
    }

    .travel-destinations {
        grid-template-columns: 1fr;
    }

    .work-options {
        grid-template-columns: 1fr;
    }

    .homestead-stats {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* CK2-STYLE UI ENHANCEMENTS */
/* ========================================================================== */

/* ===== Tooltip System ===== */
.game-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: 300px;
    background: linear-gradient(to bottom, var(--color-bg-medium), var(--color-bg-dark));
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.game-tooltip.hidden {
    opacity: 0;
    visibility: hidden;
}

.tooltip-header {
    font-weight: bold;
    color: var(--color-accent);
    font-size: 1rem;
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.tooltip-body {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.tooltip-level {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.tooltip-value {
    font-size: 0.9rem;
    color: var(--color-accent-light);
    margin-bottom: var(--spacing-xs);
}

.tooltip-effects {
    background: var(--color-bg-dark);
    border-radius: 3px;
    padding: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.tooltip-effects .effect-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: 2px 0;
}

.tooltip-effects .positive {
    color: var(--color-positive);
}

.tooltip-effects .negative {
    color: var(--color-negative);
}

.tooltip-uses {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--spacing-xs);
}

/* ===== Trait Icons ===== */
.trait-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-bg-dark);
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: help;
    margin: 2px;
    transition: transform 0.2s ease;
}

.trait-icon:hover {
    transform: scale(1.2);
}

/* ===== Skill Bars ===== */
.skill-bar-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    cursor: help;
}

.skill-name {
    flex: 0 0 100px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.skill-bar-track {
    flex: 1;
    height: 12px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.skill-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 6px;
}

.skill-bar-fill.novice {
    background: linear-gradient(to right, #5a4a3a, #7a6a5a);
}

.skill-bar-fill.competent {
    background: linear-gradient(to right, #4a6a4a, #6a8a6a);
}

.skill-bar-fill.skilled {
    background: linear-gradient(to right, #4a6a8a, #6a8aaa);
}

.skill-bar-fill.expert {
    background: linear-gradient(to right, var(--color-accent-dark), var(--color-accent));
}

.skill-level {
    flex: 0 0 30px;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-text-primary);
    text-align: right;
}

/* Mini Skill Bars (for preview) */
.mini-skill-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 3px;
}

.mini-skill-name {
    flex: 0 0 60px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-skill-track {
    flex: 1;
    height: 6px;
    background: var(--color-bg-dark);
    border-radius: 3px;
    overflow: hidden;
}

.mini-skill-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
}

/* ===== CK2-Style Character Panel ===== */
.ck2-character-panel {
    background: linear-gradient(to bottom, var(--color-bg-medium), var(--color-bg-dark));
    border: 2px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.ck2-character-panel:hover {
    border-color: var(--color-accent);
}

.char-portrait-frame {
    position: relative;
    width: 100px;
    height: 125px;
    margin: 0 auto var(--spacing-sm);
}

.char-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

.char-portrait-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid var(--color-accent-dark);
    border-radius: 3px;
    pointer-events: none;
}

.char-portrait-border.male {
    border-color: #4a6a8a;
}

.char-portrait-border.female {
    border-color: #8a4a6a;
}

.char-info-block {
    margin-bottom: var(--spacing-sm);
}

.char-name-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-xs);
}

.char-name-line .char-name {
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-accent);
}

.char-name-line .char-age {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.char-info-block .char-profession {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.char-info-block .char-relationship {
    font-size: 0.8rem;
    color: #c070c0;
}

.char-health-row,
.char-energy-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.char-health-row .stat-label,
.char-energy-row .stat-label {
    flex: 0 0 50px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.char-health-row .health-bar-container,
.char-energy-row .energy-bar-container {
    flex: 1;
    height: 10px;
    margin: 0;
}

.char-health-row .stat-value,
.char-energy-row .stat-value {
    flex: 0 0 35px;
    font-size: 0.75rem;
    text-align: right;
    color: var(--color-text-primary);
}

.char-traits-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: var(--spacing-xs) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: var(--spacing-xs) 0;
}

.char-attributes {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.attribute-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 45px;
    background: var(--color-bg-dark);
    border: 2px solid;
    border-radius: 3px;
    cursor: help;
    transition: transform 0.2s ease;
}

.attribute-icon:hover {
    transform: scale(1.1);
}

.attr-abbrev {
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--color-text-muted);
}

.attr-value {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-text-primary);
}

.char-skills-preview {
    margin-top: var(--spacing-sm);
}

/* ===== Character Sheet Modal ===== */
.character-sheet {
    max-width: 700px;
}

.cs-header {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-border);
}

.cs-portrait-section {
    flex-shrink: 0;
}

.cs-portrait {
    width: 120px;
    height: 150px;
    object-fit: cover;
    border: 3px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
}

.cs-basic-info h2 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

.cs-profession {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}

.cs-background {
    color: var(--color-text-muted);
    font-style: italic;
}

.cs-backstory {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-dark);
    border-radius: var(--border-radius);
}

.cs-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.cs-stat-block h4 {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.cs-large-bar {
    position: relative;
    height: 24px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.cs-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.cs-bar-fill.health {
    background: linear-gradient(to right, #3a7a2a, #5a9a4a);
}

.cs-bar-fill.energy {
    background: linear-gradient(to right, #2a5a7a, #4a7a9a);
}

.cs-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.cs-section {
    margin-bottom: var(--spacing-lg);
}

.cs-section h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.cs-attributes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.cs-attribute {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cs-attr-name {
    flex: 0 0 80px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.cs-attr-bar {
    flex: 1;
    height: 12px;
    background: var(--color-bg-dark);
    border-radius: 6px;
    overflow: hidden;
}

.cs-attr-fill {
    height: 100%;
    background: var(--color-accent);
}

.cs-attr-value {
    flex: 0 0 30px;
    text-align: right;
    font-weight: bold;
}

.cs-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-xs);
}

.cs-traits-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cs-trait {
    background: var(--color-bg-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-accent);
}

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

.cs-trait-desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-left: var(--spacing-sm);
}

.cs-relationships-list,
.cs-conditions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.cs-relationship,
.cs-condition {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

.cs-condition.severe {
    background: rgba(140, 48, 48, 0.3);
    border: 1px solid var(--color-negative);
}

/* ===== NPC Cards ===== */
.npc-card {
    display: flex;
    gap: var(--spacing-sm);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.npc-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.npc-portrait-frame {
    flex-shrink: 0;
    width: 50px;
    height: 60px;
}

.npc-portrait-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-dark);
    border: 2px solid var(--color-border);
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.npc-info {
    flex: 1;
    min-width: 0;
}

.npc-name {
    font-weight: bold;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.npc-occupation {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.npc-relationship {
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: var(--spacing-xs);
}

/* NPC Detail Panel */
.npc-detail-panel {
    max-width: 500px;
}

.npc-detail-header {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.npc-portrait-large {
    width: 80px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-dark);
    border: 3px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text-muted);
}

.npc-detail-info h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

.npc-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

.npc-traits h4,
.npc-memories h4 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}

.npc-trait {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    background: var(--color-bg-dark);
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.npc-memories {
    margin-top: var(--spacing-md);
}

.memory-item {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: var(--spacing-xs);
    border-left: 2px solid var(--color-border);
    margin-bottom: var(--spacing-xs);
}

.npc-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* ===== Sub-Locations Panel ===== */
.sub-locations-panel {
    background: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.sub-locations-panel h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.sub-locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-sm);
}

.sub-location-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sub-location-card.open:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.sub-location-card.closed {
    opacity: 0.6;
    cursor: not-allowed;
}

.sub-loc-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-dark);
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.sub-loc-info {
    flex: 1;
    min-width: 0;
}

.sub-loc-name {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.sub-loc-hours {
    font-size: 0.75rem;
}

.sub-loc-hours.open {
    color: var(--color-positive);
}

.sub-loc-hours.closed {
    color: var(--color-negative);
}

/* cycle-12 M1: travel-time hint per sub-location card. */
.sub-loc-travel-hint {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.sub-loc-travel-hint.sub-loc-here {
    color: var(--color-accent);
    font-weight: bold;
}

/* cycle-12 M1: highlight the card the player is currently inside. */
.sub-location-card.sub-location-current {
    border-color: var(--color-accent);
    background: var(--color-bg-dark);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* cycle-12 M1: "You are at: …" indicator above the sub-location grid. */
.sub-loc-current-indicator {
    font-size: 0.85rem;
    color: var(--color-text-secondary, var(--color-text-muted));
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-light);
    border-left: 3px solid var(--color-accent);
    border-radius: 3px;
}

.sub-loc-current-indicator strong {
    color: var(--color-text-primary);
}

/* cycle-12 M1: contextual "Local Actions" sub-section in the action panel. */
.local-actions-grid {
    margin-top: var(--spacing-sm);
}

.local-actions-block .category-icon {
    color: var(--color-accent);
}

/* Sub-Location Interior View */
.sub-location-view {
    display: flex;
    flex-direction: column;
}

.sub-loc-image-container {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.sub-loc-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 3px solid var(--color-accent-dark);
}

.sub-loc-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-parchment);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.sub-loc-content {
    padding: var(--spacing-md);
}

.sub-loc-header {
    margin-bottom: var(--spacing-md);
}

.sub-loc-header h2 {
    color: var(--color-accent);
    margin: var(--spacing-sm) 0;
}

.sub-loc-desc {
    color: var(--color-text-secondary);
}

.btn-back {
    margin-bottom: var(--spacing-sm);
}

.sub-loc-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.sub-loc-npcs h3,
.sub-loc-services h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.npcs-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.btn-service {
    flex: 1 0 calc(50% - var(--spacing-sm));
}

/* ===== Event Popup (CK2-style) ===== */
.event-popup {
    max-width: 500px;
}

.event-image {
    margin-bottom: var(--spacing-md);
}

.event-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 2px solid var(--color-accent-dark);
}

.event-content {
    text-align: center;
}

.event-description {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.event-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn-event-choice {
    text-align: left;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border: 2px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.btn-event-choice:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-lighter);
}

.choice-effects {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

/* ===== Known NPCs List ===== */
.known-npcs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

/* ===== Relationship Indicator ===== */
.relationship-indicator {
    position: relative;
    height: 16px;
    background: var(--color-bg-dark);
    border-radius: 8px;
    overflow: hidden;
}

.relationship-indicator .rel-bar {
    height: 100%;
    transition: width 0.3s ease;
}

.relationship-indicator .rel-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* ===== Open World View Enhancements ===== */
.open-world-view {
    padding: var(--spacing-md);
}

.open-world-view .location-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.open-world-view .location-header h2 {
    color: var(--color-accent);
    font-family: var(--font-display);
    margin-bottom: var(--spacing-xs);
}

.open-world-view .location-type {
    color: var(--color-text-secondary);
}

.open-world-view .location-pop {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.open-world-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.ow-section {
    background: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.ow-section h3 {
    color: var(--color-accent);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

.activity-category {
    margin-bottom: var(--spacing-md);
}

.activity-category h4 {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-sm);
}

.activity-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.btn-activity {
    flex: 1 1 auto;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm);
    text-align: center;
}

.activity-name {
    font-weight: bold;
}

.activity-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.status-bars {
    margin-bottom: var(--spacing-md);
}

.status-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.status-label {
    flex: 0 0 50px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.status-bar-container {
    flex: 1;
    height: 12px;
    background: var(--color-bg-dark);
    border-radius: 6px;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--color-border);
}

.status-bar {
    height: 100%;
    transition: width 0.3s ease;
}

.status-bar.energy-bar {
    background: linear-gradient(to right, #2a5a7a, #4a7a9a);
}

.status-bar.health-bar {
    background: linear-gradient(to right, #3a7a2a, #5a9a4a);
}

.status-value {
    flex: 0 0 45px;
    font-size: 0.8rem;
    text-align: right;
    color: var(--color-text-primary);
}

.travel-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.travel-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

.travel-option.disabled {
    opacity: 0.6;
}

.travel-dest {
    flex: 1;
}

.travel-dest strong {
    display: block;
    color: var(--color-text-primary);
}

.travel-type {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.travel-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.local-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-bg-light);
}

.local-info:last-child {
    border-bottom: none;
}

.homestead-summary {
    background: var(--color-bg-medium);
    border: 2px solid var(--color-positive);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.homestead-summary h3 {
    color: var(--color-positive);
    margin-bottom: var(--spacing-sm);
}

.homestead-stats {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.homestead-stats span {
    background: var(--color-bg-dark);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 3px;
    font-size: 0.9rem;
}

/* ===== Traveling View ===== */
.traveling-view {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.travel-header {
    margin-bottom: var(--spacing-lg);
}

.travel-header h2 {
    color: var(--color-info);
}

.travel-progress {
    margin-bottom: var(--spacing-lg);
}

.travel-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.status-item {
    background: var(--color-bg-medium);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
}

.status-item span:first-child {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.status-item span:last-child {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text-primary);
}

.travel-actions {
    margin-top: var(--spacing-lg);
}

/* Responsive for new UI elements */
@media (max-width: 900px) {
    .sub-loc-main {
        grid-template-columns: 1fr;
    }

    .cs-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cs-stats-row {
        grid-template-columns: 1fr;
    }

    .cs-attributes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .sub-locations-grid {
        grid-template-columns: 1fr;
    }

    .travel-status {
        grid-template-columns: 1fr;
    }

    .npc-detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ===== FAMILY TREE STYLES (CK2 Style) ===== */

.family-tree-container {
    background: linear-gradient(180deg, var(--color-bg-medium) 0%, var(--color-bg-dark) 100%);
    min-height: 400px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dynasty-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(90deg, var(--color-accent-dark) 0%, transparent 100%);
    border-bottom: 2px solid var(--color-accent);
}

.dynasty-crest {
    width: 60px;
    height: 60px;
    background: var(--color-bg-dark);
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.dynasty-info {
    flex: 1;
}

.dynasty-name {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--color-accent);
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.dynasty-motto {
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: 0.9rem;
}

.family-tree-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: var(--spacing-md);
}

.family-generation {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-accent-dark);
}

.generation-label {
    font-size: 0.85rem;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.generation-members {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    justify-content: flex-start;
}

.family-unit {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    position: relative;
}

.family-unit.current-player-unit {
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid var(--color-accent-dark);
}

.marriage-connector {
    font-size: 1.2rem;
    color: var(--color-accent);
    padding: 0 var(--spacing-xs);
}

.children-indicator {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-dark);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

.family-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    min-width: 80px;
    position: relative;
}

.family-member:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-dark);
}

.family-member.current-player {
    border-color: var(--color-accent);
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
}

.family-member.deceased {
    opacity: 0.7;
}

.family-member.deceased .member-portrait {
    filter: grayscale(60%);
}

.family-member.male {
    border-top: 3px solid #4a7c9f;
}

.family-member.female {
    border-top: 3px solid #9f4a7c;
}

.member-portrait {
    width: 60px;
    height: 60px;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-bg-dark);
}

.member-portrait .portrait-img,
.member-portrait .portrait-placeholder {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.deceased-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
}

.member-info {
    text-align: center;
}

.member-name {
    font-weight: bold;
    color: var(--color-text-primary);
    font-size: 0.85rem;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-lifespan {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.member-profession {
    font-size: 0.65rem;
    color: var(--color-accent);
    font-style: italic;
}

.player-marker {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-accent);
    color: var(--color-bg-dark);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: var(--shadow-sm);
}

/* Family Member Detail Modal */
.family-member-detail {
    padding: var(--spacing-md);
}

.fmd-header {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.fmd-portrait {
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-bg-dark);
    border: 2px solid var(--color-accent-dark);
}

.fmd-portrait .portrait-placeholder {
    width: 100%;
    height: 100%;
}

.fmd-basic {
    flex: 1;
}

.fmd-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-accent);
    margin: 0 0 var(--spacing-xs);
}

.fmd-status {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
}

.fmd-status.alive {
    color: var(--color-positive);
}

.fmd-status.deceased {
    color: var(--color-text-muted);
}

.fmd-dates {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.fmd-profession {
    font-size: 0.85rem;
    color: var(--color-accent);
    font-style: italic;
    margin-top: var(--spacing-xs);
}

.fmd-relationships {
    margin-bottom: var(--spacing-md);
}

.fmd-section {
    margin-bottom: var(--spacing-md);
}

.fmd-section h4 {
    font-size: 0.9rem;
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.fmd-rel-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.fmd-rel-item {
    background: var(--color-bg-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.fmd-rel-item:hover {
    background: var(--color-bg-lighter);
    border-color: var(--color-accent-dark);
}

.fmd-rel-item.deceased {
    opacity: 0.7;
    font-style: italic;
}

.fmd-traits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.fmd-trait {
    background: var(--color-bg-dark);
    color: var(--color-text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    border: 1px solid var(--color-border);
}

.fmd-actions {
    margin-top: var(--spacing-lg);
    text-align: center;
}

/* Family Tree Button in Sidebar */
.family-tree-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border: 1px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
    color: var(--color-accent);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    width: 100%;
    margin-top: var(--spacing-sm);
}

.family-tree-btn:hover {
    background: var(--color-accent-dark);
    color: var(--color-text-primary);
}

.family-tree-btn .tree-icon {
    font-size: 1rem;
}

/* Responsive Family Tree */
@media (max-width: 768px) {
    .dynasty-header {
        flex-direction: column;
        text-align: center;
    }

    .generation-members {
        justify-content: center;
    }

    .family-unit {
        flex-direction: column;
    }

    .marriage-connector {
        transform: rotate(90deg);
    }

    .fmd-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================================================
   Cycle 7 (pbe1 PathC swarm member 3) — Sidebar Relationships Tab + Event Log
   Filter Chips. Reuses the existing CK2 sepia palette (--color-bg-*, --color-
   accent*, --color-positive/negative/warning/info).
   ============================================================================ */

/* Relationships panel rows */
.ck2-relationship-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px auto;
    grid-template-rows: auto auto;
    grid-column-gap: 6px;
    grid-row-gap: 2px;
    align-items: center;
    padding: 5px 6px;
    margin-bottom: 4px;
    background: var(--color-bg-medium);
    border: 1px solid var(--color-bg-lighter);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.78rem;
}

.ck2-relationship-row:hover,
.ck2-relationship-row:focus {
    background: var(--color-bg-light);
    border-color: var(--color-accent);
    outline: none;
}

.ck2-relationship-row:focus-visible {
    box-shadow: 0 0 0 2px var(--color-accent);
}

.ck2-relationship-row .rel-name {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color: var(--color-text-primary);
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck2-relationship-row .rel-bar-track {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 8px;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-bg-lighter);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.ck2-relationship-row .rel-bar-fill {
    height: 100%;
    transition: width 0.25s ease;
    background: var(--color-accent);
}

.ck2-relationship-row .rel-bar-fill.loyal     { background: #4caf50; }   /* green */
.ck2-relationship-row .rel-bar-fill.friendly  { background: #9acd32; }   /* lime  */
.ck2-relationship-row .rel-bar-fill.neutral   { background: #888888; }   /* gray  */
.ck2-relationship-row .rel-bar-fill.cold      { background: var(--color-warning); }  /* amber */
.ck2-relationship-row .rel-bar-fill.hostile   { background: var(--color-negative); } /* red   */

.ck2-relationship-row .rel-opinion-num {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
    color: var(--color-text-primary);
    min-width: 32px;
    text-align: right;
}

.ck2-relationship-row .rel-opinion-num.loyal,
.ck2-relationship-row .rel-opinion-num.friendly { color: var(--color-positive); }
.ck2-relationship-row .rel-opinion-num.cold,
.ck2-relationship-row .rel-opinion-num.hostile  { color: var(--color-negative); }
.ck2-relationship-row .rel-opinion-num.neutral  { color: var(--color-text-secondary); }

.ck2-relationship-row .rel-modifier-tag {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck2-empty-msg {
    padding: 6px 4px;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.75rem;
    text-align: center;
}

/* Sidebar Relationships header — count badge styling reuse. */
.ck2-expand-header .panel-icon {
    margin-right: 6px;
    font-size: 0.95rem;
    line-height: 1;
}

/* Event log filter chips */
.event-log-filters {
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: var(--color-bg-medium);
    border-top: 1px solid var(--color-accent-dark);
    border-bottom: 1px solid var(--color-accent-dark);
}

.event-filter-chip {
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-bg-lighter);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.event-filter-chip:hover {
    background: var(--color-bg-lighter);
    color: var(--color-text-primary);
}

.event-filter-chip.active {
    background: var(--color-accent-dark);
    color: var(--color-text-primary);
    border-color: var(--color-accent);
}

.event-filter-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* Hidden-by-filter event-log rows */
.log-entry.event-hidden-by-filter {
    display: none;
}

/* Relationship event styling (matches log-info pattern) */
.log-entry.log-relationship {
    color: var(--color-accent-light);
    border-left: 3px solid var(--color-accent);
    padding-left: 6px;
}

/* ============================================================================
   Cycle-7 PathC Relationship UI (member-2 of pbe1-cycle7-PathC).
   - Opinion meter + categorical band block (.rel-opinion-block)
   - Modifier drawer (.rel-modifier-drawer)
   - Action Tray (Gift / Gossip / Court) (.rel-action-tray, .rel-btn)
   style.css is NOT SRI-pinned per the cycle-5 audit, so adding rules here
   does not require an integrity= recompute.
   ============================================================================ */

.rel-opinion-block {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm);
    background: var(--color-bg-dark);
    border: 1px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
}

.rel-opinion-meter-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.rel-opinion-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    flex: 1;
}

.rel-opinion-numeric {
    font-size: 1.3rem;
    font-weight: bold;
    min-width: 56px;
    text-align: right;
}

.rel-opinion-band {
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rel-opinion-meter {
    margin: var(--spacing-xs) 0;
}

.rel-opinion-meter-track {
    position: relative;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    overflow: hidden;
}

.rel-opinion-meter-zero {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.rel-opinion-meter-fill {
    height: 100%;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 5px;
}

.rel-opinion-meter-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Modifier drawer (uses native <details> for collapse state) */
.rel-modifier-drawer {
    margin-top: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--spacing-xs);
}

.rel-modifier-drawer summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rel-modifier-drawer summary::-webkit-details-marker {
    display: none;
}

.rel-modifier-drawer[open] .rel-drawer-chevron {
    transform: rotate(180deg);
}

.rel-drawer-chevron {
    transition: transform 0.2s ease;
    display: inline-block;
}

.rel-modifier-list {
    margin-top: var(--spacing-xs);
}

.rel-modifier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    margin-bottom: 3px;
    border-radius: 3px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid transparent;
}

.rel-modifier-row.rel-mod-positive {
    border-left-color: #6fbf6f;
}

.rel-modifier-row.rel-mod-negative {
    border-left-color: #b53a3a;
}

.rel-modifier-row.rel-mod-neutral {
    border-left-color: #888;
}

.rel-mod-tag {
    flex: 1;
}

.rel-mod-tag strong {
    margin-left: 4px;
}

.rel-mod-decay {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-right: 8px;
}

.rel-mod-source {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.rel-modifier-empty,
.rel-opinion-empty,
.rel-tray-empty {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.85rem;
    padding: var(--spacing-xs);
    text-align: center;
}

/* Action Tray (Gift / Gossip / Court) */
.rel-action-tray {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-accent-dark);
    border-radius: var(--border-radius);
}

.rel-tray-title {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--color-accent);
    font-size: 0.95rem;
}

.rel-tray-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
}

.rel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--spacing-xs);
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.rel-btn-label {
    font-weight: bold;
    font-size: 0.95rem;
}

.rel-btn-meta {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.rel-btn-warning {
    font-size: 0.65rem;
    color: #c08a3e;
    font-style: italic;
}

.rel-btn-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto; /* keep clickable so handler can show notification */
    filter: grayscale(0.6);
}

.rel-btn-gift {
    background: linear-gradient(180deg, #2c5e2c, #1f4a1f);
}

.rel-btn-gossip {
    background: linear-gradient(180deg, #5e552c, #4a431f);
}

.rel-btn-court {
    background: linear-gradient(180deg, #5e2c4f, #4a1f3e);
}

.rel-court-arc-hint {
    margin-top: var(--spacing-xs);
    padding: 4px 8px;
    background: rgba(192, 138, 62, 0.12);
    border-left: 3px solid #c08a3e;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-text-muted);
}

.npc-actions-legacy {
    margin-top: var(--spacing-sm);
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    padding-top: var(--spacing-sm);
    opacity: 0.85;
}

/* ============================================================================
 * Cycle-8 swarm-member-4 — Courtship-arc-progress UI surface
 * NPC Detail Panel renders a visible patience-bar + opinion-gate row whenever
 * state.relationships[pair].firstFriendlyDayKey is set. See ui.js
 * _renderRelActionTray for the data shape.
 * ============================================================================ */
.rel-court-arc {
    margin-top: var(--spacing-sm);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    background: rgba(94, 44, 79, 0.10);
    border-left: 3px solid #5e2c4f;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rel-court-arc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rel-court-arc-label {
    color: var(--color-text-muted);
    font-weight: 600;
    min-width: 100px;
}
.rel-court-arc-meter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 140px;
}
.rel-court-arc-meter-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    min-width: 80px;
}
.rel-court-arc-meter-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6fbf6f, #3a8f3a);
    transition: width 0.3s ease-out;
}
.rel-court-arc-meter-numeric {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    white-space: nowrap;
}
.rel-court-arc-status {
    font-variant-numeric: tabular-nums;
}
.rel-court-arc-status-ready {
    color: #6fbf6f;
    font-weight: 600;
}
.rel-court-arc-status-pending {
    color: #c08a3e;
}
.rel-court-arc-cta {
    color: #6fbf6f;
    font-style: italic;
    font-size: 0.75rem;
    margin-top: 2px;
}
.rel-court-arc-not-started {
    margin-top: var(--spacing-sm);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-text-muted);
    background: rgba(192, 138, 62, 0.10);
    border-left: 3px solid #c08a3e;
}
.rel-court-arc-complete {
    background: rgba(58, 143, 58, 0.10);
    border-left-color: #3a8f3a;
}

/* Dimmed-gift hint (cycle-8 swarm-member-4 deliverable B) */
.rel-btn-gift-dimmed {
    filter: brightness(0.78) grayscale(0.25);
    position: relative;
}
.rel-btn-gift-dimmed::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px dashed rgba(192, 138, 62, 0.6);
    pointer-events: none;
    border-radius: inherit;
}
.rel-btn-dimmed-pill {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    background: rgba(192, 138, 62, 0.25);
    color: #c08a3e;
    font-size: 0.6rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =========================================================================
   Cycle 9 — Visual Effects System (pbe1 fan-out swarm-member-2)
   Closes cycle-5 NeurologyAnalysis "reward-learning UNDERENGAGED" finding
   and the `biogame-shadow-fun-deficit` guard. Particle bursts, screen-shake,
   directed coin-shower, page-level confetti, achievement spectacle modal,
   currency-gain flourish, location arrival burst, character-death sepia fade.
   See js/effects.js for orchestration. CSP-strict — keyframes only, no JS
   animation loops, transforms applied via CSS custom properties.
   ========================================================================= */

/* Common particle base — absolute pixel-anchored on body via fixed position.
   pointer-events:none so they never intercept clicks. */
.effect-particle {
    position: fixed;
    pointer-events: none;
    z-index: 2500;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    will-change: transform, opacity;
}

/* Particle burst — outward + upward float with rotation, fade out. */
.effect-particle-burst {
    animation-name: effect-burst-fly;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes effect-burst-fly {
    0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
    70% { opacity: 1; }
    100% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px) + 40px))
                   rotate(var(--rot, 0deg));
        opacity: 0;
    }
}

/* Sparkle — single symbol, brief upward drift, fade out. */
.effect-particle-sparkle {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
    animation-name: effect-sparkle-rise;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes effect-sparkle-rise {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -50px))) scale(1);
        opacity: 0;
    }
}

/* Confetti — page-top to bottom fall with horizontal drift and rotation. */
.effect-particle-confetti {
    width: 8px;
    height: 14px;
    border-radius: 1px;
    animation-name: effect-confetti-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes effect-confetti-fall {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translate(var(--dx, 0px), var(--dy, 600px)) rotate(var(--rot, 540deg));
        opacity: 0;
    }
}

/* Coin — directed flight from source to destination (sidebar money). */
.effect-particle-coin {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    color: #ffd700;
    font-weight: bold;
    font-size: 1.1rem;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.8), 1px 1px 2px rgba(0,0,0,0.4);
    animation-name: effect-coin-fly;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    animation-fill-mode: forwards;
}
@keyframes effect-coin-fly {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    85% { opacity: 1; }
    100% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.6);
        opacity: 0;
    }
}

/* Brief scale-pulse on the destination money display when coins arrive. */
.effect-money-pulse {
    animation: effect-money-pulse-anim 400ms ease-out;
}
@keyframes effect-money-pulse-anim {
    0%, 100% { transform: scale(1); box-shadow: none; }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 16px 2px rgba(255, 215, 0, 0.5);
    }
}

/* Screen-shake — three intensities. Animation runs once per class-add. */
@keyframes effect-shake-light-anim {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(1px, -2px); }
    75% { transform: translate(2px, -1px); }
}
@keyframes effect-shake-medium-anim {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-4px, 2px); }
    40% { transform: translate(3px, -3px); }
    60% { transform: translate(-3px, 3px); }
    80% { transform: translate(4px, -2px); }
}
@keyframes effect-shake-heavy-anim {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-7px, 3px) rotate(-0.4deg); }
    25% { transform: translate(6px, -5px) rotate(0.5deg); }
    40% { transform: translate(-5px, 6px) rotate(-0.3deg); }
    55% { transform: translate(7px, -4px) rotate(0.4deg); }
    70% { transform: translate(-6px, 5px) rotate(-0.2deg); }
    85% { transform: translate(4px, -3px) rotate(0.2deg); }
}
.effect-shake-light  { animation: effect-shake-light-anim  200ms ease-in-out; }
.effect-shake-medium { animation: effect-shake-medium-anim 300ms ease-in-out; }
.effect-shake-heavy  { animation: effect-shake-heavy-anim  500ms ease-in-out; }

/* Death overlay — full-page sepia fade, in then out. */
.effect-death-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(101, 67, 33, 0.65);
    pointer-events: none;
    z-index: 3000;
    mix-blend-mode: multiply;
    animation-name: effect-death-fade;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes effect-death-fade {
    0%   { opacity: 0; }
    25%  { opacity: 0.85; }
    100% { opacity: 0; }
}

/* Achievement spectacle modal — make UI.showModal feel celebratory.
   Body wrapper is supplied as `.effect-achievement-card` by the caller. */
.effect-achievement-card {
    text-align: center;
    padding: var(--spacing-md);
    animation: effect-card-enter 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.effect-achievement-card .effect-achievement-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
    filter: drop-shadow(0 0 8px gold);
}
.effect-achievement-card .effect-achievement-name {
    font-size: 1.6rem;
    font-weight: bold;
    color: gold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: var(--spacing-xs);
}
.effect-achievement-card .effect-achievement-desc {
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: var(--spacing-md);
}
@keyframes effect-card-enter {
    0%   { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

/* Larger floating-text variant for big-money gains (>=$50). */
.floating-text.floating-large {
    font-size: 1.8rem;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 1px 2px 4px rgba(0,0,0,0.6);
}
.floating-text.floating-mega {
    font-size: 2.4rem;
    color: gold;
    text-shadow: 0 0 12px gold, 1px 2px 4px rgba(0,0,0,0.8);
}

/* Reduce-motion respect — users with prefers-reduced-motion get no shake
   and instant particle fadeout (effect still triggers semantically so audio
   cues + dispatched events fire normally). */
@media (prefers-reduced-motion: reduce) {
    .effect-particle,
    .effect-shake-light,
    .effect-shake-medium,
    .effect-shake-heavy,
    .effect-money-pulse,
    .effect-death-overlay,
    .effect-achievement-card {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Cycle-9 track-4 (swarm-member-4) — moment-of-delight modal narrative
   styling. Used by MomentsSystem modal HTML to give the LIFE-tier moments
   (first-wagon, major-arrival, marriage, generational-transition,
   historical-personal) a slightly more literary feel than a routine modal. */
.moment-narrative {
    font-style: italic;
    color: #c4b490;
    line-height: 1.6;
    margin: 0.6em 0;
}
.moment-narrative-major {
    font-size: 1.1em;
    font-weight: 600;
    color: #d4a574;
    border-left: 3px solid #d4a574;
    padding-left: 0.8em;
    margin: 0.8em 0;
}

/* ============================================================================
   Cycle 10 (pbe1 residual-closures swarm-member-1) — F3 Village Rumor Feed
   "What they're saying" sidebar panel.
   ============================================================================ */
.ck2-rumor-list {
    padding: 4px 6px 6px 6px;
    max-height: 320px;
    overflow-y: auto;
}
.rumor-line {
    font-style: italic;
    opacity: 0.85;
    padding: 4px 6px;
    border-left: 2px solid var(--color-accent);
    margin: 2px 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
    background: rgba(201, 162, 39, 0.04);
}

/* ============================================================================
   Cycle 10 (pbe1 residual-closures swarm-member-1) — F5 Year-End Saga
   modal sections rendered inside UI.showModal.
   ============================================================================ */
.year-saga {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.saga-headline {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-accent);
    text-align: center;
}
.saga-subhead {
    font-size: 1rem;
    color: var(--color-text-secondary);
    text-align: center;
    font-style: italic;
    margin-bottom: 0.6rem;
}
.saga-section {
    border: 1px solid var(--color-accent-dark);
    border-radius: 4px;
    background: rgba(201, 162, 39, 0.05);
    padding: 0;
    overflow: hidden;
}
.saga-section-title {
    cursor: pointer;
    user-select: none;
    padding: 0.5rem 0.7rem;
    font-weight: bold;
    color: var(--color-accent);
    background: linear-gradient(to bottom, rgba(201, 162, 39, 0.10), rgba(201, 162, 39, 0.04));
    list-style: none;
}
.saga-section-title::-webkit-details-marker { display: none; }
.saga-section-title::before {
    content: '▶ ';
    font-size: 0.8em;
    color: var(--color-accent-dark);
    transition: transform 0.15s;
}
details[open] .saga-section-title::before { content: '▼ '; }
.saga-section-count {
    font-weight: normal;
    color: var(--color-text-secondary);
    margin-left: 0.4em;
    font-size: 0.85em;
}
.saga-section-body {
    padding: 0.4rem 0.7rem 0.5rem 0.9rem;
}
.saga-row {
    padding: 3px 0;
    line-height: 1.4;
    border-bottom: 1px dotted rgba(196, 180, 144, 0.20);
}
.saga-row:last-child { border-bottom: none; }
.saga-empty {
    font-style: italic;
    color: var(--color-text-secondary);
    opacity: 0.7;
}
.saga-resource-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.saga-delta-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}
.saga-delta-label { color: var(--color-text-secondary); }
.saga-delta-pos { color: #5a4; }
.saga-delta-neg { color: #c44; }
.saga-delta-zero { color: var(--color-text-secondary); opacity: 0.7; }

/* ------------------------------------------------------------------
 * cycle-11 M1: under-portrait Player Options panel
 * + collapsed-by-default action menu styles
 * + sub-location icon (place icon) styles
 * ------------------------------------------------------------------ */

.ck2-player-options {
    margin: var(--spacing-xs) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ck2-option-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    background: var(--color-bg-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 6px 10px;
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}

.ck2-option-toggle:hover {
    background: var(--color-bg-light);
    border-color: var(--color-accent);
}

.ck2-option-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.ck2-option-icon {
    font-size: 0.95rem;
    color: var(--color-accent-light);
}

.ck2-option-label {
    flex: 1;
    font-weight: 600;
}

.ck2-option-state {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-bg-dark);
    padding: 1px 6px;
    border-radius: 8px;
}

.ck2-option-toggle[aria-expanded="true"] .ck2-option-state {
    color: var(--color-accent-light);
    background: var(--color-bg-darker, var(--color-bg-dark));
}

/* Collapsed action panel — shows a single hint banner */
#action-panel.collapsed {
    max-height: none;
    padding: var(--spacing-sm) var(--spacing-md);
}

.action-panel-collapsed-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 6px 10px;
    background: var(--color-bg-medium);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
}

.action-panel-collapsed-hint .collapsed-hint-text {
    color: var(--color-text-muted);
    flex: 1;
}

/* Place icons inside the sub-locations list */
.sub-loc-icon.sub-loc-icon-image {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
}

.sub-loc-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--color-bg-dark);
}