/* 
 * 主题：仙气·湛蓝 (Celestial Azure)
 * 设计：兴趣使然的人
 * 特点：动态灵气背景、流光悬浮按键、月华文字辉光
*/

/* 定义颜色变量，方便你以后自己微调 */
ai {
  --main-bg: #0d1a2e; /* 深邃星空背景 */
  --box-bg: rgba(20, 38, 66, 0.85); /* 回复框背景，带透明度 */
  --glow-blue: #61d9fb; /* 核心辉光蓝，用于边框和高光 */
  --text-color: #d0e8f0; /* 正文月华白 */
  --btn-grad-start: #1e4a8a; /* 按键渐变起始色 */
  --btn-grad-end: #3a8ac9; /* 按键渐变结束色 */
  --summary-bg: rgba(30, 74, 138, 0.5); /* 标题栏背景 */
  
  /* 动态背景动画 */
  background: linear-gradient(-45deg, var(--main-bg), #1a355d, var(--main-bg), #102a4e);
  background-size: 400% 400%;
  animation: gradientFlow 15s ease infinite;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--glow-blue);
  box-shadow: 0 0 15px var(--glow-blue), inset 0 0 10px rgba(97, 217, 251, 0.3);
  backdrop-filter: blur(5px); /* 毛玻璃效果，如果平台支持会很酷 */
}

/* 灵气流动动画 */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 顶部状态栏：时间地点 */
ai hd {
  color: var(--glow-blue);
  font-weight: bold;
  text-shadow: 0 0 5px var(--glow-blue);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(97, 217, 251, 0.3);
  margin-bottom: 10px;
  font-size: 15px;
}

/* 正文区域 - 月华文字 */
ai text p {
  color: var(--text-color);
  line-height: 1.7;
  font-size: 16px;
  text-shadow: 0 0 3px rgba(208, 232, 240, 0.5);
}

/* 折叠栏标题 */
ai details summary {
  background: var(--summary-bg);
  color: #cdefff;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin: 10px 0 5px 0;
  transition: all 0.3s ease;
  border: 1px solid rgba(97, 217, 251, 0.4);
  box-shadow: inset 0 0 8px rgba(97, 217, 251, 0.2);
}

ai details summary:hover {
  background: var(--btn-grad-start);
  color: #fff;
  box-shadow: 0 0 10px var(--glow-blue);
}

/* 折叠栏内容区域 */
ai details div.stat-grid, ai details p[t="行动"] {
  padding: 10px;
  background: rgba(13, 26, 46, 0.5);
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(97, 217, 251, 0.2);
  border-top: none;
  margin-top: -5px;
}
ai details div.stat-grid p {
    color: var(--text-color);
}
ai details div.stat-grid f {
    color: var(--glow-blue);
    font-weight:bold;
}

/* 核心！仙气按键 - 灵力节点 */
ai p[t="行动"] d {
  display: block;
  background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
  color: #fff;
  padding: 12px;
  margin: 8px 0;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  overflow: hidden; /* 为了流光动画 */
  transition: all 0.3s ease-out;
  border: 1px solid var(--glow-blue);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* 按键悬浮 - 灵力汇聚 */
ai p[t="行动"] d:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 5px 15px rgba(97, 217, 251, 0.4);
  background: linear-gradient(135deg, var(--btn-grad-end), var(--glow-blue));
}

/* 按键点击 - 力量释放 */
ai p[t="行动"] d:active {
  transform: translateY(0) scale(0.98);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

/* 究极仙气！流光动画伪元素 */
ai p[t="行动"] d::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

ai p[t="行动"] d:hover::before {
  left: 100%; /* 鼠标悬浮时流光划过 */
}