/* Chronos Game - Page moderne avec isolation complète */

.chronos-game-page {
    background: linear-gradient(135deg, #66a9ea 0%, #000000 100%);
    font-family: var(--font-family);
    padding: 20px;
    overflow-x: hidden;
    position: relative;
    min-height: calc(100vh - 112px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Isolation CSS pour éviter la pollution */
    isolation: isolate;
}

.game-container {
    max-width: 1400px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}


/* ===== SETUP PLAYER STYLES ===== */
.chronos-setup-container {
    max-width: 800px;
    margin: 0 auto;
}

.setup-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    margin-top: 8px;
    font-weight: 400;
}

.setup-step {
    overflow: visible;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
    margin: 20px 0;
    /* Effet de table en bois */
    background: linear-gradient(135deg, 
        rgba(139, 69, 19, 0.1) 0%, 
        rgba(160, 82, 45, 0.05) 25%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(160, 82, 45, 0.05) 75%,
        rgba(139, 69, 19, 0.1) 100%);
}

.setup-step h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.player-count-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
    max-width: 600px;
    margin: 0 auto 30px auto;
}

.player-count-btn {
    background: linear-gradient(135deg, var(--chronos-primary), var(--chronos-secondary));
    color: white;
    border: none;
    border-radius: 12px;
    padding: 20px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.player-count-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.player-count-btn .player-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    gap: 3px;
    width: 60px;
    line-height: 1;
    min-height: 28px;
}

.player-count-btn .player-icons i {
    font-size: 14px;
    opacity: 0.9;
}

.custom-count {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.9);
    padding: 10px 15px;
    border-radius: 12px;
    border: 2px solid var(--chronos-primary);
}

.custom-count input {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    width: 120px;
    text-align: center;
    color: var(--chronos-primary);
    font-weight: 600;
}

.custom-count input:focus {
    outline: none;
}

