/* ===================================================
   1. 基礎重設與瀏覽器優化
   =================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Microsoft JhengHei", sans-serif;
}

/* ===================================================
   2. 遊戲主視窗鎖定 (1920 * 1080)
   =================================================== */
#game-container {
  width: 1920px;
  height: 1080px;
  background-image: url("assets/04.遊戲畫面.png");
  background-size: cover;
  background-position: center;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;

  overflow: hidden;
  flex-shrink: 0;
}

/* ===================================================
   3. UI 介面（題目框與分數板）
   =================================================== */
/* 題目框：放大、水平置中、移動到生命值底下 */
#quiz-container {
  width: 1820px;
  height: 500px;
  background-image: url("assets/04.題目文字框.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 100px;
}

/* 題目文字：字體放大並置中 */
#quiz-text {
  font-size: 82px;
  color: #5d3a1a;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

/* 生命值板：移動到畫面最上方正中央 */
#lives-board {
  width: 500px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

#lives-container {
  display: flex;
  gap: 15px;
}

.heart-icon {
  width: 65px;
  height: 65px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* 愛心波浪漂浮動畫 */
  animation: heartFloat 3s ease-in-out infinite;
}

/* 愛心錯開的動畫時間 */
#lives-container .heart-icon:nth-child(1) {
  animation-delay: 0s;
}
#lives-container .heart-icon:nth-child(2) {
  animation-delay: 0.4s;
}
#lives-container .heart-icon:nth-child(3) {
  animation-delay: 0.2s;
}
#lives-container .heart-icon:nth-child(4) {
  animation-delay: 0.8s;
}
#lives-container .heart-icon:nth-child(5) {
  animation-delay: 0.6s;
}

.heart-icon.full {
  background-image: url("assets/生命值愛心_正常.png");
}
.heart-icon.empty {
  background-image: url("assets/生命值愛心_缺少.png");
}

/* ===================================================
   4. 遊戲舞台與全寬洞口
   =================================================== */
#stage {
  width: 1920px;
  height: 400px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#holes-bg-back,
#holes-bg-front {
  width: 1920px;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
}

#holes-bg-back {
  z-index: 1;
}
#holes-bg-front {
  z-index: 3;
  pointer-events: none;
}

#center-countdown {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 160px;
  font-weight: bold;
  color: #ff4a4a;
  text-shadow:
    4px 4px 0px #ffffff,
    -4px -4px 0px #ffffff,
    4px -4px 0px #ffffff,
    -4px 4px 0px #ffffff,
    6px 6px 15px rgba(0, 0, 0, 0.5);
  z-index: 10;
  transition: all 0.2s ease-out;
}

.hidden {
  display: none !important;
}

/* ===================================================
   5. 地鼠遮罩容器與精準定位
   =================================================== */
.mole-wrapper {
  width: 500px;
  height: 780px;
  position: absolute;
  z-index: 2;
  overflow: hidden;
}

#mole-pos-0 {
  left: 8.8%;
  bottom: -27px;
}
#mole-pos-1 {
  left: 37%;
  bottom: -27px;
}
#mole-pos-2 {
  left: 65%;
  bottom: -27px;
}

/* ===================================================
   6. 地鼠動態變數與多狀態切換
   =================================================== */
:root {
  --correct-translateY: 110px;
  --correct-scale: 1.15;
  --wrong-translateY: 10px;
  --wrong-scale: 1.05;
}

.mole {
  width: 100%;
  height: 100%;
  background-image: url("assets/04.地鼠_收板子.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  position: absolute;
  bottom: -100%;
  transition: bottom 0.6s ease-out;
  cursor: pointer;
}

.mole.up {
  bottom: 88px;
}

.mole.status-normal {
  background-image: url("assets/04.地鼠_一般狀態.png");
}

.mole.status-wrong {
  background-image: url("assets/04.地鼠_答錯狀態(竊笑).png");
  transform-origin: bottom center;
  animation: wrongShake 0.4s ease-in-out forwards;
}

.mole.status-correct {
  background-image: url("assets/04.地鼠_答對狀態(敲暈).png");
  background-size: contain;
  background-position: center center;
  transform-origin: center center;
  transform: translateY(var(--correct-translateY)) scale(var(--correct-scale));
}

/* ===================================================
   7. 地鼠文字木牌定位與顯示控制 (✨ 完美整合版)
   =================================================== */
.mole-sign {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  /* 依照你的設定統一尺寸與預設高度 */
  width: 400px;
  height: 120px;
  bottom: 130px;

  /* 完美置中與字體設定 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 64px;
  font-weight: bold;
  color: #5d3a1a;
  line-height: 1.1;
  padding: 0 5px;

  /* 移動時預設隱藏文字 */
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

/* 當地鼠順利出洞(一般)、或被打中時，才顯示文字 */
.mole.status-normal .mole-sign,
.mole.status-wrong .mole-sign,
.mole.status-correct .mole-sign {
  opacity: 1;
}

/* 依照你的設定，答對狀態微調高度至 460px */
.mole.status-correct .mole-sign {
  bottom: 460px;
  top: auto;
}

/* 答對時的 O 印章維持原樣 */
.mole.status-correct .mole-sign::after {
  content: "";
  position: absolute;
  top: -60px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-image: url("assets/03.答對標誌_O_版2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: stampPulse 1s ease-in-out infinite;
  pointer-events: none;
}

/* ===================================================
   8. 自訂滑鼠游標（槌子）
   =================================================== */
* {
  cursor: none !important;
}

#custom-cursor {
  width: 130px;
  height: 130px;
  background-image: url("assets/04.槌子_一般.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-30%, -30%);
}

body.hitting #custom-cursor {
  background-image: url("assets/04.槌子_敲擊.png");
  transform: translate(-30%, -30%) rotate(-15deg);
}

@media (hover: none) and (pointer: coarse) {
  #custom-cursor {
    display: none !important;
  }
  * {
    cursor: auto !important;
  }
}

/* ===================================================
   9. 遊戲動態特效 (倒數、答對、答錯、扣血、漂浮)
   =================================================== */
@keyframes popPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.countdown-animate {
  animation: popPulse 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes correctGlow {
  0%,
  100% {
    transform: translateY(var(--correct-translateY)) scale(var(--correct-scale));
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
  }
  50% {
    transform: translateY(calc(var(--correct-translateY) - 10px))
      scale(calc(var(--correct-scale) + 0.05));
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1));
  }
}

