: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-image: url("../images/background.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  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 {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr); /* Create columns */
  grid-template-rows: repeat(var(--rows), 1fr); /* Create rows */
  gap: 4px;
  width: calc(100% - 15px);
  max-width: 450px;
  max-height: 650px;
  height: 450px;
  background-color: #fff;
  border: 4px solid #fff;
  margin-top: 20px;
}

.cell {
  background-color: #fff; /* Light grey background for the grid items */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: small;
  color: #000;
}

.selected {
  background-color: #ff0; /* Yellow background for the selected grid items */
}

#words {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: 80%;
  max-width: 450px;
  margin-top: 20px;
  div {
    color: #000;
  }
  .word-found {
    color: grey;
    text-decoration: line-through;
  }
}

#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: #228b22;
}

.unchecked {
  background-color: gray;
}

#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-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: #000;
  width: 80%;
}

#modal-text-3 {
  font-weight: bold;
}

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

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

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