body {
    font-family: Arial, Helvetica, sans-serif; overflow: hidden; margin: 0; padding: 0;
}
* {margin: 0; padding: 0}

h1 {
    font-size: 6vh; /* La taille de police est 5% de la largeur de la fenêtre */
    line-height: 1.2; /* Ajuster selon les besoins pour l'espacement des lignes */
    word-wrap: break-word;
}

h2 {
    font-size: 4.5vh; /* La taille de police est 3.5% de la largeur de la fenêtre */
    line-height: 1.2;
    word-wrap: break-word;
}

h3, button {
    font-size: 3vh; /* La taille de police est 2.5% de la largeur de la fenêtre */
    line-height: 1.2;
}

p {
    font-size: 3vh; /* Taille de police adaptée à la largeur de la fenêtre */
    line-height: 1.5; /* Ajuster l'espacement des lignes */
}

a {
    font-size: 3vh;
    line-height: 1.5;
    color: rgba(5, 5, 68, 0.877); /* Ou toute autre couleur désirée */
    text-decoration: none; /* Pour supprimer le soulignement par défaut */
}

/* Contenu */
#gameArea {
    background: white;
    display: flex;             /* Utilisez Flexbox */
    
    flex-direction: column;
    justify-content: center;   /* Centrage horizontal */
    align-items: center;       /* Centrage vertical */
    height: 100vh;             /* Hauteur complète de la fenêtre de visualisation */
    aspect-ratio: 16 / 9; position: absolute; left: 50%; translate: -50% 0;
}
#gameArea > div:not(#media){ width: 100%;height: 100%; display: flex; justify-content: center; align-items: center; flex-direction:column;}
/* BACKGROUND */
#backgroundimg {position: absolute; height: 100%;}
#background {height: 100%; width: 100%; position: absolute; z-index: -1}
#background > div, #background > div > div,  #background * {width: 100%; height: 100%; position: absolute; left: 0;}
#background > div {display: none;}
#background > div > div {visibility: hidden;}
#gameArea[gameMode="intro"] .intro,
#gameArea[gameMode="film"] .film,
#gameArea[gameMode="flashInfo"] .flashInfo,
#gameArea[gameMode="pokemon"] .pokemon,
#gameArea[gameMode="journal"] .journal,
#gameArea[gameMode="pub"] .pub,
#gameArea[gameMode="quandTu"] .quandTu,
#gameArea[gameMode="phrase"] .phrase
{
    display: block;
}

#gameArea[phase="waiting"] .waiting,
#gameArea[phase="started"] .started,
#gameArea[phase="prompt"] .prompt,
#gameArea[phase="show_responses"] .show_responses,
#gameArea[phase="vote"] .vote,
#gameArea[phase="vote_ended"] .vote_ended
{
    visibility: visible;
}
/* MEDIAS */
#media  {
    position: absolute;
    top: 35%;left: 25%;width: 50%;height: 60%;
    display: flex; contain: content; align-items: center; justify-content: center;
}
#media img, #media video {display:block; position:absolute;height:100%;}


[gameMode="film"][phase="started"] #media, [gameMode="film"][phase="prompt"] #media,  
[gameMode="quandTu"][phase="started"] #media, [gameMode="quandTu"][phase="prompt"] #media
{
    top: 10%;left: 24.8%;width: 47.3%;height: 56.7%;
}

[gameMode="film"][phase="show_responses"] #media, [gameMode="film"][phase="vote_ended"] #media,  
[gameMode="quandTu"][phase="show_responses"] #media, [gameMode="quandTu"][phase="vote_ended"] #media
{
    top: 5%;
}

[gameMode="journal"][phase="started"] #media, [gameMode="journal"][phase="prompt"] #media, 
[gameMode="pokemon"][phase="started"] #media, [gameMode="pokemon"][phase="prompt"] #media
{
    top: 13%;left: 33.8%;width: 27.3%;height: 52.7%;
}

[gameMode="journal"][phase="show_responses"] #media, [gameMode="journal"][phase="vote_ended"] #media, 
[gameMode="pokemon"][phase="show_responses"] #media, [gameMode="pokemon"][phase="vote_ended"] #media
{
    top: 38%;left: 37%;width: 24%;height: 48%;
}

