:root {
  --background: 204, 204, 204;
  --off-white: 242, 242, 242;
  --main-text: 89, 89, 89;
  --alt-text: 134, 134, 134;
  --blue1: 0, 228, 248;
  --blue2: 0, 150, 255;
  --blue-dark: 0, 83, 165;
  --green1: 228, 255, 48;
  --green2: 69, 192, 0;
  --green-dark: 0, 132, 60;
  --yellow: 255, 193, 35;
  --yellow1: 255, 224, 0;
  --yellow2: 255, 150, 0;
  --yellow-dark: 191, 113, 0;
  --orange: 255, 169, 116;
  --red1: 255, 123, 89;
  --red2: 224, 0, 0;
  --red-dark: 140, 0, 0;
  --purple: 186, 113, 255;
  --purple1: 255, 60, 208;
  --purple2: 162, 60, 220;
  --purple-dark: 90, 47, 132;
  --pink: 255, 113, 243;
  --brown1: 198, 156, 109;
  --brown2: 166, 124, 82;
  --brown-dark: 102, 64, 31;
}

body, html {
  font-family: 'Righteous', sans-serif;
  background-color: #000000;
  color: rgb(var(--main-text));
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

h3, h4 {
  font-family: 'Righteous', sans-serif;
  font-weight: 400;
  letter-spacing: .05em;
}

/*.draggable {
  border: 2px solid gold;
  box-sizing: border-box;
}*/

*:focus {
outline: 0;
outline: none;
}

.wrapper {
	position: relative;
	width: 100%;
  height: 100%;
	max-width: 800px;
  max-height: 460px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

   .three-by-two.aspect-ratio { padding-bottom: 66.666% }
  .four-by-three.aspect-ratio { padding-bottom: 75% }
.sixteen-by-nine.aspect-ratio { padding-bottom: 56.25% }

#canvas {
  background-color: rgb(var(--background));
  background-image: url("../images/background-gray.jpg");
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;  bottom: 0;  left: 0;  right: 0;
  overflow: hidden;
  z-index: 0;
}

#game {
  position: absolute;
  background-image: url("../images/background-gray.jpg");
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  /*display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;*/
}

#intro {
  display: block;
  position: absolute;
  width: 100%;
  margin-top: 20px;
  text-align: center;
  font-size: 1.3em;
  z-index: 10;
}

#restart-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

#levels-btn {
  position: absolute;
  top: 10px;
  right: 100px;
  outline: none;
}

.debug {
  display: none;
  font-family: monospace;
  font-size: 0.7em;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 90;
  pointer-events: none;
}

#demo {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 90;
  display: none;
}

#coin-holder {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  top: 20px;
  left: 20px;
  z-index: 101;
}

#coin-holder img {
  width: 22px;
  height: 22px;
  margin: 2px 2px 1px 2px;
}

.coin-count {
  margin: 1px 0 0 0;
  padding: 0 5px 0 8px;
}

#main-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 32vh 0 40px 0;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: flex-end;
  align-items: center;
}

#main-menu .menu-bkg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../images/texture-bkg.jpg");
  background-size: 400px;
  background-repeat: repeat;
  animation: bkg-move 25s linear infinite;
  z-index: -1;
}
@keyframes bkg-move {
  from { background-position: 0 0; }
  to { background-position: 400px 750px; }
}

#game-logo { position: absolute; /*width: 300px;*/ height: 140px; top: 4%; left: 50%; transform: translateX(-50%); }

.popup {
  position: absolute;
  background-color: rgb(var(--off-white));
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 87%;
  height: 42%;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
  animation: from-top .5s ease-out;
  z-index: 700;
}

@keyframes from-top {
  from {
    top: -50%;
  }
  to {
    top: 50%;
  }
}

