/* 基礎重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
}

/* ========================================= */
/* 消除手機端點擊時出現的黑色半透明方塊 */
/* ========================================= */
* {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* ========================================= */
/* 讀取畫面樣式                              */
/* ========================================= */
#loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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: 350px;
  height: 40vw;
  max-height: 350px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  overflow: hidden;
}

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

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

.loading-text {
  font-size: clamp(50px, 5vw, 32px);
  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;
  }
  30%,
  70% {
    opacity: 1;
  }
}

.progress-bar-container {
  width: 80%;
  max-width: 800px;
  height: 40px;
  border: 3px solid white;
  border-radius: 12px;
  padding: 2px;
  margin-bottom: 15px;
}

#progress-fill {
  height: 100%;
  background-color: white;
  width: 0%;
  border-radius: 6px;
  transition: width 0.1s linear;
}

#progress-percent {
  font-size: clamp(40px, 4vw, 24px);
  font-weight: bold;
}

/* =========================================
   標題畫面區塊
========================================= */
#title-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; /* 設定極高的 z-index，確保蓋住所有遊戲內容 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 備註：若您的檔案名稱為 06.主背景.png，請自行更改下方網址 */
  background-image: url("assets/06.主畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.title-img {
  position: absolute;
  top: 10%; /* 依據示意圖調整標題高度 */
  width: 1400px; /* 放大標題讓它更醒目 */
  z-index: 5;
}

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

.title-char {
  position: absolute;
  bottom: 50px;
  left: 100px; /* 放置於左下角 */
  width: 450px;
  z-index: 5;
}

/* 開始按鈕設定 (包含正常與點擊狀態) */
#btn-start {
  position: absolute;
  bottom: 12%; /* 放置於中下方 */
  width: 500px;
  height: 300px;
  background-image: url("assets/01.btn_start_normal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.1s;
}

/* 滑鼠懸停時微幅放大 */
#btn-start:hover {
  transform: scale(1.05);
}

/* 點擊時切換圖片並微幅縮小產生打擊感 */
#btn-start:active {
  background-image: url("assets/01.btn_start_pressed.png");
  transform: scale(0.95);
}

body {
  background-color: #111; /* 視窗縮放時旁邊的黑邊顏色 */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative; /* 讓內部絕對定位的元素有對齊基準 */
}

/* 遊戲主容器：固定 1920x1080，透過 JS 控制縮放與置中 */
#game-container {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left top; /* 重要！將縮放基準設為左上角 */
  overflow: hidden;
  background-color: #000;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/06.遊戲畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* 頂部資訊區 */
#top-bar {
  position: absolute;
  top: 30px;
  left: 50px;
  right: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 10;
  pointer-events: none; /* 🟢 新增：讓整個頂部區域不阻擋點擊 */
}

#question-area {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 30px 40px;
  border-radius: 20px;
  width: 100%; /* 設為 100% 滿版 (會受限於 top-bar 的左右 50px 邊距) */
  max-width: none; /* 移除原本 75% 的限制 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#question-text {
  font-size: 60px;
  color: #333;
  line-height: 1.4;
}

#hp-area {
  display: flex;
  gap: 15px;
  align-self: flex-end; /* 讓愛心對齊右下角，視覺上較平衡也不會擋住中央 */
}

#hp-area img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* 遊戲區塊 (泡泡) */
#play-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none; /* 讓容器不阻擋點擊，僅內容物可點擊 */
}

.bubble {
  position: absolute;
  pointer-events: auto; /* 泡泡本身可點擊 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 68px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.1s;
}

.bubble:active {
  transform: scale(0.95);
}

.bubble-text {
  padding: 20px;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 增加文字辨識度 */
}

/* 背包區 (左下角) */
#backpack-area {
  position: absolute;
  bottom: 10px;
  left: 20px;
  width: 350px;
  height: 350px;
}

/* 確保背包底圖與前緣完全重疊且等比例縮放 */
.backpack-back,
.backpack-front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* 讓背包圖片不阻擋點擊 */
}

.backpack-back {
  z-index: 21;
}

.backpack-front {
  z-index: 25; /* 前緣在最上層，夾住飛進來的星星 */
}

#backpack-target {
  position: absolute;
  bottom: 150px;
  left: 200px;
  width: 1px;
  height: 1px;
}

