:root {
  --rows: 13;
  --cols: 10;
  --size: 15px;
}

* {
  margin: 0;
  padding: 0;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell,
    Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji,
    Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;
}
html {
  background-color: #000;
}

body {
  background: radial-gradient(circle at center top, #2c4547 0%, #18091e);
  width: 100vw; /* Sets body width to fill the viewport */
  min-height: 100vh; /* Fallback */
  min-height: calc(
    100vh - env(safe-area-inset-bottom)
  ); /* Sets body height to fill the viewport */
  display: none;
}

.user_wrapper {
  display: none;
  flex-direction: row;
  align-items: center;
  z-index: 10;
  height: 100px;
  width: 100%;
  justify-content: center;
}

.user_name {
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  margin-right: 10px;
}

.user_image_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  height: 56px;
  position: relative;
}

.user_circle {
  width: 54px;
  height: 54px;
  border-radius: 27px;
  border: 2px solid #9afaa3;
  overflow: hidden;
}

.user_image {
  width: 56px;
  height: auto;
  background-size: cover;
}

.level_wrapper {
  background-color: #9afaa3;
  position: absolute;
  bottom: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: 10px;
  padding: 0px 10px;
  left: 6px;
  width: 25px;
}

.level_icon,
.coin_icon {
  width: 12px;
  height: 12px;
}

.level {
  font-size: 12px;
  color: #082d2a;
  font-weight: 600;
  margin-left: 2px;
}

.player2 {
  margin-left: 10px;
  margin-right: 0;
}

.coin_wrapper {
  height: 30px;
  padding: 0px 15px;
  margin-left: -10px;
  margin-right: -10px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coins {
  font-size: 13px;
  color: #0fe880;
  font-weight: 600;
  margin-left: 3px;
  word-break: keep-all;
}

#modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
#modal-content {
  background: linear-gradient(to right, #2c4547, #082d2a);
  margin: 50% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
  height: 50%;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 50px;
  height: 100%;
}
#modal-text {
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  width: 80%;
}

.exit-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  align-self: flex-end;
  margin-top: 0px;
  width: 100%;
}
.button-wrapper {
  display: flex;
  justify-content: flex-end;
  column-gap: 10px;
  padding: 0px 35px;
  width: 100%;
}

.exit-wrapper img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.action-buttons {
  display: none;
  justify-content: center;
  width: 100%;
  max-width: 450px;
  padding: 0px 20px;
  margin-top: 20px;
  column-gap: 20px;
}

.action-button {
  cursor: pointer;
}

.action-button img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

#exit-game {
  background-color: #f94646;
  border-radius: 5px;
}

#continue {
  background-color: #5ddd60;
  border-radius: 5px;
}

#modal-2,
#modal-3 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
#modal-content-2,
#modal-content-3 {
  background: linear-gradient(to right, #2c4547, #082d2a);
  margin: 40% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
  height: 60%;
  overflow: auto;
}

#modal-body-2,
#modal-body-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 50px;
  min-height: 50%;
}
#modal-text-2,
#modal-text-3 {
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  width: 80%;
}

#modal-text-3 {
  font-weight: bold;
}
.modal-text-3 {
  font-size: 1.2rem;
  color: #fff;
}

#modal-body-3 {
  justify-content: start;
  row-gap: 30px;
}

.instructions {
  list-style-type: decimal;
  padding: 0px 20px;
  color: #fff;
}

.instructions li {
  margin-bottom: 15px;
}

/* Game related CSS */

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-top: 30px;
}

#mazeCanvas {
  border: 2px solid #7ab00b;
  background-color: rgba(255, 255, 255, 0.05);
  margin: 0 auto;
  width: 600;
  max-width: 90vw;
  height: 600;
  max-height: 90vw;
}

.arrow-buttons {
  display: flex;
  justify-content: center;
  column-gap: 10px;
  margin-top: 20px;
}
.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

.arrow-button {
  cursor: pointer;
  width: 60px;
  height: 60px;
  border: 1px solid #000;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.arrow-button img {
  width: 25px;
  height: 25px;
  object-fit: cover;
}

#up {
  rotate: 270deg;
}

#down {
  rotate: 90deg;
}

#left {
  rotate: 180deg;
}

.progress-bar {
  width: 90%;
  margin: 10px auto;
  height: 15px;
  background-size: 100% 100%;
  border-radius: 8px;
  position: relative;
  text-align: center;
  position: relative;
  background-color: #ddd;
  margin-top: 20px;
}

.progress {
  height: 100%;
  float: left;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.user_image_prog {
  position: absolute;
  top: -5px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 2px solid #9afaa3;
  transition: all 0.2s ease;
}
.progress_perc {
  position: absolute;
  width: 95%;
  text-align: right;
  color: #073828;
  font-weight: 600;
  font-size: 9px;
  line-height: 15px;
  padding-left: 10px;
}

#user1Progress {
  width: 0%;
  background-color: #073828; /* Default color */
}

#user2Progress {
  background-color: #ee3f22; /* Default color */
  width: 0%;
}