/* =====================================================
   西游战记 · 卡牌对战 —— 样式
   ===================================================== */
:root {
  --bg: #14101f;
  --panel: #221a30;
  --panel2: #2b2140;
  --gold: #e8b93c;
  --text: #e8e2f2;
  --dim: #9a8fb8;
  --red: #e05252;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, #2a2044 0%, var(--bg) 60%) fixed;
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 14px;
}
.hidden { display: none !important; }
.screen { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- 通用按钮 ---------- */
.btn {
  background: linear-gradient(180deg, #3a2d5c, #2a2145);
  border: 1px solid #7a6aa8; color: var(--text);
  border-radius: 8px; padding: 10px 18px;
  font-size: 15px; cursor: pointer; font-family: inherit;
  transition: filter .12s, transform .12s;
}
.btn:hover { filter: brightness(1.25); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #c9962e, #a06f1a); border-color: var(--gold); color: #fff; font-weight: bold; }
.btn.danger { border-color: var(--red); color: #ffb3ab; }
.btn.small { padding: 5px 10px; font-size: 13px; }

/* ---------- 主菜单 ---------- */
.menu-box { margin: auto; text-align: center; background: #ffffff08; border: 1px solid #ffffff14; border-radius: 16px; padding: 36px 64px; }
.logo { font-size: 64px; }
.menu-box h1 { font-size: 44px; letter-spacing: 10px; color: var(--gold); text-shadow: 0 2px 12px #00000088; }
.subtitle { color: var(--dim); margin: 6px 0 18px; }
.menu-stats { display: flex; gap: 28px; justify-content: center; margin-bottom: 22px; font-size: 15px; }
.menu-stats b { color: var(--gold); }
.menu-btns { display: flex; flex-direction: column; gap: 12px; width: 250px; margin: 0 auto; }
.menu-tip { margin-top: 24px; color: var(--dim); font-size: 13px; font-style: italic; }

/* ---------- 页面通用 ---------- */
.page-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 6px; }
.page-head h2 { font-size: 22px; }
.head-right { display: flex; gap: 14px; align-items: center; }
.page-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 22px; }
.hint { color: var(--dim); font-size: 13px; }

/* ---------- 角色编队 ---------- */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 12px 22px; }
.hero-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--cc, #555); border-radius: 12px;
  padding: 14px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.hero-card:hover { transform: translateY(-3px); }
.hero-card.selected { box-shadow: 0 0 0 3px var(--gold), 0 6px 18px #0008; }
.h-top { display: flex; gap: 12px; align-items: center; }
.h-icon { font-size: 46px; }
.h-name { font-size: 18px; font-weight: bold; }
.h-lv { color: var(--gold); font-weight: bold; font-size: 14px; }
.h-cls { font-size: 12px; color: var(--dim); margin-top: 2px; }
.h-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 10px; font-size: 13px; }
.h-xp { font-size: 11px; color: #8fa8c8; margin-top: 4px; }
.h-desc { margin-top: 8px; font-size: 12px; color: var(--dim); line-height: 1.55; min-height: 36px; }
.h-skills { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.h-detail { margin-top: 8px; text-align: center; }
.chip { font-size: 11px; background: #0006; border: 1px solid #ffffff22; padding: 2px 6px; border-radius: 8px; color: #cfc6e8; }

/* ---------- 关卡 ---------- */
.stage-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 12px 22px 30px; }
.stage-btn {
  text-align: left; background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid #5a4a85; border-radius: 10px; padding: 12px 14px;
  color: var(--text); cursor: pointer; font-family: inherit;
}
.stage-btn:hover:not(.locked) { border-color: var(--gold); }
.stage-btn.locked { opacity: .45; cursor: not-allowed; }
.stage-btn.boss { border-color: #e0525288; }
.s-title { font-weight: bold; font-size: 15px; }
.s-info { font-size: 12px; color: var(--dim); margin-top: 5px; }

/* ---------- 战斗布局 ---------- */
#screen-battle { height: 100vh; overflow: hidden; }
.battle-top { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
#round-label { font-size: 16px; font-weight: bold; color: var(--gold); }
.stage-label { color: var(--dim); font-size: 14px; }
.spacer { flex: 1; }
#battle-inner { display: grid; grid-template-columns: 1fr 250px; gap: 10px; flex: 1; min-height: 0; padding: 0 12px; }
#battlefield { display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; }
.field-row { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 108px; }
.field-divider { height: 2px; background: linear-gradient(90deg, transparent, #ffffff22, transparent); margin: 2px 0; }
#log-panel { background: #0004; border: 1px solid #ffffff10; border-radius: 10px; padding: 10px 12px; overflow-y: auto; }
#log div { font-size: 12px; line-height: 1.8; color: #cfc6e8; }
#log div.hl { color: var(--gold); }
#log div.bad { color: #ff8a80; }
#log div.dim { color: var(--dim); }

/* ---------- 角色卡 ---------- */
.card {
  position: relative; width: 128px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 2px solid var(--cc, #555); border-radius: 10px;
  padding: 8px 8px 10px; text-align: center; user-select: none;
  transition: transform .15s, box-shadow .15s, opacity .3s, filter .3s;
}
.card .portrait { font-size: 44px; line-height: 1.15; filter: drop-shadow(0 2px 4px #0008); }
.card .cname { font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; }
.card .ccls { font-size: 11px; color: var(--dim); }
.card.boss { width: 150px; }
.card.boss .portrait { font-size: 54px; }
.hpbar { position: relative; height: 14px; background: #0008; border-radius: 7px; margin-top: 6px; overflow: hidden; }
.hpfill { height: 100%; background: linear-gradient(90deg, #4caf50, #8bc34a); transition: width .25s; }
.card.enemy .hpfill { background: linear-gradient(90deg, #e05252, #ff8a65); }
.hptext { position: absolute; inset: 0; font-size: 10px; line-height: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.cbuffs { min-height: 15px; font-size: 11px; margin-top: 2px; color: #ffd54f; }
.card.active { box-shadow: 0 0 0 3px var(--gold), 0 0 18px #e8b93c88; transform: translateY(-4px); }
.card.targetable { cursor: pointer; animation: targetPulse 1s infinite; }
@keyframes targetPulse {
  0%, 100% { box-shadow: 0 0 0 2px #ff5252aa; }
  50% { box-shadow: 0 0 0 5px #ff5252ff, 0 0 22px #ff5252; }
}
.card.dead { opacity: .28; filter: grayscale(1); }
.card.hit { animation: shake .3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.card.lunge { animation: lunge .3s; }
@keyframes lunge { 50% { transform: translate(12px, -10px) scale(1.05); } }
.card.enemy.lunge { animation: lungeDown .3s; }
@keyframes lungeDown { 50% { transform: translate(-12px, 10px) scale(1.05); } }
.floater {
  position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  font-weight: bold; font-size: 16px; pointer-events: none; z-index: 5;
  text-shadow: 0 1px 3px #000; animation: floatUp .9s forwards; white-space: nowrap;
}
.floater.dmg { color: #ff8a80; }
.floater.crit { color: #ffd54f; font-size: 18px; }
.floater.heal { color: #7dffa8; }
.floater.buff { color: #ffd54f; font-size: 13px; }
.floater.poison { color: #b388ff; }
@keyframes floatUp { to { transform: translate(-50%, -44px); opacity: 0; } }

/* ---------- 技能栏 ---------- */
#skill-bar-wrap { background: #0006; border-top: 1px solid #ffffff14; padding: 8px 14px 12px; min-height: 118px; }
#actor-label { font-size: 13px; color: var(--gold); margin-bottom: 6px; min-height: 18px; }
#skill-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.skill-btn {
  min-width: 150px; max-width: 210px; text-align: left;
  background: linear-gradient(180deg, #3a2d5c, #2a2145);
  border: 1px solid #7a6aa8; color: var(--text); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; font-family: inherit;
}
.skill-btn:hover:not(:disabled) { border-color: var(--gold); }
.skill-btn:disabled { opacity: .45; cursor: not-allowed; }
.skill-btn .s-icon { margin-right: 4px; font-size: 15px; }
.skill-btn .s-name { font-weight: bold; font-size: 14px; }
.skill-btn .s-desc { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.skill-btn .s-cd { display: block; font-size: 11px; color: #ff8a80; margin-top: 2px; }
.skill-btn.pending { border-color: #ff5252; box-shadow: 0 0 10px #ff525288; }
#targeting-hint { color: #ff8a80; font-size: 12px; margin-top: 6px; min-height: 16px; }

/* ---------- 弹层 ---------- */
#overlay { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 50; }
.overlay-box {
  background: linear-gradient(180deg, #2b2140, #1c1730);
  border: 1px solid var(--gold); border-radius: 14px;
  padding: 28px 36px; max-width: 500px; width: 92%; text-align: center;
}
.overlay-box h2 { color: var(--gold); font-size: 28px; margin-bottom: 12px; }
.o-lines { text-align: left; font-size: 14px; line-height: 2; color: #d8d0ec; margin-bottom: 18px; }
.o-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- 等阶（召唤重复英雄晋级） ---------- */
.h-stage { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c8b88f; margin-top: 4px; }

/* ---------- 小屏适配 ---------- */
@media (max-width: 720px) {
  .card { width: 96px; padding: 6px; }
  .card .portrait { font-size: 30px; }
  .card.boss { width: 110px; }
  #battle-inner { grid-template-columns: 1fr; }
  #log-panel { max-height: 76px; }
  .menu-box { padding: 24px 20px; margin: 24px auto; }
}

/* =====================================================
   西游战记 —— 能量 / 星级样式
   ===================================================== */

/* ---------- 卡牌能量条 ---------- */
.enbar {
  position: relative; height: 9px; background: #0008;
  border-radius: 5px; margin-top: 3px; overflow: hidden;
}
.enfill {
  height: 100%; background: linear-gradient(90deg, #e8b93c, #ffd54f);
  transition: width .25s;
}
.entext {
  position: absolute; inset: 0; font-size: 9px; line-height: 9px;
  color: #fff; text-shadow: 0 1px 2px #000; text-align: center;
}
/* 满能量：卡牌金边闪光 */
.card.en-full { box-shadow: 0 0 0 2px var(--gold), 0 0 16px #e8b93caa; animation: enFull 1.2s infinite; }
@keyframes enFull {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 10px #e8b93c88; }
  50% { box-shadow: 0 0 0 2px #fff2c9, 0 0 22px #ffd54f; }
}

/* ---------- 大招按钮 ---------- */
.skill-btn.ult { border-color: #c9962e; background: linear-gradient(180deg, #4a3a1e, #33270f); }
.skill-btn .s-en { display: block; font-size: 11px; color: #ffd54f; margin-top: 2px; }
/* 能量满 + 冷却完：大招可释放高亮 */
.skill-btn.ult.ready {
  border-color: var(--gold); color: #fff;
  background: linear-gradient(180deg, #6b5418, #4a3a10);
  animation: ultReady 1.4s infinite;
}
@keyframes ultReady {
  0%, 100% { box-shadow: 0 0 6px #e8b93c66; }
  50% { box-shadow: 0 0 18px #ffd54fcc, inset 0 0 8px #ffd54f33; }
}

/* ---------- 星级角标 ---------- */
.h-stars {
  margin-top: 4px; font-size: 13px; letter-spacing: 2px;
  color: var(--sc, #9e9e9e); font-weight: bold;
  display: flex; align-items: center; gap: 6px;
}
.h-star-name {
  font-size: 10px; color: #000; background: var(--sc, #9e9e9e);
  padding: 1px 7px; border-radius: 8px; font-weight: bold; letter-spacing: 0;
}
/* 大招技能芯片高亮 */
.chip-ult { border-color: #c9962e; color: #ffd54f; background: #4a3a1e; }

/* =====================================================
   西游战记 —— 玩家等级 / 抽卡 / 剧情 / 过滤样式
   ===================================================== */

/* ---------- 玩家经验条 ---------- */
.menu-xp {
  position: relative; width: 250px; height: 16px;
  background: #0008; border: 1px solid #ffffff22; border-radius: 8px;
  margin: -10px auto 18px; overflow: hidden; text-align: center;
}
.xpfill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4a9de0, #7fd4ff);
  transition: width .3s;
}
#menu-xp-text {
  position: absolute; inset: 0; font-size: 11px; line-height: 16px;
  color: #fff; text-shadow: 0 1px 2px #000; font-weight: bold;
}

/* ---------- 编队过滤条 ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 22px 2px;
}
.f-label { color: var(--dim); font-size: 12px; margin-right: 2px; }
.f-chip {
  background: #0006; border: 1px solid #ffffff22; color: #cfc6e8;
  border-radius: 12px; padding: 3px 10px; font-size: 12px;
  cursor: pointer; font-family: inherit;
}
.f-chip:hover { border-color: var(--gold); }
.f-chip.on { background: var(--sc, #3a2d5c); border-color: var(--fc, var(--gold)); color: #fff; box-shadow: 0 0 6px #0008; }

/* ---------- 种族羁绊面板 ---------- */
.bond-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 6px 22px 4px; font-size: 12px;
}
.bond-title { color: var(--gold); font-weight: bold; margin-right: 2px; }
.bond-race { display: flex; align-items: center; gap: 4px; color: #cfc6e8; }
.bond-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fc, #fff); box-shadow: 0 0 4px var(--fc, #fff);
}
.bond-n { color: var(--dim); }
.bond-row {
  background: #0006; border: 1px solid #ffffff22; border-radius: 10px;
  padding: 2px 8px; color: #cfc6e8;
}
.bond-row.on {
  border-color: var(--fc, var(--gold)); color: #fff;
  background: #000a; box-shadow: 0 0 6px #0008;
}
.bond-row.dim { opacity: .45; }

/* ---------- 每日任务 ---------- */
.task-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #0005; border: 1px solid #ffffff14; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; text-align: left;
}
.task-row.done { border-color: #4caf50; box-shadow: 0 0 6px #4caf5044; }
.task-row.claimed { opacity: .5; }
.task-name { flex: 1; }
.task-reward { color: #ffd54f; white-space: nowrap; }
.task-state { color: #8bc34a; font-size: 12px; white-space: nowrap; }

/* ---------- 每日答题 ---------- */
.quiz-q {
  font-size: 15px; font-weight: bold; color: #fff;
  margin-bottom: 10px; text-align: left; line-height: 1.5;
}
.quiz-opts { display: flex; flex-direction: column; gap: 6px; }
.quiz-opt {
  background: #0006; border: 1px solid #ffffff22; color: #cfc6e8;
  border-radius: 8px; padding: 8px 12px; font-size: 13px;
  cursor: pointer; font-family: inherit; text-align: left;
}
.quiz-opt:hover { border-color: var(--gold); color: #fff; }
.quiz-ans { display: block; font-size: 13px; line-height: 1.7; text-align: left; }
.quiz-ans.right { color: #8bc34a; }
.quiz-ans.wrong { color: #e05252; }

/* ---------- 未拥有英雄 ---------- */
.hero-card.locked { opacity: .38; filter: grayscale(.7); cursor: not-allowed; }
.hero-card.locked:hover { transform: none; }
.h-lock { font-size: 12px; }

/* ---------- 剧情对话 ---------- */
.story-dlg {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: #0005; border: 1px solid #ffffff14; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px;
  animation: storyIn .25s ease;
}
@keyframes storyIn { from { opacity: 0; transform: translateY(8px); } }
.story-avatar { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 4px #000a); }
.story-who { color: var(--gold); font-weight: bold; margin-bottom: 4px; }
.story-line { color: #e8e2f2; line-height: 1.7; font-size: 14px; }

/* ---------- 抽卡结果 ---------- */
.gacha-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px; margin: 6px 0 16px;
}
.gacha-card {
  background: linear-gradient(180deg, #2b2140, #1c1730);
  border: 2px solid var(--sc); border-radius: 10px;
  padding: 10px 6px; text-align: center;
  animation: gachaIn .4s both;
  cursor: pointer; transition: transform .15s;
}
.gacha-card:hover { transform: translateY(-3px); }
.gacha-card.new { box-shadow: 0 0 14px var(--sc); animation: gachaNew .9s both; }
@keyframes gachaIn { from { transform: scale(.5); opacity: 0; } }
@keyframes gachaNew {
  0% { transform: scale(.6); opacity: 0; }
  40% { transform: scale(1.1); box-shadow: 0 0 24px var(--sc); }
  100% { transform: scale(1); box-shadow: 0 0 14px var(--sc); }
}
.gacha-card .g-icon { font-size: 32px; line-height: 1.2; }
.gacha-card .g-name { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gacha-card .g-star { font-size: 11px; color: var(--sc); font-weight: bold; letter-spacing: 1px; }
.gacha-card .g-tag { font-size: 10px; margin-top: 4px; color: var(--dim); }
.gacha-card .g-tag.new { color: var(--gold); font-weight: bold; }
.gacha-card.dup { opacity: .72; }
.gacha-card.star1 { --sc: #9e9e9e; }
.gacha-card.star2 { --sc: #4caf50; }
.gacha-card.star3 { --sc: #2196f3; }
.gacha-card.star4 { --sc: #9c27b0; }
.gacha-card.star5 { --sc: #ffb300; }
.gacha-card .g-tag.first { color: #ffd54f; font-weight: bold; }

/* ---------- 英雄详情 ---------- */
.d-skills { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; max-height: 46vh; overflow-y: auto; }
.d-skill {
  display: flex; gap: 10px; align-items: flex-start;
  background: #221a36; border: 1px solid #3a2f5a; border-radius: 8px; padding: 8px 10px;
}
.d-s-icon { font-size: 22px; line-height: 1.3; }
.d-s-body { flex: 1; min-width: 0; }
.d-s-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.d-s-tag { font-size: 10px; color: #cfc4ea; background: #312751; border-radius: 4px; padding: 1px 6px; }
.d-s-tag.ult { color: #ffd54f; background: #4d3a12; font-weight: bold; }
.d-s-tag.cd { color: var(--dim); background: #262038; }
.d-s-desc { font-size: 12px; color: var(--dim); margin-top: 2px; }
.d-desc { color: var(--dim); font-style: italic; }

/* ---------- 编队引导（强制入队） ---------- */
.hero-card.suggest {
  box-shadow: 0 0 0 3px #ffd54f, 0 0 22px #ffd54f88;
  animation: suggestPulse 1s infinite;
}
@keyframes suggestPulse {
  0%, 100% { box-shadow: 0 0 0 3px #ffd54f, 0 0 12px #ffd54f66; }
  50% { box-shadow: 0 0 0 4px #fff2c9, 0 0 24px #ffd54f; }
}
.h-suggest {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffd54f, #c9962e); color: #000;
  font-size: 11px; font-weight: bold; border-radius: 8px;
  padding: 2px 10px; white-space: nowrap; z-index: 2;
  box-shadow: 0 2px 6px #0008;
}
.hero-card { position: relative; }