* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  background: #101018;
  color: white;
  font-family: monospace;
  text-align: center;
}

#game {
  position: relative;
  width: min(92vw, 420px);
  height: 500px;
  margin: 0 auto 16px;
  overflow: hidden;
  border: 5px solid #41414d;
  background-color: #20202a;
  background-image: url("https://i.ibb.co/G30RFtQ4/IMG-4313.jpg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.actor {
  position: absolute;
  z-index: 10;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

#player {
  left: 50%;
  top: 78%;
  background-image: url("https://i.ibb.co/WWLQfht0/IMG-4310.png");
}

#monster {
  left: 14%;
  top: 30%;
  background-image: url("https://i.ibb.co/ymTKQjB7/IMG-4311.png");
}

#key {
  left: 25%;
  top: 25%;
  background-image: url("https://i.ibb.co/tpMCNgWv/IMG-4312.png");
}

/* 출구 */
#door {
  position: absolute;
  z-index: 2;
  top: 5%;
  right: 5%;
  width: 58px;
  height: 82px;
  padding-top: 30px;
  background: rgba(50, 25, 25, 0.9);
  border: 3px solid #986d4b;
  color: white;
  font-size: 11px;
}

/* 열쇠 획득 문구: 열쇠 위치에 표시 */
#keyMessage {
  display: none;
  position: absolute;
  z-index: 30;
  left: 25%;
  top: 25%;
  transform: translate(-50%, -50%);
  color: #ffe34d;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  text-shadow:
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000;
  pointer-events: none;
}

#keyMessage.show {
  display: block;
  animation: keyPopup 1.8s forwards;
}

/* 문 앞 안내 */
#doorMessage {
  display: none;
  position: absolute;
  z-index: 20;
  top: 19%;
  right: 2%;
  max-width: 75%;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 0.5px black;
  text-shadow:
    1px 1px 0 black,
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black;
}

#message {
  margin: 12px 0;
  min-height: 24px;
  color: #ffe58a;
  font-size: 15px;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

button {
  min-width: 58px;
  min-height: 48px;
  margin: 3px;
  border: 2px solid #676779;
  border-radius: 8px;
  background: #292936;
  color: white;
  font-size: 22px;
  touch-action: manipulation;
}

button:active {
  background: #55556a;
}

#restart {
  margin-top: 14px;
  padding: 8px 18px;
  font-size: 15px;
}

/* 사망 및 탈출 화면 */
#gameOver,
#winScreen {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 20px;
}

#gameOver {
  background: rgba(100, 0, 0, 0.92);
}

#game.caught {
  animation: shake 0.12s 8;
}

#game.caught #gameOver {
  display: flex;
}

.over-title {
  color: #ff2020;
  font-size: clamp(36px, 10vw, 54px);
  font-weight: 900;
  text-shadow: 4px 4px #210000;
  animation: pulse 0.5s infinite alternate;
}

.over-subtitle {
  color: white;
  font-size: 15px;
}

#gameOver button {
  background: #190505;
  border-color: #ff3333;
}

/* 탈출 축하 화면 */
#winScreen {
  background: radial-gradient(
    circle at center,
    #216448 0%,
    #0b2419 65%,
    #06130f 100%
  );
  color: #d6ffe5;
}

#game.won #winScreen {
  display: flex;
  animation: winAppear 0.6s ease-out;
}

.confetti {
  color: #ffe77a;
  font-size: 25px;
  letter-spacing: 5px;
  animation: winPulse 0.7s infinite alternate;
}

.win-title {
  color: #a4ffbd;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 900;
  text-shadow: 0 0 12px #30ff83, 3px 3px #123322;
  animation: winPulse 1s infinite alternate;
}

.win-subtitle {
  color: #fff2a6;
  font-size: 23px;
  font-weight: bold;
}

.win-message {
  color: #e4ffed;
  font-size: 14px;
  line-height: 2;
}

.win-stamp {
  padding: 8px 12px;
  border: 2px solid #a4ffbd;
  color: #a4ffbd;
  font-size: 12px;
  letter-spacing: 2px;
  transform: rotate(-4deg);
}

#winScreen button {
  background: #164b35;
  border-color: #a4ffbd;
  color: white;
  font-size: 16px;
}

@keyframes keyPopup {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -70%);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -70%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 0.75;
  }
  to {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-6px, 3px); }
  50% { transform: translate(6px, -3px); }
  75% { transform: translate(-3px, -4px); }
}

@keyframes winAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes winPulse {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.06);
    opacity: 1;
  }
}