/* ========================================= */
/* 解決手機長按選取物件與預設選單問題          */
/* ========================================= */
body,
#game-container,
img {
  /* 禁止文字與物件被反白選取 */
  -webkit-user-select: none;
  user-select: none;

  /* 禁止 iOS 長按圖片跳出「儲存圖片」的選單 */
  -webkit-touch-callout: none;

  /* 防止瀏覽器預設的雙擊縮放或滑動手勢干擾操作 */
  touch-action: none;
}

/* 確保遊戲內的按鈕依然可以正常點擊 */
button {
  pointer-events: auto;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

html, body {
  background-color: #111; /* 外圍改為深色，突顯遊戲範圍 */
  overflow: hidden;
  font-family: "Microsoft JhengHei", sans-serif;
  
  /* 【關鍵防護罩】禁止系統自動放大或縮小字體 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#game-wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* 確保不論視窗多大，比例皆鎖死在 1920*1080，由 JS 控制縮放 */
#game-container {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  /* transform: translate(-50%, -50%) 會在 JS 裡寫入 */
  background-image: url("assets/05.遊戲畫面.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* UI 介面 */
#ui-layer {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

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

/* --- 生命值愛心動畫 --- */
.heart {
  width: 80px;
  height: auto;
  object-fit: contain;
  /* 新增懸浮動畫 */
  animation: heartFloat 2s infinite ease-in-out;
}

/* 讓不同愛心有不同的浮動延遲，製造波浪感 */
.heart:nth-child(1) {
  animation-delay: 0s;
}
.heart:nth-child(2) {
  animation-delay: 0.2s;
}
.heart:nth-child(3) {
  animation-delay: 0.4s;
}
.heart:nth-child(4) {
  animation-delay: 0.6s;
}
.heart:nth-child(5) {
  animation-delay: 0.8s;
}

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

/* 扣除生命值時的震動與閃紅光動畫 */
.heart-lose {
  /* 使用 !important 暫時覆蓋掉原本的懸浮動畫 */
  animation: heartLose 0.5s ease-out !important;
}
@keyframes heartLose {
  0% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 0 red);
  }
  25% {
    transform: scale(1.3) translateX(-5px);
    filter: drop-shadow(0 0 10px red);
  }
  50% {
    transform: scale(1.3) translateX(5px);
    filter: brightness(0.5);
  }
  75% {
    transform: scale(1.3) translateX(-5px);
    filter: drop-shadow(0 0 10px red);
  }
  100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 0 transparent);
  }
}

#timer-container {
  position: relative;
  width: 400px;
}

#timer-bg {
  width: 100%;
  top: 30px; /* 距離上方的距離 */
  right: 50px; /* 距離右側的距離 */
  display: block;
}

#timer-text {
  position: absolute;
  top: 57%;
  right: 100px;
  transform: translateY(-50%);
  font-size: 72px;
  font-weight: bold;
  color: #333;
}

/* 遊戲角色 */
#player {
  position: absolute;
  bottom: 30px;
  left: 810px;
  width: 300px;
  height: auto;
  z-index: 5;
  pointer-events: none;
}

/* --- 食物掉落與搖擺動畫 --- */
.falling-item {
  position: absolute;
  width: 180px;
  height: auto;
  z-index: 4;
  /* 新增搖擺動畫 */
  animation: foodWobble 2s infinite ease-in-out;
}
@keyframes foodWobble {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

/* 通用遮罩 */
#overlay,
#result-screen,
#quiz-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20;
  color: white;
}

