/* ============================================================
 * style.css —— 牌渊 · 轻量肉鸽卡牌（移动端优先 + PC适配）
 * ============================================================ */
:root {
  --bg0: #0b0e16;
  --bg1: #121826;
  --panel: rgba(255, 255, 255, 0.045);
  --panel2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --tx: #e8e4d8;
  --tx2: #9aa0b4;
  --gold: #d9b36c;
  --gold2: #f0d9a6;
  --red: #e05656;
  --green: #5fbf7a;
  --blue: #58a6ff;
  --purple: #b085f5;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --r: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, #1b2336 0%, var(--bg0) 60%) fixed;
  color: var(--tx);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
#app { height: 100dvh; display: flex; flex-direction: column; }
#app.shake { animation: shakeApp .35s; }
@keyframes shakeApp { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-6px,3px)} 40%{transform:translate(5px,-4px)} 60%{transform:translate(-4px,2px)} 80%{transform:translate(3px,-2px)} }

/* ============ 屏幕容器 ============ */
.screen { display: none; flex: 1; min-height: 0; flex-direction: column; animation: fadein .35s; }
.screen.on { display: flex; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ 通用组件 ============ */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--panel);
  color: var(--tx); border-radius: 12px; padding: 12px 20px;
  font-size: 15px; cursor: pointer; transition: all .18s; font-family: inherit;
}
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(160deg, #e8c98a, #c89b52);
  border-color: #f0d9a6; color: #241a08; font-weight: 700; letter-spacing: 2px;
  box-shadow: 0 4px 18px rgba(217, 179, 108, .28);
}
.btn.primary:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--tx2); }
.btn.line { background: var(--panel); }
.btn.line:hover { border-color: var(--gold); color: var(--gold2); }
.btn.danger { background: linear-gradient(160deg, #b34a4a, #8f3333); border-color: #d97a7a; color: #ffe9e9; font-weight: 700; }
.btn.dangerline { background: transparent; border-color: rgba(224, 86, 86, .35); color: #d98a8a; }
.btn.big { padding: 15px 24px; font-size: 17px; border-radius: 14px; }
.btn.small { padding: 7px 14px; font-size: 13px; border-radius: 10px; }

.mtitle { font-size: 18px; color: var(--gold2); letter-spacing: 1px; margin-bottom: 12px; }
.mtitle small { color: var(--tx2); font-size: 12px; font-weight: 400; }
.mbody { overflow-y: auto; max-height: 62dvh; line-height: 1.7; font-size: 14px; color: #cfd3e0; }
.mbody.center { text-align: center; }
.mbody::-webkit-scrollbar { width: 4px; } .mbody::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.mfoot { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.mfoot.two .btn { flex: 1; }
.hint { color: var(--tx2); font-size: 12px; }
.empty { text-align: center; color: var(--tx2); padding: 30px 0; }

/* 弹窗 */
.mask {
  position: fixed; inset: 0; background: rgba(5, 8, 14, .72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 60; opacity: 0; transition: opacity .18s;
  padding: 18px;
}
.mask.show { opacity: 1; }
.modal {
  width: min(560px, 94vw); max-height: 88dvh; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(170deg, #1a2132, #10141f);
  border: 1px solid rgba(217, 179, 108, .25); border-radius: 18px; padding: 20px;
  box-shadow: var(--shadow); transform: scale(.94); transition: transform .18s;
}
.mask.show .modal { transform: scale(1); }

/* Toast */
#toast-root { position: fixed; left: 0; right: 0; bottom: 12dvh; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 90; pointer-events: none; }
.toast {
  background: rgba(20, 26, 40, .95); border: 1px solid var(--gold); color: var(--gold2);
  padding: 9px 18px; border-radius: 10px; font-size: 13px; max-width: 86vw;
  opacity: 0; transform: translateY(8px); transition: all .25s; box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: none; }

/* 浮动数字 */
#float-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.float {
  position: absolute; transform: translate(-50%, 0); font-weight: 800; font-size: 17px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8); animation: floatUp 1.05s ease-out forwards; white-space: nowrap;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); }
  18% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}
.float.dmg { color: #ff7a6e; } .float.heal { color: #7fe0a0; }
.float.def { color: #bfcbe6; } .float.energy { color: #6fb6ff; }
.float.buff { color: #f2d98c; } .float.debuff { color: #d886f0; }
.float.dim { color: #8b90a5; font-size: 13px; font-weight: 500; }

/* 拖拽幻影 */
#drag-ghost { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
#drag-ghost .ghost { position: fixed; transform: translate(-50%, -60%) rotate(3deg) scale(1.1); box-shadow: 0 12px 40px rgba(0,0,0,.6); }

/* ============ 主页 ============ */
#scr-home { align-items: center; justify-content: center; gap: 26px; padding: 24px; }
.home-hero { text-align: center; position: relative; }
.hero-glow {
  position: absolute; left: 50%; top: 40%; width: 300px; height: 300px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(217, 179, 108, .18), transparent 65%); pointer-events: none;
  animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); } }
.hero-title {
  font-size: clamp(52px, 12vw, 88px); letter-spacing: 18px; text-indent: 18px; font-weight: 800;
  background: linear-gradient(180deg, #f6e3b4, #c89b52); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 10px 40px rgba(217, 179, 108, .15);
}
.hero-sub { color: var(--tx2); letter-spacing: 4px; font-size: 13px; margin-top: 10px; }
.home-menu { display: flex; flex-direction: column; gap: 11px; width: min(320px, 88vw); position: relative; z-index: 1; }
.home-saveinfo { color: var(--tx2); font-size: 12px; text-align: center; }

/* ============ 页头 ============ */
.pagehead { padding: 12px 14px 8px; display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0; }
.pagehead .back { flex-shrink: 0; margin-top: 1px; padding: 6px 12px; }
.pg-title { flex: 1; min-width: 0; }
.pagehead h2 { font-size: 20px; color: var(--gold2); letter-spacing: 3px; }
.pagehint { color: var(--tx2); font-size: 12px; margin-top: 6px; }

/* ============ 牌系选择 ============ */
#scr-faction { padding-bottom: 90px; }
.fac-grid {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 12px; padding: 10px 16px;
  grid-template-columns: 1fr; align-content: start;
}
.fac-card {
  border: 1px solid var(--line); border-left: 3px solid var(--fc); border-radius: var(--r);
  background: var(--panel); padding: 14px; cursor: pointer; transition: all .18s; position: relative;
}
.fac-card:active { transform: scale(.98); }
.fac-card.sel { border-color: var(--fc); background: color-mix(in srgb, var(--fc) 10%, var(--bg1)); box-shadow: 0 0 0 1px var(--fc), 0 6px 22px color-mix(in srgb, var(--fc) 25%, transparent); }
.fc-head { display: flex; align-items: baseline; gap: 10px; }
.fc-name { font-size: 20px; font-weight: 800; color: var(--fc); letter-spacing: 2px; }
.fc-role { font-size: 12px; color: var(--tx2); }
.fc-stats { display: flex; gap: 8px; margin: 10px 0 8px; flex-wrap: wrap; }
.fc-stats span { background: var(--panel2); border-radius: 8px; padding: 3px 10px; font-size: 12px; color: #cfd3e0; }
.fc-desc { font-size: 12.5px; color: var(--tx2); line-height: 1.7; }
.fc-pickmark { position: absolute; right: 12px; top: 12px; font-size: 12px; color: var(--fc); opacity: .85; }
.fac-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg0) 40%); display: flex; }
.fac-footer .btn { width: 100%; }

/* ============ 关卡选择 ============ */
.lv-profile {
  margin: 4px 16px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; font-size: 13px; line-height: 1.8;
}
.lvp-facs { font-size: 16px; letter-spacing: 2px; } .lvp-facs i { color: var(--tx2); font-style: normal; margin: 0 8px; }
.lvp-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.lvp-stats span { background: var(--panel2); padding: 2px 10px; border-radius: 8px; font-size: 12px; }
.lvp-relics { color: var(--tx2); font-size: 12px; }
.lv-grid {
  flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 30px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: start;
}
.act-title { grid-column: 1 / -1; color: var(--gold); font-size: 13px; letter-spacing: 2px; margin: 12px 0 2px; border-left: 3px solid var(--gold); padding-left: 8px; }
.lvnode {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 10px 6px; text-align: center; cursor: pointer; transition: all .18s; position: relative;
}
.lvnode:active { transform: scale(.95); }
.lvnode.open { border-color: rgba(217, 179, 108, .5); }
.lvnode.open:hover { box-shadow: 0 0 14px rgba(217, 179, 108, .2); }
.lvnode.cleared { opacity: .75; border-color: rgba(95, 191, 122, .4); }
.lvnode.lock { opacity: .35; filter: grayscale(1); cursor: not-allowed; }
.lvnode.boss { background: linear-gradient(170deg, rgba(176, 60, 60, .18), var(--panel)); }
.lvn-num { font-size: 20px; font-weight: 800; color: var(--gold2); }
.lvnode.lock .lvn-num { color: var(--tx2); }
.lvn-name { font-size: 11px; color: #cfd3e0; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvn-tag { font-size: 10px; color: var(--tx2); }
.lvnode.boss .lvn-tag { color: #ff9b8a; }
.lvnode.cleared .lvn-tag { color: #7fe0a0; }

/* 关卡详情 */
.lvdetail { line-height: 1.8; font-size: 14px; }
.ld-name { font-size: 20px; font-weight: 800; color: var(--gold2); margin-bottom: 8px; }
.ld-stats { display: flex; gap: 8px; margin-bottom: 8px; }
.ld-stats span { background: var(--panel2); padding: 3px 12px; border-radius: 8px; font-size: 13px; }
.ld-sp { color: #d8b0f0; font-size: 13px; }
.ld-adds { color: var(--tx2); font-size: 12.5px; }
.ld-reward { color: var(--gold); font-size: 13px; }

/* ============ 战斗页 ============ */
#scr-battle { gap: 8px; padding: 10px 10px calc(8px + env(safe-area-inset-bottom)); }
.bt-top {
  display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; flex-shrink: 0;
}
#bt-lvinfo { font-size: 13px; color: var(--gold2); flex: 1; }
#bt-turn { font-size: 13px; color: var(--tx2); }

/* 敌方区 */
.bt-enemies { display: flex; gap: 10px; overflow-x: auto; padding: 2px; flex-shrink: 0; min-height: 118px; align-items: stretch; }
.enemy {
  min-width: 150px; flex: 1; max-width: 220px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; cursor: pointer;
  transition: all .15s; position: relative; display: flex; flex-direction: column; gap: 5px;
}
.enemy.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 20px rgba(217, 179, 108, .2); }
.enemy.hover { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.enemy.boss { background: linear-gradient(170deg, rgba(176, 60, 60, .16), var(--panel)); }
.e-intent { font-size: 12px; color: #ff9b8a; min-height: 18px; font-weight: 700; }
.e-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.e-bosstag { font-size: 9px; color: #ffd9d0; background: #a83a3a; border-radius: 6px; padding: 1px 6px; letter-spacing: 1px; }
.e-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--panel2); border-radius: 7px; padding: 2px 8px; font-size: 11px; color: #cfd3e0; }
.chip small { color: var(--tx2); font-size: 10px; }
.chip.c-atk { color: #ffb0a0; } .chip.c-def { color: #bfcbe6; } .chip.c-def2 { color: #bfcbe6; }
.chip.c-good { color: #9fe0b8; }
.e-buffs { display: flex; gap: 4px; flex-wrap: wrap; min-height: 18px; }
.e-sp { font-size: 10px; color: var(--tx2); line-height: 1.5; }

/* 血条 */
.bar { position: relative; height: 16px; background: rgba(0, 0, 0, .4); border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #c04b4b, #e0705e); transition: width .3s; }
.bar.ehp i { background: linear-gradient(90deg, #a83a3a, #d96a4a); }
.bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: #fff; text-shadow: 0 1px 3px #000; }

/* 玩家面板 + 出牌区 */
.bt-mid { display: flex; gap: 10px; flex-shrink: 0; }
.bt-player {
  flex: 1.2; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
.pp-top { display: flex; justify-content: space-between; align-items: center; }
.pp-name { font-weight: 800; letter-spacing: 2px; font-size: 14px; color: var(--gold2); }
.pp-san { font-size: 12px; color: #c9a8f5; }
.pp-san.warn { color: #f0b060; } .pp-san.danger { color: #ff7a6e; animation: blink .8s infinite; }
@keyframes blink { 50% { opacity: .4; } }
.pp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-buffs { display: flex; gap: 5px; flex-wrap: wrap; min-height: 20px; }
.pp-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.fchip { font-size: 10px; color: var(--gold2); border: 1px dashed rgba(217, 179, 108, .4); border-radius: 6px; padding: 1px 6px; }
.fchip.f-bad { color: #d886f0; border-color: rgba(216, 134, 240, .4); }
.nohint { font-size: 11px; color: var(--tx2); }

/* 词条小徽章 */
.bchip {
  display: inline-flex; align-items: center; gap: 3px; border-radius: 7px; padding: 1px 6px;
  font-size: 11px; cursor: pointer; border: 1px solid transparent;
}
.bchip b { font-size: 11px; }
.bchip.b-mad { background: rgba(224, 86, 86, .18); color: #ff9b8a; border-color: rgba(224, 86, 86, .35); }
.bchip.b-pain { background: rgba(217, 164, 65, .18); color: #f0c070; border-color: rgba(217, 164, 65, .35); }
.bchip.b-clarity { background: rgba(111, 182, 255, .16); color: #9ccfff; border-color: rgba(111, 182, 255, .3); }
.bchip.b-conf { background: rgba(176, 133, 245, .18); color: #cfa8ff; border-color: rgba(176, 133, 245, .35); }
.bchip.b-vuln { background: rgba(224, 86, 110, .16); color: #ff9bb0; border-color: rgba(224, 86, 110, .3); }
.bchip.b-rend { background: rgba(240, 120, 80, .16); color: #ffb090; border-color: rgba(240, 120, 80, .3); }
.bchip.b-mutil { background: rgba(150, 150, 170, .2); color: #c5c8d8; border-color: rgba(150, 150, 170, .35); }
.bchip.b-poison { background: rgba(120, 200, 120, .16); color: #a0e8a0; border-color: rgba(120, 200, 120, .3); }
.bchip.b-blood { background: rgba(200, 40, 60, .25); color: #ff8f9f; border-color: rgba(200, 40, 60, .5); }
.bchip.b-stealth { background: rgba(120, 130, 160, .25); color: #d0d8f0; border-color: rgba(120, 130, 160, .5); }

/* 出牌投掷区 */
.bt-drop {
  flex: 1; border: 1.5px dashed rgba(217, 179, 108, .35); border-radius: var(--r);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--tx2); font-size: 12px; transition: all .15s; min-width: 90px; text-align: center; padding: 6px;
}
.bt-drop b { color: rgba(217, 179, 108, .6); font-size: 13px; letter-spacing: 1px; }
.bt-drop.dragging { border-color: var(--gold); background: rgba(217, 179, 108, .1); box-shadow: inset 0 0 30px rgba(217, 179, 108, .1); }
.bt-drop.hastarget b { color: var(--gold); }

/* 遗物区 */
.bt-relics { display: flex; gap: 8px; align-items: center; overflow-x: auto; flex-shrink: 0; min-height: 40px; padding: 2px; }
.relic {
  width: 38px; height: 38px; border-radius: 11px; background: var(--panel); border: 1px solid var(--rc, var(--line));
  display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
  color: var(--rc, var(--tx)); font-size: 15px; font-weight: 800; flex-shrink: 0; transition: all .15s;
}
.relic:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 40%, transparent); }
.relic.cding { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.relic .rcd {
  position: absolute; right: -4px; top: -4px; background: #3a4258; color: #cfd3e0;
  font-size: 10px; border-radius: 8px; padding: 0 5px; border: 1px solid var(--line);
}

/* 手牌区 */
.bt-hands { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.handrow { display: flex; gap: 8px; flex: 1; min-height: 0; position: relative; }
.handrow.canroll::after {
  content: ''; position: absolute; right: -2px; top: 6px; bottom: 6px; width: 24px;
  background: linear-gradient(90deg, transparent, rgba(11, 14, 22, .92)); pointer-events: none;
  border-radius: 0 10px 10px 0; animation: hintFade .4s;
}
@keyframes hintFade { from { opacity: 0; } }
.hhead {
  width: 34px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
}
.hhead b { writing-mode: vertical-lr; letter-spacing: 4px; font-size: 12px; color: var(--fc); }
.hhead .orb {
  width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7db8ff, #2456a8);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff;
  box-shadow: 0 0 10px rgba(88, 166, 255, .4);
}
.hhead .orb.full { background: radial-gradient(circle at 35% 30%, #ffe9a8, #c89b52); box-shadow: 0 0 12px rgba(217, 179, 108, .5); }
.hcards {
  flex: 1; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none;
}
.hcards::-webkit-scrollbar { display: none; }

/* 卡牌 */
.card {
  width: 84px; min-width: 84px; height: 106px; border-radius: 12px; position: relative;
  background: linear-gradient(165deg, color-mix(in srgb, var(--fc) 16%, #161c2a), #10141f 70%);
  border: 1px solid color-mix(in srgb, var(--fc) 55%, transparent);
  padding: 8px 7px; cursor: grab; touch-action: pan-x; flex-shrink: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, opacity .2s;
  animation: dealIn .3s backwards;
}
@keyframes dealIn { from { opacity: 0; transform: translateY(18px) scale(.9); } }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.card.t-attack { --tagc: #ff9b8a; }
.card.t-skill { --tagc: #9ccfff; }
.card.t-curse { --tagc: #a0a4b8; filter: saturate(.6); }
.card.noenergy { opacity: .55; }
.card.disabled { opacity: .4; filter: grayscale(1); }
.c-cost {
  position: absolute; top: -6px; left: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7db8ff, #2456a8); border: 2px solid #0d1119;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff;
}
.c-cost.lack { background: radial-gradient(circle at 35% 30%, #ff9b8a, #a83a3a); }
.c-name { font-size: 12.5px; font-weight: 700; margin-top: 12px; color: var(--tx); line-height: 1.3; }
.c-name em { font-style: normal; color: var(--gold); font-size: 10px; }
.c-tag { margin-top: auto; font-size: 10px; color: var(--tagc, var(--tx2)); }
.c-dis { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ff9b8a; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.45); border-radius: 12px; }

/* 卡牌详情浮层 */
.cardov { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bigcard {
  width: 200px; border-radius: 16px; padding: 18px 16px 14px; text-align: center; position: relative;
  background: linear-gradient(165deg, color-mix(in srgb, var(--fc) 20%, #161c2a), #10141f 75%);
  border: 1.5px solid var(--fc); box-shadow: 0 14px 44px rgba(0, 0, 0, .6);
}
.bc-cost { font-size: 22px; font-weight: 800; color: #7db8ff; }
.bc-cost small { font-size: 11px; color: var(--tx2); margin-left: 3px; }
.bc-name { font-size: 19px; font-weight: 800; margin: 8px 0 4px; letter-spacing: 1px; }
.bc-name em { font-style: normal; color: var(--gold); font-size: 12px; }
.bc-tag { font-size: 11px; color: var(--tx2); }
.bc-desc { font-size: 13px; line-height: 1.8; color: #cfd3e0; margin-top: 12px; min-height: 60px; }
.bc-temp { margin-top: 8px; font-size: 10px; color: var(--purple); }
.cov-targets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.cov-targets > span { color: var(--tx2); font-size: 12px; }
.tbtn {
  background: var(--panel2); color: var(--tx); border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.tbtn.sel { border-color: var(--gold); color: var(--gold2); }

/* 战斗日志 */
.bt-log {
  flex-shrink: 0; font-size: 11px; color: var(--tx2); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; height: 52px; overflow-y: auto; line-height: 1.6;
}

/* 规则文档 */
.rules-doc h4 { color: var(--gold2); margin: 14px 0 6px; font-size: 14px; }
.rules-doc p { margin-bottom: 6px; font-size: 13px; }
.rules-doc b { color: var(--gold); }

/* 遗物列表 */
.reliclist { display: flex; flex-direction: column; gap: 10px; }
.rli { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.rli-ic {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--rc); border: 1px solid var(--rc); background: color-mix(in srgb, var(--rc) 10%, transparent);
}
.rli-tx b { color: var(--rc); font-size: 14px; }
.rli-tx p { font-size: 12px; color: var(--tx2); line-height: 1.6; margin-top: 3px; }
.rli-tx i { font-style: normal; font-size: 10px; margin-left: 8px; border-radius: 6px; padding: 1px 7px; }
.cdtag { background: rgba(176, 133, 245, .15); color: #cfa8ff; }
.rdtag { background: rgba(95, 191, 122, .15); color: #9fe0b8; }

/* 牌库浏览 */
.ftabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.ftab {
  background: var(--panel); border: 1px solid var(--line); color: var(--tx2); border-radius: 9px;
  padding: 6px 14px; font-size: 13px; cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.ftab.on { border-color: var(--fc); color: var(--fc); font-weight: 700; }
.fintro { font-size: 12.5px; color: var(--tx2); border-left: 3px solid var(--fc); padding-left: 10px; margin-bottom: 12px; line-height: 1.7; }
.deckgrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.deckcard { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--fc); border-radius: 10px; padding: 8px 12px; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; align-items: start; }
.dc-cost { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7db8ff, #2456a8); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; margin-top: 2px; }
.dc-name { font-weight: 700; font-size: 14px; }
.dc-name i { font-style: normal; font-size: 10px; margin-left: 8px; border-radius: 6px; padding: 1px 6px; }
.fixtag { background: rgba(217, 179, 108, .15); color: var(--gold); }
.upgtag { background: rgba(95, 191, 122, .15); color: #9fe0b8; }
.dc-tag { grid-column: 2; font-size: 10.5px; color: var(--tx2); }
.dc-desc { grid-column: 1 / -1; font-size: 12px; color: var(--tx2); line-height: 1.65; }
.dc-up { grid-column: 1 / -1; font-size: 11px; color: var(--gold); }
.upcard.maxed { opacity: .55; }
.curse-sec h4 { color: #a0a4b8; font-size: 13px; margin: 16px 0 8px; }

/* ============ 奖励流程（选牌系 → 强化卡牌） ============ */
.rw-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; font-size: 12px; color: var(--tx2); }
.rw-steps i { width: 30px; height: 1px; background: var(--line); }
.rw-steps span { padding: 4px 14px; border-radius: 20px; border: 1px solid var(--line); white-space: nowrap; }
.rw-steps span.on { color: var(--gold2); border-color: var(--gold); background: rgba(217, 179, 108, .1); box-shadow: 0 0 12px rgba(217, 179, 108, .2); }
.rw-steps span.done { color: #9fe0b8; border-color: rgba(95, 191, 122, .45); }

.rw-facpick { display: flex; gap: 14px; margin: 6px 0 4px; }
.rw-faccard {
  flex: 1; min-width: 0; border: 1.5px solid var(--fc); border-radius: 18px; padding: 22px 14px 16px;
  text-align: center; cursor: pointer; position: relative;
  background: linear-gradient(170deg, color-mix(in srgb, var(--fc) 16%, #161c2a), #10141f 78%);
  transition: transform .16s, box-shadow .16s; animation: relicPop .5s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.rw-faccard:nth-child(2) { animation-delay: .12s; }
.rw-faccard:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--fc), 0 14px 34px color-mix(in srgb, var(--fc) 32%, transparent); }
.rw-faccard:active { transform: translateY(-1px) scale(.97); }
.rwf-up {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #241a08;
  background: linear-gradient(160deg, #e8c98a, #c89b52); border-radius: 10px; padding: 2px 14px;
}
.rwf-name { font-size: 30px; font-weight: 800; color: var(--fc); letter-spacing: 6px; text-indent: 6px; }
.rwf-role { color: var(--tx2); font-size: 12px; margin: 8px 0 14px; }
.rwf-cta {
  font-size: 14px; font-weight: 700; color: var(--gold2); border-top: 1px dashed var(--line); padding-top: 12px;
  animation: ctaNudge 1.4s ease-in-out infinite;
}
@keyframes ctaNudge { 0%, 100% { transform: translateX(0); opacity: .85; } 50% { transform: translateX(6px); opacity: 1; } }
.rw-done { font-size: 16px; }
.rw-done b { color: var(--gold2); font-size: 22px; }
.rw-steps { flex-wrap: wrap; }
@media (max-width: 420px) {
  .rw-steps { gap: 6px; }
  .rw-steps i { width: 14px; }
  .rw-steps span { padding: 3px 9px; font-size: 11px; }
  .rw-facpick { gap: 10px; }
  .rwf-name { font-size: 24px; letter-spacing: 4px; }
  .rwf-cta { font-size: 12px; }
}

/* 强化5选1 */
.upgrid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.upcard { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.upcard:hover { border-color: var(--fc); box-shadow: 0 0 0 1px var(--fc), 0 8px 20px color-mix(in srgb, var(--fc) 22%, transparent); transform: translateY(-2px); }
.upcard:active { transform: scale(.98); }
.upcard.maxed { opacity: .55; cursor: not-allowed; }
.upcard.maxed:hover { box-shadow: none; transform: none; border-color: var(--line); }
.dc-pick {
  font-size: 10px; font-weight: 700; color: var(--gold2); border: 1px solid rgba(217, 179, 108, .55);
  border-radius: 6px; padding: 1px 8px; margin-left: 8px; animation: blink 1.6s infinite;
}
.upcard.maxed .dc-pick { color: var(--tx2); border-color: var(--line); animation: none; }

/* 遗物揭晓 */
.relic-reveal { text-align: center; padding: 18px 0 6px; }
.rr-icon {
  width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800; color: var(--rc); border: 2px solid var(--rc);
  background: color-mix(in srgb, var(--rc) 12%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--rc) 40%, transparent);
  animation: relicPop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes relicPop { from { transform: scale(.3) rotate(-14deg); opacity: 0; } }
.rr-name { font-size: 18px; font-weight: 800; color: var(--rc); margin-bottom: 8px; }
.rr-desc { font-size: 13px; color: #cfd3e0; line-height: 1.8; }
.rr-cd { font-size: 11px; color: var(--tx2); margin-top: 8px; }

/* 终局 */
.finalwin { text-align: center; padding: 26px 0 10px; }
.fw-t1 {
  font-size: 64px; font-weight: 900; letter-spacing: 26px; text-indent: 26px;
  background: linear-gradient(180deg, #ffe9b0, #c89b52); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: relicPop .7s cubic-bezier(.2, 1.4, .4, 1);
}
.fw-t2 { color: var(--tx2); letter-spacing: 3px; margin-top: 12px; font-size: 13px; }
.fw-stats { margin-top: 16px; font-size: 12.5px; color: #cfd3e0; line-height: 1.8; }

/* 教程 */
.tut-step { text-align: right; color: var(--tx2); font-size: 11px; margin-bottom: -8px; }
.tut-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.tut-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .2s; }
.tut-dots i.on { background: var(--gold); width: 18px; border-radius: 4px; }
/* 教程翻页：仅内容淡入，弹窗卡片保持不动 */
.tut .mbody.swap { animation: tutSwap .18s ease; }
@keyframes tutSwap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* 新手实战：教练提示条 */
.bt-tut {
  display: none; max-width: 1100px; width: 100%; margin: 0 auto 6px;
  background: linear-gradient(170deg, #232c42, #161c2b);
  border: 1px solid var(--gold); border-radius: 12px; padding: 9px 14px;
  font-size: 12.5px; color: var(--gold2); line-height: 1.6; text-align: center;
}
.bt-tut.on { display: block; animation: tutSwap .25s ease; }

/* 属性商城 */
.shop-list { text-align: left; }
.shop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 8px; background: var(--panel);
}
.shop-row b { color: var(--gold2); }
.shop-row small { color: var(--tx2); }
.sr-info { flex: 1; }
.sr-desc { font-size: 12px; color: var(--tx2); margin-top: 3px; }
.sr-buy { flex-shrink: 0; }
.sr-max { color: var(--tx2); font-size: 12px; }

/* ============ 矮屏手机适配 ============ */
@media (max-height: 700px) {
  .card { width: 74px; min-width: 74px; height: 94px; padding: 6px; }
  .c-name { font-size: 11px; margin-top: 9px; }
  .bt-enemies { min-height: 102px; }
  .enemy { min-width: 132px; }
  .bt-log { height: 38px; }
  .bt-player { padding: 8px 10px; gap: 5px; }
}

/* ============ PC 宽屏适配 ============ */
@media (min-width: 860px) {
  .fac-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 10px 24px; }
  .lv-grid { grid-template-columns: repeat(8, 1fr); padding: 4px 24px 30px; }
  .bt-enemies { justify-content: center; }
  .enemy { max-width: 250px; min-width: 180px; }
  .bt-mid { max-width: 1100px; width: 100%; margin: 0 auto; }
  .card { width: 96px; min-width: 96px; height: 122px; }
  .bt-hands { max-width: 1100px; width: 100%; margin: 0 auto; }
  .bt-relics, .bt-top, .bt-log, .bt-tut { max-width: 1100px; width: 100%; margin: 0 auto; }
  .deckgrid { grid-template-columns: repeat(2, 1fr); }
  .upgrid { grid-template-columns: repeat(2, 1fr); }
  .home-menu { width: 340px; }
}
@media (min-width: 1200px) {
  .fac-grid { grid-template-columns: repeat(3, 1fr); }
}