/* cardarena.css — CardArena 苏丹宫廷风（巴洛克深红 × 鎏金 × 阿拉伯纹样） */
:root {
  --cardarena-bg: #f4ead2;
  --cardarena-panel: #fbf3df;
  --cardarena-border: #a3863f;
  --cardarena-text: #3a2a1a;
  --cardarena-muted: #7a6848;
  --cardarena-primary: #8c1f1f;
  --cardarena-accent: #b8860b;
  --cardarena-gold: #c9a227;
  --cardarena-gold-light: #eed48a;
  --cardarena-gold-dark: #8a6a2f;
  --cardarena-danger: #8f1d1d;
  --cardarena-success: #3d5a3a;
  --cardarena-target: #d4af37;
  --cardarena-ink: rgba(163, 134, 63, 0.30);
  --cardarena-crimson: #7a1626;
  --cardarena-crimson-deep: #52101b;
  --cardarena-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', Georgia, 'Times New Roman', serif;
  /* 阿拉伯八角星纹样（双方形叠加 + 中心圆） */
  --cardarena-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23a3863f' stroke-width='1.2' opacity='0.20'%3E%3Crect x='32' y='32' width='96' height='96'/%3E%3Crect x='32' y='32' width='96' height='96' transform='rotate(45 80 80)'/%3E%3Ccircle cx='80' cy='80' r='7'/%3E%3Ccircle cx='80' cy='18' r='4'/%3E%3Ccircle cx='80' cy='142' r='4'/%3E%3Ccircle cx='18' cy='80' r='4'/%3E%3Ccircle cx='142' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E");
  --cardarena-pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1.2' opacity='0.14'%3E%3Crect x='32' y='32' width='96' height='96'/%3E%3Crect x='32' y='32' width='96' height='96' transform='rotate(45 80 80)'/%3E%3Ccircle cx='80' cy='80' r='7'/%3E%3Ccircle cx='80' cy='18' r='4'/%3E%3Ccircle cx='80' cy='142' r='4'/%3E%3Ccircle cx='18' cy='80' r='4'/%3E%3Ccircle cx='142' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --cardarena-bg: #1c0f0c;
  --cardarena-panel: #2b1612;
  --cardarena-border: #b08d3e;
  --cardarena-text: #e8dcc0;
  --cardarena-muted: #a08a5e;
  --cardarena-primary: #d4af37;
  --cardarena-accent: #c9a227;
  --cardarena-gold: #e8c64a;
  --cardarena-gold-light: #f3dfa0;
  --cardarena-gold-dark: #8a6a2f;
  --cardarena-ink: rgba(200, 165, 60, 0.22);
  --cardarena-crimson: #8c2233;
  --cardarena-crimson-deep: #4a0e18;
}

#cardarena-app {
  max-width: 920px;
  margin: 0 auto;
  font-family: var(--cardarena-serif);
  font-weight: 400;
  color: var(--cardarena-text);
  /* 宫廷底纹：暖纸底 + 阿拉伯纹样 + 暗角 + 中心光晕 + 放射光芒 */
  background-color: var(--cardarena-bg);
  background-image:
    radial-gradient(circle at 50% 38%, rgba(212, 175, 55, 0.10), transparent 60%),
    conic-gradient(from 0deg at 50% 38%, transparent 0deg, rgba(212, 175, 55, 0.028) 15deg, transparent 30deg, rgba(212, 175, 55, 0.028) 45deg, transparent 60deg, rgba(212, 175, 55, 0.028) 75deg, transparent 90deg, rgba(212, 175, 55, 0.028) 105deg, transparent 120deg, rgba(212, 175, 55, 0.028) 135deg, transparent 150deg, rgba(212, 175, 55, 0.028) 165deg, transparent 180deg, rgba(212, 175, 55, 0.028) 195deg, transparent 210deg, rgba(212, 175, 55, 0.028) 225deg, transparent 240deg, rgba(212, 175, 55, 0.028) 255deg, transparent 270deg, rgba(212, 175, 55, 0.028) 285deg, transparent 300deg, rgba(212, 175, 55, 0.028) 315deg, transparent 330deg, rgba(212, 175, 55, 0.028) 345deg, transparent 360deg),
    radial-gradient(ellipse at 50% 30%, rgba(255, 248, 226, 0.65), rgba(0, 0, 0, 0.08) 80%),
    var(--cardarena-pattern);
  border: 1px solid var(--cardarena-border);
  box-shadow: inset 0 0 0 3px var(--cardarena-gold-dark), inset 0 0 0 4px var(--cardarena-ink), inset 0 0 0 5px var(--cardarena-gold-dark), inset 0 0 0 6px var(--cardarena-ink), 0 4px 24px rgba(0, 0, 0, 0.22);
  padding: 18px;
  box-sizing: border-box;
  user-select: none;
  position: relative;
}
[data-theme="dark"] #cardarena-app {
  background-image:
    radial-gradient(circle at 50% 36%, rgba(212, 175, 55, 0.08), transparent 60%),
    conic-gradient(from 0deg at 50% 36%, transparent 0deg, rgba(232, 198, 74, 0.02) 15deg, transparent 30deg, rgba(232, 198, 74, 0.02) 45deg, transparent 60deg, rgba(232, 198, 74, 0.02) 75deg, transparent 90deg, rgba(232, 198, 74, 0.02) 105deg, transparent 120deg, rgba(232, 198, 74, 0.02) 135deg, transparent 150deg, rgba(232, 198, 74, 0.02) 165deg, transparent 180deg, rgba(232, 198, 74, 0.02) 195deg, transparent 210deg, rgba(232, 198, 74, 0.02) 225deg, transparent 240deg, rgba(232, 198, 74, 0.02) 255deg, transparent 270deg, rgba(232, 198, 74, 0.02) 285deg, transparent 300deg, rgba(232, 198, 74, 0.02) 315deg, transparent 330deg, rgba(232, 198, 74, 0.02) 345deg, transparent 360deg),
    radial-gradient(ellipse at 50% 25%, rgba(122, 22, 38, 0.35), rgba(0, 0, 0, 0.30) 80%),
    var(--cardarena-pattern-dark);
}

/* ===== 开始界面 ===== */
.ca-setup { text-align: center; }
.ca-setup-title {
  font-family: var(--cardarena-serif);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0 0 4px;
  color: var(--cardarena-primary);
  letter-spacing: 0.08em;
}
.ca-setup-sub {
  margin: 0 0 16px;
  color: var(--cardarena-muted);
  font-size: 0.9rem;
}
.ca-setup-grid {
  display: grid;
  /* 大屏适配：minmax(150px) + max-width 680px 限制总宽，避免卡片过大/页面过高导致上下滚动 */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 auto 16px;
  max-width: 680px;
}
/* ===== 选首发屏 ===== */
.ca-first-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  max-width: 720px;
}
.ca-first-card {
  --ca-tier-color: var(--ca-tier-bronze);
  --ca-tier-bright: var(--ca-tier-bronze-bright);
  display: flex;
  flex-direction: column;
  /* 不用 align-items:center —— .ca-role-art 无内联内容（星徽全 absolute），center 会使其宽度塌缩为 0（纹章压成一条线）；用默认 stretch 让 art 撑满宽度，文字靠 text-align:center、stats 靠自身 justify-content:center 居中 */
  align-items: stretch;
  text-align: center;
  padding: 16px 11px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--cardarena-text);
  font-family: inherit;
  font-weight: 400;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  background: linear-gradient(160deg, #0d0806 0%, #1d100c 48%, #0a0504 100%);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), inset 0 0 0 6px rgba(212, 175, 55, 0.20), inset 0 0 26px rgba(212, 175, 55, 0.10), 0 10px 22px rgba(0, 0, 0, 0.5);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
:root:not([data-theme="dark"]) .ca-first-card {
  background: linear-gradient(165deg, #fdf6e3 0%, #f0e2bd 55%, #e8d5a6 100%);
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.5), inset 0 0 0 6px rgba(163, 134, 63, 0.18), inset 0 0 22px rgba(163, 134, 63, 0.18), 0 8px 18px rgba(90, 70, 30, 0.25);
}
.ca-first-card:hover {
  transform: translateY(-9px);
  filter: brightness(1.13);
  border-color: var(--cardarena-gold);
}
[data-theme="dark"] .ca-first-card:hover {
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.85), inset 0 0 32px rgba(212, 175, 55, 0.22), 0 14px 28px rgba(0, 0, 0, 0.55);
}
:root:not([data-theme="dark"]) .ca-first-card:hover {
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.9), inset 0 0 28px rgba(212, 175, 55, 0.3), 0 14px 26px rgba(90, 70, 30, 0.4);
}
/* 角色卡（苏丹宫廷风 + 双面翻转选卡） */
.ca-setup-role {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--cardarena-text);
  font-family: inherit;
  font-weight: 400;
  position: relative;
  perspective: 900px;
  -webkit-perspective: 900px;
  aspect-ratio: 3 / 4;
}
.ca-role-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.ca-setup-role.selected .ca-role-inner {
  /* 选中不翻转（保留正面可见），改为上浮 + 金光 */
  transform: translateY(-7px);
}
.ca-setup-role.selected .ca-role-front {
  border-color: var(--cardarena-gold);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.85), inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(212, 175, 55, 0.35), inset 0 0 32px rgba(212, 175, 55, 0.22), 0 14px 28px rgba(0, 0, 0, 0.55);
}
:root:not([data-theme="dark"]) .ca-setup-role.selected .ca-role-front {
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.9), inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(163, 134, 63, 0.3), inset 0 0 28px rgba(212, 175, 55, 0.3), 0 14px 26px rgba(90, 70, 30, 0.4);
}
/* 选中勾记徽章（右上角金色圆形 ✓） */
.ca-setup-role.selected .ca-role-front::after {
  content: '✓';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cardarena-gold-light), var(--cardarena-gold) 60%, var(--cardarena-gold-dark));
  color: #2a1a08;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cardarena-gold-dark);
  z-index: 4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
/* 开战时：未选中的卡牌化为灰烬淡出退场 */
.ca-setup-role.ca-fading {
  animation: ca-ashes-fade 0.72s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}
