/* ===== 冰原掠夺者 v2 · 竖屏手机样式（测试尺寸 375×812）===== */
:root {
  --bg: #0b1d30; --bg2: #11294a; --panel: #142f52; --panel2: #1b3a63; --line: #3b6ea3; --ice: #8fd8ff; --ice2: #cfefff;
  --text: #eaf6ff; --dim: #8fb0cc; --gold: #ffd76a; --red: #ff6b6b; --green: #6ee7a0; --orange: #ffb35c; --purple: #c39bff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #050d17; color: var(--text); font: 14px/1.4 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
#app { position: relative; max-width: 480px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); }

/* ---------- 顶栏 ---------- */
#hud { position: relative; z-index: 5; padding: calc(env(safe-area-inset-top) + 5px) 6px 5px; background: linear-gradient(#0a1a2cf2, #0b1d30e6); border-bottom: 1px solid #ffffff14; }
.hud-row { display: flex; align-items: center; gap: 5px; }
.hud-row + .hud-row { margin-top: 4px; }
.lord { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; }
.lord .av { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(#2c6aa3, #183d63); border: 2px solid var(--ice); display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; flex: none; }
.lord .av img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lord .nm { font-weight: bold; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lord .pw { font-size: 12px; color: var(--gold); }
.gems { display: flex; align-items: center; gap: 3px; background: #00000050; border: 1px solid #ffffff22; border-radius: 12px; padding: 2px 8px; font-weight: bold; font-size: 13px; }
.res { flex: 1; display: flex; align-items: center; gap: 2px; background: #00000040; border: 1px solid #ffffff1a; border-radius: 11px; padding: 1px 5px 1px 2px; min-width: 0; }
.res img, .res .emo { width: 20px; height: 20px; object-fit: contain; font-size: 15px; line-height: 20px; text-align: center; flex: none; }
.res b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qchip { flex: 1; display: flex; align-items: center; gap: 4px; border: 1px solid #ffffff22; background: #ffffff0d; border-radius: 9px; padding: 2px 7px; font-size: 12px; min-width: 0; white-space: nowrap; overflow: hidden; }
.qchip.busy { border-color: #5cc8ff88; background: #2b8fd630; }
.qchip.free { color: var(--green); }
.qchip.lock { color: var(--dim); }
.qchip.ready { border-color: var(--green); background: #1f9d5540; animation: glow 1.2s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 8px #6ee7a0; } }
.qchip .t { margin-left: auto; font-variant-numeric: tabular-nums; }
#ro-banner { background: var(--red); color: #fff; text-align: center; font-size: 12px; padding: 3px; }

/* ---------- 场景（可拖动）---------- */
#view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.scene { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.scene.dragging { cursor: grabbing; }
.scene-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#city { background: #dfeef8; }
#city-inner {
  background:
    repeating-linear-gradient(26.57deg, #ffffff00 0 34px, #b9d3e455 34px 35px),
    repeating-linear-gradient(-26.57deg, #ffffff00 0 34px, #b9d3e455 34px 35px),
    radial-gradient(ellipse at 50% 45%, #f6fbff 0%, #e3f0f9 55%, #c8dff0 100%);
}
.plaza { position: absolute; background: #c3d0da; border: 3px solid #ffffffb0; transform: translate(-50%, -50%) scaleY(.5) rotate(45deg); box-shadow: inset 0 0 30px #8fa3b366; }
.road { position: absolute; height: 34px; background: #c3d0da; border-top: 2px solid #ffffffb0; border-bottom: 2px solid #ffffffb0; transform-origin: 0 50%; }
.deco { position: absolute; pointer-events: none; transform: translate(-50%, -100%); line-height: 1; filter: saturate(.5) brightness(1.15) drop-shadow(0 3px 2px #0003); }
.bld { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.bld .pad { position: absolute; bottom: 10px; left: 50%; width: 120px; height: 52px; transform: translateX(-50%); background: radial-gradient(ellipse, #7f98ab66 0 50%, transparent 70%); pointer-events: none; }
.bld.big .pad { width: 210px; height: 96px; }
.bld .art { position: relative; height: 86px; display: flex; align-items: flex-end; justify-content: center; }
.bld.big .art { height: 160px; }
.bld .art img { max-width: 100px; max-height: 86px; object-fit: contain; filter: drop-shadow(0 6px 4px #0004); }
.bld.big .art img { max-width: 200px; max-height: 160px; }
.bld .art .emo { font-size: 56px; line-height: 1; filter: drop-shadow(0 6px 4px #0004); }
.bld.locked .art { opacity: .35; filter: grayscale(1); }
.bld.locked .art .emo, .bld.empty .art .emo { font-size: 44px; }
.plate { position: relative; margin-top: 2px; background: #0b2238e0; color: #fff; border-radius: 8px; padding: 1px 8px; font-size: 12px; white-space: nowrap; display: flex; gap: 4px; align-items: center; box-shadow: 0 2px 4px #0005; }
.plate i { font-style: normal; background: var(--ice); color: #06213a; border-radius: 6px; padding: 0 4px; font-size: 11px; font-weight: bold; }
.bld.locked .plate { background: #33445599; color: #dde; }
.bld.empty .plate { background: #19703fe0; }
.prog { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 116px; background: #0b2238e8; border-radius: 8px; padding: 2px 5px; font-size: 11px; color: #fff; text-align: center; z-index: 2; font-variant-numeric: tabular-nums; }
.prog .bar { margin: 2px 0 0; height: 5px; }
.prog.free { background: #19703fe8; }
.bubble { position: absolute; top: 4px; right: -10px; z-index: 3; display: flex; align-items: center; gap: 2px; background: #fff; color: #0b2238; border-radius: 14px; padding: 2px 7px 2px 3px; font-size: 12px; font-weight: bold; box-shadow: 0 2px 6px #0006; border: 2px solid var(--gold); animation: bob 1.6s ease-in-out infinite; }
.bubble img, .bubble .emo { width: 20px; height: 20px; font-size: 16px; line-height: 20px; object-fit: contain; }
.bubble.full { border-color: var(--red); }
@keyframes bob { 50% { transform: translateY(-4px); } }
.up-arrow { position: absolute; top: 22px; left: 0; z-index: 3; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(#8ff0b5, #2fb46a); color: #04331a; font-weight: 900; font-size: 15px; line-height: 24px; text-align: center; box-shadow: 0 2px 4px #0006; }
.bld.hl .plate { outline: 3px solid var(--gold); animation: glow 1s infinite; }

/* 世界地图 */
#world { background: #cfe3f1; }
#world-inner {
  background:
    repeating-linear-gradient(0deg, transparent 0 63px, #9fc0d855 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, #9fc0d855 63px 64px),
    #d8e9f5;
}
.ent { position: absolute; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.ent .e { font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 2px #0004); }
.ent img.e { width: 46px; height: 46px; object-fit: contain; }
.ent .l { position: absolute; bottom: 1px; font-size: 10px; background: #0b2238d0; color: #fff; border-radius: 6px; padding: 0 4px; white-space: nowrap; }
.ent.lord .l { background: #8f2020e0; }
.ent.field .l { background: #19703fe0; }
.ent.beast .l { background: #7a4a10e0; }
.ent.camp .l { background: #5b2a8fe0; }
.ent.lord .n { position: absolute; top: -4px; font-size: 10px; color: #0b2238; font-weight: bold; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.ent.special .e { font-size: 40px; }
.ent.special { background: radial-gradient(circle, #c39bff66 0, transparent 70%); }
.ent.home { width: 192px; height: 192px; background: radial-gradient(circle, #6fd0ff77 0, transparent 65%); }
.ent.home img.e { width: 150px; height: 140px; }
.ent.home .l { background: #2b8fd6; font-size: 12px; bottom: 8px; }
.ent.sel { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 8px; }
#coord { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 4; background: #0b2238e0; border-radius: 12px; padding: 3px 4px 3px 12px; font-size: 13px; font-weight: bold; display: flex; gap: 8px; align-items: center; white-space: nowrap; }

/* 悬浮按钮 / 任务条 */
#float-btns { position: absolute; right: 8px; top: 8px; z-index: 4; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.fbtn { border: 2px solid #fff; border-radius: 14px; background: linear-gradient(#ffe48a, #f0b429); color: #4a3000; font-weight: bold; font-size: 12px; padding: 4px 10px; box-shadow: 0 3px 8px #0006; display: flex; align-items: center; gap: 4px; }
.fbtn.blue { background: linear-gradient(#5cc8ff, #2b8fd6); color: #04203a; }
#task-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4; }
.task { display: flex; align-items: center; gap: 8px; background: #0b2238ee; border: 1px solid #ffffff2a; border-radius: 12px; padding: 6px 8px; box-shadow: 0 3px 10px #0007; }
.task .ic { font-size: 22px; }
.task .tx { flex: 1; min-width: 0; font-size: 13px; }
.task .tx small { display: block; color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task .tx b { color: var(--gold); }
.task.done { border-color: var(--green); }

/* ---------- 底部导航 ---------- */
#nav { position: relative; z-index: 21; display: grid; grid-template-columns: repeat(6, 1fr); background: #0a1a2c; border-top: 1px solid #ffffff1a; padding-bottom: env(safe-area-inset-bottom); }
#nav button { border: 0; background: none; padding: 5px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; color: var(--dim); position: relative; }
#nav button img, #nav button .emo { width: 30px; height: 30px; object-fit: contain; font-size: 22px; line-height: 30px; }
#nav button.on { color: var(--gold); }
#nav button.soon { opacity: .45; }
#nav button.world { background: linear-gradient(#1d4a78, #11294a); border-left: 1px solid #ffffff22; color: var(--ice2); font-weight: bold; }
#nav .dot { position: absolute; top: 3px; right: 22%; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ---------- 底部面板 ---------- */
#sheet, #modal { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; }
#sheet { align-items: flex-end; bottom: calc(57px + env(safe-area-inset-bottom)); }
#nav { position: relative; z-index: 21; }
.sheet-mask, .modal-mask { position: absolute; inset: 0; background: #000a; }
.sheet-body { position: relative; width: 100%; max-width: 480px; height: 86%; background: linear-gradient(#173a61, #0f2742); border-radius: 16px 16px 0 0; border-top: 2px solid var(--ice); display: flex; flex-direction: column; animation: up .18s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
.sheet-head { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #ffffff1a; font-size: 16px; }
.sheet-head b { flex: 1; }
.x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #ffffff18; font-size: 14px; }
#sheet-content { flex: 1; overflow-y: auto; padding: 10px 10px calc(env(safe-area-inset-bottom) + 16px); }
#modal { align-items: center; z-index: 30; }
.modal-body { position: relative; width: calc(100% - 32px); max-width: 400px; max-height: 86%; overflow-y: auto; background: linear-gradient(#1c4470, #12304f); border: 2px solid var(--ice); border-radius: 14px; padding: 14px; box-shadow: 0 10px 40px #000c; animation: pop .15s ease-out; }
@keyframes pop { from { transform: scale(.92); opacity: .5; } }
.modal-body h3 { margin: 0 0 8px; font-size: 17px; text-align: center; }

/* ---------- 通用卡片 / 按钮 ---------- */
.card { display: flex; gap: 10px; background: #ffffff0d; border: 1px solid #ffffff1a; border-radius: 12px; padding: 8px; margin-bottom: 8px; }
.card .pic { width: 56px; height: 56px; flex: none; object-fit: contain; }
.card .pic.emo { font-size: 36px; line-height: 56px; text-align: center; }
.card .pic.tall { height: 72px; }
.card .body { flex: 1; min-width: 0; }
.card .name { font-weight: bold; font-size: 15px; }
.card .name small { font-weight: normal; color: var(--dim); font-size: 12px; margin-left: 4px; }
.card .desc { font-size: 12px; color: var(--dim); margin: 2px 0; }
.card .desc em { color: var(--green); font-style: normal; }
.cost { font-size: 12px; display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 3px 0; }
.cost span.no { color: var(--red); }
.cost img, .cost .emo { width: 14px; height: 14px; vertical-align: -2px; font-size: 12px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.btn { border: 0; border-radius: 9px; padding: 6px 12px; font-weight: bold; background: linear-gradient(#5cc8ff, #2b8fd6); color: #04203a; box-shadow: 0 2px 0 #13598f; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.gold { background: linear-gradient(#ffe48a, #f0b429); box-shadow: 0 2px 0 #a0700f; }
.btn.red { background: linear-gradient(#ff8f8f, #e04848); color: #fff; box-shadow: 0 2px 0 #8f2020; }
.btn.green { background: linear-gradient(#8ff0b5, #2fb46a); box-shadow: 0 2px 0 #19703f; }
.btn.ghost { background: #ffffff18; color: var(--text); box-shadow: none; border: 1px solid #ffffff2a; }
.btn.sm { padding: 3px 8px; font-size: 12px; border-radius: 7px; }
.btn.wide { width: 100%; padding: 9px; font-size: 15px; }
.btn[disabled] { background: #5a6b7c; color: #c7d2dc; box-shadow: none; opacity: .75; }
.why { font-size: 11px; color: var(--orange); }
.sec { margin: 12px 0 6px; font-size: 13px; color: var(--ice); font-weight: bold; display: flex; align-items: center; gap: 6px; }
.sec::after { content: ''; flex: 1; height: 1px; background: #8fd8ff33; }
.note { font-size: 12px; color: var(--dim); background: #00000025; border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; }
.kv span:nth-child(odd) { color: var(--dim); }
.bar { height: 6px; background: #00000050; border-radius: 3px; overflow: hidden; margin: 3px 0; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #4fb6ff, #a8ecff); }
.troops { display: flex; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.troops span { display: inline-flex; align-items: center; gap: 2px; }
.troops img { width: 20px; height: 20px; object-fit: contain; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { border: 1px solid #ffffff30; background: #ffffff10; border-radius: 14px; padding: 4px 10px; font-size: 12px; }
.chip.on { background: var(--ice); color: #06213a; border-color: var(--ice); font-weight: bold; }
.chip[disabled] { opacity: .4; }
input[type=range] { width: 100%; accent-color: var(--ice); }
input[type=number], input[type=text], textarea, select { background: #0a1a2c; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: inherit; }
textarea { width: 100%; min-height: 90px; font-size: 11px; }
.good { color: var(--green); } .bad { color: var(--red); } .warn { color: var(--orange); } .gold-t { color: var(--gold); }
.verdict { text-align: center; font-weight: bold; padding: 6px; border-radius: 8px; margin: 6px 0; }
.verdict.good { background: #1f9d5530; } .verdict.bad { background: #e0484830; } .verdict.warn { background: #ffb35c30; }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs button { flex: 1; border: 1px solid #ffffff22; background: #ffffff0d; border-radius: 8px; padding: 6px 0; font-size: 13px; }
.tabs button.on { background: var(--ice); color: #06213a; font-weight: bold; }
.rep { padding: 8px; border-radius: 10px; margin-bottom: 6px; background: #ffffff0d; border-left: 4px solid var(--green); }
.rep.lose { border-left-color: var(--red); }
.rep .t { font-weight: bold; } .rep .s { font-size: 12px; color: var(--dim); }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; text-align: center; margin: 8px 0; }
.vs .big { font-size: 18px; font-weight: bold; }
.vs .mid { font-size: 22px; font-weight: 900; color: var(--gold); }
table.t { width: 100%; border-collapse: collapse; font-size: 12px; }
table.t td, table.t th { padding: 3px 4px; border-bottom: 1px solid #ffffff14; text-align: right; }
table.t td:first-child, table.t th:first-child { text-align: left; }
table.t th { color: var(--dim); font-weight: normal; }

/* ---------- 提示 ---------- */
#toasts { position: fixed; left: 50%; top: 92px; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 4px; align-items: center; pointer-events: none; width: 92%; max-width: 440px; }
.toast { background: #000000d0; color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 13px; animation: tin .2s ease-out; text-align: center; }
.toast.err { background: #b3262ee8; }
.toast.ok { background: #19703fe8; }
@keyframes tin { from { transform: translateY(-8px); opacity: 0; } }
.emo { font-style: normal; display: inline-block; }

/* ---------- M2 军队 ---------- */
.troops { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.troops span { display: inline-flex; align-items: center; gap: 3px; background: #ffffff12; border-radius: 8px; padding: 2px 6px 2px 2px; font-size: 12px; }
.troops span img, .troops span .emo { width: 22px; height: 22px; object-fit: contain; font-size: 16px; line-height: 22px; }
.troops span b { color: var(--gold); margin-left: 2px; }
.selrow { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #ffffff12; }
.selrow img, .selrow > .emo { width: 30px; height: 30px; object-fit: contain; font-size: 22px; }
.selrow .nm { flex: 1; min-width: 0; font-size: 13px; }
.selrow .nm small { display: block; color: var(--dim); font-size: 11px; }
.selrow .num { min-width: 46px; text-align: center; font-size: 15px; color: var(--gold); font-variant-numeric: tabular-nums; }
img.tpic, .emo.tpic { width: 48px; height: 48px; object-fit: contain; font-size: 36px; flex: none; }
.tag { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; background: #0b2238e8; color: #fff; border-radius: 8px; padding: 1px 6px; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag.idle { background: #b23a2ae8; }
.fbtn.red { background: linear-gradient(#ff8a7a, #d33); color: #fff; animation: glow 1s infinite; }
.fbtn.ghost { background: #0b2238e0; color: #fff; border-color: #ffffff66; }
.fbtn .cnt { font-style: normal; background: var(--red); color: #fff; border-radius: 9px; min-width: 18px; padding: 0 4px; font-size: 11px; text-align: center; }
.ent.dead { opacity: .45; filter: grayscale(.7); }
.ent .flag { position: absolute; top: 0; right: 2px; font-size: 16px; }
#march-lines { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; }
#march-dots { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; }
.mdot { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid #e08a00; font-size: 15px; line-height: 24px; text-align: center; box-shadow: 0 2px 6px #0006; }
.mdot small { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); background: #0b2238e0; color: #fff; border-radius: 6px; padding: 0 4px; font-size: 10px; white-space: nowrap; line-height: 16px; font-variant-numeric: tabular-nums; }
.mdot.enemy { border-color: #ff2020; background: #ffe0e0; }
.card.warnc { border-color: var(--red); background: #5a1a1a80; }
.rep { background: #ffffff0d; border-left: 4px solid var(--green); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; cursor: pointer; }
.rep.lose { border-left-color: var(--red); }
.rep .rt { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.rep .rt small { color: var(--dim); white-space: nowrap; }
.sec.bad { color: var(--red); }
img.tpic.sm { width: 32px; height: 32px; }

/* ---------- M3 英雄 / 科技 ---------- */
.hchip { position: relative; display: inline-flex; align-items: center; gap: 4px; border: 2px solid; border-radius: 18px; padding: 2px 8px 2px 2px; background: #00000040; font-size: 12px; margin: 2px; }
.hchip img, .hchip .emo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top; background: #ffffff14; font-size: 18px; line-height: 28px; text-align: center; }
.hchip small { color: var(--dim); }
.hchip i { position: absolute; top: -8px; right: -4px; font-style: normal; font-size: 10px; background: var(--gold); color: #3a2600; border-radius: 6px; padding: 0 4px; font-weight: bold; }
.hchip.on { background: #8fd8ff33; box-shadow: 0 0 0 1px var(--ice); }
.hchip.off { opacity: .45; }
.hchip.off i { background: #8fb0cc; }
.hpick { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.hgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.hgrid.pull { grid-template-columns: repeat(5, 1fr); }
.hcard { position: relative; border: 2px solid var(--qc); border-radius: 10px; background: linear-gradient(#ffffff10, #00000040); padding: 3px 2px 4px; text-align: center; min-width: 0; }
.hcard img.hp, .hcard .emo.hp { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 7px; display: block; font-size: 30px; }
.hcard .hn { font-weight: bold; font-size: 12px; white-space: nowrap; overflow: hidden; color: var(--qc); }
.hcard .hn small { color: var(--dim); font-weight: normal; margin-left: 2px; }
.hcard .hs { font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.hcard.no { opacity: .5; filter: grayscale(.7); }
.hcard .hbusy { position: absolute; top: 2px; left: 2px; font-style: normal; font-size: 10px; background: #1a8a4a; border-radius: 5px; padding: 0 3px; }
.hcard .dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.hcard.gold { animation: glow 1.2s infinite alternate; }
.stars { display: block; font-size: 11px; color: var(--gold); white-space: nowrap; }
.stars i { font-style: normal; color: #ffffff40; }
.hhead { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.hhead img.hbig, .hhead .emo.hbig { width: 84px; height: 84px; border: 3px solid var(--qc); border-radius: 12px; object-fit: cover; object-position: top; flex: none; font-size: 50px; text-align: center; line-height: 84px; }
.card.recruit .btn small { display: block; font-size: 11px; opacity: .85; }
.btn small { font-size: 11px; margin-left: 3px; opacity: .85; }
.tech { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #ffffff1a; border-radius: 10px; background: #ffffff0a; margin-bottom: 5px; }
.tech .te { font-size: 22px; width: 28px; text-align: center; }
.tech .tn { flex: 1; min-width: 0; }
.tech .tn small { color: var(--dim); }
.tech.lock { opacity: .55; }
.tech > span:last-child { font-size: 12px; white-space: nowrap; }

/* ---------- 领主装备 ---------- */
.gdoll { display: flex; gap: 6px; align-items: stretch; margin: 6px 0 10px; }
.gcol { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gmid { width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 40px; background: radial-gradient(#8fd8ff33, transparent 70%); }
.gmid small { font-size: 11px; color: var(--dim); white-space: nowrap; }
.gslot { position: relative; border: 2px solid var(--gc); border-radius: 10px; padding: 5px 6px 5px 34px; background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 25%, transparent), #00000030); min-height: 48px; }
.gslot .ge { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 22px; }
.gslot .gno { position: absolute; top: -7px; left: -5px; background: var(--gc); color: #102030; border-radius: 50%; width: 16px; height: 16px; font-size: 11px; font-weight: bold; text-align: center; line-height: 16px; }
.gslot b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gslot small { color: var(--gc); font-weight: bold; font-size: 12px; }
.gslot .dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.lord { position: relative; } .lord .ldot { position: absolute; left: 28px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

/* ---------- 联盟 ---------- */
.fbtn.gold { background: linear-gradient(#ffe08a, #e0a020); color: #3a2400; font-weight: bold; animation: glow 1.4s infinite; }

/* ---------- M5 任务 / 商店 ---------- */
.tabs .dot { position: absolute; top: 2px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.trow { padding: 6px 4px; border-bottom: 1px solid #ffffff12; gap: 8px; }
.trow.done { opacity: .6; }
.boxes, .fund { display: flex; gap: 4px; margin: 6px 0 10px; flex-wrap: wrap; }
.boxb { flex: 1; min-width: 52px; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 8px; border: 1px solid #ffffff22; background: #ffffff0d; color: inherit; }
.boxb span { font-size: 20px; } .boxb b { font-size: 12px; } .boxb small { font-size: 11px; color: var(--dim); }
.boxb.can { border-color: var(--gold, #ffd34d); background: #ffd34d22; animation: glow 1.4s infinite; }
.boxb.got { opacity: .5; }
.boxb:disabled { cursor: default; }
.sign7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.sday { border: 1px solid #ffffff22; border-radius: 8px; padding: 4px; text-align: center; background: #ffffff0d; }
.sday small { display: block; color: var(--dim); font-size: 11px; } .sday span { font-size: 22px; } .sday b { display: block; font-size: 11px; font-weight: normal; }
.sday.got { opacity: .5; } .sday.today { border-color: #6fe08a; background: #6fe08a22; }
.coupon { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: linear-gradient(90deg, #ffd34d33, #ffffff0a); }
.coupon b { font-size: 18px; color: #ffd34d; margin-left: 4px; }
.gold-c { border: 1px solid #ffd34d88; }
.gpacks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.gpack { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 10px; border: 1px solid #8fd8ff55; background: #8fd8ff14; color: inherit; }
.gpack span { font-size: 26px; } .gpack b { font-size: 13px; } .gpack b small { color: #6fe08a; font-size: 11px; } .gpack em { font-style: normal; margin-top: 4px; color: #ffd34d; font-weight: bold; }
.gpack .x2 { position: absolute; top: -6px; right: -4px; background: var(--red); color: #fff; font-style: normal; font-size: 10px; padding: 1px 4px; border-radius: 6px; }

/* =====================================================================
   换肤：参考无尽冬日（亮冰蓝底、白字描边、圆角大按钮、稀有度底色格子）
   放在文件最后，覆盖上面的暗色样式
   ===================================================================== */
:root {
  --bg: #3c70b4; --panel: #2f62a3; --panel2: #3b72b8; --line: #7fb3ea; --ice: #bfe6ff; --ice2: #e6f5ff;
  --text: #ffffff; --dim: #c3dbf4; --gold: #ffd84d; --green: #8ef07a; --red: #ff5a4a;
  --ink: #163a6b;                      /* 描边色 */
  --stroke: 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 2px 2px #0b2a5280;
}
html, body { background: #1b3d6b; }
#app { background: linear-gradient(#4b84c8, #2c5d9c); }
b, .btn, h3, .name, #nav button, .fbtn, .plate, .tabs button, .sec, .hn, .hlv, .icnt, .iface, .ent .l { text-shadow: var(--stroke); }

/* ---------- 顶栏 ---------- */
#hud { background: linear-gradient(#5d95d6, #3b6fb3); border-bottom: 2px solid #9fcaf5; box-shadow: 0 3px 8px #0b2a5260; padding-left: 6px; padding-right: 6px; }
.lord .av { width: 46px; height: 46px; border-radius: 10px; border: 3px solid #fff; background: linear-gradient(#ffeaa8, #f0b850); font-size: 28px; box-shadow: 0 2px 4px #0b2a5280; }
.lord .nm { font-size: 14px; text-shadow: var(--stroke); }
.lord .pw { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; background: #1d4378; border: 1px solid #7fb3ea; border-radius: 8px; padding: 0 8px; color: #fff; font-weight: bold; text-shadow: var(--stroke); }
.gems { background: #1d4378; border: 2px solid #7fb3ea; border-radius: 10px; padding: 3px 10px; font-size: 15px; text-shadow: var(--stroke); box-shadow: inset 0 2px 3px #0b2a5280; }
.gems::after { content: '+'; margin-left: 6px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 5px; background: linear-gradient(#9cf07a, #3fb43a); border: 1px solid #fff; font-size: 15px; }
.res { background: #1d4378; border: 2px solid #6a9fd8; border-radius: 10px; padding: 2px 6px 2px 2px; box-shadow: inset 0 2px 3px #0b2a5280; }
.res b { font-size: 13px; text-shadow: var(--stroke); }
.qchip { background: #1d4378cc; border: 2px solid #6a9fd8; border-radius: 10px; font-weight: bold; text-shadow: var(--stroke); }
.qchip.busy { background: linear-gradient(90deg, #2c6fbf, #1d4378); border-color: #8fd0ff; }
.qchip.free { color: #c8ffb8; }
.qchip.ready { background: linear-gradient(90deg, #3fb43a, #1d4378); border-color: #b8ff9c; }

/* ---------- 底部导航：深蓝条 + 白字，右边「世界/城镇」凸起大按钮 ---------- */
#nav { background: linear-gradient(#3e6eae, #2a5290); border-top: 3px solid #a9d3fb; box-shadow: 0 -3px 8px #0b2a5260; overflow: visible; }
#nav button { color: #fff; font-size: 13px; font-weight: bold; padding: 6px 0 7px; }
#nav button + button { border-left: 1px solid #ffffff2a; }
#nav button img, #nav button .emo { width: 34px; height: 34px; font-size: 26px; line-height: 34px; filter: drop-shadow(0 2px 1px #0b2a52a0); }
#nav button.on { background: linear-gradient(#6aa6e8, #3e74ba); color: #fff7c4; }
#nav button.world { margin: -16px 2px 4px; border: 3px solid #f2f8ff; border-radius: 16px; background: linear-gradient(#7fbaf3, #3a70bb); box-shadow: 0 4px 0 #1d4b88, 0 6px 10px #0b2a5280; color: #fff; font-size: 14px; z-index: 2; }
#nav button.world::before { content: ''; position: absolute; left: -3px; right: -3px; top: -6px; height: 10px; border-radius: 10px 10px 4px 4px; background: #fff; box-shadow: 0 2px 0 #d6ebff; } /* 积雪 */
#nav button.world img, #nav button.world .emo { width: 40px; height: 40px; font-size: 30px; line-height: 40px; }
#nav .dot, .tabs .dot, .hcard .dot, .gslot .dot, .lord .ldot { background: #ff3b30; border: 2px solid #fff; width: 12px; height: 12px; }

/* ---------- 右侧悬浮按钮：蓝色圆角方块 ---------- */
#float-btns { gap: 10px; }
.fbtn { border: 3px solid #e6f3ff; border-radius: 14px; background: linear-gradient(#6fa9ea, #3768b0); color: #fff; font-size: 13px; padding: 6px 10px; box-shadow: 0 3px 0 #1d4b88, 0 5px 8px #0b2a5260; text-shadow: var(--stroke); }
.fbtn.blue { background: linear-gradient(#6fa9ea, #3768b0); color: #fff; }
.fbtn.gold, .fbtn:not(.blue):not(.red):not(.ghost) { background: linear-gradient(#ffe27a, #f0a828); color: #fff; }
.fbtn.red { background: linear-gradient(#ff8a6a, #d8342a); }
.fbtn.ghost { background: #1d4378e0; border-color: #9fcaf5; }
.fbtn .cnt { background: #ff3b30; border: 2px solid #fff; }

/* 左下任务条：半透明深色条，左边圆形卷轴图标 */
.task { background: #16325ce0; border: 2px solid #6a9fd8; border-radius: 30px; padding: 4px 8px 4px 4px; }
.task .ic { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(#9fd4ff, #3a77c4); border: 3px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; box-shadow: 0 2px 4px #0b2a5280; }
.task .tx { font-weight: bold; text-shadow: var(--stroke); }
.task .tx small { color: #c3dbf4; font-weight: normal; text-shadow: none; }

/* ---------- 城镇 / 世界地图上的牌子 ---------- */
.plate { background: #1d3a66e8; border: 1px solid #8fc6f5; border-radius: 6px; font-weight: bold; }
.plate i { background: linear-gradient(#c38cff, #8a4fd6); color: #fff; border: 1px solid #fff; text-shadow: var(--stroke); }
.prog { background: #16325ce8; border: 1px solid #8fc6f5; font-weight: bold; }
.bar { background: #0f2a50; border: 1px solid #5f8fc8; height: 8px; border-radius: 5px; }
.bar i { background: linear-gradient(#a8f07a, #3fb43a); }
.ent .l { background: #1d3a66d8; border: 1px solid #8fc6f580; border-radius: 6px; font-weight: bold; font-size: 11px; padding: 0 5px; }
.ent.home .l { background: linear-gradient(#c38cff, #8a4fd6); color: #fff; }
#coord { background: #16325ce8; border: 2px solid #6a9fd8; border-radius: 16px; text-shadow: var(--stroke); }
.mdot small { background: #16325ce8; }

/* ---------- 全屏页面（英雄 / 背包 / 商店…）：蓝底、左上返回箭头 ---------- */
#sheet { bottom: calc(60px + env(safe-area-inset-bottom)); }
.sheet-mask { background: #0b2a5299; }
.sheet-body { height: 100%; border-radius: 0; border-top: 0; background: linear-gradient(#4a82c6 0, #2f62a3 80px, #2a5a99); }
.sheet-head { border-bottom: 0; padding: 8px 10px 6px; gap: 8px; }
.sheet-head b { font-size: 22px; letter-spacing: 1px; }
.back { flex: none; width: 52px; height: 38px; border: 0; padding: 0; background: none; position: relative; }
.back::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#f2fbff, #a9dcff); clip-path: polygon(0 50%, 42% 0, 42% 28%, 100% 28%, 100% 72%, 42% 72%, 42% 100%); filter: drop-shadow(0 2px 0 #3a77c4); }
#sheet-content { margin: 0 8px 8px; padding: 10px; background: #24518e; border: 2px solid #5f95d3; border-radius: 16px; box-shadow: inset 0 3px 6px #0b2a5260; }

/* ---------- 弹窗 ---------- */
.modal-mask { background: #0b2a52b0; }
.modal-body { background: linear-gradient(#3a75bd, #24518e); border: 3px solid #a9dcff; border-radius: 18px; box-shadow: 0 0 0 2px #1d4b88, 0 12px 40px #0b2a52cc; }
.modal-body h3 { font-size: 19px; }

/* ---------- 卡片 / 文字 ---------- */
.card { background: linear-gradient(#4179bf, #33679f); border: 2px solid #6fa6e0; border-radius: 14px; box-shadow: inset 0 1px 0 #9fd0ff80, 0 2px 0 #1d4b88; }
.card .name small, .card .desc, .desc { color: var(--dim); text-shadow: none; }
.sec { color: #fff; font-size: 14px; }
.sec::after { background: linear-gradient(90deg, #9fd0ff80, transparent); height: 2px; }
.note { background: #1a4277b0; color: #d8eaff; border: 1px solid #5f95d380; border-radius: 10px; }
.kv span:nth-child(odd) { color: var(--dim); }
.chip { background: #1d4378; border: 2px solid #6a9fd8; font-weight: bold; }
.chip.on { background: linear-gradient(#fff, #d6ebff); color: #2a5a99; border-color: #fff; }
input[type=number], input[type=text], textarea, select { background: #16325c; border: 2px solid #6a9fd8; color: #fff; }

/* ---------- 按钮：亮蓝大圆角 + 白字描边 ---------- */
.btn { border: 2px solid #1d5aa8; border-radius: 12px; padding: 7px 14px; background: linear-gradient(#8fd2ff 0, #4aa2f5 45%, #2f7fe0 100%); color: #fff; box-shadow: inset 0 2px 0 #ffffff80, 0 3px 0 #1d4b88; }
.btn.gold { border-color: #b37a12; background: linear-gradient(#fff0a0 0, #ffd04a 45%, #f0a828 100%); color: #fff; box-shadow: inset 0 2px 0 #ffffffa0, 0 3px 0 #9a6410; }
.btn.gold, .btn.gold * { text-shadow: 0 1px 0 #8a5200, 0 -1px 0 #8a5200, 1px 0 0 #8a5200, -1px 0 0 #8a5200; }
.btn.green { border-color: #2a7a22; background: linear-gradient(#c4ff9a, #6fd650 45%, #3fb43a); color: #fff; box-shadow: inset 0 2px 0 #ffffffa0, 0 3px 0 #22661c; }
.btn.red { border-color: #8a2018; background: linear-gradient(#ffb09a, #ff6a4a 45%, #d8342a); box-shadow: inset 0 2px 0 #ffffff80, 0 3px 0 #7a1810; }
.btn.ghost { border-color: #3f566e; background: linear-gradient(#93a7bc, #687f97); color: #fff; box-shadow: inset 0 2px 0 #ffffff60, 0 3px 0 #3f566e; }
.btn.sm { padding: 4px 10px; border-radius: 9px; }
.btn.wide { padding: 10px; font-size: 17px; border-radius: 14px; }
.btn[disabled] { border-color: #55657a; background: linear-gradient(#a8b4c2, #7f8ea0); color: #eef2f6; box-shadow: 0 3px 0 #55657a; opacity: 1; }

/* ---------- 页签：浅色是当前页 ---------- */
.tabs { gap: 6px; }
.tabs button { position: relative; border: 2px solid #3a6fae; border-radius: 12px; background: linear-gradient(#7fb6ef, #4f88cf); color: #fff; font-weight: bold; padding: 8px 0; font-size: 14px; }
.tabs button.on { background: linear-gradient(#f4f9ff, #d6e7f7); color: #3a6fa8; border-color: #fff; text-shadow: none; }
.tabs.top { margin: -2px -2px 10px; }

/* ---------- 英雄卡：稀有度底色、左下大字等级、雪花星 ---------- */
.hgrid { gap: 8px; }
.hcard { border: 3px solid #fff7e0; border-radius: 12px; padding: 0 0 4px; overflow: hidden; background: linear-gradient(#ffc070, #f08a2c); box-shadow: 0 3px 0 #0b2a5260; }
.hcard.q-purple { background: linear-gradient(#d2a4ff, #9459d8); border-color: #f2e4ff; }
.hcard.q-blue { background: linear-gradient(#8cc8ff, #3f84d8); border-color: #e4f3ff; }
.hcard img.hp, .hcard .emo.hp { aspect-ratio: 3 / 4; border-radius: 0; background: radial-gradient(circle at 50% 30%, #ffffff50, transparent 70%); }
.hcard .hlv { position: absolute; left: 4px; top: calc(100% - 52px); font-size: 15px; color: #fff; }
.hcard .hn { color: #fff; font-size: 12px; margin-top: 1px; }
.hcard .hs { color: #fff; opacity: .85; }
.stars { color: #5ff0ff; font-size: 12px; letter-spacing: -1px; text-shadow: 0 0 3px #0b6aa0, 0 1px 0 var(--ink); }
.stars em { font-style: normal; font-size: 10px; color: #fff; margin-right: 2px; letter-spacing: 0; }
.stars i { color: #7a5a3a80; text-shadow: none; }
.hhead img.hbig, .hhead .emo.hbig { border-color: #fff; background: linear-gradient(var(--qc), #2f62a3); }
.hchip { background: #1d4378; border-width: 2px; }

/* ---------- 背包格子：稀有度底色、左上面额、右下数量 ---------- */
.igrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.icell { position: relative; aspect-ratio: 1; border: 3px solid #ffffffb0; border-radius: 14px; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 0 #ffffff80, 0 3px 0 #0b2a5280; }
.icell.r-g { background: linear-gradient(#7ee06a, #2f9a35); }
.icell.r-b { background: linear-gradient(#7fc0f8, #3a7fd4); }
.icell.r-p { background: linear-gradient(#cf9ff8, #8e5ad6); }
.icell.r-o { background: linear-gradient(#ffc070, #f0862c); }
.icell .ie { font-size: 34px; filter: drop-shadow(0 2px 2px #0b2a5280); }
.icell .iface { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 11px; font-weight: bold; color: #fff; }
.icell .icnt { position: absolute; right: 5px; bottom: 2px; font-size: 14px; color: #fff; }
.icell.big { width: 64px; height: 64px; flex: none; }
.ihead { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.pickgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pickgrid .btn { display: flex; align-items: center; gap: 4px; justify-content: center; }
.pickgrid .btn img, .pickgrid .btn .emo { width: 20px; height: 20px; object-fit: contain; }
.pickgrid .btn small { margin-left: auto; }

/* ---------- 商店 / 任务里的格子 ---------- */
.gpack, .boxb, .sday { background: linear-gradient(#4a82c6, #33679f); border: 2px solid #8fc6f5; border-radius: 12px; }
.gpack .x2 { background: #ff3b30; border: 1px solid #fff; }
.coupon { background: linear-gradient(90deg, #f0a828, #2f62a3 70%); border: 2px solid #ffe27a; }
.coupon b { color: #fff; text-shadow: var(--stroke); }
.rep { background: #33679f; border: 2px solid #5f95d3; border-left-width: 6px; border-left-color: #6fd650; }
.rep.lose { border-left-color: #ff5a4a; }
.tech { background: #33679f; border: 2px solid #5f95d3; }
.troops span { background: #1d4378; }
.gslot { background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 45%, #2f62a3), #2a5a99); border-width: 3px; }

/* ---------- 提示：横贯屏幕的深蓝条 ---------- */
#toasts { width: 100%; max-width: 480px; top: 40%; }
.toast { width: 100%; border-radius: 0; background: linear-gradient(90deg, #16325c00, #16325cf0 15%, #16325cf0 85%, #16325c00); border-top: 1px solid #8fc6f580; border-bottom: 1px solid #8fc6f580; font-size: 16px; font-weight: bold; padding: 8px 14px; text-shadow: var(--stroke); }
.toast.ok { background: linear-gradient(90deg, #1d5a2a00, #2a7a36f0 15%, #2a7a36f0 85%, #1d5a2a00); }
.toast.err { background: linear-gradient(90deg, #8a201800, #b8302af0 15%, #b8302af0 85%, #8a201800); }

/* ---------- 可拖动进度条（训练数量）---------- */
.slide-row { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.slider { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; touch-action: none; }
.slider::-webkit-slider-runnable-track { height: 12px; border-radius: 7px; border: 2px solid #163a6b; background: linear-gradient(90deg, #a8f07a, #3fb43a) 0 / var(--p, 50%) 100% no-repeat, #0f2a50; }
.slider::-moz-range-track { height: 8px; border-radius: 7px; border: 2px solid #163a6b; background: #0f2a50; }
.slider::-moz-range-progress { height: 8px; border-radius: 7px; background: linear-gradient(90deg, #a8f07a, #3fb43a); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 40% 35%, #9fd8ff, #2f7fe0); box-shadow: 0 2px 4px #0b2a52a0; }
.slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 40% 35%, #9fd8ff, #2f7fe0); }
.num.big { font-size: 22px; color: var(--gold); text-shadow: var(--stroke); }

/* ---------- 左侧行军列表 ---------- */
#march-list { position: absolute; left: 6px; top: 8px; z-index: 4; width: 172px; display: flex; flex-direction: column; gap: 3px; }
#march-list:empty { display: none; }
.ml-head, .ml-row { border: 0; color: #fff; text-align: left; font: inherit; }
.ml-head { display: flex; align-items: center; gap: 6px; background: #16325ce8; border: 2px solid #6a9fd8; border-radius: 12px; padding: 4px 10px; font-size: 15px; font-weight: bold; text-shadow: var(--stroke); }
.ml-head span { font-size: 11px; }
.ml-head b { margin-left: auto; }
.ml-row { display: flex; align-items: center; gap: 6px; background: #16325cd0; border-radius: 10px; padding: 4px 6px; }
.ml-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(#9fd4ff, #3a77c4); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ml-row.mback .ml-ic { background: radial-gradient(#c8ffb0, #3fb43a); }
.ml-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-tx b { font-size: 12px; text-shadow: var(--stroke); }
.ml-tx small { font-size: 10px; color: #c3dbf4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-bar { position: relative; height: 14px; margin-top: 2px; background: #0f2a50; border: 1px solid #5f8fc8; border-radius: 7px; overflow: hidden; }
.ml-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#a8f07a, #3fb43a); }
.ml-bar em { position: relative; display: block; text-align: center; font-style: normal; font-size: 11px; font-weight: bold; line-height: 12px; text-shadow: var(--stroke); font-variant-numeric: tabular-nums; }

/* ---------- 建筑二级菜单（点建筑弹出：详情 / 升级 / 进入）---------- */
#bmenu { position: absolute; z-index: 5000; transform: translateX(-50%); display: none; pointer-events: auto; }
#bmenu.on { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: pop .15s ease-out; }
.bm-name { background: #16325ce8; border: 2px solid #8fc6f5; border-radius: 10px; padding: 1px 10px; color: #fff; font-weight: bold; font-size: 13px; white-space: nowrap; text-shadow: var(--stroke); }
.bm-name i { font-style: normal; background: linear-gradient(#c38cff, #8a4fd6); border: 1px solid #fff; border-radius: 6px; padding: 0 4px; font-size: 11px; }
.bm-row { display: flex; gap: 8px; }
.bm-btn { width: 58px; height: 62px; border: 3px solid #fff; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #9fd8ff, #2f7fe0 75%); color: #fff; font-weight: bold; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; text-shadow: var(--stroke); box-shadow: 0 3px 0 #1d4b88, 0 5px 10px #0b2a5280; }
.bm-btn span { font-size: 22px; line-height: 26px; text-shadow: none; }
.bm-btn.hot { background: radial-gradient(circle at 50% 35%, #c4ff9a, #3fb43a 75%); box-shadow: 0 3px 0 #22661c, 0 5px 10px #0b2a5280; }
.bm-btn:active { transform: translateY(2px); }
.bld.sel .plate { outline: 3px solid #fff; }

/* =====================================================================
   正式美术（冰原美术出图）
   ===================================================================== */
#city { background: #dcebf6; }
#city-inner { background-color: #e6f1fa; }
.deco { filter: drop-shadow(0 3px 2px #0b2a5240); }
.deco img { display: block; }
.bld .pad { display: none; }
.bld .art { height: 128px; }
.bld .art img { max-width: 150px; max-height: 128px; filter: drop-shadow(0 6px 5px #0b2a5255); }
.bld.big .art { height: 230px; }
.bld.big .art img { max-width: 250px; max-height: 230px; }
.bld.locked .art { opacity: .55; filter: grayscale(.6); }
.bld .art .lock { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); font-style: normal; font-size: 28px; }
.bld.empty .art img { opacity: .9; }
.bld .tag { bottom: 22px; }
/* 世界地图 */
.ent { width: 64px; height: 64px; }
.ent img.e { width: 74px; height: 74px; object-fit: contain; margin-top: -14px; filter: drop-shadow(0 4px 3px #0b2a5266); }
.ent.beast img.e { width: 58px; height: 58px; margin-top: -8px; }
.ent.special img.e { width: 96px; height: 96px; margin-top: -26px; }
.ent.special { background: none; }
.ent.home img.e { width: 170px; height: 170px; margin-top: -10px; }
.ent .l i { font-style: normal; display: inline-block; min-width: 16px; margin-right: 3px; padding: 0 3px; border-radius: 5px; background: linear-gradient(#c38cff, #8a4fd6); border: 1px solid #fff; text-align: center; }
.ent.lord .l i { background: linear-gradient(#ff8a6a, #c8342a); }
.ent.lord.elite .l i { background: linear-gradient(#ffe27a, #e0a020); color: #5a3500; text-shadow: none; }
.ent.lord .l, .ent.field .l, .ent.beast .l, .ent.camp .l { background: #1d3a66d8; }
/* 图标 */
.lord .pw img, .gems img { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; }
.fbtn img { width: 26px; height: 26px; object-fit: contain; margin: -4px 0; filter: drop-shadow(0 1px 1px #0b2a5280); }
.icell img.ie { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 2px #0b2a5280); }
.gslot .ge img { width: 28px; height: 28px; object-fit: contain; }
.hcard img.hp { object-fit: contain; object-position: bottom; background: radial-gradient(circle at 50% 40%, #ffffff60, transparent 70%); }
.hhead img.hbig { object-fit: cover; object-position: 50% 8%; }
.hchip img { object-fit: cover; object-position: 50% 6%; background: #2f62a3; }

/* =====================================================================
   v3 画面升级：精简顶栏、圆形图标列、主城动态、分层页面、特效
   ===================================================================== */
/* ---------- 顶栏：两行（头像+战力+钻石 / 四种资源）---------- */
#hud { padding-bottom: 6px; }
.lord .av { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 50% 35%, #ffeaa8, #e8a23a); overflow: visible; }
.lord .av img { border-radius: 50%; }
.lord .av em { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: bold; line-height: 14px; padding: 0 5px; border-radius: 7px; background: linear-gradient(#c38cff, #8a4fd6); border: 1px solid #fff; text-shadow: var(--stroke); white-space: nowrap; }
.lord .ldot { left: 40px; top: 0; }
.lord .pw { padding: 1px 10px 1px 4px; font-size: 14px; }
.fx-bump { animation: bump .45s ease-out; }
@keyframes bump { 30% { transform: scale(1.18); filter: brightness(1.4); } }

/* ---------- 右侧圆形图标列 ---------- */
#float-btns { top: 6px; right: 4px; gap: 2px; align-items: center; }
.fgap { height: 6px; }
.ficon { position: relative; width: 62px; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.ficon .fi { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #eaf6ff; background: radial-gradient(circle at 50% 35%, #8fc8ff, #2f6fc0 75%); box-shadow: 0 3px 0 #1d4b88, 0 5px 8px #0b2a5260; display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden; }
.ficon .fi img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 1px #0b2a5280); }
.ficon { margin-bottom: 2px; }
.ficon > b { position: relative; z-index: 1; margin-top: -7px; font-size: 11px; color: #fff; white-space: nowrap; background: #16325cd8; border-radius: 7px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.ficon em { position: absolute; top: 30px; right: 0; font-style: normal; font-size: 10px; font-weight: bold; background: #16325c; border: 1px solid #9fcaf5; border-radius: 6px; padding: 0 3px; color: #fff; }
.ficon .cnt { position: absolute; top: -2px; right: 4px; font-style: normal; background: #ff3b30; border: 2px solid #fff; color: #fff; border-radius: 9px; min-width: 18px; font-size: 11px; text-align: center; line-height: 14px; }
.ficon .dot { position: absolute; top: 0; right: 6px; width: 13px; height: 13px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff; }
.ficon.gold .fi { background: radial-gradient(circle at 50% 35%, #fff0a0, #f0a828 75%); box-shadow: 0 3px 0 #9a6410, 0 5px 8px #0b2a5260; }
.ficon.red .fi { background: radial-gradient(circle at 50% 35%, #ffb09a, #d8342a 75%); }
.ficon.ev .fi { width: 54px; height: 54px; border-radius: 16px; background: radial-gradient(circle at 50% 35%, #ffe7a0, #f08a2c 80%); border-color: #fff7d6; }
.ficon.ev .fi img { width: 46px; height: 46px; }
.ficon.shine .fi::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, #ffffffc0 50%, transparent 60%); animation: shine 2.4s infinite; }
.ficon.shine .fi { position: relative; animation: evglow 1.6s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
@keyframes evglow { 50% { box-shadow: 0 3px 0 #9a6410, 0 0 16px 4px #ffd84d; } }
.ficon.pulse .fi { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ---------- 左侧队列 ---------- */
#march-list { width: 158px; top: 6px; }
.ml-head .cnt { font-style: normal; font-size: 10px; background: #2fb46a; border: 1px solid #fff; border-radius: 7px; padding: 0 4px; margin-left: 2px; }
.ml-row.idle .ml-ic { background: radial-gradient(#ffd0a0, #e07a2a); animation: pulse 1.4s infinite; }
.ml-row.idle b { color: #ffd84d; }
.ml-row { padding: 3px 5px; }

/* ---------- 主城动态：飘雪、烟囱冒烟、炉火、旗子、施工 ---------- */
#snow { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
#world:not(.hidden) ~ #snow { opacity: .55; }
#snow i { position: absolute; inset: -100% 0 0 0; background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 140px 80px, #fff, transparent), radial-gradient(1.5px 1.5px at 260px 160px, #ffffffd0, transparent), radial-gradient(2.5px 2.5px at 330px 50px, #fff, transparent), radial-gradient(1.5px 1.5px at 90px 200px, #ffffffc0, transparent), radial-gradient(2px 2px at 200px 260px, #fff, transparent); background-size: 360px 300px; animation: snow 14s linear infinite; opacity: .85; }
#snow i:nth-child(2) { background-size: 260px 220px; animation-duration: 20s; opacity: .6; filter: blur(.5px); }
#snow i:nth-child(3) { background-size: 480px 420px; animation-duration: 10s; transform: scale(1.6); opacity: .9; }
@keyframes snow { from { transform: translate(0, 0); } to { transform: translate(-40px, 50%); } }
#snow i:nth-child(3) { animation-name: snow3; }
@keyframes snow3 { from { transform: scale(1.6) translate(0, 0); } to { transform: scale(1.6) translate(-30px, 50%); } }

.bld .dyn, .bld .stat { display: contents; }
.artw { position: relative; display: inline-block; line-height: 0; }
.smoke { position: absolute; width: 0; height: 0; pointer-events: none; }
.smoke i { position: absolute; left: calc(-14px * var(--k)); top: calc(-14px * var(--k)); width: calc(28px * var(--k)); height: calc(28px * var(--k)); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ffffff, #e4eef6 55%, #e4eef600 72%); opacity: 0; animation: smoke 3.2s ease-out infinite; }
.smoke i:nth-child(2) { animation-delay: .8s; } .smoke i:nth-child(3) { animation-delay: 1.6s; } .smoke i:nth-child(4) { animation-delay: 2.4s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(26px * var(--k)), calc(-95px * var(--k))) scale(2.4); } }
.glow { position: absolute; width: calc(60px * var(--k)); height: calc(46px * var(--k)); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, #ffcf5acc, #ff8a2a66 45%, transparent 70%); mix-blend-mode: screen; pointer-events: none; animation: flicker 1.3s ease-in-out infinite alternate; }
.glow.fire { background: radial-gradient(ellipse, #ffe08ae6, #ff6a2a88 40%, transparent 70%); animation-duration: .45s; }
.glow.lamp { background: radial-gradient(circle, #fff3b0d0, #ffd84d55 40%, transparent 70%); animation: lamp 3s ease-in-out infinite; }
@keyframes flicker { 0% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 40% { opacity: .95; } 70% { opacity: .7; transform: translate(-50%, -52%) scale(1.06); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes lamp { 50% { opacity: .45; } }
.deco.d_flag img { transform-origin: 20% 100%; animation: flag 2.6s ease-in-out infinite; }
@keyframes flag { 50% { transform: skewY(-3deg) scaleX(.97); } }
.deco.d_snowman img { transform-origin: 50% 100%; animation: wobble 4s ease-in-out infinite; }
@keyframes wobble { 45% { transform: rotate(0); } 50% { transform: rotate(-3deg); } 55% { transform: rotate(2deg); } 60% { transform: rotate(0); } }
.spark { position: absolute; left: 50%; top: 20%; pointer-events: none; }
.spark i { position: absolute; width: 8px; height: 8px; background: #bff4ff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.8s ease-in-out infinite; }
.spark i:nth-child(2) { left: -30px; top: 20px; animation-delay: .6s; } .spark i:nth-child(3) { left: 24px; top: 30px; animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.4) rotate(90deg); } }
/* 升级中：锤子敲 + 灰尘 */
.work { position: absolute; left: 50%; top: 18%; pointer-events: none; }
.work i { position: absolute; left: -12px; top: -26px; font-style: normal; font-size: 24px; line-height: 1; transform-origin: 80% 80%; animation: hammer .7s ease-in-out infinite; filter: drop-shadow(0 2px 1px #0006); }
.bld .art .work i img { width:32px; height:32px; max-width:none; object-fit:contain; }
.work b { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #ffffffd0; opacity: 0; animation: dust .7s ease-out infinite; }
.work b:nth-child(3) { animation-delay: .1s; --dx: -16px; } .work b:nth-child(4) { animation-delay: .2s; --dx: 14px; }
@keyframes hammer { 0%, 100% { transform: rotate(-35deg); } 45% { transform: rotate(20deg); } }
@keyframes dust { 0%, 40% { opacity: 0; transform: translate(0, 0) scale(.3); } 50% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx, 4px), -18px) scale(1.4); } }
.bld.fx-built .art img { animation: built .7s ease-out; }
@keyframes built { 0% { filter: brightness(2.2) drop-shadow(0 0 20px #fff6b0); transform: scale(1.12); } 100% { filter: none; transform: none; } }

/* ---------- 页面滑入（点进下一层）---------- */
.sheet-body.slide { animation: slidein .2s ease-out; }
@keyframes slidein { from { transform: translateX(40px); opacity: .3; } }
.panel { background: #1a4277b0; border: 2px solid #5f95d3; border-radius: 14px; padding: 8px 10px; margin: 8px 0; box-shadow: inset 0 2px 4px #0b2a5240; }
.ptitle { font-weight: bold; text-align: center; margin-bottom: 6px; text-shadow: var(--stroke); }
.ptitle small { font-weight: normal; }
.btn.big { display: block; width: 78%; margin: 8px auto 4px; padding: 11px; font-size: 19px; border-radius: 16px; letter-spacing: 2px; }
.ibtn { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 2px solid #9fcaf5; background: linear-gradient(#5d95d6, #3768b0); font-size: 17px; box-shadow: 0 2px 0 #1d4b88; }

/* ---------- 领主页：人物居中、装备环绕 ---------- */
.lhead { display: flex; align-items: center; gap: 10px; }
.lav { width: 58px; height: 58px; flex: none; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 50% 35%, #ffeaa8, #e8a23a); display: flex; align-items: center; justify-content: center; font-size: 32px; overflow: hidden; }
.lav img { width: 100%; height: 100%; object-fit: cover; }
.lnm { flex: 1; min-width: 0; } .lnm > b { font-size: 17px; }
.lpw { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; background: #1d4378; border: 1px solid #7fb3ea; border-radius: 8px; padding: 0 8px 0 3px; font-weight: bold; text-shadow: var(--stroke); }
.lpw img { width: 18px; height: 18px; }
.stage { position: relative; height: 330px; margin: 10px -4px 6px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #8fd0ff 0, #4a82c6 40%, #24518e 75%); }
.stage-glow { position: absolute; left: 50%; top: 0; width: 220px; height: 100%; transform: translateX(-50%); background: linear-gradient(#ffffff70, #ffffff00 85%); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.stage-floor { position: absolute; left: 50%; bottom: 24px; width: 190px; height: 44px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, #c38cffb0, #8a4fd650 50%, transparent 72%); }
.lord-art { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); width: 170px; height: 270px; display: flex; align-items: flex-end; justify-content: center; }
.lord-art img.lfull { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px #0b2a5280); }
.lord-art .emo.lfull { font-size: 110px; line-height: 1; margin-bottom: 40px; filter: drop-shadow(0 0 20px #ffe27a); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.stage .gcol { position: absolute; top: 14px; bottom: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.stage .gcol.l { left: 10px; } .stage .gcol.r { right: 10px; }
.gslot2 { position: relative; width: 78px; height: 86px; border: 3px solid #fff; border-radius: 14px; padding: 0; background: linear-gradient(color-mix(in srgb, var(--gc) 75%, #fff), color-mix(in srgb, var(--gc) 85%, #000)); box-shadow: 0 3px 0 #0b2a5280, inset 0 2px 0 #ffffff90; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gslot2 .gimg { height: 52px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.gslot2 .gimg img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 2px #0b2a5280); }
.gslot2 .gno { position: absolute; top: -8px; left: -8px; width: 20px; height: 20px; border-radius: 50%; background: #16325c; border: 2px solid #fff; font-size: 11px; font-weight: bold; line-height: 16px; }
.gslot2 .glv { position: absolute; top: 2px; right: 5px; font-size: 13px; }
.gpips { display: flex; gap: 3px; margin-top: 2px; }
.gpips i, .gsegs i { width: 11px; height: 6px; border-radius: 3px; background: #0b2a5290; border: 1px solid #ffffff60; }
.gpips i.on, .gsegs i.on { background: linear-gradient(#c4ff9a, #3fb43a); }
.gslot2 .dot { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff; }
.stage-q { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #16325c; font-weight: bold; }
.lbar { display: flex; align-items: center; justify-content: space-between; background: #16325c; border: 2px solid #5f95d3; border-radius: 12px; padding: 6px 10px; font-weight: bold; text-shadow: var(--stroke); }
.mats { display: flex; gap: 8px; margin-top: 8px; }
.mat { flex: 1; display: flex; flex-direction: column; align-items: center; background: #1a4277b0; border: 2px solid #5f95d3; border-radius: 12px; padding: 4px; }
.mat img, .mat .emo { width: 34px; height: 34px; object-fit: contain; font-size: 24px; }
.mat small { font-size: 11px; color: var(--dim); }

/* 装备详情 */
.gtabs { display: flex; gap: 5px; justify-content: center; }
.gt { position: relative; width: 48px; height: 48px; padding: 2px; border: 3px solid #ffffff70; border-radius: 12px; background: linear-gradient(color-mix(in srgb, var(--gc) 70%, #fff), color-mix(in srgb, var(--gc) 85%, #000)); opacity: .75; }
.gt.on { border-color: #fff; opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px #fff9; }
.gt img { width: 100%; height: 100%; object-fit: contain; }
.gt .dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff; }
.gbig { position: relative; text-align: center; padding: 14px 0 6px; overflow: hidden; }
.gbig-rays { position: absolute; left: 50%; top: 60px; width: 300px; height: 300px; margin: -150px 0 0 -150px; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 55%, transparent) 0 10deg, transparent 10deg 30deg); mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gbig-img { position: relative; width: 110px; height: 110px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 70px; animation: float 3s ease-in-out infinite; }
.gbig-img img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 12px var(--gc)); }
.gbig-name { position: relative; font-size: 20px; font-weight: bold; color: var(--gc); text-shadow: var(--stroke); }
.gbig-sub { position: relative; font-size: 12px; color: var(--dim); }
.gsegs { position: relative; display: flex; gap: 4px; justify-content: center; margin: 6px 0 2px; }
.gsegs i { width: 34px; height: 9px; }
.gtier { position: relative; font-weight: bold; font-size: 15px; text-shadow: var(--stroke); }
.arow { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 15px; }
.arow span { flex: 1; color: var(--dim); }
.arow .arr { font-style: normal; color: #8ef07a; }
.ccells { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ccell { width: 66px; text-align: center; }
.ccell .icell { width: 60px; height: 60px; margin: 0 auto; }
.ccell .icell img, .ccell .icell .emo { width: 78%; height: 78%; object-fit: contain; font-size: 28px; }
.ccell small { display: block; font-size: 12px; margin-top: 2px; }
.ccell small.no b { color: #ff7a6a; }
.fx-flash { animation: gflash .6s ease-out; }
@keyframes gflash { 0% { filter: brightness(3) drop-shadow(0 0 20px #fff); transform: scale(1.25); } 100% { filter: none; transform: none; } }

/* ---------- 商城 ---------- */
.cbar { display: flex; align-items: center; gap: 6px; background: linear-gradient(90deg, #f0a828, #2f62a3 75%); border: 2px solid #ffe27a; border-radius: 12px; padding: 4px 6px; font-weight: bold; text-shadow: var(--stroke); }
.cbar .cp img, .cbar .cp .emo, .pricebtn .cp img, .gpack2 em img, .gpack2 .gp-img img { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
.cbar b { font-size: 18px; margin-right: auto; }
.otabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 6px; margin: 0 -4px; scrollbar-width: none; }
.otabs::-webkit-scrollbar { display: none; }
.otab { position: relative; flex: none; width: 64px; padding: 4px 0 3px; border: 2px solid #3a6fae; border-radius: 12px; background: linear-gradient(#4f88cf, #2f62a3); display: flex; flex-direction: column; align-items: center; }
.otab span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.otab span img { width: 40px; height: 40px; object-fit: contain; }
.otab b { font-size: 11px; white-space: nowrap; }
.otab.on { border-color: #fff; background: linear-gradient(#ffe7a0, #f08a2c); box-shadow: 0 0 10px #ffd84d90; }
.otab .dot { position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff; }
.opage { animation: slidein .2s ease-out; }
.obanner { position: relative; height: 190px; border-radius: 16px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 3px 0 #0b2a5280; display: flex; align-items: center; }
.obanner.t-gold { background: radial-gradient(circle at 72% 50%, #fff3b0, #f0a828 45%, #b0560e); }
.obanner.t-pink { background: radial-gradient(circle at 72% 50%, #ffd6ea, #f06aa8 45%, #9a2a6a); }
.obanner.t-green { background: radial-gradient(circle at 72% 50%, #e0ffc0, #5cc84a 45%, #1d7a3a); }
.obanner.t-blue { background: radial-gradient(circle at 72% 50%, #d8f2ff, #4aa2f5 45%, #1d4b98); }
.obanner.t-purple { background: radial-gradient(circle at 72% 50%, #f0dcff, #a46ae8 45%, #4a2290); }
.obanner.t-red { background: radial-gradient(circle at 72% 50%, #ffe0d0, #f06a4a 45%, #8a2018); }
.orays { position: absolute; right: -90px; top: 50%; width: 360px; height: 360px; margin-top: -180px; background: repeating-conic-gradient(#ffffff40 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 65%); mask: radial-gradient(circle, #000 15%, transparent 65%); animation: spin 22s linear infinite; }
.oart { position: absolute; right: 4px; bottom: 4px; width: 56%; height: 92%; display: flex; align-items: center; justify-content: center; }
.oart .oimg { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px #0006); animation: float 3.2s ease-in-out infinite; }
.oart .emo.oimg { font-size: 96px; line-height: 1; }
.otext { position: relative; z-index: 1; padding-left: 14px; max-width: 58%; }
.otitle { font-size: 28px; font-weight: 900; color: #fff; letter-spacing: 1px; text-shadow: 0 2px 0 #7a3a00, 0 -2px 0 #7a3a00, 2px 0 0 #7a3a00, -2px 0 0 #7a3a00, 0 4px 6px #0007; }
.osub { margin-top: 4px; font-weight: bold; font-size: 13px; text-shadow: var(--stroke); }
.otimer { display: inline-block; margin-top: 8px; background: #0b2a52b0; border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: bold; font-variant-numeric: tabular-nums; }
.oval { position: absolute; left: 8px; top: 8px; z-index: 2; width: 0; height: 0; }
.oval { left: auto; right: 8px; top: 8px; width: 66px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #ff6a4a, #d8202a); clip-path: polygon(50% 0, 61% 12%, 77% 6%, 80% 22%, 96% 26%, 89% 41%, 100% 54%, 86% 63%, 89% 80%, 72% 80%, 63% 95%, 50% 86%, 37% 95%, 28% 80%, 11% 80%, 14% 63%, 0 54%, 11% 41%, 4% 26%, 20% 22%, 23% 6%, 39% 12%); animation: pulse 1.4s ease-in-out infinite; }
.oval small { font-size: 10px; font-weight: bold; line-height: 1; }
.oval b { font-size: 15px; line-height: 1.1; }
.rgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
.rcell { text-align: center; min-width: 0; }
.rcell .icell { width: 100%; }
.rcell .icell .emo.ie { font-size: 30px; }
.rcell small { display: block; font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perks { display: flex; gap: 6px; }
.perk { flex: 1; text-align: center; background: #16325c; border-radius: 10px; padding: 6px 2px; }
.perk span { font-size: 26px; display: block; } .perk b { display: block; font-size: 14px; } .perk small { color: var(--dim); font-size: 11px; }
.pricebtn { font-size: 22px !important; }
.gpacks { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.gpack2 { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 2px 0; border-radius: 14px; border: 3px solid #fff; background: radial-gradient(circle at 50% 30%, #bfe6ff, #4a82c6 70%); overflow: hidden; box-shadow: 0 3px 0 #0b2a5280; }
.gpack2 .gp-img { height: 56px; display: flex; align-items: center; font-size: 40px; }
.gpack2 .gp-img img { width: 56px !important; height: 56px !important; }
.gpack2 b { font-size: 16px; } .gpack2 small { font-size: 11px; color: #c8ffb8; font-weight: bold; text-shadow: var(--stroke); }
.gpack2 em { display: block; align-self: stretch; margin-top: 4px; padding: 3px 0; font-style: normal; font-weight: bold; background: linear-gradient(#ffe27a, #f0a828); text-shadow: 0 1px 0 #8a5200, 0 -1px 0 #8a5200, 1px 0 0 #8a5200, -1px 0 0 #8a5200; }
.gpack2 .x2 { position: absolute; top: 6px; left: -22px; width: 90px; transform: rotate(-35deg); background: #ff3b30; color: #fff; font-style: normal; font-size: 10px; font-weight: bold; text-align: center; border: 1px solid #fff; }
.scell { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.scell .icell { width: 100%; }
.scell em { font-style: normal; font-size: 12px; font-weight: bold; color: #fff; background: #16325c; border-radius: 8px; padding: 0 6px; }
.scell em.no { color: #ff9a8a; }

/* ---------- 联盟首页 ---------- */
.acard { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: linear-gradient(135deg, #5d95d6, #2f62a3); border: 3px solid #bfe6ff; box-shadow: 0 3px 0 #0b2a5280; }
.aflag { width: 70px; height: 70px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 48px; border-radius: 14px; background: radial-gradient(circle, #ffffff40, transparent 70%); }
.aflag img { width: 70px; height: 70px; object-fit: contain; }
.aname { font-size: 18px; font-weight: bold; text-shadow: var(--stroke); }
.arow2 { display: flex; gap: 12px; font-size: 13px; margin-top: 2px; }
.hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.hubt { position: relative; aspect-ratio: .9; border: 3px solid #e6f3ff; border-radius: 16px; background: radial-gradient(circle at 50% 35%, #8fc8ff, #2f6fc0 75%); box-shadow: 0 4px 0 #1d4b88; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; }
.hubt .hi { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.hubt .hi img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 2px 2px #0b2a5280); }
.hubt b { font-size: 14px; }
.hubt em { position: absolute; bottom: -9px; font-style: normal; font-size: 11px; font-weight: bold; background: #16325c; border: 1px solid #9fcaf5; border-radius: 8px; padding: 0 6px; white-space: nowrap; }
.hubt em.hot { background: linear-gradient(#ff8a6a, #d8342a); border-color: #fff; animation: pulse 1s infinite; }
.hubt .cnt { position: absolute; top: -6px; right: -6px; font-style: normal; background: #ff3b30; border: 2px solid #fff; border-radius: 10px; min-width: 22px; font-size: 12px; font-weight: bold; }
.hubt:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d4b88; }

/* ---------- 英雄招募翻牌 ---------- */
.hgrid.pull .hcard.flip { animation: flip .5s ease-out both; }
@keyframes flip { 0% { transform: perspective(400px) rotateY(90deg) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.hgrid.pull .hcard.gold { overflow: visible; box-shadow: 0 0 14px 3px #ffd84d; }
.hgrid.pull.one { grid-template-columns: 120px; justify-content: center; }
.hshine { position: absolute; inset: -30%; z-index: -1; background: repeating-conic-gradient(#ffe27a90 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%); animation: spin 8s linear infinite; }

/* ---------- 特效层 ---------- */
#fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.fx-burst { position: absolute; width: 0; height: 0; }
.fx-burst b { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: burst .9s ease-out forwards; }
@keyframes burst { 0% { transform: translate(0, 0) scale(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(120deg); opacity: 0; } }
.fx-burst .ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid; animation: ring .6s ease-out forwards; }
@keyframes ring { to { transform: scale(7); opacity: 0; } }
.fx-fly { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; animation: fly .75s cubic-bezier(.5, -0.3, .7, 1) both; }
.fx-fly img, .fx-fly .emo { width: 30px; height: 30px; object-fit: contain; font-size: 22px; filter: drop-shadow(0 2px 2px #0006); }
@keyframes fly { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { transform: translate(var(--ux), -30px) scale(1.2); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: .9; } }
.fx-float { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 18px; color: #8ef07a; white-space: nowrap; text-shadow: 0 2px 0 #0b3a1a, 0 -1px 0 #0b3a1a, 1px 0 0 #0b3a1a, -1px 0 0 #0b3a1a; animation: floatup 1.7s ease-out forwards; }
.fx-float.pw { font-size: 16px; color: #ffe27a; text-shadow: var(--stroke); }
.fx-float.lv { font-size: 30px; color: #ffe27a; text-shadow: 0 2px 0 #8a5200, 0 -2px 0 #8a5200, 2px 0 0 #8a5200, -2px 0 0 #8a5200; }
@keyframes floatup { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -14px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -70px); opacity: 0; } }
.fx-banner { position: absolute; left: 0; right: 0; top: 34%; display: flex; justify-content: center; animation: banner 1.7s ease-out forwards; }
.fx-banner span { padding: 8px 40px; font-size: 19px; font-weight: 900; text-shadow: var(--stroke); background: linear-gradient(90deg, transparent, #1d4b98f0 18%, #2f7fe0f0 50%, #1d4b98f0 82%, transparent); border-top: 2px solid #bfe6ff; border-bottom: 2px solid #bfe6ff; }
.fx-banner.gold span { background: linear-gradient(90deg, transparent, #b0560ef0 18%, #f0a828f0 50%, #b0560ef0 82%, transparent); border-color: #ffe27a; }
.fx-banner.ok span { background: linear-gradient(90deg, transparent, #1d7a3af0 18%, #3fb43af0 50%, #1d7a3af0 82%, transparent); border-color: #c4ff9a; }
@keyframes banner { 0% { transform: scaleY(0); opacity: 0; } 12% { transform: scaleY(1.15); opacity: 1; } 20%, 80% { transform: none; opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
.fx-full { position: absolute; inset: 0; pointer-events: auto; background: radial-gradient(circle at 50% 42%, #0b2a52a0, #04122ae6 70%); display: flex; align-items: center; justify-content: center; animation: fadein .2s ease-out; }
.fx-full.out { animation: fadeout .22s ease-in forwards; }
@keyframes fadein { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } }
.fx-rays { position: absolute; left: 50%; top: 42%; width: 640px; height: 640px; margin: -320px 0 0 -320px; background: repeating-conic-gradient(#8fd0ff50 0 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%); animation: spin 16s linear infinite; }
.fx-rays.gold { background: repeating-conic-gradient(#ffe27a60 0 9deg, transparent 9deg 24deg); }
.fx-box { position: relative; width: 92%; max-width: 420px; text-align: center; animation: boxin .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes boxin { from { transform: scale(.5); opacity: 0; } }
.fx-ribbon { position: relative; display: inline-block; margin-bottom: 14px; padding: 8px 46px; background: linear-gradient(#5fb0ff, #2a68c8); border: 3px solid #e6f5ff; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); }
.fx-ribbon.gold { background: linear-gradient(#ffe27a, #f08a2c); border-color: #fff7d6; }
.fx-ribbon span { font-size: 26px; font-weight: 900; letter-spacing: 4px; text-shadow: 0 2px 0 #163a6b, 0 -2px 0 #163a6b, 2px 0 0 #163a6b, -2px 0 0 #163a6b; }
.fx-ribbon.gold span { text-shadow: 0 2px 0 #8a5200, 0 -2px 0 #8a5200, 2px 0 0 #8a5200, -2px 0 0 #8a5200; }
.fx-sub { font-size: 14px; color: #d8eaff; margin: -6px 0 12px; text-shadow: var(--stroke); }
.fx-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.fx-item { width: 70px; animation: itemin .4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes itemin { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
.fx-item .ic { position: relative; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border: 3px solid #ffffffd0; border-radius: 14px; box-shadow: inset 0 2px 0 #ffffff80, 0 3px 0 #0b2a5280, 0 0 16px #ffffff40; font-size: 34px; }
.fx-item.r-g .ic { background: linear-gradient(#7ee06a, #2f9a35); } .fx-item.r-b .ic { background: linear-gradient(#7fc0f8, #3a7fd4); }
.fx-item.r-p .ic { background: linear-gradient(#cf9ff8, #8e5ad6); } .fx-item.r-o .ic { background: linear-gradient(#ffc070, #f0862c); }
.fx-item .ic img { width: 80%; height: 80%; object-fit: contain; }
.fx-item b { display: block; margin-top: -14px; position: relative; font-size: 15px; text-shadow: var(--stroke); }
.fx-item small { display: block; font-size: 11px; color: #d8eaff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-tap { margin-top: 22px; font-size: 13px; color: #c3dbf4; animation: lamp 1.6s infinite; }
.fx-lvpic { width: 220px; height: 200px; margin: 0 auto 6px; display: flex; align-items: flex-end; justify-content: center; animation: float 3s ease-in-out infinite; }
.fx-lvpic img { max-width: 220px; max-height: 200px; object-fit: contain; filter: drop-shadow(0 0 24px #ffe27a); }
.fx-lvpic .fx-gear img { width: 140px; height: 140px; filter: drop-shadow(0 0 24px var(--gc)); }
.fx-lvpic .emo { font-size: 110px; }
.fx-lvline { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 26px; font-weight: 900; text-shadow: var(--stroke); }
.fx-lvline span { color: #c3dbf4; } .fx-lvline i { font-style: normal; color: #8ef07a; } .fx-lvline b { color: #ffe27a; font-size: 32px; }
.levelup .fx-sub { margin-top: 10px; line-height: 1.6; }
#coord { top: auto; bottom: 84px; }

/* ---------- 去掉 emoji 之后：图标、占位、星星、奖牌 ---------- */
.ph { display: inline-block; width: 1.4em; height: 1.4em; border-radius: 28%; background: linear-gradient(#ffffff40, #ffffff14); border: 2px solid #ffffff50; vertical-align: middle; }
img.ico { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; margin: 0 1px; filter: drop-shadow(0 1px 1px #0b2a5260); }
.pic.emo img.ico, .card .pic img.ico { width: 48px; height: 48px; margin-top: 4px; }
.card .pic img.ie, .card .pic > img { width: 56px; height: 56px; object-fit: contain; }
.tech .te img { width: 30px; height: 30px; object-fit: contain; }
.tech .pic img { width: 44px; height: 44px; object-fit: contain; }
.ml-ic img.ico { width: 22px; height: 22px; vertical-align: 0; }
.task .ic img { width: 30px; height: 30px; object-fit: contain; }
.stars { display: inline-flex; align-items: center; gap: 1px; }
.stars .st { display: inline-block; width: 10px; height: 10px; background: #7a5a3a80; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars .st.on { background: linear-gradient(#bff8ff, #3fc8f0); }
.rk { width: 28px; height: 24px; flex: none; text-align: center; }
.rk1, .rk2, .rk3 { border-radius: 50%; width: 24px; line-height: 24px; color: #fff; text-shadow: var(--stroke); border: 2px solid #fff; margin-right: 4px; }
.rk1 { background: radial-gradient(circle at 40% 35%, #fff0a0, #e0a020); } .rk2 { background: radial-gradient(circle at 40% 35%, #f4f8ff, #9fb0c4); } .rk3 { background: radial-gradient(circle at 40% 35%, #ffd0a0, #c0702a); }
/* 建筑菜单按钮：图片 + 文字，升级是 CSS 画的绿箭头 */
#bmenu .bm-name { display: none; }
.bm-btn span { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.bm-btn span img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 1px #0b2a5280); }
.bm-btn b { font-size: 12px; margin-top: -2px; }
.upico { display: block; width: 26px; height: 30px; background: linear-gradient(#ffffff, #d8ffc8); clip-path: polygon(50% 0, 100% 48%, 70% 48%, 70% 100%, 30% 100%, 30% 48%, 0 48%); filter: drop-shadow(0 2px 0 #1d6a1d); }
/* 领主形象（英雄全身图） */
.lord-art { cursor: pointer; width: 190px; height: 290px; bottom: 30px; }
.lord-art img.lfull { animation: float 3.4s ease-in-out infinite; }
.look-btn { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); border: 2px solid #fff; border-radius: 12px; background: #16325cd0; color: #fff; font-size: 12px; font-weight: bold; padding: 2px 10px; text-shadow: var(--stroke); }
img.lookface { object-fit: cover !important; object-position: 50% 6% !important; background: radial-gradient(circle at 50% 35%, #bfe6ff, #3a77c4); }
.lav img.lookface, .lord .av img.lookface { width: 100%; height: 100%; border-radius: 50%; }
.lav { cursor: pointer; }
.pic.lavs { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; }
.pic.lavs img { width: 100%; height: 100%; }
.hgrid.look { grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.hgrid.look .hcard.pick { box-shadow: 0 0 0 3px #ffe27a, 0 0 14px #ffe27a; }
.hsel { position: absolute; top: 2px; left: 2px; font-style: normal; font-size: 10px; font-weight: bold; background: #3fb43a; border: 1px solid #fff; border-radius: 6px; padding: 0 4px; }
.ficon .fi .ph { width: 30px; height: 30px; }

/* ---------- 研究所：圆形技能树 ---------- */
.rnow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; background: #16325c; border: 2px solid #5f95d3; }
.rnow-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 3px solid #ffe27a; background: radial-gradient(circle at 50% 35%, #8fc8ff, #2f6fc0); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rnow-ic img { width: 34px; height: 34px; object-fit: contain; }
.rnow.idle .rnow-ic { border-color: #9fcaf5; }
.rnow-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rnow-tx b { font-size: 14px; } .rnow-tx small { font-size: 11px; color: var(--dim); }
.rnow-btn { display: flex; flex-direction: column; gap: 4px; }
.ttabs { margin-top: 8px; }
.ttabs button { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 5px 0; }
.ttabs button small { font-size: 10px; font-weight: normal; opacity: .85; }
.ttree { position: relative; padding: 4px 0 8px; }
.ttrow { position: relative; display: grid; grid-template-columns: 42px repeat(3, 1fr); align-items: start; padding: 10px 0 6px; }
.ttrow + .ttrow::before { content: ''; position: absolute; left: 42px; right: 0; top: -14px; height: 22px; background: linear-gradient(90deg, transparent calc(16.6% - 2px), #5f95d3 calc(16.6% - 2px), #5f95d3 calc(16.6% + 2px), transparent calc(16.6% + 2px), transparent calc(50% - 2px), #5f95d3 calc(50% - 2px), #5f95d3 calc(50% + 2px), transparent calc(50% + 2px), transparent calc(83.3% - 2px), #5f95d3 calc(83.3% - 2px), #5f95d3 calc(83.3% + 2px), transparent calc(83.3% + 2px)); }
.ttrow.open + .ttrow.open::before { background: linear-gradient(90deg, transparent calc(16.6% - 2px), #8fd0ff calc(16.6% - 2px), #8fd0ff calc(16.6% + 2px), transparent calc(16.6% + 2px), transparent calc(50% - 2px), #8fd0ff calc(50% - 2px), #8fd0ff calc(50% + 2px), transparent calc(50% + 2px), transparent calc(83.3% - 2px), #8fd0ff calc(83.3% - 2px), #8fd0ff calc(83.3% + 2px), transparent calc(83.3% + 2px)); }
.tneed { align-self: center; display: flex; flex-direction: column; align-items: center; font-size: 10px; color: var(--dim); line-height: 1.1; }
.tneed b { font-size: 13px; color: #fff; }
.ttrow:not(.open) .tneed b { color: #8fa3b8; }
.tnode { position: relative; z-index: 1; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tring { --p: 0deg; position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 4px; background: #5f95d3; box-shadow: 0 3px 0 #0b2a5280; display: flex; }
.tring .tic { flex: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #6fa9ea, #1d4b88 80%); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid #0b2a5260; }
.tring .tic img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 1px #0b2a5280); }
.tnode.has .tring { background: linear-gradient(#bfe6ff, #4aa2f5); }
.tnode.max .tring, .tring.max { background: linear-gradient(#fff0a0, #e0a020); }
.tnode.max .tic { background: radial-gradient(circle at 50% 35%, #ffd98a, #b0661e 80%); }
.tnode.now .tring { background: conic-gradient(#8ef07a var(--p), #0b2a52 var(--p)); animation: none; }
.tnode.can .tring { box-shadow: 0 3px 0 #0b2a5280, 0 0 0 0 #8ef07a; animation: tglow 1.8s ease-in-out infinite; }
@keyframes tglow { 50% { box-shadow: 0 3px 0 #0b2a5280, 0 0 12px 3px #8ef07ab0; } }
.tnode.lock .tring { background: #55657a; }
.tnode.lock .tic { filter: grayscale(1) brightness(.75); }
.tlock { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: #2a3a4c radial-gradient(circle at 50% 62%, #c7d2dc 0 4px, transparent 5px); border: 2px solid #c7d2dc; }
.tlock::before { content: ''; position: absolute; left: 4px; top: -4px; width: 8px; height: 8px; border: 2px solid #c7d2dc; border-bottom: 0; border-radius: 6px 6px 0 0; }
.tplus { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: #3fb43a; border: 2px solid #fff; }
.tplus::before, .tplus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 3px; margin: -1.5px 0 0 -5px; background: #fff; border-radius: 2px; }
.tplus::after { transform: rotate(90deg); }
.tlv { margin-top: -9px; position: relative; font-size: 11px; background: #16325c; border: 1px solid #9fcaf5; border-radius: 8px; padding: 0 6px; }
.tnode.max .tlv { background: linear-gradient(#ffe27a, #e0a020); border-color: #fff; }
.tnode small { font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: var(--stroke); }
.tnode.lock small { color: #a9b8c8; }
.tdhead { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.tring.big { width: 84px; height: 84px; flex: none; }
.tring.big .tic img { width: 54px; height: 54px; }
.tdlv { display: flex; gap: 2px; margin: 4px 0 2px; }
.tdlv i { width: 12px; height: 7px; border-radius: 3px; background: #0b2a5290; border: 1px solid #ffffff50; }
.tdlv i.on { background: linear-gradient(#c4ff9a, #3fb43a); }
.creq { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 0; color: #ffb0a0; }
.creq.ok { color: #c8ffb8; }
.creq i { width: 16px; height: 16px; border-radius: 50%; flex: none; background: #d8342a; border: 2px solid #fff; }
.creq.ok i { background: #3fb43a; }
.creq small { margin-left: auto; color: var(--dim); }
.tdtime { text-align: center; margin-top: 6px; font-weight: bold; text-shadow: var(--stroke); }
/* 联盟科技列表里的图标 */
.tech .pic { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #6fa9ea, #1d4b88 80%); border: 3px solid #9fcaf5; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.tech .pic img { width: 34px !important; height: 34px !important; }

/* ---------- 商城：上面固定 5 个大分类 ---------- */
.smain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 8px; }
.smain button { position: relative; border: 2px solid #3a6fae; border-radius: 12px; background: linear-gradient(#4f88cf, #2f62a3); padding: 4px 0 3px; display: flex; flex-direction: column; align-items: center; }
.smain button span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.smain button img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 1px #0b2a5280); }
.smain button b { font-size: 12px; white-space: nowrap; }
.smain button.on { border-color: #fff; background: linear-gradient(#ffe7a0, #f08a2c); box-shadow: 0 0 10px #ffd84d90; }
.smain .dot { position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff; }
.smain + .otabs { padding-top: 6px; }
.otab { width: 58px; } .otab span, .otab span img { width: 34px; height: 34px; }
.cperk { margin-top: 8px; text-align: center; font-size: 13px; background: #16325c; border-radius: 10px; padding: 4px; }
/* 成长基金档位：4 列整齐小格子，图标小 */
.fund.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0; }
.fund.fgrid .boxb { min-width: 0; padding: 5px 0; }
.boxb span { height: 26px; display: flex; align-items: center; justify-content: center; }
.boxb span img, .boxb img.ico { width: 24px !important; height: 24px !important; }
.boxb b { font-size: 12px; } .boxb small { font-size: 11px; color: #ffe27a; font-weight: bold; }
/* 左侧两栏：发展 / 行军 */
.ml-head.mar { margin-top: 6px; }
.ml-row.empty { justify-content: center; background: #16325c90; }
.ml-row.empty small { white-space: normal; text-align: center; }
#march-list { max-height: calc(100% - 90px); overflow-y: auto; scrollbar-width: none; }
#march-list::-webkit-scrollbar { display: none; }
.ml-row { background: #16325cf0; } .ml-head { background: #16325cf5; }

/* ---------- 建筑升级页 / 训练页：大图居中 ---------- */
.bbig, .tbig { position: relative; text-align: center; padding: 6px 0 4px; overflow: hidden; --gc: #8fd0ff; }
.bbig-img { position: relative; height: 170px; display: flex; align-items: flex-end; justify-content: center; }
.bbig-img img { max-width: 220px; max-height: 170px; object-fit: contain; filter: drop-shadow(0 6px 6px #0b2a5280); }
.bbig .fx-lvline { position: relative; font-size: 22px; margin-top: 4px; }
.bbig .fx-lvline b { font-size: 26px; }
.eff { display: flex; align-items: center; gap: 8px; justify-content: center; text-align: center; font-size: 14px; }
.eff span { color: var(--dim); flex: 1; } .eff b { flex: 1; } .eff i { font-style: normal; color: #8ef07a; font-size: 18px; }
.ptitle .btn { margin-left: 6px; vertical-align: 1px; }
.brow { display: flex; gap: 8px; margin-top: 8px; }
.brow .btn.big { flex: 1; width: auto; margin: 0; font-size: 17px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; letter-spacing: 0; }
.btn.big small { display: block; font-size: 11px; margin: 2px 0 0; }
.bar.big { position: relative; height: 22px; border-radius: 11px; }
.bar.big em { position: absolute; inset: 0; text-align: center; font-style: normal; font-weight: bold; font-size: 13px; line-height: 20px; text-shadow: var(--stroke); }
.tbig-img { position: relative; height: 130px; display: flex; align-items: center; justify-content: center; }
.tbig-img img { width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 6px 6px #0b2a5280); }
.tbig-name { position: relative; font-size: 20px; font-weight: bold; text-shadow: var(--stroke); }
.tbig-name i { font-style: normal; font-size: 13px; background: linear-gradient(#c38cff, #8a4fd6); border: 1px solid #fff; border-radius: 6px; padding: 0 5px; margin-right: 6px; vertical-align: 2px; }
.tbig-sub, .tbig-have { position: relative; font-size: 12px; color: var(--dim); }
.tbig-have b { color: #fff; }
.tnum { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.tnum b { font-size: 26px; color: var(--gold); text-shadow: var(--stroke); }
.tnum small { font-size: 11px; color: var(--dim); }

/* ---------- 世界地图：电脑领主的城和主城一样占 3×3；迁城预览框 ---------- */
.ent.lord { width: 192px; height: 192px; background: radial-gradient(circle, #ff8a6a30 0, transparent 62%); }
.ent.lord img.e { width: 150px; height: 140px; margin-top: -6px; }
.ent.lord .n { top: 6px; font-size: 12px; }
.ent.lord .l { bottom: 10px; font-size: 12px; }
.ent.lord .flag { top: 20px; right: 30px; }
#reloc-ghost { position: absolute; width: 192px; height: 192px; z-index: 7; pointer-events: none; border-radius: 14px; border: 4px dashed #8ef07a; background: repeating-linear-gradient(0deg, transparent 0 62px, #ffffff40 62px 64px), repeating-linear-gradient(90deg, transparent 0 62px, #ffffff40 62px 64px), #3fb43a50; animation: lamp 1.2s ease-in-out infinite; }
#reloc-ghost.no { border-color: #ff6a4a; background: repeating-linear-gradient(0deg, transparent 0 62px, #ffffff40 62px 64px), repeating-linear-gradient(90deg, transparent 0 62px, #ffffff40 62px 64px), #d8342a50; }
.brow .btn.big { justify-content: center; min-height: 58px; }
/* ---------- 成就卡片 ---------- */
.achc { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 8px; border-radius: 14px; background: linear-gradient(#4179bf, #33679f); border: 2px solid #6fa6e0; box-shadow: 0 2px 0 #1d4b88; }
.achc.can { border-color: #c4ff9a; box-shadow: 0 0 10px #8ef07a80; }
.achc.done { opacity: .6; }
.ach-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffe7a0, #e08a2c); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.ach-ic img { width: 36px; height: 36px; object-fit: contain; }
.ach-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ach-tx b { font-size: 14px; } .ach-tx small { font-size: 11px; color: var(--dim); }
.ach-st { display: flex; gap: 2px; margin: 1px 0; }
.ach-st .st { display: inline-block; width: 11px; height: 11px; background: #0b2a5290; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ach-st .st.on { background: linear-gradient(#fff0a0, #e0a020); }
.ach-n { text-align: right; margin-top: -2px; }
.achc .btn.sm { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.achc .btn.sm small { margin: 0; font-size: 10px; }
.ach-done { font-size: 12px; color: #c8ffb8; font-weight: bold; }

/* ---------- 世界地图：选中格子高亮 + 下方操作按钮 ---------- */
#tile-sel { position: absolute; z-index: 8; pointer-events: none; border: 3px solid #fff; border-radius: 6px; background: #8fd0ff40; box-shadow: 0 0 0 2px #2f7fe0, 0 0 16px 4px #8fd0ffb0, inset 0 0 12px #ffffff80; animation: tsel 1.2s ease-in-out infinite; }
#tile-sel.big { border-radius: 16px; }
@keyframes tsel { 50% { box-shadow: 0 0 0 2px #2f7fe0, 0 0 24px 8px #8fd0ffd0, inset 0 0 16px #ffffffb0; } }
#wmenu { position: absolute; z-index: 9; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; animation: pop .15s ease-out; }
.wm-name { background: #16325cf0; border: 2px solid #8fc6f5; border-radius: 10px; padding: 1px 10px; font-weight: bold; font-size: 13px; white-space: nowrap; text-shadow: var(--stroke); }
.wm-name small { margin-left: 6px; font-size: 11px; color: #c3dbf4; font-weight: normal; }
#wmenu .bm-row { display: flex; gap: 8px; }
/* 修：地图上的领主城和顶栏头像按钮同名（.lord），头像按钮的「相对定位 / 横排」串到了地图上，导致领主城画偏 */
.ent.lord { position: absolute; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; padding: 0; text-align: center; }
.ihead .icell { overflow: hidden; }
.ihead .icell img { width: 82%; height: 82%; object-fit: contain; }
/* ---------- 礼包档位卡片：内容和价格在一张卡里 ---------- */
.pcard { margin-top: 8px; border-radius: 14px; background: linear-gradient(#4179bf, #2f62a3); border: 2px solid #8fc6f5; box-shadow: 0 2px 0 #1d4b88; overflow: hidden; }
.pcard.sold { opacity: .55; }
.pc-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #16325cb0; }
.pc-head b { font-size: 14px; } .pc-head small { font-size: 11px; color: var(--dim); }
.pc-val { margin-left: auto; font-style: normal; font-size: 12px; font-weight: bold; color: #fff; background: linear-gradient(#ff6a4a, #d8202a); border: 1px solid #fff; border-radius: 8px; padding: 0 6px; text-shadow: var(--stroke); }
.pc-body { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.pc-items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pc-items .icell { width: 46px; height: 46px; border-radius: 10px; border-width: 2px; }
.pc-items .icell img { width: 80%; height: 80%; object-fit: contain; }
.pc-items .icnt { font-size: 11px !important; right: 3px !important; bottom: 0 !important; }
.pc-buy { flex: none; min-width: 74px; padding: 8px 6px !important; font-size: 18px; }
.pc-buy .cp img { width: 20px; height: 20px; vertical-align: -4px; }
.obanner.short { height: 140px; }

/* ---------- 页面不占满屏：从底部弹出约 80% 高，上面露出主城 ---------- */
.sheet-body { height: 80%; border-radius: 20px 20px 0 0; border-top: 3px solid #a9dcff; box-shadow: 0 -6px 18px #0b2a5280; animation: up .2s ease-out; }
.sheet-body.slide { animation: slidein .2s ease-out; }
.sheet-mask { background: #0b2a5270; }
.sheet-head { padding: 6px 10px 4px; }
.sheet-head b { font-size: 20px; }
.back { width: 44px; height: 32px; }
/* 消耗格子加宽，数字不换行 */
.ccell { width: 84px; }
.ccell small { white-space: nowrap; font-size: 11px; }
.rkrow.tap { cursor: pointer; border-radius: 6px; }
.rkrow.tap:active { background: #ffffff20; }
.rkrow small.good { font-size: 10px; }

/* ---------- 任务条：可以收起 ---------- */
.task { position: relative; padding-right: 30px; }
.task-x { position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border: 2px solid #9fcaf5; border-radius: 50%; background: #16325c; padding: 0; }
.task-x::before { content: ''; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); }
#task-bar:has(.task-mini) { right: auto; }
.task-mini { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(#9fd4ff, #3a77c4); padding: 0; box-shadow: 0 3px 0 #1d4b88, 0 5px 8px #0b2a5260; display: flex; align-items: center; justify-content: center; }
.task-mini img { width: 36px; height: 36px; object-fit: contain; }
.task-mini.done { animation: pulse 1.2s infinite; }
.task-mini .dot { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff; }

/* ---------- 世界 / 城镇按钮：去掉白条，按钮做大 ---------- */
#nav button.world::before { display: none; }
#nav button.world { margin: -26px 2px 4px; border-radius: 18px; font-size: 15px; }
#nav button.world img, #nav button.world .emo { width: 52px; height: 52px; }

/* ---------- 主城 ⇄ 世界 过场 ---------- */
#vswitch { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
#vswitch .cl { position: absolute; background: var(--cloud, none) center / contain no-repeat, radial-gradient(ellipse at center, #ffffff 0 45%, #e8f3fc 60%, #e8f3fc00 72%); transition: transform .42s cubic-bezier(.5, 0, .3, 1), opacity .42s; opacity: .2; }
#vswitch .cl.l { left: -10%; top: -10%; width: 80%; height: 120%; transform: translateX(-110%); }
#vswitch .cl.r { right: -10%; top: -10%; width: 80%; height: 120%; transform: translateX(110%); }
#vswitch .cl.t { left: 10%; top: -20%; width: 80%; height: 60%; transform: translateY(-110%); }
#vswitch .cl.b { left: 10%; bottom: -20%; width: 80%; height: 60%; transform: translateY(110%); }
#vswitch.in .cl { transform: none; opacity: 1; }
#vswitch.out .cl { transition-duration: .6s; opacity: 0; }
#vswitch.out .cl.l { transform: translateX(-120%) scale(1.3); } #vswitch.out .cl.r { transform: translateX(120%) scale(1.3); }
#vswitch.out .cl.t { transform: translateY(-120%) scale(1.3); } #vswitch.out .cl.b { transform: translateY(120%) scale(1.3); }
#vswitch .vs-txt { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.6); font-size: 26px; font-weight: 900; letter-spacing: 6px; color: #2a5a99; text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; opacity: 0; transition: all .3s .1s; }
#vswitch.in .vs-txt { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#vswitch.out .vs-txt { opacity: 0; transition-delay: 0s; }
.scene.zoomin { animation: zoomin .65s cubic-bezier(.2, .8, .3, 1); }
@keyframes zoomin { from { transform: scale(1.25); filter: blur(2px); } to { transform: none; filter: none; } }
/* 过场云：柔和的白色雾团（不用卡通云图） */
#vswitch .cl { background:
  radial-gradient(circle at 30% 40%, #ffffff 0 22%, #ffffff00 42%),
  radial-gradient(circle at 65% 35%, #f6fbff 0 25%, #f6fbff00 46%),
  radial-gradient(circle at 50% 70%, #eef6fd 0 28%, #eef6fd00 50%),
  radial-gradient(ellipse at center, #ffffffee 0 40%, #e3f0fbcc 58%, #e3f0fb00 75%); filter: blur(2px); }
#vswitch::before { content: ''; position: absolute; inset: 0; background: #eaf5ff; opacity: 0; transition: opacity .3s .1s; }
#vswitch.in::before { opacity: .85; }
#vswitch.out::before { opacity: 0; transition: opacity .45s; }
/* 英雄卡：等级挪到左上角小标签，名字单独一行在立绘下面，不再叠在一起 */
.hcard .hlv { top: 4px; left: 4px; z-index: 1; font-size: 12px; line-height: 16px; padding: 0 6px; border-radius: 8px; background: #16325cd8; border: 1px solid #ffffffa0; }
.hcard .hn { font-size: 13px; margin-top: 2px; }
.hcard .stars { justify-content: center; } .hcard .stars .st { width: 9px; height: 9px; } .hcard .stars em { font-size: 9px; }
/* ---------- 战力详情 ---------- */
.lord .pw, .lpw { cursor: pointer; }
.lpw small { font-size: 11px; color: #c3dbf4; font-weight: normal; margin-left: 4px; }
.pwtot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.pwtot b { font-size: 28px; color: #ffe27a; text-shadow: var(--stroke); }
.pwtot img.ico { width: 32px; height: 32px; }
.pwrow { display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin-bottom: 6px; border-radius: 12px; background: #1a4277b0; border: 2px solid #5f95d3; }
.pw-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #8fc8ff, #2f6fc0); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pw-ic img { width: 34px; height: 34px; object-fit: contain; }
.pw-tx { flex: 1; min-width: 0; }
.pw-top { display: flex; align-items: baseline; gap: 6px; }
.pw-top b { font-size: 14px; } .pw-top span { margin-left: auto; font-weight: bold; color: #ffe27a; text-shadow: var(--stroke); } .pw-top small { font-size: 11px; color: var(--dim); width: 42px; text-align: right; }
.pw-tx .desc { font-size: 10px; }
.ficon.buff .fi { width: 40px; height: 40px; background: radial-gradient(circle at 50% 35%, #ffd0a0, #c0502a 75%); }
.ficon.buff .fi img { width: 32px; height: 32px; }
.ficon.buff > b { font-size: 10px; }
/* ---------- 集结 ---------- */
.rmode { display: flex; gap: 8px; margin: 4px 0 6px; }
.rmode button { flex: 1; border: 2px solid #5f95d3; border-radius: 12px; background: #1a4277; padding: 6px 0; display: flex; flex-direction: column; align-items: center; }
.rmode button b { font-size: 15px; } .rmode button small { font-size: 11px; color: var(--dim); }
.rmode button.on { border-color: #fff; background: linear-gradient(#ffe7a0, #f08a2c); box-shadow: 0 0 10px #ffd84d90; }
.rmode button.on small { color: #fff; }
.rjoin { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 150px; overflow-y: auto; }
.rjoin span { display: flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: #16325c; }
.rjoin span b { margin-left: auto; color: #ffe27a; } .rjoin span small { color: var(--dim); }
.rjoin span.me { background: #2f7fe080; }

/* ---------- 画面质量 ---------- */
/* 中：去掉最费电的（混合模式火光、三层雪只留一层、建筑和图标的投影滤镜、旋转光芒） */
.q-mid #snow i:nth-child(2), .q-mid #snow i:nth-child(3) { display: none; }
.q-mid .glow { mix-blend-mode: normal; opacity: .7; }
.q-mid .bld .art img, .q-mid .deco img, .q-mid .ent img.e { filter: none !important; }
.q-mid .orays, .q-mid .gbig-rays, .q-mid .hshine { animation: none; }
.q-mid .smoke i:nth-child(n+3) { display: none; }
/* 低：主城、地图、按钮的循环动画全部关掉（点击时的特效保留但更短） */
.q-low #snow, .q-low .smoke, .q-low .glow, .q-low .spark, .q-low .work b { display: none !important; }
.q-low .bld .art img, .q-low .deco img, .q-low .ent img.e, .q-low .ficon img, .q-low .hubt img { filter: none !important; }
.q-low *, .q-low *::before, .q-low *::after { animation-iteration-count: 1 !important; }
.q-low .orays, .q-low .gbig-rays, .q-low .fx-rays, .q-low .hshine, .q-low .ficon.shine .fi::after, .q-low #tile-sel { animation: none !important; }
.q-low .fx-burst, .q-low .fx-fly { display: none; }
.q-low .sheet-mask { backdrop-filter: none; }
.qsel { display: flex; gap: 6px; }
.qsel button { flex: 1; border: 2px solid #5f95d3; border-radius: 12px; background: #1a4277; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; }
.qsel button b { font-size: 16px; } .qsel button small { font-size: 10px; color: var(--dim); line-height: 1.3; }
.qsel button.on { border-color: #fff; background: linear-gradient(#ffe7a0, #f08a2c); } .qsel button.on small { color: #fff; }
.inp { height: 36px; border-radius: 10px; border: 2px solid #5f95d3; background: #0b2a52; color: #fff; padding: 0 10px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; min-width: 0; }

/* ---------- 邮件 ---------- */
.mailc { position: relative; display: flex; gap: 8px; padding: 8px; margin-top: 6px; border-radius: 12px; background: linear-gradient(#4179bf, #33679f); border: 2px solid #6fa6e0; }
.mailc.read { background: #1a4277b0; border-color: #3a6fae; }
.mailc.rw { border-color: #ffe27a; }
.mail-ic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.mail-ic img { width: 38px; height: 38px; object-fit: contain; }
.mail-tx { flex: 1; min-width: 0; } .mail-tx b { display: block; font-size: 14px; } .mail-tx small { font-size: 11px; color: var(--dim); }
.mail-body { margin: 6px 0; font-size: 13px; line-height: 1.5; }
.mailc > .dot, .tabs .dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff; }
.tabs button { position: relative; }
/* 任务条右边让出「世界 / 城镇」大按钮的位置 */
#task-bar { right: 82px; }
/* ---------- 出征配兵：每种兵一条可拖的长条 ---------- */
.selrow2 { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; border-radius: 12px; background: #1a4277b0; border: 2px solid #3a6fae; }
.sr-ic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.sr-ic img { width: 40px; height: 40px; object-fit: contain; }
.sr-mid { flex: 1; min-width: 0; }
.sr-top { display: flex; align-items: baseline; gap: 4px; }
.sr-top b { font-size: 13px; margin-right: auto; } .sr-top .num { font-weight: bold; color: #ffe27a; text-shadow: var(--stroke); } .sr-top small { font-size: 11px; color: var(--dim); }
.sr-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 2px 0 0; background: transparent; touch-action: pan-y; }
.sr-range::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #8ef07a 0 var(--p), #4a7fc0 var(--p) var(--lim), #0b2a52 var(--lim)); border: 1px solid #ffffff50; }
.sr-range::-moz-range-track { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #8ef07a 0 var(--p), #4a7fc0 var(--p) var(--lim), #0b2a52 var(--lim)); border: 1px solid #ffffff50; }
.sr-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #ffd84d 60%, #e0a020); border: 2px solid #fff; box-shadow: 0 2px 3px #0b2a5280; }
.sr-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #ffd84d 60%, #e0a020); border: 2px solid #fff; }
.sr-btn { flex: none; min-width: 48px; }

/* =====================================================================
   v4 学无尽冬日：地图信息卡、整页出征、头像下的增益
   ===================================================================== */
/* ---------- 地图信息卡 ---------- */
#wmenu { display: none; }
#wcard { position: absolute; z-index: 9; width: 286px; border-radius: 16px; background: linear-gradient(#f3f8ff, #d7e7f8); border: 3px solid #fff; box-shadow: 0 6px 18px #0b2a5280; color: #1d3f6e; padding: 6px 6px 10px; animation: pop .15s ease-out; }
#wcard::after { content: ''; position: absolute; left: var(--ax, 50%); top: -10px; width: 18px; height: 10px; margin-left: -9px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#wcard.up::after { top: auto; bottom: -10px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.wc-ban { position: relative; height: 104px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 60% 40%, #bfe6ff, #5a9be0 70%, #2f6fc0); display: flex; align-items: center; justify-content: center; }
.wc-ban.elite { background: radial-gradient(ellipse at 60% 40%, #ffd6c0, #e0704a 70%, #9a2a1a); }
.wc-ban.snow { background: radial-gradient(ellipse at 60% 40%, #ffffff, #d8e8f6 70%, #a9c8e6); }
.wc-art img { max-width: 170px; max-height: 96px; object-fit: contain; filter: drop-shadow(0 4px 4px #0b2a5260); }
.wc-xy { position: absolute; left: 8px; bottom: 5px; color: #fff; font-weight: bold; font-size: 13px; text-shadow: var(--stroke); }
.wc-more { position: absolute; right: 6px; top: 6px; border: 2px solid #fff; border-radius: 10px; background: #2f6fc0d0; color: #fff; font-size: 11px; font-weight: bold; padding: 1px 8px; }
.wc-title { text-align: center; font-size: 18px; font-weight: 900; color: #1f5aa6; margin: 6px 0 4px; }
.wc-title small { font-size: 12px; color: #4a6f9a; font-weight: bold; }
.wc-elite { font-style: normal; font-size: 11px; background: #e0402a; color: #fff; border-radius: 6px; padding: 0 5px; margin-left: 4px; vertical-align: 2px; }
.wc-box { background: #c6dcf2; border-radius: 10px; padding: 4px 10px; }
.wc-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 13px; color: #4a6f9a; }
.wc-row b { color: #1f5aa6; font-variant-numeric: tabular-nums; } .wc-row b img.ico { width: 18px; height: 18px; }
.wc-row .good, .wc-spd .good { color: #1f9a3a; } .wc-row .bad { color: #d03a2a; }
.wc-spd { text-align: center; font-size: 13px; margin-top: 6px; color: #4a6f9a; } .wc-spd small { font-size: 10px; }
.wc-sub { text-align: center; font-size: 13px; color: #4a6f9a; margin: 6px 0 4px; font-weight: bold; }
.wc-drops { display: flex; gap: 5px; justify-content: center; }
.wc-drops .icell { width: 46px; height: 46px; border-radius: 10px; border-width: 2px; }
.wc-drops .icell img { width: 80%; height: 80%; object-fit: contain; }
.wc-cost { justify-content: center; color: #1f5aa6; font-weight: bold; font-size: 13px; }
.wc-rec { text-align: center; font-size: 13px; color: #4a6f9a; margin-top: 6px; } .wc-rec b { color: #1f5aa6; font-size: 15px; }
.wc-btns { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 8px; }
.wc-btns .btn.big { flex: 1; width: auto; margin: 0; max-width: 200px; padding: 8px 6px; font-size: 18px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.wc-btns .btn.big small { font-size: 12px; letter-spacing: 0; }
.wc-sm { flex: none; padding: 8px 12px; font-size: 14px; }

/* ---------- 整页出征 ---------- */
#modal.mfull { align-items: stretch; }
#modal.mfull .modal-body { width: 100%; max-width: 480px; max-height: none; height: 100%; border-radius: 0; border: 0; padding: 0 10px 0; box-shadow: none; display: flex; flex-direction: column; overflow-y: auto; background: linear-gradient(#1f4c82, #13355e); animation: up .18s ease-out; }
.mp-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 10px 0 6px; margin: 0 -10px; background: linear-gradient(#2f6fc0, #24518e); border-bottom: 2px solid #8fc6f5; }
.mp-head b { font-size: 18px; text-shadow: var(--stroke); }
.mp-close { position: absolute; left: 10px; width: 44px; height: 30px; border: 0; background: linear-gradient(90deg, #e6f5ff, #9fd4ff); clip-path: polygon(0 50%, 40% 0, 40% 28%, 100% 28%, 100% 72%, 40% 72%, 40% 100%); }
.mp-stat { display: flex; gap: 6px; margin: 8px 0 6px; padding: 6px 8px; border-radius: 12px; background: #0b2a52; border: 2px solid #3a6fae; }
.mp-stat > span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.mp-stat b { font-size: 15px; color: #fff; } .mp-stat b.warn { color: #ffb070; } .mp-stat b.bad { color: #ff7a6a; }
.mp-stat img.ico { width: 20px; height: 20px; }
.mp-odds { font-size: 13px !important; }
.hslots { display: flex; gap: 8px; justify-content: center; margin: 6px 0; }
.hslot { position: relative; width: 100px; height: 132px; border-radius: 12px; border: 3px solid #fff; overflow: hidden; background: linear-gradient(color-mix(in srgb, var(--qc, #6fa6e0) 70%, #fff), color-mix(in srgb, var(--qc, #6fa6e0) 90%, #000)); box-shadow: 0 3px 0 #0b2a5280; padding: 0; cursor: pointer; }
.hslot.empty { background: #0b2a52; border: 3px dashed #6fa6e0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hslot.empty i { font-style: normal; font-size: 40px; color: #6fa6e0; line-height: 1; } .hslot.empty small { color: var(--dim); }
.hs-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.hs-tag { position: absolute; left: 4px; top: 4px; font-style: normal; font-size: 10px; font-weight: bold; background: #ffd84d; color: #6a3a00; border-radius: 6px; padding: 0 4px; }
.hs-lv { position: absolute; left: 6px; bottom: 16px; font-size: 15px; text-shadow: var(--stroke); }
.hslot .stars { position: absolute; left: 4px; right: 4px; bottom: 2px; justify-content: center; } .hslot .stars em { display: none; }
.hs-x { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: radial-gradient(#ff7a5a, #d8342a); padding: 0; }
.hs-x::before { content: ''; position: absolute; left: 4px; right: 4px; top: 8px; height: 3px; background: #fff; border-radius: 2px; }
.hpick-box { background: #0b2a52b0; border-radius: 12px; padding: 6px; margin-bottom: 6px; }
.mp-team { margin-bottom: 6px; }
.selrow2 { background: linear-gradient(#e6f1fc, #c6dcf2); border: 2px solid #fff; color: #1d3f6e; }
.selrow2 .sr-top b { color: #4a6f9a; font-size: 14px; font-weight: normal; }
.sr-ic { position: relative; width: 50px; height: 50px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 2px #9fc4ea; }
.sr-ic img { width: 46px; height: 46px; }
.sr-ic i { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: bold; color: #fff; background: #4a6f9a; border-radius: 6px; padding: 0 4px; }
.sr-cnt { background: #b6cfe8; border-radius: 8px; padding: 0 10px; min-width: 56px; text-align: center; }
.selrow2 .sr-top .num { color: #1d3f6e; text-shadow: none; font-size: 15px; }
.selrow2 .sr-top small { color: #4a6f9a; font-size: 13px; font-weight: bold; }
.sr-line { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.sr-pm { flex: none; width: 34px; height: 30px; border-radius: 8px; border: 2px solid #fff; background: linear-gradient(#5fb0ff, #2a68c8); color: #fff; font-size: 20px; font-weight: 900; line-height: 1; padding: 0; box-shadow: 0 2px 0 #1d4b88; }
.selrow2 .sr-range::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #3fcf3a 0 var(--p), #9fb8d0 var(--p) var(--lim), #6a849e var(--lim)); border: 0; }
.selrow2 .sr-range::-webkit-slider-thumb { margin-top: -6px; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(#5fb0ff, #2a68c8); }
.mp-tips { font-size: 12px; color: #c3dbf4; padding: 4px 4px 8px; line-height: 1.6; }
.mp-tips .warn { color: #ffb070; } .mp-tips .good { color: #8ef07a; }
.mp-bar { position: sticky; bottom: 0; z-index: 3; margin: auto -10px 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 6px; background: linear-gradient(#24518ef0, #16325c); border-top: 2px solid #8fc6f5; }
.mp-tool { flex: none; width: 58px; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.mp-tool img.ico { width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: linear-gradient(#5fb0ff, #2a68c8); border: 2px solid #fff; box-sizing: content-box; }
.mp-tool small { font-size: 11px; margin-top: 2px; white-space: nowrap; }
.mp-go { flex: 1; display: flex; flex-direction: column; align-items: stretch; }
.mp-time { text-align: center; font-size: 13px; font-weight: bold; text-shadow: var(--stroke); }
.mp-time img.ico { width: 18px; height: 18px; }
.mp-gobtn { font-size: 20px; padding: 10px 0; letter-spacing: 4px; border-radius: 14px; }

/* ---------- 头像下面的增益 ---------- */
#hud-buffs { position: absolute; left: 170px; top: 100%; margin-top: 4px; display: flex; gap: 4px; z-index: 6; }
#hud-buffs:empty { display: none; }
.hbuff { position: relative; width: 36px; height: 36px; padding: 0; border-radius: 8px; border: 2px solid #fff; background: linear-gradient(#5fb0ff, #2a68c8); box-shadow: 0 2px 0 #1d4b88; }
.hbuff img { width: 28px; height: 28px; object-fit: contain; }
.hbuff small { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); font-size: 9px; font-weight: bold; white-space: nowrap; background: #16325ce0; border-radius: 5px; padding: 0 3px; }
#hud { position: relative; }
.wc-row img, .mp-stat img, .wc-cost img { width: 18px !important; height: 18px !important; object-fit: contain; vertical-align: -4px; }
.mp-stat img.ico { width: 20px !important; height: 20px !important; }
.wc-drops { flex-wrap: wrap; } .wc-drops .icell { width: 42px; height: 42px; }
.bkst { font-size: 12px; line-height: 1.7; background: #0b2a52; border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; }
.bkst .good { color: #8ef07a; } .bkst .warn { color: #ffb070; } .bkst .bad { color: #ff7a6a; }
.bkrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-top: 6px; border-radius: 10px; background: #1a4277b0; border: 2px solid #3a6fae; }
.bkrow > div { flex: 1; min-width: 0; } .bkrow b { display: block; font-size: 13px; } .bkrow small { font-size: 11px; color: var(--dim); }

/* ---------- 右侧图标：去掉圆形 / 方形底框，只留图片，排得更紧凑 ---------- */
#float-btns { gap: 0; right: 2px; }
#float-btns .fgap { height: 2px; }
.ficon { width: 54px; margin-bottom: 0; }
.ficon .fi, .ficon.gold .fi, .ficon.red .fi, .ficon.ev .fi, .ficon.buff .fi { width: 46px; height: 46px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.ficon .fi img, .ficon.ev .fi img { width: 46px; height: 46px; filter: drop-shadow(0 2px 2px #0b2a52a0); }
.ficon > b { margin-top: -10px; font-size: 10px; padding: 0 4px; background: #16325cc8; }
.ficon.shine .fi { animation: evglow2 1.6s ease-in-out infinite; }
.ficon.shine .fi::after { display: none; }
@keyframes evglow2 { 50% { filter: drop-shadow(0 0 8px #ffd84d); } }
.ficon .dot { top: 0; right: 4px; width: 11px; height: 11px; }
.ficon .cnt { top: -2px; right: 0; }
.ficon em { top: 26px; right: 2px; }
.q-low .ficon .fi img, .q-mid .ficon .fi img { filter: drop-shadow(0 2px 2px #0b2a52a0) !important; }
/* 浅色信息卡里的字：去掉全局描边，深色实字更清楚 */
#wcard, #wcard b, #wcard span, #wcard small, #wcard div { text-shadow: none; }
#wcard .wc-row b { color: #12407d; font-weight: 800; font-size: 14px; }
#wcard .wc-row { color: #3d5f88; }
#wcard .wc-title { color: #1a4f96; }
#wcard .wc-xy, #wcard .btn, #wcard .btn * { text-shadow: var(--stroke); }
.selrow2 .sr-top b, .selrow2 .num, .selrow2 small { text-shadow: none !important; }
/* 右侧图标间距再大一点，防误触（图标大小不变） */
#float-btns { gap: 7px; }
/* 活动图标是竖长的旗子，单独放大，让它和其他图标看起来一样大 */
.ficon.evt .fi img { width: 46px; height: 46px; transform: scale(1.3); transform-origin: 50% 60%; }

/* ---------- 地图：护盾罩 ---------- */
#home-shield,.net-player-shield { position: absolute; z-index: 6; width: 3.7em; height: 3.7em; font-size: 64px; pointer-events: none; }
#home-shield i,.net-player-shield i { position: absolute; inset: 0; border-radius: 50%; }
.hs-dome { background: radial-gradient(circle at 50% 38%, #ffffff00 40%, #8fe4ff40 62%, #5fc8ffa0 72%, #bff4ff 74%, #5fc8ff00 77%); box-shadow: 0 0 24px 6px #6fd8ff80; animation: hsBreath 2.4s ease-in-out infinite; }
.hs-ring { inset: 6% !important; border: 3px solid #bff4ffb0; animation: spin 14s linear infinite; border-style: dashed !important; }
.hs-hex { background: repeating-linear-gradient(60deg, #bff4ff22 0 2px, transparent 2px 14px), repeating-linear-gradient(-60deg, #bff4ff22 0 2px, transparent 2px 14px); -webkit-mask: radial-gradient(circle, transparent 55%, #000 70%, transparent 74%); mask: radial-gradient(circle, transparent 55%, #000 70%, transparent 74%); animation: hsBreath 2.4s ease-in-out infinite reverse; }
@keyframes hsBreath { 50% { opacity: .65; transform: scale(1.03); } }
.q-low .hs-dome, .q-low .hs-hex, .q-low .hs-ring { animation: none !important; }

/* ---------- 地图交战：刀弧、金属命中、贴地雪尘 ---------- */
.wbattle { position:absolute; z-index:9; width:0; height:0; pointer-events:none; transform:scale(var(--fx-scale,1)); --impact:#ffc66b; }
.wbattle.big { --impact:#ffb65f; }
.wbattle i, .wbattle b { position:absolute; display:block; }
.wb-ground { left:-31px; top:-10px; width:62px; height:24px; border:1px solid #b7e9ff90; border-radius:50%; background:radial-gradient(ellipse,#283b525c,transparent 70%); animation:wbGround .95s ease-out both; }
.wb-action { position:absolute; left:0; top:-12px; transform:rotate(var(--bearing,0deg)); }
.wb-hit { position:absolute; left:0; top:0; }
.wb-cut { position:absolute; left:-45px; top:-38px; width:82px; height:58px; overflow:visible; opacity:0; transform-origin:55% 65%; animation:wbCut .34s var(--hit-delay) cubic-bezier(.12,.65,.22,1) both; }
.wb-cut-edge { fill:#2c7185; stroke:#a8eaff; stroke-width:.7; }
.wb-cut-core { fill:#f2fdff; }
.wb-contact { left:-10px; top:-10px; width:20px; height:20px; background:#fff6d4; clip-path:polygon(50% 0,60% 35%,100% 24%,72% 48%,100% 70%,62% 63%,50% 100%,42% 65%,0 76%,28% 50%,0 26%,40% 36%); opacity:0; animation:wbContact .22s calc(var(--hit-delay) + .12s) ease-out both; }
.wb-chip { left:-3px; top:-1px; width:7px; height:2px; border-radius:1px; background:var(--impact); box-shadow:0 1px 0 #86562c90; opacity:0; animation:wbChip .38s calc(var(--hit-delay) + .14s) ease-out both; }
.wb-snow { left:-13px; top:-3px; width:26px; height:14px; border-radius:50%; background:radial-gradient(ellipse,#f4fcffb0,#b1c9d54a 52%,transparent 72%); opacity:0; animation:wbSnow .65s var(--snow-delay) ease-out both; }
.wb-result { position:absolute; left:0; top:-68px; min-width:78px; padding:5px 12px 6px; text-align:center; white-space:nowrap; border:1px solid #dfbc6d; border-radius:4px 12px; background:linear-gradient(135deg,#24394ef5,#122236f5); box-shadow:0 3px 8px #10223750,inset 0 1px 0 #fff2; opacity:0; animation:wbResult 1.65s .82s ease-out both; }
.wb-result::before, .wb-result::after { content:''; position:absolute; width:4px; height:4px; background:#ffe3a1; top:calc(50% - 2px); transform:rotate(45deg); }
.wb-result::before { left:5px; } .wb-result::after { right:5px; }
.wb-result em { display:block; font-style:normal; font-size:19px; font-weight:900; letter-spacing:3px; line-height:1.2; color:#ffe3a1; text-shadow:0 1px 2px #0008; }
.wb-result small { display:block; font-size:9px; line-height:1.3; color:#d3dce5; letter-spacing:1px; margin-top:2px; }
.wb-result.lose { border-color:#a6b5c6; background:linear-gradient(135deg,#3b3042f5,#1d283bf5); }
.wb-result.lose em { color:#e9b9b4; } .wb-result.lose::before,.wb-result.lose::after { background:#c4b6bf; }
@keyframes wbGround { 0% { opacity:0; transform:scale(.65); } 18% { opacity:1; } 100% { opacity:0; transform:scale(1.5); } }
@keyframes wbCut { 0% { opacity:0; transform:rotate(calc(var(--cut-angle) - 45deg)) scale(.65); } 22% { opacity:1; } 55% { opacity:1; } 100% { opacity:0; transform:rotate(calc(var(--cut-angle) + 35deg)) scale(1.05); } }
@keyframes wbContact { 0% { opacity:0; transform:scale(.3) rotate(0deg); } 15% { opacity:1; } 100% { opacity:0; transform:scale(1.1) rotate(30deg); } }
@keyframes wbChip { 0% { opacity:1; transform:translate(0,0) rotate(var(--turn)) scaleX(.5); } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scaleX(.2); } }
@keyframes wbSnow { 0% { opacity:0; transform:translate(0,0) scale(.45); } 25% { opacity:.7; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.3); } }
@keyframes wbResult { 0% { opacity:0; transform:translate(-50%,8px) scale(.86); } 15%,75% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-10px) scale(1); } }
.q-low .wb-snow, .q-low .wb-chip { display:none; }
@media (prefers-reduced-motion:reduce) { .wb-action,.wb-snow,.wb-ground { display:none; } .wb-result { animation-name:wbResultStill; animation-delay:0s; } }
@keyframes wbResultStill { 0%,85% { opacity:1; transform:translateX(-50%); } 100% { opacity:0; transform:translateX(-50%); } }
.hs-dome { background: radial-gradient(circle at 50% 40%, #bff4ff18 0 45%, #8fe4ff55 62%, #5fc8ffc0 71%, #e6fbff 73.5%, #5fc8ff00 76%) !important; box-shadow: 0 0 30px 10px #6fd8ffa0, inset 0 0 30px #bff4ff80; }
.hs-ring { border-color: #e6fbff !important; }

/* ===== v5 地图动态效果（2026-11-11，学 Last War 的动起来的方式）===== */
/* 1 选中格子：金光闪一下 + 四角框；卡片 / 圆按钮弹出，关掉时缩回 */
#tile-sel.wpop::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: radial-gradient(circle, #fff8d0, #ffd34a 45%, #ffb02000 75%); animation: tsFlash .55s ease-out forwards; }
#tile-sel::after { content: ''; position: absolute; inset: -7px; border-radius: 8px; --c: #ffd34a; background: linear-gradient(var(--c), var(--c)) 0 0 / 12px 3px, linear-gradient(var(--c), var(--c)) 0 0 / 3px 12px, linear-gradient(var(--c), var(--c)) 100% 0 / 12px 3px, linear-gradient(var(--c), var(--c)) 100% 0 / 3px 12px, linear-gradient(var(--c), var(--c)) 0 100% / 12px 3px, linear-gradient(var(--c), var(--c)) 0 100% / 3px 12px, linear-gradient(var(--c), var(--c)) 100% 100% / 12px 3px, linear-gradient(var(--c), var(--c)) 100% 100% / 3px 12px; background-repeat: no-repeat; filter: drop-shadow(0 0 3px #ffb020); animation: tsCorner 1.2s ease-in-out infinite; }
#tile-sel.wpop { animation: tsPop .35s cubic-bezier(.3, 1.6, .5, 1), tsel 1.2s .35s ease-in-out infinite; }
@keyframes tsFlash { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tsCorner { 50% { inset: -11px; } }
@keyframes tsPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
#wcard.wpop { animation: wcPop .28s cubic-bezier(.3, 1.5, .5, 1); transform-origin: var(--ax, 50%) 0; }
#wcard.up.wpop { transform-origin: var(--ax, 50%) 100%; }
@keyframes wcPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.wout { animation: wOut .18s ease-in forwards !important; }
@keyframes wOut { to { transform: scale(.7); opacity: 0; } }
/* 2 圆按钮 */
#wradial { position: absolute; z-index: 10; width: 0; height: 0; }
#wradial .rb { position: absolute; width: 50px; margin: -25px 0 0 -25px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; animation: rbPop .32s cubic-bezier(.3, 1.6, .5, 1) both; }
#wradial .rbi { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, #ffffff, #8fd0ff 55%, #2f7fe0); border: 3px solid #fff; box-shadow: 0 3px 8px #0b2a5280, inset 0 -4px 6px #1a5ab060; }
#wradial .rbi img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 1px 1px #0006); }
#wradial em { margin-top: 2px; font-style: normal; font-size: 11px; font-weight: bold; color: #fff; white-space: nowrap; background: #16325ce0; border-radius: 8px; padding: 0 6px; line-height: 16px; }
#wradial .rb:active .rbi { transform: scale(.9); }
@keyframes rbPop { 0% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
#wradial.wout { animation: none !important; }
#wradial.wout .rb { animation: rbOut .18s ease-in forwards !important; }
@keyframes rbOut { to { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.2); opacity: 0; } }

/* 3 行军部队：脚下光环 + 兵种小人 + 头像进度条；位置平滑移动；行军线流动 */
.mdot2 { position: absolute; z-index: 6; width: 0; height: 0; pointer-events: none; transition: left 1s linear, top 1s linear; }
.mring { position: absolute; left: -22px; top: -9px; width: 44px; height: 20px; border-radius: 50%; border: 3px solid var(--mc); background: radial-gradient(ellipse, transparent 40%, var(--mc) 160%); box-shadow: 0 0 8px var(--mc); opacity: .9; animation: mRing 1.4s ease-in-out infinite; }
@keyframes mRing { 50% { transform: scale(1.15); opacity: .55; } }
.mu { position: absolute; left: -17px; top: -30px; width: 34px; height: 34px; animation: mBob .5s ease-in-out infinite alternate; }
.mu img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #0008); }
.mu.flip img { transform: scaleX(-1); }
.ph-gather .mu, .ph-station .mu, .ph-prep .mu { animation: none; }
@keyframes mBob { to { transform: translateY(-3px); } }
.mhead { position: absolute; left: -20px; top: -50px; display: flex; align-items: center; gap: 2px; }
.mhf { width: 20px; height: 20px; border-radius: 4px; overflow: hidden; border: 2px solid #fff; background: #2f6fc0; box-shadow: 0 1px 3px #0008; flex: none; }
.mhf img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mbar { width: 26px; height: 6px; border-radius: 3px; background: #0b2238c0; border: 1px solid #fff; overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--mc); }
.mdot2 small { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #16325ce8; color: #fff; border-radius: 6px; padding: 0 4px; font-size: 10px; white-space: nowrap; line-height: 16px; font-variant-numeric: tabular-nums; }
.mdot2 small img.ico { width: 12px; height: 12px; vertical-align: -2px; }
#march-lines line { animation: mDash .9s linear infinite; }
@keyframes mDash { to { stroke-dashoffset: -18; } }

/* 5 资源到账：完整数字滚动 + 金色发光 */
#hud-res .res.rolling { overflow: visible; }
#hud-res .res.rolling b { color: #ffe27a; font-size: 11.5px; letter-spacing: -.4px; overflow: visible; text-overflow: clip; max-width: none; white-space: nowrap; text-shadow: 0 0 6px #ffb020, var(--stroke, 0 0 2px #000); font-variant-numeric: tabular-nums; }
#hud-res .res b { transition: transform .2s; }

/* 6 城堡燃烧：细长不规则火舌，错开燃点，烟尘与余烬上升。 */
.burn { position:absolute; left:50%; top:35%; width:0; height:0; z-index:2; pointer-events:none; }
.ent.lord .burn,.ent.home .burn { top:43%; }
.burn-flame { position:absolute; width:16px; height:35px; left:-8px; bottom:0; overflow:visible; transform-origin:50% 100%; animation:roofFlame .72s ease-in-out infinite alternate; }
.burn .flame-rim { fill:#dd4d15; opacity:.9; }
.burn .flame-body { fill:#ff9c2d; }
.burn .flame-heart { fill:#ffe5a0; }
.burn .f0 { left:-26px; bottom:0; width:15px; height:29px; animation-delay:-.31s; }
.burn .f1 { left:-7px; bottom:6px; width:17px; height:39px; animation-delay:-.62s; animation-duration:.91s; }
.burn .f2 { left:14px; bottom:-4px; width:13px; height:26px; animation-delay:-.17s; animation-duration:.65s; }
.burn .f3 { left:1px; bottom:-17px; width:11px; height:21px; animation-delay:-.48s; animation-duration:.82s; }
.burn-light { position:absolute; left:-32px; top:-12px; width:64px; height:27px; border-radius:50%; background:radial-gradient(ellipse,#ff8c2938,transparent 70%); animation:roofLight 1.2s ease-in-out infinite alternate; }
.burn u { position:absolute; left:-12px; top:-24px; width:23px; height:28px; border-radius:46% 54% 39% 61%; background:radial-gradient(ellipse,#37404a70,#5b626a38 42%,transparent 70%); opacity:0; animation:roofSmoke 3.1s ease-out infinite; }
.burn u:nth-of-type(2) { left:9px; top:-18px; animation-delay:-1.05s; }
.burn u:nth-of-type(3) { left:-26px; top:-15px; animation-delay:-2.1s; }
.burn-ember { position:absolute; left:0; top:-16px; width:2px; height:3px; background:#ffba57; opacity:0; animation:roofEmber 1.8s linear infinite; }
.burn .e0 { left:-17px; animation-delay:-.25s; }.burn .e1 { left:16px; animation-delay:-1.2s; }.burn .e2 { left:3px; animation-delay:-.8s; }
@keyframes roofFlame { 0% { transform:scale(.92,.82) skewX(-5deg); opacity:.82; } 35% { transform:scale(1.04,1.08) skewX(5deg); opacity:1; } 65% { transform:scale(.9,.94) skewX(-3deg); opacity:.9; } 100% { transform:scale(.96,1.16) skewX(6deg); opacity:.95; } }
@keyframes roofSmoke { 0% { opacity:0; transform:translate(0,0) scale(.55); } 20% { opacity:.4; } 100% { opacity:0; transform:translate(15px,-43px) scale(1.65); } }
@keyframes roofEmber { 0% { opacity:0; transform:translate(0,0) scale(1); } 15% { opacity:.8; } 100% { opacity:0; transform:translate(12px,-44px) scale(.3); } }
@keyframes roofLight { to { opacity:.55; } }
.q-low .burn u,.q-low .burn-ember { display:none; }
.q-low .burn-flame,.q-low .burn-light { animation:none; }
@media (prefers-reduced-motion:reduce) { .burn-flame,.burn-light { animation:none; } .burn u,.burn-ember { display:none; } }

/* 低画质：大部分特效关掉，只留静态 */
.q-low .burn u, .q-low .wb-white, .q-low .wb-pillar, .q-low .wb-streak, .q-low #tile-sel::before { display: none !important; }
.q-low .mring, .q-low .mu, .q-low #march-lines line, .q-low .burn b, .q-low #tile-sel::after { animation: none !important; }
.q-low .mdot2 { transition-duration: 2s; }

/* ===== 电脑领主性格 / 仇人（2026-11-11）===== */
.ptags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 2px 0 4px; }
.ptag { border: 0; border-radius: 9px; padding: 1px 8px; font-size: 11px; font-weight: bold; line-height: 18px; color: #fff; background: var(--pc, #6a7f9a); box-shadow: inset 0 -2px 0 #0003; }
.ptag.foe { background: #8a1a1a; }
.ptag.peace { background: #2f9a8a; }
.ptag.shield { background: #3a8ad6; }
.hate { display: inline-block; width: 46px; height: 7px; border-radius: 4px; background: #c8d6e8; overflow: hidden; vertical-align: middle; margin-right: 4px; }
.hate i { display: block; height: 100%; background: linear-gradient(90deg, #ffb040, #e0302a); }
.warn-t { color: #c07a00; }
.foe-row { display: flex; align-items: center; gap: 8px; padding: 7px; margin-top: 6px; border-radius: 12px; background: linear-gradient(#fff4f2, #ffe2dc); border: 2px solid #f0b8ae; }
.foe-av { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; }
.foe-av img { max-width: 100%; max-height: 100%; object-fit: contain; }
.foe-tx { flex: 1; min-width: 0; font-size: 13px; }
.foe-tx .desc { margin: 1px 0; }
.foe-took { font-size: 11px; color: #8a2a1a; }
.foe-took img.ico { width: 13px; height: 13px; vertical-align: -2px; }
.foe-btns { display: flex; flex-direction: column; gap: 4px; }
.foe-took img { width: 14px !important; height: 14px !important; vertical-align: -2px; }
.foe-took .cost, .foe-took span { display: inline; font-size: 11px; }

/* ===== 冰原战事（电脑联盟战争）===== */
.ptag.war { background: #b0401a; }
.aw-war { display: flex; align-items: stretch; gap: 4px; margin-top: 8px; }
.aw-side { flex: 1; border-radius: 12px; padding: 6px 4px; text-align: center; background: linear-gradient(#fff, #e8f0fa); border: 3px solid var(--ac); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.aw-side b { color: var(--ac); font-size: 16px; text-shadow: 0 1px 0 #0003; }
.aw-side small { font-size: 11px; color: #5a6f8a; }
.aw-side em { font-style: normal; font-size: 26px; font-weight: 900; color: #1d3f6e; line-height: 1.1; }
.aw-vs { width: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.aw-vs i { font-style: normal; font-size: 22px; font-weight: 900; color: #e04a3a; text-shadow: 0 2px 0 #7a1810; }
.aw-vs small { font-size: 10px; text-align: center; }
.aw-news { max-height: 180px; overflow: auto; font-size: 12px; background: #0b22380d; border-radius: 10px; padding: 4px 8px; }
.aw-news div { padding: 3px 0; border-bottom: 1px dashed #c8d6e8; }
.aw-news small { color: #7a8fa8; margin-right: 4px; }
.mdot2.ai .mu { width: 26px; height: 26px; left: -13px; top: -24px; }
.mdot2.ai .mring { left: -16px; top: -6px; width: 32px; height: 14px; }
.mdot2.ai small { top: 6px; background: #0b2238b0; }

/* ===== 大事件：霸主 / 寒潮 / 据点 ===== */
.ent.boss img.e { filter: drop-shadow(0 0 10px #ff3a2a) drop-shadow(0 0 22px #ff3a2a90) hue-rotate(-20deg) saturate(1.3); animation: bossPulse 1.6s ease-in-out infinite; }
.ent.boss .n { color: #ffd0c0; background: #8a1a1aee !important; }
@keyframes bossPulse { 50% { filter: drop-shadow(0 0 16px #ff5a2a) drop-shadow(0 0 30px #ff3a2ab0) hue-rotate(-20deg) saturate(1.3); } }
.ent.special .spown { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: bold; color: #fff; background: var(--ac); border-radius: 7px; padding: 0 5px; line-height: 15px; box-shadow: 0 1px 3px #0006; }
.ent.special .spflag { position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; object-fit: contain; }
.ent.special.underatk img.e { animation: spAtk .6s ease-in-out infinite alternate; }
@keyframes spAtk { to { filter: drop-shadow(0 0 10px #ff2a2a) brightness(1.15); } }
.ent.special.mine img.e { filter: drop-shadow(0 0 8px #5fc8ff); }
.hbuff.cold small { color: #bfe6ff; }
.hbuff.cold.bad small { color: #ff9a8a; }
.hbuff.cold.bad { animation: coldBlink 1.2s ease-in-out infinite; }
@keyframes coldBlink { 50% { filter: brightness(1.3); } }
body.cold #view::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, #bfe6ff55 80%, #e6f6ffcc 100%); box-shadow: inset 0 0 60px 10px #dff2ff; }
body.cold #snow { opacity: 1 !important; filter: brightness(1.2); }
.ev-list { display: flex; flex-direction: column; gap: 4px; }
.ev-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #ffffff1a; font-size: 13px; }
.ev-row b { width: 64px; flex: none; color: #ffe27a; }
.ev-row span { flex: 1; }
.ev-sp { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 20px; font-size: 12px; }
.ev-sp span { width: 76px; flex: none; font-weight: bold; }
.ev-sp small { flex: 1; opacity: .85; }
.ev-sp em { font-style: normal; font-weight: bold; }
#wcard .desc { color: #4a6380 !important; }

/* ===== 侦察 / 周榜 ===== */
.wc-intel { margin: 2px 8px 0; font-size: 11px; text-align: center; color: #6a7f9a; }
.wc-intel.good { color: #2f8a4a; font-weight: bold; }
.mixc { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; font-size: 11px; white-space: nowrap; }
.mixc img.ico { width: 14px; height: 14px; }
.rk-week { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; justify-content: space-between; margin: 6px 0; padding: 8px 10px; border-radius: 12px; background: linear-gradient(#fff6d8, #ffe6a0); color: #6a4a10; border: 2px solid #f0c860; }
.rk-week b { font-size: 14px; } .rk-week small { display: block; font-size: 11px; }
.rk-rw { display: flex; align-items: center; gap: 3px; font-size: 12px; }
.rk-rw img { width: 18px; height: 18px; object-fit: contain; }
.rk-tiers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rk-tiers span { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #ffffff22; }
.wc-row > span { white-space: nowrap; flex: none; } .wc-row > b { text-align: right; }
/* 信息卡底部：侦察 / 集结 / 我的队伍 小按钮跟主按钮排一排 */
.wc-btns .btn.wc-ib { flex: none; width: 54px; min-height: 52px; margin: 0; padding: 3px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 12px; background: linear-gradient(#ffffff, #cfe6ff); border: 2px solid #8fbfee; box-shadow: 0 2px 0 #5a8fc8; color: #1d3f6e; }
.wc-ib .ibi img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 1px #0004); }
.wc-ib em { font-style: normal; font-size: 11px; font-weight: bold; line-height: 1.1; white-space: nowrap; }
.wc-ib small { font-size: 9px; color: #5a7fa8; line-height: 1; }
.wc-ib:disabled { opacity: .55; }
.wc-btns .btn.big { min-height: 52px; }
.wc-btns .btn.wc-ib, .wc-ib em, .wc-ib small { text-shadow: none !important; -webkit-text-stroke: 0 !important; } .wc-ib em { color: #1d3f6e !important; } .wc-ib small { color: #3a7a4a !important; font-weight: bold; }

/* ===== 战报对阵 ===== */
.bt-vs { display: flex; align-items: stretch; gap: 4px; margin: 8px 0 4px; }
.bt-side { flex: 1; min-width: 0; border-radius: 10px; padding: 5px; text-align: center; }
.bt-side.me { background: linear-gradient(#e6f3ff, #c8e2ff); border: 2px solid #6aaee8; }
.bt-side.en { background: linear-gradient(#fff0ec, #ffd8cc); border: 2px solid #e8866a; }
.bt-h { font-size: 12px; font-weight: bold; color: #1d3f6e; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-heroes { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.bt-heroes .hchip { transform: scale(.9); }
.bt-x { align-self: center; font-style: normal; font-weight: 900; color: #e04a3a; font-size: 18px; }
.bt-tab { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.bt-tab th { font-size: 11px; opacity: .75; font-weight: normal; padding: 2px; }
.bt-tab td { padding: 3px 4px; text-align: center; border-top: 1px dashed #ffffff30; }
.bt-tab td:first-child { text-align: left; opacity: .85; white-space: nowrap; }
.bt-tab td small { display: block; font-size: 10px; opacity: .85; }
.bt-tiers td { vertical-align: top; }
.bt-tier-line { display: block; padding: 3px 2px; line-height: 1.35; }
.bt-tier-line b { color: #c6ecff; font-size: 12px; white-space: nowrap; }
.bt-tier-line + .bt-tier-line { border-top: 1px solid #ffffff14; margin-top: 2px; }
.bt-det { margin-top: 6px; font-size: 12px; }
.bt-det summary { cursor: pointer; font-weight: bold; padding: 3px 0; }
.bt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bt-h2 { font-weight: bold; font-size: 11px; opacity: .8; margin-bottom: 2px; }
.bt-tr { display: grid; grid-template-columns: 16px 1fr auto; column-gap: 3px; align-items: center; padding: 2px 0; border-bottom: 1px dashed #ffffff22; }
.bt-tr img.ico { width: 16px; height: 16px; }
.bt-tr span { font-size: 11px; white-space: nowrap; overflow: hidden; }
.bt-tr em { grid-column: 2 / 4; font-style: normal; font-size: 10px; display: inline; }
.bt-tr em + em { grid-column: 2 / 4; }
.bt-tr i { grid-column: 2 / 4; font-style: normal; font-size: 10px; }
.bt-tr i em { font-style: normal; }

/* ===== 2026-11-11 信息卡缩小 + 不截断 ===== */
#wcard { width: 252px; padding: 5px 5px 0; border-radius: 14px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#wcard::-webkit-scrollbar { display: none; }
#wcard.scroll::after { display: none; }
#wcard .wc-ban { height: 62px; border-radius: 10px; }
#wcard .wc-art img { max-width: 110px; max-height: 58px; }
#wcard .wc-xy { font-size: 11px; bottom: 3px; left: 6px; }
#wcard .wc-more { font-size: 10px; padding: 0 6px; top: 4px; right: 4px; }
#wcard .wc-title { font-size: 15px; margin: 3px 0 2px; line-height: 1.2; }
#wcard .wc-title small { font-size: 11px; }
#wcard .ptags { margin: 1px 0 3px; gap: 3px; }
#wcard .ptag { font-size: 10px; line-height: 16px; padding: 0 6px; }
#wcard .wc-box { padding: 2px 8px; border-radius: 8px; }
#wcard .wc-row { padding: 1px 0; font-size: 12px; min-height: 20px; }
#wcard .wc-row b { font-size: 12.5px; }
#wcard .wc-row b small, #wcard .wc-row .desc { font-size: 10px; }
#wcard .desc { font-size: 10.5px; line-height: 1.3; margin: 2px 4px; }
#wcard .note { font-size: 11px; padding: 4px 6px; margin: 3px 2px; }
#wcard .wc-intel { font-size: 10px; margin: 2px 4px 0; line-height: 1.3; }
#wcard .wc-sub { font-size: 11px; margin: 3px 0 1px; }
#wcard .wc-cost { font-size: 12px; gap: 6px; }
#wcard .wc-row img, #wcard .wc-cost img { width: 15px !important; height: 15px !important; }
#wcard .hate { width: 38px; height: 6px; }
/* 按钮一排贴在卡片底部，内容滑动时也看得到 */
#wcard .wc-btns { position: sticky; bottom: 0; z-index: 2; margin: 6px -5px 0; padding: 6px 6px 7px; background: linear-gradient(#d7e7f800, #d7e7f8 30%); }
#wcard .wc-btns .btn.big { min-height: 46px; font-size: 16px; padding: 6px; }
#wcard .wc-btns .btn.wc-ib { width: 48px; min-height: 46px; }
.wc-ib .ibi img { width: 22px; height: 22px; }

/* 体力：顶栏钻石左边的小框 */
.hud-rt { display: flex; align-items: center; gap: 6px; flex: none; }
.stam { display: flex; align-items: center; gap: 2px; background: #1d4378; border: 2px solid #7fb3ea; border-radius: 10px; padding: 2px 7px 2px 4px; color: #fff; font-weight: bold; font-size: 13px; box-shadow: inset 0 2px 3px #0b2a5280; text-shadow: var(--stroke); }
.stam img { width: 18px; height: 18px; object-fit: contain; }
.stam b { font-variant-numeric: tabular-nums; }

/* 战报：列表只留标题，点开单独弹窗 */
.rep { position: relative; padding-right: 22px !important; }
.rep-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 22px; opacity: .6; }
.rep-dlg .rd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px; border-radius: 10px; margin-bottom: 4px; }
.rep-dlg.win .rd-head { background: linear-gradient(90deg, #2f9a4a, #2f9a4a40); }
.rep-dlg.lose .rd-head { background: linear-gradient(90deg, #c03a2a, #c03a2a40); }
.rd-head b { font-size: 18px; } .rd-head span { flex: 1; font-weight: bold; } .rd-head small { opacity: .8; }

/* 置顶指南 */
.mailc.guide { border: 2px solid #ffd34a !important; background: linear-gradient(#fff8d8, #ffe9a8) !important; }
.mailc.guide b { color: #7a4a00; } .mailc.guide small { color: #9a6a20; }
.guide-body { max-height: 62vh; overflow: auto; text-align: left; }
.gsec { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: #ffffff18; }
.gsec b { display: block; color: #ffe27a; font-size: 15px; margin-bottom: 3px; }
.gsec p { margin: 0; font-size: 13px; line-height: 1.6; }
#hud-top .lord .pw { white-space: nowrap; } #hud-top .lord .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #hud-top .gems { padding: 3px 6px; } #hud-top .gems::after { margin-left: 4px; }
.mailc.guide b, .mailc.guide small { text-shadow: none !important; -webkit-text-stroke: 0 !important; }

/* ===== 搜索附近 ===== */
#coord .srch { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; background: linear-gradient(#ffe27a, #f0a020); border-color: #fff; color: #5a3000; text-shadow: none; }
#coord .srch img { width: 18px; height: 18px; object-fit: contain; }
.srch-k { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 6px 0; }
.srch-k button { border: 2px solid #7fb3ea; background: #1d4378; color: #fff; border-radius: 10px; padding: 4px 10px; font-weight: bold; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }
.srch-k button.on { background: linear-gradient(#ffe27a, #f0a020); color: #5a3000; border-color: #fff; }
.srch-k.sub button { font-size: 12px; padding: 2px 8px; }
.srch-k img.ico { width: 18px; height: 18px; }
.srch-lv { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0; }
.srch-lv b { min-width: 40px; text-align: center; font-size: 22px; color: #ffe27a; }
.srch-list { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow: auto; }
.srch-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; background: #ffffff18; cursor: pointer; }
.srch-row:active { background: #ffffff30; }
.srch-pic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.srch-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.srch-row div { flex: 1; min-width: 0; } .srch-row b { display: block; font-size: 14px; } .srch-row small { font-size: 11px; opacity: .85; }
.srch-row i { font-style: normal; color: #ffe27a; font-weight: bold; white-space: nowrap; }
.shd-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.shd-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #ffffff18; }
.shd-ic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.shd-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shd-row div { flex: 1; } .shd-row b { display: block; font-size: 14px; } .shd-row small { font-size: 11px; opacity: .8; }
.shd-row .btn img.ico { width: 16px; height: 16px; vertical-align: -3px; }

/* 英雄殿 / 商队驿站：自己的图没出之前借用别的建筑的图，换个色区分（出了 bt_heroHall_1 / bt_caravan_1 就自动不换色） */
#b-heroHall.alias .art img { filter: hue-rotate(170deg) saturate(1.25) brightness(1.05); }
#b-caravan.alias .art img { filter: hue-rotate(-40deg) saturate(1.3) brightness(1.05); }

/* 建筑升级页：一屏放下，不用往下滑（2026-11-11） */
.bhead { display: flex; align-items: center; gap: 8px; padding: 2px 0 4px; --gc: #8fd0ff; }
.bhead-img { position: relative; flex: none; width: 132px; height: 116px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.bhead-img .gbig-rays { top: 58px; width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.bhead-img img { position: relative; max-width: 130px; max-height: 112px; object-fit: contain; filter: drop-shadow(0 5px 5px #0b2a5280); }
.bhead-r { flex: 1; min-width: 0; text-align: center; }
.bhead-r .fx-lvline { font-size: 18px; gap: 8px; } .bhead-r .fx-lvline b { font-size: 22px; }
.bhead-eff { font-size: 13px; line-height: 1.35; margin-top: 4px; } .bhead-eff span { color: var(--dim); display: block; } .bhead-eff i { font-style: normal; color: #8ef07a; display: block; line-height: 1; }
.bhead-r .cperk { font-size: 12px; margin-top: 3px; }
.panel.tight { padding: 6px 10px; margin: 4px 0; }
.panel.tight .ptitle { margin-bottom: 2px; }
.panel.tight .ccell .icell { width: 50px; height: 50px; }
.panel.tight .tdtime { margin-top: 2px; }

/* 白色档（1 分钟加速等最低档） */
.icell.r-w { background: linear-gradient(#f4f8fc, #b4c3d4); }
.fx-item.r-w .ic { background: linear-gradient(#f4f8fc, #b4c3d4); }

/* 新英雄 / 新野兽：没出图前借别的图，换个色区分 */
img.alias { filter: hue-rotate(150deg) saturate(1.2); }
img.alias.b4, img.alias.b8 { filter: hue-rotate(40deg) saturate(1.3); } img.alias.b5, img.alias.b9 { filter: hue-rotate(200deg) brightness(1.1); }
img.alias.b6, img.alias.b10 { filter: hue-rotate(110deg) saturate(1.3); } img.alias.b7, img.alias.b11 { filter: hue-rotate(280deg) brightness(.9); }

/* 商队驿站：资源选择和特价货的图标统一小尺寸 */
.cvpick button { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 5px 0; }
.cvpick button img, .cvpick button .ph { width: 22px !important; height: 22px !important; object-fit: contain; flex: none; }
.cvdeal { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 6px 0; }
.cvdeal .icell { flex: none; width: 54px; height: 54px; }
.cvdeal .icell img, .cvdeal .icell .ph { width: 80%; height: 80%; object-fit: contain; }
.cvdeal .desc { font-size: 12px; line-height: 1.35; }
.card.recruit .pic img { width: 64px; height: 64px; object-fit: contain; }

/* 背包 / 商店方格：一行 4 个，图标小一点、间距大一点（2026-11-11） */
.igrid { gap: 16px 14px; padding: 2px 8px; }
.icell img.ie { width: 66%; height: 66%; }
.icell .icnt { font-size: 12px; right: 4px; bottom: 1px; }
.scell em img.ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.scell.out { opacity: .5; }
.scell:disabled { cursor: default; }

/* 属性汇总 / 实力提升 / 战报对比 / 英雄专属装备 / 宝石（2026-11-11） */
.attr-wrap { overflow-x: auto; }
table.attr { width: 100%; border-collapse: collapse; font-size: 11px; text-align: center; }
table.attr th { font-weight: normal; color: var(--dim); padding: 2px 1px; font-size: 10px; line-height: 1.2; }
table.attr td { padding: 3px 1px; border-top: 1px solid #ffffff14; white-space: nowrap; }
table.attr td:first-child { color: var(--dim); }
table.attr td.sum { color: #8ef07a; font-weight: bold; font-size: 12px; }
table.attr tr.grp td { text-align: left; font-weight: bold; color: #fff; padding-top: 6px; font-size: 13px; }
table.attr tr.grp img { width: 20px; height: 20px; vertical-align: -5px; object-fit: contain; }
table.attr .dim { color: #ffffff40; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; }
table.cmp th { color: var(--dim); font-weight: normal; }
table.cmp td { padding: 2px 4px; border-top: 1px solid #ffffff14; }
table.cmp td:nth-child(2) { color: var(--dim); font-size: 12px; }
table.cmp td.good { color: #8ef07a; font-weight: bold; } table.cmp td.bad { color: #ff8a7a; font-weight: bold; }
.grow-row { display: flex; align-items: center; gap: 10px; background: #1a4277b0; border: 2px solid #5f95d3; border-radius: 12px; padding: 6px 10px; margin: 6px 0; }
.grow-row img.gi, .grow-row .ph { width: 40px; height: 40px; object-fit: contain; flex: none; }
.grow-row div { flex: 1; min-width: 0; } .grow-row b { display: block; } .grow-row small { color: var(--dim); font-size: 12px; }
.heqrow { display: flex; gap: 8px; }
.heqslot { flex: 1; display: flex; align-items: center; gap: 6px; background: #ffffff10; border: 1px solid #ffffff30; border-radius: 10px; padding: 5px; text-align: left; min-width: 0; color: #fff; }
.heqslot .icell, .heqcur .icell, .heqpick .icell { width: 48px; height: 48px; flex: none; }
.heqslot div { min-width: 0; } .heqslot b { display: block; font-size: 12px; } .heqslot small { display: block; font-size: 11px; color: var(--dim); line-height: 1.25; }
.icell.empty { background: #ffffff14; border-style: dashed; } .icell.empty img { opacity: .35; } .icell .plus { position: absolute; font-style: normal; font-size: 22px; font-weight: bold; color: #fff; }
.heqcur, .heqpick { display: flex; align-items: center; gap: 8px; }
.heqpick { padding: 5px 8px; margin: 5px 0; }
b.q-blue { color: #7fc0f8; } b.q-purple { color: #cf9ff8; } b.q-gold { color: #ffc04a; }
img.hsm { width: 46px; height: 46px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; background: #ffffff20; }
.gemrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #ffffff14; }
.gemrow:first-of-type { border-top: 0; }
.gemico { position: relative; width: 40px; height: 40px; flex: none; }
.gemico img { width: 100%; height: 100%; object-fit: contain; }
.gemico b { position: absolute; right: -2px; bottom: -2px; font-size: 11px; background: #16325c; border-radius: 6px; padding: 0 4px; }
.gtxt { flex: 1; min-width: 0; font-size: 13px; } .gtxt .desc { font-size: 11px; } .gtxt .no { color: #ff8a7a; }

/* ===== 霜白卡片（样板）：浅色冰雪卡片 + 稀有度光晕，金色只给钱 ===== */
.fhead { text-align: center; font-size: 13px; color: #cfe3f7; margin: 2px 0 8px; }
.fhead b { color: #ffe27a; font-size: 15px; } .fhead img.ico { width: 18px; height: 18px; vertical-align: -4px; margin: 0 2px; }
.fhead small { display: block; font-size: 11px; color: #9fb9d6; margin-top: 2px; }
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 2px 6px; }
.fcard { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 4px 9px; border-radius: 14px; border: 1px solid #c5dbef;
  background: linear-gradient(180deg, #fbfdff 0%, #eaf3fb 55%, #d6e6f5 100%); box-shadow: 0 2px 0 #9ebedd, 0 5px 12px #06142a66, inset 0 1px 0 #fff; color: #1b3456; overflow: hidden; }
.fcard::before { content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--rc); }
.fcard .fi { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.fcard .fi::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 55%, transparent) 0%, transparent 68%); }
.fcard .fi img { position: relative; width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 3px 3px #0b2a5240); }
.fcard b { font-size: 13px; margin-top: 2px; line-height: 1.2; text-align: center; }
.fcard small { font-size: 11px; color: #5f7ea1; margin: 1px 0 6px; line-height: 1.2; text-align: center; min-height: 13px; }
.fpay { font-style: normal; font-weight: bold; font-size: 14px; color: #fff; padding: 2px 12px 2px 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; text-shadow: 0 1px 1px #0005; }
.fpay img.ico { width: 18px; height: 18px; }
.fpay.gem { background: linear-gradient(#ffd96a, #f0a92c); box-shadow: 0 2px 0 #b9761a, inset 0 1px 0 #fff8; color: #5a3200; text-shadow: none; }
.fpay.coin { background: linear-gradient(#7cc8ff, #2f86e0); box-shadow: 0 2px 0 #1f5ea8, inset 0 1px 0 #fff8; }
.fcard:disabled { opacity: 1; } .fcard:disabled .fpay { filter: grayscale(1) brightness(.9); } .fcard:disabled .fi { opacity: .6; }
.fcard b, .fcard small, .fcard { text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.fcard b { color: #17304f; font-weight: 800; }

/* ===== 霜白风格推广到所有道具格子（2026-11-11 用户确认）：浅冰白底 + 顶部稀有度色条 + 图标后面的同色光晕 ===== */
.icell, .fx-item .ic { --rc: #4aa3ff; background: linear-gradient(180deg, #fbfdff 0%, #e8f2fb 55%, #d3e4f4 100%) !important; border: 1px solid #c5dbef !important;
  box-shadow: 0 2px 0 #9ebedd, 0 4px 10px #06142a55, inset 0 1px 0 #fff !important; overflow: hidden; }
.icell.r-w, .fx-item.r-w .ic { --rc: #b8c8da; } .icell.r-g, .fx-item.r-g .ic { --rc: #58c95a; } .icell.r-b, .fx-item.r-b .ic { --rc: #4aa3ff; }
.icell.r-p, .fx-item.r-p .ic { --rc: #a67cf0; } .icell.r-o, .fx-item.r-o .ic { --rc: #ffa53a; }
.icell::before, .fx-item .ic::before { content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--rc); z-index: 1; }
.icell::after, .fx-item .ic::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 50%, transparent) 0%, transparent 70%); z-index: 0; }
.icell > *, .fx-item .ic > * { position: relative; z-index: 2; }
.icell > b.icnt, .icell > i.iface { position: absolute; }
.icell img.ie, .fx-item .ic img { width: 62% !important; height: 62% !important; filter: drop-shadow(0 2px 2px #0b2a5240); }
.icell .icnt { color: #17304f !important; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; font-weight: 800; }
.icell .iface { color: #17304f !important; text-shadow: 0 0 2px #fff, 0 0 3px #fff; top: 4px !important; }
.icell.empty { background: #ffffff14 !important; border: 1px dashed #ffffff60 !important; box-shadow: none !important; } .icell.empty::before, .icell.empty::after { display: none; }
.icell[data-act] { cursor: pointer; }
/* 背包 / 方格：图标小一点，间距大一点，一行还是 4 个 */
.igrid { gap: 18px 18px !important; padding: 4px 14px !important; }
/* 霜白卡片：图标小一点、间距大一点 */
.fgrid { gap: 12px !important; padding: 0 6px 8px !important; }
.fcard .fi { width: 52px !important; height: 52px !important; } .fcard .fi img { width: 48px !important; height: 48px !important; }
/* 道具说明 */
.idesc { background: #0f2747a0; border: 1px solid #ffffff22; border-radius: 10px; padding: 7px 10px; margin: 8px 0; font-size: 13px; line-height: 1.55; color: #dbe9f8; }
/* 限时超值礼包：主界面图标上的「3600%」角标 */
.ficon .flabel { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: linear-gradient(#ff6a5a, #d8241c); border-radius: 6px; padding: 0 4px; white-space: nowrap; box-shadow: 0 1px 0 #0006; }

/* 世界地图上的城 3×3 → 2×2（2026-11-11）：192px → 128px */
.ent.home, .ent.lord { width: 128px !important; height: 128px !important; }
.ent.home img.e { width: 116px !important; height: 116px !important; margin-top: -6px !important; }
.ent.lord img.e { width: 104px !important; height: 98px !important; margin-top: -4px !important; }
.ent.lord .n { top: 0 !important; font-size: 11px !important; } .ent.lord .l, .ent.home .l { bottom: 2px !important; font-size: 11px !important; }
.ent.lord .flag { top: 8px !important; right: 14px !important; }
#reloc-ghost { width: 128px !important; height: 128px !important; }
#home-shield,.net-player-shield { font-size: 50px !important; }

/* ===== 全局：道具格子固定小尺寸，不再撑满一行；格子之间留大间距，下面的字放大（2026-11-11 用户反复要求） ===== */
.rgrid { grid-template-columns: repeat(4, 60px) !important; justify-content: space-evenly; gap: 14px 10px !important; padding: 2px 0; }
.rcell .icell { width: 60px !important; height: 60px !important; margin: 0 auto; }
.rcell small { font-size: 12px !important; color: #dbe9f8 !important; margin-top: 4px; }
.igrid { grid-template-columns: repeat(4, 64px) !important; justify-content: space-evenly; gap: 18px 10px !important; padding: 4px 0 !important; }
.igrid .icell, .igrid .scell .icell { width: 64px !important; height: 64px !important; }
.scell .icell { width: 64px !important; }
.pc-items { gap: 10px !important; }
.pc-items .icell { width: 44px !important; height: 44px !important; }
.icell .icnt { font-size: 12px !important; }
.ccells { gap: 14px !important; } .ccell .icell { width: 52px !important; height: 52px !important; }

/* ===== 主城皮肤（2026-11-11）===== */
.look-btn.sk { top: auto; bottom: 8px; background: linear-gradient(#ffd96a, #f0a92c); color: #5a3200; border-color: #fff6; }
img.alias.sk-ice { filter: hue-rotate(185deg) saturate(.7) brightness(1.25); }
img.alias.sk-aurora { filter: hue-rotate(120deg) saturate(1.4) brightness(1.1); }
img.alias.sk-lava { filter: hue-rotate(-25deg) saturate(1.8) brightness(.95); }
img.alias.sk-snow { filter: hue-rotate(300deg) saturate(1.2) brightness(1.15); }
.skstage { position: relative; text-align: center; overflow: hidden; padding: 4px 0 6px; --gc: #8fd0ff; }
.skstage .gbig-rays { top: 80px; }
.skstage img.skbig { position: relative; height: 150px; max-width: 220px; object-fit: contain; filter: drop-shadow(0 6px 8px #0b2a5280); }
.skstage .skname { position: relative; font-size: 20px; font-weight: 900; color: #ffe27a; text-shadow: var(--stroke); }
.skgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 6px 8px; }
.skcard { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; border: 1px solid #c5dbef;
  background: linear-gradient(180deg, #fbfdff 0%, #eaf3fb 55%, #d6e6f5 100%); box-shadow: 0 2px 0 #9ebedd, 0 5px 12px #06142a66; color: #1b3456; text-shadow: none; }
.skcard.on { border: 2px solid #ffc04a; box-shadow: 0 0 0 2px #ffc04a66, 0 5px 12px #06142a66; }
.skcard .skpic img, .skcard .skpic .ph { width: 64px; height: 56px; object-fit: contain; }
.skcard b { font-size: 13px; color: #17304f; text-shadow: none !important; } .skcard small { font-size: 11px; color: #5f7ea1; text-align: center; line-height: 1.2; min-height: 26px; }
.skcard .btn img.ico { width: 14px; height: 14px; vertical-align: -2px; }
.skcard .skon { font-style: normal; font-size: 12px; font-weight: bold; color: #b9761a; }
.look-btn.sk { top: 10px !important; bottom: auto !important; transform: translateX(4px) !important; }
.look-btn:not(.sk) { transform: translateX(calc(-100% - 4px)) !important; }

/* ===== 英雄详情页（2026-11-11 重做：大立绘 + 三个入口，消耗放二级页）===== */
.hstage { position: relative; height: 300px; margin: -4px -4px 6px; overflow: hidden; border-radius: 14px; --gc: var(--qc);
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--qc) 35%, #1a3a66) 0%, #10264a 75%); }
.hstage .gbig-rays { top: 150px; width: 420px; height: 420px; margin: -210px 0 0 -210px; opacity: .55; }
.hstage .stage-floor { bottom: 14px; }
.hfull { position: absolute; left: 0; right: 0; bottom: 18px; height: 270px; display: flex; justify-content: center; align-items: flex-end; }
.hfull img { height: 100%; max-width: 70%; object-fit: contain; filter: drop-shadow(0 8px 10px #0008); animation: float 3.4s ease-in-out infinite; }
.htag { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-shadow: var(--stroke); }
.htag b { font-size: 22px; font-weight: 900; } .htag i { font-style: normal; font-size: 11px; font-weight: bold; color: #222; border-radius: 6px; padding: 0 6px; text-shadow: none; }
.htag small { font-size: 12px; color: #cfe3f7; }
.heqcol { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.heqmini { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; color: #fff; }
.heqmini .icell { width: 54px; height: 54px; } .heqmini small { font-size: 11px; text-shadow: var(--stroke); }
.hpower { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 2px 4px 8px; }
.hpower b { color: #ffe27a; font-size: 17px; } .hpower img.ico { width: 20px; height: 20px; }
.hpower .btn { margin-left: auto; } .hbusy2 { font-style: normal; font-size: 11px; background: #1a8a4a; border-radius: 6px; padding: 0 5px; }
.hinfo { background: #0f2747a0; border: 1px solid #ffffff22; border-radius: 12px; padding: 4px 10px; margin: 0 2px 10px; }
.hinfo div { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.hinfo div + div { border-top: 1px solid #ffffff14; }
.hinfo span { color: #9fb9d6; font-size: 12px; flex: none; min-width: 52px; } .hinfo b { flex: 1; font-weight: normal; } .hinfo em { font-style: normal; color: #8ef07a; font-weight: bold; }
.htiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 2px; }
.htile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1px solid #c5dbef;
  background: linear-gradient(180deg, #fbfdff 0%, #eaf3fb 55%, #d6e6f5 100%); box-shadow: 0 2px 0 #9ebedd, 0 5px 12px #06142a66; color: #17304f; text-shadow: none; }
.htile img.ti, .htile .ph { width: 44px; height: 44px; object-fit: contain; }
.htile b { font-size: 15px; } .htile small { font-size: 11px; color: #5f7ea1; }
.htile .dot { position: absolute; top: 6px; right: 6px; }
.hophead { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; } .hophead b { font-size: 16px; display: block; }
.htile b, .htile small { text-shadow: none !important; -webkit-text-stroke: 0 !important; color: #17304f; } .htile small { color: #5f7ea1; }
button.ccell { background: none; border: 0; padding: 0; color: #fff; }
button.ccell small { color: #dbe9f8; font-size: 12px; }
.htile .dot { width: 12px; height: 12px; background: #ff3b30; border-radius: 50%; border: 2px solid #fff; display: block; }
/* 背包方格：左右间距 = 上下间距（用户要求），格子跟着变大一点 */
.igrid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; padding: 6px 16px !important; justify-content: stretch; }
.igrid .icell, .igrid .scell .icell { width: 100% !important; height: auto !important; aspect-ratio: 1; }
/* 战报列表：每条更高、间距更大，手指好点（2026-11-11 用户要求） */
.rep { min-height: 68px; padding: 12px 26px 12px 12px !important; margin-bottom: 12px !important; border-radius: 14px !important; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.rep .rt b { font-size: 15px; }
/* 月卡 / 成长基金：购买按钮放进横幅、标题下面（2026-11-11） */
.obanner .obtn { display: flex; gap: 8px; margin-top: 8px; position: relative; z-index: 2; }
.obanner .obuy { font-size: 17px; font-weight: 900; padding: 5px 18px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; }
.obanner .obuy .cp img { width: 20px; height: 20px; }
.obanner .obought { font-weight: bold; color: #fff; background: #1a8a4acc; border-radius: 10px; padding: 3px 12px; }
.osub img.ico { width: 16px; height: 16px; vertical-align: -3px; }
/* 主城皮肤页：一页放下，皮肤图放大 */
.skhead { text-align: center; font-size: 12px; color: #9fb9d6; margin: 2px 0 10px; }
.skhead div { font-size: 13px; color: #fff; margin-top: 3px; }
.skgrid { gap: 10px !important; }
.skcard { padding: 6px 4px 8px !important; }
.skcard .skpic { width: 100%; height: 104px; display: flex; align-items: center; justify-content: center; }
.skcard .skpic img, .skcard .skpic .ph { width: 100% !important; height: 104px !important; object-fit: contain; filter: drop-shadow(0 4px 4px #0b2a5250); }
.skcard small { min-height: 0 !important; }

/* ===== 军队页精简（2026-11-12）===== */
.aw-inc { display: flex; align-items: center; gap: 8px; background: linear-gradient(90deg, #c8342ae0, #8f2020c0); border: 2px solid #ff8a7a; border-radius: 12px; padding: 6px 8px; margin-bottom: 8px; animation: pulse 1.6s infinite; }
.aw-inc .aw-skull img { width: 34px; height: 34px; } .aw-inc div { flex: 1; min-width: 0; } .aw-inc b { display: block; font-size: 14px; } .aw-inc small { font-size: 12px; color: #ffe0da; }
.aw-top { display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 12px; margin-bottom: 8px; border: 1px solid #c5dbef;
  background: linear-gradient(180deg, #fbfdff 0%, #eaf3fb 55%, #d6e6f5 100%); box-shadow: 0 2px 0 #9ebedd, 0 5px 12px #06142a66; color: #17304f; text-shadow: none; }
.aw-pw { flex: none; display: flex; flex-direction: column; } .aw-pw small { font-size: 12px; color: #5f7ea1; } .aw-pw b { font-size: 26px; font-weight: 900; line-height: 1.1; }
.aw-pw span { font-size: 12px; color: #5f7ea1; } .aw-pw img.ico { width: 16px; height: 16px; vertical-align: -3px; }
.aw-tr { flex: 1; display: flex; justify-content: space-around; } .aw-tr div { display: flex; flex-direction: column; align-items: center; }
.aw-tr img { width: 46px; height: 46px; object-fit: contain; } .aw-tr b { font-size: 13px; }
.aw-info { display: flex; justify-content: space-around; font-size: 12px; color: #9fb9d6; margin: 0 0 10px; } .aw-info b { color: #fff; } .aw-info img.ico { width: 14px; height: 14px; vertical-align: -2px; }
.aw-m { display: flex; align-items: center; gap: 8px; background: #0f2747a0; border: 1px solid #ffffff22; border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.aw-m b { flex: 1; font-weight: normal; }
.htiles.four { grid-template-columns: repeat(2, 1fr); }
.htile.warn { border-color: #ff8a7a; }
.htile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 英雄舞台：按品质发光，金色特别闪 ===== */
.hstage.q-blue { background: radial-gradient(ellipse at 50% 55%, #7fd0ff 0%, #2f7fd0 45%, #173f80 100%); }
.hstage.q-purple { background: radial-gradient(ellipse at 50% 55%, #e6c2ff 0%, #9a5ae0 45%, #4a2380 100%); }
.hstage.q-gold { background: radial-gradient(ellipse at 50% 55%, #fff6c8 0%, #ffd250 30%, #e88a10 65%, #8a3e06 100%); box-shadow: inset 0 0 0 2px #ffe27a, 0 0 18px #ffc04a80; }
.hstage .gbig-rays { opacity: .9 !important; animation: spin 14s linear infinite; }
.hstage.q-gold .gbig-rays { background: repeating-conic-gradient(#fff8d080 0 8deg, transparent 8deg 20deg) !important; }
.hstage .htag b, .hstage .htag small { text-shadow: var(--stroke); color: #fff; }
.hspark { position: absolute; z-index: 1; width: 10px; height: 10px; left: 22%; top: 30%; background: radial-gradient(circle, #fff 0 30%, #fff0 70%); border-radius: 50%; animation: hspark 2.2s ease-in-out infinite; pointer-events: none; }
.hspark::before, .hspark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 2px; margin: -1px 0 0 -15px; background: linear-gradient(90deg, #fff0, #fff, #fff0); }
.hspark::after { transform: rotate(90deg); }
.hspark.b { left: 72%; top: 22%; animation-delay: .8s; } .hspark.c { left: 64%; top: 68%; animation-delay: 1.5s; }
@keyframes hspark { 0%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.3) rotate(45deg); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.hstage.q-gold .hfull img { filter: drop-shadow(0 0 14px #fff3b0) drop-shadow(0 8px 10px #0006); }
.q-low .hspark, .q-low .hstage .gbig-rays { animation: none; }

/* ===== 主城皮肤动态效果（2026-11-12）===== */
.skfx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.skfx .halo { position: absolute; left: 50%; top: 58%; width: 120%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%; animation: skhalo 3s ease-in-out infinite; z-index: -1; }
@keyframes skhalo { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.skfx .flake { position: absolute; top: -10%; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: skflake 5s linear infinite; opacity: 0; }
@keyframes skflake { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18px, 150px); opacity: 0; } }
/* 冰晶：冰蓝光晕 + 闪烁星光 + 雪花 */
.sk-ice .halo { background: radial-gradient(ellipse, #9fe6ffcc, #4ab8ff55 45%, transparent 70%); }
.sk-ice .tw { position: absolute; width: 14px; height: 14px; margin: -7px; animation: sktw 2.6s ease-in-out infinite; opacity: 0; }
.sk-ice .tw::before, .sk-ice .tw::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background: linear-gradient(90deg, #fff0, #fff, #fff0); }
.sk-ice .tw::after { transform: rotate(90deg); }
@keyframes sktw { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
/* 极光：两条流动的极光带 + 青绿光点上升 */
.sk-aurora .halo { background: radial-gradient(ellipse, #7dffd8aa, #2fd6a055 45%, transparent 70%); }
.sk-aurora .band { position: absolute; left: -10%; top: -6%; width: 120%; height: 34%; border-radius: 50%; filter: blur(8px);
  background: linear-gradient(90deg, transparent, #58ffc8aa, #4ad6ffaa, #7dff9caa, transparent); animation: skband 5s ease-in-out infinite; }
.sk-aurora .band.b2 { top: 4%; height: 22%; animation-duration: 7s; animation-direction: reverse; opacity: .8; background: linear-gradient(90deg, transparent, #7ae0ffaa, #58ffb0aa, transparent); }
@keyframes skband { 0%, 100% { transform: translateX(-8%) skewX(-12deg) scaleY(.85); opacity: .6; } 50% { transform: translateX(8%) skewX(12deg) scaleY(1.15); opacity: 1; } }
.sk-aurora .mote { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #b6ffe8; box-shadow: 0 0 10px #4effc0; animation: skmote 3.2s ease-in infinite; opacity: 0; }
@keyframes skmote { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-70px); opacity: 0; } }
/* 熔岩：红光呼吸 + 热浪 + 火星上升 + 塔顶火焰 */
.sk-lava .halo { background: radial-gradient(ellipse, #ff7a2ae0, #ff3a1a66 45%, transparent 70%); animation-duration: 1.6s; }
.sk-lava .heat { position: absolute; left: 10%; right: 10%; bottom: 8%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse, #ffb04a88, transparent 70%); filter: blur(6px); animation: skhalo 1.1s ease-in-out infinite; }
.sk-lava .ember { position: absolute; bottom: 20%; width: 5px; height: 5px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px #ff6a1a, 0 0 3px #fff; animation: skember 2.5s ease-out infinite; opacity: 0; }
@keyframes skember { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(14px, -130px) scale(.3); opacity: 0; } }
/* 雪境童话：彩灯串一闪一闪 + 暖光 + 雪花 */
.sk-snow .halo { background: radial-gradient(ellipse, #ffe6a8bb, #ffb4c855 45%, transparent 70%); }
.sk-snow .bulb { position: absolute; width: 7px; height: 7px; margin: -3px; border-radius: 50%; animation: skbulb 1.4s ease-in-out infinite; }
.sk-snow .bulb.c0 { background: #ff5a5a; box-shadow: 0 0 8px #ff5a5a; } .sk-snow .bulb.c1 { background: #ffe25a; box-shadow: 0 0 8px #ffe25a; }
.sk-snow .bulb.c2 { background: #5aff8a; box-shadow: 0 0 8px #5aff8a; } .sk-snow .bulb.c3 { background: #6ac8ff; box-shadow: 0 0 8px #6ac8ff; }
@keyframes skbulb { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
.q-low .skfx * { animation: none !important; } .q-low .skfx .flake, .q-low .skfx .ember, .q-low .skfx .mote { display: none; }
/* 装备库 */
.arm-bulk { background: #0f2747a0; border: 1px solid #ffffff22; border-radius: 12px; padding: 8px; margin-bottom: 8px; }
.arm-opts { display: flex; gap: 8px; } .arm-opts .btn { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; }
.arm-opts b { font-size: 13px; } .arm-opts small { font-size: 11px; } .arm-opts img.ico { width: 13px; height: 13px; vertical-align: -2px; }
.scell .iface { font-size: 10px !important; }
.ent.home .skw { position: absolute; inset: 0; pointer-events: none; } .ent.home .skw .skfx { inset: 8% 10% 18%; }

/* ===== 可读性（2026-11-12 用户要求，以后都照这个来）：浅色底上的字一律纯深蓝、不加描边阴影；深色底上的字纯白 + 描边 ===== */
.aw-top, .aw-top *, .fcard, .fcard *, .skcard, .skcard *, .htile, .htile *, .icell b, .icell i, .dcard, .dcard * { text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.aw-tr b { color: #17304f; font-size: 15px; font-weight: 800; }
.look-btn.sk { background: #16325cd0 !important; color: #fff !important; border: 2px solid #ffd96a !important; }

/* 守城英雄选择：卡片，三个一行，写清楚加什么 */
.dpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; max-height: 58vh; overflow-y: auto; padding: 8px 2px 2px; }
.dcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--qc) 70%, #fff);
  background: linear-gradient(180deg, #fbfdff, #dfeaf6); color: #17304f; box-shadow: 0 2px 0 #9ebedd; }
.dcard.on { background: linear-gradient(180deg, #fff8dc, #ffe39a); border-color: #f0a92c; box-shadow: 0 0 0 2px #ffc04a, 0 2px 0 #b9761a; }
.dcard .dav { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 2px solid var(--qc); background: color-mix(in srgb, var(--qc) 30%, #fff); }
.dcard .dav img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.dcard b { font-size: 14px; } .dcard b small { font-size: 11px; color: #5f7ea1; font-weight: normal; margin-left: 3px; }
.dcard em { font-style: normal; font-size: 11px; line-height: 1.25; color: #1f6a2a; text-align: center; font-weight: bold; }
.dcard .dtag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: bold; background: #f0a92c; color: #fff; border-radius: 8px; padding: 0 8px; }
.dcard .dbusy { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: 10px; background: #1a8a4a; color: #fff; border-radius: 5px; padding: 0 3px; }
/* 极光圣殿：图里的极光已经改成青绿，叠加效果收淡；世界地图上只留少量光点，不罩绿雾 */
.sk-aurora .halo { background: radial-gradient(ellipse, #bff8ff66, #7fe6d822 45%, transparent 70%) !important; }
.sk-aurora .band { opacity: .45 !important; background: linear-gradient(90deg, transparent, #9ff7e0aa, #a8e8ffaa, transparent) !important; }
.ent.home .skw .halo, .ent.home .skw .band, .ent.home .skw .heat { display: none; }
.ent.home .skw .mote, .ent.home .skw .flake, .ent.home .skw .tw { transform-origin: center; scale: .7; }
/* 领主页「换形象」「主城皮肤」：做成立体按钮（上亮下暗 + 底边厚度 + 内高光，按下会沉下去） */
.look-btn { padding: 6px 14px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 900 !important; border: 2px solid #fff !important;
  background: linear-gradient(180deg, #8fd0ff 0%, #3a8ee6 48%, #2468c4 52%, #1d58a8 100%) !important; color: #fff !important;
  box-shadow: 0 4px 0 #123a72, 0 6px 8px #0008, inset 0 2px 0 #ffffffa0, inset 0 -2px 0 #0003 !important;
  text-shadow: 0 1px 0 #0d3266, 0 -1px 0 #0d3266, 1px 0 0 #0d3266, -1px 0 0 #0d3266 !important; transition: transform .08s, box-shadow .08s; }
.look-btn.sk { background: linear-gradient(180deg, #fff1a8 0%, #ffcf4a 48%, #f5a623 52%, #e08a10 100%) !important; border-color: #fff !important;
  box-shadow: 0 4px 0 #9a5a08, 0 6px 8px #0008, inset 0 2px 0 #ffffffc0, inset 0 -2px 0 #0002 !important;
  text-shadow: 0 1px 0 #8a4a00, 0 -1px 0 #8a4a00, 1px 0 0 #8a4a00, -1px 0 0 #8a4a00 !important; }
.look-btn:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #123a72, 0 2px 4px #0006, inset 0 2px 0 #ffffffa0 !important; }
.look-btn.sk:active { transform: translateX(4px) translateY(3px) !important; box-shadow: 0 1px 0 #9a5a08, 0 2px 4px #0006, inset 0 2px 0 #ffffffc0 !important; }
.look-btn:not(.sk):active { transform: translateX(calc(-100% - 4px)) translateY(3px) !important; }
.look-btn img.ico { width: 16px; height: 16px; vertical-align: -3px; }
/* 英雄页的守城阵容：跟选择框同样的卡片，三张一排 */
.dteam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 2px 4px; cursor: pointer; }
.dcard.empty { background: #ffffff14; border: 2px dashed #ffffff70; box-shadow: none; color: #fff; }
.dcard.empty .dav { display: flex; align-items: center; justify-content: center; background: #ffffff20; border-color: #ffffff70; }
.dcard.empty .plus { font-style: normal; font-size: 26px; font-weight: bold; color: #fff; }
.dcard.empty b, .dcard.empty em { color: #dbe9f8 !important; } .dcard.empty .dtag { background: #5f7ea1; }
/* 加成 / 战斗加持按钮（头像下方一排，立体按钮） */
#hud-buffs { left: 8px !important; }
.hboost { display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 10px 0 4px; border-radius: 10px; border: 2px solid #fff; font-size: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #8fd0ff 0%, #3a8ee6 48%, #2468c4 52%, #1d58a8 100%); box-shadow: 0 3px 0 #123a72, inset 0 2px 0 #ffffffa0;
  text-shadow: 0 1px 0 #0d3266, 0 -1px 0 #0d3266, 1px 0 0 #0d3266, -1px 0 0 #0d3266; }
.hboost.red { background: linear-gradient(180deg, #ffb09a 0%, #f0503a 48%, #d8341c 52%, #b02412 100%); box-shadow: 0 3px 0 #6e1408, inset 0 2px 0 #ffffffa0; text-shadow: 0 1px 0 #6e1408, 0 -1px 0 #6e1408, 1px 0 0 #6e1408, -1px 0 0 #6e1408; }
.hboost img.ico { width: 22px; height: 22px; object-fit: contain; }
.hboost:active { transform: translateY(2px); box-shadow: 0 1px 0 #123a72; }
/* 加成道具框 */
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: linear-gradient(180deg, #fbfdff, #dfeaf6); border: 1px solid #c5dbef; color: #17304f; box-shadow: 0 2px 0 #9ebedd; }
.bcard.on { background: linear-gradient(180deg, #f2fff0, #cff3c8); border-color: #58c95a; }
.bcard, .bcard * { text-shadow: none !important; }
.bcard .icell { width: 50px; height: 50px; } .bcard > b { font-size: 13px; } .bcard small { font-size: 11px; color: #5f7ea1; text-align: center; line-height: 1.2; min-height: 26px; }
.bcard .bon { font-style: normal; font-size: 11px; font-weight: bold; color: #1f7a2a; } .bcard .bon.off { color: #8a9bb0; }
.bcard .btn img.ico { width: 14px; height: 14px; vertical-align: -2px; }
.bcard small { min-height: 0 !important; font-size: 12px !important; color: #1f6a2a !important; font-weight: bold; }
.bcard { padding: 6px 4px !important; } .bcard .icell { width: 46px !important; height: 46px !important; }
.bgrid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
.bcard > b { font-size: 12px !important; } .bcard small { font-size: 11px !important; } .bcard .bon { font-size: 10px !important; }
.bcard .btn { padding: 3px 6px; font-size: 12px; }
/* 加成 / 加持：放在顶栏头像右边、体力左边（不挡下面的窗口） */
#hud-buffs { left: 170px !important; }
.hud-bst { display: flex; gap: 4px; align-items: center; flex: none; margin-left: auto; margin-right: 4px; }
.hud-bst .hboost { flex-direction: column; justify-content: center; gap: 0; width: 42px; height: 42px; padding: 0; font-size: 10px; border-radius: 10px; }
.hud-bst .hboost img.ico { width: 22px; height: 22px; }
#hud-top .lord { flex: 0 1 auto; min-width: 0; }
.hud-bst { flex-direction: column; gap: 3px; margin: 0 4px 0 auto; }
.hud-bst .hboost { flex-direction: row; width: 54px; height: 22px; gap: 1px; padding: 0 4px 0 2px; font-size: 11px; border-radius: 8px; box-shadow: 0 2px 0 #123a72, inset 0 1px 0 #ffffffa0; }
.hud-bst .hboost.red { box-shadow: 0 2px 0 #6e1408, inset 0 1px 0 #ffffffa0; }
.hud-bst .hboost img.ico { width: 16px; height: 16px; }
/* 顶栏挤一挤：体力只显示当前值，钻石框收窄（不要 + 号），给加成按钮让位 */
.hud-rt { gap: 4px !important; }
#hud-top .stam { padding: 2px 6px 2px 2px !important; font-size: 14px !important; }
#hud-top .stam img { width: 20px !important; height: 20px !important; }
#hud-top .gems { padding: 2px 8px 2px 3px !important; font-size: 14px !important; }
#hud-top .gems::after { display: none !important; }
#hud-top .gems img { width: 20px !important; height: 20px !important; }
#hud-top .lord { flex: 1 1 auto !important; }

/* 手机：不让双击放大页面 */
html, body, button, .btn, #app, #view { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
.scene { touch-action: none !important; }

/* 加速弹窗：道具入口 + 道具选择 */
.spdbtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin: 0 0 8px; border-radius: 14px; border: 1px solid #c5dbef;
  background: linear-gradient(180deg, #fbfdff, #dfeaf6); box-shadow: 0 3px 0 #9ebedd; color: #17304f; text-align: left; }
.spdbtn, .spdbtn * { text-shadow: none !important; }
.spdbtn .icell { width: 50px; height: 50px; flex: none; } .spdbtn div { flex: 1; } .spdbtn b { display: block; font-size: 16px; } .spdbtn small { font-size: 12px; color: #5f7ea1; }
.spdbtn > i { font-style: normal; font-size: 26px; color: #5f7ea1; } .spdbtn:disabled { opacity: .6; }
.spgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin-top: 10px; }
.spcell { display: flex; flex-direction: column; align-items: center; gap: 5px; } .spcell .icell { width: 62px; height: 62px; }
.spcell .btn { width: 100%; padding: 4px 0; font-size: 12px; } .spcell.none { opacity: .5; }

/* 可升级提示：名牌左边的金绿色小箭头，轻轻上下浮动 */
.up-arrow { top: auto !important; bottom: 4px !important; left: 50% !important; width: 22px !important; height: 26px !important; margin-left: -70px; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; animation: upbob 1.4s ease-in-out infinite; filter: drop-shadow(0 0 4px #b8ff7a) drop-shadow(0 2px 2px #0007); }
.up-arrow i { position: absolute; inset: 0; background: linear-gradient(#e8ff9a, #47c83a 60%, #1f8a2a);
  clip-path: polygon(50% 0, 100% 48%, 70% 48%, 70% 100%, 30% 100%, 30% 48%, 0 48%); }
@keyframes upbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.q-low .up-arrow { animation: none; }

/* 顶栏圆形加成按钮 */
.hboostc { position: relative; width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #8fd0ff, #2a6fc8 70%); box-shadow: 0 3px 0 #123a72, inset 0 2px 0 #ffffffa0, 0 4px 6px #0006; }
.hboostc img.ico { width: 26px; height: 26px; object-fit: contain; }
.hboostc .on { position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: #5aff8a; border: 2px solid #fff; box-shadow: 0 0 6px #5aff8a; }
.hboostc:active { transform: translateY(2px); box-shadow: 0 1px 0 #123a72; }
.btn.red3d { background: linear-gradient(180deg, #ffb09a 0%, #f0503a 48%, #d8341c 52%, #b02412 100%) !important; color: #fff; box-shadow: 0 3px 0 #6e1408; display: flex; flex-direction: column; align-items: center; }
.btn.red3d small { font-size: 11px; font-weight: normal; }

/* ===== 建筑二级菜单按钮（详情 / 升级 / 研究…）美化 2026-11-12：宝石质感圆钮 + 金边 + 底座厚度 + 名字挂牌 ===== */
#bmenu .bm-row { gap: 16px !important; }
#bmenu .bm-btn { position: relative; width: 74px !important; height: 74px !important; padding: 0 !important; border-radius: 50% !important; border: 3px solid #ffe7a0 !important;
  background: radial-gradient(circle at 50% 30%, #bfe6ff 0%, #5aa8f0 38%, #1f5fb8 78%, #143f80 100%) !important;
  box-shadow: 0 5px 0 #0c2f63, 0 8px 12px #0009, inset 0 3px 0 #ffffffb0, inset 0 -6px 10px #0a2c6066, 0 0 0 2px #b9862a !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; overflow: visible !important; animation: bmpop .28s cubic-bezier(.3,1.6,.5,1) both; }
#bmenu .bm-btn:nth-child(2) { animation-delay: .05s; } #bmenu .bm-btn:nth-child(3) { animation-delay: .1s; } #bmenu .bm-btn:nth-child(4) { animation-delay: .15s; }
#bmenu .bm-btn::before { content: ''; position: absolute; left: 14%; right: 14%; top: 6%; height: 32%; border-radius: 50%; background: linear-gradient(#ffffffa0, #fff0); pointer-events: none; }
#bmenu .bm-btn > span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: -10px; }
#bmenu .bm-btn > span img { width: 46px !important; height: 46px !important; object-fit: contain; filter: drop-shadow(0 3px 2px #0007); }
#bmenu .bm-btn > b { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 900; color: #fff;
  padding: 1px 10px; border-radius: 9px; background: linear-gradient(#ffd96a, #e8961a); border: 2px solid #fff;
  box-shadow: 0 2px 0 #8a5208, 0 3px 4px #0006; text-shadow: 0 1px 0 #8a4a00, 0 -1px 0 #8a4a00, 1px 0 0 #8a4a00, -1px 0 0 #8a4a00; }
#bmenu .bm-btn.hot { background: radial-gradient(circle at 50% 30%, #dcffb8 0%, #74d84a 38%, #2f9a28 78%, #1d6a18 100%) !important; box-shadow: 0 5px 0 #144a10, 0 8px 12px #0009, inset 0 3px 0 #ffffffb0, 0 0 0 2px #b9862a, 0 0 14px #9cff6a !important; }
#bmenu .bm-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #0c2f63, 0 3px 6px #0008, inset 0 3px 0 #ffffffb0, 0 0 0 2px #b9862a !important; }
@keyframes bmpop { 0% { transform: scale(.3) translateY(-20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.q-low #bmenu .bm-btn { animation: none; }

/* ===== 战报双方阵容（2026-11-12 重做）：深色对阵卡 + 主将立绘 + 副将头像 + 发光 VS ===== */
.bv { position: relative; display: flex; align-items: stretch; gap: 0; margin: 8px 0 6px; }
.bv-side { flex: 1; min-width: 0; position: relative; overflow: hidden; border-radius: 14px; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; }
.bv-side.me { background: linear-gradient(160deg, #3f8fe0 0%, #1d4f9a 55%, #102f63 100%); border: 2px solid #8fd0ff; box-shadow: inset 0 0 18px #8fd0ff55; margin-right: -10px; padding-right: 14px; }
.bv-side.en { background: linear-gradient(200deg, #e0533f 0%, #9a2418 55%, #5a120a 100%); border: 2px solid #ff9a7a; box-shadow: inset 0 0 18px #ff8a6a55; margin-left: -10px; padding-left: 14px; }
.bv-t { font-size: 13px; font-weight: 900; color: #fff; text-shadow: var(--stroke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bv-main { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.bv-pic { width: 82px; height: 82px; border-radius: 50%; overflow: hidden; border: 3px solid var(--qc, #fff); background: radial-gradient(circle at 50% 30%, #ffffff60, #0003 70%); box-shadow: 0 0 10px var(--qc, #fff), 0 3px 6px #0008; }
.bv-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.bv-pic.beast { border-color: #ffd96a; } .bv-pic.beast img { object-fit: contain; object-position: center; }
.bv-main b { font-size: 15px; color: #fff; margin-top: 3px; text-shadow: var(--stroke); }
.bv-main small { font-size: 11px; color: #ffe27a; text-shadow: var(--stroke); }
.bv-none { display: flex; align-items: center; justify-content: center; width: 82px; height: 82px; border-radius: 50%; border: 2px dashed #ffffff70; color: #ffffffb0; font-size: 12px; }
.bv-subs { display: flex; gap: 8px; margin-top: 6px; }
.bv-sub { display: flex; flex-direction: column; align-items: center; }
.bv-sub img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 6%; border: 2px solid var(--qc); background: #ffffff30; }
.bv-sub small { font-size: 10px; color: #fff; text-shadow: var(--stroke); }
.bv-x { position: relative; z-index: 2; width: 0; display: flex; align-items: center; justify-content: center; }
.bv-x i { position: absolute; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: italic; font-weight: 900; font-size: 20px; color: #fff;
  background: radial-gradient(circle at 50% 35%, #fff3b0, #ffb020 55%, #c86a00); border: 3px solid #fff; box-shadow: 0 0 14px #ffc04a, 0 3px 6px #0008;
  text-shadow: 0 1px 0 #8a4a00, 0 -1px 0 #8a4a00, 1px 0 0 #8a4a00, -1px 0 0 #8a4a00; }
/* 装备档位翻倍后：格子下面改成一条进度条，详情页 9 小格 */
.gslot2 .gpips { display: block; width: 70%; height: 6px; margin: 2px auto 0; border-radius: 3px; background: #0b2a5290; border: 1px solid #ffffff60; overflow: hidden; }
.gslot2 .gpips i { display: block; height: 100%; width: 0; border: 0; border-radius: 0; background: linear-gradient(#c4ff9a, #3fb43a); }
.gsegs i { width: 7px !important; }
/* 领主页：换形象 / 主城皮肤 挪到人物脚下，「?」挪到顶上，人物整体上移 */
.stage { height: 360px !important; }
.lord-art { bottom: 50px !important; }
.stage-floor { bottom: 40px !important; }
.look-btn, .look-btn.sk { top: auto !important; bottom: 8px !important; }
.look-btn:not(.sk) { left: 50% !important; transform: translateX(calc(-100% - 6px)) !important; }
.look-btn.sk { left: 50% !important; transform: translateX(6px) !important; }
.look-btn:not(.sk):active { transform: translateX(calc(-100% - 6px)) translateY(3px) !important; }
.look-btn.sk:active { transform: translateX(6px) translateY(3px) !important; }
.stage-q { top: 8px !important; bottom: auto !important; }
.look-btn, .look-btn.sk { padding: 4px 9px !important; font-size: 12px !important; bottom: 10px !important; }
.look-btn:not(.sk) { transform: translateX(calc(-100% - 3px)) !important; } .look-btn.sk { transform: translateX(3px) !important; }
.look-btn:not(.sk):active { transform: translateX(calc(-100% - 3px)) translateY(3px) !important; } .look-btn.sk:active { transform: translateX(3px) translateY(3px) !important; }
.look-btn img.ico { width: 14px !important; height: 14px !important; }

/* ===== 第二批 8 个主城皮肤的动态效果（2026-11-12）===== */
.skfx .dust, .skfx .bub, .skfx .mote2 { position: absolute; bottom: 18%; opacity: 0; }
.sk-sand .halo { background: radial-gradient(ellipse, #ffe08acc, #ffb84a55 45%, transparent 70%); }
.sk-sand .tw, .sk-frost .tw { position: absolute; width: 14px; height: 14px; margin: -7px; animation: sktw 2.4s ease-in-out infinite; opacity: 0; }
.sk-sand .tw::before, .sk-sand .tw::after, .sk-frost .tw::before, .sk-frost .tw::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; background: linear-gradient(90deg, #fff0, #fff6c0, #fff0); }
.sk-sand .tw::after, .sk-frost .tw::after { transform: rotate(90deg); }
.sk-frost .tw::before, .sk-frost .tw::after { background: linear-gradient(90deg, #fff0, #e8fbff, #fff0); }
.sk-sand .dust { width: 4px; height: 4px; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 6px #ffc94a; animation: skdust 3.5s ease-out infinite; }
@keyframes skdust { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(24px, -90px); opacity: 0; } }
.sk-steam .halo { background: radial-gradient(ellipse, #ffc27a99, #d9883a44 45%, transparent 70%); }
.skfx .puff { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: radial-gradient(circle, #ffffffdd, #e6eef8aa 50%, transparent 72%); animation: skpuff 3.3s ease-out infinite; opacity: 0; }
@keyframes skpuff { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(16px, -60px) scale(2.4); opacity: 0; } }
.sk-iron .puff { background: radial-gradient(circle, #5a5a62cc, #3a3a4288 50%, transparent 72%); }
.sk-steam .gear { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 3px dashed #ffd27acc; animation: spin 4s linear infinite; box-shadow: 0 0 8px #ffb84a88; }
.sk-steam .gear.g0 { left: 45%; top: 30%; } .sk-steam .gear.g1 { left: 30%; top: 46%; width: 12px; height: 12px; animation-direction: reverse; animation-duration: 3s; } .sk-steam .gear.g2 { left: 70%; top: 44%; width: 14px; height: 14px; animation-duration: 5s; }
.sk-coral .halo { background: radial-gradient(ellipse, #8ff0e8bb, #ff9f8a44 45%, transparent 70%); }
.sk-coral .wave { position: absolute; left: 6%; right: 6%; bottom: 10%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse, #7fe8ff66, transparent 70%); animation: skhalo 2.4s ease-in-out infinite; }
.sk-coral .bub { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #e8fdffdd; background: radial-gradient(circle at 35% 35%, #fff, #bff3ff33 45%, transparent 60%); animation: skbub 4s ease-in infinite; }
@keyframes skbub { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(6px, -55px) scale(1); } 100% { transform: translate(-4px, -120px) scale(1.2); opacity: 0; } }
.sk-sakura .halo { background: radial-gradient(ellipse, #ffd0e0aa, #ffb0c844 45%, transparent 70%); }
.sk-sakura .petal { position: absolute; top: -8%; width: 8px; height: 5px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffe4ee, #ff9ec0); animation: skpetal 6s linear infinite; opacity: 0; }
@keyframes skpetal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(-18px, 70px) rotate(200deg); } 100% { transform: translate(10px, 150px) rotate(420deg); opacity: 0; } }
.sk-sakura .lant { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 10px #ffb84a, 0 0 18px #ff8a3a; animation: sklant 1.8s ease-in-out infinite; }
@keyframes sklant { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.sk-holy .halo { background: radial-gradient(ellipse, #fff3c0dd, #ffd86a66 45%, transparent 70%); }
.sk-holy .rays { position: absolute; left: 50%; top: 8%; width: 150px; height: 150px; margin: -75px; border-radius: 50%; z-index: -1; opacity: .75;
  background: repeating-conic-gradient(#fff6c800 0 10deg, #fff6c8aa 14deg, #fff6c800 18deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 68%); mask: radial-gradient(circle, #000 15%, transparent 68%); animation: spin 14s linear infinite; }
.sk-holy .star { position: absolute; left: 50%; top: 8%; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: radial-gradient(circle, #fff, #fff2b0 35%, transparent 70%); animation: sklant 2s ease-in-out infinite; }
.sk-holy .mote { position: absolute; bottom: 20%; width: 6px; height: 6px; border-radius: 50%; background: #fff8d0; box-shadow: 0 0 10px #ffd86a; animation: skmote 3.6s ease-in infinite; opacity: 0; }
.sk-jade .halo { background: radial-gradient(ellipse, #9cffb0aa, #3ad67a44 45%, transparent 70%); }
.sk-jade .fly { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #e6ff9a; box-shadow: 0 0 8px #8aff5a, 0 0 14px #4ae06a; animation: skfly 4s ease-in-out infinite; opacity: 0; }
@keyframes skfly { 0%, 100% { transform: translate(0, 0); opacity: 0; } 25% { transform: translate(10px, -12px); opacity: 1; } 50% { transform: translate(-6px, -22px); opacity: .3; } 75% { transform: translate(8px, -8px); opacity: 1; } }
.sk-iron .halo { background: radial-gradient(ellipse, #ff6a2ad0, #ff3a1a55 45%, transparent 70%); animation-duration: 1.5s; }
.sk-iron .heat { position: absolute; left: 6%; right: 6%; bottom: 6%; height: 34%; border-radius: 50%; background: radial-gradient(ellipse, #ff8a3a77, transparent 70%); filter: blur(6px); animation: skhalo 1.2s ease-in-out infinite; }
.sk-iron .ember { position: absolute; bottom: 20%; width: 5px; height: 5px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px #ff6a1a, 0 0 3px #fff; animation: skember 2.6s ease-out infinite; opacity: 0; }
.sk-frost .halo { background: radial-gradient(ellipse, #bfeaffcc, #6ab8ff55 45%, transparent 70%); }
.sk-frost .moon { position: absolute; left: 50%; top: 10%; width: 90px; height: 90px; margin: -45px; border-radius: 50%; z-index: -1; border: 2px solid #e8f8ff88; box-shadow: 0 0 24px #bfeaffaa, inset 0 0 18px #bfeaff66; animation: skhalo 4s ease-in-out infinite; }
.ent.home .skw .rays, .ent.home .skw .moon, .ent.home .skw .wave, .ent.home .skw .gear { display: none; }
.ent.home .skw .dust, .ent.home .skw .bub, .ent.home .skw .petal, .ent.home .skw .fly, .ent.home .skw .puff, .ent.home .skw .ember { scale: .7; }
.q-low .skfx .dust, .q-low .skfx .bub, .q-low .skfx .petal, .q-low .skfx .fly, .q-low .skfx .puff { display: none; }
.look-btn.sk.lock { filter: grayscale(.7); opacity: .85; }
/* 皮肤增加到 13 个：一页 4 列放下 */
.skgrid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; padding: 0 2px 6px !important; }
.skcard { padding: 4px 2px 6px !important; gap: 2px !important; }
.skcard .skpic { height: 66px !important; } .skcard .skpic img, .skcard .skpic .ph { height: 66px !important; }
.skcard b { font-size: 12px !important; } .skcard small { font-size: 10px !important; line-height: 1.15 !important; }
.skcard .btn.sm { padding: 3px 6px !important; font-size: 12px !important; }

/* 13 个皮肤：一行 5 个，一页放下；加成用短词 */
.skgrid { grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; padding: 0 0 6px !important; }
.skcard { padding: 4px 1px 5px !important; border-radius: 10px !important; }
.skcard .skpic { height: 54px !important; } .skcard .skpic img, .skcard .skpic .ph { height: 54px !important; }
.skcard b { font-size: 11px !important; white-space: nowrap; letter-spacing: -.5px; }
.skcard small { font-size: 10px !important; line-height: 1.25 !important; min-height: 25px !important; color: #1f6a2a !important; font-weight: bold; }
.skcard .btn.sm { padding: 2px 6px !important; font-size: 11px !important; min-height: 0 !important; }
.skcard .skon { font-size: 11px !important; }
.sktot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 4px; }
.sktot span { font-size: 12px; background: #ffffff18; border-radius: 8px; padding: 1px 6px; } .sktot b { margin-left: 2px; }

/* ===== 设置：分类列表 + 二级页（2026-11-12）===== */
.setlist { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.setrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid #c5dbef; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #fbfdff, #dfeaf6); box-shadow: 0 3px 0 #9ebedd, 0 4px 8px #06142a40; color: #17304f; font: inherit; }
.setrow:active { transform: translateY(2px); box-shadow: 0 1px 0 #9ebedd; }
.setrow .si { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(180deg, #4aa3ff, #1d6fd6); box-shadow: inset 0 1px 0 #ffffff80; flex: none; }
.setrow .st { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setrow b { font-size: 16px; color: #17304f; } .setrow small { font-size: 12px; color: #4b6a8c; }
.setrow small .good { color: #1f7a34; font-weight: bold; } .setrow small .warn { color: #b0461a; font-weight: bold; }
.setrow > i { font-style: normal; font-size: 24px; color: #6d8db0; }
.setrow, .setrow * { text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.setbox { background: #0f2747a0; border: 1px solid #ffffff22; border-radius: 14px; padding: 4px 12px; }
.setline { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #ffffff14; }
.setline:last-child { border-bottom: 0; } .setline b { font-size: 15px; } .setline.sub { padding: 2px 0 12px 26px; } .setline.sub span { font-size: 13px; color: #cfe3f7; }
/* 开关 */
.tgl { width: 54px; height: 30px; border-radius: 15px; border: 0; position: relative; cursor: pointer; background: #5a6f88; box-shadow: inset 0 2px 4px #0006; transition: background .2s; flex: none; }
.tgl i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #fff, #dde8f3); box-shadow: 0 2px 3px #0005; transition: left .2s; }
.tgl.on { background: linear-gradient(180deg, #4cd46a, #22a548); } .tgl.on i { left: 27px; }
/* 音量：5 格 */
.vol { display: flex; gap: 5px; align-items: flex-end; }
.vol button { width: 26px; border: 0; border-radius: 4px; background: #ffffff30; cursor: pointer; padding: 0; }
.vol button:nth-child(1) { height: 10px; } .vol button:nth-child(2) { height: 14px; } .vol button:nth-child(3) { height: 18px; } .vol button:nth-child(4) { height: 22px; } .vol button:nth-child(5) { height: 26px; }
.vol button.on { background: linear-gradient(180deg, #8fe0ff, #2f9bff); box-shadow: 0 0 6px #4ab8ff88; }

.setrow .si img, .setrow .si .ph { width: 32px; height: 32px; object-fit: contain; }

/* 属性汇总：×5 后数字变长，压紧一点（2026-11-12） */
table.attr { font-size: 12px; } table.attr th { font-size: 11px; white-space: nowrap; } table.attr td { padding: 4px 1px; }
table.attr td.sum { font-size: 12px; }

/* 建筑名字牌单独一层（2026-11-12）：.bld.plt 只放名字牌，盖在所有建筑上面；原位置留一个透明占位 */
.bld .plate.ghost { visibility: hidden; min-height: 18px; }
.bld.plt { pointer-events: auto; } .bld.plt .plate { margin-top: 0; }
.bld.plt.locked .plate { background: #33445599; color: #dde; }

/* 钻石档位「加送 X%」角标（2026-11-12） */
.gpack2 .gbon { position: absolute; top: 4px; left: 4px; font-style: normal; font-size: 10px; font-weight: bold; color: #fff; background: linear-gradient(#3ccf5c, #1f9a3a); border: 1px solid #fff; border-radius: 6px; padding: 0 4px; z-index: 2; text-shadow: none; }
.gpack2 .x2 { z-index: 2; }
.gpack2 .gbon { left: auto !important; right: 4px; top: 4px; }

/* ===== 领主装备：深色展示底 + 边缘流光（2026-11-14）===== */
.gslot2 { overflow: visible; isolation: isolate; background: radial-gradient(ellipse at 50% 38%, #26324d, #101a30 72%); border-color: var(--gc); box-shadow: 0 3px 0 #081326, inset 0 0 0 1px #ffffff20, 0 3px 8px #07142770; }
.gslot2 .gfx { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; pointer-events: none; z-index: 0; }
.gslot2 > :not(.gfx) { position: relative; z-index: 1; }
.gslot2 .gno, .gslot2 .glv, .gslot2 .dot { position: absolute; z-index: 2; }
/* 流光只沿内边缘移动，中央保持暗底。 */
.gslot2 .gfx::before { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--gear-angle), transparent 0deg 260deg, var(--gc) 300deg, #fff4cf 325deg, transparent 350deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; animation: gear-edge 5s linear infinite; animation-delay: var(--gear-delay, 0s); }
@property --gear-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gear-edge { to { --gear-angle: 360deg; } }
.gslot2.gq0 .gfx::before, .gslot2.gq1 .gfx::before { display: none; }
.gslot2 .gshine, .gslot2 .grays { display: none; }
.gslot2 .gimg img { filter: drop-shadow(0 2px 3px #000b) drop-shadow(0 0 1px #d4e6ff60); }
.gslot2 .glv { color: #fff; text-shadow: 0 1px 2px #000, 1px 0 2px #000; }
.gslot2.gq4 { border-color: #e7bb61; box-shadow: 0 3px 0 #081326, inset 0 0 0 1px #fff0b52b, 0 0 7px #e7bb6138; }
/* 顶级红装：暗酒红中央衬托金色装备，能量集中在四周。 */
.gslot2.gq5 {
  border-color: #efc26b;
  background: radial-gradient(ellipse at 50% 42%, #29131f 12%, #451526 58%, #78283b 100%);
  box-shadow: 0 3px 0 #260e19, inset 0 0 0 1px #ffe3a554, inset 0 0 12px #c8324938, 0 0 9px #da354c55;
}
.gslot2.gq5 .gfx::before {
  padding: 2px; opacity: .95;
  background: conic-gradient(from var(--gear-angle), transparent 0deg 235deg, #bf3e36 270deg, #f5ac4e 302deg, #fff1bd 325deg, transparent 350deg);
  animation-duration: 4s;
}
.gslot2.gq5 .gfx::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 3% 3%, #fff2cbaa, #ffbc5930 5%, transparent 14%), radial-gradient(circle at 97% 97%, #fff2cb88, #ffbc5920 5%, transparent 14%);
  box-shadow: inset 0 0 10px #f0445045;
  pointer-events: none; opacity: .45;
  animation: gear-royal-glow 3.8s ease-in-out infinite;
  animation-delay: var(--gear-delay, 0s);
}
@keyframes gear-royal-glow { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.gslot2.gq5 .gfx b { background: #ffe5a1; box-shadow: 0 0 4px #f49a45; }
.q-low .gslot2.gq5 .gfx::after { animation: none; opacity: .45; }
@media (prefers-reduced-motion: reduce) { .gslot2.gq5 .gfx::after { animation: none; opacity: .45; } }
.gslot2 .gfx b { position: absolute; bottom: 12%; width: 2px; height: 2px; border-radius: 50%; background: #e6f3ff; box-shadow: 0 0 3px var(--gc); opacity: 0; animation: gear-mote 3.6s ease-out infinite; }
@keyframes gear-mote { 0%, 100% { transform: translateY(0); opacity: 0; } 20% { opacity: .7; } 85% { transform: translateY(-48px); opacity: 0; } }
.q-low .gslot2 .gfx::before, .q-low .gslot2 .gfx b { animation: none; display: none; }
.q-mid .gslot2 .gfx b { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .gslot2 .gfx::before { animation: none; } .gslot2 .gfx b { animation: none; display: none; } }
/* 野兽掉落变多（2026-11-12）：图标缩小，一行最多 6 个，6 个以上就两行对齐 */
.wc-drops { display: grid !important; justify-content: center; gap: 8px 10px !important; }
.wc-drops .icell { width: 44px !important; height: 44px !important; }
.wc-drops .icell img { width: 34px !important; height: 34px !important; }
/* 冰原霸主名字牌（2026-11-12）：原来红字压在红光上看不清 → 深红底 + 白字 + 金边，盖在光晕上面 */
.ent.boss .n { z-index: 5 !important; color: #fff !important; background: linear-gradient(#c62c22, #7a1010) !important; border: 1.5px solid #ffd27a; border-radius: 7px;
  padding: 1px 7px !important; font-size: 12px !important; font-weight: 800; text-shadow: 0 1px 2px #000a !important; -webkit-text-stroke: 0 !important; box-shadow: 0 2px 6px #0008; filter: none !important; opacity: 1 !important; }

/* 道具数量条 + 可输入的数字框（2026-11-12） */
.qbar { display: flex; align-items: center; gap: 6px; margin: 8px 0 10px; }
.qbar .sr-range { flex: 1; min-width: 0; }
.qinp, .sr-inp { -moz-appearance: textfield; appearance: textfield; font: inherit; font-weight: 800; text-align: center; color: #17304f; background: #fff; border: 2px solid #8fc6f5; border-radius: 8px; padding: 2px 4px; outline: none; }
.qinp::-webkit-outer-spin-button, .qinp::-webkit-inner-spin-button, .sr-inp::-webkit-outer-spin-button, .sr-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qinp { width: 64px; font-size: 15px; }
.qinp:focus, .sr-inp:focus { border-color: #ffc04a; box-shadow: 0 0 0 2px #ffc04a66; }
.qbar .qmax { flex: none; padding: 4px 8px !important; }
.sr-cnt .sr-inp { width: 92px; font-size: 16px; background: #eef6ff; border-color: #b9d6f2; }
.btn.wide small { display: block; font-size: 11px; font-weight: normal; opacity: .9; }
.qbar { margin: 8px 0 4px !important; }
.qrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; color: #dbeaf8; }
.qrow small { color: #b9d2ec; }
input.qinp, input.sr-inp { color: #17304f !important; -webkit-text-fill-color: #17304f; background: #fff !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.qinp { width: 90px !important; }
/* 联盟 Boss：地图上的位置 + 页面里的坐标按钮（2026-11-12） */
.ent.aboss img.e { filter: drop-shadow(0 0 6px #ffd27a); }
.ent.aboss.open img.e { filter: drop-shadow(0 0 10px #ff7a3a) drop-shadow(0 0 18px #ffb04a90); animation: bossPulse 1.6s ease-in-out infinite; }
.ent.aboss .l i { background: #ffb04a; color: #3a1a00; }
.coordbtn { margin-top: 4px; font: inherit; font-size: 13px; font-weight: bold; color: #ffe08a; background: #0b2a52a0; border: 1px solid #ffd27a90; border-radius: 8px; padding: 2px 10px; cursor: pointer; }
.ent.aboss img.e { width: 58px !important; height: 58px !important; object-fit: contain; }
.ent.aboss .l { white-space: nowrap; }
/* 联盟 Boss 占 3×3（2026-11-12） */
.ent.aboss { width: 192px !important; height: 192px !important; z-index: 6; }
.ent.aboss img.e { width: 186px !important; height: 186px !important; object-fit: contain; filter: drop-shadow(0 8px 8px #0b2a5266); }
.ent.aboss.open img.e { filter: drop-shadow(0 0 14px #7fd8ff) drop-shadow(0 8px 8px #0b2a5266); animation: bossPulse 1.8s ease-in-out infinite; }
.ent.aboss .l { bottom: 0 !important; font-size: 13px !important; padding: 2px 8px !important; }
/* 联盟 Boss 地图动画（2026-11-12）：呼吸起伏、胸口冰核闪、身后冰霜光环转、嘴里呼寒气、脚下裂纹发光、冰晶雪花往上飘 */
.ent.aboss .ab-body { position: absolute; left: 3px; bottom: 6px; width: 186px; height: 186px; transform-origin: 50% 80%; animation: abBreath 3.2s ease-in-out infinite; z-index: 2; }
.ent.aboss .ab-body img.e { width: 100% !important; height: 100% !important; animation: none !important; }
@keyframes abBreath { 0%, 100% { transform: scale(1, 1) translateY(0); } 50% { transform: scale(1.012, 1.03) translateY(-2px); } }
.ent.aboss .abfx { position: absolute; inset: 0; pointer-events: none; }
.abfx .ab-ring { position: absolute; left: 50%; top: 30%; width: 122px; height: 122px; margin: -61px; border-radius: 50%; z-index: 1;
  border: 3px dashed #bfeaffcc; box-shadow: 0 0 14px #7fd8ffaa, inset 0 0 18px #7fd8ff66; animation: spin 14s linear infinite; }
.abfx .ab-ring.r2 { width: 96px; height: 96px; margin: -48px; border: 2px solid #e8f8ff88; border-style: dotted; animation-duration: 9s; animation-direction: reverse; opacity: .8; }
.abfx .ab-core { position: absolute; left: 50%; top: 40%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle, #ffffffee, #9fe6ffaa 40%, transparent 70%); animation: abCore 2s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes abCore { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
.abfx .ab-crack { position: absolute; left: 50%; top: 62%; width: 110px; height: 44px; margin: -22px -55px; border-radius: 50%; z-index: 3;
  background: radial-gradient(ellipse, #bff3ffcc, #4ac8ff66 40%, transparent 70%); mix-blend-mode: screen; animation: abCrack 2.6s ease-in-out infinite; }
@keyframes abCrack { 0%, 100% { opacity: .2; transform: scale(.85); } 45% { opacity: 1; transform: scale(1.1); } }
.abfx .ab-puff { position: absolute; left: 56%; top: 24%; width: 16px; height: 16px; border-radius: 50%; z-index: 4; opacity: 0;
  background: radial-gradient(circle, #ffffffee, #e8f6ffaa 50%, transparent 72%); animation: abPuff 3.6s ease-out infinite; }
@keyframes abPuff { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 12% { opacity: .95; } 100% { transform: translate(30px, -16px) scale(2.6); opacity: 0; } }
.abfx .ab-shard { position: absolute; bottom: 30%; width: 6px; height: 9px; z-index: 4; opacity: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(#ffffff, #8fdcff); filter: drop-shadow(0 0 4px #9fe6ff); animation: abShard 3.6s ease-out infinite; }
@keyframes abShard { 0% { transform: translateY(0) rotate(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-110px) rotate(200deg) scale(1); opacity: 0; } }
.ent.aboss.open .ab-ring { border-color: #ffffffee; box-shadow: 0 0 22px #7fd8ff, inset 0 0 22px #7fd8ff99; }
.ent.aboss.open .ab-body { filter: drop-shadow(0 0 12px #7fd8ff); }
.ent.aboss img.e { filter: drop-shadow(0 8px 8px #0b2a5266) !important; }
.ent.aboss .l { z-index: 5; }
.q-low .abfx { display: none; } .q-low .ent.aboss .ab-body { animation: none; }
/* 战功记录：可折叠（2026-11-12） */
.lrec { padding: 6px 10px !important; }
.lrec-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: #fff; font: inherit; cursor: pointer; padding: 4px 0; text-align: left; }
.lrec-head .lrec-ar { font-size: 12px; color: #9fd0ff; width: 14px; }
.lrec-head b { font-size: 15px; } .lrec-head small { font-size: 12px; color: #b9d2ec; }
.lrec-head em { margin-left: auto; font-style: normal; font-size: 12px; color: #ffe08a; white-space: nowrap; }
.lrec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff1c; }
.lrec-grid span { display: flex; justify-content: space-between; font-size: 13px; } .lrec-grid i { font-style: normal; color: #cfe3f7; } .lrec-grid b { color: #fff; }
.lrec .lrec-ar { display: inline-block; transition: transform .2s; transform: rotate(-90deg); } .lrec.open .lrec-ar { transform: none; }
.lrec-head em { margin-right: 54px; }
.lrec { margin-bottom: 72px !important; }
.lrec-head b, .lrec-head small { white-space: nowrap; flex: none; } .lrec-head em { margin-right: 0 !important; }
/* 手机上防止整个画面被拖出屏幕（2026-11-12）：页面钉住，各滚动区滚到头不再带动页面 */
html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
#app { max-width: 100vw; overflow: hidden; }
#sheet-content, #modal-content, .sheet-body, .modal-box, .otabs, .tabs, .ptabs, .gtabs { overscroll-behavior: contain; }
#sheet-content, #modal-content { overflow-x: hidden; }
/* 冰原深渊（2026-11-12） */
.ab-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ab-head .ab-ic img, .ab-head .ab-ic .ph { width: 64px; height: 64px; object-fit: contain; }
.ab-head b { font-size: 18px; display: block; } .ab-head small { font-size: 12px; color: #cfe3f7; }
.ab-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.ab-stat span { background: #0b2a52a0; border: 1px solid #ffffff22; border-radius: 10px; padding: 6px 4px; text-align: center; }
.ab-stat i { display: block; font-style: normal; font-size: 11px; color: #b9d2ec; } .ab-stat b { font-size: 16px; color: #ffe08a; }
.ab-odds { margin: 6px 0; font-size: 13px; } .ab-odds .good { color: #8ef07a; } .ab-odds .warn { color: #ffc04a; } .ab-odds .bad { color: #ff7a6a; }
.ab-rw { margin: 6px 0 8px; } .ab-rw small { display: block; font-size: 12px; color: #b9d2ec; margin-bottom: 2px; }
.ab-rank > div { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-bottom: 1px solid #ffffff14; font-size: 13px; }
.ab-rank > div.me { background: #ffc04a33; border-radius: 8px; } .ab-rank i { font-style: normal; width: 22px; text-align: center; font-weight: bold; color: #ffe08a; }
.ab-rank span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ab-rank b { color: #fff; }
.btn.big small { display: block; font-size: 11px; font-weight: normal; }
.mp-odds { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
/* 城墙（2026-11-13）：缩小一点，正好卡在底图石墙的缺口里像城门；出了新图 b_wall2 后换成连着两段城墙的城门楼 */
#b-wall .art img { max-width: 132px !important; max-height: 112px !important; }
#b-wall .art img[src*="wallgate"] { max-width: 240px !important; max-height: 150px !important; }
/* 顶部压成一行（2026-11-13）：四种资源合成一个按钮放在加成按钮左边 */
#hud-res { display: none !important; }
#hud { padding-bottom: 4px !important; }
.hud-bst { display: flex; gap: 6px; align-items: center; }
.hresb { position: relative; width: 40px; height: 40px; border-radius: 50%; padding: 0; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #ffe9b0, #e09a38); box-shadow: 0 2px 0 #8a5a1a, 0 3px 6px #0b2a5266; cursor: pointer; }
.hresb img.ico, .hresb .emo { width: 30px !important; height: 30px !important; object-fit: contain; }
.hresb i { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; }
.resall { display: flex; flex-direction: column; gap: 8px; }
.ra-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid #c5dbef; background: linear-gradient(180deg, #fbfdff, #dfeaf6); color: #17304f; font: inherit; text-align: left; cursor: pointer; }
.ra-row, .ra-row * { text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.ra-ic img, .ra-ic .emo { width: 34px; height: 34px; object-fit: contain; }
.ra-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ra-tx b { font-size: 15px; } .ra-tx small { font-size: 11px; color: #4b6a8c; }
.ra-row em { font-style: normal; font-weight: 800; font-size: 16px; color: #17304f; font-variant-numeric: tabular-nums; }
.hud-bst { flex-direction: row !important; flex-wrap: nowrap !important; flex: none !important; width: auto !important; }
.hud-bst .hresb, .hud-bst .hboostc { width: 38px !important; height: 38px !important; flex: none; }
#hud-top .lord .nm { max-width: 92px; }
/* 顶部一行排得下：头像、两个圆按钮、体力、钻石都收一点（2026-11-13） */
#hud-top { gap: 4px !important; }
#hud-top .lord .av { width: 44px !important; height: 44px !important; }
#hud-top .lord { flex: 1 1 0 !important; min-width: 84px !important; gap: 4px !important; }
#hud-top .lord .nm { max-width: none !important; font-size: 13px !important; }
#hud-top .lord .pw { font-size: 12px !important; }
.hud-bst { margin: 0 !important; gap: 4px !important; }
.hud-bst .hresb, .hud-bst .hboostc { width: 34px !important; height: 34px !important; }
.hresb img.ico { width: 26px !important; height: 26px !important; }
.hud-rt { gap: 3px !important; flex: none !important; }
#hud-top .stam { font-size: 13px !important; padding: 2px 5px 2px 2px !important; }
#hud-top .gems { font-size: 12.5px !important; padding: 2px 6px 2px 2px !important; letter-spacing: -.3px; }
#hud-top .stam img, #hud-top .gems img { width: 18px !important; height: 18px !important; }
/* 盟友的城 / 驻防（2026-11-13） */
.ent.acity .n { color: #0b2238; background: #7ff0a0e6 !important; border-radius: 6px; padding: 0 5px; text-shadow: none !important; }
.ent.acity img.e { filter: hue-rotate(80deg) saturate(.8) drop-shadow(0 0 6px #7ff0a0aa); }
.ent.acity .l i { background: #3ccf5c; }
.wc-ally { font-style: normal; font-size: 11px; background: #3ccf5c; color: #fff; border-radius: 6px; padding: 0 6px; margin-left: 4px; }
.mrow .mname { flex: 1; text-align: left; background: none; border: 0; color: #9fe6ff; font: inherit; font-weight: bold; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mrow .mname small { color: #b9d2ec; text-decoration: none; font-weight: normal; }
.aw-gar { margin: 6px 0; padding: 6px 10px; border-radius: 10px; background: #1f6a2a66; border: 1px solid #7ff0a066; font-size: 13px; } .aw-gar small { color: #cfe3f7; }
/* VIP（2026-11-13） */
.vipb { margin-left: 6px; font: inherit; font-size: 12px; font-weight: 900; font-style: italic; color: #fff; border: 1.5px solid #fff; border-radius: 8px; padding: 0 7px; cursor: pointer; vertical-align: 2px;
  background: linear-gradient(#9aa8b8, #6b7a8c); text-shadow: 0 1px 1px #0006; box-shadow: 0 2px 0 #0b2a5266; }
.vipb.v1 { background: linear-gradient(#7fd8ff, #2f8fe0); } .vipb.v2 { background: linear-gradient(#c49aff, #8a4fd6); }
.vipb.v3 { background: linear-gradient(#ffd56a, #e0921a); } .vipb.v4 { background: linear-gradient(#ff8a6a, #d6281a); box-shadow: 0 0 8px #ffb04a, 0 2px 0 #6e1408; }
.vipb.big { font-size: 22px; padding: 4px 12px; border-radius: 12px; margin: 0; }
.vipt { font-style: italic; font-weight: 900; font-size: 10px; color: #fff; background: linear-gradient(#ffd56a, #e0921a); border-radius: 5px; padding: 0 4px; margin-right: 3px; vertical-align: 1px; }
.viphd { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .viphd b { display: block; } .viphd small { color: #cfe3f7; font-size: 12px; }
.viplist { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; overscroll-behavior: contain; }
.viplist > div { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; gap: 0 8px; padding: 6px 8px; border-radius: 10px; background: #0b2a52a0; border: 1px solid #ffffff1c; font-size: 12px; }
.viplist > div b { grid-row: 1; } .viplist > div small { grid-row: 2; grid-column: 1; color: #b9d2ec; font-size: 11px; }
.viplist > div span { grid-row: 1 / 3; grid-column: 2; } .viplist i { font-style: normal; color: #ffe08a; font-size: 11px; } .viplist img.ico { width: 12px; height: 12px; vertical-align: -1px; }
.viplist .got { border-color: #7ff0a088; background: #1f6a2a55; } .viplist .next { border-color: #ffc04a; }
/* 医院（2026-11-13 重做） */
.hbed { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: #0b2a52a0; border: 1px solid #ffffff22; margin-bottom: 10px; }
.hbed.full { border-color: #ff6a5a; background: #6a1a1a66; }
.hbed .hbi img, .hbed .hbi .emo { width: 46px; height: 46px; object-fit: contain; font-size: 36px; }
.hbt { flex: 1; min-width: 0; } .hbt > div:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.hbt b { font-size: 15px; } .hbt em { font-style: normal; font-weight: 800; color: #ffe08a; font-size: 16px; } .hbt small { font-size: 12px; color: #cfe3f7; }
.hbed.full .bar i { background: linear-gradient(#ff8a6a, #d6281a) !important; }
.hpanel { margin-bottom: 10px; } .hpanel .ptitle small { color: #b9d2ec; font-weight: normal; }
.hgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 8px; }
.hcell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; background: linear-gradient(180deg, #fbfdff, #dfeaf6); border: 1px solid #c5dbef; color: #17304f; }
.hcell, .hcell * { text-shadow: none !important; -webkit-text-stroke: 0 !important; }
.hcell.on { background: linear-gradient(180deg, #f2fff2, #cdeecf); border-color: #7fd48a; }
.hcell .hic { position: relative; width: 52px; height: 52px; } .hcell .hic img { width: 100%; height: 100%; object-fit: contain; }
.hcell .hic i { position: absolute; left: -2px; top: -2px; font-style: normal; font-size: 10px; font-weight: 900; background: #16325c; color: #fff; border-radius: 5px; padding: 0 3px; }
.hcell b { font-size: 15px; font-weight: 800; } .hcell small { font-size: 11px; color: #4b6a8c; }
.hcost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.hcost > span { display: inline-flex; align-items: center; gap: 2px; } .hcost .no { color: #ff8a7a; } .hcost img { width: 20px; height: 20px; }
.mdot2.scout .mu { filter: drop-shadow(0 0 4px #b9a6ff); }
.mdot2 .mscope { position: absolute; left: 50%; top: -6px; transform: translateX(8px); font-size: 13px; background: #2a1d66; border: 1px solid #b9a6ff; border-radius: 50%; width: 20px; height: 20px; line-height: 18px; text-align: center; pointer-events: none; }
/* VIP 弹窗：当前 + 下一级，图标为主 */
.viphd b .ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 3px; }
.vcard { margin-top: 10px; padding: 8px 10px 10px; border-radius: 14px; background: #0b2a52b0; border: 1px solid #ffffff22; }
.vcard.nxt { border-color: #ffc94a; background: linear-gradient(180deg, #4a3810c0, #0b2a52c0); }
.vct { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; margin-bottom: 6px; color: #e6f2ff; }
.vct .vipb { font-size: 12px; }
.vfx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vfx span { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 10px; background: #ffffff14; }
.vfx .ico, .vfx img { width: 30px; height: 30px; object-fit: contain; }
.vfx b { font-size: 14px; color: #fff; } .vfx small { font-size: 10px; color: #b9d2ec; }
.vfx em { position: absolute; right: 4px; top: 2px; font-style: normal; font-size: 10px; font-weight: 800; color: #7dff8a; }
.vgift { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vgift .icell { width: 48px; height: 48px; position: relative; }
.vgift .icell .ie, .vgift .icell img { width: 100%; height: 100%; object-fit: contain; }
.vgift .icell b { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.vgift.got { opacity: .45; filter: grayscale(.4); }
.vfx { grid-template-columns: repeat(6, 1fr); gap: 4px; }
.vfx span { padding: 3px 0 2px; } .vfx .ico, .vfx img { width: 24px; height: 24px; }
.vfx b { font-size: 11.5px; } .vfx small { font-size: 9.5px; } .vfx em { position: static; font-size: 9.5px; line-height: 1; }
.vcard { margin-top: 8px; padding: 6px 8px 8px; } .vct { margin-bottom: 4px; }
.vgift { gap: 5px; margin-top: 6px; } .vgift .icell { width: 40px; height: 40px; }
.vgift .icell b { right: 50%; transform: translateX(50%); bottom: -4px; font-size: 10px; background: #16325cdd; border-radius: 6px; padding: 0 3px; line-height: 14px; text-shadow: none; white-space: nowrap; }
.vgift.got .icell b { background: #555c; }
/* ---------- 王城 / 箭塔（2026-11-13）---------- */
.ent.king, .ent.tower { display: flex; align-items: center; justify-content: center; z-index: 3; }
.ent.king .e, .ent.tower .e { width: 100%; height: 100%; object-fit: contain; font-size: 140px; line-height: 1; filter: drop-shadow(0 8px 10px #0006); }
.ent.tower .e { font-size: 60px; }
.ent.king .kglow, .ent.tower .kglow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ac) 45%, transparent), transparent); pointer-events: none; }
.ent.king .n, .ent.tower .n { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 15px; font-weight: 900; color: #ffe08a; background: #1a1030d0; padding: 2px 10px; border-radius: 10px; border: 1px solid #ffcf5a; }
.ent.tower .n { font-size: 11px; padding: 1px 6px; top: -4px; }
.ent.king .kown, .ent.tower .kown { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 800; color: #fff; background: var(--ac); padding: 1px 8px; border-radius: 9px; box-shadow: 0 2px 4px #0005; }
.ent.tower .kown { font-size: 10px; }
.ent.king.war .kwar, .ent.tower.war .kwar { position: absolute; inset: -4%; border: 3px dashed #ff5a3a; border-radius: 12px; animation: kwar 2.4s linear infinite; pointer-events: none; }
@keyframes kwar { to { filter: hue-rotate(40deg); opacity: .5; } }
.wc-ban.king { background: linear-gradient(180deg, #3a2a10, #1a1030); }
.kg-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.kg-head .kg-art img, .kg-head .kg-art .emo { width: 86px; height: 86px; object-fit: contain; font-size: 64px; }
.kg-head > div { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .kg-head b { font-size: 18px; color: #ffe08a; } .kg-head small { font-size: 12px; }
.kg-rank > div { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; font-size: 13px; }
.kg-rank > div.me { background: #2f7fe033; } .kg-rank i { font-style: normal; width: 16px; text-align: center; color: #b9d2ec; }
.kg-rank .bar { flex: 1; height: 8px; } .kg-rank em { font-style: normal; min-width: 42px; text-align: right; } .kg-rank u { text-decoration: none; font-size: 10px; background: #ff5a3a; color: #fff; border-radius: 6px; padding: 0 4px; }
.kg-tw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kg-tw span { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 10px; background: #0b2a52b0; border: 2px solid var(--ac); }
.kg-tw img, .kg-tw .emo { width: 40px; height: 40px; object-fit: contain; font-size: 30px; } .kg-tw b { font-size: 12px; } .kg-tw small { font-size: 10px; color: #cfe3f7; }
.kg-king { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(90deg, #5a3a0ad0, #1a1030d0); border: 1px solid #ffcf5a; }
.kg-king.me { box-shadow: 0 0 12px #ffcf5a88; } .kg-crown { font-size: 34px; }
.kg-king > div { display: flex; flex-direction: column; } .kg-king small { font-size: 11px; color: #ffe08a; } .kg-king b { font-size: 16px; } .kg-king em { font-style: normal; font-size: 12px; color: #b9f7c0; }
.kg-fx { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 12.5px; } .kg-fx .ico { width: 26px; height: 26px; }
.kg-titles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kt { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 3px; border-radius: 12px; background: #0f3a2ad0; border: 1px solid #5fd68a; min-height: 74px; }
.kt.bad { background: #3a1414d0; border-color: #ff7a6a; }
.kt.me { box-shadow: 0 0 0 2px #ffe08a; }
.kt[data-act] { cursor: pointer; } .kt b { font-size: 14px; } .kt.good b { color: #9dffb8; } .kt.bad b { color: #ffb0a6; }
.kt small { font-size: 10px; color: #e6f2ff; } .kt em { font-style: normal; font-size: 10.5px; margin-top: auto; color: #ffe08a; word-break: break-all; }
.kt i { font-style: normal; font-size: 9px; color: #b9d2ec; }
.kg-pick { max-height: 50vh; overflow-y: auto; } .kg-pick .row { gap: 6px; padding: 4px 0; border-bottom: 1px solid #ffffff14; font-size: 13px; }
.kt .ktb { width: 34px; height: 34px; object-fit: contain; }
.sktabs { margin-bottom: 6px; } .sktabs button.on { background: #2f7fe0; border-color: #8fd0ff; color: #fff; font-weight: 800; }
/* 极光水晶宫：城镇上空流动的极光（只在这套皮肤开着时显示） */
#city-aurora { position: absolute; left: 0; top: 0; width: 100%; height: 760px; pointer-events: none; z-index: 30000; opacity: 0; transition: opacity 1.2s; overflow: hidden; mix-blend-mode: screen; }
#city-aurora.on { opacity: 1; }
#city-aurora i { position: absolute; left: -20%; width: 140%; height: 150px; border-radius: 50%; filter: blur(26px); opacity: .5;
  background: linear-gradient(90deg, transparent 0%, #3dffb0 20%, #36e0ff 45%, #8a7dff 65%, #3dffb0 85%, transparent 100%); background-size: 200% 100%;
  animation: cau-flow 14s linear infinite, cau-wave 9s ease-in-out infinite alternate; }
#city-aurora i:nth-child(1) { top: 40px; transform: rotate(-8deg); }
#city-aurora i:nth-child(2) { top: 170px; height: 110px; opacity: .38; animation-duration: 19s, 12s; animation-delay: -5s, -3s; transform: rotate(6deg); }
#city-aurora i:nth-child(3) { top: 300px; height: 90px; opacity: .25; animation-duration: 23s, 10s; animation-delay: -9s, -6s; transform: rotate(-4deg); }
#city-aurora b { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 12% 18%, #fff, transparent), radial-gradient(2px 2px at 38% 9%, #dff, transparent), radial-gradient(1.5px 1.5px at 64% 26%, #fff, transparent), radial-gradient(2px 2px at 82% 12%, #cff, transparent), radial-gradient(1.5px 1.5px at 24% 42%, #fff, transparent), radial-gradient(2px 2px at 72% 48%, #dff, transparent); animation: cau-twinkle 3.5s ease-in-out infinite alternate; }
@keyframes cau-flow { to { background-position: -200% 0; } }
@keyframes cau-wave { 0% { translate: 0 0; scale: 1 1; } 50% { translate: 4% 18px; scale: 1.05 1.25; } 100% { translate: -3% -10px; scale: .95 .85; } }
@keyframes cau-twinkle { from { opacity: .35; } to { opacity: .9; } }
.q-low #city-aurora i { animation: none; }
#city-aurora { mix-blend-mode: normal; height: 520px; }
#city-aurora i { opacity: .55; filter: blur(22px) saturate(1.3); }
#city-aurora i:nth-child(1) { top: 10px; } #city-aurora i:nth-child(2) { top: 120px; opacity: .45; } #city-aurora i:nth-child(3) { top: 230px; opacity: .3; }
#city-aurora { height: 430px; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
#city-aurora i { height: 90px; opacity: .5; background: linear-gradient(90deg, transparent 0%, #3dffb0 18%, #2ef0d0 38%, #5ad0ff 55%, #3dffb0 78%, transparent 100%); background-size: 200% 100%; }
#city-aurora i:nth-child(1) { top: 20px; } #city-aurora i:nth-child(2) { top: 110px; height: 70px; opacity: .38; } #city-aurora i:nth-child(3) { top: 190px; height: 50px; opacity: .22; }
/* ---------- 王城区装饰（2026-11-13）---------- */
#king-zone { position: absolute; pointer-events: none; z-index: 1; --kc: #ffd36a; --kc2: #8fe3ff; }
#king-zone.mine { --kc: #7fc4ff; --kc2: #b9f1ff; }
#king-zone.war { --kc: #ff6a4a; --kc2: #ffb36a; }
/* 与逻辑禁区同边界的方形冻土广场，始终显示，不随圆形光效转动。 */
#king-zone::before { content: ''; position: absolute; inset: 0; box-sizing: border-box;
  background: repeating-linear-gradient(0deg, transparent 0 calc(var(--king-tile) - 1px), #d8eeff24 calc(var(--king-tile) - 1px) var(--king-tile)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--king-tile) - 1px), #d8eeff24 calc(var(--king-tile) - 1px) var(--king-tile)),
    linear-gradient(135deg, #7dabc4b8, #537c9ba8 60%, #7898b6b8);
  border: 3px solid #accfe0; box-shadow: inset 0 0 0 7px #284f7160, inset 0 0 50px #25456738, 0 0 0 2px #365e7b80;
}
#king-zone::after { content: ''; position: absolute; inset: 10px; border: 1px solid #def3ff60; pointer-events: none; }
.kz-zone-label { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1; padding: 4px 16px;
  border: 1px solid #c8e8f088; border-radius: 4px; background: #274764d9; color: #e8f8ff; font-size: 16px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; }
#king-zone i, #king-zone b { position: absolute; display: block; }
.kz-ground { inset: 4%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kc2) 30%, transparent) 0 30%, color-mix(in srgb, var(--kc) 14%, transparent) 55%, transparent 72%); }
.kz-ring { inset: 8%; border-radius: 50%; border: 4px dashed color-mix(in srgb, var(--kc) 70%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--kc) 50%, transparent), inset 0 0 18px color-mix(in srgb, var(--kc) 40%, transparent); animation: kz-spin 80s linear infinite; }
.kz-ring.r2 { inset: 18%; border-width: 2px; border-style: dotted; animation-duration: 50s; animation-direction: reverse; }
.kz-dome { left: 50%; top: 50%; width: 46%; height: 46%; translate: -50% -55%; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, transparent 52%, color-mix(in srgb, var(--kc2) 30%, transparent) 64%, color-mix(in srgb, var(--kc) 55%, transparent) 70%, transparent 72%);
  animation: kz-pulse 4s ease-in-out infinite; }
.kz-dome.d2 { width: 52%; height: 52%; opacity: .5; animation-delay: -2s; }
.kz-beam { height: 6px; margin-top: -3px; transform-origin: 0 50%; border-radius: 3px; opacity: .8;
  background: linear-gradient(90deg, transparent, var(--kc2) 30%, var(--kc) 50%, var(--kc2) 70%, transparent); background-size: 200% 100%; filter: blur(1px) drop-shadow(0 0 6px var(--kc)); animation: kz-flow 3s linear infinite; }
.kz-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--kc2); opacity: 0; animation: kz-float 6s ease-in-out infinite; }
#king-zone.war .kz-ring { animation-duration: 20s; } #king-zone.war .kz-dome { animation-duration: 1.6s; }
@keyframes kz-spin { to { rotate: 360deg; } }
@keyframes kz-pulse { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: 1; scale: 1.04; } }
@keyframes kz-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes kz-float { 0% { opacity: 0; translate: 0 10px; } 30% { opacity: .9; } 100% { opacity: 0; translate: 0 -60px; } }
.q-low #king-zone * { animation: none !important; }
/* 坐标条缩小（2026-11-13）：搜索 = 放大镜，回城 = 小图标 */
#coord { padding: 2px 3px; gap: 4px; border-radius: 14px; font-size: 12px; align-items: center; border-width: 1.5px; }
#coord .cb-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1.5px solid #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; background: linear-gradient(#5fb0ff, #2a6fd0); box-shadow: 0 2px 3px #0005; margin: 0; }
#coord .cb-btn.srch { background: linear-gradient(#ffe27a, #f0a020); }
#coord .cb-btn img { width: 22px; height: 22px; object-fit: contain; }
#coord .cb-xy { padding: 3px 5px; white-space: nowrap; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
#coord .cb-xy:hover, #coord .cb-xy:focus-visible { background: #ffffff20; outline: 1px solid #a7dbff; }
.coord-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 4px; }
.coord-inputs label { color: #d6ebff; font-size: 13px; font-weight: 700; }
.coord-inputs input { display: block; width: 100%; min-width: 0; padding: 10px; margin-top: 6px; border: 1px solid #a1caee; border-radius: 9px; background: #14365c; color: #fff; font-size: 19px; text-align: center; }
.coord-error { min-height: 24px; padding: 2px 0 8px; color: #ffd0bb; text-align: center; font-size: 12px; }
#coord-pin { position: absolute; z-index: 8; pointer-events: none; border: 2px solid #ffe08c; border-radius: 5px; background: #ffd15b18; box-shadow: 0 0 10px #ffce6b80; }
#coord-pin i { position: absolute; inset: 8px; border: 1px solid #fff4cb; border-radius: 3px; animation: coordTarget 1s ease-out 3; }
#coord-pin small { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); padding: 2px 6px; border-radius: 5px; background: #1d3557eb; color: #fff2c2; font-size: 12px; white-space: nowrap; }
@keyframes coordTarget { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.q-low #coord-pin i { animation: none; }
@media (prefers-reduced-motion: reduce) { #coord-pin i { animation: none; } }
#coord .btn.sm.red { padding: 2px 8px; font-size: 11px; }
/* 读过的战报：左边那条变灰（2026-11-13） */
.rep.read { border-left-color: #8a96a6 !important; }
/* 手机拖地图流畅（2026-11-13）：地图层单独交给显卡移动；拖动时暂停地图上的动画 */
#world-inner, #city-inner { will-change: transform; }
.scene.dragging #w-ents *, .scene.dragging #king-zone *, .scene.dragging #march-dots * { animation-play-state: paused !important; }
.q-mid #world .ent .e, .q-mid #world .ent img.e { filter: none !important; }
.q-mid .kz-beam { filter: none; }
.scene.flinging #w-ents *, .scene.flinging #king-zone * { animation-play-state: paused !important; }

/* 城内兵力按实际兵阶细分，保留三兵种原布局。 */
.aw-tr { align-items: flex-start; gap: 4px; min-width: 0; }
.aw-tr > div { flex: 1; min-width: 0; }
.aw-tiers { display: block; text-align: center; margin-top: 3px; }
.aw-tiers small { display: block; color: #527397; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }