body {
  background: #6e796f;
  /*background: repeat center url("../images/monstera.png");*/
  font-family: sans-serif;
  text-align: center;
  padding: 0;
  margin: 0;
}

body > main, body > nav, body > header {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80vw;
  transform: translateY(-50%) translateX(-50%);
}

body.title > header {
  display: block;
  cursor: pointer;
}
body.game > main {
  display: block;
}
body.level > nav {
  display: block;
}

button {
  border: none;
  background-color: #2d3436;
  border: solid 3px #2d3436;
  color: white;
  font-weight: bold;
  display: inline-block;
  width: 200px;
  font-size: 26px;
  padding: 6px;
  margin: 20px 40px;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
}
button:hover { 
  background-color: white;
  color: #2d3436;
}

/*********************************************** 
              TITLE SCREEN
*************************************************/

header {
  display: block;
  position: fixed;
  background-image: url("../images/balanz-titlescreen.png");
  background-position: center center;
  background-size: cover;
  width: 100vw!important;
  height: 100vh;
}

header img {
  width: 36vw;
  height: auto;
  position: absolute;
  right: 10vw;
  top: 8vh;
  /*animation: 10s ease-in 1s infinite reverse both running balanceAnim;*/
  transform-origin: center;
  transform: rotate(10deg);
}

@keyframes balanceAnim {
  0% {
    transform: rotate(10deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(10deg);
  }
}



/*********************************************** 
              MAIN GAME 
*************************************************/

#scene {
    perspective: 1000px;  
    perspective-origin: center center;
    margin: 0 auto;
    width: max-content;
    background: #e3a445;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    border: 4px solid #6f4f1f;
    padding: 80px;
    transform: perspective(700px) rotateX(40deg) rotateZ(0deg) translateZ(20px);
    transform-style: preserve-3d;
    backface-visibility: visible;
    -moz-backface-visibility: visible;
}

#stage {
  position: relative;
  top: 0;
  left: 0;
  z-index: 10000;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  width: 300px;
  height: 300px;
  padding: 0;
}

#msg {
  color: white; 
  font-size: 18px;
  float: left;
  width: 100%;
  text-align: center;
}

/** GRID CSS properties **/
.cell {
  box-sizing: border-box;
  background: rgb(235, 225, 195);
  border: 1px solid #ccc;
}
.cell.target {
  background: rgb(160, 238, 240);
  cursor: pointer;
}
.cell.forbidden {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed !important;
}
.cell.forbidden:before {
  content: '\274C';
  font-size: 30px;
}


@keyframes blink {
  50% {
    background-color: rgb(123, 230, 164);
  }
}

.gauge-container {
  display: flex;
  justify-content: center;
  gap: 0rem;
  margin-top: 1rem;
}
.gauge {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 100px;
  border: 1px solid #ccc;
  position: relative;
  background: #eee;
  padding: 0;
}
.gauge-fill {
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 19px;
  height: 0;
  transform-origin: bottom center;
  border-bottom: solid 1px #ccc;
  background: transparent;
  transition: height 0.4s, background 0.4s;
}

#btnPause {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 2.2vmax;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  vertical-align: baseline;
  width: 3.4vmax;
  height: 3.4vmax;
  border-radius: 0.5vmax;
}


label {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  margin: 0 20px;
  color: white;
}

#rotateX {
  transform-origin: left;
}

.gauge[data-caption]:before {
  position: absolute; 
  width: auto; 
  color: white;
  font-weight: bold;
  top: 0px;
  text-align: left;
  left: 40px;
  content: attr(data-caption);
}
.gauge.left[data-caption]:before {
  left: -100px;
  text-align: right;
}

/************************************************ 
            Popup modal window 
************************************************/

aside {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;  
}

aside h4 {
  margin: 0;
  padding-top: 10px;
  font-size: 30px;
  font-weight: bold;
  line-height: 2.2;
}

aside button {
  width: 100px;
  font-size: 16px;
  border-radius: 5px;
  margin: 0 10px;
}

#btnClose {
  border: none;
  background: transparent;
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 0;
  width: auto;
}

aside div {
  position: relative; 
  width: 400px;
  height: 220px;
  color: white;
  top: calc(50vh - 80px);
  margin: auto;
  background-color:  rgb(161, 149, 123);
  border: solid 4px black;
  border-radius: 10px;
  box-shadow: 10px 10px 10px #222;
}


/********************************************************
          LEVEL SELECTION SCREEN
********************************************************/

nav h2, nav h3 {
  font-weight: bold; 
  color: white;
  font-size: 4vmax;
  text-align: center;
}
nav h3 { 
  font-size: 3vmax;
}
nav button {
  font-size: 1.6vmax;
  width: 10vw;
  border-radius: 1vmax;
  margin: 1.8vmax 10px;
  padding: 0.2vmax;
  position: absolute;
}
nav #btnNext {
  right: 1vmax;
}
nav #btnPrevious {
  left: 1vmax;
}

nav [data-id] {
  width: 6vmax;
  height: 7vmax;
  border: solid 0.2vmax white;
  position: relative;
  padding-top: 0.4vmax;
  border-radius: 1vmax;
  display: inline-block;
  margin: 1.8vw;
  vertical-align: middle;
  color: white;
  font-size: 2vw;
  font-weight: bold;
  cursor: pointer;
}
nav [data-score]:before {
  text-align: center;
  display: block;
  font-size: 80%;
  margin-bottom: 1vw;
  content: '-';
}
nav [data-score="1"]:before {
  content:'\2B50';
}
nav [data-score="2"]:before {
  content:'\2B50 \2B50';
}
nav [data-score="3"]:before {
  content:'\2B50 \2B50 \2B50';
}
nav [data-id]:after {
  content: attr(data-id);
  text-align: center;
  display: block;
}

nav > div:last-child {
  display: grid;
  width: 50vw;
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 0px; 
}