/* =========================================================
   CLASSEMENT
   Complément de starduo.css
   ========================================================= */

/* ---------------------------------------------------------
   Bandeau supérieur
--------------------------------------------------------- */

body {
    padding-bottom: 0;
}

#bandeauHautClassement {
    direction: ltr;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 68px;

    padding: 8px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 500;

    font-family: Arial, sans-serif;
}

#marqueClassement {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

#logoClassement {
    display: block;

    width: 48px;
    height: 48px;

    object-fit: contain;

    flex: 0 0 auto;
}

#nomClassement {
    color: white;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);

    animation: apparitionStarDuo 0.9s ease-out;
}

#imageClassement {
    display: block;

    width: 48px;
    height: 48px;

    object-fit: contain;

    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   Repère invisible du titre du Menu
--------------------------------------------------------- */

#titreRepereMenuClassement {
    display: none;
}

/* ---------------------------------------------------------
   Zone principale
--------------------------------------------------------- */

#zoneClassement {
    position: relative;

    width: 667px;
    height: 667px;

    max-width: calc(100% - 20px);

    flex: 0 0 auto;

    margin-top: 0;
}

#contenuClassement {
    position: relative;

    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------
   Présentation du classement
--------------------------------------------------------- */

#texteClassement {
    width: min(620px, calc(100% - 30px));

    margin: 0 auto 20px;

    padding-left: 28px;

    color: white;

    font-family: Arial, sans-serif;

    /*
       Valeur de secours.
       Le JavaScript applique ensuite exactement
       la taille mémorisée par le Menu.
    */

    line-height: 1.35;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

#texteClassement li {
    margin-bottom: 5px;
}

/* ---------------------------------------------------------
   Podium
--------------------------------------------------------- */

#zonePodiumClassement {
    position: relative;

    width: 100%;
    max-width: 667px;

    margin: 0 auto;
}

#podiumClassement {
    display: block;

    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------
   Scores du podium
--------------------------------------------------------- */

.scorePodium {
    position: absolute;

    bottom: 4.5%;

    color: #000;

    font-family: Arial, sans-serif;

    font-size: clamp(13px, 3.7vw, 21px);

    font-weight: 500;
    line-height: 1;

    text-align: center;

    white-space: nowrap;

    z-index: 2;
}

/* 2e */

#scorePodium2 {
    left: 6.5%;
    width: 27%;
}

/* 1er */

#scorePodium1 {
    left: 36.5%;
    width: 27%;
}

/* 3e */

#scorePodium3 {
    left: 66.5%;
    width: 27%;
}

/* ---------------------------------------------------------
   Drapeaux du podium
--------------------------------------------------------- */

.drapeauPodium {
    position: absolute;

    width: 9%;
    height: auto;

    z-index: 4;
}

/* 2e */

#drapeauPodium2 {
    left: 16%;
    top: 7%;
}

/* 1er */

#drapeauPodium1 {
    left: 45.5%;
    top: 24%;
}

/* 3e */

#drapeauPodium3 {
    left: 76%;
    top: 7%;
}

/* ---------------------------------------------------------
   Pseudos du podium
--------------------------------------------------------- */

.pseudoPodium {
    position: absolute;

    color: white;

    font-family: Arial, sans-serif;

    font-size: clamp(10px, 2.8vw, 16px);

    font-weight: 400;
    line-height: 1;

    text-align: center;

    white-space: nowrap;

    z-index: 3;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

#pseudoPodium2 {
    left: 8%;
    top: 30%;
    width: 22%;
}

#pseudoPodium1 {
    left: 39%;
    top: 13%;
    width: 22%;
}

#pseudoPodium3 {
    left: 70%;
    top: 30%;
    width: 22%;
}

/* ---------------------------------------------------------
   Titre de la liste des joueurs
--------------------------------------------------------- */

#titreListeClassement {
    width: min(620px, calc(100% - 30px));

    margin: 14px auto 0;

    padding-left: 28px;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 18px;
    line-height: 1.55;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

#titreListeClassement li {
    color: white;
}

