@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Press Start 2P', cursive;
  background-color: #1a2a3a;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.game-container {
  background-color: #243447;
  border: 4px solid #5dade2;
  padding: 20px;
  image-rendering: pixelated;
}



.game-header { text-align: center; margin-bottom: 20px; }

.game-header h1 {
  color: #5dade2;
  font-size: 24px;
  text-shadow: 3px 3px 0 #1a5276;
  margin-bottom: 15px;
}

.game-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stat {
  background-color: #1a5276;
  padding: 10px 15px;
  border: 2px solid #5dade2;
}

.stat-label {
  color: #aed6f1;
  font-size: 8px;
  display: block;
  margin-bottom: 5px;
}

.stat-value { color: #85c1e9; font-size: 14px; }

.key-stat .stat-value { color: #f39c12; }
.key-stat.has-key .stat-value { color: #f1c40f; }

/* 미로 */
.maze {
  display: grid;
  gap: 0;
  background-color: #0d1a26;
  border: 4px solid #5dade2;
  margin: 0 auto;
}

.cell { width: 32px; height: 32px; position: relative; overflow: visible; }

.wall {
  background: linear-gradient(135deg, #2e4a62 0%, #1a3347 100%);
  border: 1px solid #3d5a73;
}

.path { background-color: #1a2a3a; }

.player {
  position: absolute;
  
  /* 💡 핵심 변경: 셀 크기(32px)보다 훨씬 크게 설정 */
  width: 90px;  /* 32px -> 56px로 변경 (취향껏 조절 가능) */
  height: 90px; /* 32px -> 56px로 변경 */

  /* 💡 위치 조정: 커진 만큼 왼쪽 위로 당겨서 중앙 맞추기 */
  /* 계산식: -( (현재크기 56 - 셀크기 32) / 2 ) = -12px */
  top: -47px;
  left: -30px;

  /* 이미지 불러오기 설정 */
  background-image: url('player.png'); 
  /* 상자에 꽉 차게 표시 */
  background-size: 100%;
  background-repeat: no-repeat;
  /* 캐릭터 발바닥 위치를 맞추기 위해 하단 중앙 정렬 */
  background-position: center bottom;

  /* 픽셀 깨짐 방지 */
  image-rendering: pixelated;

  /* 통통 튀는 애니메이션 */
  animation: playerBob 1.0s ease-in-out infinite;
  
  /* 벽이나 열쇠보다 위에 보이도록 z-index 높임 */
  z-index: 100;
  /* 게임 플레이에 방해 안 되게 마우스 이벤트 무시 */
  pointer-events: none; 
}

/* 통통 튀는 높이도 살짝 키움 */
@keyframes playerBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); } 
}

/* 몬스터 */
.monster {
  position: absolute;
  width: 4px;
  height: 4px;
  top: 4px;
  left: 2px;
  background-color: #27ae60;
  image-rendering: pixelated;
  animation: monsterFloat 0.8s ease-in-out infinite;
  box-shadow:
    0 0 0 #1e8449, 4px 0 0 #1e8449, 20px 0 0 #1e8449, 24px 0 0 #1e8449,
    4px 4px 0 #27ae60, 8px 4px 0 #27ae60, 12px 4px 0 #27ae60, 16px 4px 0 #27ae60, 20px 4px 0 #27ae60,
    4px 8px 0 #27ae60, 8px 8px 0 #ffffff, 12px 8px 0 #27ae60, 16px 8px 0 #ffffff, 20px 8px 0 #27ae60,
    0 12px 0 #1e8449, 4px 12px 0 #2ecc71, 8px 12px 0 #1e8449, 12px 12px 0 #2ecc71, 16px 12px 0 #1e8449, 20px 12px 0 #2ecc71, 24px 12px 0 #1e8449,
    0 16px 0 #145a32, 8px 16px 0 #145a32, 16px 16px 0 #145a32, 24px 16px 0 #145a32,
    0 20px 0 #145a32, 8px 20px 0 #145a32, 16px 20px 0 #145a32, 24px 20px 0 #145a32;
}

@keyframes monsterFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-2deg); }
  75% { transform: translateY(-2px) rotate(2deg); }
}

.key-item{
  position:absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;

  background: url("./key_gold_ref_32.png") no-repeat center;
  background-size: 32px 32px;

  image-rendering: pixelated;
  pointer-events: none;
  z-index: 20;
  animation: keyBob 1.6s ease-in-out infinite;
}

@keyframes keyBob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}


