/* ============================================================
 * wave21b-fix 乐豆说游戏面板 v2（浅色清新版 + HUD强压缩 + 纵向再压缩）
 * 作用域：#gamePanel —— 5个经典游戏(pirate/whack/fish/star/balloon) 与 48个引擎游戏
 *         共用同一份面板 DOM，一处改全游戏生效（引擎天然继承，无引擎专项规则）。
 * 加载顺序：本文件在 classic_game_compact.css / classic_game_responsive.css / restyle_game.css 之后；
 *         全部规则 !important，选择器含 #gamePanel/#gamePlay(id)，特异性与源序双保险，强制覆盖。
 * 本版调整（老板真机反馈）：①HUD 顶部栏强压缩（压 restyle 白栏 min-height:52px / hud-item 16px / help 44px）
 *   ②面板深色→浅色清新（浅蓝白渐变底、橙红英文、深蓝中文、深灰提示、深蓝角按钮；4个彩色按钮/录音红保持不变）
 *   ③7件套区纵向再压缩给画布让空间（按钮尺寸 mic78/play48/slow42/replay48 不变，只压间距字号）
 * 不改任何 JS / 音频链路 / 题库数据。麦克风录音态沿用 JS 既有 .recording class。
 * ============================================================ */

/* ---------- 0.5 wave21b-fix4 画布目标定位强制修复（真凶：game_theme.css L1000
 *   `.game-canvas [class*="target"]{position:relative}` 把5游戏目标（含.pirate-ship）压成 relative，
 *   敌船不脱离文档流→8艘船在画布内顺流堆叠、JS top 仅为偏移量→真机敌船压军舰。
 *   .pirate-ship 自身布局全靠 absolute+left%/top px（鱼/星/气球 JS 直接改 left/top% 相对定位无影响、地鼠走网格洞），
 *   故仅强制海盗船目标 absolute，最小修复不波及其余4游戏。 ---------- */
body.in-game #gamePlay .game-canvas .pirate-ship,
body.in-game #gamePlay .game-canvas .pirate-ship.game-target.target-pirate {
  position: absolute !important;
}

/* ---------- 0.6 wave23 气球/钓鱼/星星目标同步海盗船绝对定位（真凶同 0.5：公共规则 relative 致
   JS left/top% 变成文档流偏移，多目标顺流堆叠成阶梯斜线、后排目标冲出屏幕右缘/压住面板）。
   定位像素由 page_game.js 的 layoutStageTargets() 按画布实测+安全区钳制统一计算。 ---------- */
body.in-game #gamePlay .game-canvas .balloon-target,
body.in-game #gamePlay .game-canvas .fish-target,
body.in-game #gamePlay .game-canvas .star-target {
  position: absolute !important;
}

/* ---------- 0. 顶部 HUD 栏强压缩（现场DOM：#gamePlay .game-hud；压 restyle L138 白栏 52px / L147 hud-item 16px / help 44px） ---------- */
body.in-game #gamePlay .game-hud {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 6px 10px 0 !important;
  padding: 7px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  gap: 6px !important;
  background: #ffffff !important;
  color: #2b4a7a !important;
}
body.in-game #gamePlay .game-hud .hud-item {
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.in-game #gamePlay .game-hud .hud-score {
  font-size: 14px !important;
  color: #f5862e !important;
}
/* wave23 HUD 文字醒目色：白实底上深蓝题号/标题 + 橙色星分，任何游戏背景下都清晰 */
body.in-game #gamePlay .game-hud .hud-item,
body.in-game #gamePlay .game-hud .hud-help-btn {
  color: #2b4a7a !important;
}
/* 帮助钮：restyle 固定 44x44 会撑高HUD，压小为 26x26 自适应圆钮（强压缩必要配套） */
body.in-game #gamePlay .game-hud .hud-help-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  padding: 2px 7px !important;
  margin-left: 4px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- 1. 面板容器：浅色清新渐变（A2） ---------- */