@keyframes zoom-bounce {
  0% { transform: scale(0) rotate(0deg); }
  80% { transform: scale(1.2) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes zoom-in {
  0% { transform: translateX(-25%) scale(.2); }
  100% { transform: translateX(-50%) scale(1); }
}

.popup h2 {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 15px 15px 0 0;
  color: #fff;
  background-color: rgb(var(--blue2)); 
  background: -webkit-linear-gradient(left, rgb(var(--blue1)), rgb(var(--blue2)));
}

.star {
  margin: 0 8px;
  min-height: 20px;
  min-width: 20px;
}
.star::after {
  content: '\f005';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 3.5em;
  color: orange;
}

#winner-popup .popup-middle {
  justify-content: center;
}
.star { 
  -webkit-animation: star-spin 1s ease-out;
  -moz-animation: star-spin 1s ease-out;
  -ms-animation: star-spin 1s ease-out;
  -o-animation: star-spin 1s ease-out;
  animation: star-spin 1s ease-out;
}
.star:first-child { animation-delay: .5s; }
.star:nth-child(2) { animation-delay: .7s; }
.star:last-child { animation-delay: .9s; }

@-webkit-keyframes star-spin /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(180deg) scale(.5);
    -o-transform: rotate(180deg) scale(.5);
    transform: rotate(180deg) scale(.5);
  }
  to {
    -webkit-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
@keyframes star-spin {
  from {
    -ms-transform: rotate(180deg) scale(.5);
    -moz-transform: rotate(180deg) scale(.5);
    -webkit-transform: rotate(180deg) scale(.5);
    -o-transform: rotate(180deg) scale(.5);
    transform: rotate(180deg) scale(.5);
  }
  to {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}

#pause-screen {
  width: 87%;
  height: 50%;
}

.pause-top, .popup-top {
  padding: 0; margin: 0; color: rgb(var(--alt-text));
}

.pause-middle, .popup-middle, .settings-middle {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  padding: 0 20px;
  box-sizing: border-box;
}

.pause-bottom, .popup-bottom {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 5% 20px 5%;
  box-sizing: border-box;
}

.settings-middle.round-icons .btn {
  margin: 30px 15px;
}

.settings-bottom {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

.page-title { 
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
  font-size: .8em;
  letter-spacing: .1em;
  margin-top: 12px;
}

#settings {
  position: absolute;
  background-color: rgb(var(--off-white));
  border-radius: 20px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

#daily-gift, #shop {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(var(--background));
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
  padding: 80px 20px 30px 20px;
  box-sizing: border-box;
}
#shop {
  padding: 80px 0 30px 0;
}

.gift-btn { color: white; background: linear-gradient(to bottom right, rgb(var(--purple1)), rgb(var(--purple2))); }
.shop-btn { color: white; background: linear-gradient(to bottom right, rgb(var(--red1)), rgb(var(--red2))); }

.gift {
  width: 44%;
  height: 20%;
}
.gift:nth-child(2), .gift:nth-child(3), .gift:nth-child(6) {
  background-color: #edfff6;
}
.gift:nth-child(7) {
  background-color: aquamarine;
  width: 100%;
  height: 24%;
}

.shop-group {
  width: 100%;
  height: 30%;
  padding: 20px;
  overflow-y: auto;
  white-space: nowrap;
  box-sizing: border-box;
}

.shop-item {
  width: 100px;
  height: 100%;
  margin-right: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.shop-group:nth-child(odd) .shop-item:nth-child(odd), .shop-group:nth-child(even) .shop-item:nth-child(even) { background-color: #edfff6; }

.top-menu {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 49px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
.top-menu::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.2em;
}
.settings-btn::after { content: '\f58d'; }
.back-btn::after { content: '\f30a'; }
.pause-btn::after { content: '\f58d'; }

.play-btn {
  width: 80%;
  height: 120px;
  background: linear-gradient(to bottom right, rgb(var(--blue1)), rgb(var(--blue2)));
  text-align: center;
  font-size: 2.5em;
  color: white;
  padding: 40px 20px !important;
  box-sizing: border-box;
}
.play-btn:nth-child(3) { background: linear-gradient(to bottom right, rgb(var(--green1)), rgb(var(--green2))); }
.play-btn::before {
  content: '\f144';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1em;
}

.two-btns {
  width: 80%;
  display: flex;
  justify-content: space-between;
}

.gift-btn, .shop-btn {
  width: 42%;
  height: 90px;
}

.close-btn::after {
  content: '\f067';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.2em;
  transform: rotate(45deg)
}

.box {
  background-color: white;
  border-radius: 15px;
  -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
  padding: 5px;
}

#levels-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#level-list {
  position: relative;
  background-color: rgb(var(--background));
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  bottom: 0;
  margin: auto;
  margin-top: 20%;
  padding: 0px 15px;
  box-sizing: border-box;
  overflow-y: scroll;
}

.level_button {
  position: relative;
  width: 60px;
  height: 60px;
  transform: scale(0);
  border-radius: 10px;
  background-color: white;
  text-align: center;
  font-size: 28px;
  color: rgb(var(--main-text));
  cursor: pointer;
  margin: 8px;
  padding: 5px;
  box-sizing: border-box;
  animation: zoom-bounce .3s ease-in-out forwards;
}

.level_button::after {
  content: "\f005 \f005 \f005";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .45em;
  letter-spacing: .3em;
  display: block;
}
.level_button.solved::after {
  color: #ffd507;
}
.level_button.active::after {
  color: rgba(255, 255, 255, 0.2);
}
.level_button.locked::after {
  color: #b5b5b5;
}
.level_button.active {
  background: linear-gradient(to bottom right, rgb(var(--blue1)), rgb(var(--blue2)));
  color: white;
}
.level_button.locked {
  background-color: rgb(var(--background));
  color: #a7a7a7;
  pointer-events: none;
  box-shadow: inset 0px 4px 10px 0px rgba(0,0,0,0.2);
  padding: 5px;
}
/*.level_button.locked::after {
  content: "\f023"; 
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  padding-left: 10px;
  color: black;
  position: absolute;
  bottom: -10px;
  right: -8px;
}*/

#bins-holder {
  height: 100%;
  /* width: 100%; */
  /* padding: 0 10%; */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  transform: translateX(-50%) scale(0.2);
  animation: zoom-in 1s ease-in forwards;
  animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
  position: absolute;
  left: 50%;
  bottom: -5%;
}

