/* ==================================================================
 * Mecaniques de jeu — page de jeu « v2 ».
 *
 * Le gabarit v2 ne charge plus ni games.css ni le bundle Bootstrap :
 * l'un imposait html, body { height: 100% } et redefinissait .container
 * pour tout le site, l'autre apportait 10 000 lignes pour une poignee de
 * classes. Ce fichier ne porte que ce dont les cinq mecaniques ont besoin
 * — grattage, rouleaux, roue, cartes retournables, des — et le peu de
 * grille que les gabarits utilisent.
 *
 * Chaque regle est portee par body.gm : rien ne peut atteindre l'ancien
 * gabarit, qui garde games.css et Bootstrap.
 *
 * ⚠ Les regles viennent de games.css, a l'identique : les mecaniques sont
 * pilotees par des scripts qui comptent sur ces dimensions exactes — le
 * jackpot pose ses rouleaux sur une image de fond de 290 px, la roue
 * dessine dans un canvas de 300x400. Les retoucher, c'est desaligner le
 * jeu.
 * ================================================================== */

/* ⚠ Bootstrap posait box-sizing: border-box sur tout le document, et les
   regles reprises plus bas ont ete ecrites sous ce modele : sans lui, une
   largeur de 100 % additionnee a son remplissage debordait du cadre. */
body.gm,
body.gm *,
body.gm *::before,
body.gm *::after{ box-sizing: border-box; }

/* Reprises telles quelles de games.css : les rouleaux du jackpot sont
   dimensionnes par le script du plugin, mais comptent sur cette borne pour
   ne pas deborder de leur fenetre — sans elle, les logos sortaient du
   cadre et se retrouvaient coupes. */
body.gm img{
    max-width: 100%;
    height: auto;
}

body.gm canvas{ display: block; }

/* ---------------- Grille, en remplacement de Bootstrap ----------- */

body.gm .row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}

body.gm .col,
body.gm .col-sm{
    flex: 1 1 0%;
    min-width: 0;
    padding: 0;
}

body.gm .text-center{ text-align: center; }
body.gm .text-muted{ opacity: .8; }

/* Boutons : le dessin du theme vit dans game-modern.css, ici seulement de
   quoi effacer l'apparence native. */
body.gm button{
    font: inherit;
    cursor: pointer;
}

/* ---------------- Mecaniques ---------------- */

body.gm #card-text{
    background-color: #55cfd600;
    text-align: center;
    padding: 12px;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px rgb(0 0 0 / 41%);
    color: white;
}

body.gm #fireworks-canvas{
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
}

body.gm #qrIfWonSection,
body.gm #qrIfLostSection,
body.gm #thankSection{
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x:hidden;
    margin-top: 20px;
    padding-bottom: 50px;
}

body.gm #gameSection{
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

body.gm #game-container{
    max-width: 375px;
    /* Bootstrap centrait .container par margin:0 auto, et games.css en faisait
       une colonne flex centree. Le gabarit v2 ne charge ni l'un ni l'autre :
       sans cela, TOUT plateau plus etroit que son conteneur restait cale a
       gauche — la carte a gratter (250 px), la roue (300 px). La correction
       est posee ici, sur le conteneur commun aux cinq mecaniques, plutot que
       sur chacune. */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.gm #game-container.container-jackpot{
    max-width: 320px;
    min-width: 320px;
}

body.gm #winWheel{
    padding-bottom: 30px;
}

body.gm .scratchpad{
    width: 250px;
    height: 250px;
    /* Centree dans son conteneur : #game-container fait 375 px, la carte
       250 — elle restait donc calee a gauche. Le gabarit d'origine le devait
       au .container de Bootstrap et a celui de games.css, dont aucun n'est
       charge ici. */
    margin-left: auto;
    margin-right: auto;
    border: solid 1px;
    border-radius: 10px;
}

body.gm .scratchpad canvas{
    border-radius: 10px;
}

body.gm .scratchpad img{
    border-radius: 10px;
}

body.gm #wheelContainer{
    background-image: url('../images/games/spin/wheel_back.png');
    background-position: center;
    background-repeat: no-repeat;
    width: 300px;
    height: 400px;
}

/* !important indispensable : les sections de fin de partie sont ciblees plus
   haut par leur identifiant (body.gm #qrIfWonSection, ...), donc avec une
   specificite superieure a celle d'une classe. Sans lui, .hidden perdait, et
   les sections restaient dans le flux — reduites a 1 % par leur zoom d'entree,
   elles apparaissaient sous la carte comme un petit trait. Le gabarit d'origine
   tenait cela du .hidden de Bootstrap, lui aussi en !important. */
body.gm .hidden{
    display: none !important;
}

body.gm .text-cadre{
    background-color: #55cfd600;
    text-align: center;
    padding: 12px;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px rgb(0 0 0 / 41%);
    color: white;
}

body.gm .text-titre{
    background-color: #55cfd600;
    text-align: center;
    border-radius:  10px;
    padding: 12px;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px rgb(0 0 0 / 41%);
    color: white;
    box-shadow: 0px 0px 6px 2px rgb(255 255 255 / 67%);
    font-family:initial;
}

body.gm #clickNflip{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 15px;
}

