/* 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);
}


@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;
}

/* 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;
    /* Le glisser passe par les pointer events : ni défilement ni sélection sous le doigt */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    /* Hardware Acceleration pour fluidité du hover */
    will-change: transform, z-index;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    contain: layout style paint;
}

/* La carte sortie de la main, qui suit le pointeur ou vole vers la frise */
.hand-card.en-vol {
    position: fixed;
    margin: 0;
    min-width: 0;
    min-height: 0;
    transform: none;
    transition: none;
    z-index: 1000;
    pointer-events: none;
    cursor: grabbing;
    box-shadow: 0 30px 60px rgba(102, 126, 234, 0.4);
}

/* 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:not(.en-vol, .en-mouvement):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:not(.en-vol, .en-mouvement):active {
    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); }
}

/* Chacun son téléphone : son tour à soi se voit de loin */
.current-turn--moi {
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #34d399, #059669);
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.4);
    animation: tour-a-moi 1.6s ease-in-out infinite;
}

@keyframes tour-a-moi {
    50% { transform: scale(1.05); }
}

/* Chacun son téléphone : ce qu'il reste de cartes à chacun, et sa main posée */
.player-cartes {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.current-turn--fini {
    margin-bottom: 6px;
    opacity: 0.9;
}

/* Ce n'est pas son tour : la main se regarde, elle ne se joue pas */
.chronos-attente-du-tour .hand {
    opacity: 0.6;
    filter: saturate(0.5);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.chronos-attente-du-tour .hand-card {
    cursor: default;
}

/* L'invitation : le QR code de la partie, son code et son lien */
.chronos-invitation {
    width: min(360px, calc(100vw - 32px));
    border: none;
    border-radius: 24px;
    padding: 28px 24px 22px;
    text-align: center;
    color: #1f2937;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
}

.chronos-invitation::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
}

.chronos-invitation h2 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.chronos-invitation p {
    color: #4b5563;
    margin-bottom: 14px;
}

.chronos-invitation img {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 14px;
    border-radius: 12px;
}

.chronos-invitation-code {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
}

.chronos-invitation-code strong {
    font-size: 1.9rem;
    letter-spacing: 0.25em;
    color: #1f2937;
}

.chronos-invitation-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== É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;
}

@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);
    }
}

/* 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 */
}

@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);
    }
}

