/* eventually figure out aspect ration stuff. Here's an appoach using media queries. */

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden; 
}

body {
  background-color: #006098;
  border: none;
  font-family: nimbus-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
}
  
#game-box {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: calc(100vw-1px);
  height: calc((2/3)*100vw);
}
@media (min-aspect-ratio:3/2) {
  #game-box {
    height: 100vh;
    width: calc((3/2)*100vh);
    border-left: solid #fff 1px;
    border-right: solid #fff 1px;
  }
}
@media (max-aspect-ratio:3/2) {
  #game-box {
    border: solid #fff 1px;
  }
}

#game-background {
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 50;
}

#recyclesmart-logo {
  position: absolute;
  z-index: 250;
  top: 1%;
  left: .66%;
  height: 9.7%;
}

#lets-play {
  position: absolute;
  z-index: 250;
  top: 1%;
  left: 70%;
  height: 9.7%;
}
#lets-play:hover {
  cursor: pointer !important; 
}

#skip-intro {
  position: absolute;
  z-index: 250;
  top: 1%;
  height: 9.7%;
  left: 52%;
}

#skip-intro:hover {
  cursor: pointer !important; 
}

#audio-controls {
  position: absolute;
  z-index: 250;
  top: 1%;
  right: .66%;
  height: 9.7%;
}

#game-container {
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0; 
  left: 0;
  right: 0;
  z-index: 1;
  cursor: url('/game/img/hand_100.png') 40 20, pointer;
}

#game-rows {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#header {
/*  background-color: #f99; */
  height: 30%;
  display: flex;
  justify-content: space-around;
}

#scoreboard-container {
  height: 100%;
  position: relative;
}

#scoreboard {
  height: 100%;
}

.scoreboard-number {
  position: absolute;
  height: 25%;
}

#minute-1 {
  left: 15.5%;
  bottom: 32%;
}

#second-10 {
  left: 28%;
  bottom: 32%;
}

#second-1 {
  left: 39%;
  bottom: 32%;
}

#score-100 {
  left: 54%;
  bottom: 32%;
}

#score-10 {
  left: 65%;
  bottom: 32%;
}

#score-1 {
  left: 76%;
  bottom: 32%;
}

#your-stuff {
/*  background-color: #9f9; */
  height: 20%;
  display: flex;
  justify-content: space-around;
}

.stuff {
  max-width: 20%;
}

#cans {
/*  background-color: #99f; */
  display: flex;
  height: 30%;
  justify-content: space-around;
}


.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select:none;
  user-select:none;
  -o-user-select:none;
}

.draggable {
  position: relative;
  z-index: 10;
  -ms-touch-action: none;
  touch-action: none;
}

.game-alert {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

#tip-box {
  background-image: url('/game/img/alerts/tip_box.svg');
  background-size: cover;
  display: none;
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  z-index: 30;
}

#tip-box-inner {
  display: flex;
  align-items: center;
  align-content: center;
  height: 100%;
}

#tip-icon {
  margin: auto;
  width: 40%;
}

#tip-text {
  margin: auto;
  width: 50%;
}

.no-drag {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}


/* Pre Game screen - comment out display: none; to use. */

#pre-game-container {
  display: none;
  height: 100%;
  background-color: #006098;
  background-repeat: no-repeat;
  background-size: cover; /*100% 100%;*/
  position: absolute;
  top: 0;
  bottom: 0; 
  left: 0;
  right: 0;
  z-index: 300;
}

.pre-game-text {
  margin-top: 10%;
  margin-bottom: -3%;
  font-size: 3rem;
  font-weight: 700;
  color: #ff3;
  text-align: center;
}

/* Game over screen */

#game-over-container {
  display: none;
  height: 100%;
  background-color: #006098;
  /*background-size: cover;*/ /*100% 100%;*/
  position: absolute;
  top: 0;
  bottom: 0; 
  left: 0;
  right: 0;
  z-index: 200;
  overflow: hidden;
}

.red {
  background-color: #E94A3F;
}

.yellow {
  background-color: #FAA040;
}

.blue {
  background-color: #5FC9F5;
}

#game-over-rows {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

#fantastic-text {
  margin-top: 10%;
  height: 30%;
}

#final-score-text {
  height: 15%;
}

#final-score-container {
  height: 20%;
  display: flex;
  justify-content: space-around;
}

#final-score {
  height: 100%;
  position: relative;
}

#final-score-board {
  height: 100%;
}

.final-score-number {
  position: absolute;
  height: 68%;
}    

#final-score-100 {
  left: 15.9%;
  bottom: 16%;
}

#final-score-10 {
  left: 40.2%;
  bottom: 16%;
}

#final-score-1 {
  left: 64.4%;
  bottom: 16%;
}


#more-info {
  color: white;
}

.more-info.first {
  margin-top:15px;
}

#more-info a {
  color: white;
}

#play-again {
  width: 25%;
}

#play-again:hover {
  cursor: pointer !important; 
}



/* Intro video display and control */

#video-container {
  position: absolute;
  z-index: 100;
  bottom: 0;
  width: 100%;
  height: 88%;
  margin: auto;
  background: #006098;
  opacity: 1;
}

#intro-video {
  width: 100%;
  height: 100%;
}

#mute {
  width: auto;
  height: 100%;
  background-color: #00609840;
}

#mute:hover {
  cursor: pointer !important; 
  background-color: #006098aa;
}

.more-info {
  color: #fff;
}

.more-info a {
  color: #fff;
}

/* ----------- Smartphone Device Styles (XS)  ----------- */

@media (max-width: 767px) {

  .yellow,
  .blue,
  .red {
    display: none;
  }

  #game-over-container {
      display: none;
      height: 100%;
      background-color: #006098;
      background-image: url(/game/img/backgrounds/background_fantastic_job0.svg);
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 200;
  }

  #tip-text {
    font-size: 20px;
    color: #FFC600;
  }

  .more-info {
      font-size: 12px;
  }

  .more-info.first {
      margin-top:10px;
  }

}

/* ---------------------- Tablet styles (SM)  ---------------------- */
@media (min-width: 768px) {
  #tip-text {
    font-size: 28px;
    color: #FFC600;
    font-family: nimbus-sans, sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  [class|="confetti"] {
    position: absolute;
    width: inherit;
  }


}

/* ---------------------- Desktop styles (LG)  ---------------------- */
@media (min-width: 1200px) {
  
  #tip-text {
    font-size: 48px;
  }

  .more-info {
    font-size: 24px;
    padding-top:1rem;
  }

}