/* 卧龙出山 × 木牛流马 活动视觉 */
.zhuge-event-hero {
  position: relative;
  overflow: hidden;
  margin: 4px 0 12px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(226, 190, 120, .55);
  background:
    radial-gradient(circle at 15% 30%, rgba(91, 140, 255, .30), transparent 36%),
    radial-gradient(circle at 88% 68%, rgba(216, 162, 74, .26), transparent 38%),
    linear-gradient(135deg, #0a101c 0%, #121a2b 48%, #22170d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 -28px 48px rgba(0,0,0,.35),
    0 10px 26px rgba(0,0,0,.35);
  cursor: pointer;
}
.zhuge-event-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 28% 42%, rgba(255,255,255,.35) 0 1px, transparent 1.6px),
    radial-gradient(circle at 45% 12%, rgba(255,255,255,.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 30%, rgba(255,255,255,.30) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.50) 0 1px, transparent 1.6px),
    radial-gradient(circle at 92% 52%, rgba(255,255,255,.28) 0 1px, transparent 1.6px);
  opacity: .65;
  pointer-events: none;
}
.zhuge-event-hero::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 12px;
  border: 1px solid rgba(226, 190, 120, .22);
  pointer-events: none;
}
.zhe-trigrams {
  position: absolute;
  right: -6px;
  top: -10px;
  width: 150px;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 2px;
  opacity: .18;
  color: #f5d48a;
  font-size: 18px;
  letter-spacing: 2px;
  transform: rotate(12deg);
  pointer-events: none;
}
.zhe-orbit {
  position: absolute;
  right: -30px;
  bottom: -46px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(226,190,120,.35);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(226,190,120,.05), 0 0 0 32px rgba(226,190,120,.03);
  pointer-events: none;
}
.zhe-kicker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e7c987;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.zhe-kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e7c987);
}
.zhe-tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid rgba(231,201,135,.55);
  border-radius: 999px;
  color: #f4dfae;
  font-size: 9px;
  letter-spacing: 0;
}
.zhe-title {
  position: relative;
  margin: 5px 0 0;
  font-family: "STKaiti", "KaiTi", "Noto Serif SC", serif;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 5px;
  color: #f6e5bd;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 18px rgba(231,201,135,.25);
  background: linear-gradient(180deg, #fff4d6 0%, #e7c987 52%, #b9853c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zhe-subtitle {
  position: relative;
  margin-top: 4px;
  color: rgba(235, 220, 190, .72);
  font-size: 11px;
  letter-spacing: 3px;
}
.zhe-duo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.zhe-char {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.zhe-char--huang { justify-content: flex-end; text-align: right; }
.zhe-char__seal {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: #eaf2ff;
  border: 1px solid rgba(144, 190, 255, .7);
  background: radial-gradient(circle at 35% 30%, rgba(144,190,255,.28), rgba(10,16,28,.9));
  box-shadow: 0 0 18px rgba(91,140,255,.25);
}
.zhe-char--huang .zhe-char__seal {
  color: #fff0cf;
  border-color: rgba(231,201,135,.75);
  background: radial-gradient(circle at 35% 30%, rgba(216,162,74,.30), rgba(28,18,9,.9));
  box-shadow: 0 0 18px rgba(216,162,74,.25);
}
.zhe-char__name {
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 14px;
  color: #f0e4cc;
  letter-spacing: 1px;
  white-space: nowrap;
}
.zhe-char__role {
  margin-top: 2px;
  font-size: 9px;
  color: rgba(220, 205, 175, .55);
  white-space: nowrap;
}
.zhe-divider {
  color: #e7c987;
  font-size: 12px;
  opacity: .8;
}
.zhe-progress {
  position: relative;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(226,190,120,.16);
}
.zhe-progress__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(235,220,190,.72);
  font-size: 10px;
}
.zhe-progress__top strong { color: #f4dfae; }
.zhe-progress__bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid rgba(226,190,120,.12);
}
.zhe-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b8cff, #e7c987);
  box-shadow: 0 0 10px rgba(231,201,135,.35);
}
.zhe-arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: rgba(231,201,135,.7);
  font-size: 12px;
}
/* 活动弹窗 */
.zhuge-event-modal {
  background:
    radial-gradient(circle at 50% 0%, rgba(91,140,255,.14), transparent 35%),
    linear-gradient(160deg, #0d1422, #171b26 55%, #21170e) !important;
  border: 1px solid rgba(226,190,120,.45) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
}
.zhuge-event-modal .modal__title {
  font-family: "STKaiti", "KaiTi", serif;
  letter-spacing: 2px;
  color: #f3dfb2;
  border-bottom: 1px solid rgba(226,190,120,.18);
}
.zhe-modal-hero {
  text-align: center;
  padding: 4px 0 10px;
}
.zhe-modal-hero__kicker { font-size: 10px; color: #9ecbff; letter-spacing: 3px; }
.zhe-modal-hero__title {
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 26px;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #fff4d6, #e7c987 55%, #b9853c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.zhe-modal-hero__sub { color: rgba(235,220,190,.65); font-size: 10px; letter-spacing: 2px; }
.zhe-modal-pulls {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: rgba(235,220,190,.72);
  margin: 8px 0 4px;
}
.zhe-modal-pulls strong { color: #f3dfb2; }
.zhe-modal-bar { height: 5px; background: rgba(0,0,0,.4); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.zhe-modal-bar > div { height: 100%; background: linear-gradient(90deg, #5b8cff, #e7c987); }
.zhe-character-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.zhe-character-card {
  border: 1px solid rgba(226,190,120,.22);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255,255,255,.025);
  text-align: center;
}
.zhe-character-card__seal {
  width: 44px; height: 44px; margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: "STKaiti", "KaiTi", serif;
  border: 1px solid rgba(226,190,120,.45); color: #f3dfb2;
  background: radial-gradient(circle, rgba(226,190,120,.16), transparent 70%);
}
.zhe-character-card__name { font-family: "STKaiti", "KaiTi", serif; color: #f0e4cc; font-size: 13px; }
.zhe-character-card__role { font-size: 9px; color: rgba(220,205,175,.55); margin-top: 2px; }
.zhe-task-title { font-size: 11px; color: #e7c987; letter-spacing: 2px; margin: 8px 0 6px; }
.zhe-task {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-left: 2px solid rgba(226,190,120,.18);
  padding: 7px 8px; margin-bottom: 6px;
  background: rgba(255,255,255,.02); border-radius: 0 8px 8px 0;
}
.zhe-task--ready { border-left-color: #e7c987; background: rgba(231,201,135,.06); }
.zhe-task__name { color: #f0e4cc; font-size: 11px; }
.zhe-task__meta { color: rgba(220,205,175,.55); font-size: 9px; margin-top: 2px; }
.zhe-task__reward { color: #d9c49a; font-size: 10px; margin-top: 2px; }
.zhe-pool-buttons { display: flex; gap: 6px; margin: 10px 0 2px; }
.zhe-pool-btn {
  flex: 1; border: 1px solid rgba(226,190,120,.4); border-radius: 8px;
  background: rgba(255,255,255,.03); color: #f0e4cc; padding: 7px 4px;
  font-family: "STKaiti", "KaiTi", serif; letter-spacing: 1px; cursor: pointer;
}
.zhe-pool-btn--blue { border-color: rgba(144,190,255,.5); color: #cfe4ff; }
.zhe-pool-btn--gold { border-color: rgba(231,201,135,.55); color: #f6e5bd; }
@media (max-width: 420px) {
  .zhe-title { font-size: 27px; letter-spacing: 3px; }
  .zhe-char__seal { width: 34px; height: 34px; flex-basis: 34px; font-size: 13px; }
  .zhe-char__name { font-size: 12px; }
  .zhe-char__role { font-size: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .zhuge-event-hero { animation: zheBreath 6s ease-in-out infinite; }
  @keyframes zheBreath {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -28px 48px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.35); }
    50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -28px 48px rgba(0,0,0,.35), 0 12px 34px rgba(80,120,220,.18); }
  }
}
/* 抽卡详情页统一视觉 */
.zhe-pool-detail { padding: 8px 8px 100px; }
.zhe-pool-top {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.zhe-ghost-btn {
  border: 1px solid rgba(226,190,120,.28);
  background: rgba(255,255,255,.025);
  color: #d9c7a2;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 11px;
  cursor: pointer;
}
.zhe-ghost-btn:active { transform: translateY(1px); }
.zhe-cost-chip {
  margin-left: auto; color: rgba(220,205,175,.55); font-size: 10px;
  border: 1px solid rgba(226,190,120,.18); border-radius: 999px; padding: 2px 8px;
}
.zhe-currency-line {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
  color: #8f836f; font-size: 10px;
}
.zhe-currency-line b { color: #e7c987; font-weight: 600; }
.zhe-pool-hero {
  position: relative; overflow: hidden;
  border: 1px solid rgba(226,190,120,.36);
  border-radius: 16px;
  padding: 14px 12px 12px;
  margin-bottom: 10px;
  background:
    radial-gradient(circle at 20% 20%, rgba(91,140,255,.24), transparent 38%),
    radial-gradient(circle at 86% 70%, rgba(216,162,74,.22), transparent 40%),
    linear-gradient(135deg, #0b1220, #141b2a 58%, #20160d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 -30px 50px rgba(0,0,0,.28);
}
.zhe-pool-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 32% 44%, rgba(255,255,255,.3) 0 1px, transparent 1.6px),
    radial-gradient(circle at 52% 14%, rgba(255,255,255,.4) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 34%, rgba(255,255,255,.25) 0 1px, transparent 1.6px),
    radial-gradient(circle at 90% 18%, rgba(255,255,255,.4) 0 1px, transparent 1.6px);
  opacity: .55; pointer-events: none;
}
.zhe-pool-orbit {
  position: absolute; right: -42px; top: -60px; width: 180px; height: 180px;
  border: 1px solid rgba(226,190,120,.22); border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(226,190,120,.035), 0 0 0 34px rgba(226,190,120,.02);
  pointer-events: none;
}
.zhe-pool-hero__inner { position: relative; display: flex; gap: 10px; align-items: center; }
.zhe-pool-seal {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "STKaiti","KaiTi",serif; font-size: 18px; color: #f4dfae;
  border: 1px solid rgba(226,190,120,.55);
  background: radial-gradient(circle at 35% 30%, rgba(226,190,120,.22), rgba(10,14,22,.9));
  box-shadow: 0 0 22px rgba(226,190,120,.16);
}
.zhe-pool-hero__copy { position: relative; flex: 1; min-width: 0; }
.zhe-pool-hero__kicker { font-size: 9px; color: #9ecbff; letter-spacing: 2px; }
.zhe-pool-hero__title {
  margin-top: 3px; font-family: "STKaiti","KaiTi",serif; font-size: 20px;
  letter-spacing: 2px; color: #f6e5bd; line-height: 1.15;
}
.zhe-pool-hero__sub { margin-top: 3px; font-size: 10px; color: rgba(220,205,175,.55); }
.zhe-pool-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.zhe-chip {
  font-size: 9px; color: #d9c7a2; border: 1px solid rgba(226,190,120,.24);
  border-radius: 999px; padding: 1px 6px; background: rgba(0,0,0,.18);
}
.zhe-chip--blue { color: #b9d4ff; border-color: rgba(120,170,255,.3); }
.zhe-owned-tag { font-size: 9px; color: #79d49b; margin-left: 4px; }
.zhe-summon-row { display: flex; gap: 8px; margin-bottom: 8px; }
.zhe-summon-btn {
  flex: 1; border: 0; border-radius: 11px; padding: 10px 6px;
  font-family: "STKaiti","KaiTi",serif; font-size: 17px; letter-spacing: 2px;
  color: #201406; cursor: pointer;
  background: linear-gradient(180deg, #f7dfa6, #d7a64e 58%, #b77b2e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(180,120,40,.18);
  position: relative; overflow: hidden;
}
.zhe-summon-btn small { font-family: system-ui, sans-serif; font-size: 9px; opacity: .65; letter-spacing: 0; margin-left: 2px; }
.zhe-summon-btn--blue {
  color: #eaf3ff;
  background: linear-gradient(180deg, #6f9fe8, #3d68ad 60%, #2c4f85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(50,90,170,.22);
}
.zhe-summon-btn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.zhe-auto-row { display: flex; gap: 5px; align-items: center; margin-bottom: 6px; }
.zhe-auto-input {
  width: 66px; background: rgba(0,0,0,.28); color: #f0e4cc;
  border: 1px solid rgba(226,190,120,.22); border-radius: 8px;
  padding: 6px 7px; font-size: 12px; text-align: center;
}
.zhe-auto-btn {
  flex: 1; border: 1px solid rgba(226,190,120,.30); border-radius: 9px;
  background: rgba(255,255,255,.035); color: #e7c987;
  padding: 7px 8px; font-size: 11px; cursor: pointer;
}
.zhe-auto-cancel { width: 100%; border: 1px solid rgba(255,110,110,.3); border-radius: 9px; background: rgba(255,80,80,.06); color: #ff9b9b; padding: 6px; font-size: 10px; margin-bottom: 6px; }
.zhe-progress-text { display: none; text-align: center; color: #8f836f; font-size: 10px; margin-bottom: 5px; }
.zhe-panel {
  border: 1px solid rgba(226,190,120,.20);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  padding: 10px;
  margin-bottom: 8px;
}
.zhe-panel__title { font-family: "STKaiti","KaiTi",serif; color: #e7c987; font-size: 13px; letter-spacing: 1px; margin-bottom: 7px; }
.zhe-roster-card { display: flex; align-items: center; gap: 9px; }
.zhe-roster-seal {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: "STKaiti","KaiTi",serif; font-size: 17px; color: #f4dfae;
  border: 1px solid rgba(226,190,120,.4); background: rgba(0,0,0,.25);
}
.zhe-roster-name { font-family: "STKaiti","KaiTi",serif; font-size: 15px; color: #f0e4cc; }
.zhe-rarity { font-family: system-ui,sans-serif; font-size: 9px; color: #e7c987; border: 1px solid rgba(226,190,120,.35); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 2px; }
.zhe-roster-sub { font-size: 9px; color: rgba(220,205,175,.55); margin-top: 2px; }
.zhe-skill-card { border-left: 2px solid rgba(226,190,120,.28); padding: 6px 8px; margin-top: 6px; background: rgba(255,255,255,.02); border-radius: 0 7px 7px 0; }
.zhe-skill-card__name { font-size: 10px; color: #d9c7a2; }
.zhe-skill-card__desc { font-size: 9px; color: rgba(232,220,198,.80); margin-top: 3px; line-height: 1.6; }
.zhe-drop-row { display: flex; justify-content: space-between; font-size: 10px; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.05); }
.zhe-drop-row:last-child { border-bottom: 0; }
@media (max-width: 420px) {
  .zhe-pool-hero__title { font-size: 18px; }
  .zhe-summon-btn { font-size: 15px; }
}
/* 活动弹窗双池块 */
.zhe-pool-block {
  border: 1px solid rgba(226,190,120,.22);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.02);
}
.zhe-pool-block__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
}
.zhe-pool-block__name { font-family: "STKaiti","KaiTi",serif; font-size: 13px; letter-spacing: 1px; }
.zhe-pool-block__sub { font-size: 9px; color: rgba(220,205,175,.5); margin-top: 2px; }
.zhe-pool-block__count { font-size: 11px; color: #e7c987; white-space: nowrap; }
.zhe-pool-block .zhe-modal-bar { margin: 6px 0 7px; }