/*
    Domino ThreeJS creado por Josep Antoni Bover Comas el 16/01/2019

        CSS para el Dominó

        Vista por defecto en el Laboratorio de pruebas  
		devildrey33_Lab->Opciones->Vista = Filas;

        Ultima modificación el 25/02/2019
*/

@import url('https://fonts.googleapis.com/css?family=Baloo+Thambi');
/*@import url('https://fonts.googleapis.com/css?family=Baloo+Thambi|Merienda|Righteous|ZCOOL+KuaiLe');*/

/** {    
/*    font-family: 'Righteous', cursive;              /* queda chula */
/*    font-family: 'ZCOOL KuaiLe', cursive;           /* curiosa i no queda malament */
/*    font-family: 'Merienda', cursive;              /* queda prou be */
/*    line-height: 1.2rem;
}*/
/*
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh; /*  100% height */ /*
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
}*/

/* Idioma automático */ 
:lang(en) button::after, :lang(en) span::after {
    content:attr(data-idioma-en);
}
:lang(cat) button::after, :lang(cat) span::after {
    content:attr(data-idioma-cat);
}
:lang(es) button::after, :lang(es) span::after {
    content:attr(data-idioma-es);
}

#MarcoEmpezar, #MarcoContinuar, #MarcoEmpate, #MarcoTerminado, #Msg1, #Msg2, #Msg3, #Msg4, button, input, #DatosJuego, #Historial {
    font-family: 'Baloo Thambi', cursive;
/*    line-height: 1.2rem; */
}

/* Landscape móvil */
@media only screen and (orientation:landscape) and (min-resolution: 1.2dppx) {
    #MarcoEmpezar, #MarcoContinuar, #MarcoEmpate, #MarcoTerminado, #Msg1, #Msg2, #Msg3, #Msg4, button, input, #DatosJuego, #Historial {
        line-height: 1rem;
    }
    #MarcoEmpezar, #MarcoContinuar, #MarcoEmpate, #MarcoTerminado, #DatosJuego {
        zoom:0.75;
        font-size:1.2rem !important;
    }
    
    #Msg1, #Msg2, #Msg3, #Msg4, #Victoria, #Derrota, #PartidaGanada {
        zoom:0.5;
    }
    
    #BotonEmpezar, #BotonContinuar, #BotonContinuar2, #BotonTerminar, h1, h3 {
        font-size:1.5rem !important;
    }
    
}

/* Portrait mòvil */
@media  only screen and (orientation:portrait) and (min-resolution: 1.2dppx) {
    #MarcoEmpezar, #MarcoContinuar, #MarcoEmpate, #MarcoTerminado, #Msg1, #Msg2, #Msg3, #Msg4, button, input, #DatosJuego, #Historial {
        line-height: 1.5rem;
    }
    #MarcoEmpezar, #MarcoContinuar, #MarcoEmpate, #MarcoTerminado, #DatosJuego {
        zoom:0.95;
        font-size:1.3rem !important;
    }
    
    #Msg1, #Msg2, #Msg3, #Msg4, #Victoria, #Derrota, #PartidaGanada {
        zoom:0.5;
    }
    
    #BotonEmpezar, #BotonContinuar, #BotonContinuar2, #BotonTerminar, h1, h3 {
        font-size:2rem !important;
    }
    
}


/* Marcos con interfaz de usuario para el juego */
#MarcoEmpezar, #MarcoContinuar, #MarcoEmpate, #MarcoTerminado, #MarcoOpciones, #MarcoEquipos {    
    position:fixed;
    border:0.1rem solid #000;
    top:250%;
    left:50%;
    transform: translate(-50%, -50%);
/*    background:rgba(0, 0, 200, 0.8);
    color:#FFF;
    text-shadow:1px 1px 1px #000;
    border-radius:8px;*/
/*    padding:0 0.2rem 0.2rem 0.2rem;*/
    z-index:1000;
    border:0.2rem solid transparent;
    font-size:1.5rem;    
    text-shadow:0.3rem 0.3rem 0.3rem #000;
    transition:1s cubic-bezier(.49,.58,.56,1.47);
    padding: 0.4rem;
}

#MarcoEmpezar[visible="true"], #MarcoContinuar[visible="true"], #MarcoEmpate[visible="true"], #MarcoTerminado[visible="true"], #MarcoOpciones[visible="true"], #MarcoEquipos[visible="true"] {
    top:50%;
}

/*#Empezar:hover {
    background-color: rgba(37,35,40, 0.9);
    border:2px solid rgb(234, 80, 78);
}*/

