/* ----------- Responsive Design ----------- */
@media (max-width: 822px) { /* Pour les écrans mobiles */
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #simon-circle {
        width: 90vw;
        height: 90vw;
        max-width: 350px;
        max-height: 350px;
    }
    #simon-board {
        margin: 20px 0;
        order: 1;
        width: 100%;
    }
    #scoreboard {
        position: static !important; /* Force la position normale sur mobile */
        margin: 20px auto 0 auto;
        width: 90vw;
        min-width: unset;
        max-width: 350px;
        font-size: 0.95em;
        order: 2; /* Met le scoreboard juste après le simon-board */
        top: auto !important;    /* Annule le top du desktop */
        right: auto !important;  /* Annule le right du desktop */
    }
    #start-btn {
        width: 90vw;
        max-width: 350px;
        font-size: 1.1em;
        padding: 12px 0;
        order: 3;
    }
    #message {
        font-size: 1em;
        margin: 12px;
        order: 0;
    }
}

@media (max-width: 400px) { /* Pour les écrans très petits */
    #simon-circle {
        width: 98vw;
        height: 98vw;
        max-width: 220px;
        max-height: 220px;
    }
    #scoreboard {
        width: 98vw;
        max-width: 220px;
        font-size: 0.9em;
        padding: 8px;
    }
    #start-btn {
        max-width: 220px;
        font-size: 1em;
        padding: 10px 0;
    }
}

@media (min-width: 823px) and (max-width: 1399px) {
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #scoreboard {
        position: static !important;
        margin: 20px auto 0 auto;
        width: auto;
        min-width: 180px;
        max-width: 500px;
        order: 2;
        top: auto !important;
        right: auto !important;
    }
    /* On ne change pas la taille du #simon-circle ni du #simon-board */
}

body {
    font-family: Arial, sans-serif; /* Police lisible */
    text-align: center; /* Centrage du texte */
    background: #222; /* Fond sombre */
    color: #fff; /* Texte blanc */
}
ol {
  list-style-type: none; /* Pas de puces pour les listes ordonnées */
}
#message {
    margin: 20px; /* Espace autour du message */
    font-size: 1.2em; /* Taille du texte */
    min-height: 2em; /* Hauteur minimale */
}

#simon-board {
    display: flex; /* Utilise flexbox pour centrer */
    justify-content: center; /* Centre horizontalement */
    margin: 40px 0; /* Espace vertical */
}

#simon-circle {
    position: relative; /* Positionnement des sections à l'intérieur */
    width: 500px; /* Taille du cercle sur desktop */
    height: 500px;
    border-radius: 50%; /* Cercle parfait */
    margin: auto; /* Centre horizontalement */
    background: #222; /* Fond sombre */
    overflow: hidden; /* Cache les débordements */
    /* Bordure métallique */
   /* border: 1px solid; */
    border-image: linear-gradient(135deg, #e0e0e0 0%, #b0b0b0 40%, #888 60%, #f5f5f5 100%); /* Dégradé bordure */
    border-image-slice: 1;
    box-shadow: 0 0 20px #aaa, 0 0 0 8px #444 inset; /* Ombre externe et interne */
}

.section {
    position: absolute; /* Positionne chaque section dans le cercle */
    width: 100%; /* Prend toute la place */
    height: 100%;
    cursor: pointer; /* Curseur main */
    opacity: 0.8; /* Légère transparence */
    transition: filter 0.2s, opacity 0.2s; /* Animation sur survol/clic */
    border-radius: 50%; /* Forme arrondie */
    top: 0;
    left: 0;
    /* Pour éviter les débordements */
    pointer-events: auto; /* Autorise les clics */
}

/* Chaque section est une part de pizza (quart de cercle) dans le cercle */
.section-red {
    background: #fd1900; /* Couleur rouge */
    clip-path: polygon(50% 50%, 100% 0, 100% 100%); /* Forme du quart */
    transform: rotate(90deg); /* Positionne la part */
    transform-origin: 50% 50%; /* Centre de rotation */
}

.section-blue {
    background: #0105fd; /* Couleur bleue */
    clip-path: polygon(50% 50%, 100% 0, 0 0);
    transform: rotate(270deg);
    transform-origin: 50% 50%;
}

.section-green {
    background: #35fa04; /* Couleur verte */
    clip-path: polygon(50% 50%, 0 0, 0 100%);
    transform: rotate(450deg);
    transform-origin: 50% 50%;
}

.section-yellow {
    background: hsl(59, 96%, 48%); /* Couleur jaune */
    clip-path: polygon(50% 50%, 0 100%, 100% 100%);
    transform: rotate(270deg);
    transform-origin: 50% 50%;
}

.section.simon {
    filter: brightness(0.7); /* Effet sombre */
    opacity: 1;
}

.section.user {
    filter: brightness(0.7); /* Effet sombre */
    opacity: 1;
}

.section.disabled {
    pointer-events: none; /* Désactive les clics */
    opacity: 0.5; /* Rend la section plus pâle */
}

#start-btn {
    padding: 5px 20px; /* Espace intérieur */
    font-size: 1em; /* Taille du texte */
    border-radius: 10px; /* Bords arrondis */
    border: none; /* Pas de bordure */
    background: #16a085; /* Couleur de fond */
    color: #fff; /* Texte blanc */
    cursor: pointer; /* Curseur main */
    margin-top: 0px; /* Espace au-dessus */
    margin-bottom: 10px; /* Espace en dessous */
    transition: background 0.3s; /* Animation sur le fond */
}

#scoreboard {
    position: absolute; /* Position absolue sur desktop */
    top: 50px; /* Décalé du haut */
    right: 40px; /* Décalé de la droite */
    min-width: 180px; /* Largeur minimale */
    background: #4b4848; /* Fond foncé */
    border: 2px solid #333; /* Bordure sombre */
    border-radius: 8px; /* Bords arrondis */
    padding: 16px; /* Espace intérieur */
    box-shadow: 0 2px 8px rgba(0,0,0,0.12); /* Ombre légère */
}

#scoreboard table {
    width: 100%; /* Prend toute la largeur */
    border-collapse: collapse; /* Fusionne les bordures */
}

#scoreboard th, #scoreboard td {
    border: 1px solid #f75656; /* Bordure rouge */
    padding: 6px 10px; /* Espace intérieur */
    text-align: center; /* Centre le texte */
}

#scoreboard th {
    background: #0e0d0d; /* Fond sombre pour l'en-tête */
    font-weight: bold; /* Texte en gras */
}

.pseudo-box {
    display: inline-block;
    padding: 8px 18px;
    border: 2px solid #16a085;
    border-radius: 12px;
    background: #0a0a0a;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 4px;
    margin-bottom: 4px;
    letter-spacing: 1px;
    /* Dégradé sur le texte */
    background: linear-gradient(90deg, #ff4e50, #f9d423, #1fd1f9, #a1ffce, #ff4e50 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}