:root {
  --bg-dark: #0a0e17;
  --bg-card: rgba(18, 26, 43, 0.85);
  --bg-card-hover: rgba(28, 41, 68, 0.95);
  --border-color: rgba(64, 116, 219, 0.35);
  --border-glow: rgba(0, 229, 255, 0.6);
  --text-main: #f0f4fc;
  --text-muted: #8b9bb4;
  --color-primary: #00e5ff;
  --color-accent: #ff0055;
  --color-gold: #ffb703;
  --color-green: #00f59b;
  --color-purple: #b5179e;
  --font-display: 'Chakra Petch', sans-serif;
  --font-text: 'Noto Sans TC', sans-serif;
}

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

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-dark);
  font-family: var(--font-text);
  color: var(--text-main);
  /* 行動裝置：擋掉下拉刷新、橡皮筋回彈與雙擊縮放 */
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: fixed;
  inset: 0;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* dvh 讓 iOS/Android 網址列收合時不會露出白邊 */
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #151b29 0%, #070a10 100%);
  margin: 0 auto;
  transition: width 0.25s ease, height 0.25s ease;
}

/* 螢幕視野方向模式 (橫屏 16:9 / 竪屏 9:16 / 自動) */
body.orient-portrait {
  background-color: #03060a;
  display: flex;
  align-items: center;
  justify-content: center;
}
#game-container.orient-portrait {
  width: min(100vw, calc(100dvh * 9 / 16));
  height: 100dvh;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 229, 255, 0.25);
}

body.orient-landscape {
  background-color: #03060a;
  display: flex;
  align-items: center;
  justify-content: center;
}
#game-container.orient-landscape {
  width: 100vw;
  height: min(100dvh, calc(100vw * 9 / 16));
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 229, 255, 0.25);
}

body.orient-auto,
#game-container.orient-auto {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  box-shadow: none;
}

/* 設定的視野方向與裝置實際方向不符時的提示（此時改用自動版面，避免 UI 擠在幾百像素寬的直條裡） */
#orient-hint {
  position: fixed;
  left: 50%;
  /* 貼在 HUD 下方：底部中間被 Q／R 技能鍵與波次提示占滿，放下面會互相蓋住 */
  top: max(100px, calc(env(safe-area-inset-top, 0px) + 100px));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(92vw, 460px);
  padding: 8px 13px;
  border-radius: 10px;
  background: rgba(9, 14, 24, 0.92);
  border: 1px solid rgba(110, 231, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  color: #cfe6f5;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#orient-hint.show { opacity: 1; transform: translate(-50%, 0); }
#orient-hint .oi-icon { font-size: 15px; line-height: 1; }

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ==================== 頂部 HUD ==================== */
/* HUD 後方漸層，避免文字在亮色場景中糊掉 */
#hud::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(4, 7, 13, 0.75) 0%, rgba(4, 7, 13, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

#hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           12px calc(16px + env(safe-area-inset-left));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

#exp-bar-container {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 22px;
  margin: 0 auto;
  background: rgba(10, 15, 25, 0.85);
  border: 2px solid rgba(0, 229, 255, 0.4);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.2);
}

#exp-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00b4d8, #00f59b);
  box-shadow: 0 0 12px rgba(0, 245, 155, 0.8);
  transition: width 0.15s ease-out;
}

#exp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

#status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: auto;
}

/* 任務提示：下一波 Boss 倒數 / 終極首領通關條件 */
.objective {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  margin-top: -4px;
  pointer-events: none;
  min-height: 16px;
}
.objective.urgent {
  color: #ff5e7e;
  animation: objectivePulse 1s ease-in-out infinite;
}
@keyframes objectivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.hud-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.hud-pill.timer-pill {
  color: var(--color-primary);
  border-color: rgba(0, 229, 255, 0.4);
}

.hud-pill.kills-pill {
  color: #ff5e7e;
  border-color: rgba(255, 94, 126, 0.4);
}

.hud-pill.gold-pill {
  color: var(--color-gold);
  border-color: rgba(255, 183, 3, 0.4);
}

.hud-pill.lives-pill {
  color: #ff8fa3;
  border-color: rgba(255, 94, 126, 0.4);
}
.hud-pill.lives-pill.danger {
  color: #fff;
  background: rgba(255, 0, 85, 0.45);
  animation: objectivePulse 1s ease-in-out infinite;
}

.facility-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 工事建造鈕移到畫面右側，與頂端資訊列分開 —— 後期資訊列已經擠到兩排，
   建造是「操作」不是「資訊」，混在一起既難按也把遊戲視野壓掉。 */
#action-bar .facility-bar {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  justify-content: center;
}

#action-bar .build-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  font-size: 10px;
  line-height: 1.1;
  background: rgba(13, 22, 40, 0.85);
}

#action-bar .build-icon { font-size: 17px; }

.hud-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.hud-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-primary);
  transform: scale(1.05);
}

/* ── 局內音量面板（點喇叭展開；音樂／音效兩條滑桿 + 靜音）────────────
   .sound-wrap 只是一個貼著按鈕的定位錨點，不改變狀態列原有的排列；
   面板 width 用 max-content，滑桿固定寬度，所以不會撐開或擠到旁邊的按鈕。 */
.sound-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sound-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  width: max-content;
  background: rgba(9, 14, 24, 0.96);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.sound-vol-row {
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.sound-vol-row .vol-slider {
  width: 108px;
  min-width: 0;
}

.vol-val {
  width: 26px;
  text-align: right;
  font-size: 11px;
  color: #9fb0c8;
  font-variant-numeric: tabular-nums;
}

.sound-mute-btn {
  margin-top: 2px;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.sound-mute-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-primary);
}

/* 裝備技能欄位 */
#skills-tray {
  display: flex;
  justify-content: space-between;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  pointer-events: none;
}

.slot-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 20, 32, 0.7);
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.slot-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.slots-container {
  display: flex;
  gap: 4px;
}

.skill-slot {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.skill-slot.filled {
  border: 1px solid var(--color-primary);
  background: rgba(0, 229, 255, 0.12);
}

.skill-slot.sealed { filter: grayscale(1) brightness(0.55); box-shadow: 0 0 0 2px #9d4edd inset; }
.skill-slot .slot-seal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; filter: none; z-index: 2; }
.skill-slot.evo {
  border: 1.5px solid var(--color-gold);
  background: rgba(255, 183, 3, 0.2);
  box-shadow: 0 0 8px rgba(255, 183, 3, 0.5);
}

.skill-slot .slot-emoji {
  font-size: 16px;
}

.skill-slot .slot-stars {
  position: absolute;
  bottom: 1px;
  font-size: 8px;
  color: #ffb703;
  letter-spacing: -1px;
  font-weight: 900;
}

/* ==================== Boss HUD ==================== */
/* 核心／Boss 血條都排在 header 的 flex 流裡。
   舊版兩者都是 top: 96px 的絕對定位，而 header 高度會隨內容 (經驗條 + 狀態列 +
   任務提示 + 技能欄) 變動，守塔模式下核心血條就直接壓在任務提示列上。 */
#boss-hud {
  width: 90%;
  max-width: 520px;
  margin: 0 auto;
  background: rgba(20, 10, 20, 0.9);
  padding: 8px 16px;
  border-radius: 12px;
  border: 2px solid #ff0055;
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.4);
  z-index: 15;
}

.boss-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.boss-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #ff5e7e;
  letter-spacing: 1px;
}

.boss-hp-bar {
  width: 100%;
  height: 12px;
  background: #2b0b14;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 0, 85, 0.5);
}

.boss-hp-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff0055, #ff758c);
  transition: width 0.1s ease-out;
}

/* ==================== 虛擬搖桿 ==================== */
#joystick-zone {
  position: absolute;
  bottom: calc(40px + env(safe-area-inset-bottom));
  left: calc(40px + env(safe-area-inset-left));
  width: 140px;
  height: 140px;
  z-index: 20;
  touch-action: none;
}

#joystick-base {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(0, 229, 255, 0.3);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#joystick-stick {
  width: 52px;
  height: 52px;
  background: radial-gradient(circle, #00e5ff 0%, #0077b6 100%);
  border: 2px solid #ffffff;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.8);
  pointer-events: none;
  transition: transform 0.04s ease-out;
}

/* ==================== 彈窗與覆蓋層 ==================== */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 8, 15, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
  /* 原本只關 opacity，backdrop-filter 還留著 —— 11 個隱藏彈窗疊在每幀重繪的 canvas
     上，等於每一幀都還要為看不見的模糊層取樣一次背景。顯示狀態與 0.25s 淡入不受
     影響（transition 只有 opacity，取消隱藏時模糊會跟著淡入一起回來）。 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 升級模態框 */
.modal-content {
  width: 92%;
  max-width: 680px;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(20, 30, 52, 0.95) 0%, rgba(10, 16, 30, 0.95) 100%);
  border: 2px solid var(--border-glow);
  box-shadow: 0 0 35px rgba(0, 229, 255, 0.35);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* 卡牌樣式 */
.upgrade-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(25, 38, 64, 0.7);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.upgrade-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.5s ease;
}

.upgrade-card:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--bg-card-hover);
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px rgba(0, 229, 255, 0.3);
}

.upgrade-card:hover::before {
  left: 100%;
}

.upgrade-card.card-evo {
  border-color: var(--color-gold);
  background: linear-gradient(90deg, rgba(255, 183, 3, 0.15), rgba(30, 40, 60, 0.8));
  box-shadow: 0 0 15px rgba(255, 183, 3, 0.3);
}

.upgrade-card.card-evo:hover {
  box-shadow: 0 8px 25px rgba(255, 183, 3, 0.6);
  border-color: #ffe066;
}

.card-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  overflow: hidden;
}

.weapon-sprite-icon {
  width: 100%;
  height: 100%;
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  display: block;
  margin: auto;
  pointer-events: none;
  image-rendering: auto;
}

.skill-slot .weapon-sprite-icon {
  max-width: 26px;
  max-height: 26px;
}

.card-icon-box .weapon-sprite-icon {
  max-width: 48px;
  max-height: 48px;
}

.recipe-item .weapon-sprite-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.pb-row .weapon-sprite-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.codex-icon .weapon-sprite-icon {
  width: 28px;
  height: 28px;
  display: block;
  margin: auto;
}

.card-info {
  flex-grow: 1;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.card-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.2);
  color: var(--color-primary);
  border: 1px solid rgba(0, 229, 255, 0.4);
}

.card-tag.tag-evo {
  background: rgba(255, 183, 3, 0.3);
  color: #ffe066;
  border-color: var(--color-gold);
}

.card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.card-level-stars {
  font-size: 12px;
  color: #ffb703;
  margin-top: 4px;
  letter-spacing: 2px;
}

