/* ============ 基调 · 云水禅心 ============ */
xy {
  --paper: #f4ede0;
  --paper-lt: #fdf9ee;
  --ink: #4a5a5e;
  --ink-lt: #6d7a7d;
  --tan: #8b6f47;
  --line: #c9bda4;
  --shadow: rgba(74,90,94,.14);
  display: block;
  position: relative;
  padding: 18px 20px;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "宋体", serif;
  font-size: 15px;
  line-height: 1.85;
  background: linear-gradient(135deg, #f4ede0 0%, #ece5d3 100%);
  border-radius: 3px;
  box-shadow: 0 2px 14px var(--shadow);
  overflow: visible;
}
xy::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(122,155,142,.06), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(139,111,71,.06), transparent 55%);
  pointer-events: none;
  border-radius: 3px;
}

/* ============ 字体继承加固 ============ */
xy p, xy details, xy summary,
xy .grp, xy .gt, xy .hd, xy .story {
  font-family: inherit;
}

/* ============ 折叠面板 ============ */
xy details {
  margin: 10px 0;
  background: rgba(253,249,238,.5);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: box-shadow .3s;
}
xy details[open] { box-shadow: 0 2px 10px var(--shadow); }
xy summary {
  position: relative;
  padding: 10px 14px;
  color: var(--tan);
  font-weight: 600;
  letter-spacing: 2px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
xy summary::-webkit-details-marker { display: none; }
xy summary::before {
  content: '⏵';
  display: inline-block;
  margin-right: 10px;
  color: var(--ink-lt);
  font-size: 12px;
  transition: transform .3s;
}
xy details[open] summary { border-bottom: 1px dashed var(--line); }
xy details[open] summary::before { transform: rotate(90deg); }
xy > details:first-child summary {
  color: var(--ink-lt);
  font-size: 13px;
  opacity: .75;
}

/* ============ 分组 · .grp ============ */
xy .grp {
  display: block;
  margin: 12px 14px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}
xy .gt {
  display: block;
  margin-bottom: 8px;
  padding-bottom: 4px;
  color: var(--tan);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  border-bottom: 1px dotted var(--line);
}
xy .grp p {
  margin: 4px 0;
  color: var(--ink);
  font-size: 14.5px;
}

/* ============ 前置状态栏 · .hd ============ */
xy .hd {
  display: block;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(139,111,71,.07), rgba(122,155,142,.07));
  border-left: 3px solid var(--tan);
  border-radius: 2px;
}
xy .hd p {
  margin: 3px 0;
  color: var(--ink-lt);
  font-size: 14px;
  letter-spacing: .5px;
}

/* ============ 正文 · .story ============ */
xy .story {
  display: block;
  margin: 16px 0;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 2;
  background: rgba(253,249,238,.4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
xy .story p {
  margin: 8px 0;
  color: var(--ink);
  text-indent: 2em;
}
/* 兜底：段落内所有后代都不继承 2em 缩进（诗偈 v 不在 p 内，不受影响） */
xy .story p * {
  text-indent: 0;
}

/* user / npc · 高对比配色 */
xy .mc {
  color: #b8332a;
  font-weight: 600;
  letter-spacing: .5px;
}
xy .npc {
  color: #1e4a6b;
  font-weight: 600;
  letter-spacing: .5px;
}

/* 诗偈 · 独立楷体 */
xy v {
  display: block;
  margin: 20px auto;
  padding: 8px 20px;
  color: #2f2417;
  font-family: "STKaiti", "KaiTi", "楷体", "Noto Serif SC", serif;
  font-size: 16.5px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 5px;
  text-align: center;
  text-indent: 0;
  text-shadow: 0 1px 0 rgba(255,250,235,.6);
}
xy v::before, xy v::after {
  content: '';
  display: block;
  width: 55%;
  height: 1px;
  margin: 10px auto;
  background: linear-gradient(90deg, transparent, rgba(139,111,71,.55), transparent);
}

/* ============ 气泡系统 · 核心 ============ */
xy info {
  position: relative;
  display: inline-block;
  text-indent: 0;
  cursor: pointer;
  outline: none;
}
xy info n {
  display: inline-block;
  padding: 1px 8px;
  font-size: 14px;
  text-indent: 0;
  border-radius: 2px;
  border-bottom: 1px solid currentColor;
  transition: all .25s ease;
}
xy info:hover n, xy info:focus-within n {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--shadow);
  filter: brightness(1.05);
}
xy pop {
  display: block;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  max-width: 340px;
  width: max-content;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
  text-indent: 0;
  white-space: normal;
  background: linear-gradient(135deg, #fdf9ee 0%, #f4ede0 100%);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(74,90,94,.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s, transform .28s, visibility .28s;
  z-index: 999;
}
xy pop::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px; height: 10px;
  background: #fdf9ee;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
xy info:hover pop, xy info:focus-within pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
xy pop r {
  display: block;
  margin: 4px 0;
  text-indent: 0;
}

/* 七色分类 · 淡雅点缀 */
xy info[c="realm"] n    { color: #b8935a; background: rgba(184,147,90,.10); }
xy info[c="aptitude"] n { color: #6d8e93; background: rgba(109,142,147,.10); }
xy info[c="talent"] n   { color: #8b7aa8; background: rgba(139,122,168,.10); }
xy info[c="method"] n   { color: #5a7a5e; background: rgba(90,122,94,.10); }
xy info[c="power"] n    { color: #5a6b8e; background: rgba(90,107,142,.10); }
xy info[c="treasure"] n { color: #a8724a; background: rgba(168,114,74,.10); }
xy info[c="elixir"] n   { color: #b06a6a; background: rgba(176,106,106,.10); }

/* ============ 移动端 ============ */
@media (max-width: 768px) {
  xy {
    padding: 14px 14px;
    font-size: 13.5px;
    line-height: 1.8;
  }
  xy summary {
    padding: 9px 12px;
    font-size: 13.5px;
    letter-spacing: 1.5px;
  }
  xy .grp { margin: 10px 10px; padding-left: 10px; }
  xy .gt { font-size: 12.5px; letter-spacing: 2px; }
  xy .grp p { margin: 3px 0; font-size: 12.5px; }
  xy .hd { padding: 10px 12px; }
  xy .hd p { font-size: 12.5px; }
  xy .story { padding: 12px 14px; font-size: 13.5px; line-height: 1.9; }
  xy v { padding: 6px 12px; font-size: 14.5px; letter-spacing: 3px; }
  xy info n { padding: 1px 6px; font-size: 12.5px; }

  xy pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    width: min(270px, 76vw);
    max-width: 76vw;
    min-width: unset;
    padding: 11px 14px;
    font-size: 12px;
    line-height: 1.8;
    box-shadow: 0 6px 20px rgba(50,60,65,.28);
    transform: translateX(-50%) translateY(-4px);
  }
  xy pop::before { display: block; }
  xy info:hover pop,
  xy info:focus-within pop {
    transform: translateX(-50%) translateY(0);
  }
  xy pop::after { display: none !important; }
}