/* ========================================= */
/* 宣導問答外框 (等比例縮放版，不跑版、無卷軸) */
/* ========================================= */
#quiz-box {
  width: 100%;
  max-width: 2000px;
  /* 移除絕對鎖死的比例與高度，改為彈性限制 */
  height: 85%;
  max-height: 1000px;
  background-image: url("assets/05. 遊戲說明框_無字.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 5% 8% 5% 8%;
  color: #4a2e15;
  box-sizing: border-box;

  /* 【手機修正】若手機把系統文字調大，整個木框內容可能超出高度，
     這裡讓木框本身也能上下滑動，避免選項被擠到畫面外按不到 */
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#quiz-title-text {
  /* 字體大小改為動態縮放 */
  font-size: clamp(46px, 3vw, 54px); 
  font-weight: bold;
  margin-bottom: 6%; /* 間距跟著縮放 */
  text-align: center;
  color: #ffffff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

#quiz-question-text {
  width: 85%;
  font-size: clamp(54px, 3.5vw, 64px); 
  line-height: 1.3;
  text-align: center;
  margin-bottom: 2%; 
  font-weight: bold;
  
  /* 【關鍵 1】如果題目被系統放得太大，允許在原地上下滑動 */
  max-height: 30vh;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#quiz-options {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  width: 85%;

  /* 【關鍵 2】如果按鈕被系統放得太大，允許在原地上下滑動，不會掉出木板 */
  flex-grow: 1;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px; /* 底部留一點白，滑動時比較好看 */
}

.quiz-btn {
  background-color: #ffeed3;
  /* 邊框粗細也稍微給一點彈性 */
  border: clamp(2px, 0.3vw, 4px) solid #c28851; 
  border-radius: 20px;
  padding: 1.5% 3%;
  font-size: clamp(36px, 2.5vw, 48px);
  font-weight: bold;
  color: #4a2e15;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  text-align: left;
}

.quiz-btn:hover {
  background-color: #ffd8a0;
  transform: scale(1.02);
}

.quiz-btn:active {
  transform: scale(0.98);
}

/* 關卡提示與倒數 */
#level-title {
  font-size: 180px; /* 稍微把字體再放大一點 */
  font-weight: 900; /* 使用最粗的字重 */
  margin-bottom: 10px;
  letter-spacing: 8px; /* 增加一點字距，看起來更有氣勢 */

  /* 製作由淺黃到亮橘色的漸層文字 */
  background: linear-gradient(to bottom, #ffffcc 0%, #ff9900 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* 使用 drop-shadow 製作出立體陰影，讓字體有浮出來的感覺 */
  filter: drop-shadow(5px 10px 5px rgba(0, 0, 0, 0.6));
}

#countdown {
  font-size: 180px; /* 數字大小 */
  font-weight: 900; /* 最粗字體 */
  color: #ffffff; /* 純白色字體 */

  /* 保留立體陰影，讓白色字體在遊戲背景上不會不清楚 */
  filter: drop-shadow(5px 10px 5px rgba(0, 0, 0, 0.6));
}

.hidden {
  display: none !important;
}

/* --- 宣導問答動畫效果 --- */

/* 答錯：紅色框框 + 晃動兩下 */
.quiz-wrong {
  border: 5px solid #ff3333 !important;
  animation: quizShake 0.25s ease-in-out 2; /* 0.25s 執行 2 次 = 晃動兩下 */
}

@keyframes quizShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-12px);
  }
  75% {
    transform: translateX(12px);
  }
}

/* 答對：閃爍綠色框框與光芒兩次 */
.quiz-correct {
  border: 5px solid #4caf50 !important;
  animation: quizFlash 0.5s ease-in-out 2; /* 0.5s 執行 2 次 = 閃爍兩下 */
}

@keyframes quizFlash {
  0%,
  100% {
    border-color: #4caf50;
    box-shadow: 0 0 10px #4caf50;
  }
  50% {
    border-color: #81c784;
    box-shadow: 0 0 30px #4caf50;
  }
}

/* --- 主角動畫設定 --- */

/* 1. 移動時的彈跳動畫 (調高頻率) */
.player-moving {
  /* 將 0.25s 改為 0.08s，讓跳動頻率變很高 */
  animation: playerWalk 0.08s infinite alternate ease-in-out;
}
@keyframes playerWalk {
  0% {
    margin-bottom: 0px;
  }
  100% {
    margin-bottom: 15px;
  }
}