/* 屬性系統：卡牌徽章 */
.card-elem-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.card-elem-badge.elem-fire {
  background: rgba(255, 107, 0, 0.2);
  color: #ff9e42;
  border: 1px solid rgba(255, 107, 0, 0.5);
}
.card-elem-badge.elem-frost {
  background: rgba(127, 216, 255, 0.2);
  color: #7fd8ff;
  border: 1px solid rgba(127, 216, 255, 0.5);
}
.card-elem-badge.elem-shock {
  background: rgba(0, 229, 255, 0.2);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.5);
}
.card-elem-badge.elem-toxic {
  background: rgba(125, 255, 143, 0.2);
  color: #7dff8f;
  border: 1px solid rgba(125, 255, 143, 0.5);
}
.card-elem-badge.elem-physical {
  background: rgba(255, 255, 255, 0.12);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 暫停面板：元素相剋條與數據 */
.pb-cycle-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}
.pbc-node {
  padding: 2px 6px;
  border-radius: 4px;
}
.node-fire { background: rgba(255, 107, 0, 0.25); color: #ff9e42; }
.node-frost { background: rgba(127, 216, 255, 0.25); color: #7fd8ff; }
.node-shock { background: rgba(0, 229, 255, 0.25); color: #00e5ff; }
.node-toxic { background: rgba(125, 255, 143, 0.25); color: #7dff8f; }
.pbc-tag {
  font-size: 11px;
  color: #ffd166;
  font-weight: 500;
  margin-left: auto;
}

/* ==================== 開始 & 結算面板 ==================== */
.start-box {
  width: 90%;
  max-width: 520px;
  /* 加了選角與選關後內容變高，小螢幕要能捲動，否則出擊鈕會被切掉 */
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #162035 0%, #0c1220 100%);
  border: 2px solid var(--border-glow);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.25);
}

.title-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--color-primary);
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.game-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.6);
  margin-bottom: 16px;
}

.title-sub {
  font-size: 16px;
  color: var(--color-primary);
  letter-spacing: 4px;
}

/* ==================== 特工選擇 ==================== */
.select-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.character-select {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.char-card {
  --accent: #00e5ff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 12px;
  background: rgba(10, 16, 30, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--text-main);
  font-family: var(--font-text);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.char-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.char-card.selected {
  border-color: var(--accent);
  background: rgba(20, 32, 56, 0.95);
  box-shadow: 0 0 22px -4px var(--accent);
}

.char-card.selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 13px;
  font-weight: 900;
  color: var(--accent);
}

.char-portrait {
  width: 96px;
  height: 90px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.char-card.selected .char-portrait {
  animation: float 2s ease-in-out infinite;
}

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

.char-codename {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
}

.char-title {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.char-trait {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}

.char-trait strong {
  display: block;
  color: #ffffff;
  font-size: 11px;
  margin-bottom: 2px;
}

/* ==================== 特工照片放大檢視 ==================== */
/* 點選角卡上的照片就彈出。z-index 要蓋過開始畫面 (100) 與各養成彈窗 (200)：
   它是從選角卡直接長出來的暫時檢視，被壓在下面等於「點了沒反應」。 */
.char-zoom {
  z-index: 300;
  cursor: zoom-out;
}

.char-zoom-box {
  --accent: #00e5ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 88vw;
  padding: 18px 24px 12px;
  background: rgba(8, 13, 24, 0.95);
  border: 2px solid var(--accent);
  border-radius: 18px;
  box-shadow: 0 0 36px -8px var(--accent);
}

.char-zoom-canvas {
  /* 手機與桌機都吃得下：寬度跟著視窗走，高瘦的修仙角色再由 max-height 夾住 */
  width: auto;
  height: auto;
  max-width: min(72vw, 320px);
  max-height: 46vh;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65));
}

.char-zoom-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
  color: var(--accent);
}

.char-zoom-title {
  font-size: 12px;
  color: var(--text-muted);
}

.char-zoom-trait {
  max-width: 44ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.char-zoom-trait strong {
  color: #ffffff;
  margin-right: 4px;
}

.char-zoom-hint {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

.char-zoom .game-btn {
  cursor: pointer;
}

/* ==================== 關卡選擇 ==================== */
.level-select {
  display: grid;
  /* 關卡數量會增加 (目前 5 關)，用 auto-fit 讓欄數自己長，不要寫死 */
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.level-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: rgba(10, 16, 30, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text-main);
  font-family: var(--font-text);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.level-card:hover:not(.locked) {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.5);
}

.level-card.selected {
  border-color: var(--color-primary);
  background: rgba(20, 32, 56, 0.95);
  box-shadow: 0 0 18px -4px var(--color-primary);
}

.level-card.locked {
  opacity: 0.4;
  filter: grayscale(1);
  cursor: not-allowed;
}

.level-icon { font-size: 22px; }

.level-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}

.level-sub, .level-best {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

.level-best { color: var(--color-gold); }

/* 結算頁的關卡名與解鎖提示 */
.result-level {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.unlock-notice.death-recap {
  background: rgba(255, 0, 85, 0.12);
  border-color: #ff0055;
  color: #ff8fab;
}

.unlock-notice {
  margin: 8px 0 4px;
  padding: 8px 12px;
  background: rgba(0, 245, 155, 0.12);
  border: 1px solid var(--color-green);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-green);
}

/* 主選單上疊開的彈窗要蓋過 #start-screen。
   兩者同為 .overlay (z-index 100)，DOM 順序在後的開始畫面會蓋掉先宣告的彈窗，
   結果就是點「基因強化 / 裝備倉庫」看起來沒反應。
   特工成就先前漏列，一樣是「點了沒反應」（彈窗其實開了、被蓋在底下）。 */
#talent-modal,
#char-level-modal,
#gear-modal,
#achievements-modal,
#quest-modal,
#codex-modal,
#slot-modal,
#recipe-modal,
#shop-modal {
  z-index: 200;
}

/* ==================== 裝備倉庫 ==================== */
.gear-content { max-width: 620px; }

.gear-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.gear-slot {
  --rarity: rgba(255, 255, 255, 0.15);
  padding: 10px 8px;
  background: rgba(8, 13, 24, 0.7);
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  text-align: center;
}

.gear-slot.filled {
  border-style: solid;
  border-color: var(--rarity);
  box-shadow: 0 0 16px -6px var(--rarity);
}

.gear-slot-icon { font-size: 22px; }
.gear-slot-name { font-size: 11px; color: var(--text-muted); }
.gear-slot-item { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--rarity); }
.gear-slot-empty { font-size: 11px; color: var(--text-muted); opacity: 0.6; margin-top: 6px; }
.gear-slot-affixes { font-size: 10px; line-height: 1.5; color: var(--text-main); margin: 4px 0 6px; }

.gear-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.gear-bulk { display: flex; gap: 6px; flex-wrap: wrap; }

.gear-mini-btn.bulk {
  --rarity: #00b4d8;
  border-color: var(--rarity);
  color: var(--rarity);
}

.gear-count {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.gear-locked-hint {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}

.gear-count.full { color: var(--color-accent); }

.gear-list {
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.gear-empty {
  padding: 18px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.gear-slot-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 5px;
  padding: 4px 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright, #e6f1ff);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  border-left: 3px solid #4cc9f0;
  border-radius: 6px;
}
.gear-slot-header:first-child { margin-top: 0; }

.gear-row {
  --rarity: #00b4d8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(10, 16, 30, 0.75);
  border-left: 3px solid var(--rarity);
  border-radius: 8px;
  text-align: left;
}

.gear-row.equipped { background: rgba(0, 229, 255, 0.08); }
.gear-row-icon { font-size: 18px; }
.gear-row-info { flex: 1; min-width: 0; }
.gear-row-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--rarity); }
.gear-on { font-size: 10px; color: var(--color-green); }
.gear-row-affixes { font-size: 11px; color: var(--text-muted); }
.gear-row-actions { display: flex; gap: 4px; flex-shrink: 0; }

.gear-mini-btn {
  padding: 5px 10px;
  min-height: 30px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  cursor: pointer;
}

.gear-mini-btn.equip { border-color: var(--color-primary); color: var(--color-primary); }
.gear-mini-btn.drop { border-color: rgba(255, 0, 85, 0.5); color: #ff6b8a; }
.gear-mini-btn.reforge { border-color: rgba(199, 125, 255, 0.6); color: #d6a6ff; }
.gear-mini-btn.fuse { border-color: #ffd166; color: #ffd166; }
.gear-mini-btn.fuse.active { background: rgba(255, 209, 102, 0.2); border-color: #ffd166; }
.gear-mini-btn.fuse-confirm {
  background: linear-gradient(135deg, #ffd166, #ff7700);
  color: #0b0f19;
  font-weight: 800;
  border: none;
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.4);
}
.gear-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gear-mini-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }

/* 套裝與傳奇特效標籤 */
.gear-set-tag {
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}
.gear-legendary-tag {
  display: inline-block;
  font-size: 10px;
  line-height: 1.3;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.4);
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 3px;
}
.set-badges-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 6px 0;
}
.set-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--set-c, #aaa);
}
.set-badge.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--set-c, #00e5ff);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}
.set-badge.inactive {
  opacity: 0.6;
  color: var(--set-c, #aaa);
}
.set-badges-empty {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0;
}

/* 合成選取狀態 */
.gear-row.fuse-selectable {
  cursor: pointer;
  transition: all 0.15s ease;
}
.gear-row.fuse-selectable:hover {
  background: rgba(255, 255, 255, 0.08);
}
.gear-row.fuse-selected {
  outline: 2px solid #ffd166;
  background: rgba(255, 209, 102, 0.14) !important;
}
.gear-row.fuse-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.fuse-prompt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 209, 102, 0.1);
  border: 1px dashed rgba(255, 209, 102, 0.5);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #ffd166;
  width: 100%;
}

/* 局內暫存裝備 HUD 晶片 */
#pending-gear-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(16, 24, 48, 0.85);
  border: 1px solid rgba(255, 183, 3, 0.5);
  border-radius: 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: #ffb703;
  box-shadow: 0 0 8px rgba(255, 183, 3, 0.25);
}
#pending-gear-chip.hidden {
  display: none !important;
}

/* 結算畫面裝備回收區塊 */
.game-over-gear-box {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  text-align: left;
}
.game-over-gear-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.game-over-gear-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gear-chip-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--chip-color, #fff);
  color: var(--chip-color, #fff);
  background: rgba(0, 0, 0, 0.3);
}
.gear-chip-mini.lost {
  opacity: 0.45;
  text-decoration: line-through;
  border-color: #ff4d6d;
  color: #ff85a1;
}

@media (max-width: 620px) {
  .gear-slots { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .gear-slot { padding: 7px 4px; }
  .gear-slot-affixes { font-size: 9px; }
  .gear-row-name { font-size: 12px; }
  .gear-row-affixes { font-size: 10px; }
  .gear-mini-btn { padding: 5px 7px; font-size: 10px; }
  .gear-list { max-height: 34vh; }
}

/* ==================== 佈署砲塔按鈕 ==================== */
.build-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.build-btn.affordable {
  opacity: 1;
  filter: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 14px -2px var(--color-gold);
}

.build-icon { font-size: 15px; }

/* 技能欄與加成列：平時收起，更新時才展開 HUD_PEEK_SECONDS 秒。
   它們久久才變一次，卻常駐佔掉螢幕上緣一大塊，後期尤其嚴重。
   用 max-height 收合才能真的把版面空間讓出來 (opacity 不會)。 */
.hud-peek {
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}

/* 用 :not(.peeking) 而不是單純的 .hud-peek —— 後者與 .buffs-tray 同特異性，
   而 .buffs-tray 定義在本檔更後面，它的 min-height 會蓋過收合。 */
.hud-peek:not(.peeking) {
  max-height: 0;
  min-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.hud-peek.peeking {
  max-height: 160px;
  opacity: 1;
}

/* ==================== 角色台詞氣泡 ==================== */
#dialogue-bubble {
  --accent: #00e5ff;
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  max-width: min(560px, 86vw);
  padding: 10px 20px;
  background: rgba(8, 13, 24, 0.92);
  border: 2px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 0 24px -6px var(--accent);
  color: var(--text-main);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  z-index: 50;
  pointer-events: none;
}

#dialogue-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: rgba(8, 13, 24, 0.92);
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
}

