@font-face {
  font-family: game-font;
  src: url('font/main-font.ttf') format('truetype');
}
* {
  box-sizing: border-box;
  user-select: none;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 4vh;
  font-family: 'game-font';
  background: url('images/game-bg.jpg') no-repeat center;
  background-size: cover;
}
body * {
  font-family: game-font;
}
.game-container-wrapper {
  width: 100%;
  max-width: 420px;
}
.game-container-inner {
  padding-top: 180%;
  height: 0;
  position: relative;
}
.fill-abs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.congrate {
  pointer-events: none;
  transform: scale(1.5);
  opacity: 0;
  max-width: 90%;
  transition: all 0.2s ease;
  position: relative;
  z-index: 9;
}
.congrate.show {
  transform: scale(1);
  opacity: 1;
}
.bg-cover {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
#game-container {
  position: relative;
  width: 800px;
  height: 800px;
  overflow: hidden;
  border-radius: 10px;
}
#game-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12%;
}
.fill-abs2 {
  width: 100% !important;
  margin-left: 0 !important;
}
.game-screen {
  display: none;
}
.game-pane-holder {
  width: 96%;
  padding-top: 96%;
  position: relative;
}
.full-width .game-pane-holder {
  width: 75%;
  padding-top: 75%;
  margin-top: 10%;
}
#game-pane {
  display: flex;
  flex-wrap: wrap;
}
.game-cell {
  width: 14.285%;
  height: 14.285%;
  border: 0.1vw solid #67B641;
}
.game-cell:nth-child(2n) {
  background: url(images/cell-1.png) no-repeat center;
  background-size: cover;
}
.game-cell:nth-child(2n + 1) {
  background: url(images/cell-2.png) no-repeat center;
  background-size: cover;
}
.game-cell:not(.inactive) {
  cursor: pointer;
  background: linear-gradient(to bottom, #25731F 0%, #25962E 7%, #36AF2C 25%);
}
.item-f .game-cell:not(.inactive):hover,
.item-fly .item.in-cell:hover,
.item-shovel .item.in-cell:hover {
  box-shadow: inset 0 0 5px 2px rgba(255, 255, 255, 0.6);
}
img {
  max-width: 100%;
  height: auto;
}
.btn {
  cursor: pointer;
  text-align: center;
}
.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: none;
}
.overlay {
  display: none;
  flex-direction: column;
}
.ball-wrapper {
  width: 14.28%;
  height: 14.28%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: bottom 0.1s ease-in-out;
}
.ball {
  width: 70%;
  height: 70%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.2s ease;
  transform: scale(1);
  opacity: 1;
  z-index: 3;
  border-radius: 50%;
  position: relative;
}
.ball.flower {
  background: none;
}
.ball.flower::before,
.ball.flower::after {
  content: '';
  display: block;
  position: absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: opacity 0.4s ease;
}
.ball.flower::after {
  opacity: 0;
}
.ball-wrapper .number {
  color: white;
  font-size: 4vh;
  position: absolute;
  z-index: 60;
  font-weight: bold;
}
.ball-wrapper.selected .number {
  color: black;
}
.ball-wrapper.active .ball.flower::after {
  opacity: 1;
  background-image: none !important;
  border-radius: 50%;
  box-shadow: 0 0 3px 5px white;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
}
.selected .ball.flower {
  transform: rotate(30deg) scale(1.2);
}
.selected .ball.flower::before {
  opacity: 0;
}
.selected .ball.flower::after {
  opacity: 1;
}
.selected .ball.green {
  box-shadow: 0 0 4vh 2vh rgb(13, 184, 13);
}
.selected .ball.pink {
  box-shadow: 0 0 4vh 2vh rgb(255, 60, 92);
}
.selected .ball.purple {
  box-shadow: 0 0 4vh 2vh rgb(216, 11, 216);
}
.selected .ball.yellow {
  box-shadow: 0 0 4vh 2vh rgb(245, 171, 33);
}
.selected .ball.blue {
  box-shadow: 0 0 4vh 2vh rgb(0, 24, 243);
}
.active .ball {
  box-shadow: inset 0 0 3px 2px white, 0 0 2px 2px white;
  border: 2px solid white;
}
.ball-wrapper:not(.selected).active {
  animation: shake 1s steps(10) infinite;
}
.ball-wrapper.active:nth-child(6n) {
  animation-delay: 100ms;
}
.ball-wrapper.active:nth-child(6n+1) {
  animation-delay: 150ms;
}
.ball-wrapper.active:nth-child(6n+2) {
  animation-delay: 40ms;
}
.ball-wrapper.active:nth-child(6n+3) {
  animation-delay: 150ms;
}
.ball-wrapper.active:nth-child(6n+4) {
  animation-delay: 60ms;
}
.full-width .item {
  width: 10%;
  padding-top: 10%;
}
.item.shovel {
  z-index: 1;
  margin-left: 1%;
}
.item.fly {
  z-index: 4;
}
.item.zoom {
  transform: scale(0.3);
  opacity: 0.2;
}
.item.died {
  transform: scale(0.3);
  opacity: 0;
}
.item.shoveled {
  margin-left: -3%;
  margin-top: -1%;
  z-index: 5;
}
.item-inner {
  width: 40%;
  height: 40%;
  position: absolute;
  left: 30%;
  top: 32%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.game-screen .info {
  position: absolute;
  top: 0;
  font-size: 2.8vh;
  padding: 5%;
  text-align: center;
}
.info span {
  font-size: 1.7em;
}
.game-screen .info-move {
  left: 0%;
}
.game-screen .info-level {
  left: 19%;
}
.game-screen .info-score {
  left: 50%;
}
.game-screen.full-width .info-move {
  left: 9%;
}
.game-screen.full-width .info-level {
  left: 24%;
}
.game-screen.full-width .info-score {
  left: 50%;
}
.game-screen.full-width .info-move {
  padding: 2% 5%;
}
.game-screen.full-width .info-level {
  padding: 2% 5%;
}
.game-screen.full-width .info-score {
  padding: 2% 5%;
}
.dark-backdrop {
  background-color: rgba(0,0,0,0.5);
}
.menu-confirm .overlay-box {
  flex-direction: column;
  font-size: 5vh;
  margin-left: 0;
}
.menu-confirm .overlay-box .btn + .btn {
  margin-top: 20%;
}
.menu,
.overlay {
  z-index: 10;
}
.level-finish .overlay-box {
  justify-content: space-around;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box-title {
  font-size: 6vh;
}
.fill-abs2 .overlay-box {
  margin-left: 0;
  padding: 5vh 7vh;
  max-width: 60vh;
}
.btn-bg {
  min-width: 70%;
  line-height: 1.5;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 20%,  rgba(255, 255, 255, 0) 80%,  rgba(255, 255, 255, 0.3) 100% );
  text-align: center;
}
.btn-bg:hover {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 20%,  rgba(255, 255, 255, 0) 80%,  rgba(255, 255, 255, 0.6) 100% );
}
@keyframes bounce {
  0% {
    margin-top: 0.6vh;
  }
  50% {
    margin-top: -0.6vh;
  }
  100% {
    margin-top: 0.6vh;
  }
}
.item.vibrate {
  animation: bounce 1s ease 0s infinite;
}
.flash-score {
  position: absolute;
  z-index: 6;
  font-size: 5vh;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  animation: flash 0.4s linear 0s 1;
  opacity: 0;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}