@keyframes wrongShake {
  0%,
  100% {
    transform: translateY(var(--wrong-translateY)) scale(var(--wrong-scale))
      translateX(0);
    filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0));
  }
  20%,
  60% {
    transform: translateY(var(--wrong-translateY)) scale(var(--wrong-scale))
      translateX(-10px);
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
  }
  40%,
  80% {
    transform: translateY(var(--wrong-translateY)) scale(var(--wrong-scale))
      translateX(10px);
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
  }
}

@keyframes heartDamage {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.5);
    filter: brightness(1.5) drop-shadow(0 0 10px red);
  }
  100% {
    transform: scale(1);
    filter: grayscale(1) opacity(0.8);
  }
}
.heart-icon.damage-anim {
  animation: heartDamage 0.5s ease-out forwards;
}

@keyframes stampPulse {
  0%,
  100% {
    transform: scale(1) rotate(-10deg);
  }
  50% {
    transform: scale(1.25) rotate(0deg);
  }
}

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

/* ===================================================
   10. 標題畫面樣式與特效
   =================================================== */
#title-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-image: url("assets/04.主畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#title-image {
  margin-top: 150px;
  width: 1400px;
  height: auto;
}

#start-button {
  margin-top: 20px;
  width: 500px;
  height: 250px;
  background-image: url("assets/03.開始遊戲按鈕_一般狀態.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.1s ease;
}

#start-button:active {
  background-image: url("assets/03.開始遊戲按鈕_按下狀態.png");
  transform: scale(0.95);
}

#title-character {
  position: absolute;
  left: 80px;
  bottom: 0px;
  width: 525px;
  height: auto;
  transform-origin: bottom center;
  animation: deerSway 3s ease-in-out infinite;
}

@keyframes deerSway {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* ===================================================
   11. 遊戲說明畫面樣式與特效
   =================================================== */
#instruction-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-image: url("assets/04.遊戲畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 95;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#instruction-image {
  width: 1800px;
  height: auto;
  margin-top: -80px;
}

#instruction-text {
  position: absolute;
  bottom: 40px;
  font-size: 48px;
  font-weight: bold;
  color: #ffffff;
  text-shadow:
    2px 2px 10px rgba(0, 0, 0, 0.8),
    -2px -2px 10px rgba(0, 0, 0, 0.8);
  animation: blinkText 1.5s ease-in-out infinite;
}

@keyframes blinkText {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ===================================================
   12. 結算畫面樣式與特效
   =================================================== */
#result-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-image: url("assets/04.遊戲畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 110;
  display: flex;
  justify-content: center;
  align-items: center;
}

#result-frame {
  width: 1100px;
  height: 650px;
  background-image: url("assets/04.遊戲說明外框_無字.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(1.6);
  transform-origin: center center;
}

#result-title {
  position: absolute;
  top: 65px;
  font-size: 52px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  letter-spacing: 5px;
}

#result-message {
  margin-top: 220px;
  font-size: 64px;
  font-weight: bold;
  color: #5d3a1a;
}

#result-sub-message {
  margin-top: 40px;
  font-size: 42px;
  font-weight: bold;
  color: #5d3a1a;
}

#result-buttons {
  display: flex;
  gap: 50px;
  margin-top: 40px;
}

#btn-restart,
#btn-share {
  width: 280px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition:
    transform 0.1s ease-out,
    filter 0.2s;
}

#btn-restart {
  background-image: url("assets/01.btn_restart_normal.png");
}
#btn-restart:active {
  background-image: url("assets/01.btn_restart_pressed.png");
  transform: scale(0.95);
}
#btn-share {
  background-image: url("assets/01.btn_share_normal.png");
}
#btn-share:active {
  background-image: url("assets/01.btn_share_pressed.png");
  transform: scale(0.95);
}

#btn-restart:hover,
#btn-share:hover {
  filter: brightness(1.1);
}

#result-character {
  position: absolute;
  left: 80px;
  bottom: 0px;
  width: 450px;
  height: auto;
  transform-origin: bottom center;
  animation: happyJump 1.5s ease-in-out infinite;
}

@keyframes happyJump {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.02);
  }
}

/* ===================================================
   13. 全域靜音開關按鈕
   =================================================== */
#mute-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白底 */
  border-radius: 50%; /* 變成正圓形 */
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.4); /* 加上立體陰影 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px; /* Emoji 喇叭的大小 */
  cursor: pointer;
  z-index: 1000; /* 💡 確保它在最頂層，不會被其他物件蓋住 */
  transition:
    transform 0.1s ease,
    background-color 0.2s ease;
}

/* 滑鼠移過去稍微發亮放大 */
#mute-button:hover {
  background-color: #ffffff;
  transform: scale(1.1);
}

/* 點擊時微縮小，增加實體按壓感 */
#mute-button:active {
  transform: scale(0.9);
}