@keyframes ca-ashes-fade {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  60% { opacity: 0.5; transform: translateY(10px) scale(0.92); filter: blur(2px) grayscale(0.6); }
  100% { opacity: 0; transform: translateY(24px) scale(0.8); filter: blur(5px) grayscale(1); }
}
/* 开战时：选中的卡牌亮起上浮（保留显示） */
.ca-setup-role.ca-chosen {
  transform: translateY(-10px);
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
  transition: transform 0.4s ease, filter 0.4s ease;
}
.ca-role-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 8px;
  overflow: hidden;
}
/* 正面：黑金暗夜（深色主题）+ 放射光芒暗纹 */
.ca-role-front {
  background:
    conic-gradient(from 0deg at 50% 36%, transparent 0deg, rgba(212, 175, 55, 0.05) 15deg, transparent 30deg, rgba(212, 175, 55, 0.05) 45deg, transparent 60deg, rgba(212, 175, 55, 0.05) 75deg, transparent 90deg, rgba(212, 175, 55, 0.05) 105deg, transparent 120deg, rgba(212, 175, 55, 0.05) 135deg, transparent 150deg, rgba(212, 175, 55, 0.05) 165deg, transparent 180deg, rgba(212, 175, 55, 0.05) 195deg, transparent 210deg, rgba(212, 175, 55, 0.05) 225deg, transparent 240deg, rgba(212, 175, 55, 0.05) 255deg, transparent 270deg, rgba(212, 175, 55, 0.05) 285deg, transparent 300deg, rgba(212, 175, 55, 0.05) 315deg, transparent 330deg, rgba(212, 175, 55, 0.05) 345deg, transparent 360deg),
    linear-gradient(160deg, #0d0806 0%, #1d100c 48%, #0a0504 100%);
  border: 1px solid var(--ca-tier-color, #d4af37);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.55),
    inset 0 0 0 5px transparent,
    inset 0 0 0 6px rgba(212, 175, 55, 0.20),
    inset 0 0 26px rgba(212, 175, 55, 0.10),
    0 10px 22px rgba(0, 0, 0, 0.5);
}
/* 正面：浅金羊皮纸（浅色主题） */
:root:not([data-theme="dark"]) .ca-role-front {
  background:
    conic-gradient(from 0deg at 50% 36%, transparent 0deg, rgba(163, 134, 63, 0.06) 15deg, transparent 30deg, rgba(163, 134, 63, 0.06) 45deg, transparent 60deg, rgba(163, 134, 63, 0.06) 75deg, transparent 90deg, rgba(163, 134, 63, 0.06) 105deg, transparent 120deg, rgba(163, 134, 63, 0.06) 135deg, transparent 150deg, rgba(163, 134, 63, 0.06) 165deg, transparent 180deg, rgba(163, 134, 63, 0.06) 195deg, transparent 210deg, rgba(163, 134, 63, 0.06) 225deg, transparent 240deg, rgba(163, 134, 63, 0.06) 255deg, transparent 270deg, rgba(163, 134, 63, 0.06) 285deg, transparent 300deg, rgba(163, 134, 63, 0.06) 315deg, transparent 330deg, rgba(163, 134, 63, 0.06) 345deg, transparent 360deg),
    linear-gradient(165deg, #fdf6e3 0%, #f0e2bd 55%, #e8d5a6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(163, 134, 63, 0.5),
    inset 0 0 0 5px transparent,
    inset 0 0 0 6px rgba(163, 134, 63, 0.18),
    inset 0 0 22px rgba(163, 134, 63, 0.18),
    0 8px 18px rgba(90, 70, 30, 0.25);
}
.ca-setup-role:hover .ca-role-front {
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.7), inset 0 0 30px rgba(212, 175, 55, 0.16), 0 12px 26px rgba(0, 0, 0, 0.55);
}
:root:not([data-theme="dark"]) .ca-setup-role:hover .ca-role-front {
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.7), inset 0 0 26px rgba(163, 134, 63, 0.22), 0 12px 24px rgba(90, 70, 30, 0.35);
}
/* 背面：鎏金「ON DUTY」印版（放射光芒暗纹） */
.ca-role-back {
  transform: rotateY(180deg);
  background:
    conic-gradient(from 0deg at 50% 42%, transparent 0deg, rgba(232, 198, 74, 0.05) 15deg, transparent 30deg, rgba(232, 198, 74, 0.05) 45deg, transparent 60deg, rgba(232, 198, 74, 0.05) 75deg, transparent 90deg, rgba(232, 198, 74, 0.05) 105deg, transparent 120deg, rgba(232, 198, 74, 0.05) 135deg, transparent 150deg, rgba(232, 198, 74, 0.05) 165deg, transparent 180deg, rgba(232, 198, 74, 0.05) 195deg, transparent 210deg, rgba(232, 198, 74, 0.05) 225deg, transparent 240deg, rgba(232, 198, 74, 0.05) 255deg, transparent 270deg, rgba(232, 198, 74, 0.05) 285deg, transparent 300deg, rgba(232, 198, 74, 0.05) 315deg, transparent 330deg, rgba(232, 198, 74, 0.05) 345deg, transparent 360deg),
    linear-gradient(160deg, #2b1608 0%, #4a2410 50%, #1d0e05 100%);
  border: 1px solid #e8c64a;
  box-shadow:
    inset 0 0 0 1px rgba(232, 198, 74, 0.6),
    inset 0 0 0 5px transparent,
    inset 0 0 0 6px rgba(232, 198, 74, 0.22),
    inset 0 0 30px rgba(212, 175, 55, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  text-align: center;
}
:root:not([data-theme="dark"]) .ca-role-back {
  background:
    conic-gradient(from 0deg at 50% 42%, transparent 0deg, rgba(163, 134, 63, 0.06) 15deg, transparent 30deg, rgba(163, 134, 63, 0.06) 45deg, transparent 60deg, rgba(163, 134, 63, 0.06) 75deg, transparent 90deg, rgba(163, 134, 63, 0.06) 105deg, transparent 120deg, rgba(163, 134, 63, 0.06) 135deg, transparent 150deg, rgba(163, 134, 63, 0.06) 165deg, transparent 180deg, rgba(163, 134, 63, 0.06) 195deg, transparent 210deg, rgba(163, 134, 63, 0.06) 225deg, transparent 240deg, rgba(163, 134, 63, 0.06) 255deg, transparent 270deg, rgba(163, 134, 63, 0.06) 285deg, transparent 300deg, rgba(163, 134, 63, 0.06) 315deg, transparent 330deg, rgba(163, 134, 63, 0.06) 345deg, transparent 360deg),
    linear-gradient(165deg, #f5e7c1 0%, #e8d5a6 55%, #dcc18a 100%);
  border-color: #a3863f;
  box-shadow:
    inset 0 0 0 1px rgba(163, 134, 63, 0.55),
    inset 0 0 0 5px transparent,
    inset 0 0 0 6px rgba(163, 134, 63, 0.2),
    inset 0 0 24px rgba(163, 134, 63, 0.2),
    0 8px 18px rgba(90, 70, 30, 0.25);
}
.ca-role-back-name {
  font-family: var(--cardarena-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: #e8c64a;
  margin-bottom: 2px;
}
:root:not([data-theme="dark"]) .ca-role-back-name { color: #7a2a14; }
.ca-role-back-mark {
  font-size: 0.66rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: #d4af37;
  border-top: 1px solid rgba(212, 175, 55, 0.55);
  border-bottom: 1px solid rgba(212, 175, 55, 0.55);
  padding: 4px 12px;
  margin-top: 8px;
  position: relative;
}
.ca-role-back-mark::before,
.ca-role-back-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: rotate(45deg) translateY(-50%);
  background: currentColor;
  opacity: 0.7;
}
.ca-role-back-mark::before { left: 3px; }
.ca-role-back-mark::after { right: 3px; }
:root:not([data-theme="dark"]) .ca-role-back-mark { color: #8a5a14; border-color: rgba(163, 134, 63, 0.6); }
/* 四角卷草纹（双线角花，极繁） */
.ca-role-face .ca-card-corner {
  width: 20px;
  height: 20px;
  z-index: 3;
  opacity: 1;
}
.ca-role-face .ca-card-corner.tl { top: 6px; left: 6px; border-top: 1.5px solid var(--ca-tier-color, var(--cardarena-gold)); border-left: 1.5px solid var(--ca-tier-color, var(--cardarena-gold)); border-top-left-radius: 5px; }
.ca-role-face .ca-card-corner.tr { top: 6px; right: 6px; border-top: 1.5px solid var(--ca-tier-color, var(--cardarena-gold)); border-right: 1.5px solid var(--ca-tier-color, var(--cardarena-gold)); border-top-right-radius: 5px; }
.ca-role-face .ca-card-corner.bl { bottom: 6px; left: 6px; border-bottom: 1.5px solid var(--ca-tier-color, var(--cardarena-gold)); border-left: 1.5px solid var(--ca-tier-color, var(--cardarena-gold)); border-bottom-left-radius: 5px; }
.ca-role-face .ca-card-corner.br { bottom: 6px; right: 6px; border-bottom: 1.5px solid var(--ca-tier-color, var(--cardarena-gold)); border-right: 1.5px solid var(--ca-tier-color, var(--cardarena-gold)); border-bottom-right-radius: 5px; }
/* 角花内圈 + 中心菱形点（双线嵌套） */
.ca-role-face .ca-card-corner::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  opacity: 0.7;
}
.ca-role-face .ca-card-corner.tl::before { top: 3px; left: 3px; }
.ca-role-face .ca-card-corner.tr::before { top: 3px; right: 3px; left: auto; }
.ca-role-face .ca-card-corner.bl::before { bottom: 3px; left: 3px; top: auto; }
.ca-role-face .ca-card-corner.br::before { bottom: 3px; right: 3px; top: auto; left: auto; }
/* 顶部装饰金线（缎带上下双线 + 中心菱形） */
.ca-role-topline {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 2px;
  height: 4px;
  pointer-events: none;
  z-index: 2;
}
.ca-role-topline::before,
.ca-role-topline::after {
  content: '';
  position: absolute;
  top: 1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-tier-color, var(--cardarena-gold)), transparent);
}
.ca-role-topline::before { left: 0; right: 22px; }
.ca-role-topline::after { left: 22px; right: 0; }
.ca-role-topline b {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  background: var(--ca-tier-color, var(--cardarena-gold));
  opacity: 0.6;
}
/* 品级缎带（英文宽字距 + 两侧菱形）—— 缩小字号避免遮挡 */
.ca-role-band {
  text-align: center;
  font-size: 0.5rem;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  padding: 6px 0 4px;
  color: var(--ca-tier-bright, var(--cardarena-gold-light));
  position: relative;
  text-shadow: 0 0 8px rgba(232, 198, 74, 0.4);
}
.ca-role-band::before,
.ca-role-band::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--ca-tier-color, var(--cardarena-gold));
  opacity: 0.8;
}
.ca-role-band::before { left: 10%; }
.ca-role-band::after { right: 10%; }
/* 浅色主题：缎带改用品级深色（亮色在浅金纸上对比度不足 1:1） */
:root:not([data-theme="dark"]) .ca-role-band {
  color: var(--ca-tier-color, var(--cardarena-gold-dark));
  text-shadow: none;
}
/* 中央徽记区：纯几何八角星组（无汉字，极繁）—— 压缩高度避免溢出 */
.ca-role-art {
  flex: 1;
  margin: 5px 0;
  border-radius: 6px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  background: radial-gradient(circle at 50% 42%, var(--ca-tier-glow, rgba(212, 175, 55, 0.16)), transparent 72%);
  overflow: hidden;
}
:root:not([data-theme="dark"]) .ca-role-art {
  background: radial-gradient(circle at 50% 42%, rgba(163, 134, 63, 0.14), transparent 72%);
}
/* 徽记区暗纹：点阵八角星网格 */
.ca-role-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--ca-tier-color, var(--cardarena-gold)) 1px, transparent 1.6px);
  background-size: 12px 12px;
  opacity: 0.10;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 78%);
}
/* 外八角星（大，放射）—— 缩小以匹配压缩后的徽记区 */
.ca-role-star-outer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  background-image: var(--ca-bg-star);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.98;
  filter: drop-shadow(0 0 7px rgba(212, 175, 55, 0.5));
}
/* 内八角星（小，反向旋转 22.5° 交叠） */
.ca-role-star-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%) rotate(22.5deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23000'%3E%3Crect x='45' y='45' width='70' height='70'/%3E%3Crect x='45' y='45' width='70' height='70' transform='rotate(45 80 80)'/%3E%3Ccircle cx='80' cy='80' r='9'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23000'%3E%3Crect x='45' y='45' width='70' height='70'/%3E%3Crect x='45' y='45' width='70' height='70' transform='rotate(45 80 80)'/%3E%3Ccircle cx='80' cy='80' r='9'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: linear-gradient(135deg, #fff4d0, #f6e7ae);
  opacity: 0.35;
}
/* 中心宝石（菱形高光） */
.ca-role-gem {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
  background: linear-gradient(135deg, var(--ca-tier-bright, var(--cardarena-gold-light)), var(--ca-tier-color, var(--cardarena-gold)) 55%, var(--cardarena-gold-dark));
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}
/* 背面徽记（绝对定位居中叠放） */
.ca-role-back { position: relative; }
.ca-role-back .ca-role-star-outer,
.ca-role-back .ca-role-star-inner,
.ca-role-back .ca-role-gem {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.ca-role-back .ca-role-star-outer { width: 84px; height: 84px; opacity: 0.85; }
.ca-role-back .ca-role-star-inner { width: 48px; height: 48px; transform: translate(-50%, -50%) rotate(22.5deg); }
.ca-role-back .ca-role-gem { transform: translate(-50%, -50%) rotate(45deg); }
.ca-role-back-name { position: absolute; left: 0; right: 0; top: 68%; }
.ca-role-back-mark { position: absolute; left: 0; right: 0; top: 78%; }
/* 角色名 / 描述 / 属性 —— 压缩字号与间距确保 3/4 卡面不溢出 */
.ca-setup-role-name {
  font-family: var(--cardarena-serif);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-align: center;
  margin: 1px 0 0;
  color: var(--cardarena-gold-light);
  text-shadow: 0 0 10px rgba(232, 198, 74, 0.35);
  position: relative;
}
.ca-setup-role-name::before,
.ca-setup-role-name::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  opacity: 0.8;
}
.ca-setup-role-name::before { left: 14%; margin-top: -5px; }
.ca-setup-role-name::after { right: 14%; margin-top: -5px; }
:root:not([data-theme="dark"]) .ca-setup-role-name { color: #7a2a14; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.ca-setup-role-intro {
  font-size: 0.66rem;
  line-height: 1.32;
  text-align: center;
  color: #b3966a;
}
:root:not([data-theme="dark"]) .ca-setup-role-intro { color: #6b5633; }
/* 数值宝石框（生命 ❤ / 攻击 ⚔） */
.ca-role-stats {
  margin-top: 6px;
  padding-top: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.ca-role-stats::before {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-tier-color, var(--cardarena-gold)), transparent);
}
.ca-role-stat {
  position: relative;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ca-tier-bright, var(--cardarena-gold-light));
  z-index: 1;
}
.ca-role-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: rotate(45deg) scale(1.06);
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  background: var(--ca-tier-glow, rgba(212, 175, 55, 0.10));
  border-radius: 3px;
  z-index: -1;
}
.ca-role-stat::after {
  content: '';
  position: absolute;
  inset: 2px;
  transform: rotate(45deg) scale(1.06);
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 3px;
  z-index: -1;
}
:root:not([data-theme="dark"]) .ca-role-stat { color: #8a5a14; }
.ca-setup-role-passive {
  font-size: 0.62rem;
  text-align: center;
  margin-top: 5px;
  color: var(--cardarena-muted);
  position: relative;
}
/* 角色卡品级（战力 = 生命 + 攻击） */
.ca-setup-role { --ca-tier-color: var(--ca-tier-bronze); --ca-tier-bright: var(--ca-tier-bronze-bright); --ca-tier-glow: rgba(160, 118, 47, 0.12); }
.ca-setup-role.tier-gold,   .ca-first-card.tier-gold   { --ca-tier-color: var(--ca-tier-gold);   --ca-tier-bright: var(--ca-tier-gold-bright);   --ca-tier-glow: rgba(232, 198, 74, 0.16); }
.ca-setup-role.tier-silver, .ca-first-card.tier-silver { --ca-tier-color: var(--ca-tier-silver); --ca-tier-bright: var(--ca-tier-silver-bright); --ca-tier-glow: rgba(195, 199, 208, 0.12); }
.ca-setup-role.tier-bronze, .ca-first-card.tier-bronze { --ca-tier-color: var(--ca-tier-bronze); --ca-tier-bright: var(--ca-tier-bronze-bright); --ca-tier-glow: rgba(192, 138, 79, 0.12); }
.ca-setup-role.tier-stone,  .ca-first-card.tier-stone  { --ca-tier-color: var(--ca-tier-stone);  --ca-tier-bright: var(--ca-tier-stone-bright);  --ca-tier-glow: rgba(143, 138, 132, 0.10); }
/* 选中翻转闪光特效 */
.ca-role-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
  z-index: 4;
}
.ca-role-shine::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255, 246, 220, 0.55), transparent);
  transform: translateX(-160%) skewX(-18deg);
}
.ca-setup-role.flipping .ca-role-shine::after {
  animation: ca-role-shine-sweep 0.6s ease;
}
@keyframes ca-role-shine-sweep {
  0%   { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(340%) skewX(-18deg); }
}
/* 翻转完全由 .ca-role-inner 的 transition 驱动（0.65s 丝滑曲线），不再叠加 transform 动画避免跳帧 */
.ca-setup-role.selected .ca-role-front {
  border-color: var(--ca-tier-color);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.75), 0 0 18px rgba(212, 175, 55, 0.35), 0 10px 22px rgba(0, 0, 0, 0.5);
}
:root:not([data-theme="dark"]) .ca-setup-role.selected .ca-role-front {
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.75), 0 0 16px rgba(163, 134, 63, 0.35), 0 8px 18px rgba(90, 70, 30, 0.25);
}
.ca-setup-hint {
  margin: 8px 0 0;
  color: var(--cardarena-muted);
  font-size: 0.85rem;
}

/* ===== 通用按钮（鎏金描边，非卡片）===== */
.ca-btn {
  background: transparent;
  border: 1px solid var(--cardarena-border);
  border-radius: 2px;
  padding: 6px 18px;
  font-family: inherit;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--cardarena-text);
  cursor: pointer;
  letter-spacing: 0.05em;
}
.ca-btn:hover:not(:disabled) {
  border-color: var(--cardarena-accent);
  color: var(--cardarena-accent);
}
.ca-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ca-btn-primary {
  border: 1px solid var(--cardarena-primary);
  color: var(--cardarena-primary);
  background: linear-gradient(180deg, rgba(251, 243, 223, 0.92), rgba(212, 175, 55, 0.18));
  box-shadow: 0 2px 8px rgba(122, 22, 38, 0.15);
}
[data-theme="dark"] .ca-btn-primary {
  background: linear-gradient(180deg, rgba(43, 22, 18, 0.92), rgba(212, 175, 55, 0.18));
  color: var(--cardarena-gold);
  border-color: var(--cardarena-gold);
}
.ca-btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--cardarena-gold), var(--cardarena-gold-dark));
  color: #fdf6e3;
  border-color: var(--cardarena-gold-dark);
}
/* 开始界面按钮与计数：半透明底板，确保在背景纹章之上清晰可读 */
#ca-start {
  position: relative;
  z-index: 2;
  padding: 9px 28px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
#ca-count {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 4px 14px;
  margin-top: 10px;
  background: rgba(251, 243, 223, 0.7);
  border-radius: 12px;
  font-weight: 600;
}
[data-theme="dark"] #ca-count {
  background: rgba(43, 22, 18, 0.7);
}

/* ===== 对局布局 ===== */
/* ===== 对战布局：CSS Grid 二维战场（桌面主战场+日志侧栏，移动单列堆叠） ===== */
.ca-layout {
  display: grid;
  gap: 10px;
  /* 默认（移动端）：单列堆叠，顺序与 DOM 一致；minmax(0,1fr) 防 grid item min-width:auto 撑爆窄屏 */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "roster-enemy"
    "zone-enemy"
    "log"
    "zone-player"
    "roster-player"
    "hand"
    "actions";
}
.ca-roster-enemy { grid-area: roster-enemy; }
.ca-zone-enemy { grid-area: zone-enemy; }
.ca-log { grid-area: log; }
.ca-zone-player { grid-area: zone-player; }
.ca-roster-player { grid-area: roster-player; }
.ca-hand { grid-area: hand; }
.ca-actions { grid-area: actions; }

/* 桌面端（≥900px）：主战场 + 日志侧栏，打破「全长条」单调 */
@media (min-width: 900px) {
  .ca-layout {
    grid-template-columns: minmax(0, 1fr) 210px;
    grid-template-areas:
      "roster-enemy  roster-enemy"
      "zone-enemy    log"
      "zone-player   log"
      "roster-player roster-player"
      "hand          hand"
      "actions       actions";
  }
  /* zone 内部：英雄面板 | 随从战场 横向并排（游戏王对峙风）
     DOM 顺序天然形成镜像：zone-enemy=hero|board，zone-player=board|hero
     注意：用 .ca-layout .ca-zone 提升特异性(0,2,0)覆盖基础 .ca-zone column(0,1,0)，避免源序覆盖 */
  .ca-layout .ca-zone {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
  }
  .ca-layout .ca-zone .ca-hero {
    flex: 0 0 172px;
    max-width: 172px;
  }
  .ca-layout .ca-zone .ca-board {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* 窄英雄面板：内容居中，英文宫衔去侧线，星水印改居中淡背景 */
  .ca-layout .ca-zone .ca-hero { text-align: center; }
  .ca-layout .ca-zone .ca-hero-name { font-size: 1.02rem; }
  .ca-layout .ca-zone .ca-hero-en { text-align: center; }
  .ca-layout .ca-zone .ca-hero-en::before, .ca-layout .ca-zone .ca-hero-en::after { display: none; }
  .ca-layout .ca-zone .ca-hero-mana { justify-content: center; }
  .ca-layout .ca-zone .ca-hero-star {
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    opacity: 0.07;
  }
  /* 日志侧栏：跨越两 zone 行，内部滚动 */
  .ca-log {
    display: flex;
    flex-direction: column;
    border: none;
    border-left: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 0;
    padding: 6px 4px 6px 10px;
    background: linear-gradient(180deg, rgba(251, 243, 223, 0.35), rgba(122, 22, 38, 0.04));
    overflow: hidden;
  }
  [data-theme="dark"] .ca-log {
    border-left-color: rgba(232, 198, 74, 0.22);
    background: linear-gradient(180deg, rgba(43, 22, 18, 0.40), rgba(74, 14, 24, 0.12));
  }
  .ca-log .ca-log-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
}
/* 区标签：阿拉伯双线分隔 */
.ca-roster-label, .ca-board-label, .ca-hand-label, .ca-log-label {
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--cardarena-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ca-roster-label::before, .ca-roster-label::after,
.ca-board-label::before, .ca-board-label::after,
.ca-hand-label::before, .ca-hand-label::after,
.ca-log-label::before, .ca-log-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cardarena-gold), transparent);
}
.ca-roster-label::before, .ca-board-label::before,
.ca-hand-label::before, .ca-log-label::before {
  flex: 0 0 24px;
}
/* 角色牌区：无框沉浸式，仅靠标签分隔线 + 留白区分（月圆之夜风） */
.ca-roster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  background-image: none;
}
[data-theme="dark"] .ca-roster {
  background-image: none;
}
.ca-roster-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cardarena-border);
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 0.8rem;
  background: var(--cardarena-bg);
}
.ca-roster-chip.active {
  border-color: var(--cardarena-gold);
  color: var(--cardarena-primary);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.05));
  box-shadow: inset 0 0 0 1px var(--cardarena-gold-dark);
}
.ca-roster-chip.dead {
  opacity: 0.4;
  text-decoration: line-through;
}
.ca-roster-chip.swappable {
  cursor: pointer;
}
.ca-roster-chip.swappable:hover {
  border-color: var(--cardarena-accent);
  color: var(--cardarena-accent);
}
.ca-roster-chip-hp {
  color: var(--cardarena-muted);
}
/* 卡池剩余数徽章（金色宝石胶囊；空时变灰红） */
.ca-roster-chip-pool {
  font-size: 0.6rem;
  font-weight: 700;
  color: #2a1a08;
  background: linear-gradient(180deg, var(--cardarena-gold-light), var(--cardarena-gold));
  border: 1px solid var(--cardarena-gold-dark);
  border-radius: 8px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  line-height: 14px;
  letter-spacing: 0.02em;
}
.ca-roster-chip-pool.empty {
  background: rgba(122, 22, 38, 0.18);
  color: var(--cardarena-muted);
  border-color: var(--cardarena-muted);
}
/* 玩家方存活角色徽章可点击查看卡池 */
.ca-roster-player .ca-roster-chip:not(.dead) .ca-roster-chip-pool { cursor: pointer; transition: filter 0.15s; }
.ca-roster-player .ca-roster-chip:not(.dead) .ca-roster-chip-pool:hover { filter: brightness(1.18); }
/* ===== 英雄（出战角色）：半透明状态面板，无边框（游戏王战场风） ===== */
.ca-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ca-hero {
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(251, 243, 223, 0.55), rgba(122, 22, 38, 0.08));
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .ca-hero {
  background: linear-gradient(180deg, rgba(43, 22, 18, 0.55), rgba(74, 14, 24, 0.20));
}
.ca-hero::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cardarena-gold), transparent);
  opacity: 0.6;
}
.ca-hero-player {
  border: none;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.14), rgba(122, 22, 38, 0.10));
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.35);
}
[data-theme="dark"] .ca-hero-player {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(74, 14, 24, 0.24));
  box-shadow: inset 0 1px 0 rgba(232, 198, 74, 0.30);
}
.ca-hero-name {
  font-family: var(--cardarena-serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 2px;
  color: var(--cardarena-primary);
}
.ca-hero-stats {
  font-size: 0.85rem;
  color: var(--cardarena-muted);
}
/* 法力宝石（菱形） */
.ca-hero-mana {
  font-size: 0.85rem;
  color: var(--cardarena-gold-dark);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .ca-hero-mana { color: var(--cardarena-gold); }
.ca-hero-mana::before {
  content: '';
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, var(--cardarena-gold-light), var(--cardarena-gold-dark));
  transform: rotate(45deg);
  display: inline-block;
  box-shadow: inset 0 0 0 1px var(--cardarena-gold-dark);
}
.ca-hero-passive {
  font-size: 0.8rem;
  color: var(--cardarena-muted);
  margin-top: 2px;
}
/* 卡池指示器（hero 面板内，玩家方可点击）：金色缎带胶囊，点击弹出卡池详情 */
.ca-hero-pool {
  margin-top: 5px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: #2a1a08;
  background: linear-gradient(180deg, rgba(237, 212, 138, 0.7), rgba(201, 162, 39, 0.55));
  border: 1px solid var(--cardarena-gold-dark);
  border-radius: 10px;
  padding: 3px 10px;
  cursor: pointer;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: filter 0.15s, transform 0.15s;
  align-self: center;
}
.ca-hero-pool:hover { filter: brightness(1.14); transform: translateY(-1px); }
.ca-hero-pool.empty {
  color: var(--cardarena-muted);
  background: rgba(122, 22, 38, 0.14);
  border-color: var(--cardarena-muted);
}

/* ===== 随从区：无框，半透明战场底色区分敌我（游戏王战场分区 + 月圆之夜沉浸） ===== */
.ca-board {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 64px;
  padding: 10px 10px 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(122, 22, 38, 0.06), rgba(163, 134, 63, 0.04));
}
[data-theme="dark"] .ca-board {
  background: linear-gradient(180deg, rgba(74, 14, 24, 0.18), rgba(0, 0, 0, 0.10));
}
.ca-board-enemy {
  background: linear-gradient(180deg, rgba(122, 22, 38, 0.10), rgba(163, 134, 63, 0.03));
}
[data-theme="dark"] .ca-board-enemy {
  background: linear-gradient(180deg, rgba(140, 34, 51, 0.22), rgba(0, 0, 0, 0.12));
}
.ca-board-player {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.08), rgba(61, 90, 58, 0.06));
}
[data-theme="dark"] .ca-board-player {
  background: linear-gradient(180deg, rgba(232, 198, 74, 0.10), rgba(61, 90, 58, 0.10));
}
.ca-board-label {
  width: 100%;
}
.ca-minion {
  position: relative;
  min-width: 72px;
  padding: 8px;
  border: 1px solid var(--cardarena-border);
  border-radius: 2px;
  background: var(--cardarena-panel);
  box-shadow: inset 0 0 0 1px var(--cardarena-ink);
  text-align: center;
  font-size: 0.8rem;
}
.ca-minion-name {
  font-size: 0.85rem;
  margin-bottom: 2px;
  color: var(--cardarena-text);
}
.ca-minion-kv {
  font-size: 0.9rem;
  color: var(--cardarena-primary);
  font-weight: 600;
}
.ca-minion-kw {
  font-size: 0.7rem;
  color: var(--cardarena-muted);
}
.ca-minion.disabled,
.ca-hero.disabled {
  opacity: 0.55;
}
.ca-minion.disabled:hover,
.ca-hero.disabled:hover {
  outline: none;
  cursor: default;
}