body.in-game #gamePlay #gamePanel.game-panel {
  margin: 3px 10px 22px !important;
  padding: 8px 12px 4px !important;
  border-radius: 20px !important;
  position: relative !important;   /* wave21b-fix2 悬浮角按钮锚点 */
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(232,242,255,.92)) !important;
  border: 1px solid rgba(120,170,255,.35) !important;
  box-shadow: 0 4px 14px rgba(30,80,160,.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  flex-shrink: 0 !important;
}
/* 题目区：透明底（面板已是浅色底，修中文不可见根因；A3 纵向压缩） */
body.in-game #gamePlay #gamePanel .game-question {
  margin: 0 !important;
  padding: 2px 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center !important;
}

/* ---------- 2. 题目文字（A2 浅色适配：英文橙红实色 / 中文深蓝；A3 字号压缩） ---------- */
/* 英文词：醒目橙红实色（压 restyle/game_modern 橙红渐变透明字） */
body.in-game #gamePlay #gamePanel .gq-word {
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
  color: #ff5a1f !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: #ff5a1f !important;
  text-shadow: 0 1px 3px rgba(255,90,31,.15) !important;
  filter: none !important;
}
/* 中文翻译：深蓝 13px（浅底清晰可读；压白卡白底/灰字/主题白字不可见；A3 字号） */
body.in-game #gamePlay #gamePanel .gq-cn {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 1px 0 0 !important;
  color: #2b4a7a !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #2b4a7a !important;
  text-shadow: none !important;
}

/* ---------- 3. 控制行：左竖列(播放/慢放) + 中麦克风 + 右回放（按钮尺寸不变，A3 压间距） ---------- */
body.in-game #gamePlay #gamePanel .game-ctrl {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  position: relative !important;
}
body.in-game #gamePlay #gamePanel .ctrl-left,
body.in-game #gamePlay #gamePanel .ctrl-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
/* 每个按钮 + 右侧标注 横排一行 */
body.in-game #gamePlay #gamePanel .ctl-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
}
/* 标注：中蓝（A2 浅底适配，保持13px） */
body.in-game #gamePlay #gamePanel .ctl-row .lbl,
body.in-game #gamePlay #gamePanel .ctrl-lbl {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #3a7bd5 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* 播放钮：48px 蓝渐变（彩色实底在浅底对比足够，保持不变） */
body.in-game #gamePlay #gamePanel #gPlayBtn.play-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 20px !important;
  color: #fff !important;
  background: linear-gradient(180deg,#3fa0ff,#1f6fe0) !important;
  box-shadow: 0 3px 8px rgba(31,111,224,.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
/* 慢放钮：42px 绿渐变（保持不变） */
body.in-game #gamePlay #gamePanel #gPlaySlowBtn.slow-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 19px !important;
  color: #fff !important;
  background: linear-gradient(180deg,#57c785,#2e9e5b) !important;
  box-shadow: 0 3px 8px rgba(46,158,91,.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
/* 回放钮：48px 紫渐变（保持不变） */
body.in-game #gamePlay #gamePanel #gReplayBtn.replay-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 20px !important;
  color: #fff !important;
  background: linear-gradient(180deg,#8fa6ff,#5f74e0) !important;
  box-shadow: 0 3px 8px rgba(95,116,224,.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

/* 麦克风：78px 橙渐变（居中视觉重点，保持不变；v2 常态静止） */
body.in-game #gamePlay #gamePanel #gMicBtn.mic-btn {
  width: 78px !important;
  height: 78px !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 36px !important;
  color: #fff !important;
  background: linear-gradient(180deg,#ff8a3d,#f2631e) !important;
  box-shadow: 0 6px 16px rgba(242,99,30,.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  position: relative !important;
  animation: none !important;
  z-index: 2 !important;
}
/* 麦克风录音态：红渐变 + pulse 脉冲（JS 切 .recording，不改音频链路；红色保持） */
body.in-game #gamePlay #gamePanel #gMicBtn.mic-btn.recording {
  background: linear-gradient(180deg,#ff4d4d,#d61f1f) !important;
  box-shadow: 0 6px 16px rgba(214,31,31,.6) !important;
  animation: gpv2Pulse 1s ease-in-out infinite !important;
}
@keyframes gpv2Pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,77,77,.65), 0 6px 16px rgba(214,31,31,.6); }
  50%     { box-shadow: 0 0 0 15px rgba(255,77,77,0), 0 6px 16px rgba(214,31,31,.6); }
}
/* REC 角标：录音态用 .recording::after 实现（红底白字白边，浅底上醒目；不新增DOM，不改JS） */
body.in-game #gamePlay #gamePanel #gMicBtn.mic-btn.recording::after {
  content: "● REC" !important;
  position: absolute !important;
  top: -9px !important;
  right: -12px !important;
  background: #ff3b30 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 2px 7px !important;
  border-radius: 9px !important;
  border: 1.5px solid #fff !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* ---------- 4. 提示 hint：深灰蓝呼吸（A2）；录音态深红（浅底上要够深）；A3 字号压缩 ---------- */
body.in-game #gamePlay #gamePanel #gMicHint.mic-hint {
  display: block !important;
  text-align: center !important;
  margin: 1px auto 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #5a6b85 !important;
  animation: gpv2HintGlow 1.6s ease-in-out infinite !important;
}
@keyframes gpv2HintGlow {
  0%,100% { opacity: .75; }
  50%     { opacity: 1; text-shadow: 0 0 8px rgba(90,107,133,.28); }
}
/* 录音态：JS 仅给麦克风加 .recording（hint 不加class），用面板 :has() 联动 hint 变深红，不改音频逻辑 */
body.in-game #gamePlay #gamePanel.game-panel:has(#gMicBtn.recording) #gMicHint.mic-hint {
  color: #d61f1f !important;
  animation: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* ---------- 5. 面板底部角按钮栏 panelbar（返回菜单 / 再玩一次；A2 浅底改深蓝半透） ---------- */
body.in-game #gamePlay #gamePanel .panelbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* wave21b-fix2 悬浮面板顶部左右两角，不占文档流纵向空间 */
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important;
  padding: 0 8px !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
body.in-game #gamePlay #gamePanel .panelbar .corner-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(70,120,200,.4) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #e8f1ff !important;
  color: #2b4a7a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(30,80,160,.12) !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* SVG 描边同步深色（压内联 stroke="#fff"，浅底上可见） */
body.in-game #gamePlay #gamePanel .panelbar .corner-btn svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: #2b4a7a !important;
}
body.in-game #gamePlay #gamePanel .panelbar .corner-btn:active {
  transform: scale(.92) !important;
}

/* ---------- 6. 原 .actions 底栏（返回菜单/再玩一次两大按钮）隐藏，功能由 panelbar 角按钮接管 ---------- */
body.in-game #gamePlay .actions {
  display: none !important;
}