/* 2. 接到健康食物：開心跳躍並散發金色光芒 */
.player-happy {
  animation: playerHappy 0.5s ease-out;
}
@keyframes playerHappy {
  0% {
    margin-bottom: 0px;
    filter: drop-shadow(0 0 0px transparent);
  }
  50% {
    margin-bottom: 50px;
    filter: drop-shadow(0 0 20px #ffd700);
  }
  100% {
    margin-bottom: 0px;
    filter: drop-shadow(0 0 0px transparent);
  }
}

/* 3. 接到不健康食物：左右晃動發抖 (移除黑白濾鏡) */
.player-sad {
  animation: playerSad 0.5s ease-in-out;
}
@keyframes playerSad {
  /* 拿掉了 grayscale 濾鏡，只保留晃動與稍微變暗的效果 */
  0% {
    margin-left: 0px;
    filter: brightness(1);
  }
  20% {
    margin-left: -15px;
    filter: brightness(0.8);
  }
  40% {
    margin-left: 15px;
    filter: brightness(0.8);
  }
  60% {
    margin-left: -15px;
    filter: brightness(0.8);
  }
  80% {
    margin-left: 15px;
    filter: brightness(0.8);
  }
  100% {
    margin-left: 0px;
    filter: brightness(1);
  }
}

/* --- 食物掉落地面消失動畫 --- */
.food-splat {
  /* 加入 !important 是為了強制覆蓋掉原本空中搖擺的 transform 動畫 */
  animation: foodSplat 0.3s ease-out forwards !important;
}

@keyframes foodSplat {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: brightness(1);
  }
  100% {
    /* X軸稍微拉寬、Y軸壓扁，製造撞擊地面的軟彈感，並逐漸透明 */
    transform: scale(1.3, 0.5) translateY(50px);
    opacity: 0;
    filter: brightness(0.5);
  }
}

/* =========================================
   標題畫面樣式
   ========================================= */
#title-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景圖設定 */
  background-image: url("assets/05. 主畫面.png");
  background-size: cover;
  background-position: center;
  z-index: 50; /* 確保標題畫面蓋在最上層 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 遊戲標題文字圖片 */
#title-text {
  position: absolute;
  top: 200px; /* 📍【調整位置】距離上方的距離 */
  width: 65%; /* 📍【調整大小】標題的寬度 (高度會自動等比例縮放) */
  height: auto;
}

/* 左下角主角圖片 */
#title-character {
  position: absolute;
  bottom: 10px; /* 📍【調整位置】距離下方的距離 */
  left: 100px; /* 📍【調整位置】距離左側的距離 */
  width: 500px; /* 📍【調整大小】主角的寬度 */
  height: auto;
}

/* 開始遊戲按鈕 */
#start-btn {
  position: absolute;
  bottom: 150px; /* 📍【調整位置】距離下方的距離 */
  /* 若想左右偏移，可加入 left: 500px; 或是 right: ... */

  width: 600px; /* 📍【調整大小】按鈕的寬度 */
  height: 200px; /* 📍【調整大小】按鈕的高度 */

  /* 預設一般狀態的按鈕圖 */
  background-image: url("assets/01.btn_start_normal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

/* 滑鼠移上去時微微放大 */
#start-btn:hover {
  transform: scale(1.05);
}

/* 滑鼠按下去的瞬間：換圖並稍微縮小 */
#start-btn:active {
  background-image: url("assets/01.btn_start_pressed.png");
  transform: scale(0.95);
}

/* =========================================
   遊戲說明畫面樣式
   ========================================= */
#instruction-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 45; /* 確保在遊戲畫面上方 */
}

/* =========================================
   點擊螢幕提示文字與閃爍動畫
   ========================================= */
