/* 竖屏手机适配层。桌面端(>430px)不受本文件任何影响。
 *
 * 为什么独立成文件:index.html 是原作者还在更新的上游文件。把几百行手机样式塞进去,
 * 等于把当初拆出 net.js 时刻意避开的合并冲突重新挖回来。分开之后,下次合并 cardv2
 * 新版本的冲突面是 index.html 里的两行引用,不是散落各处的样式。
 *
 * 铁律:本文件内不允许出现任何媒体查询之外的规则。桌面逐像素不变由
 * test/browser/desktop-baseline.js 强制,漏一条就红。
 *
 * ── flex order 分配表(重排依赖 .screen 是 flex 列容器) ─────────────────
 * 风险:未设置 order 的元素默认值是 0,小于下表任何一个值。如果上游以后往这些
 * 页面里插入新元素而不给 order,那个元素会跑到最前面。改动这两个页面的结构时
 * 必须回来更新本表。
 *
 *   #draft-screen : .draft-head 1 | .draft-timer 2 | .pool-label(我方) 3
 *                   #my-pool 4 | .pool-label.enemy 5 | #enemy-pool 6
 *   #deploy-screen: 无 order —— 2026-10-16 布阵页重构后天然"整屏一屏看完",
 *                   原先把敌池推到最后那段 order 重排已整段删除(它与用户要求的
 *                   "敌方英雄池放在最上面"冲突)。**改动布阵页结构时不要再加 order。**
 * ──────────────────────────────────────────────────────────────────
 */

