/***************************************
 * FONTS
***************************************/

@font-face { 
    font-family: "tesco"; src: url("../fonts/tesco.ttf");
}

.tesco {
    font-family: "tesco" !important;
    font-size: 7vw;
    font-style: normal;
    /*color: #edce6b;*/
    background: linear-gradient(336deg,rgba(212, 180, 87, 1) 0%, rgba(244, 230, 147, 1) 54%, rgba(212, 180, 87, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*text-shadow: 2px 2px 5px #000000;*/
}



/************************************
 * COMMON
************************************/

:root {
    --menu-scaler: 1.0;
}


@media (min-aspect-ratio : 65/100) and (orientation : portrait) {
    :root {
        --menu-scaler: 0.7;
    }
}


html, body {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overflow: hidden !important;
	width: 100vw;
    height: 100%;
    max-height: 100%;
    min-width: 100%;
	margin: 0;
	padding: 0;
    background-color: darkgrey;
	background-size: 100% 100%;
}


body > img {
	opacity: 0;
	width: 1px;
	height: 2px;
}


html.error, 
html.error body {
	overflow: visible !important;
	width: 100%;
	height: auto;
	min-height: 100%;
	max-height: none;
}


button {
	background: transparent;
	border: 0;
	outline: transparent;
	padding: 0;
}


.absolute {
	display: block;
	position: absolute;
}


.icon,
.paddedHeight {
	display: block;
	height: auto;
}


.icon::after,
.paddedHeight::after {
	display: block;
	content: "";
}


.button {
	cursor: pointer;
	z-index: 100;
}


.noEvents {
	pointer-events: none;
}


.absolute-fill {
    position: absolute;
    height: 100%;
    width: 100%;
	/*top: 0;
	left: 0;
	right: 0;*/
}


.hidden {
	display: none !important;
}


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

    touch-action: none;
}


/***************************************
 * UI
***************************************/

#uiContainer, #background, #stars, #logo, #instructions, #alignPrompt, #faceTemplate, #readyButton,
#bottomBar, #bottomLogo, #score, #scoreBG, #scoreText, #time, #timeBG, #timeIcon, #timeText,
#gameHolder, .pib, .sprout, #blueCrown, #blueCrownHalves, #blueCrownLeft, #blueCrownRight, 
#redCrown, #redCrownHalves, #redCrownLeft, #redCrownRight, #goldCrown, #goldCrownHalves, #goldCrownLeft, #goldCrownRight,
#makesChristmas, #finalScore, #joke, #jokeQ, #jokeA, #endScreen, #videoHolder, #video, #learnMore, #playAgain, #scoreEffect
{
    z-index: 5;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}


#uiContainer, #gameHolder, #endScreen {
    width: 100%;
    height: 100%;
}


#background {
    z-index: 4;
    width: 100%;
    height: 100%;
    background-image: url('../images/background.jpg');
    background-size: cover;
}

/*#stars {
    z-index: 6;
    width: 100vw;
    height: 45vw;
    top: 0%;
    left: 50%;
    transform: translateX( -50% );
    background-image: url('../images/stars.png');
    background-size: contain;
}*/

#logo {
    z-index: 6;
    width: 100vw;
    height: 13%;
    bottom: 0%;
    left: 50%;
    transform: translateX( -50% );
    background-image: url('../images/logo.png');
    background-size: contain;
}

#instructions {
    width: 85%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    background-image: url('../images/ins1.png');
    background-size: contain;
    pointer-events: all;
}

#alignPrompt {
    width: 60vw;
    height: 20vw;
    top: 32vw;
    left: 50%;
    transform: translate( -50%, -50% );
    background-image: url('../images/align.jpg');
    background-size: contain;
}

#faceTemplate {
    width: 60vw;
    height: 70vw;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/template.png');
    background-size: contain;
    pointer-events: all;
}

#readyButton  {
    width: 80%;
    height: 20%;
    bottom: -28%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/ready.png');
    background-size: contain;
    pointer-events: all;
}


#bottomBar {
    z-index: 10;
    width: 100vw;
    height: 18.9549vw;
    bottom: 0%;
    left: 50%;
    transform: translateX( -50% );
    background-image: url('../images/bottom_banner.jpg');
    background-size: contain;
}

#bottomLogo {
    width: 35%;
    height: 85%;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/logo.png');
    background-size: contain;
}

#score, #time {
    width: 27%;
    height: 70%;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}

#time {
    left: auto;
    right: 5%;
}

#scoreBG, #timeBG {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    border-radius: 7vw;
}

#timeIcon {
    width: 37%;
    height: 83%;
    top: 44%;
    left: 4%;
    transform: translateY(-50%);
    background-image: url('../images/time_icon.png');
    background-size: contain;
}

#scoreText, #timeText {
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#timeText {
    left: 64%;
}







.pib, .sprout
{
    z-index: 100;
    width: 18vw;
    height: 14vw;
    top: -50%;
    left: 50%;
    transform: translate( -50%, -50% );
    background-image: url('../images/pib.png');
    transition: none;
}

.sprout {
    width: 18vw;
    height: 18vw;
    background-image: url('../images/sprout.png');
}

#blueCrown, #redCrown, #goldCrown {
    z-index: 100;
    width: 40vw;
    height: 25vw;
    top: -50%;
    left: 50%;
    transform: translate( -50%, -50% );
    transition: none;
}

#blueCrownHalves, #redCrownHalves, #goldCrownHalves {
    width: 100%;
    height: 100%;
    transition: none;
}

.leftCrownHalf, .rightCrownHalf {
    width: 100%;
    height: 100%;
    clip-path: polygon( 0 0, 54% 0, 33% 100%, 0 100% );
}

