/* ═══════════════════════════════════════════
   🌸 百合绽放 · 加载动画
   ═══════════════════════════════════════════ */

/* 隐藏默认加载动画 */
#customized-answer-content [class*="dot-flashing"] {
  display: none !important;
}

/* 加载容器定位 */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  overflow: visible !important;
}

/* 百合绽放 SMIL 动画 */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='petalGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFFFFF'/%3E%3Cstop offset='100%25' stop-color='%23F8E8F0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(50,50)'%3E%3Cg%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGrad)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;1' dur='2.4s' repeatCount='indefinite' begin='0s'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.3 0.5;1 1;1 1' dur='2.4s' repeatCount='indefinite' begin='0s'/%3E%3C/ellipse%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGrad)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;1' dur='2.4s' repeatCount='indefinite' begin='0.2s'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.3 0.5;1 1;1 1' dur='2.4s' repeatCount='indefinite' begin='0.2s'/%3E%3C/ellipse%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGrad)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;1' dur='2.4s' repeatCount='indefinite' begin='0.4s'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.3 0.5;1 1;1 1' dur='2.4s' repeatCount='indefinite' begin='0.4s'/%3E%3C/ellipse%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGrad)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;1' dur='2.4s' repeatCount='indefinite' begin='0.6s'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.3 0.5;1 1;1 1' dur='2.4s' repeatCount='indefinite' begin='0.6s'/%3E%3C/ellipse%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGrad)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;1' dur='2.4s' repeatCount='indefinite' begin='0.8s'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.3 0.5;1 1;1 1' dur='2.4s' repeatCount='indefinite' begin='0.8s'/%3E%3C/ellipse%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGrad)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;1' dur='2.4s' repeatCount='indefinite' begin='1.0s'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.3 0.5;1 1;1 1' dur='2.4s' repeatCount='indefinite' begin='1.0s'/%3E%3C/ellipse%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='3' fill='%23F5D76E' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0;1' dur='2.4s' repeatCount='indefinite' begin='0.8s'/%3E%3Canimate attributeName='r' values='1;3;3' dur='2.4s' repeatCount='indefinite' begin='0.8s'/%3E%3C/circle%3E%3Ccircle cx='-2' cy='-1' r='1' fill='%23C8963E' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0;0.8' dur='2.4s' repeatCount='indefinite' begin='1.0s'/%3E%3C/circle%3E%3Ccircle cx='2' cy='-1' r='1' fill='%23C8963E' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0;0.8' dur='2.4s' repeatCount='indefinite' begin='1.1s'/%3E%3C/circle%3E%3Ccircle cx='0' cy='2' r='1' fill='%23C8963E' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0;0.8' dur='2.4s' repeatCount='indefinite' begin='1.2s'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* 响应式适配 */
@media (max-width: 768px) {
  #customized-answer-content .flex.items-center.justify-center.w-6.h-5 {
    width: 28px !important;
    height: 28px !important;
  }
  #customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  #customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='petalGradStatic' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFFFFF'/%3E%3Cstop offset='100%25' stop-color='%23F8E8F0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(50,50)'%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGradStatic)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0.6'/%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGradStatic)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0.6' transform='rotate(60)'/%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGradStatic)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0.6' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGradStatic)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0.6' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGradStatic)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0.6' transform='rotate(240)'/%3E%3Cellipse cx='0' cy='-12' rx='4' ry='14' fill='url(%23petalGradStatic)' stroke='%23E8C4D8' stroke-width='0.5' opacity='0.6' transform='rotate(300)'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%23F5D76E' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") !important;
  }
}
/* ══════════════════════════════════════
   🥀 修罗場・百合荆棘 v2 — 全局美化
   适配亮/暗模式 + 粒子装饰
   ══════════════════════════════════════ */

/* ═══ 顶部时间状态栏 ═══ */
.time-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(135deg, #1a0525 0%, #2e0f45 40%, #451558 70%, #5a1e6b 100%);
  border: 1px solid rgba(255, 143, 171, 0.45);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 0 16px 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 6px 30px rgba(90, 30, 107, 0.5),
    inset 0 1px 0 rgba(255, 200, 220, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.time-bar::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255, 143, 171, 0.04) 25%, transparent 50%, rgba(186, 85, 211, 0.04) 75%, transparent 100%);
  animation: slowRotate 20s linear infinite;
}

.time-bar::after {
  content: "⚘ 修羅場 ⚘";
  position: absolute;
  top: 8px;
  right: 14px;
  font-size: 0.65em;
  color: rgba(255, 200, 220, 0.6);
  letter-spacing: 3px;
  font-style: italic;
}

