/* 防止手機瀏覽器依系統字體大小設定自動放大/縮小文字，
   避免玩家調整手機文字大小後破壞整體版面配置（遊戲全部用固定 px 字級，
   本來就不該被系統字體設定影響，這裡是擋掉瀏覽器自己的文字膨脹機制） */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
  /* 手機瀏覽器點擊可點物件時，預設會閃一下灰黑色的觸控反饋色塊，
     這裡關掉它，並在下面把按鈕/物件被點擊聚焦時的外框也一併移除 */
  -webkit-tap-highlight-color: transparent;
}

button,
.hazard-hotspot,
.img-btn,
.round-btn,
#mute-btn,
.screen {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
button:focus,
.hazard-hotspot:focus,
.img-btn:focus,
.round-btn:focus,
#mute-btn:focus {
  outline: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: "微軟正黑體", sans-serif;
  background-color: #222;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

#game-container {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  overflow: hidden;
}

/* ==========================================
   🌀 讀取畫面 (Loading Screen)
   ========================================== */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: white;
  font-family: sans-serif;
  transition: opacity 0.5s ease;
  padding: 20px;
  box-sizing: border-box;
}

.loading-circle {
  width: 40vw;
  max-width: 250px;
  height: 40vw;
  max-height: 250px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  overflow: hidden;
}

#loading-deer {
  width: 65%;
  animation: deerRun 0.4s infinite alternate ease-in-out;
}

@keyframes deerRun {
  0% {
    transform: rotate(-12deg);
  }
  100% {
    transform: rotate(12deg);
  }
}

.loading-text {
  font-size: clamp(48px, 6vw, 60px);
  font-weight: bold;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.dot {
  opacity: 0;
  animation: blinkDots 1.5s infinite;
}
.dot-1 {
  animation-delay: 0s;
}
.dot-2 {
  animation-delay: 0.3s;
}
.dot-3 {
  animation-delay: 0.6s;
}
@keyframes blinkDots {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.progress-bar-container {
  width: 60vw;
  max-width: 400px;
  height: 20px;
  background-color: #444;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #666;
}

#progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff8a65, #ff5252);
  transition: width 0.2s ease-out;
}

#progress-percent {
  margin-top: 10px;
  font-size: 48px;
}

/* ==========================================
   共用系統元件
   ========================================== */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}

/* 靜音鈕：跟母嬰八大好禮遊戲同一套樣式（白底圓形＋emoji圖示） */
#mute-btn {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 86px;
  height: 86px;
  background-color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  padding: 0;
  cursor: pointer;
  z-index: 99999;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: background-color 0.15s ease;
  user-select: none;
}
#mute-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}
#mute-btn:active {
  background-color: rgba(230, 230, 230, 1);
}

#confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 15px;
  height: 15px;
  animation: fall linear infinite;
}

@keyframes fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(1100px) rotate(720deg); opacity: 0; }
}

.click-to-continue {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  animation: blink 1.5s infinite;
}

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

.round-btn {
  position: relative;
  padding: 26px 70px;
  font-size: 52px;
  font-weight: bold;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(180deg, #ff8a80, #e6473f);
  border: 5px solid #fff8e0;
  border-radius: 60px;
  box-shadow: 0 8px 0 #a8241d, 0 12px 20px rgba(0,0,0,0.35);
  cursor: pointer;
  letter-spacing: 4px;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.25);
  transition: transform 0.1s, box-shadow 0.1s;
}
.round-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #a8241d, 0 4px 10px rgba(0,0,0,0.35);
}
.round-btn-alt {
  background: linear-gradient(180deg, #6ec6ff, #3d8bd9);
  box-shadow: 0 8px 0 #245c8f, 0 12px 20px rgba(0,0,0,0.35);
}
.round-btn-alt:active {
  box-shadow: 0 2px 0 #245c8f, 0 4px 10px rgba(0,0,0,0.35);
}

/* 圖檔按鈕（開始遊戲／再玩一次／邀請好友） */
.img-btn {
  width: 400px;
  height: 150px;
  border: none;
  padding: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.1s;
}
.img-btn:active {
  transform: scale(0.94);
}

/* ==========================================
   🏠 標題畫面
   ========================================== */
#title-screen {
  background-image: url("./assets/07.場景_主背景.png");
  z-index: 20;
  display: block;
  cursor: pointer;
}

#title-image {
  position: absolute;
  width: 1300px;
  height: 520px;
  background-image: url("./assets/07.遊戲標題.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 17%;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.35));
}

#title-character {
  position: absolute;
  width: 500px;
  height: 500px;
  background-image: url("./assets/07.遊戲主角_一般狀態.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  bottom: 0;
  left: 8%;
}