/* 主角區 (右下角) */
#character-area {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 400px;
  z-index: 20;
}

#character-img {
  width: 100%;
  transform: scaleX(-1);
  transition: all 0.3s ease;
  pointer-events: none; /* 讓主角圖片不阻擋點擊 */
}

/* 飛入的星星 (獨立元素) */
.flying-star {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 23; /* 確保夾在背包圖層中間 */
  pointer-events: none;

  /* 捨棄 transition，改用 3 個獨立的 keyframes 同時運作 */
  animation:
    flyX 0.8s linear forwards,
    flyY 0.8s forwards,
    starSpinAndScale 0.8s forwards;
}

/* X軸：等速平移 */
@keyframes flyX {
  0% {
    left: var(--startX);
  }
  100% {
    left: var(--targetX);
  }
}

/* Y軸：拋物線 (先向上飛到 peakY，再落下到 targetY) */
@keyframes flyY {
  0% {
    top: var(--startY);
    animation-timing-function: ease-out;
  }
  50% {
    top: var(--peakY);
    animation-timing-function: ease-in;
  }
  100% {
    top: var(--targetY);
  }
}

/* 旋轉與最後的縮放大小 */
@keyframes starSpinAndScale {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    /* 🌟 放大：將縮放從原本的 0.5 調大到 0.85，星星就會看起來很大顆！ */
    transform: scale(0.85) rotate(720deg);
  }
}

/* 星星收集進度區 */
#star-collection {
  position: absolute;
  bottom: 330px; /* 放在背包的上方 */
  left: 80px;
  display: flex;
  flex-direction: column-reverse; /* 由下往上排列 */
  flex-wrap: wrap; /* 超過高度時自動換到第二行 */
  max-height: 550px; /* 限制高度，確保第 6 顆星星會換行 */
  gap: 15px;
  z-index: 10;
  pointer-events: none;
}

.star-slot {
  width: 90px;
  height: 90px;
  border: 6px dashed rgba(5, 5, 5, 0.844);
  border-radius: 50%; /* 圓形虛線框 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s;
}

/* 收集到星星後填滿的狀態 */
.star-slot.filled {
  border: none;
  background-image: url("assets/06.星星.png");
  transform: scale(1.2); /* 剛填滿時稍微放大突顯 */
}

/* 關卡開始與過關提示 Overlay */
#level-start-overlay,
#victory-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100; /* 確保動畫在最上層 */
  pointer-events: none; /* 動畫圖層不阻擋點擊 */
}

.hidden {
  display: none !important;
}

#level-start-text {
  font-size: 150px;
  color: #fff;
  text-shadow: 0 0 30px rgba(0, 0, 0, 1);
  font-weight: bold;
  letter-spacing: 15px;
}

#victory-overlay img {
  max-width: 1000px; /* 控制過關圖片大小 */
}