body.gm #clickNflip .col{
    margin-bottom: 15px;
}

body.gm .flip-box{
    background-color: transparent;
    width: 80px;
    height: 80px;
    perspective: 1000px;
}

body.gm .flip-box-inner{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

body.gm .flip-box-hover .flip-box-inner{
    transform: rotateY(180deg);
}

body.gm .flip-box-front,
body.gm .flip-box-back{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body.gm .flip-box-front{
    color: black;
}

body.gm .flip-box-back{
    background: rgba(255,255,255,0.5);;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
}

body.gm .scene{
    display: flex;
    justify-content: space-evenly;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

body.gm .controls{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm #roll{

}

body.gm .dice-display{
    width: 75px;
    height: 75px;
    perspective: 450px;
    margin:26px;
}

body.gm .dice{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-75px);
    transition: transform 0.4s;
    color: violet;
}

body.gm .dice-one{

}

body.gm .dice-two{

}

body.gm .dice-three{

}

body.gm .face{
    position: absolute;
    width: 65px;
    height: 65px;
    display: grid;
    grid-template-columns: 25px, 25px, 25px;
    grid-template-rows: 25px, 25px, 25px;
    border: 1px solid hsla(0, 10%, 50%, 0.2);
    font-size: 5pt;
}

body.gm .face-top{
    background: rgb(253 0 0 / 70%);
    transform: rotateX(90deg) translateZ(32px);
}

body.gm .top-pip-1{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    place-self: center;
}

body.gm .top-blank-1{
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .top-blank-2{
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .face-left{
    background: rgb(253 0 0 / 70%);
    transform: rotateY(-90deg) translateZ(32px);
}

body.gm .left-pip-1{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .left-pip-2{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .face-front{
    background: rgb(253 0 0 / 70%);
    transform: rotateY(0deg) translateZ(32px);
}

body.gm .front-pip-1{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .front-pip-2{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    place-self: center;
}

body.gm .front-pip-3{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .face-back{
    background: rgb(253 0 0 / 70%);
    transform: rotateY(180deg) translateZ(32px);
}

body.gm .back-pip-1{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .back-pip-2{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .back-pip-3{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .back-pip-4{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .face-right{
    background: rgb(253 0 0 / 70%);
    transform: rotateY(90deg) translateZ(32px);
}

body.gm .right-pip-1{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .right-pip-2{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .right-pip-3{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    place-self: center;
}

body.gm .right-pip-4{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .right-pip-5{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .face-bottom{
    background: rgb(253 0 0 / 70%);
    transform: rotateX(-90deg) translateZ(32px);
}

body.gm .bottom-pip-1{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .bottom-pip-2{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    place-self: center;
}

body.gm .bottom-pip-3{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .bottom-pip-4{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    place-self: center;
}

body.gm .bottom-pip-5{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    place-self: center;
}

body.gm .bottom-pip-6{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    place-self: center;
}

body.gm .idle{
    animation: idle linear infinite 6s;
}

body.gm .end-message{
    position: absolute;
    top: 70px;
    color: white;
    font-size: 50px;
    font-family: fantasy;
    font-weight: bolder;
    display: none;
    background: rgb(7 0 255 / 50%);
    text-align: center;
    width: 100%;
}

body.gm .rotate-win{
    -webkit-animation:spin 8s linear infinite;
    -moz-animation:spin 8s linear infinite;
    animation:spin 8s linear infinite;
}

/* ---------------- Animations ---------------- */

@keyframes idle {
    from {
        transform: translateZ(-32px) rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: translateZ(-32px) rotateX(360deg) rotateY(360deg);
    }
}

@keyframes spin-one {
    0% {
        -webkit-transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 0deg);
        transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 0deg);
    }
    50% {
        -webkit-transform: translateZ(-75px) scale(1.4) rotate3d(-1, 1, 0, 360deg);
        transform: translateZ(-75px) scale(1.4) rotate3d(-1, 1, 0, 360deg);
    }
    100% {
        -webkit-transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 720deg);
        transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 720deg);
    }
}

@keyframes spin-two {
    0% {
        -webkit-transform: translateZ(-75px) scale(1) rotate3d(1, 1, 1, 0deg);
        transform: translateZ(-75px) scale(1) rotate3d(1, 1, 1, 0deg);
    }
    50% {
        -webkit-transform: translateZ(-75px) scale(1.4) rotate3d(1, 1, 1, 360deg);
        transform: translateZ(-75px) scale(1.4) rotate3d(1, 1, 1, 360deg);
    }
    100% {
        -webkit-transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 720deg);
        transform: translateZ(-75px) scale(1) rotate3d(1, 1, 1, 720deg);
    }
}

@keyframes spin-three {

    0% {
        -webkit-transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 0deg);
        transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 0deg);
    }
    50% {
        -webkit-transform: translateZ(-75px) scale(1.4) rotate3d(-1, 1, 0, 360deg);
        transform: translateZ(-75px) scale(1.4) rotate3d(-1, 1, 0, 360deg);
    }
    100% {
        -webkit-transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 720deg);
        transform: translateZ(-75px) scale(1) rotate3d(-1, 1, 0, 720deg);
    }
}

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }