/* =========================================
   基礎網頁環境設定
========================================= */
body {
  margin: 0;
  padding: 0;
  background-color: #222;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* =========================================
   核心畫布設定 (鎖死 1920x1080)
========================================= */
#game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  box-sizing: border-box;
}

/* =========================================
   遊戲物件圖層設定
========================================= */
/* 1. 遊戲背景 */
.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* 2. 題目文字框底板 */
.qa-bg {
  position: absolute;
  /* 🌟 利用 calc 讓基準點從 50% (正中央) 再往上減去 50px */
  top: calc(50% - 50px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2000px;
  height: auto;
  z-index: 5;
}

/* =========================================
   3. 左下角主角小鹿
========================================= */
.character-img {
  position: absolute;
  bottom: 0px;
  left: -10px;
  /* 🌟 原本 245px，放大 30% 變為 318px */
  width: 360px;
  height: auto;
  z-index: 20;
  /* 🌟 加上這行：確保小鹿動畫的基準點在「腳底」，搖擺時才不會像幽靈一樣浮空 */
  transform-origin: bottom center;
}

/* =========================================
   4. 底部計時條
========================================= */
.timer-wrapper {
  position: absolute;
  bottom: 30px;
  left: calc(50% + 60px);
  /* 🌟 在原本的置中基礎上，加入 scale(1.5) 來放大 50% */
  transform: translateX(-50%) scale(1.5);
  /* 🌟 設定放大的基準點為正下方，避免往下超出畫面 */
  transform-origin: bottom center;
  width: 1000px;
  height: 40px;
  z-index: 15;
}

.timer-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 🌟 改為 1，讓外框乖乖當底層 */
}

/* 進度條裁切容器 */
.timer-fill-box {
  position: absolute;
  top: 6px;
  left: 1px;
  width: 100%;
  height: 30px;
  overflow: hidden;
  z-index: 2; /* 🌟 改為 2，把藍色進度條拉到上層顯示！ */
  transition: width 0.1s linear;
}

/* 填充圖案本身 (維持固定長度) */
.timer-fill {
  height: 100%;
  width: 1000px; /* 預估：1000px 扣掉外框厚度。如果填不滿請改大，超出會自動被隱藏 */
  display: block;
}

/* =========================================
   5. 右上角分數板
========================================= */
.score-board {
  position: absolute;
  top: -10px;
  right: -50px;
  width: 350px;
  height: auto;
  z-index: 15;
  /* 🌟 加入 scale(1.5) 來放大 50% */
  transform: scale(1.5);
  /* 🌟 設定放大的基準點為右上角，確保它始終貼齊原本設定好的右上方位置 */
  transform-origin: top right;
}

/* 分數框底板圖片 */
.score-bg {
  width: 80%;
  display: block;
}

/* 裝載數字的容器 */
.score-digits {
  position: absolute;
  top: 40px; /* 🌟 微調數字與底板上邊緣的距離 */
  right: 95px; /* 🌟 微調數字與底板右邊緣的距離 */
  display: flex;
  justify-content: flex-end; /* 讓數字統一靠右對齊 */
  align-items: center;
}

/* 單個數字圖片的大小設定 */
.score-digits img {
  height: 70px; /* 🌟 數字的高度，請依照框內空白處大小微調 */
  width: auto;
  margin-left: -35px; /* 數字之間的微小間距 */
}

/* =========================================
   6. 中央文字與選項按鈕排版
========================================= */

/* 粉紅標籤標題：對齊底板上方的粉紅區塊 */
.topic-label {
  position: absolute;
  top: calc(50% - 410px); /* 距離中心的垂直高度，請依視覺微調 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 46px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  z-index: 10;
}

/* 題目主要文字 */
.question-text {
  position: absolute;
  top: calc(50% - 180px); /* 距離中心的垂直高度 */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1300px; /* 限制寬度讓文字能漂亮地換行 */
  text-align: left; /* 🌟 這裡改成 left，讓文字向左靠齊 */
  font-size: 54px;
  font-weight: bold;
  color: #6d4c41;
  line-height: 1.5;
  z-index: 10;
}

/* 選項按鈕通用設定 */
.option-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px; /* 配合 2000px 底板，按鈕也加大 */
  cursor: pointer;
  z-index: 10;
}

/* 上下選項的垂直位置 */
.opt-1 {
  top: calc(50% + 0px);
}
.opt-2 {
  top: calc(50% + 150px);
}

.option-btn img {
  width: 100%;
  display: block;
}

/* 按下按鈕時的微縮放互動效果 */
.option-btn:active {
  transform: translateX(-50%) scale(0.98);
}

