@import url("three-quarters.css");

/*

selectors
id = #IDName
class = .className

*/


	@keyframes slideInLeft {
        0% {
          	transform: translateX(-100%);
        }
        100% {
          	transform: translateX(0);
        }
    }

	@keyframes blink {
		0% {
			opacity:1;
		}
		50% {
			opacity:0;
		}
		100% {
			opacity:1;
		}
	} 

  	@keyframes blinker {  
		0% { opacity: 1.0; }
		50% { opacity: 0.0; }
		100% { opacity: 1.0; }
 	}

  	.blink_text {
		animation:1s blinker linear infinite;
		-webkit-animation:1s blinker linear infinite;
		-moz-animation:1s blinker linear infinite;
		/* color: red; */
	}

  	.xHidden{
    	display: none;
  	}

	:root {
		--scoresColCount: 2;
		--scoresFontSize: 5vh;
	}


	@font-face {
		font-family: Courgette;
		src: url(../fonts/Courgette-Regular.ttf);

		font-family: Mooli;
		src: url(../fonts/Mooli-Regular.ttf);

		font-family: Caveat;
		src: url(../fonts/Caveat-SemiBold.ttf); 

		font-family: Exo;
		src: url(../fonts/Exo2-MediumItalic.ttf);

		font-family: Young;
		src: url(../fonts/YoungSerif-Regular.ttf);

		font-family: Jost;
		src: url(../fonts/Jost-VariableFont_wght.ttf);
    
	}


	body {

		animation: 1s ease-out 0s 1 slideInLeft;
		/* animation: 0.5s ease-out 0s 1 slideInLeft;
		animation: slideInLeft 0.5s; */
		user-select: none;
		-webkit-touch-callout: none !important;
		-webkit-user-select: none !important;

		text-align: center;

		color: #000000;
		margin: 0px;
		overflow: hidden;
	}

	.bg-image {
		height: 100%; 
		
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;

		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
		z-index: -1;	
	}

	h1 {
		font-weight: bold;
		/* text-shadow: 0 2px 0 #222; */
		/*
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: black;
		*/
	}
	a, a:visited {
		color: #aea;
		text-decoration: none;
		-webkit-transition: all 1s;
		padding: 5px;
	}
	a:hover {
		color: #000;
		background: #aea;
		text-shadow: none;
	}

	#gamearea {
		
		/*display: -webkit-box;*/
		/*display: grid;*/

		/*-webkit-box-pack: center;
		-webkit-box-align: center;

		display: -moz-box;
		-moz-box-pack: center;
		-moz-box-align: center;*/
		/* max-height: 50vh; */
	}

#tiles {
    position: absolute;
    display: none;
}

.tile {
    perspective: 600px;
    border: 1px solid #555;
    border-radius: 15px;
    overflow: hidden;
    position: absolute;
    -moz-transition: all .01s;
    -webkit-transition: all .01s;
    transition: all .01s;
}

.faded {
    perspective: 600px;
    border-radius: 10px;
    overflow: hidden;
	opacity: 50%;


    /* changed	*/
    position: absolute;
/*
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
*/
}

.faded .face {
	opacity: 0%;
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;

    -moz-transition-property: opacity, -moz-transform, -moz-box-shadow;
    -moz-transition-duration: 0.1s;
    -webkit-transition-property: opacity, -webkit-transform, -webkit-box-shadow;
    -webkit-transition-duration: 0.1s;
    transition-property: opacity, transform, box-shadow;
    transition-duration: 0.1s;

    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}


.front {
    opacity: 1;
    z-index: 10;
	visibility: visible;

}

.visible {
	display: block;
}

.invisible {
	display: none;
}


.back {


    -moz-transform: rotate3d(0,1,0,-180deg);
    -webkit-transform: rotate3d(0,1,0,-180deg);
    transform: rotate3d(0,1,0,-180deg);

    z-index: 8;
}

.back .name, .back .login {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    display: block;
    color: #FFF;
}

.tile:hover .face{
    -webkit-box-shadow: 0 0 20px #aaa;
    box-shadow: 0 0 10px #aaa;
}
.tile-flipped .face{
    -webkit-box-shadow: 0 0 20px #aaa;
    box-shadow: 0 0 10px #aaa;
}
.tile-flipped .front {
    -moz-transform: rotate3d(0,1,0,180deg);
    -webkit-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);

    /* ensure the front face is below the back face */
    z-index: 8;
}

.tile-flipped .back {
    -moz-transform: rotate3d(0,1,0,0deg);
    -webkit-transform: rotate3d(0,1,0,0deg);
    transform: rotate3d(0,1,0,0deg);

    /* ensure the back face is on top of the front face */
    z-index: 10;
}