[gameMode="flashInfo"][phase="started"] #media, [gameMode="flashInfo"][phase="prompt"] #media,
[gameMode="pub"][phase="started"] #media, [gameMode="pub"][phase="prompt"] #media
{
    top: 11.8%;left: 29.9%;width: 40.4%;height: 48.3%;
}

[gameMode="flashInfo"][phase="show_responses"] #media, [gameMode="flashInfo"][phase="vote_ended"] #media,
[gameMode="pub"][phase="show_responses"] #media, [gameMode="pub"][phase="vote_ended"] #media
{
    top: 24.6%;left: 30%;width: 33%;height: 39.4%;
}

/* TEXT */

/* phrase */
[gameMode="phrase"][phase="started"] h1, [gameMode="phrase"][phase="prompt"] h1
{
    position:absolute; bottom: 75%; left:20%; color:black;
}
[gameMode="phrase"][phase="started"] h2, [gameMode="phrase"][phase="prompt"] h2
{
    position:absolute; bottom: 65%; left:22%; font-size: 3vh; color:black; max-width: 50%;
}

[gameMode="phrase"][phase="show_responses"] h1
{
    position:absolute; bottom: 60%; left:27%; font-size: 5vh; color:black;
}
[gameMode="phrase"][phase="show_responses"] h2
{
    position:absolute; bottom: 50%; font-size: 3vh; color:black; max-width: 45%;
}

/* film */
[gameMode="film"][phase="started"] h1, [gameMode="film"][phase="prompt"] h1
{
    position:absolute; bottom: 7%; color:black;
}
[gameMode="film"][phase="started"] h2, [gameMode="film"][phase="prompt"] h2
{
    position:absolute; bottom: 3%; font-size: 3vh; color:black; max-width: 50%;
}

[gameMode="film"][phase="show_responses"] h1
{
    position:absolute; bottom: 23%; left: 26.5%; font-size: 5vh; color:white;
}
[gameMode="film"][phase="show_responses"] h2
{
    position:absolute; bottom: 15%; left: 26.5%; font-size: 3vh; color:white; max-width: 42%;
}

/* flashInfo (meme que pub)*/
[gameMode="flashInfo"][phase="started"] h1, [gameMode="flashInfo"][phase="prompt"] h1
{
    position:absolute; bottom: 26%; color:black; font-size: 4.5vh;
}
[gameMode="flashInfo"][phase="started"] h2, [gameMode="flashInfo"][phase="prompt"] h2
{
    position:absolute; bottom: 20%; font-size: 3vh; color:black; max-width: 50%;
}

[gameMode="flashInfo"][phase="show_responses"] h1
{
    position:absolute; bottom: 19%; left: 26.5%; font-size: 5vh; color:black;
}
[gameMode="flashInfo"][phase="show_responses"] h2
{
    position:absolute; bottom: 11%; left: 26.5%; font-size: 3vh; color:black; max-width: 48%;
}

[gameMode="flashInfo"][phase="vote"] h1, [gameMode="flashInfo"][phase="vote_ended"] h1, [gameMode="flashInfo"][phase="vote_ended"] h2
{
    color:white;
}

/* pokemon */
[gameMode="pokemon"][phase="started"] h1, [gameMode="pokemon"][phase="prompt"] h1
{
    position:absolute; bottom: 26%; color:black; font-size: 4.5vh;
}
[gameMode="pokemon"][phase="started"] h2, [gameMode="pokemon"][phase="prompt"] h2
{
    position:absolute; bottom: 20%; font-size: 3vh; color:black; max-width: 50%;
}

[gameMode="pokemon"][phase="show_responses"] h1
{
    position:absolute; bottom: 80%; font-size: 5vh; color:black;
}
[gameMode="pokemon"][phase="show_responses"] h2
{
    position:absolute; bottom: 64%; left: 44,5%; font-size: 3vh; color:black; max-width: 23%;
}