/* ===== 可攻击/可选中状态 ===== */
.attacker-selectable:not(.disabled) {
  cursor: crosshair;
}
.attacker-selectable:hover {
  outline: 1px solid var(--cardarena-accent);
}
.targetable {
  outline: 2px solid var(--cardarena-target);
  box-shadow: inset 0 0 0 1px var(--cardarena-ink), 0 0 0 4px rgba(212, 175, 55, 0.22);
  cursor: crosshair;
}

/* ===== 日志：无框，仅上下分隔金线（沉浸式留白） ===== */
.ca-log {
  border: none;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 0;
  padding: 6px 4px;
  background: transparent;
  box-shadow: none;
}
[data-theme="dark"] .ca-log {
  border-top-color: rgba(232, 198, 74, 0.22);
  border-bottom-color: rgba(232, 198, 74, 0.22);
}
.ca-log-label {
  margin-bottom: 4px;
}
.ca-log-list {
  max-height: 120px;
  overflow-y: auto;
}
.ca-log-line {
  font-size: 0.8rem;
  color: var(--cardarena-muted);
  line-height: 1.5;
}

/* ===== 手牌：无框，半透明底色衬托卡牌（卡牌本身保留卡牌感） ===== */
.ca-hand {
  border: none;
  border-radius: 8px;
  padding: 8px 8px 10px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.06), rgba(122, 22, 38, 0.04));
  box-shadow: none;
}
[data-theme="dark"] .ca-hand {
  background: linear-gradient(180deg, rgba(232, 198, 74, 0.06), rgba(74, 14, 24, 0.12));
}
.ca-hand-label {
  margin-bottom: 6px;
}
.ca-hand-cards {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* ===== 卡牌（苏丹宫廷风：品级缎带 + 八角星徽 + 宝石费用）===== */
/* 品级主色变量（明暗两套） */
:root {
  --ca-tier-gold: #b8860b;   --ca-tier-gold-bright: #e2b93b;
  --ca-tier-silver: #808fa8; --ca-tier-silver-bright: #cfd6e2;
  --ca-tier-bronze: #a0762f; --ca-tier-bronze-bright: #d4a86e;
  --ca-tier-stone: #7d7a72;  --ca-tier-stone-bright: #b3aea8;
}
[data-theme="dark"] {
  --ca-tier-gold: #e8c64a;   --ca-tier-gold-bright: #f6e7ae;
  --ca-tier-silver: #dfe2e8; --ca-tier-silver-bright: #f2f3f7;
  --ca-tier-bronze: #d9a86e; --ca-tier-bronze-bright: #e2bd8f;
  --ca-tier-stone: #a8a39d;  --ca-tier-stone-bright: #c9c4bd;
}
.ca-card {
  position: relative;
  width: 156px;
  min-height: 200px;
  padding: 10px 11px 10px;
  border: 1px solid var(--cardarena-border);
  border-radius: 10px;
  /* 黑金暗夜（深色主题）+ 放射光芒暗纹 */
  background:
    conic-gradient(from 0deg at 50% 34%, transparent 0deg, rgba(212, 175, 55, 0.04) 15deg, transparent 30deg, rgba(212, 175, 55, 0.04) 45deg, transparent 60deg, rgba(212, 175, 55, 0.04) 75deg, transparent 90deg, rgba(212, 175, 55, 0.04) 105deg, transparent 120deg, rgba(212, 175, 55, 0.04) 135deg, transparent 150deg, rgba(212, 175, 55, 0.04) 165deg, transparent 180deg, rgba(212, 175, 55, 0.04) 195deg, transparent 210deg, rgba(212, 175, 55, 0.04) 225deg, transparent 240deg, rgba(212, 175, 55, 0.04) 255deg, transparent 270deg, rgba(212, 175, 55, 0.04) 285deg, transparent 300deg, rgba(212, 175, 55, 0.04) 315deg, transparent 330deg, rgba(212, 175, 55, 0.04) 345deg, transparent 360deg),
    linear-gradient(160deg, #0d0806 0%, #1d100c 48%, #0a0504 100%);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(212, 175, 55, 0.16), inset 0 0 26px rgba(212, 175, 55, 0.10), 0 10px 22px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-size: 0.8rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* 绳编内框（虚线细框，极繁） */
.ca-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(212, 175, 55, 0.30);
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}
/* 浅金羊皮纸（浅色主题） */
:root:not([data-theme="dark"]) .ca-card {
  background:
    conic-gradient(from 0deg at 50% 34%, transparent 0deg, rgba(163, 134, 63, 0.05) 15deg, transparent 30deg, rgba(163, 134, 63, 0.05) 45deg, transparent 60deg, rgba(163, 134, 63, 0.05) 75deg, transparent 90deg, rgba(163, 134, 63, 0.05) 105deg, transparent 120deg, rgba(163, 134, 63, 0.05) 135deg, transparent 150deg, rgba(163, 134, 63, 0.05) 165deg, transparent 180deg, rgba(163, 134, 63, 0.05) 195deg, transparent 210deg, rgba(163, 134, 63, 0.05) 225deg, transparent 240deg, rgba(163, 134, 63, 0.05) 255deg, transparent 270deg, rgba(163, 134, 63, 0.05) 285deg, transparent 300deg, rgba(163, 134, 63, 0.05) 315deg, transparent 330deg, rgba(163, 134, 63, 0.05) 345deg, transparent 360deg),
    linear-gradient(165deg, #fdf6e3 0%, #f0e2bd 55%, #e8d5a6 100%);
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.5), inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(163, 134, 63, 0.14), inset 0 0 22px rgba(163, 134, 63, 0.18), 0 8px 18px rgba(90, 70, 30, 0.25);
}
:root:not([data-theme="dark"]) .ca-card::before {
  border-color: rgba(163, 134, 63, 0.28);
}
.ca-card:hover:not(.disabled) {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.7), inset 0 0 30px rgba(212, 175, 55, 0.16), 0 12px 26px rgba(0, 0, 0, 0.55);
}
:root:not([data-theme="dark"]) .ca-card:hover:not(.disabled) {
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.7), inset 0 0 26px rgba(163, 134, 63, 0.22), 0 12px 24px rgba(90, 70, 30, 0.35);
}
.ca-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* 四角卷草纹角饰（L 形金线） */
.ca-card-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  opacity: 0.85;
  pointer-events: none;
}
.ca-card-corner.tl { top: 7px; left: 7px; border-top: 1px solid var(--ca-tier-color, var(--cardarena-gold)); border-left: 1px solid var(--ca-tier-color, var(--cardarena-gold)); border-top-left-radius: 4px; }
.ca-card-corner.tr { top: 7px; right: 7px; border-top: 1px solid var(--ca-tier-color, var(--cardarena-gold)); border-right: 1px solid var(--ca-tier-color, var(--cardarena-gold)); border-top-right-radius: 4px; }
.ca-card-corner.bl { bottom: 7px; left: 7px; border-bottom: 1px solid var(--ca-tier-color, var(--cardarena-gold)); border-left: 1px solid var(--ca-tier-color, var(--cardarena-gold)); border-bottom-left-radius: 4px; }
.ca-card-corner.br { bottom: 7px; right: 7px; border-bottom: 1px solid var(--ca-tier-color, var(--cardarena-gold)); border-right: 1px solid var(--ca-tier-color, var(--cardarena-gold)); border-bottom-right-radius: 4px; }
/* 品级缎带（顶部居中小字 + 渐隐金线） */
.ca-card-tier-band {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  padding: 1px 0 5px;
  color: var(--ca-tier-color, var(--cardarena-gold));
  position: relative;
}
.ca-card-tier-band::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-tier-color, var(--cardarena-gold)), transparent);
}
.ca-card-tier-band::before {
  content: '';
  position: absolute;
  left: 12%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  transform: rotate(45deg);
  background: var(--ca-tier-color, var(--cardarena-gold));
  opacity: 0.7;
}
/* 费用宝石（圆形径向高光 + 放射星芒） */
.ca-card-cost {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c0f0c;
  background:
    conic-gradient(from 0deg at 50% 50%, rgba(212, 175, 55, 0.9) 0deg, rgba(212, 175, 55, 0.12) 6deg, rgba(212, 175, 55, 0.9) 12deg, rgba(212, 175, 55, 0.12) 18deg, rgba(212, 175, 55, 0.9) 24deg, rgba(212, 175, 55, 0.12) 30deg, rgba(212, 175, 55, 0.9) 36deg, rgba(212, 175, 55, 0.12) 42deg, rgba(212, 175, 55, 0.9) 48deg, rgba(212, 175, 55, 0.12) 54deg, rgba(212, 175, 55, 0.9) 60deg, rgba(212, 175, 55, 0.12) 66deg, rgba(212, 175, 55, 0.9) 72deg, rgba(212, 175, 55, 0.12) 78deg, rgba(212, 175, 55, 0.9) 84deg, rgba(212, 175, 55, 0.12) 90deg, rgba(212, 175, 55, 0.9) 96deg, rgba(212, 175, 55, 0.12) 102deg, rgba(212, 175, 55, 0.9) 108deg, rgba(212, 175, 55, 0.12) 114deg, rgba(212, 175, 55, 0.9) 120deg, rgba(212, 175, 55, 0.12) 126deg, rgba(212, 175, 55, 0.9) 132deg, rgba(212, 175, 55, 0.12) 138deg, rgba(212, 175, 55, 0.9) 144deg, rgba(212, 175, 55, 0.12) 150deg, rgba(212, 175, 55, 0.9) 156deg, rgba(212, 175, 55, 0.12) 162deg, rgba(212, 175, 55, 0.9) 168deg, rgba(212, 175, 55, 0.12) 174deg, rgba(212, 175, 55, 0.9) 180deg, rgba(212, 175, 55, 0.12) 186deg, rgba(212, 175, 55, 0.9) 192deg, rgba(212, 175, 55, 0.12) 198deg, rgba(212, 175, 55, 0.9) 204deg, rgba(212, 175, 55, 0.12) 210deg, rgba(212, 175, 55, 0.9) 216deg, rgba(212, 175, 55, 0.12) 222deg, rgba(212, 175, 55, 0.9) 228deg, rgba(212, 175, 55, 0.12) 234deg, rgba(212, 175, 55, 0.9) 240deg, rgba(212, 175, 55, 0.12) 246deg, rgba(212, 175, 55, 0.9) 252deg, rgba(212, 175, 55, 0.12) 258deg, rgba(212, 175, 55, 0.9) 264deg, rgba(212, 175, 55, 0.12) 270deg, rgba(212, 175, 55, 0.9) 276deg, rgba(212, 175, 55, 0.12) 282deg, rgba(212, 175, 55, 0.9) 288deg, rgba(212, 175, 55, 0.12) 294deg, rgba(212, 175, 55, 0.9) 300deg, rgba(212, 175, 55, 0.12) 306deg, rgba(212, 175, 55, 0.9) 312deg, rgba(212, 175, 55, 0.12) 318deg, rgba(212, 175, 55, 0.9) 324deg, rgba(212, 175, 55, 0.12) 330deg, rgba(212, 175, 55, 0.9) 336deg, rgba(212, 175, 55, 0.12) 342deg, rgba(212, 175, 55, 0.9) 348deg, rgba(212, 175, 55, 0.12) 354deg, rgba(212, 175, 55, 0.9) 360deg),
    radial-gradient(circle at 35% 30%, #f6e7ae, #d4af37 55%, #6b5217);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35), 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #f6e7ae;
  z-index: 2;
}
.ca-card-cost::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(212, 175, 55, 0.5) 8deg, transparent 16deg, rgba(212, 175, 55, 0.5) 24deg, transparent 32deg, rgba(212, 175, 55, 0.5) 40deg, transparent 48deg, rgba(212, 175, 55, 0.5) 56deg, transparent 64deg, rgba(212, 175, 55, 0.5) 72deg, transparent 80deg, rgba(212, 175, 55, 0.5) 88deg, transparent 96deg, rgba(212, 175, 55, 0.5) 104deg, transparent 112deg, rgba(212, 175, 55, 0.5) 120deg, transparent 128deg, rgba(212, 175, 55, 0.5) 136deg, transparent 144deg, rgba(212, 175, 55, 0.5) 152deg, transparent 160deg, rgba(212, 175, 55, 0.5) 168deg, transparent 176deg, rgba(212, 175, 55, 0.5) 184deg, transparent 192deg, rgba(212, 175, 55, 0.5) 200deg, transparent 208deg, rgba(212, 175, 55, 0.5) 216deg, transparent 224deg, rgba(212, 175, 55, 0.5) 232deg, transparent 240deg, rgba(212, 175, 55, 0.5) 248deg, transparent 256deg, rgba(212, 175, 55, 0.5) 264deg, transparent 272deg, rgba(212, 175, 55, 0.5) 280deg, transparent 288deg, rgba(212, 175, 55, 0.5) 296deg, transparent 304deg, rgba(212, 175, 55, 0.5) 312deg, transparent 320deg, rgba(212, 175, 55, 0.5) 328deg, transparent 336deg, rgba(212, 175, 55, 0.5) 344deg, transparent 352deg, rgba(212, 175, 55, 0.5) 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 55%, black 58%, black 72%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 55%, black 58%, black 72%, transparent 76%);
  z-index: -1;
  animation: ca-cost-spin 18s linear infinite;
}
:root:not([data-theme="dark"]) .ca-card-cost {
  color: #3a2a1a;
  background: radial-gradient(circle at 35% 30%, #fff7e0, #d9b75e 55%, #9c7c2f);
  box-shadow: 0 0 0 2px rgba(163, 134, 63, 0.35), 0 3px 8px rgba(90, 70, 30, 0.35), inset 0 0 0 1px #fff7e0;
}
/* 卡面徽记区（中央八角星徽） */
.ca-card-art {
  flex: 1;
  margin: 9px 0;
  border-radius: 6px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  background: radial-gradient(circle at 50% 42%, var(--ca-tier-glow, rgba(212, 175, 55, 0.16)), transparent 72%);
}
:root:not([data-theme="dark"]) .ca-card-art {
  background: radial-gradient(circle at 50% 42%, rgba(163, 134, 63, 0.14), transparent 72%);
}
.ca-card-star {
  width: 76px;
  height: 76px;
  background-image: var(--ca-bg-star);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.98;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.45));
}
/* 卡名 / 描述 / 攻血 */
.ca-card-name {
  text-align: center;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  margin: 0 0 3px;
  font-weight: 600;
  color: var(--cardarena-gold-light);
  text-shadow: 0 0 10px rgba(232, 198, 74, 0.35);
}
:root:not([data-theme="dark"]) .ca-card-name {
  color: #7a2a14;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ca-card-desc {
  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
  color: #b3966a;
}
:root:not([data-theme="dark"]) .ca-card-desc {
  color: #6b5633;
}
.ca-card-kv {
  margin-top: 7px;
  padding-top: 5px;
  position: relative;
  text-align: center;
  font-size: 1.18rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--ca-tier-bright, var(--cardarena-gold-light));
}
.ca-card-kv::before {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-tier-color, var(--cardarena-gold)), transparent);
}
:root:not([data-theme="dark"]) .ca-card-kv {
  color: #8a5a14;
}
/* 品级应用（描边 / 缎带 / 星徽 / 攻血线共用 --ca-tier-* 变量） */
.ca-card-tier-gold   { --ca-tier-color: var(--ca-tier-gold);   --ca-tier-bright: var(--ca-tier-gold-bright);   --ca-tier-glow: rgba(232, 198, 74, 0.16); border-color: var(--ca-tier-gold); }
.ca-card-tier-silver { --ca-tier-color: var(--ca-tier-silver); --ca-tier-bright: var(--ca-tier-silver-bright); --ca-tier-glow: rgba(195, 199, 208, 0.12); border-color: var(--ca-tier-silver); }
.ca-card-tier-bronze { --ca-tier-color: var(--ca-tier-bronze); --ca-tier-bright: var(--ca-tier-bronze-bright); --ca-tier-glow: rgba(192, 138, 79, 0.12); border-color: var(--ca-tier-bronze); }
.ca-card-tier-stone  { --ca-tier-color: var(--ca-tier-stone);  --ca-tier-bright: var(--ca-tier-stone-bright);  --ca-tier-glow: rgba(143, 138, 132, 0.10); border-color: var(--ca-tier-stone); }
:root:not([data-theme="dark"]) .ca-card-tier-gold   { --ca-tier-glow: rgba(184, 134, 11, 0.14); }
:root:not([data-theme="dark"]) .ca-card-tier-silver { --ca-tier-glow: rgba(128, 143, 168, 0.12); }
:root:not([data-theme="dark"]) .ca-card-tier-bronze { --ca-tier-glow: rgba(160, 118, 47, 0.12); }
:root:not([data-theme="dark"]) .ca-card-tier-stone  { --ca-tier-glow: rgba(125, 122, 114, 0.10); }

