/**
 * STOVAKOR - Améliorations pour les pages d'histoire
 * Styles supplémentaires pour enrichir l'expérience de lecture
 */

/* ====================
   CHAPITRES D'HISTOIRE
   ==================== */
.story-chapter {
    position: relative;
    margin-bottom: 3rem;
    border: none !important;
    box-shadow: 0 2px 12px rgba(74, 56, 41, 0.12) !important;
}

/* Header de chapitre - style bandeau de titre de livre */
.story-chapter .card-header {
    border: none !important;
    border-bottom: 1px solid rgba(184, 151, 77, 0.3) !important;
    padding: 1.5rem 2rem;
}

/* Contenu du chapitre - aspect page de livre */
.story-chapter .card-body {
    background: #f8f8f8;
    position: relative;
    font-size: 1.1rem;
    line-height: 1.9;
    padding: 2.5rem 3rem;
    border: none;
}

/* Footer - zone de choix intégrée avec même fond que le body */
.story-chapter .card-footer {
    background: #f8f8f8 !important;
    border: none !important;
    padding: 1.5rem 3rem 2.5rem 3rem;
    margin: 0;
}

/* Bordures décoratives pour les paragraphes importants */
.story-chapter .card-body p {
    padding-left: 1.5rem;
    border-left: 2px solid transparent;
    transition: border-color 0.3s ease;
    color: var(--color-ink);
    font-weight: 400;
}

.story-chapter .card-body p:hover {
    border-left-color: var(--color-gold);
}

.story-chapter .card-body strong,
.story-chapter .card-body b {
    color: var(--color-leather-dark);
    font-weight: 700;
}

/* ====================
   ÉVÉNEMENTS DE CHAPITRE
   ==================== */

/* Conteneur des événements */
.chapter-events-container {
    position: relative;
    padding: 0;
}

/* Sidebar des événements */
.chapter-events-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 1rem;
    background: rgba(253, 248, 240, 0.5);
    border-radius: 12px;
    border: 2px solid rgba(184, 151, 77, 0.2);
    box-shadow: 0 2px 12px rgba(74, 56, 41, 0.08);
}

/* Scrollbar personnalisée pour la sidebar */
.chapter-events-sidebar::-webkit-scrollbar {
    width: 8px;
}

.chapter-events-sidebar::-webkit-scrollbar-track {
    background: rgba(184, 151, 77, 0.1);
    border-radius: 4px;
}

.chapter-events-sidebar::-webkit-scrollbar-thumb {
    background: rgba(184, 151, 77, 0.4);
    border-radius: 4px;
}

.chapter-events-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 151, 77, 0.6);
}

.events-sidebar-header {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(184, 151, 77, 0.3);
}

.events-sidebar-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-leather-dark);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.events-icon {
    font-size: 1.3rem;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Ajustements des événements dans la sidebar */
.chapter-events-sidebar .chapter-event {
    font-size: 0.9rem;
}

.chapter-events-sidebar .event-icon-header {
    font-size: 1.5rem;
}

.chapter-events-sidebar .event-title {
    font-size: 1rem;
}

.chapter-events-sidebar .event-description {
    font-size: 0.85rem;
}

.chapter-events-sidebar .event-impact {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
}

.chapter-events-sidebar .constitution-change {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chapter-events-sidebar .constitution-label {
    display: none; /* On cache le label dans la sidebar pour gagner de la place */
}

.chapter-events-sidebar .constitution-delta {
    text-align: center;
    font-size: 0.9rem;
}

/* Carte d'événement de base */
.chapter-event {
    border: 2px solid rgba(184, 151, 77, 0.3) !important;
    box-shadow: 0 2px 8px rgba(74, 56, 41, 0.1) !important;
    transition: all 0.3s ease;
    animation: eventReveal 0.5s ease-out;
}

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

/* Événement négatif (piège, perte de constitution) */
.chapter-event.event-negative {
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    border-color: rgba(220, 53, 69, 0.3) !important;
}

.chapter-event.event-negative:hover {
    border-color: rgba(220, 53, 69, 0.5) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15) !important;
}

/* Événement positif (bonus, guérison) */
.chapter-event.event-positive {
    background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
    border-color: rgba(40, 167, 69, 0.3) !important;
}

.chapter-event.event-positive:hover {
    border-color: rgba(40, 167, 69, 0.5) !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15) !important;
}