.tile-removed {
    opacity: 0;
}

#popup {
    font-family: 'Orbitron', serif;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0px 1px 2px #fff;
    color: #222;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-transition: all .5s ease-in;
}
#popup h1 {
    font-weight: 400;
}
#popup-box {
    position: relative;
    width: 400px;
    height: 300px;
    background: #ccc;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px 5px #333;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-transition: all .5s ease-in;
}
#popup-box small {
    font-size: .6em;
}
#popup.hide {
    background: rgba(0,0,0,0);
    visibility: hidden;
}
#popup.hide #popup-box{
    margin-top: -800px;
}


#div3 {
    /*
		position: relative;
    	width: 100%;
   		height: 300px;  
	*/
    background: #324ca8;
    border-radius: 10px;
}




.ribbon.hide {
    display: none;
}
.ribbon {
    float: left;
    position: absolute;
    left: -7px;
    top: 165px;
    z-index: 0;
    font-size: .5em;
    text-transform: uppercase;
    text-align: right;
}
.ribbon-body {
    height: 14px;
    background: #ca3d33;
    padding: 6px;
    z-index: 100;
    -webkit-box-shadow: 2px 2px 0 rgba(150,120,70,.4);
    border-radius: 0 5px 5px 0;
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,.3);
}
.triangle{
    position: relative;
    height: 0px;
    width: 0;
    left: -5px;
    top: -32px;
    border-style: solid;
    border-width: 6px;
    border-color: transparent #882011 transparent transparent;
    z-index: -1;
}

div#loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 320px;
}


/* Input Box --------------------------------------------------------------------------------------- */


.inputGroup {
	font-family: 'Segoe UI', sans-serif;
	margin: 1em 0 1em 0;
	max-width: 190px;
	position: relative;
}

.inputGroup input {
	font-size: 50%;
	padding: 0.8em;
	outline: none;
	border: 2px solid rgb(200, 200, 200);
	/* background-color: transparent; */
	background-color: #e8e8e8;

	border-radius: 20px;
	width: 100%;
}

.inputGroup label {
	font-size: 50%;
	position: absolute;
	left: 0;
	padding: 0.8em;
	margin-left: 0.5em;
	pointer-events: none;
	transition: all 0.3s ease;
	color: rgb(100, 100, 100);
}

.inputGroup :is(input:focus, input:valid)~label {
	transform: translateY(-50%) scale(.9);
	margin: 0em;
	margin-left: 1.3em;
	padding: 0.4em;
	background-color: #e8e8e8;
}

.inputGroup :is(input:focus, input:valid) {
  	border-color: rgb(150, 150, 200);
}






/* Keyboard CSS --------------------------------------------------------------------------------------- */

.keyboard {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    background: #004134;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    user-select: none;
    transition: bottom 0.4s;
    z-index: 10;
}

.keyboard--hidden {
    bottom: -400%;
}

.keyboard__keys {
    text-align: center;
}

