/* 게임 화면 전체 */
.game-screen {
  width: 600px;
  height: 800px;
  background-color: blanchedalmond;
  border: 8px solid black;
  box-sizing: border-box;

  position: relative;
  padding: 0;
}

/* <<<<<<<<<<<<<<intro page>>>>>>>>>>>>> styles */
#intro {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: sans-serif;
}

.intro-container, .result-container {
  position: relative;
  top: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px; /* 원하는 간격으로 조정 (예: 40px) */
}

#intro-message {
  font-size: 48px;
}

.red-color {
  display: inline;
  color: red;
  font-weight: bold;
}

/* ✅ 카운트다운 스타일 */
#countdown {
  width: 100px;
  height: 100px;
  background-color: black;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: relative;
}

.count-text {
  font-size: 48px;
  font-weight: bold;
  position: relative;
  top: -4px;
}


/* <<<<<<<<<<<<<<<game page>>>>>>>>>>>>>> styles */
#game {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: sans-serif;

  justify-content: flex-start;
  padding-top: 40px;
}

/*Time Gauge*/
#time-gauge {
  width: 95%;
  height: 20px;
  background-color: lightgray;
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto 5px;
}

#time-fill {
  width: 100%;
  height: 100%;
  background-color: red;
  transition: width 0.1s linear;
  border-radius: 0 10px 10px 0; /* 오른쪽만 둥글게 */
}

/*Score Text*/
#score-text {
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 30px;
}

#score {
  color: blue;
}

#wombat-area {
  width: 500px;
  height: 630px;
  /* background-color: white; */
  /* border: 3px dashed brown; */
  position: relative;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 */
  grid-template-rows: repeat(5, 1fr);    /* 5행 */
  gap: 5px; /* 셀 간 간격 */
}

.cell {
  /* background-color: beige;
  border: 1px solid gray; */
  position: relative;
}

.cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* or cover, 원하는 방식에 따라 */
  position: absolute;
  top: 0;
  left: 0;
}

.wombat-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer; /* 클릭 가능하다는 시각적 피드백 */

  position: absolute;
  animation: wombat-enter 0.3s ease-out forwards;
}

/* 등장 애니메이션: 아래에서 올라오며 서서히 또렷해짐 */
@keyframes wombat-enter {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 사라질 때 흐릿해지는 클래스 */
.wombat-exit {
  animation: wombat-exit 0.3s ease-out forwards;
}

@keyframes wombat-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*점수 애니메이션*/
.score-float {
  position: absolute;
  font-size: 80px;
  font-weight: bold;
  animation: floatUp 0.8s ease-out forwards;
  pointer-events: none;
  user-select: none;
  left: 30px;
}

.score-float.plus {
  color: blue;
}

.score-float.minus {
  color: red;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}


/* <<<<<<<<<<result page>>>>>>>>>>>> styles */
/* 전체 문구 처음 등장: 작아졌다 커짐 */
.time-up-message {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  transform: scale(0.5);
  opacity: 0;
  display: inline-block;
}

.time-up-message.appear-anim{
  animation: appearScale 0.5s ease-out forwards;
}

/* 등장 애니메이션 */
@keyframes appearScale {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.wave {
  display: inline-block;
  animation: waveUp 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

.delay-1 { animation-delay: 0.0s; }
.delay-2 { animation-delay: 0.08s; }
.delay-3 { animation-delay: 0.16s; }
.delay-4 { animation-delay: 0.24s; }
.delay-5 { animation-delay: 0.32s; }
.delay-6 { animation-delay: 0.4s; }

@keyframes waveUp {
  0%   { transform: translateY(3px); opacity: 1; }
  25%  { transform: translateY(-6px); opacity: 1; }
  50%  { transform: translateY(-8px); opacity: 1; }
  75%  { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(0px); opacity: 1; }
}


#result {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: sans-serif;
}

#final-score {
  color: blue;
}

@keyframes spin360 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spin {
  animation: spin360 2s linear infinite;
  display: inline-block;
}

.btn-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.btn-style {
  padding: 12px 24px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-style:hover {
  background-color: #45a049;
  transform: translateY(-2px);
}

.btn-style:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}