/* 大厅样式（lobby.js）：国潮水墨 · 朱砂金边 */
#lobby.lb { display: flex; flex-direction: column; background: #15100c; overflow: hidden; }
.lb-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 40% at 80% 8%, rgba(200,52,43,.22), transparent 70%),
    radial-gradient(ellipse 60% 30% at 10% 60%, rgba(232,176,74,.08), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V96l38-30 30 20 46-52 40 38 28-18 50 44 36-30 44 26 40-36 48 40v62z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M0 160v-36l52-22 40 18 60-34 46 30 40-14 58 26 44-20 60 20v32z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") bottom / 100% 34% no-repeat,
    linear-gradient(#1d140e, #15100c 45%, #0f0a07); }
#lobby.lb > * { position: relative; z-index: 1; }
.lb button { font-family: inherit; }
.tap { cursor: pointer; transition: transform .08s; }
.tap:active { transform: scale(.95); }
.lb-body, .modal-body { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.lb-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 10px 34px; }
.lb-body::-webkit-scrollbar { display: none; }

/* ---------- 顶栏 ---------- */
.lb-top { padding: calc(var(--content-top) + 6px) 10px 6px; background: linear-gradient(rgba(10,6,4,.9), rgba(10,6,4,.55)); border-bottom: 1px solid rgba(232,176,74,.25); flex: none; }
.lb-me { display: flex; align-items: center; gap: 8px; }
.lb-av { position: relative; flex: none; width: 50px; height: 50px; border-radius: 12px; border: 2px solid var(--gold); padding: 0; overflow: visible;
  background: radial-gradient(circle at 50% 40%, #6a4a32, #2a1d15); box-shadow: 0 0 0 2px var(--ink), 0 3px 8px rgba(0,0,0,.5); }
.lb-av img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.lb-av-lv { position: absolute; left: -5px; bottom: -5px; min-width: 22px; height: 20px; padding: 0 4px; border-radius: 10px; font-size: 11px; font-weight: 900; line-height: 16px;
  color: #3b1f06; background: linear-gradient(#ffe39a, var(--gold2)); border: 2px solid var(--ink); text-align: center; }
.lb-me-info { flex: 1; min-width: 0; }
.lb-me-name { font-weight: 900; font-size: 15px; color: #ffe8b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 var(--ink); }
.lb-exp { position: relative; height: 12px; margin-top: 4px; border-radius: 7px; background: rgba(0,0,0,.6); border: 1.5px solid var(--ink); overflow: hidden; max-width: 170px; }
.lb-exp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #7ff0d0, #3fa37a); }
.lb-exp span { position: absolute; inset: 0; font-size: 9px; font-weight: 900; line-height: 10px; text-align: center; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.lb-power { flex: none; display: flex; flex-direction: column; align-items: flex-end; padding: 3px 12px 3px 18px; border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, transparent, rgba(200,52,43,.75) 30%, rgba(142,31,25,.9)); clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
.lb-power small { font-size: 10px; color: #ffd8b0; letter-spacing: 2px; }
.lb-power b { font-family: var(--kai); font-size: 20px; line-height: 1; color: #ffe39a; text-shadow: 0 2px 0 var(--ink); }
.lb-res { display: flex; gap: 6px; margin-top: 7px; }
.lb-pill { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 28px; padding: 0 4px 0 2px; border-radius: 14px;
  background: rgba(0,0,0,.55); border: 1.5px solid rgba(232,176,74,.45); }
.lb-pill > i { font-style: normal; font-size: 16px; width: 22px; text-align: center; flex: none; }
.lb-pill-v { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1; }
.lb-pill-v b { font-size: 13px; font-weight: 900; color: #fff3d6; white-space: nowrap; }
.lb-pill-v small { font-size: 9px; color: #9ff0c8; font-weight: 700; margin-top: 1px; }
.lb-pill-v small:empty { display: none; }
.lb-pill em { flex: none; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-weight: 900; font-size: 15px; line-height: 17px; text-align: center; color: #3b1f06;
  background: linear-gradient(#ffe39a, var(--gold2)); border: 1.5px solid var(--ink); }

/* ---------- 底部导航 ---------- */
.lb-nav { flex: none; display: flex; align-items: flex-end; padding: 0 4px calc(var(--safe-bottom) + 4px); height: calc(64px + var(--safe-bottom));
  background: linear-gradient(#2e2016, #16100b); border-top: 2px solid var(--gold2); box-shadow: 0 -4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,150,.2); }
.lb-nav .nav { flex: 1; height: 58px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #b9a07a; cursor: pointer; padding: 0; }
.nav-ic { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: transform .15s; }
.nav-ic i { font-style: normal; font-size: 22px; line-height: 1; filter: saturate(.6) brightness(.85); }
.nav-ic img { width: 30px; height: 30px; filter: saturate(.6) brightness(.85); }
.nav-t { font-size: 12px; font-weight: 900; letter-spacing: 1px; }
.lb-nav .nav.on { color: #ffe39a; }
.lb-nav .nav.on .nav-ic { transform: translateY(-3px) scale(1.12); background: radial-gradient(circle, rgba(232,176,74,.4), transparent 70%); }
.lb-nav .nav.on .nav-ic i, .lb-nav .nav.on .nav-ic img { filter: none; }
.lb-nav .nav.on .nav-t { text-shadow: 0 0 8px rgba(232,176,74,.8); }
.lb-nav .nav-c { position: relative; }
.lb-nav .nav-c .nav-ic { width: 60px; height: 60px; margin-top: -26px; border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 35%, #ff7a6a, var(--red) 55%, var(--red2)); box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,.6); }
.lb-nav .nav-c .nav-ic img { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.lb-nav .nav-c.on .nav-ic { transform: translateY(-2px); background: radial-gradient(circle at 50% 35%, #ffb09a, var(--red) 55%, var(--red2)); box-shadow: 0 0 0 2px #ffe39a, 0 0 18px rgba(255,120,80,.7); }

/* ---------- 通用 ---------- */
.lb-stars { display: inline-flex; gap: 0; font-size: 11px; line-height: 1; letter-spacing: -1px; }
.lb-stars i { font-style: normal; color: rgba(255,255,255,.18); }
.lb-stars i.on { color: #ffd24a; text-shadow: 0 0 3px rgba(255,200,60,.6), 0 1px 0 var(--ink); }
.lb-tag { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 6px; line-height: 1.35; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.lb-bar { position: relative; height: 14px; border-radius: 8px; background: rgba(0,0,0,.55); border: 1.5px solid var(--ink); overflow: hidden; flex: 1; min-width: 0; }
.lb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--gold2), #ffe39a); border-radius: 6px; }
.lb-bar span { position: absolute; inset: 0; font-size: 10px; font-weight: 900; line-height: 11px; text-align: center; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; white-space: nowrap; }
.lb-bar.sm { height: 12px; } .lb-bar.sm span { font-size: 9px; line-height: 9px; }
.lb-bar.jade i { background: linear-gradient(90deg, #25704f, #7ff0d0); }
.lb-bar.frag i { background: linear-gradient(90deg, #6a3fa0, #c58bff); }
.lb-badge { display: inline-block; font-size: 10px; font-weight: 900; width: 17px; height: 17px; line-height: 14px; text-align: center; border-radius: 50%; border: 1.5px solid var(--ink); color: #fff; font-style: normal; flex: none; }
.lb-badge.main { background: var(--red); } .lb-badge.sub { background: var(--blue); }
.lb-mlv { font-size: 10px; font-weight: 900; color: #9ff0c8; white-space: nowrap; }
.lb-hint { font-size: 12px; color: var(--paper2); opacity: .8; line-height: 1.5; margin: 4px 0; }
.lb-hint.c { text-align: center; margin: 10px 0; }
.lb-sec-t { display: flex; align-items: baseline; gap: 6px; font-family: var(--kai); font-weight: 900; font-size: 16px; color: #ffe8b0; margin: 14px 0 7px; padding-left: 9px; border-left: 4px solid var(--red); line-height: 1.1; }
.lb-sec-t small { font-family: system-ui, sans-serif; font-size: 10px; color: var(--paper2); opacity: .7; font-weight: 500; }
.lb-sec-t:first-child { margin-top: 2px; }
.lb-empty { text-align: center; padding: 28px 10px; color: var(--paper2); opacity: .75; font-size: 13px; }
.lb-empty i { display: block; font-style: normal; font-size: 38px; margin-bottom: 6px; }
.lb-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 50px 0; color: var(--paper2); font-size: 13px; }
.lb-loading i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(232,176,74,.25); border-top-color: var(--gold); animation: lbspin .8s linear infinite; }
@keyframes lbspin { to { transform: rotate(360deg) } }
.lb-got { font-size: 12px; font-weight: 900; color: #9ff0c8; white-space: nowrap; }
.lb-lock-t { font-size: 11px; color: #c9b08a; font-weight: 700; }
.lb-seg { display: flex; gap: 4px; padding: 3px; margin: 10px 0 8px; border-radius: 12px; background: rgba(0,0,0,.45); border: 1px solid rgba(232,176,74,.25); }
.lb-seg button { position: relative; flex: 1; border: 0; border-radius: 9px; padding: 7px 4px; font-size: 13px; font-weight: 900; color: #c9b08a; background: none; cursor: pointer; white-space: nowrap; }
.lb-seg button.on { color: #3b1f06; background: linear-gradient(#ffe39a, var(--gold) 55%, var(--gold2)); box-shadow: 0 2px 0 var(--ink); }
.lb-seg button.dot-red::after { top: 2px; right: 6px; width: 9px; height: 9px; }
.lb-seg.big { margin: 10px 0; } .lb-seg.big button { font-size: 15px; padding: 9px 4px; font-family: var(--kai); letter-spacing: 4px; }
.lb-seg.mini { margin: 0; flex: none; padding: 2px; } .lb-seg.mini button { padding: 4px 9px; font-size: 12px; flex: none; }
.lb-mr { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 900; color: #ffe39a; white-space: nowrap; }
.lb-mr img { width: 18px; height: 18px; }
.lb-modal .modal-body { padding: 12px; }
.lm-body:empty { display: none; }
.lm-foot { display: contents; }
.modal-foot:has(> .lm-foot:empty) { display: none; }
.lb-modal .modal-foot { flex-wrap: wrap; }
.lb-foot-hint { width: 100%; text-align: center; font-size: 11px; color: var(--paper2); opacity: .7; }
.btn small { font-size: .7em; margin-left: 3px; opacity: .9; }

/* ---------- 出征 ---------- */
.pg-home { padding: 0; }
.pg-home .lb-page { display: flex; flex-direction: column; min-height: 100%; }
.lb-stage { position: relative; flex: 1; min-height: 300px; overflow: hidden; }
.lb-stage-art { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; width: 100%; object-fit: cover; object-position: 50% 45%;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 82%, transparent); }
.lb-stage.is-locked .lb-stage-art { filter: grayscale(.9) brightness(.5); }
.lb-plaque { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; z-index: 2; }
.lb-plaque-c { min-width: 128px; padding: 5px 18px 6px; text-align: center; border-radius: 6px; border: 2px solid var(--ink);
  background: linear-gradient(#f7ecd2, #e3cfa2); box-shadow: 0 0 0 2px var(--gold2), 0 4px 10px rgba(0,0,0,.55); position: relative; }
.lb-plaque-c::before, .lb-plaque-c::after { content: ''; position: absolute; top: 50%; width: 8px; height: 26px; margin-top: -13px; background: var(--red2); border: 2px solid var(--ink); border-radius: 3px; }
.lb-plaque-c::before { left: -10px; } .lb-plaque-c::after { right: -10px; }
.lb-plaque-c small { display: block; font-size: 11px; color: var(--red2); font-weight: 900; letter-spacing: 2px; }
.lb-plaque-c b { display: block; font-family: var(--kai); font-size: 24px; line-height: 1.05; color: #2a160c; letter-spacing: 4px; }
.lb-arrow { width: 32px; height: 40px; border-radius: 8px; border: 2px solid var(--ink); background: linear-gradient(#5a4230, #2a1d15); color: #ffe39a; font-size: 26px; font-weight: 900; line-height: 30px; cursor: pointer;
  box-shadow: 0 2px 0 var(--ink); padding: 0; }
.lb-arrow:disabled { opacity: .25; }
.lb-arrow:active:not(:disabled) { transform: translateY(1px); }
.lb-stage-lock { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); text-align: center; z-index: 2; }
.lb-stage-lock i { display: block; font-style: normal; font-size: 40px; }
.lb-stage-lock b { display: block; margin-top: 4px; padding: 4px 12px; background: rgba(0,0,0,.7); border-radius: 12px; border: 1px solid var(--gold2); font-size: 13px; color: #ffe8b0; white-space: nowrap; }
.lb-stage-info { position: absolute; left: 70px; right: 70px; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2; }
.lb-prog { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 230px; padding: 4px 9px; border-radius: 14px; background: rgba(0,0,0,.6); border: 1px solid rgba(232,176,74,.4); }
.lb-prog span { font-size: 11px; font-weight: 900; color: var(--paper2); white-space: nowrap; }
.lb-prog b { font-size: 12px; color: #ffe39a; white-space: nowrap; }
.lb-prog-bar { flex: 1; height: 8px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.lb-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); }
.lb-rec { font-size: 11px; font-weight: 900; color: #9ff0c8; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.lb-rec.low { color: #ff9a8a; }
.lb-side { position: absolute; top: 10px; display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.lb-side.l { left: 8px; } .lb-side.r { right: 8px; }
.sbtn { position: relative; width: 52px; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; color: #ffe8b0; }
.sbtn:active { transform: scale(.92); }
.sbtn-ic { position: relative; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 23px;
  background: radial-gradient(circle at 50% 30%, #5e4330, #2a1d15 75%); border: 2px solid var(--ink); box-shadow: 0 0 0 1.5px var(--gold2), 0 3px 6px rgba(0,0,0,.55); }
.sbtn-t { margin-top: 2px; font-size: 11px; font-weight: 900; white-space: nowrap; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.sbtn.glow .sbtn-ic { box-shadow: 0 0 0 1.5px #ffe39a, 0 0 14px rgba(255,190,80,.7); animation: lbglow 1.6s infinite alternate; background: radial-gradient(circle at 50% 30%, #ff8a6a, var(--red2) 75%); }
.sbtn.glow-b .sbtn-ic { background: radial-gradient(circle at 50% 30%, #6a5aa8, #231a3a 75%); box-shadow: 0 0 0 1.5px #c58bff, 0 3px 6px rgba(0,0,0,.55); }
.sbtn.locked .sbtn-ic { filter: grayscale(1) brightness(.6); }
.sbtn.locked .sbtn-t { color: #a89878; }
@keyframes lbglow { to { box-shadow: 0 0 0 1.5px #ffe39a, 0 0 22px rgba(255,190,80,.95); } }

.lb-loadout { margin: -6px 10px 0; padding: 8px; border-radius: 14px; background: linear-gradient(rgba(58,42,31,.95), rgba(37,26,19,.95)); border: 2px solid var(--gold2);
  box-shadow: 0 0 0 2px var(--ink), 0 6px 16px rgba(0,0,0,.5); position: relative; z-index: 2; }
.lb-lo-row { display: flex; align-items: stretch; gap: 6px; }
.lb-hero { flex: none; width: 64px; border-radius: 10px; border: 2px solid var(--ink); background: radial-gradient(circle at 50% 40%, #6a4a32, #2a1d15); padding: 2px 0 4px; display: flex; flex-direction: column; align-items: center; color: #ffe8b0; }
.lb-hero img { width: 52px; height: 52px; }
.lb-hero-n { font-size: 12px; font-weight: 900; margin-top: -2px; }
.lb-slot { position: relative; flex: 1; min-width: 0; border-radius: 10px; border: 2px solid var(--ink); padding: 4px 3px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #ffe8b0;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--fc) 35%, #3a2a1f), #20150f 80%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 60%, transparent); }
.lb-slot img { width: 44px; height: 44px; }
.lb-slot-k { position: absolute; left: 3px; top: 3px; font-size: 11px; font-weight: 900; width: 19px; height: 19px; line-height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); color: #fff; background: var(--red); }
.lb-slot.sub .lb-slot-k { background: var(--blue); }
.lb-slot-n { font-size: 13px; font-weight: 900; white-space: nowrap; font-family: var(--kai); }
.lb-slot-s { display: flex; gap: 4px; align-items: center; }
.lb-swap { flex: none; align-self: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); background: linear-gradient(#ffe39a, var(--gold2)); color: #3b1f06; font-weight: 900; font-size: 13px; padding: 0; line-height: 18px; margin: 0 -8px; z-index: 1; }
.lb-syn { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px dashed rgba(232,176,74,.35); font-size: 11px; color: var(--paper2); cursor: pointer; min-width: 0; }
.lb-syn b { color: #ffe39a; font-size: 12px; white-space: nowrap; }
.lb-syn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-syn.combo { border-color: rgba(255,90,208,.55); background: linear-gradient(90deg, rgba(255,90,208,.18), rgba(0,0,0,.3)); }
.lb-syn.combo b { color: #ffb0ea; }
.lb-syn em { font-style: normal; flex: none; color: var(--gold); font-weight: 900; }
.lb-go-wrap { position: relative; display: flex; justify-content: center; padding: 12px 10px 30px; }
.lb-go { width: min(76%, 300px); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px; font-size: 26px; letter-spacing: 8px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.25), 0 4px 0 var(--ink), 0 0 24px rgba(200,52,43,.55); }
.lb-go small { font-family: system-ui, sans-serif; font-size: 13px; letter-spacing: 0; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.35); }
.lb-go:not(:disabled) { animation: lbpulse 1.8s ease-in-out infinite; }
@keyframes lbpulse { 50% { transform: scale(1.035); } }
.lb-guide { position: absolute; bottom: calc(100% - 22px); left: 50%; transform: translateX(-50%); animation: lbbob 1s ease-in-out infinite alternate; pointer-events: none; z-index: 5; }
.lb-guide b { display: block; white-space: nowrap; padding: 7px 14px; border-radius: 12px; background: linear-gradient(#fff6dc, #f3e0b0); color: #5a1f0f; font-size: 13px; font-weight: 900; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,.5); }
.lb-guide i { display: block; width: 14px; height: 14px; margin: -8px auto 0; background: #f3e0b0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
@keyframes lbbob { to { transform: translate(-50%, -6px); } }

/* 选择兵器 */
.lb-wpick { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.lb-wp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; border: 2px solid var(--ink); text-align: left; color: var(--paper);
  background: linear-gradient(100deg, color-mix(in srgb, var(--fc) 22%, #2a1d15), #20150f 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 45%, transparent); }
.lb-wp.cur { box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px rgba(232,176,74,.4); }
.lb-wp img { width: 48px; height: 48px; flex: none; }
.lb-wp-m { flex: 1; min-width: 0; }
.lb-wp-n { display: flex; align-items: center; gap: 5px; font-family: var(--kai); font-size: 16px; font-weight: 900; color: #ffe8b0; }
.lb-wp-d { font-size: 11px; color: var(--paper2); opacity: .85; margin: 1px 0 2px; }
.lb-wp-x { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #c9b08a; flex-wrap: wrap; }
.lb-wp-c { color: #ffb0ea; font-weight: 900; }
.lb-wp-c.same { color: #9fd8ff; }

/* 体力 */
.lb-stbuy { text-align: center; }
.lb-stbuy-ic { font-size: 46px; line-height: 1.1; }
.lb-stbuy-v { font-weight: 900; font-size: 16px; color: #ffe8b0; margin: 4px 0; }
.lb-stbuy-deal { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 12px 0; font-weight: 900; font-size: 16px; }
.lb-stbuy-deal span { padding: 6px 12px; border-radius: 10px; background: rgba(0,0,0,.4); border: 1px solid var(--line); }
.lb-stbuy-deal b { color: var(--gold); }

/* 签到 */
.lb-sign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.lb-sign { position: relative; border-radius: 12px; padding: 5px 3px 6px; text-align: center; background: linear-gradient(#f3e6c8, #d9c190); border: 2px solid var(--ink); color: #3b1f06; }
.lb-sign.big { grid-column: 1 / -1; background: linear-gradient(#ffe39a, #e0a84a); }
.lb-sign-d { font-size: 12px; font-weight: 900; margin-bottom: 3px; }
.lb-sign .rewards { gap: 4px; }
.lb-sign .rw { width: 64px; min-height: 62px; padding-top: 14px; background: radial-gradient(circle at 50% 35%, #5e4330, #2a1d15); }
.lb-sign .rw-n { font-size: 11px; right: 0; left: 0; text-align: center; top: 1px; }
.lb-sign .rw i { font-size: 22px; } .lb-sign .rw img { width: 30px; height: 30px; }
.lb-sign.today { box-shadow: 0 0 0 2px var(--red), 0 0 14px rgba(255,120,80,.7); animation: lbglow2 1.2s infinite alternate; }
@keyframes lbglow2 { to { box-shadow: 0 0 0 2px #ff7a6a, 0 0 22px rgba(255,120,80,.95); } }
.lb-sign.got { filter: grayscale(.6) brightness(.7); }
.lb-sign-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #3fa37a; font-weight: 900; text-shadow: 0 2px 0 #fff; }

/* 任务 */
.lb-active { display: flex; align-items: center; gap: 12px; padding: 10px 14px 18px 8px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.lb-active-v { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(#ff7a6a, var(--red2)); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--gold2); }
.lb-active-v small { font-size: 9px; } .lb-active-v b { font-size: 18px; line-height: 1; }
.lb-active-track { position: relative; flex: 1; height: 34px; margin-right: 8px; }
.lb-active-bar { position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.lb-active-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a3a, #ffd24a); }
.lb-abox { position: absolute; top: 0; transform: translateX(-50%); border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--paper2); }
.lb-abox i { font-style: normal; font-size: 24px; line-height: 1; filter: grayscale(.7); }
.lb-abox span { font-size: 10px; font-weight: 900; margin-top: 1px; }
.lb-abox.ready i { filter: none; animation: lbshake .8s infinite; }
.lb-abox.got i { filter: grayscale(1) brightness(.6); }
@keyframes lbshake { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-12deg) scale(1.1) } 75% { transform: rotate(12deg) scale(1.1) } }
.lb-tlist { display: flex; flex-direction: column; gap: 7px; }
.lb-task { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(243,230,200,.1), rgba(0,0,0,.25)); border: 1px solid rgba(232,176,74,.25); }
.lb-task.got { opacity: .55; }
.lb-task-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lb-task-n { font-weight: 900; font-size: 13px; color: #ffe8b0; }
.lb-task-rw { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-task-m .lb-bar { flex: none; max-width: 200px; }

/* 邮件 */
.lb-mlist { display: flex; flex-direction: column; gap: 6px; }
.lb-ml { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(232,176,74,.35); background: linear-gradient(90deg, rgba(243,230,200,.14), rgba(0,0,0,.25)); text-align: left; color: var(--paper); }
.lb-ml.read { opacity: .65; }
.lb-ml > i { font-style: normal; font-size: 24px; }
.lb-ml-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-ml-m b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffe8b0; }
.lb-ml-m small { font-size: 11px; opacity: .7; }
.lb-ml-tag { font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 6px; background: var(--red); color: #fff; }
.lb-ml.dot-red::after { top: 4px; right: 4px; width: 10px; height: 10px; }
.lb-mail-body { white-space: pre-line; line-height: 1.7; font-size: 14px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(#f3e6c8, #e3cfa2); color: #3b1f06; min-height: 60px; }
.lb-notice-body { white-space: pre-line; line-height: 1.75; font-size: 14px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(#f7ecd2, #e3cfa2); color: #3b1f06; }

/* 首充 */
.lb-fp-hero { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: radial-gradient(ellipse at 20% 50%, rgba(217,70,60,.55), rgba(0,0,0,.3) 70%); border: 1px solid rgba(255,138,122,.5); }
.lb-fp-hero img { width: 92px; height: 92px; flex: none; }
.lb-fp-hero b { display: block; font-family: var(--kai); font-size: 22px; color: #ffe8b0; }
.lb-fp-hero span { font-size: 12px; color: var(--paper2); }
.lb-fp-desc { text-align: center; font-weight: 900; color: #ffe39a; margin: 10px 0; font-size: 13px; line-height: 1.5; }

/* 论剑 */
.lb-daily-hd { padding: 10px; border-radius: 12px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(197,139,255,.35), rgba(0,0,0,.35) 70%); border: 1px solid rgba(197,139,255,.5); }
.lb-daily-ch { font-family: var(--kai); font-size: 20px; font-weight: 900; color: #ffe8b0; }
.lb-daily-ch small { font-family: system-ui, sans-serif; font-size: 11px; margin-left: 6px; color: var(--paper2); font-weight: 500; }
.lb-daily-ws { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 4px; }
.lb-dw { width: 96px; padding: 4px; border-radius: 12px; border: 2px solid var(--ink); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--fc) 40%, #3a2a1f), #20150f 80%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lb-dw img { width: 50px; height: 50px; }
.lb-dw b { font-family: var(--kai); font-size: 15px; color: #ffe8b0; }
.lb-daily-x { font-size: 20px; font-weight: 900; color: #ff9a8a; }
.lb-daily-cb { font-size: 12px; font-weight: 900; color: #ffb0ea; }
.lb-daily-rule { font-size: 12px; color: var(--paper2); margin: 6px 0; line-height: 1.5; }
.lb-daily-st { display: flex; justify-content: center; gap: 16px; font-size: 12px; color: var(--paper2); }
.lb-daily-st b { color: #ffe39a; font-size: 14px; }
.lb-builds { display: flex; flex-direction: column; gap: 8px; }
.lb-build { padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.lb-build-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.lb-build-hd b { flex: 1; color: #ffe8b0; font-size: 14px; }
.lb-build-sk { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-build-sk span { font-size: 11px; font-weight: 900; padding: 2px 6px; border-radius: 7px; color: var(--qc); background: color-mix(in srgb, var(--qc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--qc) 55%, transparent); }
.lb-build-sk small { margin-left: 2px; opacity: .8; }
.lb-prize { display: flex; flex-direction: column; gap: 6px; }
.lb-prize-r { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(232,176,74,.2); }
.lb-prize-r > b { width: 90px; flex: none; font-size: 13px; color: #ffe8b0; }
.lb-prize-r > div { display: flex; gap: 10px; flex-wrap: wrap; }

/* 排行 */
.lb-board { display: flex; flex-direction: column; gap: 6px; }
.lb-board-l { display: flex; flex-direction: column; gap: 5px; }
.lb-board-me { position: sticky; bottom: -12px; padding: 6px 0 2px; background: linear-gradient(transparent, #251a13 30%); }
.lb-rrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(232,176,74,.18); min-width: 0; }
.lb-rrow.me { background: linear-gradient(90deg, rgba(200,52,43,.45), rgba(0,0,0,.35)); border-color: rgba(255,138,122,.6); }
.lb-rk { flex: none; width: 28px; text-align: center; font-weight: 900; font-size: 14px; color: #c9b08a; }
.lb-rk.r1, .lb-rk.r2, .lb-rk.r3 { font-size: 20px; }
.lb-build-hd .lb-rk { width: 22px; height: 22px; line-height: 20px; border-radius: 50%; font-size: 12px; background: var(--gold2); color: #fff; border: 1px solid var(--ink); }
.lb-rav { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; background: linear-gradient(#5e4330, #2a1d15); border: 1.5px solid var(--gold2); color: #ffe8b0; }
.lb-rav img { width: 100%; height: 100%; object-fit: cover; }
.lb-rname { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-rscore { flex: none; font-size: 13px; color: #ffe39a; white-space: nowrap; }

/* 邀请 */
.lb-inv-hd { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: radial-gradient(ellipse at 0% 50%, rgba(63,163,122,.45), rgba(0,0,0,.3) 70%); border: 1px solid rgba(63,163,122,.55); }
.lb-inv-n { flex: none; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(#7fe0b0, var(--jade2)); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--gold2); }
.lb-inv-n small { font-size: 10px; } .lb-inv-n b { font-size: 22px; line-height: 1; }
.lb-inv-t { font-size: 13px; font-weight: 700; line-height: 1.5; }
.lb-inv-rw { display: flex; gap: 8px; margin-top: 8px; }
.lb-inv-rw > div { flex: 1; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(232,176,74,.2); }
.lb-inv-rw small { display: block; font-size: 11px; color: var(--paper2); margin-bottom: 3px; }
.lb-inv-rw > div > div { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-inv-link { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px dashed var(--gold2); cursor: pointer; }
.lb-inv-link span { flex: 1; min-width: 0; font-size: 11px; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c9e6ff; user-select: text; -webkit-user-select: text; }
.lb-inv-link em { font-style: normal; font-size: 12px; font-weight: 900; color: var(--gold); }
.lb-tiers { display: flex; flex-direction: column; gap: 6px; }
.lb-tier { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(232,176,74,.2); }
.lb-tier.got { opacity: .55; }
.lb-tier-n { flex: none; width: 40px; text-align: center; } .lb-tier-n b { font-size: 20px; color: #ffe39a; } .lb-tier-n small { font-size: 11px; margin-left: 1px; }
.lb-tier-rw { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.lb-friends { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.lb-friends > div { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.3); font-size: 12px; }
.lb-friends small { opacity: .7; }

/* 设置 */
.lb-set-id { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.lb-set-id img { width: 54px; height: 54px; border-radius: 10px; border: 2px solid var(--gold2); background: #2a1d15; }
.lb-set-id b { display: block; font-size: 15px; color: #ffe8b0; }
.lb-set-id small { font-size: 12px; opacity: .8; user-select: text; -webkit-user-select: text; }
.lb-set-g { margin-top: 8px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(232,176,74,.2); padding: 2px 10px; }
.lb-set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(232,176,74,.12); font-weight: 700; font-size: 14px; }
.lb-set-row:last-child { border-bottom: 0; }
.lb-sw { position: relative; width: 50px; height: 26px; border-radius: 14px; border: 2px solid var(--ink); background: #54493d; cursor: pointer; padding: 0; transition: background .15s; flex: none; }
.lb-sw i { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #e8dcc0; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.lb-sw.on { background: var(--jade); } .lb-sw.on i { left: 26px; background: #fff; }
.lb-redeem { display: flex; gap: 8px; }
.lb-input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 9px; border: 2px solid var(--ink); background: #f3e6c8; color: #3b1f06; font-weight: 900; font-size: 14px; outline: none; text-transform: uppercase; user-select: text; -webkit-user-select: text; }
.lb-support { width: 100%; margin-top: 12px; }

/* 连携谱 */
.lb-cb-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.lb-cb { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,90,208,.12), rgba(0,0,0,.3)); border: 1px solid rgba(255,90,208,.3); }
.lb-cb.cur { border-color: #ffb0ea; box-shadow: 0 0 10px rgba(255,90,208,.45); }
.lb-cb.same { margin-top: 7px; background: rgba(0,0,0,.3); border-color: rgba(159,216,255,.35); }
.lb-cb-f { flex: none; display: flex; align-items: center; gap: 2px; }
.lb-cb-f > span { font-weight: 900; color: var(--gold); font-size: 12px; }
.lb-cb-fam { width: 48px; text-align: center; padding: 2px 0; border-radius: 8px; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.lb-cb-fam b { display: block; font-size: 11px; color: var(--c); }
.lb-cb-fam div { display: flex; justify-content: center; }
.lb-cb-fam img { width: 20px; height: 20px; }
.lb-cb-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-cb-m b { font-family: var(--kai); font-size: 16px; color: #ffe8b0; display: flex; align-items: center; gap: 6px; }
.lb-cb-m b em { font-style: normal; font-family: system-ui, sans-serif; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: #ff5ad0; color: #fff; }
.lb-cb-m span { font-size: 12px; color: var(--paper2); line-height: 1.4; }
.lb-cb-m small { font-size: 10px; color: #ffb0ea; font-weight: 900; }

/* ---------- 页头 ---------- */
.lb-ph { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.lb-ph-t { font-family: var(--kai); font-size: 24px; font-weight: 900; color: #ffe8b0; letter-spacing: 3px; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(200,52,43,.5); }
.lb-ph-t small { font-family: system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--gold); margin-left: 8px; }
.lb-ph-sub { font-size: 11px; color: var(--paper2); opacity: .75; margin: 2px 0 4px; }

/* ---------- 兵器 ---------- */
.lb-fam { margin-top: 10px; }
.lb-fam-hd { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 80%); border-left: 4px solid var(--c); margin-bottom: 7px; }
.lb-fam-hd b { font-family: var(--kai); font-size: 17px; color: var(--c); text-shadow: 0 1px 0 var(--ink); }
.lb-fam-hd span { font-size: 11px; color: var(--paper2); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.lb-wc { position: relative; min-width: 0; padding: 6px 5px 7px; border-radius: 12px; border: 2px solid var(--ink); display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--paper);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--fc) 32%, #3a2a1f), #1f150f 78%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 55%, transparent), 0 3px 6px rgba(0,0,0,.4); }
.lb-wc-ic { position: relative; width: 56px; height: 56px; }
.lb-wc-ic img { width: 56px; height: 56px; }
.lb-wc-ic .lb-badge { position: absolute; right: -8px; top: -2px; }
.lb-wc-ic.dot-red::after { left: -6px; right: auto; top: -2px; }
.lb-wc-n { font-family: var(--kai); font-size: 15px; font-weight: 900; color: #ffe8b0; white-space: nowrap; }
.lb-wc-x { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lb-wc .lb-bar { width: 100%; flex: none; }
.lb-wc.lock .lb-wc-ic img { filter: grayscale(1) brightness(.5); }
.lb-wc.lock { background: radial-gradient(circle at 50% 28%, #3a2e25, #1a120d 78%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 3px 6px rgba(0,0,0,.4); }
.lb-wc.ready { box-shadow: inset 0 0 0 2px #ffd24a, 0 0 12px rgba(255,210,74,.5); }
.lb-wc.ready .lb-wc-ic img { filter: grayscale(.4) brightness(.85); }
.lb-wc-ready { font-size: 11px; font-weight: 900; color: #3b1f06; background: linear-gradient(#ffe39a, var(--gold2)); border-radius: 8px; padding: 1px 8px; border: 1.5px solid var(--ink); animation: lbglow3 .9s infinite alternate; }
@keyframes lbglow3 { to { filter: brightness(1.2); } }
.lb-fam-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 10px; font-size: 11px; color: var(--paper2); }
.lb-fam-legend span { display: flex; align-items: center; gap: 3px; }
.lb-fam-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); transform: rotate(45deg); }
.lb-wc.lock .lb-wc-n { color: #9a8a70; }

/* 兵器详情 */
.lb-wd .modal-body { padding-top: 10px; }
.lb-wd-hd { display: flex; gap: 10px; align-items: center; }
.lb-wd-ic { position: relative; flex: none; width: 92px; height: 92px; border-radius: 16px; border: 2px solid var(--ink); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--fc) 45%, #3a2a1f), #1a110c 80%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 70%, transparent), 0 0 18px color-mix(in srgb, var(--fc) 45%, transparent); }
.lb-wd-ic img { width: 88px; height: 88px; }
.lb-wd-ic span { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: linear-gradient(#f7ecd2, #e3cfa2); color: var(--red2); font-family: var(--kai); font-weight: 900; font-size: 18px; line-height: 26px; text-align: center; }
.lb-wd-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-wd-n { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-family: var(--kai); font-size: 20px; font-weight: 900; color: #ffe8b0; }
.lb-wd-m .lb-stars { font-size: 15px; }
.lb-wd-desc { font-size: 13px; color: var(--paper); line-height: 1.4; }
.lb-wd-mul { font-size: 11px; font-weight: 900; color: #9ff0c8; }
.lb-params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.lb-params > div { padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(232,176,74,.18); text-align: center; }
.lb-params small { display: block; font-size: 10px; color: var(--paper2); opacity: .75; }
.lb-params b { font-size: 13px; color: #ffe8b0; }
.lb-fam-note { margin-top: 8px; font-size: 11px; line-height: 1.5; padding: 5px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 12%, rgba(0,0,0,.3)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--paper2); }
.lb-fam-note b { color: var(--c); margin-right: 5px; }
.lb-sk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lb-sk { padding: 6px 8px; border-radius: 10px; background: linear-gradient(135deg, rgba(243,230,200,.12), rgba(0,0,0,.3)); border: 1px solid rgba(232,176,74,.3); min-width: 0; }
.lb-sk.sig { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(255,159,26,.3), rgba(0,0,0,.3)); border-color: #ff9f1a; box-shadow: 0 0 10px rgba(255,159,26,.3); }
.lb-sk-hd { display: flex; align-items: center; gap: 5px; }
.lb-sk-hd b { font-family: var(--kai); font-size: 15px; color: #ffe8b0; white-space: nowrap; }
.lb-sk-hd em { font-style: normal; font-size: 10px; font-weight: 900; padding: 0 5px; border-radius: 6px; background: #ff9f1a; color: #3b1f06; }
.lb-sk-hd small { margin-left: auto; font-size: 10px; color: var(--paper2); opacity: .6; white-space: nowrap; }
.lb-sk-d { font-size: 11px; color: var(--paper2); line-height: 1.4; margin-top: 2px; }
.lb-sk-e { font-size: 11px; color: #9ff0c8; font-weight: 700; margin-top: 1px; }
.lb-mastery { padding: 8px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(63,163,122,.35); }
.lb-ms-hd { display: flex; align-items: center; gap: 8px; }
.lb-ms-hd b { font-size: 16px; color: #9ff0c8; flex: none; }
.lb-ms-hd small { flex: none; font-size: 11px; opacity: .7; }
.lb-ms-perks { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.lb-ms-perks > div { font-size: 12px; color: var(--paper2); opacity: .6; display: flex; gap: 6px; line-height: 1.4; }
.lb-ms-perks > div b { flex: none; font-size: 11px; padding: 0 5px; border-radius: 6px; background: #54493d; color: #fff; height: 17px; line-height: 17px; }
.lb-ms-perks > div.on { opacity: 1; color: #ffe8b0; }
.lb-ms-perks > div.on b { background: var(--jade); }
.lb-wd-cb { display: flex; flex-direction: column; gap: 4px; }
.lb-wd-cb > div { display: flex; align-items: center; gap: 6px; font-size: 11px; min-width: 0; }
.lb-wd-cb b { font-family: var(--kai); font-size: 14px; color: #ffb0ea; white-space: nowrap; }
.lb-wd-cb span:last-child { color: var(--paper2); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-frag-row { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.lb-frag-row img { width: 24px; height: 24px; }
.lb-frag-row > span { white-space: nowrap; }

/* ---------- 装备 ---------- */
.lb-doll { display: flex; align-items: stretch; gap: 6px; margin-top: 10px; padding: 10px 8px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(232,176,74,.22), transparent 60%), linear-gradient(rgba(58,42,31,.9), rgba(30,21,15,.95)); border: 2px solid var(--gold2); box-shadow: 0 0 0 2px var(--ink); }
.lb-doll-col { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; flex: none; width: 70px; }
.lb-doll-s { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lb-doll-n { font-size: 10px; font-weight: 700; white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis; color: var(--paper2); }
.lb-doll-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.lb-doll-hero { width: 100%; max-width: 170px; aspect-ratio: 1; position: relative; }
.lb-doll-hero::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 18%; border-radius: 50%; background: radial-gradient(rgba(232,176,74,.45), transparent 70%); }
.lb-doll-hero img { position: relative; width: 100%; height: 100%; }
.lb-doll-pw { display: flex; align-items: baseline; gap: 5px; padding: 3px 14px; border-radius: 12px; background: linear-gradient(90deg, transparent, rgba(142,31,25,.9), transparent); }
.lb-doll-pw small { font-size: 11px; color: #ffd8b0; } .lb-doll-pw b { font-family: var(--kai); font-size: 22px; color: #ffe39a; text-shadow: 0 2px 0 var(--ink); }
.lb-eq { position: relative; width: 58px; height: 58px; border-radius: 12px; border: 2px solid var(--ink); padding: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--qc) 55%, #3a2a1f), color-mix(in srgb, var(--qc) 25%, #120b07) 80%); box-shadow: inset 0 0 0 2px var(--qc), 0 2px 5px rgba(0,0,0,.5); }
.lb-eq > i { font-style: normal; font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.lb-eq.q4, .lb-eq.q5 { box-shadow: inset 0 0 0 2px var(--qc), 0 0 10px var(--qc); }
.lb-eq.empty { --qc: rgba(255,255,255,.15); background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(232,176,74,.3); border-style: dashed; }
.lb-eq.empty > i { opacity: .35; filter: grayscale(1); }
.lb-eq-lv { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 10px; font-weight: 900; text-align: center; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; color: #fff; }
.lb-eq-up { position: absolute; right: 1px; top: 0; font-size: 15px; font-weight: 900; color: #6aff8a; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; line-height: 1; }
.lb-eq-up.best { animation: lbup .7s infinite alternate; }
@keyframes lbup { to { transform: translateY(-3px); } }
.lb-eq-mg { position: absolute; left: -4px; top: -4px; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; font-weight: 900; line-height: 14px; text-align: center; background: #3f7fd0; color: #fff; border: 1.5px solid var(--ink); }
.lb-eq-lk { position: absolute; left: 1px; bottom: 11px; font-size: 10px; }
.lb-stats { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(232,176,74,.2); }
.lb-stats > div { text-align: center; min-width: 0; }
.lb-stats small { display: block; font-size: 10px; color: var(--paper2); opacity: .7; }
.lb-stats b { font-size: 13px; color: #ffe8b0; white-space: nowrap; }
.lb-eq-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.lb-stone { font-size: 12px; font-weight: 900; color: #d8d0c0; white-space: nowrap; }
.lb-filter { display: flex; gap: 5px; margin: 10px 0 8px; overflow-x: auto; padding-bottom: 2px; touch-action: pan-x; }
.lb-filter::-webkit-scrollbar { display: none; }
.lb-filter button { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 9px; border-radius: 14px; border: 1.5px solid rgba(232,176,74,.35); background: rgba(0,0,0,.4); color: #c9b08a; font-size: 12px; font-weight: 900; cursor: pointer; }
.lb-filter button i { font-style: normal; font-size: 13px; }
.lb-filter button.on { background: linear-gradient(#ffe39a, var(--gold2)); color: #3b1f06; border-color: var(--ink); }
.lb-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; justify-items: center; }
.lb-bag-n { text-align: center; font-size: 11px; color: var(--paper2); opacity: .65; margin: 12px 0 4px; }

/* 装备详情 */
.lb-ed-hd { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--qc) 25%, transparent), rgba(0,0,0,.3)); border: 1px solid color-mix(in srgb, var(--qc) 50%, transparent); }
.lb-ed-hd .lb-eq { width: 68px; height: 68px; flex: none; } .lb-ed-hd .lb-eq > i { font-size: 34px; }
.lb-ed-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-ed-n { font-family: var(--kai); font-size: 21px; font-weight: 900; text-shadow: 0 2px 0 var(--ink); }
.lb-ed-t { display: flex; gap: 4px; flex-wrap: wrap; }
.lb-ed-lv { font-size: 12px; font-weight: 900; color: #ffe8b0; }
.lb-ed-better { font-size: 12px; font-weight: 900; color: #6aff8a; }
.lb-ed-stats, .lb-ed-spec { display: flex; flex-direction: column; gap: 3px; }
.lb-ed-stats > div, .lb-ed-spec > div { display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 8px; background: rgba(0,0,0,.3); font-size: 13px; }
.lb-ed-stats b { color: #ffe8b0; }
.lb-ed-spec { opacity: .5; }
.lb-ed-spec.on { opacity: 1; } .lb-ed-spec.on > div { background: linear-gradient(90deg, rgba(181,101,255,.3), rgba(0,0,0,.3)); } .lb-ed-spec.on b { color: #e0b8ff; }
.lb-ed-spec small { font-size: 11px; color: var(--paper2); text-align: center; }
.lb-ed-cost { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(232,176,74,.2); font-size: 13px; }
.lb-ed-cost span { flex: 1; color: var(--paper2); }
.lb-ed-cost b { color: #ffe8b0; white-space: nowrap; } .lb-ed-cost b.lack { color: #ff8a7a; }
.lb-ed-cost small { opacity: .7; }
.lb-ed-merge { margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(63,127,208,.2); border: 1px solid rgba(63,127,208,.6); display: flex; flex-direction: column; font-size: 13px; }
.lb-ed-merge small { font-size: 11px; opacity: .75; }

/* ---------- 修炼：角色 ---------- */
.lb-heroes { display: flex; flex-direction: column; gap: 10px; }
.lb-hc { display: flex; gap: 8px; padding: 8px; border-radius: 14px; border: 2px solid var(--ink); background: linear-gradient(100deg, color-mix(in srgb, var(--hc) 35%, #2a1d15), #1d140e 65%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 55%, transparent), 0 3px 8px rgba(0,0,0,.4); }
.lb-hc.cur { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(232,176,74,.4); }
.lb-hc-pt { position: relative; flex: none; width: 92px; height: 92px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), rgba(0,0,0,.3)); border: 1.5px solid rgba(255,255,255,.12); }
.lb-hc-pt img { width: 92px; height: 92px; }
.lb-hc.lock .lb-hc-pt img { filter: grayscale(1) brightness(.45); }
.lb-hc-cur { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); font-size: 10px; font-weight: 900; white-space: nowrap; padding: 1px 7px; border-radius: 8px; background: var(--red); border: 1.5px solid var(--ink); color: #fff; }
.lb-hc-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-hc-n { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lb-hc-n b { font-family: var(--kai); font-size: 19px; color: #ffe8b0; }
.lb-hc-n small { font-size: 12px; color: var(--paper2); }
.lb-hc-n .lb-stars { margin-left: auto; font-size: 12px; }
.lb-hc-p { font-size: 11px; color: var(--paper2); line-height: 1.45; }
.lb-hc-p em { font-style: normal; font-size: 10px; font-weight: 900; padding: 0 4px; margin-right: 4px; border-radius: 5px; background: var(--jade2); color: #fff; }
.lb-hc-p em.u { background: var(--red2); }
.lb-hc-p b { color: #ffe39a; }
.lb-hc-act { display: flex; gap: 6px; justify-content: flex-end; margin-top: 2px; }

/* ---------- 修炼：天赋 ---------- */
.lb-tal-hd { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: radial-gradient(ellipse at 10% 50%, rgba(232,176,74,.35), transparent 60%), linear-gradient(rgba(58,42,31,.95), rgba(30,21,15,.95)); border: 2px solid var(--gold2); box-shadow: 0 0 0 2px var(--ink); }
.lb-tal-seal { flex: none; width: 54px; height: 54px; border-radius: 12px; background: var(--red); border: 2px solid var(--ink); color: #ffe8b0; font-family: var(--kai); font-weight: 900; font-size: 32px; line-height: 50px; text-align: center; box-shadow: 0 0 0 2px var(--gold2), inset 0 0 12px rgba(0,0,0,.35); transform: rotate(-4deg); }
.lb-tal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-tal-info b { font-family: var(--kai); font-size: 18px; color: #ffe8b0; }
.lb-tal-info span { font-size: 11px; color: var(--paper2); }
.lb-tal-info small { font-size: 11px; color: #9ff0c8; font-weight: 700; }
.lb-tal-btn { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; font-family: var(--kai); font-size: 18px; letter-spacing: 3px; }
.lb-tal-btn small { font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: 0; margin: 0; }
.lb-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.lb-tc { position: relative; display: grid; grid-template-columns: 36px 1fr auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 7px 8px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(243,230,200,.14), rgba(0,0,0,.3)); border: 1px solid rgba(232,176,74,.35); min-width: 0; }
.lb-tc > i { grid-row: 1 / 3; font-style: normal; font-size: 26px; text-align: center; }
.lb-tc > b { font-family: var(--kai); font-size: 14px; color: #ffe8b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-tc-lv { font-size: 11px; font-weight: 900; color: #9ff0c8; }
.lb-tc > small { grid-column: 2 / 4; font-size: 10px; color: var(--paper2); opacity: .8; line-height: 1.3; }
.lb-tc.off { opacity: .5; } .lb-tc.off > i { filter: grayscale(1); }
.lb-tc.max { border-color: #ffb52e; box-shadow: 0 0 8px rgba(255,181,46,.4); } .lb-tc.max .lb-tc-lv { color: #ffb52e; }
.lb-flip-root { position: fixed; inset: 0; z-index: 60; background: rgba(8,5,3,.85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: fadeIn .2s; perspective: 800px; }
.lb-flip { position: relative; width: 170px; height: 230px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.4,.5,1); animation: lbfloat 1s ease-in-out infinite alternate; }
.lb-flip.on { transform: rotateY(180deg); animation: none; }
.lb-flip > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; border: 3px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lb-flip-f { background: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 8px, transparent 8px 16px), linear-gradient(var(--red), var(--red2)); box-shadow: 0 0 0 3px var(--gold), 0 10px 30px rgba(0,0,0,.6); }
.lb-flip-f span { font-family: var(--kai); font-size: 64px; color: #ffe39a; text-shadow: 0 3px 0 var(--ink); }
.lb-flip-b { transform: rotateY(180deg); background: radial-gradient(circle at 50% 30%, #fff6dc, #e3cfa2); color: #3b1f06; box-shadow: 0 0 0 3px var(--gold), 0 0 40px rgba(255,210,100,.7); gap: 4px; padding: 10px; text-align: center; }
.lb-flip-b i { font-style: normal; font-size: 56px; }
.lb-flip-b b { font-family: var(--kai); font-size: 24px; }
.lb-flip-b span { font-weight: 900; color: var(--red2); font-size: 16px; }
.lb-flip-b small { font-size: 12px; opacity: .8; }
.lb-flip-tip { font-family: var(--kai); font-size: 20px; font-weight: 900; color: #ffe8b0; text-shadow: 0 2px 0 var(--ink); }
.lb-flip-close { font-size: 12px; opacity: .6; }
@keyframes lbfloat { to { transform: translateY(-8px) rotateY(8deg); } }

/* ---------- 商城 ---------- */
.lb-shop-sec { margin-top: 12px; }
.lb-shop-t { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; padding: 4px 10px; background: linear-gradient(90deg, rgba(200,52,43,.6), transparent 80%); border-left: 4px solid var(--gold); border-radius: 4px; }
.lb-shop-t b { font-family: var(--kai); font-size: 18px; color: #ffe8b0; letter-spacing: 2px; text-shadow: 0 2px 0 var(--ink); }
.lb-shop-t small { font-size: 11px; color: var(--paper2); opacity: .8; }
.lb-fpb { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px 6px 4px; border-radius: 14px; border: 2px solid var(--ink);
  background: radial-gradient(ellipse at 15% 50%, rgba(255,210,100,.35), transparent 50%), linear-gradient(100deg, #b8322a, #6e1712); box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(200,52,43,.45); }
.lb-fpb img { width: 76px; height: 76px; flex: none; }
.lb-fpb-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-fpb-m b { font-family: var(--kai); font-size: 20px; color: #ffe39a; text-shadow: 0 2px 0 var(--ink); letter-spacing: 2px; }
.lb-fpb-m > span { font-size: 11px; color: #ffe8d0; line-height: 1.35; }
.lb-fpb-rw { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 2px solid var(--ink); min-width: 0;
  background: linear-gradient(160deg, #3f6fb0, #1d2f55); box-shadow: inset 0 0 0 1px rgba(160,200,255,.5); }
.lb-card.life { background: linear-gradient(160deg, #b8801e, #5a3a0e); box-shadow: inset 0 0 0 1px rgba(255,220,150,.6); }
.lb-card.active { box-shadow: inset 0 0 0 2px #9ff0c8, 0 0 10px rgba(63,163,122,.5); }
.lb-card-hd { display: flex; justify-content: space-between; align-items: center; }
.lb-card-hd b { font-family: var(--kai); font-size: 18px; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.lb-card-hd span { font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 6px; background: var(--jade); }
.lb-card-d { font-size: 11px; line-height: 1.4; color: #eee; flex: 1; }
.lb-card-rw { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.lb-card-rw small { opacity: .8; }
.lb-card .btn { align-self: stretch; }
.lb-gachas { display: flex; flex-direction: column; gap: 8px; }
.lb-gacha { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; border: 2px solid var(--ink);
  background: radial-gradient(ellipse at 10% 50%, rgba(63,166,255,.4), transparent 50%), linear-gradient(100deg, #243a5e, #151c2c); box-shadow: inset 0 0 0 1px rgba(120,180,255,.5); }
.lb-gacha.weapon { background: radial-gradient(ellipse at 10% 50%, rgba(197,139,255,.45), transparent 50%), linear-gradient(100deg, #3e2a5e, #1a1228); box-shadow: inset 0 0 0 1px rgba(197,139,255,.55); }
.lb-gacha-art { flex: none; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; }
.lb-gacha-art i { font-style: normal; font-size: 40px; filter: drop-shadow(0 0 8px rgba(120,200,255,.8)); }
.lb-gacha-art img { width: 58px; height: 58px; }
.lb-gacha-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-gacha-m b { font-family: var(--kai); font-size: 18px; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.lb-gacha-m span { font-size: 11px; line-height: 1.35; color: #dde; }
.lb-gacha-m small { font-size: 10px; font-weight: 900; color: #ffd24a; }
.lb-gacha-b { flex: none; display: flex; flex-direction: column; gap: 6px; }
.lb-gacha-b .btn { display: flex; flex-direction: column; align-items: center; padding: 3px 10px; line-height: 1.2; min-width: 70px; }
.lb-gacha-b .btn small { margin: 0; font-size: 10px; }
.lb-boxes { display: flex; flex-direction: column; gap: 6px; }
.lb-box { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: linear-gradient(90deg, rgba(243,230,200,.14), rgba(0,0,0,.3)); border: 1px solid rgba(232,176,74,.35); }
.lb-box > i { font-style: normal; font-size: 30px; }
.lb-box-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-box-m b { font-size: 14px; color: #ffe8b0; } .lb-box-m small { font-size: 11px; opacity: .7; }
.lb-box-n { font-weight: 900; color: #ffe39a; font-size: 14px; }
.lb-packs { display: flex; flex-direction: column; gap: 8px; }
.lb-pack { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid var(--ink); background: linear-gradient(160deg, #5a2a1a, #2a1510); box-shadow: inset 0 0 0 1px rgba(255,160,120,.45); }
.lb-pack.sold { opacity: .5; }
.lb-pack-hd { display: flex; justify-content: space-between; align-items: baseline; }
.lb-pack-hd b { font-family: var(--kai); font-size: 17px; color: #ffe8b0; } .lb-pack-hd small { font-size: 11px; color: #ffb0a0; }
.lb-pack .rewards { justify-content: flex-start; gap: 5px; }
.lb-pack .rw { width: 58px; min-height: 64px; } .lb-pack .rw i { font-size: 22px; }
.lb-pack .btn { align-self: flex-end; }
.lb-gems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lb-gem { position: relative; min-width: 0; padding: 12px 4px 0; border-radius: 12px; border: 2px solid var(--ink); display: flex; flex-direction: column; align-items: center; gap: 2px; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 50% 35%, #3a6ab0, #16243e 80%); box-shadow: inset 0 0 0 1px rgba(140,190,255,.5); }
.lb-gem > i { font-style: normal; font-size: 32px; filter: drop-shadow(0 0 6px rgba(120,200,255,.8)); }
.lb-gem > b { font-size: 13px; font-weight: 900; white-space: nowrap; }
.lb-gem-p { align-self: stretch; margin-top: 4px; padding: 4px 0; font-size: 12px; font-weight: 900; background: linear-gradient(#ff7a6a, var(--red2)); border-top: 1.5px solid var(--ink); }
.lb-gem-2x { position: absolute; left: -22px; top: 8px; transform: rotate(-38deg); width: 88px; font-size: 9px; font-weight: 900; text-align: center; background: #ffd24a; color: #6a1a0a; padding: 1px 0; box-shadow: 0 1px 0 var(--ink); }
.lb-gem.sold { opacity: .45; }
.lb-drawn .rewards { gap: 7px; }
.lb-drawn .rw { animation: lbpop .35s backwards; }
.lb-drawn .rw:nth-child(2) { animation-delay: .05s } .lb-drawn .rw:nth-child(3) { animation-delay: .1s } .lb-drawn .rw:nth-child(4) { animation-delay: .15s } .lb-drawn .rw:nth-child(5) { animation-delay: .2s }
.lb-drawn .rw:nth-child(6) { animation-delay: .25s } .lb-drawn .rw:nth-child(7) { animation-delay: .3s } .lb-drawn .rw:nth-child(8) { animation-delay: .35s } .lb-drawn .rw:nth-child(9) { animation-delay: .4s } .lb-drawn .rw:nth-child(10) { animation-delay: .45s }
.lb-drawn.rare .modal { box-shadow: 0 0 0 3px var(--ink), 0 0 40px rgba(255,190,80,.55); }
@keyframes lbpop { from { transform: scale(.3) rotate(-10deg); opacity: 0 } 70% { transform: scale(1.12) } }
.lb-pay-prod { text-align: center; } .lb-pay-prod > b { font-family: var(--kai); font-size: 18px; color: #ffe8b0; }
.lb-pay-prod .rewards { margin: 6px 0; }
.lb-pay-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lb-pay-opt { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--ink); background: linear-gradient(#4a3a2c, #2a1d15); color: #ffe8b0; box-shadow: inset 0 0 0 1px var(--gold2); }
.lb-pay-opt b { flex: 1; text-align: left; font-size: 15px; } .lb-pay-opt span { font-weight: 900; color: #ffe39a; } .lb-pay-opt em { font-style: normal; font-size: 20px; color: var(--gold); }
.lb-pay-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lb-pay-wait b { font-family: var(--kai); font-size: 18px; color: #ffe8b0; }
.lb-pay-wait small { font-size: 10px; opacity: .5; user-select: text; -webkit-user-select: text; }
.lb-pay-st { font-size: 13px; color: var(--paper2); }
.lb-spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(232,176,74,.2); border-top-color: var(--gold); animation: lbspin .9s linear infinite; }

/* ---------- 升级 ---------- */
.lb-lvup { position: fixed; inset: 0; z-index: 80; background: rgba(8,5,3,.93); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; animation: fadeIn .2s; overflow: hidden; }
.lb-lvup-rays { display: block; position: absolute; width: 700px; height: 700px; left: 50%; top: 50%; margin: -350px; background: repeating-conic-gradient(rgba(255,210,100,.08) 0 10deg, transparent 10deg 20deg); animation: lbspin 12s linear infinite; -webkit-mask: radial-gradient(circle, #000 20%, transparent 60%); mask: radial-gradient(circle, #000 20%, transparent 60%); }
.lb-lvup > div { position: relative; }
.lb-lvup-t { font-family: var(--kai); font-size: 42px; font-weight: 900; color: #ffe39a; letter-spacing: 8px; text-shadow: 0 3px 0 var(--red2), 0 0 20px rgba(255,190,80,.7); animation: popIn .4s; }
.lb-lvup-lv { font-size: 22px; font-weight: 900; } .lb-lvup-lv s { opacity: .6; } .lb-lvup-lv b { color: #9ff0c8; font-size: 30px; }
.lb-lvup-open { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 14px; background: rgba(0,0,0,.5); border: 1px solid var(--gold2); font-weight: 900; color: #ffe8b0; }
.lb-lvup-open span { font-family: var(--kai); font-size: 22px; color: #ffe39a; }
.lb-lvup-tip { font-size: 12px; opacity: .6; margin-top: 16px; }

/* ---------- 小屏 ---------- */
@media (max-width: 370px) {
  .lb-body { padding: 0 8px 34px; }
  .pg-home { padding: 0; }
  .lb-power { padding-left: 16px; padding-right: 8px; } .lb-power b { font-size: 18px; }
  .lb-pill-v b { font-size: 12px; }
  .sbtn { width: 46px; } .sbtn-ic { width: 40px; height: 40px; font-size: 20px; }
  .lb-side { gap: 7px; }
  .lb-hero { width: 56px; } .lb-hero img { width: 44px; height: 44px; } .lb-ult { width: 56px; } .lb-ult > i { font-size: 26px; }
  .lb-lo-row { gap: 4px; }
  .lb-slot img { width: 38px; height: 38px; } .lb-slot-n { font-size: 12px; }
  .lb-stage-info { left: 58px; right: 58px; }
  .lb-go { font-size: 22px; padding: 9px 16px; }
  .lb-doll-col { width: 62px; } .lb-doll .lb-eq { width: 54px; height: 54px; }
  .lb-wc-ic, .lb-wc-ic img { width: 48px; height: 48px; }
  .lb-sk-list { grid-template-columns: 1fr; }
  .lb-plaque-c { min-width: 110px; padding: 4px 12px 5px; } .lb-plaque-c b { font-size: 21px; }
}
@media (max-height: 760px) {
  .lb-side { gap: 3px; top: 6px; }
  .sbtn { width: 46px; }
  .sbtn-ic { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
  .sbtn-t { font-size: 10px; margin-top: 0; }
}
@media (max-height: 700px) {
  .lb-stage { min-height: 248px; }
  .lb-side { gap: 1px; top: 4px; }
  .sbtn-ic { width: 34px; height: 34px; font-size: 17px; }
  .lb-go-wrap { padding: 8px 10px 36px; }
}

/* ---------- 绝学 ---------- */
.lb-ult { position: relative; flex: none; width: 64px; border-radius: 10px; border: 2px solid var(--ink); padding: 14px 2px 4px; display: flex; flex-direction: column; align-items: center; color: #ffe8b0;
  background: radial-gradient(circle at 50% 38%, rgba(255,160,60,.45), #2a1d15 72%); box-shadow: inset 0 0 0 1px rgba(255,180,80,.55); }
.lb-ult.aff { box-shadow: inset 0 0 0 2px #ffd24a, 0 0 10px rgba(255,200,80,.5); }
.lb-ult-k { position: absolute; top: 2px; left: 0; right: 0; font-size: 10px; font-weight: 900; color: #ffb347; letter-spacing: 2px; }
.lb-ult > i { font-style: normal; font-size: 30px; line-height: 1.15; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.lb-ult-n { font-family: var(--kai); font-size: 12px; font-weight: 900; line-height: 1.15; text-align: center; word-break: break-all; }
.lb-ult small { font-size: 10px; color: #9ff0c8; font-weight: 900; white-space: nowrap; }
.lb-ult.dot-red::after { top: -4px; right: -4px; }
.sbtn.glow-r .sbtn-ic { background: radial-gradient(circle at 50% 30%, #8a3a2a, #2a100b 75%); box-shadow: 0 0 0 1.5px #ff7a5c, 0 3px 6px rgba(0,0,0,.55); }
.lb-ults { display: flex; flex-direction: column; gap: 9px; }
.lb-uc { display: flex; gap: 9px; padding: 9px; border-radius: 14px; border: 2px solid var(--ink); background: linear-gradient(100deg, rgba(255,150,60,.25), #1d140e 65%); box-shadow: inset 0 0 0 1px rgba(255,180,80,.45), 0 3px 8px rgba(0,0,0,.4); }
.lb-uc.cur { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(232,176,74,.45); }
.lb-uc.lock { background: linear-gradient(100deg, rgba(255,255,255,.06), #1a120d 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.lb-uc-ic { position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink);
  background: radial-gradient(circle at 50% 35%, #ffcf7a, #b8561e 70%, #5a2a0e); box-shadow: 0 0 0 2px var(--gold2), 0 0 16px rgba(255,160,60,.45); }
.lb-uc-ic > i { font-style: normal; font-size: 36px; }
.lb-uc.lock .lb-uc-ic { filter: grayscale(1) brightness(.55); }
.lb-uc-ic > span { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 900; white-space: nowrap; padding: 0 6px; border-radius: 8px; background: linear-gradient(#ffe39a, var(--gold2)); color: #3b1f06; border: 1.5px solid var(--ink); }
.lb-uc-ic > em { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 900; white-space: nowrap; padding: 0 6px; border-radius: 8px; background: var(--red); color: #fff; border: 1.5px solid var(--ink); }
.lb-uc-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-uc-n { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lb-uc-n b { font-family: var(--kai); font-size: 19px; color: #ffe8b0; }
.lb-uc-n small { font-size: 11px; color: #9ff0c8; font-weight: 900; }
.lb-uc-d { font-size: 12px; color: var(--paper2); line-height: 1.4; }
.lb-uc-x { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: #ffcf9a; font-weight: 700; }
.lb-uc-x .up { color: #9ff0c8; }
.lb-uc-aff { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 900; color: #ffd24a; }
.lb-uc-aff img { width: 20px; height: 20px; }
.lb-wp-ui { flex: none; width: 48px; height: 48px; border-radius: 50%; font-style: normal; font-size: 28px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, #ffcf7a, #b8561e 70%, #5a2a0e); border: 2px solid var(--ink); }
.lb-wp-lv { font-family: system-ui, sans-serif; font-size: 11px; color: #9ff0c8; }
.lb-fpb-ic { font-style: normal; font-size: 50px; width: 76px; text-align: center; flex: none; }

/* ---------- 群首领 ---------- */
.lb-wb-list { display: flex; flex-direction: column; gap: 9px; }
.lb-wb { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 14px; border: 2px solid var(--ink); background: radial-gradient(ellipse at 10% 0%, rgba(200,52,43,.45), transparent 60%), linear-gradient(#3a1d15, #1d100b); box-shadow: inset 0 0 0 1px rgba(255,120,90,.45); }
.lb-wb.dead { filter: grayscale(.7); opacity: .7; }
.lb-wb-hd { display: flex; align-items: center; gap: 8px; }
.lb-wb-hd > i { font-style: normal; font-size: 32px; }
.lb-wb-hd > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-wb-hd b { font-family: var(--kai); font-size: 18px; color: #ffe8b0; }
.lb-wb-hd b small { font-family: system-ui, sans-serif; font-size: 11px; color: #ff9a8a; }
.lb-wb-hd span { font-size: 11px; color: var(--paper2); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-wb-hd em { font-style: normal; font-size: 11px; font-weight: 900; color: #ffcf9a; white-space: nowrap; }
.lb-wb-hp .lb-bar { flex: none; height: 16px; }
.lb-bar.boss i { background: linear-gradient(90deg, #8e1f19, #ff5a4a); }
.lb-wb-x { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--paper2); }
.lb-wb-x b { color: #ffe39a; }
.lb-wb-top { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; }
.lb-wb-top small { margin-left: 3px; color: #ffcf9a; }
.lb-wb .btn { align-self: flex-end; }
.lb-wd-ult { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; padding: 5px 8px; border-radius: 8px; font-size: 12px; background: rgba(255,160,60,.15); border: 1px solid rgba(255,180,80,.45); }
.lb-wd-ult b { color: #ffb347; }
.lb-wd-ult span { font-weight: 900; color: #ffe8b0; }
.lb-wd-ult small { color: var(--paper2); opacity: .8; font-size: 11px; }

/* ---------- 矮屏紧凑布局（Telegram 桌面版 / 小窗口）：保证出征按钮一屏可见 ---------- */
@media (max-height: 720px) {
  .lb-top { padding: calc(var(--content-top) + 4px) 8px 4px; }
  .lb-av { width: 40px; height: 40px; border-radius: 10px; }
  .lb-av-lv { min-width: 18px; height: 17px; font-size: 10px; line-height: 13px; left: -4px; bottom: -4px; }
  .lb-me-name { font-size: 13px; }
  .lb-exp { height: 10px; margin-top: 3px; } .lb-exp span { font-size: 8px; line-height: 8px; }
  .lb-power { padding: 2px 10px 2px 16px; } .lb-power small { font-size: 9px; } .lb-power b { font-size: 17px; }
  .lb-res { margin-top: 5px; gap: 5px; }
  .lb-pill { height: 24px; } .lb-pill > i { font-size: 14px; width: 18px; } .lb-pill-v b { font-size: 12px; } .lb-pill em { width: 18px; height: 18px; font-size: 13px; line-height: 15px; }
  .lb-stage { min-height: 0; flex: 1 1 auto; }
  .lb-plaque { top: 6px; } .lb-plaque-c { min-width: 104px; padding: 3px 12px 4px; } .lb-plaque-c small { font-size: 10px; } .lb-plaque-c b { font-size: 20px; }
  .lb-arrow { width: 26px; height: 32px; font-size: 20px; line-height: 24px; }
  .lb-side { gap: 2px; top: 4px; } .lb-side.l { left: 5px; } .lb-side.r { right: 5px; }
  .sbtn { width: 42px; } .sbtn-ic { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; } .sbtn-t { font-size: 9px; margin-top: 0; }
  .lb-stage-info { bottom: 4px; left: 52px; right: 52px; } .lb-prog { padding: 2px 8px; } .lb-prog-bar { height: 6px; } .lb-rec { font-size: 10px; }
  .lb-loadout { margin: -4px 8px 0; padding: 6px; border-radius: 12px; }
  .lb-lo-row { gap: 4px; }
  .lb-hero, .lb-ult { width: 54px; } .lb-hero img { width: 38px; height: 38px; } .lb-hero-n { font-size: 11px; }
  .lb-ult { padding-top: 12px; } .lb-ult > i { font-size: 22px; } .lb-ult-n { font-size: 11px; }
  .lb-slot { padding: 3px 2px; } .lb-slot img { width: 32px; height: 32px; } .lb-slot-n { font-size: 12px; } .lb-slot-k { width: 16px; height: 16px; font-size: 10px; line-height: 13px; }
  .lb-swap { width: 20px; height: 20px; font-size: 11px; line-height: 15px; }
  .lb-syn { margin-top: 5px; padding: 3px 7px; }
  .lb-go-wrap { padding: 6px 10px 22px; }
  .lb-go { padding: 7px 16px; font-size: 20px; letter-spacing: 6px; } .lb-go small { font-size: 12px; }
  .lb-guide { bottom: calc(100% - 8px); } .lb-guide b { padding: 4px 10px; font-size: 11px; }
  .lb-nav { height: calc(54px + var(--safe-bottom)); } .lb-nav .nav { height: 50px; }
  .nav-ic { width: 26px; height: 26px; } .nav-ic i { font-size: 18px; } .nav-ic img { width: 24px; height: 24px; } .nav-t { font-size: 11px; }
  .lb-nav .nav-c .nav-ic { width: 50px; height: 50px; margin-top: -20px; } .lb-nav .nav-c .nav-ic img { width: 32px; height: 32px; }
}

/* ---------- 出战阵容面板：整体收小 ---------- */
.lb-loadout { padding: 6px; }
.lb-lo-row { gap: 4px; }
.lb-hero, .lb-ult { width: 56px; }
.lb-hero img { width: 40px; height: 40px; } .lb-hero-n { font-size: 11px; }
.lb-hero .lb-stars, .lb-slot .lb-stars { transform: scale(.85); }
.lb-ult { padding-top: 12px; } .lb-ult > i { font-size: 24px; } .lb-ult-n { font-size: 11px; } .lb-ult small { font-size: 9px; }
.lb-slot { padding: 3px 2px; } .lb-slot img { width: 34px; height: 34px; } .lb-slot-n { font-size: 12px; }
.lb-slot-k { width: 17px; height: 17px; font-size: 10px; line-height: 14px; }
.lb-slot-s { font-size: 11px; transform: scale(.92); }
.lb-swap { width: 22px; height: 22px; font-size: 12px; line-height: 17px; }
.lb-syn { margin-top: 5px; padding: 4px 8px; }

/* ---------- 修炼页：角色 / 绝学卡片收小 ---------- */
.lb-seg.big { margin: 8px 0; } .lb-seg.big button { font-size: 14px; padding: 6px 4px; letter-spacing: 3px; }
.lb-hc, .lb-uc { gap: 8px; padding: 6px 8px; border-radius: 12px; }
.lb-hc-pt { width: 64px; height: 64px; border-radius: 10px; } .lb-hc-pt img { width: 64px; height: 64px; }
.lb-hc-n b, .lb-uc-n b { font-size: 16px; }
.lb-hc-n small, .lb-uc-n small { font-size: 11px; }
.lb-hc-m, .lb-uc-m { gap: 2px; }
.lb-hc-p, .lb-uc-d { font-size: 11px; line-height: 1.35; }
.lb-uc-x, .lb-uc-aff { font-size: 10px; }
.lb-uc-aff img { width: 16px; height: 16px; }
.lb-uc-ic { width: 50px; height: 50px; box-shadow: 0 0 0 1.5px var(--gold2), 0 0 10px rgba(255,160,60,.35); }
.lb-uc-ic > i { font-size: 26px; }
.lb-uc-ic > span, .lb-uc-ic > em { font-size: 9px; padding: 0 4px; }
.lb-ults { gap: 7px; }
.lb-hc-act .btn, .lb-uc .btn { font-size: 12px; padding: 3px 10px; border-radius: 8px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 0 var(--ink); }
.lb-hc .lb-bar, .lb-uc .lb-bar { height: 12px; }

/* 绝学格子：主 / 副两门 */
.lb-ult2 { position: relative; flex: none; width: 76px; border-radius: 10px; border: 2px solid var(--ink); padding: 13px 3px 3px; display: flex; flex-direction: column; gap: 3px;
  background: radial-gradient(circle at 50% 30%, rgba(255,160,60,.35), #2a1d15 75%); box-shadow: inset 0 0 0 1px rgba(255,180,80,.55); }
.lb-ult2 .lb-ult-k { top: 1px; text-align: center; }
.lb-ult2.dot-red::after { top: -4px; right: -4px; }
.lb-ult-r { flex: 1; display: flex; align-items: center; gap: 2px; padding: 2px 2px; border-radius: 7px; border: 1px solid rgba(255,180,80,.35); background: rgba(0,0,0,.3); color: #ffe8b0; text-align: left; min-width: 0; }
.lb-ult-r.aff { border-color: #ffd24a; box-shadow: 0 0 6px rgba(255,200,80,.5); }
.lb-ult-r > i { font-style: normal; font-size: 17px; flex: none; }
.lb-ult-r > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.lb-ult-r b { font-family: var(--kai); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-ult-r small { font-size: 8px; color: #9ff0c8; white-space: nowrap; }
.lb-ult-kk { flex: none; width: 13px; height: 13px; border-radius: 50%; font-size: 8px; font-weight: 900; line-height: 11px; text-align: center; color: #fff; border: 1px solid var(--ink); background: var(--red); }
.lb-ult-kk.sub { background: var(--blue); }
.lb-ult-r b { display: none; } .lb-ult-r > i { font-size: 20px; } .lb-ult-r small { font-size: 10px; font-weight: 900; } .lb-ult-r { justify-content: center; gap: 3px; }