/* --- Général --- */
body {
    background: black;
    color: #00ff99;
    font-family: "Courier New", monospace;
    text-align: center;
    margin: 0;
}

#fullscreen {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #003322;
    color: #00ff99;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 100;
}

#photobooth {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: #003322;
    color: #00ff99;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 110;
}

h1 {
    margin: 20px;
    letter-spacing: 4px;
}

table {
    width: 92%;
    margin: auto;
    border-collapse: collapse;
}

th, td {
    padding: 14px;
    font-size: 22px;
    border-bottom: 1px solid #00ff99;
    background: transparent;
}

/* --- Flipboard sur toute la ligne --- */
.flip-row {
    animation: flip-row 1.2s ease-in-out !important;
}

@keyframes flip-row {
    0% {
        transform: rotateX(90deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

/* --- Classement TOP 3 --- */
.rank-1 {
    animation: blink-green 2s steps(1) infinite;
    font-weight: bold;
    color: gold;
}

@keyframes blink-green {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
}

.rank-2 {
    animation: blink-green 2s steps(1) infinite;
    color: silver;
    font-weight: bold;
}

.rank-3 {
    animation: blink-green 2s steps(1) infinite;
    color: #cd7f32;
    font-weight: bold;
}

/* --- Dernier quart --- */
.late {
    animation: blink-red 2s steps(1) infinite;
    color: #ff6666;
}

@keyframes blink-red {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --- Responsive mobile --- */
@media (max-width: 600px) {
    th, td {
        font-size: 14px;
        padding: 8px;
    }

    h1 {
        font-size: 18px;
    }
}