.custom-count-btn {
    background: var(--chronos-primary);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-count-btn:hover:not(:disabled) {
    background: var(--chronos-secondary);
    transform: scale(1.1);
}

.custom-count-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-count-btn.valid {
    background: #10b981;
}

.custom-count-btn.valid:hover {
    animation: pulse 1s infinite;
}

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

.players-config {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.player-config {
    background: rgba(255,255,255,0.7);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.player-config:hover {
    border-color: var(--chronos-primary);
    background: rgba(255,255,255,0.9);
}

.player-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.player-details {
    flex: 1;
    display: flex;
    gap: 20px;
}

.player-name-group, .player-color-group {
    flex: 1;
}

.player-name-group label, .player-color-group label {
    display: block;
    color: var(--chronos-primary);
    font-weight: 600;
    margin-bottom: 5px;
}

.player-name-input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid rgba(var(--chronos-primary-rgb), 0.3);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.player-name-input:focus {
    outline: none;
    border-color: var(--chronos-primary);
    box-shadow: 0 0 10px rgba(var(--chronos-primary-rgb), 0.3);
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-color-input {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.color-randomize-btn {
    background: var(--chronos-primary);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-randomize-btn:hover {
    background: var(--chronos-secondary);
    transform: rotate(180deg);
}

.config-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    gap: 15px;
}

.config-actions .btn {
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.config-actions .btn-secondary {
    background: rgba(var(--chronos-primary-rgb), 0.2);
    color: var(--chronos-primary);
    border: 2px solid var(--chronos-primary);
}

.config-actions .btn-secondary:hover {
    background: var(--chronos-primary);
    color: white;
}

.config-actions .btn-primary {
    background: linear-gradient(135deg, var(--chronos-primary), var(--chronos-secondary));
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.config-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.game-filters {
    overflow: visible;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
    /* Effet de table en bois */
    background: linear-gradient(135deg, 
        rgba(139, 69, 19, 0.08) 0%, 
        rgba(160, 82, 45, 0.04) 25%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(160, 82, 45, 0.04) 75%,
        rgba(139, 69, 19, 0.08) 100%);
}

.game-filters h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.game-filters .filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--chronos-primary);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    margin: 5px;
    font-size: 0.9rem;
    font-weight: 500;
}

.game-filters .filter-badge.themes {
    background: linear-gradient(135deg, #10b981, #059669);
}

.game-filters .filter-badge.dates {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Instructions intégrées dans la table de jeu */
.game-instructions {
    padding: 15px 20px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.instruction-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.8);;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 12px;
    background: rgba(255,255,255,0.3);
    border-radius: 20px;
    border: 1px solid rgba(139, 69, 19, 0.2);
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
}

.instruction-item i {
    color: white;
    font-size: 1rem;
    opacity: 0.8;
}

/* Zone de jeu principale - Table de jeu unifiée */
.game-area {
    overflow: visible;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 0px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Effet de table en bois */
    background: linear-gradient(135deg, 
        rgba(139, 69, 19, 0.1) 0%, 
        rgba(160, 82, 45, 0.05) 25%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(160, 82, 45, 0.05) 75%,
        rgba(139, 69, 19, 0.1) 100%);
}

/* Header intégré dans la zone de jeu */
.game-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-left: 20px;
}

.game-info-inline h1 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-info-inline h1 i {
    color: white;
    font-size: 1.8rem;
}

.game-info-inline p {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.title-and-filters {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.filter-badge.themes {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.3);
}

.filter-badge.dates {
    background: linear-gradient(135deg, #fef7cd, #fde68a);
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.3);
}

.restart-btn-inline {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    font-size: 0.95rem;
}

.restart-btn-inline:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Tableau de score en haut à droite */
.score-board {
    min-width: 300px;
    max-height: 200px;
    position: absolute;
    top: 20px;
    right: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 15px 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 5;
    /* Effet de table en bois */
    background: linear-gradient(135deg, 
        rgba(139, 69, 19, 0.08) 0%, 
        rgba(160, 82, 45, 0.04) 25%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(160, 82, 45, 0.04) 75%,
        rgba(139, 69, 19, 0.08) 100%);
}

.score-board h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    text-align: center;
    border-bottom: 1px solid rgba(139, 69, 19, 0.2);
    padding-bottom: 8px;
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.score-item .label {
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-item .value {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    min-width: 30px;
    text-align: center;
}

.score-item.correct .value {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.score-item.incorrect .value {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.score-item.total .value {
    color: #8B4513;
    background: rgba(139, 69, 19, 0.1);
    font-size: 1.1rem;
}

.score-item.total {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(139, 69, 19, 0.2);
}

/* Section chronologique */
.chrono-section {
    background: transparent;
    border-radius: 20px;
    padding: 20px 0 00px 0;
    margin-bottom: 0px;
    position: relative;
}

.section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #8B4513;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
}

.section-title i {
    color: #667eea;
    font-size: 1.3rem;
}

.chrono-container {
    position: relative;
    padding: 20px 0;
    margin-top: 90px;
}


.chrono-container::before {
    left: 0;
    background: 
        linear-gradient(to right, 
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.8) 30%,
            rgba(255, 255, 255, 0.3) 70%,
            transparent 100%),
        /* Simulation d'un flou avec des éléments dégradés */
        radial-gradient(ellipse 40px 100% at left center, 
            rgba(255, 255, 255, 0.9) 0%, 
            rgba(255, 255, 255, 0.5) 40%, 
            transparent 100%);
    filter: blur(1px);
}

.chrono-container::after {
    right: 0;
    background: 
        linear-gradient(to left, 
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.8) 30%,
            rgba(255, 255, 255, 0.3) 70%,
            transparent 100%),
        /* Simulation d'un flou avec des éléments dégradés */
        radial-gradient(ellipse 40px 100% at right center, 
            rgba(255, 255, 255, 0.9) 0%, 
            rgba(255, 255, 255, 0.5) 40%, 
            transparent 100%);
    filter: blur(1px);
}

.chrono-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #667eea;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease-out, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;
    /* Hardware acceleration */
    will-change: transform, background-color, color, box-shadow;
    backface-visibility: hidden;
    color: #667eea;
    font-size: 1.2rem;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.chrono-scroll-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-50%) scale3d(1.1, 1.1, 1);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
}

.chrono-scroll-left {
    left: 5px;
}

.chrono-scroll-right {
    right: 5px;
}

.chrono-wrapper {
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
    position: relative;
}

.chrono-wrapper::-webkit-scrollbar {
    height: 8px;
}

.chrono-wrapper::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

.chrono-wrapper::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 4px;
}

.chrono-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}

.chrono-line {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: fit-content;
    position: relative;
}

/* Événements chronologiques */
.chrono-event {
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #667eea;
    border-radius: 20px;
    padding: 20px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    min-height: 140px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.15);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
    /* Hardware Acceleration pour les animations de drop */
    will-change: transform, box-shadow, border-color;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: layout style paint;
}


.card-date {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
    padding: 6px 12px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 15px;
    display: inline-block;
}

.card-title-placed {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1f2937;
    margin-bottom: 12px;
}

/* Zones de drop */
.drop-zone {
    margin-top: 70px;
    min-width: 80px;
    height: 160px;
    border: 3px dashed rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-out, background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
    z-index: 2;
    /* Hardware Acceleration pour les animations de drop zones */
    will-change: transform, background-color, border-color;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: layout style paint;
}

.drop-zone.active {
    border-color: white;
    background: rgba(255, 255, 255, 0.5);
}

.drop-zone.active:hover {
    animation: pulse-glow 2s infinite;
    cursor: pointer;
}

.drop-zone.hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    transform: scale3d(1.1, 1.1, 1);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
}

