:root {
  /* Colors */
  --clr-white: #efefef;
  --clr-black-alpha: rgba(0, 0, 0, 82%);
  --clr-red-alpha: rgba(75, 10, 10, 82%);
  --clr-correct: rgb(132, 195, 82);
  --clr-wrong: rgba(236, 52, 46, 0.8);
  --clr-focus: rgb(235, 168, 69);
  --clr-primary: #3b691c;
  --clr-primary-light: rgba(101, 168, 48, 0.8);
  --clr-secondary: rgb(86, 48, 29);
  --clr-secondary-light: #7a4626;
  --text-main: white;
  --text-inverse: black;
  --text-mute: #bebebe;
  --text-yellow: #ffff00;
  --menu-btn-color: #555;
  /* Typography */
  --fz-sm: 1.33rem;
  --fz-md: 2rem;
  --fz-lg: 3rem;
  /* Layouts */
  --header-height-mobile: 5vh;
  --header-height-desktop: calc(5vh + 2.5vw);
  --gap: 0.5rem;
  /* z-index */
  --z-overlay: 500;
  --z-menu-btn: 2000;
  --z-menu: 1500;
}

html {
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 112.5%;
}

@media (min-width: 700px) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 2000px) {
  html {
    font-size: 170%;
  }
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  height: 100%;
  margin: 0;
  font-family: 'VT323', monospace;
  color: var(--text-main);
}

/* ======================================
** Globals
** ==================================== */
h1,
h2,
h3,
p {
  margin: 0;
}

p,
span {
  font-size: var(--fz-md);
}

img {
  display: block;
  /* don't care if the image grows over its size because they are pixel graphics after all.  */
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  text-decoration: none;
}

td {
  font-size: var(--fz-md);
}