@media (max-width: 430px) {

  /* ===== 全局收敛 ===== */
  .screen { padding: 14px 10px 24px; }

  /* 桌面的 .btn 是 padding:14px 52px,两个按钮并排就会撑破 390px 的视口。
     大厅页的横向溢出(文档宽 430 > 视口 390)和布阵页按钮被挤成竖排单字,
     都是这一条造成的。 */
  .btn { padding: 12px 24px; font-size: 17px; letter-spacing: 3px; text-indent: 3px; }

  /* ===== 右侧常驻按钮栏 =====
     它是 position:fixed 的,在每个界面都会压住页头。缩小并让各页头为它让出位置。
     不会压到阵地模式的单位:单位居中,右缘约在 x=253,按钮栏从 x=350 起。 */
  #side-rail { top: 6px; right: 5px; gap: 5px; }
  #side-rail .mbtn { width: 32px; height: 32px; font-size: 14px; }
  /* 2026-10-16:音乐提示改到右下角、与 ⚙️ 同一水平。
     ⚠ 必须显式写 top:auto —— 只给 bottom 而 top 仍为旧值时,top+bottom 同时生效
     会把这条提示拉成整屏高的竖条(用户在手机上看到的就是这个 bug)。 */
  #music-tip { top: auto; bottom: 10px; right: 52px; font-size: 11.5px; padding: 6px 10px; }

  /* 页头左右对称留白,文字保持居中的同时不钻到按钮栏底下 */
  .draft-head, #title-screen .game-subtitle { padding-left: 42px; padding-right: 42px; }

  /* 顶部行动倒计时:桌面在 top:10px,手机两个战斗页的顶栏都占着那一行,
     下移到顶栏之下并缩小,避免盖住回合数/天时地利胶囊 */
  .turn-countdown { top: 46px; padding: 2px 11px; font-size: 13px; gap: 3px; }
  .turn-countdown .tc-num { min-width: 18px; }

  /* 推荐阵位徽标"推荐位置":布阵框更小,徽标同步缩小并上移贴近框中央 */
  .slot.rec-glow::after { top: calc(50% + 13px); font-size: 10px; letter-spacing: 2px; text-indent: 2px; padding: 1px 5px; }

  /* 守护免疫特效文字:手机头像更小(23px),文字同步缩小 */
  .guard-immune-fx .gif-text { font-size: 10.5px; letter-spacing: 0; }

  /* 技能触发特效文字:与守护特效同理,手机头像小,文字同步缩小 */
  .skill-fx .sfx-text { font-size: 10.5px; letter-spacing: 0; padding: 1px 6px; }

  /* 标记施加失败大字:手机屏宽窄,字号与字距缩小,来源小字同步缩小 */
  #fail-banner .fb-text { font-size: clamp(34px, 11vw, 48px); letter-spacing: 5px; text-indent: 5px; }
  #fail-banner .fb-src { font-size: 12.5px; letter-spacing: 3px; text-indent: 3px; }

  /* ===== 锻造型装备分发弹窗:手机缩小图标/头像框/字号,4 头像仍一行放下(80×4+间距≈350px) ===== */
  #forge-splash .fs-card { padding: 16px 14px 12px; }
  #forge-splash .fs-eq-icon { width: 82px; height: 82px; font-size: 44px; border-radius: 10px; }
  #forge-splash .fs-eq-name { font-size: 20px; letter-spacing: 4px; text-indent: 4px; }
  #forge-splash .fs-eq-desc { font-size: 12px; line-height: 1.6; }
  #forge-splash .fs-tip { font-size: 14px; margin: 9px 0; }
  #forge-splash .fs-owners { gap: 8px; }
  #forge-splash .fs-owner { width: 72px; padding: 6px 3px 5px; }
  #forge-splash .fs-owner .fs-o-icon { width: 46px; height: 46px; margin-bottom: 4px; }
  #forge-splash .fs-owner .fs-o-name { font-size: 11.5px; }
  #forge-splash .fs-owner .fs-o-slot { font-size: 10px; }
  #forge-splash .fs-timer { font-size: 12px; margin-top: 8px; }
  .fs-fly { width: 50px; height: 50px; font-size: 30px; }
  /* 武将卡装备小图标:手机卡更小,图标略缩 */
  .pu-eq { width: 14px; height: 14px; font-size: 9px; border-radius: 3px; }

  /* ===== 标题页 ===== */
  #title-screen { gap: 16px; }
  .game-subtitle { font-size: 14px; letter-spacing: 3px; text-indent: 3px; }
  .game-desc { font-size: 14px; padding: 14px 16px; line-height: 1.9; }

  /* ===== 联机大厅 ===== */
  .lobby-row { flex-wrap: wrap; gap: 6px; }
  #join-code { width: min(190px, 62vw); font-size: 20px; letter-spacing: 6px; }
  .lobby-code #lc-code { font-size: 28px; letter-spacing: 7px; }

  /* ===== 阵地战斗页 =====
     #pos-screen 是 height:100dvh; overflow:hidden,竖向没有任何富余。
     下面三段分别解决:顶栏跳变、底部说明条盖住最后一排、单位过大。 */

  #pos-screen { padding: 4px 6px; }

  /* 顶栏高度不是固定值,而是取决于 .game-name 被同一行的 .round-ind/.weather-chip
     挤压后换行成几行:.weather-chip 是 white-space:nowrap,自己不会换行也不会收缩,
     它越宽,.game-name 能用的宽度就越窄、被挤得换行越多,顶栏跟着越高
     (曾经天时地利胶囊显示 undefined 导致异常加宽,把游戏名挤成 3 行、顶栏涨到 102px;
     那处 bug 已在别处修掉,现在正常情况下顶栏是 56px)。手机上直接隐藏 .game-name,
     从根上切断这个耦合——右边再挤,也没有会换行的游戏名了,顶栏不再随胶囊内容抖动。 */
  #pos-screen .battle-top { gap: 6px; padding-right: 40px; flex-wrap: nowrap; }
  #pos-screen .battle-top .game-name { display: none; }
  #pos-screen .round-ind { font-size: 12.5px; padding: 2px 9px; white-space: nowrap; letter-spacing: 1px; }
  #pos-screen .weather-chip { font-size: 10px; padding: 2px 6px; gap: 3px; }

  /* 单位:三栏卡(名字行·左标记/装备 · 中头像 · 右两列图标属性 · 底部血条),宽度驱动防横向溢出
     2026-10-14:左窄条收成图标列(自适应),右窄条改两列「图标+数值」;
     属性字号统一走 --stat-fs(基准 --stat-fs-base),不再直接写死——之前写死导致 JS 自适应在手机上完全失效 */
  .pos-units { gap: 6px; }
  .pos-unit { height: auto; align-self: center; padding: 3px 3px 3px; }
  /* 2026-10-14:同 760px 断点——卡片 height:auto 时 .pu-main 的 flex:1 1 0 会塌成 0 高,
     导致头像溢出、血条压在头像上、右栏自适应被压到 6px。改为按内容撑高。 */
  .pos-unit .pu-main { flex: 0 0 auto; gap: 3px; }
  .pos-unit .pu-left { min-width: 13px; max-width: 19px; }
  .pos-unit .pu-right { flex: 0 0 56px; --stat-fs-base: 7.5px; }
  .pos-unit .pu-face { flex: 0 0 50px; width: 50px; height: 50px; } /* 显式正方形:height:auto 时 stretch 旁路 aspect-ratio(2026-09-22) */
  .pos-unit .pu-face .card-icon { font-size: 20px; }
  .pos-unit .pu-name-row { min-height: 14px; margin-bottom: 2px; font-size: 10px; }
  .pos-unit .pu-name { font-size: 10px; }
  .pos-unit .pu-range .pu-rr { width: 13px; height: 13px; font-size: 8px; }
  .pos-unit .pu-lose.on { font-size: 8px; }
  .pos-unit .pu-hpbar { height: 13px; margin-top: 2px; }
  .pos-unit .pu-hpnum, .pos-unit .pu-snum { font-size: 7px; }
  .pos-unit .pu-status { gap: 2px; }
  .pos-unit .pu-status .st { font-size: 8px; padding: 0 1px; }
  .pos-unit .float-text { font-size: 14px; }
  .pos-unit.dead::after { font-size: 17px; letter-spacing: 4px; }
  .pos-unit.resting::before, .pos-unit.blink-attack::before, .pos-unit.blink-skill::before { font-size: 9.5px; padding: 1px 6px; }
  .pos-unit.grant-ready.my::after { font-size: 9px; }

  /* 底部天时地利说明条:42px 且 position:absolute;bottom:0,盖在最低一排上。
     压薄到约 26px,并给下半场加同等的下内边距把最后一排顶到它之上。 */
  #weather-info { padding: 5px 8px 3px; }
  #weather-info .wi-in { gap: 6px; max-width: 100%; }
  #weather-info .wi-name { font-size: 11.5px; letter-spacing: 1px; }
  #weather-info .wi-desc { font-size: 10px; }
  /* brief 原选择器是 #pos-screen > .pos-half:last-of-type ——:last-of-type 按标签名在
     全体同级 div 里数最后一个,而 #pos-screen 的最后一个直接子 div 其实是
     #pos-battle-log(排在两个 .pos-half 之后),导致该规则匹配 0 个元素、
     padding-bottom 恒为 0(实测验证过)。改用 .pos-side.my——它在页面里只出现一次,
     就是"我方"那半场的直接内容区,效果等价且不受兄弟节点顺序影响。 */
  #pos-screen .pos-side.my { padding-bottom: 36px; }

  /* 中轴区:提示文字压在敌方前拒卡上,给它固定的居中排版与足够行高 */
  .pos-axis { gap: 5px; }
  #pos-action-prompt { font-size: 13.5px; min-height: 22px; text-align: center; line-height: 1.35; letter-spacing: 1px; }
  .pos-grant-hints .gh-left, .pos-grant-hints .gh-right { font-size: 11px; padding: 5px 3px; line-height: 1.5; }
  .gh-solo { font-size: 12px; padding: 4px 12px; }
  #pos-toast { bottom: 74px; font-size: 14px; padding: 8px 18px; }

  /* ===== 战报浮窗:两态 =====
     桌面上它常驻左侧空地;手机上没有空地,它每回合稳定压住 2 个单位——敌方左角
     和我方左角,你既看不见也拖不动。改成:收起=左下角小胶囊,展开=底部抽屉。 */
  .battle-log.floating {
    top: auto; bottom: 8px; left: 6px; right: auto; transform: none;
    width: auto; max-width: calc(100vw - 12px);
  }
  .battle-log.floating.min {
    padding: 4px 10px; border-radius: 999px; max-height: none;
    background: rgba(24,19,12,.92); border: 1px solid rgba(176,141,62,.5);
  }
  .battle-log.floating.min .bl-head { border-bottom: none; padding: 0; gap: 8px; font-size: 12px; }
  .battle-log.floating:not(.min) {
    left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 58vh;
    z-index: 140; border-radius: 10px 10px 0 0; padding: 8px 12px 16px;
    font-size: 12px; line-height: 1.75;
    background: rgba(18,14,9,.97); box-shadow: 0 -10px 30px rgba(0,0,0,.6);
  }
  .battle-log.floating:not(.min) .bl-head { font-size: 12.5px; padding-bottom: 5px; }
  .battle-log.floating .bl-toggle { width: 24px; height: 24px; font-size: 14px; }

  /* ===== 阵地布阵页(2026-10-16 重构后) =====
     新布局:整页一屏不滚动 —— 敌池一排头像 → 4 阵位 → 我方 8 条横栏 → 操作行。
     阵位与横栏尺寸由 index.html 的 760px / 740px 两条媒体查询负责,这里不再重复覆盖。
     旧版那段「order 重排 + 92x86 阵位 + 250px 宽敌池卡」已整段删除:它会把敌池推到最下面,
     与"敌方英雄池放在最上面"直接冲突。
     ⚠ 本文件在 index.html 之后加载,同权重规则一律以本文件为准 ——
     以后改布阵页样式,要么写进 index.html 的媒体查询(带 #deploy-screen 前缀),要么回这里改,
     不要两头都写。 */
  .draft-head h2 { font-size: 19px; letter-spacing: 6px; text-indent: 6px; }
  .draft-head .tip { font-size: 11.5px; line-height: 1.6; margin-top: 4px; }
  .draft-timer { margin: 6px 0 2px; gap: 8px; }
  .draft-timer .num { font-size: 22px; min-width: 40px; }
  .timer-bar { width: min(220px, 52vw); }
  .pool-label { font-size: 11.5px; margin: 8px 0 5px; letter-spacing: 1px; }
  .deploy-slots-wrap { gap: 8px; margin: 2px 0 4px; }
  .deploy-line { gap: 8px; }
  .deploy-actions { gap: 8px; margin-bottom: 2px; justify-content: center; }

  /* 英雄卡紧凑版(主要服务 1v1 选将页):技能描述截两行 */
  .pool-row { gap: 6px; }
  #draft-screen .hero-card { width: 100%; max-width: 360px; padding: 6px; gap: 7px; }
  #draft-screen .hc-portrait { width: 52px; height: 52px; }
  /* 布阵页横栏头像:手机上加到 40px(桌面 38),并锁死尺寸避免塌成 0 宽 */
  #deploy-pool .hc-portrait { flex: 0 0 40px; width: 40px; height: 40px; }
  .hc-portrait .card-icon { font-size: 26px; }
  /* ⚠ 名字必须强制一行:手机头像只有 40~52px,3 个字的英雄名带上字距就会折成两行、把头像盖住 */
  .hc-portrait .hc-name { font-size: 11px; letter-spacing: 1.5px; text-indent: 1.5px; padding: 2px 0 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 布阵页的小头像只有 38/40px,上面那条 11px + 1.5px 字距会把 3 字英雄名截成"防御…"。
     本文件比 index.html 晚加载,必须用 ID 权重(1,1,0)才压得住 .hc-portrait .hc-name 的 (0,2,0) */
  #deploy-enemy-pool .hc-name { font-size: 9px; letter-spacing: 0; text-indent: 0; padding: 2px 0 1px; }
  #deploy-pool .hc-name { font-size: 9.5px; letter-spacing: 0; text-indent: 0; padding: 1px 0; }
  .hc-range { width: 18px; height: 18px; font-size: 10px; top: 3px; left: 3px; }
  .hc-range.skill-range { font-size: 9px; min-width: 18px; height: 18px; padding: 0 4px; }
  .hc-stats { font-size: 11px; margin-top: 1px; }
  .hc-skill {
    font-size: 10px; line-height: 1.45; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-card.chosen::after { font-size: 10px; padding: 1px 6px; top: -8px; right: -5px; }

  /* 对方英雄池(布阵页):一排 8 个小头像,具体宽度由 index.html 控制,这里只兜底 */
  #deploy-enemy-pool { width: 100%; }

  /* 点选落位的选中态。桌面没有这个类,不受影响。 */
  #deploy-pool .hero-card.mob-sel {
    border-color: #e8c95c;
    box-shadow: 0 0 0 2px #e8c95c, 0 0 20px rgba(232,201,92,.35);
    transform: translateY(-2px);
  }

  /* ===== 1v1 选将页 =====
     20 秒倒计时下,原顺序要求玩家先滚过对方 5 张卡才够得着自己的。
     这是本次唯一一处手机端与桌面端呈现顺序不同的地方,是有意为之。
     原作者把对方池排在前面是为了"先看对方可能选什么",桌面上两者同屏可见,
     手机上不可能。order 分配表见本文件开头。 */
  #draft-screen .draft-head { order: 1; }
  #draft-screen .draft-timer { order: 2; }
  #draft-screen .pool-label:not(.enemy) { order: 3; }
  #draft-screen #my-pool { order: 4; }
  #draft-screen .pool-label.enemy { order: 5; }
  #draft-screen #enemy-pool { order: 6; }

  /* 倒计时吸顶:滚动挑将时始终看得见还剩几秒。
     现状披露(844px 真实视口下实测):选将页只有 5 张卡,文档高 ~920~939px,
     可滚动距离(docH-844)只有 ~76~95px,小于倒计时条自身 ~83~102px 的静态
     偏移量——滚动永远够不到"会被卷出屏幕"的临界点,这条 sticky 对真实用户
     当前不可观测(test/browser/mobile-layout.js 里的绊线断言把这个事实钉住,
     一旦条件反转会自动报警)。仍然保留它,是面向未来:Task 5 把英雄卡从
     116px 压到了 62~66px,计划明确允许后人以后调整这组尺寸——卡片一旦变
     大,或英雄池数量变多,可滚动距离就会追上并超过静态偏移,这条规则才
     真正开始承重。 */
  #draft-screen .draft-timer {
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(180deg, rgba(12,9,6,.96) 70%, transparent);
    padding: 6px 0 8px; width: 100%; justify-content: center;
  }

  .enemy-picked-tip { font-size: 11.5px; }

  /* ===== 1v1 战斗页 =====
     .battle-top / .battle-top .game-name / .round-ind / .battle-log 这四条原来是
     裸类规则,同名类在阵地战斗页(#pos-screen)也存在,会一起命中。此前全靠"运气"
     没出事:.battle-top 与 .round-ind 有更高特异度的 #pos-screen .battle-top /
     #pos-screen .round-ind 顶着(specificity 更高,与谁先声明无关);.battle-log
     则是巧合——index.html 基准的 .battle-log.floating(两个类)天然比这里的裸
     .battle-log(一个类)特异度更高,阵地页那份浮窗从未真的读到过这条规则的任何
     一个属性。特异度够不够全靠巧合,不是设计,后人稍微调整任何一处都可能悄悄
     打破它。改成 #battle-screen 前缀,直接从选择器层面切断命中阵地页的可能,
     不再依赖谁的特异度更高。
     这里的 padding-right:40px 与上面 #pos-screen .battle-top 那条同值,是纯粹
     巧合,不是"阵地页没有别的覆盖规则可用"——之前这段注释的说法是错的:
     index.html 的基准 .battle-top 本身就没有声明 padding(760px/700px 两处既有
     媒体查询里也没有),#pos-screen .battle-top 这条 ID 规则一直是阵地页 padding
     的唯一独立来源,不依赖这条裸规则是否存在;这条现在收窄到 #battle-screen,
     只服务 1v1 战斗页,两条谁改谁的数值都不会牵动对方。 */
  #battle-screen .battle-top { width: 100%; padding-right: 40px; }
  #battle-screen .battle-top .game-name { font-size: 13px; letter-spacing: 2px; }
  #battle-screen .round-ind { font-size: 14px; padding: 3px 12px; }
  .hero-panel { width: min(340px, calc(100vw - 24px)); padding: 10px 12px 9px; }
  .hero-panel .card-icon { font-size: 38px; }
  .hero-panel .hero-name { font-size: 17px; }
  .center-zone { width: 100%; gap: 7px; }
  .action-prompt { font-size: 16px; min-height: 28px; text-align: center; }
  .act-btn { font-size: 16px; padding: 11px 22px; letter-spacing: 2px; text-indent: 2px; }
  .act-btns-row { gap: 10px; }
  #battle-screen .battle-log { font-size: 12px; max-height: 110px; padding: 6px 10px; }

  /* ===== 猜拳覆盖层 ===== */
  .rps-btn { width: 72px; height: 72px; font-size: 34px; }
  .rps-btns { gap: 16px; }
  .rps-btn::after { font-size: 12px; bottom: -22px; letter-spacing: 2px; text-indent: 2px; }
  .rps-timer { width: min(260px, 72vw); }
  .rps-ov-label { font-size: 14px; letter-spacing: 4px; text-indent: 4px; }

  /* ===== 结算页(2026-10-17 重排)=====
     ⚠ 老规则是 `.end-heroes { flex-direction: column }` + `.end-minis` 自动换行 ——
     手机上把双方阵容竖着堆、每方又折成 2×2,这正是用户说的"我方阵容不是 4 个一排"的真凶。
     现在:双方阵容并排、各自 4 个一排、只留头像 + 名字,整页一屏不滚动。 */
  #end-screen { justify-content: flex-start; }
  .end-heroes { flex-direction: row; gap: 6px; }
  .end-btns { gap: 10px; flex-wrap: nowrap; justify-content: center; }
  .end-hero .end-minis { display: grid; grid-template-columns: repeat(4, 1fr); max-width: none; gap: 3px; }
  .end-mini { padding: 3px 1px 4px; }
  .end-mini .ei { width: 38px; height: 38px; font-size: 18px; }
  .end-mini .en { font-size: 9.5px; }

  /* ===== 智者型答题弹窗:缩小字号与内边距,选项按钮加大触控区 ===== */
  #quiz-splash .qz-card { padding: 14px 12px 10px; }
  #quiz-splash .qz-title { font-size: 13px; letter-spacing: 2px; }
  #quiz-splash .qz-meta { font-size: 11.5px; }
  #quiz-splash .qz-chip { min-width: 34px; padding: 2px 4px; font-size: 10.5px; }
  #quiz-splash .qz-question { font-size: 15px; min-height: 46px; }
  #quiz-splash .qz-opt { padding: 11px 12px; font-size: 14px; }
  #quiz-splash .qz-pred { font-size: 12.5px; }
  #quiz-splash .qz-cheer { font-size: 13px; letter-spacing: 2px; }
  #quiz-splash .qz-result .qr-big { font-size: 18px; }
  #quiz-splash .qz-result .qr-line { font-size: 13.5px; }
  /* 智者升学大字:手机字号与字距缩小 */
  #promo-banner .pb-text { font-size: clamp(38px, 12vw, 54px); letter-spacing: 6px; text-indent: 6px; }
  #promo-banner .pb-sub { font-size: 13px; letter-spacing: 3px; text-indent: 3px; }
}