#dialogue-bubble.pop {
  animation: bubblePop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}

@keyframes bubblePop {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.controls-guide {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.guide-item {
  font-size: 13px;
  color: var(--text-muted);
}

.key-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.game-btn {
  width: 100%;
  padding: 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.primary-btn {
  background: linear-gradient(90deg, #00b4d8, #00f59b);
  color: #06111e;
  box-shadow: 0 4px 20px rgba(0, 245, 155, 0.4);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 245, 155, 0.6);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.pulse {
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(0, 229, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

/* 結算頁面專用 */
.result-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.glow-red {
  color: #ff3366;
  text-shadow: 0 0 25px rgba(255, 51, 102, 0.6);
}

.glow-green {
  color: #00f59b;
  text-shadow: 0 0 25px rgba(0, 245, 155, 0.6);
}

.stats-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 14px;
  padding: 14px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
}

.stat-row strong {
  color: #ffffff;
  font-family: var(--font-display);
}

.stat-row.highlight {
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  padding-top: 8px;
  color: var(--color-gold);
}

.stat-row.highlight strong {
  color: var(--color-gold);
}

.weapons-summary {
  text-align: left;
  margin-bottom: 20px;
}

.weapons-summary h3 {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

#damage-stats-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.damage-stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 8px;
  border-radius: 6px;
}

.hidden {
  display: none !important;
}

/* ==================== 主選單強化 (基因/DNA/特工解鎖) ==================== */
.menu-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2px 0 8px;
}
.dna-chip {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--color-gold);
  background: rgba(255, 183, 3, 0.1);
  border: 1px solid rgba(255, 183, 3, 0.4);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 0 14px -4px var(--color-gold);
}
.talent-btn {
  width: auto;
  padding: 8px 18px;
  font-size: 14px;
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(0, 229, 255, 0.08);
  color: var(--color-primary);
}
.talent-btn:hover {
  background: rgba(0, 229, 255, 0.18);
}
.menu-status {
  height: 20px;
  margin: -2px 0 8px;
  font-size: 13px;
  color: var(--color-green);
  font-weight: 700;
}
.menu-status.err {
  color: #ff5e7e;
}

/* 主選單音量滑桿 */
.audio-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 4px;
}
.vol-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
}
.vol-slider {
  width: 110px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.talent-content {
  max-width: 540px;
}
.talent-dna {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-gold);
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(255, 183, 3, 0.5);
}
.talent-status {
  height: 18px;
  margin: 0 0 10px;
  font-size: 12px;
}
.talent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  text-align: left;
}
.talent-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(20, 30, 52, 0.75);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.talent-row.maxed {
  border-color: rgba(0, 245, 155, 0.45);
}
.talent-icon {
  font-size: 26px;
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}
.talent-info {
  flex-grow: 1;
}
.talent-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: #ffffff;
}
.talent-lv {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
}
.talent-desc {
  font-size: 12px;
  color: var(--text-muted);
}
.talent-next {
  color: #7fd8ff;
  font-weight: 700;
}
/* 基因強化總進度：讓「這棵樹還有多長」一眼看得出來 */
.talent-progress {
  margin-bottom: 10px;
}
.talent-progress-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.talent-progress-text strong {
  color: #b388ff;
}
.talent-progress-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.talent-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7b2cbf, #c77dff);
  transition: width 0.25s ease;
}
.talent-up {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  min-width: 92px;
  transition: all 0.15s;
}
.talent-up.affordable {
  color: #06111e;
  background: linear-gradient(90deg, #00b4d8, #00f59b);
  border-color: transparent;
  box-shadow: 0 0 12px -2px rgba(0, 245, 155, 0.6);
}
.talent-up[disabled] {
  cursor: default;
  opacity: 0.6;
}

/* 鎖定特工卡 (DNA 解鎖) */
.char-card.locked .char-portrait {
  filter: grayscale(1) brightness(0.65);
  opacity: 0.85;
}
.char-lock-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  padding: 2px 8px;
  border-radius: 10px;
}
.lock-hint {
  font-size: 9px;
  color: var(--color-gold);
  font-weight: 900;
}

/* 升級 reroll 按鈕狀態 */
#btn-reroll.reroll-affordable {
  background: linear-gradient(90deg, #00b4d8, #00f59b);
  color: #06111e;
  border-color: transparent;
}
#btn-reroll:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#btn-reroll.reroll-denied {
  background: rgba(255, 0, 85, 0.18);
  color: #ff5e7e;
  border-color: #ff0055;
}

/* 升級卡：刷新／跳過並排，封印按鈕在卡片右下角（右上是分類標籤） */
.levelup-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.levelup-actions .game-btn { flex: 1 1 160px; }
#btn-skip-upgrade:disabled { opacity: 0.45; cursor: not-allowed; }
.banish-info {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: #9fb0c8;
}
.card-banish {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 107, 107, 0.6);
  background: rgba(40, 10, 20, 0.8);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.card-banish:hover:not(:disabled) { background: rgba(255, 60, 90, 0.35); }
.card-banish:disabled { opacity: 0.3; cursor: not-allowed; }

/* 結算畫面回主選單 */
.menu-btn {
  margin-top: 10px;
}

/* 行動端與小螢幕優化 */
/* ==================== 行動裝置適配 ==================== */
@media (max-width: 620px) {
  #hud { padding: calc(6px + env(safe-area-inset-top)) 6px 6px; gap: 4px; }
  #exp-bar-container { height: 18px; }
  #exp-text { font-size: 11px; }
  .audio-row { gap: 10px; }
  .vol-slider { width: 84px; }
  /* 局內音量面板：小螢幕字級與滑桿再收一點，面板本身不變寬 */
  .sound-vol-row { font-size: 12px; gap: 6px; }
  .sound-vol-row .vol-slider { width: 82px; }

  /* 手機狀態列：單列不換行，整體壓縮到一行內塞得下 */
  #status-bar { gap: 3px; flex-wrap: nowrap; justify-content: space-between; }
  .hud-pill { padding: 3px 5px; font-size: 10px; gap: 2px; }
  .hud-icon { font-size: 10px; }
  .hud-btn { width: 26px; height: 26px; font-size: 12px; padding: 0; }
  #action-bar .facility-bar { gap: 4px; padding-bottom: 8px; }
  #action-bar .build-btn { width: 42px; height: 42px; font-size: 9px; }
  #action-bar .build-icon { font-size: 15px; }
  .objective { font-size: 11px; min-height: 13px; margin-top: -2px; }

  #skills-tray { gap: 4px; flex-wrap: nowrap; }
  .slot-group { gap: 4px; padding: 3px 5px; }
  .slot-label { font-size: 9px; }
  .skill-slot { width: 24px; height: 24px; }
  .skill-slot .slot-emoji { font-size: 13px; }

  .start-box { padding: 20px 14px; border-radius: 18px; }
  .game-title { font-size: 26px; }
  .level-select { grid-template-columns: repeat(2, 1fr); }
  /* 角色卡改單列橫向捲動：5 位特工用 2 欄 grid 會把選單撐到三倍高 */
  .character-select {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 12px;
    scrollbar-width: none;
  }
  .character-select::-webkit-scrollbar { display: none; }
  .char-card {
    flex: 0 0 46%;
    scroll-snap-align: center;
  }
  .char-portrait { width: 64px; height: 60px; }
  .char-trait { font-size: 10px; }
  /* 角色卡在手機上壓縮：頭像小一號、型態區收窄、重複的職業標籤隱藏 */
  .char-card { padding: 8px 6px; }
  .char-class-tag { display: none; }
  .char-aspect-section { margin-top: 5px; padding-top: 5px; }
  .char-aspect-title { font-size: 10px; margin-bottom: 3px; }
  .aspect-chip { font-size: 9px; padding: 2px 5px; }
  .aspect-desc-tooltip { display: none; }
  .controls-guide { padding: 8px; margin-bottom: 14px; font-size: 12px; }

  #dialogue-bubble { font-size: 13px; bottom: 26%; padding: 8px 14px; }

  #joystick-zone {
    bottom: calc(26px + env(safe-area-inset-bottom));
    left: calc(20px + env(safe-area-inset-left));
    width: 124px;
    height: 124px;
  }
}

/* 橫向手機：高度很矮，把選單與搖桿再壓縮一輪 */
@media (max-height: 480px) {
  #hud { padding-top: calc(6px + env(safe-area-inset-top)); gap: 4px; }
  #exp-bar-container { height: 15px; }
  /* 橫向空間很擠，但武器欄是戰鬥資訊，縮小而不是藏起來 */
  #skills-tray { gap: 6px; }
  .skill-slot { width: 22px; height: 22px; }
  .skill-slot .slot-emoji { font-size: 12px; }
  .slot-label { font-size: 8px; }
  .start-box { padding: 14px 14px; }
  .game-title { font-size: 22px; margin-bottom: 6px; }
  .controls-guide { display: none; }
  #joystick-zone { width: 104px; height: 104px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  #dialogue-bubble { bottom: 12%; }
}

/* ==================== 戰術動作欄 (翻滾/閃避 & 砲塔升級) ==================== */
/* bottom 讓開 canvas 小地圖 (desktop 136px + pad 18px，見 main.js drawMinimap)：墊在小地圖上方 */
#action-bar {
  position: absolute;
  bottom: calc(162px + env(safe-area-inset-bottom));
  right: calc(28px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 100;
  pointer-events: auto;
}

@media (max-width: 619px) {
  /* 手機小地圖較小 (96px + pad 10px)：動作欄同步下移貼齊其上方 */
  #action-bar {
    bottom: calc(114px + env(safe-area-inset-bottom));
    right: calc(14px + env(safe-area-inset-right));
  }
}

.action-btn {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(13, 22, 40, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 245, 255, 0.45);
  box-shadow: 0 4px 18px rgba(0, 245, 255, 0.25), inset 0 0 12px rgba(0, 245, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.action-btn:active {
  transform: scale(0.92);
}

.action-btn .action-icon {
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
}

.action-btn .action-key {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  color: #00f5ff;
  letter-spacing: 0.5px;
  margin-top: 2px;
  pointer-events: none;
}

#dash-cooldown-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  transition: height 0.05s linear;
}

.action-btn.ready {
  border-color: #00f5ff;
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.6);
}

.action-btn.turret-up-btn {
  border-color: #ffb703;
  box-shadow: 0 4px 18px rgba(255, 183, 3, 0.35);
}

.action-btn.turret-up-btn .action-key {
  color: #ffb703;
}

/* 僱傭傭兵按鈕 (綠色) */
.action-btn.hire-btn {
  border-color: rgba(61, 220, 132, 0.55);
  box-shadow: 0 4px 18px rgba(61, 220, 132, 0.3);
}

.action-btn.hire-btn .action-key {
  color: #3ddc84;
}

.action-btn.hire-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ==================== Combo 連擊計量 ==================== */
.combo-pill {
  background: linear-gradient(135deg, rgba(255, 84, 0, 0.35), rgba(255, 0, 85, 0.45));
  border: 1px solid rgba(255, 100, 0, 0.6);
  box-shadow: 0 0 14px rgba(255, 84, 0, 0.35);
  transition: transform 0.1s ease;
}

.combo-pill.frenzy {
  background: linear-gradient(135deg, rgba(0, 245, 255, 0.45), rgba(181, 23, 158, 0.55));
  border-color: #00f5ff;
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.7);
  animation: frenzyPulse 0.4s infinite alternate ease-in-out;
}

