/* =========================================================
   ✦ 月辉精灵秘境 · Elven Astral Grimoire (性能优化版)
   根标签：<ai>
   ========================================================= */


/* ---------- 主容器 ---------- */

ai {
  display: block;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;

  margin: 14px 0;
  padding: 24px;

  color: #35405f;

  font-family:
    "Noto Serif SC",
    "Source Han Serif SC",
    "Songti SC",
    serif;

  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.18px;

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(255, 248, 202, 0.78) 0%,
      rgba(255, 248, 202, 0.18) 13%,
      transparent 29%
    ),
    radial-gradient(
      circle at 87% 10%,
      rgba(184, 219, 255, 0.78) 0%,
      rgba(190, 217, 255, 0.2) 18%,
      transparent 38%
    ),
    radial-gradient(
      circle at 76% 76%,
      rgba(220, 196, 255, 0.46) 0%,
      transparent 34%
    ),
    radial-gradient(
      circle at 15% 89%,
      rgba(158, 231, 213, 0.34) 0%,
      transparent 31%
    ),
    linear-gradient(
      138deg,
      #fffdf6 0%,
      #f4f5ff 24%,
      #edf7ff 49%,
      #f5f0ff 73%,
      #fff9e8 100%
    );

  border: 1px solid rgba(132, 130, 196, 0.48);
  border-radius: 26px;

  box-shadow:
    0 14px 38px rgba(77, 73, 136, 0.15),
    0 3px 9px rgba(81, 151, 170, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.82) inset,
    0 0 34px rgba(177, 158, 239, 0.13);

  animation: elfRealmEnter 0.65s ease-out both;
  will-change: transform, opacity;
}


/* ---------- 背景大型魔法阵 ---------- */

ai::before {
  content: "✦　ᚠ　✧　ᛉ　☾　ᚱ　✦　𖤓";

  position: absolute;
  top: 14px;
  left: -20px;

  width: 120%;

  z-index: 0;
  pointer-events: none;

  color: rgba(100, 87, 167, 0.11);

  font-size: 28px;
  letter-spacing: 18px;
  white-space: nowrap;

  transform: rotate(-3deg);

  animation: elfRuneRiver 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}


/* ---------- 背景月辉光晕 ---------- */

ai::after {
  content: "";

  position: absolute;
  top: -120px;
  right: -90px;

  width: 340px;
  height: 340px;

  z-index: 0;
  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 246, 186, 0.62) 0%,
      rgba(225, 213, 255, 0.34) 30%,
      rgba(174, 211, 255, 0.19) 48%,
      transparent 71%
    );

  box-shadow:
    0 0 80px rgba(178, 171, 241, 0.22);

  animation: elfMoonGlow 7s ease-in-out infinite alternate;
  will-change: transform, opacity;
}


/* =========================================================
   隐藏内容
   ========================================================= */

ai details.cot {
  display: none !important;
}

ai sys {
  display: none !important;
}


/* =========================================================
   ✦ 顶部环境栏 · 精简性能
   ========================================================= */

ai hd {
  display: grid;
  position: relative;
  z-index: 2;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;

  margin: 1px 0 21px;
  padding: 14px 16px;

  background:
    radial-gradient(
      ellipse at 30% 0%,
      rgba(255, 242, 186, 0.52),
      transparent 40%
    ),
    radial-gradient(
      ellipse at 70% 100%,
      rgba(186, 210, 255, 0.38),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(235, 240, 255, 0.85),
      rgba(239, 252, 250, 0.82)
    );

  border: 1px solid rgba(132, 132, 194, 0.35);
  border-radius: 22px;

  box-shadow:
    0 7px 19px rgba(79, 78, 141, 0.09),
    0 0 18px rgba(211, 198, 255, 0.13) inset,
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

ai hd::before {
  content: "✧ ᛟ ✦ ᚱ ✦ ᛟ ✧ ☾ ᛉ ✧";
  position: absolute;
  bottom: -16px;
  left: 50%;
  color: rgba(105, 94, 173, 0.42);
  font-size: 10px;
  letter-spacing: 5px;
  white-space: nowrap;
  transform: translateX(-50%);
  text-shadow: 0 0 6px rgba(132, 112, 201, 0.15);
  animation: elfRunePulse 4s ease-in-out infinite;
  will-change: opacity, transform;
}

ai hd::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 5%;
  width: 28%;
  height: 2px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(99, 185, 207, 0.15),
      rgba(116, 99, 203, 0.76),
      rgba(233, 191, 95, 0.88),
      transparent
    );
  box-shadow: 0 0 8px rgba(132, 113, 214, 0.38);
  animation: elfMagicStream 5.6s ease-in-out infinite;
  will-change: left, opacity;
}

ai hd d {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  color: #4e5279;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(255, 248, 205, 0.52),
      transparent 35%
    ),
    linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.9),
      rgba(235, 242, 255, 0.8)
    );
  border: 1px solid rgba(132, 131, 193, 0.28);
  border-radius: 16px;
  box-shadow: 0 4px 11px rgba(71, 78, 133, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

ai hd d:nth-child(1) {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 235, 150, 0.55), transparent 30%),
    linear-gradient(140deg, rgba(255, 252, 240, 0.95), rgba(248, 242, 225, 0.85));
  border-color: rgba(200, 170, 80, 0.35);
}
ai hd d:nth-child(2) {
  background:
    radial-gradient(circle at 30% 20%, rgba(150, 210, 255, 0.45), transparent 30%),
    linear-gradient(140deg, rgba(240, 248, 255, 0.95), rgba(225, 238, 250, 0.85));
  border-color: rgba(80, 160, 210, 0.3);
}
ai hd d:nth-child(3) {
  background:
    radial-gradient(circle at 25% 25%, rgba(200, 180, 255, 0.45), transparent 30%),
    linear-gradient(140deg, rgba(248, 245, 255, 0.95), rgba(235, 230, 250, 0.85));
  border-color: rgba(150, 130, 210, 0.3);
}

ai hd d:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 24px rgba(70, 68, 130, 0.14);
}

ai hd f {
  display: inline-block;
  margin-right: 2px;
  font-size: 19px;
  font-style: normal;
  transition: transform 0.4s ease;
  animation: elfIconHover 3.2s ease-in-out infinite;
  will-change: transform;
}


/* =========================================================
   ✦ 正文区域（非对话）
   ========================================================= */

ai text {
  display: block;
  position: relative;
  z-index: 2;

  margin: 0 2px 20px;
  padding: 20px 21px;

  background:
    radial-gradient(
      circle at 5% 5%,
      rgba(255, 248, 205, 0.42),
      transparent 27%
    ),
    radial-gradient(
      circle at 95% 90%,
      rgba(194, 225, 255, 0.34),
      transparent 37%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.82),
      rgba(246, 245, 255, 0.78)
    );

  border: 1px solid rgba(131, 127, 192, 0.28);
  border-left: 4px solid rgba(114, 102, 187, 0.7);
  border-radius: 7px 20px 20px 7px;

  box-shadow:
    0 8px 22px rgba(73, 73, 130, 0.08),
    0 0 20px rgba(204, 195, 247, 0.09) inset;
}

ai text::before {
  content: "☾ ✧ ᚠ";
  position: absolute;
  top: 8px;
  right: 14px;
  color: rgba(103, 90, 169, 0.22);
  font-size: 17px;
  letter-spacing: 7px;
  animation: elfGlyphGlow 4.5s ease-in-out infinite;
  will-change: opacity, text-shadow;
}

ai text::after {
  content: "❧ ───── ✦ ───── ❧";
  display: block;
  margin-top: 13px;
  color: rgba(112, 103, 176, 0.38);
  font-size: 11px;
  letter-spacing: 4px;
  text-align: center;
}

ai text p {
  position: relative;
  margin: 9px 5px 16px;
  color: #39445d;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.28px;
  text-align: justify;
}

ai text p:first-child::first-letter {
  float: left;
  margin: 6px 8px 0 0;
  color: #7364b4;
  font-size: 40px;
  font-weight: 700;
  line-height: 0.79;
  text-shadow:
    0 2px 5px rgba(101, 85, 173, 0.16),
    0 0 12px rgba(214, 183, 85, 0.23);
}


/* =========================================================
   ✦ 奇幻对话框 · 性能优化版（保留风格，移除高耗能效果）
   ========================================================= */

ai q {
  display: block;
  position: relative;
  overflow: hidden;

  margin: 24px 12px;
  padding: 28px 32px 26px 34px;

  /* 羊皮纸主体（简化背景层） */
  background:
    linear-gradient(155deg, #f5e6d3 0%, #ead5c1 30%, #f2e0cf 70%, #e8d5c0 100%);

  color: #4a3728;  /* 深棕色墨水 */
  font-size: 16px;
  font-style: normal;
  line-height: 1.85;

  /* 金色边框 + 发光动画（降低阴影复杂度） */
  border: 2px solid #b8964a;
  border-image: linear-gradient(135deg, #d4af37 0%, #b8860b 30%, #c9a050 60%, #d4c4a0 100%) 1;
  border-radius: 4px 20px 20px 4px;

  box-shadow:
    0 10px 30px rgba(60, 40, 20, 0.25),
    0 0 0 1px rgba(255, 215, 140, 0.15) inset;

  animation: borderGlow 4s ease-in-out infinite alternate;
  will-change: border-color, box-shadow;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 四角金属包角：用简化的 box-shadow 小方块（减少数量） */
ai q::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 16px;
  height: 16px;
  z-index: 3;
  pointer-events: none;
  background: #d4af37;
  border-radius: 2px 0 0 0;
  box-shadow:
    calc(100% + 2px) 0 0 0 #d4c4a0,
    calc(100% + 2px) calc(100% + 2px) 0 0 #b8860b,
    0 calc(100% + 2px) 0 0 #c69d5a;
  opacity: 0.8;
  animation: metalPulse 3s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

/* 星图背景层：保留静态星点，移除旋转动画 */
ai q::after {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 200, 0.2), transparent),
    radial-gradient(1px 1px at 30% 45%, rgba(200, 200, 255, 0.15), transparent),
    radial-gradient(3px 3px at 55% 70%, rgba(255, 220, 150, 0.15), transparent),
    radial-gradient(1px 1px at 70% 15%, rgba(180, 200, 255, 0.2), transparent),
    radial-gradient(2px 2px at 85% 50%, rgba(255, 200, 100, 0.12), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(200, 180, 255, 0.15), transparent),
    radial-gradient(1px 1px at 45% 10%, rgba(255, 255, 180, 0.2), transparent),
    radial-gradient(2px 2px at 90% 85%, rgba(150, 200, 255, 0.15), transparent),
    radial-gradient(circle at 40% 60%, rgba(200, 180, 255, 0.04), transparent 30%),
    radial-gradient(circle at 70% 30%, rgba(255, 220, 150, 0.03), transparent 25%);
  background-repeat: no-repeat;
  opacity: 0.4;
  /* 移除旋转动画 */
}

/* 底部发光铭文线（简化动画） */
ai q::after {
  content: "✦ ᚱ ✧ ᛉ ✧ ᚱ ✦";
  position: absolute;
  right: 20px;
  bottom: 6px;
  z-index: 2;
  color: rgba(212, 175, 55, 0.3);
  font-size: 9px;
  letter-spacing: 6px;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.2);
  animation: inscriptionGlow 3.5s ease-in-out infinite alternate;
  will-change: opacity, text-shadow;
  pointer-events: none;
}

/* 说话者名称 —— 烫金烙印（保留呼吸光晕） */
ai q f {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin-right: 14px;
  padding: 4px 16px 4px 14px;

  font-family: "Brush Script MT", "Apple Chancery", "Comic Sans MS", cursive;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.8px;

  background: linear-gradient(145deg, #d4af37 0%, #b8860b 40%, #d4af37 70%, #c9a050 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 0 8px rgba(212, 175, 55, 0.3),
    0 0 16px rgba(184, 134, 11, 0.2);

  animation: goldBreath 3s ease-in-out infinite alternate;
  will-change: text-shadow;

  background-color: rgba(255, 215, 140, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.05) inset;
}

ai q f::before {
  content: "✧";
  margin-right: 7px;
  color: #d4af37;
  -webkit-text-fill-color: #d4af37;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  animation: starPulse 2.5s ease-in-out infinite;
  will-change: opacity, transform;
}
ai q f::after {
  content: " ✦";
  margin-left: 4px;
  color: #b8860b;
  -webkit-text-fill-color: #b8860b;
  font-size: 12px;
  text-shadow: 0 0 8px rgba(184, 134, 11, 0.5);
}

/* 对话文字——深棕色墨水（移除微尘浮动动画） */
ai q p {
  position: relative;
  z-index: 1;
  margin: 8px 5px 12px;
  color: #4a3728;
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: 0.3px;
  text-align: justify;
  text-shadow: 0 0 2px rgba(0,0,0,0.02);
}

ai q p:first-child::first-letter {
  float: left;
  margin: 4px 8px 0 0;
  color: #6b4c2a;
  font-size: 42px;
  font-weight: 700;
  line-height: 0.75;
  text-shadow: 0 2px 6px rgba(60, 40, 20, 0.15);
}

/* 移除原先的微尘动画 (ai q p::after) */

/* 对话框悬浮增强 */
ai q:hover {
  transform: translateX(6px) translateY(-2px);
  box-shadow: 0 14px 34px rgba(60, 40, 20, 0.3), 0 0 0 2px rgba(255, 215, 140, 0.3) inset;
  border-color: #d4af37;
}


/* =========================================================
   信息卡 · 其他元素（保持不变，性能开销小）
   ========================================================= */

ai details {
  display: block;
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: 14px 1px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(205, 194, 255, 0.27),
      transparent 34%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(185, 230, 222, 0.24),
      transparent 30%
    ),
    linear-gradient(
      137deg,
      rgba(255, 255, 255, 0.87),
      rgba(245, 246, 255, 0.84)
    );
  border: 1px solid rgba(124, 118, 184, 0.37);
  border-radius: 20px;
  box-shadow:
    0 7px 20px rgba(75, 72, 128, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.62) inset;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

ai details:hover {
  transform: translateY(-1px);
  border-color: rgba(111, 98, 186, 0.52);
  box-shadow: 0 10px 26px rgba(72, 69, 127, 0.13), 0 0 19px rgba(193, 181, 239, 0.13);
}

ai details[open] {
  animation: elfDetailBloom 0.34s ease both;
}

ai summary {
  position: relative;
  padding: 14px 47px 14px 18px;
  color: #5a5289;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.9px;
  cursor: pointer;
  user-select: none;
  background:
    radial-gradient(
      circle at 4% 50%,
      rgba(255, 235, 154, 0.48),
      transparent 21%
    ),
    linear-gradient(
      90deg,
      rgba(236, 235, 255, 0.94),
      rgba(238, 249, 255, 0.88),
      rgba(255, 249, 222, 0.76)
    );
  border-bottom: 1px solid rgba(128, 119, 184, 0.25);
  transition: padding-left 0.25s ease, color 0.25s ease, background 0.25s ease;
}

ai summary:hover {
  padding-left: 24px;
  color: #6451a5;
  background: linear-gradient(90deg, rgba(228, 225, 255, 0.98), rgba(232, 247, 255, 0.93), rgba(255, 245, 202, 0.84));
}

ai summary::after {
  content: "✦";
  position: absolute;
  top: 50%;
  right: 18px;
  color: #b38a3e;
  font-size: 16px;
  transform: translateY(-50%);
  text-shadow: 0 0 8px rgba(225, 189, 91, 0.45);
  transition: transform 0.4s ease;
  animation: elfStarPulse 2.6s ease-in-out infinite;
  will-change: opacity, text-shadow, transform;
}
ai details[open] > summary::after {
  transform: translateY(-50%) rotate(135deg) scale(1.12);
}

ai t {
  display: block;
  position: relative;
  margin: 17px 15px 9px;
  padding: 7px 14px 7px 16px;
  color: #5d5990;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  background: linear-gradient(90deg, rgba(229, 227, 255, 0.85), rgba(231, 247, 250, 0.56), transparent);
  border-left: 3px solid #9280c6;
  border-radius: 5px 13px 13px 5px;
}
ai t::before {
  content: "✦";
  margin-right: 7px;
  color: #c59e46;
  font-size: 11px;
}
ai t::after {
  content: "  ᚠ ✧";
  color: rgba(91, 79, 153, 0.48);
  font-size: 9px;
  letter-spacing: 3px;
}

ai details > d {
  display: block;
  margin: 6px 14px;
  padding: 9px 12px;
  color: #46506b;
  font-size: 14px;
  line-height: 1.75;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.61), rgba(242, 245, 255, 0.55));
  border: 1px solid transparent;
  border-radius: 11px;
  transition: transform 0.23s ease, background 0.23s ease, border-color 0.23s ease, box-shadow 0.23s ease;
}
ai details > d:hover {
  transform: translateX(4px);
  background: linear-gradient(100deg, rgba(244, 242, 255, 0.86), rgba(239, 251, 252, 0.73));
  border-color: rgba(125, 112, 189, 0.22);
  box-shadow: 0 3px 10px rgba(81, 75, 135, 0.06);
}