.time-bar .tl {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 0.87em;
  padding: 2px 0;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.time-bar .tl:first-child {
  color: #ffd0e0;
  font-weight: 600;
}

@keyframes slowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ═══ 正文区域 ═══ */
text {
  display: block;
  background: linear-gradient(180deg, rgba(30, 10, 50, 0.6) 0%, rgba(45, 15, 70, 0.35) 100%);
  border-left: 3px solid rgba(255, 143, 171, 0.55);
  border-radius: 0 10px 10px 0;
  padding: 20px 22px;
  margin: 16px 0;
  position: relative;
}

text::before {
  content: "📖";
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 1.1em;
  opacity: 0.7;
}

text p {
  color: #ffffff;
  font-size: 0.93em;
  line-height: 2;
  text-indent: 2em;
  margin: 0 0 12px 0;
  text-align: justify;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

text p:last-child {
  margin-bottom: 0;
}

/* ═══ 心声区域 ═══ */
.voice-box {
  background: linear-gradient(145deg, rgba(60, 20, 90, 0.95), rgba(90, 30, 80, 0.92));
  border-left: 4px solid #ff8fab;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
  box-shadow:
    0 4px 20px rgba(255, 143, 171, 0.12),
    inset 0 0 30px rgba(74, 25, 66, 0.3);
  position: relative;
  overflow: hidden;
}

.voice-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at bottom right, rgba(255, 143, 171, 0.1), transparent 70%);
  pointer-events: none;
}

.voice-box .voice-title {
  color: #ffd0e0;
  font-weight: 700;
  font-size: 0.88em;
  letter-spacing: 1.5px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 182, 199, 0.35);
}

.voice-box .vi {
  color: #ffffff;
  padding: 6px 10px;
  margin: 4px 0;
  font-size: 0.88em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 143, 171, 0.4);
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.voice-box .vi:hover {
  background: rgba(255, 143, 171, 0.1);
  border-left-color: #ff8fab;
  transform: translateX(3px);
}

.voice-box .vi.narrator {
  color: #fff0d0;
  background: rgba(230, 126, 34, 0.15);
  border-left-color: #ffaa40;
  font-weight: 500;
  margin-top: 8px;
  padding: 8px 12px;
}

.voice-box .vi.narrator:hover {
  background: rgba(230, 126, 34, 0.22);
}

/* ══════════════════════════════════════
   📂 Details 面板 — 通用基础
   ══════════════════════════════════════ */
details.panel {
  border: 1px solid rgba(255, 143, 171, 0.25);
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

details.panel:hover {
  border-color: rgba(255, 143, 171, 0.5);
}

details.panel summary {
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: 0.8px;
  list-style: none;
  position: relative;
  transition: all 0.3s ease;
}

details.panel summary::-webkit-details-marker {
  display: none;
}

details.panel summary::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.3em;
  opacity: 0.6;
  transition: transform 0.3s ease;
}

details.panel[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0.9;
}

details.panel > :not(summary) {
  padding: 0 18px;
}

details.panel > :last-child {
  padding-bottom: 14px;
}

/* ═══ 玩家面板 — 冷蓝银 ═══ */
details.player {
  background: linear-gradient(160deg, #0f1a2e 0%, #1a2d4a 100%);
  border-color: rgba(127, 179, 213, 0.4);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.5);
}

details.player:hover {
  border-color: rgba(127, 179, 213, 0.65);
  box-shadow: 0 6px 25px rgba(127, 179, 213, 0.15);
}

