/* VsD Character Creator - Main Styles */

/* Font Definitions */
@font-face {
    font-family: 'Spellcaster';
    src: url('../assets/fonts/CC Spellcaster/CCSpellcaster Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* CSS Variables for Monochrome Theme */
:root {
    --primary: #000000;
    --secondary: #333333;
    --accent: #666666;
    --dark: #1a1a1a;
    --light: #ffffff;
    --light-grey: #f8f9fa;
    --medium-grey: #e9ecef;
    --text: #212529;
    --text-light: #6c757d;
    --border: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.1);
    --hover: rgba(0, 0, 0, 0.05);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--light-grey);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Styles */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--light);
    color: var(--text);
    padding: 1rem 2rem;
    box-shadow: 0 2px 10px var(--shadow);
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border);
}

.main-header.compact {
    padding: 0.75rem 2rem;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.vsd-logo {
    height: 60px;
    width: auto;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.main-header.compact .vsd-logo {
    height: 40px;
}

.header-text {
    flex: 1;
    min-width: 0;
}

.header-text h1 {
    font-family: 'Spellcaster', serif;
    font-size: 2.2rem;
    margin: 0;
    line-height: 1.2;
    transition: all 0.3s ease;
    color: var(--primary);
}

.main-header.compact .header-text h1 {
    font-size: 1.8rem;
}

.header-text p {
    font-size: 1rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.3;
    transition: all 0.3s ease;
}

.main-header.compact .header-text p {
    font-size: 0.9rem;
}

/* Progress Navigation */
.progress-nav {
    position: fixed;
    top: 92px;
    left: 0;
    right: 0;
    background: var(--light);
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    z-index: 999;
    transition: all 0.3s ease;
}

.progress-nav.compact {
    top: 72px;
    padding: 0.75rem 2rem;
}

.progress-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--medium-grey);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 3px;
}

.step-indicators {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.3s ease;
    min-width: 70px;
}

.step-indicator.active {
    color: var(--primary);
}

.step-indicator.completed {
    color: var(--secondary);
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--medium-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: background 0.3s ease;
    font-size: 0.9rem;
}

.step-indicator.active .step-number {
    background: var(--primary);
    color: var(--light);
}

.step-indicator.completed .step-number {
    background: var(--secondary);
    color: var(--light);
}

.step-label {
    font-size: 0.8rem;
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
}

/* Main Content - Full width without character summary sidebar */
.main-content {
    flex: 1;
    display: flex;
    margin-top: 160px; /* Account for fixed header + nav */
    margin-right: 0; /* Full width - no sidebar */
    transition: margin-top 0.3s ease;
}

.main-content.compact-header {
    margin-top: 140px;
}

.wizard-container {
    flex: 1;
    max-width: 1200px; /* Increased from 800px to utilize more space */
    margin: 0 auto;
    padding: 2rem;
}

.wizard-step {
    margin-bottom: 4rem;
    scroll-margin-top: 140px;
}

.wizard-step:last-child {
    margin-bottom: 2rem;
}

.step-header {
    margin-bottom: 2rem;
    text-align: center;
}

.step-header h2 {
    font-family: 'Spellcaster', serif;
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.step-header p {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.step-content {
    background: var(--light);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px var(--shadow);
    border: 1px solid var(--border);
}

/* Navigation Buttons - Hidden in scroll layout */
.wizard-navigation {
    display: none;
}

/* Character Summary Sidebar - REMOVED to provide more space for tables */

/* Base Stat Values Display */
.base-stat-values {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.base-stat-values h5 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    text-align: center;
}

.base-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.base-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.base-stat-item .stat-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.85rem;
}

.base-stat-item .stat-value {
    font-weight: bold;
    color: var(--primary);
    font-family: monospace;
    font-size: 0.9rem;
}

/* Vocation Step Styles */
.vocation-selection {
    margin-bottom: 2rem;
}

/* Vocation Header with Toggle */
.vocation-header-with-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border);
}

.vocation-header-with-toggle h3 {
    margin: 0;
    font-family: 'Spellcaster', serif;
    font-size: 1.5rem;
    color: var(--primary);
}

/* Additional Vocations Toggle Switch */
.additional-vocations-toggle {
    display: flex;
    align-items: center;
    position: relative;
}

.additional-vocations-toggle .toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.additional-vocations-toggle .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.additional-vocations-toggle .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100, 116, 139, 0.3);
    transition: 0.3s;
    border-radius: 24px;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.additional-vocations-toggle .toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.additional-vocations-toggle .toggle-switch input:checked + .toggle-slider {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.additional-vocations-toggle .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.additional-vocations-toggle .toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Tooltip for Additional Vocations Toggle */
.additional-vocations-toggle .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 9999;
    background-color: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.additional-vocations-toggle:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.additional-vocations-toggle .tooltip-content {
    text-align: center;
    color: var(--text);
    font-family: 'Playfair Display', serif;
}

.additional-vocations-toggle .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.additional-vocations-toggle .tooltip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: var(--border) transparent transparent transparent;
    margin-top: -1px;
}

/* Horizontal Vocation Buttons Layout */
.vocation-buttons-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}

/* Additional Vocations Row Styling */
.additional-vocations-row {
    margin-top: 0.5rem;
    background: rgba(139, 69, 19, 0.03);
    border-color: rgba(139, 69, 19, 0.2);
}

.vocation-button {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-family: 'Spellcaster', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    position: relative;
}

.vocation-button:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vocation-button.selected {
    background: linear-gradient(135deg, var(--primary) 0%, #8B4513 100%);
    border-color: var(--primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.3);
}

/* Superstitious Trait Restriction Styling */
.vocation-button.vocation-restricted {
    opacity: 0.7;
    border-color: #dc3545;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
}

.vocation-button.vocation-restricted:hover {
    border-color: #c82333;
    background: linear-gradient(135deg, #ffe5e5 0%, #ffcccc 100%);
}

.vocation-button.vocation-restricted.selected {
    opacity: 1;
    background: linear-gradient(135deg, var(--primary) 0%, #8B4513 100%);
    border-color: var(--primary);
}

.restriction-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    margin-top: 0.25rem;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.02em;
}

.vocation-button.selected .restriction-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.vocation-cards {
    display: none; /* Hide the old card layout */
}

/* Vocation Restriction Modal (Superstitious Trait) */
.vocation-restriction-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.vocation-restriction-modal {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    overflow: hidden;
    animation: slideIn 0.3s ease;
}

.vocation-restriction-modal-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    border-bottom: 3px solid #bd2130;
}

.vocation-restriction-modal-header h3 {
    margin: 0;
    font-family: 'Spellcaster', serif;
    font-size: 1.3rem;
    font-weight: 400;
}

.vocation-restriction-modal-content {
    padding: 1.5rem;
    font-family: 'Playfair Display', serif;
    line-height: 1.6;
}

.vocation-restriction-modal-content p {
    margin: 0 0 1rem 0;
    color: var(--text);
}

.vocation-restriction-modal-content p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: #495057;
}

