body { 
  margin: 0; 
  padding: 0;
  background: #000; 
  color: white; 
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center; /* 화면 정중앙에 배치 */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#gameContainer {
  position: relative;
  width: 500px;
  height: 700px;
  background: black;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  flex-shrink: 0; /* ★ 핵심: 모바일 화면이 좁아도 컨테이너가 강제로 찌그러지는 것을 방지 ★ */
}

canvas { display:block; position:absolute; top:0; left:0; width: 500px; height: 700px; z-index:1; }
#ui { position:absolute; top:10px; left:10px; font-size:16px; z-index:10; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 8px; pointer-events: none;}
#hpContainer { width:200px; height:15px; border:2px solid white; margin-top:8px; border-radius: 10px; overflow: hidden; }
#hpBar { height:100%; width:100%; background: linear-gradient(to right, #ff416c, #ff4b2b); transition: width 0.2s; }
.info { margin-bottom: 5px; font-weight: bold; text-shadow: 1px 1px 2px black; }
#nextUpgradeBox { color: #00ffcc; font-size: 14px; }

#startBtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:15px 40px; z-index:20; cursor:pointer; font-size: 20px; font-weight: bold; background: white; border:none; border-radius: 30px;}
#joystick { position:absolute; bottom:40px; left:30px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.3); touch-action:none; z-index:15; }
#stick { position:absolute; width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,0.5); top:45px; left:45px; }
#fireBtn { position:absolute; bottom:60px; right:40px; width:90px; height:90px; border-radius:50%; background:rgba(255,0,0,0.4); border:3px solid rgba(255,255,255,0.6); z-index:15; touch-action:none; }
#fireBtn:active { background:rgba(255,0,0,0.7); }

#joystick, #fireBtn { display: none; }
@media (pointer: coarse) { #joystick, #fireBtn { display: block; } }

#gameOverUI {
  display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 50;
  flex-direction: column; justify-content: center; align-items: center;
}
#gameOverUI h1 { color: #ff4444; font-size: 36px; margin-bottom: 10px; text-shadow: 0 0 10px red; text-align: center; }
#gameOverUI h2 { color: white; font-size: 24px; margin-bottom: 30px; }
#playerName { padding: 12px; font-size: 18px; width: 60%; text-align: center; border-radius: 8px; border: none; margin-bottom: 15px; outline: none; }
#submitScoreBtn { padding: 12px 30px; font-size: 18px; font-weight: bold; background: #00ffcc; color: black; border: none; border-radius: 8px; cursor: pointer; margin-bottom: 15px; width: 65%; }
#retryBtn { padding: 10px 30px; font-size: 16px; background: transparent; color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; width: 65%; }