/* 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;
    }
}

@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;
    }
}

/* La bulle des points, posée au-dessus de la carte qui vient d'atterrir */
.point-feedback {
    position: fixed;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: min(340px, calc(100vw - 16px));
    padding: 6px 18px 6px 6px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    animation: bulle-apparait 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* La pointe qui désigne la carte */
.point-feedback::after {
    content: '';
    position: absolute;
    left: var(--pointe, 50%);
    bottom: -6px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 3px;
    transform: translateX(-50%) rotate(45deg);
}

.point-feedback-points {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 8px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.point-feedback-texte {
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Chacun son téléphone : qui a posé, au-dessus de ce que la pose a donné */
.point-feedback-auteur {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
}

.point-feedback.positive .point-feedback-points {
    background: linear-gradient(135deg, #34d399, #059669);
}

.point-feedback.positive .point-feedback-texte i {
    color: #f97316;
}

.point-feedback.negative .point-feedback-points {
    background: linear-gradient(135deg, #f87171, #dc2626);
}

.point-feedback.fade-out {
    animation: bulle-disparait 0.4s ease-in forwards;
}

@keyframes bulle-apparait {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-100% + 6px)) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translate(-50%, calc(-100% - 14px)) scale(1);
    }
}

@keyframes bulle-disparait {
    to {
        opacity: 0;
        transform: translate(-50%, calc(-100% - 34px)) scale(0.95);
    }
}

@media (max-width: 768px) {
    .point-feedback {
        gap: 8px;
        padding: 4px 12px 4px 4px;
    }

    .point-feedback-points {
        min-width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .point-feedback-texte {
        font-size: 0.8rem;
    }
}

/* 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);
}

/* 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;
    }

}

/* 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 {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    font-size: 0.95rem;
}

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

/* ===== RÉGLAGES DE LA PARTIE =====
   Le panneau « Votre partie » : une ligne par réglage, le libellé et son aide à gauche,
   le contrôle à droite ; l'un sous l'autre sur un téléphone. */

.setup-etape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    font-size: 1.2rem;
    vertical-align: 0.15em;
    text-shadow: none;
}

.reglage {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 12px 28px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.reglage-libelle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.reglage-libelle strong {
    font-size: 1.08rem;
}

.reglage-libelle span {
    font-size: 0.9rem;
    line-height: 1.35;
    opacity: 0.85;
}

.reglage-controle {
    min-width: 0;
}

/* Chacun son téléphone : combien de joueurs la sélection sert, d'un coup d'œil */
.reglage-libelle .reglage-capacite {
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 700;
    text-shadow: none;
    opacity: 1;
}

.reglage-libelle .reglage-capacite::before {
    content: "\f0c0";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
}

.reglage-champ {
    width: 100%;
    max-width: 360px;
    padding: 10px 15px;
    border: 2px solid rgba(69, 183, 209, 0.4);
    border-radius: 10px;
    font-size: 1rem;
}

/* Le nombre de cartes : un curseur, un pas de chaque côté, et la valeur en grand */
.reglage-curseur {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reglage-curseur input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: #4ECDC4;
    cursor: pointer;
}

.reglage-pas {
    flex: none;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #1f2937;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.reglage-pas:hover {
    background: #fff;
}

.reglage-valeur {
    flex: none;
    min-width: 56px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Deux choix côte à côte, l'un ou l'autre */
.reglage-bascule {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.reglage-bascule label {
    margin: 0;
    cursor: pointer;
}

.reglage-bascule input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reglage-bascule span {
    display: block;
    padding: 8px 20px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.reglage-bascule input:checked + span {
    background: #fff;
    color: #1f2937;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.reglage-bascule input:disabled + span {
    opacity: 0.45;
    cursor: not-allowed;
}

.reglage-bascule input:focus-visible + span {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Le nombre de joueurs, sur cet écran : des pastilles, puis leurs noms */
.reglage-choix-nombre {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.player-count-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #1f2937;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.player-count-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: #fff;
}

.player-count-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    color: #fff;
    box-shadow: 0 4px 12px rgba(69, 183, 209, 0.45);
}

.player-count-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.reglage .players-config {
    margin-top: 14px;
    gap: 10px;
}

.reglage .player-config {
    padding: 10px 14px;
    gap: 14px;
}

.reglage .session-classe-modes {
    margin: 0;
}

.reglages-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.reglages-pied .config-actions {
    margin: 0;
    gap: 10px;
}

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

    .reglages-pied {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* ===== SESSIONS EN CLASSE =====
   Réglages de la session sur l'écran de configuration, pages de l'élève (rejoindre,
   attendre) et tableau de bord de l'enseignant. Mêmes panneaux que les réglages
   (.setup-step) : seul ce qui leur est propre est ici. L'accent est le turquoise du
   curseur et des boutons de nombre de cartes. */

.session-classe {
    --session-accent: #45B7D1;
    --session-accent-clair: #4ECDC4;
}

.session-classe-intro {
    color: #fff;
    text-align: center;
    font-size: 1.05rem;
    margin: -10px 0 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.session-classe-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}

.session-classe-modes legend,
.session-classe-titre,
.session-classe-rejoindre label {
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.session-classe-modes legend {
    grid-column: 1 / -1;
    margin-bottom: 5px;
    font-size: 1rem;
}

/* Deux cartes de choix : la pastille native est cachée, la carte entière se choisit. */
.session-classe-mode {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    color: #fff;
    backdrop-filter: blur(5px);
    transition: all 0.25s ease;
}

.session-classe-mode:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.session-classe-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.session-classe-mode:has(input:checked) {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.35), rgba(69, 183, 209, 0.35));
    border-color: var(--session-accent-clair);
    box-shadow: 0 4px 16px rgba(78, 205, 196, 0.35);
}

.session-classe-mode:has(input:focus-visible) {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.session-classe-mode-icone {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.15rem;
    transition: background 0.25s ease;
}

.session-classe-mode:has(input:checked) .session-classe-mode-icone {
    background: linear-gradient(135deg, var(--session-accent-clair), var(--session-accent));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.session-classe-mode-texte {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.session-classe-mode-texte strong {
    font-size: 1.05rem;
}

.session-classe-mode-texte span {
    font-size: 0.92rem;
    line-height: 1.35;
    opacity: 0.9;
}

.session-classe-titre span {
    font-weight: 400;
    opacity: 0.8;
}

.session-classe-titre input,
.session-classe-rejoindre input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 15px;
    border: 2px solid rgba(69, 183, 209, 0.4);
    border-radius: 8px;
    font-size: 1rem;
}

.session-classe-rejoindre {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.session-classe-rejoindre small {
    display: block;
    margin-top: 6px;
    font-weight: 400;
}

.session-classe-champ-code {
    font-size: 1.8rem !important;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}

.session-classe-erreur {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 600;
    text-align: center;
}

.session-classe-resultat {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    font-size: 1.1rem;
    color: #1f2937;
}

.session-classe-resultat p:last-child {
    margin-bottom: 0;
}

.session-classe-attente {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.session-classe-attente span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    animation: session-attente 1.2s infinite ease-in-out;
}

.session-classe-attente span:nth-child(2) { animation-delay: 0.2s; }
.session-classe-attente span:nth-child(3) { animation-delay: 0.4s; }

@keyframes session-attente {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

.session-fin-message {
    margin: 20px 0 0;
    color: #4b5563;
}

/* Le tableau de bord */

.session-tableau {
    max-width: 1400px;
}

.session-tableau-entete {
    flex-wrap: wrap;
    gap: 15px;
    margin-right: 20px;
}

.session-tableau-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.session-tableau-actions form {
    margin: 0;
}

.filter-details .filter-badge.session-etat-attente { background: #f59e0b; color: #fff; }
.filter-details .filter-badge.session-etat-en_cours { background: #10b981; color: #fff; }
.filter-details .filter-badge.session-etat-close { background: #6b7280; color: #fff; }

.session-rejoindre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.session-rejoindre-texte {
    flex: 1;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.session-rejoindre-texte p {
    margin: 0 0 6px;
    font-size: 1.1rem;
}

.session-rejoindre-adresse {
    font-size: 1.8rem !important;
    font-weight: 700;
}

.session-rejoindre-code {
    font-size: 4.5rem !important;
    font-weight: 800;
    letter-spacing: 0.2em;
    line-height: 1.1;
}

.session-rejoindre-lien {
    font-size: 0.9rem !important;
    opacity: 0.85;
    word-break: break-all;
}

.session-rejoindre-lien a {
    color: #fff;
}

.session-rejoindre-qr {
    background: #fff;
    border: 0;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: zoom-in;
    color: #374151;
    font-size: 0.85rem;
}

.session-qr-plein-ecran {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.session-qr-plein-ecran[hidden] {
    display: none;
}

.session-qr-plein-ecran img {
    width: min(80vh, 90vw);
    height: auto;
}

.session-qr-plein-ecran .session-rejoindre-code {
    color: #111827;
    margin: 0;
}

.session-tableau-grille {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 20px;
    align-items: start;
}

.session-tableau-grille .setup-step {
    margin: 0 0 20px;
}

.session-tableau-grille .setup-step h2 {
    font-size: 1.3rem;
    text-align: left;
    margin-bottom: 15px;
}

.session-section-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.session-masquer {
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.session-table-defilante {
    overflow-x: auto;
}

.session-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    color: #1f2937;
}

.session-table th {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0 10px;
    white-space: nowrap;
}

.session-table td {
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 10px;
    white-space: nowrap;
}

.session-table td:first-child { border-radius: 10px 0 0 10px; font-weight: 700; }
.session-table td:last-child { border-radius: 0 10px 10px 0; }

.session-table form {
    margin: 0;
}

.session-score {
    font-weight: 800;
    color: #1f6f8b;
}

.session-temps {
    font-variant-numeric: tabular-nums;
}

.session-statut {
    display: inline-block;
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.session-statut-attente { background: #f59e0b; }
.session-statut-en_jeu { background: #3b82f6; }
.session-statut-termine { background: #10b981; }
.session-statut-inactif { background: #9ca3af; }

.session-vide {
    color: #fff;
    text-align: center;
    margin: 10px 0 0;
    opacity: 0.85;
}

.session-liste-cartes,
.session-liste-fil {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.session-liste-cartes > li,
.session-liste-fil > li {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 8px 12px;
    color: #1f2937;
    border-left: 5px solid transparent;
}

.session-liste-cartes > li.session-carte-ratee {
    border-left-color: #ef4444;
}

.session-liste-cartes summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    cursor: pointer;
}

.session-carte-sans-detail summary {
    cursor: default;
    list-style: none;
}

.session-carte-titre {
    font-weight: 700;
}

.session-carte-date {
    color: #6b7280;
    font-size: 0.85rem;
}

.session-carte-taux {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 600;
}

.session-carte-detail {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.9rem;
}

.session-supprimer {
    text-align: center;
}

.session-supprimer .btn-link {
    color: rgba(255, 255, 255, 0.85);
}

/* Mes sessions */

.session-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.session-liste a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 15px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 14px 18px;
    color: #1f2937;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.session-liste a:hover {
    transform: translateY(-2px);
}

.session-liste-nom {
    font-weight: 700;
}

.session-liste-infos {
    color: #4b5563;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .session-tableau-grille {
        grid-template-columns: 1fr;
    }

    .session-rejoindre {
        flex-direction: column;
    }

    .session-rejoindre-code {
        font-size: 3rem !important;
    }
}

/* Jouons ensemble : les tables, au tableau de bord de l'enseignant */
.session-liste-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.session-liste-tables li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
}

.session-liste-tables strong {
    flex-basis: 100%;
}

.session-liste-tables .session-pseudonyme:not(:last-child)::after {
    content: ',';
}

/* Le numéro de table de l'élève, dans l'en-tête du jeu : une étiquette, pas un bouton */
.chronos-table {
    cursor: default;
    pointer-events: none;
}