/*VARIABLES*/
:root {
    --rowNum: 4;
    --colNum: 4;
    --gridHeight: 128px;
    --gridWidht: 128px;
}

/*FUENTES*/
@font-face {
    font-family: 'good-times';
    src: url('fonts/good_times/good_times_rg-webfont.eot');
    src: url('fonts/good_times/good_times_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/good_times/good_times_rg-webfont.woff2') format('woff2'),
         url('fonts/good_times/good_times_rg-webfont.woff') format('woff'), 
         url('fonts/good_times/good_times_rg.ttf') format('truetype'),      
         url('fonts/good_times/good_times_rg-webfont.svg#goodtimes') format('svg');
}

html {
    height: 100%;
}

/*CUERPO*/
body {
    /*background: #f83838;
    background: -webkit-linear-gradient(to bottom, #ffefef, #fdaeae, #f83838);
    background: linear-gradient(to bottom, #ffefef, #fdaeae, #f83838); 
    background-repeat: no-repeat; */
  background-image: url('icon/mascota3.png');
  background-size: cover; /* Opcional: Ajusta el tamaño de la imagen para cubrir todo el elemento */
  background-position: center; /* Opcional: Centra la imagen en el elemento */
  background-repeat: no-repeat; /* Opcional: Evita que la imagen se repita */

}

/*CONTAINER ELEMENTS*/
.container {
    display: grid;
    text-align: center;
    gap: 10px;
    grid-template-areas: "numPartidas maxPuntos puntos cronometro"
                         "baraja baraja baraja baraja";
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.numPartidas, .maxPuntos, .puntos, .reloj {    
    font-family: 'good-times';
}

/*PARTIDAS*/
.numPartidas {
    grid-area: numPartidas;   
}

/*PUNTOS*/
.maxPuntos {
    grid-area: maxPuntos;
}

.puntos {
    grid-area: puntos;
}

/*CRONOMETRO*/
.cronometro {
    grid-area: cronometro;
}

.reloj {
    display: inline;
    font-weight: bold;
}

/* TABLERO */
.wrapper {
    grid-area: baraja;
    padding: 2%;

    display: grid;
    justify-content: center;
    grid-template-rows: repeat(var(--rowNum), var(--gridHeight));
    grid-template-columns: repeat(var(--colNum), var(--gridWidht));
    gap: 20px;
}

/* CARTAS */
.carta {
    grid-column-start: auto;
    grid-row-start: auto; 
    
    position: relative;
    transform-style: preserve-3d;
    transition: 1s;
    width: var(--gridWidht);
    height: var(--gridHeight);
}

/* IMAGEN FRONT CARTA */
input[type='image'] {
    background: white;    
    border-radius: 12px;     
}

.face {
    position: absolute;
    width: var(--gridWidht);
    height: var(--gridHeight);
}

.back {
    transform: rotateY(0deg) scale(1);
    backface-visibility: hidden;
}

/* ANIMACIONES CARTA GIRAR Y CRECER */
.mostrar {
    transform: rotateY(180deg) scale(1.12);
    -ms-transform: rotateY(180deg) scale(1.12); /* IE 9  */
    -moz-transform: rotateY(180deg) scale(1.12); /* Firefox */
    -webkit-transform: rotateY(180deg) scale(1.12); /* Safari and Chrome */
    -o-transform: rotateY(180deg) scale(1.12); /* Opera */
}

.ocultar {
    transform: rotateY(0deg) scale(1);
    -ms-transform: rotateY(0deg) scale(1); /* IE 9  */
    -moz-transform: rotateY(0deg) scale(1); /* Firefox */
    -webkit-transform: rotateY(0deg) scale(1); /* Safari and Chrome */
    -o-transform: rotateY(0deg) scale(1); /* Opera */
}

.back input[type='image']:hover {
    border: 5px solid #1f8fff;    
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* BLOQUEO TABLERO */
.wrapper.bloquear {
    opacity: 0.8;
}

.bloquear input[type='image']:hover {
    border: none;
    box-shadow: none;
}

/* MODAL */
.modalDialog {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .6);
}

.hide {
    display: none;
}

.modal-content {
    width: 60%;
    margin: 5% auto;
    border-radius: 5px;
    background: #fff;
    text-align: center;

    display: grid;
    gap: 5px;
}

.modal-header {
    padding-top: 3%;
    font-family: 'good-times';
    font-weight: bold;
}

.modal-body {
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    padding: 3%;    
}

/*MODAL PUNTOS*/
.modal-score-body {
    display: grid;
    justify-content: space-around;
    padding: 2%;
}

.tabla {
    grid-auto-flow: column;    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer {
    margin: 5% 5% 0 10%;
    gap: 12px;
}

.titlePtos {
    font-family: 'good-times';
    font-size: small;
}

/*MODAL PARTIDAS*/
.modal-tscore-body {
    display: grid;
    padding: 2%;
}

.tPartidas {
    grid-auto-flow: column;    
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

/*BOTONES*/
button {
    font-size: 17px;
    padding: 0.5em 2em;
    border: transparent;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    background: hsl(210, 100%, 56%);
    color: white;
    border-radius: 4px;
   }
   
   button:hover {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
   }
   
   button:active {
    transform: translate(0em, 0.2em);
   }