/* 출구 */
.exit-door {
  position: absolute;
  width: 4px;
  height: 4px;
  top: 2px;
  left: 6px;
  background-color: #1a5276;
  image-rendering: pixelated;
  box-shadow:
    4px 0 0 #1a5276, 8px 0 0 #1a5276, 12px 0 0 #1a5276, 16px 0 0 #1a5276,
    0 4px 0 #1a5276, 4px 4px 0 #2980b9, 8px 4px 0 #2980b9, 12px 4px 0 #2980b9, 16px 4px 0 #1a5276,
    0 8px 0 #1a5276, 4px 8px 0 #2980b9, 8px 8px 0 #f1c40f, 12px 8px 0 #2980b9, 16px 8px 0 #1a5276,
    0 12px 0 #1a5276, 4px 12px 0 #2980b9, 8px 12px 0 #2980b9, 12px 12px 0 #2980b9, 16px 12px 0 #1a5276,
    0 16px 0 #1a5276, 4px 16px 0 #2980b9, 8px 16px 0 #2980b9, 12px 16px 0 #2980b9, 16px 16px 0 #1a5276,
    0 20px 0 #1a5276, 4px 20px 0 #1a5276, 8px 20px 0 #1a5276, 12px 20px 0 #1a5276, 16px 20px 0 #1a5276;
}