#bins-top, #bins-bottom {
  height: 50px;
  width: calc(100% + 60px);
  margin-left: -30px;
  background-color: #AF851C;
  background-image: url("../images/texture-wood.png");
  background-repeat: repeat-x;
  background-size: cover;
  border: 3px solid #684602;
  border-radius: 15px;
  box-sizing: border-box;
}

#bins {
  /*position: relative;
  margin-top: 15%;
  height: 80%;
  width: 90%;*/
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-content: center;
  z-index: 0;
}
#bins::before, #bins::after {
  content: '';
  width: 12px;
  height: 100%;
  background-color: #AF851C;
  border: 3px solid #684602;
  border-top: none;
  border-bottom: none;
  box-sizing: border-box;
}
#bins::before { margin-left: 4px; }
#bins::after { margin-right: 4px; }

#bins-dross-bar {
  position: absolute;
  width: calc(100% - 20px);
  height: 5px;
  top: 45%;
  left: 10px;
  background: #AF851C;
  border-top: 2px solid #684602;
  border-bottom: 2px solid #684602;
  z-index: -1;
}

.bin-holder {
  position: relative;
  margin: 15px 10px -20px 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  border: none;
}

.bin-top {
  height: 24px;
  width: 54px;
  background-color: rgba(95, 210, 255, 0.5);
  border: 3px solid #0591b2;
  border-radius: 20px;
  margin-bottom: -4px;
}
.bin-top::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 11px;
  width: 0;
  height: 0;
  border-top: 3px solid #0591b2;
  border-right: 31px solid transparent;
  z-index: 1;
}
.bin-top::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 17px;
  width: 47px;
  margin: 6px 6px 0 0;
  border-radius: 20px;
  border-top: 5px solid white;
  border-right: 5px solid white;
  border-left: 0px solid white;
  opacity: .4;
  box-sizing: border-box;
  transition: all .2s ease-in-out;
  pointer-events: none;
}

.bin {
  width: 42px;
  height: 220px;
  padding: 1px;
  background-color: rgba(95, 210, 255, 0.5);
  position: relative;
  display: flex;
  flex-flow: column-reverse nowrap;
  justify-content: flex-start;
  border-radius: 0 0 40px 40px;
  border: dashed 3px transparent;
  border: 3px solid #0591b2;
  border-top: none;
  transition: background-color 0.3s;
  box-sizing: border-box;
}
.bin::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: calc(100% - 1px);
  width: calc(100% - 25px);
  margin-right: 4px;
  border-radius: 0 0 20px 0;
  border-right: 5px solid white;
  border-left: 30px solid transparent;
  opacity: .4;
  box-sizing: border-box;
  transition: all .2s ease-in-out;
  pointer-events: none;
  z-index: 100;
}
.bin::before {
  content: '';
  width: calc(100% + 20px);
  height: 30px;
  position: absolute;
  bottom: -12px;
  left: -10px;
  background-color: rgb(var(--background));
  border-radius: 0 0 30px 30px;
  border-bottom: 3px solid #684602;
  box-sizing: border-box;
  z-index: -1;
}