/* 選項按鈕內的文字 */
.option-text {
  position: absolute;
  top: 50%;
  left: 160px; /* 避開左側的紅色/藍色圓圈 */
  transform: translateY(-50%);
  width: 1180px; /* 限制文字寬度 */
  font-size: 40px;
  font-weight: bold;
  color: #6d4c41;
  line-height: 1.4;
  pointer-events: none; /* 讓滑鼠點擊能穿透文字，點在按鈕上 */
}

/* 答對(O)/答錯(X) 統一標誌 (移到底框右下角) */
.result-mark {
  position: absolute;
  /* 🌟 以畫面中心為基準，往下推、往右推到右下角 */
  top: calc(50% + 220px); /* 垂直位置：若太高或太低，請微調 320px 這個數字 */
  left: calc(50% + 750px); /* 水平位置：對齊 2000px 底板的右下角 */
  transform: translate(-50%, -50%) rotate(15deg);
  width: 500px; /* 稍微放大，更有張力 */
  height: auto;
  display: none; /* 預設隱藏 */
  z-index: 25; /* 確保顯示在最上層 */
  pointer-events: none;
}

/* =========================================
   7. 遊戲特效動畫
========================================= */
/* 正確答案閃爍兩次的綠光特效 */
@keyframes flashGreenBorder {
  0%,
  100% {
    transform: scale(1);
    -webkit-filter: drop-shadow(0 0 0px rgba(0, 255, 0, 0));
    filter: drop-shadow(0 0 0px rgba(0, 255, 0, 0));
  }
  50% {
    /* 🌟 加上微放大 3% 的效果，強迫瀏覽器重繪畫面 */
    transform: scale(1.03);
    -webkit-filter: drop-shadow(0 0 25px rgba(0, 255, 0, 1));
    filter: drop-shadow(0 0 25px rgba(0, 255, 0, 1));
  }
}

/* 🌟 提高選擇器權重，精準鎖定按鈕裡面的圖片 */
.option-btn.flash-correct img {
  animation: flashGreenBorder 0.6s ease-in-out 2;
}

/* 倍率標籤圖片 (顯示在左上角並傾斜) */
.combo-multiplier {
  position: absolute;
  top: 10px; /* 往上推，超出底板邊緣 */
  left: -60px; /* 往左推，超出底板邊緣 */
  width: 130px; /* 圖片大小，請依視覺微調 */
  height: auto;
  transform: rotate(-15deg); /* 🌟 逆時針傾斜 15 度 */
  z-index: 20; /* 顯示在最上層 */
  display: none; /* 預設隱藏，由 JS 控制顯示 */
  filter: drop-shadow(
    2px 4px 6px rgba(0, 0, 0, 0.3)
  ); /* 加上一點陰影增加立體感 */
}

/* =========================================
   8. 遊戲進階動態特效 (打擊感增強)
========================================= */

/* 1. 一般分數：Q彈跳動 */
@keyframes scorePop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.anim-score-pop {
  animation: scorePop 0.3s ease-out;
}

/* 🌟 新增：連擊分數常駐呼吸動畫 (帶有規律閃爍的黃金光暈) */
@keyframes breathingScore {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
  }
  50% {
    /* 🌟 將縮放從原本的 1.05 提升到 1.15，並將金光範圍擴大到 25px */
    transform: scale(1.15);
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1));
  }
}

/* 2. 連擊分數：強烈跳動 (0.4秒) + 延遲 0.4 秒後無限接續呼吸金光 */
@keyframes scoreComboPop {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px transparent);
  }
  50% {
    transform: scale(1.3);
    filter: drop-shadow(0 0 15px #ffd700);
  }
}
.anim-score-combo {
  animation:
    scoreComboPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    breathingScore 1.5s 0.4s infinite ease-in-out; /* 🌟 無限常駐呼吸 */
}

/* 🌟 新增：連擊倍率印章常駐呼吸動畫 (維持原本的 15 度傾斜並微微放大縮小) */
@keyframes breathingStamp {
  0%,
  100% {
    transform: scale(1) rotate(-15deg);
  }
  50% {
    transform: scale(1.08) rotate(-15deg);
  }
}