#start-btn {
  bottom: 10%;
  left: 50%;
  position: absolute;
  width: 480px;
  height: 180px;
  transform: translateX(-50%);
  background-image: url("./assets/01.btn_start_normal.png");
}
#start-btn:active {
  transform: translateX(-50%) scale(0.94);
}

/* ==========================================
   📖 遊戲說明畫面
   ========================================== */
#instruction-screen {
  background-image: url("./assets/07.場景_遊戲背景.png");
  z-index: 15;
  cursor: pointer;
}

#instruction-frame {
  position: absolute;
  width: 1600px;
  height: 900px;
  background-image: url("./assets/07.場景_遊戲說明外框_有字.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#instruction-content {
  position: absolute;
  width: 1240px;
  top: 340px;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
}

@keyframes mag-swing {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

#instruction-subtitle {
  margin: 0 0 24px 0;
  font-size: 76px;
  font-weight: bold;
  color: #6b4a2b;
  text-align: left;
}

#instruction-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 72px;
  font-weight: bold;
  color: #6b4a2b;
  text-align: left;
}
#instruction-content li {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-bottom: 16px;
}
#instruction-content li:last-child {
  margin-bottom: 0;
}
.li-icon {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ==========================================
   🔍 找碴關卡畫面
   ========================================== */
#level-screen {
  z-index: 25;
  overflow: hidden;
}

#level-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: url('./assets/07.放大鏡.png') 20 20, auto;
}

#hazard-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
}

.hazard-sprite {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.hazard-hotspot {
  position: absolute;
  pointer-events: auto;
  cursor: url('./assets/07.放大鏡.png') 20 20, pointer;
}

.feedback-mark {
  position: absolute;
  width: 240px;
  height: 240px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
}
.feedback-mark.show-correct {
  background-image: url("./assets/07.紅色圈圈.png");
  animation: circle-blink-twice 0.9s ease-in-out forwards;
}
.feedback-mark.show-wrong {
  background-image: url("./assets/07.紅色叉叉.png");
  animation: feedback-pop 0.7s ease-out forwards;
}
@keyframes feedback-pop {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes circle-blink-twice {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  40% { opacity: 0.1; }
  55% { opacity: 1; }
  70% { opacity: 0.1; }
  85% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* 找到的隱患：放大鏡飛向右上角追蹤器（帶旋轉＋發光尾跡） */
.magnifier-fly {
  position: absolute;
  background-image: url("./assets/07.放大鏡.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 90;
  pointer-events: none;
  transition: left 0.6s cubic-bezier(0.3, 0.6, 0.3, 1),
    top 0.6s cubic-bezier(0.3, 0.6, 0.3, 1), width 0.6s ease, height 0.6s ease;
  animation: magnifier-spin-glow 0.65s ease-in-out;
}
@keyframes magnifier-spin-glow {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.7);
    filter: drop-shadow(0 0 0px rgba(255, 214, 102, 0));
  }
  35% {
    filter: drop-shadow(0 0 22px rgba(255, 214, 102, 1));
  }
  100% {
    transform: translate(-50%, -50%) rotate(400deg) scale(1);
    filter: drop-shadow(0 0 8px rgba(255, 214, 102, 0.6));
  }
}

/* ✨ 找到隱患的爆閃特效：金色閃光 + 星星四散 */
.burst-flash {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 214, 102, 0.8) 35%,
    rgba(255, 214, 102, 0) 72%
  );
  pointer-events: none;
  z-index: 65;
  animation: burst-flash-anim 0.5s ease-out forwards;
}
@keyframes burst-flash-anim {
  0% { transform: translate(-50%, -50%) scale(0.15); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(2.3); opacity: 0; }
}
.sparkle {
  position: absolute;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #fff6c9, #ffcb3d);
  clip-path: polygon(
    50% 0%, 61% 39%, 100% 50%, 61% 61%,
    50% 100%, 39% 61%, 0% 50%, 39% 39%
  );
  pointer-events: none;
  z-index: 66;
  animation: sparkle-fly 0.65s ease-out forwards;
}
@keyframes sparkle-fly {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.3); opacity: 1; }
  60% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(220deg) scale(0.85);
    opacity: 0;
  }
}

/* 右上角：隱患尋找進度（放大鏡圖示） */
#hazard-tracker {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 50;
  display: flex;
  pointer-events: none;
}
.tracker-slot {
  width: 156px;
  height: 156px;
  margin-left: -10px;
  background-image: url("./assets/07.放大鏡.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(1) opacity(0.55) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  transition: filter 0.2s;
}
.tracker-slot:first-child {
  margin-left: 0;
}
.tracker-slot.found {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}
.tracker-slot.landed {
  animation: slot-landed-bounce 0.5s ease-out;
}
@keyframes slot-landed-bounce {
  0% { transform: scale(1); }
  30% {
    transform: scale(1.5);
    filter: drop-shadow(0 0 22px rgba(255, 214, 102, 1));
  }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* HUD */
#level-hud {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 50;
}
/* 兩行顯示：第一行3顆、第二行2顆，靠左對齊 */
#lives-row {
  display: flex;
  flex-wrap: wrap;
  width: 360px;
  gap: 8px;
}
.life-heart {
  width: 114px;
  height: 114px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: center;
}
.life-heart.alive {
  animation: heart-breathe 1.8s ease-in-out infinite;
}
@keyframes heart-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