.bin, .ball, 
.bin * {
  -ms-touch-action: none;
  touch-action: none;
}
.bin.locked { pointer-events: none; }
/*.bin.locked::after {
  position: absolute;
  top: -25px;
  right: -16px;
  content: '\f023';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  color: orange;
  z-index: 100;
}*/

.bin-holder.locked .bin-cork { 
  /*top: -16px;*/
  left: 6px;
  /*transform: rotate(0deg);
  transition: all 1s ease-in-out;*/
  animation: cork-drop 1.5s ease-in-out forwards;
}
@keyframes cork-drop {
  15% { top: -120px; transform: rotate(90deg); }
  90% { top: -30px; transform: rotate(0deg); }
  100% { top: -16px; transform: rotate(0deg); }
}
.bin-holder.locked .cork-shadow { opacity: 0; }
.bin-cork {
  position: absolute;
  width: 48px;
  height: 36px;
  top: -100px;
  left: 6px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  background-image: url(../images/sprite-corks.png);
  background-repeat: no-repeat;
  background-size: 384px;
  z-index: -1;
  transform: rotate(180deg);
  transition: all 1s ease-in-out;
}
/*.bin-cork::before, .bin-cork::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: rgba(67, 67, 67, 0.2);
}
.bin-cork::before {
  top: 6px;
  right: 29px;
  width: 3px;
  height: 3px;
}
.bin-cork::after {
  top: 10px;
  right: 22px;
  width: 4px;
  height: 4px;
}
.cork-top {
  border-top: 22px solid;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  height: 0;
  width: 38px;
}
.cork-top::before, .cork-top::after {
  content: '';
  position: absolute;
  background-color: rgba(67, 67, 67, 0.2);
}
.cork-top::before {
  width: 11px;
  height: 22px;
  top: 0;
  left: 3px;
  transform: skewX(16deg);
}
.cork-top::after {
  top: 4px;
  right: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.cork-bottom {
  width: 38px;
  height: 18px;
  border-left: 11px solid rgba(67, 67, 67, 0.2);
  box-sizing: border-box;
}
.cork-bottom::before, .cork-bottom::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: rgba(67, 67, 67, 0.2);
}
.cork-bottom::before {
  top: 32px;
  right: 25px;
  width: 3px;
  height: 3px;
}
.cork-bottom::after {
  top: 30px;
  right: 15px;
  width: 4px;
  height: 4px;
}*/
.cork-shadow {
  position: absolute;
  top: 17px;
  right: 17px;
  transform: rotate(-280deg);
  background-color: rgba(0, 0, 0, .3);
  width: 60px;
  height: 6px;
  border-radius: 50%;
  z-index: -1;
}
.bin-holder:first-child .bin-cork { display: none; }

