: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;
  user-select: none;
}
html {
  background-color: #000;
}

.random-0 {
  background: rgb(62, 180, 137);
  background: linear-gradient(
    159deg,
    rgba(62, 180, 137, 1) 0%,
    rgba(144, 238, 144, 1) 100%
  );
}

.random-1 {
  background-color: #b7410e;
  background-image: linear-gradient(316deg, #b7410e 0%, #ff5349 74%);
}

.random-2 {
  background: rgb(0, 71, 171);
  background: linear-gradient(
    159deg,
    rgba(0, 71, 171, 1) 0%,
    rgba(28, 169, 201, 1) 100%
  );
}

.random-3 {
  background-color: #6247aa;
  background-image: linear-gradient(316deg, #6247aa 0%, #a594f9 74%);
}

.random-4 {
  background-color: #addfad;
  background-image: linear-gradient(315deg, #addfad 0%, #74d680 74%);
}

.random-5 {
  background-color: #ffb347;
  background-image: linear-gradient(
    319deg,
    #ffb347 0%,
    #ff6801 37%,
    #f6c324 100%
  );
}

body {
  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;
}

#game {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow-y: auto;
  position: relative;
  padding-bottom: 50px;
  min-height: 100vh;
}

#container {
  width: calc(90% - 15px);
  max-width: 450px;
  background-color: #fff;
  margin-top: 40px;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  height: auto;
}

#question {
  width: 100%;
  padding: 20px;
  word-break: break-word;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  margin: 0px 0px 30px 0px;
  font-size: 1.1rem;
  font-weight: 500;
  box-sizing: border-box;
  background-color: #383031;
  color: #fff;
}

#options {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 15px;
  margin-bottom: 30px;
  list-style-type: none;
}

.option {
  width: calc(100% - 45px);
  padding: 15px 10px;
  border: 1px solid #000;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  box-sizing: border-box;
}

#timer {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.3rem;
  color: #000;
  column-gap: 10px;
  margin-left: 20px;
  img {
    width: 30px;
    height: 30px;
  }
}

.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: #000;
  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;
}

.check-wrapper {
  display: flex;
  align-items: center;
  margin-top: 10px;
  width: calc(100% - 40px);
  max-width: 450px;
  padding: 0px 20px;
  justify-content: space-between;
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 40px);
  max-width: 450px;
  padding: 0px 20px;
  flex-direction: row;
  margin: 10px 0px;
}
.progress-image {
  width: 25px;
  height: 25px;
  border: 2px solid #228b22;
}
.progress-name {
  font-size: 1.2rem;
  color: #000;
  font-weight: 400;
  text-transform: uppercase;
}
.check-small-wrapper {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.check {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.checked {
  background-color: #39ff14;
}

.wrong-checked {
  background-color: #f94646;
}

.unchecked {
  background-color: white;
}

#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-color: #fefefe;
  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: #000;
  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: 15px;
  padding: 0px 20px;
  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: 30px;
}

.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-color: #fefefe;
  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-content-2 {
  height: 30%;
  min-height: 200px;
}

#modal-content-3 {
  height: 20%;
  min-height: 100px;
  margin: 80% 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-body-2 {
  row-gap: 0px;
  min-height: 100%;
}

#modal-body-3 {
  min-height: 100%;
}
#modal-text-2,
#modal-text-3 {
  text-align: center;
  font-size: 1.5rem;
  color: #000;
  width: 80%;
}

.instructions {
  list-style-type: square;
  padding: 0px 20px;
}

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

#user-answers,
#opponent-answers {
  text-align: center;
  font-size: 1.2rem;
  color: #000;
  font-weight: 400;
}

#user-answers {
  margin-top: 40px;
}

#opponent-answers {
  margin-top: 10px;
}