#BotonEmpezar, #BotonContinuar, #BotonContinuar2, #BotonTerminar, #BotonEquipos, #BotonOpciones,  #BotonCerrarEquipos, #BotonCerrarOpciones {
    font-size:2rem;
    /*padding:0.5rem; */
    display:table;
    margin:auto;
}

.Centrado {
    display:table;
    margin:0.5rem auto 0 auto;
}

.Centrado > button {
    margin: 0.2rem;
/*    padding: 0.3rem;*/
    font-size: 1.1rem;
    vertical-align: middle;
    display: table-cell;}

button {
    border:0.1rem solid #000;
    cursor: pointer;    
    color:#FFFFFF;
    background: rgba(37,35,40, 1.0);    
    transition:0.4s;
    outline:0;
}

button:hover {
    background-color: rgb(234, 80, 78);
    /*border:1px solid rgb(234, 80, 78);    */
}

.PuntosMarcados, .IdiomaMarcado {
    background-color: rgb(214, 60, 58);
}

#Msg1, #Msg2, #Msg3, #Msg4 {
    position:fixed;
    font-size:2rem;
    transition:top 0.4s ease-out, left 0.4s ease-out, bottom 0.4s ease-out, right 0.4s ease-out;
}

#Msg1[ColorFondo="rojo"], #Msg2[ColorFondo="rojo"], #Msg3[ColorFondo="rojo"], #Msg4[ColorFondo="rojo"] {
    background-color: rgb(214, 60, 58) !important;
}

#Msg1[ColorFondo="negro"], #Msg2[ColorFondo="negro"], #Msg3[ColorFondo="negro"], #Msg4[ColorFondo="negro"] {
    background-color: rgba(37,35,40, 0.6) !important;
}

#Msg1[ColorFondo="verde"], #Msg2[ColorFondo="verde"], #Msg3[ColorFondo="verde"], #Msg4[ColorFondo="verde"] {
    background-color: rgb(60, 214, 58) !important;
}

#Msg1 {
    bottom:-50%;    
    left:50%;
    transform: translate(-50%, 0%);    
}

#Msg1[MsgVisible="true"] {
    bottom:2%;
}

#Msg2 {
    right:-100%;
    top:50%;
    transform: translate(0%, -50%);    
}

#Msg2[MsgVisible="true"] {
    right:2%;
}

#Msg3 {
    top:-50%;
    left:50%;
    transform: translate(-50%, 0%);
}

#Msg3[MsgVisible="true"] {
    top:2%;
}

#Msg4 {
    left:-100%;
    top:50%;
    transform: translate(0%, -50%);    
}

#Msg4[MsgVisible="true"] {
    left:2%;
}

/*#MarcoPartida {
    width:250px;
    position:fixed;
    top:-100%;
    right:0%;
    transition:0.4s;
    z-index:1000;
}

#MarcoPartida[Visible="true"] {
    top:0%;
}

#MarcoPartida > #TablaDatos {
    width:100%;
}*/

#DatosJuego > table {
    line-height: 1.4rem;
}

#DatosJuego {
    margin:0;
    display:none;    
/*    width:7em; */
    font-size:1.5rem;
}

#DatosJuego table > td[id] {
    padding-left:1rem;
}

/*#DatosJuego #Turno, #DatosJuego #Jugador, #DatosJuego #Partida {
    padding:4px;
    display:inline-block;
    width:calc(31% - 8px);
    margin:0px;
}*/

hr {
    display: block;
    height: 0.1rem;
    border: 0;
    border-top: 0.2rem solid #FFF;
    border-bottom: 0.1rem solid #000;
    margin: 0.4em 0;
    padding: 0; 
}

#Historial {
    display:none;
    width: 15rem;
    right:0px;
/*    min-height : 15em;
    max-height : 200px;*/
    height:15rem;
    overflow-y:scroll;
    border:0.1rem solid #000;
/*    margin:0.4rem;*/
    padding:0.2rem;
    margin:0;
    font-size:1rem;
}

/* Ficha mini del historial */
#Historial img {
    position: absolute;
    top: 1rem;
    zoom:0.30;
    left:40rem;
}

.Historial_negro, .Historial_rojo, .Historial_verde {
    position:relative;
/*    min-height:23px;*/
    height:1.5rem;
    display:table;    
/*    vertical-align:middle;*/
}

.Historial_negro > span, .Historial_rojo > span, .Historial_verde > span {
    display:table-cell;
    vertical-align: middle;
}

.Historial_negro {
    color:#FFF;
/*    padding:0.2rem;*/
}

.Historial_verde {
    color : rgb(60, 214, 58);
/*    padding:0.2rem;*/
}

.Historial_rojo {
/*    padding:0.2rem; */
    color: orange;
    /*text-shadow:1px 1px 1px #888;*/
}