.red-bin { border-color: #F77F7F; }
.red-bin .bin-cork { background-position: -48px 0; }
.blue-bin { border-color: #5BB2E8; }
.blue-bin .bin-cork { background-position: -96px 0; }
.green-bin { border-color: #22BC81; }
.green-bin .bin-cork { background-position: -192px 0; }
.yellow-bin { border-color: #F9D70B; }
.yellow-bin .bin-cork { background-position: 0 0; }
.brown-bin { border-color: brown; }
.brown-bin .bin-cork { background-position: -240px 0; }
.purple-bin { border-color: #D889E5; }
.purple-bin .bin-cork { background-position: -144px 0; }
.white-bin { border-color: #0591b2; }


.ball {
  position: relative;
  display: block;
  background-image: url(../images/sprite-monsters.png);
  background-size: 360px;
  width: 42px;
  height: 42px;
  margin: -4px -3px;
  box-sizing: border-box;
  z-index: 100;
  /*pointer-events: none;*/
}
.ball > div { pointer-events: none; }
.ball.clone { opacity: .3; position: absolute; }

.ball .eye {
  position: absolute;
  top: 9px;
  width: 9px;
  height: 13px;
  background-color: white;
  border: 2px solid;
  border-color: inherit;
  box-sizing: border-box;
  -webkit-animation: blinking 10s linear infinite both;
  -moz-animation: blinking 10s linear infinite both;
  -ms-animation: blinking 10s linear infinite both;
  -o-animation: blinking 10s linear infinite both;
  animation: blinking 10s linear infinite both;
}

.ball .eye.left {
  left: 11px;
	-webkit-border-radius: 50% 50% 30% 50% / 60% 80% 20% 40%;
	-moz-border-radius: 50% 50% 30% 50% / 60% 80% 20% 40%;
	border-radius: 50% 50% 30% 50% / 60% 80% 20% 40%;
}

.ball .eye.right {
  right: 12px;
	-webkit-border-radius: 50% 30% 50% 50% / 40% 30% 70% 60%;
	-moz-border-radius: 50% 30% 50% 50% / 40% 30% 70% 60%;
	border-radius: 50% 30% 50% 50% / 40% 30% 70% 60%;
}

@keyframes blinking {
  0% { height: 13px; top: 12px; }
  49% { height: 13px; top: 12px; }
  50% { height: 2px; top: 17px; }
  51% { height: 13px; top: 12px; }
  100% { height: 13px; top: 12px; }
}
@-webkit-keyframes blinking {
  0% { height: 13px; top: 12px; }
  49% { height: 13px; top: 12px; }
  50% { height: 2px; top: 17px; }
  51% { height: 13px; top: 12px; }
  100% { height: 13px; top: 12px; }
}

.pupil {
  position: absolute;
  bottom: 2px;
  left: 1px;
  background-color: black;
  border-radius: 50%;
  height: 2px;
  width: 2px;
}

.mouth {
  position: absolute;
  bottom: 10px;
  left: 17px;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  border-left: 1px solid;
  border-left-color: inherit;
  transition: all .1s ease-in-out;
}
.mouth::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: black;
  transition: all .1s ease-in-out;
}
.ball.grimacing .mouth {
  bottom: 10px;
  left: 12px;
  width: 14px;
  height: 4px;
  border: 1px solid;
  border-color: inherit;
  overflow: hidden;
  font-size: 1px;
  transition: all .1s ease-in-out;
}
.ball.grimacing .mouth::after {
  top: 0;
  left: 4px;
  width: 3px;
  height: 2px;
  border-radius: 0;
  border: 1px solid;
  border-color: inherit;
  box-sizing: border-box;
  box-shadow: -4em 0 0 0 white, 3.5em 0 0 0 white, 7em 0 0 0 white, -4em 2.5em 0 0 white, 0 2.5em 0 0 white, 3.5em 2.5em 0 0 white, 7em 2.5em 0 0 white;
  transition: all .1s ease-in-out;
}

.ball.picked {
  position: absolute;
  top: -75px;
  animation: hover 1s;
  animation-iteration-count: infinite;
}

.ball.picked::before, .ball.flying::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 74%;
  width: 30px;
  height: 30px;
  background-image: url(../images/monster_wing_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: center right;
  animation: flap-left ease-in-out 0.2s infinite;
  z-index: -1;
}
.ball.picked::after, .ball.flying::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 74%;
  width: 30px;
  height: 30px;
  background-image: url(../images/monster_wing_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: center left;
  animation: flap-right ease-in-out 0.2s infinite;
  z-index: -1;
}

.ball.picked .eye.left {
  animation: none;
  top: 14px;
  width: 8px;
  height: 8px;
}
.ball.picked .eye.left .pupil {
  display: none;
}
.ball.picked .eye.right .pupil {
  bottom: 5px;
  left: 2px;
}
.ball.picked .eye.right {
  animation: none;
  top: 10px;
  right: 11px;
  width: 12px;
  height: 16px;
}
.ball.picked:not(.grimacing) .mouth, .ball.picked:not(.grimacing) .mouth::after, .ball.flying:not(.grimacing) .mouth, .ball.flying:not(.grimacing) .mouth::after {
  animation: panting .5s;
  animation-iteration-count: infinite;
}

@keyframes hover {
  50% {
    transform: translatey(-1.2em);
  }
}
@keyframes flap-left {
  50% {
    transform: rotate(-40deg) scaley(0.6);
  }
}
@keyframes flap-right {
  50% {
    transform: rotate(40deg) scaley(0.6);
  }
}
@keyframes panting {
  50% {
    border-radius: 50%;
    transform: scale(1.5);
  }
}

/*.red { background-image: url("../images/monster-red.png") }
.blue { background-image: url("../images/monster-blue.png") }
.green { background-image: url("../images/monster-green.png") }
.yellow { background-image: url("../images/monster-orange.png") }
.brown { background-image: url("../images/monster-grey.png") }
.purple { background-image: url("../images/monster-purple.png") }*/
.red { background-position: -40px 0px; }
.blue { background-position: -80px 0px; }
.green { background-position: -160px 0px; }
.yellow { background-position: 0px 0px; }
.brown { background-position: -200px 0px; }
.purple { background-position: -120px 0px; }
.ball.red { border-color: rgb(var(--red-dark)); }
.ball.blue { border-color: rgb(var(--blue-dark)); }
.ball.green { border-color: rgb(var(--green-dark)); }
.ball.yellow { border-color: rgb(var(--yellow-dark)); }
.ball.brown { border-color: rgb(var(--brown-dark)); }
.ball.purple { border-color: rgb(var(--purple-dark)); }
.bin.locked .red, .clone.red { background-position: -40px -160px; }
.bin.locked .blue, .clone.blue { background-position: -80px -160px; }
.bin.locked .green, .clone.green { background-position: -160px -160px; }
.bin.locked .yellow, .clone.yellow { background-position: 0px -160px; }
.bin.locked .brown, .clone.brown { background-position: -200px -160px; }
.bin.locked .purple, .clone.purple { background-position: -120px -160px; }
.bin.locked .ball > div, .clone > div { display: none; }


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.drop-active {
  /*border-bottom-color: inherit;*/
  border-top: none;
}

.drop-target {
  /*background-color: #b7dcea;*/
  border-top: none;
  box-sizing: border-box;
}
.drop-target .bin::after { 
  border-right: 30px solid transparent;
  border-left: 5px solid white;
  left: 4px;
  border-radius: 0 0 0 20px; 
}
.drop-target .bin-top::after { 
  border-top: 5px solid white;
  border-right: 0px solid white;
  border-left: 5px solid white; }

.drag-drop {
  display: inline-block;
  min-width: 40px;
  padding: 1em 0.75em;

  color: #fff;
  background-color: #29e;
  border: solid 2px #fff;

  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);

  transition: background-color 0.3s;
}

.drag-drop.can-drop {
  color: #000;
  background-color: #4e4;
}


.hidden {
  opacity: 0 !important;
  display: none !important;
  transition: all .5s ease-in-out;
}


/*****   Pop-up   *****/
.blur-in {
    -webkit-animation: blur 1s forwards;
    -moz-animation: blur 1s forwards;
    -o-animation: blur 1s forwards;
    animation: blur 1s forwards;
    pointer-events: none;
}

.blur-out {
    -webkit-animation: blur-out 1s forwards;
    -moz-animation: blur-out 1s forwards;
    -o-animation: blur-out 1s forwards;
    animation: blur-out 1s forwards;
}

@-webkit-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-moz-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-o-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-webkit-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@-moz-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@-o-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

.round-icons *:focus,
.round-icons *::before:focus,
.round-icons *::after:focus {
  outline: none;
}
.round-icons *::-webkit-input-placeholder,
.round-icons *::before::-webkit-input-placeholder,
.round-icons *::after::-webkit-input-placeholder {
  color: #222;
}
.round-icons *::-moz-placeholder,
.round-icons *::before::-moz-placeholder,
.round-icons *::after::-moz-placeholder {
  color: #222;
}
/*
.menu-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  padding: 0 10px;
}*/

.round-icons button {
  border: 0;
}
.round-icons button:focus {
  border: none;
  outline: 0 !important;
  outline-style: none;
}

.round-icons .btn {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 70px;
  height: 70px;
  margin: 10px;
  border-radius: 35px;
  background: rgb(var(--off-white));
  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.round-icons .btn span { color: rgb(var(--alt-text)) }
.round-icons .btn.restart, .round-icons .btn.next, .round-icons .btn.menu {
  width: 43%;
}
.round-icons .btn.next h3 {
  font-size: 1.7em;
  margin: 0;
}
.round-icons .btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  z-index: 2;
}
.round-icons .btn:active {
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
}
.round-icons .btn:active:after {
  box-shadow: inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);
}
.round-icons .btn.active.play-pause,
.round-icons .btn.active.speaker-on-off {
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
}
.round-icons .btn.active.play-pause:after,
.round-icons .btn.active.speaker-on-off:after {
  box-shadow: inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);
}
.round-icons .btn.play-pause .btn-desc,
.round-icons .btn.speaker-on-off .btn-desc {
  opacity: .5;
}
.round-icons .btn.active.play-pause .btn-desc,
.round-icons .btn.active.speaker-on-off .btn-desc {
  opacity: 1;
}
.round-icons .btn.active.play-pause .icon.play,
.round-icons .btn.active.speaker-on-off .icon.speaker-on {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.round-icons .btn.play-pause .icon.pause,
.round-icons .btn.speaker-on-off .icon.speaker-off {
  opacity: .5;
}
.round-icons .btn.active.play-pause .icon.pause,
.round-icons .btn.active.speaker-on-off .icon.speaker-off {
  opacity: 0;
  transform: translate(-50%, 50%);
}

.round-icons .btn a {
  z-index: 10;
  text-decoration: none;
}
.round-icons .btn h3 {
  color: rgb(var(--alt-text));
  font-size: 1.3em;
}
.round-icons .btn h3::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.round-icons .btn.restart h3::before { content: '\f0e2'; }
.round-icons .btn.menu h3::before { content: '\f03a'; }
.round-icons .btn h4 {
  padding: 0;
  margin: 0;
  color: rgb(var(--alt-text));
  font-size: .8em;
}
.round-icons .btn .btn-desc {
  position: absolute;
  width: 100%;
  top: 78px;
}
.round-icons .btn .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  fill: rgb(var(--alt-text));
  height: 1.4rem;
  vertical-align: middle;
  width: 1.4rem;
  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.round-icons .btn.play-pause .icon.play,
.round-icons .btn.speaker-on-off .icon.speaker-on {
  opacity: 0;
  transform: translate(-50%, 50%);
}
.round-icons .btn.restore .icon.restore {
  transform: scale(1.4) translate(-7px, -8px);
}

.pop-up-button { margin-top: 0; margin-bottom: 30px; }
.pop-up-button::after {
    background: whitesmoke;
}

.close-button {
    transition: all 0.5s ease;
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: whitesmoke;
    border: none;
    font-size: 14px;
    right: -14px;
    top: -14px;
    border-radius: 50%;
    color: rgb(var(--red1));
    -webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
    box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
    cursor: pointer;
}

.close-button:hover {
    background-color: rgb(var(--red1)); 
    color: #fff;
    /*transform: rotate(90deg);*/
    -webkit-animation: rotate-x-btn .7s forwards ease-in-out;
    animation: rotate-x-btn .7s forwards ease-in-out;
}

@-webkit-keyframes rotate-x-btn {
  0% { -webkit-transform: rotate(0deg);
       transform: rotate(0deg) }
  25% { -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg) }
  100% { -webkit-transform: rotate(180deg);
         transform: rotate(180deg) }
}
@keyframes rotate-x-btn {
  0% { -webkit-transform: rotate(0deg);
       transform: rotate(0deg) }
  25% { -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg) }
  100% { -webkit-transform: rotate(180deg);
         transform: rotate(180deg) }
}

.close-button:focus { outline: none; border: none; }

#turn {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align: center;
  background-color: rgba(150,150,150,1);
  color: white;
  /*pointer-events: none;*/
}
#turn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  background-image: url(../images/rotate-device.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 110px;
  height: 110px;
}
#turn h3 { position: absolute; width: 90%; top: 50%; left: 50%; transform: translateX(-50%); font-size: 1em; }
@media only screen and (orientation:portrait){
  #turn{ display: block; }
}
@media only screen and (orientation:landscape){
  #turn{ display: none; }
  #main-menu {
    padding: 40px 20px;
    flex-flow: row nowrap;
    align-items: flex-end;
  }
  .two-btns { width: auto; height: 60%; flex-flow: column nowrap; justify-content: space-between; }
  .gift-btn, .shop-btn { width: 120px; box-sizing: border-box; }
  #game-logo { position: absolute; top: 3%; left: 50%; transform: translateX(-50%); }
  .play-btn { width: 37%; height: 60%; padding: 6% 7% !important; font-size: 3em; box-sizing: border-box; }
  #bins { justify-content: space-around; }
  .bin::before { background-color: #eaeaea; }
  
  #pause-screen, .popup { width: 55%; height: 80%; }
  #level-list { margin-top: 12%; }
  
  #daily-gift { flex-flow: column wrap; }
  .gift { width: 28%; height: 25%; }
  .gift:nth-child(7) { width: 33%; height: 100%; }
  
  .shop-group { width: 33%; height: 100%; }
  .shop-item { width: 100%; height: 100px; display: block; margin-bottom: 15px; }
}