/* ==========================================================
 * 《决战哈姆》PVE 复刻 — 响应式适配
 * ----------------------------------------------------------
 * 只放 media query 内的规则；基础布局规则在 select.css / style.css 里定义。
 *
 * 出战部署的硬性约束（任何断点都不得破坏）：
 *   · 「01 作战区域」与「02 威胁等级」两块永不重叠 —— .sel-body 的 grid 行
 *     一律按内容撑高（grid-auto-rows: max-content），列上不设 min-height:0；
 *     放不下时只由 .sel-body 自己滚动，标题栏与底栏固定不动
 *   · 单列只由「宽度不足」触发：矮而宽的屏幕保持两栏，两栏反而更省高度
 *
 * 断点：宽 ≤ 980px → 单列；高 ≤ 660px → 收起次要信息；宽 ≤ 680px → 紧凑；高 ≤ 520px → 极矮屏
 * ========================================================== */

/* ==================== 出战部署窗口 ==================== */

/* 宽度不足：地图栏 + 难度栏改为上下排列 */
@media (max-width: 980px) {
  .sel-body {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(10px, 1.4vh, 18px);
  }
  .sel-col-diff { align-self: auto; }
  .sel-map-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mc-shot { aspect-ratio: 16 / 9; }
  .mc-brief, .mc-tags { display: none; }
  .sel-diff { grid-template-columns: 52px 1fr auto; }
  .df-stats { display: none; }
}

/* 高度不足（仍保持两栏）：收起地图简介 / 标签与难度数值条，缩矮缩略图 */
@media (max-height: 660px) {
  .mc-shot { aspect-ratio: 16 / 9; }
  .mc-brief, .mc-tags { display: none; }
  .df-stats { display: none; }
  .df-main { padding: 7px 0; }
  .sel-sec-sub { display: none; }
}

/* 窄屏：进一步压缩，地图卡改单列。外框切角多边形保持不变（所有尺寸一致） */
@media (max-width: 680px) {
  .sel-wrap {
    width: 100%;
    padding: 16px 18px 30px;   /* 左上 / 左下切角处留足内缩，底部 30px 不进台阶切口 */
  }
  .sel-map-grid { grid-template-columns: 1fr; }
  .sel-head { flex-direction: column; align-items: flex-start; gap: 16px; }   /* 给标题下的金线留出空间 */
  .sel-readout { align-self: stretch; margin-right: 10px; }
  .sel-foot { flex-wrap: wrap; gap: 10px; }
  .sel-go { margin-left: 0; flex: 1 0 100%; }
  .sel-hint { flex: 1 0 100%; text-align: center; }
}

/* 极矮屏：手机横屏 */
@media (max-height: 520px) {
  .sel-wrap { padding-top: 14px; }   /* 不小于 14px：DEPLOYMENT 标签不能进左上切角 */
  .sel-head { padding-bottom: 11px; }   /* 标题下的金线在 -7px 处，至少留 11px 不压到滚动区 */
  .sel-title h2 { font-size: 18px; letter-spacing: 4px; }
  .sel-sec-head { margin-bottom: 4px; }
  .sel-sec-head h3 { font-size: 12px; }
  .sel-sec-sub { display: none; }
  .sel-map-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .mc-shot { aspect-ratio: 2 / 1; }   /* 矮屏缩略图更扁，省出纵向空间 */
  .mc-plate { padding: 5px 8px 6px; }
  .mc-name { font-size: 12px; }
  .df-badge { width: 34px; height: 34px; font-size: 12px; margin-left: 8px; }
  .df-brief { font-size: 10.5px; }
  .sel-foot { padding-top: 6px; }
  .sel-hint { display: none; }
}

/* ==================== 暂停窗口 ====================
 * 窗口外框多边形在所有尺寸下保持不变（与出战部署一致）；
 * 窄 / 矮时只调整内部排布，中部 .pw-body 负责滚动。 */

/* 窄窗：两块卡片改上下排列（手机横屏仍够宽，保持并排） */
@media (max-width: 600px) {
  .pw-body { grid-template-columns: minmax(0, 1fr); }
}