/* 随从品级（按战力） */
.ca-minion-tier-gold { border-color: var(--cardarena-gold); box-shadow: inset 0 0 0 1px var(--cardarena-gold-dark); }
.ca-minion-tier-silver { border-color: #b9bcc4; box-shadow: inset 0 0 0 1px #8f939c; }
.ca-minion-tier-bronze { border-color: #b08050; box-shadow: inset 0 0 0 1px #8a5f36; }
.ca-minion-tier-stone { border-color: #9a928a; box-shadow: inset 0 0 0 1px #736c64; }

/* ===== 操作栏 ===== */
.ca-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--cardarena-ink);
  padding-top: 10px;
}
.ca-actions-info {
  font-size: 0.85rem;
  color: var(--cardarena-muted);
}

/* ===== 结算遮罩 ===== */
.ca-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 15, 12, 0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.ca-overlay-box {
  background: var(--cardarena-panel);
  border: 1px solid var(--cardarena-gold);
  border-radius: 2px;
  padding: 28px 40px;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--cardarena-gold-dark), 0 12px 40px rgba(0, 0, 0, 0.5);
  background-image: var(--cardarena-pattern), linear-gradient(180deg, rgba(255, 250, 230, 0.4), rgba(122, 22, 38, 0.10));
  position: relative;
}
.ca-overlay-box::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cardarena-gold), transparent);
}
.ca-overlay-title {
  font-family: var(--cardarena-serif);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 8px;
  color: var(--cardarena-primary);
  letter-spacing: 0.12em;
}
.ca-overlay-sub {
  margin: 0 0 18px;
  color: var(--cardarena-muted);
  font-size: 0.9rem;
}

/* ===== 卡池详情弹窗（苏丹宫廷风羊皮纸面板） ===== */
.ca-pool-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 3, 0.74);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.ca-pool-modal {
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  border: 1px solid var(--cardarena-gold-dark);
  border-radius: 6px;
  padding: 18px 16px 14px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.5), inset 0 0 0 5px rgba(212, 175, 55, 0.18), 0 14px 44px rgba(0, 0, 0, 0.55);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.14), transparent 60%),
    var(--cardarena-pattern),
    linear-gradient(165deg, #fdf6e3 0%, #f0e2bd 55%, #e8d5a6 100%);
}
[data-theme="dark"] .ca-pool-modal {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.10), transparent 60%),
    var(--cardarena-pattern-dark),
    linear-gradient(160deg, #1d100c 0%, #2b1612 50%, #0d0806 100%);
}
.ca-pool-modal-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  padding-bottom: 8px;
}
.ca-pool-modal-name {
  font-family: var(--cardarena-serif);
  font-weight: 600;
  font-size: 1.22rem;
  color: var(--cardarena-primary);
  letter-spacing: 0.08em;
}
.ca-pool-modal-count {
  font-size: 0.82rem;
  color: var(--cardarena-gold-dark);
  letter-spacing: 0.1em;
  font-weight: 600;
}
[data-theme="dark"] .ca-pool-modal-count { color: var(--cardarena-gold); }
.ca-pool-modal-sub {
  text-align: center;
  font-size: 0.72rem;
  color: var(--cardarena-muted);
  margin: 6px 0 12px;
}
.ca-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.ca-pool-card {
  position: relative;
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  border-radius: 5px;
  padding: 6px 6px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(160deg, #fdf6e3, #e8d5a6);
}
[data-theme="dark"] .ca-pool-card {
  background-image: linear-gradient(160deg, #1d100c, #0d0806);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.22), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.ca-pool-card-cost {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cardarena-gold-light), var(--cardarena-gold) 60%, var(--cardarena-gold-dark));
  color: #2a1a08;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cardarena-gold-dark);
}
.ca-pool-card-band {
  font-size: 0.54rem;
  letter-spacing: 0.3em;
  color: var(--ca-tier-color, var(--cardarena-gold));
  margin: 3px 0 2px;
}
.ca-pool-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cardarena-text);
  margin-bottom: 2px;
}
.ca-pool-card-kv, .ca-pool-card-type {
  font-size: 0.68rem;
  color: var(--cardarena-crimson);
  font-weight: 700;
  margin-bottom: 3px;
}
.ca-pool-card-desc {
  font-size: 0.6rem;
  line-height: 1.3;
  color: var(--cardarena-muted);
}
.ca-pool-card-count {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: var(--cardarena-crimson);
  border-radius: 8px;
  padding: 0 5px;
  line-height: 14px;
}
.ca-pool-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 12px;
  color: var(--cardarena-muted);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}
.ca-pool-close { display: block; margin: 0 auto; }

/* ===== 移动端 ===== */
@media (max-width: 640px) {
  #cardarena-app {
    padding: 10px;
    border: none;
    box-shadow: none;
  }
  .ca-card {
    width: 128px;
    min-height: 168px;
    padding: 8px 9px 8px;
  }
  .ca-card-star {
    width: 60px;
    height: 60px;
  }
  .ca-card-name {
    font-size: 0.92rem;
  }
  .ca-card-kv {
    font-size: 1rem;
  }
  .ca-minion {
    min-width: 60px;
  }
}

/* ==========================================================================
   v5.13 极繁深化：舞台外框 / 分区面板 / 徽章光环 / 随从卡 / 战斗特效
   ========================================================================== */
:root {
  /* 通用 SVG mask 构件（黑形 + background 上色，随主题变量变色） */
  /* 四角纹章：同一图案四个旋转方向，贴合四角 */
  --ca-mask-corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg transform='rotate(0 36 36)'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 71 L6 6 L71 6'/%3E%3Cpath d='M16 71 L16 16 L71 16'/%3E%3Cpath d='M25 47 A22 22 0 0 1 47 25'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Crect x='7.5' y='7.5' width='10' height='10' transform='rotate(45 12.5 12.5)'/%3E%3Ccircle cx='19' cy='33' r='2.2'/%3E%3Ccircle cx='33' cy='19' r='2.2'/%3E%3Ccircle cx='14' cy='52' r='1.8'/%3E%3Ccircle cx='52' cy='14' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --ca-mask-corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg transform='rotate(90 36 36)'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 71 L6 6 L71 6'/%3E%3Cpath d='M16 71 L16 16 L71 16'/%3E%3Cpath d='M25 47 A22 22 0 0 1 47 25'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Crect x='7.5' y='7.5' width='10' height='10' transform='rotate(45 12.5 12.5)'/%3E%3Ccircle cx='19' cy='33' r='2.2'/%3E%3Ccircle cx='33' cy='19' r='2.2'/%3E%3Ccircle cx='14' cy='52' r='1.8'/%3E%3Ccircle cx='52' cy='14' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --ca-mask-corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg transform='rotate(270 36 36)'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 71 L6 6 L71 6'/%3E%3Cpath d='M16 71 L16 16 L71 16'/%3E%3Cpath d='M25 47 A22 22 0 0 1 47 25'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Crect x='7.5' y='7.5' width='10' height='10' transform='rotate(45 12.5 12.5)'/%3E%3Ccircle cx='19' cy='33' r='2.2'/%3E%3Ccircle cx='33' cy='19' r='2.2'/%3E%3Ccircle cx='14' cy='52' r='1.8'/%3E%3Ccircle cx='52' cy='14' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --ca-mask-corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg transform='rotate(180 36 36)'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 71 L6 6 L71 6'/%3E%3Cpath d='M16 71 L16 16 L71 16'/%3E%3Cpath d='M25 47 A22 22 0 0 1 47 25'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Crect x='7.5' y='7.5' width='10' height='10' transform='rotate(45 12.5 12.5)'/%3E%3Ccircle cx='19' cy='33' r='2.2'/%3E%3Ccircle cx='33' cy='19' r='2.2'/%3E%3Ccircle cx='14' cy='52' r='1.8'/%3E%3Ccircle cx='52' cy='14' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --ca-mask-halo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23000'%3E%3Ccircle cx='60' cy='11' r='3.4'/%3E%3Ccircle cx='94.6' cy='25.4' r='3.4'/%3E%3Ccircle cx='109' cy='60' r='3.4'/%3E%3Ccircle cx='94.6' cy='94.6' r='3.4'/%3E%3Ccircle cx='60' cy='109' r='3.4'/%3E%3Ccircle cx='25.4' cy='94.6' r='3.4'/%3E%3Ccircle cx='11' cy='60' r='3.4'/%3E%3Ccircle cx='25.4' cy='25.4' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
  /* 八角星徽（精细版，23 元素叠加：外层八角星 → 8 放射光芒 → 中层旋转星 → 双圆环 → 大菱形 → 四向大珠 → 对角小珠 → 核心菱形） */
  --ca-mask-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23000'%3E%3Crect x='32' y='32' width='96' height='96'/%3E%3Crect x='32' y='32' width='96' height='96' transform='rotate(45 80 80)'/%3E%3Cpath d='M80 20 L87 44 L73 44 Z'/%3E%3Cpath d='M80 20 L87 44 L73 44 Z' transform='rotate(45 80 80)'/%3E%3Cpath d='M80 20 L87 44 L73 44 Z' transform='rotate(90 80 80)'/%3E%3Cpath d='M80 20 L87 44 L73 44 Z' transform='rotate(135 80 80)'/%3E%3Cpath d='M80 20 L87 44 L73 44 Z' transform='rotate(180 80 80)'/%3E%3Cpath d='M80 20 L87 44 L73 44 Z' transform='rotate(225 80 80)'/%3E%3Cpath d='M80 20 L87 44 L73 44 Z' transform='rotate(270 80 80)'/%3E%3Cpath d='M80 20 L87 44 L73 44 Z' transform='rotate(315 80 80)'/%3E%3Crect x='46' y='46' width='68' height='68' transform='rotate(22.5 80 80)'/%3E%3Ccircle cx='80' cy='80' r='30' fill='none' stroke='%23000' stroke-width='3.5'/%3E%3Ccircle cx='80' cy='80' r='16' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M80 58 L92 80 L80 102 L68 80 Z'/%3E%3Ccircle cx='80' cy='12' r='5'/%3E%3Ccircle cx='80' cy='148' r='5'/%3E%3Ccircle cx='12' cy='80' r='5'/%3E%3Ccircle cx='148' cy='80' r='5'/%3E%3Ccircle cx='27' cy='27' r='3'/%3E%3Ccircle cx='133' cy='27' r='3'/%3E%3Ccircle cx='27' cy='133' r='3'/%3E%3Ccircle cx='133' cy='133' r='3'/%3E%3Cpath d='M80 70 L85 80 L80 90 L75 80 Z'/%3E%3C/g%3E%3C/svg%3E");
  /* 八角星徽（彩色渐变立体版，background-image 直填，非 mask：渐变填充+深金描边+半透明光芒+径向宝石珠+高光，呈现立体精细感）
     浅色主题：深金调（浅金羊皮纸底显眼） */
  --ca-bg-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e7ae'/%3E%3Cstop offset='0.45' stop-color='%23c9a227'/%3E%3Cstop offset='1' stop-color='%236a4a14'/%3E%3C/linearGradient%3E%3CradialGradient id='gem' cx='0.5' cy='0.35' r='0.7'%3E%3Cstop offset='0' stop-color='%23fff4d0'/%3E%3Cstop offset='0.6' stop-color='%23d4af37'/%3E%3Cstop offset='1' stop-color='%236a4a14'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='32' y='32' width='96' height='96' fill='url(%23g)' stroke='%233a2810' stroke-width='1.2'/%3E%3Crect x='32' y='32' width='96' height='96' transform='rotate(45 80 80)' fill='url(%23g)' stroke='%233a2810' stroke-width='1.2'/%3E%3Cg fill='%23fff4d0' opacity='0.32'%3E%3Cpath d='M80 16 L88 44 L72 44 Z'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(45 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(90 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(135 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(180 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(225 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(270 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(315 80 80)'/%3E%3C/g%3E%3Crect x='46' y='46' width='68' height='68' transform='rotate(22.5 80 80)' fill='none' stroke='%23f6e7ae' stroke-width='1.5' opacity='0.85'/%3E%3Ccircle cx='80' cy='80' r='32' fill='none' stroke='%238a6a2f' stroke-width='2'/%3E%3Ccircle cx='80' cy='80' r='18' fill='none' stroke='%233a2810' stroke-width='1.5'/%3E%3Cpath d='M80 54 L94 80 L80 106 L66 80 Z' fill='url(%23gem)' stroke='%233a2810' stroke-width='1'/%3E%3Ccircle cx='80' cy='10' r='5.5' fill='url(%23gem)' stroke='%233a2810' stroke-width='0.8'/%3E%3Ccircle cx='80' cy='150' r='5.5' fill='url(%23gem)' stroke='%233a2810' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='80' r='5.5' fill='url(%23gem)' stroke='%233a2810' stroke-width='0.8'/%3E%3Ccircle cx='150' cy='80' r='5.5' fill='url(%23gem)' stroke='%233a2810' stroke-width='0.8'/%3E%3Ccircle cx='26' cy='26' r='3' fill='%23c9a227' stroke='%233a2810' stroke-width='0.5'/%3E%3Ccircle cx='134' cy='26' r='3' fill='%23c9a227' stroke='%233a2810' stroke-width='0.5'/%3E%3Ccircle cx='26' cy='134' r='3' fill='%23c9a227' stroke='%233a2810' stroke-width='0.5'/%3E%3Ccircle cx='134' cy='134' r='3' fill='%23c9a227' stroke='%233a2810' stroke-width='0.5'/%3E%3Cpath d='M80 70 L86 80 L80 90 L74 80 Z' fill='%23fff4d0' opacity='0.9'/%3E%3C/svg%3E");
}
/* 深色主题：亮金调（黑金暗夜底显眼），渐变更亮、描边更深 */
[data-theme="dark"] {
  --ca-bg-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4d0'/%3E%3Cstop offset='0.45' stop-color='%23e8c64a'/%3E%3Cstop offset='1' stop-color='%238a6a2f'/%3E%3C/linearGradient%3E%3CradialGradient id='gem' cx='0.5' cy='0.35' r='0.7'%3E%3Cstop offset='0' stop-color='%23fff8e0'/%3E%3Cstop offset='0.6' stop-color='%23f6e7ae'/%3E%3Cstop offset='1' stop-color='%238a6a2f'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='32' y='32' width='96' height='96' fill='url(%23g)' stroke='%231a0e04' stroke-width='1.2'/%3E%3Crect x='32' y='32' width='96' height='96' transform='rotate(45 80 80)' fill='url(%23g)' stroke='%231a0e04' stroke-width='1.2'/%3E%3Cg fill='%23fff8e0' opacity='0.35'%3E%3Cpath d='M80 16 L88 44 L72 44 Z'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(45 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(90 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(135 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(180 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(225 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(270 80 80)'/%3E%3Cpath d='M80 16 L88 44 L72 44 Z' transform='rotate(315 80 80)'/%3E%3C/g%3E%3Crect x='46' y='46' width='68' height='68' transform='rotate(22.5 80 80)' fill='none' stroke='%23f6e7ae' stroke-width='1.5' opacity='0.85'/%3E%3Ccircle cx='80' cy='80' r='32' fill='none' stroke='%23e8c64a' stroke-width='2'/%3E%3Ccircle cx='80' cy='80' r='18' fill='none' stroke='%231a0e04' stroke-width='1.5'/%3E%3Cpath d='M80 54 L94 80 L80 106 L66 80 Z' fill='url(%23gem)' stroke='%231a0e04' stroke-width='1'/%3E%3Ccircle cx='80' cy='10' r='5.5' fill='url(%23gem)' stroke='%231a0e04' stroke-width='0.8'/%3E%3Ccircle cx='80' cy='150' r='5.5' fill='url(%23gem)' stroke='%231a0e04' stroke-width='0.8'/%3E%3Ccircle cx='10' cy='80' r='5.5' fill='url(%23gem)' stroke='%231a0e04' stroke-width='0.8'/%3E%3Ccircle cx='150' cy='80' r='5.5' fill='url(%23gem)' stroke='%231a0e04' stroke-width='0.8'/%3E%3Ccircle cx='26' cy='26' r='3' fill='%23e8c64a' stroke='%231a0e04' stroke-width='0.5'/%3E%3Ccircle cx='134' cy='26' r='3' fill='%23e8c64a' stroke='%231a0e04' stroke-width='0.5'/%3E%3Ccircle cx='26' cy='134' r='3' fill='%23e8c64a' stroke='%231a0e04' stroke-width='0.5'/%3E%3Ccircle cx='134' cy='134' r='3' fill='%23e8c64a' stroke='%231a0e04' stroke-width='0.5'/%3E%3Cpath d='M80 70 L86 80 L80 90 L74 80 Z' fill='%23fff8e0' opacity='0.9'/%3E%3C/svg%3E");
}
@keyframes ca-cost-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ca-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- 舞台外框：四角纹章 + 边线珠串（移至背景层，不遮挡交互元素）---- */
.ca-stage {
  position: relative;
  max-width: 968px;
  margin: 0 auto;
  padding: 10px 10px 6px;
}
/* 四角纹章：z-index 0 + 极低 opacity，纯背景水印，绝不遮挡开始按钮和已选显示 */
.ca-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--cardarena-gold);
  -webkit-mask-image: var(--ca-mask-corner-tl), var(--ca-mask-corner-tr), var(--ca-mask-corner-bl), var(--ca-mask-corner-br);
  -webkit-mask-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px;
  -webkit-mask-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px);
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--ca-mask-corner-tl), var(--ca-mask-corner-tr), var(--ca-mask-corner-bl), var(--ca-mask-corner-br);
  mask-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px;
  mask-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px);
  mask-repeat: no-repeat;
  opacity: 0.12;
}
.ca-stage::after {
  content: '';
  position: absolute;
  inset: 12px;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 11px, var(--cardarena-ink) 11px 13px),
    repeating-linear-gradient(90deg, transparent 0 11px, var(--cardarena-ink) 11px 13px),
    repeating-linear-gradient(0deg, transparent 0 11px, var(--cardarena-ink) 11px 13px),
    repeating-linear-gradient(0deg, transparent 0 11px, var(--cardarena-ink) 11px 13px);
  background-size: calc(100% - 60px) 1px, calc(100% - 60px) 1px, 1px calc(100% - 60px), 1px calc(100% - 60px);
  background-position: 30px 0, 30px 100%, 0 30px, 100% 30px;
  background-repeat: no-repeat;
  opacity: 0.18;
}
[data-theme="dark"] .ca-stage::before { background: var(--cardarena-gold-light); opacity: 0.10; }
/* 确保舞台内所有真实内容（标题 + app）位于纹章之上 */
.ca-stage > * { position: relative; z-index: 1; }

/* ---- 分区标签中心菱形 ---- */
.ca-label-gem {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--cardarena-gold);
  opacity: 0.85;
}
[data-theme="dark"] .ca-label-gem { background: var(--cardarena-gold-light); }

/* ---- 分区面板：移除内框与四角金珠，改用底色微差/分隔线/留白区分（去框化） ---- */
.ca-roster, .ca-board, .ca-hand, .ca-log {
  position: relative;
}
/* 原 ::before 内框 + 四角金珠已移除：避免「所有区域都是框」的拥挤感 */
.ca-board {
  align-items: center;
  gap: 10px;
  min-height: 168px;
}

