/* ============================================================
 * 修仙答题 · 水墨青绿修仙风
 * 移动端优先（375px 起步），桌面在 @media (min-width:768px) 扩展
 * ============================================================ */

:root {
  --ink: #22332b;            /* 墨色 */
  --ink-soft: #4c6657;
  --pine: #2f5d46;           /* 松绿（主色） */
  --pine-deep: #1f4332;
  --jade: #6fa98a;           /* 玉青 */
  --jade-light: #a8cbbb;
  --mist: #eef3ec;           /* 云雾底 */
  --paper: #f7f4ec;          /* 宣纸 */
  --paper-warm: #fdfcf7;
  --gold: #c9a227;
  --silver: #9aa5ad;
  --bronze: #b0793f;
  --red-seal: #a83b2c;       /* 印章红 */
  --shadow: rgba(31, 67, 50, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(111,169,138,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(47,93,70,.10), transparent 55%),
    var(--mist);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
}

/* 云纹装饰（背景层） */
.clouds {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cpath d='M0 160 q40 -40 90 -10 t110 -20 t120 10 t130 -25 t150 20 v45 h-600 z' fill='%236fa98a' opacity='.12'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 600px 140px;
}

#app { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 14px 14px 30px; }

/* ---------- 顶部个人修为条 ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--pine-deep), var(--pine));
  color: #f0f6ef;
  border-radius: 14px 14px 4px 4px;
  padding: 10px 14px;
  box-shadow: 0 4px 14px var(--shadow);
}
.topbar .realm-badge {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  background: radial-gradient(circle at 35% 30%, #b8d9c2, var(--jade) 70%, var(--pine-deep));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 0 10px rgba(255,255,255,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.topbar .who { flex: 1; min-width: 0; }
.topbar .who .nm { font-size: 16px; font-weight: 700; }
.topbar .who .sub { font-size: 12px; color: #cfe3d6; }
.topbar .exp { text-align: right; font-size: 12px; color: #e6efea; }
.topbar .exp b { display: block; font-size: 15px; color: #fff; }
.topbar .act { font-size: 20px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.topbar .act:hover { background: rgba(255,255,255,.15); }

/* ---------- 通用卡片与按钮 ---------- */
.card {
  background: var(--paper-warm);
  border: 1px solid rgba(47,93,70,.18);
  border-radius: 12px;
  box-shadow: 0 2px 10px var(--shadow);
  padding: 16px;
}
.card + .card { margin-top: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px;
  border-radius: 10px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--pine), var(--pine-deep));
  box-shadow: 0 3px 8px var(--shadow);
  transition: transform .1s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); filter: brightness(.94); }