/* ---------------------------------------------------------
   Liste des 10 joueurs
--------------------------------------------------------- */

#listeClassement {
    width: min(620px, calc(100% - 30px));

    margin: 8px auto 20px;

    font-family: Arial, sans-serif;
}

.ligneClassement {
    width: 100%;
    height: 52px;

    display: grid;

    grid-template-columns:
        42px
        48px
        1fr
        120px
        55px;

    align-items: center;

    background: #071c8d;

    border-bottom: 3px solid #000;

    color: white;

    font-size: 18px;
}

.rangClassement {
    text-align: center;
}

.avatarClassement {
    display: block;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    object-fit: cover;
}

.joueurClassement {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;
}

.pseudoClassement {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.drapeauClassement {
    width: 27px;
    height: auto;

    flex: 0 0 auto;
}

.scoreClassement {
    text-align: right;

    white-space: nowrap;
}

.niveauClassement {
    padding-right: 12px;

    text-align: right;

    white-space: nowrap;
}

/* =========================================================
   TELEPHONE / TABLETTE ETROITE
   ========================================================= */

@media (max-width: 620px) {
    /* -----------------------------------------------------
       Bandeau
    ----------------------------------------------------- */

    #bandeauHautClassement {
        height: 62px;

        padding: 7px 10px;
    }

    #logoClassement {
        width: 48px;
        height: 48px;
    }

    #nomClassement {
        font-size: 24px;
    }

    #imageClassement {
        width: 48px;
        height: 48px;
    }

    /* -----------------------------------------------------
       Zone principale
    ----------------------------------------------------- */

    #zoneClassement {
        width: calc(100% - 20px);

        height: calc(100vw - 20px);

        max-height: 667px;

        /*
           On remonte le contenu par rapport
           à l'ancienne valeur de 15px.
        */
        margin-top: -8px;
    }

    /* -----------------------------------------------------
       3 puces de présentation

       Même géométrie que les 6 puces du Menu.
       La taille exacte est appliquée en JavaScript.
    ----------------------------------------------------- */

    #texteClassement {
        width: calc(100% - 30px);

        max-width: 390px;

        margin: 0 auto 14px;

        padding-left: 20px;

        line-height: 1.2;
    }

    #texteClassement li {
        margin-bottom: 4px;
    }

    /* -----------------------------------------------------
       Titre classement des joueurs
    ----------------------------------------------------- */

    #titreListeClassement {
        width: calc(100% - 20px);

        margin: 10px auto 0;

        padding-left: 24px;

        font-size: 15px;

        line-height: 1.4;
    }

    /* -----------------------------------------------------
       Liste
    ----------------------------------------------------- */

    #listeClassement {
        width: calc(100% - 10px);

        margin-top: 6px;
    }

    .ligneClassement {
        height: 36px;

        grid-template-columns:
            28px
            39px
            minmax(0, 1fr)
            86px
            38px;

        font-size: 14px;
    }

    .avatarClassement {
        width: 30px;
        height: 30px;
    }

    .joueurClassement {
        gap: 4px;
    }

    .drapeauClassement {
        width: 21px;
    }

    .scoreClassement {
        font-size: 14px;
    }

    .niveauClassement {
        padding-right: 5px;

        font-size: 14px;
    }
}

/* Classement des défis : même présentation que les joueurs */

#titreListeDefiClassement {
    width: min(620px, calc(100% - 30px));
    margin: 14px auto 0;
    padding-left: 28px;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.55;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

#listeDefiClassement {
    width: min(620px, calc(100% - 30px));
    margin: 8px auto 20px;
    font-family: Arial, sans-serif;
}

@media (max-width: 620px) {
    #titreListeDefiClassement {
        width: calc(100% - 20px);
        margin: 10px auto 0;
        padding-left: 24px;
        font-size: 15px;
        line-height: 1.4;
    }

    #listeDefiClassement {
        width: calc(100% - 10px);
        margin-top: 6px;
    }
}

/* ==========================================
   TABLETTE - CLASSEMENT
   ========================================== */