/* 3. 連擊倍率：霸氣蓋章出現 (0.4秒) + 延遲 0.4 秒後無限接續呼吸動畫 */
@keyframes stampEffect {
  0% {
    opacity: 0;
    transform: scale(2.5) rotate(-30deg);
  }
  70% {
    transform: scale(0.9) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-15deg);
  }
}
.anim-stamp {
  animation:
    stampEffect 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    breathingStamp 1.5s 0.4s infinite ease-in-out; /* 🌟 無限常駐呼吸 */
}
/* 4-1. 圈圈 (O) 標誌：果凍彈出 (🌟 已同步改為正 15 度) */
@keyframes markPopO {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(15deg) scale(0);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(15deg) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(15deg) scale(1);
  }
}
.anim-mark-o {
  animation: markPopO 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 4-2. 叉叉 (X) 標誌：重砸後左右震動 (🌟 已同步改為正 15 度) */
@keyframes markShakeX {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(15deg) scale(2);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(15deg) scale(1);
  }
  50%,
  90% {
    transform: translate(-50%, -50%) rotate(15deg) translateX(-15px);
  }
  70% {
    transform: translate(-50%, -50%) rotate(15deg) translateX(15px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(15deg) translateX(0);
  }
}
.anim-mark-x {
  animation: markShakeX 0.5s ease-out forwards;
}

/* 5. 計時器最後5秒：紅色警報脈衝閃爍 */
@keyframes timerUrgent {
  0%,
  100% {
    filter: drop-shadow(0 0 0px red);
  }
  50% {
    filter: drop-shadow(0 0 25px red) brightness(1.2);
  }
}
.timer-urgent {
  animation: timerUrgent 0.5s infinite;
}

/* =========================================
   9. 主角小鹿動態特效
========================================= */

/* 1. 常駐待機：悠閒左右搖擺 */
@keyframes swayIdle {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
.anim-char-idle {
  animation: swayIdle 3s infinite ease-in-out;
}

/* 2. 答對開心：向上雀躍跳動 (Q彈感) */
@keyframes jumpHappy {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-40px) scale(0.95, 1.05);
  } /* 往上跳，身體拉長 */
  40% {
    transform: translateY(0) scale(1.05, 0.95);
  } /* 落地，身體壓扁 */
  60% {
    transform: translateY(-15px) scale(0.98, 1.02);
  } /* 小彈第二次 */
  80% {
    transform: translateY(0) scale(1.02, 0.98);
  }
}
.anim-char-happy {
  animation: jumpHappy 0.6s ease-out;
}