details.player summary {
  background: linear-gradient(90deg, #152540, #1e3a5e, #152540);
  color: #a0d4f0;
  border-bottom: 1px solid rgba(127, 179, 213, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

details.player summary:hover {
  color: #c0e8ff;
}

/* ═══ 修罗场面板 — 深紫玫瑰 ═══ */
details.shura {
  background: linear-gradient(160deg, #180820 0%, #2a1040 50%, #3a1550 100%);
  border-color: rgba(255, 105, 155, 0.35);
  box-shadow: 0 4px 20px rgba(26, 10, 46, 0.6);
  position: relative;
}

details.shura::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff69a0, #ff8fab, #ff69a0, transparent);
  opacity: 0.7;
  border-radius: 12px 12px 0 0;
}

details.shura:hover {
  border-color: rgba(255, 105, 155, 0.6);
  box-shadow: 0 8px 35px rgba(255, 105, 155, 0.12), 0 4px 20px rgba(26, 10, 46, 0.6);
}

details.shura summary {
  background: linear-gradient(90deg, #250f3a, #4a1850, #250f3a);
  background-size: 200% 100%;
  color: #ffb0cc;
  border-bottom: 1px solid rgba(255, 143, 171, 0.25);
  animation: shuraShimmer 8s ease-in-out infinite;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

details.shura summary:hover {
  color: #ffd4e4;
}

@keyframes shuraShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

details.shura hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 143, 171, 0.4), transparent);
  margin: 16px 0;
}

/* ═══ 小剧场面板 — 暖橘金 ═══ */
details.stage {
  background: linear-gradient(160deg, #1e1408 0%, #352208 100%);
  border-color: rgba(255, 193, 100, 0.35);
  box-shadow: 0 4px 16px rgba(42, 26, 10, 0.5);
}

details.stage:hover {
  border-color: rgba(255, 193, 100, 0.6);
  box-shadow: 0 6px 25px rgba(255, 193, 100, 0.1);
}

details.stage summary {
  background: linear-gradient(90deg, #352208, #4a3010, #352208);
  color: #ffd080;
  border-bottom: 1px solid rgba(255, 193, 100, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

details.stage summary:hover {
  color: #ffe4aa;
}

/* ═══ 微信聊天面板 — 高对比赛博青 ═══ */
details.wechat {
  background: linear-gradient(160deg, #081820 0%, #0c2a3a 60%, #103545 100%);
  border-color: rgba(0, 220, 255, 0.4);
  box-shadow: 0 4px 16px rgba(8, 24, 32, 0.7);
}

details.wechat:hover {
  border-color: rgba(0, 220, 255, 0.65);
  box-shadow: 0 6px 25px rgba(0, 220, 255, 0.12);
}

details.wechat summary {
  background: linear-gradient(90deg, #0c2a3a, #144a60, #0c2a3a);
  color: #40e8ff;
  border-bottom: 1px solid rgba(0, 220, 255, 0.25);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

details.wechat summary:hover {
  color: #90f4ff;
}

details.wechat hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 220, 255, 0.35), transparent);
  margin: 12px 0;
}

/* ═══ 记忆回廊面板 — 古金紫 ═══ */
details.memory {
  background: linear-gradient(160deg, #14101e 0%, #221830 50%, #2a1e3a 100%);
  border-color: rgba(210, 180, 120, 0.35);
  box-shadow: 0 4px 20px rgba(15, 10, 24, 0.6);
}

details.memory:hover {
  border-color: rgba(210, 180, 120, 0.55);
  box-shadow: 0 6px 25px rgba(210, 180, 120, 0.1);
}

details.memory summary {
  background: linear-gradient(90deg, #221830, #352848, #221830);
  color: #e0c880;
  border-bottom: 1px solid rgba(210, 180, 120, 0.25);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

details.memory summary:hover {
  color: #f0e0a8;
}

/* 记忆区标题 */
mtitle {
  display: block;
  color: #e0c880;
  font-weight: 700;
  font-size: 0.88em;
  padding: 12px 0 6px 0;
  letter-spacing: 1.5px;
  position: relative;
}

mtitle::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #e0c880, transparent);
  border-radius: 2px;
}

/* 记忆区表格 */
details.memory table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 14px 0;
  font-size: 0.8em;
  border-radius: 8px;
  overflow: hidden;
}

details.memory table th {
  background: rgba(210, 180, 120, 0.15);
  color: #e0c880;
  padding: 9px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 0.92em;
  border-bottom: 2px solid rgba(210, 180, 120, 0.3);
}

details.memory table td {
  padding: 8px 10px;
  color: #e0d0f0;
  border-bottom: 1px solid rgba(210, 180, 120, 0.1);
  transition: background 0.2s ease;
}

details.memory table tr:hover td {
  background: rgba(210, 180, 120, 0.06);
}

details.memory table tr:last-child td {
  border-bottom: none;
}

/* ══════════════════════════════════════
   🎯 行动选项
   ══════════════════════════════════════ */
.options-box {
  background: linear-gradient(160deg, #180820 0%, #2a1040 60%, #3d1555 100%);
  border: 1px solid rgba(255, 143, 171, 0.35);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 16px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(26, 10, 46, 0.5);
}

.options-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 143, 171, 0.6), transparent);
}

.options-box::after {
  content: "⚘";
  position: absolute;
  bottom: 10px;
  right: 16px;
  font-size: 1.4em;
  opacity: 0.25;
  color: #ff8fab;
}

.options-box .opt-title {
  color: #ffd0e0;
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 143, 171, 0.25);
}

.options-box .opt {
  background: rgba(90, 30, 80, 0.4);
  border: 1px solid rgba(255, 143, 171, 0.22);
  border-radius: 9px;
  padding: 10px 16px;
  margin: 7px 0;
  color: #ffffff;
  font-size: 0.88em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.options-box .opt::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 143, 171, 0.1), transparent);
  transition: left 0.6s ease;
}

.options-box .opt:hover {
  border-color: #ff8fab;
  background: rgba(255, 143, 171, 0.15);
  color: #fff;
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(255, 143, 171, 0.2);
}

.options-box .opt:hover::before {
  left: 100%;
}

/* ══════════════════════════════════════
   ✨ 面板内 Markdown 文本美化
   ══════════════════════════════════════ */
details.panel p {
  color: #f0e4f8;
  font-size: 0.87em;
  line-height: 1.85;
  margin: 3px 0;
}

details.panel strong {
  font-weight: 700;
}

details.shura strong {
  color: #ffb0cc;
}

details.player strong {
  color: #a0d8f8;
}

details.stage strong {
  color: #ffd080;
}

details.wechat strong {
  color: #40e8ff;
}

details.wechat p, details.wechat li, details.wechat span {
  color: #e8f8ff;
}

details.memory strong {
  color: #e8d898;
}

/* ══════════════════════════════════════
   🌸 粒子效果
   ══════════════════════════════════════ */

/* 修罗场面板 — 飘落花瓣粒子 */
details.shura[open]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(255, 143, 171, 0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 35% 65%, rgba(255, 180, 200, 0.4) 50%, transparent 50%),
    radial-gradient(2px 2px at 55% 15%, rgba(255, 105, 160, 0.35) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 75% 45%, rgba(255, 143, 171, 0.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 80%, rgba(255, 200, 220, 0.35) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 25% 85%, rgba(255, 160, 190, 0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 65% 90%, rgba(255, 143, 171, 0.3) 50%, transparent 50%),
    radial-gradient(2px 2px at 45% 40%, rgba(200, 100, 150, 0.25) 50%, transparent 50%);
  animation: particleDrift 12s ease-in-out infinite alternate;
}

@keyframes particleDrift {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.7;
  }
  33% {
    transform: translateY(4px) translateX(2px);
    opacity: 1;
  }
  66% {
    transform: translateY(-2px) translateX(-1px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(3px) translateX(-2px);
    opacity: 0.9;
  }
}

/* 顶部栏 — 微光粒子 */
.time-bar .tl::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
}

.time-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 30%, rgba(255, 200, 220, 0.6) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(186, 130, 211, 0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 50% 20%, rgba(255, 143, 171, 0.5) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(200, 160, 255, 0.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 85% 40%, rgba(255, 180, 200, 0.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 20% 90%, rgba(255, 143, 171, 0.3) 50%, transparent 50%);
  animation: starFloat 10s ease-in-out infinite alternate;
}

@keyframes starFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-3px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(2px) scale(0.95);
    opacity: 0.7;
  }
}

/* 选项区 — 微光浮尘 */
.options-box {
  background-image:
    linear-gradient(160deg, #180820 0%, #2a1040 60%, #3d1555 100%),
    radial-gradient(1px 1px at 20% 30%, rgba(255, 180, 200, 0.3) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 50% 70%, rgba(255, 143, 171, 0.25) 50%, transparent 50%),
    radial-gradient(1px 1px at 80% 50%, rgba(200, 140, 220, 0.3) 50%, transparent 50%);
}

/* 正文区 — 极淡微尘 */
text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 25%, rgba(255, 180, 210, 0.2) 50%, transparent 50%),
    radial-gradient(1px 1px at 40% 75%, rgba(200, 150, 255, 0.15) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 35%, rgba(255, 143, 171, 0.18) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 85%, rgba(220, 170, 255, 0.15) 50%, transparent 50%);
  animation: dustFloat 15s ease-in-out infinite alternate;
  opacity: 0.8;
}