@keyframes flash {
  0% {
    opacity: 1;
    margin-top: 0;
  }
  50% {
    opacity: 0.7;
    margin-top: -3vh;
  }
  100% {
    opacity: 0;
    margin-top: -6vh;
  }
}
.resume-menu .overlay-box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10vh;
  font-size: 5vh;
}

.intro {
  flex-direction: column;
}
.intro img {
  width: 60%;
  max-width: 500px;
}
.intro .btn {
  background-color: #0033FF;
  color: white;
  font-size: 4vh;
  margin-top: 3%;
  border: none;
  outline: none;
  padding: 0.2em 1em;
  border-radius: 4px;
}
#loading-container {
  display: none;
}
.chain-segment {
  width: 74%;
  height: 74%;
  left: 13%;
  top: 13%;
  position: absolute;
  z-index: 50;
  pointer-events: none;
}
.chain-segment-inner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  height: 100%;
  border-radius: 100px;
  overflow: hidden;
  transition: width 0.2s ease;
}
.chain-segment-inner.long {
  width: 290%;
  background-image: url(images/chain-segment-2.png);
}
.chain-segment-inner.short {
  width: 236%;
  background-image: url(images/chain-segment-1.png);
}
.hide .chain-segment-inner {
  width: 0 !important;
}

@keyframes rotate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  40% {
    box-shadow: 0 0 0 4vh rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  80% {
    box-shadow: 0 0 0 4vh rgba(255, 255, 255, 0), 0 0 0 2.5vh rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 2.5vh rgba(255, 255, 255, 0);
  }
}
@keyframes anim-11 {
  0% {
    background-position-x: 0%;
    opacity: 1;
  }
  100% {
    background-position-x: 110%;
    opacity: 1;
  }
}
@keyframes anim-12 {
  0% {
    background-position-x: 0%;
    opacity: 1;
  }
  100% {
    background-position-x: 109.09%;
    opacity: 1;
  }
}
@keyframes anim-8 {
  0% {
    background-position-x: 0%;
    opacity: 1;
  }
  100% {
    background-position-x: 142.84%;
    opacity: 1;
  }
}
@keyframes shake {
	0% { transform: translate(0px, 1px); }
	10% { transform: translate(0px, -1px); }
	20% { transform: translate(-1px, 0px); }
	30% { transform: translate(0px, 1px); }
	40% { transform: translate(1px, 0px); }
	50% { transform: translate(-1px, 0px); }
	60% { transform: translate(0px, 1px); }
	70% { transform: translate(1px, 0px); }
	80% { transform: translate(0px, -1px); }
	90% { transform: translate(0px, 1px); }
	100% { transform: translate(1px, 0px); }
}
.ball-effect {
  width: 200%;
  height: 200%;
  position: absolute;
  left: -50%;
  top: -50%;
  z-index: 10;
  pointer-events: none;
}
.ball-effect.flare-1,
.ball-effect.flare-2,
.ball-effect.flare-4 {
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  animation: rotate 2s linear 0s infinite;
}
.ball-effect.flare-1 {
  background-image: url(images/flare-1.png);
}
.ball-effect.flare-2 {
  background-image: url(images/flare-2.png);
}
.ball-effect.flare-4 {
  background-image: url(images/flare-4.png);
}
.ball-effect.pulse {
  width: 70%;
  height: 70%;
  left: 15%;
  top: 15%;
  border-radius: 50%;
  animation: pulse 1.5s linear 0s infinite;
}
.ball-effect.explode {
  background-repeat: no-repeat;
  background-image: url(images/explode-map.png);
  background-size: 1100% 100%;
  background-position-y: 0;
  opacity: 0;
  animation: anim-11 0.4s steps(11, start) 0s 1;
}
.ball-effect.rocket::before,
.ball-effect.rocket::after {
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  top: 25%;
  background-repeat: no-repeat;
  background-image: url(images/rocket-bomb.png);
  background-size: 1200% 100%;
  background-position-y: 0;
  animation: anim-12 1s steps(12, start) 0s infinite;
}
.ball-effect.rocket.axis-y {
  transform: rotate(90deg);
}

