@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap");

/* 기본 설정 */
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: "Noto Sans KR", sans-serif;
  transition: background-color 0.8s ease; /* 배경색 부드럽게 전환 */
  touch-action: none; /* 모바일 터치 제스처 방지 */
  overscroll-behavior: none; /* 스크롤 바운스 방지 */
}

/* 게임 컨테이너 (고정 비율 600x900) */
#game-container {
  position: absolute; /* 절대 위치로 변경 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 중앙 정렬 */
  width: 800px; /* 1:1 비율 */
  height: 800px;
  background-color: transparent; /* 배경 투명 (body 배경 보임) */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  overflow: hidden; /* 튀어나온 UI 잘라내기 */
  /* JS에서 transform: scale()로 크기 조절됨 */
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* UI 레이어 */
#ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  z-index: 10;
}

/* 시작 화면 배경 */
#start-screen {
  background-image: url("asset/pocketball.jpg");
  background-size: 100% 100%; /* 이미지가 잘리지 않고 화면에 꽉 차게 설정 */
  background-position: center;
  justify-content: flex-end;
}

.hidden {
  display: none !important;
}

/* 텍스트 스타일 */
.title {
  font-size: 5rem;
  font-weight: 900;
  color: white;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 60px;
  background-color: rgba(20, 20, 20, 0.85);
  padding: 20px 60px;
  border-radius: 30px;
  letter-spacing: 2px;
}

h2 {
  font-size: 3rem;
  color: white;
  margin-bottom: 20px;
}
p {
  font-size: 2.5rem; /* 승리 문구 크게 */
  color: #ddd;
  margin-bottom: 30px;
  font-weight: bold;
}

/* 버튼 스타일 */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 14px; /* [간격 조정] 버튼 사이의 간격 (이 숫자를 바꾸세요) */
  padding-bottom: 40px;
}

#start-screen .btn-group {
  align-items: center;
}

/* 시작 화면 버튼 커스텀 (투명화 및 빛 효과) */
#start-screen .btn {
  background-color: transparent;
  color: transparent; /* 텍스트 숨김 (이미지에 포함된 경우) */
  box-shadow: none;
  border: none;
  position: relative;
  overflow: hidden;
  height: 50px; /* 텍스트 제거 후 높이 유지 */
}

#start-screen .btn:hover {
  background-color: transparent; /* 기존 호버 색상 제거 */
  transform: translateY(-3px);
}

#start-screen .btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%; /* 버튼보다 살짝 작게 */
  height: 90%;
  background: radial-gradient(
    circle,
    rgba(255, 244, 235, 0.397) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease-out;
  border-radius: 50px;
  pointer-events: none;
}

#start-screen .btn:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

.btn {
  width: 250px; /* [크기 조정] 버튼 너비 (이 숫자를 줄이세요) */
  padding: 8px 0; /* [크기 조정] 버튼 높이/패딩 (이 숫자를 줄이세요) */
  font-size: 1.5rem; /* [크기 조정] 글자 크기 (이 숫자를 줄이세요) */
  font-weight: bold;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.1s;
  color: #333;
  pointer-events: auto;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.btn:active {
  transform: scale(0.95);
}

.purple {
  background-color: #d1c4e9;
} /* 연보라 */
.purple:hover {
  background-color: #b39ddb;
}

.green {
  background-color: #9dc183;
} /* 밝은 세이지 그린 */
.green:hover {
  background-color: #86a868;
}

.red {
  background-color: #e74c3c; /* 빨간색 */
}
.red:hover {
  background-color: #c0392b;
}

.small {
  padding: 8px 20px;
  font-size: 1rem;
}

/* HUD */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.score-box {
  position: absolute;
  top: 50%;
  left: 84px; /* 왼쪽 여백(0~168px)의 중앙 */
  transform: translate(-50%, -50%);
  width: 100px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: bold;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ball-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.player-label {
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: white;
}

.p1-label {
  background-color: #e74c3c;
}

.p2-label {
  background-color: #3498db; /* 파란색으로 변경 */
  color: white;
}

#btn-quit {
  position: absolute;
  top: 50%;
  right: 25px; /* 오른쪽 레터박스 중앙 */
  transform: translateY(-50%);
  pointer-events: auto;
  width: auto;
}

/* 턴 표시기 */
#turn-indicator {
  position: absolute;
  top: 20px;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

#turn-indicator.p1-turn {
  background-color: #e74c3c;
  border: 2px solid #c0392b;
  left: -70px; /* 더 깊숙이 숨김 */
  padding: 12px 30px 12px 100px; /* 텍스트 오른쪽으로 이동 */
  right: auto;
  animation: slideInLeft 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
#turn-indicator.p2-turn {
  background-color: #3498db; /* 파란색 */
  border: 2px solid #2980b9;
  color: white !important;
  right: -70px; /* 더 깊숙이 숨김 */
  padding: 12px 100px 12px 30px; /* 텍스트 왼쪽으로 이동 */
  left: auto;
  animation: slideInRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-150%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(150%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 파워 게이지 */
#power-gauge-wrap {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 20px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #d1c4e9;
  border-radius: 10px;
  overflow: hidden;
}
#power-gauge-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #9dc183, #d1c4e9);
}

#message-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 20;
  text-align: center;
  width: 100%;
}

/* 게임 방법 모달 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal-content {
  background-color: #fff8e1; /* 따뜻한 크림색 배경 */
  padding: 40px;
  border-radius: 20px;
  border: 4px solid #8d6e63; /* 갈색 테두리 */
  box-shadow: 0 10px 25px rgba(62, 39, 35, 0.2); /* 부드러운 갈색 그림자 */
  max-width: 600px;
  width: 90%;
  text-align: center;
  color: #5d4037; /* 짙은 갈색 텍스트 */
}

.modal-content h2 {
  color: #3e2723; /* 제목은 더 진한 갈색 */
  font-size: 2.2rem;
  margin-bottom: 20px;
  text-shadow: none;
  border-bottom: 2px dashed #a1887f; /* 점선 장식 */
  padding-bottom: 10px;
  display: inline-block;
}

.modal-content ul {
  text-align: left;
  margin-bottom: 30px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.6); /* 내용 박스 배경 */
  border-radius: 10px;
}

.modal-content li {
  font-size: 1.1rem;
  margin-bottom: 12px;
  line-height: 1.5;
  color: #4e342e;
  list-style: none; /* 기본 점 제거 */
}

/* +1 플로팅 텍스트 효과 */
.floating-text {
  position: absolute;
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  pointer-events: none;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  animation: floatUpFade 0.8s ease-out forwards;
  z-index: 50;
}

@keyframes floatUpFade {
  0% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateY(-30px) scale(0.8);
    opacity: 0;
  }
}