.btn.block { width: 100%; }
.btn.ghost {
  background: transparent; color: var(--pine);
  border: 1.5px solid var(--jade);
  box-shadow: none;
}
.btn.seal {                                 /* 印章式按钮 */
  background: transparent; color: var(--red-seal);
  border: 2px solid var(--red-seal);
  border-radius: 8px; letter-spacing: 2px; font-weight: 700;
  box-shadow: none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 登录页 ---------- */
.login-wrap { padding-top: 34px; text-align: center; }
.login-title { font-size: 26px; letter-spacing: 6px; color: var(--pine-deep); font-weight: 800; }
.login-sub { font-size: 13px; color: var(--ink-soft); margin: 4px 0 22px; letter-spacing: 3px; }
.login-seal {
  width: 74px; height: 74px; margin: 0 auto 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; font-weight: 800; letter-spacing: 4px;
  background: var(--red-seal);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.28);
  transform: rotate(-4deg);
}
.form-row { margin-bottom: 14px; text-align: left; }
.form-row label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid var(--jade); background: #fff; color: var(--pine);
  font-size: 14px; cursor: pointer; transition: all .15s;
}
.chip.on { background: var(--pine); color: #fff; border-color: var(--pine); }

/* 登录：姓名下拉框 + 密码输入框 */
.sel, .inp {
  width: 100%; min-height: 44px; box-sizing: border-box;
  border: 1.5px solid var(--jade); border-radius: 10px;
  background: #fff; color: var(--pine);
  font-size: 16px; padding: 0 12px; outline: none;
  font-family: inherit;
}
.sel:focus, .inp:focus { border-color: var(--pine); box-shadow: 0 0 0 2px rgba(47,93,70,.12); }
.inp::placeholder { color: var(--ink-soft); opacity: .7; }

/* ---------- 主界面三入口 ---------- */
.entry-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 560px) { .entry-grid { grid-template-columns: repeat(3, 1fr); } }
.entry {
  position: relative; overflow: hidden;
  border-radius: 14px; min-height: 150px; padding: 18px 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 16px var(--shadow);
  transition: transform .15s ease;
}
.entry:active { transform: scale(.98); }
.entry .t { font-size: 20px; font-weight: 800; letter-spacing: 2px; }
.entry .d { font-size: 12.5px; opacity: .92; margin-top: 4px; }
.entry.tower { background: linear-gradient(160deg, #33594a, #203f30 75%); }
.entry.secret { background: linear-gradient(160deg, #3f6a63, #22433f 75%); }
.entry.quiz { background: linear-gradient(160deg, #6d5f38, #3d3420 75%); }
.entry .glyph {
  position: absolute; top: -14px; right: -8px; font-size: 76px; opacity: .18; line-height: 1;
}

/* 底部功能入口 */
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.menu-item {
  text-align: center; padding: 10px 4px; border-radius: 12px;
  background: var(--paper-warm); border: 1px solid rgba(47,93,70,.16);
  cursor: pointer; font-size: 12px; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.menu-item .ico { font-size: 22px; line-height: 1; }
.menu-item.on, .menu-item:active { background: var(--pine); color: #fff; }

/* ---------- 通用页头 ---------- */
.page-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.page-head h2 { font-size: 20px; color: var(--pine-deep); letter-spacing: 2px; flex: 1; }
.back-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--jade); background: #fff; color: var(--pine);
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.muted { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 石碑 / 秘境列表 ---------- */
.stone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .stone-grid { grid-template-columns: repeat(4, 1fr); } }
.stone {
  border-radius: 12px; padding: 14px 10px; text-align: center;
  background: linear-gradient(160deg, #e9efe6, #d5e2d2);
  border: 1px solid rgba(47,93,70,.22);
  cursor: pointer; position: relative;
  transition: transform .12s ease;
}
.stone:active { transform: translateY(1px); }
.stone .num { font-size: 12px; color: var(--jade); font-weight: 700; }
.stone .nm { font-size: 14px; font-weight: 700; color: var(--pine-deep); margin-top: 2px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.stone .bk { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.stone.locked {
  background: repeating-linear-gradient(45deg, #e3e0d6, #e3e0d6 8px, #ece9e0 8px, #ece9e0 16px);
  color: #8a877c; cursor: not-allowed; filter: grayscale(.5);
}
.stone.locked .nm { color: #7b7a72; }
.stone .lock-ico { font-size: 18px; display: block; }
.stone.done::after { /* 已通关标记（预留） */
  content: "✓"; position: absolute; top: 4px; right: 8px; color: var(--pine); font-weight: 800;
}

/* ---------- 答题界面 ---------- */
.quiz-panel .q-meta { display: flex; gap: 8px; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; flex-wrap: wrap; }
.quiz-panel .q-meta .tag {
  background: #e7efe8; color: var(--pine); padding: 2px 10px; border-radius: 20px; font-size: 12px;
}
.quiz-panel .question { font-size: 17px; font-weight: 600; line-height: 1.7; margin-bottom: 16px; }
.multi-badge {
  display: inline-block; background: #f5e9d2; color: #8a6136; border: 1px solid #dcc08a;
  border-radius: 4px; padding: 0 8px; font-size: 13px; font-weight: 700;
  margin-right: 8px; vertical-align: 2px; line-height: 1.6;
}
.options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.opt {
  display: flex; gap: 10px; align-items: center;
  min-height: 52px; padding: 10px 14px;
  border: 1.5px solid rgba(47,93,70,.3); border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 15px;
  transition: all .12s;
}
.opt .letter {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: var(--mist); color: var(--pine);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.opt.right { border-color: var(--pine); background: #e4f0e6; }
.opt.right .letter { background: var(--pine); color: #fff; }
.opt.on { border-color: var(--pine); background: #e4f0e6; }
.opt.on .letter { background: var(--pine); color: #fff; }
.opt.wrong { border-color: var(--red-seal); background: #f7e5e0; }
.opt.wrong .letter { background: var(--red-seal); color: #fff; }
.opt.dim { opacity: .45; }
.opt:disabled { cursor: default; }
.answer-box {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: #f2f6ef; border-left: 4px solid var(--jade); font-size: 14px;
}
.answer-box .right-txt { color: var(--pine); font-weight: 700; }
.answer-box .wrong-txt { color: var(--red-seal); font-weight: 700; }
.next-bar { display: flex; gap: 10px; margin-top: 16px; }
.next-bar .btn { flex: 1; }
.progress {
  height: 6px; border-radius: 3px; background: #dce6db; overflow: hidden; margin: 6px 0 16px;
}
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), var(--pine)); transition: width .25s; }
.streak-pill {
  display: inline-block; background: var(--pine-deep); color: #d8e9dc;
  padding: 3px 12px; border-radius: 20px; font-size: 12.5px; margin-left: 8px;
}

/* 修炼历史 */
.h-card .question { margin: 10px 0; }
.h-opt {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--jade);
  background: rgba(255,255,255,.72); margin-bottom: 6px;
  font-size: 14px; color: var(--ink);
}
.h-opt .letter { font-weight: 700; color: var(--pine); flex: 0 0 auto; }

/* 计时器 */
.timer {
  text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 2px;
  color: var(--pine-deep); margin: 4px 0 10px; font-variant-numeric: tabular-nums;
}
.timer.warn { color: var(--red-seal); }

/* ---------- 榜单 ---------- */
.rank-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.rank-tabs .tab {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 20px; font-size: 13px;
  border: 1.5px solid var(--jade); color: var(--pine); background: #fff; cursor: pointer;
}
.rank-tabs .tab.on { background: var(--pine); color: #fff; }
.rank-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: #fff;
  border: 1px solid rgba(47,93,70,.12); margin-top: 8px;
}
.rank-item.me { outline: 2px solid var(--gold); outline-offset: 1px; }
.rank-no { width: 30px; text-align: center; font-weight: 800; color: var(--ink-soft); }
.rank-item.r1 { background: linear-gradient(120deg, #faf3d8, #fdf8e7); border-color: var(--gold); }
.rank-item.r1 .rank-no { color: var(--gold); font-size: 18px; }
.rank-item.r2 { background: linear-gradient(120deg, #eef2f3, #f6f9fa); border-color: var(--silver); }
.rank-item.r2 .rank-no { color: var(--silver); font-size: 17px; }
.rank-item.r3 { background: linear-gradient(120deg, #f6ecdf, #fbf3e8); border-color: var(--bronze); }
.rank-item.r3 .rank-no { color: var(--bronze); font-size: 16px; }
.rank-info { flex: 1; min-width: 0; }
.rank-info .nm { font-weight: 700; font-size: 14.5px; }
.rank-info .sub { font-size: 12px; color: var(--ink-soft); }
.rank-val { font-weight: 800; color: var(--pine); font-size: 15px; }

/* ---------- 成就殿堂 ---------- */
.achi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 600px) { .achi-grid { grid-template-columns: repeat(5, 1fr); } }
.achi {
  border-radius: 12px; padding: 12px 8px; text-align: center;
  background: linear-gradient(160deg, #f6f8f3, #e8efe6);
  border: 1px solid rgba(47,93,70,.18);
}
.achi .ico { font-size: 26px; line-height: 1.3; }
.achi .nm { font-size: 12.5px; font-weight: 700; margin-top: 4px; color: var(--pine-deep); }
.achi .desc { font-size: 11px; color: var(--ink-soft); margin-top: 2px; min-height: 28px; }
.achi.locked { filter: grayscale(1); opacity: .5; background: #eceae4; }

/* ---------- 宠物 ---------- */
.pet-card {
  border-radius: 12px; padding: 14px;
  background: linear-gradient(160deg, #eef5ef, #ddeae0);
  border: 1px solid rgba(47,93,70,.2);
  margin-top: 10px; position: relative;
}
.pet-card .head { display: flex; align-items: center; gap: 12px; }
.pet-figure {
  width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--jade-light) 70%);
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  border: 1.5px solid rgba(47,93,70,.25);
}
.pet-card .nm { font-weight: 800; font-size: 16px; color: var(--pine-deep); }
.pet-card .meta { font-size: 12px; color: var(--ink-soft); }
.pet-card .dead { filter: grayscale(1); opacity: .55; }
.rarity { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--pine); color: #fff; margin-left: 6px; }
.rarity.SSS { background: #7a4db8; }
.rarity.SS { background: #b3564a; }
.rarity.S { background: #b08a1e; }
.rarity.A { background: #4f7fb0; }
.intimacy-bar { height: 8px; border-radius: 4px; background: #d3e0d4; overflow: hidden; margin-top: 6px; }
.intimacy-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade-light), var(--jade)); }
.intimacy-bar.ult i { background: linear-gradient(90deg, #e0c35c, var(--gold)); }

.gacha-result { text-align: center; padding: 18px 10px; }
.gacha-result .big { font-size: 30px; margin-bottom: 6px; }
.gacha-result .nm { font-size: 18px; font-weight: 800; color: var(--pine-deep); }
.gacha-result .sub { font-size: 13px; color: var(--ink-soft); }
.gacha-result .rarity-big { font-size: 12px; letter-spacing: 2px; color: var(--gold); font-weight: 700; }

/* ---------- 弹窗 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20,32,26,.55); display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--paper-warm); border-radius: 14px; max-width: 400px; width: 100%;
  padding: 20px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.3);
  max-height: 84vh; overflow-y: auto;
}
.modal h3 { color: var(--pine-deep); margin-bottom: 10px; letter-spacing: 1px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }

/* ---------- 提示 toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 30px; z-index: 80;
  background: var(--pine-deep); color: #eef4ee;
  padding: 10px 22px; border-radius: 24px; font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); max-width: 86vw; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.toast.show { opacity: 1; }

/* ---------- 小部件 ---------- */
.hr { border: none; border-top: 1px dashed rgba(47,93,70,.25); margin: 14px 0; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex.between { justify-content: space-between; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.center { text-align: center; }
.big-num { font-size: 22px; font-weight: 800; color: var(--pine-deep); }

/* KaTeX 适配（公式字号与行距） */
.katex { font-size: 1.08em; }
.question .katex-display { margin: 8px 0; overflow-x: auto; overflow-y: hidden; }

/* 空态 */
.empty { text-align: center; padding: 34px 10px; color: var(--ink-soft); font-size: 14px; }

/* ============ 角色形象（境界道人，服饰随境界升级） ============ */
.role-stage { display:flex; justify-content:center; padding:2px 0 0; }
.role-stage.small .role-figure { transform:scale(.82); }
.role-figure { position:relative; width:112px; height:150px; margin:0 auto; }
.role-figure .halo { position:absolute; left:50%; top:34px; width:98px; height:98px; transform:translateX(-50%); border-radius:50%; background:var(--halo, transparent); filter:blur(7px); pointer-events:none; animation:haloPulse 3s ease-in-out infinite; }
@keyframes haloPulse { 0%,100%{opacity:.5; transform:translateX(-50%) scale(.96);} 50%{opacity:.9; transform:translateX(-50%) scale(1.08);} }
.role-figure .role-head { position:absolute; left:50%; top:24px; transform:translateX(-50%); width:46px; height:48px; border-radius:46% 46% 42% 42%; background:#e8c9a8; z-index:3; box-shadow:inset -6px -4px 10px rgba(0,0,0,.08); }
.role-figure .bun { position:absolute; left:50%; top:-18px; transform:translateX(-50%); width:24px; height:20px; border-radius:50% 50% 42% 42%; background:#2e2a26; }
.role-figure .bun::after { content:""; position:absolute; left:50%; top:-7px; transform:translateX(-50%); width:6px; height:9px; border-radius:4px; background:#2e2a26; }
.role-figure .face { position:absolute; inset:0; }
.role-figure .eye { position:absolute; top:22px; width:4px; height:5px; border-radius:50%; background:#3a2e26; }
.role-figure .eye.l { left:12px; } .role-figure .eye.r { right:12px; }
.role-figure .mouth { position:absolute; left:50%; top:32px; transform:translateX(-50%); width:12px; height:5px; border-bottom:1.5px solid #b08a6a; border-radius:0 0 50% 50%; }
.role-figure .role-body { position:absolute; left:50%; top:68px; transform:translateX(-50%); width:80px; height:80px; background:linear-gradient(180deg, var(--cloth), var(--cloth)); clip-path:polygon(50% 0, 100% 14%, 88% 100%, 12% 100%, 0 14%); z-index:2; box-shadow:inset 0 -12px 18px rgba(0,0,0,.14); }
.role-figure .belt { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:100%; height:10px; background:var(--accent); opacity:.9; }
.role-figure .collar { position:absolute; left:50%; top:4px; transform:translateX(-50%); width:28px; height:26px; background:var(--accent); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity:.72; }
.role-figure .sleeve { position:absolute; top:10px; width:22px; height:54px; background:var(--cloth); z-index:1; }
.role-figure .sleeve.l { left:-8px; border-radius:60% 30% 40% 60%; transform:rotate(15deg); }
.role-figure .sleeve.r { right:-8px; border-radius:30% 60% 60% 40%; transform:rotate(-15deg); }
.role-figure .role-feet { position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:36px; height:11px; border-radius:9px; background:#3a2e26; z-index:1; }
.role-figure .role-weapon { position:absolute; right:-6px; top:66px; z-index:5; text-align:center; }
.role-figure .role-weapon .wicon { font-size:26px; display:block; line-height:1; }
.role-figure .role-weapon .wlv { font-size:9px; color:var(--ink-soft); background:#fdfcf7; border:1px solid var(--jade-light); border-radius:6px; padding:0 4px; white-space:nowrap; }
.role-figure .role-weapon.none { opacity:.5; }
/* 武器升级特效：等级越高越有视觉冲击 */
.role-figure .role-weapon.wfx2 .wicon { animation:fxGlow 2s ease-in-out infinite; }
.role-figure .role-weapon.wfx3 .wicon { animation:fxFloat 1.8s ease-in-out infinite; text-shadow:0 0 8px var(--accent,#ffd700); }
.role-figure .role-weapon.wfx4 .wicon { animation:fxBurst 1.2s ease-in-out infinite; }
.role-figure .role-weapon.wfx5 .wicon { animation:fxDivine .9s ease-in-out infinite; }
@keyframes fxGlow { 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.12); opacity:.85;} }
@keyframes fxFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
@keyframes fxBurst { 0%,100%{filter:drop-shadow(0 0 4px var(--accent,#8fa8ff));} 50%{filter:drop-shadow(0 0 18px var(--accent,#8fa8ff));} }
@keyframes fxDivine { 0%,100%{filter:drop-shadow(0 0 6px #ffd700) drop-shadow(0 0 16px #fff);} 50%{filter:drop-shadow(0 0 16px #ffd700) drop-shadow(0 0 34px #fff);} }

/* ============ 锻造台 ============ */
.mat-list { display:flex; flex-wrap:wrap; gap:6px; }
.mat-chip { background:var(--paper-warm); border:1px solid var(--jade-light); border-radius:999px; padding:2px 10px; font-size:12px; color:var(--pine); }
.mat-chip.zero { opacity:.4; }
.forge-row { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px dashed rgba(47,93,70,.16); }
.forge-row:last-child { border-bottom:none; }
.forge-row.equipped { background:rgba(201,162,39,.1); border-radius:8px; padding:8px; }
.forge-row .wico { font-size:22px; width:32px; text-align:center; flex:0 0 32px; }
.muted.small { font-size:11px; }
.btn.small { padding:4px 10px; font-size:12px; }

/* ============ 抽卡奖池 ============ */
.pool-head { cursor:pointer; }
.pool-line { display:flex; align-items:center; gap:6px; margin:5px 0; flex-wrap:wrap; }
.pool-name { font-size:12px; color:var(--ink-soft); }

/* ============ 跟随灵宠（在主人身边） ============ */
.follow-pet-slot { position:absolute; left:-34px; bottom:6px; z-index:6; pointer-events:none; }
.follow-pet { display:flex; flex-direction:column; align-items:center; font-size:30px; line-height:1; filter:drop-shadow(0 2px 5px rgba(0,0,0,.28)); animation:fpFloat 2.6s ease-in-out infinite; }
.follow-pet.dead { filter:grayscale(1); opacity:.55; }
.follow-pet .fp-name { font-size:9px; color:var(--ink-soft); background:#fdfcf7; border:1px solid var(--jade-light); border-radius:6px; padding:0 4px; white-space:nowrap; margin-top:2px; }
@keyframes fpFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
.btn.on { background:var(--jade); color:#fff; border-color:var(--jade); }