/* 小鹿提示區：固定顯示在畫面右下角 */
#mascot-area {
  position: absolute;
  right: 20px;
  bottom: 0px;
  z-index: 55;
  width: 460px;
  /* 小鹿是純裝飾/提示用途，不應該擋住底下隱患的點擊範圍 */
  pointer-events: none;
}
#mascot-image {
  display: block;
  width: 460px;
  filter: drop-shadow(4px 6px 6px rgba(0,0,0,0.3));
  transform-origin: bottom center;
  animation: mascot-breathe 2.6s ease-in-out infinite;
}
@keyframes mascot-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.025, 1.05); }
}
#mascot-dialog {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 18px;
  width: 760px;
  background: #fff8e0;
  border: 5px solid #ffcb6b;
  border-radius: 28px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transform-origin: bottom right;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
#mascot-dialog.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#mascot-dialog::after {
  content: "";
  position: absolute;
  right: 70px;
  bottom: -24px;
  border-width: 16px 16px 0 16px;
  border-style: solid;
  border-color: #ffcb6b transparent transparent transparent;
}
#mascot-dialog-icon {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}
#mascot-dialog-text {
  font-size: 64px;
  font-weight: bold;
  color: #6b4a2b;
  line-height: 1.3;
}

/* 關卡開場提示 */
#level-intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.55);
  z-index: 80;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#level-intro-overlay.show {
  display: flex;
}
#level-intro-magnifier {
  width: 180px;
  margin-bottom: 20px;
  animation: mag-swing 2.5s ease-in-out infinite;
}
#level-intro-title {
  font-size: 90px;
  font-weight: bold;
  color: #fff;
  text-shadow: 3px 3px 10px rgba(0,0,0,0.6);
  margin-bottom: 20px;
}
#level-intro-text {
  font-size: 64px;
  font-weight: bold;
  color: #ffe082;
  margin-bottom: 40px;
}

/* ==========================================
   🏆 過關 / 💀 失敗 / 🎉 分享 畫面（共用外框樣式）
   ========================================== */
#gameover-screen,
#share-screen {
  background-image: url("./assets/07.場景_遊戲背景.png");
  z-index: 100;
  cursor: pointer;
}

/* 過關畫面：沿用剛才那一關的場景背景（由 JS 動態設定），疊上黑色半透明遮罩 */
#stage-clear-screen {
  z-index: 100;
  cursor: pointer;
}
#stage-clear-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

/* 💀 失敗畫面：版面跟 🎉 全破分享畫面一致（外框/圖片/文字大小位置相同），只差按鈕數量 */
#gameover-frame {
  position: absolute;
  width: 1300px;
  height: 680px;
  background-image: url("./assets/07.場景_遊戲說明外框_無字.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#gameover-character {
  position: absolute;
  width: 600px;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}

/* 🎉 全破分享畫面：外框縮小一點，讓上方「通過考驗」banner 跟下方按鈕都留得下空間 */
#share-frame {
  position: absolute;
  width: 1300px;
  height: 680px;
  background-image: url("./assets/07.場景_遊戲說明外框_無字.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#share-character {
  position: absolute;
  width: 600px;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}

#share-title {
  position: absolute;
  width: 1100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 88px;
  font-weight: bold;
  color: #6b4a2b;
  text-shadow: 2px 2px 0 #fff8e0;
  line-height: 1.3;
}

/* 過關畫面：只呈現恭喜過關標題圖檔（保留彩帶動畫），上下左右置中 */
#stage-clear-title {
  position: absolute;
  width: 1260px;
  height: 504px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("./assets/01.ui_victory.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}

#gameover-text {
  position: absolute;
  width: 1100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 88px;
  font-weight: bold;
  color: #6b4a2b;
  text-shadow: 2px 2px 0 #fff8e0;
  line-height: 1.3;
  margin: 0;
}

#gameover-buttons-container {
  position: absolute;
  left: 50%;
  top: 910px;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
}

/* 🎉 全破分享畫面：按鈕放在外框下方（外框縮小後，下面留出的空間） */
#share-buttons-container {
  position: absolute;
  left: 50%;
  top: 910px;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
}

.img-btn-restart {
  background-image: url("./assets/01.btn_restart_normal.png");
}
.img-btn-share {
  background-image: url("./assets/01.btn_share_normal.png");
}