@keyframes dustFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* ══════════════════════════════════════
   🌀 面板展开动画 & 呼吸光晕
   ══════════════════════════════════════ */
details.panel[open] {
  animation: panelOpen 0.4s ease forwards;
}

@keyframes panelOpen {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

details.shura[open] {
  animation: panelOpen 0.4s ease forwards, breathGlow 4s ease-in-out infinite;
}

@keyframes breathGlow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(26, 10, 46, 0.6);
  }
  50% {
    box-shadow: 0 6px 30px rgba(255, 105, 155, 0.14), 0 4px 20px rgba(26, 10, 46, 0.6);
  }
}

/* ══════════════════════════════════════
   🖱️ 滚动条
   ══════════════════════════════════════ */
details.panel::-webkit-scrollbar {
  width: 4px;
}

details.panel::-webkit-scrollbar-thumb {
  background: rgba(255, 143, 171, 0.3);
  border-radius: 4px;
}

details.panel::-webkit-scrollbar-track {
  background: transparent;
}

/* ══════════════════════════════════════
   📱 响应式
   ══════════════════════════════════════ */
@media (max-width: 480px) {
  .time-bar {
    padding: 12px 14px;
    border-radius: 10px;
  }

  .time-bar::after {
    display: none;
  }

  text {
    padding: 14px 16px;
  }

  text p {
    font-size: 0.9em;
    line-height: 1.9;
  }

  details.panel summary {
    padding: 10px 14px;
    font-size: 0.88em;
  }

  .options-box .opt {
    padding: 9px 12px;
  }

  details.memory table {
    font-size: 0.75em;
  }
}