/* 天降战场 — 界面样式
   布局与交互状态在前，文末「海港启航」使用生成式插画、九宫格边框和按钮图集。
   大厅、面板与战斗 HUD 共用海港视觉，保留状态色和手机触控布局。 */
:root {
  --bg: #0b111b;
  --ink: #1f2b3a;
  --hair: rgba(255, 255, 255, 0.09);
  --hair2: rgba(255, 255, 255, 0.18);
  --txt: #f3efe6;
  --mut: #97a1b1;
  --dim: #5f6a7a;
  --acc: #ffb547;
  --acc2: #ff7a3d;
  --good: #7ee0a1;
  --bad: #ff6b6b;
  --zone: #b9a2ff;
  --tile: rgba(10, 15, 25, 0.58);
  --tile-on: rgba(24, 34, 52, 0.86);
  --r0: #d7dde3; --r1: #62d85a; --r2: #45a9ff; --r3: #bb6dff; --r4: #ffbc1f;
  --font: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --num: "DIN Condensed", "Avenir Next Condensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
  --ts: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 16px rgba(0, 0, 0, 0.3);
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* 光标：奶白箭头 + 琥珀描边；可点的东西换成琥珀箭头；对局瞄准时整套准星（中心点 + 四根刻度）都由系统光标画，零延迟，不会和刻度错位 */
  --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3 L4 22.5 L9.2 17.6 L12.8 25.6 L16.4 24 L12.9 16.2 L19.8 16.2 Z' transform='translate%281.3 1.8%29' fill='%23000' opacity='.35'/%3E%3Cpath d='M4 3 L4 22.5 L9.2 17.6 L12.8 25.6 L16.4 24 L12.9 16.2 L19.8 16.2 Z' fill='%23f3efe6' stroke='%230b111b' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M5.6 6.6 L5.6 18.6' stroke='%23ffb547' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 4 3, default;
  --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3 L4 22.5 L9.2 17.6 L12.8 25.6 L16.4 24 L12.9 16.2 L19.8 16.2 Z' transform='translate%281.3 1.8%29' fill='%23000' opacity='.35'/%3E%3Cpath d='M4 3 L4 22.5 L9.2 17.6 L12.8 25.6 L16.4 24 L12.9 16.2 L19.8 16.2 Z' fill='%23ffb547' stroke='%230b111b' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M5.6 6.6 L5.6 18.6' stroke='%23fff3d6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 4 3, pointer;
  --cur-aim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%230b111b' stroke-width='4.6' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M16 3.5V10M16 22V28.5M3.5 16H10M22 16H28.5'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M16 3.5V10M16 22V28.5M3.5 16H10M22 16H28.5'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='3.6' fill='%230b111b' opacity='.75'/%3E%3Ccircle cx='16' cy='16' r='2.1' fill='%23fff'/%3E%3C/svg%3E") 16 16, crosshair;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--txt); font-family: var(--font); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; cursor: var(--cur-arrow); }
#app { position: fixed; inset: 0; }
#game { position: absolute; width: 100%; height: 100%; display: block; cursor: var(--cur-arrow); }
#game.aim { cursor: var(--cur-aim); }
input:not([type]), input[type=text] { cursor: text; }
input[type=range] { cursor: var(--cur-hand); }
.hidden { display: none !important; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }
.kicker { font: 600 10.5px/1 var(--font); letter-spacing: .3em; color: var(--mut); text-transform: uppercase; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--txt); font: 600 11.5px var(--font); line-height: 1; }