/* Icône d'événement */
.event-icon {
    font-size: 2rem;
    line-height: 1;
    min-width: 50px;
    text-align: center;
}

/* Titre de l'événement */
.event-title {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-leather-dark);
    margin-bottom: 0.5rem;
}

/* Description de l'événement */
.event-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-ink);
    font-style: italic;
}

/* Impact sur la constitution */
.event-impact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(74, 56, 41, 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--color-gold);
    margin-top: 0.5rem;
    font-family: 'Cinzel', serif;
}

.constitution-label {
    font-weight: 600;
    color: var(--color-leather-dark);
    font-size: 0.95rem;
}

.constitution-before,
.constitution-after {
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
}

.constitution-before {
    color: var(--color-leather);
}

.constitution-after {
    color: var(--color-leather-dark);
}

.constitution-fatal {
    color: #dc3545 !important;
    animation: fatalPulse 1s ease-in-out infinite;
}

@keyframes fatalPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.constitution-arrow {
    color: var(--color-gold);
    font-weight: bold;
    font-size: 1.2rem;
}

.constitution-delta {
    font-weight: 700;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* ====================
   ÉTATS DE JEU SPÉCIAUX
   ==================== */

/* État Victoire */
.story-chapter.bg-success {
    animation: victoryGlow 2s ease-in-out infinite;
}

@keyframes victoryGlow {
    0%, 100% {
        box-shadow:
                0 0 20px rgba(90, 114, 71, 0.4),
                0 4px 16px rgba(74, 56, 41, 0.25);
    }
    50% {
        box-shadow:
                0 0 40px rgba(90, 114, 71, 0.6),
                0 8px 24px rgba(74, 56, 41, 0.35);
    }
}

.story-chapter.bg-success .card-header::after {
    content: '👑';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    animation: crownBounce 1s ease-in-out infinite;
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-60%) scale(1.1); }
}

/* État Game Over */
.story-chapter.bg-warning {
    animation: warningPulse 1.5s ease-in-out infinite;
}

@keyframes warningPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.story-chapter.bg-warning .card-header::after {
    content: '⚠️';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    animation: warningShake 0.5s ease-in-out infinite;
}

@keyframes warningShake {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    25% { transform: translateY(-50%) rotate(-5deg); }
    75% { transform: translateY(-50%) rotate(5deg); }
}

/* ====================
   CHOIX D'HISTOIRE AMÉLIORÉS
   ==================== */
.story-choices-header {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.story-choices-header h4 {
    font-size: 1.3rem;
    font-weight: 600;
}

.story-choices-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 1px;
    background: linear-gradient(
            to right,
            transparent,
            rgba(184, 151, 77, 0.4),
            transparent
    );
}

/* Numérotation des choix */
.story-chapter .card-footer .list-group {
    counter-reset: choice;
    border: none !important;
    background: transparent !important;
    padding: 0;
    margin: 0;
    width: 100%;
}

.story-chapter .card-footer .list-group-item {
    counter-increment: choice;
    padding: 1rem 1.5rem 1rem 3.5rem;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid rgba(184, 151, 77, 0.2) !important;
    background: #ffffff !important;
    margin-bottom: 0.75rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(74, 56, 41, 0.08);
    transition: all 0.25s ease;
    width: 100%;
}

.story-chapter .card-footer .list-group-item:hover {
    background: rgba(253, 248, 240, 0.6) !important;
    border-color: var(--color-gold) !important;
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(74, 56, 41, 0.12);
}