/* 读数换到标题下方单独一行：此时已在台阶切口下方，左对齐并铺满，右侧只留 10px */
@media (max-width: 600px) {
  .pw-head { row-gap: 16px; }   /* 换行后给标题下的金线留出空间 */
  .pw-readout { flex: 1 0 calc(100% - 10px); margin-left: 0; margin-right: 10px; }
}

/* 很窄：底栏换两行 —— 继续行动独占上一行（仍是最大按钮），
 * 返回大厅 / 重新开始落在下一行，返回大厅保持左下角 */
@media (max-width: 560px) {
  .pw-foot { flex-wrap: wrap; row-gap: 10px; }
  /* 与下一行的返回大厅左缘对齐（同为 8px 内缩），不贴框。
   * 选择器写成 .pw-foot .pw-btn-primary 提高优先级：style.css 里有一条
   * body:not(.touch-mode) .pw-hint + .pw-btn-primary { margin-left: 4px }，
   * 不压过它的话，键鼠模式下这里的 8px 会被改回 4px，与返回大厅错位。 */
  .pw-foot .pw-btn-primary,
  body:not(.touch-mode) .pw-foot .pw-hint + .pw-btn-primary {
    order: -1; flex: 1 0 calc(100% - 8px); margin-left: 8px;
  }
  .pw-btn-face { min-width: 0; }
  .pw-btn-back, .pw-btn-ghost { flex: 1 1 0; justify-content: center; text-align: center; }
  /* 键位提示收起：保证返回大厅就是窗口左下角的最后一个元素 */
  .pw-hint { display: none; }
  .pw-head { padding-bottom: 10px; }
  .pw-readout { padding: 6px 18px 6px 10px; font-size: 12px; }
  .pw-readout b { font-size: 13px; }
}

/* 矮屏（手机横屏）：压缩纵向留白，两块卡片仍并排 */
@media (max-height: 520px) {
  .pause-wrap { padding-top: 14px; }
  /* 可能需要滚动：给滚动条单独留轨道 */
  .pw-body { scrollbar-gutter: stable; padding-right: 6px; }
  .pw-head { padding-bottom: 8px; }
  .pw-title { font-size: 20px; letter-spacing: 6px; }
  .pw-sec-face { padding: 10px 14px 12px; }
  .pw-sec-h { margin-bottom: 8px; }
  .pw-stats { gap: 5px; }
  .pw-stat { padding: 4px 10px 5px 13px; }
  .pw-sliders { gap: 10px; }
  .pw-foot { padding-top: 8px; margin-top: 8px; }
  /* 保留 RESUME 小字：继续行动必须始终是最高的按钮 */
  .pw-btn-face { padding: 8px clamp(28px, 4vw, 48px); }
}

/* ==================== 大厅弹窗 ==================== */

@media (max-width: 680px) {
  .lm-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
    padding: 18px 16px;
  }
  .lm-card.wide { width: calc(100vw - 20px); }
  .ctrl-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 520px) {
  .lm-card {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding: 14px 16px;
  }
}

/* ==================== HUD ====================
 * 横向争位：居中的 .banner 与左上的 .hud-tl（暂停/背包 + 两条读数）、
 * 右上的 .hud-tr（延迟 + 两个武器槽）会互相压上。按 640×480 的两侧实际占宽反推：
 *   .hud-tl = 16(左) + 250(面板) = 266  →  横幅左缘须 ≥ 274
 *   .hud-tr = 112(槽) + 16(右) = 128    →  横幅右缘须 ≤ 视口宽 − 136
 * 于是横幅最大宽度 = 视口宽 − 552（两端各留 8px）。窄屏下同时把两侧栏收窄，
 * 让横幅还能保持可读宽度。低于 1160px 才生效，桌面宽屏不动。 */
@media (max-width: 1160px) {
  .banner { width: min(600px, calc(100vw - 552px)); }
  .stat-panel { width: 208px; }
  .stat-label { font-size: 13px; letter-spacing: 0.5px; }
  .wslot { width: 96px; height: 46px; }
  .wslot-icon { width: 66px; height: 31px; }
  .wslot-ammo { font-size: 15px; }
}
/* 更窄（含手机竖屏的 720 / 540 / 430）：两侧栏再收一档，横幅只保留核心文字宽度。
 * 横幅左缘 212+8=220，右缘 视口宽−112；720 宽时横幅 220..608、右栏起点 616 ✓ */