/* 처치 이펙트 */
.explosion{
  position:absolute; width:32px; height:32px;
  top:0; left:0;
  pointer-events:none;
  animation: explode 0.6s ease-out forwards;
  background: radial-gradient(circle, #f1c40f 0%, #e74c3c 50%, transparent 70%);
  border-radius:50%;
}

@keyframes explode{
  0%{ transform: scale(0.3); opacity:1; }
  100%{ transform: scale(2.5); opacity:0; }
}

.bug-text{
  position:absolute;
  font-size:8px;
  color:#f1c40f;
  animation: bugTextPop 0.8s ease-out forwards;
  pointer-events:none;
  white-space:nowrap;
}

@keyframes bugTextPop{
  0%{ transform: translateY(0) scale(0.5); opacity:1; }
  100%{ transform: translateY(-30px) scale(1.2); opacity:0; }
}

/* 컨트롤 */
.game-controls { text-align:center; margin-top:20px; }
.game-controls p { color:#aed6f1; font-size:8px; margin-bottom:10px; }

.pixel-btn{
  font-family: 'Press Start 2P', cursive;
  background-color:#3498db;
  color:white;
  border:none;
  padding:12px 24px;
  font-size:10px;
  cursor:pointer;
  transition: all 0.1s;
  box-shadow: 4px 4px 0 #1a5276;
}

.pixel-btn:hover{
  background-color:#5dade2;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1a5276;
}

.pixel-btn:active{
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #1a5276;
}

/* 모달 */
.modal{
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background-color: rgba(0,0,0,0.85);
  justify-content:center;
  align-items:center;
  z-index:1000;
}
.modal.active{ display:flex; }

.modal-content{
  background-color:#243447;
  border:4px solid #5dade2;
  padding:30px;
  max-width:500px;
  width:90%;
  text-align:center;
}

.modal-content h2{
  color:#5dade2;
  font-size:16px;
  margin-bottom:20px;
}

.monster-face{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  font-size:48px;
  line-height:64px;
  text-align:center;
  animation: monsterFloat 0.8s ease-in-out infinite;
  position:relative;
}

/* 모달 안 폭발(보이게 강제) */
.monster-face.explode{
  animation: bugShake 0.25s linear 0s 2, bugPop 0.25s ease-out 0.5s 1 forwards !important;
  transform-origin: 50% 60%;
}
@keyframes bugShake{
  0%{ transform: translateX(0) rotate(0deg) scale(1); }
  25%{ transform: translateX(-2px) rotate(-6deg) scale(1.05); }
  50%{ transform: translateX(2px) rotate(6deg) scale(1.05); }
  75%{ transform: translateX(-2px) rotate(-6deg) scale(1.05); }
  100%{ transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes bugPop{
  0%{ transform: scale(1); opacity:1; }
  60%{ transform: scale(1.25); opacity:1; }
  100%{ transform: scale(0.1); opacity:0; }
}
.monster-face.explode::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:10px; height:10px;
  border-radius:50%;
  transform: translate(-50%,-50%) scale(0.2);
  border: 3px solid rgba(241,196,15,0.95);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
  animation: boomRing 0.25s ease-out 0.5s 1 forwards;
}
@keyframes boomRing{
  0%{ transform: translate(-50%,-50%) scale(0.2); opacity:1; }
  100%{ transform: translate(-50%,-50%) scale(2.2); opacity:0; }
}

.question-text{
  color:#fff;
  font-size:10px;
  line-height:1.8;
  margin-bottom:20px;
  white-space: pre-wrap;
}

/* 객관식 */
.options-container{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.option-btn{
  font-family:'Press Start 2P', cursive;
  background-color:#1a5276;
  color:#fff;
  border:2px solid #5dade2;
  padding:15px;
  font-size:9px;
  cursor:pointer;
  text-align:left;
  transition: all 0.1s;
}
.option-btn:hover{ background-color:#2980b9; border-color:#85c1e9; }
.option-btn.correct{ background-color:#27ae60; border-color:#2ecc71; }
.option-btn.wrong{ background-color:#c0392b; border-color:#e74c3c; }

/* 주관식 */
.text-answer-container{ display:flex; flex-direction:column; gap:10px; }

.pixel-input{
  font-family:'Press Start 2P', cursive;
  background-color:#1a5276;
  color:#fff;
  border:2px solid #5dade2;
  padding:15px;
  font-size:10px;
  text-align:center;
}
.pixel-input:focus{ outline:none; border-color:#85c1e9; }

/* 결과 */
.result-message{
  color:#f1c40f;
  font-size:10px;
  margin-top:15px;
  min-height:20px;
}
.result-message.correct{ color:#2ecc71; }
.result-message.wrong{ color:#e74c3c; }

/* clear */
.clear-content h2{
  color:#2ecc71;
  font-size:24px;
  animation: rainbow 2s linear infinite;
}
@keyframes rainbow{
  0%{ color:#5dade2; }
  25%{ color:#f1c40f; }
  50%{ color:#2ecc71; }
  75%{ color:#85c1e9; }
  100%{ color:#5dade2; }
}
.clear-content p{ color:#fff; font-size:10px; margin:15px 0; }

/* key modal */
.key-content .key-icon{
  font-size:48px;
  margin-bottom:15px;
  animation: keyShine 1s ease-in-out infinite;
}
.key-content h2{ color:#f1c40f; }
.key-content p{ color:#fff; font-size:10px; margin:15px 0; }

/* intro */
.intro-content{ max-width:550px; }
.intro-content h2{ color:#5dade2; margin-bottom:25px; }
.intro-content .story{
  color:#aed6f1;
  font-size:9px;
  line-height:2;
  margin-bottom:20px;
  text-align:left;
}
.intro-content .instructions{
  background-color:#1a5276;
  padding:15px;
  margin:15px 0;
  text-align:left;
}
.intro-content .instructions p{
  color:#fff;
  font-size:8px;
  margin:8px 0;
  line-height:1.6;
}
.intro-content .instructions span{ color:#f1c40f; }

/* death */
.death-content{ border-color:#e74c3c; }
.death-content h2{ color:#e74c3c; font-size:20px; }
.death-content .skull{ font-size:48px; margin-bottom:15px; }
.death-content p{ color:#fff; font-size:10px; margin:15px 0; }

/* ✅ 난이도 선택 UI */
.difficulty-box{
  background-color:#1a5276;
  border:2px solid #5dade2;
  padding:12px;
  margin: 12px 0 18px;
  text-align:left;
}
.difficulty-title{
  color:#f1c40f;
  font-size:10px;
  margin-bottom:10px;
}
.difficulty-buttons{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.diff-btn{
  font-family:'Press Start 2P', cursive;
  font-size:9px;
  padding:10px 14px;
  cursor:pointer;
  border:2px solid #5dade2;
  background:#243447;
  color:#fff;
  box-shadow: 3px 3px 0 #1a5276;
}
.diff-btn:hover{ background:#2980b9; }
.diff-btn.active{
  background:#f1c40f;
  color:#243447;
  border-color:#ffeaa7;
}
.difficulty-hint{
  color:#aed6f1;
  font-size:8px;
  line-height:1.8;
}

/* 모바일 방향 버튼 */
.mobile-dpad {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 15px 0;
}

.dpad-row {
  display: flex;
  gap: 5px;
}

.dpad-btn {
  font-family: 'Press Start 2P', cursive;
  width: 50px;
  height: 50px;
  font-size: 16px;
  background-color: #1a5276;
  color: #5dade2;
  border: 2px solid #5dade2;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.dpad-btn:active {
  background-color: #5dade2;
  color: #1a5276;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .game-container {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .game-header h1 {
    font-size: 18px;
  }

  .maze-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* 미로 셀 크기 축소 */
  .maze {
    grid-template-columns: repeat(15, 22px) !important;
  }

  .cell {
    width: 22px;
    height: 22px;
    overflow: visible;
  }

  .player {
    width: 60px;
    height: 60px;
    top: -30px;
    left: -20px;
  }

  .monster {
    width: 2px;
    height: 2px;
    top: 4px;
    left: 4px;
    transform: none;
    box-shadow:
      0 0 0 #1e8449, 2px 0 0 #1e8449, 10px 0 0 #1e8449, 12px 0 0 #1e8449,
      2px 2px 0 #27ae60, 4px 2px 0 #27ae60, 6px 2px 0 #27ae60, 8px 2px 0 #27ae60, 10px 2px 0 #27ae60,
      2px 4px 0 #27ae60, 4px 4px 0 #ffffff, 6px 4px 0 #27ae60, 8px 4px 0 #ffffff, 10px 4px 0 #27ae60,
      0 6px 0 #1e8449, 2px 6px 0 #2ecc71, 4px 6px 0 #1e8449, 6px 6px 0 #2ecc71, 8px 6px 0 #1e8449, 10px 6px 0 #2ecc71, 12px 6px 0 #1e8449,
      0 8px 0 #145a32, 4px 8px 0 #145a32, 8px 8px 0 #145a32, 12px 8px 0 #145a32,
      0 10px 0 #145a32, 4px 10px 0 #145a32, 8px 10px 0 #145a32, 12px 10px 0 #145a32;
  }

  .exit-door {
    transform: scale(0.7);
    top: 1px;
    left: 3px;
  }

  .key-item {
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
  }

  .mobile-dpad {
    display: flex;
  }

  .desktop-hint {
    display: none;
  }
}