/* 彈出與縮回的 2.5 秒動畫 */
.popup-anim {
  animation: popup 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popup {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  15% {
    transform: scale(1.1);
    opacity: 1;
  }
  25% {
    transform: scale(1);
    opacity: 1;
  }
  75% {
    transform: scale(1);
    opacity: 1;
  }
  90% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* =========================================
   遊戲特效動畫區 (Animations)
========================================= */

/* 1. 生命值飄動 (持續撲通) */
@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
#hp-area img {
  animation: heartbeat 2s infinite ease-in-out;
}

/* 2. 生命值減少 (受擊震動與紅光) */
@keyframes hpDamage {
  0% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
  20% {
    transform: translateX(-10px) scale(1.2);
    filter: brightness(1.5) drop-shadow(0 0 10px red);
  }
  40% {
    transform: translateX(10px) scale(1.1);
  }
  60% {
    transform: translateX(-10px) scale(1);
  }
  80% {
    transform: translateX(10px) scale(1);
  }
  100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
}
.hp-damage-anim {
  animation: hpDamage 0.5s ease-out !important;
}

/* 3. 星星收集區 (填滿時的閃耀特效) */
@keyframes starFillGlow {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 235, 59, 0));
  }
  50% {
    transform: scale(1.6);
    filter: drop-shadow(0 0 20px rgba(255, 235, 59, 1));
  }
  100% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 0 rgba(255, 235, 59, 0));
  }
}
/* 覆蓋原本的 .star-slot.filled，加上動畫 */
.star-slot.filled {
  border: none;
  background-image: url("assets/06.星星.png");
  animation: starFillGlow 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 5. 答對時的主角 (開心跳躍) */
@keyframes charHappyJump {
  0% {
    transform: scaleX(-1) translateY(0);
  }
  25% {
    transform: scaleX(-1) translateY(-40px);
  }
  50% {
    transform: scaleX(-1) translateY(0);
  }
  75% {
    transform: scaleX(-1) translateY(-20px);
  }
  100% {
    transform: scaleX(-1) translateY(0);
  }
}
.char-happy-anim {
  animation: charHappyJump 0.6s ease-in-out !important;
}

/* 6. 答錯時的主角 (懊惱發抖) */
@keyframes charSadShake {
  0% {
    transform: scaleX(-1) translateX(0);
  }
  20% {
    transform: scaleX(-1) translateX(-15px) rotate(-5deg);
  }
  40% {
    transform: scaleX(-1) translateX(15px) rotate(5deg);
  }
  60% {
    transform: scaleX(-1) translateX(-15px) rotate(-5deg);
  }
  80% {
    transform: scaleX(-1) translateX(15px) rotate(5deg);
  }
  100% {
    transform: scaleX(-1) translateX(0);
  }
}
.char-sad-anim {
  animation: charSadShake 0.5s ease-in-out !important;
}

/* 7. 換題目時 (題目進場降落) */
@keyframes questionEnter {
  0% {
    opacity: 0;
    transform: translateY(-80px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.question-enter-anim {
  animation: questionEnter 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* =========================================
   遊戲說明畫面區塊
========================================= */
#instruction-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 900; /* 高於遊戲，但低於標題畫面 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* 讓滑鼠變成手指，提示可點擊 */
}

.instruction-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/06.遊戲畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.instruction-img {
  position: relative;
  z-index: 5;
  max-width: 1800px; /* 依照版面比例調整框框大小 */
  width: 100%;
  bottom: 2%;
}

.instruction-text {
  position: absolute;
  bottom: 4%; /* 放在畫面中下方 */
  z-index: 5;
  font-size: 45px;
  color: #fff;
  text-shadow:
    0 0 15px rgba(0, 0, 0, 0.8),
    3px 3px 6px rgba(0, 0, 0, 1);
  font-weight: bold;
  letter-spacing: 5px;
  animation: slowBlink 2s infinite ease-in-out; /* 套用慢速閃爍 */
}

/* 慢速閃爍動畫 */
@keyframes slowBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* =========================================
   挑戰成功畫面區塊
========================================= */
#success-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 950; /* 高於遊戲，低於標題畫面 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.success-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/06.遊戲畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.success-img {
  position: relative;
  z-index: 5;
  max-width: 1600px; /* 依照比例調整圖片大小 */
  width: 80%;
  margin-bottom: 20px;
  transform: translateY(-0px); /* 讓圖案偏上方一點 */
}

/* 讓兩個按鈕水平並排 */
.success-buttons {
  position: relative;
  bottom: 50px;
  z-index: 5;
  display: flex;
  gap: 50px; /* 兩個按鈕的間距 */
  transform: translateY(-20px);
}

/* 共用按鈕樣式設定 */
#btn-restart,
#btn-share {
  width: 400px;
  height: 220px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.1s;
}

/* 個別帶入按鈕圖片 */
#btn-restart {
  background-image: url("assets/01.btn_restart_normal.png");
}
#btn-share {
  background-image: url("assets/01.btn_share_normal.png");
}

/* 按鈕點擊與懸停特效 */
#btn-restart:hover,
#btn-share:hover {
  transform: scale(1.05);
}
#btn-restart:active,
#btn-share:active {
  transform: scale(0.95);
}

/* 左下角小鹿與搖擺動畫 */
.success-char {
  position: absolute;
  bottom: 50px;
  left: 80px; /* 放置於左下角 */
  width: 450px;
  z-index: 5;
  animation: deerSway 2s infinite ease-in-out;
  transform-origin: bottom center; /* 讓搖擺的軸心在腳底 */
}

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

/* =========================================
   闖關失敗畫面區塊
========================================= */
#gameover-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gameover-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/06.遊戲畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.gameover-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

/* 失敗標題，往上偏移以達到重疊效果 */
.gameover-title {
  position: absolute;
  top: -30px;
  z-index: 10;
  width: 700px;
}