@keyframes frenzyPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.combo-unit {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

/* combo pill 切換時保留版面空間 (visibility 取代 display:none)：
   避免手機窄寬度下狀態列在 1 列/2 列之間反覆跳動 */
#combo-hud.hidden {
  display: flex !important;
  visibility: hidden;
}

/* ==================== 放棄任務按鈕 ==================== */
.quit-btn {
  color: #ff6b6b !important;
  border-color: rgba(255, 107, 107, 0.4) !important;
}
.quit-btn:hover {
  background: rgba(255, 50, 50, 0.25) !important;
  border-color: #ff6b6b !important;
}

/* ==================== 跳過開箱動畫開關 ==================== */
.skip-chest-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 6px;
  user-select: none;
}
.skip-chest-label input[type="checkbox"] {
  accent-color: #ffb703;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ==================== 幸運物資箱抽獎彈窗 ==================== */
.chest-modal-content {
  max-width: 680px;
  background: radial-gradient(circle at center, rgba(20, 28, 52, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%);
  border: 2px solid #ffb703;
  box-shadow: 0 0 45px rgba(255, 183, 3, 0.4);
}

.chest-title {
  color: #ffb703;
  text-shadow: 0 0 18px rgba(255, 183, 3, 0.8);
}

.chest-cards-grid {
  display: flex;
  /* 同一個元素也掛著 .cards-grid（升級卡用的直排）：這裡要明確改回橫排並換行，
     否則 3~5 張開箱卡會直直疊下去，把「確認領取」擠出畫面 */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
  perspective: 1000px;
}

.chest-card {
  flex: 1 1 104px;
  max-width: 150px;
  min-height: 150px;
  background: rgba(15, 22, 40, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: cardFlipIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.chest-card.gold-tier {
  border-color: #ffb703;
  box-shadow: 0 0 25px rgba(255, 183, 3, 0.5);
}

.chest-card .chest-item-icon {
  font-size: 38px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.chest-card .chest-item-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.chest-card .chest-item-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

@keyframes cardFlipIn {
  0% { transform: rotateY(90deg) scale(0.6); opacity: 0; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

/* ==================== 超武合成圖鑑 ==================== */
.recipe-content {
  max-width: 720px;
  max-height: 82dvh;
  overflow-y: auto;
}

.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 18px;
}

.recipe-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
}

.recipe-item { font-weight: 700; white-space: nowrap; }
.recipe-pair { color: #7fd8ff; }
.recipe-evo { color: #ffd60a; }
.recipe-plus, .recipe-equals { color: var(--text-muted); font-size: 13px; }

.recipe-chip {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text-muted);
  white-space: nowrap;
}
.recipe-chip.done {
  color: #0a0f19;
  background: linear-gradient(135deg, #ffd60a, #ffb703);
  border-color: #ffd60a;
}

.recipe-desc {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* 主選單按鈕列：按鈕變多 (基因/裝備/配方/每日) 允許換行置中 */
.menu-meta {
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== 養成基地：次要入口的折疊面板 (原生 <details>，不需 JS) ===== */
.base-hub {
  margin: 0 0 10px;
}
.base-hub-toggle {
  display: block;
  width: fit-content;
  list-style: none;
  cursor: pointer;
  margin: 0 auto 8px;
}
.base-hub-toggle::-webkit-details-marker { display: none; }
.base-hub-toggle::after { content: ' ▾'; }
.base-hub[open] > .base-hub-toggle::after { content: ' ▴'; }
.base-hub-grid {
  gap: 8px;
}

/* ===== 作戰模式選擇 (生存者 / 守塔) ===== */
.mode-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 10px;
  background: rgba(10, 16, 30, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text-main);
  font-family: var(--font-text);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mode-card:hover {
  transform: translateY(-2px);
  border-color: var(--mode-accent, var(--color-primary));
}

.mode-card.selected {
  border-color: var(--mode-accent, var(--color-primary));
  background: rgba(20, 32, 56, 0.95);
  box-shadow: 0 0 18px -4px var(--mode-accent, var(--color-primary));
}

.mode-icon { font-size: 26px; }

.mode-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--mode-accent, var(--text-main));
}

.mode-sub {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.75;
}

.mode-desc {
  font-size: 10px;
  line-height: 1.45;
  opacity: 0.6;
}

/* ===== 基地核心血條 (守塔模式) ===== */
#core-hud {
  margin: 0 auto;
  z-index: 24;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(8, 13, 24, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-text);
  pointer-events: none;
}

.core-icon { font-size: 14px; }

.core-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-main);
}

.core-hp-bar {
  width: 170px;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.core-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00e5ff, #00f59b);
  transition: width 0.18s linear;
}

.core-hp-text {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* 核心告急：整條轉紅並呼吸。
   原本直接在 #core-hud 上無限動畫 box-shadow —— 那等於每一幀重畫整個元素，
   而這個元素還帶 backdrop-filter，等於每幀都要重新取樣一次背景。
   現在紅光移到 ::after，只動畫 opacity/transform（合成器可處理），
   元素本身不再需要每幀重新點陣化，紅色呼吸的視覺意圖不變。 */
#core-hud.danger {
  position: relative;
  border-color: rgba(255, 0, 85, 0.6);
}

#core-hud.danger::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 16px 2px rgba(255, 0, 85, 0.5);
  animation: corePulse 0.7s ease-in-out infinite;
  pointer-events: none;
}

#core-hud.danger .core-hp-fill {
  background: linear-gradient(90deg, #ff0055, #ff7b00);
}

/* 核心危急 (≤20%)：與「告急」分開一階。玩家在 35% 就該開始回防，
   20% 之後畫面上要多一個更急的訊號，否則兩種狀態看起來一樣。 */
#core-hud.critical {
  border-color: rgba(255, 59, 92, 0.95);
}

#core-hud.critical::after {
  animation-duration: 0.34s;
  box-shadow: 0 0 22px 4px rgba(255, 59, 92, 0.7);
}

#core-hud.critical .core-title {
  color: #ff3b5c;
  animation: coreLabelBlink 0.68s steps(2, end) infinite;
}

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

@keyframes corePulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.03); }
}

/* ==================== 貨幣與特工黑市 (Shop Modal) ==================== */
.gold-chip {
  background: rgba(255, 183, 3, 0.15) !important;
  border-color: rgba(255, 183, 3, 0.4) !important;
  color: #ffb703 !important;
}

.shop-btn {
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.25), rgba(255, 77, 109, 0.25)) !important;
  border-color: rgba(255, 183, 3, 0.5) !important;
}

.shop-btn:hover {
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.45), rgba(255, 77, 109, 0.45)) !important;
  border-color: #ffb703 !important;
  box-shadow: 0 0 12px rgba(255, 183, 3, 0.4) !important;
}

.shop-content {
  max-width: 680px;
  width: 94%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top, rgba(25, 30, 48, 0.98), rgba(10, 14, 26, 0.98));
  border: 1px solid rgba(255, 183, 3, 0.35);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 183, 3, 0.15);
}

.shop-wallet-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 13px;
}

.shop-wallet-bar .wallet-item strong {
  color: #00f59b;
  font-family: monospace;
  font-size: 14px;
}

.shop-tabs {
  display: flex;
  flex-wrap: wrap;   /* 四個分頁：手機寬度換行，不擠成一團 */
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.shop-tab {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #ccc;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.shop-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.shop-tab.active {
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.3), rgba(255, 77, 109, 0.2));
  border-color: #ffb703;
  color: #ffb703;
}

.shop-body {
  overflow-y: auto;
  max-height: 48vh;
  padding-right: 4px;
  margin-bottom: 14px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* 珠寶收購：整袋賣出橫跨整列、沒持有的珠寶淡出 */
.shop-card.jewel-sell-all { grid-column: 1 / -1; }
.shop-card.jewel-empty { opacity: 0.45; }

.shop-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
}

.shop-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 183, 3, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.shop-card-icon {
  font-size: 38px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.shop-card-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #fff;
}

.shop-card-desc {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 12px;
  line-height: 1.4;
  flex-grow: 1;
}

/* 箱子的裝備等級：黑市貨會跟著最佳紀錄變好，這件事要看得見 */
.shop-card-ilvl {
  font-size: 11px;
  color: #7fd8ff;
  margin: -6px 0 10px;
}
.shop-card-ilvl strong {
  color: #ffffff;
}

.shop-card-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 245, 155, 0.2);
  color: #00f59b;
  font-weight: bold;
}

.shop-btn-group {
  display: flex;
  gap: 6px;
  width: 100%;
}

.shop-buy-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.shop-buy-btn:hover:not(:disabled) {
  background: rgba(255, 183, 3, 0.3);
  border-color: #ffb703;
  color: #ffb703;
}

.shop-buy-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.booster-equipped-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(0, 245, 155, 0.25);
  border: 1px solid #00f59b;
  color: #00f59b;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 8px;
}


/* 裝備等級標記 (ilvl)：詞條數值倍率，讓玩家看得出同稀有度裝備的強弱差 */
.gear-ilvl {
  font-size: 11px;
  font-weight: bold;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}

/* 關卡卡片上的常駐規則標籤 */
.level-rule {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 3px 0;
  letter-spacing: 0.3px;
}

/* 選關卡片：地形機制逐項標籤 + 過關解鎖武器 */
.level-mechs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin: 2px 0;
}
.level-mech {
  font-size: 10px;
  color: #bde0fe;
  background: rgba(120, 180, 255, 0.1);
  border: 1px solid rgba(120, 180, 255, 0.28);
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
}
.level-reward {
  text-align: center;
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #ff9ecf;
  margin: 2px 0;
}
.level-reward.owned { color: #7dff8f; opacity: 0.8; }

/* ==================== 局內隨機事件橫幅 (Event Banner) ==================== */
.event-banner {
  --event-color: #ff0055;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 580px;
  margin: 0 auto;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.92) 0%, rgba(10, 10, 20, 0.95) 100%);
  border: 2px solid var(--event-color);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.3), inset 0 0 12px rgba(255, 0, 85, 0.15);
  animation: eventPulse 1.8s infinite alternate ease-in-out;
  pointer-events: auto;
}

@keyframes eventPulse {
  0% { box-shadow: 0 0 12px var(--event-color); transform: scale(1); }
  100% { box-shadow: 0 0 24px var(--event-color); transform: scale(1.02); }
}

.event-icon {
  font-size: 24px;
  /* 原本是 filter: drop-shadow(0 0 6px …)。filter 會把整個子樹拉進自己的合成層，
     而外層 .event-banner 是持續動畫的元素 —— 等於每一幀都要為這個圖示重新點陣化。
     圖示是文字 emoji，用 text-shadow 取代可以保留字形輪廓的光暈（box-shadow 只會
     在行內框外畫一個方形光暈，反而看得出差別），也不再建立合成層。 */
  text-shadow: 0 0 6px var(--event-color);
}

.event-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.5px;
}

.event-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.event-timer {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--event-color);
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--event-color);
}

/* ==================== 局內祝福與協同圖示列 (Buffs Tray) ==================== */
.buffs-tray {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
  min-height: 28px;
}

.buffs-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  /* 不換行：換到第二排就會把遊戲視野再壓掉一截，寧可靠「+N」收起來 */
  flex-wrap: nowrap;
}

.buff-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 26, 43, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  font-size: 16px;
  cursor: help;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.buff-badge:hover {
  transform: scale(1.25);
  z-index: 5;
}

.buff-more {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-dim, #9fb0c8);
  border-style: dashed;
  cursor: help;
}

.blessing-badge {
  border-color: #b388ff;
  box-shadow: 0 0 8px rgba(179, 136, 255, 0.4);
}