.drop-indicator {
    font-size: 2rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.drop-zone.active .drop-indicator {
    color: white;
}

.drop-zone.hover .drop-indicator {
    color: #10b981;
}

/* Section main */
.hand-section {
    background: transparent;
    border-radius: 20px;
    position: relative;
}

.hand-count {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
    padding: 4px 12px;
    border-radius: 15px;
}

.hand-container {
    overflow: visible;
}

.hand {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-width: fit-content;
    perspective: 1000px;
    min-height: 200px;
}

/* Cartes de la main en éventail */
.hand-card {
    background: rgba(255, 255, 255, 0.98);
    border: 3px solid rgba(102, 126, 234, 0.3);
    border-radius: 15px;
    width: 180px;
    min-width: 180px;
    padding: 15px;
    cursor: grab;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease-out, border-color 0.3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    transform-origin: bottom center;
    margin: 0 -30px;
    /* Hardware Acceleration pour fluidité du hover */
    will-change: transform, z-index;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: layout style paint;
}

/* Carte sélectionnée en mobile */
.hand-card.selected-mobile {
    border-color: #10b981 !important;
    z-index:200 !important;
    transform: translate3d(0, -20px, 0) rotateZ(0deg) scale(1) !important;
}


.hand-card:hover::before {
    opacity: 1;
}

/* Effet d'éventail - géré dynamiquement par JavaScript */
/* Les transformations sont appliquées via JS dans applyFanLayout() */

.hand-card:hover {
    transform: translate3d(0, -20px, 0) rotateZ(0deg) scale(1) !important;
    z-index: 200 !important;
    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.3);
    /* Durée spécifique pour le hover */
    transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease-out;
}

.hand-card:active,
.hand-card.dragging {
    cursor: grabbing;
    transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1.1) !important;
    opacity: 0.95;
    z-index: 1000;
    box-shadow: 0 30px 60px rgba(102, 126, 234, 0.4);
}

.card-content {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-description, .card-description-placed{
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 15px;
    padding: 2px 2px;
    background: rgba(107, 114, 128, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(107, 114, 128, 0.1);
    margin-bottom: 40px;
}


/* Images dans les cartes */
.card-images-container {
    margin-top: 12px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.hand-card .card-images-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    margin-top: 0;
    border-radius: 0 0 17px 17px;
}

.chrono-event .card-images-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    margin-top: 0;
    border-radius: 0 0 17px 17px;
}

/* Images dans Chronos - Affichage direct sans lazy loading */
.chronos-game-page .chronos-images {
    height: 100%;
    gap: 1px;
    border-radius: inherit;
    display: flex;
    padding: 0;
    background: rgba(248, 250, 252, 1);
}

.chronos-game-page .chronos-images .card-image {
    height: 100%;
    flex: 1;
    width: 0;
    min-width: 0;
    object-fit: cover;
    cursor: pointer;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.chronos-game-page .chronos-images .card-image:first-child {
    border-radius: inherit 0 0 inherit;
}

.chronos-game-page .chronos-images .card-image:last-child {
    border-radius: 0 inherit inherit 0;
}

.chronos-game-page .chronos-images .card-image:only-child {
    border-radius: inherit;
}

/* ===== MULTIJOUEUR SCORES ===== */
.players-scores {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 100px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 69, 19, 0.3) transparent;
}

.players-scores::-webkit-scrollbar {
    width: 6px;
}

.players-scores::-webkit-scrollbar-track {
    background: transparent;
}

.players-scores::-webkit-scrollbar-thumb {
    background: rgba(139, 69, 19, 0.3);
    border-radius: 3px;
}

.players-scores::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 69, 19, 0.5);
}