ai d f {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 8px;
  color: #665c96;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(130deg, rgba(234, 231, 255, 0.95), rgba(243, 252, 248, 0.92));
  border: 1px solid rgba(122, 109, 183, 0.22);
  border-radius: 8px;
}

ai v {
  display: inline-block;
  position: relative;
  margin: 0 4px;
  padding: 2px 7px;
  color: #5b5391;
  font-weight: 900;
  background: linear-gradient(120deg, rgba(235, 232, 255, 0.8), rgba(255, 247, 210, 0.66));
  border: 1px solid rgba(130, 111, 190, 0.17);
  border-radius: 8px;
  text-shadow: 0 0 8px rgba(115, 94, 187, 0.16);
  animation: elfValuePulse 3.4s ease-in-out infinite;
  will-change: transform;
}

ai d.s { background: linear-gradient(90deg, rgba(222, 247, 239, 0.7), rgba(255, 255, 255, 0.42)); }
ai d.x { background: linear-gradient(90deg, rgba(237, 231, 255, 0.7), rgba(255, 255, 255, 0.42)); }
ai d.sm { background: linear-gradient(90deg, rgba(232, 240, 255, 0.72), rgba(255, 255, 255, 0.42)); }
ai d.h { background: linear-gradient(90deg, rgba(242, 235, 255, 0.68), rgba(255, 255, 255, 0.42)); }
ai d.z { background: linear-gradient(90deg, rgba(225, 247, 247, 0.73), rgba(255, 255, 255, 0.42)); }

ai hr {
  height: 1px;
  margin: 16px 21px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(103, 91, 166, 0.35), rgba(213, 172, 71, 0.72), rgba(85, 167, 181, 0.38), transparent);
  box-shadow: 0 0 5px rgba(146, 117, 193, 0.16);
}