/* ---- 徽章光环层：外珠环 + 双圆环（角色卡 / 手牌卡通用） ---- */
.ca-role-halo, .ca-card-halo, .ca-minion-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--ca-tier-color, var(--cardarena-gold));
  -webkit-mask-image: var(--ca-mask-halo);
  mask-image: var(--ca-mask-halo);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.5;
  animation: ca-spin 55s linear infinite;
  pointer-events: none;
}
.ca-role-halo { width: 124px; height: 124px; }
.ca-card-halo { width: 100px; height: 100px; }
.ca-minion-halo { width: 74px; height: 74px; }
.ca-role-ring, .ca-card-ring, .ca-minion-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--ca-tier-color, var(--cardarena-gold));
  border-radius: 50%;
  opacity: 0.45;
  pointer-events: none;
}
.ca-role-ring { width: 104px; height: 104px; }
.ca-card-ring { width: 84px; height: 84px; }
.ca-minion-ring { width: 60px; height: 60px; }
.ca-role-ring::after, .ca-card-ring::after, .ca-minion-ring::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  border-radius: 50%;
  opacity: 0.5;
}

/* ---- 随从卡：与手牌卡同族的长方形卡面 ---- */
.ca-minion {
  position: relative;
  width: 112px;
  min-height: 150px;
  padding: 8px 8px 7px;
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  border-radius: 10px;
  background:
    conic-gradient(from 0deg at 50% 34%, transparent 0deg, rgba(212, 175, 55, 0.035) 15deg, transparent 30deg, rgba(212, 175, 55, 0.035) 45deg, transparent 60deg, rgba(212, 175, 55, 0.035) 75deg, transparent 90deg, rgba(212, 175, 55, 0.035) 105deg, transparent 120deg, rgba(212, 175, 55, 0.035) 135deg, transparent 150deg, rgba(212, 175, 55, 0.035) 165deg, transparent 180deg, rgba(212, 175, 55, 0.035) 195deg, transparent 210deg, rgba(212, 175, 55, 0.035) 225deg, transparent 240deg, rgba(212, 175, 55, 0.035) 255deg, transparent 270deg, rgba(212, 175, 55, 0.035) 285deg, transparent 300deg, rgba(212, 175, 55, 0.035) 315deg, transparent 330deg, rgba(212, 175, 55, 0.035) 345deg, transparent 360deg),
    linear-gradient(160deg, #0d0806 0%, #1d100c 48%, #0a0504 100%);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.5), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(212, 175, 55, 0.14), inset 0 0 18px rgba(212, 175, 55, 0.10), 0 6px 14px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ca-minion::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(212, 175, 55, 0.25);
  border-radius: 6px;
  pointer-events: none;
}
:root:not([data-theme="dark"]) .ca-minion {
  background:
    conic-gradient(from 0deg at 50% 34%, transparent 0deg, rgba(163, 134, 63, 0.045) 15deg, transparent 30deg, rgba(163, 134, 63, 0.045) 45deg, transparent 60deg, rgba(163, 134, 63, 0.045) 75deg, transparent 90deg, rgba(163, 134, 63, 0.045) 105deg, transparent 120deg, rgba(163, 134, 63, 0.045) 135deg, transparent 150deg, rgba(163, 134, 63, 0.045) 165deg, transparent 180deg, rgba(163, 134, 63, 0.045) 195deg, transparent 210deg, rgba(163, 134, 63, 0.045) 225deg, transparent 240deg, rgba(163, 134, 63, 0.045) 255deg, transparent 270deg, rgba(163, 134, 63, 0.045) 285deg, transparent 300deg, rgba(163, 134, 63, 0.045) 315deg, transparent 330deg, rgba(163, 134, 63, 0.045) 345deg, transparent 360deg),
    linear-gradient(165deg, #fdf6e3 0%, #f0e2bd 55%, #e8d5a6 100%);
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.45), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(163, 134, 63, 0.12), inset 0 0 16px rgba(163, 134, 63, 0.14), 0 5px 12px rgba(90, 70, 30, 0.22);
}
:root:not([data-theme="dark"]) .ca-minion::before { border-color: rgba(163, 134, 63, 0.24); }
.ca-minion:hover:not(.disabled) {
  transform: translateY(-3px);
}
.ca-minion.disabled { opacity: 0.55; cursor: not-allowed; }
/* 随从品级（变量化，与手牌卡同源） */
.ca-minion-tier-gold   { --ca-tier-color: var(--ca-tier-gold);   --ca-tier-bright: var(--ca-tier-gold-bright);   --ca-tier-glow: rgba(232, 198, 74, 0.16); border-color: var(--ca-tier-gold); }
.ca-minion-tier-silver { --ca-tier-color: var(--ca-tier-silver); --ca-tier-bright: var(--ca-tier-silver-bright); --ca-tier-glow: rgba(195, 199, 208, 0.12); border-color: var(--ca-tier-silver); }
.ca-minion-tier-bronze { --ca-tier-color: var(--ca-tier-bronze); --ca-tier-bright: var(--ca-tier-bronze-bright); --ca-tier-glow: rgba(192, 138, 79, 0.12); border-color: var(--ca-tier-bronze); }
.ca-minion-tier-stone  { --ca-tier-color: var(--ca-tier-stone);  --ca-tier-bright: var(--ca-tier-stone-bright);  --ca-tier-glow: rgba(143, 138, 132, 0.10); border-color: var(--ca-tier-stone); }
.ca-minion-band {
  position: relative;
  width: 100%;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  padding: 2px 0 5px;
  color: var(--ca-tier-bright, var(--cardarena-gold-light));
  text-shadow: 0 0 8px rgba(232, 198, 74, 0.35);
}
.ca-minion-band::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-tier-color, var(--cardarena-gold)), transparent);
}
:root:not([data-theme="dark"]) .ca-minion-band { color: #7a2a14; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.ca-minion-art {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 52px;
  margin: 7px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  border-radius: 5px;
  background: radial-gradient(circle at 50% 42%, var(--ca-tier-glow, rgba(212, 175, 55, 0.12)), transparent 70%);
}
.ca-minion-star {
  width: 54px;
  height: 54px;
  background-image: var(--ca-bg-star);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.95;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.4));
}
.ca-minion-kv {
  position: relative;
  display: flex;
  gap: 12px;
  margin-top: 7px;
}
.ca-minion-kv b {
  position: relative;
  z-index: 1;
  padding: 4px 11px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ca-tier-bright, var(--cardarena-gold-light));
}
.ca-minion-kv b::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: rotate(45deg) scale(1.06);
  border: 1px solid var(--ca-tier-color, var(--cardarena-gold));
  background: var(--ca-tier-glow, rgba(212, 175, 55, 0.10));
  border-radius: 3px;
  z-index: -1;
}
.ca-minion-kv b::after {
  content: '';
  position: absolute;
  inset: 2px;
  transform: rotate(45deg) scale(1.06);
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 3px;
  z-index: -1;
}
:root:not([data-theme="dark"]) .ca-minion-kv b { color: #8a5a14; }
.ca-minion-kw {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--cardarena-muted);
  margin-top: 6px;
  padding-top: 4px;
  position: relative;
}
.ca-minion-kw::before {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ca-tier-color, var(--cardarena-gold)), transparent);
}

/* ---- 出战角色区：移除 ::after 内框与四角金珠（去框化，保留光环圣徽与英文宫衔） ---- */
.ca-hero {
  overflow: visible;
}
/* 原 ::after 内框 + 四角金珠已移除：避免角色状态面板成为「框中框」 */
.ca-hero-en {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cardarena-muted);
  margin-bottom: 2px;
  position: relative;
}
.ca-hero-en::before, .ca-hero-en::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cardarena-gold));
}
.ca-hero-en::before { left: -26px; }
.ca-hero-en::after { right: -26px; }
.ca-hero-star {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 60px;
  height: 60px;
  transform: translateY(-50%);
  background-image: var(--ca-bg-star);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
}
[data-theme="dark"] .ca-hero-star { opacity: 0.14; }