.player-score-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.player-score-item.current-player {
    background: rgba(255,255,255,1);
    box-shadow: 0 0 15px rgba(var(--chronos-secondary-rgb), 0.5);
}

.player-score-item.current-player:hover {
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(var(--chronos-secondary-rgb), 0.3); }
    50% { box-shadow: 0 0 25px rgba(var(--chronos-secondary-rgb), 0.7); }
}

.player-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,2);
    flex-shrink: 0;
    position: relative;
}

.player-color.leader {
    position: relative;
}

.player-color.leader::after {
    content: '👑';
    position: absolute;
    top: -19px;
    right: -2px;
    font-size: 22px;
}

.player-color.leader:hover::after {
    animation: crownGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #ffd700);
    z-index: 1;
}

@keyframes crownGlow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px #ffd700);
    }
    50% {
        transform: scale(1.5);
        filter: drop-shadow(0 0 15px #ffd700) drop-shadow(0 0 25px #ffd700);
    }
}

.player-name {
    font-weight: 600;
    color: white;
    font-size: 0.9rem;
}

.player-total-score {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--chronos-secondary);
    min-width: 40px;
    text-align: right;
}

.current-player-indicator {
    padding: 10px 15px;
    background: linear-gradient(135deg, var(--chronos-primary), var(--chronos-secondary));
    border-radius: 10px;
    text-align: center;
}

.current-turn {
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.current-turn i {
}

.current-turn:hover i {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== ÉCRAN DE FIN MULTIJOUEUR ===== */
.game-over-content.multiplayer {
    max-width: 600px;
    padding: 50px;
}

.winner-announcement {
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border-radius: 20px;
    border: 3px solid #ffd700;
    position: relative;
    overflow: hidden;
}

.winner-announcement::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.1) 10px,
        rgba(255,255,255,0.1) 20px
    );
}

.winner-announcement:hover::before {
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.crown {
    font-size: 4rem;
    margin-bottom: 15px;
}

.crown:hover {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}

.winner-announcement h2 {
    font-size: 2rem;
    color: #8b5a00;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin: 10px 0;
    position: relative;
    z-index: 1;
}

.winner-score {
    font-size: 1.2rem;
    color: #8b5a00;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.final-ranking {
    background: rgba(255,255,255,0.95);
    border-radius: 15px;
    padding: 25px;
    padding-bottom:0px;
    margin-bottom: 10px;
}

.final-ranking h3 {
    color: var(--chronos-primary);
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.5rem;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.player-ranking {
    display: flex;
    align-items: center;
    padding: 0px 20px;
    background: rgba(var(--chronos-primary-rgb), 0.1);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.player-ranking.winner {
    background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,237,78,0.3));
    border-color: #ffd700;
    box-shadow: 0 4px 20px rgba(255,215,0,0.4);
}

.player-ranking:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.player-ranking .rank {
    font-size: 1.5rem;
    font-weight: bold;
    width: 50px;
    text-align: center;
    color: var(--chronos-primary);
}

.player-ranking.winner .rank {
    font-size: 2rem;
}

.player-ranking .player-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px;
}

.player-ranking .player-color {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.5);
}

.player-ranking .player-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.player-final-score {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--chronos-primary);
    min-width: 80px;
    text-align: right;
}

.game-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Les quatre variables --chronos-* appelées ici n'ont jamais été déclarées : la
   règle était invalide, le fond ne s'appliquait pas, et au survol il ne restait
   qu'un texte blanc sur la carte blanche de fin de partie. Teintes écrites en
   clair, reprises du bouton « Nouvelle partie » qui lui fait face. */
.restart-btn.secondary {
    background: rgba(102, 126, 234, 0.12) !important;
    color: #5a6fd8 !important;
    border: 2px solid #667eea !important;
}

.restart-btn.secondary:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Écran de fin de partie */
.game-over {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: all 0.3s ease;
}

.game-over.hidden {
    opacity: 0;
    pointer-events: none;
}

.game-over-content {
    background: white;
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    max-width: 450px;
    width: 90%;
    position: relative;
    overflow: hidden;
}

.game-over-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #4ecdc4, #45b7d1, #96ceb4);
}