#Historial::-webkit-scrollbar {
    width:0.5rem;
}

/*#Historial::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}*/

#Historial::-webkit-scrollbar-thumb {
  background-color: darkgrey;
/*  outline: 1px solid slategrey; */
}

/* Separación entre el nombre del jugador, y la acción en el historial */
#Historial > div > span + span {
    padding-left: 0.4rem;
}

#DatosJuego[Visible="true"], #Historial[Visible="true"] {
    display:block;
}


.Empate_Victoria {
    color:rgb(57, 255, 20);
}

.Empate_Derrota {
    color:rgb(235, 106, 14);
}

#MarcoEmpate > table {
    margin:auto;
}

#MarcoEmpate > p, h1, h3 {
    display: table;
    margin:auto;
}

h1 { font-size:2rem; }
h3 { font-size:1.7rem; }
h1, h3 {
    margin:0.3em auto;
}

#DatosJuego table > td { 
    text-align:right;
}



#Msg1 span, #Msg2 span, #Msg3 span, #Msg4 span {
/*    position:relative;
    top: -5px;  */
}

/* Zoom para las fichas svg */
#Msg1 img, #Msg2 img, #Msg3 img, #Msg4 img {
    zoom:0.6;
    position: relative;
/*    top: 0.5rem;    */
}


/* Svg's con el pulgar arriba / abajo para hacer una aniamción de victoria / derrota */
#Victoria, #Derrota, #ParitdaGanada {
    position:fixed;
    z-index:100;
    zoom:0.5;
    filter:drop-shadow(0.3rem 0.3rem 0.3rem #333);
    left:60%;
    top:100%;
}

#Victoria {
    transform:rotateX(180deg);
    animation:AniVictoria 5s ease 0s 1 normal;
}

#Derrota {
    animation:AniDerrota 5s ease 0s 1 normal;
}

#ParitdaGanada {
    animation:AniPartidaGanada 5s ease 0s 1 normal;    
    transform:rotateZ(0deg);
}

@keyframes AniVictoria {
    0%   { opacity:0.0; top:60%; }
    80%  { opacity:1.0; top:20%; }
    100% { opacity:0.0; top:-50%; }
}


@keyframes AniDerrota {
    0%   { opacity:0.0; top:20%;  transform:rotateZ(0deg);  }
    30%  { opacity:1.0; top:35%;  transform:rotateZ(10deg); }
    70%  { opacity:1.0; top:20%;  transform:rotateZ(0deg);  }
    100% { opacity:0.0; top:150%; transform:rotateZ(10deg); }
}

@keyframes AniPartidaGanada {
    0%   { opacity:0.0; top:60%  transform:rotateZ(0deg);  }
    50%  { opacity:1.0; top:40%  transform:rotateZ(20deg); }
    100% { opacity:0.0; top:20%; transform:rotateZ(31deg); }
}
/*#ME_J3, #ME_J4, #ME_E1 > td:nth-child(7), #ME_E2 > td:nth-child(7) {
    padding-left:20px;
}*/

/* Puntuaciones */
#ME_P1, #ME_P2, #ME_P3, #ME_P4, #ME_P13, #ME_P24, #MV_P1, #MV_P2, #MV_P3, #MV_P4, #MV_P13, #MV_P24  {
    padding:0.35rem 0.1rem 0.35rem 0.2rem;
    text-align:right;
}

#ME_P13, #ME_P24, #MV_P13, #MV_P24 {
    border-top: 0.2rem solid #FFF;
}

.TablaPuntos, .TablaPuntos2 {
    display:flex;
    margin:auto;
    line-height:1.4rem;
/*  padding: 0.4rem;*/
}

.TablaPuntos > table, .TablaPuntos2 > table {
    background: rgba(32,32,32,0.65);
    padding:0.4rem;
}


/*.TablaPuntos { width:65%; }
.TablaPuntos2 { width:90%; }*/

.TablaPuntos > *, .TablaPuntos2 > * {
    flex-basis: auto; /* default value */
    flex-grow: 1;
    flex:30%;
    margin: 0 0.2rem;
}

.AniResaltar {
    animation:AniResaltado 3s ease-in-out 0s infinite alternate;
}

@keyframes AniResaltado {
    0%   { color:#FFF; }
    100% { color:#FADA5E; }
}

.TablaPuntos input[type="text"] {
    width:100%;
    color:#FFF;
    background:transparent;
    outline:none;
    border:0.2rem solid transparent;
    font-size: 1rem;    
}

input[type="checkbox"] {
    width:2rem;
    height:1rem;
    transition:0.4s;
}


/* Botones para escoger el idioma */
#Idioma_en, #Idioma_cat, #Idioma_es {
    font-size:1.5rem;
}