.synergy-badge {
  border-color: var(--badge-color, #00e5ff);
  box-shadow: 0 0 8px var(--badge-color, #00e5ff);
}

/* ==================== 祝福選擇面板 (Blessing Modal) ==================== */
.blessing-content {
  max-width: 640px;
  background: radial-gradient(circle at 50% 0%, rgba(50, 20, 80, 0.95) 0%, rgba(15, 10, 25, 0.98) 100%);
  border: 2px solid #b388ff;
  box-shadow: 0 0 35px rgba(179, 136, 255, 0.35);
}

.blessing-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card-blessing {
  border-color: rgba(179, 136, 255, 0.5);
  background: rgba(25, 18, 45, 0.85);
}

.card-blessing:hover {
  border-color: #b388ff;
  box-shadow: 0 0 20px rgba(179, 136, 255, 0.5);
}

.card-risk {
  border-color: rgba(255, 0, 85, 0.6);
  background: rgba(45, 15, 25, 0.85);
}

.card-risk:hover {
  border-color: #ff0055;
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.5);
}

.tag-blessing {
  background: rgba(179, 136, 255, 0.2);
  color: #b388ff;
  border: 1px solid rgba(179, 136, 255, 0.5);
}

.tag-risk {
  background: rgba(255, 0, 85, 0.2);
  color: #ff0055;
  border: 1px solid rgba(255, 0, 85, 0.5);
}

/* 代價祝福的風險列：把「承受傷害 +X%（輸出約 ×Y）」直接寫在卡片上。
   為什麼要獨立一行而不是塞進 desc：風險是玩家決定要不要選的關鍵資訊，
   混在說明文字裡會被忽略，選完才發現受傷變高就變成「被騙」的感覺。 */
.card-risk-line {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #ff6b8a;
  letter-spacing: 0.02em;
}

/* ==================== 特殊卡 (Special Card) ==================== */
.card-special {
  border-color: var(--card-glow-color, #ffb703) !important;
  box-shadow: 0 0 16px var(--card-glow-color, rgba(255, 183, 3, 0.4));
  background: radial-gradient(circle at 50% 0%, rgba(45, 35, 10, 0.85) 0%, rgba(18, 26, 43, 0.9) 100%) !important;
}

.card-special:hover {
  box-shadow: 0 0 28px var(--card-glow-color, #ffb703) !important;
}

.tag-special {
  background: rgba(255, 183, 3, 0.2);
  color: #ffb703;
  border: 1px solid rgba(255, 183, 3, 0.6);
  font-weight: 700;
}

/* ==================== 黑市商人面板 (Merchant Modal) ==================== */
.merchant-content {
  max-width: 680px;
  background: radial-gradient(circle at 50% 0%, rgba(55, 45, 15, 0.95) 0%, rgba(15, 18, 25, 0.98) 100%);
  border: 2px solid #ffd166;
  box-shadow: 0 0 35px rgba(255, 209, 102, 0.35);
}

.merchant-wallet-bar {
  text-align: center;
  font-size: 15px;
  color: #ffd166;
  margin-bottom: 12px;
}

.merchant-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.merchant-card {
  border-color: rgba(255, 209, 102, 0.4);
  padding: 14px;
}

.merchant-card:hover {
  border-color: #ffd166;
}

.merchant-disabled {
  opacity: 0.6;
}

.tag-merchant {
  background: rgba(255, 209, 102, 0.2);
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.6);
  font-weight: 700;
}

.merchant-buy-btn {
  width: 100%;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 13px;
}

/* ==================== 成就勳章彈窗 (Achievements Modal) ==================== */
.achievements-content {
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 0%, rgba(30, 45, 75, 0.95) 0%, rgba(10, 15, 28, 0.98) 100%);
  border: 2px solid #00e5ff;
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.3);
}

.achievements-summary {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-size: 14px;
  color: #00e5ff;
  margin-bottom: 12px;
}

.achievements-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 6px;
  margin-bottom: 16px;
  max-height: 55vh;
}

.achievement-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(18, 26, 43, 0.85);
  border: 1px solid rgba(64, 116, 219, 0.3);
  transition: all 0.2s;
}

.achievement-row.done {
  border-color: #00f59b;
  background: rgba(0, 245, 155, 0.08);
}

.achievement-row.locked {
  opacity: 0.65;
  filter: grayscale(0.4);
}

.ach-icon {
  font-size: 28px;
}

.ach-info {
  flex: 1;
}

.ach-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.ach-name {
  font-size: 15px;
  color: #fff;
}

.ach-reward {
  font-size: 12px;
  font-weight: 700;
  color: #b5179e;
  background: rgba(181, 23, 158, 0.15);
  border: 1px solid rgba(181, 23, 158, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
}

.ach-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.ach-status-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.achievement-row.done .ach-status-badge {
  background: rgba(0, 245, 155, 0.2);
  color: #00f59b;
  border: 1px solid rgba(0, 245, 155, 0.5);
}

/* ==================== 結算成就與祝福 (Game Over) ==================== */
.game-over-achievements-box,
.game-over-buffs-box {
  margin: 10px 0;
  padding: 10px;
  background: rgba(10, 15, 25, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 8px;
}

.game-over-achievements-title,
.game-over-buffs-title {
  font-size: 13px;
  font-weight: 700;
  color: #00e5ff;
  margin-bottom: 6px;
}

.game-over-ach-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.game-over-ach-item .ach-dna {
  color: #b5179e;
}

.game-over-buff-chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  margin: 3px 4px 3px 0;
  border-radius: 6px;
  background: rgba(179, 136, 255, 0.15);
  border: 1px solid #b388ff;
  color: #e2d9ff;
}

.game-over-buff-chip.synergy-chip {
  background: rgba(0, 229, 255, 0.15);
  border-color: #00e5ff;
  color: #bbf8ff;
}

/* ==================== 戰術口袋槽 (惡魔城消費道具) ==================== */
.pocket-slot {
  position: relative;
  width: 42px;
  height: 42px;
  background: rgba(12, 16, 24, 0.85);
  border: 1.5px solid rgba(0, 245, 155, 0.35);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.pocket-slot:hover {
  transform: scale(1.08);
  border-color: #00f59b;
  box-shadow: 0 0 12px rgba(0, 245, 155, 0.5);
}

.pocket-slot.empty {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.15);
}

.pocket-slot.filled {
  border-color: #00f59b;
  background: radial-gradient(circle at center, rgba(0, 245, 155, 0.25) 0%, rgba(12, 16, 24, 0.9) 75%);
  box-shadow: 0 0 10px rgba(0, 245, 155, 0.4);
  animation: pocketPulse 2.5s infinite ease-in-out;
}

@keyframes pocketPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 245, 155, 0.3); }
  50% { box-shadow: 0 0 16px rgba(0, 245, 155, 0.65); }
}

.pocket-icon {
  font-size: 22px;
  line-height: 1;
}

/* 道具自動使用開啟時，口袋底部掛一個 AUTO 標籤 */
.pocket-slot.auto::after {
  content: 'AUTO';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0b0f17;
  background: #00f59b;
  border-radius: 4px;
  padding: 0 3px;
  line-height: 11px;
}

/* 格子左上角的按鍵提示 (E / F)，兩格並排時才分得出哪格是哪個鍵 */
.pocket-key {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 8px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
}

.pocket-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff0055;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 8px;
  padding: 1px 5px;
  border: 1px solid #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* 行動端戰術道具按鈕 */
.action-btn.pocket-btn {
  overflow: visible; /* .action-btn 的 hidden 是給翻滾冷卻遮罩用的，會把角落的堆疊數字切掉 */
  border-color: rgba(0, 245, 155, 0.65);
  box-shadow: 0 4px 18px rgba(0, 245, 155, 0.35);
}

.action-btn.pocket-btn .action-key {
  color: #00f59b;
}

.action-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff0055;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 8px;
  padding: 1px 5px;
  border: 1px solid #fff;
}

/* 武器槽型態徽章 */
.slot-aspect-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 11px;
  line-height: 1;
  background: rgba(12, 16, 24, 0.9);
  border: 1px solid #ffd60a;
  border-radius: 6px;
  padding: 1px 2px;
}

/* ==================== Hades 武器型態選擇列 ==================== */
.char-aspect-section {
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  text-align: left;
}

.char-aspect-title {
  font-size: 11px;
  font-weight: 700;
  color: #ffd60a;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 型態列改單行橫向捲動：換行會把整排角色卡撐高一倍 */
.aspect-chips {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.aspect-chips::-webkit-scrollbar { display: none; }
.aspect-chip { flex: 0 0 auto; white-space: nowrap; }

.aspect-chip {
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #c9d1d9;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.aspect-chip:hover {
  background: rgba(255, 214, 10, 0.15);
  border-color: #ffd60a;
  color: #fff;
}

.aspect-chip.active {
  background: linear-gradient(135deg, rgba(255, 214, 10, 0.3), rgba(255, 107, 0, 0.3));
  border-color: #ffd60a;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(255, 214, 10, 0.4);
}

.aspect-desc-tooltip {
  font-size: 10px;
  color: #8a9bb0;
  margin-top: 4px;
  line-height: 1.35;
}


/* ==================== PWA 提示橫幅 (更新 / 安裝) ==================== */
/* 由 js/pwa.js 動態建立；沿用 .event-banner 的霓虹玻璃語言：
   深色漸層底 + 霓虹描邊 + 外發光，文字用 --font-display / --font-text。
   位置固定在頂部 HUD 底下、畫面中央 —— 左下虛擬搖桿與右下動作列都在底部，
   這個橫幅不進它們的範圍；盒子本身 pointer-events: auto，以外的區域完全穿透。 */
.pwa-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 112px);
  left: 50%;
  transform: translateX(-50%);
  /* 蓋過 .overlay (z-index: 100)：安裝提示在主選單/結算畫面之上也該看得到 */
  z-index: 105;
  display: flex;
  align-items: center;
  gap: 10px;
  /* width: max-content 必要 —— 只用 left:50% 時，可用寬度會被算成「畫面一半」，
     說明文字會提早被 ellipsis 吃掉。這裡先取內容寬度，再交給 max-width 收斂。 */
  width: max-content;
  max-width: min(92vw, 460px);
  padding: 6px 10px 6px 12px;
  background: linear-gradient(135deg, rgba(18, 26, 43, 0.94) 0%, rgba(10, 14, 23, 0.96) 100%);
  border: 1px solid var(--border-glow);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.28), inset 0 0 10px rgba(0, 229, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  animation: pwaBannerIn 0.28s ease-out;
}

/* 版本更新用警示色 (--color-accent 洋紅)，與局內隨機事件橫幅同一個色系 */
.pwa-banner.pwa-update {
  border-color: var(--color-accent);
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.32), inset 0 0 12px rgba(255, 0, 85, 0.14);
}

@keyframes pwaBannerIn {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.pwa-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.65));
}