button {
  font: inherit;
  color: var(--clr-white);
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

button:hover {
  cursor: pointer;
}

/* ======================================
** Utilities
** ==================================== */
.hidden {
  display: none !important;
  opacity: 0;
}

.zero {
  font-family: 'Inconsolata', monospace;
}

.row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sr-only:not(:focus):not(:active) {
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
}

.mute {
  color: var(--text-mute);
}

.btn.btn-correct {
  outline: 2px solid var(--clr-correct);
  color: var(--clr-correct);
}

.btn.btn-wrong {
  outline: 2px solid var(--clr-wrong);
}

/* ======================================
** Layout
** ==================================== */
.app {
  height: 100%;
  overflow: hidden;
  background-image: url('../assets/images/bg.png');
  background-size: cover;
  background-position: 30%;
}

.app-container {
  position: relative;
  height: 100%;
  margin: auto;
}

@media (min-width: 700px) {
  .app-container {
    font-size: 150%;
    max-width: 600px;
  }
}

@media (min-width: 1200px) {
  .app-container {
    font-size: 150%;
    max-width: 700px;
  }
}

@media (min-width: 2000px) {
  .app-container {
    font-size: 170%;
    max-width: 1000px;
  }
}

.page {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 6vh 6vw;
}

@media (min-width: 700px) {
  .page {
    padding: 6vh 6vw;
  }
}

/* ======================================
** Components
** ==================================== */
.menu-btn {
  --size: 50px;
  --bar-height: calc(var(--size) / 10);
  --gap: calc(var(--bar-height) * 1.2);
  position: fixed;
  z-index: var(--z-menu-btn);
  top: 4vw;
  left: 4vw;
  width: var(--size);
  height: var(--size);
  padding: 10px;
}

.menu-btn span::before,
.menu-btn span::after {
  content: '';
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  display: block;
  height: var(--bar-height);
  width: 100%;
  background: var(--menu-btn-color);
}

.menu-btn span::before {
  --y: calc(-2 * var(--gap));
  -webkit-transform: translate3d(0, var(--y), 0);
  transform: translate3d(0, var(--y), 0);
}

.menu-btn span::after {
  -webkit-transform: translate3d(0, var(--gap), 0);
  transform: translate3d(0, var(--gap), 0);
}

.menu-btn:focus {
  outline: 2px solid var(--clr-focus);
}

.menu {
  position: absolute;
  z-index: var(--z-menu);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.menu .menu-content {
  -webkit-transform: translateY(-10%);
  transform: translateY(-10%);
  width: 90%;
  max-width: 800px;
}

.menu .menu-content .menu-title {
  text-align: center;
  padding: 1em;
}

.menu .menu-content .menu-buttons {
  display: -ms-grid;
  display: grid;
  gap: var(--gap);
}

.menu .menu-content .menu-buttons .btn {
  -ms-grid-column-align: center;
  justify-self: center;
  width: 100%;
  max-width: 400px;
}

.backdrop {
  /* Backdrop */
}

.backdrop:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* underneath overlay, but still on top of app background
      because this backdrop is nested inside overlay
      which has a higher stacking context than statically positioned .app element*/
  z-index: -1;
  background-color: var(--clr-black-alpha);
}

.backdrop.danger:before {
  background-color: var(--clr-red-alpha);
}

/* Modified from */
/* http://charliecowan.co.uk/mcbuttongenerator/ */
.btn {
  font-size: var(--fz-md);
  min-width: 40px;
  outline: 2px solid black;
  position: relative;
  margin: 0;
  display: inline-block;
  background-image: url('../assets/images/button-center.png');
  background-repeat: repeat;
  padding: 0 0.25em;
  text-align: center;
  text-shadow: 3px 3px #4c4c4c;
  border-bottom: 4px solid #565656;
  border-right: 2px solid #565656;
  border-left: 2px solid #aaa;
  border-top: 2px solid #aaa;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.1;
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.btn:hover,
.btn:active,
.btn:focus {
  outline: 2px solid var(--clr-white);
}

.speech-bubble {
  position: relative;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background-color: #fff;
  color: var(--text-inverse);
  border: 2px solid #333;
  border-radius: 12px;
  padding: 1em;
  --animate-duration: 350ms;
  -webkit-animation-timing-function: cubic-bezier(0, 0.8, 0.51, 1.21);
  animation-timing-function: cubic-bezier(0, 0.8, 0.51, 1.21);
}

.speech-bubble:before,
.speech-bubble:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
}

.speech-bubble:before {
  left: 10px;
  bottom: -17px;
  border: 8px solid;
  border-color: #333 transparent transparent #333;
}

.speech-bubble::after {
  left: 12px;
  bottom: -12px;
  border: 6px solid;
  border-color: #fff transparent transparent #fff;
}

/* ======================================
** Animation
** ==================================== */
.overlay-warning {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.flash-warning {
  -webkit-animation: warn 300ms linear;
  animation: warn 300ms linear;
}

@-webkit-keyframes warn {
  25% {
    background-color: rgba(75, 10, 10, 0.5);
  }
  50% {
    background-color: rgba(75, 10, 10, 0.3);
  }
  75% {
    background-color: rgba(75, 10, 10, 0.5);
  }
}

@keyframes warn {
  25% {
    background-color: rgba(75, 10, 10, 0.5);
  }
  50% {
    background-color: rgba(75, 10, 10, 0.3);
  }
  75% {
    background-color: rgba(75, 10, 10, 0.5);
  }
}

.app.parallax {
  background-size: 500%;
  background-repeat: no-repeat;
  -webkit-animation: move-bg 120s alternate infinite linear;
  animation: move-bg 120s alternate infinite linear;
}

@-webkit-keyframes move-bg {
  0% {
    background-position: 30% 70%;
  }
  40% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 50% 75%;
  }
  75% {
    background-position: 75% 0%;
  }
  100% {
    background-position: 0% 30%;
  }
}

@keyframes move-bg {
  0% {
    background-position: 30% 70%;
  }
  40% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 50% 75%;
  }
  75% {
    background-position: 75% 0%;
  }
  100% {
    background-position: 0% 30%;
  }
}

