* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #fef3f2 0%, #eff6ff 100%); color: #1f2937; min-height: 100vh; }
.container { max-width: 480px; margin: 0 auto; padding: 12px; }
.screen { display: none; }
.screen.active { display: block; }

/* 菜单 */
.hero { text-align: center; padding: 18px 16px; background: #fff; border-radius: 18px;
  box-shadow: 0 6px 24px rgba(220,38,38,.08); margin-top: 10px; }
.hero .zh { font-size: 31px; color: #b08a96; font-family: "PingFang SC","Microsoft YaHei",serif; letter-spacing: 3px; }
.hero h1 { font-size: 20px; color: #5b4651; margin: 3px 0 3px; }
.hero .sub { font-size: 12.5px; color: #6b7280; margin-bottom: 10px; line-height: 1.4; }
.rules { margin-top: 12px; font-size: 12px; color: #8a8390; background: #faf6f4; border-radius: 12px; padding: 9px 11px; text-align: left; line-height: 1.45; }
.btn-primary { background: #cf8090; color: #fff; border: none; border-radius: 999px; padding: 13px 36px;
  font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-primary:active { transform: scale(.97); }
.btn-primary[disabled] { opacity: .45; cursor: not-allowed; }
.btn-small { background: #fff; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-small.on { background: #5a6ea8; color: #fff; border-color: #5a6ea8; }

/* 顶栏 */
.topbar { display: flex; gap: clamp(6px, 2vw, 10px); align-items: center; background: #fff; border-radius: 12px;
  padding: 8px 12px; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #5b4651;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); flex-wrap: wrap; }
.topbar span:first-child { margin-right: auto; }

/* 战斗 */
.enemy-row { display: flex; gap: 10px; justify-content: center; background: #fff; border-radius: 14px;
  padding: 14px 10px; box-shadow: 0 2px 10px rgba(0,0,0,.05); min-height: 96px; }
.enemy { text-align: center; width: clamp(52px, 16vw, 72px); transition: transform .15s; }
.enemy .face { font-size: 34px; line-height: 1.1; }
.enemy .nm { font-size: 11px; color: #6b7280; margin-top: 2px; }
.vs-line { text-align: center; font-size: 16px; margin: 8px 0; color: #9ca3af; }
.team-row { display: flex; gap: clamp(4px, 1.2vw, 6px); justify-content: center; min-height: 104px; }
.card { width: clamp(48px, 14.5vw, 86px); border-radius: 12px; padding: 8px 4px; text-align: center; background: #fff;
  border: 2px solid #e5e7eb; transition: transform .15s; touch-action: none; }
.card .hz { font-size: clamp(13px, 4vw, 20px); font-family: "PingFang SC","Microsoft YaHei",serif; font-weight: 700; }
.card .stars { font-size: 12px; letter-spacing: 1px; }
.card .st { font-size: 11px; }
.card .copies { font-size: 10px; color: #9ca3af; }
.card.tank { background: #d8ece6; border-color: #8fc8b8; color: #2f6f66; }
.card.atk  { background: #fbe6e1; border-color: #e8a895; color: #a85a48; }
.card.sup  { background: #ece9fb; border-color: #b8aee8; color: #5b4b9a; }
.card.dead, .enemy.dead { opacity: .25; filter: grayscale(1); }
.card.slot-empty { background: transparent; border-style: dashed; color: #b0a9b0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; min-height: 96px; }
.hpbar { height: 5px; background: #fee2e2; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.hpbar > div { height: 100%; background: #ef4444; border-radius: 3px; transition: width .2s; }
.team-hint { text-align: center; font-size: 11px; color: #9ca3af; margin-top: 8px; }
.battle-actions { text-align: center; margin-top: 14px; }
.shake { animation: shake .25s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.dmg-float { position: absolute; font-size: 14px; font-weight: 800; color: #dc2626;
  animation: rise .55s forwards; pointer-events: none; }
@keyframes rise { to { transform: translateY(-26px); opacity: 0; } }
/* 手感动画(均由动态加的 class/新建元素触发,可重复) */
.dmg-float.crit { font-size: 22px; color: #C8901E; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.card.dead, .enemy.dead { animation: deathpop .35s ease-out; }
@keyframes deathpop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(.9); } }
.starpop { animation: starpop .5s ease-out; }
@keyframes starpop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.combo-bar.combo-glow .combo-pill { animation: comboglow .7s ease-out; }
@keyframes comboglow { 0%,100% { box-shadow: 0 1px 4px rgba(0,0,0,.05); } 50% { box-shadow: 0 0 12px 2px #f0a93a; } }

/* 弹窗(招募/合成/报价) */
.modal-wrap { position: fixed; inset: 0; background: rgba(31,41,55,.45); display: flex;
  align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-wrap[hidden] { display: none; } /* 必须:author 的 display:flex 会压过 hidden 属性 */
.modal-card { background: #fff; border-radius: 16px; padding: 20px 16px; width: 100%; max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.modal-card h2 { font-size: 17px; color: #5b4651; text-align: center; margin-bottom: 10px; }
.modal-card .hint { font-size: 12px; color: #8a8390; text-align: center; margin-bottom: 10px; }
/* 新手情境引导:🐵 悟空小气泡(底部弹出,遮罩点空白关)。z-index 高于弹窗(50)/吐司(60) */
.coach-wrap { position: fixed; inset: 0; z-index: 120; background: rgba(31,41,55,.35);
  display: flex; align-items: flex-end; justify-content: center; padding: 0 14px calc(20px + env(safe-area-inset-bottom)); }
.coach-bubble { background: #fff; border: 2px solid #C8901E; border-radius: 18px; padding: 12px 14px;
  width: 100%; max-width: 380px; display: flex; gap: 10px; align-items: flex-start;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); animation: coachIn .26s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes coachIn { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.coach-av { font-size: 34px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.coach-body { flex: 1; min-width: 0; }
.coach-who { font-size: 12px; font-weight: 800; color: #C8901E; letter-spacing: .02em; }
.coach-text { font-size: 14px; color: #5b4651; line-height: 1.5; margin: 2px 0 9px; }
.coach-ok { background: #d98a3d; color: #fff; border: none; border-radius: 999px;
  padding: 7px 20px; font-size: 13px; font-weight: 700; cursor: pointer; }
.coach-ok:active { filter: brightness(.95); }
.qhz { font-size: 40px; text-align: center; font-family: "PingFang SC","Microsoft YaHei",serif; margin: 6px 0; }
.qrow { text-align: center; margin-bottom: 8px; }
.play { background: #6f86c4; color: #fff; border: none; border-radius: 8px; padding: 7px 16px;
  cursor: pointer; font-size: 13px; font-weight: 600; }
.play.playing { background: #4a5b92; }
.timerbar { height: 6px; background: #fef3c7; border-radius: 3px; overflow: hidden; margin: 10px 0; }
.timerbar > div { height: 100%; background: #f59e0b; width: 100%; }
.timerbar.running > div { transition-property: width; transition-timing-function: linear; width: 0; }
.opts { display: grid; gap: 8px; }
.opt { background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 10px; padding: 12px;
  font-size: 15px; cursor: pointer; text-align: center; }
.opt.zh { font-size: 20px; font-family: "PingFang SC","Microsoft YaHei",serif; }
.opt.correct { background: #d1fae5; border-color: #10b981; color: #065f46; }
.opt.wrong { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.opt:disabled { cursor: default; }
.feedback { text-align: center; font-size: 14px; font-weight: 700; min-height: 22px; margin-top: 10px; }
.feedback.ok { color: #059669; }
.feedback.no { color: #dc2626; }

/* 报价卡 */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.offer { border: 2px solid #e5e7eb; border-radius: 12px; padding: 10px 6px; text-align: center;
  background: #f9fafb; cursor: pointer; }
.offer .hz { font-size: 22px; font-family: "PingFang SC","Microsoft YaHei",serif; font-weight: 700; }
.offer .tag { font-size: 10px; border-radius: 999px; padding: 1px 8px; display: inline-block; margin-top: 4px; }
.offer.tank .tag { background: #d8ece6; color: #2f6f66; }
.offer.atk .tag  { background: #fbe6e1; color: #a85a48; }
.offer.sup .tag  { background: #ece9fb; color: #5b4b9a; }
.offer .own { font-size: 10px; color: #b45309; margin-top: 2px; }
.offer { border-width: 2px; } /* 边框色 = 稀有度(inline style 指定),宽度在此保证 */
.offer-rar { font-size: 10px; font-weight: 800; margin-top: 1px; letter-spacing: .02em; }
.offer-grp { font-size: 10px; color: #5b4651; margin-top: 2px; line-height: 1.25; }
.offer-prog { color: #b08a96; font-weight: 700; font-variant-numeric: tabular-nums; }
.offer-combo { font-size: 9px; color: #8a8390; line-height: 1.25; margin-top: 1px; }
.offer-combo.hot { color: #C8901E; font-weight: 700; } /* 选了即触发/满羁绊 → 金色高亮 */
/* 输局教练提示 */
#sum-tips { text-align: left; background: #faf6f4; border-radius: 12px; padding: 12px 14px; margin: 6px 0 16px; }
#sum-tips:empty { display: none; }
#sum-tips h2 { font-size: 15px; color: #7a5c6e; margin: 0 0 8px; text-align: center; }
#sum-tips .tip { font-size: 13px; color: #5b4651; line-height: 1.5; margin: 6px 0; }
#sum-tips .grow-head { font-size: 13px; font-weight: 800; color: #1D9E75; text-align: center; line-height: 1.45; margin-bottom: 10px; } /* 失败也成长:绿色正向引导 */
#sum-tips .tip b { color: #C8901E; }
#sum-tips .grow-cta { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
/* 英雄(师徒)选择 */
.hero-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0 4px; }
.hero-pick { border: 2px solid #e5e7eb; border-radius: 14px; padding: 14px 8px; background: #faf6f4; cursor: pointer; text-align: center; }
.hero-pick.last { border-color: #cf8090; background: #fdf2f5; }
.hero-pick:active { transform: scale(.97); }
.hero-emoji { font-size: 38px; line-height: 1.1; }
.hero-name { font-weight: 800; color: #5b4651; margin: 6px 0 2px; font-size: 15px; }
.hero-desc { font-size: 12px; color: #7a6470; line-height: 1.4; }
/* 联系 & 反馈(TikTok)*/
.contact-link { display: inline-block; margin-top: 10px; background: #111; color: #fff; text-decoration: none;
  padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.contact-link:active { transform: scale(.97); }

/* 结算 */
.summary-card { background: #fff; border-radius: 18px; padding: 28px 18px; text-align: center;
  box-shadow: 0 6px 24px rgba(220,38,38,.08); margin-top: 24px; }
.summary-card h1 { font-size: 22px; color: #5b4651; margin-bottom: 8px; }
.summary-card h2 { font-size: 15px; color: #7a5c6e; margin: 16px 0 8px; }
.score { font-size: 30px; font-weight: 800; color: #b06a78; margin: 8px 0 4px; }
.word-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 18px; }
.wchip { background: #fef3c7; color: #92400e; border: none; border-radius: 999px; padding: 5px 12px;
  font-size: 14px; font-family: "PingFang SC","Microsoft YaHei",serif; cursor: pointer; }
.summary-card a { color: #b06a78; }

/* M1.5 难度选择 */
.diff-row { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 18px 0 4px; }
.diff-label { font-size: 13px; color: #8a8390; }
.diff-btn { background: #fff; color: #6b7280; border: 2px solid #e5e7eb; border-radius: 999px;
  padding: 6px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.diff-btn.on { background: #cf8090; color: #fff; border-color: #cf8090; }

/* M1.7 词组羁绊 */
.combo-bar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 22px; margin: 2px 0 6px; }
.combo-pill { background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 2px 10px;
  font-size: 12px; color: #5b4651; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.combo-pill .x { font-weight: 800; color: #b06a78; }
.combo-pill .tag { color: #2f6f66; }
.card { position: relative; } /* 让组 emoji 角标定位 */
.card .grp { position: absolute; top: 3px; left: 4px; font-size: 11px; line-height: 1; }

/* M1.6 档案与任务 */
.profile-head { background: #fff; border-radius: 14px; padding: 10px 12px; margin: 0 auto 10px; max-width: 360px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); text-align: center; }
.prof-name { background: none; border: none; font-size: 16px; font-weight: 800; color: #5b4651; cursor: pointer; }
.prof-lvl { font-size: 13px; color: #8a8390; margin: 2px 0 4px; }
.prof-dao { font-size: 13px; font-weight: 800; color: #7C4DC4; margin: 0 0 6px; } /* 道行:成长总分,紫色醒目 */
.xpbar { height: 7px; background: #f0e4e8; border-radius: 4px; overflow: hidden; }
.xpbar > div { height: 100%; background: #cf8090; border-radius: 4px; width: 0; transition: width .3s; }
.profile-head .btn-small { margin-top: 8px; }
.qpanel { max-width: 460px; margin: 16px auto; background: #fff; border-radius: 16px; padding: 20px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.qpanel h1 { font-size: 20px; color: #5b4651; text-align: center; }
.qpanel h2 { font-size: 15px; color: #7a5c6e; margin: 16px 0 6px; }
.qp-streak { text-align: center; font-size: 15px; color: #b06a78; font-weight: 700; margin: 6px 0; }
.qp-level { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5b4651; }
.qp-level .xpbar { flex: 1; }
.qlist { display: flex; flex-direction: column; gap: 8px; }
.qitem { background: #faf6f4; border-radius: 10px; padding: 10px 12px; }
.qitem.done { background: #d8ece6; }
.qitem .qtop { display: flex; justify-content: space-between; font-size: 13px; color: #5b4651; gap: 8px; }
.qitem .qbar { height: 6px; background: #fff; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.qitem .qbar > div { height: 100%; background: #6f86c4; border-radius: 3px; }
.qitem.done .qbar > div { background: #1d9e75; }
.badge-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { width: 56px; text-align: center; font-size: 11px; color: #8a8390; }
.badge .ic { font-size: 22px; filter: grayscale(1); opacity: .35; }
.badge.on .ic { filter: none; opacity: 1; }
.toast-xp { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #5b4651; color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; z-index: 60; box-shadow: 0 6px 24px rgba(0,0,0,.25); }

/* M2 分叉地图 */
.map-title { text-align: center; font-size: 15px; color: #7a5c6e; margin: 8px 0; }
/* 地图屏 = 一个视口高的 flex 列:上面 HUD/Boss条固定,地图区独占剩余空间。
   全局只有「地图区」一个滚动上下文,body 永不滚 → 杜绝双滚动条。 */
#scr-map.active { display: flex; flex-direction: column; height: calc(100dvh - 24px); }
.map-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#map-svg { display: block; width: 100%; height: auto; }
/* PC/平板:整张地图缩放填满剩余空间、居中、一屏看全不用滚(手机维持竖向滚动) */
@media (min-width: 600px) {
  .map-wrap { text-align: center; overflow: hidden; }
  #map-svg { display: inline-block; width: auto; height: 100%; max-width: 100%; vertical-align: top; }
}
.mnode { cursor: default; }
.mnode.sel { cursor: pointer; }
.medge { stroke: #d3d1c7; stroke-width: 2; fill: none; }
.medge.open { stroke: #cf8090; stroke-width: 3; }
.node-halo { pointer-events: none; }          /* 雷达脉冲环不挡点击,tap 仍命中节点本体 */

/* 遗物架 */
.relic-shelf { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 2px 0; min-height: 0; }
.relic-chip { font-size: 20px; cursor: pointer; line-height: 1; }
/* 遗物三选一 */
.relic-opts { display: flex; flex-direction: column; gap: 8px; }
.relic-opt { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; row-gap: 2px; align-items: center; text-align: left; border-width: 2px; border-style: solid; }
.relic-opt .relic-ic { grid-row: 1 / 3; font-size: 24px; }
.relic-opt .relic-nm { font-weight: 700; }
.relic-opt .relic-rr { font-size: 12px; font-weight: 600; }
.relic-opt .relic-ds { grid-column: 2 / 4; font-size: 13px; opacity: .85; }

/* 商店 */
.shop-item .shop-buy { grid-column: 1 / -1; justify-self: end; margin-top: 4px; }
.btn-small[disabled] { opacity: .4; cursor: not-allowed; }

/* 事件 */
.event-text { text-align: left; line-height: 1.5; margin: 4px 0 10px; }

/* 图鉴 */
.coll-stats { text-align: center; font-weight: 600; margin: 4px 0 8px; }
.coll-filter { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.coll-fchip { font-size: 13px; padding: 4px 10px; border-radius: 14px; border: 1px solid #cfcabb; background: #fff; cursor: pointer; }
.coll-fchip.on { background: #1D9E75; color: #fff; border-color: #1D9E75; }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.coll-cell { border-radius: 10px; padding: 8px 4px; text-align: center; border: 2px solid #B4B2A9; background: #fff; }
.coll-cell .cc-hz { font-size: 20px; }
.coll-cell .cc-stars { font-size: 11px; letter-spacing: 1px; color: #C8901E; }
.coll-cell.unseen { opacity: .45; color: #9A978D; border-color: #e0ddd4; }
.coll-cell.unseen .cc-stars { color: #cfcabb; }
.coll-cell.learning { border-color: #C8901E; cursor: pointer; }
.coll-cell.mastered { border-color: #1D9E75; background: #E1F5EE; cursor: pointer; }
.word-detail { text-align: center; line-height: 1.7; margin: 6px 0; }

/* 主页导航 + 指南 + 设置 */
.menu-nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.menu-nav .btn-small { padding: 5px 10px; } /* 菜单导航专用更紧凑,尽量 2 行放下 8 个入口(不影响别处 btn-small) */
.guide-sec { text-align: left; margin: 0 0 14px; }
.guide-sec h2 { font-size: 16px; margin: 0 0 4px; }
.guide-sec p { margin: 0; line-height: 1.6; opacity: .9; }
.btn-small.danger { background: #D4537E; color: #fff; border-color: #D4537E; }
/* 子屏顶部固定返回条(任务/图鉴/指南):整页滚动时贴视口顶,始终可见 */
.panel-nav { position: sticky; top: 0; z-index: 5; margin: -20px -16px 14px; padding: 10px 14px;
  background: #fff; border-bottom: 1px solid #f0e4e8; border-radius: 16px 16px 0 0; }
/* 图鉴词详情信息卡 */
.wd-py { font-size: 18px; color: #7a5c6e; }
.wd-vn { font-size: 16px; margin-bottom: 10px; }
.wd-rows { text-align: left; max-width: 300px; margin: 4px auto 0; }
.wd-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #f0e4e8; font-size: 14px; }
.wd-k { color: #9a8190; flex-shrink: 0; }
.wd-v { text-align: right; }
.wd-rar { font-size: 13px; font-weight: 600; margin: 2px 0 8px; }
/* 词详情卡:组合羁绊数值 + 收集星加成阶梯 */
.wd-sec { text-align: left; max-width: 300px; margin: 10px auto 0; background: #faf6f4; border: 1px solid #f0e4e8; border-radius: 12px; padding: 9px 11px; }
.wd-sec-t { font-size: 13px; font-weight: 800; color: #6b4e58; margin-bottom: 5px; }
.wd-sec-none { font-size: 13px; color: #9a8190; }
.wd-combo-row { font-size: 13px; color: #5b4651; line-height: 1.7; }
.wd-combo-tag { display: inline-block; min-width: 58px; color: #9a8190; font-size: 12px; }
.wd-combo-ctr { font-size: 12px; color: #C8901E; font-weight: 700; margin-top: 4px; line-height: 1.5; }
.wd-ctr-boss { color: #b06a78; font-weight: 600; }
.wd-ladder { display: flex; gap: 4px; margin-top: 2px; }
.wd-star-step { flex: 1; text-align: center; font-size: 11px; color: #9a8190; background: #fff; border: 1px solid #eadfe3; border-radius: 8px; padding: 4px 2px; line-height: 1.25; }
.wd-star-step .wd-star-pct { display: block; font-weight: 700; color: #b08a96; }
.wd-star-step.on { background: #fdf2f5; border-color: #cf8090; color: #b04a66; }
.wd-star-step.on .wd-star-pct { color: #b04a66; }
.wd-ladder-next { font-size: 12px; color: #5a6ea8; margin-top: 6px; font-weight: 600; }
/* 词库收集 gacha */
.cc-cstar { font-size: 12px; color: #C8901E; font-weight: 700; }
.coll-cell.collected { background: #FBF6EC; }
#gacha-body { text-align: center; }
.gacha-tickets { font-size: 18px; margin: 8px 0 14px; }
.gacha-result { min-height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.gacha-card { border: 3px solid; border-radius: 14px; padding: 16px 22px; background: #fff; min-width: 190px; }
.gc-meta { font-size: 13px; color: #7a5c6e; margin-top: 8px; }
.gc-ready { font-size: 13px; color: #C8901E; font-weight: 700; margin-top: 6px; }
/* 连抽 10 结果网格 */
.gc-multi-head { font-size: 13px; font-weight: 700; color: #7a5c6e; margin-bottom: 8px; }
.gc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gc-mini { border: 2px solid #B4B2A9; border-radius: 8px; padding: 6px 2px; background: #fff; text-align: center; }
.gc-mini-hz { font-size: 16px; font-family: "PingFang SC","Microsoft YaHei",serif; line-height: 1.15; }
.gc-mini-star { font-size: 10px; font-weight: 700; margin-top: 2px; }

/* —— 抽牌爽感:开卡翻转 + 稀有(蓝+)光晕(--rc=稀有度色)—— */
.gacha-card.reveal { animation: gcReveal .5s cubic-bezier(.2,.9,.3,1.35) both; transform-origin: center; }
.gc-mini.reveal { animation: gcReveal .42s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes gcReveal { 0% { transform: rotateY(80deg) scale(.78); opacity: 0; } 60% { transform: rotateY(0) scale(1.06); } 100% { transform: rotateY(0) scale(1); opacity: 1; } }
.gacha-card.rare { box-shadow: 0 0 22px var(--rc, #378ADD); }
.gacha-card.rare { animation: gcReveal .5s cubic-bezier(.2,.9,.3,1.35) both, gcGlow 1.1s ease-in-out .5s 2; }
.gc-mini.rare { box-shadow: 0 0 10px var(--rc, #378ADD); }
@keyframes gcGlow { 0%,100% { box-shadow: 0 0 12px var(--rc, #378ADD); } 50% { box-shadow: 0 0 26px var(--rc, #378ADD); } }

/* 🏆 排行榜 */
.lb-msg { text-align: center; color: #8a8390; font-size: 14px; padding: 24px 8px; line-height: 1.5; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb-table th { font-size: 11px; font-weight: 700; color: #8a8390; text-transform: uppercase; letter-spacing: .03em;
  padding: 6px 5px; border-bottom: 2px solid #f0e4e8; text-align: center; white-space: nowrap; }
.lb-table th:nth-child(2) { text-align: left; }
.lb-table td { padding: 9px 5px; border-bottom: 1px solid #f4eef0; color: #5b4651; text-align: center; vertical-align: middle; }
.lb-rank { font-weight: 800; color: #b06a78; width: 34px; }
.lb-table tbody tr:nth-child(1) .lb-rank { color: #C8901E; }  /* vàng */
.lb-table tbody tr:nth-child(2) .lb-rank { color: #9aa0a6; }  /* bạc */
.lb-table tbody tr:nth-child(3) .lb-rank { color: #b5793b; }  /* đồng */
.lb-name { text-align: left; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-floor { font-weight: 700; }
.lb-asc { color: #b06a78; font-size: 13px; }
.lb-score { color: #7a5c6e; font-variant-numeric: tabular-nums; }
.lb-me { background: #fdf2f5; }
.lb-me .lb-name { color: #b06a78; }
.lb-you { font-size: 11px; color: #cf8090; font-weight: 700; }
.lb-sep td { text-align: center; color: #b4b2a9; padding: 2px 0; border: none; font-size: 12px; letter-spacing: 2px; }
.sum-rank { font-size: 15px; color: #C8901E; font-weight: 700; margin: 8px 0 2px; min-height: 18px; }
.nick-input { width: 220px; max-width: 80%; padding: 10px 12px; font-size: 15px; border: 2px solid #f0e4e8;
  border-radius: 10px; outline: none; text-align: center; color: #5b4651; }
.nick-input:focus { border-color: #cf8090; }
.enemy-ability { font-size: 10px; color: #b06a78; background: #fdf2f5; border-radius: 6px;
  padding: 1px 5px; margin: 2px auto 0; display: inline-block; line-height: 1.4; }
/* —— 战斗内数值显示(怪图):攻击/血量数字 + 全能力图标 + 谜题克制提示 —— */
.hpnum { font-size: 9px; color: #8a8390; line-height: 1.2; margin-top: 1px; font-variant-numeric: tabular-nums; }
.enemy .st { font-size: 10px; color: #c0506a; font-weight: 700; line-height: 1.2; }
.enemy-abil { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; margin-top: 2px; min-height: 14px; }
.enemy-abil .ab-ico { font-size: 12px; line-height: 1; }
.enemy-counter { font-size: 9px; color: #C8901E; background: #fffbeb; border: 1px solid #f5e3b3;
  border-radius: 6px; padding: 1px 4px; margin: 2px auto 0; display: inline-block; line-height: 1.3; font-weight: 700; }
.poisoned { animation: poisonpulse .4s; }
@keyframes poisonpulse { 50% { box-shadow: 0 0 0 3px #c4b5fd; } }
.regened { animation: regenpulse .4s; }
@keyframes regenpulse { 50% { box-shadow: 0 0 0 3px #86efac; } }
.enemy.summoned { animation: summonappear .35s; }
@keyframes summonappear { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 里程碑谜题 Boss:战前简介 modal + 地图预警条 + 回合 doom */
.boss-intro { text-align: center; padding: 4px 2px; }
.boss-intro .bi-tag { font-size: 13px; color: #b06a78; font-weight: 700; }
.boss-intro .bi-emoji { font-size: 56px; line-height: 1.1; margin: 8px 0 4px; }
.boss-intro .bi-name { font-size: 18px; color: #5b4651; margin: 2px 0 10px; }
.boss-intro .bi-hint { font-style: italic; color: #8a6a55; margin: 0 0 16px; }
.map-boss-warn { text-align: center; margin: 0 auto 10px; padding: 7px 12px; max-width: 92%;
  background: #fdeede; color: #9a4a1a; border: 1px solid #e0a96d; border-radius: 10px; font-size: 13px; font-weight: 700; }
.map-boss-warn.tappable { cursor: pointer; transition: filter .15s; }
.map-boss-warn.tappable:active { filter: brightness(.95); }
.map-boss-warn .mbw-main { line-height: 1.4; }
.map-boss-warn .mbw-ok { color: #1D9E75; }
.map-boss-warn .mbw-no { color: #C8901E; }
.map-boss-warn .mbw-tap { font-size: 11px; opacity: .7; font-weight: 600; white-space: nowrap; }
/* 地图页:当前卡组速览按钮 + 弹窗 */
.map-tools { text-align: center; margin: 0 auto 10px; }
.map-deck-btn { background: #f1ece4; color: #5b4651; border: 1px solid #d8ccc0; border-radius: 999px;
  padding: 6px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.map-deck-btn:active { filter: brightness(.96); }
.dd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; margin: 10px 0; }
.dd-card { position: relative; border: 2px solid #B4B2A9; border-radius: 10px; padding: 6px 2px 4px;
  background: #f9fafb; cursor: pointer; text-align: center; }
.dd-card.tank { background: #f3faf8; } .dd-card.atk { background: #fdf4f1; } .dd-card.sup { background: #f7f5fd; }
.dd-card .dd-hz { font-size: 18px; font-family: "PingFang SC","Microsoft YaHei",serif; font-weight: 700; }
.dd-card .dd-star { font-size: 9px; color: #C8901E; line-height: 1; height: 10px; }
.dd-card .dd-grp { position: absolute; top: 1px; right: 3px; font-size: 10px; }
.dd-card .dd-stat { font-size: 9px; color: #5b4651; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-total { text-align: center; font-size: 13px; font-weight: 800; color: #9B59B6; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.dd-empty { color: #8a8390; text-align: center; padding: 14px 0; }
.dd-cnt { font-size: 13px; color: #b08a96; font-weight: 700; }
.dd-sec { margin: 8px 0; text-align: center; }
.dd-sec-t { font-size: 12px; font-weight: 700; color: #7a6a5a; margin-bottom: 2px; }
.dd-sec-b { font-size: 12px; color: #5b4651; line-height: 1.5; }
.vs-line.doom-flash { color: #d9434f; font-weight: 800; font-size: 15px; animation: doompulse .4s ease-in-out 2; }
@keyframes doompulse { 50% { transform: scale(1.12); } }
/* 缺对症 combo:Boss 免疫(打0)→ 浮「MIỄN NHIỄM」+ 盾闪,代替困惑的 -0 */
.dmg-float.immune { color: #9aa0a6; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.enemy.guarded { animation: guardpulse .3s; }
@keyframes guardpulse { 50% { box-shadow: 0 0 0 3px #cfd3d8, 0 0 10px #9aa0a6; } }

/* 西游法宝:地图法宝架 + 回放动画 */
.treasure-shelf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; margin: 0 auto 8px; max-width: 92%; }
.treasure-shelf-lbl { color: #8a6a55; font-weight: 700; font-size: 12px; }
.treasure-chip { border: 1px solid #e0a96d; background: #fdeede; border-radius: 8px; padding: 3px 9px; font-size: 16px; cursor: pointer; line-height: 1.2; }
.treasure-chip:active { transform: scale(.94); }
.treasure-armed { color: #9a4a1a; font-weight: 700; font-size: 12px; }
.enemy.burned { animation: burnpulse .45s; }
@keyframes burnpulse { 50% { box-shadow: 0 0 0 3px #ff8a3d, 0 0 12px #ff5a2a; filter: brightness(1.3); } }
.enemy.stunned { animation: stunpulse .6s; }
@keyframes stunpulse { 50% { transform: translateY(-4px) rotate(-4deg); opacity: .55; } }


/* 跨设备同步:同步码展示 */
.sync-code { font-family: ui-monospace, Menlo, monospace; font-size: 22px; font-weight: 800; letter-spacing: 2px; text-align: center; color: #b06a78; background: #fff4f6; border: 1px dashed #d4969f; border-radius: 10px; padding: 12px; margin: 8px 0; user-select: all; }

/* 新手引导 */
.tut { text-align: center; padding: 4px 2px; }
.tut-step { font-size: 12px; color: #b06a78; font-weight: 700; }
.tut-emoji { font-size: 52px; line-height: 1.1; margin: 6px 0 2px; }
.tut .tut-body { font-size: 14px; color: #5b4651; line-height: 1.6; margin: 6px 4px 0; }

/* —— 打磨:弹入/入场动画(避开 .card/.enemy 裸选择器,防盖 .shake) —— */
.modal-card { animation: modalPop .26s cubic-bezier(.2,.9,.3,1.25); }
@keyframes modalPop { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.enemy-row.battle-in, .team-row.battle-in { animation: rowIn .34s ease-out; }
@keyframes rowIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.offer { animation: offerIn .3s ease-out both; }
.offer:nth-child(2) { animation-delay: .06s; }
.offer:nth-child(3) { animation-delay: .12s; }
@keyframes offerIn { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.summary-card.win-pop { animation: winPop .55s cubic-bezier(.2,.9,.3,1.2); }
@keyframes winPop { 0% { transform: scale(.9); opacity: .2; } 55% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }

/* —— 赛季:英雄锁态 —— */
.hero-pick.locked { cursor: default; opacity: .62; border-style: dashed; border-color: #d8d2cf; background: #f3efed; }
.hero-pick.locked:active { transform: none; }
.hero-pick.locked .hero-name { color: #9a938f; }
.hero-pick.locked .hero-desc { color: #b08a96; font-weight: 600; font-size: 11px; }

/* —— 赛季榜切换标签 —— */
.lb-tabs { display: flex; gap: 8px; margin: 4px 0 6px; }
.lb-tab { flex: 1; border: 2px solid #eadfe3; border-radius: 12px; padding: 9px 6px; background: #faf6f4; color: #8a7480; font-weight: 700; font-size: 14px; cursor: pointer; }
.lb-tab.on { border-color: #cf8090; background: #fdf2f5; color: #b04a66; }
.lb-tab:active { transform: scale(.97); }
.lb-season-sub { text-align: center; color: #9a8390; font-size: 12px; margin-bottom: 8px; }
/* 多维榜:5 个标签换行排,选择器(月份/英雄)二级控件 */
.lb-tabs-multi { flex-wrap: wrap; gap: 6px; }
.lb-tabs-multi .lb-tab { flex: 1 1 28%; min-width: 0; padding: 7px 4px; font-size: 12.5px; }
.lb-subctl { text-align: center; margin: 2px 0 8px; }
.lb-subctl label { font-size: 12px; color: #9a8390; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lb-subctl select { font: inherit; font-size: 13px; font-weight: 700; color: #b04a66; background: #fdf2f5; border: 2px solid #eadfe3; border-radius: 10px; padding: 5px 8px; cursor: pointer; max-width: 60vw; }
/* 「我在哪里」横幅 + 炫耀分享 */
.lb-mehere { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fdf2f5; border: 2px solid #f0d2dc; border-radius: 12px; padding: 8px 10px; margin: 0 0 10px; }
.lb-mehere-rank { flex: 1; text-align: left; background: none; border: none; padding: 0; font-weight: 800; font-size: 14px; color: #b04a66; cursor: pointer; }
.lb-mehere-rank:active { transform: scale(.98); }
.lb-jump-hint { font-weight: 600; font-size: 11px; color: #c89aa6; }
.lb-mehere-none { justify-content: center; text-align: center; color: #9a7e8a; font-size: 13px; font-weight: 600; }
.lb-share-btn { flex-shrink: 0; border-color: #cf8090; color: #b04a66; background: #fff; font-weight: 700; }

/* —— 赛季解锁庆祝弹窗 —— */
.unlock-pop { text-align: center; padding: 6px 4px; }
.unlock-emoji { font-size: 64px; line-height: 1; margin: 6px 0; animation: unlockPop .6s cubic-bezier(.2,.9,.3,1.4); }
.unlock-pop h2 { color: #C8901E; margin: 4px 0; }
.unlock-name { font-size: 20px; font-weight: 800; color: #5b4651; margin: 2px 0 6px; }
.unlock-pop .btn-primary { margin-top: 14px; }
@keyframes unlockPop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* —— 战斗随机(方案 C):暴击 / 闪避 / 反弹 视觉 —— */
.dmg-float.bigcrit { font-size: 27px; color: #e23b3b; text-shadow: 0 1px 4px rgba(200,40,40,.45); animation: critRise .6s forwards; } /* 暴击:更大更红 */
@keyframes critRise { 0% { transform: scale(1.6) translateY(0); } 30% { transform: scale(1.1) translateY(-6px); } 100% { transform: scale(1) translateY(-30px); opacity: 0; } }
.dmg-float.dodge { color: #5a9bd4; font-size: 15px; letter-spacing: .5px; } /* 闪避 NÉ! */
.dmg-float.reflect { color: #9B59B6; font-size: 15px; } /* 反弹 ⚡ */
.enemy.crit-hit { animation: critFlash .35s; } /* 敌人被暴击:红闪 */
@keyframes critFlash { 0% { filter: brightness(2) saturate(1.6); } 100% { filter: none; } }
.card.dodged { animation: dodgeSlide .45s; } /* 己方闪避:侧移虚化 */
@keyframes dodgeSlide { 30% { transform: translateX(-7px); opacity: .55; } 100% { transform: translateX(0); opacity: 1; } }
.enemy.reflected { animation: reflectPulse .4s; } /* 攻击者吃反伤:紫脉冲 */
@keyframes reflectPulse { 0% { box-shadow: 0 0 0 0 rgba(155,89,182,.6); } 100% { box-shadow: 0 0 0 10px rgba(155,89,182,0); } }

/* —— 怪物/Boss 图鉴(Yêu Phổ)—— */
.bi-sec { font-size: 14px; font-weight: 800; color: #6b4e58; margin: 14px 0 8px; }
.bi-count { font-size: 11px; font-weight: 600; color: #b08a96; background: #fdf2f5; border-radius: 8px; padding: 1px 7px; margin-left: 6px; }
.bi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bi-cell { border: 2px solid #eadfe3; border-radius: 12px; padding: 8px 4px; text-align: center; background: #faf6f4; cursor: pointer; }
.bi-cell:active { transform: scale(.97); }
.bi-cell.locked { cursor: default; opacity: .55; border-style: dashed; background: #f3efed; }
.bi-cell.locked:active { transform: none; }
.bi-cell.boss { background: #fdf6ef; border-color: #f0dcc2; }
.bi-face { font-size: 30px; line-height: 1.15; }
.bi-nm { font-size: 11px; font-weight: 700; color: #5b4651; margin-top: 2px; line-height: 1.2; }
.bi-stat { font-size: 10px; color: #8a7480; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bi-abil { font-size: 13px; margin-top: 2px; min-height: 16px; }
.bi-counter { font-size: 9px; color: #C8901E; margin-top: 3px; font-weight: 700; line-height: 1.25; }
/* 图鉴详情 modal */
.bi-detail { text-align: center; padding: 4px; }
.bi-detail-face { font-size: 60px; line-height: 1; margin: 4px 0; }
.bi-detail h2 { margin: 4px 0; color: #5b4651; }
.bi-detail-stats { font-size: 14px; color: #6b5560; margin: 6px 0; font-variant-numeric: tabular-nums; }
.bi-detail-abil { font-size: 13px; color: #8a7480; margin: 6px 0; line-height: 1.45; }
.bi-detail-sub { font-size: 12px; font-weight: 700; color: #9B59B6; margin: 2px 0; }
.bi-mech { font-size: 13px; color: #9a4a1a; background: #fdeede; border-radius: 8px; padding: 6px 10px; margin: 6px auto; max-width: 92%; line-height: 1.4; font-weight: 600; }
.bi-status { font-size: 13px; font-weight: 800; margin: 6px 0 2px; }
.bi-status.ok { color: #1D9E75; } .bi-status.no { color: #C8901E; }
.bi-detail .bi-counter { font-size: 13px; margin: 6px 0; }
.bi-doom { font-size: 12px; color: #c0506a; margin: 6px 0; font-weight: 700; }
.bi-detail .btn-primary { margin-top: 12px; }

/* —— 收集里程碑条 —— */
.ms-title { font-size: 13px; font-weight: 800; color: #6b4e58; margin: 10px 0 6px; }
.ms-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ms-chip { font-size: 11px; border: 1px solid #eadfe3; border-radius: 10px; padding: 5px 9px; background: #faf6f4; color: #8a7480; display: inline-flex; gap: 5px; align-items: center; }
.ms-chip .ms-prog { color: #b08a96; font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-chip.done { opacity: .6; color: #1D9E75; border-color: #cdeadd; background: #f1faf6; }
.ms-chip.claim { cursor: pointer; font-weight: 800; color: #fff; background: #C8901E; border-color: #C8901E; animation: msPulse 1.4s ease-in-out infinite; }
.ms-chip.claim:active { transform: scale(.96); }
@keyframes msPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,144,30,.5); } 50% { box-shadow: 0 0 0 5px rgba(200,144,30,0); } }

/* —— 收藏名片(Hồ sơ)—— */
.hoso { text-align: center; max-height: 72vh; overflow-y: auto; }
.hoso h2 { margin: 2px 0 6px; color: #6b4e58; }
.hs-big { font-size: 52px; font-weight: 900; color: #9B59B6; line-height: 1.05; }
.hs-sec-t { font-size: 12px; font-weight: 800; color: #8a7480; text-align: left; margin: 12px 0 5px; }
.hs-rar-row { display: flex; gap: 8px; justify-content: space-between; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hs-top-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hs-top { font-size: 14px; font-weight: 700; border: 2px solid #eadfe3; border-radius: 10px; padding: 4px 9px; background: #faf6f4; }
.hs-badge-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hs-badge { font-size: 11px; color: #C8901E; background: #fffbeb; border: 1px solid #f5e3b3; border-radius: 9px; padding: 3px 7px; }
.hs-set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.hs-set { font-size: 12px; border: 1px solid #eadfe3; border-radius: 9px; padding: 6px 8px; background: #faf6f4; color: #6b5560; text-align: left; }
.hs-set b { color: #b08a96; }
.hs-set.done { opacity: .6; color: #1D9E75; border-color: #cdeadd; background: #f1faf6; }
.hs-set.claim { cursor: pointer; font-weight: 800; color: #fff; background: #C8901E; border-color: #C8901E; }
.hs-set.claim:active { transform: scale(.97); }