ai m {
  display: block;
  position: relative;
  margin: 8px 14px;
  padding: 11px 13px 11px 36px;
  color: #505773;
  font-size: 13.5px;
  line-height: 1.75;
  background: radial-gradient(circle at 0% 50%, rgba(255, 229, 137, 0.35), transparent 25%), linear-gradient(100deg, rgba(248, 247, 255, 0.91), rgba(239, 250, 252, 0.72));
  border: 1px dashed rgba(117, 104, 178, 0.34);
  border-radius: 13px;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
ai m::before {
  content: "✧";
  position: absolute;
  top: 10px;
  left: 13px;
  color: #af8a3e;
  font-size: 15px;
  text-shadow: 0 0 8px rgba(226, 188, 90, 0.36);
  animation: elfMemoryStar 3.6s ease-in-out infinite;
  will-change: transform, opacity;
}
ai m:hover {
  transform: translateX(4px);
  border-color: rgba(107, 91, 181, 0.5);
  box-shadow: 0 5px 14px rgba(74, 70, 130, 0.08);
}

ai details details {
  margin: 10px 13px;
  background: linear-gradient(130deg, rgba(250, 249, 255, 0.75), rgba(241, 250, 252, 0.69));
  border-color: rgba(126, 115, 185, 0.25);
  box-shadow: none;
}
ai details details summary {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #66618f;
  font-size: 14px;
  background: linear-gradient(90deg, rgba(234, 231, 255, 0.8), rgba(237, 250, 251, 0.5));
}

ai details:last-of-type d {
  position: relative;
  cursor: pointer;
  background: radial-gradient(circle at 0% 50%, rgba(255, 236, 162, 0.28), transparent 20%), linear-gradient(105deg, rgba(244, 243, 255, 0.87), rgba(238, 250, 251, 0.76));
  border: 1px solid rgba(117, 104, 179, 0.2);
}
ai details:last-of-type d::after {
  content: "  ✦";
  color: rgba(176, 137, 54, 0.57);
  font-size: 10px;
}
ai details:last-of-type d:hover {
  transform: translateX(7px);
  color: #5b4e95;
  background: linear-gradient(110deg, rgba(233, 229, 255, 0.98), rgba(231, 248, 250, 0.92), rgba(255, 246, 205, 0.78));
  border-color: rgba(106, 89, 183, 0.44);
  box-shadow: 0 5px 15px rgba(76, 68, 133, 0.1);
}


/* =========================================================
   ✦ 动画库（保留关键动画，去除高耗能）
   ========================================================= */

@keyframes elfRealmEnter {
  0% { opacity: 0; transform: translateY(10px) scale(0.992); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes elfRuneRiver {
  0% { opacity: 0.26; transform: translateX(-15px) rotate(-3deg); }
  50% { opacity: 0.48; }
  100% { opacity: 0.24; transform: translateX(42px) rotate(-1deg); }
}
@keyframes elfMoonGlow {
  0% { opacity: 0.55; transform: scale(0.93); }
  100% { opacity: 0.96; transform: scale(1.1); }
}
@keyframes elfMagicStream {
  0% { left: 1%; opacity: 0; }
  18% { opacity: 1; }
  75% { opacity: 0.84; }
  100% { left: 70%; opacity: 0; }
}
@keyframes elfIconHover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(4deg); }
}
@keyframes elfGlyphGlow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.58; text-shadow: 0 0 9px rgba(116, 96, 186, 0.33); }
}
@keyframes elfDetailBloom {
  0% { opacity: 0.72; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes elfStarPulse {
  0%, 100% { opacity: 0.5; text-shadow: 0 0 4px rgba(224, 183, 74, 0.25); }
  50% { opacity: 1; text-shadow: 0 0 9px rgba(224, 183, 74, 0.7), 0 0 16px rgba(134, 107, 203, 0.35); }
}
@keyframes elfValuePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes elfMemoryStar {
  0%, 100% { transform: rotate(0deg) scale(0.95); }
  50% { transform: rotate(18deg) scale(1.12); }
}
@keyframes elfRunePulse {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.6; transform: translateX(-50%) scale(1.04); }
}

/* 对话专用动画（简化） */
@keyframes borderGlow {
  0% { border-color: #b8964a; box-shadow: 0 10px 30px rgba(60,40,20,0.25), 0 0 0 1px rgba(255,215,140,0.15) inset; }
  100% { border-color: #d4af37; box-shadow: 0 10px 30px rgba(60,40,20,0.3), 0 0 0 2px rgba(255,215,140,0.3) inset; }
}
@keyframes inscriptionGlow {
  0% { opacity: 0.2; text-shadow: 0 0 4px rgba(212,175,55,0.1); }
  100% { opacity: 0.6; text-shadow: 0 0 12px rgba(212,175,55,0.4), 0 0 24px rgba(184,134,11,0.2); }
}
@keyframes goldBreath {
  0% { text-shadow: 0 0 6px rgba(212,175,55,0.2), 0 0 12px rgba(184,134,11,0.1); }
  100% { text-shadow: 0 0 16px rgba(212,175,55,0.5), 0 0 30px rgba(184,134,11,0.3); }
}
@keyframes metalPulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}
@keyframes starPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}


/* =========================================================
   PC 大屏强化
   ========================================================= */

@media (min-width: 900px) {
  ai { padding: 30px; font-size: 17px; line-height: 1.95; }
  ai hd { padding: 16px 20px; gap: 18px; }
  ai hd d { padding: 14px 18px; font-size: 15px; }
  ai hd f { font-size: 21px; }
  ai text { padding: 24px 26px; }
  ai text p { font-size: 17px; line-height: 2; }
  ai q { padding: 30px 36px 28px 38px; font-size: 17px; line-height: 1.9; }
  ai q f { font-size: 20px; padding: 5px 20px 5px 16px; }
  ai q p:first-child::first-letter { font-size: 46px; }
  ai summary { padding-top: 16px; padding-bottom: 16px; font-size: 17px; }
  ai t { font-size: 15px; }
  ai details > d { padding: 10px 13px; font-size: 15px; line-height: 1.8; }
  ai d f { font-size: 13px; }
  ai m { font-size: 14.5px; }
}


/* =========================================================
   手机适配
   ========================================================= */

@media (max-width: 560px) {
  ai { padding: 13px; font-size: 14px; border-radius: 19px; }
  ai::before { font-size: 18px; letter-spacing: 9px; }
  ai hd { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  ai hd d { justify-content: flex-start; padding: 10px 12px; font-size: 13px; text-align: left; }
  ai hd::before { display: none; }
  ai text { padding: 14px 13px; }
  ai text p { font-size: 14px; line-height: 1.85; }
  ai text p:first-child::first-letter { font-size: 34px; }
  ai q { margin-left: 3px; margin-right: 3px; padding: 18px 18px 20px 20px; font-size: 14px; }
  ai q f { font-size: 15px; padding: 3px 12px 3px 10px; }
  ai q p:first-child::first-letter { font-size: 34px; }
  ai summary { padding-top: 11px; padding-bottom: 11px; font-size: 14px; }
  ai details > d { margin-left: 8px; margin-right: 8px; font-size: 13px; }
  ai t { margin-left: 8px; margin-right: 8px; font-size: 13px; }
  ai m { margin-left: 8px; margin-right: 8px; font-size: 12.5px; }
}


/* =========================================================
   减少动画（尊重用户偏好）
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  ai,
  ai::before,
  ai::after,
  ai hd f,
  ai hd::after,
  ai text::before,
  ai q::before,
  ai q::after,
  ai summary::after,
  ai v,
  ai m::before,
  ai hd::before,
  ai q,
  ai q f {
    animation: none !important;
  }
}