/* 1. 核心底色：深红暗影与金属拉丝 */
:root {
  --blood-red: #8B0000;      /* 深血红 */
  --metal-gray: #2C2C2C;     /* 金属深灰 */
  --highlight-gold: #FFD700; /* 冠军金 */
  --border-thick: 5px solid #000;
}

/* 2. 背景层：深红渐变 + 细微金属质感，且不影响图片 */
div, details, text {
  background-color: #1a0505; /* 极深红底色 */
  background-image: 
    linear-gradient(45deg, rgba(0,0,0,0.4) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.4) 25%, transparent 25%),
    radial-gradient(circle at 50% 50%, #4a0000 0%, #1a0505 100%); /* 深红光晕 */
  background-size: 4px 4px, 4px 4px, 100% 100%;
  color: #eee;
  font-family: "Chalkboard SE", "Microsoft YaHei", sans-serif;
}

/* 3. 确保后续插入的图片不被背景覆盖或染色 */
img {
  background: none !important;
  border: 3px solid #000;
  box-shadow: 0 0 15px rgba(255,0,0,0.3);
  max-width: 100%;
  border-radius: 4px;
}

/* 4. 决斗分镜框：重型工业/金属边框 */
details, .duel-container {
  border: var(--border-thick);
  border-radius: 2px; /* 决斗场要硬朗，圆角改小 */
  margin-bottom: 15px;
  box-shadow: 10px 10px 0px #000;
  position: relative;
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%); /* 内部金属质感 */
}

/* 5. 血迹效果 (伪元素模拟，不影响文字排版) */
.duel-container::before {
  content: "";
  position: absolute;
  top: -10px; right: -10px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(139,0,0,0.8) 0%, transparent 70%);
  filter: blur(5px);
  pointer-events: none; /* 不干扰点击 */
  z-index: 1;
}

/* 6. 状态栏(Summary)：拉丝金属板交互 */
summary {
  background: linear-gradient(180deg, #444 0%, #000 100%);
  color: var(--highlight-gold);
  padding: 15px;
  font-weight: 900;
  cursor: pointer;
  border-bottom: var(--border-thick);
  text-shadow: 2px 2px 2px #000;
  letter-spacing: 2px;
}

/* 7. 点击时的“骨折级”打击感 */
summary:active, .duel-container:active {
  transform: scale(0.97) translate(2px, 2px);
  filter: brightness(1.5) sepia(1) hue-rotate(-50deg); /* 击中瞬闪红光 */
  box-shadow: 0px 0px 20px var(--blood-red);
  transition: 0.05s;
}

/* 8. 短期/长期记忆区：仿旧档案感 */
.battle-log {
  border-left: 5px solid var(--blood-red);
  margin-left: 10px;
  padding: 15px;
  background: rgba(0,0,0,0.3);
}

/* 9. 强调文字：血液滴落感 */
b, strong {
  color: #ff3333;
  text-shadow: 1px 1px 0px #000;
  border-bottom: 1px solid var(--blood-red);
}

/* 10. 隐藏思维链 */
think { display: none; }