.comet {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
  z-index: 30;
  pointer-events: none;
}

.comet-tail {
  width: 0;
  height: 3vh;
  opacity: 0;
  display: block;
  background-image: url(images/beam.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  position: absolute;
  left: 0;
  top: -1.5vh;
  overflow: visible;
}
.comet.circle .comet-star{
  content: '';
  display: block;
  position: absolute;
  top: -4vh;
  left: -4vh;
  width: 8vh;
  height: 8vh;
  background: url(images/glow.png) no-repeat center;
  background-size: contain;
  overflow: visible;
}
.comet.arrow .comet-star{
  content: '';
  display: block;
  position: absolute;
  top: -4vh;
  left: -4vh;
  width: 8vh;
  height: 8vh;
  background: url(images/arrow-soft.png) no-repeat center;
  background-size: contain;
  overflow: visible;
}
.bomb-image {
  position: absolute;
  width: 56%;
  height: 56%;
  left: 22%;
  top: 22%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 10;
  pointer-events: none;
}
.bomb-image.vert,
.bomb-image.horz {
  background-image: url(images/rockets-icon.png);
}
.bomb-image.vert {
  transform: rotate(90deg);
}
.bomb-image.area {
  background-image: url(images/bomb-icon.png);
}
.bomb-effect {
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  pointer-events: none;
}
.bomb-effect.vert::before,
.bomb-effect.vert::after,
.bomb-effect.horz::before,
.bomb-effect.horz::after {
  content: '';
  display: block;
  width: 80%;
  height: 80%;
  top: 10%;
  left: -25%;
  background-image: url(images/rocket-bomb-map.png);
  background-size: 1200% 100%;
  background-position-y: 0;
  animation: anim-12 1s steps(12, start) 0s infinite;
  position: absolute;
}
.bomb-effect.vert {
  transform: rotate(90deg);
}
.bomb-effect.vert::after,
.bomb-effect.horz::after {
  left: auto;
  right: -25%;
  transform: rotate(180deg);
}
.bomb-effect.area {
  display: block;
  background-image: url(images/area-bomb-map.png);
  background-size: 800% 100%;
  background-position-y: 0;
  background-repeat: no-repeat;
  animation: anim-8 1.5s steps(10, start) 0s infinite;
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
}

.selected .bomb-effect:not(.temp) {
  display: none;
}


.bomb-effect.temp {
  z-index: 30;
}
.out-of-moves {
  font-size: 4vh;
  font-weight: 600;
  position: absolute;
  display: none;
}
.overlay {
  z-index: 100;
}
.game-over .overlay-box {
  flex-direction: column;
  height: 60vh;
  width: 90%;
  max-width: 550px;
  min-height: 450px;
  background: url(images/game-end-panel.png) no-repeat center;
  background-size: cover;
  padding: 4vh;
  display: none;
}
.game-over .splitter {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4vh;
}
.game-over .splitter .line {
  height: 0;
  flex: 1;
  border-top: 2px solid white;
}
.game-over .splitter .label {
  flex: 3;
  text-align: center;
}
.game-over .label {
  font-size: 3.5vh;
  color: #254b92;
}
.game-over #best-score {
  color: black;
  font-size: 5vh;
}
.game-over #last-score {
  font-size: 8vh;
  color: black;
}
#game-over-title {
  font-size: 5vh;
  margin-bottom: 3vh;
  white-space: nowrap;
}
.five-moves {
  width: 14.28%;
  height: 14.28%;
  background: url(images/5-moves.png) no-repeat center;
  background-size: contain;
  transition: all 0.3s ease;
  z-index: 50;
  position: absolute;
  transform: scale(0.1);
}
.five-moves.show {
  transform: scale(1.5);
}
.five-moves.hide {
  bottom: 100% !important;
  left: 0 !important;
  opacity: 0.2;
  transform: scale(0.2);
}
.btn-mute {
  background: url(images/sound-on.png) no-repeat center;
  background-size: contain;
  width: 5vh;
  height: 5vh;
  position: absolute;
  top: 6%;
  right: 5%;
}
.btn-mute.muted {
  background-image: url(images/sound-off.png);
}
.full-width .btn-mute {
  top: 5%;
  right: 15%;
}