@charset "utf-8";

/* ----------------------------------------------
Auteur/author : nicodeux
Dernière mise à jour/last update : 13/06/2024
Licence : GNU General Public License v3.0
---------------------------------------------- */

/********************************/
/* CSS pour le jeu Jan Ken Pon  */
/********************************/

#zone-de-jeu-conteneur {
    display: block;
    z-index: 910;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    height: calc(100% - 2em);
}

#zone-de-jeu {
    position: relative;
    display: inline-block;
    background: none;
    margin: 1em auto 0 auto;
    padding: 0;
    overflow: hidden;
}

#plateau {
    margin: 0;
    padding: 0;
}

@media (orientation: landscape) {
    body {
        font-size: calc(1px + 1.706485vh - 1px);
    }

    #zone-de-jeu {
        height: calc(100% - 1em);
    }

    #plateau {
        height: 100%;
    }
}

@media (orientation: portrait) {
    body {
        font-size: calc(1px + 1.706485vw - 1px);
    }

    #zone-de-jeu, #plateau {
        width: 100%;
    }
}

.entree-plateau {
    animation: entree-plateau 3.5s ease;
}

@keyframes entree-plateau {
    0%   { opacity: 0}
    30%  { opacity: 0}
    100% { opacity: 1}
}

.actif div {
    cursor: pointer;
}

.actif div:hover {
    transform: rotate(-30deg) scale(0.9) !important;
    transition: 0.2s;
}

.animate-pulse {
    animation: animate-pulse 0.9s infinite ease-out;
}

@keyframes animate-pulse {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.05); /* slightly increasing the size */
    }
    70% {
        transform: scale(0.95); /* slightly decreasing the size */
    }
    100% {
        transform: scale(1); /* setting back to initial size */
    }
}

/* Titre Jan Ken Pon et son animation d'introduction */

#titre {
    position: absolute;
    display: block;
    top: 24.4%;
    left: 3.0%;
    height: 13%;
    background: none;
    transform: scale(1) rotate(-30deg);
    z-index: 2;
}

.apparition {
    animation: apparition 2s ease;
}

@keyframes apparition {
    0% {
        transform: scale(3.5);
        transform-origin: top left;
    }
    70% {
        transform: scale(3.5);
        transform-origin: top left;
        }
    95% {
        transform: scale(0.9) rotate(-30deg);
        transform-origin: top left;
    }
    98% {
        transform: scale(1.05) rotate(-35deg);
        transform-origin: center;
    }
    100% {
        transform: scale(1) translateX(0);
        transform-origin: top left;
    }
}

/* Bouton de nouvelle partie */

#joueur-1, #joueur-2, #nouvelle {
    position: absolute;
    display: inline;
    font-weight: bold;
    text-align: center;
    color: black;
    text-shadow: 1px 1px 0 white;
}

#nouvelle {
    width: 17.2%;
    height: 4%;
    top: 15.1%;
    left: 28.7%;
    padding-top: 0.3em;
    cursor: pointer;
    background-image: url(../images/jankenpon/toad/KKj5872swoAA.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

#nouvelle:hover {
    transform: scale(1.05);
    transition: 0.2s;
}

/* Compteur de tours pour la partie */

#tours {
    position: absolute;
    display: table-cell;
    color: black;
    font-weight: bold;
    width: 8.8%;
    left: 32.8%;
    top: 19.6%;
}

/* Affichage des noms des joueurs de la partie */

#joueur-1, #joueur-2 {
    font-family: var(--serif);
    width: 6.1%;
}

#joueur-1 {
    top: 58.0%;
    left: 49.8%;
}

#joueur-2 {
    top: 30.4%;
    left: 44.4%;
}

/* Affichage des cores de la partie */

#score-1, #score-2 {
    position: absolute;
    display: table-cell;
    height: 7.9%;
    width: 5.8%;
    color: black;
    padding-top: 0.1em;
    font-weight: bold;
    background-image: url(../images/jankenpon/toad/0.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

#score-1 {
    left: 80.0%;
    top: 74.7%;
}