.story-chapter .card-footer .list-group-item::before {
    content: counter(choice) '.';
    position: absolute;
    left: 1.25rem;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--color-leather);
    line-height: 1;
}

.story-chapter .card-footer .list-group-item a {
    flex: 1;
    line-height: 1.6;
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--color-ink);
}

.story-chapter .card-footer .list-group-item a:hover {
    color: var(--color-leather-dark);
}

/* Animation de révélation progressive des choix */
@keyframes revealChoice {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.list-group-item:nth-child(1) { animation: revealChoice 0.4s ease-out 0.1s backwards; }
.list-group-item:nth-child(2) { animation: revealChoice 0.4s ease-out 0.2s backwards; }
.list-group-item:nth-child(3) { animation: revealChoice 0.4s ease-out 0.3s backwards; }
.list-group-item:nth-child(4) { animation: revealChoice 0.4s ease-out 0.4s backwards; }
.list-group-item:nth-child(5) { animation: revealChoice 0.4s ease-out 0.5s backwards; }

/* ====================
   BIBLIOTHÈQUE DES AVENTURES (Page d'accueil)
   ==================== */
.book-page-header {
    position: relative;
    padding: 2rem 0;
    margin-bottom: 3rem;
}

.book-page-header h1 {
    text-shadow: 2px 2px 4px rgba(74, 56, 41, 0.2);
    animation: titleFloat 4s ease-in-out infinite;
}

@keyframes titleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.book-page-header .lead {
    position: relative;
    display: inline-block;
}

/* Soulignement décoratif animé */
.book-page-header .lead::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
            to right,
            transparent,
            var(--color-gold),
            transparent
    );
    animation: underlineGlow 3s ease-in-out infinite;
}

@keyframes underlineGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ====================
   CARTES DE SPHÈRES
   ==================== */
.card.sphere-card {
    position: relative;
    overflow: visible;
}

/* Badge de niveau de concentration */
.concentration-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-red-wax) 0%, #8b3234 100%);
    border-radius: 50%;
    border: 3px solid var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: var(--shadow-medium);
    z-index: 10;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ====================
   IMAGES DES SPHÈRES
   ==================== */
.card-body img {
    position: relative;
    filter: sepia(10%) contrast(1.1);
    transition: filter 0.4s ease;
}

.card:hover .card-body img {
    filter: sepia(0%) contrast(1.2);
}

/* Image flottante pour effet journal/magazine */
.sphere-thumbnail-float {
    float: left;
    max-width: 250px;
    width: 40%;
    height: auto;
    margin: 0 1.5rem 1rem 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(74, 56, 41, 0.2);
}

/* Conteneur du résumé - pas de overflow pour permettre le flow autour de l'image */
.sphere-summary {
    font-family: 'Crimson Text', serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-ink);
    text-align: justify;
}

.sphere-summary p {
    margin-bottom: 0.75rem;
}

/* Clearfix pour le card-body pour contenir les floats */
.card-body::after {
    content: "";
    display: table;
    clear: both;
}

/* Cadre décoratif autour des images */
.card-body img::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid var(--color-gold);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* ====================
   BOUTONS D'ACTION THÉMATIQUES
   ==================== */
.btn i {
    transition: transform 0.3s ease;
}

.btn:hover i {
    transform: scale(1.2);
}

/* Effet de sceau de cire sur les boutons primaires - DÉSACTIVÉ
   L'emoji 🔏 ressemble trop à un cadenas et peut prêter à confusion
.btn-primary::after {
    content: '🔏';
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover::after {
    opacity: 1;
}
*/

/* ====================
   MESSAGES D'ÉTAT
   ==================== */
.alert, .validation-message, .bg-danger {
    position: relative;
    border-left: 4px solid var(--color-red-wax);
}

/* ====================
   SCROLLBAR THÉMATIQUE (Firefox)
   ==================== */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--color-leather) var(--color-parchment-dark);
}