.game-over h2 {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 25px 0;
}

/* Statistiques finales */
.final-stats {
    margin: 20px 0;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
    padding: 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.stat-item.total {
    border-top: 2px solid rgba(139, 69, 19, 0.3);
    padding-top: 12px;
    margin-top: 15px;
    font-size: 1.2rem;
}

.stat-item .label {
    color: #6b7280;
}

.stat-item .value {
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    min-width: 40px;
    text-align: center;
}

.stat-item .value.correct {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.stat-item .value.incorrect {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.stat-item.total .value {
    color: #8B4513;
    background: rgba(139, 69, 19, 0.1);
    font-size: 1.3rem;
}

/* Bouton Rejouer dans l'écran de fin */
.restart-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Hardware acceleration */
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: layout style paint;
}

.restart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    transition: left 0.6s ease;
}

.restart-btn:hover {
    transform: translate3d(0, -3px, 0) scale3d(1.05, 1.05, 1);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4c93 100%);
}

.restart-btn:hover::before {
    left: 100%;
}

.restart-btn:active {
    transform: translate3d(0, -1px, 0) scale3d(1.02, 1.02, 1);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
}

.restart-btn i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.restart-btn:hover i {
    transform: rotate(180deg);
}

/* Feedback système */
.feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
    background: white;
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    font-size: 1.3rem;
    font-weight: 600;
    z-index: 3000;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-out;
    /* Hardware acceleration */
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout style paint;
}

.feedback.show {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}

.feedback.correct {
    border-left: 5px solid #10b981;
    color: #10b981;
}

.feedback.incorrect {
    border-left: 5px solid #ef4444;
    color: #ef4444;
}

/* Animations */
@keyframes pulse-glow {
    0%, 100% { 
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
    }
    50% { 
        opacity: 1;
        box-shadow: 0 0 0 15px rgba(102, 126, 234, 0);
    }
}

/* Animation de mise en valeur pour la carte positionnée */
.chrono-event.highlight {
    animation: highlightPlaced 0.8s ease-in-out;
    z-index: 10;
}

.chrono-event.highlight-error {
    animation: highlightError 0.8s ease-in-out;
    z-index: 10;
}

/* Classes avec animations d'agrandissement pour les contours */
.chrono-event.border-success {
    border-color: #10b981 !important;
    border-width: 4px !important;
    box-shadow: 0 20px 45px rgba(16, 185, 129, 0.4) !important;
    z-index: 10;
    animation: 0.6s ease-out;
}

.chrono-event.border-error {
    border-color: #ef4444 !important;
    border-width: 4px !important;
    box-shadow: 0 20px 45px rgba(239, 68, 68, 0.4) !important;
    z-index: 10;
    animation: 0.6s ease-out;
}



/* Animations complexes pour le positionnement de cartes */

/* Animation d'écartement des cartes adjacentes */
.chrono-event.slide-left {
    animation: slideLeft 0.4s ease-out;
}

.chrono-event.slide-right {
    animation: slideRight 0.4s ease-out;
}

/* Animation de décalage permanent vers la droite */
.chrono-event.shift-right {
    animation: shiftRight 0.6s ease-out forwards;
}