@media (pointer: coarse) and (min-width: 621px) and (max-width: 1400px) {
    #zoneClassement {
        width: min(667px, calc(100% - 40px));
        max-width: none;
        height: auto;
        margin-top: 0;
        margin-bottom: 20px;
    }

    #contenuClassement {
        height: auto;
    }

    #texteClassement {
        width: min(580px, calc(100% - 20px));
        margin: 0 auto 12px;
        padding-left: 22px;
        font-size: 16px;
        line-height: 1.2;
    }

    #texteClassement li {
        margin-bottom: 4px;
    }

    #zonePodiumClassement {
        width: 100%;
        max-width: 580px;
    }

    #titreListeClassement,
    #titreListeDefiClassement {
        width: min(580px, calc(100% - 20px));
        margin: 10px auto 0;
        padding-left: 22px;
        font-size: 16px;
        line-height: 1.25;
    }

    #listeClassement,
    #listeDefiClassement {
        width: min(580px, calc(100% - 20px));
        margin: 6px auto 12px;
    }

    .ligneClassement {
        height: 40px;
        grid-template-columns:
            32px
            40px
            minmax(0, 1fr)
            100px
            44px;
        font-size: 15px;
    }

    .avatarClassement {
        width: 34px;
        height: 34px;
    }

    .joueurClassement {
        gap: 5px;
    }

    .drapeauClassement {
        width: 23px;
    }

    .niveauClassement {
        padding-right: 6px;
    }
}

/* TABLETTE EN PAYSAGE */

@media (pointer: coarse) and (min-width: 621px) and (max-width: 1400px) and (orientation: landscape) {
    #zoneClassement {
        width: min(540px, calc(100% - 40px));
    }

    #texteClassement {
        font-size: 14px;
        line-height: 1.15;
    }

    #zonePodiumClassement {
        max-width: 500px;
    }

    #titreListeClassement,
    #titreListeDefiClassement {
        font-size: 14px;
    }

    .ligneClassement {
        height: 36px;
        font-size: 14px;
    }

    .avatarClassement {
        width: 30px;
        height: 30px;
    }

    .drapeauClassement {
        width: 21px;
    }
}

/* CLASSEMENT - MEME PRESENTATION CENTRALE QUE SOLO - AFFICHAGE PC */

@media (min-width: 800px) and (min-height: 600px) and (orientation: landscape) {
    #bandeauHautClassement {
        position: fixed;
        box-sizing: border-box;
        top: 0;
        left: 50%;
        width: min(var(--largeur-fond-paysage), 100%);
        transform: translateX(-50%);
        z-index: 500;
    }

    #zoneClassement {
        margin-left: auto;
        margin-right: auto;
    }
}

/* CLASSEMENT : bandeau et navigation défilants */

#bandeauHautClassement,
#navigationPage,
#navigationPage .bn {
    position: absolute;
}

/* PC : la zone s'adapte au contenu réel */

@media (min-width: 800px) and (min-height: 600px) and (orientation: landscape) {
    #zoneClassement,
    #contenuClassement {
        height: auto;
    }
}

/* CLASSEMENT - Réduction de la hauteur sur PC uniquement */

@media (min-width: 1401px) and (orientation: landscape) {
    #texteClassement {
        margin-bottom: 8px;
        line-height: 1.2;
    }

    #texteClassement li {
        margin-bottom: 2px;
    }

    #titreListeClassement,
    #titreListeDefiClassement {
        margin-top: 6px;
        line-height: 1.2;
    }

    #listeClassement,
    #listeDefiClassement {
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .ligneClassement {
        height: 42px;
    }
}

/* Alignement identique des scores et niveaux : joueurs et défis */
#listeClassement .ligneClassement,
#listeDefiClassement .ligneClassement {
    column-gap: 12px;
}
@media (max-width: 620px) {
    #listeClassement .ligneClassement,
    #listeDefiClassement .ligneClassement {
        grid-template-columns: 28px 39px minmax(0, 1fr) minmax(82px, auto) 42px;
        column-gap: 6px;
    }
    #listeClassement .niveauClassement,
    #listeDefiClassement .niveauClassement {
        padding-right: 4px;
    }
}