/* pub (meme que flashinfo)*/ 
[gameMode="pub"][phase="started"] h1, [gameMode="pub"][phase="prompt"] h1
{
    position:absolute; bottom: 26%; color:black; font-size: 4.5vh;
}
[gameMode="pub"][phase="started"] h2, [gameMode="pub"][phase="prompt"] h2
{
    position:absolute; bottom: 20%; font-size: 3vh; color:black; max-width: 50%;
}

[gameMode="pub"][phase="show_responses"] h1
{
    position:absolute; bottom: 19%; left: 26.5%; font-size: 5vh; color:black;
}
[gameMode="pub"][phase="show_responses"] h2
{
    position:absolute; bottom: 11%; left: 26.5%; font-size: 3vh; color:black; max-width: 48%;
}

[gameMode="pub"][phase="vote"] h1, [gameMode="pub"][phase="vote_ended"] h1, [gameMode="pub"][phase="vote_ended"] h2
{
    color:white;
}

/* quandTu */
[gameMode="quandTu"][phase="started"] h1, [gameMode="quandTu"][phase="prompt"] h1
{
    position:absolute; bottom: 7%; color:black;
}
[gameMode="quandTu"][phase="started"] h2, [gameMode="quandTu"][phase="prompt"] h2
{
    position:absolute; bottom: 3%; font-size: 3vh; color:black; max-width: 50%;
}

[gameMode="quandTu"][phase="show_responses"] h1
{
    position:absolute; bottom: 23%; left: 26.5%; font-size: 5vh; color:white;
}
[gameMode="quandTu"][phase="show_responses"] h2
{
    position:absolute; bottom: 15%; left: 26.5%; font-size: 3vh; color:white; max-width: 42%;
}

/* JOURNAL */
[gameMode="journal"][phase="started"] h1, [gameMode="journal"][phase="prompt"] h1
{
    position:absolute; bottom: 26%; color:black; font-size: 4.5vh;
}
[gameMode="journal"][phase="started"] h2, [gameMode="journal"][phase="prompt"] h2
{
    position:absolute; bottom: 20%; font-size: 3vh; color:black; max-width: 50%;
}

[gameMode="journal"][phase="show_responses"] h1
{
    position:absolute; bottom: 80%; font-size: 5vh; color:black;
}
[gameMode="journal"][phase="show_responses"] h2
{
    position:absolute; bottom: 64%; left: 44,5%; font-size: 3vh; color:black; max-width: 23%;
}


img.foot {scale: 10%; rotate: -20deg; bottom:0;transform-origin: 40% 120%; transition: all cubic-bezier(.67,-0.07,1,1.4) 0.2s;}
.intro.playing img.foot {animation: intro_foot 0.2s cubic-bezier(.67,-0.07,1,1.4) 1s 1 both;}
@keyframes intro_foot {
    from {scale: 10%; rotate: -20deg;}
    to {scale: 100%; rotate: 0deg;}
  }

#show_responsesSentence {
    font-weight: bold;
}

#sentenceLiveresponse, #voteText {
    color:#70a9ed
}

.gameImg {
    margin : auto;
    height: 45vh;
}

/* CODE AREA */

#roomCodeArea {
    position: fixed;   
    top: 2vh;         
    right: 2vw;       
    width: 15vw;
    max-width: 250px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 0.5vw;
    box-sizing: border-box;
    text-align:center;
}

#roomCodeArea #code h3 {
    margin: 0.5vw;
}

#roomCodeArea #qr img {
    max-width: 100%;
    height: auto;
}

#roomCodeArea #url a {
    word-break: break-all;
    font-size: 0.9em;
}


/* Countdown */

#mainCountdown {
    position: fixed;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#mainCountdown p {
    font-size: 3vh;
    padding-left: 5px;
    padding-right: 5px;
}

/* Player List */

#playersList {
    position: fixed;
    top: 2vh;
    left: 2vw;
    width: 15vw;
    max-width: 300px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow: auto;
    box-sizing: border-box;
    padding: 0.5vw;
    display: none;
    overflow: hidden;
}

#playersList table {
    width: 100%;
    border-collapse: collapse;
}

#playersList th, #playersList td {
    padding: 8px;
    text-align: left;
}

#playersList tr:nth-child(even) {background-color: #f2f2f2;}

#end_game {
    z-index: 100;
}