@media (max-width: 900px) {
  .banner {
    width: min(600px, calc(100vw - 440px));
    height: 30px; font-size: 15px; letter-spacing: 1px;
  }
  .banner-icon { width: 48px; height: 48px; }
  .stat-panel { width: 196px; }
  .stat-row { padding: 0 10px 0 5px; gap: 8px; }
  .stat-label { font-size: 12px; }
  .stat-val { font-size: 14px; }
  .wslot { width: 88px; height: 42px; }
  .wslot-icon { width: 60px; height: 28px; }
  .wslot-ammo { font-size: 14px; }
  .icon-btn { width: 36px; height: 36px; }
}

@media (max-width: 580px) {
  .hud-top { transform: scale(0.88); transform-origin: top center; }
  .hud-tr { transform-origin: top right; }
  .stat-panel { font-size: 12px; }
}

/* ==================== 矮屏：顶部三块（横幅 / 倒计时 / 增益区）的定位收敛 ====================
 * 问题：.banner(104) / .countdown(172) / .buff-picker(底部 136×--bxs) 三者的
 * 位置是按「高屏」定死的绝对值，窗口高度低于约 480px 时，增益区顶端会顶到
 * 倒计时底边（实测 470px 高时重叠约 4px），也就是用户图 1 里那处压叠。
 *
 * 处理原则（三块一起收紧，绝不单独挪一块）：
 *   1. 红色横幅与倒计时适度上移，且彼此更紧凑（间距由 36px 收到 8~14px）；
 *   2. 上移后的横幅顶端始终低于顶部的波次读数与计时器（hud-top 底边 ≤ 78px）；
 *   3. 增益选取区整体下移，但底边始终高于底部决战能量条 / 血条（hud-bottom 顶边）；
 *   4. 正常分辨率（高度 > 660px）不写任何规则，位置分毫不动。
 * 每一步都按「上一元素底边 + 最小间距」反推，避免又造出新的压叠。 */

/* 高 ≤ 660px：顶部稍稍收紧（横幅 104→96，倒计时 172→160，间距 36→20） */
@media (max-height: 660px) {
  .banner { top: 96px; height: 30px; font-size: 16px; }
  .banner-icon { width: 52px; height: 52px; }
  .countdown { top: 160px; }
  body.boss-multi .banner { top: 164px; }
  body.boss-multi .countdown { top: 226px; }
}

/* 高 ≤ 560px（手机横屏区间）：横幅 96→84，倒计时 160→136（间距 20→10），
 * 增益区底距 136×--bxs(0.72)=97.9px 抬到 108px —— 整块上移 10px 让开倒计时。
 * 校验（h=560, --bxs=0.72）：倒计时底边 136+44=180；增益区高 212×0.72≈153，
 * 底边 560−108=452 → 顶端 299 > 180 ✓；能量条（底 22+38=60）顶端 500 > 452 ✓ */
@media (max-height: 560px) {
  .banner { top: 84px; height: 28px; font-size: 15px; }
  .banner-icon { width: 46px; height: 46px; }
  .countdown { top: 136px; width: 44px; height: 44px; font-size: 22px; border-width: 2.5px; }
  .buff-picker { bottom: calc(108px * var(--bxs, 1)); }
  body.boss-multi .banner { top: 148px; }
  body.boss-multi .countdown { top: 198px; }
  .hud-bottom { bottom: 16px; }
  .status-row { bottom: 50px; }
}

/* 高 ≤ 480px（多数手机横屏）：横幅 84→74，倒计时 136→118（间距 8），
 * 增益区底距抬到 118px，并单独把 --bxs 的地板降到 0.5（增益区更矮）。
 * 校验（h=480, --bxs=0.5）：倒计时底边 118+40=158；增益区高 212×0.5=106，
 * 底边 480−118=362 → 顶端 256 > 158 ✓；能量条顶端 420（底 16+38）> 362 ✓ */