/* ====================
   EFFET DE VIGNETTE SUR LE CONTENU
   ==================== */
#main::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-shadow: inset 0 0 100px rgba(74, 56, 41, 0.1);
    border-radius: var(--radius-lg);
}

/* ====================
   RESPONSIVE - AJUSTEMENTS MOBILES
   ==================== */

/* Tablette */
@media (max-width: 991px) {
    .story-chapter .card-body {
        font-size: 1.05rem;
    }

    .concentration-badge {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }

    /* Sidebar événements en mode tablette - désactiver sticky */
    .chapter-events-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        overflow-y: visible;
        margin-bottom: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Chapitres d'histoire */
    .story-chapter .card-header h3 {
        font-size: 1.1rem;
    }

    .story-chapter .card-body {
        font-size: 1rem;
        line-height: 1.7;
        padding: 1.25rem;
    }

    .story-chapter .card-body p {
        padding-left: 0.5rem;
        margin-bottom: 1rem;
    }

    /* Événements de chapitre sur mobile */
    .event-icon {
        font-size: 1.5rem;
        min-width: 40px;
    }

    .event-title {
        font-size: 1.1rem;
    }

    .event-description {
        font-size: 0.95rem;
    }

    .event-impact {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem;
    }

    .constitution-before,
    .constitution-after {
        font-size: 1rem;
    }

    /* En-tête de page */
    .book-page-header {
        padding: 1rem 0;
        margin-bottom: 2rem;
    }

    .book-page-header h1 {
        font-size: 1.5rem;
    }

    .book-page-header .lead {
        font-size: 0.95rem;
    }

    /* Badge de concentration */
    .concentration-badge {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
        top: -8px;
        right: -8px;
    }

    /* Choix d'histoire */
    .story-choices-header {
        margin-bottom: 1.5rem;
    }

    .story-choices-header h4 {
        font-size: 1.1rem;
    }

    .list-group-item {
        padding: 0.85rem 1rem 0.85rem 2.5rem;
        font-size: 0.95rem;
    }

    .list-group-item::before {
        left: 1rem !important;
        font-size: 1rem;
    }

    .list-group-item a {
        font-size: 0.95rem;
    }

    /* Désactiver certaines animations sur mobile */
    .list-group-item:hover {
        transform: translateX(4px);
    }

    /* Images - sur mobile, empiler verticalement */
    .sphere-thumbnail-float {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
        display: block;
    }

    .sphere-summary {
        text-align: left;
    }
}

/* Petit mobile */
@media (max-width: 576px) {
    .story-chapter .card-body {
        font-size: 0.95rem;
        padding: 1rem;
    }

    .book-page-header h1 {
        font-size: 1.3rem;
    }

    .story-choices-header h4 {
        font-size: 1rem;
    }

    .list-group-item {
        padding: 0.75rem 0.85rem 0.75rem 2.25rem;
        font-size: 0.9rem;
    }

    .concentration-badge {
        width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }

    /* Simplifier les effets sur petit écran */
    .card:hover {
        transform: translateY(-4px) scale(1);
    }
}

/* Orientation paysage mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .story-chapter .card-body {
        font-size: 0.95rem;
    }

    .book-page-header h1 {
        font-size: 1.4rem;
    }
}

/* ====================
   MODES SOMBRES (Optionnel)
   ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-parchment-light: #2c2416;
        --color-parchment: #3a3227;
        --color-parchment-dark: #4a3829;
    }

    body {
        background-color: var(--color-ink);
    }

    .card-body img {
        filter: sepia(20%) contrast(0.9) brightness(0.9);
    }
}

/* ====================
   PRINT STYLES
   ==================== */
@media print {
    body {
        background: white;
    }

    .navbar, .btn, .card-footer {
        display: none;
    }

    .card {
        box-shadow: none;
        border: 1px solid #000;
        page-break-inside: avoid;
    }

    .story-chapter .card-body {
        font-size: 12pt;
        line-height: 1.5;
    }
}