:root {
  --sprite-left-transition: 80ms; /* Will be updated by .js */
  --app-scale: 1;
}

body {
  margin: 0;
  font-family: Tahoma;
  background-color: rgb(33, 33, 33);
  color: rgb(238, 238, 238);
  display: flex;
  justify-content: center;
  padding-top: 16px;
  overflow-x: hidden;
}
.main-cntr {
  background-color: rgba(255,255,255,0.1);
  padding: 16px;
  border-radius: 8px;
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  transform: scale(var(--app-scale));
  transform-origin: top left;
}
h1 {
  font-family: 'Jersey 10', sans-serif;
  text-align: center;
  margin: 16px;
  font-size: 22px;
  font-weight: 100;
  letter-spacing: 2px;
  word-spacing: 8px;
}
.game-cntr {
  background-color: rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}  
.flip {
  transform: scaleX(-1);
}
.row {
  display: flex;
}
.grid {
  display: flex;
  flex-direction: column;
}
.overlay {
  position: absolute;
  /* z-index: 2; */
}
.forground {
  z-index: 1;
}

/* Walls */
.walls {
  display: flex;
  justify-content: space-between;
}
.align-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Button Container Row */
.btn-cntr {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 4px;
}
.btn-cntr.mobile {
  display: none;
}
.btn-cntr sprite {
  cursor: pointer;
}
.btn-cntr sprite.pressed {
  opacity: 0.5;
}

/* Sparkles */
.sparkle svg rect {
  transition: fill 1s !important;
}

/* Main Character Sprite */
.mainChar {
  display: none;
}
sprite {
  left: 0px;
  top: 0px;
  transition: left var(--sprite-left-transition);
}
sprite svg {
  position: relative;
  display: block; /* block keeps a small gap below the svg away */
}
sprite svg rect {
  transition: fill .200s;
}
@keyframes sprite-bounce-up {
  0% { top: 0; }
  30% { top: -2px; }
  100% { top: 0; }
}
.bounce-up {
  animation: sprite-bounce-up 0.5s cubic-bezier(.5,-0.5,.5,1.5);
}

/* Character Selection */
.char-select-cntr {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
.flower-cntr {
  display: flex;
  align-items: flex-end;
  padding: 8px 0px 8px 18px;

}
.flower-cntr.right {
  padding: 8px 18px 8px 0px;
}
.sprite-cntr {
  background-color: rgba(255,255,255,0.1);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  border: 3px solid transparent;
}
.sprite-cntr.active {
  border: 3px solid gold;
}
.sprite-cntr:hover {
  background-color: rgba(255,255,255,0.2);
  transition: background-color .3s;
}

/* ===================== Mobile ===================== */
@media (max-width: 600px) {
  body {
    padding-top: 0;
    background-color: rgb(50,50,50);
    justify-content: flex-start;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .main-cntr {
    border-radius: 0;
    background-color: rgba(0,0,0,0);
  }
  .btn-cntr.desktop {
    display: none;
  }
  .btn-cntr.mobile {
    display: flex;
    padding-top: 64px;
    padding-bottom: 48px;
    gap: 16px;
  }
}