/* Dashboard Styles - vbn-game */
/* BOOTSTRAP INTEGRATION: Bootstrap 5.3.2 loaded, utilities in use */
/* Bootstrap .container handles max-width and margin */
.dashboard-container { 
    /* Bootstrap .container now handles layout */
    padding: 30px 20px; 
}

/* Join Game Card - Prominent Styling with Background Image */
.join-game-card {
    position: relative;
    background-image: url('../images/Dark marble-6.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid #C87B3E;
    box-shadow: 0 8px 32px rgba(139, 0, 0, 0.6), inset 0 0 40px rgba(200, 123, 62, 0.2);
    overflow: hidden;
}

.join-game-card .card-body {
    position: relative;
    z-index: 1;
    padding: 2.5rem;
}

.join-game-card .card-title {
    font-size: 2.5em;
    color: #f5e6d3;
    /* Embossed text effect */
    text-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.1),
        0 -1px 0 rgba(0, 0, 0, 0.8),
        1px 1px 0 rgba(0, 0, 0, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.8),
        2px 2px 4px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(200, 123, 62, 0.3);
    margin-bottom: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.join-game-card .card-text {
    font-size: 1.2em;
    color: #d4c4b0;
    /* Embossed text effect */
    text-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.1),
        0 -1px 0 rgba(0, 0, 0, 0.7),
        1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 1.5rem;
}

