body,
html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(100%) !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

.game {
  width: 100vw;
  height: 100vh;
  background: url("assets/Game-background.png") no-repeat center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: manipulation;
}

.game__scoreboard {
  display: flex;
  gap: 40px;
  font-size: 24px;
  margin-top: 20px;
  margin-right: 10rem;
  color: white;
}

.scoreboard__player {
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 8px;
}

.scoreboard__player--active {
  border-color: yellow;
}

.game__doors {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Apply to all doors */
.door {
  position: absolute;
  cursor: pointer;
  transition:
    transform 0.2s,
    background-color 0.5s;
}

.door--locked {
  /* background: url("./assets/images/door-lock.png") 1rem / contain no-repeat; */
}

.door--small-reward {
  background: url("./assets/images/door--small-reward.png") 2rem / contain
    no-repeat;
}

.door--big-reward {
  background: url("./assets/images/door--big-reward.png") 1.5rem / contain
    no-repeat;
}

.door--monster {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

/* Monster-specific classes */
.door--ghost {
  background: url("./assets/images/ghost.png") 1rem / contain no-repeat;
}

.door--mummy {
  background: url("./assets/images/mummy.png") 1rem / contain no-repeat;
}

.door--zombie {
  background: url("./assets/images/zombie.png") 1rem / contain no-repeat;
}

.door--skeleton {
  background: url("./assets/images/skeleton.png") 1rem / contain no-repeat;
}

.door--vampire {
  background-image: url("./assets/images/vampire.png");
}

/* Optional: Fade to black effect */
.door--fade-in {
  animation: fadeToBlack 1s forwards;
}

.door--animating {
  background-color: black;
}

@keyframes fadeToBlack {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: black;
  }
}

/* Specific positions per door (tweak as needed based on image layout) */
.door--1 {
  top: 11%;
  left: -1%;
  width: 22%;
  height: 83%;

  clip-path: polygon(
    97.83% 98.94%,
    97.97% 51.75%,
    97.65% 30.29%,
    96.69% 15.46%,
    90.09% 8.28%,
    80.17% 3.9%,
    70.59% 1.98%,
    56.77% 0.75%,
    42.93% 1.47%,
    30.21% 4.27%,
    20.19% 9.59%,
    13.76% 17.38%,
    13.59% 28.06%,
    14.3% 99.3%,
    56.57% 99.71%
  );
}

.door--2 {
  top: 11%;
  left: 34%;
  width: 22%;
  height: 83%;

  clip-path: polygon(
    98.9% 99.79%,
    98.82% 54.77%,
    99.14% 27.64%,
    97.12% 15.21%,
    83.24% 5.26%,
    64.17% -0.19%,
    42.93% 0.98%,
    23.79% 5.96%,
    8.66% 17.92%,
    10.45% 100.51%,
    58.28% 99.95%
  );
}

.door--3 {
  top: 11%;
  left: 70%;
  width: 21%;
  height: 83%;

  clip-path: polygon(
    97.83% 98.94%,
    97.08% 54.74%,
    96.54% 36.87%,
    95.8% 23.71%,
    89.43% 18.09%,
    79.06% 11.91%,
    67.93% 6.05%,
    54.33% -0.57%,
    42.05% 5.41%,
    32.43% 10.25%,
    23.96% 15.21%,
    14.43% 22.76%,
    14.03% 54.85%,
    14.3% 99.3%,
    56.57% 99.23%
  );
}

@media (width <=1690px) {
  .door--1 {
    top: 16%;
    left: -1%;
    width: 22%;
    height: 70%;
    clip-path: polygon(
      97.83% 98.94%,
      97.97% 51.75%,
      97.65% 30.29%,
      96.69% 15.46%,
      90.09% 8.28%,
      80.17% 3.9%,
      70.59% 1.98%,
      56.77% 0.75%,
      42.93% 1.47%,
      30.21% 4.27%,
      20.19% 9.59%,
      13.76% 17.38%,
      13.59% 28.06%,
      14.3% 99.3%,
      56.57% 99.71%
    );
  }

  .door--2 {
    top: 16%;
    left: 33%;
    width: 23%;
    height: 70%;
    clip-path: polygon(
      101.03% 100.03%,
      100.91% 55.14%,
      101.07% 39.79%,
      100.78% 25.24%,
      99.09% 16.33%,
      94.25% 11.45%,
      87.76% 7.05%,
      78.5% 2.93%,
      66.33% 1.08%,
      43.31% 1.19%,
      27.65% 5.12%,
      15.78% 12.19%,
      11.36% 18.56%,
      9.76% 28.48%,
      10.07% 100.09%
    );
  }

  .door--3 {
    top: 16%;
    left: 70%;
    width: 22%;
    height: 71%;
    clip-path: polygon(
      97.83% 98.94%,
      97.08% 54.74%,
      96.54% 36.87%,
      95.8% 23.71%,
      89.43% 18.09%,
      79.06% 11.91%,
      67.93% 6.05%,
      54.33% -0.57%,
      42.05% 5.41%,
      32.43% 10.25%,
      23.96% 15.21%,
      14.43% 22.76%,
      14.03% 54.85%,
      14.3% 99.3%,
      56.57% 99.23%
    );
  }
}

@media (width < 1540px) {
  .door {
    /* background-color: red; */
  }

  .door--1 {
    top: 16%;
    left: -1%;
    width: 22%;
    height: 67%;
    clip-path: polygon(
      97.52% 98.44%,
      97.34% 53.76%,
      96.71% 30.79%,
      95.75% 17.47%,
      90.09% 12.96%,
      81.74% 9.08%,
      70.59% 6.83%,
      56.77% 5.43%,
      41.99% 6.48%,
      32.09% 8.62%,
      22.7% 12.93%,
      14.7% 17.71%,
      13.59% 28.06%,
      14.3% 99.3%,
      56.57% 99.71%
    );
  }

  .door--2 {
    top: 17%;
    left: 33%;
    width: 23%;
    height: 65%;
    clip-path: polygon(
      99.83% 99.69%,
      99.41% 54.8%,
      99.27% 38.58%,
      99.28% 26.45%,
      96.99% 19.09%,
      93.65% 13.86%,
      86.86% 9.12%,
      77.3% 4.65%,
      66.63% 2.46%,
      56.1% 1.41%,
      44.51% 2.23%,
      34.54% 4.95%,
      27.46% 7.74%,
      19.67% 12.19%,
      14.06% 19.08%,
      13.06% 30.38%,
      14.86% 99.92%,
      58.28% 99.95%
    );
  }

  .door--3 {
    top: 18%;
    left: 70%;
    width: 22%;
    height: 64%;
    clip-path: polygon(
      90.94% 98.94%,
      90.48% 24.07%,
      73.88% 12.69%,
      51.81% 1.18%,
      31.8% 11.52%,
      15.06% 23.46%,
      15.87% 99.47%,
      56.57% 99.23%
    );
  }
}

.door-result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  z-index: 1;
}

.door--locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6); /* placeholder for lock image */
  pointer-events: none;
}

.door__overlay {
  position: absolute;
  inset: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.game__reset {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}

.game__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.7s ease;
}

.game__overlay--fadein {
  opacity: 1;
}

.game__modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  scale: 2;
  touch-action: manipulation;
}

.modal {
  max-width: 12rem;
  background: #222;
  padding: 20px 30px;
  border-radius: 10px;
  color: white;
  text-align: center;
}

.modal__actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.modal__button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}

.modal__button--confirm {
  background-color: green;
  color: white;
}

.modal__button--cancel {
  background-color: red;
  color: white;
}

.hidden {
  display: none !important;
}