#birdsong-app{
max-width:1000px;
margin:auto;
padding:24px;
font-family:Arial,sans-serif;
}

#home-screen,
#quiz-screen,
#summary-screen{
background:white;
padding:24px;
border-radius:24px;
box-shadow:0 4px 24px rgba(0,0,0,.08);
}

button{
background:#1565c0;
color:white;
border:none;
padding:12px 20px;
border-radius:12px;
cursor:pointer;
transition:all .2s ease;
}

button:hover{
background:#0d47a1;
}

button:active{
background:#002171;
transform:scale(.98);
}

.button-row{
display:flex;
gap:12px;
margin-top:20px;
}

select{
width:100%;
padding:12px;
border-radius:12px;
margin-top:8px;
}

#audio-player{
width:100%;
}

#bird-image{
display:none;
max-width:500px;
width:100%;
margin-top:20px;
border-radius:16px;
}

.summary-item{
padding:20px;
margin-top:20px;
border-radius:16px;
color:white;
}

.success{
background:#2e7d32;
}

.fail{
background:#c62828;
}

#home-description{
background:#f4f8fb;
padding:16px;
border-radius:16px;
margin:20px 0;
line-height:1.6;
}

@media(max-width:768px){
.button-row{
flex-direction:column;
}
}


button.disabled,
button:disabled{

    background:#999 !important;

    cursor:not-allowed;

    opacity:0.7;

    transform:none !important;

}

.stop-button{

background:#c62828;
margin-bottom:20px;

}

.stop-button:hover{

background:#8e0000;

}

    h3{
        color: white !important;
        font-weight: bold !important;
    }

@media screen and (max-width:768px){

    h1{
        font-size:20px !important;
        line-height:1.2 !important;
        font-weight: bold !important;
        text-align: center;

    }

    h2{
        font-size:20px !important;
        line-height:1.2 !important;
        font-weight: bold !important;
        text-align: center;
    }
#question-number{
        font-size:16px !important;
        font-weight: bold !important;
        text-align: center;
    }
}

@media screen and (max-width:768px){

    /*
    Centrer le score final
    */
    #final-score{

        text-align:center;

    }

    /*
    Boutons pleine largeur
    */
    button,
    .button,
    input[type="submit"]{

        width:100%;

        display:block;

        box-sizing:border-box;

    }

    #feedback{

        text-align:center;

    }

select{
margin-top:0px!important;
}
}

.entry-content,
.content,
.site-content,
.site-main{
padding-top:0px !important;
padding-bottom:0px !important;
margin-top:0px !important;
margin-bottom:0px !important;
}

#category-species-list{

margin-top:20px;
padding:15px;
background:#f5f5f5;
border-radius:12px;
line-height:1.6;
}

.ranking-item{

display:grid;

grid-template-columns:
60px
1.5fr
80px
1.5fr
140px;

align-items:center;

column-gap:12px;

padding:10px 14px;

margin-bottom:8px;

background:#f5f5f5;

border-radius:12px;

font-size:15px;

}

/*
Texte
*/
.ranking-item span{

text-align:left;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.ranking-item h3{

margin:0;
font-size:16px;

}

.ranking-item p{

margin:0;

}

@media screen and (max-width:768px){

.ranking-item{

display:grid;

grid-template-columns:40px 1fr;

gap:2px 8px;

line-height:1.1;

padding:10px 12px;

font-size:14px;

}

/*
Ligne 1 :
rang + nom
*/
.ranking-item span:nth-child(1){

grid-column:1;

font-weight:bold;

}

.ranking-item span:nth-child(2){

grid-column:2;

}

/*
Ligne 2 :
score + catégorie
*/
.ranking-item span:nth-child(3){

grid-column:1;

}

.ranking-item span:nth-child(4){

grid-column:2;

}

/*
Masquer date mobile
*/
.ranking-item span:nth-child(5){

display:none;

}
    #start-game{

        margin-bottom:12px;

    }

}

#ranking-category-filter{

width:100%;

margin:15px 0;

}

.custom-notification{

position:fixed;

bottom:20px;
left:50%;

transform:translateX(-50%);

background:#222;
color:#fff;

padding:14px 22px;

border-radius:12px;

z-index:99999;

opacity:0;

transition:0.3s;

font-size:15px;

}

.custom-notification.show{

opacity:1;

}

button.disabled{

opacity:0.5;

pointer-events:none;

cursor:not-allowed;

}
}

audio::-internal-media-controls-download-button{
display:none;
}

audio::-webkit-media-controls-enclosure{
overflow:hidden;
}

audio::-webkit-media-controls-panel{
width:calc(100% + 30px);
}

/*
MOBILE
*/
@media screen and (max-width: 768px){

    #player-name-input{

        display:block;

        width:100%;

        box-sizing:border-box;

        margin-bottom:15px;

    }

    #save-score{

        width:100%;

    }
#save-score{

    width:100%;

    margin-bottom:15px;

}

}