.join-game-card .btn-primary {
    font-size: 1.2em;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #8B0000 0%, #600000 100%);
    border: 2px solid #C87B3E;
    box-shadow: 
        0 4px 15px rgba(139, 0, 0, 0.5), 
        0 0 20px rgba(200, 123, 62, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.join-game-card .btn-primary:hover {
    background: linear-gradient(135deg, #A00000 0%, #700000 100%);
    box-shadow: 
        0 6px 20px rgba(139, 0, 0, 0.7), 
        0 0 30px rgba(200, 123, 62, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
}

/* Player Resources Cards — equal height via .h-100.d-flex.flex-column on markup */

/* Button Styles */
.btn-questionnaire {
    background: linear-gradient(135deg, #4B0082 0%, #2E0854 100%);
    border-color: #4B0082;
}

/* Hero Section — .text-center on markup; keep non-scale spacing/height */
.dashboard-hero { margin-bottom: 40px; height: 25vh; }
.chronicle-tagline { background: linear-gradient(135deg, rgba(139, 0, 0, 0.2) 0%, rgba(26, 15, 15, 0.4) 100%); border-left: 4px solid #8B0000; border-right: 4px solid #8B0000; padding: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
.tagline-text { font-family: var(--font-brand), 'IM Fell English', serif; font-size: 1.8em; color: #f5e6d3; font-style: italic; line-height: 1.4; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); margin: 0; }

/* Chronicle Summary */
.chronicle-summary { margin-bottom: 50px; }
/* Bootstrap .card component handles panel styling (themed in bootstrap-overrides.css) */
/* .text-center on markup */
.chronicle-title { font-family: var(--font-brand), 'IM Fell English', serif; color: #f5e6d3; font-size: 2em; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); }
.chronicle-text { font-family: var(--font-body), 'Source Serif Pro', serif; color: #d4c4b0; font-size: 1.1em; line-height: 1.8; text-align: justify; }

/* Section Headings */
.section-heading { font-family: var(--font-title), 'Libre Baskerville', serif; color: #f5e6d3; font-size: 2.2em; margin-bottom: 15px; border-bottom: 2px solid #8B0000; padding-bottom: 10px; }
.welcome-text { font-family: var(--font-body), 'Source Serif Pro', serif; color: #b8a090; font-size: 1.1em; margin-bottom: 30px; font-style: italic; }

/* Stats Panel (Admin) */
/* Bootstrap .row and .g-4 handle layout and spacing */
.stats-panel { 
    /* Bootstrap utilities now handle layout */
}
/* Bootstrap .card component with custom theming */
.vbn-stat-number { 
    font-family: var(--font-brand), 'IM Fell English', serif; 
    font-size: 3em; 
    color: #8B0000; 
    font-weight: bold; 
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5); 
}
.vbn-stat-label { 
    font-family: var(--font-body), 'Source Serif Pro', serif; 
    color: #b8a090; 
    font-size: 1em; 
    margin-top: 10px; 
}

/* Action Grid */
/* Bootstrap .row and .g-4 handle layout and spacing */
/* Card hover effects handled in bootstrap-overrides.css */
.vbn-card-icon { 
    font-size: 3em; 
    margin-bottom: 15px; 
}

/* Buttons - Use Bootstrap classes primarily, .vbn- prefix for custom overrides */
.vbn-gothic-button-disabled { display: inline-block; background: #3a3a3a; color: #666; padding: 12px 25px; border: 1px solid #555; border-radius: 5px; font-family: var(--font-body), 'Source Serif Pro', serif; cursor: not-allowed; }

/* Player Specific */
/* Bootstrap utilities handle: .d-flex .justify-content-center .gap-4 .mb-5 */
/* Bootstrap .btn component with custom theming */
.btn-icon { 
    font-size: 1.5em; 
}

/* Character List — spacing via .mb-5 on markup */
.list-heading { 
    font-family: var(--font-title), 'Libre Baskerville', serif; 
    color: #f5e6d3; 
    font-size: 1.6em; 
    margin-bottom: 20px; 
    padding-bottom: 10px; 
    border-bottom: 2px solid #8B0000; 
}
/* Character Cards with Clan-Specific Styling */
.character-list .card {
    background: linear-gradient(135deg, var(--deep-maroon) 0%, var(--dusk-brown-black) 100%);
    border: 2px solid var(--blood-red);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.vbn-character-clan { 
    font-family: var(--font-body), 'Source Serif Pro', serif; 
    color: #b8a090; 
    font-size: 1.1em; 
    font-style: italic; 
}

/* OPTION 3: BACKGROUND INTENSITY + PULSE - Clan colors become more vibrant with pulse animation */
.character-list .card:hover {
    border-color: var(--muted-gold);
    box-shadow: 0 8px 30px rgba(139, 0, 0, 0.6);
    animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% { 
        box-shadow: 0 8px 30px rgba(139, 0, 0, 0.6);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(139, 0, 0, 0.9);
    }
}
.character-list .card.clan-toreador:hover {
    border-color: rgba(220, 20, 60, 1);
    background: linear-gradient(135deg, 
        rgba(220, 20, 60, 0.3) 0%, 
        var(--deep-maroon) 40%, 
        var(--dusk-brown-black) 100%);
    animation: pulseGlowToreador 2s ease-in-out infinite;
}
@keyframes pulseGlowToreador {
    0%, 100% { 
        box-shadow: 0 8px 30px rgba(220, 20, 60, 0.7);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(220, 20, 60, 1);
    }
}
.character-list .card.clan-brujah:hover {
    border-color: rgba(139, 0, 0, 1);
    background: linear-gradient(135deg, 
        rgba(100, 100, 100, 0.4) 0%, 
        var(--deep-maroon) 40%, 
        var(--dusk-brown-black) 100%);
    animation: pulseGlowBrujah 2s ease-in-out infinite;
}
@keyframes pulseGlowBrujah {
    0%, 100% { 
        box-shadow: 0 8px 30px rgba(139, 0, 0, 0.7);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(139, 0, 0, 1);
    }
}
.character-list .card.clan-ventrue:hover {
    border-color: var(--muted-gold);
    background: linear-gradient(135deg, 
        rgba(212, 176, 109, 0.2) 0%, 
        rgba(139, 0, 0, 0.15) 30%,
        var(--deep-maroon) 60%, 
        var(--dusk-brown-black) 100%);
    animation: pulseGlowVentrue 2s ease-in-out infinite;
}
@keyframes pulseGlowVentrue {
    0%, 100% { 
        box-shadow: 0 8px 30px rgba(212, 176, 109, 0.7);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(212, 176, 109, 1);
    }
}
.character-list .card.clan-nosferatu:hover {
    border-color: rgba(139, 0, 0, 0.9);
    background: linear-gradient(135deg, 
        rgba(50, 50, 50, 0.5) 0%, 
        var(--deep-maroon) 40%, 
        var(--dusk-brown-black) 100%);
    animation: pulseGlowNosferatu 2s ease-in-out infinite;
}
@keyframes pulseGlowNosferatu {
    0%, 100% { 
        box-shadow: 0 8px 30px rgba(50, 50, 50, 0.7);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(50, 50, 50, 1);
    }
}
.character-list .card.clan-malkavian:hover {
    border-color: rgba(255, 20, 147, 1);
    background: linear-gradient(135deg, 
        rgba(255, 20, 147, 0.2) 0%, 
        rgba(138, 43, 226, 0.2) 50%,
        var(--deep-maroon) 70%, 
        var(--dusk-brown-black) 100%);
    animation: pulseGlowMalkavian 2s ease-in-out infinite;
}
@keyframes pulseGlowMalkavian {
    0%, 100% { 
        box-shadow: 0 8px 30px rgba(255, 20, 147, 0.7);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(255, 20, 147, 1), 0 0 60px rgba(138, 43, 226, 0.6);
    }
}
.character-list .card.clan-setite:hover,
.character-list .card.clan-followers-of-set:hover {
    border-color: var(--muted-gold);
    background: linear-gradient(135deg, 
        rgba(139, 0, 0, 0.3) 0%, 
        rgba(220, 20, 60, 0.25) 30%,
        rgba(212, 176, 109, 0.2) 50%,
        var(--deep-maroon) 70%, 
        var(--dusk-brown-black) 100%);
    animation: pulseGlowSetite 2s ease-in-out infinite;
}
@keyframes pulseGlowSetite {
    0%, 100% { 
        box-shadow: 0 8px 30px rgba(220, 20, 60, 0.6);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(220, 20, 60, 0.9), 0 0 60px rgba(212, 176, 109, 0.6);
    }
}
.character-list .card.clan-giovanni:hover {
    border-color: rgba(139, 0, 0, 0.8);
    background: linear-gradient(135deg, 
        rgba(128, 128, 128, 0.4) 0%, 
        var(--deep-maroon) 50%, 
        var(--dusk-brown-black) 100%);
    animation: pulseGlowGiovanni 2s ease-in-out infinite;
}
@keyframes pulseGlowGiovanni {
    0%, 100% { 
        box-shadow: 0 8px 30px rgba(128, 128, 128, 0.7);
    }
    50% { 
        box-shadow: 0 8px 50px rgba(128, 128, 128, 1);
    }
}

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; background: rgba(26, 15, 15, 0.3); border: 2px dashed rgba(139, 0, 0, 0.3); border-radius: 8px; }
.empty-state p { font-family: var(--font-body), 'Source Serif Pro', serif; color: #b8a090; font-size: 1.1em; margin: 10px 0; }
.empty-hint { font-style: italic; color: #888; }

/* Player Links */
.player-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
.vbn-link-card { background: linear-gradient(135deg, #2a1515 0%, #1a0f0f 100%); border: 2px solid rgba(139, 0, 0, 0.5); border-radius: 8px; padding: 25px; text-align: center; opacity: 0.6; }

/* Responsive Design */
@media (max-width: 768px) {
    .tagline-text { font-size: 1.3em; }
    .section-heading { font-size: 1.8em; }
    /* Bootstrap responsive utilities handle stats-panel and action-grid layout */
    /* Character header responsive handled by Bootstrap flex-wrap */
}