/* ---- 战斗特效 ---- */
.ca-fx {
  position: absolute;
  pointer-events: none;
  z-index: 60;
  font-weight: 700;
}
.ca-fx-dmg {
  left: 50%;
  top: 8%;
  font-size: 1.05rem;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  color: #ff5a4d;
  text-shadow: 0 0 6px rgba(255, 90, 77, 0.8), 0 0 14px rgba(255, 200, 60, 0.5), 0 2px 0 rgba(0, 0, 0, 0.6);
  animation: ca-fx-dmg 1s ease-out forwards;
}
.ca-fx-heal {
  left: 50%;
  top: 8%;
  font-size: 1rem;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  color: #7ceea0;
  text-shadow: 0 0 6px rgba(80, 220, 130, 0.8), 0 2px 0 rgba(0, 0, 0, 0.6);
  animation: ca-fx-dmg 1s ease-out forwards;
}
@keyframes ca-fx-dmg {
  0%   { opacity: 0; transform: translate(-50%, 4px) scale(0.35); }
  16%  { opacity: 1; transform: translate(-50%, -16px) scale(1.6); }
  60%  { transform: translate(-50%, -22px) scale(1.35); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}
.ca-hit { animation: ca-hit 0.45s ease-out; }
@keyframes ca-hit {
  0%   { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 26px 8px rgba(255, 240, 200, 0.85); filter: brightness(2); }
  60%  { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}
.ca-fx-impact {
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 225, 150, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 210, 110, 0.5), inset 0 0 12px rgba(255, 210, 110, 0.4);
  animation: ca-impact 0.55s ease-out forwards;
}
@keyframes ca-impact {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
.ca-lunge { animation: ca-lunge 0.5s cubic-bezier(0.3, 0.7, 0.4, 1); }
.ca-hero-player.ca-lunge, .ca-minion[data-side="player"].ca-lunge { --ca-lunge-dir: 16px; }
.ca-hero-enemy.ca-lunge, .ca-minion[data-side="enemy"].ca-lunge { --ca-lunge-dir: -16px; }
@keyframes ca-lunge {
  0%   { transform: none; }
  32%  { transform: translateX(var(--ca-lunge-dir, 16px)) scale(1.06); }
  58%  { transform: translateX(calc(var(--ca-lunge-dir, 16px) * -0.3)) scale(0.98); }
  100% { transform: none; }
}

/* ---- 死亡：化为灰烬 ---- */
.ca-ashes {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 90;
}
.ca-ash {
  position: absolute;
  left: var(--ax, 0px);
  top: var(--ay, 0px);
  width: var(--as, 7px);
  height: var(--as, 7px);
  border-radius: 50% 40% 55% 45%;
  background: radial-gradient(circle at 35% 35%, #e8c64a, #8a6a2f 60%, #4a3410);
  box-shadow: 0 0 6px rgba(232, 198, 74, 0.6);
  opacity: 0.95;
  animation: ca-ash-rise var(--ad, 1.3s) ease-out var(--al, 0s) forwards;
}
@keyframes ca-ash-rise {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.95; }
  18%  { opacity: 0.9; }
  100% { transform: translate(var(--adx, 14px), -92px) rotate(var(--ar, 200deg)) scale(0.3); opacity: 0; }
}
.ca-ash-puff {
  position: absolute;
  left: var(--ax, 0px);
  top: var(--ay, 0px);
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(150, 118, 60, 0.55), rgba(90, 70, 35, 0.25) 55%, transparent 75%);
  animation: ca-puff 1.15s ease-out forwards;
}
@keyframes ca-puff {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

/* ---- 出战/换人：幽灵卡 3D 翻开飞行 ---- */
.ca-ghost {
  position: fixed;
  width: 116px;
  height: 156px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  pointer-events: none;
  z-index: 120;
}
.ca-ghost-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px;
  text-align: center;
}
.ca-ghost-front {
  background:
    conic-gradient(from 0deg at 50% 36%, transparent 0deg, rgba(212, 175, 55, 0.05) 15deg, transparent 30deg, rgba(212, 175, 55, 0.05) 45deg, transparent 60deg, rgba(212, 175, 55, 0.05) 75deg, transparent 90deg, rgba(212, 175, 55, 0.05) 105deg, transparent 120deg, rgba(212, 175, 55, 0.05) 135deg, transparent 150deg, rgba(212, 175, 55, 0.05) 165deg, transparent 180deg, rgba(212, 175, 55, 0.05) 195deg, transparent 210deg, rgba(212, 175, 55, 0.05) 225deg, transparent 240deg, rgba(212, 175, 55, 0.05) 255deg, transparent 270deg, rgba(212, 175, 55, 0.05) 285deg, transparent 300deg, rgba(212, 175, 55, 0.05) 315deg, transparent 330deg, rgba(212, 175, 55, 0.05) 345deg, transparent 360deg),
    linear-gradient(160deg, #0d0806 0%, #1d100c 48%, #0a0504 100%);
  border: 1px solid var(--ca-ghost-tier, #d4af37);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55), inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(212, 175, 55, 0.2), 0 12px 30px rgba(0, 0, 0, 0.6);
}
:root:not([data-theme="dark"]) .ca-ghost-front {
  background:
    conic-gradient(from 0deg at 50% 36%, transparent 0deg, rgba(163, 134, 63, 0.06) 15deg, transparent 30deg, rgba(163, 134, 63, 0.06) 45deg, transparent 60deg, rgba(163, 134, 63, 0.06) 75deg, transparent 90deg, rgba(163, 134, 63, 0.06) 105deg, transparent 120deg, rgba(163, 134, 63, 0.06) 135deg, transparent 150deg, rgba(163, 134, 63, 0.06) 165deg, transparent 180deg, rgba(163, 134, 63, 0.06) 195deg, transparent 210deg, rgba(163, 134, 63, 0.06) 225deg, transparent 240deg, rgba(163, 134, 63, 0.06) 255deg, transparent 270deg, rgba(163, 134, 63, 0.06) 285deg, transparent 300deg, rgba(163, 134, 63, 0.06) 315deg, transparent 330deg, rgba(163, 134, 63, 0.06) 345deg, transparent 360deg),
    linear-gradient(165deg, #fdf6e3 0%, #f0e2bd 55%, #e8d5a6 100%);
}
.ca-ghost-back {
  transform: rotateY(180deg);
  background:
    conic-gradient(from 0deg at 50% 42%, transparent 0deg, rgba(232, 198, 74, 0.05) 15deg, transparent 30deg, rgba(232, 198, 74, 0.05) 45deg, transparent 60deg, rgba(232, 198, 74, 0.05) 75deg, transparent 90deg, rgba(232, 198, 74, 0.05) 105deg, transparent 120deg, rgba(232, 198, 74, 0.05) 135deg, transparent 150deg, rgba(232, 198, 74, 0.05) 165deg, transparent 180deg, rgba(232, 198, 74, 0.05) 195deg, transparent 210deg, rgba(232, 198, 74, 0.05) 225deg, transparent 240deg, rgba(232, 198, 74, 0.05) 255deg, transparent 270deg, rgba(232, 198, 74, 0.05) 285deg, transparent 300deg, rgba(232, 198, 74, 0.05) 315deg, transparent 330deg, rgba(232, 198, 74, 0.05) 345deg, transparent 360deg),
    linear-gradient(160deg, #2b1608 0%, #4a2410 50%, #1d0e05 100%);
  border: 1px solid #e8c64a;
  box-shadow: inset 0 0 0 1px rgba(232, 198, 74, 0.6), inset 0 0 30px rgba(212, 175, 55, 0.18), 0 12px 30px rgba(0, 0, 0, 0.6);
}
.ca-ghost-title {
  font-family: var(--cardarena-serif);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: #e8c64a;
  margin-bottom: 4px;
}
:root:not([data-theme="dark"]) .ca-ghost-title { color: #7a2a14; }
.ca-ghost-star {
  width: 52px;
  height: 52px;
  background-image: var(--ca-bg-star);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.95;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.4));
}
.ca-ghost-kv {
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #d4af37;
}
:root:not([data-theme="dark"]) .ca-ghost-kv { color: #8a5a14; }
.ca-ghost-mark {
  font-size: 0.58rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: #d4af37;
  border-top: 1px solid rgba(212, 175, 55, 0.5);
  border-bottom: 1px solid rgba(212, 175, 55, 0.5);
  padding: 3px 10px;
}
.ca-spark {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fdf0c0, #d4af37 60%, transparent);
  box-shadow: 0 0 10px #d4af37;
  pointer-events: none;
  z-index: 121;
  animation: ca-spark 0.75s ease-out forwards;
}
@keyframes ca-spark {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sdx, 0px)), calc(-50% + var(--sdy, -40px))) scale(0.25); }
}
.ca-hero-enter { animation: ca-hero-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ca-hero-enter {
  0%   { transform: perspective(700px) rotateX(-14deg) translateY(34px) scale(0.86); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.ca-minion-enter { animation: ca-minion-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ca-minion-enter {
  0%   { transform: perspective(600px) rotateY(88deg) translateY(28px) scale(0.7); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: perspective(600px) rotateY(0deg) translateY(0) scale(1); opacity: 1; }
}

/* ---- 抽牌：幻影牌从右侧 3D 翻入手牌区 ---- */
.ca-draw-ghost {
  position: fixed;
  width: 84px;
  height: 118px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  pointer-events: none;
  z-index: 130;
  filter: drop-shadow(0 0 16px rgba(232, 198, 74, 0.85)) drop-shadow(0 0 36px rgba(212, 175, 55, 0.45));
}
/* 金色拖尾光带（牌后侧随飞行方向拉出） */
.ca-draw-ghost::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 190px;
  height: 3px;
  margin-top: -1.5px;
  background: linear-gradient(90deg, rgba(250, 224, 140, 0.95), rgba(212, 175, 55, 0.35) 70%, transparent);
  opacity: 1;
  transform: rotate(-6deg);
  border-radius: 2px;
}
.ca-draw-face {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
/* 正面：黑金卡面 + 品级缎带 + 八角星徽 */
.ca-draw-front {
  background:
    conic-gradient(from 0deg at 50% 36%, transparent 0deg, rgba(212, 175, 55, 0.06) 15deg, transparent 30deg, rgba(212, 175, 55, 0.06) 45deg, transparent 60deg, rgba(212, 175, 55, 0.06) 75deg, transparent 90deg, rgba(212, 175, 55, 0.06) 105deg, transparent 120deg, rgba(212, 175, 55, 0.06) 135deg, transparent 150deg, rgba(212, 175, 55, 0.06) 165deg, transparent 180deg, rgba(212, 175, 55, 0.06) 195deg, transparent 210deg, rgba(212, 175, 55, 0.06) 225deg, transparent 240deg, rgba(212, 175, 55, 0.06) 255deg, transparent 270deg, rgba(212, 175, 55, 0.06) 285deg, transparent 300deg, rgba(212, 175, 55, 0.06) 315deg, transparent 330deg, rgba(212, 175, 55, 0.06) 345deg, transparent 360deg),
    linear-gradient(160deg, #0d0806 0%, #1d100c 48%, #0a0504 100%);
  border: 1px solid #d4af37;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.5), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(212, 175, 55, 0.18);
}
:root:not([data-theme="dark"]) .ca-draw-front {
  background:
    conic-gradient(from 0deg at 50% 36%, transparent 0deg, rgba(163, 134, 63, 0.07) 15deg, transparent 30deg, rgba(163, 134, 63, 0.07) 45deg, transparent 60deg, rgba(163, 134, 63, 0.07) 75deg, transparent 90deg, rgba(163, 134, 63, 0.07) 105deg, transparent 120deg, rgba(163, 134, 63, 0.07) 135deg, transparent 150deg, rgba(163, 134, 63, 0.07) 165deg, transparent 180deg, rgba(163, 134, 63, 0.07) 195deg, transparent 210deg, rgba(163, 134, 63, 0.07) 225deg, transparent 240deg, rgba(163, 134, 63, 0.07) 255deg, transparent 270deg, rgba(163, 134, 63, 0.07) 285deg, transparent 300deg, rgba(163, 134, 63, 0.07) 315deg, transparent 330deg, rgba(163, 134, 63, 0.07) 345deg, transparent 360deg),
    linear-gradient(165deg, #fdf6e3 0%, #f0e2bd 55%, #e8d5a6 100%);
  border-color: #a3863f;
  box-shadow: inset 0 0 0 1px rgba(163, 134, 63, 0.5), inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(163, 134, 63, 0.18);
}
.ca-draw-band {
  font-size: 0.52rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #d4af37;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  padding-bottom: 3px;
  margin-bottom: 6px;
}
:root:not([data-theme="dark"]) .ca-draw-band { color: #8a5a14; border-bottom-color: rgba(163, 134, 63, 0.5); }
.ca-draw-star {
  width: 42px;
  height: 42px;
  background-image: var(--ca-bg-star);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.95;
  filter: drop-shadow(0 0 5px rgba(232, 198, 74, 0.5));
}
/* 背面：深金印版 ON DUTY */
.ca-draw-back {
  transform: rotateY(180deg);
  background:
    conic-gradient(from 0deg at 50% 42%, transparent 0deg, rgba(232, 198, 74, 0.05) 15deg, transparent 30deg, rgba(232, 198, 74, 0.05) 45deg, transparent 60deg, rgba(232, 198, 74, 0.05) 75deg, transparent 90deg, rgba(232, 198, 74, 0.05) 105deg, transparent 120deg, rgba(232, 198, 74, 0.05) 135deg, transparent 150deg, rgba(232, 198, 74, 0.05) 165deg, transparent 180deg, rgba(232, 198, 74, 0.05) 195deg, transparent 210deg, rgba(232, 198, 74, 0.05) 225deg, transparent 240deg, rgba(232, 198, 74, 0.05) 255deg, transparent 270deg, rgba(232, 198, 74, 0.05) 285deg, transparent 300deg, rgba(232, 198, 74, 0.05) 315deg, transparent 330deg, rgba(232, 198, 74, 0.05) 345deg, transparent 360deg),
    linear-gradient(160deg, #2b1608 0%, #4a2410 50%, #1d0e05 100%);
  border: 1px solid #e8c64a;
  box-shadow: inset 0 0 0 1px rgba(232, 198, 74, 0.55), inset 0 0 18px rgba(212, 175, 55, 0.16);
}
:root:not([data-theme="dark"]) .ca-draw-back {
  background:
    conic-gradient(from 0deg at 50% 42%, transparent 0deg, rgba(163, 134, 63, 0.07) 15deg, transparent 30deg, rgba(163, 134, 63, 0.07) 45deg, transparent 60deg, rgba(163, 134, 63, 0.07) 75deg, transparent 90deg, rgba(163, 134, 63, 0.07) 105deg, transparent 120deg, rgba(163, 134, 63, 0.07) 135deg, transparent 150deg, rgba(163, 134, 63, 0.07) 165deg, transparent 180deg, rgba(163, 134, 63, 0.07) 195deg, transparent 210deg, rgba(163, 134, 63, 0.07) 225deg, transparent 240deg, rgba(163, 134, 63, 0.07) 255deg, transparent 270deg, rgba(163, 134, 63, 0.07) 285deg, transparent 300deg, rgba(163, 134, 63, 0.07) 315deg, transparent 330deg, rgba(163, 134, 63, 0.07) 345deg, transparent 360deg),
    linear-gradient(165deg, #f5e7c1 0%, #e8d5a6 55%, #dcc18a 100%);
  border-color: #a3863f;
}
.ca-draw-mark {
  font-size: 0.52rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: #d4af37;
  border-top: 1px solid rgba(212, 175, 55, 0.5);
  border-bottom: 1px solid rgba(212, 175, 55, 0.5);
  padding: 3px 8px;
}
:root:not([data-theme="dark"]) .ca-draw-mark { color: #8a5a14; border-color: rgba(163, 134, 63, 0.55); }

/* ==========================================================================
   移动端优化（≤640px）：横向滚动 + 尺寸压缩 + 装饰弱化
   放在文件末尾，确保覆盖 v5.13 极繁样式（同 specificity 后定义胜出）
   ========================================================================== */
@media (max-width: 640px) {
  #cardarena-app { padding: 8px; }
  .ca-stage { max-width: 100%; }
  .ca-stage::before { opacity: 0; }              /* 舞台四角纹章隐藏，避免边角拥挤 */
  .ca-header-ornament { display: none; }          /* 标题装饰条带隐藏 */

  /* 分区面板：压缩 padding（去框化后无需隐藏内框，已无 ::before） */
  .ca-roster, .ca-board, .ca-hand, .ca-log { padding: 5px; gap: 4px; }
  .ca-roster-label, .ca-board-label, .ca-hand-label, .ca-log-label { font-size: 0.72rem; margin-bottom: 2px; }

  /* 角色牌区：横向滚动，不换行挤占垂直空间 */
  .ca-roster { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ca-roster-chip { padding: 3px 6px; font-size: 0.72rem; flex-shrink: 0; }

  /* 出战区：紧凑 */
  .ca-hero { padding: 6px 8px; }
  .ca-hero-name { font-size: 0.95rem; }
  .ca-hero-stats { font-size: 0.75rem; }
  .ca-hero-mana { font-size: 0.75rem; margin-top: 1px; }
  .ca-hero-passive { font-size: 0.7rem; }
  .ca-hero-en { font-size: 0.58rem; }
  .ca-hero-en::before, .ca-hero-en::after { display: none; }
  .ca-hero-star { width: 40px; height: 40px; }
  .ca-role-halo { width: 80px; height: 80px; opacity: 0.3; }
  .ca-role-ring { width: 68px; height: 68px; opacity: 0.4; }

  /* 随从区：横向滚动 */
  .ca-board { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
  .ca-minion { width: 78px; min-width: 78px; min-height: 108px; padding: 5px 4px 4px; border-radius: 7px; flex-shrink: 0; }
  .ca-minion-band { font-size: 0.48rem; letter-spacing: 0.28em; padding-bottom: 2px; margin-bottom: 3px; }
  .ca-minion-art { height: 28px; margin-bottom: 3px; }
  .ca-minion-star { width: 30px; height: 30px; }
  .ca-minion-halo { width: 50px; height: 50px; opacity: 0.3; }
  .ca-minion-ring { width: 40px; height: 40px; opacity: 0.4; }
  .ca-minion-name { font-size: 0.68rem; margin-bottom: 1px; }
  .ca-minion-kv { font-size: 0.76rem; }
  .ca-minion-kw { font-size: 0.58rem; }

  /* 手牌区：横向滚动，卡牌缩小但保持可读 */
  .ca-hand-cards { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .ca-card { width: 104px; min-width: 104px; min-height: 144px; padding: 6px 6px 5px; flex-shrink: 0; }
  .ca-card-star { width: 44px; height: 44px; }
  .ca-card-halo { width: 64px; height: 64px; opacity: 0.3; }
  .ca-card-ring { width: 54px; height: 54px; opacity: 0.4; }
  .ca-card-name { font-size: 0.76rem; }
  .ca-card-kv { font-size: 0.82rem; }

  /* 日志/操作区 */
  .ca-log-list { max-height: 72px; }
  .ca-log-line { font-size: 0.7rem; line-height: 1.4; }
  .ca-actions { gap: 4px; flex-wrap: wrap; }
  .ca-actions-info { font-size: 0.72rem; }

  /* 角色选卡界面：2 列网格，卡牌缩小 */
  .ca-setup-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .ca-setup-title { font-size: 1.2rem; }
  .ca-setup-sub { font-size: 0.78rem; margin-bottom: 10px; }
  .ca-role-star-outer { width: 50px; height: 50px; }
  .ca-role-star-inner { width: 30px; height: 30px; }
  .ca-role-art { min-height: 44px; margin: 4px 0; }
  .ca-role-band { font-size: 0.42rem; padding: 4px 0 3px; }
  .ca-setup-role-name { font-size: 0.86rem; }
  .ca-setup-role-intro { font-size: 0.58rem; line-height: 1.28; }
  .ca-role-stat { padding: 3px 9px; font-size: 0.64rem; }
  .ca-setup-role-passive { font-size: 0.54rem; margin-top: 3px; }
}

/* ============================================================
   入场动效（苏丹宫廷「显影」母题）：选人界面 + 胜负结算
   全部包在 prefers-reduced-motion: no-preference 内，尊重减弱动效偏好
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* 选人界面：闪屏关闭后整体「显影」入场，卡牌错峰上浮（--i 由 ui.js 注入） */
  .ca-setup.ca-pre { opacity: 0; }
  .ca-setup.ca-enter .ca-setup-title { animation: caFadeUp 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .ca-setup.ca-enter .ca-setup-sub { animation: caFadeUp 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.08s both; }
  .ca-setup.ca-enter .ca-setup-grid .ca-setup-role {
    animation: caCardIn 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms + 140ms);
  }
  .ca-setup.ca-enter #ca-start,
  .ca-setup.ca-enter .ca-setup-hint { animation: caFadeUp 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) 0.5s both; }
  @keyframes caFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes caCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.94); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }

  /* 胜负结算：面板「显影」+ 金印章顿挫 */
  .ca-overlay-box.ca-develop { animation: caDevelop 0.56s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  @keyframes caDevelop {
    from { opacity: 0; transform: scale(0.96) translateY(10px); filter: blur(8px) contrast(0.55); }
    to   { opacity: 1; transform: none; filter: blur(0) contrast(1); }
  }
  .ca-overlay-seal {
    position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--cardarena-serif); font-weight: 700; font-size: 1.4rem;
    color: #2a1a08;
    background: radial-gradient(circle at 35% 30%, var(--cardarena-gold-light), var(--cardarena-gold) 60%, var(--cardarena-gold-dark));
    border: 1px solid var(--cardarena-gold-dark);
    box-shadow: 0 0 0 3px var(--cardarena-bg), 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: caStamp 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 0.34s both;
    z-index: 3;
  }
  .ca-overlay-seal.ca-seal-win { color: #1c2a16; }
  @keyframes caStamp {
    0%   { opacity: 0; transform: translateX(-50%) scale(1.5) rotate(-12deg); }
    60%  { opacity: 1; transform: translateX(-50%) scale(0.94) rotate(4deg); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }
  }
}


/* ============================================================
   v1.2.0 演出层：集结反馈 / 帷幕转场 / VS 报幕 / AI 回合逐步演出
   ============================================================ */

/* ---- 金色帷幕转场（body 浮层，免疫 renderAll 全量重建）---- */
.ca-curtain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.ca-curtain-top, .ca-curtain-bottom {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background:
    repeating-linear-gradient(90deg, rgba(212,175,55,0.10) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #1c0f0c, #2a140d 60%, #0d0604);
  box-shadow: 0 0 40px rgba(0,0,0,0.7);
}
.ca-curtain-top { top: 0; transform: translateY(-100%); }
.ca-curtain-bottom { bottom: 0; transform: translateY(100%); }
.ca-curtain-seam {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; opacity: 0;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--cardarena-gold-light, #eed48a), transparent);
  box-shadow: 0 0 22px rgba(212,175,55,0.75);
}
@media (prefers-reduced-motion: no-preference) {
  .ca-curtain-top { animation: caCurtainDown var(--cd, 400ms) cubic-bezier(0.4,0,0.2,1) forwards; }
  .ca-curtain-bottom { animation: caCurtainUp var(--cd, 400ms) cubic-bezier(0.4,0,0.2,1) forwards; }
  .ca-curtain-seam { animation: caSeamFlash var(--cd, 400ms) ease-out var(--cd, 400ms) both; }
  .ca-curtain-open .ca-curtain-top { animation: caCurtainUpOut var(--cd, 400ms) cubic-bezier(0.5,0,0.75,0) forwards; }
  .ca-curtain-open .ca-curtain-bottom { animation: caCurtainDownOut var(--cd, 400ms) cubic-bezier(0.5,0,0.75,0) forwards; }
}
@keyframes caCurtainDown    { to { transform: translateY(0); } }
@keyframes caCurtainUp      { to { transform: translateY(0); } }
@keyframes caCurtainUpOut   { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes caCurtainDownOut { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes caSeamFlash { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

/* ---- 队伍集结完成：选中卡镀金脉冲 + 计数器闪金 + 按钮点亮 ---- */
@media (prefers-reduced-motion: no-preference) {
  .ca-setup-role.ca-linked { animation: caLinked 640ms cubic-bezier(0.22,1,0.36,1) calc(var(--ci, 0) * 65ms) both; }
  .ca-count-full { animation: caCountFull 700ms ease-out both; }
  .ca-btn-ready  { animation: caBtnReady 900ms ease-out both; }
}
@keyframes caLinked {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  40%  { box-shadow: 0 0 22px 5px rgba(212,175,55,0.55); filter: brightness(1.16); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); filter: none; }
}
@keyframes caCountFull {
  0%   { transform: scale(1); }
  35%  { color: var(--cardarena-gold-light, #eed48a); transform: scale(1.18); text-shadow: 0 0 16px rgba(212,175,55,0.8); }
  100% { color: var(--cardarena-gold-light, #eed48a); transform: scale(1); text-shadow: 0 0 6px rgba(212,175,55,0.35); }
}
@keyframes caBtnReady {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.6); }
  55%  { box-shadow: 0 0 0 12px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

/* ---- VS 对阵报幕（一局一次，双方首发卡撞入中央）---- */
.ca-vs {
  position: fixed; inset: 0; z-index: 9200; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(760px 420px at 50% 50%, rgba(212,175,55,0.16), transparent 62%),
    rgba(6,3,2,0.82);
  opacity: 0; transition: opacity 240ms ease;
}
.ca-vs.ca-vs-in { opacity: 1; }
.ca-vs.ca-vs-out { opacity: 0; transition: opacity var(--vd, 320ms) ease; }
.ca-vs-row { display: flex; align-items: center; gap: clamp(10px, 4vw, 54px); }
.ca-vs-card {
  width: clamp(120px, 17vw, 190px); padding: 0.7rem 0.6rem 0.85rem;
  border: 1px solid var(--cardarena-gold-dark, #8a6a2f); border-radius: 4px;
  background: linear-gradient(180deg, #240a0f, #52101b 52%, #190507);
  box-shadow: 0 0 34px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(212,175,55,0.22);
  text-align: center; color: #f1e3c4;
}
.ca-vs-side {
  font-family: 'Courier New', monospace; font-size: 0.6rem; letter-spacing: 0.24em;
  color: #a88f5e; margin-bottom: 0.4rem;
}
.ca-vs-star {
  width: 46px; height: 46px; margin: 0 auto 0.5rem; position: relative;
}
.ca-vs-star::before, .ca-vs-star::after {
  content: ''; position: absolute; inset: 0;
  border: 2px solid var(--cardarena-gold, #d4af37);
  box-shadow: 0 0 14px rgba(212,175,55,0.5);
}
.ca-vs-star::after { transform: rotate(45deg); }
.ca-vs-name {
  font-family: var(--cardarena-serif, 'Noto Serif SC', Georgia, serif);
  font-size: 1.02rem; letter-spacing: 0.08em; color: var(--cardarena-gold-light, #eed48a);
}
.ca-vs-stats {
  margin-top: 0.4rem; font-size: 0.74rem; letter-spacing: 0.06em; color: #c8b48a;
  display: flex; justify-content: center; gap: 0.7rem;
}
.ca-vs-mark {
  font-family: Georgia, serif; font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 700;
  color: var(--cardarena-gold-light, #eed48a); letter-spacing: 0.06em;
  text-shadow: 0 0 26px rgba(212,175,55,0.85); opacity: 0; transform: scale(2.2);
}
.ca-vs-flash {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px;
  margin: -12px 0 0 -12px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff6d8 0%, rgba(238,212,138,0.65) 38%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .ca-vs-in .ca-vs-card.ca-vs-left  { animation: caVsLeft  var(--vin, 520ms) cubic-bezier(0.16,1,0.3,1) both; }
  .ca-vs-in .ca-vs-card.ca-vs-right { animation: caVsRight var(--vin, 520ms) cubic-bezier(0.16,1,0.3,1) both; }
  .ca-vs-in .ca-vs-mark  { animation: caVsMark 460ms cubic-bezier(0.2,0.9,0.3,1) var(--vin, 520ms) both; }
  .ca-vs-in .ca-vs-flash { animation: caVsFlash 620ms ease-out var(--vin, 520ms) both; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-vs-mark { opacity: 1; transform: none; }
}
@keyframes caVsLeft {
  0%   { opacity: 0; transform: translateX(-62vw) rotate(-16deg); }
  74%  { opacity: 1; transform: translateX(9px) rotate(2deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes caVsRight {
  0%   { opacity: 0; transform: translateX(62vw) rotate(16deg); }
  74%  { opacity: 1; transform: translateX(-9px) rotate(-2deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes caVsMark {
  0%   { opacity: 0; transform: scale(2.2) rotate(-8deg); }
  55%  { opacity: 1; transform: scale(0.9) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes caVsFlash {
  0%   { opacity: 0; transform: scale(0.3); }
  22%  { opacity: 0.95; }
  100% { opacity: 0; transform: scale(26); }
}

/* ---- AI 回合逐步演出：卡牌旋转展示（敌方区上方偏中）---- */
.ca-ai-card {
  position: fixed; z-index: 9100; pointer-events: none;
  width: 132px; margin-left: -66px; padding: 0.6rem 0.55rem 0.7rem;
  border: 1px solid var(--cardarena-gold-dark, #8a6a2f); border-radius: 4px;
  background: linear-gradient(180deg, #240a0f, #52101b 52%, #190507);
  box-shadow: 0 0 30px rgba(0,0,0,0.72), inset 0 0 0 1px rgba(212,175,55,0.22);
  text-align: center; color: #f1e3c4;
  transform-style: preserve-3d; backface-visibility: hidden;
}
.ca-ai-card-kind {
  font-family: 'Courier New', monospace; font-size: 0.56rem; letter-spacing: 0.2em;
  color: #a88f5e; margin-bottom: 0.32rem;
}
.ca-ai-card-name {
  font-family: var(--cardarena-serif, 'Noto Serif SC', Georgia, serif);
  font-size: 0.92rem; letter-spacing: 0.05em; color: var(--cardarena-gold-light, #eed48a);
}
.ca-ai-card-text { margin-top: 0.32rem; font-size: 0.66rem; line-height: 1.4; color: #c8b48a; }
.ca-ai-card-cost {
  position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: #2a1a08;
  background: radial-gradient(circle at 35% 30%, var(--cardarena-gold-light, #eed48a), var(--cardarena-gold, #d4af37) 60%, var(--cardarena-gold-dark, #8a6a2f));
  border: 1px solid var(--cardarena-gold-dark, #8a6a2f);
}
@media (prefers-reduced-motion: no-preference) {
  .ca-ai-card { animation: caAiCard var(--ad, 900ms) cubic-bezier(0.22,1,0.36,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-ai-card { opacity: 0; }
}
@keyframes caAiCard {
  0%   { opacity: 0; transform: perspective(760px) rotateY(-96deg) scale(0.62); }
  26%  { opacity: 1; transform: perspective(760px) rotateY(0deg) scale(1.1); }
  62%  { opacity: 1; transform: perspective(760px) rotateY(0deg) scale(1.02); }
  100% { opacity: 0; transform: perspective(760px) rotateY(24deg) scale(0.82) translateY(-26px); }
}

/* AI 回合横幅：一次性提示进入敌方回合 */
.ca-ai-banner {
  position: fixed; left: 50%; top: 16%; transform: translateX(-50%); z-index: 9050;
  pointer-events: none; padding: 0.42rem 1.5rem;
  font-family: 'Courier New', monospace; font-size: 0.76rem; letter-spacing: 0.28em;
  color: #f3dfa0; border: 1px solid rgba(212,175,55,0.34); border-radius: 2px;
  background: linear-gradient(90deg, rgba(28,15,12,0), rgba(42,20,13,0.92) 22%, rgba(42,20,13,0.92) 78%, rgba(28,15,12,0));
  text-shadow: 0 0 14px rgba(212,175,55,0.5); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ca-ai-banner { animation: caAiBanner var(--bd, 1000ms) ease-out both; }
}
@keyframes caAiBanner {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-14px); letter-spacing: 0.5em; }
  22%  { opacity: 1; transform: translateX(-50%) translateY(0); letter-spacing: 0.28em; }
  74%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ---- 速度开关 ---- */
.ca-speed {
  font-family: 'Courier New', monospace; font-size: 0.7rem; letter-spacing: 0.1em;
  color: #a88f5e; background: transparent;
  border: 1px solid rgba(212,175,55,0.3); border-radius: 3px;
  padding: 0.34rem 0.72rem; cursor: pointer; margin-right: 0.5rem;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.ca-speed:hover { color: #f3dfa0; border-color: var(--cardarena-gold, #d4af37); }
.ca-speed.ca-speed-fast {
  color: #2a1a08; border-color: var(--cardarena-gold-dark, #8a6a2f);
  background: linear-gradient(180deg, var(--cardarena-gold-light, #eed48a), var(--cardarena-gold, #d4af37));
}


/* ============================================================
   CardArena v1.3.0 — 动效进一步优化（融合方向）
   卡牌微交互 / 环境层呼吸 / 受击升级 / 胜负满仪式
   ============================================================ */

/* ---- 卡牌微交互：悬停抬升 + 放大 + 金光脉冲 ---- */
.ca-card {
  transition: transform 0.18s cubic-bezier(0.22, 0.7, 0.3, 1), box-shadow 0.18s ease;
}
.ca-card:hover:not(.disabled) {
  transform: translateY(-8px) scale(1.04);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.85),
    inset 0 0 34px rgba(212, 175, 55, 0.20), 0 18px 34px rgba(0, 0, 0, 0.6);
  z-index: 5;
}
/* 卡面共振环：悬停时脉动，可打出卡牌常驻微亮（静态不闪） */
.ca-card:not(.disabled) .ca-card-ring { opacity: 0.42; transition: opacity 0.2s ease; }
.ca-card:hover:not(.disabled) .ca-card-ring {
  opacity: 1;
  animation: caCardRing 1.6s ease-in-out infinite;
}
@keyframes caCardRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50% { box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5), 0 0 18px rgba(212, 175, 55, 0.3); }
}
/* 首次发牌错峰入场（仅一次，JS 加 .ca-card-deal + --i） */
@keyframes caCardDeal {
  0%   { opacity: 0; transform: translateY(26px) rotate(-3deg) scale(0.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.ca-card.ca-card-deal {
  animation: caCardDeal 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* 选攻击者时的轻微浮起（CSS  hover，重建安全） */
.ca-minion.attacker-selectable:hover,
.ca-hero.attacker-selectable:hover {
  transform: translateY(-5px);
  transition: transform 0.15s ease;
}

/* ---- 索敌态共振环（合法目标脉动） ---- */
.ca-targetable { position: relative; cursor: crosshair; }
.ca-targetable::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgba(212, 175, 55, 0);
  pointer-events: none;
  animation: caTargetPulse 1.1s ease-in-out infinite;
}
@keyframes caTargetPulse {
  0%, 100% { border-color: rgba(212, 175, 55, 0.22); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50% { border-color: rgba(212, 175, 55, 0.92); box-shadow: 0 0 16px 2px rgba(212, 175, 55, 0.4); }
}

/* ---- 环境层呼吸：稳定父层(body)，不绑逐卡，规避 renderAll 重建闪烁 ---- */
.ca-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.ca-ambient-shimmer {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 30% 22%, rgba(212, 175, 55, 0.06), transparent 40%),
    radial-gradient(circle at 72% 78%, rgba(212, 175, 55, 0.05), transparent 42%);
  animation: caAmbientBreath 9s ease-in-out infinite;
}
@keyframes caAmbientBreath {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
.ca-mote {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 198, 74, 0.9), rgba(232, 198, 74, 0) 70%);
  opacity: 0;
  animation: caMote linear infinite;
}
@keyframes caMote {
  0%   { opacity: 0; transform: translate(0, 0); }
  12%  { opacity: 0.8; }
  88%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(22px, -130px); }
}
/* 让战场浮于环境层之上，特效浮于最上 */
.ca-layout { position: relative; z-index: 2; }
.ca-fx { z-index: 95; }

/* ---- 受击升级：伤害数字分级 + 命中强化 + 震屏 + hit-stop ---- */
.ca-fx-dmg--heavy {
  font-size: 1.5rem;
  color: #ffd34d;
  text-shadow: 0 0 10px rgba(255, 210, 90, 0.9), 0 0 22px rgba(255, 150, 60, 0.6), 0 2px 0 rgba(0, 0, 0, 0.6);
}
.ca-fx-dmg--lethal {
  font-size: 1.8rem;
  color: #ff5a5a;
  text-shadow: 0 0 12px rgba(255, 80, 80, 0.95), 0 0 26px rgba(255, 200, 60, 0.7), 0 2px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.04em;
}
.ca-hit--lethal { animation: ca-hit-lethal 0.5s ease-out; }
@keyframes ca-hit-lethal {
  0%   { box-shadow: inset 0 0 0 3px rgba(255, 90, 90, 0.95), 0 0 30px 10px rgba(255, 120, 90, 0.7); filter: brightness(2.1) saturate(1.2); }
  60%  { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}
.ca-shake { animation: ca-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes ca-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 0, 0); }
  40%, 60% { transform: translate3d(7px, 0, 0); }
}
/* hit-stop 顿帧：冻结动画 70ms（JS 限时移除） */
.ca-hitstop, .ca-hitstop * { animation-play-state: paused !important; }

/* ---- 胜负满仪式：王冠加冕(胜) / 碎裂灰烬(败) ---- */
.ca-overlay.ca-win { background: radial-gradient(circle at 50% 40%, rgba(60, 40, 10, 0.55), rgba(20, 10, 8, 0.88)); }
.ca-overlay.ca-lose { background: rgba(8, 4, 3, 0.92); }
.ca-overlay-box.ca-win-box,
.ca-overlay-box.ca-lose-box { overflow: hidden; }
.ca-crown {
  width: 96px; height: 58px; margin: 0 auto 12px; position: relative; opacity: 0;
}
.ca-crown svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 12px rgba(232, 198, 74, 0.7)); }
.ca-win-box.show .ca-crown { animation: caCrownDrop 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 0.15s both; }
@keyframes caCrownDrop {
  0%   { opacity: 0; transform: translateY(-60px) rotate(-8deg) scale(0.7); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.ca-lightbeam {
  position: absolute; left: 50%; top: -40%; width: 160px; height: 180%;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 235, 160, 0), rgba(255, 225, 140, 0.38) 50%, rgba(255, 235, 160, 0));
  filter: blur(8px); opacity: 0;
}
.ca-win-box.show .ca-lightbeam { animation: caBeam 1.6s ease-out 0.3s forwards; }
@keyframes caBeam {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.4); }
  40%  { opacity: 0.9; }
  100% { opacity: 0.55; transform: translateX(-50%) scaleY(1); }
}
.ca-shatter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ca-shatter::before, .ca-shatter::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 48%, rgba(140, 105, 58, 0.55) 49%, transparent 51%),
    linear-gradient(62deg, transparent 47%, rgba(140, 105, 58, 0.42) 48%, transparent 50%),
    linear-gradient(152deg, transparent 46%, rgba(140, 105, 58, 0.36) 47%, transparent 49%);
  opacity: 0;
}
.ca-lose-box.show .ca-shatter::before { animation: caShatter 0.7s ease-out 0.2s forwards; }
.ca-lose-box.show .ca-shatter::after { animation: caShatter 0.9s ease-out 0.35s forwards; }
@keyframes caShatter {
  0%   { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0.85; transform: scale(1); }
}
.ca-gameover-report {
  margin: 6px 0 16px; padding: 10px 14px;
  border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.82rem; color: #e8d9b0; line-height: 1.75; text-align: left;
}
.ca-gameover-report b { color: #ffd980; font-weight: 600; }
.ca-gameover-report .ca-report-row { display: flex; justify-content: space-between; gap: 18px; }


/* ============================================================
   CardArena v1.3.0 — 动效进一步优化（融合方向）
   卡牌微交互 / 环境层呼吸 / 受击升级 / 胜负满仪式
   ============================================================ */

/* ---- 卡牌微交互：悬停抬升 + 放大 + 金光脉冲 ---- */
.ca-card {
  transition: transform 0.18s cubic-bezier(0.22, 0.7, 0.3, 1), box-shadow 0.18s ease;
}
.ca-card:hover:not(.disabled) {
  transform: translateY(-8px) scale(1.04);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.85),
    inset 0 0 34px rgba(212, 175, 55, 0.20), 0 18px 34px rgba(0, 0, 0, 0.6);
  z-index: 5;
}
/* 卡面共振环：悬停时脉动，可打出卡牌常驻微亮（静态不闪） */
.ca-card:not(.disabled) .ca-card-ring { opacity: 0.42; transition: opacity 0.2s ease; }
.ca-card:hover:not(.disabled) .ca-card-ring {
  opacity: 1;
  animation: caCardRing 1.6s ease-in-out infinite;
}
@keyframes caCardRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50% { box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5), 0 0 18px rgba(212, 175, 55, 0.3); }
}
/* 首次发牌错峰入场（仅一次，JS 加 .ca-card-deal + --i） */
@keyframes caCardDeal {
  0%   { opacity: 0; transform: translateY(26px) rotate(-3deg) scale(0.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.ca-card.ca-card-deal {
  animation: caCardDeal 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* 选攻击者时的轻微浮起（CSS  hover，重建安全） */
.ca-minion.attacker-selectable:hover,
.ca-hero.attacker-selectable:hover {
  transform: translateY(-5px);
  transition: transform 0.15s ease;
}

/* ---- 索敌态共振环（合法目标脉动） ---- */
.ca-targetable { position: relative; cursor: crosshair; }
.ca-targetable::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgba(212, 175, 55, 0);
  pointer-events: none;
  animation: caTargetPulse 1.1s ease-in-out infinite;
}
@keyframes caTargetPulse {
  0%, 100% { border-color: rgba(212, 175, 55, 0.22); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50% { border-color: rgba(212, 175, 55, 0.92); box-shadow: 0 0 16px 2px rgba(212, 175, 55, 0.4); }
}

/* ---- 环境层呼吸：稳定父层(body)，不绑逐卡，规避 renderAll 重建闪烁 ---- */
.ca-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.ca-ambient-shimmer {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 30% 22%, rgba(212, 175, 55, 0.06), transparent 40%),
    radial-gradient(circle at 72% 78%, rgba(212, 175, 55, 0.05), transparent 42%);
  animation: caAmbientBreath 9s ease-in-out infinite;
}
@keyframes caAmbientBreath {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
.ca-mote {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 198, 74, 0.9), rgba(232, 198, 74, 0) 70%);
  opacity: 0;
  animation: caMote linear infinite;
}
@keyframes caMote {
  0%   { opacity: 0; transform: translate(0, 0); }
  12%  { opacity: 0.8; }
  88%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(22px, -130px); }
}
/* 让战场浮于环境层之上，特效浮于最上 */
.ca-layout { position: relative; z-index: 2; }
.ca-fx { z-index: 95; }

/* ---- 受击升级：伤害数字分级 + 命中强化 + 震屏 + hit-stop ---- */
.ca-fx-dmg--heavy {
  font-size: 1.5rem;
  color: #ffd34d;
  text-shadow: 0 0 10px rgba(255, 210, 90, 0.9), 0 0 22px rgba(255, 150, 60, 0.6), 0 2px 0 rgba(0, 0, 0, 0.6);
}
.ca-fx-dmg--lethal {
  font-size: 1.8rem;
  color: #ff5a5a;
  text-shadow: 0 0 12px rgba(255, 80, 80, 0.95), 0 0 26px rgba(255, 200, 60, 0.7), 0 2px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.04em;
}
.ca-hit--lethal { animation: ca-hit-lethal 0.5s ease-out; }
@keyframes ca-hit-lethal {
  0%   { box-shadow: inset 0 0 0 3px rgba(255, 90, 90, 0.95), 0 0 30px 10px rgba(255, 120, 90, 0.7); filter: brightness(2.1) saturate(1.2); }
  60%  { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}
.ca-shake { animation: ca-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes ca-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 0, 0); }
  40%, 60% { transform: translate3d(7px, 0, 0); }
}
/* hit-stop 顿帧：冻结动画 70ms（JS 限时移除） */
.ca-hitstop, .ca-hitstop * { animation-play-state: paused !important; }

/* ---- 胜负满仪式：王冠加冕(胜) / 碎裂灰烬(败) ---- */
.ca-overlay.ca-win { background: radial-gradient(circle at 50% 40%, rgba(60, 40, 10, 0.55), rgba(20, 10, 8, 0.88)); }
.ca-overlay.ca-lose { background: rgba(8, 4, 3, 0.92); }
.ca-overlay-box.ca-win-box,
.ca-overlay-box.ca-lose-box { overflow: hidden; }
.ca-crown {
  width: 96px; height: 58px; margin: 0 auto 12px; position: relative; opacity: 0;
}
.ca-crown svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 12px rgba(232, 198, 74, 0.7)); }
.ca-win-box.show .ca-crown { animation: caCrownDrop 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 0.15s both; }
@keyframes caCrownDrop {
  0%   { opacity: 0; transform: translateY(-60px) rotate(-8deg) scale(0.7); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.ca-lightbeam {
  position: absolute; left: 50%; top: -40%; width: 160px; height: 180%;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 235, 160, 0), rgba(255, 225, 140, 0.38) 50%, rgba(255, 235, 160, 0));
  filter: blur(8px); opacity: 0;
}
.ca-win-box.show .ca-lightbeam { animation: caBeam 1.6s ease-out 0.3s forwards; }
@keyframes caBeam {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.4); }
  40%  { opacity: 0.9; }
  100% { opacity: 0.55; transform: translateX(-50%) scaleY(1); }
}
.ca-shatter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ca-shatter::before, .ca-shatter::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 48%, rgba(140, 105, 58, 0.55) 49%, transparent 51%),
    linear-gradient(62deg, transparent 47%, rgba(140, 105, 58, 0.42) 48%, transparent 50%),
    linear-gradient(152deg, transparent 46%, rgba(140, 105, 58, 0.36) 47%, transparent 49%);
  opacity: 0;
}
.ca-lose-box.show .ca-shatter::before { animation: caShatter 0.7s ease-out 0.2s forwards; }
.ca-lose-box.show .ca-shatter::after { animation: caShatter 0.9s ease-out 0.35s forwards; }
@keyframes caShatter {
  0%   { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0.85; transform: scale(1); }
}
.ca-gameover-report {
  margin: 6px 0 16px; padding: 10px 14px;
  border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.82rem; color: #e8d9b0; line-height: 1.75; text-align: left;
}
.ca-gameover-report b { color: #ffd980; font-weight: 600; }
.ca-gameover-report .ca-report-row { display: flex; justify-content: space-between; gap: 18px; }

/* 降级：reduced-motion 时胜负仪式静态可见、屏蔽常驻/重击微动 */
@media (prefers-reduced-motion: reduce) {
  .ca-crown, .ca-lightbeam { opacity: 1 !important; animation: none !important; transform: none !important; }
  .ca-shatter::before, .ca-shatter::after { opacity: 0.7 !important; animation: none !important; transform: none !important; }
  .ca-ambient, .ca-mote { display: none !important; }
  .ca-card:hover:not(.disabled) .ca-card-ring { animation: none !important; }
}

/* =====================================================================
   CardArena v1.4.0 — 随从燃烧淘汰 + 金质跳字 + 四块精致化
   ===================================================================== */

/* ---- 随从淘汰：卡牌燃烧溶解 + 余烬飘散“离开” ---- */
.ca-burn { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 92; }
.ca-burn-card {
  position: absolute; left: 0; top: 0;
  width: var(--bw, 80px); height: var(--bh, 110px);
  border-radius: 8px; overflow: hidden; transform-origin: 50% 60%;
  background: linear-gradient(160deg, #2a120c, #3c1810 55%, #1c0806);
  border: 1px solid rgba(232, 198, 74, 0.5);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
  animation: ca-burn-card 0.95s ease-in forwards;
}
.ca-burn-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255, 120, 60, 0.98), rgba(255, 45, 18, 0.5) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: ca-burn-glow 0.95s ease-in forwards;
}
.ca-burn-card .ca-burn-name {
  position: absolute; left: 0; right: 0; bottom: 9%;
  text-align: center; font-family: var(--cardarena-serif, Georgia, serif);
  font-size: 0.6rem; color: #f3d79a; text-shadow: 0 1px 2px #000; letter-spacing: 0.04em;
}
@keyframes ca-burn-card {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
  16%  { filter: brightness(1.9) saturate(1.3); }
  52%  { opacity: 0.92; transform: scale(1.02) rotate(-1.4deg); filter: brightness(1.4) sepia(0.35); }
  100% { opacity: 0; transform: scale(0.84) rotate(3deg) translateY(-12px); filter: brightness(0.3) sepia(0.85); }
}
@keyframes ca-burn-glow {
  0% { opacity: 0; } 15% { opacity: 1; } 60% { opacity: 0.7; } 100% { opacity: 0; }
}
.ca-ember {
  position: absolute; left: var(--ex, 0px); top: var(--ey, 0px);
  width: var(--es, 5px); height: var(--es, 5px);
  border-radius: 50% 45% 55% 40%;
  background: radial-gradient(circle at 35% 35%, #ffb24d, #ff3d12 50%, #6e1206);
  box-shadow: 0 0 9px rgba(255, 80, 40, 0.95), 0 0 18px rgba(255, 40, 20, 0.6);
  opacity: 0;
  animation: ca-ember-rise var(--ed, 1.1s) ease-out var(--el, 0s) forwards;
}
@keyframes ca-ember-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--edx, 10px), var(--edy, -96px)) scale(0.25) rotate(var(--er, 200deg)); }
}
.ca-burn.is-player .ca-burn-card {
  border-color: rgba(255, 224, 150, 0.85);
  box-shadow: inset 0 0 22px rgba(120, 80, 20, 0.6), 0 0 26px rgba(232, 198, 74, 0.5);
}
.ca-burn.is-player .ca-ember {
  background: radial-gradient(circle at 35% 35%, #fff0c0, #ff7a3a 55%, #8a2a0f);
  box-shadow: 0 0 9px rgba(255, 120, 60, 0.95), 0 0 18px rgba(255, 80, 40, 0.6);
}
.ca-burn-seal {
  position: absolute; left: 0; top: 0;
  width: var(--bw, 80px); height: var(--bh, 110px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; animation: ca-burn-seal 1.15s ease-out forwards;
}
.ca-burn-seal span {
  font-family: var(--cardarena-serif, Georgia, serif);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.34em; text-indent: 0.34em;
  color: #ffe9a8; text-shadow: 0 0 10px rgba(232, 198, 74, 0.9), 0 2px 0 #000;
  border: 1px solid rgba(232, 198, 74, 0.6); border-radius: 3px;
  padding: 2px 8px; background: rgba(40, 28, 10, 0.45);
}
@keyframes ca-burn-seal {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.05); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1) translateY(-8px); }
}

/* ---- 跳字：金质渐变衬线数字（离线）---- */
.ca-fx-dmg, .ca-fx-heal {
  font-family: Georgia, 'Times New Roman', serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: none;
}
.ca-fx-dmg {
  background: linear-gradient(180deg, #fff6cf 0%, #ffd86b 34%, #e8c64a 60%, #b8860b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 7px rgba(255, 200, 80, 0.55));
}
.ca-fx-heal {
  background: linear-gradient(180deg, #e2ffee 0%, #8ff0b4 50%, #3fcf7a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 0 7px rgba(80, 220, 130, 0.5));
}
.ca-fx-dmg--heavy {
  font-size: 1.45rem;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd86b 40%, #e8c64a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ca-fx-dmg--lethal {
  font-size: 1.7rem;
  background: linear-gradient(180deg, #ffe2c0 0%, #ff9a4d 45%, #ff4d3d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 90, 60, 0.7));
}
/* 从出牌角色(攻击者)飞向受击方 */
.ca-fx-toss { animation: ca-fx-toss 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes ca-fx-toss {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--tx, 0px)), var(--ty, 0px)) scale(0.4); }
  18%  { opacity: 1; transform: translate(-50%, calc(var(--ty, 0px) * 0.3)) scale(1.55); }
  58%  { opacity: 1; transform: translate(-50%, -14px) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -72px) scale(1); }
}

/* ---- 四块精致化 ---- */
/* ① 召唤/落定：更 Q 弹的回弹 */
@keyframes ca-minion-enter {
  0%   { opacity: 0; transform: translateY(14px) scale(0.82); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.05); }
  78%  { transform: translateY(2px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ② 受击反馈层次：闪光更有层、震屏更克制精准 */
@keyframes ca-hit {
  0%   { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 26px 8px rgba(255, 240, 200, 0.85); filter: brightness(2.1); }
  45%  { box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.6), 0 0 14px 3px rgba(255, 210, 110, 0.5); filter: brightness(1.5); }
  100% { box-shadow: none; filter: brightness(1); }
}
@keyframes ca-hit-lethal {
  0%   { box-shadow: inset 0 0 0 3px rgba(255, 120, 80, 0.95), 0 0 34px 12px rgba(255, 90, 50, 0.8); filter: brightness(2.4) saturate(1.4); }
  50%  { box-shadow: inset 0 0 0 1px rgba(255, 140, 90, 0.6), 0 0 16px 4px rgba(255, 90, 50, 0.5); filter: brightness(1.6) saturate(1.2); }
  100% { box-shadow: none; filter: brightness(1); }
}
@keyframes ca-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-3px, 1px); }
  30% { transform: translate(3px, -1px); }
  45% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -1px); }
  80% { transform: translate(-1px, 0); }
}
/* ③ 微交互：hover 能量宝石脉冲 + 选中共振更明显 */
.ca-card:hover:not(.disabled) .ca-card-star,
.ca-minion:hover:not(.disabled) .ca-minion-star { animation: ca-gem-pulse 1.4s ease-in-out infinite; }
@keyframes ca-gem-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(232, 198, 74, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 220, 120, 0.95)); transform: scale(1.12); }
}
.ca-card:hover:not(.disabled) .ca-card-ring { opacity: 0.85 !important; }
/* ④ 胜负仪式：光柱更细、碎裂更碎更慢、战报更雅 */
.ca-lightbeam {
  width: 54px;
  background: linear-gradient(180deg, rgba(255, 240, 190, 0), rgba(255, 230, 150, 0.5) 40%, rgba(232, 198, 74, 0.85));
  filter: blur(1.5px);
}
.ca-win-box.show .ca-lightbeam { animation: caBeam 2s ease-out 0.3s forwards; }
.ca-shatter::before, .ca-shatter::after {
  background:
    repeating-linear-gradient(135deg, rgba(20, 14, 8, 0) 0 6px, rgba(60, 42, 22, 0.28) 6px 7px),
    repeating-linear-gradient(45deg, rgba(40, 28, 14, 0) 0 9px, rgba(90, 66, 34, 0.22) 9px 10px),
    linear-gradient(180deg, rgba(70, 50, 26, 0), rgba(40, 28, 14, 0.5));
}
.ca-lose-box.show .ca-shatter::before { animation: caShatter 0.9s ease-out 0.2s forwards; }
.ca-lose-box.show .ca-shatter::after { animation: caShatter 1.1s ease-out 0.35s forwards; }
.ca-gameover-report .ca-report-row { animation: ca-report-row 0.5s ease-out both; }
.ca-gameover-report .ca-report-row:nth-child(1) { animation-delay: 0.35s; }
.ca-gameover-report .ca-report-row:nth-child(2) { animation-delay: 0.45s; }
.ca-gameover-report .ca-report-row:nth-child(3) { animation-delay: 0.55s; }
.ca-gameover-report .ca-report-row:nth-child(4) { animation-delay: 0.65s; }
@keyframes ca-report-row { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }

/* 降级：reduced-motion 时燃烧/跳字静态可见、屏蔽常驻微动 */
@media (prefers-reduced-motion: reduce) {
  .ca-burn-card, .ca-ember, .ca-burn-seal, .ca-fx-toss, .ca-gem-pulse { animation: none !important; }
/* v1.5.0 烙印升级：红色烙铁印章 + 阵亡者之名 */
.ca-burn-seal { flex-direction: column; gap: 3px; }
.ca-burn-seal-main {
  font-family: var(--cardarena-serif, Georgia, serif);
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.3em; text-indent: 0.3em;
  color: #ffd9a0;
  text-shadow: 0 0 12px rgba(255, 90, 40, 0.9), 0 0 4px rgba(255, 40, 20, 0.9), 0 2px 0 #000;
  border: 1.5px solid rgba(255, 110, 50, 0.75); border-radius: 3px; padding: 2px 10px;
  background: rgba(50, 16, 8, 0.5);
  box-shadow: inset 0 0 16px rgba(255, 70, 30, 0.45), 0 0 12px rgba(255, 80, 40, 0.4);
}
.ca-burn-seal-sub {
  font-family: var(--cardarena-serif, Georgia, serif);
  font-size: 0.52rem; letter-spacing: 0.18em; text-indent: 0.18em;
  color: #ffb98a; text-shadow: 0 1px 2px #000;
}
  .ca-burn-card { opacity: 0.6; }
  .ca-ember { opacity: 0.8; }
  .ca-burn-seal { opacity: 1; }
}

/* =====================================================================
   CardArena v1.4.0 — 随从燃烧淘汰 + 金质跳字 + 四块精致化
   ===================================================================== */

/* ---- 随从淘汰：卡牌燃烧溶解 + 余烬飘散“离开” ---- */
.ca-burn { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 92; }
.ca-burn-card {
  position: absolute; left: 0; top: 0;
  width: var(--bw, 80px); height: var(--bh, 110px);
  border-radius: 8px; overflow: hidden; transform-origin: 50% 60%;
  background: linear-gradient(160deg, #2a120c, #3c1810 55%, #1c0806);
  border: 1px solid rgba(232, 198, 74, 0.5);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
  animation: ca-burn-card 0.95s ease-in forwards;
}
.ca-burn-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255, 120, 60, 0.98), rgba(255, 45, 18, 0.5) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: ca-burn-glow 0.95s ease-in forwards;
}
.ca-burn-card .ca-burn-name {
  position: absolute; left: 0; right: 0; bottom: 9%;
  text-align: center; font-family: var(--cardarena-serif, Georgia, serif);
  font-size: 0.6rem; color: #f3d79a; text-shadow: 0 1px 2px #000; letter-spacing: 0.04em;
}
@keyframes ca-burn-card {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
  16%  { filter: brightness(1.9) saturate(1.3); }
  52%  { opacity: 0.92; transform: scale(1.02) rotate(-1.4deg); filter: brightness(1.4) sepia(0.35); }
  100% { opacity: 0; transform: scale(0.84) rotate(3deg) translateY(-12px); filter: brightness(0.3) sepia(0.85); }
}
@keyframes ca-burn-glow {
  0% { opacity: 0; } 15% { opacity: 1; } 60% { opacity: 0.7; } 100% { opacity: 0; }
}
.ca-ember {
  position: absolute; left: var(--ex, 0px); top: var(--ey, 0px);
  width: var(--es, 5px); height: var(--es, 5px);
  border-radius: 50% 45% 55% 40%;
  background: radial-gradient(circle at 35% 35%, #ffb24d, #ff3d12 50%, #6e1206);
  box-shadow: 0 0 9px rgba(255, 80, 40, 0.95), 0 0 18px rgba(255, 40, 20, 0.6);
  opacity: 0;
  animation: ca-ember-rise var(--ed, 1.1s) ease-out var(--el, 0s) forwards;
}
@keyframes ca-ember-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--edx, 10px), var(--edy, -96px)) scale(0.25) rotate(var(--er, 200deg)); }
}
.ca-burn.is-player .ca-burn-card {
  border-color: rgba(255, 224, 150, 0.85);
  box-shadow: inset 0 0 22px rgba(120, 80, 20, 0.6), 0 0 26px rgba(232, 198, 74, 0.5);
}
.ca-burn.is-player .ca-ember {
  background: radial-gradient(circle at 35% 35%, #fff0c0, #ff7a3a 55%, #8a2a0f);
  box-shadow: 0 0 9px rgba(255, 120, 60, 0.95), 0 0 18px rgba(255, 80, 40, 0.6);
}
.ca-burn-seal {
  position: absolute; left: 0; top: 0;
  width: var(--bw, 80px); height: var(--bh, 110px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; animation: ca-burn-seal 1.15s ease-out forwards;
}
.ca-burn-seal span {
  font-family: var(--cardarena-serif, Georgia, serif);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.34em; text-indent: 0.34em;
  color: #ffe9a8; text-shadow: 0 0 10px rgba(232, 198, 74, 0.9), 0 2px 0 #000;
  border: 1px solid rgba(232, 198, 74, 0.6); border-radius: 3px;
  padding: 2px 8px; background: rgba(40, 28, 10, 0.45);
}
@keyframes ca-burn-seal {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.05); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1) translateY(-8px); }
}

/* ---- 跳字：金质渐变衬线数字（离线）---- */
.ca-fx-dmg, .ca-fx-heal {
  font-family: Georgia, 'Times New Roman', serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: none;
}
.ca-fx-dmg {
  background: linear-gradient(180deg, #fff6cf 0%, #ffd86b 34%, #e8c64a 60%, #b8860b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 7px rgba(255, 200, 80, 0.55));
}
.ca-fx-heal {
  background: linear-gradient(180deg, #e2ffee 0%, #8ff0b4 50%, #3fcf7a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 0 7px rgba(80, 220, 130, 0.5));
}
.ca-fx-dmg--heavy {
  font-size: 1.45rem;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd86b 40%, #e8c64a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ca-fx-dmg--lethal {
  font-size: 1.7rem;
  background: linear-gradient(180deg, #ffe2c0 0%, #ff9a4d 45%, #ff4d3d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 90, 60, 0.7));
}
/* 从出牌角色(攻击者)飞向受击方 */
.ca-fx-toss { animation: ca-fx-toss 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes ca-fx-toss {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--tx, 0px)), var(--ty, 0px)) scale(0.4); }
  18%  { opacity: 1; transform: translate(-50%, calc(var(--ty, 0px) * 0.3)) scale(1.55); }
  58%  { opacity: 1; transform: translate(-50%, -14px) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -72px) scale(1); }
}

/* ---- 四块精致化 ---- */
/* ① 召唤/落定：更 Q 弹的回弹 */
@keyframes ca-minion-enter {
  0%   { opacity: 0; transform: translateY(14px) scale(0.82); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.05); }
  78%  { transform: translateY(2px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ② 受击反馈层次：闪光更有层、震屏更克制精准 */
@keyframes ca-hit {
  0%   { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 26px 8px rgba(255, 240, 200, 0.85); filter: brightness(2.1); }
  45%  { box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.6), 0 0 14px 3px rgba(255, 210, 110, 0.5); filter: brightness(1.5); }
  100% { box-shadow: none; filter: brightness(1); }
}
@keyframes ca-hit-lethal {
  0%   { box-shadow: inset 0 0 0 3px rgba(255, 120, 80, 0.95), 0 0 34px 12px rgba(255, 90, 50, 0.8); filter: brightness(2.4) saturate(1.4); }
  50%  { box-shadow: inset 0 0 0 1px rgba(255, 140, 90, 0.6), 0 0 16px 4px rgba(255, 90, 50, 0.5); filter: brightness(1.6) saturate(1.2); }
  100% { box-shadow: none; filter: brightness(1); }
}
@keyframes ca-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-3px, 1px); }
  30% { transform: translate(3px, -1px); }
  45% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -1px); }
  80% { transform: translate(-1px, 0); }
}
/* ③ 微交互：hover 能量宝石脉冲 + 选中共振更明显 */
.ca-card:hover:not(.disabled) .ca-card-star,
.ca-minion:hover:not(.disabled) .ca-minion-star { animation: ca-gem-pulse 1.4s ease-in-out infinite; }
@keyframes ca-gem-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(232, 198, 74, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 220, 120, 0.95)); transform: scale(1.12); }
}
.ca-card:hover:not(.disabled) .ca-card-ring { opacity: 0.85 !important; }
/* ④ 胜负仪式：光柱更细、碎裂更碎更慢、战报更雅 */
.ca-lightbeam {
  width: 54px;
  background: linear-gradient(180deg, rgba(255, 240, 190, 0), rgba(255, 230, 150, 0.5) 40%, rgba(232, 198, 74, 0.85));
  filter: blur(1.5px);
}
.ca-win-box.show .ca-lightbeam { animation: caBeam 2s ease-out 0.3s forwards; }
.ca-shatter::before, .ca-shatter::after {
  background:
    repeating-linear-gradient(135deg, rgba(20, 14, 8, 0) 0 6px, rgba(60, 42, 22, 0.28) 6px 7px),
    repeating-linear-gradient(45deg, rgba(40, 28, 14, 0) 0 9px, rgba(90, 66, 34, 0.22) 9px 10px),
    linear-gradient(180deg, rgba(70, 50, 26, 0), rgba(40, 28, 14, 0.5));
}
.ca-lose-box.show .ca-shatter::before { animation: caShatter 0.9s ease-out 0.2s forwards; }
.ca-lose-box.show .ca-shatter::after { animation: caShatter 1.1s ease-out 0.35s forwards; }
.ca-gameover-report .ca-report-row { animation: ca-report-row 0.5s ease-out both; }
.ca-gameover-report .ca-report-row:nth-child(1) { animation-delay: 0.35s; }
.ca-gameover-report .ca-report-row:nth-child(2) { animation-delay: 0.45s; }
.ca-gameover-report .ca-report-row:nth-child(3) { animation-delay: 0.55s; }
.ca-gameover-report .ca-report-row:nth-child(4) { animation-delay: 0.65s; }
@keyframes ca-report-row { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }

/* 降级：reduced-motion 时燃烧/跳字静态可见、屏蔽常驻微动 */
@media (prefers-reduced-motion: reduce) {
  .ca-burn-card, .ca-ember, .ca-burn-seal, .ca-fx-toss, .ca-gem-pulse { animation: none !important; }
/* v1.5.0 烙印升级：红色烙铁印章 + 阵亡者之名 */
.ca-burn-seal { flex-direction: column; gap: 3px; }
.ca-burn-seal-main {
  font-family: var(--cardarena-serif, Georgia, serif);
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.3em; text-indent: 0.3em;
  color: #ffd9a0;
  text-shadow: 0 0 12px rgba(255, 90, 40, 0.9), 0 0 4px rgba(255, 40, 20, 0.9), 0 2px 0 #000;
  border: 1.5px solid rgba(255, 110, 50, 0.75); border-radius: 3px; padding: 2px 10px;
  background: rgba(50, 16, 8, 0.5);
  box-shadow: inset 0 0 16px rgba(255, 70, 30, 0.45), 0 0 12px rgba(255, 80, 40, 0.4);
}
.ca-burn-seal-sub {
  font-family: var(--cardarena-serif, Georgia, serif);
  font-size: 0.52rem; letter-spacing: 0.18em; text-indent: 0.18em;
  color: #ffb98a; text-shadow: 0 1px 2px #000;
}
  .ca-burn-card { opacity: 0.6; }
  .ca-ember { opacity: 0.8; }
  .ca-burn-seal { opacity: 1; }
}

/* v1.5.0 卡牌立绘：生成的图片卡铺进艺术区，取代占位星徽（加载失败自动回落星徽） */
.ca-art-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border-radius: 6px; pointer-events: none; z-index: 1;
}
.ca-card-art, .ca-minion-art, .ca-role-art { position: relative; }
.ca-card-art.ca-has-art,
.ca-minion-art.ca-has-art,
.ca-role-art.ca-has-art {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 20px rgba(0, 0, 0, 0.4);
}
.ca-hero-star { overflow: hidden; }