/* ==================================================
   RESET
   ================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Arial,
        sans-serif;

    background: #171a21;

    color: #ffffff;

    margin: 0;

    padding: 40px;

}


.container {

    max-width: 1200px;

    margin: auto;

}


h1 {

    margin-bottom: 10px;

}


/* ==================================================
   CONTROLS
   ================================================== */

.controls {

    background: #1e232b;

    padding: 20px;

    border-radius: 10px;

    margin-bottom: 25px;

}


.date-navigation {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

}


.date-label {

    font-weight: bold;

    margin-right: 5px;

}


.date-link {

    display: inline-block;

    background: #2a475e;

    color: #ffffff;

    text-decoration: none;

    padding: 10px 14px;

    border-radius: 5px;

    font-size: 15px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.date-link:hover {

    background: #3a6385;

    transform: translateY(-1px);

}


.updated {

    color: #aaa;

    margin-top: 15px;

    font-size: 14px;

}


/* ==================================================
   DATE SECTIONS
   ================================================== */

/*
   Par défaut, seule la dernière date est affichée.
   Les autres dates deviennent visibles lorsqu'elles
   sont ciblées avec une ancre #date-YYYY-MM-DD.
*/

.date-section {

    display: none;

}


.date-section.default-date {

    display: block;

}


.date-section:target {

    display: block;

}


/*
   Lorsqu'une date est ciblée, on masque la date
   affichée par défaut.
*/

body:has(.date-section:target)
.date-section.default-date {

    display: none;

}


/* ==================================================
   SUMMARY
   ================================================== */

.summary {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-bottom: 25px;

}


.card {

    background: #1e232b;

    padding: 20px;

    border-radius: 10px;

}


.card-title {

    color: #aaa;

    font-size: 14px;

    margin-bottom: 8px;

}


.card-value {

    font-size: 28px;

    font-weight: bold;

}


.card-value.positive {

    color: #66c0f4;

}


/* ==================================================
   TABLE
   ================================================== */

.table-container {

    overflow-x: auto;

    background: #1e232b;

    border-radius: 10px;

}


table {

    width: 100%;

    border-collapse: collapse;

}


th {

    background: #2a475e;

    padding: 14px;

    text-align: left;

    white-space: nowrap;

}


td {

    padding: 14px;

    border-bottom:
        1px solid #303640;

}


tr:hover {

    background: #252b33;

}


/* ==================================================
   GAME
   ================================================== */

.game-name {

    font-weight: bold;

    color: #66c0f4;

}


.positive {

    color: #66c0f4;

}


.negative {

    color: #e57373;

}


.score {

    font-weight: bold;

    font-size: 18px;

}


.score-9 {

    color: #66c0f4;

}


.score-8 {

    color: #8bc34a;

}


.score-0 {

    color: #999;

}


.percentage {

    font-weight: bold;

}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 700px) {

    body {

        padding: 15px;

    }


    .summary {

        grid-template-columns:
            1fr;

    }


    .date-navigation {

        align-items: stretch;

        flex-direction: column;

    }


    .date-link {

        text-align: center;

    }

}