/* 按钮 */
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 500 14px var(--font); letter-spacing: .12em; color: var(--txt); border: 1px solid var(--hair2); padding: 11px 20px; cursor: var(--cur-hand); transition: background .2s, border-color .2s, transform .12s, box-shadow .2s; }
.btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.btn:active { transform: translateY(1px); }
.btn .ic { font-size: 16px; }
.btn.ghost { flex-direction: row; gap: 8px; }
.btn.big { font-size: 19px; padding: 15px 40px; position: relative; overflow: hidden; }
.btn.big small { font-size: 10.5px; opacity: .68; }
.btn.big::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); transform: skewX(-20deg); transition: left .6s var(--ease); }
.btn.big:hover { background: linear-gradient(180deg, #ffd27e, #ffab45); box-shadow: 0 18px 40px rgba(255, 150, 40, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn.big:hover::after { left: 120%; }
.btn.small { font-size: 12px; padding: 7px 14px; }
.btn.danger:hover { background: rgba(255, 107, 107, 0.12); }
.iconBtn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: var(--cur-hand); transition: background .2s; }
.iconBtn:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- 大厅 ---------- */
#menu { position: absolute; inset: 0; overflow: hidden; }
#menuBg { position: absolute; inset: 0; width: 100%; height: 100%; }
.menuShade { position: absolute; inset: 0; pointer-events: none; }
.menuTop { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 56px 0; }
.brandCn { font: 600 60px/1.05 var(--font); }
.brandSub { display: flex; align-items: center; gap: 12px; }
.brandSub::before { content: ""; }
.topActions { display: flex; align-items: center; }
.season { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .14em; }
.season i { width: 6px; height: 6px; }
.menuMain { position: absolute; left: 56px; right: 56px; bottom: 44px; z-index: 2; display: flex; justify-content: space-between; gap: 40px; }
.stage { flex: 1; position: relative; min-width: 0; }
.pedestal { position: absolute; border-radius: 50%; }
#avatarCv { position: absolute; left: 0; bottom: 110px; width: 540px; height: 420px; }
.stageInfo { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; }
#nameInput { background: transparent; border: none; font: 600 30px var(--font); letter-spacing: .08em; padding: 2px 0 6px; user-select: text; -webkit-user-select: text; transition: border-color .2s; }
#nameInput:focus { border-bottom-color: var(--acc); }
.side { display: flex; flex-direction: column; min-height: 0; }
.rankBlock { display: flex; align-items: center; }
#rankCv { width: 100px; height: 100px; flex: 0 0 100px; }
.rankInfo { flex: 1; min-width: 0; }
#rankName { font: 600 26px var(--font); }
.rankProg { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.rankProg i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc2), var(--acc)); border-radius: 2px; transition: width 1.2s var(--ease); }
#rankPts { font-size: 12px; margin-top: 9px; letter-spacing: .06em; }
.statsGrid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; }
.statsGrid div { text-align: center; position: relative; }
.statsGrid div:not(:nth-child(3n))::after { content: ""; position: absolute; right: 0; top: 24%; bottom: 24%; }
.statsGrid b { display: block; font: 700 25px/1 var(--num); letter-spacing: .03em; }
.statsGrid span { display: block; font-size: 10.5px; letter-spacing: .22em; margin-top: 6px; }
#btnPlay { width: 100%; }
.history { min-height: 0; max-height: 280px; display: flex; flex-direction: column; }
#menu.wd .side { visibility: hidden; }
#histList { flex: 1; overflow-y: auto; margin-top: 8px; }
.hItem { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 12px; }
.hItem:last-child { border-bottom: none; }
.hItem .pl { font: 700 22px/1 var(--num); width: 42px; }
.hItem .pl.win { color: var(--acc); }
.hItem .info { flex: 1; color: var(--mut); line-height: 1.55; }
.hItem .dl { font: 700 17px/1 var(--num); }
.up { color: var(--good); } .down { color: var(--bad); }
.empty { color: var(--dim); font-size: 12px; letter-spacing: .1em; text-align: center; padding: 26px 0; }
/* 衣柜抽屉 */
#wardrobe { position: absolute; right: 56px; bottom: 44px; z-index: 6; padding: 22px 24px; overflow-y: auto; animation: drawer .32s var(--ease); }
@keyframes drawer { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.wdHead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.wdTitle { font: 600 24px var(--font); letter-spacing: .14em; margin-top: 8px; }
.wdSec { padding: 15px 0; }
.wdLbl { font-size: 11.5px; margin-bottom: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips b { font: 500 12px var(--font); padding: 6px 11px; cursor: var(--cur-hand); letter-spacing: .06em; transition: border-color .15s, background .15s, color .15s; }
.chips b:hover { border-color: var(--hair2); background: rgba(255, 255, 255, 0.08); }
.chips b.lock { cursor: not-allowed; }
.chips b .ic { font-size: 11px; margin-right: 4px; vertical-align: -1px; }
.skinRow { display: flex; flex-wrap: wrap; gap: 9px; }
.skinRow.sm { margin-top: 12px; gap: 8px; }
.skinRow i { width: 22px; height: 22px; cursor: var(--cur-hand); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); transition: transform .15s var(--ease); }
.skinRow.sm i { width: 18px; height: 18px; }
.skinRow i:hover { transform: scale(1.14); }
#lockNote { min-height: 18px; font-size: 12px; letter-spacing: .06em; }

/* ---------- 匹配 ---------- */
#matching { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }
.mInner { width: 520px; text-align: center; }
.spinner { width: 44px; height: 44px; margin: 0 auto 26px; border: 2px solid rgba(255, 255, 255, 0.1); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mTitle { font: 500 20px var(--font); margin-top: 12px; }
.mCount { margin: 18px 0 14px; color: var(--dim); font: 700 22px var(--num); }
.mCount b { font: 700 72px/1 var(--num); margin-right: 8px; }
.mBar { background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.mBar i { display: block; height: 100%; width: 0; transition: width .12s; }
.mNames { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 22px; min-height: 110px; }
.mNames span { font-size: 12px; letter-spacing: .04em; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud::before, #hud::after { content: ""; position: absolute; left: 0; right: 0; }
#hud::before { top: 0; height: 130px; background: linear-gradient(180deg, rgba(6, 10, 18, 0.42), rgba(6, 10, 18, 0)); }
#hud::after { bottom: 0; height: 170px; background: linear-gradient(0deg, rgba(6, 10, 18, 0.45), rgba(6, 10, 18, 0)); }
#hud button { pointer-events: auto; }
#tl { position: absolute; left: 24px; top: 18px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 26px; max-width: 460px; text-shadow: var(--ts); }
#tl .stat { display: flex; align-items: baseline; gap: 7px; }
#tl .stat .ico { font-size: 15px; align-self: center; }
#tl .stat b { font: 700 36px/1 var(--num); }
#tl .stat .lbl { font-size: 10.5px; }
#tl .meta { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
#tl .meta .ico { font-size: 13px; }
#tl .meta .sep { width: 1px; height: 11px; background: rgba(255, 255, 255, 0.35); margin: 0 8px; }
#zoneBox { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); text-align: center; min-width: 230px; padding: 9px 20px 11px; text-shadow: var(--ts); }
#zoneTitle { font-size: 11px; }
#zoneTimer { font: 700 32px/1 var(--num); margin-top: 6px; }
#zoneBar { margin-top: 8px; overflow: hidden; }
#zoneBar i { display: block; height: 100%; width: 0; }
#mmWrap { position: absolute; overflow: hidden; }
#minimap { display: block; }
.mmN { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font: 700 12px/1 var(--num); }
.mmHint { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .1em; text-shadow: var(--ts); }
.mmHint kbd { height: 18px; min-width: 18px; font-size: 10px; padding: 0 4px; }
#feed { position: absolute; right: 20px; top: 240px; width: 330px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.fItem { font-size: 12.5px; padding: 5px 12px 5px 30px; border-radius: 6px; background: linear-gradient(90deg, rgba(8, 12, 20, 0), rgba(8, 12, 20, 0.62) 28%); white-space: nowrap; letter-spacing: .02em; animation: slideIn .28s var(--ease); transition: opacity .6s; }
.fItem .k { color: #ffd08a; font-weight: 600; } .fItem .v { color: #fff; font-weight: 600; }
.fItem .w { color: var(--mut); margin: 0 9px; font-size: 11px; letter-spacing: .08em; }
.fItem.me { box-shadow: inset -2px 0 0 var(--acc); }
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
#banner { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bn { display: flex; align-items: center; gap: 14px; font: 600 22px var(--font); white-space: nowrap; animation: bnIn .5s var(--ease); transition: opacity .6s, transform .6s; }
.bn::before, .bn::after { content: ""; width: 46px; height: 1px; }
.bn .ic { font-size: 1.05em; }
.bn.small { font-size: 14.5px; font-weight: 500; letter-spacing: .12em; color: rgba(255, 255, 255, 0.92); }
.bn.small::before, .bn.small::after { width: 30px; }
.bn.gold { font-size: 30px; letter-spacing: .18em; }
.bn.gold::before, .bn.gold::after { background: linear-gradient(90deg, rgba(255, 181, 71, 0), var(--acc)); }
.bn.out { opacity: 0; }
@keyframes bnIn { from { opacity: 0; transform: translateY(10px); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
#toasts { position: absolute; left: 50%; bottom: 170px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; }
.toast { display: flex; align-items: center; gap: 8px; padding: 3px 18px 3px 8px; font-size: 13px; font-weight: 500; letter-spacing: .04em; background: linear-gradient(90deg, rgba(8, 12, 20, 0), rgba(8, 12, 20, 0.62) 22%, rgba(8, 12, 20, 0.62) 78%, rgba(8, 12, 20, 0)); animation: slideUp .25s var(--ease); transition: opacity .5s; text-shadow: var(--ts); }
.toast canvas { width: 26px; height: 26px; }
.toast .tdesc { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: rgba(236, 240, 245, 0.82); letter-spacing: .02em; max-width: 340px; line-height: 1.35; }
/* 近战四项数值条（拾取提示、第一次捡到时的提示条） */
.stats { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 4px 0 2px; }
.stats .st { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 500; color: rgba(236, 240, 245, 0.75); }
.stats em { font-style: normal; margin-right: 4px; }
.stats i { width: 9px; height: 5px; border-radius: 1px; background: rgba(255, 255, 255, 0.16); }
.stats i.on { background: #ffcf5a; }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
#prompt { position: absolute; left: 50%; bottom: 214px; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; font-size: 14.5px; font-weight: 600; letter-spacing: .04em; }
#prompt canvas { width: 36px; height: 36px; }
#prompt .desc { font-size: 11px; color: var(--mut); font-weight: 500; margin-top: 3px; letter-spacing: .06em; max-width: 460px; white-space: normal; line-height: 1.55; }
/* 近战：合成预览、词条、传说特效、三级强化 */
#prompt .mg { font-size: 12px; font-weight: 600; color: #ffd98a; margin-top: 3px; letter-spacing: .04em; }
#prompt .desc b { color: #fff; font-weight: 600; }
#prompt .desc.af b { color: #9fe6a8; }
#prompt .desc.af b.lgd { color: #ffcf5a; }
#prompt .desc.l3 { color: rgba(255, 217, 138, 0.5); }
#prompt .desc.l3.on { color: #ffd98a; }
#prompt .dim { opacity: .62; }
/* 近战说明行多，提示框放宽一点，每行少折行 */
#prompt:has(.mg), #prompt:has(.af) { max-width: 640px; }
#prompt .af, #prompt .l3, #prompt .mg { max-width: 600px; }
#prompt .desc.af, #prompt .desc.l3, #prompt .desc.dim { line-height: 1.4; margin-top: 2px; }
.toast .afx { font-style: normal; font-size: 11.5px; color: #9fe6a8; margin-left: 4px; }
#sky { position: absolute; left: 50%; top: 116px; transform: translateX(-50%); text-align: center; text-shadow: var(--ts); }
#skyTitle { font: 600 18px var(--font); letter-spacing: .28em; }
#altBar { width: 300px; height: 2px; margin: 12px auto; background: rgba(255, 255, 255, 0.22); border-radius: 1px; overflow: hidden; }
#altBar i { display: block; height: 100%; background: #fff; }
#skyHint { font-size: 12.5px; letter-spacing: .08em; color: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; gap: 6px; }
#bottom { position: absolute; left: calc(50% - 70px); bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
#vitals { width: 400px; }
/* 局内等级：Lv 数字 + 细经验条 + 经验数 */
.lvRow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 0; }
.lvTag { width: 50px; font: 600 11px/1 var(--font); letter-spacing: .08em; text-align: right; }
.lvTag b { font: 700 19px/1 var(--num); margin-left: 3px; }
#lvBar { flex: 1; overflow: hidden; }
#lvBar i { display: block; height: 100%; width: 0; transition: width .3s; }
#lvXp { font: 600 11px/1 var(--num); min-width: 52px; }
.bagIt.gad.sel { box-shadow: inset 0 0 0 2px #ffcf3a; }
.lvUp #lvBar i { background: #fff; }
#boostBar { display: flex; gap: 3px; margin: 0 0 6px 58px; }
#boostBar i { flex: 1; background: rgba(255, 255, 255, 0.14); overflow: hidden; position: relative; }
#boostBar i::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--acc); }
.hpRow { display: flex; align-items: center; gap: 12px; }
#hpText { width: 46px; text-align: right; font: 700 32px/1 var(--num); }
#hpText.low { color: var(--bad); }
#hpBar { position: relative; flex: 1; overflow: hidden; }
#hpBar i { position: absolute; left: 0; top: 0; bottom: 0; }
#hpLag { background: rgba(255, 120, 120, 0.55); width: 100%; transition: width .6s .2s; }
#hpFill { width: 100%; transition: width .12s; }
#hpBar.mid #hpFill { background: linear-gradient(180deg, #ffe3a6, #ffbf55); }
#hpBar.low #hpFill { background: linear-gradient(180deg, #ff9d9d, #ff5f6d); }
#gear { display: flex; gap: 6px; margin-left: 58px; align-self: flex-start; }
.gearIt { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; position: relative; }
.gearIt canvas { width: 28px; height: 28px; }
.gearIt.off { opacity: .28; }
.gearIt .lv { position: absolute; right: 3px; bottom: 1px; font: 700 11px/1 var(--num); text-shadow: var(--ts); }
#slots { position: absolute; right: 20px; bottom: 22px; display: flex; gap: 6px; align-items: flex-end; }
.slot { width: 76px; height: 70px; position: relative; transition: transform .18s var(--ease), background .18s; }
.slot.main { width: 156px; }
.slot.on { transform: translateY(-5px); }
.slot.on::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; }
.slot .key { position: absolute; left: 9px; top: 7px; font: 700 12px/1 var(--num); }
.slot canvas { position: absolute; left: 8px; top: 16px; width: 60px; height: 32px; }
.slot.main canvas { left: 10px; top: 13px; width: 80px; height: 42px; }
.slot canvas, .bagIt canvas, .gearIt canvas, #prompt canvas, .toast canvas { filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.12)); }
.slot .nm { position: absolute; left: 10px; right: 10px; bottom: 7px; font-size: 10.5px; color: var(--mut); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .am { position: absolute; right: 10px; top: 9px; font: 700 24px/1 var(--num); text-align: right; }
.slot .am small { font-size: 14px; color: var(--mut); margin-left: 2px; }
.slot:not(.main) .am { font-size: 15px; top: 8px; }
.slot .am.empty b { color: var(--bad); }
.slot .rbar { position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; }
#bag { position: absolute; left: 20px; bottom: 22px; display: grid; grid-template-columns: repeat(4, 46px); gap: 5px; }
.bagIt { width: 46px; height: 56px; position: relative; display: flex; align-items: flex-start; justify-content: center; padding-top: 9px; }
.bagIt canvas { width: 30px; height: 30px; }
.bagIt.off { opacity: .24; }
.bagIt.sel { box-shadow: inset 0 0 0 1px var(--acc); }
.bagIt .n { position: absolute; right: 4px; top: 3px; font: 700 12px/1 var(--num); text-shadow: var(--ts); }
.bagIt .k { position: absolute; left: 4px; top: 3px; font: 700 10px/1 var(--num); color: var(--dim); }
/* 格子下面的小字：写明这是什么 */
.bagIt .nm { position: absolute; left: 1px; right: 1px; bottom: 4px; text-align: center; white-space: nowrap; overflow: hidden; font: normal 500 9.5px/1 var(--font); letter-spacing: 0; color: rgba(255, 255, 255, 0.78); text-shadow: var(--ts); }
.bagWide { grid-column: span 4; display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 10.5px; color: var(--mut); padding: 5px 2px 0; letter-spacing: .04em; text-shadow: var(--ts); }
.bagWide b { color: #fff; font: 700 13px/1 var(--num); margin-left: 3px; }
.ammoDot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
#spec { position: absolute; left: 50%; top: 116px; text-align: center; padding: 12px 22px; }
#specName { font: 600 17px var(--font); letter-spacing: .08em; margin: 8px 0 10px; }
#spec .row { display: flex; gap: 8px; justify-content: center; }

#bigmap { position: absolute; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; }
.bmInner { text-align: center; }
#bigmapCv { width: min(calc(80 * var(--vh, 1vh)), 820px); height: min(calc(80 * var(--vh, 1vh)), 820px); display: block; }
.bmTip { display: flex; gap: 22px; justify-content: center; align-items: center; margin-top: 14px; font-size: 12px; letter-spacing: .08em; color: var(--mut); }
.bmTip span { display: inline-flex; align-items: center; gap: 7px; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.lgZone { box-shadow: inset 0 0 0 2px #c9a3ff; } .lgNext { box-shadow: inset 0 0 0 2px #fff; } 
/* ---------- 结算 ---------- */
#results { position: absolute; inset: 0; z-index: 18; display: flex; align-items: center; justify-content: center; }
.rInner { width: 780px; animation: rise .55s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rHero { display: flex; align-items: flex-end; gap: 30px; margin: 34px 0 28px; }
.rPlace { font: 700 156px/.86 var(--num); letter-spacing: -.01em; color: #fff; }
.rPlace small { font-size: 38px; color: var(--dim); margin-left: 8px; letter-spacing: 0; }
.rPlace.win { color: var(--acc); text-shadow: 0 0 60px rgba(255, 181, 71, 0.35); }
.rHeroText { padding-bottom: 8px; }
#rTitle { font: 600 32px var(--font); letter-spacing: .16em; }
#rTitle.win { color: var(--acc); }
#rSub { font-size: 13.5px; color: var(--mut); margin-top: 10px; letter-spacing: .08em; }
.rGrid { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 20px; }
.rGrid div { padding: 16px 0 15px 18px; position: relative; }
.rGrid div + div::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--hair); }
.rGrid b { display: block; font: 700 32px/1 var(--num); }
.rGrid span { display: block; font-size: 10.5px; letter-spacing: .22em; margin-top: 7px; }
.rRank { display: flex; align-items: center; gap: 20px; padding: 16px 22px; margin-bottom: 26px; }
#rRankCv { width: 88px; height: 88px; flex: 0 0 88px; }
.rRankInfo { flex: 1; }
#rRankName { font: 600 21px var(--font); letter-spacing: .1em; margin: 8px 0 11px; }
#rBreak { font-size: 11.5px; color: var(--mut); margin-top: 9px; letter-spacing: .05em; }
#rDelta { font: 700 46px/1 var(--num); min-width: 90px; text-align: right; }
.rBtns { display: flex; gap: 12px; align-items: stretch; }
.rBtns .btn.ghost { padding: 0 22px; }

#pause, #help { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; }
.pInner { display: flex; flex-direction: column; gap: 14px; padding: 28px 32px; width: 360px; }
.pTitle { font: 600 26px var(--font); letter-spacing: .16em; margin: 8px 0 8px; }
.pRow { display: flex; gap: 10px; } .pRow .btn { flex: 1; }
.volRow { display: flex; gap: 14px; align-items: center; font-size: 13px; letter-spacing: .12em; color: var(--mut); padding: 6px 0 10px; }
.volRow input { flex: 1; }
.hInner { width: 820px; padding: 28px 34px 30px; display: flex; flex-direction: column; }
.hCols { display: flex; gap: 34px; margin: 6px 0 24px; }
.hKeys { flex: 0 0 330px; display: flex; flex-direction: column; }
.hKeys div { display: flex; align-items: center; gap: 5px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.hKeys span { flex: 1; color: var(--mut); letter-spacing: .08em; }
.hTips { flex: 1; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.hTips li { counter-increment: t; position: relative; padding: 0 0 16px 38px; font-size: 13px; line-height: 1.75; }
.hTips li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 700 18px/1.3 var(--num); }
.hTips b { display: block; font-weight: 600; color: #fff; letter-spacing: .12em; margin-bottom: 2px; }
.r0 { color: var(--r0); } .r1 { color: var(--r1); } .r2 { color: var(--r2); } .r3 { color: var(--r3); } .r4 { color: var(--r4); }
#btnHelpClose { align-self: flex-start; }

/* ---------- 启动遮罩、出错、设备提示、存档提示 ---------- */
.noJs { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: #0b111b; color: #f3efe6; font: 16px sans-serif; z-index: 99; }
#bootMask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.bmBox { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .12em; color: var(--mut); }
.bmBox .spinner { margin: 0 0 8px; }
#fatal, #deviceNote { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 12, 0.84); }
.fBox { width: 440px; max-width: calc(calc(100 * var(--vw, 1vw)) - 32px); padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.fTitle { font: 600 22px var(--font); letter-spacing: .12em; }
.fDetail { font-size: 13px; line-height: 1.75; color: #d9dfe8; word-break: break-all; }
.fBox .row { display: flex; gap: 10px; margin-top: 6px; } .fBox .row .btn { flex: 1; }
.fBox .btn.big { align-self: flex-start; margin-top: 6px; }
#storeNote { position: absolute; left: 50%; top: 14px; z-index: 40; max-width: calc(calc(100 * var(--vw, 1vw)) - 40px); padding: 9px 18px; border-radius: 10px; background: rgba(110, 34, 34, 0.92); border: 1px solid rgba(255, 107, 107, 0.5); font-size: 12.5px; letter-spacing: .06em; line-height: 1.6; pointer-events: none; }
#storeNote.info { background: rgba(20, 30, 48, 0.94); border-color: var(--hair2); }
.perfEl { position: fixed; left: 8px; top: 90px; z-index: 99; font: 700 12px monospace; color: #fff; background: rgba(0, 0, 0, 0.5); padding: 4px 8px; border-radius: 6px; pointer-events: none; }

/* ---------- 设置 ---------- */
#settings { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 32; display: flex; justify-content: center; }
.sInner { width: 440px; padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.volRow b { font: 700 16px var(--num); width: 30px; text-align: right; }
.sRow { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; letter-spacing: .12em; padding: 3px 0; }
.seg { display: inline-flex; overflow: hidden; }
.seg i { font-style: normal; padding: 7px 13px; font-size: 12.5px; color: var(--txt); cursor: var(--cur-hand); letter-spacing: .06em; transition: background .15s; }
.seg i + i { border-left: 1px solid var(--hair); }
.seg i:hover { background: rgba(255, 255, 255, 0.08); }
.sNote { font-size: 12px; line-height: 1.7; margin: 4px 0 8px; }
#btnSettingsClose { align-self: flex-start; }
#btnQuit { align-self: stretch; }

/* ---------- 界面缩放：--zh 给局内 HUD，--zm 给大厅和弹出面板（main.js 按窗口大小和"界面大小"设置计算） ---------- */
/* 局内 HUD 分块用 zoom 缩放；小地图每秒重画 30 次，不放进 zoom 里（放进去整块都要跟着重绘，实测会掉帧），直接改它的显示尺寸 */
#tl, #zoneBox, #feed, #banner, #toasts, #prompt, #sky, #bottom, #slots, #bag, #spec { zoom: var(--zh, 1); }
#mmWrap { top: calc(18px * var(--zh, 1)); right: calc(20px * var(--zh, 1)); }
#minimap { width: calc(208px * var(--zh, 1)); height: calc(208px * var(--zh, 1)); }
.menuTop, .menuMain, #wardrobe, .rInner, .pInner, .hInner, .sInner, .mInner, .fBox { zoom: var(--zm, 1); }
/* 键盘操作时能看到焦点在哪 */
.btn:focus-visible, .iconBtn:focus-visible, .seg i:focus-visible, #nameInput:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ---------- 手机触屏（横屏） ---------- */
/* 按键尺寸用 --tz（按屏幕高度算，390 高 = 1），HUD 仍用 --zh 缩放 */
body.touch { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch #game { touch-action: none; }
#touch { position: absolute; inset: 0; pointer-events: none; touch-action: none; }
#tZone { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; pointer-events: auto; touch-action: none; }
#tJoy { position: absolute; left: 0; top: 0; width: calc(116px * var(--tz, 1)); height: calc(116px * var(--tz, 1)); margin: calc(-58px * var(--tz, 1)) 0 0 calc(-58px * var(--tz, 1)); border-radius: 50%; 
  opacity: .42; transition: opacity .15s;
  transform: translate(calc(calc(18 * var(--vw, 1vw))), calc(calc(100 * var(--vh, 1vh)) - 130px * var(--tz, 1))); }
#tJoy.on { opacity: 1; transition: none; }
#tJoy i { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; border-radius: 50%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.tBtn { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff;
  text-shadow: var(--ts); user-select: none; -webkit-user-select: none; }
.tBtn.on { background: rgba(255, 181, 71, 0.34); box-shadow: inset 0 0 0 2px var(--acc); transform: scale(.93); }
.tBtn.dis { opacity: .45; }
.tBtn .ic { font-size: calc(22px * var(--tz, 1)); }
.tBtn canvas { pointer-events: none; }
.tBtn .lb { font: 600 calc(10.5px * var(--tz, 1))/1 var(--font); }
.tBtn .sk { font: 600 calc(13px * var(--tz, 1))/1.1 var(--font); text-align: center; padding: 0 6px; }
.tBtn .n { position: absolute; font: 700 calc(14px * var(--tz, 1))/1 var(--num); }
.tBtn .cd { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 calc(19px * var(--tz, 1))/1 var(--num); }
.tBtn .cd:empty { display: none; }
.tBtn.sm .ic { font-size: calc(19px * var(--tz, 1)); }
.tBtn.xs .ic { font-size: calc(17px * var(--tz, 1)); }
/* 物品键下面的小字：写明这个键是什么东西 */
.tBtn .nm { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: calc(2px * var(--tz, 1)); white-space: nowrap; pointer-events: none;
  font: normal 600 calc(9.5px * var(--tz, 1))/1 var(--font); }
.tBtn .nm:empty, #tAtk.word .nm { display: none; }
/* 右下角一圈：攻击在中间，翻滚、技能、投掷围一圈，外圈是换弹、道具、回血、拾取 */
#tAtk { width: calc(92px * var(--tz, 1)); height: calc(92px * var(--tz, 1)); right: calc(30px * var(--tz, 1)); bottom: calc(34px * var(--tz, 1)); }
#tAtk canvas { width: 70%; height: 70%; }
#tAtk .lb:empty { display: none; }
#tAtk.word canvas { display: none; }
#tAtk.word .lb { font-size: calc(19px * var(--tz, 1)); }
/* 蓄力圈：按住攻击键时沿边缘走一圈，走满就是蓄力重击 */
#tAtk::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--acc) calc(var(--ch, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); pointer-events: none; }
#tAtk.full::before { background: #ff7a3d; }
#tThrow2 { right: calc(210px * var(--tz, 1)); bottom: calc(67px * var(--tz, 1)); }
:is(#tThrow, #tThrow2).aim { background: rgba(255, 181, 71, 0.34); box-shadow: inset 0 0 0 2px var(--acc); }
/* 瞄投掷物时出现在上方的"取消"：手指拖过去松手就不扔 */
#tCancel { width: calc(70px * var(--tz, 1)); height: calc(70px * var(--tz, 1)); right: calc(146px * var(--tz, 1)); bottom: calc(262px * var(--tz, 1)); pointer-events: none;
  }
#tCancel .lb { position: absolute; top: 104%; white-space: nowrap; font-size: calc(10px * var(--tz, 1)); }
#tCancel.hot { background: rgba(220, 50, 60, 0.85); box-shadow: inset 0 0 0 2px #ffb3b3, 0 0 24px rgba(255, 60, 60, 0.5); transform: scale(1.12); }
/* 道具栏第 2～6 格：从主道具键往上排两列（在血条右边、动作键左边），点哪个用哪个；每格下面留出一行名字的位置 */
.tGx { width: calc(42px * var(--tz, 1)); height: calc(42px * var(--tz, 1)); right: calc(217px * var(--tz, 1)); }
.tGx .n { font-size: calc(12px * var(--tz, 1)); right: 6%; bottom: 2%; }
#tG1 { bottom: calc(180px * var(--tz, 1)); }
#tG2 { bottom: calc(238px * var(--tz, 1)); }
#tG3 { bottom: calc(296px * var(--tz, 1)); }
#tG4 { bottom: calc(180px * var(--tz, 1)); right: calc(263px * var(--tz, 1)); }
#tG5 { bottom: calc(238px * var(--tz, 1)); right: calc(263px * var(--tz, 1)); }
#tHeal { width: calc(50px * var(--tz, 1)); height: calc(50px * var(--tz, 1)); right: calc(157px * var(--tz, 1)); bottom: calc(199px * var(--tz, 1)); }
#tPause { right: calc(20px * var(--zh, 1) + 112px * var(--tz, 1) + 12px); }
/* HUD 在手机上：背包收进按键，小地图缩小可点，武器栏居中可点，击杀播报挪到左上 */
body.touch #bag, body.touch .mmHint, body.touch .slot .key, body.touch #prompt kbd, body.touch .slot.none { display: none; }
body.touch #mmWrap { pointer-events: auto; }
body.touch #minimap { width: calc(112px * var(--tz, 1)); height: calc(112px * var(--tz, 1)); }
body.touch #slots { pointer-events: auto; right: auto; left: 50%; bottom: 8px; }
body.touch .slot { width: 66px; height: 58px; }
body.touch .slot.main { width: 108px; }
body.touch .slot canvas { left: 9px; top: 12px; width: 48px; height: 26px; }
body.touch .slot.main canvas { left: 8px; top: 10px; width: 66px; height: 34px; }
body.touch .slot:not(.main) .am { font-size: 13px; top: 6px; right: 7px; }
body.touch .slot:not(.main) .am small { display: none; }
body.touch #prompt { pointer-events: auto; padding: 10px 18px 10px 12px; }
body.touch #prompt .desc { max-width: 420px; }
body.touch #feed { left: 20px; right: auto; width: 320px; align-items: flex-start; }
body.touch .fItem { padding: 5px 30px 5px 12px; background: linear-gradient(90deg, rgba(8, 12, 20, 0.62) 72%, rgba(8, 12, 20, 0)); }
body.touch .fItem.me { box-shadow: inset 2px 0 0 var(--acc); }
/* 大厅在手机上：角色缩小不压标题，右栏去掉战绩列表，统计不被裁掉 */
body.touch .menuMain { top: 170px; bottom: 30px; }
body.touch #avatarCv { width: 400px; height: 300px; bottom: 96px; }
body.touch .pedestal { left: 50px; bottom: 116px; width: 280px; height: 72px; }
body.touch .history { display: none; }
body.touch .statsGrid { flex-shrink: 0; }
body.touch .side { justify-content: flex-end; }
body.touch #wardrobe { bottom: 24px; }
/* 竖屏提示 */
#rotateNote { display: none; }
@media (orientation: portrait) {
  body.touch #rotateNote { display: flex; position: absolute; inset: 0; z-index: 90; align-items: center; justify-content: center; background: var(--bg); text-align: center; }
}
.rtBox { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; max-width: 320px; }
.rtPhone { width: 44px; height: 76px; border: 2px solid var(--acc); margin-bottom: 12px; animation: rtSpin 2.6s var(--ease) infinite; }
@keyframes rtSpin { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* ---------- 手机物品 UI v2：单快捷键 + 轮盘 + 可管理背包 ---------- */
.tPick, .tBagBtn, .wheelItem, .wheelClose, .packClose, .invSel, .invDrop { border: 0; font-family: var(--font); -webkit-tap-highlight-color: transparent; }
.tPick { position: absolute; z-index: 3; pointer-events: auto; width: calc(25px * var(--tz, 1)); height: calc(25px * var(--tz, 1)); padding: 0; font-size: calc(9px * var(--tz, 1)); font-weight: 700; }
.tPick.on { background: var(--acc); color: #1b1104; transform: scale(.9); }
#tThrowPick { right: calc(38px * var(--tz, 1)); bottom: calc(191px * var(--tz, 1)); }
#tGadPick { right: calc(204px * var(--tz, 1)); bottom: calc(149px * var(--tz, 1)); }
.tBagBtn { position: absolute; z-index: 3; pointer-events: auto; display: flex; justify-content: center; gap: 5px; }
.tBagBtn span { font-size: calc(11px * var(--tz, 1)); font-weight: 700; letter-spacing: .08em; }
.tBagBtn i { font: normal 500 calc(8px * var(--tz, 1))/1 var(--font); color: var(--acc); }
#tWheel, #tPack { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(3,7,12,.62); backdrop-filter: blur(3px); }
.wheelDial { width: min(320px, calc(84 * var(--vh, 1vh))); height: min(320px, calc(84 * var(--vh, 1vh))); border-radius: 50%; background: url('../assets/ui-wheel.svg') center/100% 100% no-repeat; filter: drop-shadow(0 18px 36px rgba(0,0,0,.5)); }
.wheelTitle { position: absolute; z-index: 2; left: 50%; color: #ffe0a1; text-align: center; font-weight: 700; letter-spacing: .08em; }
.wheelClose { position: absolute; z-index: 4; color: #8e9aaa; font-size: 23px; line-height: 20px; }
.wheelItems { position: absolute; inset: 0; }
.wheelItem { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); width: 51px; height: 51px; padding: 2px; border-radius: 50%; pointer-events: auto; background: linear-gradient(180deg, rgba(39,55,77,.96), rgba(12,20,31,.98)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.4); }
.wheelItem canvas { width: 31px; height: 31px; display: block; margin: -1px auto 0; }
.wheelItem b { position: absolute; left: 50%; top: 100%; transform: translate(-50%,1px); white-space: nowrap; font-size: 9px; text-shadow: var(--ts); }
.wheelItem i { position: absolute; right: -2px; top: -2px; min-width: 19px; padding: 2px 4px; border-radius: 8px; background: #070c13; color: #fff; font: normal 700 10px/1 var(--num); }
.wheelItem.sel { background: linear-gradient(180deg, #5c421f, #24180b); box-shadow: inset 0 0 0 2px var(--acc), 0 0 18px rgba(255,181,71,.35); }
.wheelItem.on { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.9); }
.packSheet { width: min(700px, calc(calc(100 * var(--vw, 1vw)) - 26px)); max-height: calc(calc(100 * var(--vh, 1vh)) - 24px); overflow: hidden; display: flex; flex-direction: column; }
.packSheet header { min-height: 62px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); background: linear-gradient(90deg, rgba(255,181,71,.08), transparent 46%); }
.packSheet header small { display: block; font: 700 9px/1 var(--num); letter-spacing: .28em; }
.packSheet header b { display: block; margin-top: 5px; font-size: 20px; }
.packClose { width: 38px; height: 38px; font-size: 25px; }
.packHelp { padding: 8px 17px; color: #9ba8b9; font-size: 10.5px; border-bottom: 1px solid rgba(255,255,255,.07); }
.packBody { overflow-y: auto; padding: 10px 14px 16px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.packBody h3 { grid-column: 1/-1; margin: 8px 3px 2px; color: #ffcf7a; font-size: 10px; letter-spacing: .22em; font-weight: 600; }
.packItem { position: relative; min-width: 0; border-radius: 12px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.packItem.sel { background: rgba(255,181,71,.1); box-shadow: inset 0 0 0 1px rgba(255,181,71,.65); }
.invSel { width: 100%; min-height: 58px; padding: 8px 35px 8px 8px; background: transparent; text-align: left; pointer-events: auto; display: grid; grid-template-columns: 42px 1fr auto; gap: 7px; align-items: center; }
.invSel canvas { width: 38px; height: 38px; }
.invSel span { min-width: 0; }
.invSel b { display: block; font-size: 12px; letter-spacing: .04em; }
.invSel small { display: block; margin-top: 3px; color: #8f9bad; font-size: 9px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invSel strong { font: 700 15px/1 var(--num); color: #dfe6ef; }
.invDrop { position: absolute; right: 4px; top: 4px; width: 27px; height: 27px; border-radius: 9px; background: rgba(255,96,96,.08); color: #de9b9b; pointer-events: auto; font-size: 16px; }
.invDrop.on { background: rgba(255,96,96,.28); }
.packEmpty { grid-column: 1/-1; padding: 40px; text-align: center; color: #788596; font-size: 12px; }
@media (max-height: 430px) {
  .wheelDial { width: 310px; height: 310px; }
  .packSheet { max-height: calc(calc(100 * var(--vh, 1vh)) - 12px); }
  .packSheet header { min-height: 52px; padding: 9px 15px; }
  .packHelp { padding: 5px 15px; }
  .packBody { padding-top: 5px; }
  .invSel { min-height: 52px; }
}

/* ---------- 2026-10-01 轮盘长按滑选、背包面板按钮（ui.js 共用，电脑和手机都用）---------- */
.wheelDial { position: absolute; left: 50%; top: 50%; }
#tWheel.slide { pointer-events: none; background: rgba(3, 7, 12, 0.28); backdrop-filter: none; }
#tWheel.slide .wheelItem, #tWheel.slide .wheelClose { pointer-events: none; }
#tWheel.slide .wheelClose { display: none; }
.wheelTitle { top: calc(50% - 14px); width: 128px; font-size: 13px; }
.wheelDesc { position: absolute; z-index: 2; left: 50%; top: calc(50% + 4px); width: 132px; color: #c4cedb; text-align: center; font-size: 9.5px; line-height: 1.4; letter-spacing: .02em; }
.wheelClose { left: auto; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(8, 13, 21, 0.85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.wheelItem { transition: transform .08s; }
.wheelItem.hot { background: linear-gradient(180deg, #7a5420, #2e1d0a); box-shadow: inset 0 0 0 2.5px #ffd27a, 0 0 22px rgba(255, 190, 80, 0.55); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.16); }
#tWheel.swap .wheelTitle { color: #ff9f8a; }
#tWheel.swap .wheelItem.hot { background: linear-gradient(180deg, #7a2a20, #2e0f0a); box-shadow: inset 0 0 0 2.5px #ff9f8a, 0 0 22px rgba(255, 110, 80, 0.55); }
.packSheet header em { display: inline-block; margin-left: 10px; font: normal 600 10px/1 var(--font); color: #9fb0c4; letter-spacing: .06em; vertical-align: 2px; }
.invSel { padding-right: 10px; }
.invSel small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.invSel b em { margin-left: 6px; padding: 1px 5px; border-radius: 6px; background: rgba(255, 181, 71, 0.2); color: var(--acc); font: normal 600 9px/1.3 var(--font); }
.pkRow { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 8px 57px; }
.pkChip { border: 0; pointer-events: auto; height: 24px; padding: 0 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: #dbe3ec; font: 600 10px/24px var(--font); letter-spacing: .03em; -webkit-tap-highlight-color: transparent; }
.pkChip.use { background: rgba(255, 181, 71, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.5); color: #ffd99a; }
.pkChip.swap { background: rgba(255, 110, 80, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 140, 110, 0.65); color: #ffc1b2; }
.pkChip.onc { color: #9fe6a8; }
.pkChip.offc { color: #ff9f9f; background: rgba(255, 96, 96, 0.1); }
.pkChip.on { transform: scale(.94); background: rgba(255, 181, 71, 0.32); }
.packGear { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 4px 4px 2px; font-size: 10.5px; color: #8f9bad; }
.packGear b { color: #fff; font-weight: 600; }
.packWeapon { grid-column: 1/-1; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(0,0,0,.12); }
.packWeapon summary { cursor: var(--cur-hand); color: #ffcf7a; font-size: 11px; font-weight: 600; }
.packWeapon .desc { margin-top: 7px; color: #b3c1d1; font-size: 11px; line-height: 1.55; }
.packWeapon .desc b { color: #fff; }
.packWeapon .l3 { color: #baad8d; }
.packWeapon .l3.on { color: #ffd98a; }
.packOff { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 6px; }
/* 电脑：左下背包上面一行"背包 Tab"，点开面板 */
.bagHead { grid-column: span 4; border: 0; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; box-shadow: inset 0 0 0 1px var(--hair); font: 600 11px/1 var(--font); letter-spacing: .06em; cursor: var(--cur-hand); }
.bagHead span, .bagHead kbd { white-space: nowrap; flex-shrink: 0; }
.bagHead kbd { font-size: 10px; }
.bagHead em { font-style: normal; font-size: 9.5px; color: var(--dim); letter-spacing: 0; white-space: nowrap; overflow: hidden; }
.bagHead:hover { background: var(--tile-on); }
body:not(.touch) .packSheet { zoom: var(--zm, 1); }
.tBtn.swapHint { animation: swapPulse 0.9s ease-in-out infinite; }
@keyframes swapPulse { 0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 140, 110, 0.9), 0 0 0 0 rgba(255, 110, 80, 0.5); } 50% { box-shadow: inset 0 0 0 2px #ffb3a2, 0 0 0 7px rgba(255, 110, 80, 0); } }

/* 背包键的图标和换武器键：只有新版界面用 */
.tBagBtn .ic { display: none; }
body:not(.hud2) #tSwap { display: none; }

/* ---------- 新版手机对局界面（小样：网址加 ?hud=2）----------
   1 右下角按键以攻击键为中心排两圈：内圈翻滚、技能、投掷，外圈道具、回血、拾取；名字和数量收进按键里；"换"改成角上的小三角（长按）
   2 去掉底部武器栏，血条、等级、能量、护甲挪到左上角，垫一块半透明底
   3 飞机上、跳伞时不显示血条那一块
   4 背包键改成和暂停一样大的图标键
   5 压在地图上的字加深色描边 */
body.touch.hud2 #tRoll { width: calc(58px * var(--tz, 1)); height: calc(58px * var(--tz, 1)); right: calc(139px * var(--tz, 1)); bottom: calc(51px * var(--tz, 1)); }
body.touch.hud2 #tSkill { width: calc(62px * var(--tz, 1)); height: calc(62px * var(--tz, 1)); right: calc(110px * var(--tz, 1)); bottom: calc(114px * var(--tz, 1)); }
body.touch.hud2 #tHeal { display: none !important; }
body.touch.hud2 #tUse { width: calc(56px * var(--tz, 1)); height: calc(56px * var(--tz, 1)); right: calc(20px * var(--tz, 1)); bottom: calc(202px * var(--tz, 1)); }
body.touch.hud2 #tSwap { bottom: calc(16px * var(--tz, 1)); }
body.touch.hud2 #tReload { width: calc(48px * var(--tz, 1)); height: calc(48px * var(--tz, 1)); right: calc(314px * var(--tz, 1)); bottom: calc(16px * var(--tz, 1)); }
body.touch.hud2 #tThrowPick, body.touch.hud2 #tGadPick { display: none !important; }
/* 名字收进按键底部，数量变成右上角的小角标 */
body.touch.hud2 :is(#tThrow, #tThrow2, #tGad, #tHeal, #tSwap, .tHx) canvas { width: 52%; height: 52%; margin-top: -14%; }
body.touch.hud2 :is(#tThrow, #tThrow2, #tGad, #tHeal, #tSwap, .tHx) .nm { top: auto; bottom: 11%; margin: 0; letter-spacing: 0; }
body.touch.hud2 :is(#tThrow, #tThrow2, #tGad, #tHeal, .tHx) .n { right: -3px; top: -3px; bottom: auto; min-width: calc(18px * var(--tz, 1)); height: calc(18px * var(--tz, 1)); padding: 0 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); font-size: calc(10.5px * var(--tz, 1)); line-height: calc(18px * var(--tz, 1)); text-align: center; }
body.touch.hud2 .tBtn .n:empty { display: none; }
/* 有两种以上可以换：左上角一个小三角 */
body.touch.hud2 .tBtn.multi::after { content: ""; position: absolute; left: 9%; top: 9%; width: calc(9px * var(--tz, 1)); height: calc(9px * var(--tz, 1)); background: var(--acc); clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 2px; pointer-events: none; }
/* 左上角状态区 */
body.touch.hud2 #slots { display: none; }
body.touch.hud2 #bottom { left: 24px; top: 84px; bottom: auto; transform: none; align-items: flex-start; gap: 7px; }
body.touch.hud2 #vitals { width: 250px; display: flex; flex-direction: column; }
body.touch.hud2 .hpRow { order: 1; gap: 8px; }
body.touch.hud2 #boostBar { order: 2; margin: 6px 0 0 42px; }
body.touch.hud2 .lvRow { order: 3; margin: 6px 0 0 0; gap: 7px; }
body.touch.hud2 #hpText { width: 34px; font-size: 25px; }
body.touch.hud2 .lvTag b { font-size: 15px; }
body.touch.hud2 #lvXp { min-width: 46px; }
body.touch.hud2 #hpText, body.touch.hud2 .lvTag, body.touch.hud2 #lvXp { text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, 0.9); }
body.touch.hud2 #gear { margin-left: 42px; gap: 5px; }
body.touch.hud2 .gearIt { width: 30px; height: 30px; }
body.touch.hud2 .gearIt canvas { width: 22px; height: 22px; }
body.touch.hud2 #feed { top: 214px; }
/* 拾取提示挪到顶部倒计时下面（底部和右下都被按键占了）；近战只留名字、四项数值、合成和词条，特性技能说明第一次捡到时的提示条里有 */
body.touch.hud2 #prompt { top: 92px; bottom: auto; }
body.touch.hud2 #prompt .stats ~ .desc:not(.af) { display: none; }
body.touch.hud2 #toasts { bottom: 22px; }
body.hud2 #hud.sky #bottom, body.hud2 #hud.sky #slots { display: none; }
/* 背包键：和暂停一样大的图标键，放在暂停左边 */
body.touch.hud2 .tBagBtn { min-width: 0; padding: 0; right: calc(20px * var(--zh, 1) + 158px * var(--tz, 1) + 12px); align-items: center; }
body.touch.hud2 .tBagBtn > span, body.touch.hud2 .tBagBtn > i { display: none; }
body.touch.hud2 .tBagBtn .ic { display: block; }
/* 两个专属回血键（医疗包、能量饮料）：外圈道具和拾取之间，沿弧排开，两个键之间约 39 像素（绷带 2026-10-01 取消） */
body:not(.hud2) .tHx { display: none; }
body.touch.hud2 .tHx.dis { opacity: .6; }
body.touch.hud2 .tHx.busy { opacity: 1; background: rgba(60, 140, 70, 0.45); box-shadow: inset 0 0 0 2.5px #7dff8a, 0 0 16px rgba(125, 255, 138, 0.5); }

/* ---------- 新版界面：电脑 ---------- */
/* 背包分三行（回血 / 投掷 / 道具），旧版里这一层不存在（display: contents） */
.bagRow { display: contents; }
.bagLbl { display: none; }
/* 没枪时不显示两个"空"枪位 */
body.hud2:not(.touch) .slot.none { display: none; }
body.hud2:not(.touch) #bag { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
body.hud2:not(.touch) .bagHead { grid-column: auto; }
body.hud2:not(.touch) .bagRow { display: flex; align-items: flex-end; gap: 5px; }
body.hud2:not(.touch) .bagRow.empty { display: none; }
body.hud2:not(.touch) .bagLbl { display: block; width: 14px; align-self: center; font: 600 10px/1.15 var(--font); color: rgba(255, 255, 255, 0.62); letter-spacing: 0; writing-mode: vertical-rl; text-shadow: var(--ts); white-space: nowrap; }
body.hud2:not(.touch) .bagIt.gad.off, body.hud2:not(.touch) [data-mel] { display: none; }
body.hud2:not(.touch) .bagIt[data-h], body.hud2:not(.touch) .bagIt[data-t], body.hud2:not(.touch) .bagIt.gad { pointer-events: auto; cursor: var(--cur-hand); }
body.hud2:not(.touch) .bagIt[data-h]:hover, body.hud2:not(.touch) .bagIt[data-t]:hover, body.hud2:not(.touch) .bagIt.gad:hover { background: var(--tile-on); }
body.hud2:not(.touch) .bagIt.busy { box-shadow: inset 0 0 0 2px #7dff8a; }
body.hud2:not(.touch) .bagWide { padding: 2px 2px 0; }
/* 血条那一块垫一层半透明底，大雾、雪地上也看得清 */
body.hud2:not(.touch) #bottom { padding: 10px 16px 12px; }
body.hud2:not(.touch) #hpText, body.hud2:not(.touch) .lvTag, body.hud2:not(.touch) #lvXp { text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, 0.9); }
/* 非战斗自动回血：血条变绿、轻轻闪 */
#hpBar.regen #hpFill { background: linear-gradient(180deg, #e2ffe6, #8ee69b); animation: regenPulse 1.4s ease-in-out infinite; }
@keyframes regenPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
/* 武器状态：防暴盾耐力条、长矛拒马、电击拳套可以引爆 */
#stamBar { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px 0; }
#stamBar span { width: 50px; text-align: right; font: 600 10px/1 var(--font); color: #9fd8ff; letter-spacing: .06em; text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, 0.9); }
#stamBar .sb { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#stamBar .sb i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5fb8ff, #a8e2ff); transition: width .15s; }
#stamBar.mid .sb i { background: linear-gradient(90deg, #ffb347, #ffe07a); }
#stamBar.low .sb i { background: linear-gradient(90deg, #ff5f6d, #ff9a7a); }
#stamBar.broken span { color: #ff8a7a; }
#stamBar.broken .sb i { background: #ff5f6d; animation: stamBlink .3s steps(2) infinite; }
@keyframes stamBlink { 50% { opacity: .25; } }
body.touch.hud2 #stamBar { order: 2; margin: 6px 0 0 0; }
body.touch.hud2 #stamBar span { width: 34px; }
.slot.brace { box-shadow: inset 0 0 0 2px #9fdcff, 0 0 18px rgba(159, 220, 255, 0.45); }
.slot.ready { box-shadow: inset 0 0 0 2px #9ff0ff, 0 0 18px rgba(140, 230, 255, 0.6); animation: readyPulse .8s ease-in-out infinite; }
#tAtk.brace { box-shadow: inset 0 0 0 3px #9fdcff, 0 0 22px rgba(159, 220, 255, 0.55); }
#tSkill.ready { background: rgba(60, 170, 210, 0.42); animation: readyPulse .8s ease-in-out infinite; }
@keyframes readyPulse { 0%, 100% { box-shadow: inset 0 0 0 2px #9ff0ff, 0 0 10px rgba(140, 230, 255, 0.4); } 50% { box-shadow: inset 0 0 0 3px #d8fbff, 0 0 24px rgba(140, 230, 255, 0.85); } }

/* ---------- 2026-10-01 界面修整：操作说明、大地图、外观、设置（震动、按键布局） ---------- */
/* 面板比屏幕高时可以上下滑：用 auto 外边距居中，放不下就从顶上开始排，标题不会被切掉 */
#help, #settings { align-items: flex-start; overflow-y: auto; padding: 4px 0; }
#help > .hInner, #settings > .sInner { margin: auto; }
/* 手机上的操作说明：面板放宽、行距收紧；左边名称不折行，右边说明太长就自己折行，不再撑出框 */
body.touch .hInner { width: 1240px; padding: 22px 30px 22px; }
body.touch .hCols { margin: 2px 0 16px; }
body.touch .hKeys { flex-basis: 470px; }
body.touch .hKeys div { gap: 12px; padding: 6px 0; }
body.touch .hKeys span { flex: 0 0 auto; white-space: nowrap; }
body.touch .hKeys kbd { margin-left: auto; height: auto; min-height: 22px; padding: 3px 8px; text-align: right; line-height: 1.35; }
body.touch .hTips li { padding-bottom: 10px; }
/* 只在手机 / 只在电脑上出现的设置项 */
body:not(.touch) .tOnly { display: none !important; }
body.touch .dOnly { display: none !important; }
.sBtn { font: 600 12.5px var(--font); letter-spacing: .1em; color: var(--txt); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hair2); padding: 7px 18px; cursor: var(--cur-hand); }
.sBtn:hover { background: rgba(255, 255, 255, 0.12); }
.sBtn:active { background: var(--acc); color: #1c1204; }
/* 大地图：手机上没有 M 键，改成"点任意处关闭"；"你的位置"图例画成和地图上一样的黄箭头；补上毒圈外、空投 */
.bmClose em { display: none; font-style: normal; }
body.touch .bmClose kbd { display: none; }
body.touch .bmClose em { display: inline; }
.lgMe { width: 13px; height: 13px; border-radius: 0; background: #ffcf3a; clip-path: polygon(100% 50%, 0 0, 30% 50%, 0 100%); }
.lgOut { border-radius: 3px; background: rgba(120, 70, 220, 0.7); }
.lgDrop { width: 9px; height: 9px; border-radius: 2px; background: #ff4a4a; box-shadow: 0 0 0 1.5px #fff; }
body.touch .bmTip { gap: 14px; margin-top: 10px; font-size: 11px; letter-spacing: .04em; }
/* 外观：打开时背景压暗、名字和按钮先收起，角色更显眼；面板下面还有内容时底部渐隐、提示往下滑；锁着的直接标段位 */
#menu::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse 40% 60% at 22% 64%, rgba(6, 10, 18, 0.05), rgba(6, 10, 18, 0.8)); }
#menu.wd::after { opacity: 1; }
#menu.wd .stageInfo { visibility: hidden; }
#avatarCv { transition: transform .3s var(--ease); transform-origin: 30% 90%; }
#menu.wd #avatarCv { transform: scale(1.12); }
.wdMore { position: sticky; bottom: -22px; margin: -40px -24px -22px; height: 52px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px; pointer-events: none;
  font-size: 11px; letter-spacing: .2em; opacity: 0; transition: opacity .2s; }
#wardrobe.more .wdMore { opacity: 1; }
.chips b.lock { opacity: 1; }
.chips b em { font-style: normal; font-size: 10px; margin-left: 6px; letter-spacing: .04em; }
/* 按键透明度（设置 → 按键布局），按下时总是不透明 */
#touch .tBtn.dis { opacity: calc(var(--ta, 1) * .45); }
body.touch.hud2 #touch .tHx.empty { opacity: calc(var(--ta, 1) * .32); }
body.touch.hud2 #touch .tHx.dis { opacity: calc(var(--ta, 1) * .6); }
body.touch.hud2 #touch .tHx.busy, #touch .tBtn.on { opacity: 1; }
/* 自定义按键布局：盖住整个画面，只留可调的键、摇杆示意和顶上的工具条 */
#touch.edit { display: block !important; z-index: 40; pointer-events: auto; background: rgba(4, 7, 12, 0.9); }
#touch.edit > :not(.tEd):not(.tEdBar):not(#tJoy) { visibility: hidden; }
#touch.edit .tEd.hidden { display: flex !important; }
#touch.edit .tEd { opacity: var(--ta, 1) !important; animation: none !important; cursor: grab; background: rgba(255, 255, 255, 0.1) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55) !important; }
#touch.edit .tEd.tSel { background: rgba(255, 181, 71, 0.3) !important; box-shadow: inset 0 0 0 2.5px var(--acc), 0 0 18px rgba(255, 181, 71, 0.45) !important; }
#touch.edit .tEd > * { display: none !important; }
#touch.edit .tEd::before { display: none !important; }
#touch.edit .tEd::after { content: attr(data-ed); position: static; width: auto; height: auto; clip-path: none; background: none; border-radius: 0; font: 600 calc(11px * var(--tz, 1))/1.1 var(--font); letter-spacing: .02em; color: #fff; text-align: center; white-space: nowrap; }
#touch.edit #tJoy { opacity: .55; }
#touch.edit::before { content: "左半屏是摇杆：手指按哪里就从哪里出"; position: absolute; left: calc(18 * var(--vw, 1vw)); bottom: calc(26px * var(--tz, 1)); transform: translateX(-50%); white-space: nowrap; font-size: calc(10.5px * var(--tz, 1)); letter-spacing: .08em; color: var(--mut); }
.tEdBar { position: absolute; left: 50%; top: 8px; width: min(700px, calc(calc(100 * var(--vw, 1vw)) - 24px)); z-index: 5; pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px;
  border-radius: 14px; background: rgba(14, 21, 34, 0.97); border: 1px solid var(--hair2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font-size: 12px; color: var(--mut); letter-spacing: .04em; }
.tEdBar .teHead { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; }
.tEdBar .teHead b { font-size: 14px; color: #fff; letter-spacing: .12em; white-space: nowrap; }
.tEdBar .teHead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tEdBar .teBtns { display: flex; gap: 6px; }
.tEdBar button { border: 1px solid var(--hair2); background: rgba(255, 255, 255, 0.06); color: var(--txt); font: 600 12px var(--font); letter-spacing: .08em; padding: 7px 13px; border-radius: 9px; }
.tEdBar button:active { background: rgba(255, 255, 255, 0.16); }
.tEdBar #teSave { background: var(--acc); border-color: var(--acc); color: #1c1204; }
.tEdBar .teRow { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tEdBar .teRow input { flex: 1; min-width: 60px; accent-color: var(--acc); }
.tEdBar .teRow input:disabled { opacity: .35; }
.tEdBar .teRow em { font: 700 12px var(--num); font-style: normal; color: var(--txt); width: 40px; text-align: right; }
.tEdBar .teRow b { color: var(--acc); font-weight: 600; }
/* 手机上"知道了"挪到右上角，整页操作说明一屏放得下 */
body.touch .hInner { position: relative; }
body.touch #btnHelpClose { position: absolute; top: 24px; right: 30px; }
body.touch .bmClose { gap: 0; }

:root {
  --bg: #18374d; --ink: #243d53; --hair: rgba(255, 255, 255, 0.16); --hair2: rgba(255, 255, 255, 0.3);
  --txt: #fffaf2; --mut: #b8cbd1; --dim: #91a9b4; --acc: #ffd26d; --acc2: #ff9275;
  --good: #86dfae; --bad: #ff7d85; --zone: #c7a7ff; --tile: rgba(20, 48, 69, 0.86); --tile-on: rgba(34, 77, 91, 0.96);
}
.btn { border-radius: 15px; font-weight: 700; border-width: 2px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 0 rgba(10, 38, 55, 0.48); }
.btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.18); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(10, 38, 55, 0.48); }
.btn.big { font-weight: 900; letter-spacing: .13em; }
.btn.big:hover { background: linear-gradient(180deg, #fff6b6, #ffda86 55%, #ffc675); box-shadow: 0 9px 0 #df8a57, 0 19px 30px rgba(95, 59, 39, 0.25); }
.btn.big:active { transform: translateY(5px); box-shadow: 0 2px 0 #df8a57; }
.btn.big small { font-weight: 700; letter-spacing: .06em; }
.iconBtn:hover { background: #fff; transform: translateY(-2px); }
kbd { border-radius: 8px; border-width: 2px; font-weight: 800; }
.menuTop { padding-top: 35px; }
.brandEn { display: inline-flex; align-items: center; }
.brandSub { display: inline-flex; border-radius: 99px; }
.topActions { gap: 12px; }
.season { padding: 10px 16px; }
.menuMain { top: 203px; }
.stage::before { content: ""; position: absolute; z-index: 0; width: 390px; height: 390px; left: 34px; bottom: 158px; }
.pedestal { z-index: 0; left: 86px; bottom: 131px; width: 320px; height: 83px; }
#avatarCv { z-index: 1; }
.stageInfo { z-index: 2; gap: 7px; padding: 12px 18px 14px; }
.stageInfo::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(#ffd56e, #ff9b7c); }
#nameInput { width: 266px; padding-bottom: 3px; font-size: 25px; }
#nameInput::placeholder { color: #7d9c9f; }
#menu .side { width: 380px; gap: 13px; }
#menu .rankBlock { position: relative; isolation: isolate; overflow: hidden; gap: 15px; padding: 12px 17px; }
#menu .rankBlock::before { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
#rankName { margin: 5px 0 9px; }
#menu .statsGrid div { padding: 12px 0; }
#btnPlay::before { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; font: 900 21px/1 var(--font); }
#menu .history { padding: 16px 18px 9px; }
#menu .history .kicker::before { color: #eca75e; font-size: 15px; }
#menu .hItem { border-bottom: 1px dashed #bcd7d0; }
#menu .hItem .pl { color: #317e8d; }
#menu .hItem .pl.win, #menu .hItem .dl.up { color: #29a67e; }
#menu .btn.ghost { box-shadow: 0 4px 0 #afd5c7; }
#menu .btn.ghost:hover { background: #fff; }
#menu #wardrobe { right: 56px; top: 203px; width: 380px; }
#tl .stat, #tl .meta { padding: 6px 12px; }
#tl .meta { margin-top: 5px; }
#zoneBar { height: 5px; }
#lvBar, #boostBar i { height: 6px; border-radius: 99px; }
.slot.on::before { background: #ffcf6d; border-radius: 99px; }
.bagIt.sel, .bagIt.gad.sel { border-color: #ffde8e; box-shadow: 0 4px 0 #be8d5d, inset 0 0 0 1px #ffde8e; }
.bagHead { border-radius: 10px; background: rgba(61, 113, 127, 0.8); color: #fff9e8; }
.bagHead:hover { background: rgba(82, 135, 141, 0.95); }
#tJoy { border: 3px solid rgba(255, 255, 255, 0.76); background: radial-gradient(circle, rgba(211, 246, 232, 0.12), rgba(46, 107, 120, 0.64)); box-shadow: 0 5px 0 rgba(12, 40, 57, 0.5); }
#tJoy i { background: linear-gradient(145deg, #fffbe6, #a9e8da); border: 2px solid white; }
#touch .tBtn.on { background: linear-gradient(145deg, #ffe39a, #ffb977); color: #304b5d; box-shadow: 0 2px 0 #b98157, inset 0 2px 0 white; }
#touch .tBtn.dis { opacity: .45; }
body.touch.hud2 #hpBar { height: 12px; }
body.touch.hud2 #bottom { padding: 9px 13px 11px 10px; }
body.touch .stage::before { left: 25px; bottom: 116px; width: 300px; height: 260px; }

/* ===== UI polish pass ===== */
/* 横幅提示：加半透明胶囊底，地图亮处也看得清 */
.bn.small { padding: 7px 18px; border-radius: 99px; background: rgba(16, 44, 62, 0.72); border: 1.5px solid rgba(255, 255, 255, 0.35); box-shadow: 0 4px 0 rgba(10, 38, 55, 0.35); text-shadow: none; backdrop-filter: blur(4px); }
.bn.small::before, .bn.small::after { display: none; }
.bn.gold { text-shadow: 0 3px 0 rgba(98, 61, 42, 0.55), 0 0 24px rgba(255, 181, 71, 0.45); }
/* 血条：更粗、带刻度光泽 */
#hpBar { height: 17px; }
#hpText.low { animation: hpLowPulse .9s ease-in-out infinite; }
@keyframes hpLowPulse { 50% { opacity: .55; } }
/* 结算页：延续大厅的天空配色和卡通风 */
.rGrid { border: 2px solid rgba(255, 255, 255, 0.22); box-shadow: 0 5px 0 rgba(10, 38, 55, 0.4); overflow: hidden; }
.rGrid div { animation: rise .5s var(--ease) backwards; }
.rGrid div:nth-child(2) { animation-delay: .06s; } .rGrid div:nth-child(3) { animation-delay: .12s; }
.rGrid div:nth-child(4) { animation-delay: .18s; } .rGrid div:nth-child(5) { animation-delay: .24s; }
.rGrid span { color: rgba(225, 245, 245, 0.72); }
/* 触控：按钮按下反馈 + 摇杆更柔和 */
#touch .tBtn { transition: transform .08s, box-shadow .08s; }
#touch .tBtn:active, #touch .tBtn.on { transform: translateY(3px); }
/* 刘海/圆角安全区 */
@supports (padding: env(safe-area-inset-left)) {
    }
/* 小屏横屏：结算页缩放 */
@media (max-height: 500px) {
      .bn.small { font-size: 12.5px; padding: 5px 14px; }
}

/* ===== 手机横屏：更大的按键热区 + 可收起小地图 ===== */
body.touch.hud2 .tHx { width: calc(54px * var(--tz, 1)); height: calc(54px * var(--tz, 1)); }
body.touch.hud2 #tHm { right: calc(186px * var(--tz, 1)); bottom: calc(145px * var(--tz, 1)); }
body.touch.hud2 #tHd { right: calc(121px * var(--tz, 1)); bottom: calc(203px * var(--tz, 1)); }
body.touch.hud2 #tGad { width: calc(60px * var(--tz, 1)); height: calc(60px * var(--tz, 1)); right: calc(210px * var(--tz, 1)); bottom: calc(67px * var(--tz, 1)); }
body.touch.hud2 #tThrow { width: calc(62px * var(--tz, 1)); height: calc(62px * var(--tz, 1)); right: calc(45px * var(--tz, 1)); bottom: calc(139px * var(--tz, 1)); }
body.touch.hud2 #tThrow2 { width: calc(60px * var(--tz, 1)); height: calc(60px * var(--tz, 1)); right: calc(210px * var(--tz, 1)); bottom: calc(67px * var(--tz, 1)); }
body.touch.hud2 .tBagBtn { width: calc(46px * var(--tz, 1)); height: calc(46px * var(--tz, 1)); top: 8px; }
body.touch.hud2 .tBagBtn .ic { width: calc(25px * var(--tz, 1)); height: calc(25px * var(--tz, 1)); }
body.touch.hud2 :is(#tThrow, #tThrow2, #tGad, .tHx) .n { min-width: calc(20px * var(--tz, 1)); height: calc(20px * var(--tz, 1)); line-height: calc(20px * var(--tz, 1)); font-size: calc(11.5px * var(--tz, 1)); }
#mmToggle { display: none; }
body.touch #mmToggle { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 4; padding: 0; cursor: var(--cur-hand); -webkit-tap-highlight-color: transparent;
  width: calc(30px * var(--tz, 1)); height: calc(30px * var(--tz, 1)); right: calc(20px * var(--zh, 1) + 112px * var(--tz, 1) - 18px); top: calc(18px * var(--zh, 1) + 112px * var(--tz, 1) - 18px);
  }
body.touch #mmToggle::before { content: ""; position: absolute; inset: -8px; }
body.touch #mmToggle b { width: 9px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translate(-1px, -1px) rotate(-135deg); }
body.touch.mmMin #mmWrap { display: none; }
body.touch.mmMin #mmToggle { width: calc(44px * var(--tz, 1)); height: calc(44px * var(--tz, 1)); right: calc(20px * var(--zh, 1)); top: 10px; border-radius: 14px; }
body.touch.mmMin #mmToggle b { width: 18px; height: 18px; border: 2.5px solid #fff; border-radius: 4px; transform: none; background: linear-gradient(90deg, transparent 45%, #fff 45%, #fff 58%, transparent 58%); }
body.touch.hud2 #tPause { width: calc(46px * var(--tz, 1)); height: calc(46px * var(--tz, 1)); top: 8px; }

/* ===== 升级强化（三选一） ===== */
#perkRow { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 0; }
#perkBtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font: 800 12.5px var(--font); letter-spacing: .06em; cursor: var(--cur-hand);
  -webkit-tap-highlight-color: transparent; }
#perkBtn b { font: 800 13px var(--num); }
#perkBtn.hidden { display: none; }
#perkBtn kbd { padding: 1px 5px; border: none; border-radius: 2px; background: #10141c; color: #ffd400; font: 900 11px/1.2 var(--font); }
body.touch #perkBtn kbd { display: none; }
/* 打架时攒到的秘符先不弹面板，按钮闪得更急，等脱战再自动打开 */
#perkBtn.want { animation-duration: .6s !important; }
@keyframes perkGlow { 50% { box-shadow: 0 3px 0 #df8a57, 0 0 26px rgba(255, 210, 100, 1); transform: translateY(-1px); } }
#perkOwned { display: flex; flex-wrap: wrap; gap: 4px; }
#perkOwned i { position: relative; width: 24px; height: 24px; display: grid; place-items: center; font-style: normal; font-size: 14px; border-radius: 8px; background: rgba(16, 44, 62, 0.75); box-shadow: inset 0 0 0 1.5px var(--rc); }
#perkOwned sub { position: absolute; right: -4px; bottom: -4px; font: 700 9.5px/1 var(--num); color: #fff; background: #0a1019; border-radius: 6px; padding: 1px 3px; }
#perkPanel { position: absolute; left: 50%; top: 13%; z-index: 30; pointer-events: auto; padding: 14px 16px 16px; 
  animation: rise .35s var(--ease); }
#perkPanel.hidden { display: none; }
.ppHead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ppTitle { font: 900 17px var(--font); letter-spacing: .1em; }
.ppSub { font-size: 11.5px; flex: 1; }
#ppClose { padding: 5px 12px; font: 700 12px var(--font); cursor: var(--cur-hand); }
.ppCards { display: flex; gap: 12px; }
.ppCard { position: relative; width: 168px; min-height: 176px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px 14px; cursor: var(--cur-hand); text-align: center;
  border-radius: 18px; border: 3px solid var(--rc); color: #2f4757; font-family: var(--font); background: linear-gradient(180deg, #fffdf4, #f1ead6);
  box-shadow: 0 5px 0 rgba(12, 42, 59, 0.55), 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent); transition: transform .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.ppCard:hover { transform: translateY(-4px); }
.ppCard:active, .ppCard.picked { transform: translateY(3px); box-shadow: 0 2px 0 rgba(12, 42, 59, 0.55); }
.ppCard .ppKey { position: absolute; left: 8px; top: 6px; font: 800 12px var(--num); color: #fff; background: var(--rc); border-radius: 7px; padding: 1px 6px; }
.ppCard .ppIc { width: 54px; height: 54px; display: grid; place-items: center; font-size: 30px; border-radius: 50%; background: color-mix(in srgb, var(--rc) 25%, #fff); box-shadow: inset 0 0 0 2px var(--rc); }
.ppCard b { font: 900 17px var(--font); letter-spacing: .06em; color: #24394a; }
.ppCard .ppCat { font-size: 10.5px; font-weight: 700; color: var(--rc); filter: brightness(.75); letter-spacing: .06em; }
.ppCard .ppDesc { font-size: 12px; line-height: 1.45; color: #4a5f6c; }
body.touch #perkPanel { top: calc(8px + env(safe-area-inset-top)); padding: 10px 12px 12px; max-width: calc(calc(100 * var(--vw, 1vw)) - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
body.touch .ppCard .ppKey { display: none; }
@media (max-height: 500px) {
    .ppHead { margin-bottom: 8px; } .ppTitle { font-size: 14px; }
  .ppCard { width: 150px; min-height: 0; padding: 10px 10px 10px; gap: 4px; }
  .ppCard .ppIc { width: 42px; height: 42px; font-size: 23px; }
  .ppCard b { font-size: 15px; } .ppCard .ppDesc { font-size: 11px; }
  #ppClose { padding: 8px 14px; }
}
body.touch.hud2 #perkRow { order: 4; }

/* ===== 强化卡稀有度：普通灰 / 稀有蓝 / 史诗紫 / 传奇金 ===== */
.ppCard.r0 { background: linear-gradient(180deg, #fbfcfd, #e6eaee); }
.ppCard.r1 { background: linear-gradient(180deg, #f6fbff, #dcecff); }
.ppCard.r2 { background: linear-gradient(180deg, #fbf6ff, #eadcff); border-width: 3.5px; }
.ppCard.r3 { background: linear-gradient(180deg, #fffaf0, #ffe7b3); border-width: 4px; overflow: hidden; animation: ppReveal .7s cubic-bezier(.2, 1.4, .4, 1) backwards, ppGlow 1.6s ease-in-out .7s infinite; }
.ppCard.r2 { animation: ppReveal .55s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.ppCard.r3::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); transform: skewX(-20deg); animation: ppShine 2.2s ease-in-out .8s infinite; pointer-events: none; }
.ppCard.r3 .ppIc { box-shadow: inset 0 0 0 2.5px var(--rc), 0 0 18px rgba(255, 190, 60, 0.9); }
.ppCard.r3 .ppCat, .ppCard.r2 .ppCat { filter: none; }
.ppCard .ppRar { position: absolute; right: 8px; top: 6px; font: 800 10.5px var(--font); letter-spacing: .1em; color: #fff; background: var(--rc); border-radius: 7px; padding: 2px 7px; }
.ppCard.r3 .ppRar { background: linear-gradient(90deg, #ffcf4a, #ff9d2e); box-shadow: 0 0 10px rgba(255, 180, 50, 0.9); }
@keyframes ppReveal { 0% { transform: rotateY(90deg) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ppGlow { 50% { box-shadow: 0 5px 0 rgba(12, 42, 59, 0.55), 0 0 34px rgba(255, 190, 60, 1); } }
@keyframes ppShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.ppCards .ppCard:nth-child(2) { animation-delay: .08s; } .ppCards .ppCard:nth-child(3) { animation-delay: .16s; }
#perkOwned i[data-r="3"] { box-shadow: inset 0 0 0 2px var(--rc), 0 0 8px rgba(255, 180, 50, 0.85); }
#perkOwned i[data-r="2"] { box-shadow: inset 0 0 0 2px var(--rc), 0 0 6px rgba(178, 107, 255, 0.7); }
#perkOwned i { background: color-mix(in srgb, var(--rc) 30%, rgba(16, 44, 62, 0.85)); }

/* ===== 套装 ===== */
.ppCard .ppSet { margin-top: auto; font: 800 11px var(--font); letter-spacing: .04em; color: #fff; padding: 3px 9px; border-radius: 99px; background: var(--sc); box-shadow: 0 2px 0 rgba(12, 42, 59, 0.35); }
.ppCard .ppSet.done { animation: setPulse .9s ease-in-out infinite; box-shadow: 0 0 12px var(--sc), 0 2px 0 rgba(12, 42, 59, 0.35); }
@keyframes setPulse { 50% { transform: scale(1.08); } }
#setBtn { padding: 4px 10px; font: 800 11.5px var(--font); letter-spacing: .08em; cursor: var(--cur-hand); -webkit-tap-highlight-color: transparent; }
body.touch #setBtn { padding: 7px 12px; }
#perkOwned i.set { width: 28px; height: 28px; font-size: 16px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 10px var(--rc), inset 0 0 0 2px #fff; animation: setPulse 1.6s ease-in-out infinite; }
#setBanner { position: absolute; left: 0; right: 0; top: 30%; z-index: 31; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 20px;
  color: #fff; }
#setBanner.hidden { display: none; }
#setBanner.show { animation: sbIn 3.6s ease forwards; }
#setBanner .sbIc { font-size: 50px; filter: drop-shadow(0 0 14px #fff); animation: sbIc 3.6s ease forwards; }
#setBanner small { display: block; font: 800 12px var(--font); letter-spacing: .4em; opacity: .9; }
#setBanner b { display: block; font: 900 34px var(--font); letter-spacing: .16em; }
#setBanner span { display: block; font-size: 13px; max-width: 520px; opacity: .95; }
@keyframes sbIn { 0% { opacity: 0; transform: scaleY(0.2); } 8% { opacity: 1; transform: scaleY(1.08); } 12% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes sbIc { 0% { transform: scale(0) rotate(-90deg); } 15% { transform: scale(1.3) rotate(10deg); } 22%, 100% { transform: none; } }
#setPanel { position: absolute; left: 50%; top: 50%; z-index: 32; pointer-events: auto; width: min(720px, calc(calc(100 * var(--vw, 1vw)) - 24px)); max-height: calc(calc(100 * var(--vh, 1vh)) - 24px); overflow: auto; padding: 14px 16px 16px; 
  }
#setPanel.hidden { display: none; }
#spClose { padding: 7px 14px; font: 700 12px var(--font); cursor: var(--cur-hand); }
#spList { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spRow { padding: 9px 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); border: 2.5px solid color-mix(in srgb, var(--sc) 55%, #fff); color: #2f4757; }
.spRow.on { border-color: var(--sc); box-shadow: 0 0 14px var(--sc); background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--sc) 18%, #fff)); }
.spName { display: flex; align-items: center; gap: 6px; }
.spName b { font: 900 15px var(--font); color: #24394a; }
.spName em { margin-left: auto; font: 800 11px var(--font); font-style: normal; color: #fff; background: var(--sc); border-radius: 8px; padding: 1px 7px; }
.spIc { font-size: 18px; }
.spCards { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.spCard { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 8px; border: 1.5px dashed var(--rc); color: #8796a1; }
.spCard.has { border-style: solid; color: #24394a; background: color-mix(in srgb, var(--rc) 22%, #fff); }
.spDesc { font-size: 11.5px; line-height: 1.4; color: #4a5f6c; }
@media (max-height: 500px) {
  #setBanner { top: 26%; padding: 10px 16px; } #setBanner b { font-size: 26px; } #setBanner .sbIc { font-size: 38px; }
  #spList { gap: 6px; } .spRow { padding: 6px 9px; } .spDesc { font-size: 10.5px; }
}



/* --- 面板通用 --- */







/* --- 倒计时 --- */










/* --- 小地图 --- */





/* --- 状态面板 --- */



















/* --- 顶部按钮：背包 / 暂停 --- */


/* --- 糖果圆按钮 --- */














/* --- 升级 / 套装面板 --- */









/* 手机：地点/天气小条原来被状态面板压住，挪到计数旁边同一行 */
body.touch.hud2 #tl { flex-wrap: nowrap !important; align-items: center !important; }
body.touch.hud2 #tl .meta { padding: 4px 9px !important; font-size: 11px; white-space: nowrap; }
body.touch.hud2 #tl { gap: 6px !important; max-width: none !important; } body.touch.hud2 #tl .meta { flex-basis: auto !important; margin-top: 0 !important; } body.touch.hud2 #tl .meta .sep { margin: 0 4px; }
#tl .stat .lbl { white-space: nowrap; }


#boostBar.empty { display: none !important; }

/* ===== 竞技科技：变量 + 全局一致性打磨 ===== */
:root { --es-bg: rgba(8, 12, 18, .82); --es-bg2: rgba(14, 20, 30, .62); --es-y: #ffd400; --es-c: #00e5ff; --es-r: #ff3b47; --es-mut: #8fa3b8;
  --es-num: "Bahnschrift", "DIN Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --es-cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
/* 倒计时紧急：红线 + 红字闪烁 */
#zoneBox.danger { background: linear-gradient(90deg, rgba(60, 8, 14, .85), rgba(30, 6, 10, .65)) !important; }
#zoneBox.danger #zoneTimer { animation: esBlink .8s steps(2) infinite; }
#zoneBox.danger #zoneTitle { color: var(--es-r) !important; }
#zoneBox.danger #zoneBar i { background: var(--es-r) !important; }
@keyframes esBlink { 50% { opacity: .55; } }
/* 状态面板里的小图标 */
#perkOwned i { box-shadow: inset 0 0 0 1.5px var(--rc) !important; border: none !important; }
#perkOwned sub { background: var(--es-y) !important; color: #10141c !important; border-radius: 0 !important; }
#perkOwned i.set { border-radius: 0 !important; background: var(--rc) !important; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
#perkBtn { border-radius: 0 !important; border: none !important; background: var(--es-y) !important; color: #10141c !important; transform: skewX(-12deg); box-shadow: 0 0 14px rgba(255, 212, 0, .6) !important; animation: esPulse 1.2s ease-in-out infinite !important; }
@keyframes esPulse { 50% { box-shadow: 0 0 24px rgba(255, 212, 0, 1); } }
/* 动作按钮按下：黄环 + 缩小；冷却遮罩用深色 */
#touch .tBtn:active { border-color: var(--es-y) !important; transform: scale(.94); }
#touch .tBtn .cd { background: rgba(5, 8, 12, .62) !important; color: var(--es-y) !important; font-family: var(--es-num) !important; font-style: italic; }
#touch .tPick { background: var(--es-bg) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .45) !important; border-radius: 0 !important; box-shadow: none !important; }
#touch #tAtk { border-color: rgba(255, 212, 0, .75) !important; box-shadow: inset 0 0 0 3px rgba(255, 212, 0, .25) !important; }
#mmWrap .mmN { color: var(--es-y) !important; text-shadow: 0 1px 2px #000; }
#mmWrap .mmHint { background: var(--es-bg) !important; color: #fff !important; border-radius: 0 !important; }
/* 升级三选一：深色切角卡片，稀有度色条，传奇保留金色光 */
#perkPanel, #setPanel { border-left: none !important; border-top: 3px solid var(--es-y) !important; }
.ppCard { background: linear-gradient(180deg, rgba(26, 34, 48, .96), rgba(12, 17, 26, .96)) !important; border: 1.5px solid color-mix(in srgb, var(--rc) 70%, transparent) !important; border-top: 4px solid var(--rc) !important;
  clip-path: var(--es-cut); color: #dfe7ef !important; box-shadow: none !important; }
.ppCard b { color: #fff !important; letter-spacing: .1em; }
.ppCard .ppDesc { color: #b7c4d1 !important; }
.ppCard .ppCat { color: var(--rc) !important; filter: brightness(1.25) !important; }
.ppCard .ppIc { border-radius: 0 !important; background: color-mix(in srgb, var(--rc) 22%, #0c1119) !important; box-shadow: inset 0 0 0 1.5px var(--rc) !important; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ppCard .ppRar, .ppCard .ppKey { border-radius: 0 !important; transform: skewX(-12deg); }
.ppCard .ppSet { border-radius: 0 !important; transform: skewX(-10deg); box-shadow: none !important; }
.ppCard.r1 { background: linear-gradient(180deg, rgba(18, 38, 64, .96), rgba(10, 18, 30, .96)) !important; }
.ppCard.r2 { background: linear-gradient(180deg, rgba(40, 22, 64, .96), rgba(14, 12, 28, .96)) !important; }
.ppCard.r3 { background: linear-gradient(180deg, rgba(70, 50, 8, .96), rgba(22, 16, 6, .96)) !important; filter: drop-shadow(0 0 10px rgba(255, 190, 60, .85)); animation: ppReveal .7s cubic-bezier(.2, 1.4, .4, 1) backwards, esGold 1.6s ease-in-out .7s infinite !important; }
.ppCard.r3 b { color: #ffd76a !important; }
@keyframes esGold { 50% { filter: drop-shadow(0 0 20px rgba(255, 200, 70, 1)); } }
.ppCard:hover { transform: translateY(-3px); } .ppCard:active { transform: translateY(2px) scale(.98); }
/* 套装列表 */
.spRow { background: linear-gradient(90deg, rgba(20, 28, 40, .95), rgba(12, 17, 26, .9)) !important; border: none !important; border-left: 3px solid var(--sc) !important; border-radius: 0 !important; color: #c9d4de !important; clip-path: var(--es-cut); }
.spRow.on { background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 35%, #0c1119), rgba(12, 17, 26, .9)) !important; box-shadow: none !important; }
.spName b { color: #fff !important; letter-spacing: .08em; }
.spName em { border-radius: 0 !important; transform: skewX(-12deg); font-family: var(--es-num); font-style: italic !important; }
#spList * { text-shadow: none !important; }
#spList [class^="spC"], #spList span, #spList i { border-radius: 2px !important; }
/* 套装激活横幅 */
#setBanner { background: linear-gradient(90deg, transparent, rgba(8, 12, 18, .92) 15%, rgba(8, 12, 18, .92) 85%, transparent) !important; border-top: 2px solid var(--sc); border-bottom: 2px solid var(--sc); text-shadow: none !important; }
#setBanner b { font-style: italic; color: var(--es-y); letter-spacing: .2em; }
#setBanner small { color: var(--sc); filter: brightness(1.4); }
/* 提示、击杀信息、通知 */
#prompt, #spec, .toast { border-radius: 0 !important; clip-path: var(--es-cut); }
.fItem { border-radius: 0 !important; border-right: 2px solid var(--es-c); }
.fItem .k { color: var(--es-y) !important; }
.bn.gold { color: var(--es-y) !important; font-style: italic; }
/* ===== 过场动画 ===== */
#cine { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.cn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* 大厅 → 对局：斜切擦除 */
.cnWipe i { position: absolute; top: -20%; bottom: -20%; width: 70%; left: -90%; transform: skewX(-18deg); animation: cnSweep 1.3s cubic-bezier(.6, 0, .35, 1) forwards; }
.cnWipe .w1 { background: #0b1018; width: 120%; } .cnWipe .w2 { background: var(--es-y); width: 26%; animation-delay: .1s; z-index: 1; } .cnWipe .w3 { background: var(--es-c); width: 7%; animation-delay: .18s; z-index: 1; }
.cnWipe b { position: relative; font: 900 italic 64px var(--es-num); color: #fff; letter-spacing: .2em; opacity: 0; animation: cnWord 1.3s ease forwards; z-index: 2; }
@keyframes cnSweep { 0% { left: -130%; } 45% { left: -10%; } 100% { left: 150%; } }
@keyframes cnWord { 0%, 30% { opacity: 0; transform: scale(1.4); } 45%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(60px); } }
/* 开局卡片 */
.cnIntro { align-items: flex-start; padding-top: calc(12 * var(--vh, 1vh)); }
.ciCard { min-width: 340px; padding: 14px 26px 16px; background: linear-gradient(90deg, rgba(8, 12, 18, .92), rgba(14, 20, 30, .8)); border-left: 4px solid var(--es-y); border-top: 2px solid var(--es-c);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); color: #fff; animation: ciIn 3s cubic-bezier(.2, 1, .3, 1) forwards; }
.ciCard small { display: block; font: 800 11px var(--font); letter-spacing: .3em; color: var(--es-c); }
.ciCard > b { display: block; font: 900 italic 38px/1.1 var(--es-num); letter-spacing: .14em; margin: 4px 0 8px; }
.ciRow { display: flex; gap: 22px; font-size: 11px; color: var(--es-mut); letter-spacing: .1em; }
.ciRow em { display: block; font: 800 italic 20px var(--es-num); color: var(--es-y); font-style: italic; letter-spacing: .04em; }
@keyframes ciIn { 0% { transform: translateX(-120vw) skewX(-12deg); } 14% { transform: translateX(12px) skewX(-4deg); } 20% { transform: none; } 82% { transform: none; opacity: 1; } 100% { transform: translateX(calc(120 * var(--vw, 1vw))) skewX(-12deg); opacity: 0; } }
/* 3-2-1-GO */
.cnCount b { font: 900 italic 120px var(--es-num); color: #fff; text-shadow: 6px 6px 0 rgba(0, 0, 0, .45), 0 0 30px rgba(0, 229, 255, .7); -webkit-text-stroke: 3px #0b1018; paint-order: stroke fill; animation: ccPop .8s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.cnCount.go b { color: var(--es-y); font-size: 140px; text-shadow: 6px 6px 0 rgba(0, 0, 0, .45), 0 0 40px rgba(255, 212, 0, .9); }
.cnCount.go::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 245, 200, .55), transparent 60%); animation: ccFlash .5s ease-out forwards; }
@keyframes ccPop { 0% { transform: scale(2.6); opacity: 0; } 25% { transform: scale(.92); opacity: 1; } 40% { transform: scale(1); } 75% { opacity: 1; } 100% { transform: scale(.7) translateY(-20px); opacity: 0; } }
@keyframes ccFlash { from { opacity: 1; } to { opacity: 0; } }
/* 跳伞 / 着陆 印章 */
.cnStamp { flex-direction: column; justify-content: flex-start; padding-top: calc(22 * var(--vh, 1vh)); }
.cnStamp b { padding: 4px 30px; font: 900 italic 44px var(--es-num); letter-spacing: .3em; color: #10141c; background: var(--es-y); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); animation: stIn 1.5s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.cnStamp.cy b { background: var(--es-c); }
.cnStamp small { margin-top: 6px; font: 800 12px var(--font); letter-spacing: .5em; color: #fff; text-shadow: 0 1px 3px #000; animation: stIn 1.5s .05s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes stIn { 0% { transform: scale(1.8) skewX(-12deg); opacity: 0; } 18% { transform: scale(1) skewX(-12deg); opacity: 1; } 75% { opacity: 1; transform: skewX(-12deg); } 100% { opacity: 0; transform: translateY(-16px) skewX(-12deg); } }
body.touch .cnCount b { font-size: 92px; } body.touch .cnCount.go b { font-size: 108px; } body.touch .ciCard > b { font-size: 30px; } body.touch .cnStamp b { font-size: 34px; } body.touch .cnStamp { padding-top: calc(16 * var(--vh, 1vh)); }
.cn.rm *, .cn.rm::before { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
.cn.rm .ciCard, .cn.rm b, .cn.rm small { opacity: 1; transform: none !important; }
.cn.rm.cnWipe { display: none; }
/* ===== 背包 / 武器栏：竞技风 ===== */
#tPack { background: rgba(3, 6, 10, .55) !important; }
.packSheet { background: linear-gradient(180deg, rgba(10, 14, 22, .97), rgba(6, 9, 14, .97)) !important; border: none !important; border-top: 3px solid var(--es-y) !important; border-radius: 0 !important; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); box-shadow: none !important; }
.packSheet header small { color: var(--es-c) !important; }
.packSheet header b { font-style: italic; letter-spacing: .2em; }
.packClose { border-radius: 0 !important; background: var(--es-y) !important; color: #10141c !important; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); min-width: 44px; min-height: 44px; }
.packBody h3 { color: var(--es-y) !important; border-left: 3px solid var(--es-y); padding-left: 7px; font-style: italic; }
.packItem { border-radius: 0 !important; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)) !important; box-shadow: inset 2px 0 0 rgba(255, 255, 255, .25) !important; clip-path: var(--es-cut); }
.packItem.sel { box-shadow: inset 3px 0 0 var(--es-y), inset 0 0 0 1px rgba(255, 212, 0, .5) !important; background: rgba(255, 212, 0, .08) !important; }
.packItem button, .pkRow button { border-radius: 0 !important; }
.pkRow button { min-height: 34px; }
.packWeapon { border-radius: 0 !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-left: 3px solid var(--es-c) !important; }
.wCard { grid-column: span 1; position: relative; display: flex; gap: 10px; align-items: center; min-height: 74px; padding: 8px 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 18%, #0c1119), rgba(12, 17, 26, .9));
  border-left: 4px solid var(--rc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent); clip-path: var(--es-cut); color: #dfe7ef; }
.wCard.on::after { content: "当前"; position: absolute; right: 8px; top: 6px; font: 900 10px var(--font); color: #10141c; background: var(--es-y); padding: 1px 6px; transform: skewX(-12deg); }
.wCard canvas { width: 72px; height: 48px; flex: 0 0 72px; }
.wcMain { min-width: 0; flex: 1; }
.wcTop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wcTop em { font: 900 10px var(--font); font-style: normal; color: #10141c; background: var(--rc); padding: 1px 6px; transform: skewX(-12deg); }
.wcTop b { font: 900 italic 15px var(--font); color: #fff; letter-spacing: .06em; }
.wcStar { font-style: normal; color: var(--es-y); font-size: 13px; letter-spacing: 1px; text-shadow: 0 0 6px rgba(255, 212, 0, .6); }
.wcTags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.wcTags span { font: 800 10.5px var(--font); color: var(--es-c); border: 1px solid rgba(0, 229, 255, .45); padding: 1px 6px; background: rgba(0, 229, 255, .08); }
.wcTags span.wLg { color: #ffd76a; border-color: rgba(255, 200, 70, .7); background: rgba(255, 190, 60, .12); }
.wCard small { display: block; margin-top: 4px; font-size: 10px; color: var(--es-mut); }
.slot.rar { box-shadow: inset 0 -3px 0 var(--rc), inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent) !important; }
.slot.on { border-color: var(--es-y) !important; background: rgba(255, 212, 0, .1) !important; }
.slot .key { color: var(--es-y) !important; font-style: italic; }
/* ===== 击败卡片 ===== */
.kCard { align-items: flex-start; padding-top: calc(30 * var(--vh, 1vh)); }
.kcIn { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 10px; background: linear-gradient(90deg, rgba(8, 12, 18, .94), rgba(14, 20, 30, .85)); border-left: 4px solid var(--es-r); border-bottom: 2px solid var(--es-y);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); animation: kcIn 2.3s cubic-bezier(.2, 1.3, .4, 1) forwards; color: #fff; }
.kcX { display: grid; place-items: center; width: 40px; height: 40px; font-style: normal; font-size: 22px; font-weight: 900; color: #fff; background: var(--es-r); transform: skewX(-10deg); }
.kcIn small { display: block; font: 800 10px var(--font); letter-spacing: .25em; color: var(--es-r); }
.kcIn b { display: block; font: 900 italic 22px var(--font); letter-spacing: .06em; }
.kcIn span { font-size: 11px; color: var(--es-mut); }
.kcIn .kcR { display: block; margin-top: 3px; font: 800 11px var(--font); font-style: normal; color: #ffd84a; white-space: nowrap; }
.kcIn em { font-style: normal; text-align: center; font-size: 10px; color: var(--es-mut); border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 12px; }
.kcIn strong { display: block; font: 900 italic 30px/1 var(--es-num); color: var(--es-y); }
@keyframes kcIn { 0% { transform: translateX(-40px) scale(1.3); opacity: 0; } 12% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
body.touch .kCard { padding-top: calc(24 * var(--vh, 1vh)); } body.touch .kcIn b { font-size: 18px; }
/* ===== 缩圈前最后 10 秒 ===== */
#zWarn { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#zWarn.hidden { display: none; }
.zwEdge { position: absolute; inset: 0; box-shadow: inset 0 0 70px 18px rgba(255, 40, 60, .55); animation: zwPulse 1s ease-in-out infinite; }
.zwBox { position: absolute; left: 50%; top: calc(96px * var(--zh, 1)); transform: translateX(-50%); text-align: center; }
.zwBox small { display: inline-block; padding: 3px 14px; font: 900 11px var(--font); letter-spacing: .25em; color: #fff; background: var(--es-r); transform: skewX(-12deg); }
.zwBox b { display: block; font: 900 italic 64px/1 var(--es-num); color: #fff; -webkit-text-stroke: 2px #3a0008; paint-order: stroke fill; text-shadow: 0 0 18px rgba(255, 40, 60, .9); margin-top: 4px; }
#zWarn.tick b { animation: zwTick .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes zwPulse { 50% { box-shadow: inset 0 0 40px 6px rgba(255, 40, 60, .25); } }
@keyframes zwTick { 0% { transform: scale(1.6); color: #ff3b47; } 100% { transform: none; } }
body.touch .zwBox { top: 86px; } body.touch .zwBox b { font-size: 46px; }
body.calm .zwEdge, body.calm #zWarn.tick b { animation: none; }
@media (prefers-reduced-motion: reduce) { .zwEdge, #zWarn.tick b, .kcIn { animation: none !important; } }
.wcTags span { white-space: nowrap; flex: none; } .wcTags span::before, .wcTags span::after { content: none !important; display: none !important; }
/* ===== 手机武器键：品质边框 + 当前武器高亮 ===== */
body.touch.hud2 #tSwap { width: calc(58px * var(--tz, 1)); height: calc(58px * var(--tz, 1)); right: calc(256px * var(--tz, 1)); }
body.touch.hud2 #tSwap.wq { border-radius: 0 !important; background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 22%, rgba(10, 14, 22, .82)), rgba(8, 11, 18, .82)) !important;
  border: 2px solid var(--rc) !important; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: none !important; }
body.touch.hud2 #tSwap.wq::after { content: "⇄"; position: absolute; left: 4px; top: 1px; font: 900 11px var(--font); color: var(--es-y); }
body.touch.hud2 #tSwap.wq .nm { color: #fff !important; font-style: italic; font-weight: 900; }
body.touch.hud2 #tAtk.wq { border: 3px solid var(--rc) !important; outline: 2px solid var(--es-y); outline-offset: 3px; box-shadow: 0 0 0 3px rgba(255, 212, 0, .85), 0 0 18px color-mix(in srgb, var(--rc) 60%, transparent) !important; }
/* 击败卡片放在画面下方、底部面板上面：不挡人物和身边的对手，也不和顶上的缩圈警告抢位置 */
.kCard { align-items: flex-end !important; padding-top: 0 !important; padding-bottom: calc(205px * var(--zh, 1)); }
body.touch .kCard { padding-top: 0 !important; padding-bottom: calc(3 * var(--vh, 1vh)); }
/* ===== 能量条（HP 下方） ===== */
.enRow { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.enRow span { font: 900 10px var(--font); color: var(--es-c); letter-spacing: .1em; width: 30px; font-style: italic; }
.enRow b { font: 900 italic 12px var(--es-num); color: #dff9ff; width: 26px; text-align: right; }
#enBar { position: relative; flex: 1; height: 7px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .3); transform: skewX(-18deg); overflow: hidden; }
#enFill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #00b8d9, var(--es-c)); box-shadow: 0 0 8px rgba(0, 229, 255, .7); transition: width .08s linear;
  background-image: linear-gradient(90deg, #00b8d9, var(--es-c)), repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .35) 9px 10px); background-blend-mode: multiply; }
.enRow.low span, .enRow.low b { color: var(--es-r); }
.enRow.low #enFill { background: linear-gradient(90deg, #b3121d, var(--es-r)); box-shadow: 0 0 8px rgba(255, 59, 71, .7); }
.enRow.out #enBar { animation: enOut .25s steps(2) infinite; }
@keyframes enOut { 50% { box-shadow: inset 0 0 0 2px var(--es-r), 0 0 10px var(--es-r); } }
body.touch .enRow { margin-top: 3px; } body.touch #enBar { height: 6px; } body.touch .enRow span { font-size: 9px; width: 26px; }
body.calm .enRow.out #enBar { animation: none; box-shadow: inset 0 0 0 2px var(--es-r); }
/* 游戏说明里只对某一种打法成立的句子 */
body.classic .onlyStd, body:not(.classic) .onlyClassic { display: none; }
/* ===== 技能键：竞技风 + 冷却环 ===== */
body.touch #tSkill { --cdk: 0; background: radial-gradient(circle, rgba(16, 22, 34, .9) 58%, rgba(8, 12, 20, .9) 60%) !important; border: 2px solid var(--es-y) !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 12px rgba(255, 212, 0, .35) !important; }
body.touch #tSkill::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(6, 10, 20, .78) calc(var(--cdk) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px)); mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px)); }
body.touch #tSkill::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; border: 3px solid var(--es-c); opacity: .9; }
body.touch #tSkill.cdn { border-color: rgba(255, 255, 255, .25) !important; box-shadow: none !important; }
body.touch #tSkill.cdn::before { border-color: rgba(0, 229, 255, .35); }
body.touch #tSkill .sk { font-style: italic; font-weight: 900; color: var(--es-y); letter-spacing: .04em; }
body.touch #tSkill.cdn .sk { color: rgba(255, 255, 255, .5); }
body.touch #tSkill .cd { font: 900 italic 20px var(--es-num); color: #fff; text-shadow: 0 0 6px #000; }
body.touch #tSkill.noen { border-color: var(--es-r) !important; }
body.touch #tSkill.noen::before { border-color: var(--es-r); }
/* ===== 原作打法：固定格子背包 ===== */
.cSlots { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin: 2px 0 6px; }
.csRow { display: flex; align-items: stretch; gap: 8px; }
.csLab { width: 58px; flex: none; display: flex; flex-direction: column; justify-content: center; font: 900 italic 12px var(--font); color: var(--es-y); border-left: 3px solid var(--es-y); padding-left: 6px; }
.csLab b { font: 900 italic 18px var(--es-num); color: #fff; }
.cSlots.full .csLab b { color: var(--es-r); }
.cs { position: relative; flex: 1 1 0; min-width: 0; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, #101622), rgba(10, 14, 22, .92)); border: 2px solid var(--rc); clip-path: var(--es-cut); }
.cs.g { flex: 0 1 150px; }
.cs canvas { width: 40px; height: 40px; }
.cs b { font: 800 11px var(--font); color: #eef3f8; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cs small { font: 800 10px var(--font); color: var(--es-c); }
.cs em { position: absolute; right: 6px; top: 4px; font: 900 italic 15px var(--es-num); color: var(--es-y); text-shadow: 0 1px 0 #000; }
.cs.empty { background: rgba(255, 255, 255, .025); border: 2px dashed rgba(255, 255, 255, .22); }
.cs.empty i { font-style: normal; font: 900 13px var(--font); color: rgba(255, 255, 255, .3); }
.cs.empty b { color: rgba(255, 255, 255, .35); }
.cs.sel { box-shadow: inset 0 0 0 2px var(--es-y), 0 0 10px rgba(255, 212, 0, .35); }
.cSlots.full .csItems .cs:not(.empty) { border-color: color-mix(in srgb, var(--rc) 60%, var(--es-r)); }
.csFull { font: 800 11px var(--font); color: #fff; background: linear-gradient(90deg, rgba(255, 59, 71, .85), rgba(255, 59, 71, .15)); padding: 4px 10px; transform: skewX(-10deg); }
body.touch .cs { min-height: 64px; } body.touch .cs canvas { width: 34px; height: 34px; } body.touch .csLab { width: 50px; }

/* 头盔/战术服等级角标 */
.cSlots .cs { position: relative; }
.cSlots .cs .lvB { position: absolute; top: 4px; left: 4px; text-decoration: none; font: 900 15px/1 "PingFang SC","Microsoft YaHei",sans-serif; padding: 4px 8px 4px 6px; color: #10141c; background: #ffd400; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); letter-spacing: .5px; }
.cSlots .cs .lvB.l1 { background: #c9d1dc; }
.cSlots .cs .lvB.l2 { background: #4fd2ff; }
.cSlots .cs .lvB.l3 { background: #ffd400; }
/* ===== 异能：大厅里的选择面板（和外观抽屉同一个位置）、对局里的异能键 ===== */
.siBtns { display: flex; gap: 8px; flex-wrap: wrap; }
#btnAbility .abIc { font-size: 16px; line-height: 1; margin-right: 6px; }
#abPanel { position: absolute; right: 56px; top: 196px; bottom: 44px; width: 372px; z-index: 6; padding: 22px 24px; overflow-y: auto; animation: drawer .32s var(--ease); zoom: var(--zm, 1); }
#menu #abPanel { right: 56px; top: 203px; width: 380px; }
body.touch #abPanel { top: 150px; bottom: 24px; }
.abNote { margin: -4px 0 12px; font-size: 12px; line-height: 1.6; color: #5f8890; font-weight: 700; }
.abNote kbd { padding: 0 6px; border: 2px solid #c9e0d7; border-radius: 6px; background: #fff; color: #2c667a; font: 800 11px/1.5 var(--font); }
#abList { display: flex; flex-direction: column; gap: 8px; }
.abItem { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 2px solid #d5e6db; border-radius: 14px; background: #fff; color: #294c61; font: inherit; text-align: left; cursor: var(--cur-hand); transition: border-color .15s, background .15s; }
.abItem:hover { border-color: #b4d6c8; }
.abItem.on { border-color: #ffc263; background: #fff6dc; box-shadow: 0 3px 0 #f0c27d; }
.abItem i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--ac) 24%, #fff); font-size: 22px; font-style: normal; }
.abItem b { display: block; font-size: 15px; font-weight: 900; }
.abItem em { margin-left: 8px; font-size: 11px; font-style: normal; font-weight: 700; color: #7c9ba0; }
.abItem span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: #4d6f78; }
/* 对局里（电脑）：血条面板右下角，和护甲格同一行 */
#abHud { --cdk: 0; --ac: #ffd400; position: absolute; right: 16px; bottom: 12px; height: 38px; min-width: 88px; padding: 0 10px 0 8px; display: flex; align-items: center; gap: 6px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28); border-left: 3px solid var(--ac); background: rgba(10, 14, 20, .6); color: #fff; }
#abHud .ic { font-size: 19px; font-style: normal; line-height: 1; }
#abHud .nm { font-size: 13px; font-weight: 800; letter-spacing: .08em; }
#abHud kbd { margin-left: auto; padding: 1px 5px; border: 1px solid rgba(255, 212, 0, .7); color: #ffd400; font: 800 11px/1.2 var(--font); }
#abHud::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cdk) * 100%); background: rgba(3, 6, 12, .7); pointer-events: none; }
#abHud .cd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 1; font: 900 italic 17px var(--es-num, sans-serif); text-shadow: 0 0 5px #000; }
#abHud .cd:empty { display: none; }
#abHud.cdn kbd, #abHud.act kbd { visibility: hidden; }
#abHud.act { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac), 0 0 12px color-mix(in srgb, var(--ac) 55%, transparent); }
#abHud.act .cd { color: var(--ac); }
body.touch #abHud, #hud.sky #abHud { display: none; }
/* 手机：技能键左上方的小圆键，冷却环同技能键 */
#tAb { --cdk: 0; --ac: #ffd400; width: calc(50px * var(--tz, 1)); height: calc(50px * var(--tz, 1)); right: calc(262px * var(--tz, 1)); bottom: calc(138px * var(--tz, 1)); }
body.touch #tAb { border-color: var(--ac) !important; }
body.touch #tAb::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(6, 10, 20, .78) calc(var(--cdk) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px)); mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px)); }
#tAb .ic { font-size: calc(21px * var(--tz, 1)); font-style: normal; line-height: 1; }
#tAb .cd { font-size: calc(16px * var(--tz, 1)); }
body.touch #tAb.cdn { border-color: rgba(255, 255, 255, .3) !important; }
body.touch #tAb.act { box-shadow: 0 0 0 3px var(--ac), 0 0 14px var(--ac) !important; }
body.touch #tAb.act .cd { background: rgba(5, 8, 14, .35); color: var(--ac); }
/* 结算：下一个目标 */
.rGoal { margin: 10px 0 14px; padding: 8px 12px; border-left: 3px solid var(--acc, #ffd400); background: rgba(10,14,24,.55); font-size: 13px; line-height: 1.55; color: #c9d3e0; }
.rGoal b { color: #ffd400; font-weight: 800; }
.rHero { flex-wrap: nowrap; } .rHero .rPlace { flex: none; white-space: nowrap; } .rHeroText { min-width: 0; }

/* ===== P0-3 手机字号下限 10px（实际像素 = font-size × 祖先 zoom × transform）===== */
/* 触屏按键名：#touch 没有缩放，直接给 10.5px */
body.touch #touch .tBtn .nm { font-size: 10.5px; }
/* 局内 HUD 在 zoom: var(--zh) 下面：最小 10.4px ÷ --zh */
body.touch #tl .stat .lbl, body.touch #tl .meta span, body.touch #zoneTitle, body.touch .lvTag, body.touch #lvXp,
body.touch #setBtn, body.touch #enRow > span, body.touch #enText, body.touch #gear .gearIt .lv { font-size: calc(10.4px / var(--zh, 1)); }
/* 结算卡在手机上铺满：去掉小屏 scale(.78)，固定 zoom .8，宽度占满一屏 */
body.touch #results .rInner { --rz: .8; zoom: var(--rz); transform: none; width: calc(calc(100 * var(--vw, 1vw)) / var(--rz) - 28px); max-height: calc(calc(100 * var(--vh, 1vh)) / var(--rz) - 10px); overflow-y: auto; padding: 12px 30px 14px; box-sizing: border-box; }
body.touch #results .kicker, body.touch .rGrid span, body.touch #rBreak, body.touch .rBtns .btn small { font-size: 13px; }
body.touch #rSub, body.touch .rGoal { font-size: 14px; }
body.touch .rBtns .btn, body.touch .rBtns .btn span { font-size: 16px; }
body.touch .rHero { margin: 4px 0 8px; gap: 20px; align-items: center; }
body.touch .rPlace { font-size: 78px; }
body.touch .rPlace small { font-size: 24px; }
body.touch .rGrid { margin-bottom: 8px; }
body.touch .rGrid div { padding: 7px 0 7px 14px; }
body.touch .rGrid b { font-size: 24px; }
body.touch .rGrid span { margin-top: 4px; letter-spacing: .1em; }
body.touch .rRank { padding-top: 8px; padding-bottom: 8px; }
body.touch #rRankCv { width: 60px; height: 60px; }
body.touch .rGoal { margin: 8px 0 10px; padding: 6px 12px; }
body.touch.hud2 .lvTag, body.touch.hud2 #lvXp { font-size: calc(10.4px / var(--zh, 1)); }
body.touch.hud2 .lvTag { width: auto; }
body.touch #enRow > span { white-space: nowrap; flex: none; }
body.touch .rRank { margin-bottom: 0; }
body.touch .rGoal { margin: 6px 0 8px; }
body.touch .rBtns .btn.big { padding-top: 6px; padding-bottom: 6px; }

/* ===== 竖屏转横屏（js/rotate.js） ===== */
.rotGo { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 220px; padding: 14px 30px 12px; border: 0; background: var(--es-y, #ffd400); color: #10141c; font: 900 22px/1 var(--font); letter-spacing: .12em; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); box-shadow: 0 0 0 2px rgba(255,212,0,.35), 0 10px 30px rgba(255,212,0,.25); -webkit-tap-highlight-color: transparent; }
.rotGo small { font: 700 10px/1 var(--font); letter-spacing: .35em; opacity: .7; }
.rotGo:active { transform: translateY(2px); filter: brightness(.92); }
body.rot #app { inset: auto; top: 0; left: 0; width: var(--rh); height: var(--rw); transform-origin: 0 0; transform: translateX(var(--rw)) rotate(90deg); }
body.rot #rotateNote { display: none !important; }
/* 转过来以后，横屏的左边是竖屏的顶部（刘海），右边是底部（Home 条） */
@supports (padding: env(safe-area-inset-top)) {
  body.rot #touch { left: env(safe-area-inset-top); right: env(safe-area-inset-bottom); }
  body.rot #tl { margin-left: env(safe-area-inset-top); }
}
html:has(body.rot), body.rot { overflow: hidden; overscroll-behavior: none; }

/* ===== 跳伞大地图：航线 + 落点热度 + 物资等级 + 点击标落点 ===== */
#bigmap { background: rgba(3, 5, 9, .74); }
.bmRowWrap { display: flex; align-items: stretch; justify-content: center; gap: 0; }
#bigmapCv { border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: none; }
#bigmap.jump #bigmapCv { cursor: crosshair; touch-action: none; }
.bmSide { display: none; }
#bigmap.jump .bmSide { display: flex; flex-direction: column; gap: 8px; width: 236px; box-sizing: border-box; padding: 16px 16px 14px; text-align: left; color: #fff;
  border-left: 3px solid var(--es-y); background: linear-gradient(135deg, rgba(14, 20, 30, .96), rgba(6, 9, 14, .92)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.bmK { font: 700 10.5px/1 var(--es-num); letter-spacing: .28em; color: var(--es-c); }
.bmT { font-size: 17px; font-weight: 900; font-style: italic; letter-spacing: .1em; }
.bmMark { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: rgba(255, 255, 255, .05); border-left: 2px solid rgba(255, 255, 255, .25); font-size: 12px; color: var(--es-mut); line-height: 1.45; }
.bmMark b { font-size: 14px; color: #fff; }
.bmMark.on { border-left-color: var(--es-y); background: rgba(255, 212, 0, .08); }
.bmMark em, .bmRow em { font-style: normal; font-weight: 800; }
.bmL { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--es-mut); }
.bmL small { font-size: 10px; letter-spacing: .06em; font-weight: 400; margin-left: 4px; opacity: .8; }
.bmHot { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bmRow { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12.5px; background: rgba(255, 255, 255, .035); border-left: 2px solid transparent; cursor: var(--cur-hand); }
.bmRow:hover { background: rgba(255, 255, 255, .08); }
.bmRow.on { border-left-color: var(--es-y); background: rgba(255, 212, 0, .1); }
.bmRow.wild { cursor: var(--cur-arrow); opacity: .75; }
.bmRow .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmRow .st { color: var(--es-y); font-size: 11px; letter-spacing: -.05em; }
.bmRow .st i { font-style: normal; color: rgba(255, 255, 255, .18); }
.bmRow em { min-width: 34px; text-align: right; font-family: var(--es-num); font-style: italic; }
.h0 { color: #5fe08a; } .h1 { color: #ffd400; } .h2 { color: #ff9a2e; } .h3 { color: var(--es-r); }
.bmBtns { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bmBtns .btn { width: 100%; padding: 9px 10px; font-size: 13px; }
.bmBtns .btn.big { padding: 11px 10px; font-size: 15px; }
.bmB2 { display: flex; gap: 6px; } .bmB2 .btn { flex: 1; padding-left: 4px; padding-right: 4px; }
.jOnly { display: none !important; }
#bigmap.jump .jOnly { display: inline-flex !important; }
#bigmap.jump .nOnly { display: none !important; }
#bigmap.jump .bmClose { display: none !important; }
.lgHeat { border-radius: 50%; background: radial-gradient(circle, #ff4628, rgba(255, 140, 0, .25) 70%, transparent); }
.lgMark { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2.5px #ffd400; }
.lgReach { border-radius: 0; width: 18px; height: 10px; background: rgba(0, 229, 255, .22); }
.lgStar { color: #ffd400; font-size: 11px; letter-spacing: -.05em; }
/* 手机横屏：地图 + 侧栏并排，字号不小于 10px */
body.touch #bigmap.jump .bmSide { width: 210px; padding: 10px 12px; gap: 5px; }
body.touch .bmT { font-size: 14px; }
body.touch .bmMark { padding: 5px 8px; font-size: 10.5px; }
body.touch .bmMark b { font-size: 12px; }
body.touch .bmRow { padding: 3px 7px; font-size: 11px; }
body.touch .bmRow .st, body.touch .bmL, body.touch .bmL small, body.touch .bmK { font-size: 10px; }
body.touch .bmBtns .btn { padding: 6px 8px; font-size: 11.5px; }
body.touch .bmBtns .btn.big { padding: 8px 8px; font-size: 13px; }
body.touch #bigmap.jump .bmTip { margin-top: 6px; }
@media (max-height: 430px) {
  #bigmap.jump #bigmapCv { width: min(calc(84 * var(--vh, 1vh)), 820px); height: min(calc(84 * var(--vh, 1vh)), 820px); }
  #bigmap.jump .bmSide { max-height: min(calc(84 * var(--vh, 1vh)), 820px); }
}
/* 热度榜在矮屏上放不下时可以滑，底部淡出提示还有 */
@media (max-height: 430px) { .bmHot { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); padding-bottom: 8px; } }

/* ===== SKYDROP · 海港启航：绘制的背景、九宫格面板、按钮与导航图集 ===== */
:root {
  --bg: #b9e7ff; --ink: #173655; --txt: #f5fbff; --mut: #bed7e8; --dim: #a1bfd1;
  --acc: #ffd43b; --acc2: #ffb820; --good: #65dfaa; --bad: #ff7777;
  --es-y: #ffd43b; --es-c: #78d8ff; --es-mut: #bed7e8; --es-cut: none;
  --paper: #fff8e7; --navy: #214a52; --blue: #267f8a; --line: #d6d9c4;
  --panel-shadow: 0 10px 30px #163e4930;
  --num: "Bahnschrift", "Avenir Next", system-ui, sans-serif;
  --es-num: var(--num);
}
/* Menus use dark ink; combat retains light text over translucent blue. */
#menu, #settings, #help, #pause, #matching, #results, #fatal, #deviceNote, #bootMask, #rotateNote {
  --txt: #173655; --mut: #526d82; --dim: #657e91; --good: #13845b; --bad: #c43b49;
  --hair: #d8e4eb; --hair2: #becfdb; color: var(--txt); color-scheme: light;
}
#menuBg { background: #61c1f6 url('../assets/lobby-sky.5b53887290.webp') center / cover no-repeat; }
#menu .menuShade, body.touch #menu .menuShade { background: linear-gradient(180deg, #183e3b30, transparent 28%), linear-gradient(90deg, #fff5db12, transparent 55%, #123e4b1c); }
#menu .menuTop { padding: 28px 48px 0; }
#menu .brandEn { padding: 6px 18px; color: #ffdf85; background: #245565; border: 1px solid #e6c982; border-radius: 5px; font: 800 11px/1 var(--num); letter-spacing: .35em; box-shadow: 0 2px 6px #153b4940; }
#menu .brandCn { margin-top: 10px; color: #fff4d4; font-size: 52px; font-weight: 950; font-style: normal; letter-spacing: .1em; text-shadow: 0 4px 0 #214a52, 2px 0 0 #214a52, -2px 0 0 #214a52, 0 -2px 0 #214a52, 0 7px 15px #15424940; }
#menu .brandSub { margin-top: 11px; padding: 6px 13px; color: #255660; background: #fff3dce8; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
#menu .brandSub::before { width: 6px; height: 6px; background: #d89e46; border-radius: 1px; transform: rotate(45deg); }
#menu .season { background: #fff5dff2; border: 1px solid #dbc18a; border-radius: 8px; color: var(--navy); box-shadow: 0 3px 0 #408db340; font-weight: 700; letter-spacing: .06em; }
#menu .season i { border-radius: 50%; background: #19c68f; box-shadow: 0 0 0 3px #19c68f20; }
#menu .menuMain { left: 48px; right: 48px; top: 174px; bottom: 30px; gap: 40px; }
#menu .stage::before { display: none; }
#menu #avatarCv { left: calc(50% - 270px); bottom: 130px; }
#menu .pedestal { left: calc(50% - 148px); bottom: 145px; width: 296px; height: 36px; background: radial-gradient(ellipse, #4b492e50, #4b492e00 70%); filter: blur(4px); }
#menu .stageInfo { left: 50%; transform: translateX(-50%); width: 380px; padding: 19px 26px 24px; align-items: stretch; gap: 6px; }
#menu .siBtns { display: flex; gap: 9px; }
#menu .siBtns .btn { flex: 1; min-width: 0; }
#menu .stageInfo::before { display: none; }
#menu #nameInput { width: 100%; color: var(--navy); border-bottom: 1px solid var(--line); font-weight: 850; font-size: 24px; }
#menu #nameInput:focus { border-color: var(--blue); }
#menu .glass, #menu .stageInfo, #settings .sInner, #help .hInner, #pause .pInner, #fatal .fBox, #deviceNote .fBox {
  border: 2px solid #d7be81; border-radius: 22px; border-image: url('../assets/ui-panel.61f1d49c32.webp') 18% / 24px / 0 stretch; background: #fff8e7; color: var(--navy); box-shadow: var(--panel-shadow); clip-path: none; backdrop-filter: none;
}
#menu .side { width: 420px; padding: 24px; gap: 10px; flex-shrink: 0; align-self: flex-start; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
#menu .side > .glass { border: 0; border-image: none; background: none; box-shadow: none; border-radius: 0; }
.lobbyMode { position: relative; flex-shrink: 0; min-height: 124px; padding: 17px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 5px; color: #fff8df; background: linear-gradient(90deg, #134d60f0, #134d6050), url('../assets/lobby-sky.5b53887290.webp') center 58% / cover; border: 1px solid #628b88; border-radius: 12px; overflow: hidden; }
.lobbyMode strong { font-size: 25px; font-weight: 900; letter-spacing: .05em; text-shadow: 0 2px 2px #19484d; }
.modeSeason { color: #ffe09a; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.modeRule { font-size: 11px; font-weight: 600; letter-spacing: .05em; }
#menu .rankBlock { min-height: 88px; padding: 0 8px; gap: 12px; }
#menu #rankCv { width: 76px; height: 76px; flex-basis: 76px; }
#menu .rankInfo .kicker { font-size: 10px; }
#menu #rankName { font-size: 23px; margin: 4px 0 7px; }
#menu #rankPts { font-size: 11px; margin-top: 7px; }
#menu .side #btnPlay { order: 2; flex-shrink: 0; }
#menu .side .statsGrid { order: 3; border-top: 1px solid #d6d2b7; padding-top: 8px; }
#menu .side .history { order: 4; padding: 5px 5px 0; min-height: 64px; max-height: 92px; overflow: auto; }
#menu .side .empty { padding: 17px 0 8px; font-size: 12px; }
#menu .kicker, #menu .wdLbl, #settings .kicker, #help .kicker, #pause .kicker { color: #337393; font-weight: 800; letter-spacing: .16em; }
#menu .rankBlock::before { display: none; }
#menu #rankCv { filter: drop-shadow(0 4px 0 #a6886825); }
#menu #rankName { color: #725032 !important; font-weight: 900; letter-spacing: .04em; }
.rankProg { background: #dae5ec; height: 7px; }
.rankProg i { background: linear-gradient(90deg, #ffbf24, #ffe47a); box-shadow: inset 0 1px 0 #fff8; }
#menu .statsGrid div { padding: 7px 0; }
#menu .statsGrid b { font-size: 21px; }
#menu .statsGrid div:nth-child(n+4) { border-top: 1px solid #dae5ec; }
#menu .statsGrid div:not(:nth-child(3n))::after { width: 1px; background: #d6e2e9; }
#menu .statsGrid b { color: var(--navy); font-weight: 850; }
#menu .statsGrid div:first-child b { color: #aa7000; }
#menu .statsGrid span, #rankPts, #menu .hItem .info, #menu .empty { color: #5c7487; }
#menu .history .kicker::before { content: ''; display: inline-block; width: 5px; height: 12px; margin-right: 8px; border-radius: 3px; background: #269ce5; vertical-align: -2px; }
#menu .hItem { border-bottom: 1px solid var(--line); }
#menu .wdTitle { font-weight: 900; color: var(--navy); }
#menu .wdSec { border-top: 1px solid var(--line); }
#menu .chips b { border-radius: 9px; border: 1px solid #cedde7; background: white; color: #37556b; }
#menu .chips b.on { border-color: #d4a412; background: #fff0b5; color: #735100; box-shadow: inset 0 0 0 1px #ffd43b; }
#menu .chips b.lock { color: #7c8990; background: #edf0f1; border-style: dashed; }
#menu .skinRow i { border-radius: 50%; clip-path: none; }
#menu .skinRow i.on { outline: 3px solid #1689d4; outline-offset: 3px; }
#menu .wdMore { color: #436985; background: linear-gradient(transparent, #fffaf2 65%); }
#menu .abNote, #menu .abItem span, #menu #lockNote { color: #526d82; }
#menu .abItem { border: 2px solid #dce5e9; background: #fffdf8; border-radius: 15px; color: var(--navy); box-shadow: 0 2px 0 #dce5e960; }
#menu .abItem:hover { border-color: #7cc5ee; background: #eff9ff; }
#menu .abItem.on { border-color: #eabb23; background: #fff4c7; box-shadow: 0 3px 0 #d8b43a; }
#menu .abItem i { border-radius: 12px; clip-path: none; background-color: #fffaf2; }
#menu .abItem em { color: #187bb4; }
/* Shared controls. Important declarations retire legacy per-screen overrides. */
body .btn, body .iconBtn, body .sBtn, body .rotGo {
  clip-path: none !important; border-radius: 12px !important; border: 0 !important;
  background: transparent url('../assets/ui-buttons.de9e25a75d.webp') 0 100% / 200% 200% no-repeat !important; color: var(--navy) !important;
  box-shadow: none !important; filter: drop-shadow(0 3px 1px #214d4f20); font-weight: 800; letter-spacing: .07em; padding: 13px 23px;
}
body .iconBtn { width: 44px; height: 44px; padding: 8px; border: 1px solid transparent !important; border-image: url('../assets/ui-panel.61f1d49c32.webp') 18% / 10px / 0 stretch !important; background: #fff5df !important; }
body .btn.big, body .rotGo { border: 0 !important; border-radius: 16px !important; background: transparent url('../assets/ui-buttons.de9e25a75d.webp') 0 0 / 200% 200% no-repeat !important; box-shadow: none !important; color: #173655 !important; min-height: 74px; padding: 19px 38px; }
body .btn.big * { color: #173655 !important; }
body .btn:hover, body .iconBtn:hover, body .sBtn:hover { filter: brightness(1.04); transform: translateY(-1px); }
body .btn:active, body .iconBtn:active, body .sBtn:active { transform: translateY(2px); box-shadow: none !important; }
body .btn:disabled { background: #e1e6e8 !important; color: #74828b !important; box-shadow: 0 2px 0 #bec9d0 !important; cursor: var(--cur-arrow); filter: none; transform: none; }
body .btn.danger { color: #b73e4f !important; }
#btnPlay { min-height: 94px; }
#btnPlay::before { content: none; }
#btnPlay > span { font-weight: 900; font-size: 23px; }
#menu kbd, #settings kbd, #help kbd, #pause kbd { color: #365972; border: 1px solid #c9dce7; background: #edf6fb; }
:focus-visible { outline: 3px solid #147cb8 !important; outline-offset: 3px; }
/* Overlay menus and end-of-match screens. */
#settings, #help, #pause, #fatal, #deviceNote, #bigmap, #tPack { background: #143b5f99; }
#matching, #results { background: linear-gradient(#a8e1fb7a, #e3f5facc), url('../assets/lobby-sky.5b53887290.webp') center / cover; }
#matching::before { display: none; }
#matching .mInner { padding: 32px; background: #fff8e7; border: 2px solid #d7be81; border-image: url('../assets/ui-panel.61f1d49c32.webp') 18% / 26px / 0 stretch; border-radius: 26px; box-shadow: var(--panel-shadow); }
.spinner, #bootMask .spinner, #matching .spinner { border-radius: 50%; border: 4px solid #d3e8f3; border-top-color: #1689d4; border-right-color: #ffd43b; }
#matching .mCount b { color: #1689d4; }
#matching .mBar { height: 8px; border-radius: 10px; background: #dfebf1; }
#matching .mBar i { background: linear-gradient(90deg, #57c5fb, #1689d4); }
#matching .mNames span { color: #526d82; }
#settings .pTitle, #pause .pTitle, #help .pTitle, .fTitle { color: var(--navy); font-weight: 900; }
#settings .sRow, #settings .volRow, #settings .sNote, #help .hTips li, .fDetail { color: #526d82; }
#help .hTips b { color: var(--navy); }
#settings .seg { border: 1px solid #c8dce8; background: #eaf3f8; border-radius: 10px; }
#settings .seg i { color: #42657d; }
#settings .seg i.on { background: #ffd849; color: #173655; font-weight: 800; }
#settings input[type=range] { accent-color: #1689d4; }
#settings .volRow b { color: #1689d4; }
#results .rInner { background: #fff8e7; border: 2px solid #d7be81; border-image: url('../assets/ui-panel.61f1d49c32.webp') 18% / 28px / 0 stretch; border-radius: 26px; clip-path: none; padding: 30px 36px; box-shadow: var(--panel-shadow); }
#results .kicker { color: #337393 !important; }
#results .rPlace { color: #1d6fa4; }
#results .rPlace.win, #results #rTitle.win { color: #a57000 !important; }
#results .rGrid, #results .rRank { background: #eef6fa !important; border: 1px solid #d4e4ed !important; border-radius: 14px !important; box-shadow: none !important; }
#results .rGrid b, #results #rRankName { color: var(--navy); }
#results .rGrid span { color: #526d82; }
#results .rGoal { border-radius: 10px; background: #fff0bc; color: #62552e; border-left: 3px solid #e9bb2c; }
#results .rGoal b { color: #826000; }
/* Compact, translucent combat panels leave gameplay unobstructed. */
body #tl .stat, body #tl .meta, body #zoneBox, body #prompt, body #spec, body #bottom,
body.touch.hud2 #bottom, body.hud2:not(.touch) #bottom, body.hud2:not(.touch) #bag {
  background: #153d4e; border: 1px solid #e1c68b; border-image: url('../assets/ui-hud.f5643b5ce6.webp') 12% / 11px / 0 stretch; border-radius: 14px; box-shadow: 0 3px 0 #12314b30; clip-path: none; color: #f4fbff;
}
body #tl .stat b, body #zoneTimer, body #hpText { font-style: normal; font-weight: 850; color: #fff; }
/* Levels push max HP past 100, so the number always reserves three digits beside the bar. */
body #hpText, body.touch.hud2 #hpText { flex: none; width: auto; min-width: 3ch; font-variant-numeric: tabular-nums; }
body #tl .stat:nth-child(2) b { color: #ffdc54; }
body #tl .stat .lbl, body #tl .meta, body #zoneTitle { color: #d2e9f5; }
body #tl .stat .ico, body #tl .meta .ico { color: #81d9ff; }
body #zoneBox { padding: 13px 24px 14px; min-width: 214px; }
body #zoneBox.danger { border-image: none; border: 2px solid #ff7777; }
body #zoneBar, body #hpBar, body #lvBar { border: none; border-radius: 20px; transform: none; background: #ffffff24; overflow: hidden; }
body #zoneBar i, body #hpBar i, body #lvBar i { border-radius: 20px; }
body #hpFill { background: linear-gradient(90deg, #70d9aa, #b0efcb); }
body #hpBar.low #hpFill { background: linear-gradient(90deg, #fa7474, #ffc0a0); }
body #hpBar.mid #hpFill { background: linear-gradient(90deg, #ffd166, #ffe5a2); }
body #zoneBar i { background: #7bd6ff; } body #lvBar i { background: #ffda48; }
body #enBar { border-radius: 20px; overflow: hidden; }
body #enFill { background: linear-gradient(90deg, #249ed7, #8cddff); }
body .lvTag { border-radius: 6px; background: #ffda48; color: #173655; transform: none; }
body #mmWrap, body #bigmapCv { border: 5px solid #fff9df; border-image: url('../assets/ui-hud.f5643b5ce6.webp') 12% / 12px / 0 stretch; border-radius: 18px; clip-path: none; box-shadow: 0 4px 0 #214c6955; }
body .slot, body .bagIt, body .gearIt, body .cSlots .cs, body .wCard, body .tWslot {
  border-radius: 10px !important; clip-path: none !important; background: #153d4e !important; border-image: url('../assets/ui-hud.f5643b5ce6.webp') 12% / 7px / 0 stretch; box-shadow: none !important;
}
body .slot.on, body .bagIt.sel { border-color: #ffda48; box-shadow: inset 0 0 0 1px #ffda48 !important; }
body #abHud { border-radius: 11px; }
body #setBtn, body #ppClose, body #spClose { border-radius: 8px; background: #ffda48; color: #173655; transform: none; }
body #touch .tBtn { background: #194550 url('../assets/ui-hud.f5643b5ce6.webp') center / 100% 100% no-repeat !important; border: 2px solid #e7d5a7 !important; box-shadow: inset 0 2px 0 #ffffff33, 0 3px 0 #17365066 !important; }
body #touch .tBtn.on { border-color: #ffda48 !important; box-shadow: inset 0 0 0 3px #ffda4860 !important; }
body #touch .tBtn.dis { opacity: .45; }
body #touch .tBtn .n { background: #ffda48 !important; color: #173655 !important; border-radius: 6px !important; }
/* Labels sit over the map. The ring already shows rarity, so this overrides the inline tint set in touch.js. */
body #touch .tBtn .nm { color: #fff !important; font-weight: 800; text-shadow: 0 0 2px #0b2230, 0 1px 3px #0b2230e6; }
body.touch #tPause, body.touch .tBagBtn, body.touch.hud2 .tBagBtn, body.touch #mmToggle { border-radius: 10px; background: #214762e6; border: 1px solid #dcf4ffb3; clip-path: none; }
body #tJoy { border-color: #d9f4ffd6; background: radial-gradient(circle, #a7e1ff30, #326b87a3); }
body #tJoy i { background: linear-gradient(145deg, #fffbe6, #a5ddf5); }
body .toast, body .fItem, body #spec, body #prompt { border-radius: 12px !important; clip-path: none; }
/* Upgrade, inventory and map dialogs share the same soft silhouettes. */
body #perkPanel, body #setPanel, body .packSheet { border-radius: 20px !important; clip-path: none; background: #fff8e7 !important; color: #173655; border: 2px solid #d7be81 !important; border-image: url('../assets/ui-panel.61f1d49c32.webp') 18% / 22px / 0 stretch !important; box-shadow: var(--panel-shadow) !important; }
body .ppTitle, body .packSheet header { color: #173655 !important; font-style: normal; }
body .ppSub, body .packSheet header em { color: #526d82 !important; }
body .ppCard { border-radius: 14px !important; background: linear-gradient(#fff, color-mix(in srgb, var(--rc) 12%, #fffaf2)) !important; color: #173655 !important; clip-path: none; }
body .ppCard b, body .spName b { color: #173655 !important; }
body .ppCard .ppDesc { color: #526d82 !important; }
body .ppCard .ppCat { color: #526d82 !important; filter: none !important; }
body .ppCard .ppIc { border-radius: 12px !important; clip-path: none; background: color-mix(in srgb, var(--rc) 25%, white) !important; }
body .ppCard .ppRar, body .ppCard .ppKey, body .ppCard .ppSet { border-radius: 6px !important; transform: none; }
/* 高档卡也用浅底（按档位颜色淡淡上色），盖过旧深色主题的 .ppCard.r1~r3 深底，卡名、说明的深色字才看得清 */
body .ppCard.r1 { background: linear-gradient(#fff, color-mix(in srgb, var(--rc) 18%, #fff)) !important; }
body .ppCard.r2 { background: linear-gradient(#fff, color-mix(in srgb, var(--rc) 28%, #fff)) !important; }
body .ppCard.r3 { background: linear-gradient(#fffdf6, color-mix(in srgb, var(--rc) 34%, #fff)) !important; }
body .ppCard.r3 b { color: #173655 !important; }
body .ppCard .ppRar { color: #1b2f44; }
body .spRow, body .spRow.on { border-radius: 12px !important; background: #eaf3f8 !important; color: #526d82 !important; }
body .packItem { border-radius: 12px !important; background: #eaf3f8 !important; color: #173655; }
body .packSheet h3, body .packGear b, body .packItem b { color: #173655; }
body .packGear, body .packItem small { color: #526d82; }
body .packClose { border-radius: 10px !important; clip-path: none; }
body .packWeapon { background: #eaf3f8; border-color: #c7dce8; }
body .packWeapon summary, body .packWeapon .desc, body .packWeapon .desc b { color: #345a73; }
body .pkChip { background: #fffdf8; color: #345a73; box-shadow: inset 0 0 0 1px #bcd2e0; }
body .pkChip.use { background: #ffeaa4; color: #6e5100; }
body .pkChip.swap, body .pkChip.offc { color: #a43c4d; background: #ffe4e4; }
body .pkChip.onc { color: #13774e; }
body #bigmap.jump .bmSide { background: #fff8e7; color: #173655; border: 2px solid #d7be81; border-image: url('../assets/ui-panel.61f1d49c32.webp') 18% / 20px / 0 stretch; border-radius: 18px; clip-path: none; margin-left: 8px; }
body .bmK, body .bmL, body .bmMark { color: #526d82; }
body .bmMark b { color: #173655; }
body .bmRow { background: #e8f2f8; border-radius: 6px; }
body .bmRow.on { background: #fff0ae; }
body .bmRow .st { color: #9f7400; }
/* Honour motion preferences for decorative effects without changing game timers. */
@media (prefers-reduced-motion: reduce) {
  .btn, .iconBtn, #avatarCv, .abItem { transition: none !important; }
  .btn::after, #btnPlay::before, .ppCard.r3 { animation: none !important; }
}
/* Generated icon atlas: four columns × two rows, shared by lobby and both HUDs. */
[data-ab="sprint"] { --ax: 0%; --ay: 0%; }
[data-ab="blink"] { --ax: 33.333333%; --ay: 0%; }
[data-ab="rage"] { --ax: 66.666667%; --ay: 0%; }
[data-ab="heal"] { --ax: 100%; --ay: 0%; }
[data-ab="infinite"] { --ax: 0%; --ay: 100%; }
[data-ab="stone"] { --ax: 33.333333%; --ay: 100%; }
[data-ab="undying"] { --ax: 66.666667%; --ay: 100%; }
[data-ab="thorns"] { --ax: 100%; --ay: 100%; }
#menu .abItem > i, #abBtnIc[data-ab], #abHud .ic[data-ab], #touch #tAb .ic[data-ab] {
  display: inline-block; background-image: url('../assets/ability-icons.3b5609ef1e.webp');
  background-size: 400% 200%; background-position: var(--ax) var(--ay);
  background-repeat: no-repeat; font-size: 0; border-radius: 10px; flex-shrink: 0;
}
#abBtnIc[data-ab] { width: 24px; height: 24px; margin-right: 0; }
#abHud .ic[data-ab] { width: 26px; height: 26px; }
#touch #tAb .ic[data-ab] { width: calc(26px * var(--tz, 1)); height: calc(26px * var(--tz, 1)); }
/* Menu zoom must not shrink touch targets and supporting labels below readability. */
body.touch #menu .iconBtn { width: calc(38px / var(--zm, 1)); height: calc(38px / var(--zm, 1)); }
body.touch #menu :is(.statsGrid span, #rankPts, .brandSub, .season, .abNote, .abItem span, .abItem em, .wdLbl, #lockNote) { font-size: calc(10px / var(--zm, 1)); letter-spacing: .02em; }
body.touch #menu :is(.abItem b, .chips b) { font-size: calc(12px / var(--zm, 1)); }
body.touch #menu .siBtns .btn { min-height: calc(36px / var(--zm, 1)); font-size: calc(11px / var(--zm, 1)); padding: 6px 10px; }
body.touch #menu #nameInput { font-size: calc(16px / var(--zm, 1)); }
body.touch #menu .stageInfo { width: 380px; max-width: 380px; padding: 15px 24px 20px; }
body.touch #menu .season { padding: 10px; }
body.touch #menu .abItem { min-height: calc(58px / var(--zm, 1)); }
#menu::after { background: none; }
body .packSheet header small, body .packBody h3 { color: #337393 !important; }
body .packItem button, body .pkRow button { border-radius: 8px !important; }
body .packItem.sel { background: #fff1ba !important; }
body .packHelp { color: #526d82; }
body .packWeapon { border-radius: 12px !important; }
body .cSlots .cs .lvB { border-radius: 6px; clip-path: none; }
#help { --r0: #667887; --r1: #247c35; --r2: #126da7; --r3: #8151b1; --r4: #956800; }
body .invSel strong { color: #42657d; }
body .invSel b em { background: #ffe9a1; color: #765600; }
body .csLab { color: #337393; }
body .ciCard, body .kcIn { border-radius: 16px; clip-path: none; background: linear-gradient(135deg, #183c59f0, #234d68e0); }
body .ciCard { border: 2px solid #b7e8ff; }
body .cnStamp b { border-radius: 12px; clip-path: none; }

/* Hand-painted navigation; labels and hit targets remain real HTML controls. */
#menu [data-ic="shirt"] { --nx: 0%; --ny: 0%; }
#menu [data-ic="gear"] { --nx: 33.333333%; --ny: 0%; }
#menu [data-ic="help"] { --nx: 66.666667%; --ny: 0%; }
#menu [data-ic="reset"] { --nx: 100%; --ny: 0%; }
#menu :is([data-ic="shirt"], [data-ic="gear"], [data-ic="help"], [data-ic="reset"]) { display: inline-block; width: 28px; height: 28px; flex-shrink: 0; background: url('../assets/ui-nav.ef6ba2e585.webp') var(--nx) var(--ny) / 400% 200% no-repeat; }
#menu :is([data-ic="shirt"], [data-ic="gear"], [data-ic="help"], [data-ic="reset"]) svg { display: none; }
body.hud2:not(.touch) #bottom { width: 384px; padding: 13px 17px 14px; display: grid; grid-template-columns: 1fr auto; gap: 7px; }
body:not(.touch) #vitals { grid-column: 1 / -1; width: 348px; }
body:not(.touch) #gear { margin-left: 0; gap: 5px; }
body:not(.touch) #abHud { position: static; margin-left: auto; min-width: 118px; }
body #abHud .nm { white-space: nowrap; }
body #hpBar { height: 16px; }
body #enBar { transform: none; }
body #tl .meta { background: #174651d9; border-image: none; border: 1px solid #d8c99570; }
body #tl .stat { padding: 9px 15px; }
body #tl .stat b { font-size: 30px; }
body #touch .tBtn { border-radius: 50% !important; overflow: hidden; }
body #touch .tBtn:has(.nm) { overflow: visible; background-image: none !important; }
body .packSheet header { border-bottom-color: #d5ceb5; }
body .packWeapon, body .packItem, body .ppCard { background-color: #efe9d8 !important; }
body .packSheet { padding: 10px; }
body.touch #menu .menuTop { padding-top: 18px; }
body.touch #menu .brandCn { font-size: 44px; }
body.touch #menu .menuMain { top: 152px; bottom: 20px; }
body.touch #menu .side { width: 410px; padding: 18px 23px; gap: 7px; }
body.touch #menu .side .history { display: none; }
body.touch #menu .side .statsGrid { display: grid; padding-top: 4px; }
body.touch #menu .statsGrid div { padding: 5px 0; }
body.touch #menu .lobbyMode { min-height: 100px; padding: 12px 16px; }
body.touch #menu .lobbyMode strong { font-size: calc(17px / var(--zm, 1)); }
body.touch #menu .modeRule { font-size: calc(10px / var(--zm, 1)); }
body.touch #menu .modeSeason { font-size: calc(8px / var(--zm, 1)); }
body.touch #menu .rankBlock { min-height: 80px; }
body.touch #menu .rankInfo .kicker { display: none; }
body.touch #menu #btnPlay { min-height: 92px; }
body.touch #menu #avatarCv { width: 400px; height: 300px; left: calc(50% - 200px); bottom: 135px; }
body.touch #menu .pedestal { bottom: 147px; width: 240px; left: calc(50% - 120px); }
body.touch #menu :is(#wardrobe, #abPanel) { top: 150px; right: 48px; bottom: 20px; width: 410px; }
body.touch #menu .season { font-size: calc(9px / var(--zm, 1)); }

/* ---------- 秘符乱斗 ---------- */
#menu .side #btnHex { order: 2; flex-shrink: 0; width: 100%; min-height: 70px; padding: 10px 20px; color: #fff; border: 0;
  background: linear-gradient(120deg, #6a2bd1, #c83fa8 60%, #ff7ae0); box-shadow: 0 6px 18px rgba(160, 60, 200, .35); }
#btnHex > span { display: block; font-weight: 900; font-size: 20px; letter-spacing: .12em; }
#btnHex > span em { font-style: normal; font-size: 11px; padding: 1px 6px; margin-left: 6px; vertical-align: 3px; background: #ffd45a; color: #5a2a00; border-radius: 4px; letter-spacing: 0; }
#btnHex > small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .02em; opacity: .9; }
body.touch #menu #btnHex { min-height: 60px; }

#heroPick { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(12, 6, 24, .72); backdrop-filter: blur(4px); }
#heroPick.hidden { display: none; }
.hpInner { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 22px 24px; border-radius: 18px; color: #fff;
  background: linear-gradient(160deg, #24133d, #3b1b52); border: 2px solid #ff7ae0aa; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); text-align: center; }
.hpInner .kicker { color: #ff9ae8; letter-spacing: .25em; font-size: 11px; }
.hpTitle { font: 900 26px var(--font); letter-spacing: .14em; margin: 4px 0 6px; }
.hpSub { font-size: 12.5px; opacity: .85; margin-bottom: 16px; }
.hpSub kbd { padding: 0 5px; border: 1px solid #fff8; border-radius: 4px; font-size: 11px; }
body.touch .hpSub .kbOnly { display: none; }
#hpTime { font-weight: 900; color: #ffd45a; }
.hpCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hpCard { --hc: #fff; position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 14px 12px; text-align: left; color: #fff; font-family: var(--font);
  border-radius: 14px; border: 2px solid color-mix(in srgb, var(--hc) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 22%, #1a0f2a), #1a0f2a);
  cursor: var(--cur-hand, pointer); transition: transform .15s, box-shadow .15s; }
.hpCard:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--hc), 0 10px 26px color-mix(in srgb, var(--hc) 40%, transparent); }
.hpCard canvas { width: 100%; height: 76px; }
.hpCard > b { font: 900 21px var(--font); letter-spacing: .1em; color: var(--hc); text-align: center; }
.hpKey { position: absolute; left: 10px; top: 8px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 800 12px var(--font); background: #fff2; }
.hpRole { text-align: center; font-size: 12px; opacity: .9; }
.hpRole i { font-style: normal; opacity: .3; }
.hpHp { display: none; }
.hpRow { font-size: 12px; }
.hpRow em, .hpUlt em { font-style: normal; font-weight: 800; margin-right: 6px; color: var(--hc); }
.hpUlt { margin-top: 2px; padding: 8px 9px; border-radius: 9px; background: #0005; font-size: 12px; line-height: 1.5; }
.hpUlt em { display: block; margin-bottom: 2px; font-size: 13px; }
.hpUlt small { display: block; margin-top: 3px; opacity: .65; font-size: 11px; }
.hpKit { display: flex; flex-direction: column; gap: 4px; }
.hpK { padding: 5px 8px; border-radius: 8px; background: #0004; font-size: 11.5px; line-height: 1.45; }
.hpK em { display: inline-block; min-width: 2.2em; margin-right: 5px; font-style: normal; font-weight: 900; color: var(--hc); }
.hpK b { margin-right: 5px; font-weight: 800; }
.hpK i { font-style: normal; opacity: .78; }
.hpK.ult { background: color-mix(in srgb, var(--hc) 16%, #0006); }
body.touch .hpK { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 3px 6px 0; border-bottom: 3px solid transparent; font-size: 10px; line-height: 1.35; }
.hpBtns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.hpBtns .btn:disabled { opacity: .4; pointer-events: none; }
body.touch .hpCards { gap: 8px; }
body.touch .hpCard { padding: 10px 9px; }
body.touch .hpCard canvas { height: 50px; }
body.touch .hpUlt { font-size: 11px; padding: 6px; }
body.touch .hpInner { padding: 14px; }
@media (max-height: 520px) {
  body.touch .hpInner { padding: 10px 12px; max-height: calc(100vh - 10px); }
  body.touch .hpInner .kicker, body.touch .hpCard canvas { display: none; }
  body.touch .hpTitle { font-size: 18px; margin: 0 0 2px; }
  body.touch .hpSub { font-size: 10.5px; margin-bottom: 8px; }
  body.touch .hpCard { gap: 3px; padding: 8px 8px 7px; }
  body.touch .hpCard > b { font-size: 17px; }
  body.touch .hpKit { gap: 3px; }
  body.touch .hpK { -webkit-line-clamp: 2; }
  body.touch .hpRow { display: none; }
  body.touch .hpHp { display: inline; }
  body.touch .hpBtns { margin-top: 8px; }
}

#ultHud { --cdk: 0; --ac: #ff7ae0; position: relative; height: 38px; min-width: 104px; padding: 0 10px 0 8px; display: flex; align-items: center; gap: 6px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28); border-left: 3px solid var(--ac); background: rgba(10, 14, 20, .6); color: #fff; }
#ultHud.hidden { display: none; }
#ultHud .ic { font-size: 19px; font-style: normal; line-height: 1; }
#ultHud .nm { font-size: 13px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
#ultHud kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--ac); color: var(--ac); font: 800 11px/1.2 var(--font); }
#ultHud::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--cdk) * 100%); background: rgba(3, 6, 12, .7); pointer-events: none; }
#ultHud .cd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 1; font: 900 italic 15px var(--es-num, sans-serif); text-shadow: 0 0 5px #000; white-space: nowrap; }
#ultHud .cd:empty { display: none; }
#ultHud.cdn kbd, #ultHud.act kbd { visibility: hidden; }
#ultHud.lock .cd { font-style: normal; font-size: 12px; color: #ffd45a; }
#ultHud.ready { box-shadow: inset 0 0 0 1px var(--ac), 0 0 12px color-mix(in srgb, var(--ac) 55%, transparent); animation: ultPulse 1.4s ease-in-out infinite; }
#ultHud.act { border-color: var(--ac); }
@keyframes ultPulse { 50% { box-shadow: inset 0 0 0 1px var(--ac), 0 0 20px var(--ac); } }
body.touch #ultHud, #hud.sky #ultHud { display: none; }
body.hexMode:not(.touch) #abHud { margin-left: 0; }

#tUlt { --cdk: 0; --ac: #ff7ae0; width: calc(58px * var(--tz, 1)); height: calc(58px * var(--tz, 1)); right: calc(196px * var(--tz, 1)); bottom: calc(206px * var(--tz, 1)); }
body.touch #tUlt { border-color: var(--ac) !important; }
body.touch #tUlt::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(6, 10, 20, .78) calc(var(--cdk) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px)); mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px)); }
#tUlt .ic { font-size: calc(23px * var(--tz, 1)); font-style: normal; line-height: 1; }
#tUlt .cd { font-size: calc(14px * var(--tz, 1)); }
body.touch #tUlt.cdn { border-color: rgba(255, 255, 255, .3) !important; }
body.touch #tUlt.ready { box-shadow: 0 0 0 3px var(--ac), 0 0 16px var(--ac) !important; }
body.touch #tUlt.act { box-shadow: 0 0 0 3px #fff, 0 0 14px var(--ac) !important; }
/* 英雄技能（E）：技能键和异能键中间 */
#tSkill2 { --cdk: 0; --ac: #7fd8ff; width: calc(54px * var(--tz, 1)); height: calc(54px * var(--tz, 1)); right: calc(190px * var(--tz, 1)); bottom: calc(138px * var(--tz, 1)); }
body.touch #tSkill2 { border-color: var(--ac) !important; }
body.touch #tSkill2::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(6, 10, 20, .78) calc(var(--cdk) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px)); mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px)); }
#tSkill2 .ic { font-size: calc(20px * var(--tz, 1)); font-style: normal; line-height: 1; }
#tSkill2 .cd { font-size: calc(13px * var(--tz, 1)); }
body.touch #tSkill2.cdn { border-color: rgba(255, 255, 255, .3) !important; }
body.touch #tSkill2.ready { box-shadow: 0 0 0 2px var(--ac), 0 0 12px var(--ac) !important; }
body.touch #tSkill2.act { box-shadow: 0 0 0 3px #fff, 0 0 14px var(--ac) !important; }
#hud #skBar #sk2Hud .ic { font-size: 22px; }

#revive { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); z-index: 25; text-align: center; padding: 16px 30px; border-radius: 14px; color: #fff; pointer-events: none;
  background: rgba(30, 10, 40, .78); border: 2px solid #ff7ae0; box-shadow: 0 0 30px rgba(255, 122, 224, .35); }
#revive.hidden { display: none; }
#revive small { display: block; letter-spacing: .25em; font-size: 11px; color: #ff9ae8; }
#revive b { display: block; font: 900 54px/1.1 var(--num, var(--font)); color: #ffd45a; }
#revive span { display: block; font-size: 15px; font-weight: 800; letter-spacing: .1em; }
#revive em { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; opacity: .75; }
#lifeStat .lifeIc { color: #ff6b8a; }
#growStat .growIc { color: #ffb36b; font-weight: 900; }
#growStat.giant b { color: #ff9a4a; }
/* 手机横屏：秘符乱斗多了复活、体型两格，去掉文字标签才不压中间的倒计时 */
body.touch.hexMode #tl .stat .lbl { display: none; }
body.touch.hexMode #tl .stat { gap: 5px; padding-left: 11px; padding-right: 11px; }

#ppReroll { padding: 5px 12px; font: 700 12px var(--font); cursor: var(--cur-hand, pointer); color: #fff; border: 0; border-radius: 6px; background: linear-gradient(120deg, #6a2bd1, #c83fa8); }
#ppReroll.hidden { display: none; }
#ppReroll b { color: #ffd45a; }
body.touch #ppReroll { padding: 8px 14px; }
body #menu .btn.big.hexBtn { background: linear-gradient(120deg, #7a3bf0, #c83fa8 60%, #ff7ae0) !important; box-shadow: 0 6px 0 #5b2390, 0 12px 22px rgba(120, 40, 160, .3) !important; min-height: 70px; padding: 10px 20px; }
body #menu .btn.big.hexBtn * { color: #fff !important; }
body #menu .btn.big.hexBtn > span em { color: #5a2a00 !important; }
#perkOwned i.card { width: 20px; height: 27px; border-radius: 4px; font-size: 11px; background: linear-gradient(160deg, var(--rc), color-mix(in srgb, var(--rc) 30%, #0b1220)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8), 0 0 0 1.5px #1f2b3a, 0 2px 6px color-mix(in srgb, var(--rc) 45%, transparent) !important; }

/* ===== 电脑端技能栏：底部面板右边一排方格（右键技能 / 空格翻滚 / V 异能 / R 大招），冷却时从 12 点方向转圈变暗、中间写秒数 ===== */
#skBar { position: absolute; left: calc(50% + 150px); bottom: 22px; display: flex; gap: 6px; align-items: flex-end; zoom: var(--zh, 1); }
body.touch #skBar, #hud.sky #skBar { display: none; }
#hud #skBar .skC { --cdk: 0; position: relative; inset: auto; width: 64px; height: 64px; min-width: 0; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .26); border-bottom: 3px solid var(--ac, #ffd400); border-radius: 0; background: rgba(10, 14, 20, .74); color: #fff; }
#hud #skBar .skC.hidden { display: none; }
#hud #skBar #rollHud { --ac: #7fd8ff; }
#hud #skBar #ultHud { width: 72px; height: 72px; }
#hud #skBar .skC .ic { font-size: 24px; line-height: 1; font-style: normal; }
#hud #skBar .skC .ic[data-ab] { width: 30px; height: 30px; }
#hud #skBar .skC canvas { width: 40px; height: 28px; }
#hud #skBar .skC .nm { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
#hud #skBar .skC kbd { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; padding: 1px 4px; border: none; border-radius: 0; background: rgba(0, 0, 0, .6); color: var(--ac, #ffd400); font: 800 10px/1.25 var(--font); visibility: visible; }
#hud #skBar .skC::after { content: ""; position: absolute; inset: 0; width: auto; background: conic-gradient(rgba(3, 6, 12, .74) calc(var(--cdk) * 1turn), transparent 0); pointer-events: none; }
#hud #skBar .skC .cd { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-62%); z-index: 1; text-align: center; font: 900 italic 22px var(--es-num, sans-serif); color: #fff; text-shadow: 0 0 6px #000, 0 0 2px #000; white-space: nowrap; }
#hud #skBar .skC .cd:empty { display: none; }
#hud #skBar .skC.st .cd, #hud #skBar #ultHud.lock .cd { font: 800 11px var(--font); color: #ffd45a; }
#hud #skBar .skC.off { opacity: .45; }
#hud #skBar .skC.noen { border-bottom-color: #ff6b5c; }
#hud #skBar .skC.noen kbd { color: #ff8a7a; }
#hud #skBar .skC.act, #hud #skBar .skC.ready { box-shadow: inset 0 0 0 2px var(--ac, #ffd400), 0 0 14px color-mix(in srgb, var(--ac, #ffd400) 60%, transparent); }