/* ---------- 7. 侦探引擎开场叙事页：JS 隐藏四件套按钮时，:has 连带隐藏其标注（不支持:has的老浏览器仅残文字、无功能影响） ---------- */
body.in-game #gamePlay #gamePanel .ctl-row:has(#gPlayBtn[style*="none"]),
body.in-game #gamePlay #gamePanel .ctl-row:has(#gPlaySlowBtn[style*="none"]),
body.in-game #gamePlay #gamePanel .ctl-row:has(#gReplayBtn[style*="none"]) {
  display: none !important;
}

/* ---------- 8. 自适应：320px 窄屏不溢出、按钮不被遮挡（A3 同步压缩；mic 68 保持） ---------- */
@media (max-width: 360px) {
  body.in-game #gamePlay #gamePanel.game-panel { padding: 4px 10px 3px !important; }
  body.in-game #gamePlay #gamePanel .game-ctrl { gap: 8px !important; }
  body.in-game #gamePlay #gamePanel #gMicBtn.mic-btn { width: 68px !important; height: 68px !important; font-size: 32px !important; }
  body.in-game #gamePlay #gamePanel #gPlayBtn.play-btn,
  body.in-game #gamePlay #gamePanel #gReplayBtn.replay-btn { width: 42px !important; height: 42px !important; }
  body.in-game #gamePlay #gamePanel #gPlaySlowBtn.slow-btn { width: 38px !important; height: 38px !important; }
  body.in-game #gamePlay #gamePanel .ctl-row .lbl,
  body.in-game #gamePlay #gamePanel .ctrl-lbl { font-size: 12px !important; }
  body.in-game #gamePlay #gamePanel .gq-word { font-size: 26px !important; }
  body.in-game #gamePlay #gamePanel #gMicHint.mic-hint { font-size: 10px !important; }
  body.in-game #gamePlay #gamePanel .panelbar .corner-btn { width: 38px !important; height: 38px !important; }
}