html, body { 
	/* height: 100%; overflow: hidden;*/
	height:auto; overflow:auto;
}
body {font-family: 'Lato', sans-serif;background:#000;color:#fff; padding-top:.5rem;}
 a.Skip, .PauseRewind {position:absolute; bottom:10px; right:10px;}
#GameContainer {position:relative; overflow:visible; display: flex; justify-content: center }
#ReplyContainer {position:absolute; width:80%; bottom:0; left:2%;}
.TimerContainer {margin-top:1rem;}
#FaceContainer {display: flex;align-items: start; max-height: 80vh;width: 100%;height:auto; justify-content: space-between; position:relative;}
#KatanaContainer {display:block; width: 15%; position:relative; height: auto; max-width: 14.1vh; aspect-ratio:15/85}
#Face { display:block; position:relative; overflow: hidden; background-image:linear-gradient(#3FA2E6, #122F3F 65%); width: 85%;height:auto; max-width: 80vh;  aspect-ratio: 1 / 1;} /* Face bg neutral */
#Face.Happy {background-image:linear-gradient(#7ECA3C, #243F02 65%)}
#Face.Mad {background-image:linear-gradient(#E7414C, #3F000B 65%)}

.SpeechBubble { position: relative; border-radius:1rem; padding:.5rem; color:#000; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
.SpeechBubble.Comment {background:#9C5DBF;color:#fff; margin-bottom:1em; padding-left:3em;}
.SpeechBubble.Hiya, .SpeechBubble.Reply  {background:#d9d9d9; }
.SpeechBubble.Reply, .SpeechBubble.Thought {margin-bottom: 1.5em;}
.SpeechBubble.Reply h4, .SpeechBubble.Thought h4 {line-height:1; font-weight:400; letter-spacing:-0.05em;}

.Game {}
.Game .SpeechBubble.Reply:hover {background:#fff; cursor:pointer; }
.Game .SpeechBubble.Reply:active {background:#ED8333;}
.SpeechBubble.Gambit {;margin:.5rem 1rem; background:#D9D9D9}
.SpeechBubble.Gambit h4 {line-height:1; font-weight:400; }
.SpeechBubble.Gambit:after, .SpeechBubble.Reply:after, .SpeechBubble.Hiya:after {content: ''; position: absolute; display: block; width: 0; z-index: 1; border-style: solid; }
.SpeechBubble.Gambit:after {border-width:2rem 2rem 0 0;  bottom: -2rem; left: 25%;border-color:#D9D9D9 transparent transparent transparent;}
.SpeechBubble.Reply:after {border-width:1rem 1rem 0 0 ; border-color:#d9d9d9 transparent transparent transparent ;bottom: -1rem; left: 25%;}
.SpeechBubble.Hiya:after {border-width:0 0 1rem 2rem ; border-color:transparent transparent #d9d9d9  transparent;left: -2rem; top:35%;}

.Game .SpeechBubble.Reply:hover:after {border-color:#fff transparent transparent transparent}
.Game .SpeechBubble.Reply:active:after {border-color:#ED8333 transparent transparent transparent;}
.Review {height:80vh; background-image:url('../img/MMC_logo_fade.svg'); background-repeat:no-repeat; background-position:center center; object-fit: contain;}
.Review h1, .Review h2, .Review h3, .Review h4, .Review h5, .Review h6 {margin-bottom:1rem;}
.Review .SpeechBubble.Gambit {background:#3FA2E6;margin-bottom:3em;}
.Review .SpeechBubble.Gambit:after {border-width: 2rem 1rem 0 0; border-color:#3FA2E6 transparent transparent transparent; bottom: -2rem; left: 25%;}
/*.Review .SpeechBubble.Comment:after {border-width: 2rem 1rem 0 0; border-color: #9C5DBF transparent transparent transparent;bottom: -2rem; left: 25%;}*/

.SpeechBubbleAvatar {position:absolute; bottom:-1.5em; height:2em; left:0; width:22%; z-index:3; background-image:url(../img/avatars/avatar_blue_face.svg); background-size:auto 100%; background-position:bottom right; background-repeat:no-repeat;}
.SpeechBubbleAvatar.red {background-image:url(../img/avatars/avatar_red_face.svg);}
.SpeechBubbleAvatar.blue {background-image:url(../img/avatars/avatar_blue_face.svg);}
.SpeechBubbleAvatar.green {background-image:url(../img/avatars/avatar_green_face.svg);}
.SpeechBubbleAvatar.Irshad {bottom:auto; top:0; background-position:top left; background-image:url("../img/Irshad_face.svg");}

.ScoreBox { position: relative;width:100%; height:100%; }
.ScoreBox svg {box-shadow: 2px 2px 4px #000000;}
.ScoreBox .Gauge { position: relative; width: 100%;height: 0; padding-bottom: 100%; background:url("../img/Score_gauge.svg"); background-repeat:no-repeat; background-position: center top; background-size: contain }
.ScoreBox .Needle, #Needle { position: absolute; left:48%; top: 4%; width: 4%; height: 20%; background:url("../img/Score_needle.svg"); background-repeat:no-repeat; background-position: center top; background-size: 100% auto; transform-origin: 50% 330%; transform: rotate(0deg); }
.ScoreNumber {color:#9C5DBF; display:block; position:absolute; top:50%; right:.5em;transform: translateY(-50%);}
#ScoreInt {padding:.5rem; border:solid 3px #9C5DBF;background-color:rgba(255,255,255,0.7);}
.Katana { position: absolute;  top:1%; right:1%; bottom:1%;  height: 98%; --greyheight: 50%; /* Initial height of grey portion */}
.Katana img {height:100%; display:block;}
.Katana::after { content: '';  position: absolute; top: 0; left: 0; width: 100%; height:var(--greyheight); /*Initial height of grey portion */ background: rgba(255, 255, 255, 1);  mix-blend-mode: saturation;}

.Countdownbox {background:#fff; height:1rem; position:relative; margin-bottom:2em;}
.Countdownbox.Hidden {background-color:transparent}
.Breathe {position:absolute; top:-1em; border-radius:.5em; left:20%; background:#9C5DBF;color:#fff;border:solid .25em #000; padding:.5em .5em 0 .5em;z-index:5; cursor:pointer; display:none;}
.Breathe h4 {line-height:1;}
.Radius {border-radius: .5rem; }
.Loading {  background-image: repeating-linear-gradient(-45deg, transparent,  transparent 1rem, #ccc 1rem, #ccc 2rem);background-size: 200.8% 200.8%;animation: barberpole 10s linear infinite;}
@keyframes barberpole { 100% { background-position: -100% 100%; }}

#Face div.Faceparts {position:absolute; top:0; left:0; height:100%; width:100%; background-position: 50% 50%; background-repeat: no-repeat; background-size:contain; }
#Face div.Faceparts.Veil {background:rgba(0,0,0,.5);display:none; }
#Face div.Faceparts.EyesClosed {animation: BlinkEyes 3s infinite }



@keyframes subtleMoveAndRotate {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(2px, 4px) rotate(-.35deg); }
  50% {  transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(-2px, 4px) rotate(.35deg); }
}
.FaceMeta {position:absolute; width:100%; height:100%;
 	transform-origin: 50% 100%; /* Bottom center of the element */
 	animation: subtleMoveAndRotate 7s infinite ease-in-out;
}

@keyframes BlinkEyes {
    0%, 93%, 100% { visibility: hidden;  }
    94%, 99% { visibility: visible;}
}

@keyframes NodHead {
	0%, 100% {top: 0;}
	50% { top: .5%;}
}		  

		  





#Timer {  height: 100%; width: 100%;  }
.StandardTimer  {background:#7f7f7f; animation-name: TimerAnimation; animation-timing-function: linear; }
.BreatheTimer	{background:#7f7f7f; animation: BreatheAnimation; animation-timing-function: linear;animation-duration: 10s;}
.SuddenDeathTimer {background:#E7414C; animation-name: SuddenDeathAnimation linear;animation-duration: 10s;}

.NinjaStandardTimer  {animation-name: NinjaTimerAnimation; animation-timing-function: linear;}
.NinjaBreatheTimer	{animation-name: NinjaBreatheAnimation; animation-timing-function: linear;animation-duration: 10s;}
.NinjaSuddenDeathTimer {animation-name: NinjaSuddenDeathAnimation; animation-timing-function: linear;animation-duration: 10s;}


#RunningNinja {position:absolute; right:0%; top:-1.5rem; height:3rem; width:2.7rem; background-repeat:no-repeat; background-size:contain; background-position: center center;animation-duration:  10s;}
#RunningNinja.RunningNinjablue {background-image:url('../img/ninja_blue_running.webp');}
#RunningNinja.RunningNinjagreen {background-image:url('../img/ninja_green_running.webp');}
#RunningNinja.RunningNinjared {background-image:url('../img/ninja_red_running.webp');}
@keyframes TimerAnimation {
	from {width:100%;}
	to {width:0%;}
}
@keyframes BreatheAnimation {
	from {width:100%;}
	to {width:0%;}
}
@keyframes SuddenDeathAnimation {
	from {width:100%;}
	to {width:0%;}
}
@keyframes NinjaTimerAnimation {
	from {right:0%;}
	to {right:100%;}
}
@keyframes NinjaBreatheAnimation {
	from {right:0%;}
	to {right:100%;}
}
@keyframes NinjaSuddenDeathAnimation {
	from {right:0%;}
	to {right:100%;}
}


.MobileFaceparts {width:100%; height:100%; position:absolute;}	  
/*#Face {height:30em;}*/

/*  Small styles */

@media print, screen and (max-width: 39.99875em) {
.reveal {top: 100px; right: inherit; bottom: inherit; left: inherit; width: 80%;max-width:50em;height: auto; min-height: inherit; margin-left: auto; border: 0; border-radius: .5em;}
	/*.Katana {width:auto;}*/
	/*#Face {height:40vh;}*/
	.SpeechBubble.Reply h4
}

/* Medium styles */
@media print, screen and (min-width: 40em) {
	/*#Face { height:30em; }*/
	/*.Katana {width:4.95em;}*/
  }
/* Large styles */
@media print, screen and (min-width: 64em) {
.SpeechBubble.Reply:after {border-width:2rem 1rem 0 0 ; bottom: -2rem; }
.SpeechBubbleAvatar {position:absolute; bottom:-3em; height:3.5em; left:0; width:22%;}
.SpeechBubble.Reply, .SpeechBubble.Thought {margin-bottom: 3em;}
  }
  
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Roboto Condensed", sans-serif; font-weight:700; margin-bottom:0;}
#Overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;}

.StoryContainer { position: relative;}
.StoryBG { position: absolute; top: 0;left: 0; width: 100%;  height: 100%;  z-index: -1; }
.StoryBG img {opacity: 1;}
.FadeTextContainer {position: relative; z-index: 1;}

.IntroText .LogoBigContainer {height:80vh;}
.IntroText img.LogoBig {cursor:pointer;width: 100%; height: 100%; object-fit: contain;}
.Avatar {aspect-ratio: 1 / 1; margin-bottom:2rem; background-repeat:no-repeat; background-position: center center; background-size: contain;}
#red.Avatar {background-image:url("../img/avatars/avatar_red.svg")}
#green.Avatar {background-image:url("../img/avatars/avatar_green.svg")}
#blue.Avatar {background-image:url("../img/avatars/avatar_blue.svg")}
#red.Avatar:hover {background-image:url("../img/avatars/avatar_red_over.svg")}
#green.Avatar:hover {background-image:url("../img/avatars/avatar_green_over.svg")}
#blue.Avatar:hover {background-image:url("../img/avatars/avatar_blue_over.svg")}
#red.Avatar.Hiya {background-image:url("../img/avatars/avatar_red_hiya.svg")}
#green.Avatar.Hiya {background-image:url("../img/avatars/avatar_green_hiya.svg")}
#blue.Avatar.Hiya {background-image:url("../img/avatars/avatar_blue_hiya.svg")}


.ChooseYourOther .card .card-section, .ChooseYourOther .card .card-divider  {background:#D9D9D9}
.ChooseYourOther h2 {margin:1.5rem auto .5rem auto;}
.ChooseYourOther h5 {line-height:1.2;}
.ChooseYourOther .card-section, .ChooseYourOther .card-divider {padding:.5rem;}
.ChooseYourOther a.NotThisOne {cursor:default; filter: grayscale(100%);opacity: 0.7;  pointer-events: none;} 

.reveal {background:#D9D9D9;color:#231F20;border:0; width:80%; max-width:50em; overflow-y:visible;}
.reveal-overlay { background-color: rgba(10, 10, 10, 0.8);}
.reveal>.IrshadFace {content: ''; position: absolute; display: block;  width:25%; bottom:-6em; left:0; height:60%; background-image:url("../img/Irshad_face.svg"); background-repeat:no-repeat; background-position:center center;}
.reveal:after {content: ''; position: absolute; display: block; width: 0; z-index: 1; border-style: solid; border-width: 2rem 1rem 0 0; border-color: #d9d9d9 transparent transparent transparent;bottom: -2rem; left: 25%;}

.button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover, .button.success.disabled:focus, .button.success[disabled]:focus {
  background-color: #7ECA3C; color: #0a0a0a; font-weight:bold;}
.button.success:hover, .button.success:focus { background-color: #70b336; color: #0a0a0a;}

.button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover, .button.alert.disabled:focus, .button.alert[disabled]:focus {
  background-color: #E7414C; color: #fefefe; font-weight:bold;}
.button.alert:hover, .button.alert:focus { background-color: #d43b45; color: #fefefe;}

.button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus, .button.secondary[disabled]:focus {
  background-color: #07A4B3; color: #fefefe; font-weight:bold;}
.button.secondary:hover, .button.secondary:focus { background-color: #068e9b; color: #fefefe;}


.lottie-container-Balloons, .lottie-container-Streamers { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;  align-items: center;  overflow: hidden;}


.Ellipsis1 {animation: EllipsisAnim1 1s linear infinite}
@keyframes EllipsisAnim1 { 0% {opacity: 1;} 65% {opacity: 1;} 66% {opacity: 0;} 100% {opacity: 0;}}
.Ellipsis2 {animation: EllipsisAnim2 1s linear infinite}
@keyframes EllipsisAnim2 { 0% { opacity: 0;}21% { opacity: 0;}22% { opacity: 1;} 65% { opacity: 1; }66% { opacity: 0;} 100% { opacity: 0;}}
.Ellipsis3 { animation: EllipsisAnim3 1s linear infinite;}
@keyframes EllipsisAnim3 { 0% { opacity: 0;} 43% { opacity: 0;} 44% { opacity: 1;}65% { opacity: 1;} 66% { opacity: 0;} 100% { opacity: 0;}}