@import url("https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap");

@-webkit-keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes zoom-in {
  0% {
    transform: scale3d(0, 0, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes zoom-in {
  0% {
    transform: scale3d(0, 0, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes zoom-in-out {
  0% {
    transform: scale3d(0, 0, 1);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  100% {
    transform: scale3d(2, 2, 1);
    opacity: 0;
  }
}

@keyframes zoom-in-out {
  0% {
    transform: scale3d(0, 0, 1);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  100% {
    transform: scale3d(2, 2, 1);
    opacity: 0;
  }
}

@-webkit-keyframes pulse-size {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse-size {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

* {
  box-sizing: border-box;
  font-display: swap;
}

html {
  height: 100%;
  background: #e2dbd3;
}

body {
  height: 100%;
  max-height: 75vw;
  font-family: "Poppins", sans-serif;
  font-display: swap;
  color: #4a4c4b;
  font-size: 30%;
  position: relative;
}

#game-container--outer {
  height: 100%;
  background-image: url("../img/gameassets2/yellow\ bg@3x.svg");
  background-position: center;
  background-size: 100% 100%;
  padding: 2em;
}

#game-container {
  height: 100%;
  background-image: url("../img/gameassets2/prompt_background@3x.svg");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.title-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #332831;
}

.game-over-screen {
  background: #6ca79e;
  background-image: url("../img/gameassets/background_lost@1x.jpg");
  background-size: 100% 100%;
}

.game-start-screen {
  background: #efb100;
  background-image: url("../img/gameassets2/background_intro@3x.svg");
  background-size: 100% 100%;
}

.game-start-screen h2 {
  text-transform: none;
  text-align: center;
  margin-top: 10em;
  max-width: 90%;
}

.round-over-screen {
  background: #efb100;
  background-image: url("../img/gameassets2/background_win1@3x.svg");
  background-size: 100% 100%;
}

/* .round-over-screen .round-complete-flags {
  animation: zoom-in 0.3s;
  animation-delay: 0.5s;
} */

.game-won-screen {
  background: #9ab442;
  background-image: url("../img/gameassets2/background_win2@3x.svg");
  background-size: 100% 100%;
  color: #151515;
}

.final-score {
  background: #151515;
  color: white;
  font-size: 1.5em;
  padding: 0.3em 0.5em;
  margin: 0 0.3em;
  border-radius: 0.3em;
}

.final-score span {
  display: inline-block;
}

.title-screen h2 {
  font-size: 2.5em;
}

.title-screen h3 {
  margin: 0;
  font-size: 2em;
}

.title-screen h4 {
  font-size: 4em;
  text-align: center;
  max-width: 90%;
  text-shadow: -2px 2px white;
  margin: 0.5em auto;
}

.round-complete-flags {
  background: url("../img/gameassets2/background_win_flag-yellow@3x.svg");
  padding: 0.5em;
  background-size: 100% 100%;
}

.round-complete-flags .flag-icon {
  background: none !important;
  position: static;
  height: auto;
}

.uppercase {
  text-transform: uppercase;
}

.question-screen {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.question-screen--title {
  text-align: center;
  max-height: 26%;
}

.title--inner {
  padding: 1em 4em;
}

.question-screen--title h3 {
  font-size: 1.5em;
  font-weight: normal;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: scale3d(0, 0, 1);
  margin: 0.5em 0;
}

.question-screen--title h2 {
  margin: 0;
  font-size: 2em;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: scale3d(0, 0, 1);
}

.full-height {
  height: 100%;
}

.question-screen--content {
  position: relative;
  display: flex;
  padding-top: 2em;
  padding-bottom: 4em;
  flex: 1;
  max-height: 73%;
}

.top-bar {
  padding-bottom: 4px;
  display: flex;
  width: 100%;
  background: #efb100;
}

.flags-container {
  flex: 1;
  position: relative;
  margin-top: -2.5em;
  white-space: nowrap;
}

.score-container {
  margin-left: 1em;
}

.flag-icon {
  display: inline-block;
  padding: 0.7em;
  width: 3.5em;
  height: 5em;
  position: relative;
  bottom: -2em;
}

.flag-icon img {
  width: 100%;
  border-radius: 2px;
}

.flag-icon.is-active {
  /* background: #ded6ce; */
  background-image: url("../img/gameassets2/flag_background_tab@3x.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.lives-container,
.score-container {
  font-weight: bold;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  height: 1em;
}

.score-box {
  display: inline-block;
  border-radius: 0.5em;
  width: 4em;
  background: rgb(45, 45, 45);
  font-weight: bold;
  text-align: center;
  padding: 0.3em;
  color: white;
  transition: all 0.5s;
  transform: scale(1, 1);
  background-image: url("../img/gameassets2/score_bg@3x.svg");
  background-size: 100% 100%;
}

.score-box.incrementing {
  transform: scale(1.4, 1.4);
  color: #9ab442;
}

.points-feedback {
  opacity: 0;
  transform: scale3d(0, 0, 0);
  transition: opacity 0.4s ease-in-out, transform 0.4s linear;
  position: absolute;
  color: #9ab442;
  font-size: 6em;
  font-weight: bold;
  pointer-events: none;
  z-index: 10;
  text-shadow: 0 0 20px rgba(246, 255, 228, 0.8);
  display: flex;
  /* background: #cfde9e; */
  border-radius: 1em;
  padding: 0.3em;
}

.minus-lives-feedback {
  -webkit-animation: zoom-in-out 0.8s linear;
  animation: zoom-in-out 0.8s linear;
  opacity: 0;
  position: absolute;
  color: #c03f3d;
  font-size: 6em;
  font-weight: bold;
  pointer-events: none;
  z-index: 10;
  text-shadow: 0 0 20px #f7d1d0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #ffffff; */
  border-radius: 1em;
  height: 1em;
  padding: 0.3em;
}

.minus-lives-feedback img {
  width: 1em;
}

.lives-container,
.score-container h3 {
  margin: 0;
  margin-right: 0.5em;
}

.life-indicator {
  margin-left: 5px;
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  top: 1px;
  transition: all 0.4s;
}

.life-indicator.pulse {
  font-size: 1.5em;
}

.life-indicator--full {
  background-image: url("../img/gameassets2/life_full@3x.svg");
}

.life-indicator--half {
  background-image: url("../img/gameassets2/life_half@3x.svg");
}

.life-indicator--empty {
  background-image: url("../img/gameassets2/life_empty@3x.svg");
}

.question-screen--image {
  background-image: url("../img/gameassets2/image_background@3x.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  width: 45%;
  padding: 2em;
  margin-left: 2em;
  margin-right: 4em;
  transition: all 0.2s;
}

.question-screen--image.has-explanation img {
  height: 5em;
}

.question-screen--explanation {
  font-size: 2em;
  width: 100%;
  max-height: 60%;
  margin-top: 1em;
}

.question-screen--explanation span {
  display: block;
  padding-bottom: 1em;
}

.question-screen--answers {
  padding: 2em;
  padding-top: 0;
  padding-right: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
}

.question-screen--image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: 100%;
  transition: all 0.2s;
  -o-object-fit: contain;
  object-fit: contain;
}

.question-screen--button-wrapper {
  text-align: left;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}

.btn--round {
  background: #2a2928;
  color: white;
  font-size: 2em;
  height: 2.6em;
  border-radius: 1.3em;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  padding: 0.5em 2em;
  letter-spacing: 0.1em;
}

.btn--restart {
  margin-top: 1em;
  /* animation: pulse 1s infinite; */
}

.btn--continue {
  font-weight: bold;
  padding-right: 0.5em;
  padding-left: 1.2em;
  border-right: 1.8em solid #0a0a0a;
  display: flex;
  align-items: center;
}

.btn--next-question {
  position: absolute;
  right: 1.2em;
  bottom: 1.2em;
}

.btn--continue:after {
  content: "▶";
  display: flex;
  align-items: center;
  position: absolute;
  right: -1.3em;
  top: 1px;
  height: 100%;
}

.blurred {
  -webkit-filter: blur(30px);
  filter: blur(30px);
  opacity: 0.5;
}

.btn--answer {
  color: #4a4c4b;
  padding: 0.5em;
  padding-left: 2.5em;
  text-align: left;
  font-size: 1.5em;
  width: 100%;
  flex: 1;
  cursor: pointer;
  border: 3px solid transparent;
  background: transparent;
  position: relative;
  transition: all 0.2s;
  transform: scale3d(1, 1, 1);
}

.btn--answer:hover {
  transform: scale3d(1.1, 1.1, 1) !important;
}

.btn--answer:active {
  transform: scale3d(0.9, 0.9, 1) !important;
}

.btn--hidden {
  transform: scale3d(0, 0, 1);
}

.zoom-in {
  -webkit-animation: zoom-in 0.5s;
  animation: zoom-in 0.5s;
}

.pulse {
  -webkit-animation: pulse 1s infinite;
  animation: pulse 1s infinite;
}

.pulse:active {
  transform: scale3d(0.9, 0.9, 1);
  -webkit-animation: none 1s infinite;
  animation: none 1s infinite;
}

.btn--answer.correct:before {
  content: "";
  width: 100%;
  height: 110%;
  top: -5%;
  left: 0%;
  position: absolute;
  background-image: url("../img/gameassets2/answerhighlight_1.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.btn--answer.correct.variation-2:before {
  background-image: url("../img/gameassets2/answerhighlight_2.svg");
}

.btn--answer.correct.variation-3:before {
  background-image: url("../img/gameassets2/answerhighlight_3.svg");
}

.bullet {
  position: absolute;
  display: block;
  left: 1em;
  content: "";
  width: 1em;
  height: 1em;
  background-image: url("../img/gameassets2/bullet_default@3x.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.btn--answer:disabled {
  color: unset;
  opacity: 0.7;
  cursor: not-allowed;
  transform: scale3d(1, 1, 1) !important;
}

.btn--answer.correct .bullet {
  background-image: url("../img/gameassets2/bullet_correct@3x.svg");
}

.btn--answer.incorrect .bullet {
  background-image: url("../img/gameassets2/bullet_incorrect@3x.svg");
}

.btn--answer.correct:disabled {
  color: rgb(112, 122, 55);
  opacity: 1;
  /* transform: scale3d(1.1, 1.1, 1); */
}

.btn--answer.incorrect:disabled {
  color: #c03f3d;
  opacity: 1;
}

.btn--answer.incorrect {
  color: #c03f3d;
}

.message {
  pointer-events: none;
  position: absolute;
  left: 0.5em;
  bottom: 1em;
  background-size: 100%;
  background-repeat: no-repeat;
  color: white;
  font-size: 2em;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 0 0 15px rgba(29, 14, 14, 0.3);
  transition: all 0.2s;
  opacity: 0;
  transform: translate3d(-120%, 0, 0);
}

.message.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.message span {
  position: relative;
  left: 3.5em;
  bottom: 0.6em;
  z-index: 2;
  font-size: 1em;
}

.message img {
  z-index: 1;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: 0;
}

/*  --------------------------------------------------  */

.simplebar-content {
  height: 100%;
}

.question-screen--answers .simplebar-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.simplebar-scrollbar::before {
  background-color: #4a4c4b;
}

/* =============== */

.shimmer {
  text-align: center;
  color: rgba(255, 255, 255, 0.1);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#222),
    to(#222),
    color-stop(0.5, #fff)
  );
  background: -moz-gradient(
    linear,
    left top,
    right top,
    from(#222),
    to(#222),
    color-stop(0.5, #fff)
  );
  background: gradient(
    linear,
    left top,
    right top,
    from(#222),
    to(#222),
    color-stop(0.5, #fff)
  );
  background-size: 125px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #222;
}
@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}

/* --------------------------- */

@media only screen and (min-width: 300px) {
  body {
    font-size: 40%;
  }
}

@media only screen and (min-width: 350px) {
  body {
    font-size: 45%;
  }
}

@media only screen and (max-width: 620px) {
  .score-container {
    font-size: 1.1em;
    /* position: absolute;
    top: 4em;
    right: 2em; */
  }
  .lives-container {
    font-size: 1.1em;
    /* position: absolute;
    top: 2em;
    right: 2em; */
  }
}

@media only screen and (min-width: 540px) {
  body {
    font-size: 50%;
  }
  .title-screen h2 {
    font-size: 3em;
  }
  .question-screen--image {
    width: 55%;
    padding: 3em;
  }
  #game-container--outer {
    padding: 3em;
  }
}

@media only screen and (min-width: 800px) {
  body {
    font-size: 60%;
  }
}

@media only screen and (min-width: 900px) {
  body {
    font-size: 70%;
  }
}

@media only screen and (min-width: 1000px) {
  body {
    font-size: 80%;
  }
}

@media only screen and (min-width: 1200px) {
  body {
    font-size: 90%;
  }
}