.rightCrownHalf {
    clip-path: polygon( 54% 0, 100% 0, 100% 100%, 33% 100% );
}

#blueCrownLeft, #blueCrownRight {
    background-image: url('../images/crown_blue.png');
    transition: none;
}

#redCrownLeft, #redCrownRight {
    background-image: url('../images/crown_red.png');
    transition: none;
}

#goldCrownLeft, #goldCrownRight {
    background-image: url('../images/crown_gold.png');
    transition: none;
}

#scoreEffect {
    z-index: 100;
    height: 20vw;
    width: 20vw;
    transform: translate(-50%, -50%);
    background-image: url('../images/plus_one.png');
    background-size: contain;
    transition: none;
}




#makesChristmas {
    width: 90vw;
    height: 34vw;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/makes_christmas.png');
    background-size: contain;
    transition: none;
}

#finalScore {
    z-index: 6;
    width: 90vw;
    height: 36vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    text-align: center;
    font-size: 15vw;
    line-height: 1.1;
    white-space: pre-wrap;
    transition: all 1.0s ease-in-out;
}

#joke {
    width: 90vw;
    height: 20vw;
    bottom: 17%;
    left: 50%;
    transform: translateX(-50%);
    /*background-image: url('../images/joke.png');
    background-size: contain;*/
    opacity: 0;
    transition: all 1s ease-in-out;
}

#jokeQ, #jokeA {
    width: 100%;
    height: 69%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 4.8vw;
    line-height: 1.2;
}

#jokeA {
    top: 75%;
    height: 50%;
}

#videoHolder {
    width: 90vw;
    height: 66vw;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

#video {
    width: 100%;
    height: 51.5vw;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/video.png');
    background-size: contain;
    pointer-events: all;
}

#videoCloseButton {
    position: absolute;
    z-index: 1001;
    width: 10%;
    height: 15%;
    top: -5%;
    right: -5.5%;
    background-image: url('../images/close_button.png');
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: auto;
}

#learnMore, #playAgain {
    width: 40vw;
    height: 10vw;
    top: 92%;
    left: 2%;
    transform: translateY(-50%);
    background-image: url('../images/learn_more.png');
    background-size: contain;
    pointer-events: all;
}

#playAgain {
    left: auto;
    right: 2%;
    background-image: url('../images/replay.png');
}








#sparklesCanvas {
    position: absolute;
    z-index: 10000;
    width: 100%;
    height: 30%;
    pointer-events: none;

    --mask: linear-gradient(to bottom, 
        rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 70%, 
        rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
    ) 100% 50% / 100% 100% repeat-x;
    
    -webkit-mask: var(--mask); 
    mask: var(--mask);
}

#confettiCanvas {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 30%;
    pointer-events: none;
}





#loadFooter {
    z-index: 11;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;

    width: 100vw;
    height: 13%;
    bottom: 0%;
    left: 50%;
    transform: translateX( -50% );
    background-image: url('../images/logo.png');
    background-size: contain;
}

#desktopFooter {
    z-index: 11;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;

    width: 100vw;
    height: 13%;
    bottom: 0%;
    left: 50%;
    transform: translateX( -50% );
    background-image: url('../images/logo.png');
    background-size: contain;
}






#deviceOrientation {
	/*background-color: #f6f6f6;*/
	z-index: 1000 !important;
    display: none;
    background-image: url('../images/rotate_background.jpg');
    background-size: cover;
}


#desktopError {
    background-color: #eb1f20;
	z-index: 5000 !important;
    display: none;
    background-image: url('../images/desk_bg.jpg');
    background-size: cover;
}

#desktopErrorText {
    position: relative;
    left: 0;
    width: 100%;
    font-family: 'Varela-Round', sans-serif;
    font-size: 18pt;
    color: #ffffff;
}

#desktopHeader {
    z-index: -1;
    position: absolute;
    width: 50vw;
    height: 15vw;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center center;
    background: url('../images/makes_christmas.png') center center no-repeat;
    background-size: contain;
}



@media (orientation: landscape ) and ( max-width: 1024px ) { /* ipad max is 1024 */
	#deviceOrientation {
		display: block;
    }
}

#promptRotateDevice {
	z-index: 11;
    position: absolute;
    top: 13vw;
    width: 75vw;
    height: 55vh;
    transform: translate(15%);
	background: url('../images/prompt_turn_device.png') center center no-repeat;
	background-size: contain;
}




.fadeOut { animation: fadeOut 0.3s linear forwards; }
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.fadeIn { animation: fadeIn 0.3s linear forwards; }
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeInTapRepeat { animation: fadeInTapRepeat 4s linear forwards; animation-iteration-count: infinite; animation-delay: 1s; }
@keyframes fadeInTapRepeat {
  0% { opacity: 0; transform: translateX( -50% ) scale(1.1); }
  25% { opacity: 1; transform: translateX( -50% ) scale(0.8); }
  37.5% { opacity: 1; transform: translateX( -50% ) scale(1); }
  50% { opacity: 0; transform: translateX( -50% ) scale(1); }
  100% { opacity: 0; transform: translateX( -50% ) scale(1); }
}

.moveHandRepeat { animation: moveHandRepeat 4s linear forwards; animation-iteration-count: infinite; animation-delay: 1s; }
@keyframes moveHandRepeat {
  0% { opacity: 0; transform: translateX(-130%); }
  10% { opacity: 1;}
  25% { opacity: 1; transform: translateX(20%); }
  50% { opacity: 1; transform: translateX(-130%); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-130%); }
}