.pwa-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.pwa-title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-desc {
  font-size: 11px;
  color: var(--text-muted);
  /* 一律維持兩行以內：橫幅小、可關，不佔戰鬥畫面 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-action {
  flex: 0 0 auto;
  padding: 5px 11px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  color: #04121a;
  background: linear-gradient(135deg, var(--color-primary), var(--color-green));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
}

.pwa-banner.pwa-update .pwa-action {
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
  box-shadow: 0 0 10px rgba(255, 0, 85, 0.45);
}

.pwa-dismiss {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

/* 手機：再縮一級，維持細細一條不擋戰鬥視線 (頂端 74px = #objective 下緣) */
@media (max-width: 620px) {
  .pwa-banner {
    top: calc(env(safe-area-inset-top) + 74px);
    gap: 7px;
    max-width: 96vw;
    padding: 5px 8px 5px 10px;
    border-radius: 10px;
  }
  .pwa-icon { font-size: 15px; }
  .pwa-title { font-size: 11.5px; }
  .pwa-desc { font-size: 10px; }
  .pwa-action { padding: 4px 9px; font-size: 10.5px; }
  .pwa-dismiss { width: 20px; height: 20px; }
}

/* 橫向手機 (高度很矮)：貼齊 HUD 下緣，避免佔到中間的戰鬥區 */
@media (max-height: 480px) {
  .pwa-banner { top: calc(env(safe-area-inset-top) + 86px); }
  .pwa-desc { display: none; }
}
/* 裝備總和摘要：把分散在 6~9 條詞條的價值收成一句「等效傷害」 */
.gear-summary { margin: 8px 0 4px; font-size: 13px; line-height: 1.6; }
.gear-summary-line { color: #cbd5e1; }
.gear-summary-line.accent { color: #00f59b; font-weight: 600; margin-top: 2px; }
.gear-summary-line.dim { color: #64748b; }

/* ==================== 起始畫面：黏底操作列與難度選擇 ====================
   難度選單原本夾在關卡清單後面（11 張關卡卡＋特工卡讓面板內容高達 1900px），
   小螢幕與筆電都要在面板內捲動才看得到，等於「沒有難度可以選」。
   這裡把難度與出擊鈕收進黏在面板底部的操作列，任何視窗高度都看得到、點得到。 */
.start-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 6px -24px -32px;
  padding: 14px 24px 20px;
  background: linear-gradient(180deg, rgba(12, 18, 32, 0) 0%, rgba(12, 18, 32, 0.92) 26%, #0c1220 62%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.difficulty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.difficulty-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-muted);
}

/* 原生 select 在深色底上是「白底黑字」的突兀控制項，這裡改成一致的主題樣式 */
#difficulty-select,
#runcard-select,
#orientation-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 8px 34px 8px 14px;
  background-color: rgba(10, 16, 30, 0.9);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
  border: 2px solid rgba(0, 229, 255, 0.35);
  border-radius: 12px;
  color: var(--text-main);
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: normal;   /* 不要繼承 .select-label 的 3px 字距 */
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#difficulty-select:hover,
#runcard-select:hover,
#orientation-select:hover { border-color: rgba(0, 229, 255, 0.6); }
#difficulty-select:focus-visible,
#runcard-select:focus-visible,
#orientation-select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.35); }

.difficulty-desc {
  flex-basis: 100%;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 面板很長時讓使用者知道可以捲動（11 張關卡卡＋特工卡） */
.start-box { scrollbar-width: thin; scrollbar-color: rgba(0, 229, 255, 0.35) transparent; }
.start-box::-webkit-scrollbar { width: 8px; }
.start-box::-webkit-scrollbar-track { background: transparent; }
.start-box::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.28); border-radius: 4px; }

@media (max-width: 640px) {
  .start-actions { margin: 6px -14px -14px; padding: 12px 14px 16px; }
  #difficulty-select, #runcard-select { min-height: 44px; font-size: 14px; }
  .difficulty-label { letter-spacing: 2px; }
}

/* ===== 特工等級 ===== */
.char-level-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.char-level-btns .talent-up {
  white-space: nowrap;
}
.char-lv {
  font-size: 11px;
  font-weight: 800;
  color: #0c1017;
  background: var(--accent, #00e5ff);
  border-radius: 6px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ==================== 暫停面板 ==================== */
#pause-modal { z-index: 150; }
.pause-content { max-width: 560px; width: min(560px, calc(100vw - 32px)); max-height: 92vh; overflow-y: auto; }
.pause-build { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pb-section { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 8px 10px; }
.pb-title { font-weight: 800; font-size: 13px; color: #9fb0c8; margin-bottom: 4px; }
.pb-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 3px 0; font-size: 13px; }
.pb-name { font-weight: 700; color: #e9ecef; }
.pb-lv { color: #ffd166; font-weight: 800; font-size: 12px; }
.pb-note { flex-basis: 100%; font-size: 11.5px; color: #9fb0c8; padding-left: 1.4em; }
.pb-ready { color: #00f59b; }
.pb-empty { font-size: 12px; color: #6c7a8f; }
.pb-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 4px 12px; }
.pb-stat { display: flex; justify-content: space-between; font-size: 12.5px; color: #c9d4e3; }
.pb-stat strong { color: #fff; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-chip { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: rgba(255, 209, 102, 0.12); border: 1px solid rgba(255, 209, 102, 0.4); }
.pb-meta { font-size: 12px; color: #9fb0c8; text-align: center; }
.pause-settings { margin-top: 10px; text-align: left; }
.pause-settings summary { cursor: pointer; font-weight: 700; color: #9fb0c8; }
.pause-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pause-actions .game-btn { flex: 1 1 150px; }

/* 顯示設定（主選單與暫停面板共用） */
.display-settings { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 8px; font-size: 13px; color: #c9d4e3; }
.ds-item { display: inline-flex; align-items: center; gap: 6px; }
.ds-item select { background: #111827; color: #e9ecef; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 2px 6px; }

/* ==================== 每日任務 ==================== */
.quest-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; text-align: left; }
.quest-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
.quest-row.done { border-color: rgba(0, 245, 155, 0.5); }
.quest-row.claimed { opacity: 0.5; }
.quest-main { flex: 1; min-width: 0; }
.quest-text { font-weight: 700; font-size: 14px; color: #e9ecef; }
.quest-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); margin: 6px 0 4px; overflow: hidden; }
.quest-bar span { display: block; height: 100%; background: linear-gradient(90deg, #00b4d8, #00f59b); }
.quest-meta { font-size: 12px; color: #9fb0c8; }
.quest-claim { flex: 0 0 auto; }
.quest-reset { text-align: center; font-size: 12px; color: #6c7a8f; }
.game-over-quest-line { margin: 8px 0; padding: 8px 10px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 700;
  color: #00f59b; background: rgba(0, 245, 155, 0.08); border: 1px solid rgba(0, 245, 155, 0.35); }
.talent-btn.has-claim::after { content: ' ❗'; }

/* ==================== 圖鑑 ==================== */
.codex-milestones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.codex-ms { font-size: 12px; padding: 6px 10px; }
.codex-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 8px 0 12px;
  max-height: 46vh; overflow-y: auto; }
.codex-entry { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; text-align: center;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
.codex-entry.locked { opacity: 0.4; }
.codex-icon { font-size: 26px; line-height: 1.2; }
.codex-name { font-size: 13px; font-weight: 700; color: #e9ecef; }
.codex-sub { font-size: 11px; color: #9fb0c8; }
.codex-tabs .shop-tab { padding: 6px 4px; font-size: 12px; white-space: nowrap; }

/* 存檔欄位 */
.slot-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.slot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.slot-row.current { border-color: #00e5ff; box-shadow: 0 0 10px rgba(0,229,255,0.25); }
.slot-info { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.slot-info span { opacity: 0.75; font-size: 12px; }
.slot-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* 傭兵選單：每列的「僱傭」鈕用的是 .game-btn（width:100% 是給整條彈窗用的），
   放進 .slot-row 會撐到整列寬度，把姓名與師承擠成兩行（師承改成「〇〇門下」後更明顯）。
   這裡只讓它依內容寬度，剩下的寬度給資訊欄。 */
#merc-list .slot-row .game-btn {
  width: auto;
  flex: 0 0 auto;
  padding: 10px 20px;
  font-size: 15px;
}
#merc-list .slot-info { flex: 1 1 auto; min-width: 0; }

/* 修仙裝備典故與比較卡 */
.gear-row-lore { font-size: 11px; opacity: 0.6; font-style: italic; margin-top: 2px; }
.gear-row { cursor: pointer; }
.gear-compare { margin: -2px 0 8px; padding: 10px; border-radius: 10px; background: rgba(0,0,0,0.35); border: 1px solid rgba(110,168,255,0.35); }
.gear-cmp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gear-cmp-card { padding: 8px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--rarity, rgba(255,255,255,0.15)); font-size: 12px; min-width: 0; }
.gear-cmp-card.empty { opacity: 0.6; }
.gear-cmp-title { font-size: 11px; opacity: 0.6; margin-bottom: 2px; }
.gear-cmp-name { font-weight: bold; color: var(--rarity, #fff); font-size: 14px; }
.gear-cmp-meta { opacity: 0.75; margin-bottom: 4px; }
.gear-cmp-diffs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 12px; }
.gear-cmp-diff.up { color: #3ddc84; }
.gear-cmp-diff.down { color: #ff5e5e; }
.gear-cmp-diff.same { color: #8a9bb0; }

/* 修仙技能欄 (Q/R)：畫面底部中央 */
.skill-bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; z-index: 100; pointer-events: auto;
}
.skill-slot {
  position: relative; width: 58px; height: 58px; border-radius: 10px; overflow: hidden;
  background: rgba(13, 22, 40, 0.88); border: 2px solid rgba(110, 168, 255, 0.6);
  box-shadow: 0 0 12px rgba(77, 141, 255, 0.35); color: #fff; cursor: pointer; padding: 0;
}
.skill-slot.no-mp { filter: grayscale(0.8); opacity: 0.6; }
.skill-icon { font-size: 26px; line-height: 58px; }
.skill-key { position: absolute; top: 2px; left: 5px; font-size: 11px; font-weight: bold; color: #cfe0ff; }
.skill-mp { position: absolute; bottom: 2px; right: 4px; font-size: 10px; color: #7fb0ff; font-weight: bold; }
.skill-cd {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: rgba(0, 0, 0, 0.62); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: bold; color: #fff; pointer-events: none;
}
@media (max-width: 619px) {
  .skill-bar { bottom: calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .skill-slot { width: 50px; height: 50px; }
  .skill-icon { line-height: 50px; font-size: 22px; }
}

/* 四格道具鈕排成 2×2，避免動作欄過高把設施鈕擠出畫面 */
.pocket-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 8px; justify-items: center; }
.pocket-grid:not(:has(.pocket-btn:not(.hidden))) { display: none; }
.pocket-grid .action-btn { width: 48px; height: 48px; }

/* 手機：動作欄整體縮小＋閒置半透明，避免直排過高壓到上方武器欄與 Boss 血條 */
@media (max-width: 619px) {
  #action-bar { gap: 8px; }
  #action-bar .action-btn { width: 48px; height: 48px; }
  #action-bar .action-btn .action-icon { font-size: 20px; }
  #action-bar .action-btn .action-key { font-size: 9px; }
  #action-bar #btn-dash { width: 54px; height: 54px; }
  #action-bar .facility-bar { grid-template-columns: repeat(2, 36px); gap: 3px; padding-bottom: 6px; }
  #action-bar .build-btn { width: 36px; height: 36px; font-size: 8px; }
  #action-bar .build-icon { font-size: 13px; }
  .pocket-grid { gap: 5px; }
  #action-bar .pocket-grid .action-btn { width: 40px; height: 40px; }
  #action-bar .build-btn, .pocket-grid .action-btn { opacity: 0.75; }
  #action-bar .build-btn:active, .pocket-grid .action-btn:active { opacity: 1; }
}

/* 手機起始畫面重新配置：黏底操作列原本高 312px（佔螢幕 37%），蓋住特工與關卡清單。
   難度與規則卡並排成一列、說明文字收起；模式卡只留圖示與名稱；特工卡縮窄露出下一張。 */
@media (max-width: 619px) {
  .start-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 14px 12px;
    background: #0c1220;
  }
  .start-actions .difficulty-row { margin: 0; display: block; }
  .start-actions .difficulty-label,
  .start-actions .difficulty-desc { display: none; }
  #difficulty-select, #runcard-select, #orientation-select { width: 100%; min-height: 44px; font-size: 13px; padding: 6px 28px 6px 10px; background-position: right 9px center; }
  .start-actions .orientation-row { grid-column: 1 / -1; margin: 0; }
  .start-actions #start-status { grid-column: 1 / -1; margin: 0; }
  .start-actions #start-status:empty { display: none; }
  .start-actions #btn-start-game { grid-column: 1 / -1; margin: 0; padding: 12px; font-size: 17px; }

  .mode-select { gap: 8px; }
  .mode-card { padding: 10px 8px; gap: 2px; }
  .mode-icon { font-size: 22px; }
  .mode-desc { display: none; }

  .char-card { flex: 0 0 58%; min-width: 0; }
  .aspect-chips { flex-wrap: wrap; justify-content: center; overflow: visible; }
}

/* 設施展開鈕：桌機不顯示；手機預設收起設施列，點開才展開 */
.facility-toggle { display: none; }
@media (max-width: 619px) {
  #action-bar .facility-toggle:not(.hidden) { display: flex; }
  #action-bar:not(.fac-open) .facility-bar,
  #action-bar:not(.fac-open) #btn-hire { display: none; }
  /* 展開時傭兵排在設施列正下方；砲塔升級鈕只在靠近砲塔時出現，收起時也留在外面 */
  #action-bar .facility-toggle { order: 0; }
  #action-bar .facility-bar { order: 1; }
  #action-bar #btn-hire { order: 2; }
  #action-bar #btn-turret-upgrade { order: 3; }
  #action-bar #btn-dash { order: 4; }
  #action-bar .pocket-grid { order: 5; }
  #action-bar #btn-next-wave { order: 6; }
  #action-bar.fac-open .facility-toggle { border-color: #00e5ff; box-shadow: 0 0 14px rgba(0, 229, 255, 0.6); }
  /* 有設施買得起時展開鈕亮金框 */
  #action-bar:not(.fac-open):has(.build-btn.affordable:not(.hidden), #btn-hire:not(:disabled):not(.hidden)) .facility-toggle { border-color: #ffd60a; box-shadow: 0 0 12px rgba(255, 214, 10, 0.55); }
  #action-bar .facility-toggle .action-key { font-size: 9px; }
}

/* ==========================================================================
   守塔防禦工程：建造預覽 HUD 與設施檢查面板 (Tower Defense Placement & Inspector)
   ========================================================================== */

/* 建造放置預覽 HUD (Placement Mode Banner) */
.placement-hud {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  pointer-events: auto;
  animation: fadeInDown 0.25s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translate(-50%, -15px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.placement-hud-content {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(12, 20, 35, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(0, 229, 255, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 229, 255, 0.25);
  border-radius: 40px;
  padding: 8px 18px;
}

.placement-hud-icon {
  font-size: 24px;
  display: flex;
  align-items: center;
  animation: pulseGlow 1.8s infinite alternate;
}

@keyframes pulseGlow {
  from { filter: drop-shadow(0 0 2px #00e5ff); transform: scale(1); }
  to { filter: drop-shadow(0 0 8px #00e5ff); transform: scale(1.08); }
}

.placement-hud-text {
  display: flex;
  flex-direction: column;
}

.placement-hud-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #00f5ff;
  letter-spacing: 0.5px;
}

.placement-hud-sub {
  font-size: 11px;
  color: #8ba2be;
  white-space: nowrap;
}

.placement-cancel-btn {
  background: rgba(255, 60, 90, 0.15);
  border: 1px solid rgba(255, 60, 90, 0.45);
  color: #ff6b81;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.placement-cancel-btn:hover {
  background: rgba(255, 60, 90, 0.3);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 60, 90, 0.5);
}

/* 設施檢查與升級面板 (Facility Inspector Modal) */
.facility-inspect-card {
  max-width: 440px !important;
  background: linear-gradient(180deg, rgba(16, 26, 44, 0.96) 0%, rgba(10, 16, 28, 0.98) 100%) !important;
  border: 2px solid rgba(0, 229, 255, 0.45) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 229, 255, 0.25) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  text-align: left !important;
}

.inspect-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.inspect-header-flex {
  display: flex;
  align-items: center;
  gap: 14px;
}

.inspect-icon {
  font-size: 30px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 229, 255, 0.08);
  border: 1.5px solid rgba(0, 229, 255, 0.4);
  border-radius: 14px;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}

.inspect-header-info h2 {
  font-size: 22px;
  margin: 0 0 4px 0;
  text-align: left;
}

.inspect-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inspect-level-badge {
  background: rgba(0, 229, 255, 0.18);
  color: #00f5ff;
  border: 1px solid rgba(0, 229, 255, 0.5);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.inspect-type-badge {
  background: rgba(255, 183, 3, 0.15);
  color: #ffb703;
  border: 1px solid rgba(255, 183, 3, 0.4);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

.inspect-close-btn {
  background: transparent;
  border: none;
  color: #8ba2be;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
}

.inspect-close-btn:hover {
  color: #ff5e5e;
}

/* 戰術地基槽專屬加成標籤 */
.inspect-socket-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

.inspect-socket-badge .socket-icon {
  font-size: 20px;
}

.inspect-socket-badge .socket-info {
  display: flex;
  flex-direction: column;
}

.inspect-socket-badge b {
  font-size: 13px;
  color: #ffd166;
}

.inspect-socket-badge span {
  font-size: 11px;
  color: #e0e6ed;
}

/* 數據儀表板 */
.inspect-stats {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 18px;
}

.inspect-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #e0e6ed;
  margin-bottom: 6px;
}

.inspect-stat-bar-bg {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}

.inspect-stat-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #00f59b, #00e5ff);
  border-radius: 6px;
  transition: width 0.3s;
}

.inspect-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat-cell {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 8px 10px;
}

.stat-cell .stat-label {
  font-size: 11px;
  color: #8ba2be;
  margin-bottom: 2px;
}

.stat-cell .stat-value {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-display);
}

/* 互動動作按鈕 */
.inspect-actions {
  display: flex;
  gap: 12px;
}

.inspect-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 10px !important;
  font-size: 14px !important;
}

.danger-btn {
  background: linear-gradient(90deg, #e74c3c, #c0392b);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.35);
}

.danger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.55);
}

/* 拆除鈕已「上膛」（第一次點擊後、等第二次確認）：加外框與呼吸動畫，跟一般狀態明顯不同 */
.danger-btn.armed {
  background: linear-gradient(90deg, #ff3b30, #ff7043);
  border: 2px solid #ffd60a !important;
  box-shadow: 0 0 18px rgba(255, 59, 48, 0.8);
  animation: danger-armed 0.9s ease-in-out infinite;
}

@keyframes danger-armed {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 59, 48, 0.6); }
  50% { box-shadow: 0 0 24px rgba(255, 214, 10, 0.9); }
}

/* 手機（面板會被壓到 440px 以下）改成上下排：並排時手指差一格就會點到拆除。
   拆除本來就要點兩次，這裡只是把兩顆按鈕的距離再拉開一點。 */
@media (max-width: 560px) {
  .inspect-actions { flex-direction: column; }
}

.btn-cost-tag {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 800;
  color: #ffd60a;
}


/* 守塔建造選單：點建塔點後浮在它上方的塔種清單。
   舊版是 2×2 圖示格（只有圖示、名稱、價格），看不出 DPS／射程／能不能對空 ——
   玩家只能憑圖示亂蓋，這正是「比其他守塔遊戲簡陋」最直接的來源。
   改成單欄條列：圖示 ＋ 名稱/數據行/相剋標籤 ＋ 價格，頂端再插一條地基加成說明。 */
#td-build-menu {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 306px;
  /* 極窄的容器（小手機的 9:16 直條）也要塞得下；置中與否交給 UI.placeBuildMenu 算 */
  max-width: calc(100% - 20px);
  max-height: min(64vh, 480px);
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  /* left/top 一律由 UI.placeBuildMenu() 用實測尺寸算好（水平置中、上下擇一）。
     這裡刻意不用 transform 位移：容器是 overflow:hidden，位移會讓「夾在容器內」的計算
     對不上實際方框，算錯的結果就是玩家只看到半個選單。 */
}

/* 選單頂端：這一格地基是什麼加成（沒有加成也明講，免得玩家以為每格都一樣） */
.td-build-banner {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 8px;
  background: rgba(0, 229, 255, 0.07); font-size: 12px;
}
.td-build-banner small { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.td-build-banner.plain { background: rgba(255, 255, 255, 0.03); }

.td-build-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(10, 14, 23, 0.7);
  color: var(--text-main);
  font: 700 12px var(--font-text);
  cursor: pointer;
  text-align: left;
}
.td-build-opt .ico { font-size: 24px; line-height: 1.1; width: 28px; text-align: center; flex: 0 0 auto; }
/* 數字鍵提示：列表順序＝按鍵，讓鍵盤玩家不用碰滑鼠 */
.td-build-opt .td-opt-key {
  flex: 0 0 auto; width: 16px; height: 16px; line-height: 16px; text-align: center;
  font-size: 10px; font-weight: 800; border-radius: 4px;
  background: rgba(255, 255, 255, 0.08); color: var(--text-muted);
}
/* hover 只在「真的有滑鼠」時生效：觸控裝置上 :hover 會黏在最後點過的那一列，
   蓋完塔之後那顆按鈕還亮著，玩家會以為「之前選的塔種沒有被清掉」（v92 修正） */
@media (hover: hover) {
  .td-build-opt:hover .td-opt-key { background: var(--border-glow); color: #04121a; }
  .td-build-opt:hover { border-color: var(--border-glow); background: var(--bg-card-hover); }
}
.td-build-opt:focus-visible .td-opt-key { background: var(--border-glow); color: #04121a; }
.td-build-opt .td-opt-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.td-build-opt .td-opt-main b { font-size: 13px; }
.td-build-opt .td-opt-main small { color: var(--text-muted); font-size: 11px; font-weight: 500; line-height: 1.3; }
/* 第一行是可比較的數字（亮一點），第二行是機制說明（暗一點、可以折兩行） */
.td-build-opt .td-opt-main .td-stats { color: #cfe6f5; }
.td-build-opt .td-opt-main .td-desc { color: rgba(138, 155, 176, 0.85); font-size: 10px; }
.td-build-opt .td-opt-main .td-desc:empty { display: none; }
.td-build-opt .td-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.td-tag { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 4px; }
.td-tag.good { background: rgba(61, 220, 132, 0.2); color: #6ff2a8; }
.td-tag.bad { background: rgba(255, 71, 87, 0.18); color: #ff8a95; }
.td-build-opt .cost { color: #ffd60a; font-family: var(--font-display); flex: 0 0 auto; }
.td-build-opt.poor { opacity: 0.45; }
/* 鍵盤（Tab／數字鍵）選到時留框；滑鼠／觸控點過的那一顆不留任何「被選中」的樣子 */
.td-build-opt:focus-visible { border-color: var(--border-glow); background: var(--bg-card-hover); outline: none; }
.td-build-opt:focus:not(:focus-visible) { outline: none; }
.inspect-priority { width: 100%; margin-bottom: 10px; background: rgba(0, 229, 255, 0.12); color: var(--text-main); border: 1px solid var(--border-color); }
/* 守塔檢查面板：第 3 級後的專精二選一 */
.inspect-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.td-branch-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px !important; background: rgba(255, 209, 102, 0.1); color: var(--text-main); border: 1px solid rgba(255, 209, 102, 0.5); text-align: center; }
.td-branch-opt .ico { font-size: 24px; }
.td-branch-opt small { font-size: 11px; line-height: 1.35; color: var(--text-muted); font-weight: 500; }
.td-branch-opt.poor { opacity: 0.5; }
/* 守塔下一波預告：怪種 ×數量＋護甲標籤（顏色對應：輕甲綠、中甲黃、重甲灰、空中藍） */
.td-wave-preview {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  max-width: min(720px, calc(100vw - 32px)); margin: 4px auto 0; padding: 5px 10px;
  background: rgba(10, 14, 23, 0.72); border: 1px solid var(--border-color); border-radius: 10px;
  font-size: 12px; color: var(--text-main); pointer-events: none;
}
.td-wave-preview b { color: #ff6b7a; margin-right: 2px; }
.wp-group { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.wp-armor { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 4px; color: #0a0e17; }
.wp-light { background: #9be37a; }
.wp-medium { background: #ffd166; }
.wp-heavy { background: #c9d3df; }
.wp-air { background: #7fd1ff; }
.wp-boss { color: #ffb703; font-weight: 800; }
/* 詞綴標籤：掛在波次預告最前面，顏色由 js/tdwaves.js 的 WAVE_MODS 帶進來（--mod）。
   用外框而不是實心，免得跟護甲標籤搶焦點 —— 護甲是「這波打什麼」，詞綴是「這波怎麼打」。 */
.wp-mods { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wp-mod {
  font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  color: var(--mod, #ffd166); border: 1px solid var(--mod, #ffd166); background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
/* 入口分布與總數：壓在整條預告的最後面，用弱化色，只有多路線關卡才出現 */
.wp-total { font-size: 11px; color: var(--text-muted); border-left: 1px solid var(--border-color); padding-left: 8px; }
/* 守塔王國升級面板：固定貼在右側、行動列上方。跟建造選單一樣是浮層，但不跟著建塔點跑，
   所以用 fixed；兩者會互相關閉（見 Facilities.openBuildMenu / Menu.toggleKingdomPanel）。 */
#td-kingdom-panel {
  position: fixed; z-index: 32; right: 12px; bottom: 96px;
  width: min(340px, calc(100vw - 24px)); max-height: min(62vh, 520px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--bg-card); border: 1px solid var(--border-glow); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); font-size: 13px; color: var(--text-main);
}
#td-kingdom-panel.hidden { display: none; }
#td-kingdom-panel .kp-title { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); }
#td-kingdom-panel .kp-title b { color: #ffd166; font-size: 15px; }
#td-kingdom-panel .kp-title small { font-size: 11px; color: var(--text-muted); }
#td-kingdom-panel .kp-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; }
#td-kingdom-panel .kp-row:hover { background: rgba(255, 255, 255, 0.04); }
#td-kingdom-panel .kp-ico { font-size: 20px; width: 26px; text-align: center; }
#td-kingdom-panel .kp-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#td-kingdom-panel .kp-main b { font-size: 13px; display: flex; align-items: center; gap: 7px; }
#td-kingdom-panel .kp-pips { display: inline-flex; gap: 3px; }
#td-kingdom-panel .kp-pip { width: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
#td-kingdom-panel .kp-pip.on { background: #ffd166; }
#td-kingdom-panel .kp-main small { font-size: 11px; line-height: 1.35; color: var(--text-muted); }
#td-kingdom-panel .kp-buy {
  flex: 0 0 auto; min-width: 66px; padding: 5px 8px; font-size: 12px; font-weight: 800;
  color: #0a0e17; background: #ffd166; border: none; border-radius: 7px; cursor: pointer;
}
#td-kingdom-panel .kp-buy.poor { background: rgba(255, 255, 255, 0.12); color: var(--text-muted); }
#td-kingdom-panel .kp-max { flex: 0 0 auto; min-width: 66px; text-align: center; font-size: 12px; font-weight: 800; color: #3ddc84; }
#td-kingdom-panel .kp-close {
  margin-top: 4px; padding: 6px; font-size: 12px; font-weight: 700; color: var(--text-main);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer;
}
/* 守塔遊玩中（body.td-mode 且主選單已收起）：更新橫幅原本在頂部正中央 112px，
   正好壓在地圖上緣的入口（三門要塞北門）。改成縮小停在 HUD 帶的左上角 ——
   守塔的地圖整張排在 HUD 帶（128px）下面，資訊列置中，左上角是空的。 */
body.td-mode:has(#start-screen.hidden) .pwa-banner {
  top: calc(env(safe-area-inset-top) + 8px);
  left: calc(env(safe-area-inset-left) + 12px);
  transform: none;
  animation: none;
  max-width: calc(50vw - 260px);
  min-width: 0;
}
body.td-mode:has(#start-screen.hidden) .pwa-banner .pwa-desc { display: none; }
/* 窄螢幕資訊列離左邊更近：只留圖示＋按鈕 */
@media (max-width: 1100px) {
  body.td-mode:has(#start-screen.hidden) .pwa-banner .pwa-title { display: none; }
  body.td-mode:has(#start-screen.hidden) .pwa-banner { max-width: none; }
}
/* 手機橫放：資訊列已經延伸到左邊，改停在資訊列下方的右側（任務提示與預告都置中，右側空著） */
@media (max-width: 900px) {
  body.td-mode:has(#start-screen.hidden) .pwa-banner {
    top: calc(env(safe-area-inset-top) + 54px);
    left: auto;
    right: calc(env(safe-area-inset-right) + 12px);
  }
}

/* 守塔：不用設施鈕（蓋塔走建塔點選單）；速度鈕的 1×/2× 用淺色加粗，深底上看得清楚 */
body.td-mode #btn-facility-toggle, body.td-mode #facility-bar { display: none !important; }
#td-speed-label { color: #f2fbff; font-weight: 800; font-size: 20px; text-shadow: 0 0 6px rgba(0, 245, 255, 0.8), 0 1px 2px #000; }

/* ==================== 版面整修（v111）：提示橫幅、主選單、升級卡、桌機搖桿、技能鈕 ==================== */

/* 1. 提示橫幅（下載素材／新版本）不再浮在內容上：
      - 有面板開著（主選單、升級、暫停、結算）時，橫幅貼頂，面板整體往下讓出一條空間
      - 遊戲進行中（沒有任何面板）直接不顯示，回到選單或暫停時再出現 —— 它不急，不該擋戰場 */
.pwa-banner { top: calc(env(safe-area-inset-top) + 6px); }
body:has(.pwa-banner:not(.hidden)) .overlay { padding-top: calc(env(safe-area-inset-top) + 54px); }
body:has(.pwa-banner:not(.hidden)) .overlay > .start-box,
body:has(.pwa-banner:not(.hidden)) .overlay > .modal-content { max-height: calc(92dvh - 54px); }
body:has(#start-screen.hidden):not(:has(.overlay:not(.hidden))) .pwa-banner { display: none; }
@media (max-width: 619px), (max-height: 480px) {
  .pwa-banner .pwa-desc { display: none; }
  body:has(.pwa-banner:not(.hidden)) .overlay { padding-top: calc(env(safe-area-inset-top) + 44px); }
  body:has(.pwa-banner:not(.hidden)) .overlay > .start-box,
  body:has(.pwa-banner:not(.hidden)) .overlay > .modal-content { max-height: calc(94dvh - 44px); }
}

/* 2. 主選單：寬螢幕（桌機、手機橫放）改兩欄 —— 左欄捲動選模式／特工／關卡，右欄固定難度與出擊鈕。
      原本是單欄 520px 加黏底操作列：桌機兩側大片留白，手機橫放時操作列直接佔滿整個畫面。 */
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  #start-screen .start-box {
    width: 94vw;
    max-width: 1100px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 24px;
    align-items: start;
  }
  #start-screen .start-box > * { grid-column: 1; }
  #start-screen .start-actions {
    grid-column: 2;
    grid-row: 1 / span 30;
    position: sticky;
    top: 0;
    bottom: auto;
    margin: 0;
    padding: 16px;
    background: rgba(10, 16, 30, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 16px;
  }
  #start-screen .start-actions .difficulty-row { flex-direction: column; align-items: stretch; gap: 6px; }
  #start-screen .start-actions select { width: 100%; }
}
/* 橫放手機（矮）：右欄再收緊，說明文字收起 */
@media (orientation: landscape) and (max-height: 560px) {
  #start-screen .start-box { padding: 14px 16px; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 16px; }
  #start-screen .start-actions { padding: 10px; }
  #start-screen .start-actions .difficulty-desc { display: none; }
  #start-screen .start-actions .difficulty-row { margin-bottom: 6px; }
  #start-screen .start-actions select { min-height: 36px; font-size: 12px; }
  #start-screen #btn-start-game { padding: 10px; font-size: 16px; }
  #start-screen .game-title { font-size: 24px; margin-bottom: 8px; }
}
/* 直向手機：黏底操作列由三排收成兩排（難度／規則卡／視野並排），少佔約 50px，關卡清單不再被蓋住 */
@media (max-width: 619px) {
  .start-actions { grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 12px 10px; }
  .start-actions .orientation-row { grid-column: auto; }
  #difficulty-select, #runcard-select, #orientation-select { min-height: 44px; font-size: 12px; padding: 4px 22px 4px 8px; background-position: right 6px center; }   /* 44px：行動版點擊目標下限 */
}

/* 3. 升級卡：清單版的封印鈕改到右側中間、內文讓出位置（原本壓在卡片右下角的文字上） */
.upgrade-card:has(.card-banish) { padding-right: 52px; }
.upgrade-card .card-banish { top: 50%; bottom: auto; transform: translateY(-50%); }
/* 寬螢幕：三張卡並排（像吸血鬼倖存者），手機橫放一次就看得到全部三張 */
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  #level-up-modal .modal-content { max-width: 1000px; }
  #upgrade-cards { flex-direction: row; align-items: stretch; }
  #upgrade-cards .upgrade-card {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 18px 14px 48px;
  }
  #upgrade-cards .card-title-row { justify-content: center; flex-wrap: wrap; }
  #upgrade-cards .card-banish { top: auto; bottom: 8px; left: 50%; right: auto; transform: translateX(-50%); }
}
@media (orientation: landscape) and (max-height: 480px) {
  #level-up-modal .modal-content { padding: 12px 16px; }
  #level-up-modal .modal-header h2 { font-size: 20px; margin-bottom: 0; }
  #level-up-modal .subtitle { display: none; }
  #upgrade-cards { gap: 8px; margin-bottom: 8px; }
  #upgrade-cards .upgrade-card { padding: 10px 8px 42px; gap: 6px; }
  #upgrade-cards .card-desc { font-size: 12px; }
}

/* 4. 桌機（滑鼠＋鍵盤）：虛擬搖桿平常淡化，滑鼠移過去或拖曳時才完整顯示（仍可用滑鼠拖） */
@media (hover: hover) and (pointer: fine) {
  #joystick-zone { opacity: 0.18; transition: opacity 0.2s ease; }
  #joystick-zone:hover, #joystick-zone:active { opacity: 1; }
}

/* 5. 直向手機：技能鈕往上移，避開右下小地圖的圖例 */
@media (max-width: 619px) and (orientation: portrait) {
  .skill-bar { bottom: calc(118px + env(safe-area-inset-bottom)); }
}