@keyframes slideLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    40% {
        transform: translate3d(-30px, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideRight {
    0% {
        transform: translate3d(0, 0, 0);
    }
    40% {
        transform: translate3d(30px, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes shiftRight {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(360px, 0, 0); /* Largeur d'une carte + gap */
    }
    100% {
        transform: translate3d(360px, 0, 0); /* Largeur d'une carte + gap */
    }
}

/* Animation de fade-in avec descente pour la nouvelle carte */
.chrono-event.fade-in-drop {
    animation: fadeInDrop 0.3s ease-out;
    animation-fill-mode: both;
}

@keyframes fadeInDrop {
    0% {
        opacity: 1;
        transform: translate3d(0, -50px, 0) scale(0);
        filter: blur(3px);
    }
    30% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scale(0.9);
        filter: blur(1px);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -5px, 0) scale(1.1);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0px);
    }
}

/* État initial pour les cartes qui vont apparaître */
.chrono-event.preparing-drop {
    opacity: 0;
    transform: translate3d(0, -50px, 0) scale(0);
    filter: blur(3px);
}

/* Animation de pioche - nouvelle carte qui apparaît dans la main */
.hand-card.draw-card {
    animation: drawCard 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: both;
    z-index: 100 !important; /* S'assurer qu'elle apparaît au-dessus de tout */
}

/* Animation fade-out pour enlever une carte de la main */
.hand-card.fade-out {
    animation: fadeOutCard 0.4s ease-in-out forwards;
    pointer-events: none; /* Éviter les interactions pendant l'animation */
}

@keyframes drawCard {
    0% {
        opacity: 0;
        transform: translateY(-300px) scale(0.2) rotate(270deg);
        filter: blur(10px);
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
   
    100% {
        opacity: 1;
        /* La position finale sera définie par JavaScript (éventail dynamique) */
        filter: blur(0px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
}

@keyframes fadeOutCard {
    0% {
        opacity: 1;
        transform: scale3d(1, 1, 1) !important;
        filter: blur(0px);
    }
    50% {
        opacity: 0.5;
        transform: scale3d(0.9, 0.9, 1) !important;
        filter: blur(1px);
    }
    100% {
        opacity: 0;
        transform: scale3d(0.7, 0.7, 1) !important;
        filter: blur(3px);
    }
}

/* Effet de brillance pendant la pioche */
.hand-card.draw-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.8), 
        transparent);
    animation: shine 1.2s ease-out;
    z-index: 10;
}

@keyframes shine {
    0% { left: -100%; }
    50% { left: 0%; }
    100% { left: 100%; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .chronos-game-page {
        padding: 15px;
    }
    
    .game-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 25px;
    }
    
    .game-info h1 {
        font-size: 2rem;
    }
    
    .game-stats {
        flex-direction: column;
        gap: 15px;
    }
    
    .game-instructions {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    /* Ajuster la timeline pour mobile mais garder horizontal */
    .chrono-event {
        width: 132px;
        min-width: 132px;
        max-width: 132px;
        min-height: 100px;
        padding: 10px;
    }
    
    .drop-zone {
        min-width: 60px;
        height: 80px;
    }
    
    /* Main en éventail conservée sur mobile */
    .hand {
        justify-content: center;
        min-height: 180px;
    }
    
    .hand-card {
        width: 120px;
        min-width: 120px;
        min-height: 180px;
        padding: 4px;
    }
    
    /* Textes plus petits en mobile */
    .hand-card .card-title {
        font-size: 0.6rem;
        margin-bottom:6px;
    }
    
    .hand-card .card-description {
        font-size: 0.6rem;
        margin-bottom:52px;
    }
    
    .chrono-event .card-date {
        font-size: 0.6rem;
    }
    
    .chrono-event .card-title-placed {
        font-size: 0.6rem;
    }
    
    .chrono-event .card-description-placed {
        font-size: 0.6rem;
    }
    
    /* Ajuster le tableau de score pour mobile */
    .score-board {
        min-width: 0px;
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 10px 15px;
        min-width: 140px;
        font-size: 0.85rem;
    }
    
    .score-board h3 {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }
    
    .score-item {
        margin: 4px 0;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .title-and-filters h1{
        font-size: 1.2rem;
    }
    .btn-config{
        margin-left: 0px !important;
    }
    .chrono-container{
        margin-top: 10vh;
    }
    .hand-container{
        margin-top:3vh;
    }
    .chrono-line{
        gap: 4px;
    }
    .game-header,
    .chrono-section,
    .hand-section {
        padding: 0px;
    }

    .drop-zone{
        min-width: 70px;
        margin-top: 2px;
        height: 120px;
        margin-left: -39px;
        margin-right: -39px;
        z-index: 0;
    }
    .drop-zone.active{
        z-index:10;
    }

    .game-area{
        padding: 0px;
        border-radius: 0;
    }

    .chrono-scroll-btn{
        visibility: hidden;
    }

    .chronos-game-page{
        padding:0px;
    }
    
    .game-info h1 {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 1.3rem;
    }

    @keyframes shiftRight {
        0% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(132px, 0, 0); /* Largeur d'une carte + gap */
        }
        100% {
            transform: translate3d(132px, 0, 0); /* Largeur d'une carte + gap */
        }
    }
}

/* Point Feedback Animation */
.point-feedback {
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate3d(-50%, 0, 0);
    font-size: 1.8rem;
    font-weight: 800;
    text-shadow: 
        2px 2px 4px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(255, 255, 255, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-out;
    z-index: 1001;
    /* Hardware acceleration */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: layout style paint;
}

.point-feedback.positive {
    color: #22c55e;
}

.point-feedback.negative {
    color: #ef4444;
}

.point-feedback.show {
    opacity: 1;
    transform: translate3d(-50%, -40px, 0) scale3d(1.1, 1.1, 1);
    animation: bounceIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.point-feedback.pulse {
}

.point-feedback.glow {
    text-shadow: 
        2px 2px 4px rgba(255, 255, 255, 0.8),
        0 0 15px currentColor,
        0 0 25px currentColor,
        0 0 35px currentColor;
}

.point-feedback.fade-out {
    opacity: 0;
    transform: translate3d(-50%, -80px, 0) scale3d(0.8, 0.8, 1);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -10px, 0) scale3d(0.3, 0.3, 1);
    }
    50% {
        opacity: 1;
        transform: translate3d(-50%, -35px, 0) scale3d(1.2, 1.2, 1);
    }
    100% {
        opacity: 1;
        transform: translate3d(-50%, -40px, 0) scale3d(1.1, 1.1, 1);
    }
}

@keyframes pulseEffect {
    0% {
        transform: translate3d(-50%, -40px, 0) scale3d(1.1, 1.1, 1);
    }
    100% {
        transform: translate3d(-50%, -40px, 0) scale3d(1.15, 1.15, 1);
    }
}

@keyframes glowPulse {
    0% {
        text-shadow: 
            2px 2px 4px rgba(255, 255, 255, 0.8),
            0 0 15px currentColor,
            0 0 25px currentColor,
            0 0 35px currentColor;
    }
    100% {
        text-shadow: 
            2px 2px 4px rgba(255, 255, 255, 0.8),
            0 0 20px currentColor,
            0 0 35px currentColor,
            0 0 50px currentColor;
    }
}

/* Configuration des cartes */
.game-config-section {
    overflow: visible;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
    margin: 25px 0;
    /* Effet de table en bois */
    background: linear-gradient(135deg, 
        rgba(139, 69, 19, 0.08) 0%, 
        rgba(160, 82, 45, 0.04) 25%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(160, 82, 45, 0.04) 75%,
        rgba(139, 69, 19, 0.08) 100%);
}

.game-config-section h3 {
    margin: 0 0 20px 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.card-count-config {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card-count-config label {
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.card-count-selector {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-count-selector input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #4ECDC4, #45B7D1);
    outline: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.card-count-selector input[type="range"]:hover {
    opacity: 1;
}

.card-count-selector input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.card-count-selector input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.card-count-display {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(69, 183, 209, 0.2));
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 10px;
    padding: 8px 15px;
    color: #4ECDC4;
    font-weight: 600;
    font-size: 1.1rem;
    min-width: 80px;
    text-align: center;
}

.card-count-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.card-count-preset {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    color: #2c3e50;
    padding: 8px 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.card-count-preset:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(69, 183, 209, 0.3));
    border-color: rgba(78, 205, 196, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.card-count-preset:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .card-count-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .card-count-buttons {
        justify-content: center;
    }
    
    .card-count-preset {
        flex: 1;
        min-width: 60px;
    }
}

/* Bouton de configuration dans le header */
.btn-config {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #2c3e50;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.btn-config:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(69, 183, 209, 0.3));
    border-color: rgba(78, 205, 196, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.title-and-filters {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.title-and-filters h1 {
    margin: 0;
}

/* Filtres dans le header à côté du titre */
.filter-details {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-details .filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(5px);
}

.filter-details .filter-badge.themes {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.filter-details .filter-badge.dates {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.9));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .title-and-filters {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .filter-details {
        width: 100%;
        justify-content: flex-start;
    }
    
    .player-count-options {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
    }
}

/* Bouton pour changer le nombre de joueurs */
.player-count-info {
    text-align: center;
    margin-bottom: 20px;
}

.player-count-info .btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #2c3e50;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.player-count-info .btn:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(69, 183, 209, 0.3));
    border-color: rgba(78, 205, 196, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.3);
}
/* Lien vers la page qui explique le jeu, sous les réglages. */
.setup-en-savoir-plus {
    text-align: center;
    margin: 0 0 8px;
}

.setup-en-savoir-plus a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    font-size: 0.95rem;
}

.setup-en-savoir-plus a:hover {
    color: #fff;
}