@media (min-width: 700px) {
  .app.parallax {
    background-size: 350%;
    background-repeat: no-repeat;
    -webkit-animation: move-bg-desktop 120s alternate infinite linear;
    animation: move-bg-desktop 120s alternate infinite linear;
  }
}

@media (min-width: 1200px) {
  .app.parallax {
    background-size: 200%;
    background-repeat: no-repeat;
    -webkit-animation: move-bg-desktop 120s alternate infinite linear;
    animation: move-bg-desktop 120s alternate infinite linear;
  }
}

@-webkit-keyframes move-bg-desktop {
  0% {
    background-position: 30% 70%;
  }
  25% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 75%;
  }
  75% {
    background-position: 75% 0%;
  }
  100% {
    background-position: 0% 30%;
  }
}

@keyframes move-bg-desktop {
  0% {
    background-position: 30% 70%;
  }
  25% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 75%;
  }
  75% {
    background-position: 75% 0%;
  }
  100% {
    background-position: 0% 30%;
  }
}

/* ======================================
** Partials
** ==================================== */
/* Start Screen */
.sc-start {
  height: 100%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  -ms-grid-rows: 1fr auto 30vh;
  grid-template-rows: 1fr auto 30vh;
}

.sc-start .title {
  max-height: 25vh;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 10px;
}

.sc-start .title__main {
  margin-top: 1.5rem;
  height: 80%;
  max-height: 140px;
  margin-bottom: 0.5em;
}

.sc-start .title__main img {
  height: 100%;
  -o-object-fit: fill;
  object-fit: fill;
}

.sc-start .title__sub {
  height: 5vh;
  width: 80%;
}

.sc-start .title__sub img {
  margin: auto;
}

.sc-start .dashboard {
  background: var(--clr-black-alpha);
  width: 80%;
  margin: 1.75em auto;
  padding: 1em;
}

.sc-start .dashboard tr td:last-of-type {
  text-align: right;
}

.sc-start .table-select {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  gap: 1rem;
  -ms-grid-rows: (1fr) [3];
  grid-template-rows: repeat(3, 1fr);
  -ms-grid-columns: (1fr) [4];
  grid-template-columns: repeat(4, 1fr);
}

.sc-start .table-select .select-shuffle {
  grid-column: 1 / -1;
}