.vocation-restriction-modal-footer {
    padding: 0.75rem 1.5rem;
    background: white;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.vocation-restriction-modal-footer button {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.vocation-restriction-modal-footer .btn-bypass {
    background: #28a745;
    color: white;
    border: 2px solid #28a745;
}

.vocation-restriction-modal-footer .btn-bypass:hover {
    background: #218838;
    border-color: #218838;
}

.vocation-restriction-modal-footer .btn-cancel {
    background: white;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
}

.vocation-restriction-modal-footer .btn-cancel:hover {
    background: #f5f5f5;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Vocation Details Panel */
.vocation-details-panel {
    background: white;
    border: 3px solid var(--primary);
    border-radius: 12px;
    margin-top: 1.5rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(139, 69, 19, 0.2);
    display: none; /* Hidden by default */
}

.vocation-details-panel.visible {
    display: block;
}

.vocation-details-header {
    background: var(--primary);
    color: white;
    padding: 1.5rem 2rem;
    text-align: center;
}

.vocation-details-header h3 {
    font-family: 'Spellcaster', serif;
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
}

.vocation-details-header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.4;
}

.vocation-details-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vocation-card {
    background: var(--light-grey);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.vocation-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.vocation-card.selected {
    border-color: var(--primary);
    background: rgba(139, 69, 19, 0.1);
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.25);
    transform: translateY(-3px);
}

/* Vocation Card Header */
.vocation-card-header {
    background: #1a1a1a;
    color: white;
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.vocation-card h4 {
    font-family: 'Spellcaster', serif;
    color: white;
    margin: 0 0 0.5rem 0;
    font-size: 1.6rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vocation-description {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Vocation View Toggle */
.vocation-view-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}

.toggle-label {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 30px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(30px);
}

.toggle-mode-label {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
}

/* Vocation Card Content - Full Width Layout */
.vocation-card-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    flex: 1;
    background: white;
}

/* Compact View Styles */
.vocation-cards.compact-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Compact Cards Row */
.compact-cards-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    order: 1; /* Appear first */
}

.vocation-card.compact {
    min-height: auto;
    padding: 0;
    order: 2; /* Compact cards appear first in row */
}

.vocation-card.compact:not(.selected) {
    order: 2;
}

.vocation-card.compact .vocation-card-header {
    padding: 0.75rem 0.5rem;
    text-align: center;
}

.vocation-card.compact .vocation-card-header h4 {
    font-size: 0.95rem;
    margin: 0;
}

.vocation-card.compact .vocation-card-header .vocation-description {
    display: none; /* Remove descriptions to save space */
}

.vocation-card.compact .vocation-card-content {
    display: none;
}

/* Full-Width Expansion for Selected Card in Compact Mode */
.vocation-card.compact.selected {
    order: 3; /* Appear after compact cards row */
    width: 100%;
    max-width: none;
    margin: 0;
    border: 3px solid var(--primary);
    box-shadow: 0 8px 24px rgba(139, 69, 19, 0.3);
    transform: none;
    background: rgba(139, 69, 19, 0.02);
    border-radius: 12px;
    overflow: hidden;
}

.vocation-card.compact.selected .vocation-card-content {
    display: flex;
    padding: 2rem;
}

.vocation-card.compact.selected .vocation-card-header {
    padding: 1.5rem 2rem;
    background: var(--primary);
    display: block; /* Override compact header hiding */
}

.vocation-card.compact.selected .vocation-card-header h4 {
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
}

.vocation-card.compact.selected .vocation-card-header .vocation-description {
    display: block; /* Show description in expanded mode */
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Vocation Card Sections */
.vocation-section {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1rem;
}

.vocation-section h5 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

/* ========== KIN SELECTION STYLES ========== */

.kin-selection {
    margin-bottom: 2rem;
}

.kin-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}

.kin-button {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.kin-button-name {
    font-family: 'Spellcaster', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.kin-button-abbr {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

.kin-button:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kin-button.selected {
    background: linear-gradient(135deg, var(--primary) 0%, #8B4513 100%);
    border-color: var(--primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.3);
}

.kin-button.selected .kin-button-name,
.kin-button.selected .kin-button-abbr {
    color: white;
}

/* Kin Details Panel */
.kin-details-panel {
    background: white;
    border: 3px solid var(--primary);
    border-radius: 12px;
    margin-top: 2rem;
    padding: 0;
    display: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kin-details-panel.visible {
    display: block;
}

/* ========== CULTURE SELECTION STYLES ========== */

.culture-selection {
    margin-bottom: 2rem;
}

.culture-selection h3 {
    font-family: 'Spellcaster', serif;
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.culture-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}

.culture-button {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-family: 'Spellcaster', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.culture-button:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.culture-button.selected {
    background: linear-gradient(135deg, var(--primary) 0%, #8B4513 100%);
    border-color: var(--primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.3);
}

/* Culture Details Panel */
.culture-details-panel {
    background: white;
    border: 3px solid var(--primary);
    border-radius: 12px;
    margin-top: 2rem;
    padding: 0;
    display: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.culture-details-panel.visible {
    display: block;
}

.culture-details-header {
    background: #000;
    color: white !important;
    padding: 1.5rem 2rem;
    text-align: center;
}

.culture-details-header h3 {
    font-family: 'Spellcaster', serif;
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    color: white !important;
}

.culture-details-header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.4;
    text-align: justify;
    color: white !important;
}

.culture-details-content {
    padding: 2rem;
}

.culture-info-section {
    margin: 1.5rem 0;
}

.culture-info-section h5 {
    font-family: 'Spellcaster', serif;
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.culture-info-section p {
    line-height: 1.6;
    color: #333;
    text-align: justify;
}

/* Cultural Spell Lore Allocation UI - Uses same styles as Lore of the Ages */
/* See .lore-of-ages-control, .spell-lore-rank-distribution, .rank-item, .rank-controls, .rank-btn, .rank-value, .rank-summary */

/* Cultural Outfit Selection Styles */
.culture-outfit-section {
    background: rgba(139, 69, 19, 0.03);
    border: 1px solid rgba(139, 69, 19, 0.15);
    border-radius: 8px;
    padding: 1.5rem;
}

.culture-outfit-section h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.optional-label {
    font-size: 0.85rem;
    font-weight: normal;
    color: #6c757d;
    font-style: italic;
}

.culture-outfit-section > p {
    margin-bottom: 1rem;
    color: #555;
    font-size: 0.95rem;
}

.outfit-sets-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.outfit-set {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
}

.outfit-set h6 {
    font-family: 'Spellcaster', serif;
    font-size: 1rem;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.outfit-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.outfit-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.outfit-option:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.outfit-option input[type="radio"] {
    margin-top: 0.25rem;
    margin-right: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}

.outfit-option input[type="radio"]:checked + .outfit-option-text {
    font-weight: 600;
}

.outfit-option:has(input[type="radio"]:checked) {
    background: rgba(139, 69, 19, 0.1);
    border-color: rgba(139, 69, 19, 0.5);
}

.outfit-option-text {
    flex: 1;
}

.outfit-option-text strong {
    color: var(--primary);
    font-size: 0.95rem;
}

/* Culture Full-Width Sections (matching vocation format) */
.culture-full-width-section {
    margin: 1.5rem 0;
}

.culture-full-width-section h5 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

.culture-info-table h5 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

.culture-wealth-section {
    background: rgba(139, 69, 19, 0.05);
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
}

.culture-wealth-section h5 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid rgba(139, 69, 19, 0.3);
    padding-bottom: 0.75rem;
}

.culture-wealth-section strong {
    font-size: 1.5rem;
    color: var(--primary);
    font-family: 'Playfair Display', serif;
}

/* Legacy styles kept for backwards compatibility */
.cultural-skills-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: rgba(139, 69, 19, 0.05);
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
}

.skill-category-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skill-category-title {
    font-family: 'Spellcaster', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
}

.skill-rank-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    background: white;
    border-radius: 4px;
    font-size: 0.9rem;
}

.skill-rank-name {
    color: #555;
    font-weight: 500;
}

.skill-rank-value {
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
}

/* Culture Attributes Grid */
.culture-attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(139, 69, 19, 0.05);
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
}

.culture-attribute {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

/* Character Summary */
.character-summary-container {
    max-width: 1200px;
    margin: 1rem auto 0;
    padding: 0 2rem;
}

.character-summary {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(139, 69, 19, 0.05);
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
}

.summary-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid var(--primary);
    border-radius: 8px;
    min-width: 80px;
    cursor: help;
    transition: all 0.3s ease;
}

.summary-stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.2);
}

.summary-stat-label {
    font-family: 'Spellcaster', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.summary-stat-value {
    font-family: 'Spellcaster', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
    .cultural-skills-table {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .culture-buttons-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .character-summary-container {
        padding: 0 1rem;
    }
}

/* ========== BACKGROUND SELECTION STYLES ========== */

.background-selection {
    margin-bottom: 2rem;
}

.background-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e8e8e8;
}

.background-header h3 {
    font-family: 'Spellcaster', serif;
    font-size: 1.5rem;
    color: var(--primary);
    margin: 0;
}

.bp-counter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(139, 69, 19, 0.05);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 2px solid rgba(139, 69, 19, 0.2);
}

.bp-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.bp-value {
    font-family: 'Spellcaster', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}

.selected-backgrounds-container {
    margin-bottom: 2rem;
}

.selected-background-card {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.selected-background-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.selected-background-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.selected-background-header h4 {
    font-family: 'Spellcaster', serif;
    font-size: 1.3rem;
    color: var(--primary);
    margin: 0;
}

.selected-background-actions {
    display: flex;
    gap: 0.5rem;
}

.edit-background-btn,
.remove-background-btn,
.switch-tier-btn {
    padding: 0.5rem 1rem;
    border: 2px solid;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.switch-tier-btn {
    background: white;
    color: #1a1a1a;
    border-color: #1a1a1a;
}

.switch-tier-btn:hover:not(:disabled) {
    background: #1a1a1a;
    color: white;
}

.switch-tier-btn:disabled {
    background: #f0f0f0;
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
}

/* Progression controls container (inside Step 7) */
.progression-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.btn-progression-placeholder {
    display: block;
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: white;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-progression-placeholder + .btn-progression-placeholder {
    margin-top: 0.75rem;
}

.btn-progression-placeholder:hover {
    background: #1a1a1a;
    color: white;
}

/* Selected achievements inline display */
#selected-achievements-display {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

#selected-achievements-display:empty {
    display: none;
}

.selected-achievements-list {
    list-style: none;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fafafa;
}

.selected-achievements-list li {
    font-size: 0.9rem;
    color: #1a1a1a;
    line-height: 1.55;
    padding: 0.15rem 0;
}

.selected-achievements-list li + li {
    border-top: 1px solid #ececec;
    padding-top: 0.3rem;
    margin-top: 0.15rem;
}

.selected-achievements-xp {
    font-weight: 700;
    white-space: nowrap;
}

.selected-achievements-empty {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    padding: 0.4rem 0;
}

/* ===== Level Progression Recap (Step 7) ===== */
#level-progression-recap-display:empty,
#character-history-recap-display:empty {
    display: none;
}

.level-progression-recap {
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fafafa;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #1a1a1a;
}

.lvl-recap-heading {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #1a1a1a;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.4rem;
}

.lvl-recap-block {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px dashed #e0e0e0;
}

.lvl-recap-block:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.lvl-recap-level-heading {
    font-size: 0.9rem;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.lvl-recap-line {
    margin: 0.15rem 0 0.1rem 0.75rem;
    line-height: 1.5;
    color: #333;
}

.lvl-recap-label {
    font-weight: 600;
    color: #1a1a1a;
    margin-right: 0.25em;
}

.lvl-recap-items {
    color: #444;
}

.lvl-recap-empty {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    margin: 0;
    padding: 0.2rem 0;
}

/* ===== Character Progression (Level-Up) Modal ===== */
.level-up-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.level-up-modal-backdrop[aria-hidden="false"] {
    display: flex;
}

.level-up-modal {
    width: min(900px, 95vw);
    max-height: 90vh;
    background: rgba(15, 15, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 0 1.5rem 0;
    box-shadow: 0 40px 70px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
}

.level-up-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Spellcaster', serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    position: sticky;
    top: 0;
    margin: 0 -1.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(15, 15, 20, 0.99);
    border-radius: 16px 16px 0 0;
    z-index: 10;
}

.level-up-modal-header button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.level-up-modal-header button:hover {
    color: rgba(255, 255, 255, 0.9);
}

.level-up-modal-intro {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.level-up-level-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.level-up-level-selector label {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    white-space: nowrap;
}

.level-up-level-selector select {
    flex: 1;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    cursor: pointer;
}

.level-up-starting-xp-label {
    font-family: 'Playfair Display', serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.level-up-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.level-up-section:last-child {
    margin-bottom: 0;
}

.level-up-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em;
}

.level-up-section-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(59, 130, 246, 0.5);
    border-radius: 4px;
}

.level-up-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    position: sticky;
    bottom: 0;
    margin: 0 -1.5rem;
    background: rgba(15, 15, 20, 0.99);
    border-radius: 0 0 16px 16px;
    z-index: 10;
}

.level-up-save-btn {
    padding: 0.5rem 1.5rem;
    background: white;
    border: 1px solid white;
    border-radius: 8px;
    color: #1a1a1a;
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.level-up-save-btn:hover {
    background: #e8e8e8;
    border-color: #e8e8e8;
}

/* DP +/- buttons inside level-up modal */
.level-up-dp-btn,
.level-up-spell-lore-dp-btn {
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.level-up-dp-btn:hover:not(:disabled),
.level-up-spell-lore-dp-btn:hover:not(:disabled) {
    background: #444;
    transform: scale(1.1);
}

/* Learn New Spell Lore button (narrative-gated unlock) */
.btn-learn-lore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.btn-learn-lore:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.btn-learn-lore:active {
    transform: scale(0.95);
}

/* Remove newly-learned Spell Lore button (only shown at level it was learned) */
.btn-remove-lore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #ffffff;
    color: #b00020;
    border: 1.5px solid #b00020;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.btn-remove-lore:hover {
    background: #ffe5e9;
    transform: scale(1.05);
}

.btn-remove-lore:active {
    transform: scale(0.95);
}

/* Source label shown next to a Spell Lore name (Vocational / Kin / Common) */
.spell-lore-source-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    margin-left: 0.35rem;
    letter-spacing: 0.02em;
}

.level-up-dp-btn:disabled,
.level-up-spell-lore-dp-btn:disabled {
    background: #555;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Category header */
.level-up-category-header {
    background: #2c2c2c;
    color: white;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.level-up-category-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.level-up-category-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.level-up-category-info strong {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.06em;
}

.level-up-dp-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.level-up-category-buttons {
    display: flex;
    gap: 0.5rem;
}

.level-up-trade-dp-btn,
.level-up-specialty-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border: 1px solid white;
    background: transparent;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.level-up-trade-dp-btn:hover,
.level-up-specialty-btn:hover {
    background: white;
    color: #1a1a1a;
}

/* Skills table */
.level-up-skills-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    background: white;
}

.level-up-skills-table thead th {
    background: #2c2c2c;
    color: white;
    padding: 0.5rem 0.6rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    border-bottom: 2px solid #dee2e6;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

.level-up-skills-table thead th:first-child { text-align: left; }

.level-up-skills-table tbody td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    text-align: center;
    color: #1a1a1a;
    font-family: 'Playfair Display', serif;
    vertical-align: middle;
}

.level-up-skills-table tbody td:first-child {
    text-align: left;
    color: black;
}

.level-up-skills-table tbody tr:nth-child(even) { background-color: rgba(248, 250, 252, 0.95); }
.level-up-skills-table tbody tr:hover { background-color: rgba(59, 130, 246, 0.08); }

.level-up-dp-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.level-up-dp-value {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

.level-up-category-header + .level-up-skills-table { margin-bottom: 1.5rem; }

#creator-level-up-available-spell-lores-container .level-up-skills-table tbody tr { opacity: 0.85; }

/* ===== Achievement Builder Modal ===== */
.achievement-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.achievement-modal {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    max-width: 680px;
    width: 94%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.achievement-modal-header {
    background: #000;
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 3px solid #6d3710;
}

.achievement-modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    font-family: 'Spellcaster', serif;
    font-weight: 400;
    letter-spacing: 0.03em;
}

.achievement-modal-close {
    background: none;
    border: none;
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.achievement-modal-close:hover {
    background: rgba(255,255,255,0.15);
}

.achievement-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 1.5rem;
}

.achievement-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #1a1a1a;
}

.achievement-section-title:not(:first-child) {
    margin-top: 1.5rem;
}

.achievement-note {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 1rem 0;
    font-style: italic;
}

.achievement-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.achievement-row:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.achievement-row.selected {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: white;
}

.achievement-row input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: #1a1a1a;
}

.achievement-row.selected input[type="checkbox"] {
    accent-color: white;
}

.achievement-row-content {
    flex: 1;
}

.achievement-text {
    font-size: 0.95rem;
    line-height: 1.5;
}

.achievement-recommended-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.3rem;
    margin-left: 0.4rem;
    vertical-align: middle;
    opacity: 0.8;
}

.achievement-xp-control {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.achievement-xp-label {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.85;
}

.achievement-xp-select {
    padding: 0.15rem 0.4rem;
    border: 1px solid #999;
    border-radius: 4px;
    font-size: 0.85rem;
    background: white;
    color: #1a1a1a;
    cursor: pointer;
}

.achievement-row.selected .achievement-xp-select {
    background: #333;
    color: white;
    border-color: #666;
}

/* Custom achievement row */
.achievement-custom-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: #fafafa;
}

.achievement-custom-text {
    flex: 1;
    font-size: 0.9rem;
    color: #333;
}

.achievement-custom-xp {
    font-size: 0.8rem;
    color: #555;
    white-space: nowrap;
}

.achievement-custom-remove {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #999;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    font-size: 0.9rem;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}

.achievement-custom-remove:hover {
    border-color: #1a1a1a;
    color: #1a1a1a;
}

/* Add custom achievement form */
.achievement-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px dashed #bbb;
    border-radius: 6px;
    background: #fafafa;
}

.achievement-add-form input[type="text"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.achievement-add-form input[type="text"]:focus {
    outline: none;
    border-color: #1a1a1a;
}

.achievement-add-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.achievement-add-form select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
    background: white;
    cursor: pointer;
}

.achievement-add-btn {
    padding: 0.4rem 1rem;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.achievement-add-btn:hover {
    background: #333;
}

/* "Add" button inside the custom-entry form in the builder modal */
.achievement-builder-add-btn {
    padding: 0.4rem 1rem;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.achievement-builder-add-btn:hover {
    background: #333;
}

.achievement-toggle-form-btn {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: white;
    color: #1a1a1a;
    border: 1px dashed #999;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.achievement-toggle-form-btn:hover {
    border-color: #1a1a1a;
    background: #f5f5f5;
}

/* Achievement modal footer */
.achievement-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    background: white;
}

.achievement-cancel-btn {
    padding: 0.6rem 1.25rem;
    background: white;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.achievement-cancel-btn:hover {
    background: #f5f5f5;
}

.achievement-save-btn {
    padding: 0.6rem 1.25rem;
    background: #1a1a1a;
    color: white;
    border: 2px solid #1a1a1a;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.achievement-save-btn:hover {
    background: #333;
    border-color: #333;
}

.edit-background-btn {
    background: white;
    color: #17a2b8;
    border-color: #17a2b8;
}

.edit-background-btn:hover {
    background: #17a2b8;
    color: white;
}

.remove-background-btn {
    background: white;
    color: #dc3545;
    border-color: #dc3545;
}

.remove-background-btn:hover {
    background: #dc3545;
    color: white;
}

.selected-background-details {
    padding-top: 1rem;
    border-top: 1px solid #e8e8e8;
}

.background-tier-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.background-tier-badge.minor {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.background-tier-badge.major {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.background-description {
    font-style: italic;
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.background-benefits {
    margin-top: 1rem;
}

.background-benefits strong {
    color: var(--primary);
    display: block;
    margin-bottom: 0.5rem;
}

.background-benefits p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.background-tier-benefits {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.background-tier-benefits p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.background-tier-benefits:last-child {
    margin-bottom: 0;
}

.tier-benefits-label {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.minor-tier-benefits {
    background: transparent;
    border: 1px solid #1a1a1a;
}

.minor-tier-label {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
}

.major-tier-benefits {
    background: transparent;
    border: 1px solid #1a1a1a;
}

.major-tier-label {
    background: #1a1a1a;
    color: #ffffff;
}

.background-requirements {
    color: #856404;
    background: #fff3cd;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #ffc107;
    margin-top: 0.75rem;
}

.background-drawback {
    color: #721c24;
    background: #f8d7da;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #dc3545;
    margin-top: 0.75rem;
}

/* Background Custom Input (e.g., Assassin Allegiance) */
.background-custom-input {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(139, 69, 19, 0.05);
    border: 2px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
}

.background-custom-label {
    display: block;
    margin-bottom: 0.75rem;
}

.background-custom-label strong {
    display: block;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.background-custom-description {
    display: block;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

.background-custom-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 6px;
    background: white;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.3s ease;
}

.background-custom-textarea:focus {
    outline: none;
    border-color: rgba(139, 69, 19, 0.6);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.background-custom-textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
}

.background-custom-char-count {
    text-align: right;
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Background Skill Choice (e.g., Loremaster) */
.background-skill-choice {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.skill-choice-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.skill-choice-option:hover {
    border-color: rgba(139, 69, 19, 0.5);
    background: rgba(139, 69, 19, 0.05);
}

.skill-choice-option input[type="radio"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.skill-choice-option input[type="radio"]:checked + span {
    font-weight: 600;
    color: var(--primary);
}

.skill-choice-option span {
    font-size: 1rem;
    color: var(--text);
    transition: all 0.3s ease;
}

/* Eccentric Stat Dropdown */
.eccentric-stat-dropdown {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: white;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.eccentric-stat-dropdown:hover {
    border-color: rgba(139, 69, 19, 0.5);
}

.eccentric-stat-dropdown:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.eccentric-stat-dropdown option {
    padding: 0.5rem;
}

/* Eccentric Trait Dropdown (Major tier) */
.eccentric-trait-dropdown {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: white;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.eccentric-trait-dropdown:hover {
    border-color: rgba(139, 69, 19, 0.5);
}

.eccentric-trait-dropdown:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.eccentric-trait-dropdown option {
    padding: 0.5rem;
}

/* Lovable Rogue Stat Dropdown */
.lovable-rogue-stat-dropdown {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: white;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lovable-rogue-stat-dropdown:hover {
    border-color: rgba(139, 69, 19, 0.5);
}

.lovable-rogue-stat-dropdown:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.lovable-rogue-stat-dropdown option {
    padding: 0.5rem;
}

/* Gifted Stat Dropdowns */
.gifted-stat-dropdown,
.gifted-stat-dropdown-2 {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: white;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gifted-stat-dropdown:hover,
.gifted-stat-dropdown-2:hover {
    border-color: rgba(139, 69, 19, 0.5);
}

.gifted-stat-dropdown:focus,
.gifted-stat-dropdown-2:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.gifted-stat-dropdown option,
.gifted-stat-dropdown-2 option {
    padding: 0.5rem;
}

/* Stormcrow, Rogue Mage, Slayer & Mixed Ancestry Passion Dropdowns */
.stormcrow-passion-dropdown,
.rogue-mage-passion-dropdown,
.slayer-passion-dropdown,
.mixed-ancestry-culture-dropdown,
.mixed-ancestry-skill-dropdown,
.mixed-ancestry-major-skill-dropdown,
.mixed-ancestry-outfitting-dropdown,
.mixed-ancestry-passion-dropdown {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: white;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.stormcrow-passion-dropdown:hover,
.rogue-mage-passion-dropdown:hover,
.slayer-passion-dropdown:hover,
.mixed-ancestry-culture-dropdown:hover,
.mixed-ancestry-skill-dropdown:hover,
.mixed-ancestry-major-skill-dropdown:hover,
.mixed-ancestry-outfitting-dropdown:hover,
.mixed-ancestry-passion-dropdown:hover {
    border-color: rgba(139, 69, 19, 0.5);
}

.stormcrow-passion-dropdown:focus,
.rogue-mage-passion-dropdown:focus,
.slayer-passion-dropdown:focus,
.mixed-ancestry-culture-dropdown:focus,
.mixed-ancestry-skill-dropdown:focus,
.mixed-ancestry-major-skill-dropdown:focus,
.mixed-ancestry-outfitting-dropdown:focus,
.mixed-ancestry-passion-dropdown:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.stormcrow-passion-dropdown option,
.rogue-mage-passion-dropdown option,
.slayer-passion-dropdown option,
.mixed-ancestry-culture-dropdown option,
.mixed-ancestry-skill-dropdown option,
.mixed-ancestry-major-skill-dropdown option,
.mixed-ancestry-outfitting-dropdown option,
.mixed-ancestry-passion-dropdown option {
    padding: 0.5rem;
}

/* Background Custom Text Input (e.g., Unbreakable Bond companion name) */
.background-custom-text-input {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: white;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.background-custom-text-input:hover {
    border-color: rgba(139, 69, 19, 0.5);
}

.background-custom-text-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.no-backgrounds-message {
    text-align: center;
    padding: 3rem 2rem;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

.no-backgrounds-message p {
    margin: 0.5rem 0;
    color: #666;
}

.no-backgrounds-message .help-text {
    font-size: 0.9rem;
    color: #999;
    font-style: italic;
}

.add-background-section {
    text-align: center;
}

.add-background-btn {
    background: linear-gradient(135deg, var(--primary) 0%, #8B4513 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.add-background-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.3);
}

.add-background-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-background-btn .btn-icon {
    font-size: 1.5rem;
    font-weight: bold;
}

.bp-warning {
    color: #dc3545;
    font-weight: 600;
    margin-top: 1rem;
    font-size: 0.95rem;
}

/* Background Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.modal-content.background-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    animation: slideIn 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, #8B4513 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-bottom: 3px solid #6d3710;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-family: 'Spellcaster', serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* When modal-close is also a styled btn (footer buttons), restore btn appearance */
button.btn.modal-close {
    background: #e5e5e5;
    color: #333;
    font-size: 0.8rem;
    width: auto;
    height: auto;
    border-radius: 4px;
}
button.btn.modal-close:hover {
    background: #d0d0d0;
}

.modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

.background-modal-step {
    display: none;
}

.background-modal-step.active {
    display: block;
}

.modal-back-btn {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1.5rem;
}

.modal-back-btn:hover {
    background: var(--primary);
    color: white;
}

/* Background List (Step 1) */
.background-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.background-list-item {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.background-list-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.background-list-item.selected {
    background: rgba(139, 69, 19, 0.05);
    border-color: var(--primary);
}

.background-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.background-list-header h4 {
    font-family: 'Spellcaster', serif;
    font-size: 1.2rem;
    color: var(--primary);
    margin: 0;
}

.selected-badge {
    background: var(--primary);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.background-list-description {
    color: #666;
    font-style: italic;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.background-list-tiers {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

.tier-cost {
    color: var(--text);
}

.tier-cost strong {
    color: var(--primary);
    font-weight: 600;
}

/* Tier Selection (Step 2) */
.tier-selection-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tier-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.tier-option {
    background: white;
    border: 3px solid #dee2e6;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tier-option:hover:not(.disabled) {
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.tier-option.selected {
    border-color: var(--primary);
    background: rgba(139, 69, 19, 0.05);
}

.tier-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8f9fa;
}

.tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e8e8e8;
}

.tier-header h4 {
    font-family: 'Spellcaster', serif;
    font-size: 1.3rem;
    color: var(--primary);
    margin: 0;
}

.tier-cost-badge {
    background: var(--primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
}

.tier-benefits {
    margin-bottom: 1rem;
}

.tier-benefits strong {
    color: var(--primary);
    display: block;
    margin-bottom: 0.5rem;
}

.tier-benefits p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.tier-requirements {
    color: #856404;
    background: #fff3cd;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #ffc107;
    margin-top: 0.75rem;
}

.tier-drawback {
    color: #721c24;
    background: #f8d7da;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #dc3545;
    margin-top: 0.75rem;
}

.insufficient-bp {
    color: #dc3545;
    font-weight: 600;
    text-align: center;
    padding: 0.75rem;
    background: #f8d7da;
    border-radius: 6px;
    border: 1px solid #dc3545;
    margin-top: 0.75rem;
}

/* Confirmation (Step 3) */
.confirmation-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.confirmation-summary {
    background: white;
    border: 3px solid var(--primary);
    border-radius: 12px;
    padding: 2rem;
}

.confirmation-summary h4 {
    font-family: 'Spellcaster', serif;
    font-size: 1.5rem;
    color: var(--primary);
    margin: 0 0 1rem 0;
    text-align: center;
}

.tier-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.tier-badge.minor {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.tier-badge.major {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.confirmation-details {
    padding-top: 1rem;
    border-top: 2px solid #e8e8e8;
}

.confirmation-benefits {
    margin-bottom: 1.5rem;
}

.confirmation-benefits strong {
    color: var(--primary);
    display: block;
    margin-bottom: 0.5rem;
}

.confirmation-benefits p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.bp-summary {
    background: rgba(139, 69, 19, 0.05);
    border: 2px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.bp-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 1rem;
}

.bp-line.bp-total {
    border-top: 2px solid var(--primary);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.bp-line strong {
    color: var(--text);
}

.bp-line span {
    font-family: 'Spellcaster', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}

.confirmation-actions {
    display: flex;
    justify-content: center;
}

.confirm-background-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confirm-background-btn:hover {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.3);
}

.kin-details-header {
    background: #000;
    color: white;
    padding: 1.5rem 2rem;
    text-align: center;
}

.kin-details-header h3 {
    font-family: 'Spellcaster', serif;
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
}

.kin-details-header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.4;
    text-align: justify;
}

.kin-details-content {
    padding: 2rem;
}

.kin-stats-section {
    margin: 1.5rem 0;
}

.kin-stats-section h5 {
    font-family: 'Spellcaster', serif;
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.stat-mods-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-mod-item {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
}

.stat-mod-item.positive {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.stat-mod-item.negative {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.stat-mod-item.neutral {
    background: #e2e3e5;
    border-color: #6c757d;
    color: #383d41;
}

.kin-attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(139, 69, 19, 0.05);
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
}

.kin-attribute {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

.attribute-label {
    font-weight: 600;
    color: #555;
}

.attribute-value {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
}

.kin-traits-section {
    margin: 1.5rem 0;
}

.kin-traits-section h5 {
    font-family: 'Spellcaster', serif;
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.traits-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trait-item {
    background: #f8f9fa;
    border-left: 4px solid var(--primary);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.trait-item strong {
    color: var(--primary);
    display: block;
    margin-bottom: 0.25rem;
}

/* Trait Visual Indicators */
.trait-default {
    border-left-color: var(--primary);
}

.trait-requires-action {
    border-left-color: #dc3545;
    background: #fff5f5;
}

.trait-resolved {
    border-left-color: #28a745;
    background: #f0fff4;
}

.trait-disabled {
    border-left: 4px dashed #6c757d;
    background: #f5f5f5;
    opacity: 0.6;
}

.trait-disabled strong,
.trait-disabled em {
    color: #6c757d;
}

/* Trait Warning Message */
.trait-warning {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: #856404;
    font-size: 0.95rem;
}

/* Trait Interactive Elements */
.trait-interactive {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trait-control {
    margin-top: 0.5rem;
}

.specialization-dropdown {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.95rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.specialization-dropdown:hover {
    border-color: var(--primary);
}

.specialization-dropdown:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.trait-selection-display {
    color: #28a745;
    font-weight: 600;
    font-style: italic;
}

/* Lore of the Ages Rank Distribution Styles */
.lore-of-ages-control {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.spell-lore-rank-distribution {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rank-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.rank-item label {
    font-weight: 600;
    color: #333;
    margin: 0;
}

.rank-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rank-btn {
    width: 32px;
    height: 32px;
    border: 2px solid var(--primary);
    background: white;
    color: var(--primary);
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.rank-btn:hover:not(:disabled) {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}

.rank-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.rank-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #ccc;
    color: #ccc;
}

.rank-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    min-width: 20px;
    text-align: center;
}

.rank-summary {
    text-align: center;
    padding: 0.5rem;
    background: #e9ecef;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #495057;
}

.rank-summary strong {
    color: var(--primary);
    font-weight: 700;
}

/* Stat Reassignment Trait Styles */
.trait-stat-reassignment {
    margin-top: 0.75rem;
}

.trait-instruction {
    font-weight: 600;
    color: #555;
    margin-bottom: 0.5rem;
}

.trait-current-value {
    color: #666;
    margin-bottom: 0.75rem;
}

/* Success Message (Green) */
.trait-success-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 0.75rem;
    border-radius: 4px;
    margin: 0;
}

/* Warning Box (Red) */
.trait-warning-box {
    background: #fff5f5;
    border: 2px solid #dc3545;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.trait-warning-title {
    font-weight: 700;
    color: #dc3545;
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.trait-warning-text {
    color: #721c24;
    margin: 0;
    font-size: 0.95rem;
}

/* Current Stats Display */
.trait-current-stats {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.trait-stats-title {
    font-weight: 600;
    color: #333;
    margin: 0 0 0.5rem 0;
}

.trait-stats-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.trait-stats-list li {
    padding: 0.25rem 0;
    color: #555;
    font-size: 0.95rem;
}

.trait-requirement-text {
    color: #dc3545;
    font-weight: 600;
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid #dee2e6;
    font-size: 0.95rem;
}

/* Swap Display */
.trait-swap-display {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.trait-swap-display .trait-selection-display {
    margin: 0;
    color: #155724;
    font-weight: 600;
}

/* Action Buttons */
.trait-action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.btn-go-to-step1,
.btn-show-swap-options,
.btn-undo-swap {
    flex: 1;
    min-width: 180px;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid;
}

.btn-go-to-step1 {
    background: white;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-go-to-step1:hover {
    background: var(--primary);
    color: white;
}

.btn-show-swap-options {
    background: #17a2b8;
    color: white;
    border-color: #17a2b8;
}

.btn-show-swap-options:hover {
    background: #138496;
    border-color: #138496;
}

.btn-undo-swap {
    background: #ffc107;
    color: #333;
    border-color: #ffc107;
    padding: 0.5rem 1rem;
    min-width: auto;
}

.btn-undo-swap:hover {
    background: #e0a800;
    border-color: #e0a800;
}

.btn-go-to-step1:active,
.btn-show-swap-options:active,
.btn-undo-swap:active {
    transform: scale(0.98);
}

/* Swap Options UI */
.trait-swap-options {
    background: #e7f5ff;
    border: 2px solid #17a2b8;
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
}

.trait-swap-instruction {
    font-weight: 600;
    color: #0c5460;
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.trait-swap-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-swap-stat {
    flex: 1;
    min-width: 140px;
    background: white;
    color: #17a2b8;
    border: 2px solid #17a2b8;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-swap-stat:hover {
    background: #17a2b8;
    color: white;
}

.btn-swap-stat:active {
    transform: scale(0.98);
}

/* Help Text */
.trait-help-text {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    padding: 0.75rem;
    background: rgba(139, 69, 19, 0.05);
    border-radius: 4px;
}

.trait-stat-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.stat-reassign-button {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 120px;
}

.stat-reassign-button:hover {
    border-color: var(--primary);
    background: rgba(139, 69, 19, 0.05);
}

.stat-reassign-button.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.stat-reassign-button:active {
    transform: scale(0.98);
}

/* Character Sheet Traits Display */
.traits-display {
    padding: 1.5rem;
    background: white;
}

.traits-display .trait-item {
    margin-bottom: 1rem;
}

.traits-display .trait-item:last-child {
    margin-bottom: 0;
}

/* Conditional Bonus Chip (for character sheet) */
.conditional-bonus-chip {
    display: inline-block;
    background: #000;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: help;
    white-space: nowrap;
    position: relative;
    margin: 0 0.25rem;
}

.conditional-bonus-chip:hover {
    background: #333;
}

/* Ensure tooltip is hidden by default on chips */
.conditional-bonus-chip .tooltip {
    visibility: hidden;
    opacity: 0;
}

.conditional-bonus-chip:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.kin-cultures-section {
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(139, 69, 19, 0.05);
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
}

.kin-cultures-section h5 {
    font-family: 'Spellcaster', serif;
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.kin-cultures-section p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
}

.kin-doom-section {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
}

.kin-doom-section h5 {
    font-family: 'Spellcaster', serif;
    font-size: 1.1rem;
    color: #856404;
    margin-bottom: 0.5rem;
}

.doom-list {
    margin: 0.5rem 0 0 1.5rem;
    padding: 0;
    color: #856404;
}

.doom-list li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Development Points Grid */
.dp-costs {
    background: rgba(139, 69, 19, 0.05);
    border: 1px solid rgba(139, 69, 19, 0.2);
}

.dp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.dp-grid span {
    background: white;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dp-grid span::after {
    content: attr(data-value);
    font-weight: bold;
    color: var(--primary);
    font-family: monospace;
}

/* Magic Points Info - Full Width */
.vocation-mp-section {
    background: rgba(75, 0, 130, 0.05);
    border: 1px solid rgba(75, 0, 130, 0.2);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    width: 100%;
}

.vocation-mp-section h5 {
    font-family: 'Spellcaster', serif;
    color: #4B0082;
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid rgba(75, 0, 130, 0.3);
    padding-bottom: 0.75rem;
}

.vocation-mp-section strong {
    color: #4B0082;
    font-size: 1.1rem;
    display: block;
    margin-top: 0.5rem;
}

/* Spell Lore Lists Section */
.vocation-spell-lores-section {
    background: rgba(75, 0, 130, 0.08);
    border: 1px solid rgba(75, 0, 130, 0.25);
    border-radius: 8px;
    padding: 1.25rem;
    width: 100%;
}

.vocation-spell-lores-section h5 {
    font-family: 'Spellcaster', serif;
    color: #4B0082;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid rgba(75, 0, 130, 0.3);
    padding-bottom: 0.75rem;
    text-align: center;
}

.spell-lores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.spell-lore-item {
    background: white;
    border: 1px solid rgba(75, 0, 130, 0.15);
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.9rem;
    color: var(--text);
    transition: all 0.2s ease;
}

.spell-lore-item:hover {
    background: rgba(75, 0, 130, 0.05);
    border-color: rgba(75, 0, 130, 0.3);
}

.spell-lore-item .spell-lore-name {
    font-weight: 600;
    color: #4B0082;
    display: block;
    margin-bottom: 0.25rem;
}

.spell-lore-item .spell-lore-bonus {
    font-family: monospace;
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
}

/* Full-Width Vocation Sections */
.vocation-full-width-section {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1.25rem;
    width: 100%;
    margin-bottom: 1rem;
}

.vocation-full-width-section:last-child {
    margin-bottom: 0;
}

.vocation-full-width-section h5 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.75rem;
    text-align: center;
}

/* Consolidated Vocation Information Table */
.vocation-info-table {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1.25rem;
    width: 100%;
}

.vocation-info-table h5 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

.vocation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.vocation-table th {
    background: #f8f9fa;
    color: var(--primary);
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
    font-family: 'Playfair Display', serif;
}

.vocation-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: top;
}

.vocation-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.vocation-table tr:hover {
    background: rgba(139, 69, 19, 0.05);
}

.vocation-table .category-name {
    font-weight: 600;
    color: var(--text);
}

.vocation-table .dp-value {
    font-family: monospace;
    font-weight: bold;
    color: var(--primary);
    text-align: center;
}

.vocation-table .bonus-value {
    font-family: monospace;
    font-weight: 500;
    color: #2c5530;
}

/* Enhanced Combat Ranking Section */
.vocation-combat-ranking {
    background: rgba(220, 53, 69, 0.05);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 8px;
    padding: 1.25rem;
    width: 100%;
}

.vocation-combat-ranking h5 {
    font-family: 'Spellcaster', serif;
    color: #dc3545;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid rgba(220, 53, 69, 0.3);
    padding-bottom: 0.75rem;
    text-align: center;
}

.ranking-instructions {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    margin: 0 0 1.25rem 0;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.7);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(220, 53, 69, 0.1);
}

.combat-ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    align-items: start;
}

.skill-ranking-item {
    background: white;
    border: 2px solid rgba(220, 53, 69, 0.15);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
}

.skill-ranking-item:hover {
    background: rgba(220, 53, 69, 0.05);
    border-color: rgba(220, 53, 69, 0.4);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.15);
    transform: translateY(-1px);
}

.skill-ranking-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #dc3545, rgba(220, 53, 69, 0.3));
    border-radius: 8px 0 0 8px;
}

.skill-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.skill-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.2;
}

.skill-bonus {
    font-family: monospace;
    font-weight: bold;
    color: #dc3545;
    font-size: 0.9rem;
    background: rgba(220, 53, 69, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.ranking-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-left: 1rem;
}

.arrow-btn {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #495057;
    transition: all 0.3s ease;
    font-weight: bold;
}

.arrow-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-color: #dc3545;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

.arrow-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
}

.vocation-details {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.dp-costs h5 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1rem;
}

.dp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.spell-bonus {
    color: var(--primary);
    font-size: 0.95rem;
}

/* Development Points Section */
.development-points-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border);
}

.dp-summary {
    background: var(--light-grey);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Enhanced Table Layout - Utilizing Full Width */
.dp-tables {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin: 2rem 0;
}

/* Improved table container for better visual hierarchy */
.skills-table-container, .spell-lores-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.skills-table-container h4, .spell-lores-table-container h4 {
    background: #1a1a1a; /* Very dark header bar */
    color: white;
    margin: 0;
    padding: 1rem 1.5rem;
    font-family: 'Spellcaster', serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.table-wrapper {
    overflow-x: auto;
    border: none; /* Remove border since container handles it */
    border-radius: 0;
    background: white;
}

/* Enhanced Table Styling - Professional Dark Headers */
.skills-table, .spell-lores-table, .skills-info-table, .spell-lores-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.skills-table th, .spell-lores-table th,
.skills-info-table th, .spell-lores-info-table th {
    background: #2c2c2c; /* Dark grey header background */
    color: white;
    padding: 0.45rem 0.6rem; /* Reduced padding for compactness */
    text-align: center; /* Center-align all headers */
    font-weight: 600;
    font-size: 0.75rem; /* Further reduced font size for compactness */
    border-bottom: 2px solid var(--border);
    font-family: 'Playfair Display', serif; /* Professional serif font for headers */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2; /* Tighter line height */
}

/* Keep first column (skill/spell lore name) left-aligned */
.skills-table th:first-child, .spell-lores-table th:first-child,
.skills-info-table th:first-child, .spell-lores-info-table th:first-child {
    text-align: left;
}

.skills-table td, .spell-lores-table td,
.skills-info-table td, .spell-lores-info-table td {
    padding: 0.4rem 0.6rem; /* Significantly reduced padding for compactness */
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
    line-height: 1.2; /* Tighter line height for compactness */
}

.skills-table td:first-child, .spell-lores-table td:first-child,
.skills-info-table td:first-child, .spell-lores-info-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--primary);
}

/* Enhanced table readability with alternating rows and hover effects */
.skills-table tbody tr:nth-child(even), .spell-lores-table tbody tr:nth-child(even):not(.spell-lore-row),
.skills-info-table tbody tr:nth-child(even), .spell-lores-info-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.skills-table tbody tr:hover, .spell-lores-table tbody tr:hover:not(.spell-lore-row),
.skills-info-table tbody tr:hover, .spell-lores-info-table tbody tr:hover {
    background-color: #e3f2fd;
    transition: background-color 0.2s ease;
}

/* Spell Lore Category Styling */
.spell-lore-category-header {
    background: #f8f9fa !important;
    border-top: 2px solid #dee2e6;
}

.category-section-header {
    padding: 0.75rem 1rem !important;
    font-weight: 600;
    color: #495057;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.spell-lore-row.kin {
    background-color: #fce4ec !important;
    border-left: 3px solid #e91e63;
}

.spell-lore-row.vocational {
    background-color: #e3f2fd !important;
    border-left: 3px solid #2196f3;
}

.spell-lore-row.common {
    background-color: #e8f5e8 !important;
    border-left: 3px solid #4caf50;
}

.spell-lore-name {
    font-weight: 500;
}



.kin-spell-lore-toggle {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px 6px 0 0;
    padding: 0.75rem 1rem;
    border-bottom: none;
}

.kin-spell-lore-toggle label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    color: #495057;
    cursor: pointer;
}

.kin-spell-lore-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Improved spacing for better visual hierarchy */
.skills-table, .spell-lores-table, .skills-info-table, .spell-lores-info-table {
    border-spacing: 0;
    border: 1px solid #e0e0e0;
}

/* Enhanced column alignment for numeric data */
.skills-table td[data-numeric="true"], .spell-lores-table td[data-numeric="true"],
.skills-info-table td[data-numeric="true"], .spell-lores-info-table td[data-numeric="true"] {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

.category-header td {
    background: #333333; /* Dark grey to match table headers */
    font-weight: bold;
    color: white !important; /* White text for contrast - force override */
    text-align: left !important;
    padding: 0.5rem 0.75rem; /* Reduced padding for compactness */
    font-family: 'Playfair Display', serif; /* Changed to Playfair Display */
    font-size: 0.9rem; /* Slightly smaller for compactness */
}

/* Ensure all text within category headers is white */
.category-header td * {
    color: white !important;
}

.category-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.category-info {
    display: flex;
    flex-direction: row; /* Changed to horizontal layout */
    align-items: center;
    gap: 1rem; /* Increased gap for horizontal spacing */
}

.dp-info {
    font-size: 0.8rem; /* Slightly smaller for compactness */
    font-weight: normal;
    color: white; /* Changed to white to match category text */
    font-family: 'Playfair Display', serif; /* Match category font */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Ensure category name and DP info stay on same line */
.category-name {
    font-family: 'Playfair Display', serif;
    color: white;
    font-weight: bold;
    white-space: nowrap;
}

/* Additional buttons container styling for horizontal layout */
.category-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.category-buttons {
    display: flex;
    gap: 0.5rem;
}

.trade-dp-btn, .specialty-skills-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    background: white;
    color: var(--primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trade-dp-btn:hover, .specialty-skills-btn:hover {
    background: var(--primary);
    color: white;
}

/* Ensure buttons in category headers maintain proper styling and visibility */
.category-header .trade-dp-btn, .category-header .specialty-skills-btn {
    background: var(--primary); /* Dark background for visibility */
    color: white; /* White text for contrast */
    border: 1px solid var(--primary);
    font-weight: 500;
}

.category-header .trade-dp-btn:hover, .category-header .specialty-skills-btn:hover {
    background: #333;
    color: white;
    border: 1px solid white;
}

/* Combat Skill Ranking Interface */
.combat-ranking-section, .combat-bonuses-section {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.combat-ranking-section h5, .combat-bonuses-section h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}

.combat-ranking-grid, .combat-bonuses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    font-size: 0.85rem;
}

.combat-skill-ranking {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
}

.combat-skill-ranking label {
    font-weight: 500;
    min-width: 60px;
    font-size: 0.8rem;
}

.combat-ranking-select {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: white;
    color: var(--primary);
    min-width: 100px;
    cursor: pointer;
}

.combat-ranking-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.combat-ranking-select option:disabled {
    color: #999;
    font-style: italic;
}

.current-bonus {
    font-weight: bold;
    color: var(--primary);
    min-width: 30px;
    font-size: 0.8rem;
}

.combat-bonuses-grid span {
    padding: 0.25rem 0.5rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
}

/* Arrow-Based Combat Ranking Interface */
.ranking-instructions {
    font-size: 0.75rem;
    color: #666;
    margin: 0.5rem 0;
    font-style: italic;
}

.arrow-ranking-container {
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.skill-ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.skill-ranking-item:last-child {
    margin-bottom: 0;
}

.skill-ranking-item:hover {
    background: var(--hover);
    border-color: var(--primary);
}

.skill-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.skill-name {
    font-weight: 500;
    font-size: 0.85rem;
}

.skill-bonus {
    font-weight: bold;
    color: var(--primary);
    font-size: 0.8rem;
    min-width: 30px;
}

.ranking-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.arrow-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 3px;
    width: 24px;
    height: 20px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-btn:hover:not(:disabled) {
    background: #333;
    transform: scale(1.1);
}

.arrow-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Comprehensive Vocation Bonus Display */
.vocation-bonuses-display {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.vocation-bonuses-display h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}

.bonus-categories {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bonus-category-line {
    font-size: 0.75rem;
    line-height: 1.3;
    color: #444;
}

.bonus-category-line strong {
    color: var(--primary);
    font-weight: 600;
}

/* Bold formatting for bonus values in markdown-style */
.bonus-category-line {
    /* This will be handled by JavaScript converting **text** to <strong> tags */
}

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

.modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
}

.modal-header {
    background: var(--primary);
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 1.5rem;
    line-height: 1.6;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Specialty Skills Modal Styles */
.specialty-skills-modal .modal-content {
    min-width: 800px;
    max-width: 1000px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.specialty-skills-modal .modal-header {
    background: #000;
    border-bottom: 3px solid #6d3710;
}

.specialty-skills-modal .modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 1rem;
}

.specialty-skills-info {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
}

.specialty-skills-info p {
    margin: 0.2rem 0;
    font-size: 0.85rem;
}

.specialty-skills-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    margin-bottom: 0.5rem;
    height: 100%;
}

.specialty-skills-sections h4 {
    margin: 0 0 0.6rem 0;
    color: #111;
    font-size: 0.9rem;
    border-bottom: 2px solid #6d3710;
    padding-bottom: 0.35rem;
    font-family: 'Playfair Display', serif;
}

.available-skills-section {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}

.selected-skills-section {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}

.custom-skill-section {
    grid-column: 1 / -1;
    grid-row: 2;
    border-top: 1px solid #e5e5e5;
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

.available-skills-list,
.selected-skills-list {
    flex: 1;
    overflow-y: auto;
    max-height: 280px;
    padding-right: 0.25rem;
}

.specialty-skill-item,
.selected-skill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin-bottom: 0.3rem;
    background: white;
}

.specialty-skill-item.selected {
    background: #f5f5f5;
    border-color: #999;
}

.skill-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.skill-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #111;
    font-family: 'Playfair Display', serif;
}

.skill-stat {
    font-size: 0.75rem;
    color: #888;
    font-family: 'Playfair Display', serif;
}

.skill-ranks {
    font-size: 0.75rem;
    color: #555;
    font-weight: 600;
}

/* Shared button base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 4px;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.btn-sm {
    padding: 3px 10px;
    font-size: 0.75rem;
}
.btn-primary {
    background: #111;
    color: #fff;
    border-color: #111;
}
.btn-primary:hover { background: #333; border-color: #333; }
.btn-primary:disabled { background: #ccc; border-color: #ccc; color: #888; cursor: not-allowed; }

.btn-secondary {
    background: #e5e5e5;
    color: #333;
    border-color: #e5e5e5;
}
.btn-secondary:hover { background: #d0d0d0; border-color: #d0d0d0; }

.btn-danger {
    background: #fff;
    color: #c0392b;
    border-color: #e5e5e5;
}
.btn-danger:hover { background: #fdf0f0; border-color: #c0392b; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

.custom-skill-form {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.custom-skill-form input,
.custom-skill-form select {
    padding: 0.35rem 0.5rem;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: 'Playfair Display', serif;
}

.custom-skill-form input {
    flex: 1;
    min-width: 160px;
}

.custom-skill-form select {
    min-width: 130px;
}

.no-skills {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 1.2rem;
    background: #f8f8f8;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Stat Selection Modal */
.stat-selection-modal .modal-content {
    min-width: 400px;
}

.stat-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.stat-option {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-family: monospace;
}

/* Specialty Skills in Skills Table */
.specialty-skill-row {
    background: #f8f9fa;
}

.specialty-indicator {
    font-size: 0.75rem;
    color: #6f42c1;
    font-weight: 600;
    background: #e7f3ff;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.5rem;
}

/* Responsive Design for Specialty Skills Modal */
@media (max-width: 1024px) {
    .specialty-skills-modal .modal-content {
        min-width: 90%;
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .specialty-skills-modal .modal-content {
        min-width: 95%;
        max-width: 95%;
        max-height: 95vh;
    }

    .specialty-skills-sections {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 1rem;
    }

    .available-skills-section {
        grid-column: 1;
        grid-row: 1;
    }

    .selected-skills-section {
        grid-column: 1;
        grid-row: 2;
    }

    .custom-skill-section {
        grid-column: 1;
        grid-row: 3;
    }

    .available-skills-list,
    .selected-skills-list {
        max-height: 200px;
    }

    .custom-skill-form {
        flex-direction: column;
        align-items: stretch;
    }

    .stat-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .specialty-skills-modal .modal-content {
        min-width: 98%;
        max-width: 98%;
        max-height: 98vh;
    }

    .specialty-skills-modal .modal-body {
        padding: 1rem;
    }

    .available-skills-list,
    .selected-skills-list {
        max-height: 150px;
    }
}

.skill-row:hover {
    background: rgba(139, 69, 19, 0.05);
}

/* Spell lore row hover - preserve color-coding with slight darkening */
.spell-lore-row.kin:hover {
    background-color: #f8bbd0 !important; /* Slightly darker pink */
}

.spell-lore-row.vocational:hover {
    background-color: #bbdefb !important; /* Slightly darker blue */
}

.spell-lore-row.common:hover {
    background-color: #c8e6c9 !important; /* Slightly darker green */
}

.dp-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.dp-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dp-btn:hover:not(:disabled) {
    background: #a0522d;
    transform: scale(1.1);
}

.dp-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.dp-value {
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.no-access {
    text-align: center;
    font-style: italic;
    color: #666;
    padding: 2rem;
}

/* Character Resources Section Styles */
.character-resources-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border: 2px solid var(--border);
    border-radius: 12px;
}

.character-resources-section h3 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 600;
}

.character-resources-section p {
    margin: 0 0 1.5rem 0;
    color: var(--text-light);
    line-height: 1.5;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Resource Button Styles - Independent from vocation buttons */
.resource-button {
    background: var(--light-grey);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    min-height: 120px;
}

.resource-button:hover {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.02);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.resource-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resource-icon {
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.resource-content {
    flex: 1;
}

.resource-content h4 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.resource-content p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Resource Modal Styles - Consistent with existing modals */
.resource-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.resource-modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 1180px;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── 3-Panel Spell Lore Browser ─────────────────────────────────────── */
.sb3-layout {
    display: flex;
    height: 640px;
    gap: 0;
    overflow: hidden;
}

/* LEFT sidebar — lore list */
.sb3-left {
    width: 210px;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--light-grey);
}

.sb3-filter-wrap {
    position: relative;
    padding: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.sb3-filter-wrap input {
    width: 100%;
    padding: 0.45rem 2rem 0.45rem 0.6rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    box-sizing: border-box;
    background: white;
}

.sb3-filter-wrap input:focus {
    outline: none;
    border-color: var(--primary);
}

#sb3-filter-clear {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.1rem;
    cursor: pointer;
    display: none;
    padding: 0;
    line-height: 1;
}

.sb3-lore-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.3rem 0;
}

.sb3-lore-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    gap: 0.4rem;
}

.sb3-lore-item:hover {
    background: rgba(0,0,0,0.05);
}

.sb3-lore-item.active {
    background: white;
    border-left-color: var(--primary);
    font-weight: 600;
}

.sb3-lore-name {
    font-size: 0.85rem;
    color: var(--text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb3-lore-stat {
    font-size: 0.72rem;
    color: white;
    background: var(--primary);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    flex-shrink: 0;
}

/* CENTER panel — spell table */
.sb3-center {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    border-right: 1px solid var(--border);
}

.sb3-lore-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
}

.sb3-lore-header h4 {
    margin: 0;
    font-size: 1.15rem;
}

.sb3-lore-stat-badge {
    font-size: 0.8rem;
    color: white;
    background: var(--primary);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
}

.sb3-lore-desc {
    font-style: italic;
    color: var(--text-light);
    font-size: 0.88rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--border);
    padding-left: 0.75rem;
}

.sb3-spell-table tbody .sb3-spell-row {
    cursor: pointer;
}

.sb3-spell-table tbody .sb3-spell-row:hover td {
    background: rgba(var(--primary-rgb, 80,60,40), 0.06);
}

.sb3-spell-table tbody .sb3-spell-row.active td {
    background: rgba(var(--primary-rgb, 80,60,40), 0.12);
    font-weight: 600;
}

/* RIGHT panel — spell detail */
.sb3-right {
    width: 270px;
    min-width: 270px;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--light-grey);
}

.sb3-spell-detail h5 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.4rem;
}

.sb3-spell-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 1rem;
}

.sb3-warping h6 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    margin: 0 0 0.4rem;
}

.sb3-warping ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sb3-warping li {
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--text);
    display: flex;
    gap: 0.4rem;
}

.sb3-weave-cost {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--primary);
    font-size: 0.8rem;
}

.sb3-no-detail {
    color: var(--text-light);
    font-style: italic;
    font-size: 0.85rem;
}

.sb3-placeholder {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
    padding: 2rem;
}

.resource-modal .modal-header {
    background: #000;
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #6d3710;
}

.resource-modal .modal-header h3 {
    margin: 0;
    font-family: 'Spellcaster', serif;
    font-size: 1.3rem;
    font-weight: 400;
}

.resource-modal .modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.resource-modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.resource-modal .modal-footer button.btn.modal-close {
    background: #e5e5e5;
    color: #333;
    border: 1px solid #e5e5e5;
    font-size: 0.8rem;
    width: auto;
    height: auto;
    padding: 5px 14px;
}

.resource-modal .modal-footer button.btn.modal-close:hover {
    background: #d0d0d0;
    border-color: #d0d0d0;
}

.resource-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.resource-modal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    background: var(--light-grey);
}

/* Tab Navigation Styles */
.resource-tabs {
    display: flex;
    background: var(--light-grey);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.resource-tab {
    flex: 1;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-light);
    transition: all 0.2s ease;
}

.resource-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
}

.resource-tab.active {
    background: white;
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.resource-tab-content {
    display: none;
    padding: 1.5rem;
    min-height: 400px;
}

.resource-tab-content.active {
    display: block;
}

/* Spell Lore Browser Styles */
.spell-lore-browser, .equipment-browser {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header styles removed for space optimization */

.spell-lore-controls, .equipment-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--light-grey);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.spell-lore-dropdown-container, .spell-search-container,
.equipment-dropdown-container, .equipment-search-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spell-lore-dropdown-container label, .spell-search-container label,
.equipment-dropdown-container label, .equipment-search-container label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}

.spell-lore-dropdown, .spell-search-input,
.equipment-dropdown, .equipment-search-input {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    background: white;
    transition: border-color 0.2s ease;
}

.spell-lore-dropdown:focus, .spell-search-input:focus,
.equipment-dropdown:focus, .equipment-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.spell-lore-content, .equipment-content {
    flex: 1;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    overflow-y: auto;
    min-height: 500px;
    max-height: 620px;
}

.spell-lore-placeholder, .equipment-placeholder {
    text-align: center;
    color: var(--text-light);
    padding: 2rem;
}

.spell-lore-placeholder p, .equipment-placeholder p {
    margin: 0.5rem 0;
}

/* Spell Lore Display Styles */
.spell-lore-details {
    animation: fadeIn 0.3s ease;
}

.spell-lore-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
}

.spell-lore-title h5 {
    margin: 0;
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 600;
}

.spell-lore-stat {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
}

.spell-lore-description {
    margin: 1rem 0 1.5rem 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border-left: 4px solid var(--primary);
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: var(--text);
    line-height: 1.5;
}

.spells-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.spells-table th {
    background: var(--primary);
    color: white;
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.spells-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.spells-table tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.spell-weave {
    text-align: center;
    font-weight: 600;
    color: var(--primary);
}

.spell-name {
    font-weight: 600;
    color: var(--text);
}

.search-highlight {
    background: yellow;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
}

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

/* Known Spells Tab Styles */
.known-spells-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.known-spells-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
}

.known-spells-header h4 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 600;
}

.known-spells-header p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

.known-spells-content {
    flex: 1;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    overflow-y: auto;
    min-height: 450px;
    max-height: 500px;
}

.known-spells-placeholder {
    text-align: center;
    color: var(--text-light);
    padding: 2rem;
}

.known-spells-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.known-spells-table th {
    background: var(--primary);
    color: white;
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--primary);
}

.known-spells-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: top;
}

.known-spells-table tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.spell-weave-cell {
    text-align: center;
    font-weight: 600;
    color: var(--primary);
    width: 80px;
}

.spell-name-cell {
    font-weight: 600;
    color: var(--text);
    min-width: 150px;
}

.spell-cost-cell {
    text-align: center;
    font-weight: 500;
    color: var(--secondary);
    width: 100px;
}

.spell-source-cell {
    color: var(--text-light);
    font-size: 0.85rem;
    min-width: 180px;
}

.spell-lore-group {
    margin-bottom: 1.5rem;
}

.spell-lore-group-header {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    border-left: 4px solid var(--primary);
}

.spell-lore-group-title {
    margin: 0;
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.spell-lore-group-stat {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.no-known-spells {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-light);
}

.no-known-spells h5 {
    margin: 0 0 1rem 0;
    color: var(--text);
    font-size: 1.2rem;
}

.no-known-spells p {
    margin: 0.5rem 0;
    line-height: 1.5;
}

.known-spells-summary {
    background: rgba(0, 0, 0, 0.02);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

.known-spells-summary h5 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1rem;
}

.known-spells-summary p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: var(--text);
}

.spell-cost-mp {
    color: var(--secondary);
    font-weight: 600;
}

.spell-cost-item {
    color: var(--accent);
    font-weight: 600;
}

/* Compact Known Spells Layout */
.known-spells-summary-compact {
    background: rgba(0, 0, 0, 0.02);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    text-align: center;
}

.summary-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
}

.known-spells-unified {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.known-spells-table-unified {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.known-spells-table-unified th {
    background: var(--primary);
    color: white;
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--primary);
}

.known-spells-table-unified td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: top;
}

.known-spells-table-unified tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.known-spells-table-unified tr:last-child td {
    border-bottom: none;
}

.spell-lore-cell {
    color: var(--text-light);
    font-size: 0.85rem;
    width: 140px;
}

/* Search Results Styles */
.spell-search-results {
    animation: fadeIn 0.3s ease;
}

.search-results-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
}

.search-results-header h5 {
    margin: 0;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.search-result-lore {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.search-result-lore .spell-lore-title h6 {
    margin: 0;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
}

.matching-spells {
    margin: 1rem 0;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.matching-spells p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--text);
}

.matching-spells ul {
    margin: 0;
    padding-left: 1.5rem;
}

.matching-spells li {
    margin: 0.25rem 0;
    color: var(--text);
}

.view-lore-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.view-lore-btn:hover {
    background: var(--secondary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    /* Tablet layout - single column for vocation cards */
    .vocation-cards {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .vocation-card-content {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 1200px) {
    .main-content {
        margin-right: 0;
    }

    /* Character summary removed */

    .wizard-container {
        max-width: 100%;
        padding: 1.5rem;
    }

    /* Responsive base stat values */
    .base-stat-grid {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .base-stat-item {
        padding: 0.3rem 0.5rem;
    }

    /* Responsive vocation styles */
    .vocation-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .vocation-card-content {
        gap: 1rem;
        padding: 1rem;
    }

    .vocation-card {
        min-height: auto;
    }

    .vocation-card h4 {
        font-size: 1.4rem;
    }

    .dp-grid {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .combat-ranking-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vocation-table {
        font-size: 0.8rem;
    }

    .vocation-table th,
    .vocation-table td {
        padding: 0.4rem 0.6rem;
    }

    .vocation-full-width-section {
        padding: 1rem;
    }

    .vocation-mp-section {
        padding: 1rem;
    }

    .vocation-combat-ranking {
        padding: 1rem;
    }

    .skill-ranking-item {
        padding: 0.75rem;
    }

    .arrow-btn {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .ranking-controls {
        gap: 0.3rem;
    }

    .vocation-buttons-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .vocation-button {
        font-size: 0.9rem;
        padding: 0.75rem 0.5rem;
        min-height: 70px;
    }

    .vocation-details-content {
        padding: 1.25rem;
        gap: 1rem;
    }

    .vocation-details-header {
        padding: 1.25rem 1.5rem;
    }

    .vocation-details-header h3 {
        font-size: 1.5rem;
    }

    .vocation-card.compact.selected {
        margin: 0.75rem 0;
    }

    .vocation-card.compact.selected .vocation-card-content {
        padding: 1.25rem;
    }

    .vocation-card.compact.selected .vocation-card-header {
        padding: 1.25rem 1.5rem;
    }

    .vocation-card.compact.selected .vocation-card-header h4 {
        font-size: 1.5rem;
    }

    .vocation-card.compact.selected .vocation-card-header .vocation-description {
        font-size: 1rem;
    }

    .spell-lores-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

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

    .skills-table, .spell-lores-table, .skills-info-table, .spell-lores-info-table {
        font-size: 0.8rem;
    }

    .skills-table th, .spell-lores-table th,
    .skills-info-table th, .spell-lores-info-table th {
        padding: 0.35rem 0.4rem; /* Even more compact on mobile */
        font-size: 0.7rem;
    }

    .skills-table td, .spell-lores-table td,
    .skills-info-table td, .spell-lores-info-table td {
        padding: 0.3rem 0.4rem; /* Very compact on mobile */
    }

    .category-header td {
        padding: 0.4rem 0.5rem; /* Compact category headers on mobile */
        font-size: 0.85rem;
    }

    .skills-table-container h4, .spell-lores-table-container h4 {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .header-content {
        gap: 1rem;
    }

    .vsd-logo {
        height: 45px;
    }

    .header-text h1 {
        font-size: 1.8rem;
    }

    .progress-container {
        flex-direction: column;
        gap: 1rem;
    }

    .step-indicators {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }

    .step-indicator {
        min-width: 60px;
    }

    .step-label {
        font-size: 0.75rem;
    }

    .wizard-container {
        padding: 1rem;
    }

    .step-content {
        padding: 1.5rem;
    }

    .main-content {
        margin-top: 200px;
    }

    .main-content.compact-header {
        margin-top: 180px;
    }

    /* Combat ranking responsive styles */
    .arrow-ranking-container {
        padding: 0.5rem;
    }

    .skill-ranking-item {
        padding: 0.4rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .skill-info {
        gap: 0.5rem;
    }

    .skill-name {
        font-size: 0.8rem;
    }

    .skill-bonus {
        font-size: 0.75rem;
    }

    .ranking-controls {
        flex-direction: row;
        gap: 0.5rem;
        align-self: flex-end;
    }

    .arrow-btn {
        width: 28px;
        height: 24px;
        font-size: 0.8rem;
    }

    .vocation-bonuses-display {
        padding: 0.5rem;
    }

    .bonus-category-line {
        font-size: 0.7rem;
    }

    /* Character summary removed */
}

/* Step-specific Styles */

/* Generation Method Selector */
.generation-method-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.method-option {
    position: relative;
    display: flex;
}

.method-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.method-label {
    display: block;
    flex: 1;
    padding: 1.5rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--light);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.method-option input[type="radio"]:checked + .method-label {
    background: var(--hover);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.method-label h3 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.method-label p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Generation Sections */
.generation-section {
    margin-top: 2rem;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--light);
    min-height: 200px;
}

/* Point Buy Interface */
.point-buy-container {
    max-width: 600px;
    margin: 0 auto;
}

.points-remaining {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--light-grey);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.points-remaining h4 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-control {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.stat-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label strong {
    color: var(--primary);
    font-size: 1.1rem;
}

.stat-description {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.3;
    display: none;
}

/* Stat tooltip container */
.stat-tooltip {
    position: relative;
    cursor: help;
}

/* Tooltip styling (adapted from character-sheet.html) */
.stat-tooltip .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 9999;
    background-color: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: normal;
    max-width: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

/* Show tooltip on hover and focus */
.stat-tooltip:hover .tooltip,
.stat-tooltip:focus-within .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Tooltip content */
.stat-tooltip .tooltip-content {
    text-align: center;
    color: var(--text);
    font-family: 'Playfair Display', serif;
}

/* Tooltip arrow (pointing down) */
.stat-tooltip .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

/* Tooltip arrow border */
.stat-tooltip .tooltip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: var(--border) transparent transparent transparent;
    margin-top: -1px;
}

.stat-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.stat-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--light);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-btn:hover:not(:disabled) {
    background: var(--primary);
    color: var(--light);
}

.stat-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.stat-input {
    width: 60px;
    text-align: center;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: white;
    font-weight: bold;
    color: var(--primary);
}

/* Remove native number input spinner arrows */
.stat-input::-webkit-inner-spin-button,
.stat-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stat-input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

.final-stat {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

.base-value {
    font-size: 0.85rem;
    color: var(--text-light);
}

.final-value {
    font-weight: bold;
    color: var(--secondary);
    font-size: 1rem;
}

.preset-buttons {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.preset-buttons h4 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.preset-btn {
    margin: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    background: var(--light);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.preset-btn:hover {
    background: var(--primary);
    color: var(--light);
}

/* Random Roll Interface */
.random-roll-container {
    text-align: center;
}

.roll-instructions {
    margin-bottom: 2rem;
}

.roll-options {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
}

.roll-btn {
    padding: 1rem 2rem;
    background: var(--primary);
    color: var(--light);
    border: none;
    border-radius: 8px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--shadow);
}

.roll-btn.secondary {
    background: var(--secondary);
}

.roll-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
}

.roll-btn:hover:not(.secondary) {
    background: var(--secondary);
}

.roll-btn.secondary:hover {
    background: var(--accent);
}

.roll-help {
    margin-top: 1rem;
    color: var(--text-light);
}

.rolled-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.rolled-value {
    padding: 1rem;
    background: var(--light-grey);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.rolled-value.selected {
    background: #e8f5e8;
    border-color: #4caf50;
}

.rolled-value.discarded {
    background: #fafafa;
    border-color: #e0e0e0;
    opacity: 0.6;
}

.rolled-value.final {
    background: var(--light);
    border-color: var(--primary);
    border-width: 2px;
}

.roll-result {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

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

.selected-indicator {
    font-size: 0.75rem;
    color: #4caf50;
    font-weight: bold;
    margin-top: 0.5rem;
}

.discarded-indicator {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}

.all-rolls {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.final-values {
    margin-top: 1rem;
}

/* Drag and Drop Interface Styles */
.assignment-instructions {
    font-size: 0.95rem;
    color: var(--text-light);
    margin: 1rem 0;
    text-align: center;
}

/* Draggable rolled values */
.draggable-value {
    cursor: grab;
    user-select: none;
    position: relative;
}

.draggable-value:not(.used):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.draggable-value:not(.used):focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.draggable-value.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.draggable-value.click-selected {
    border-color: #2196F3;
    border-width: 3px;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.draggable-value.used {
    opacity: 0.65;
    cursor: grab;
    background: #f5f5f5;
    border-color: #e0e0e0;
}

.used-indicator {
    font-size: 0.7rem;
    color: #999;
    font-weight: bold;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

/* Stat drop zones */
.stat-drop-zones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 1rem;
}

.stat-drop-zone {
    min-height: 100px;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
}

.stat-drop-zone:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Empty state - dark grey */
.stat-drop-zone.empty {
    background: #424242;
    border-color: #616161;
}

.stat-drop-zone.empty:hover {
    background: #4a4a4a;
    border-color: #757575;
}

/* Filled state - black */
.stat-drop-zone.filled {
    background: #000000;
    border-color: #333333;
}

.stat-drop-zone.filled:hover {
    background: #1a1a1a;
    border-color: #444444;
}

/* Drag over state - blue highlight */
.stat-drop-zone.drag-over {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
    background: #1565C0;
}

.stat-drop-zone .stat-name {
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.stat-drop-zone .stat-abbr {
    font-size: 0.8rem;
    color: #cccccc;
    margin-bottom: 0.3rem;
}

.stat-drop-zone .stat-placeholder {
    font-size: 0.85rem;
    color: #999999;
    font-style: italic;
    margin: 0.3rem 0;
}

.stat-drop-zone .stat-assigned-value {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0.3rem 0;
}

.stat-drop-zone .stat-final-value {
    font-size: 0.8rem;
    color: #aaaaaa;
    margin-top: 0.3rem;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    .stat-drop-zones {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .stat-drop-zones {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Character Summary Styles - REMOVED */

.stats-summary {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--medium-grey);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.stats-summary h5 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.stat-item {
    display: inline-block;
    margin: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
}

.passions-summary {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--medium-grey);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.passions-summary h5 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.passion-item {
    display: block;
    margin: 0.25rem 0;
    padding: 0.25rem 0.5rem;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Validation Error Styles */
.validation-error {
    animation: slideIn 0.3s ease-out;
}

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

/* Cross-Category DP Trading Modal */
.dp-trade-modal {
    display: none;
    position: fixed;
    z-index: 1300;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

.dp-trade-modal-content {
    background-color: #fff;
    margin: 2% auto;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.dp-trade-header {
    background: #000;
    color: white;
    padding: 15px 20px;
    border-radius: 6px 6px 0 0;
    border-bottom: 3px solid #6d3710;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.dp-trade-header h2 {
    margin: 0;
    font-family: 'Spellcaster', serif;
    font-size: 1.4em;
}

.dp-trade-subtitle {
    margin: 5px 0 0 0;
    font-size: 0.9em;
    color: #bdc3c7;
    font-style: italic;
}

.dp-trade-close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
    position: absolute;
    top: 15px;
    right: 20px;
}

.dp-trade-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.dp-trade-body {
    flex: 1;
    display: flex;
    padding: 0;
    gap: 1px;
    overflow: hidden;
    background: #e5e5e5;
}

.dp-trade-left, .dp-trade-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
    padding: 15px;
    background: #fff;
    overflow-y: auto;
}

.dp-trade-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c3e50;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 5px;
}

.dp-source-categories {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: white;
}

.dp-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #e5e5e5;
    background: white;
}

.dp-category-item:last-child {
    border-bottom: none;
}

.dp-category-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-category-name {
    font-weight: bold;
    color: #111;
}

.dp-category-available {
    font-size: 0.85em;
    color: #27ae60;
    font-weight: bold;
}

.dp-category-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-spinner {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dp-spinner button {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}

.dp-spinner button:hover {
    background: #f0f0f0;
}

.dp-spinner button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dp-spinner input {
    width: 40px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
}



.dp-target-skills {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}

.dp-skill-category {
    border-bottom: 1px solid #e5e5e5;
}

.dp-skill-category:last-child {
    border-bottom: none;
}

.dp-skill-category-header {
    background: #f5f5f5;
    padding: 7px 12px;
    font-weight: bold;
    font-size: 0.85rem;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background 0.15s;
}

.dp-skill-category-header:hover {
    background: #ececec;
}

.dp-skill-category-arrow {
    font-size: 0.65rem;
    color: #999;
}

.dp-skill-list {
    padding: 4px 0;
}

.dp-skill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #f0f0f0;
}

.dp-skill-item:last-child {
    border-bottom: none;
}

.dp-skill-item:hover {
    background: #f5f5f5;
}

.dp-skill-item.selected {
    background: #111;
    color: white;
}

.dp-skill-name {
    font-weight: bold;
    font-size: 0.85rem;
}

.dp-skill-ranks {
    font-size: 0.8rem;
    color: #777;
}

.dp-skill-item.selected .dp-skill-ranks {
    color: rgba(255,255,255,0.7);
}

.dp-trade-footer {
    padding: 20px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.dp-trade-summary {
    font-weight: bold;
    color: #111;
}

.dp-trade-buttons {
    display: flex;
    gap: 10px;
}

.dp-trade-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.dp-trade-btn.execute {
    background: #111;
    color: white;
}

.dp-trade-btn.execute:hover {
    background: #333;
}

.dp-trade-btn.execute:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
}

.dp-trade-btn.cancel {
    background: #e5e5e5;
    color: #333;
}

.dp-trade-btn.cancel:hover {
    background: #d0d0d0;
}

/* Trade History Section */
.dp-trade-history-section {
    margin-top: auto;
    border-top: 1px solid #e5e5e5;
    padding-top: 10px;
}

.dp-trade-history-toggle {
    background: none;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 5px 12px;
    font-family: 'Playfair Display', serif;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}
.dp-trade-history-toggle:hover {
    background: #f5f5f5;
}
.dp-trade-history-toggle.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.dp-trade-history {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: white;
    padding: 8px;
}

.dp-trade-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    font-size: 0.85em;
}

.dp-trade-history-item:last-child {
    border-bottom: none;
}

.dp-trade-history-info {
    flex: 1;
}

.dp-trade-history-details {
    font-weight: bold;
    color: #2c3e50;
}

.dp-trade-history-level {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
}

.dp-trade-undo-btn {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 0.8em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dp-trade-undo-btn:hover {
    background: #c0392b;
}

.dp-trade-undo-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

.dp-trade-history-empty {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
}

/* Combat Ranking Dropdown Styles */
.combat-ranking-dropdowns {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin: 1rem 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.combat-ranking-dropdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    min-width: 280px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.combat-ranking-dropdown-item:hover {
    background: #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ========== CHARACTER RECAP CARD ========== */

.character-recap-card {
    background: white;
    border: 3px solid var(--primary);
    border-radius: 12px;
    margin: 2rem 0;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.recap-header {
    background: linear-gradient(135deg, var(--primary) 0%, #8B4513 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 9px 9px 0 0;
}

.recap-header h3 {
    margin: 0 0 0.5rem 0;
    font-family: 'Spellcaster', serif;
    font-size: 1.8rem;
}

.recap-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.recap-content {
    padding: 2rem;
}

.recap-section {
    margin-bottom: 2rem;
}

.recap-section:last-child {
    margin-bottom: 0;
}

.recap-section h4 {
    font-family: 'Spellcaster', serif;
    font-size: 1.3rem;
    color: var(--primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(139, 69, 19, 0.2);
}

/* Character Name Input Section */
.recap-name-input {
    width: 100%;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    padding: 0.875rem 1rem;
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 8px;
    background: white;
    color: #333;
    transition: all 0.3s ease;
    outline: none;
}

.recap-name-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.recap-name-input::placeholder {
    color: rgba(139, 69, 19, 0.4);
    font-style: italic;
}

/* Action Buttons Section (Print PDF and View Character Sheet) */
.recap-action-buttons {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.action-button {
    background: #000000;
    border: 2px solid #000000;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
}

.action-button:hover {
    background: #ffffff;
    border-color: #000000;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.action-button:hover .action-button-content h4,
.action-button:hover .action-button-content p {
    color: #000000;
}

.action-button:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-button-content {
    flex: 1;
}

.action-button-content h4 {
    margin: 0 0 0.25rem 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.action-button-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.action-buttons-note {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(217, 83, 79, 0.1);
    border: 1px solid rgba(217, 83, 79, 0.3);
    border-radius: 8px;
    color: #d9534f;
    font-size: 0.9rem;
    text-align: center;
}

/* Character Choices Section */
.recap-choices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.recap-choice-item {
    background: rgba(139, 69, 19, 0.05);
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recap-label {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recap-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

/* Stats Breakdown Table */
.recap-stats-table-wrapper {
    overflow-x: auto;
}

.recap-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.recap-stats-table thead {
    background: rgba(139, 69, 19, 0.1);
}

.recap-stats-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--primary);
    border-bottom: 2px solid rgba(139, 69, 19, 0.3);
}

.recap-stats-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

.recap-stats-table tbody tr:last-child td {
    border-bottom: none;
}

.recap-stats-table tbody tr:hover {
    background: rgba(139, 69, 19, 0.03);
}

.recap-stat-value {
    font-weight: 600;
    color: #333;
}

.recap-stat-modifier {
    font-weight: 600;
    text-align: center;
}

.recap-stat-modifier.positive {
    color: #28a745;
}

.recap-stat-modifier.negative {
    color: #dc3545;
}

.recap-stat-modifier.neutral {
    color: #6c757d;
}

.recap-stat-total {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.05rem;
}

/* Derived Attributes Section */
.recap-derived-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.recap-derived-item {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

.recap-derived-label {
    font-weight: 600;
    color: #666;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recap-derived-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Tooltip styles for recap card derived attributes */
.recap-derived-value.tooltip-cell {
    position: relative;
    cursor: help;
}

.recap-derived-value .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 9999;
    background-color: white;
    border: 1px solid black;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.recap-derived-value.tooltip-cell:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.recap-derived-value .tooltip-content {
    text-align: left;
    color: #333;
    font-family: 'Playfair Display', serif;
    font-weight: normal;
}

.recap-derived-value .tooltip-content div {
    margin: 2px 0;
}

/* Tooltip styles for Skills and Spell Lores tables */
.tooltip-trigger {
    position: relative;
    cursor: help;
}

.tooltip-trigger .tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 9999;
    background-color: white;
    border: 1px solid black;
    border-radius: 4px;
    padding: 6px 8px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    font-size: 8pt;
    line-height: 1.4;
}

.tooltip-trigger:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

.tooltip-trigger .tooltip-content div {
    margin: 2px 0;
    text-align: left;
    color: #333;
    font-family: 'Playfair Display', serif;
    font-weight: normal;
}

/* Equipment Section (Hierarchical) */
.recap-equipment {
    margin-bottom: 1.5rem;
}

.equipment-subsection {
    margin-bottom: 1.25rem;
}

.equipment-subsection:last-child {
    margin-bottom: 0;
}

.equipment-subsection h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #555;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.recap-equipment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.equipment-set {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.equipment-set:hover {
    background: #e9ecef;
}

.set-label {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 60px;
    flex-shrink: 0;
}

.set-items {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.equipment-set-empty {
    padding: 1rem;
    text-align: center;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 6px;
}

.set-items-empty {
    font-size: 0.95rem;
    color: #999;
    font-style: italic;
}

/* Extra Equipment styling - Compact horizontal flow layout */
.extra-equipment .set-label {
    color: #000;
}

.extra-equipment-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.extra-equipment-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    flex: 0 1 auto;
    max-width: fit-content;
}

.extra-equipment-item .item-name {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
}

.remove-extra-equipment-btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    background: #1a1a1a;
    color: white;
    border: 1px solid #1a1a1a;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    white-space: nowrap;
}

.remove-extra-equipment-btn:hover {
    background: #333;
    border-color: #333;
    transform: translateY(-1px);
}

.remove-extra-equipment-btn:active {
    transform: translateY(0);
}

/* Skills and Spell Lores Summary Tables */
.recap-table-wrapper {
    overflow-x: auto;
}

.recap-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.recap-summary-table thead {
    background: rgba(139, 69, 19, 0.1);
}

.recap-summary-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--primary);
    border-bottom: 2px solid rgba(139, 69, 19, 0.3);
}

.recap-summary-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e8e8e8;
}

.recap-summary-table tbody tr:last-child td {
    border-bottom: none;
}

.recap-summary-table tbody tr:hover {
    background: rgba(139, 69, 19, 0.03);
}

.recap-summary-table td:first-child {
    font-weight: 600;
    color: #666;
    width: 30%;
}

.recap-summary-table td:last-child {
    color: #333;
}

.recap-empty {
    text-align: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 6px;
    color: #999;
    font-style: italic;
    margin: 0;
}

/* Basic Starting Equipment Section */
.culture-basic-equipment-section {
    background: rgba(139, 69, 19, 0.03);
    border: 1px solid rgba(139, 69, 19, 0.15);
    border-radius: 8px;
    padding: 1.5rem;
}

.culture-basic-equipment-section h5 {
    font-family: 'Spellcaster', serif;
    color: var(--primary);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 2px solid rgba(139, 69, 19, 0.2);
    padding-bottom: 0.75rem;
}

.basic-equipment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.basic-equipment-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.basic-item-text {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.basic-equipment-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.basic-item-label {
    font-weight: 600;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.basic-equipment-select {
    padding: 0.75rem;
    font-size: 1rem;
    font-family: 'Playfair Display', serif;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.basic-equipment-select:hover {
    border-color: var(--primary);
}

.basic-equipment-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.basic-equipment-choice {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.basic-choice-label {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.basic-choice-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.basic-choice-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.basic-choice-option:hover {
    border-color: var(--primary);
    background: #fff8f0;
}

.basic-choice-option.selected {
    border-color: var(--primary);
    background: #fff8f0;
    box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.1);
}

.basic-choice-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.basic-choice-text {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    cursor: pointer;
}

.basic-choice-option.selected .basic-choice-text {
    color: var(--primary);
    font-weight: 600;
}

.ranking-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.ranking-bonus {
    font-size: 1.5rem;
    font-weight: 700;
    color: #28a745;
    background: #d4edda;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 2px solid #c3e6cb;
    min-width: 60px;
    text-align: center;
}

.ranking-position {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6f42c1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.combat-skill-dropdown {
    width: 100%;
    max-width: 250px;
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    background: white;
    font-size: 1rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: center;
}

.combat-skill-dropdown:focus {
    outline: none;
    border-color: #6f42c1;
    box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

.combat-skill-dropdown:hover {
    border-color: #6f42c1;
}

.combat-skill-dropdown option {
    padding: 0.5rem;
    font-weight: 500;
}

.combat-skill-dropdown option:disabled {
    color: #6c757d;
    font-style: italic;
}

/* Responsive adjustments for combat ranking dropdowns */
@media (max-width: 768px) {
    .combat-ranking-dropdowns {
        flex-direction: column;
        gap: 0.75rem;
    }

    .combat-ranking-dropdown-item {
        min-width: 240px;
        padding: 0.75rem;
    }

    .ranking-bonus {
        font-size: 1.25rem;
        padding: 0.4rem 0.8rem;
    }

    .combat-skill-dropdown {
        max-width: 200px;
        font-size: 0.9rem;
    }

    /* Responsive resource button styles */
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .resource-button {
        padding: 1rem;
        min-height: 100px;
    }

    .resource-icon {
        width: 50px;
        height: 50px;
        font-size: 0.7rem;
    }

    .resource-content h4 {
        font-size: 1.1rem;
    }

    .resource-content p {
        font-size: 0.85rem;
    }

    .resource-modal-content {
        width: 95%;
        max-height: 90vh;
    }

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

    .resource-tab {
        flex: 1;
        min-width: calc(50% - 0.5rem);
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .resource-tab-content {
        padding: 1rem;
        min-height: 300px;
    }

    /* Responsive spell lore browser styles */
    .spell-lore-controls, .equipment-controls {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .spell-lore-content, .equipment-content {
        min-height: 300px;
        max-height: 350px;
        padding: 1rem;
    }

    .spell-lore-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .spells-table {
        font-size: 0.8rem;
    }

    .spells-table th,
    .spells-table td {
        padding: 0.5rem 0.25rem;
    }

    /* Responsive known spells styles */
    .known-spells-content {
        min-height: 300px;
        max-height: 350px;
        padding: 1rem;
    }

    .known-spells-table {
        font-size: 0.8rem;
    }

    .known-spells-table th,
    .known-spells-table td {
        padding: 0.5rem 0.25rem;
    }

    .spell-weave-cell {
        width: 60px;
    }

    .spell-cost-cell {
        width: 80px;
    }

    /* Responsive compact known spells styles */
    .known-spells-summary-compact {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.75rem;
    }

    .summary-text {
        font-size: 0.9rem;
    }

    .known-spells-table-unified {
        font-size: 0.8rem;
    }

    .known-spells-table-unified th,
    .known-spells-table-unified td {
        padding: 0.5rem 0.25rem;
    }

    .spell-lore-cell {
        width: 100px;
        font-size: 0.75rem;
    }

    .spell-source-cell {
        min-width: 120px;
        font-size: 0.75rem;
    }

    .spell-lore-group-header {
        padding: 0.5rem;
    }

    .spell-lore-group-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .combat-ranking-dropdowns {
        flex-direction: column;
        gap: 0.5rem;
    }

    .combat-ranking-dropdown-item {
        min-width: 200px;
        padding: 0.5rem;
    }

    .ranking-bonus {
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
    }

    .combat-skill-dropdown {
        max-width: 180px;
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    /* Character Recap Card - Mobile */
    .recap-content {
        padding: 1.25rem;
    }

    .recap-header {
        padding: 1.25rem 1.5rem;
    }

    .recap-header h3 {
        font-size: 1.5rem;
    }

    .recap-choices-grid {
        grid-template-columns: 1fr;
    }

    .recap-stats-table {
        font-size: 0.85rem;
    }

    .recap-stats-table th,
    .recap-stats-table td {
        padding: 0.5rem 0.25rem;
    }

    .recap-derived-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .recap-summary-table {
        font-size: 0.85rem;
    }

    .recap-summary-table th,
    .recap-summary-table td {
        padding: 0.5rem 0.25rem;
    }

    /* Kin Details Header - Mobile */
    .kin-details-header {
        padding: 1.25rem 1.5rem;
    }

    .kin-details-header h3 {
        font-size: 1.5rem;
    }
}

/* Responsive Design for Stats Grid */
@media (max-width: 1024px) {
    /* Tablet: 2-column × 3-row grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Mobile: Single column layout */
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

/* ===== PASSION SELECTION STYLES ===== */

.passion-selection {
    max-width: 800px;
    margin: 0 auto;
}

.passion-intro {
    margin-bottom: 0.75rem;
    text-align: center;
}

.passion-intro h3 {
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.passion-intro p {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.passion-note {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.passion-input-group {
    background: white;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.passion-input-group:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.passion-label {
    display: block;
    margin-bottom: 0.4rem;
}

.passion-label strong {
    display: block;
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
}

.passion-description {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.3;
}

.passion-textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.3s ease;
}

.passion-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
}

.passion-char-count {
    text-align: right;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Doom Passion Styles */
.doom-passion-section {
    background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
    border: 2px solid #8B0000;
    color: white;
}

.doom-passion-section:hover {
    border-color: #DC143C;
}

.doom-header h4 {
    color: #DC143C;
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doom-header h4::before {
    content: '';
}

.doom-header p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.doom-display {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #8B0000;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.doom-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.doom-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.doom-text {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #fff;
    font-style: italic;
}

.doom-roll-number {
    color: #DC143C;
    font-weight: 700;
    font-style: normal;
    margin-right: 0.5rem;
}

.btn-reroll-doom {
    background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-reroll-doom:hover {
    background: linear-gradient(135deg, #DC143C 0%, #FF1493 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.4);
}

.btn-reroll-doom:active {
    transform: translateY(0);
}

/* Kin Doom Section (Step 2) */
.kin-doom-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
    border: 2px solid #8B0000;
    border-radius: 10px;
}

.kin-doom-section h5 {
    color: #DC143C;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    font-family: 'Playfair Display', serif;
}

.kin-doom-display {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kin-doom-result {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.6;
    font-style: italic;
}

.kin-doom-roll {
    color: #DC143C;
    font-weight: 700;
    font-style: normal;
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.kin-doom-text {
    color: #fff;
}

.kin-doom-buttons {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.btn-roll-kin-doom {
    background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-reroll-kin-doom,
.btn-custom-kin-doom {
    background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.btn-roll-kin-doom:hover,
.btn-reroll-kin-doom:hover,
.btn-custom-kin-doom:hover {
    background: linear-gradient(135deg, #DC143C 0%, #FF1493 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.4);
}

.btn-roll-kin-doom:active,
.btn-reroll-kin-doom:active,
.btn-custom-kin-doom:active {
    transform: translateY(0);
}

/* Custom Doom Edit Mode */
.kin-doom-edit-mode {
    width: 100%;
}

.custom-doom-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid rgba(220, 20, 60, 0.3);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.3s ease;
}

.custom-doom-textarea:focus {
    outline: none;
    border-color: rgba(220, 20, 60, 0.6);
    background: rgba(0, 0, 0, 0.6);
}

.custom-doom-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.custom-doom-char-count {
    text-align: right;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.btn-save-custom-doom,
.btn-cancel-custom-doom {
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.btn-save-custom-doom {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.btn-save-custom-doom:hover {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.btn-cancel-custom-doom {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
}

.btn-cancel-custom-doom:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.btn-save-custom-doom:active,
.btn-cancel-custom-doom:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .passion-selection {
        padding: 0;
    }

    .passion-input-group {
        padding: 0.6rem 0.75rem;
    }

    .passion-textarea {
        min-height: 55px;
    }
}

/* ========================================
   STEP 7: EPIC CHARACTER NAMING STYLES
   ======================================== */

/* Final Step Container - Enhanced Visual Presence */
.wizard-step-final {
    position: relative;
    margin-bottom: 6rem;
}

/* Epic Step Header - Ceremonial Design */
.step-header-epic {
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 8px;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
    position: relative;
}

/* Top Ornament - Sword Symbol */
.epic-ornament-top {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
    color: #000000;
}

/* Epic Title - Large, Dramatic */
.epic-title {
    font-family: 'Spellcaster', serif;
    font-size: 3.5rem;
    color: #000000;
    text-align: center;
    margin: 0 0 1rem 0;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* Epic Subtitle - Inspirational Message */
.epic-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: #666666;
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.6;
    font-style: italic;
}

/* Epic Character Name Input Container */
.epic-name-container {
    margin: 2.5rem auto 2rem;
    max-width: 600px;
    position: relative;
}

/* Epic Character Name Input Field */
.epic-name-input {
    width: 100%;
    font-family: 'Spellcaster', serif;
    font-size: 2rem;
    text-align: center;
    padding: 1rem 1.5rem;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 8px;
    color: #000000;
    outline: none;
}

/* Placeholder styling */
.epic-name-input::placeholder {
    color: #999999;
    font-style: italic;
    font-size: 1.5rem;
}

/* Focus state */
.epic-name-input:focus {
    border-color: #000000;
}

/* Bottom Ornament - Decorative Stars */
.epic-ornament-bottom {
    font-size: 1.5rem;
    text-align: center;
    margin-top: 1.5rem;
    color: #000000;
    letter-spacing: 1rem;
}

/* Final Step Content - Enhanced Container */
.step-content-final {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2.5rem;
    position: relative;
}



/* Responsive adjustments for Step 7 */
@media (max-width: 768px) {
    .step-header-epic {
        padding: 2rem 1.5rem;
    }

    .epic-title {
        font-size: 2.5rem;
    }

    .epic-subtitle {
        font-size: 1.1rem;
    }

    .epic-ornament-top {
        font-size: 2.5rem;
    }

    .epic-ornament-bottom {
        font-size: 1.2rem;
        letter-spacing: 0.5rem;
    }

    .epic-name-container {
        margin: 2rem auto 1.5rem;
    }

    .epic-name-input {
        font-size: 1.5rem;
        padding: 0.875rem 1.25rem;
    }

    .epic-name-input::placeholder {
        font-size: 1.2rem;
    }

    .step-content-final {
        padding: 1.5rem;
    }

    /* Action buttons responsive */
    .action-buttons-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .action-button {
        padding: 1.25rem;
        min-height: 90px;
    }

    .action-button-content h4 {
        font-size: 1rem;
    }

    .action-button-content p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .epic-title {
        font-size: 2rem;
    }

    .epic-subtitle {
        font-size: 1rem;
    }

    .epic-ornament-top {
        font-size: 2rem;
    }

    .epic-name-container {
        margin: 1.5rem auto 1rem;
    }

    .epic-name-input {
        font-size: 1.25rem;
        padding: 0.75rem 1rem;
        border-width: 2px;
    }

    .epic-name-input::placeholder {
        font-size: 1rem;
    }
}

/* ===================================================================
   MILESTONE / REVELATION MODAL
   Shared between Character Creator (#creator-milestone-modal) and
   Character Sheet (#sheet-milestone-modal).
   =================================================================== */
.milestone-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    animation: fadeIn 0.2s ease;
}
.milestone-modal-overlay[hidden] { display: none; }

.milestone-modal {
    background: white;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    max-width: 680px;
    width: 94%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.milestone-modal-header {
    background: #000;
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 3px solid #6d3710;
}
.milestone-modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
    font-family: 'Spellcaster', serif;
    font-weight: 400;
    letter-spacing: 0.03em;
}
.milestone-modal-close {
    background: none;
    border: none;
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.milestone-modal-close:hover { background: rgba(255,255,255,0.15); }

.milestone-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 1.5rem;
}

.milestone-lore-block {
    background: #f7f6f2;
    border-left: 3px solid #1a1a1a;
    border-radius: 4px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    color: #333;
    line-height: 1.6;
}
.milestone-lore-block strong { color: #1a1a1a; }
.milestone-lore-block ul {
    margin: 0.4rem 0 0 1.1rem;
    padding: 0;
}
.milestone-lore-block ul li { margin-bottom: 0.2rem; }

.milestone-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #1a1a1a;
    color: white;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.milestone-count-badge .milestone-count-num {
    font-size: 1.4rem;
    line-height: 1;
}

.milestone-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    margin: 0 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #1a1a1a;
}
.milestone-section-label:not(:first-of-type) { margin-top: 1.25rem; }

.revelation-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0.55rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.revelation-option:hover { border-color: #888; background: #fafafa; }
.revelation-option.selected { border-color: #1a1a1a; background: #f0f0f0; }
.revelation-option input[type="radio"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: #1a1a1a;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}
.revelation-option-content { flex: 1; }
.revelation-option-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.2rem;
}
.revelation-option-desc {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}

.revelation-sub-options {
    margin-top: 0.65rem;
    padding-left: 1rem;
    border-left: 2px solid #d0d0d0;
    display: none;
}
.revelation-option.selected .revelation-sub-options { display: block; }

.revelation-sub-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 0.84rem;
    color: #333;
}
.revelation-sub-option:hover { border-color: #999; background: #f5f5f5; }
.revelation-sub-option.selected { border-color: #1a1a1a; background: #efefef; }
.revelation-sub-option input[type="radio"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: #1a1a1a;
    cursor: pointer;
}

.revelation-stat-select {
    margin-top: 0.6rem;
    display: none;
}
.revelation-option.selected .revelation-stat-select { display: block; }
.revelation-stat-select select {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
}

.revelation-item-config {
    margin-top: 0.6rem;
    display: none;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fafafa;
}
.revelation-option.selected .revelation-item-config { display: block; }
.revelation-item-config-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin: 0.45rem 0 0.25rem;
}
.revelation-item-config-label:first-child { margin-top: 0; }
.revelation-item-config select {
    width: 100%;
    padding: 0.4rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    background: #fff;
}
.revelation-item-config select:disabled { background: #eee; color: #888; cursor: not-allowed; }
.revelation-item-config select option:disabled { color: #aaa; }
.revelation-item-config .config-block { display: none; margin-top: 0.5rem; }
.revelation-item-config .config-block.active { display: block; }
.revelation-item-config .config-note {
    font-size: 0.78rem;
    color: #666;
    font-style: italic;
    margin-top: 0.3rem;
    line-height: 1.35;
}
.revelation-item-config .current-bonuses {
    margin-top: 0.4rem;
    padding: 0.5rem 0.65rem;
    background: #f7f7f4;
    border: 1px solid #d8d4c8;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #2c2c2c;
    line-height: 1.45;
}
.revelation-item-config .current-bonuses .cb-row { margin-bottom: 0.15rem; }
.revelation-item-config .current-bonuses .cb-row:last-child { margin-bottom: 0; }
.revelation-item-config .current-bonuses .cb-label { font-weight: 600; color: #1a1a1a; }
.revelation-item-config .current-bonuses .cb-empty { font-style: italic; color: #777; }

.revelation-notes-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.35rem;
}
.revelation-notes-textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    box-sizing: border-box;
}
.revelation-notes-textarea:focus {
    outline: none;
    border-color: #1a1a1a;
}

.milestone-modal-footer {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
}
.milestone-modal-footer .btn-milestone-cancel {
    padding: 0.6rem 1.2rem;
    background: white;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.milestone-modal-footer .btn-milestone-cancel:hover { background: #f0f0f0; }
.milestone-modal-footer .btn-milestone-confirm {
    padding: 0.6rem 1.4rem;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.milestone-modal-footer .btn-milestone-confirm:hover { background: #333; }
.milestone-modal-footer .btn-milestone-confirm:disabled {
    background: #aaa;
    cursor: not-allowed;
}

/* "+ Add Milestone" button inside the creator milestone count badge */
.btn-add-milestone {
    margin-left: 0.75rem;
    padding: 0.2rem 0.65rem;
    background: white;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    vertical-align: middle;
}
.btn-add-milestone:hover {
    background: #f0f0f0;
    border-color: #aaa;
}

/* Spec column breakdown tooltip — CSS-only, shared by creator and character sheet */
.stat-spec-tip {
    position: relative;
    cursor: default;
}
.stat-spec-tip .stat-spec-tip-content {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 9999;
    pointer-events: none;
    text-align: left;
    line-height: 1.6;
}
.stat-spec-tip:hover .stat-spec-tip-content {
    display: block;
}