/* 容器与全局变量 */
ai {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #e8e6e3;
  background: linear-gradient(135deg, #1a0a1e 0%, #2d1b3d 50%, #1a0a1e 100%);
  border: 2px solid;
  border-image: linear-gradient(90deg, #d4af37, #8b6914, #d4af37) 1;
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

ai::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(212, 175, 55, 0.03) 2px, rgba(212, 175, 55, 0.03) 4px),
    radial-gradient(ellipse at 20% 30%, rgba(139, 69, 139, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(75, 0, 130, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

ai > * {
  position: relative;
  z-index: 1;
}

/* 标题栏 */
hd {
  display: block;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(139, 105, 20, 0.3), rgba(75, 0, 130, 0.3));
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* 正文区 */
article {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

article p {
  margin: 0 0 10px 0;
  text-indent: 2em;
  text-align: justify;
}

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

/* Details通用样式 */
details {
  margin: 8px 0;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

details summary {
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  background: linear-gradient(90deg, rgba(139, 105, 20, 0.2), rgba(75, 0, 130, 0.2));
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

details summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.3s ease;
  color: #d4af37;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details[open] summary {
  border-bottom-color: rgba(212, 175, 55, 0.3);
  background: linear-gradient(90deg, rgba(139, 105, 20, 0.35), rgba(75, 0, 130, 0.35));
}

details summary:hover {
  background: linear-gradient(90deg, rgba(139, 105, 20, 0.4), rgba(75, 0, 130, 0.4));
  box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.2);
}

/* 思维链特殊样式 */
details.tc {
  border-color: rgba(138, 43, 226, 0.4);
  background: rgba(75, 0, 130, 0.15);
}

details.tc summary {
  background: linear-gradient(90deg, rgba(75, 0, 130, 0.3), rgba(138, 43, 226, 0.3));
  color: #da70d6;
}

/* 记忆回廊特殊样式 */
details.mem {
  border-color: rgba(70, 130, 180, 0.4);
  background: rgba(25, 25, 112, 0.15);
}

details.mem summary {
  background: linear-gradient(90deg, rgba(25, 25, 112, 0.3), rgba(70, 130, 180, 0.3));
  color: #87ceeb;
}

/* 掌控者卡片 */
details.mc {
  border-color: rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, rgba(139, 105, 20, 0.2), rgba(0, 0, 0, 0.3));
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

details.mc summary {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.3), rgba(139, 105, 20, 0.3));
  color: #ffd700;
  font-size: 15px;
}

/* 女角全景监视 */
details.fc {
  border-color: rgba(220, 20, 60, 0.5);
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
  box-shadow: 0 4px 12px rgba(220, 20, 60, 0.2);
}

details.fc summary {
  background: linear-gradient(90deg, rgba(220, 20, 60, 0.3), rgba(139, 0, 0, 0.3));
  color: #ff69b4;
  font-size: 15px;
}

/* NPC监控 */
details.npc {
  border-color: rgba(105, 105, 105, 0.4);
}

details.npc summary {
  background: linear-gradient(90deg, rgba(105, 105, 105, 0.2), rgba(47, 79, 79, 0.2));
  color: #b0b0b0;
}

/* 战况面板 */
details.btl {
  border-color: rgba(255, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.25), rgba(0, 0, 0, 0.3));
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25);
}

details.btl summary {
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.3), rgba(139, 0, 0, 0.3));
  color: #ff4500;
  font-size: 15px;
}

/* 内容区段落 */
details p {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

details p:last-child {
  border-bottom: none;
}

/* 带标题的段落 */
details p[t]::before {
  content: attr(t);
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #d4af37;
  vertical-align: middle;
}

/* 字段标签 */
f {
  display: inline-block;
  min-width: 70px;
  padding: 2px 6px;
  margin-right: 6px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.25), rgba(139, 105, 20, 0.25));
  border-left: 2px solid #d4af37;
  font-size: 12px;
  font-weight: 600;
  color: #ffd700;
}

/* 数据内容 */
d {
  display: block;
  padding: 4px 0 4px 12px;
  margin: 3px 0;
  border-left: 2px solid rgba(212, 175, 55, 0.3);
  color: #e8e6e3;
  position: relative;
}

d::before {
  content: "◆";
  position: absolute;
  left: -6px;
  color: #d4af37;
  font-size: 8px;
}

/* 行动选项区 */
div.act {
  margin: 10px 0 0 0;
  padding: 12px;
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.2), rgba(75, 0, 130, 0.2));
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
}

div.act h {
  display: block;
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffd700;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

div.act p {
  margin: 6px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

div.act p::before {
  content: attr(opt);
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin-right: 8px;
  background: linear-gradient(135deg, #d4af37, #8b6914);
  border-radius: 50%;
  font-weight: 700;
  color: #1a0a1e;
  vertical-align: middle;
}

div.act p::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
  transition: left 0.5s ease;
}

div.act p:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.2);
  transform: translateX(3px);
}

div.act p:hover::after {
  left: 100%;
}

/* 响应式优化 */
@media (max-width: 480px) {
  ai {
    font-size: 13px;
  }
  
  hd {
    font-size: 12px;
    padding: 8px 10px;
  }
  
  details summary {
    font-size: 13px;
    padding: 7px 10px;
  }
  
  f {
    min-width: 60px;
    font-size: 11px;
  }
  
  div.act p::before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
}