#instruction-hint {
  position: absolute;
  bottom: 50px; /* 距離畫面最下方 50px */
  width: 100%;
  text-align: center;
  color: #ffffff; /* 白色文字 */
  font-size: 45px; /* 字體大小 */
  font-weight: bold;
  letter-spacing: 5px; /* 增加字距更美觀 */
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8); /* 深色陰影凸顯文字 */
  animation: slowBlink 2s infinite ease-in-out; /* 慢速閃爍動畫 (2秒一次循環) */
  pointer-events: none; /* 讓點擊事件穿透文字，確保點哪都能觸發 */
}

@keyframes slowBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  } /* 變暗但不會完全消失，效果較柔和 */
}

/* =========================================
   勝利結算畫面樣式
   ========================================= */
#victory-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景加入一點半透明黑，讓後方遊戲畫面變暗，突顯結算視窗 */
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 60;
}

#victory-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* 勝利外框圖 */
#victory-frame {
  width: 1600px; /* 📍【調整大小】結算外框寬度 */
  height: auto;
  margin-bottom: 150px; /* 📍【調整位置】與下方按鈕的距離 */
}

/* 按鈕容器 (讓兩個按鈕左右並排) */
#victory-btns {
  display: flex;
  gap: 50px; /* 兩個按鈕之間的距離 */
  position: absolute;
  bottom: 40px; /* 這裡設定距離底部的距離 */
  justify-content: center;
}

/* 再玩一次 & 邀請好友按鈕 */
.action-btn {
  width: 400px; /* 📍【調整大小】按鈕寬度 */
  height: auto;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

.action-btn:hover {
  transform: scale(1.05);
}
.action-btn:active {
  transform: scale(0.95);
}

/* 左下角開心小鹿 */
#victory-character {
  position: absolute;
  bottom: 30px; /* 📍【調整位置】距離底部 */
  left: 80px; /* 📍【調整位置】距離左側 */
  width: 450px; /* 📍【調整大小】小鹿寬度 */
  z-index: 3;
  transform-origin: bottom center; /* 設定搖擺的圓心在正下方 */
  /* 綁定搖擺動畫 */
  animation: happyDeerSwing 2s infinite ease-in-out;
}

/* 開心小鹿的鏡像與搖擺動畫 */
@keyframes happyDeerSwing {
  0% {
    transform: scaleX(-1) rotate(-8deg);
  }
  50% {
    transform: scaleX(-1) rotate(8deg);
  }
  100% {
    transform: scaleX(-1) rotate(-8deg);
  }
}

/* =========================================
   挑戰失敗畫面樣式
   ========================================= */
#result-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 若不想要背景變暗，可以設為 transparent */
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 60;
}

#fail-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: -50px; /* 稍微往上移一點，讓版面置中 */
}

/* 失敗標題圖檔 */
#fail-title {
  width: 700px; /* 📍【調整大小】標題寬度 */
  height: auto;
  margin-bottom: -250px; /* 產生負邊距，讓標題疊在下方木框的上邊緣 */
  z-index: 3;
}

/* 中間木板說明框 */
#fail-box {
  width: 1800px; /* 📍【調整大小】木框寬度 */
  height: 1000px; /* 📍【調整大小】木框高度 */
  background-image: url("assets/05. 遊戲說明框_無字.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 80px; /* 留出空間給上方的重疊標題 */
}

/* 失敗文字設定 */
.fail-text {
  font-size: 120px;
  font-weight: bold;
  color: #4a2e15; /* 深咖啡色文字配木板 */
  text-align: center;
  line-height: 1.6;
  margin-bottom: 10px; /* 與下方按鈕的距離 */
}

/* 左下角哭哭小鹿 */
#fail-character {
  position: absolute;
  bottom: 30px; /* 📍【調整位置】距離底部 */
  left: 80px; /* 📍【調整位置】距離左側 */
  width: 450px; /* 📍【調整大小】小鹿寬度 */
  z-index: 3;
  transform-origin: bottom center;
  /* 綁定抽泣動畫 */
  animation: cryingSob 1.5s infinite ease-in-out;
}