.keyboard__key {
    height: 45px;
    width: 6%;
    max-width: 90px;
    margin: 3px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.05rem;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.keyboard__key:active {
    background: rgba(255, 255, 255, 0.12);
}

.keyboard__key--wide {
    width: 12%;
}

.keyboard__key--extra-wide {
    width: 36%;
    max-width: 500px;
}

.keyboard__key--activatable::after {
    content: '';
    top: 10px;
    right: 10px;
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}

.keyboard__key--active::after {
    background: #08ff00;
}

.keyboard__key--dark {
    background: rgba(0, 0, 0, 0.25);
}
 
    table {
        margin: 0 auto; /* or margin: 0 auto 0 auto */
    }

    .reset {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 3;
    }

    .demo {
        position: absolute;
        left: 0px;
        right: 0px;
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
		width: 100vw;
        z-index: -1;
       	opacity: 0.3;
        background: url(../images/demo.png) no-repeat;
		background-size: cover;
    }
    .test {
        display: none;
        position: absolute;
        top: 0px;
        right: 50px;
        z-index: 3;
    }

    .test2 {
        display: none;
        position: absolute;
        top: 0px;
        right: 100px;
        z-index: 3;
    }


    /* The Modal (background) */
		.modal {
			display: none; /* Hidden by default */
			position: fixed; /* Stay in place */
			z-index: 5; /* Sit on top */
			padding-top: 50px; /* Location of the box */
			left: 0;
			top: 0;
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			overflow: auto; /* Enable scroll if needed */
			background-color: rgb(0,0,0); /* Fallback color */
			background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
			color:#000;
			text-shadow: 0px 0px 0px;
		}

      .modal2 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 5; /* Sit on top */
        padding-top: 50px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		color:#000;
		text-shadow: 0px 0px 0px;
		
      }
      .modal3 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 5; /* Sit on top */
        padding-top: 50px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        color:#000;
        text-shadow: 0px 0px 0px;
      }

      /* Modal Content */
      .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid rgb(0, 0, 0);
        width: 60%;
		border-radius: 30px;
		text-shadow: 0px 0px 0px;
      }
      /* Modal Content */
      .modal-content3 {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid rgb(0, 0, 0);
        width: 60%;
		border-radius: 30px;
		text-shadow: 0px 0px 0px;
      }
      /* The Close Button */
      .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }

      .close:hover, .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }

      .btn {
        background-color: 555555;
        color: black;
        border: 2px solid #000000;
        border-radius: 12px;
        font-size: 20px;
        padding: 14px 40px;
      }
      
      	@media (orientation: landscape) {
			.tile, .faded {
				width: 16.5vh;
				width:  calc(var(--vh, 1vh) * 16.5);
				height: 16.5vh;
				height: calc(var(--vh, 1vh) * 16.5);
				background-size: inherit;     
      		}
        
			.wrapper {
				display: grid;
				grid-gap: 0vh;
				grid-template-columns: 1fr 4fr;
				grid-template-areas: "leftPane rightPane";
				/*background-color: #fff;
				color: #444;*/
				height: 100vh;
				height: calc(var(--vh, 1vh) * 100);
				max-height: 100vh;
				maz-height: calc(var(--vh, 1vh) * 100);
			}

			.clockWrapper {
				padding: 0px;
				grid-area: clock;
				font-size: 3vh;
				font-size: calc(var(--vh, 1vh) * 3);
				margin-top: 1vh;
				height: 11vh;	
			}

			.playerWrapper {
				padding: 0px;
				grid-area: player;
				font-size: 3vh;
				font-size: calc(var(--vh, 1vh) * 3);
				margin-top: 1vh;
				height: 11vh;
				height: calc(var(--vh, 1vh) * 11);
			}

			.pairsWrapper {
				padding: 0px;
				grid-area: pairs;
				font-size: 3vh;
				font-size: calc(var(--vh, 1vh) * 3);
				margin-top: 1vh;
				margin-top: calc(var(--vh, 1vh) * 1);
				height: 11vh;
				height: calc(var(--vh, 1vh) * 11);
			}

			.scoreWrapper {
				padding: 0px;
				grid-area: score;
				font-size: 3vh;
				font-size: calc(var(--vh, 1vh) * 3);
				margin-top: 1vh;
				margin-top: calc(var(--vh, 1vh) * 1);
				height: 11vh;
				height: calc(var(--vh, 1vh) * 11);
			}

			.scoresWrapper {
				padding: 0px;
				grid-area: scores;        
				font-size: 3vh;
				font-size: calc(var(--vh, 1vh) * 3);
				margin-top: 1vh;
				margin-top: calc(var(--vh, 1vh) * 1);
				height: 50vh;
				height: calc(var(--vh, 1vh) * 50);
			}

			.clock {
				font-size: 6vh;
				font-size: calc(var(--vh, 1vh) * 6);
			}

			.player {
				font-size: 4vh;
				font-size: calc(var(--vh, 1vh) * 4);
			}

			.pairs {
				font-size: 5vh;
				font-size: calc(var(--vh, 1vh) * 5);
			}

			.score {
				font-size: 5vh;
				font-size: calc(var(--vh, 1vh) * 5);
			} 

			.scores {
				font-size: 2.6vh;
				font-size: calc(var(--vh, 1vh) * 2.6);
			}

			.header {
				grid-area: header;
				font-size: 7vh;
				font-size: calc(var(--vh, 1vh) * 7);
				text-align: center;
			}

			.game {
				grid-area: game;
				text-align: center;
			}

			.footer {
				grid-area: footer;
				font-size: 3vh;
				font-size: calc(var(--vh, 1vh) * 3);
				text-align: center;
			}

			.play {
				position: relative;
				/* padding-left: calc((80vw - (17vh * 6))/2); */
				padding-left: calc((80vw - ((calc(var(--vh, 1vh)) * 17) * 6))/2);
			}

			.scoresWrapperPortrait {
				display: none;
        	}

			.header {
				height: 10vh;
				height: calc(var(--vh, 1vh) * 10);
			}

			.game {
				height: 85vh;
				height: calc(var(--vh, 1vh) * 85);
			}

        	.footer {
          		height: 5vh;
				  height: calc(var(--vh, 1vh) * 5);
       		 }
		}

		@media (orientation: portrait) {
			.tile, .faded {
				width: 15vw;
				height: 15vw;     
			}

			.wrapper {
				/* display: grid; */
				grid-gap: 0vh;
				grid-template-columns: 1fr;
				/*grid-template-areas: "leftPane rightPane";
				background-color: #fff;
				color: #444;*/
				height: 100vh;
				max-height: 100vh;
			}

			.leftPane {
				/* grid-area: leftPane; */
				display: grid;
				grid-template-columns: 4fr;
				grid-gap: 0.5vh;
				grid-template-areas: "clock player pairs score";
				height: calc(((100vw /3)*2)/5);
				box-sizing: none;
			}

			.rightPane {
				/* grid-area: rightPane; 
				display: grid;
				grid-template-columns: 1fr;*/
				margin: 3vw;
				margin-top: 0;
				text-align: center;
			}
			.header {
				/*grid-area: header; 
				
				/*font-size: calc((100vw / 100vh) * 6) * 1vh; */
				height: 7vh;
				font-size: 7vw;
				text-align: center;
			}

			.game {
				grid-area: game;
				text-align: center;
				height: 80vw;
			}

			.footer {
				grid-area: footer;
				text-align: center;
				height: 5vh;
				font-size: 2.5vh;
			}

			.play {
				position: relative;
				padding-left: calc((80vw - (17vh * 6))/2);
			}

			.clockWrapper {
				margin-top: 1vh;
				/* width: 20vw; */
				height: calc(((100vw /3)*2)/5);
				padding: 0px;
				grid-area: clock;
				font-size: 4vw;
			}

			.playerWrapper {
				width: 30vw;
          		height: calc(((100vw /3)*2)/5);
				padding: 0px;
				grid-area: player;
				font-size: 4vw;
				margin-top: 1vh;
			}

			.pairsWrapper {
				width: 26vw;
				height: calc(((100vw /3)*2)/5);
				padding: 0px;
				grid-area: pairs;
				font-size: 3.5vw;
				margin-top: 1vh;
			}

			.scoreWrapper {
				width: 21vw;
				height: calc(((100vw /3)*2)/5);
				padding: 0px;
				grid-area: score;
				font-size: 4vw;
				margin-top: 1vh;
			}

			.clock {
				font-size: 5vw;
			}

			.player {
				font-size: 5vw;
			}

			.pairs {
				font-size: 5vw;
			}

			.score {
				font-size: 5vw;
			} 

			.scores {
				/* column-count: calc(100vw / 100vh * 4); */
				column-count: var(--scoresColCount);
				/* column-count: 3; */

				/* font-size: 2.6vh;
				font-size: calc(var(--vh, 1vh) * 2.1); */
				font-size: var(--scoresFontSize);
				line-height: 1.6;
				line-height: var(--scoresLineHeight);


			}

			.scoresWrapperPortrait {
				padding: 0px;
				grid-area: scores;        
				font-size: 3vh;
				font-size: calc(var(--vh, 1vh) * 3);
				margin-top: 0vh;
				margin-top: calc(var(--vh, 1vh) * 0);
				/* height: calc((((var(--vh, 1vh) * 100) - ((100vw /3)*2)/5) - 80vw) - 11vh); */
				height: var(--scoresHeight);
        	}

			.scoresWrapper {
				display: none;
        	}
		}

    .top3 {
        column-count: 1;
        text-align: center;
        font-size: 6vw;
    }

    .top3sm {
        font-size: 4vw;
    }

    .top20 {
        column-count: 3;
        text-align: center;
        font-size: 2vw;       
    }

    .theRest {
        column-count: 3;
        text-align: center;
        font-size: 2vw;
    } 

    .closeBtn {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 3;
    }

    .touchIcon1 {
		/* visibility: hidden; */
        position: absolute;
        top: 40vh;
        left: 60vw;
        z-index: 1000;
		animation: blink normal 2s infinite ease-in-out;
    }
	.touchIcon1 img {
		height: 40vh;
	} 
	
	.touchIcon2 {
		/* visibility: hidden; */
        position: absolute;
        top: 30vh;
        left: 50vw;
        z-index: 100;
		animation: blink normal 2s infinite ease-in-out;
    }
	.touchIcon2 img {
		height: 40vh;
	} 
	
	.touchTop {
        position: absolute;
        top: 0;
        left: 0;
		height: 100%;
		width: 100%;
        z-index: 2000;
	}