@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

body {
  font-family: 'Fredoka One', cursive;
  touch-action: none; /* 모바일 스크롤 방지 */
  overflow: hidden;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  user-select: none;
  -webkit-user-select: none;
}

#game-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

canvas {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  /* Canvas는 UI보다 뒤에 있어야 함 */
  z-index: 1;
  pointer-events: auto; /* 항상 입력을 받을 수 있도록 명시 */
}

/* UI Overlays */
.ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* UI 레이어 자체는 클릭 통과 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  /* Canvas(1)보다 높은 Z-Index 부여하여 흐림 효과 방지 */
  z-index: 10;
}

.header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  pointer-events: none;
}

.btn {
  pointer-events: auto; /* 버튼은 클릭 가능 */
  background: white;
  color: #333;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s;
  font-family: 'Fredoka One', cursive;
  text-transform: uppercase;
}

.btn:active {
  transform: scale(0.95);
}

.level-badge {
  font-size: 2rem;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.2);
  padding: 5px 20px;
  border-radius: 20px;
}

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100; /* 최상단 */
  opacity: 0;
  pointer-events: none; /* 평소에는 클릭 불가 */
  display: none; /* active 아닐 때는 완전히 숨김 */
  transition: opacity 0.3s;
}
// 모달 내부 버튼은 기본적으로 클릭 불가 (모달 active 상태에서만 허용)
.modal button {
  pointer-events: none;
}

.modal.active {
  display: flex;              /* active일 때만 레이아웃 참여 */
  flex-direction: column;
  justify-content: center;   /* 중앙 정렬 */
  align-items: center;       /* 중앙 정렬 */
  opacity: 1;
  pointer-events: auto; /* 활성화 시에만 모달 전체가 클릭 가능 */
}
// 활성 모달 내부 버튼은 다시 클릭 가능하도록 허용
.modal.active button {
  pointer-events: auto;
}

.title-text {
  font-size: 3.5rem;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  margin-bottom: 30px;
  text-align: center;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 모달 레이아웃 세분화: 배경/상단/하단 버튼 영역 분리 */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  pointer-events: none; /* 배경은 클릭 통과 */
}

.modal-top {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
  pointer-events: none; /* 타이틀 영역은 클릭 통과 */
}

.modal-bottom {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px; /* 화면 하단 쪽으로 버튼 배치 */
  pointer-events: auto; /* 버튼 영역만 실제 클릭 */
}

/* Win modal 전용 중앙 카드 컨테이너 */
.win-modal-content {
  position: relative;
  padding: 32px 40px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

/* 활성화된 승리 모달 안의 버튼은 항상 클릭 가능 */
.modal.active .win-modal-content button {
  pointer-events: auto;
}