/* ============================================================
 * PSO 防线 (css/defense.css) —— 竖屏战场
 *   舞台 = 9:16 竖屏 (与《灰烬长桥》同型); HUD 叠在舞台内:
 *   顶部 防线耐久 + 波次信息 · 底部 英雄血条 + 技能 · 左右下角 触屏走位。
 * ============================================================ */
.df-wrapper { --df-ink: #e8eef6; --df-dim: #9fb0c4; --df-line: rgba(120, 160, 210, .28); }
.df-mark { width: 22px; height: 22px; vertical-align: -3px; margin-right: 6px; color: #7fc0ff; }

.df-stagebox { display: flex; justify-content: center; }
.df-stage {
    position: relative;
    aspect-ratio: 9 / 16;          /* JS 会按可用空间放宽到 3/4 (宽屏时更宏大) */
    height: min(calc(100vh - 210px), 1240px);
    width: auto;
    max-width: 100%;
    background: #0a0d13;
    border: 1px solid var(--df-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    /* ⚠ 这里**不要**再用 -webkit-mask-image 去修"iOS 圆角裁黑画布": 那条老偏方风险极高 ——
       一旦 Safari 没能解码 mask 图, 遮罩按全透明处理, **整块舞台会直接消失**(只剩黑背景)。
       2026-10-06 已回退 (用户报 iOS "根本没法玩")。画布裁切偶发问题宁可保留, 也不能拿整个舞台冒险。
       真要修, 应改成"把画布放进不带圆角的内层容器"的结构性做法。 */
    /* ★ 默认允许触摸滚动 (选人界面是个长列表, 手机上必须能滑);
       只有进战场后才锁手势 (桥面上拖拽 = 走位, 不该带着页面滚) */
    touch-action: manipulation;
}
body.df-playing .df-stage { touch-action: none; }
.df-stage canvas#df-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.df-stage canvas.df-2d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.df-fps { position: absolute; right: 8px; bottom: 6px; font-size: 10.5px; color: rgba(160, 180, 205, .6); }

.df-loading {
    position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
    color: var(--df-dim); font-size: 14px; letter-spacing: .06em;
    background: radial-gradient(circle at 50% 40%, rgba(20, 32, 52, .9), rgba(8, 10, 16, .96));
}

/* ---------- 选人 (竖屏单列) ---------- */
.df-select {
    position: absolute; inset: 0; z-index: 30; display: block;
    background: radial-gradient(circle at 50% 20%, rgba(16, 26, 42, .95), rgba(8, 10, 16, .98));
    padding: 10px; overflow: auto;
    -webkit-overflow-scrolling: touch;      /* iOS: 惯性滚动 */
}
.df-result, .df-brief-box { -webkit-overflow-scrolling: touch; }
.df-selcol { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.df-sel-h { color: var(--df-ink); font-size: 12px; font-weight: 700; margin: 4px 0 2px; }
.df-sel-hint { color: var(--df-dim); font-weight: 400; font-size: 10.5px; margin-left: 5px; }
.df-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 5px; }
.df-job-h { color: #8fb6de; font-size: 11px; margin: 6px 0 4px; border-left: 3px solid #3f78b4; padding-left: 6px; }
.df-card {
    display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
    background: rgba(18, 26, 40, .86); border: 1px solid var(--df-line); border-radius: 7px;
    padding: 5px 7px; cursor: pointer; text-align: left; color: var(--df-ink); transition: border-color .15s, background .15s;
}
.df-card:hover { border-color: #4e8ccc; background: rgba(26, 38, 58, .92); }
.df-card.on { border-color: #ffcf5a; background: rgba(58, 46, 20, .85); }
.df-card-top { font-size: 10px; color: #8fb6de; }
.df-card-name { font-size: 12px; font-weight: 700; }
.df-card-sub { font-size: 10px; color: var(--df-dim); }
.df-note { color: var(--df-dim); font-size: 11.5px; padding: 2px; line-height: 1.6; }
.df-note-sm { color: #8fb6de; font-size: 10.5px; margin-top: 2px; }
.df-preview {
    position: relative; height: 150px; flex: none; border-radius: 9px; overflow: hidden;
    background: linear-gradient(180deg, rgba(24, 34, 52, .9), rgba(10, 14, 22, .95));
    border: 1px solid var(--df-line);
}
.df-pv-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--df-dim); font-size: 12px; }
.df-info { color: var(--df-ink); font-size: 12px; line-height: 1.6; }
.df-info-h { font-size: 13.5px; font-weight: 700; }
.df-info-sub { color: #8fb6de; font-size: 11px; margin-bottom: 3px; }
.df-info-skills { display: flex; flex-direction: column; gap: 4px; }
.df-skill-chip { background: rgba(20, 30, 46, .85); border: 1px solid var(--df-line); border-radius: 6px; padding: 3px 7px; font-size: 11px; display: block; }
.df-skill-chip b { color: #ffcf5a; margin-right: 4px; }
.df-skill-chip i { color: var(--df-dim); font-style: normal; margin-left: 5px; font-size: 10px; }
.df-selbar {
    position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 6px;
    background: linear-gradient(180deg, rgba(8, 12, 20, .6), rgba(8, 12, 20, .96) 40%); padding: 8px 0 2px; margin-top: 4px;
}
.df-maprow { color: var(--df-dim); font-size: 11.5px; display: flex; align-items: center; gap: 8px; }
.df-maprow select { flex: 1; background: rgba(16, 24, 36, .9); color: var(--df-ink); border: 1px solid var(--df-line); border-radius: 7px; padding: 5px 8px; font-size: 12px; }
/* ★ "正在游玩 N 人" (2026-10-09): 选人界面底部一行小字, 与"今日榜首/历史最高"并列 */
.df-livew { font-size: 11.5px; color: #7fd8a0; margin-top: 4px; letter-spacing: .02em; }
/* ★ 战斗 HUD 上的"🎮 N"徽记 (2026-10-09): 挂在**区段名牌**那行右侧 ——
   常驻可见、不占顶栏 (顶栏在 360px 手机上已经很挤, 加进去会把读数挤到屏外), 颜色略亮便于一眼看到 */
.df-livechip { margin-left: 9px; color: #7fd8a0; opacity: .95; letter-spacing: .02em; }
.df-money { color: var(--df-dim); font-size: 10.5px; text-align: center; }
.df-start {
    background: linear-gradient(180deg, #ffd873, #f0a83c); color: #2a1c04; border: none; border-radius: 9px;
    padding: 12px 16px; font-size: 15.5px; font-weight: 800; cursor: pointer; letter-spacing: .08em;
    box-shadow: 0 6px 16px rgba(240, 168, 60, .28);
}
.df-start:disabled { filter: grayscale(.5) brightness(.85); cursor: default; }
.df-ghost { background: rgba(20, 30, 46, .9); color: var(--df-ink); border: 1px solid var(--df-line); border-radius: 9px; padding: 10px 14px; font-size: 14px; cursor: pointer; }

/* ---------- HUD ---------- */
.df-hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; color: var(--df-ink); }
.df-linewrap { position: absolute; top: 0; left: 0; right: 0; padding: 8px 10px 6px; background: linear-gradient(180deg, rgba(6, 10, 18, .82), rgba(6, 10, 18, 0)); }
.df-linetop { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .06em; color: #ffd8a8; margin-bottom: 3px; }
.df-linetop b { font-size: 13px; }
.df-linebar { height: 9px; background: rgba(6, 10, 18, .78); border: 1px solid rgba(255, 190, 120, .35); border-radius: 999px; overflow: hidden; }
.df-linebar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff9a4a, #ffd873); transition: width .15s linear; }
.df-top { position: absolute; top: 46px; left: 10px; right: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.df-chip { background: rgba(8, 14, 24, .7); border: 1px solid var(--df-line); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; }
.df-chip b { color: #ffd873; }
.df-prep { color: #ffd873; font-size: 12px; margin-left: auto; }
.df-log { position: absolute; top: 78px; left: 12px; font-size: 11.5px; line-height: 1.65; color: rgba(210, 225, 240, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.df-supply {
    position: absolute; top: 108px; left: 50%; transform: translateX(-50%);
    background: rgba(10, 20, 30, .8); border: 1px solid rgba(140, 255, 175, .5); border-radius: 999px;
    padding: 4px 14px; font-size: 12px; color: #b9ffd0; letter-spacing: .06em;
}
.df-bottom { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 7px; }
.df-heroline { display: flex; align-items: center; gap: 7px; }
.df-herotag { font-size: 11px; color: #ffd873; background: rgba(8, 14, 24, .8); border: 1px solid rgba(255, 207, 90, .35); border-radius: 5px; padding: 1px 6px; }
.df-herobar { flex: 1; height: 10px; background: rgba(8, 14, 24, .8); border: 1px solid var(--df-line); border-radius: 999px; overflow: hidden; }
.df-herobar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #57d07a, #9be08a); transition: width .12s linear; }
/* ★★ 濒危血条闪红 (2026-10-08 "紧张刺激"; 与红边/心跳同一判据: 英雄 <35% / 防线 <25%) */
@keyframes df-crit { from { box-shadow: 0 0 0 0 rgba(255, 70, 50, 0); } to { box-shadow: 0 0 9px 2px rgba(255, 70, 50, .85); } }
.df-herobar.crit, .df-linebar.crit { border-color: rgba(255, 90, 70, .95) !important; animation: df-crit .62s infinite alternate; }
.df-herobar.crit i { background: linear-gradient(90deg, #ff5a46, #ff8a6a) !important; }
.df-linebar.crit i { background: linear-gradient(90deg, #ff5a46, #ffb066) !important; }
.df-herotxt { font-size: 11px; color: rgba(210, 225, 240, .9); min-width: 62px; text-align: right; }
.df-skills { display: flex; flex-wrap: wrap; gap: 7px; pointer-events: auto; }
.df-skill {
    background: rgba(10, 18, 30, .86); border: 1px solid rgba(255, 207, 90, .42); color: var(--df-ink);
    border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; flex: 1;
}
.df-skill b { color: #ffd873; margin-right: 4px; }
.df-skill i { display: block; font-style: normal; font-size: 10.5px; color: #9fb0c4; }
.df-skill.cd { filter: grayscale(.7) brightness(.75); border-color: var(--df-line); }
/* ★ 技能强化摘要行: 必须**独占一行 + 单行省略** —— 之前漏了这条样式, 它当普通 flex 子项
   把长文案折成多行 ⇒ 整条技能栏变高、把技能按钮挤上去 (用户报"手机端技能强化把技能按钮挤高了") */
.df-skmods {
    flex: 1 1 100%; order: 99; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 10.5px; line-height: 1.4; color: #d9b8ff; margin-top: -1px;
}
.df-touch {
    position: absolute; bottom: 84px; left: 12px; width: 54px; height: 54px; border-radius: 50%;
    background: rgba(10, 18, 30, .5); border: 1px solid rgba(120, 160, 210, .32); color: rgba(220, 235, 250, .85);
    display: flex; align-items: center; justify-content: center; font-size: 19px; pointer-events: auto; user-select: none;
}
.df-touch-r { left: auto; right: 12px; }

/* ---------- 结算 ---------- */
.df-result { position: absolute; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; background: rgba(6, 9, 14, .74); padding: 14px; overflow: auto; }
.df-rst-card { width: 100%; background: rgba(14, 20, 32, .97); border: 1px solid rgba(255, 207, 90, .35); border-radius: 12px; padding: 16px; }
.df-rst-title { font-size: 18px; font-weight: 800; color: #ffd873; letter-spacing: .08em; margin-bottom: 8px; }
.df-rst-body { font-size: 13px; line-height: 1.9; color: var(--df-ink); }
.df-rst-body b { color: #ffd873; }
.df-score { margin-top: 6px; font-size: 15px; }
.df-new { color: #8affa0; }
.df-rst-btns { display: flex; gap: 9px; margin-top: 12px; }
.df-rank { margin-top: 10px; border-top: 1px dashed rgba(120, 160, 210, .3); padding-top: 8px; }
.df-rank-h { font-size: 12px; color: #8fb6de; margin-bottom: 5px; }
/* ★ 结算页榜单 = 今日榜 (2026-10-08): 标题右侧的"结算时间/奖金"小字 */
.df-rank-h small { color: #7d8ea3; font-size: 10.5px; margin-left: 6px; }
.df-rank-list { display: flex; flex-direction: column; gap: 3px; }
.df-rank-row { display: flex; gap: 7px; align-items: baseline; font-size: 11.5px; }
.df-rank-row b { color: #ffd873; width: 20px; text-align: right; }
.df-rank-row span { min-width: 76px; }
.df-rank-row i { color: #8fb6de; font-style: normal; }
.df-rank-row em { color: #9fb0c4; font-style: normal; margin-left: auto; }

/* ---------- 说明卡 ---------- */
.df-rules { display: flex; flex-direction: column; gap: 7px; }
.df-rule { font-size: 12.5px; line-height: 1.8; color: #4a5b70; }
.df-rule b { color: #1d2b3d; }

/* ---------- 手机 ---------- */
@media (max-width: 620px) {
    .df-stage { width: 100%; height: auto; max-height: 88vh; }
    .df-preview { height: 160px; }
    .df-cards { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .df-skill { padding: 5px 8px; font-size: 11.5px; }
}

/* ★ 手机上的选人/结算 = 菜单页: 面板回到文档流, 由**页面自身**滚动
   (iOS 的嵌套滚动容器经常整个卡住 ⇒ "根本选不了"; 面板自滚动在手机上必须让位给页面滚动) */
@media (max-width: 700px) {
    body:not(.df-playing) .df-stage { overflow: visible; }
    body:not(.df-playing) .df-select { position: static; overflow: visible; padding: 12px 10px 4px; }
    body:not(.df-playing) .df-selcol { gap: 10px; }
    body:not(.df-playing) .df-card { padding: 8px 9px; }          /* 触摸目标放大 */
    body:not(.df-playing) .df-card-name { font-size: 13px; }
    /* v4 (2026-10-07): 旧版"手机上把立绘加高到 190px"已作废 —— 立绘并进了"英雄卡",
       尺寸由文件末 `.df-hero .df-preview` 统一给 (98×134)。留着这条会以更高优先级
       (body:not() 2,1 > 2,0) 把英雄卡撑成 210px 高。 */
    body:not(.df-playing) .df-select::before { display: none; }   /* 文档流下不再需要它铺底 */
    body:not(.df-playing) .df-selbar { position: sticky; bottom: 0; padding-bottom: 10px; }
    /* 只隐藏"战场"的两块画布 —— ★ 不能写成 canvas{display:none}: 那会把角色预览(Item3D)的
       画布一起干掉, 手机上预览框就成空的了 */
    body:not(.df-playing) .df-stage > canvas#df-canvas,
    body:not(.df-playing) .df-stage > canvas.df-2d { display: none; }
}

/* 满屏按钮 (舞台右上角) */
.df-fs {
    position: absolute; right: 10px; top: 10px; z-index: 26;
    width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
    background: rgba(8, 14, 24, .7); border: 1px solid rgba(120, 160, 210, .35);
    color: #cfe0f2; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.df-fs:hover { background: rgba(20, 32, 50, .85); }
.df-stage:fullscreen { border-radius: 0; height: 100%; width: 100%; aspect-ratio: auto; }
.df-stage:-webkit-full-screen { border-radius: 0; height: 100%; width: 100%; }

/* 进战场 = 沉浸布局: 收起说明卡与标题, 舞台吃满窗口 */
body.df-playing .df-wrapper > .pg-title,
body.df-playing .df-wrapper > .pg-subtitle,
body.df-playing .df-wrapper > .pg-card { display: none; }
body.df-playing .df-wrapper { padding-top: 6px; }

/* 当前武器条 (血量条上方) */
.df-gun {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px;
    background: rgba(8, 14, 24, .78); border: 1px solid rgba(255, 207, 90, .38); border-radius: 999px;
    padding: 3px 12px; font-size: 11.5px; color: #ffe6ae; white-space: nowrap; max-width: 92%;
    overflow: hidden; text-overflow: ellipsis;
}

.df-mapfixed { color: #8fb6de; font-size: 11.5px; }
.df-mapfixed b { color: #ffd873; }

/* 波次横幅 (每波开场打一条大字) */
.df-banner {
    position: absolute; left: 50%; top: 34%; z-index: 22;
    transform: translate(-50%,-50%);
    font-size: 30px; font-weight: 900; letter-spacing: .12em;
    color: #ffe0a0; text-shadow: 0 3px 14px rgba(0,0,0,.9), 0 0 22px rgba(255,190,90,.55);
    pointer-events: none; white-space: nowrap; transition: opacity .12s linear;
}
/* HUD 加粗加大 (参考作的数字都很大) */
.df-linetop { font-size: 13.5px; }
.df-linetop b { font-size: 17px; }
.df-linebar { height: 12px; }
.df-chip { font-size: 13px; padding: 3px 11px; }
.df-chip b { font-size: 16px; }
.df-hud .df-chip:first-child b { font-size: 18px; }
.df-gun { font-size: 12.5px; bottom: 104px; }

/* ---------- 补给二选一: 桥上的两张卡 (左=援军 / 右=修复) ---------- */
.df-bcards { position: absolute; inset: 0; z-index: 21; pointer-events: none; }
.df-bcard {
    position: absolute; transform: translate(-50%, -100%);
    width: 168px; padding: 8px 9px; border-radius: 10px;
    background: linear-gradient(180deg, rgba(12,20,32,.95), rgba(8,12,20,.92));
    border: 1px solid rgba(140,255,175,.55); box-shadow: 0 6px 22px rgba(0,0,0,.55);
    display: flex; gap: 8px; align-items: center;
}
.df-bcard.repair { border-color: rgba(140,215,255,.6); }
.df-bcard::after {
    content: ''; position: absolute; left: 22%; right: 22%; bottom: -8px; height: 8px;
    background: linear-gradient(180deg, rgba(140,255,175,.5), transparent);
}
.df-bcard.repair::after { background: linear-gradient(180deg, rgba(140,215,255,.5), transparent); }
.df-bcard img { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; background: #0d141f; }
.df-bcard .df-bglyph { width: 46px; height: 46px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
    background: rgba(140,215,255,.12); color: #9fd8ff; font-size: 24px; }
.df-bcard .df-btxt { min-width: 0; display: flex; flex-direction: column; }
.df-bcard .df-btitle, .df-bcard .df-bsub, .df-bcard .df-bkey { display: block; }
.df-bcard .df-btitle { font-size: 13.5px; font-weight: 800; color: #eaf6ff; }
.df-bcard.repair .df-btitle { color: #cfeaff; }
.df-bcard .df-bsub { font-size: 11px; color: #9fb0c4; line-height: 1.45; }
.df-bcard .df-bkey { font-size: 10.5px; color: #ffd873; margin-top: 2px; }
.df-bcard.on { border-color: #ffd873; box-shadow: 0 0 0 2px rgba(255,216,115,.35), 0 8px 26px rgba(0,0,0,.6); }

/* ---------- 过关装备选择 ---------- */
.df-equip {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 33;
    padding: 10px; background: linear-gradient(0deg, rgba(6,10,18,.96), rgba(6,10,18,.72));
    border-top: 1px solid rgba(255,207,90,.35);
}
.df-eqh { font-size: 12.5px; color: #ffd873; margin-bottom: 7px; letter-spacing: .08em; }
.df-eqh span { color: #9fb0c4; margin-left: 8px; letter-spacing: 0; }
.df-eqrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.df-eqcard {
    background: rgba(14,22,34,.95); border: 1px solid rgba(120,160,210,.32); border-radius: 9px;
    padding: 7px 8px; cursor: pointer; color: #e8eef6; text-align: left; position: relative; overflow: hidden;
}
.df-eqcard:hover { border-color: #ffd873; }
.df-eqcard.cur { border-color: rgba(120,160,210,.2); opacity: .55; cursor: default; }
.df-eqcard .df-eqname { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-eqcard .df-eqstar { color: #ffd873; font-size: 11px; }
.df-eqcard .df-eqstat { font-size: 10.5px; color: #9fb0c4; line-height: 1.5; }
.df-eqcard svg { position: absolute; right: 6px; top: 6px; opacity: .5; }
.df-eqskip {
    margin-top: 7px; width: 100%; background: rgba(20,30,46,.9); color: #cfe0f2;
    border: 1px solid rgba(120,160,210,.3); border-radius: 8px; padding: 7px; font-size: 12.5px; cursor: pointer;
}

/* ================= 军事风 HUD (对标《灰烬长桥》) ================= */
.df-stage::after {                       /* 暗角 + 扫描线质感
    ★ 不用 mix-blend-mode: 全屏混合会让整个舞台每帧重新合成 (手机端最大的性能黑洞之一),
      这里改成"纯 rgba 叠加" —— 观感几乎一致, GPU 成本降一个量级 */
    content: ''; position: absolute; inset: 0; z-index: 15; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(2, 6, 12, .5) 100%);
}
.df-force {
    position: absolute; top: 0; left: 0; right: 0; z-index: 24;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 7px 11px 0;
}
.df-force-l { display: flex; flex-direction: column; }
.df-force-org { font: 700 10px/1.2 Consolas, 'Courier New', monospace; letter-spacing: .34em; color: #ffcf7a; opacity: .92; }
.df-force-name { font-size: 11.5px; color: #cfe0f2; letter-spacing: .12em; margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.df-force-r { display: flex; flex-direction: column; align-items: flex-end; }
.df-sector { font: 700 10.5px/1.2 Consolas, monospace; letter-spacing: .18em; color: #9fd8ff; }
.df-sector b { color: #fff; }
.df-clock { font: 700 17px/1.3 Consolas, monospace; color: #ffd873; letter-spacing: .08em; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.df-linewrap { padding-top: 34px; }       /* 给抬头让位 */
.df-linetop { justify-content: flex-start; gap: 8px; }
.df-linetop b { margin-left: auto; }

/* 部队名册 (底部一行小卡: 立绘 + 血条) */
.df-roster { display: flex; gap: 5px; flex-wrap: wrap; }
.df-rchip {
    width: 44px; padding: 2px; border-radius: 6px; position: relative;
    background: rgba(8,14,24,.78); border: 1px solid rgba(120,160,210,.35);
}
.df-rchip img { width: 100%; height: 30px; object-fit: cover; border-radius: 4px; display: block; background: #0d141f; }
.df-rchip.dead { filter: grayscale(1) brightness(.5); }
/* ★ 必须显式 block: span 是 inline ⇒ height:3px 会被忽略, 整条"血条"撑成 30px 高并
   溢出卡片外, 压在下方英雄血条/HP 数字上 (用户实报"血条挤在一块", 实测该容器 38×30) */
.df-rchip .df-rc-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); margin-top: 2px; overflow: hidden; }
.df-rchip .df-rc-bar i { display: block; height: 100%; background: #6fe08a; }
.df-rchip .df-rc-tag { position: absolute; right: 2px; top: 2px; font-size: 9px; color: #ffd873; text-shadow: 0 1px 2px #000; }
.df-rchip .df-rc-el { position: absolute; left: 2px; top: 2px; font-size: 8.5px; font-weight: 800; color: #ffe9a0; text-shadow: 0 1px 2px #000; }
.df-rchip.hero { border-color: rgba(255,207,90,.65); }

/* 武器经验卡 (参考作的 C-14 电磁步枪条) */
.df-wxp {
    display: flex; align-items: center; gap: 8px;
    background: rgba(8,14,24,.8); border: 1px solid rgba(140,180,230,.3); border-radius: 8px;
    padding: 5px 9px; font-size: 11px; color: #cfe0f2;
}
.df-wxp .df-wx-name { font-weight: 800; color: #ffd873; white-space: nowrap; }
.df-wxp .df-wx-ic { display: flex; align-items: center; flex: none; opacity: .95; }
.df-wxp .df-wx-mode { color: #8fb6de; white-space: nowrap; }
.df-wxp .df-wx-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.df-wxp .df-wx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9fd8ff, #ffd873); transition: width .2s; }
.df-wxp .df-wx-lv { font: 700 11px Consolas, monospace; color: #9fd8ff; white-space: nowrap; }

/* 技能按钮 → Q/E 键帽风 */
.df-skill { display: flex; align-items: center; gap: 7px; }
.df-skill b {
    width: 22px; height: 22px; border-radius: 5px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,207,90,.14); border: 1px solid rgba(255,207,90,.5);
    font: 800 12px/1 Consolas, monospace;
}
.df-skill i { margin-left: 0; }

/* BOSS 警报横幅 */
.df-banner.danger { color: #ff9a7a; text-shadow: 0 3px 14px rgba(0,0,0,.9), 0 0 26px rgba(255,110,60,.7); }

/* 作战简报 */
.df-brief { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: rgba(4,8,14,.9); padding: 18px; }
.df-brief-box { width: min(430px, 96%); background: rgba(10,16,26,.97); border: 1px solid rgba(255,207,90,.4); border-radius: 10px; padding: 16px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.df-brief-hd { font: 700 11px Consolas, monospace; letter-spacing: .3em; color: #ffcf7a; display: flex; justify-content: space-between; }
.df-brief-hd span { color: #5f7d9c; }
.df-brief-title { font-size: 21px; font-weight: 900; color: #eaf6ff; letter-spacing: .2em; margin: 8px 0 10px; }
.df-brief-lines { min-height: 84px; font-size: 12.5px; line-height: 1.9; color: #b9cfe4; }
.df-brief-lines .cur::after { content: '▍'; color: #ffd873; animation: dfblink 0.8s steps(1) infinite; }
@keyframes dfblink { 50% { opacity: 0; } }

/* ================= v2 皮肤: 顶栏一体化 / 底部作战面板 / 卡片档次 ================= */
.df-force {
    left: 0; right: 0; padding: 6px 10px 4px;
    background: linear-gradient(180deg, rgba(5,9,15,.88), rgba(5,9,15,.35) 80%, transparent);
    border-bottom: 1px solid rgba(140,180,230,.14);
    flex-direction: row; align-items: center; justify-content: space-between;
}
.df-force-l { flex-direction: row; align-items: baseline; gap: 10px; }
.df-force-name { margin-top: 0; font-size: 12.5px; color: #eaf6ff; font-weight: 700; }
.df-force-r { flex-direction: row; align-items: baseline; gap: 10px; }
.df-clock { font-size: 19px; }
.df-linewrap { padding: 30px 10px 4px; background: none; }
.df-linetop { font-size: 11px; color: #8fb6de; letter-spacing: .2em; }
.df-linetop b { font-size: 15px; color: #ffd873; }
.df-linebar { height: 8px; border-color: rgba(255,190,120,.25); }
.df-top { top: 66px; gap: 5px; }
.df-chip { background: none; border: none; padding: 0 6px 0 0; font-size: 11.5px; color: #9fb0c4; letter-spacing: .04em; }
.df-chip b { color: #eaf6ff; font-size: 14px; }
.df-prep { color: #ffd873; }
.df-log { top: 88px; font-size: 11px; max-width: 72%; }

/* 底部: 一整块作战面板 (★ 不用 backdrop-filter: 每帧模糊背景是手机端卡顿大户) */
.df-bottom {
    left: 8px; right: 8px; bottom: 8px; gap: 6px;
    background: linear-gradient(0deg, rgba(5, 9, 15, .95), rgba(5, 9, 15, .72));
    border: 1px solid rgba(140, 180, 230, .16);
    border-radius: 12px; padding: 8px 9px;
}
.df-herotag { display: none; }
.df-herobar { height: 9px; }
.df-skills { gap: 6px; }
.df-skill { padding: 7px 9px; font-size: 12px; }
.df-wxp { border: none; background: none; padding: 0 2px; }

/* 补给卡更利落 */
.df-bcard { width: 148px; padding: 6px 8px; border-radius: 8px; }
.df-bcard .df-btitle { font-size: 12.5px; }
.df-bcard img, .df-bcard .df-bglyph { width: 38px; height: 38px; }

/* 装备卡: 星级档次色 + DPS 增减 */
.df-eqcard.t3 { border-color: rgba(255,207,90,.75); box-shadow: inset 0 2px 0 rgba(255,207,90,.55); }
.df-eqcard.t2 { border-color: rgba(196,140,255,.6); box-shadow: inset 0 2px 0 rgba(196,140,255,.4); }
.df-eqcard.t1 { border-color: rgba(120,190,255,.5); box-shadow: inset 0 2px 0 rgba(120,190,255,.3); }
.df-eqdelta { font-style: normal; font-size: 11px; margin-left: 6px; font-weight: 800; }
.df-eqdelta.up { color: #8affa0; }
.df-eqdelta.dn { color: #ff8f7a; }
.df-eqdelta.eq { color: #9fb0c4; }
.df-eqname { font-size: 13.5px; }

/* 选人: 部署面板质感 */
.df-select { background: linear-gradient(180deg, rgba(6,10,17,.97), rgba(6,10,17,.99)); }
.df-select::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background:
        repeating-linear-gradient(0deg, rgba(120,160,210,.05) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse at 50% 0%, rgba(60,110,170,.18), transparent 60%);
}
.df-selcol { position: relative; z-index: 1; }
.df-card { background: rgba(14,22,34,.8); }
.df-card.on { background: rgba(50,40,16,.9); }
.df-preview { height: 168px; border-color: rgba(140,180,230,.22); }
.df-selbar { background: linear-gradient(180deg, rgba(6,10,17,.4), rgba(6,10,17,.97) 45%); }

/* 结算: 大分数 */
.df-rst-title { font-size: 22px; }
.df-score { font-size: 17px; }
@media (max-width: 620px) {
    .df-force-name { font-size: 11px; }
    .df-force-org { letter-spacing: .2em; font-size: 8.5px; }
    .df-clock { font-size: 16px; }
}

/* ================= v3: HUD 定稿 (旧层全部隐藏, 只留一套) ================= */
.df-force, .df-linewrap, .df-top, .df-supply, .df-gun, .df-herotag { display: none !important; }
.df-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 24;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px 5px;
    background: linear-gradient(180deg, rgba(5,9,15,.92), rgba(5,9,15,.45) 78%, transparent);
    border-bottom: 1px solid rgba(140,180,230,.12);
}
.df-tb-l { display: flex; align-items: baseline; gap: 9px; }
.df-tb-sector { font: 700 11px Consolas, monospace; letter-spacing: .18em; color: #9fd8ff; white-space: nowrap; }
.df-tb-clock { font: 800 20px Consolas, monospace; color: #ffd873; letter-spacing: .05em; }
.df-tb-mid { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 46%; }
.df-tb-lbl { font-size: 10.5px; color: #8fb6de; letter-spacing: .12em; white-space: nowrap; }
.df-tb-linev { font-size: 14px; color: #ffd873; white-space: nowrap; }
.df-tb-r { display: flex; align-items: baseline; gap: 10px; }
.df-tb-item { font-size: 11.5px; color: #9fb0c4; white-space: nowrap; }
.df-tb-item b { font-size: 15px; color: #eaf6ff; }
.df-tb-score { font: 800 17px Consolas, monospace; color: #ffd873; }
.df-prep { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); color: #ffd873; font-size: 12.5px; letter-spacing: .08em; }
.df-hud .df-log { top: 64px; font-size: 11px; max-width: 70%; }
.df-banner { top: 30%; }
.df-rosterrow { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.df-roster-h { font-size: 11px; color: #8fb6de; white-space: nowrap; }
.df-roster-h b { color: #eaf6ff; font-size: 12.5px; }
.df-midrow { display: flex; align-items: center; gap: 8px; }
.df-midrow .df-herobar { flex: 0 0 84px; height: 9px; }
.df-midrow .df-herotxt { min-width: 56px; text-align: right; }
.df-midrow .df-wxp { flex: 1; min-width: 0; border-left: 1px solid rgba(140,180,230,.18); padding-left: 8px; }
@media (max-width: 620px) {
    .df-tb-lbl { display: none; }
    /* ★ 顶栏里的 "SECTOR 01" 在窄屏上隐掉: ① 它与下一行的「SECTOR 01 · 外围栈桥」完全重复;
       ② 实测 (360px 内部宽 + 深局大数字) 顶栏会溢出 ~10px 把"分数"挤到屏外 —— 隐掉它正好补足。 */
    .df-tb-sector { display: none; }
    .df-tb-clock { font-size: 16px; }
    .df-tb-item b { font-size: 13px; }
    .df-tb-score { font-size: 14px; }
}

/* ================= v4: 消除重叠 (⛶/fps 让位顶栏, 触屏键让位底部面板) ================= */
.df-fs { top: 50px; right: 10px; width: 26px; height: 26px; font-size: 13px; opacity: .75; z-index: 26; }
.df-fps { top: 51px; right: 42px; font-size: 9.5px; opacity: .65; }
.df-touch { bottom: 188px; }
.df-touch-r { bottom: 188px; }
.df-hud .df-prep { top: 44px; }

/* ================= v5: 面板三条条分开 + 半幅闸门 ================= */
.df-midrow { padding-top: 3px; }
.df-midrow .df-herotxt::before { content: 'HP '; font-size: 9px; color: #7d97ad; letter-spacing: .1em; }
.df-midrow .df-herobar i { background: linear-gradient(90deg, #49c46e, #8ee07f); }
.df-rc-bar i { background: #5fb8e8 !important; }             /* 名册条改蓝: 不再像第二条血条 */
.df-wxp .df-wx-bar i { background: linear-gradient(90deg, #4fb7e8, #ffd873); }
.df-wxp .df-wx-mode { color: #6fc3e8; }

/* 半幅闸门 (canvas 绘制, 这里只放提示) */
.df-gatehint {
    position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
    font-size: 12px; color: #cfe0f2; letter-spacing: .18em; pointer-events: none;
    text-shadow: 0 2px 8px #000; z-index: 22;
}

/* ★ 装备面板可点击: .df-hud 是 pointer-events:none, 子元素必须显式恢复
   (旧版只给 .df-skills 开了 auto, 装备卡继承 none ⇒ 真实点击全被吞 = "装备选择完全失效") */
.df-equip { pointer-events: auto; }
.df-eqskip { pointer-events: auto; }

/* ★ 窄屏不再叠字: 武器卡独占一行, 名字省略, 模式文案隐藏 */
@media (max-width: 680px) {
    .df-midrow { flex-wrap: wrap; row-gap: 5px; }
    .df-midrow .df-wxp { flex: 1 1 100%; border-left: none; padding-left: 0; border-top: 1px solid rgba(140,180,230,.14); padding-top: 5px; }
    .df-wx-name { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
    .df-wx-mode { display: none; }
    .df-herotxt { min-width: 48px; font-size: 10.5px; }
}

/* ================= v6: 区段 · 关卡BOSS · 补给条幅 · 技能强化 ================= */

/* 区段名牌 (顶栏下一行, 换区段时换名字) */
.df-sectorline {
    position: absolute; top: 30px; left: 11px; z-index: 24;
    font: 700 10px/1.3 Consolas, monospace; letter-spacing: .2em; color: #8fb6de; opacity: .92;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85); pointer-events: none; white-space: nowrap;
}
.df-hud .df-prep { top: 29px; left: auto; right: 11px; transform: none; font-size: 11.5px; }

/* 关卡 BOSS 血条 (BOSS 在世时出现在顶栏下) */
.df-bossbar {
    position: absolute; top: 48px; left: 10px; right: 10px; z-index: 24;
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, rgba(46, 12, 8, .9), rgba(22, 7, 6, .76));
    border: 1px solid rgba(255, 120, 80, .55); border-radius: 8px; padding: 4px 9px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.df-bb-name { font: 800 11.5px/1.2 Consolas, monospace; letter-spacing: .14em; color: #ffb08a; white-space: nowrap; }
.df-bb-track { flex: 1; height: 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); overflow: hidden; border: 1px solid rgba(255, 140, 100, .35); }
.df-bb-track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff6a3c, #ffd36a); transition: width .12s linear; }
.df-bb-hp { font: 800 12px Consolas, monospace; color: #ffd873; min-width: 38px; text-align: right; }
/* BOSS 血条出现时把战报往下让位 */
.df-hud.boss-on .df-log { top: 84px; }

/* 补给闸门: ★ 已改成**画在桥面上** (见 defense.js drawGate: 两块半幅 + 贴地大字/箭头),
   这里只留顶部那条提示文字。旧的"大半屏横幅卡"已删除 —— 用户定调: 贴地、走过即选, 别挡视线。 */
.df-bgcount {
    position: absolute; left: 50%; transform: translateX(-50%); top: 34%; z-index: 25;
    font: 800 13px Consolas, monospace; color: #ffe0a0; letter-spacing: .14em;
    text-shadow: 0 2px 12px #000, 0 0 18px rgba(255, 200, 100, .5); pointer-events: none; white-space: nowrap;
}

/* 技能强化面板: 复用装备面板的排版, **居中弹窗** (用户: "技能那个是在屏幕中间出现 然后自选的") */
.df-skpick {
    top: 50%; bottom: auto; left: 50%; right: auto;
    transform: translate(-50%, -50%);
    width: min(560px, 94%);
    border: 1px solid rgba(196, 150, 255, .55);
    border-top: 1px solid rgba(196, 150, 255, .55);
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .62);
    pointer-events: auto;                    /* ★ 与装备面板同款: 必须显式开, 否则继承 .df-hud 的 none = 点不动 */
}
.df-skpick .df-eqh { color: #d9b8ff; }
.df-skpick .df-eqh span { color: #9fb0c4; }
.df-skpick .df-eqcard { border-color: rgba(180, 140, 255, .4); }
.df-skpick .df-eqcard:hover { border-color: #d9b8ff; }
.df-skpick .df-eqstar { color: #d9b8ff; }
.df-skpick .df-eqcard .df-eqname { color: #efe4ff; }

/* 装备/技能卡: 窄屏自动列数 (320px 也不会挤成一条) */
.df-eqrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; }
.df-eqcard { padding: 6px 7px; }
.df-eqcard .df-eqname { font-size: 12.5px; }

/* ★ 触屏方向键已删除 (用户: "触摸操作就别加左右额按钮了 影响" —— 浮在画面中央压住角色) */

/* ================= v7: 手机竖屏底部面板瘦身 (用户: "受击竖屏时 UI界面拥挤不堪 角色都被遮住了") =================
   实测: 390 宽竖屏时面板吃掉 201px / 舞台 626px (≈1/3), 小队正好被盖住。
   做法 = 三行都压缩: 名册小卡更矮 · 血条与武器卡并成一行 · 技能按钮**单行**(冷却塞进同一行) ·
   强化摘要压到 12px。目标 ≤130px, 让出画面给战斗。 */
@media (max-width: 700px) {
    .df-bottom { padding: 5px 7px calc(5px + env(safe-area-inset-bottom, 0px)); gap: 3px; border-radius: 10px 10px 0 0; }
    .df-rosterrow { gap: 5px; }
    .df-roster-h { font-size: 9.5px; }
    .df-roster .df-rchip { width: 26px; height: 26px; border-radius: 6px; }
    .df-roster { gap: 3px; }
    .df-midrow { flex-wrap: nowrap; gap: 6px; padding-top: 1px; align-items: center; }
    .df-midrow .df-wxp { flex: 1 1 auto; border-top: none; padding-top: 0; padding-left: 6px;
        border-left: 1px solid rgba(140, 180, 230, .14); min-width: 0; gap: 5px; }
    .df-wxp .df-wx-name { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; }
    .df-wx-mode { display: none; }
    .df-wx-bar { height: 4px; }
    .df-wxp .df-wx-bar { height: 4px; }
    .df-wxp .df-wx-lv { font-size: 9.5px; }
    .df-herobar { height: 8px; }
    .df-herotxt { min-width: 44px; font-size: 9.5px; }
    /* ★ 技能按钮单行: 冷却并进同一行 (旧版 <i> 独占一行 ⇒ 每个按钮 85px 高, 四个按钮就是 90px) */
    .df-skills { gap: 5px; }
    .df-skill { padding: 5px 7px; font-size: 11.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; }
    .df-skill i { display: inline; margin-left: 5px; font-size: 10px; }
    .df-skmods { font-size: 9.5px; margin-top: 0; line-height: 1.2; }
    .df-log { font-size: 10px; line-height: 1.25; top: 46px; max-height: 34px; }
}
/* 极矮屏 (横屏手机 / 小窗): 再砍掉名册与武器卡, 只留血条 + 技能 */
@media (max-height: 560px) {
    .df-rosterrow { display: none; }
    .df-midrow .df-wxp { display: none; }
}

/* 赛事条 (选人界面顶部): 每日常规赛 / 锦标赛 */
.df-evbar {
    display: flex; flex-direction: column; gap: 3px;
    background: linear-gradient(180deg, rgba(14, 22, 34, .92), rgba(10, 16, 26, .88));
    border: 1px solid rgba(140, 180, 230, .28); border-radius: 10px; padding: 8px 10px;
    color: #cfe0f2; font-size: 12px;
}
.df-evbar.on { border-color: rgba(255, 140, 100, .55); box-shadow: inset 0 0 22px rgba(255, 120, 80, .12); }
.df-ev-h { font-size: 13px; font-weight: 800; color: #eaf6ff; display: flex; align-items: center; gap: 6px; }
.df-ev-h i { font-style: normal; font-size: 10.5px; font-weight: 400; color: #8fb6de; }
.df-ev-dot { width: 8px; height: 8px; border-radius: 50%; background: #6f8ba8; flex: none; }
.df-ev-dot.live { background: #ff6a4a; box-shadow: 0 0 8px rgba(255, 106, 74, .9); animation: dfpulse 1.4s infinite; }
@keyframes dfpulse { 50% { opacity: .35; } }
.df-ev-sub { color: #9fb0c4; font-size: 11.5px; }
.df-ev-sub b { color: #ffd873; font-family: Consolas, monospace; }
.df-ev-top { color: #b9cfe4; font-size: 11.5px; }
.df-ev-me { color: #8affa0; font-size: 11.5px; }
.df-ev-join { font-size: 11.5px; }
.df-ev-join.ok { color: #8affa0; font-weight: 700; }
.df-ev-join.dim { color: #8fb6de; }
.df-ev-join-btn {
    align-self: flex-start; cursor: pointer;
    background: linear-gradient(180deg, #ffd873, #f0a83c); color: #2a1c04;
    border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 800;
    box-shadow: 0 4px 12px rgba(240, 168, 60, .3);
}
/* 进行中赛事的报名行 (2026-10-07 用户: "锦标赛增加支持中途报名" —— 按钮 + 一句说明并排) */
.df-ev-joinrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.df-ev-joinrow .df-ev-join-btn { padding: 6px 12px; }
.df-ev-join-hint { color: #9fb0c4; font-size: 11px; }
.df-ev-link { color: #9fd8ff; font-size: 11.5px; text-decoration: none; }
.df-ev-link:hover { text-decoration: underline; }

/* 技能特效: 全屏闪光层 (技能/大招的打击感; 平时不占 GPU) */
.df-flash { position: absolute; inset: 0; z-index: 19; pointer-events: none; background: #fff; opacity: 0; }

/* 职业立绘预览 (已取代 3D 试穿: 少开一个 WebGL 上下文, 手机上尤其省内存) */
.df-pv-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.df-pv-card img { max-height: 74%; max-width: 88%; image-rendering: auto; }
.df-pv-name { font-size: 12.5px; font-weight: 700; color: #eaf6ff; }
.df-pv-note { font-size: 10px; color: #7d97ad; padding: 0 12px; text-align: center; }

/* 诊断面板 (?diag=1) —— 手机上报故障时截图用 */
.df-diagbox {
    position: absolute; left: 6px; top: 6px; z-index: 60; pointer-events: none;
    font: 10px/1.55 Consolas, monospace; color: #9fe6ff; white-space: nowrap;
    background: rgba(0, 0, 0, .74); border: 1px solid rgba(120, 180, 230, .35);
    border-radius: 6px; padding: 5px 8px;
}
.df-diagbox b { color: #ffd873; }

/* 音效开关: 挨着 ⛶ 往左排 (同款小圆钮) */
.df-sfsw { right: 74px; }
@media (max-width: 700px) { .df-sfsw { right: 42px; } }

/* ================= v8: 装备三选一 = 屏幕中央 + 武器展示图 + 圆盘展台 =================
   用户口径 (2026-10-07): "选择武器应该放在屏幕中间 最好配个武器的模型 然后底部是个圆盘"。
   做法: 面板居中 (与技能三选一同款), 每张卡上半是**武器展示图**(站上预览 PNG), 下面一个 CSS 画的
   椭圆"圆盘"当展台。★ 刻意**不用 3D 渲染器**: 第二个 WebGL 上下文是 iOS 上"玩一局就进不去"的元凶。 */
.df-gpick {
    top: 50%; bottom: auto; left: 50%; right: auto;
    transform: translate(-50%, -50%);
    width: min(560px, 94%);
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .62);
    pointer-events: auto;
}
.df-eqart { position: relative; display: flex; align-items: center; justify-content: center; height: 78px; margin-bottom: 2px; }
.df-eqart img { max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 2;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.df-eqart .df-eqglyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .9; }
/* 圆盘底座: 椭圆 + 高光边 + 顶部光晕, 让武器"站在"上面 */
.df-eqdisc { display: block; height: 12px; margin: -3px 12% 6px; border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 45%, rgba(120, 200, 255, .30), rgba(10, 18, 30, 0) 70%),
                radial-gradient(50% 50% at 50% 50%, rgba(180, 220, 255, .22), rgba(20, 30, 46, .9) 72%);
    box-shadow: inset 0 1px 0 rgba(200, 230, 255, .35), 0 3px 10px rgba(0, 0, 0, .5); }
.df-eqcard.t3 .df-eqdisc { background: radial-gradient(50% 50% at 50% 45%, rgba(255, 216, 115, .34), rgba(10, 18, 30, 0) 70%),
                radial-gradient(50% 50% at 50% 50%, rgba(255, 226, 150, .24), rgba(34, 28, 14, .9) 72%); }
.df-eqcard.t2 .df-eqdisc { background: radial-gradient(50% 50% at 50% 45%, rgba(200, 150, 255, .32), rgba(10, 18, 30, 0) 70%),
                radial-gradient(50% 50% at 50% 50%, rgba(214, 180, 255, .22), rgba(28, 20, 40, .9) 72%); }
/* 手机上高度收一点, 免得三张卡把画面全占满 */
@media (max-width: 700px) { .df-eqart { height: 60px; } .df-eqdisc { margin: -2px 14% 5px; height: 10px; } }
/* 背景音乐开关: 排在音效开关左边 */
.df-musw { right: 106px; }
@media (max-width: 700px) { .df-musw { right: 74px; } }
/* ★★ 暂停键 (2026-10-08 用户: "增加一个暂停键 还要适配手机"): 排最左; 手机放大到 34px 好点 */
.df-pausew { right: 138px; }
@media (max-width: 700px) { .df-pausew { right: 106px; width: 34px; height: 34px; font-size: 15px; opacity: .9; } }
/* 暂停遮罩: 盖住舞台, 点任意处继续 (手机没键盘也能恢复)
   ★ z=50: 必须盖过作战简报 (45)/结算 (35)/装备三选一 (33) —— 简报期间 mode 已是 battle,
     按 P 或切后台触发的暂停若被简报盖住, 玩家看不到"已暂停", 点部署后开局就卡在隐身暂停态 */
.df-pausebox {
    position: absolute; inset: 0; z-index: 50; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: rgba(4, 8, 16, .62); backdrop-filter: blur(2px);
    color: #dbe7f5; text-align: center; touch-action: manipulation;
}
.df-pause-ico { font-size: 44px; line-height: 1; opacity: .92; }
.df-pause-t { font-size: 20px; font-weight: 800; letter-spacing: .18em; }
.df-pause-s { font-size: 12px; color: #9fb4c9; }
.df-pause-s b { color: #ffd873; }
/* ★ 原版武器预览图是**黑底**的 (PNG 里底色就是黑) —— 用 screen 混合把黑"融"进深色卡片,
   黑底即等于透明, 武器本体是亮的所以不受影响。比逐张抠图干净得多, 也零开销。 */
.df-eqart img { mix-blend-mode: screen; }

/* 结算战报图 (canvas 现画的分享图) */
.df-rst-cardimg { margin-top: 10px; text-align: center; }
.df-cardimg { width: min(320px, 78%); border-radius: 10px; border: 1px solid rgba(140,180,230,.35); box-shadow: 0 10px 30px rgba(0,0,0,.55); display: block; margin: 0 auto 8px; }
.df-carddl { display: inline-block; text-decoration: none; }

/* ================= v4: 选人界面重排 (2026-10-07) =================
   用户: "选人界面的角色图也是黑色背景的 然后选人界面UI布局很乱 很丑"
   实测 (390 竖屏): 选人区高 1349px 要滚很久 —— 预览卡 190px 与信息块 150px 是两块独立盒子,
   名字显示两遍、立绘只有 83×139 还带黑底; 预设职业 3 组标题×4 卡 = 495px。
   重排: ① 立绘 + 信息合成一张"英雄卡" ② 我的角色 = 一行(超出横滑)
        ③ 预设职业 = 三段页签 + 一行 4 卡 ④ 开战按钮通栏 ⑤ 立绘 screen 融黑底(与武器图同口径) */
.df-hero {
    display: flex; gap: 10px; align-items: stretch;
    background: linear-gradient(180deg, rgba(22, 32, 50, .92), rgba(10, 14, 22, .96));
    border: 1px solid rgba(140, 180, 230, .22); border-radius: 10px; padding: 9px;
}
/* ★★ 桌面端真 bug (2026-10-07 自查): `#df-select` 是 JS 设的 display:flex(行向), `.df-selcol`
   作为它唯一的子项会被**拉伸成固定高度**(= 舞台高), 于是列里的每一项都成了"可压缩的 flex 项" ——
   我的角色那一行被从 65px 压成 **2px** (卡片只剩 14px 高的细条, 看上去像"没有卡片"); 手机端
   因为容器是 static 高度自适应, 看不出来。给列的直接子项一律 flex-shrink:0 (列表高度由内容定)。 */
.df-selcol > * { flex: 0 0 auto; }
.df-hero .df-preview {
    position: relative; flex: none; width: 98px; height: 134px; border-radius: 8px; overflow: hidden;
    background: radial-gradient(ellipse at 50% 28%, rgba(70, 120, 180, .22), rgba(8, 12, 20, .92));
    border: 1px solid var(--df-line);
}
.df-hero .df-preview .df-pv-card { position: absolute; inset: 0; display: block; }
.df-hero .df-preview img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.df-hero .df-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.df-hero .df-info-h { font-size: 15px; font-weight: 800; line-height: 1.2; }
.df-hero .df-info-sub { color: #8fb6de; font-size: 11px; }
.df-hero .df-info-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.df-hero .df-skill-chip { padding: 2px 6px; font-size: 10.5px; border-radius: 5px; display: inline-block; }
.df-hero .df-skill-chip i { display: none; }        /* 说明太长: 收进 title, 卡片里只留"N 名字" */
.df-hero .df-pv-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--df-dim); font-size: 11px; }
/* ★ 职业立绘 = 180×300 黑底 RGB PNG (无 alpha 通道) ⇒ screen 融黑底 (与武器预览图同一个口径) */
.df-hero .df-preview img, .df-rchip img { mix-blend-mode: screen; }
.df-rchip img { object-position: 50% 10%; }         /* 名册小图偏头部, 别只露胸口 */
/* 我的角色 / 预设: 一行 4 张 (多了横向滑动, 不再换行把页面撑高) */
.df-cards.df-row { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.df-cards.df-row .df-card { flex: 0 0 clamp(70px, calc((100% - 18px) / 4), 118px); min-width: 0; padding: 6px 7px; }
.df-cards.df-row .df-card-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.df-cards.df-row .df-card-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 预设职业页签 (旧版三组标题×4 卡 = 495px ⇒ 现在 页签 34px + 一行 68px) */
.df-tabs { display: flex; gap: 6px; margin: 2px 0 6px; }
.df-tab {
    flex: 1; cursor: pointer; border-radius: 8px; padding: 6px 4px 5px; text-align: center;
    background: rgba(16, 24, 38, .85); border: 1px solid var(--df-line); color: var(--df-dim);
    font-size: 12px; font-weight: 700; line-height: 1.2;
}
.df-tab small { display: block; font-size: 9.5px; font-weight: 400; opacity: .85; }
.df-tab.on { color: #0d1622; background: linear-gradient(180deg, #a9dcff, #6aacdf); border-color: #a9dcff; }
/* 开战按钮通栏 (拇指最容易够到) */
.df-selbar .df-start { width: 100%; }
/* 吸底条: 顶边加不透明度 —— 旧版 40% 会让身后的卡片透上来, 看着"乱" */
.df-selbar { background: linear-gradient(180deg, rgba(6, 10, 17, .88), rgba(6, 10, 17, .98) 45%); }
/* 赛事条压紧 (旧版 131px) */
.df-evbar { padding: 6px 9px; gap: 2px; }
.df-ev-h { font-size: 12.5px; }
.df-ev-sub, .df-ev-top, .df-ev-me, .df-ev-join, .df-ev-join-hint { font-size: 11px; }

/* ================= v5: 指挥技图标 (2026-10-07 用户: "给所有技能画上合适的图标") =================
   内联 SVG (js/defense.js SKILL_ICON, 21 个技能逐一按效果形态画), 按元素分色;
   冷却时随按钮一起 grayscale (继承 .df-skill.cd 的 filter 即可, 不用单独处理)。 */
.df-skill .df-sk-icw { flex: none; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; }
.df-sk-ic { width: 16px; height: 16px; display: block; }
.df-hero .df-skill-chip .df-sk-ic { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; margin-right: 1px; }
/* 手机窄屏: 按钮更紧, 图标缩一档 */
@media (max-width: 700px) {
    .df-skill .df-sk-icw { width: 15px; height: 15px; }
    .df-sk-ic { width: 14px; height: 14px; }
}

/* 即将开赛的锦标赛 · 报名行 (2026-10-07 用户: "锦标赛没找到参赛入口" —— 常规赛全天候后
   主赛事永远是它, 未开赛的锦标赛在这里补一行报名入口; 开赛后自动成为主赛事, 此行消失) */
.df-ev-tour {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    border-top: 1px dashed rgba(140, 180, 230, .3); margin-top: 4px; padding-top: 5px;
    font-size: 11.5px; color: #cfe0f2;
}
.df-ev-tour b { color: #eaf6ff; }
.df-ev-tour .df-ev-tour-join { padding: 3px 10px; font-size: 11.5px; }

/* ================= v6 (2026-10-07 用户三改): 名册血条竖向 / 手机技能名收紧 ================= */
/* ★ 援军血条改**竖向贴图片右侧** (用户: "应该显示在图片右侧竖向 这样节约空间"):
   旧版横条在图片下方, 每张 chip 被撑高 —— 竖条只占 3px 宽, chip 变纯头像方块。 */
.df-rchip .df-rc-bar {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 3px; height: auto; margin: 0;
    border-radius: 0 4px 4px 0; background: rgba(255, 255, 255, .16); overflow: hidden;
}
.df-rchip .df-rc-bar i {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(180deg, #6fe08a, #3fae62);
    position: absolute; left: 0; bottom: 0;        /* 从底往上扣血 (JS 写 height%) */
}
.df-rchip .df-rc-tag { right: 5px; }               /* "我"字给竖条让位 */
/* ★ 手机端技能名收紧: 4 个按钮放不下"图标+键位+全名" ⇒ 窄屏只显 图标+键位+冷却
   (名字看 title / 长按; 图标本就能认技能)。旧版名字被按钮硬裁成半个字 = "显示不全"。 */
.df-sk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
    .df-skill .df-sk-name { display: none; }
    .df-skill { padding: 6px 7px; gap: 5px; }
    .df-skill b { margin: 0; }
}

/* ★ 名册可遣散 (2026-10-08 用户: "部队满了 不能抛弃替换"): 头像可点, 待确认态描边提示。
   .df-hud 是 pointer-events:none ⇒ 名册容器必须显式恢复 (否则点击穿到桥面变成走位)。 */
.df-roster { pointer-events: auto; }
.df-rchip { cursor: pointer; }
.df-rchip:active { filter: brightness(1.25); }