/* 無字外框容器 */
.gameover-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gameover-box-img {
  width: 1700px;
  max-width: 150vw;
}

/* 框內文字設定 */
.gameover-text {
  position: absolute;
  top: 30%;
  font-size: 98px;
  color: #5c3a21; /* 使用溫暖的深咖啡色搭配木框 */
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 5px;
}

/* 失敗畫面的再玩一次按鈕 */
#btn-restart-fail {
  position: absolute;
  bottom: 18%;
  width: 400px;
  height: 220px;
  background-image: url("assets/01.btn_restart_normal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.1s;
  z-index: 10;
}

#btn-restart-fail:hover {
  transform: scale(1.05);
}
#btn-restart-fail:active {
  transform: scale(0.95);
}

/* 左下角哭哭小鹿與抽泣動畫 */
.gameover-char {
  position: absolute;
  bottom: 50px;
  left: 80px;
  width: 450px;
  z-index: 5;
  /* 這裡的動畫會自帶 scaleX(-1) 來維持鏡像 */
  animation: deerSob 1.5s infinite ease-in-out;
  transform-origin: bottom center;
}

/* 抽泣動畫：輕微的上下縮放與抖動 */
@keyframes deerSob {
  0%,
  100% {
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
  25% {
    transform: scaleX(-1) translateY(8px) rotate(-2deg);
  }
  50% {
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
  75% {
    transform: scaleX(-1) translateY(12px) rotate(1deg);
  }
}

/* =========================================
   全局靜音按鈕
========================================= */
#mute-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 70px;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  cursor: pointer;
  z-index: 9999; /* 確保永遠在最上層 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  user-select: none; /* 防止文字被反白 */
}

#mute-btn:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 1);
}

#mute-btn:active {
  transform: scale(0.95);
}

/* =========================================
   關卡重點統整畫面
========================================= */
#summary-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 910; /* 高於遊戲，但低於最終的成功/失敗畫面 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.summary-bg-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
  z-index: 1;
}

.summary-box {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.summary-box-img {
  width: 100%;
}

.summary-content {
  position: absolute;
  top: 15%;
  width: 75%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #5c3a21; /* 木質深咖啡色 */
}

.summary-title {
  font-size: 56px;
  margin: -35px 0 50px 0;
  border-bottom: 3px dashed #5c3a21;
  padding-bottom: 10px;
  letter-spacing: 2px;
}

#summary-question {
  font-size: 66px;
  font-weight: bold;
  text-align: left;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* 裝載答案標籤的容器 */
#summary-answers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  width: 100%;
}

/* 每一顆答案標籤的造型 */
.summary-answer-item {
  background-color: #fff3cd;
  border: 3px solid #ffc107;
  color: #856404;
  padding: 10px 25px;
  border-radius: 40px;
  font-size: 64px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ========================================= */
/* 🌟 新增：貓頭鷹導師視覺 (主畫面 & 遊戲畫面) */
/* ========================================= */

/* 1. 主畫面的貓頭鷹 (放在右下角，與左側小鹿遙相呼應) */
.title-owl {
  position: absolute;
  bottom: 50px; /* 貼近底部 */
  right: 350px; /* 靠畫面右側 */
  width: 320px; /* 標題畫面可以稍微大一點 */
  z-index: 10;
  pointer-events: none;
}

/* 2. 遊戲畫面的貓頭鷹 (移到左下角，背包的右邊) */
#owl-guide {
  position: absolute;
  bottom: 0px; /* 貼近底部 (與背包高度對齊) */
  left: 300px; /* 從左邊算起，設定 450px 剛好可以避開背包的寬度 */
  top: auto; /* 覆蓋原本的 top */
  right: auto; /* 覆蓋原本的 right */
  width: 200px; /* 遊戲內的貓頭鷹大小 */
  z-index: 30;
  pointer-events: none; /* 避免擋到後方飄過的泡泡點擊 */
  /* 🌟 新增：設定旋轉的中心點在「底部中央」，這樣搖擺起來就像雙腳站穩一樣自然 */
  transform-origin: bottom center;
  /* 🌟 改用專屬的搖擺動畫 */
  animation: owlSwing 2s infinite ease-in-out;
}

#owl-guide img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transform: scaleX(-1);
}

/* 🌟 新增：貓頭鷹左右搖擺的專屬動畫 */
@keyframes owlSwing {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}