#score-2 {
    left: 88.75%;
    top: 69.6%;
}

/* Visage animé du joueur 2 (Toad) */

#visage-toad {
    position: absolute;
    display: block;
    width: 12.05%;
    padding: 0;
    top: 41.45%;
    left: 62.48%;
    background: none;
    text-align: left;
}

#visage-toad img {
    margin: 0;
    width: 100%;
}

#veine, #goutte {
    position: absolute;
    display: block;
}

#veine img, #goutte img {
    margin: 0;
    padding: 0;
    width: 100%;
}

#veine {
    top: 42%;
    left: 73%;
    width: 5%;
    transform: scale(1);
    animation: veine 0.5s infinite;
    animation-direction: alternate;
    visibility: hidden;
}

  @keyframes veine {
    from {transform: scale(1) rotate(0deg); transform-origin: 70% 40%;}
    to   {transform: scale(1.15) rotate(-10deg); transform-origin: 70% 40%;}
}

#goutte {
    top: 42%;
    left: 73%;
    width: 4.5%;
    animation: goutte ease 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: top;
    visibility: hidden;
}

@keyframes goutte {
    from { transform: scaleY(1); }
    to   { transform: scaleY(1.3); }
}


/* Textes dits par le joueur 2 (Toad) */

#text-toad-holder {
    position: absolute;
    display: block;
    bottom: 60%;
    left: 52%;
    width: 36%;
    text-align: center;
}

#text-toad {
    font-size: 1.6em;
    text-align: center;
    color: var(--marron-sombre);
    padding: 0.7em;
    margin: 0 auto 0.75rem auto;
    width: auto;
    border: 4px solid var(--marron-sombre);
    border-radius: 0.8em;
    background-color: white;
    box-shadow: 2px 2px 0.2em #880000aa;
    z-index: 0;
}

#bulle-toad {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1rem;
    background-image: url(../images/jankenpon/toad/AvD4994Mne.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 50%;
    z-index: 1;
}

/* Interface de sélection et d'affichage des coups Pierre/Feuille/Ciseaux pour les joueurs 1 et 2 */

#pierre, #feuille, #ciseaux {
    transform: rotate(-35deg) scale(0.8);
    transform-origin: center;
    height: 27%;
    width: 16%;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
}

#pierre {
    background-image: url(../images/jankenpon/toad/BESOUYB45En.svg);
    top: 38.7%;
    left: 19.5%;
}

#ciseaux {
    background-image: url(../images/jankenpon/toad/ZEcbi854hPmaa.svg);
    top: 58%;
    left: 11.9%;
}

#feuille {
    background-image: url(../images/jankenpon/toad/44fOnZx876.svg);
    top: 58%;
    left: 30.2%;
}

#coup-1, #coup-2 {
    position: absolute;
    display: block;
    width: 16%;
    height: 27%;
    transform: scale(0.4);
    background-repeat: no-repeat;
    background-size: contain;
}

#coup-1 {
    top: 53.2%;
    left: 45.8%;
    background-image: url(../images/jankenpon/toad/BESOUYB45En.svg);
}

#coup-2 {
    top: 25.8%;
    left: 38.5%;
    background-image: url(../images/jankenpon/toad/ZEcbi854hPmaa.svg);
}

.gagnant {
    transform: scale(0.4);
    animation: coup-gagnant 0.5s infinite;
    animation-direction: alternate;
}

@keyframes coup-gagnant {
    from {transform: scale(0.4) rotate(0deg); transform-origin: center;}
    to   {transform: scale(0.6) rotate(-10deg); transform-origin: center;}
}

/* Décompte avant la fin d'un tour */

#decompte {
    position: absolute;
    display: block;
    width: 7.56%;
    height: 13.5%;
    top: 33%;
    left: 42.78%;
}

#decompte img {
    height: 100%;
}

/* Affichage des résultats de la partie */

#banniere {
    display: block;
    position: absolute;
    top: 1.9%;
    left: 19.8%;
    width: 34.9%;
    height: 11.1%;
    background-repeat: no-repeat;
    background-size: contain;
}