/* Play Screen */
.sc-play {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sc-play .header {
  width: 100%;
  height: var(--header-height-mobile);
}

.sc-play .header .logo {
  width: 70%;
  min-width: 200px;
  margin: auto;
}

.sc-play .header .logo img {
  margin: auto;
}

@media (min-width: 1200px) {
  .sc-play .header {
    height: var(--header-height-desktop);
  }
}

.sc-play .question {
  /* You must specify (max-)height when grid area is defined with fr unit, 
    otherwise the area will grow as much as the size of the content*/
  height: 40vh;
  padding-top: 1rem;
  -ms-grid-row-align: center;
  align-self: center;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2vw 1fr;
  grid-template-columns: 1fr 2vw 1fr;
  -ms-grid-rows: 0.2fr 1fr 1fr;
  grid-template-rows: 0.2fr 1fr 1fr;
}

.sc-play .question .mob {
  z-index: 50;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2 / 4;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
}

.sc-play .question .mob img {
  width: 100%;
  height: 100%;
  -o-object-position: bottom left;
  object-position: bottom left;
}

.sc-play .question .mob-sm {
  height: 50%;
  width: 50%;
}

.sc-play .question .mob-md {
  height: 70%;
  width: 70%;
}

.sc-play .question .mob-lg {
  height: 100%;
  width: 100%;
}

.sc-play .question .mob-xl {
  height: 180%;
  width: 180%;
  position: relative;
}

.sc-play .question .speech-bubble {
  z-index: 100;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sc-play .hud {
  width: 100%;
  z-index: 200;
  --heart-size: 32px;
  display: -ms-grid;
  display: grid;
  gap: calc(var(--heart-size) * 0.3);
  -ms-grid-columns: auto 100px;
  grid-template-columns: auto 100px;
  grid-template-areas: 'life time' 'progress progress';
}

.sc-play .hud__life {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: life;
  -ms-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end;
}

.sc-play .hud__life .heart {
  height: var(--heart-size);
  width: var(--heart-size);
}

.sc-play .hud__time {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: time;
  justify-self: end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sc-play .hud__time .hourglass {
  /* 
        When img is globally set with max-height&width of 100%
        it prevents img from growing over it's original size.
        If you specify both the  width and height of the container and
        the aspect ratio doesn't exactly match the image's,
        you will end up with some extra space either:
        1. to the right of the image (image's narrower than the container)
        2. to the bottom of the image (image's shorter than the container)                      
        */
  width: var(--heart-size);
}

.sc-play .hud__progress {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: progress;
  width: 100%;
  max-width: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sc-play .hud__progress .exp {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  max-height: 15px;
}

.sc-play .hud__progress .exp img {
  -o-object-fit: fill;
  object-fit: fill;
}

.sc-play .answer-buttons {
  z-index: 250;
  width: 100%;
  height: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.sc-play .answer-buttons .btn {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 40%;
  flex: 1 1 40%;
  margin: calc(min(0.5rem, 2vw));
}

/* Results Overlay */
.overlay {
  position: absolute;
  z-index: var(--z-overlay);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-left: 8vw;
  padding-right: 8vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.overlay .overlay-content {
  width: 100%;
  max-width: 400px;
  height: 100%;
  max-height: 1500px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (min-width: 700px) {
  .overlay .overlay-content {
    max-height: 800px;
  }
}

@media (min-width: 1200px) {
  .overlay .overlay-content {
    max-width: 450px;
    max-height: 900px;
  }
}

@media (min-width: 2000px) {
  .overlay .overlay-content {
    max-width: 500px;
    max-height: 1000px;
  }
}

.overlay .overlay-content .results--score header {
  position: relative;
}

.overlay .overlay-content .results--score header .levelup-img {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.overlay .overlay-content .results--score .table-wrapper table {
  display: inline-block;
  width: 100%;
  height: 80%;
  max-height: 20em;
}

.overlay .overlay-content .results--score .table-wrapper table tbody {
  display: inline-block;
  width: 100%;
}

.overlay .overlay-content .results--score .table-wrapper table tbody tr {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.overlay .overlay-content .results--score .table-wrapper table td,
.overlay .overlay-content .results--score .table-wrapper table span {
  font-size: var(--fz-sm);
}

.overlay .overlay-content .results--score .table-wrapper table td {
  padding: 0.5 0;
}

.overlay
  .overlay-content
  .results--score
  .table-wrapper
  table
  .results--score__total
  td,
.overlay
  .overlay-content
  .results--score
  .table-wrapper
  table
  .results--score__total
  span {
  font-size: var(--fz-lg);
}

.overlay
  .overlay-content
  .results--score
  .table-wrapper
  table
  tr
  td:last-child {
  text-align: right;
}

.overlay .overlay-content .results--died {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 50%;
}

.overlay .overlay-content .results--died .message {
  text-align: center;
}

.overlay .overlay-content .results--died h2 {
  font-size: var(--fz-lg);
}

.overlay .overlay-content .results--died p,
.overlay .overlay-content .results--died span {
  font-size: var(--fz-sm);
}

.overlay .overlay-content .results--died span {
  color: var(--text-yellow);
}

.overlay .overlay-content .results__buttons {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay .overlay-content .results__buttons button:not(:last-of-type) {
  margin-bottom: 0.5em;
}
/*# sourceMappingURL=index.css.map */