@media (max-height: 480px) {
  .banner { top: 74px; height: 26px; font-size: 14px; letter-spacing: 1px; }
  .banner-icon { width: 40px; height: 40px; }
  .countdown { top: 118px; width: 40px; height: 40px; font-size: 20px; }
  .buff-picker { bottom: 118px; }
  body.boss-multi .banner { top: 132px; }
  body.boss-multi .countdown { top: 176px; }
  .hud-tl { top: 10px; left: 12px; }
  .stat-panel { margin-top: 8px; width: 200px; }
  .stat-row { height: 22px; }
  .wave-line { font-size: 13px; padding: 2px 16px; }
  .wave-line span { font-size: 14px; }
  .timer-line { font-size: 17px; margin-top: 3px; padding: 1px 12px 1px 9px; }
  .timer-icon { width: 12px; height: 12px; }
  .timer-icon::after { top: 1px; left: 4px; height: 5px; }
  .boss-bar { top: 52px; }
  .bonus-bar { top: 72px; }
  #toast-layer { top: 132px; }
  .revive-panel { padding: 12px 26px; }
  .rv-title { font-size: 22px; }
}

/* 高 ≤ 400px（极矮屏 / 手机分屏）：横幅 74→64，倒计时 118→102，间距 8 保持不变，
 * 增益区底距 118→126（让开更薄的底部条）。此时 #ui-layer 已由 JS 整体缩到
 * 约 0.78（390/500），下面这些 px 都是缩放坐标系里的值，实际视觉间距等比缩小。
 * 校验（逻辑高 480, --bxs=0.5）：倒计时底边 102+38=140；增益区底边 480−126=354
 * → 顶端 248 > 140 ✓；能量条顶端 420 > 354 ✓ */
@media (max-height: 400px) {
  .banner { top: 64px; height: 24px; font-size: 13px; }
  .countdown { top: 102px; width: 36px; height: 36px; font-size: 18px; }
  .buff-picker { bottom: 126px; }
  body.boss-multi .banner { top: 120px; }
  body.boss-multi .countdown { top: 158px; }
  .hud-br { bottom: 16px; right: 18px; gap: 10px; }
  .round-btn { width: 48px; height: 48px; }
  .skill-btn { width: 54px; height: 54px; }
  .jump-btn { width: 44px; height: 44px; }
}

/* 极窄屏（宽 ≤ 500px 且高 ≥ 561px：小屏手机竖屏）：
 * 顶部三块仍有余量，但左右收窄，避免横幅贴边、增益区超出屏幕。 */
@media (max-width: 500px) {
  .banner { width: min(600px, 86vw); }
  .banner-icon { left: 9%; transform: translate(-50%, -50%) rotate(-14deg) scale(0.78); }
  .hud-bottom { width: min(430px, 76vw); }
  .bar-text { font-size: 12px; }
}

/* ==================== 触控浮层的矮屏收敛（补充 touch.css 的断点） ====================
 * 触控按钮与底部血条同处屏幕下缘：矮屏下把按钮组整体上提、摇杆下压，
 * 让开被收窄的 .hud-bottom。
 *
 * 这里只覆盖 .touch-ui 上的两个「内缩」变量（--pad-r / --pad-b），
 * 绝不重写 .tc-fire / .tc-lock / .tc-cluster 的 right / bottom ——
 * 那三个元素的偏移都由 touch.css 的 calc(--pad-* ± --fire …) 推导，
 * 在这边写死位置会让锁图标与开火按钮的相对关系（锁在开火按钮右下方）
 * 在不同断点上各算一套，实测会互相重叠。 */
@media (max-height: 560px) {
  .touch-ui { --lock-pad: 8px; }
  .tc-stick { bottom: 14px; }
}
@media (max-height: 400px) {
  .touch-ui { --lock-pad: 6px; }
  .tc-stick { left: 14px; bottom: 10px; }
}

/* ==================== 移动端预留 ==================== */
/* @media (max-width: 480px) and (orientation: portrait) { ... } */