/* 3. 答錯懊惱：垂頭喪氣往下沉，並微微發抖 */
@keyframes droopSad {
  0% {
    transform: scale(1) translateY(0);
  }
  20% {
    transform: scale(1.05, 0.9) translateY(15px);
  } /* 往下擠壓沉重感 */
  40%,
  80% {
    transform: scale(1.02, 0.95) translateY(10px) rotate(-2deg);
  } /* 發抖 */
  60% {
    transform: scale(1.02, 0.95) translateY(10px) rotate(2deg);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.anim-char-sad {
  animation: droopSad 0.8s ease-out forwards;
}

/* =========================================
   10. 題目底框切換特效 (修正版)
========================================= */
@keyframes bgQuestionPop {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* 觸發此 class 時執行彈跳 */
.anim-bg-pop {
  /* 🌟 已經將多餘的 ease-out 刪除，讓瀏覽器能正確讀取跳動節奏 */
  animation: bgQuestionPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

/* =========================================
   11. 選項按鈕切換特效
========================================= */
/* 選項框專屬彈跳：保留 translateX(-50%) 以確保水平置中不跑位 */
@keyframes optQuestionPop {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.03);
  }
}

/* 觸發此 class 時執行彈跳 */
.anim-opt-pop {
  animation: optQuestionPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

/* =========================================
   12. 標題畫面設定
========================================= */
#title-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100; /* 🌟 確保它在最上層，完美蓋住遊戲問答區 */
  background-color: #fff;
}

.title-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 遊戲標題 Logo */
.title-logo {
  position: absolute;
  top: 10%; /* 🌟 稍微往上移一點，避免放大後跟按鈕擠在一起 (原本是 15%) */
  left: 50%;
  transform: translateX(-50%);
  width: 1500px; /* 🌟 標題放大！(原本是 1300px) */
  height: auto;
  z-index: 101;
}

/* 開始按鈕定位 */
.start-btn {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px; /* 🌟 按鈕放大！(原本是 400px) */
  cursor: pointer;
  z-index: 101;
}

.start-btn img {
  width: 100%;
  display: block;
}

/* 🌟 嚴格控制按鈕圖片切換，解決雙重顯示問題 */
.start-btn .btn-active {
  display: none; /* 預設絕對隱藏按下狀態 */
}
.start-btn:active .btn-normal {
  display: none; /* 按下時隱藏一般狀態 */
}
.start-btn:active .btn-active {
  display: block; /* 按下時顯示按下狀態 */
}

/* 點擊時整個按鈕稍微縮小，增加物理回饋感 */
.start-btn:active {
  transform: translateX(-50%) scale(0.96);
}

/* 標題畫面專屬小鹿 */
.title-character {
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 480px;
  height: auto;
  z-index: 101;
  transform-origin: bottom center;
}

/* =========================================
   13. 標題專屬進場動畫 (解決亂跳問題)
========================================= */
@keyframes titleDropIn {
  0% {
    transform: translateX(-50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translateX(-50%) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}
.anim-title-in {
  animation: titleDropIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* =========================================
   14. 遊戲說明畫面設定
========================================= */
#instruction-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 90; /* 🌟 稍微低於標題畫面(100)，但高於遊戲問答區 */
  cursor: pointer;
}

.instruction-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 中央說明圖片置中與放大縮小彈跳效果 */
.instruction-content {
  position: absolute;
  /* 🌟 將 top 從原本的 50% 改成 calc(50% - 80px)，數字 80 可以隨意調整，越大代表越往上 */
  top: calc(50% - 30px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2000px;
  height: auto;
  z-index: 91;
}

/* 底部點擊提示文字（帶有呼吸閃爍效果） */
.click-anywhere-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  font-weight: bold;
  color: #000000;
  padding: 10px 40px;
  border-radius: 30px;
  z-index: 92;
  animation: hintPulse 1.5s infinite ease-in-out;
}

@keyframes hintPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

/* =========================================
   15. 遊戲結算畫面設定
========================================= */
#result-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 95; /* 🌟 確保結算畫面蓋在遊戲問答之上 */
  background-color: rgba(0, 0, 0, 0.4); /* 加上微透明黑底，讓結算框更突出 */
}

/* 結算中央大框體 */
.result-board {
  position: absolute;
  top: 50%; /* 🌟 把它從上方推到畫面中間 */
  left: 50%; /* 🌟 把它從左側推到畫面中間 */
  transform: translate(-50%, -50%);
  width: 1800px;
  height: auto;
  z-index: 96;
}

/* 確保結算框的底圖永遠服貼於外框大小 */
.result-board .result-frame {
  width: 100%;
  display: block;
}

.result-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 結算畫面專屬小鹿 */
.result-character {
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 500px; /* 稍微大一點 */
  height: auto;
  z-index: 98;
  transform-origin: bottom center;
}

/* 標題 (對齊粉紅緞帶) */
.result-title {
  position: absolute;
  top: 11%; /* 🌟 往下推，讓文字完美落在緞帶的正中央 (原本是 6%) */
  left: 50%;
  transform: translateX(-50%);
  font-size: 72px;
  font-weight: 900;
  color: #fff;
  text-shadow:
    2px 4px 6px rgba(0, 0, 0, 0.3),
    -2px -2px 0 #d84370,
    2px -2px 0 #d84370,
    -2px 2px 0 #d84370,
    2px 2px 0 #d84370;
  letter-spacing: 5px;
  white-space: nowrap;
}

/* 分數文字 (中央偏上) */
.result-score {
  position: absolute;
  top: 38%; /* 🌟 稍微往下移，與標題拉開呼吸空間 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 90px;
  font-weight: bold;
  color: #6d4c41;
  white-space: nowrap;
}

/* 分數數字特別放大與變色 */
#final-score {
  font-size: 130px;
  color: #ff6b6b;
  text-shadow:
    2px 3px 0 #fff,
    -1px -1px 0 #fff;
  margin: 0 15px;
}

/* 副標題 (中央偏下) */
.result-subtitle {
  position: absolute;
  top: 57%; /* 🌟 往下推，與分數拉開距離 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  font-weight: bold;
  color: #6d4c41;
  white-space: nowrap;
}

/* 下方按鈕區 */
.result-buttons {
  position: absolute;
  bottom: 18%; /* 🌟 大幅往上推，避開底部的積木與小熊插圖 (原本是 5%) */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
}

/* 按鈕動畫與切換機制 */
.action-btn {
  width: 320px;
  cursor: pointer;
}

.action-btn img {
  width: 100%;
  display: block;
}

.action-btn .btn-active {
  display: none;
}
.action-btn:active .btn-normal {
  display: none;
}
.action-btn:active .btn-active {
  display: block;
}
.action-btn:active {
  transform: scale(0.95);
}

/* =========================================
   16. 結算框體專屬進場動畫
========================================= */
@keyframes boardDropIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.anim-board-in {
  animation: boardDropIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* =========================================
   17. 音量控制按鈕
========================================= */
.mute-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  border: 4px solid #6d4c41;
  font-size: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 999; /* 🌟 確保永遠在所有畫面的最頂層 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  user-select: none;
  transition: transform 0.1s;
}

.mute-btn:active {
  transform: scale(0.9);
}