/* 抽泣動畫設計：左右鏡像，並加入輕微的上下縮放與發抖，模擬哭泣抽動感 */
@keyframes cryingSob {
  0%,
  100% {
    transform: scaleX(-1) translateY(0) scaleY(1);
  }
  25% {
    transform: scaleX(-1) translateY(-5px) scaleY(1.02);
  } /* 稍微吸氣抬起 */
  50% {
    transform: scaleX(-1) translateY(0) scaleY(0.95);
  } /* 往下縮、啜泣 */
  75% {
    transform: scaleX(-1) translateY(-3px) scaleY(1.01);
  } /* 輕微抽動 */
}

/* =========================================
   靜音按鈕樣式
   ========================================= */
#mute-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition:
    background-color 0.2s,
    transform 0.1s;
  user-select: none;
}

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

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

/* ========================================= */
/* 讀取畫面樣式                              */
/* ========================================= */
#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;
}

/* 白色圓圈：改為響應式縮放，最大 250px */
.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: 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(20px, 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% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 讀取條外框：寬度改用百分比適應手機螢幕 */
.progress-bar-container {
  width: 80%;
  max-width: 400px;
  height: 24px;
  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(16px, 4vw, 24px);
  font-weight: bold;
}

/* ========================================= */
/* 橫式螢幕提示遮罩 (僅在直立手機時顯示)       */
/* ========================================= */
#orientation-warning {
  display: none; /* 預設隱藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  z-index: 100000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: sans-serif;
  cursor: pointer; /* 提示使用者這是一個可以點擊的區塊 */
}

.warning-content {
  padding: 20px;
}

/* 單一旋轉手機 icon */
.rotate-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: rotatePhone 2s infinite ease-in-out;
}

@keyframes rotatePhone {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#orientation-warning h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

#orientation-warning p {
  font-size: 16px;
  line-height: 1.5;
  color: #ccc;
}

/* 點擊繼續的小字提示 */
.click-to-continue {
  margin-top: 25px;
  font-size: 14px !important;
  color: #888 !important;
  animation: blinkText 1.5s infinite;
}

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

/* 偵測：如果是手機尺寸，且處於「直立 (portrait)」狀態，就顯示遮罩 */
@media screen and (max-width: 1024px) and (orientation: portrait) {
  #orientation-warning {
    display: flex;
  }
}

/* 透過 JS 加入此 class 來強制關閉遮罩 (覆蓋掉 @media 的顯示) */
#orientation-warning.force-hide {
  display: none !important;
}

/* ========================================= */
/* 手機版專用：左右控制按鈕                  */
/* ========================================= */
#mobile-controls {
  display: none; /* 預設電腦版隱藏 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 讓容器不要擋住中間畫面的點擊 */
  z-index: 9000; /* 確保在畫面上層，但比過關選單低 */
}

/* 虛擬按鍵樣式 (方案 A：左右滿版極限大小) */
.mobile-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45vw; /* 將近螢幕一半的寬度 */
  height: 45vw;
  max-width: 400px;
  max-height: 400px;
  background-color: rgba(255, 255, 255, 0.2); /* 調低透明度以免太刺眼 */
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 30px; /* 改為圓角矩形更貼合邊緣 */
  color: white;
  font-size: 15vw;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background-color 0.1s;
}

/* 按下去時的視覺回饋 */
.mobile-btn:active {
  background-color: rgba(255, 255, 255, 0.7);
}

/* 左邊按鈕靠左 */
#btn-left {
  left: 5%;
}

/* 右邊按鈕靠右 */
#btn-right {
  right: 5%;
}

/* 當設備支援觸控 (手機、各尺寸平板) 或螢幕寬度小於 1366px 時顯示按鈕 */
@media (pointer: coarse), screen and (max-width: 1200px) {
  #mobile-controls {
    display: block;
  }
}