/* ═══════════════════════════════════════════════════════
   🐇 不思议图书馆 — 兔子主题 CSS 美化样式表
   The Impossible Library — Rabbit Theme Stylesheet
   ═══════════════════════════════════════════════════════ */

/* ── 全局基础 & 字体 ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Cinzel:wght@400;600;700&family=Ma+Shan+Zheng&display=swap');

:root {
  /* 核心色板 */
  --rabbit-white: #f5f0eb;
  --rabbit-cream: #f9f3ec;
  --rabbit-ivory: #fdf8f2;
  --parchment: #f0e6d6;
  --parchment-dark: #e8dcc8;
  --ink-black: #1a1412;
  --ink-brown: #2c1e14;
  --ink-soft: #3d2b1e;
  --rose-gold: #b8866b;
  --rose-gold-light: #d4a88c;
  --rose-gold-glow: #e8c4a8;
  --antique-gold: #c9a94e;
  --antique-gold-dim: #a68a3e;
  --ruby-red: #8b2942;
  --ruby-glow: #a83350;
  --deep-purple: #4a2040;
  --twilight-blue: #2a2a4a;
  --twilight-soft: #3d3d5c;
  --forest-green: #2d5a3d;
  --forest-dim: #1e3d28;
  --sen-high: #6ec48a;
  --sen-mid: #d4a843;
  --sen-low: #c45a3a;
  --sen-critical: #8b1a2b;

  /* 兔子装饰色 */
  --bunny-pink: #e8a0b4;
  --bunny-pink-soft: #f0c0d0;
  --bunny-nose: #d4728a;
  --bunny-ear-inner: #f0b8c8;
  --bunny-fur: #ede4da;

  /* 尺寸 & 间距 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 阴影 */
  --shadow-soft: 0 2px 8px rgba(26, 20, 18, 0.08);
  --shadow-md: 0 4px 16px rgba(26, 20, 18, 0.12);
  --shadow-lg: 0 8px 32px rgba(26, 20, 18, 0.16);
  --shadow-inset: inset 0 2px 6px rgba(26, 20, 18, 0.06);
  --shadow-glow-gold: 0 0 12px rgba(201, 169, 78, 0.25);
  --shadow-glow-pink: 0 0 12px rgba(232, 160, 180, 0.3);
}

/* ── 整体容器 ── */
body,
.message-content,
.markdown-body {
  font-family: 'Noto Serif SC', 'Georgia', serif;
  color: var(--ink-brown);
  line-height: 1.85;
  background-color: var(--rabbit-cream);
}

/* ══════════════════════════════════════
   📍 状态栏包裹容器 (Status Bar)
   ══════════════════════════════════════ */

/* 状态栏 — 最外层容器 */
.status-bar,
p:has(+ div):first-of-type {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-xl);
  background:
    linear-gradient(135deg,
      var(--parchment) 0%,
      var(--rabbit-ivory) 40%,
      var(--parchment) 100%);
  border: 2px solid var(--rose-gold-light);
  border-radius: var(--radius-xl);
  box-shadow:
    var(--shadow-md),
    var(--shadow-glow-gold),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  text-align: center;
}

/* 状态栏 — 兔子耳朵装饰(左) */
.status-bar::before,
p:has(+ div):first-of-type::before {
  content: '🐇';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* 状态栏 — 兔子耳朵装饰(右) */
.status-bar::after,
p:has(+ div):first-of-type::after {
  content: '🐇';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  font-size: 1.3em;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* ── 状态栏内部使用的包裹器 ── */
.status-wrapper {
  position: relative;
  margin: var(--spacing-lg) 0;
  padding: 0;
}

/* 状态栏上方兔子脚印装饰线 */
.status-wrapper::before {
  content: '🐾 · · · 🐾 · · · 🐾 · · · 🐾 · · · 🐾';
  display: block;
  text-align: center;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: var(--bunny-pink);
  margin-bottom: var(--spacing-sm);
  opacity: 0.6;
}

/* 状态栏下方兔子脚印装饰线 */
.status-wrapper::after {
  content: '🐾 · · · 🐾 · · · 🐾 · · · 🐾 · · · 🐾';
  display: block;
  text-align: center;
  font-size: 0.7em;
  letter-spacing: 2px;
  color: var(--bunny-pink);
  margin-top: var(--spacing-sm);
  opacity: 0.6;
}


/* ══════════════════════════════════════
   📜 正文叙事区域 (Main Narrative)
   ══════════════════════════════════════ */

/* 正文容器 */
.narrative,
.status-bar + div,
p:has(+ div):first-of-type + div {
  position: relative;
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
  background:
    linear-gradient(180deg,
      var(--rabbit-ivory) 0%,
      var(--rabbit-cream) 50%,
      var(--rabbit-ivory) 100%);
  border-left: 4px solid var(--rose-gold);
  border-right: 1px solid var(--parchment-dark);
  border-top: 1px solid var(--parchment-dark);
  border-bottom: 1px solid var(--parchment-dark);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow:
    var(--shadow-soft),
    inset 3px 0 8px rgba(184, 134, 107, 0.08);
  font-size: 1.02em;
  text-align: justify;
}

/* 正文段落 */
.narrative p,
.status-bar + div p,
p:has(+ div):first-of-type + div p {
  margin-bottom: 1em;
  text-indent: 2em;
  line-height: 2;
}

.narrative p:last-child {
  margin-bottom: 0;
}

/* 正文区域顶部装饰 — 兔子剪影 */
.narrative::before,
.status-bar + div::before {
  content: '┈┈ 🐰 ┈┈';
  display: block;
  text-align: center;
  margin-bottom: var(--spacing-md);
  font-size: 0.85em;
  color: var(--rose-gold-light);
  letter-spacing: 4px;
}


/* ══════════════════════════════════════
   📖 名著拟人登场卡 (Book Character Card)
   ══════════════════════════════════════ */

bookchar {
  display: block;
  position: relative;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl);
  padding-top: calc(var(--spacing-xl) + 8px);
  background:
    linear-gradient(145deg,
      #1a1420 0%,
      #241830 30%,
      #1e1428 70%,
      #1a1420 100%);
  border: 1px solid var(--antique-gold-dim);
  border-top: 3px solid var(--antique-gold);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-lg),
    var(--shadow-glow-gold),
    inset 0 0 40px rgba(201, 169, 78, 0.05);
  color: var(--parchment);
  font-size: 0.93em;
  line-height: 1.8;
  overflow: hidden;
}

/* 名著卡顶部标题装饰 */
bookchar::before {
  content: '📕 名著拟人 · Book Character 🐇';
  display: block;
  text-align: center;
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--antique-gold);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(201, 169, 78, 0.3);
  text-shadow: 0 0 8px rgba(201, 169, 78, 0.4);
}

/* 名著卡底部装饰 */
bookchar::after {
  content: '🐾 ═══════════ ✦ ═══════════ 🐾';
  display: block;
  text-align: center;
  font-size: 0.75em;
  color: var(--antique-gold-dim);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(201, 169, 78, 0.2);
  letter-spacing: 2px;
}

/* 名著卡背景纹理 — 四角装饰 */
bookchar > p {
  position: relative;
  margin: var(--spacing-xs) 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

bookchar > p:hover {
  background-color: rgba(201, 169, 78, 0.06);
}

/* 名著卡字段高亮 — 方括号内标签 */
bookchar > p > strong,
bookchar > p::first-line {
  color: var(--antique-gold);
}


/* ══════════════════════════════════════
   🛡️ 看守者登场卡 (Guardian Card)
   ══════════════════════════════════════ */

guardian {
  display: block;
  position: relative;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl);
  background:
    linear-gradient(145deg,
      #1c0a0a 0%,
      #2d1018 30%,
      #241015 70%,
      #1c0a0a 100%);
  border: 1px solid var(--ruby-red);
  border-top: 3px solid var(--ruby-glow);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-lg),
    0 0 15px rgba(139, 41, 66, 0.3),
    inset 0 0 40px rgba(139, 41, 66, 0.05);
  color: var(--parchment);
  font-size: 0.93em;
  line-height: 1.8;
  overflow: hidden;
}

guardian::before {
  content: '♠ 看守者 · Guardian 🐇';
  display: block;
  text-align: center;
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ruby-glow);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(139, 41, 66, 0.4);
  text-shadow: 0 0 8px rgba(168, 51, 80, 0.5);
}

guardian::after {
  content: '🐾 ═══════════ ♥ ═══════════ 🐾';
  display: block;
  text-align: center;
  font-size: 0.75em;
  color: var(--ruby-red);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(139, 41, 66, 0.3);
  letter-spacing: 2px;
}

guardian > p {
  margin: var(--spacing-xs) 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

guardian > p:hover {
  background-color: rgba(168, 51, 80, 0.08);
}


/* ══════════════════════════════════════
   🎯 行动选项区 (Options)
   ══════════════════════════════════════ */

options {
  display: block;
  position: relative;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background:
    linear-gradient(135deg,
      var(--rabbit-ivory) 0%,
      var(--rabbit-white) 50%,
      var(--rabbit-ivory) 100%);
  border: 2px solid var(--bunny-pink-soft);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-md),
    var(--shadow-glow-pink);
  overflow: hidden;
}

options::before {
  content: '🐰 选择你的行动 · Choose Your Action';
  display: block;
  text-align: center;
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--bunny-nose);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: 2px dashed var(--bunny-pink-soft);
}

options > p {
  position: relative;
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-left: calc(var(--spacing-lg) + 24px);
  background:
    linear-gradient(90deg,
      rgba(232, 160, 180, 0.08) 0%,
      rgba(232, 160, 180, 0.02) 100%);
  border: 1px solid rgba(232, 160, 180, 0.25);
  border-left: 3px solid var(--bunny-pink);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.95em;
  color: var(--ink-brown);
  cursor: pointer;
  transition: all 0.25s ease;
}

options > p::before {
  content: '🐾';
  position: absolute;
  left: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

options > p:hover {
  background:
    linear-gradient(90deg,
      rgba(232, 160, 180, 0.18) 0%,
      rgba(232, 160, 180, 0.06) 100%);
  border-left-color: var(--bunny-nose);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(232, 160, 180, 0.2);
}

options > p:hover::before {
  opacity: 1;
}


/* ══════════════════════════════════════
   📋 折叠面板 (Details / Summary)
   ══════════════════════════════════════ */

details {
  margin: var(--spacing-md) 0;
  padding: 0;
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius-md);
  background: var(--rabbit-ivory);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

details:hover {
  box-shadow: var(--shadow-md);
}

details[open] {
  box-shadow:
    var(--shadow-md),
    0 0 0 1px var(--rose-gold-light);
}

/* 折叠面板标题 */
summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background:
    linear-gradient(135deg,
      var(--parchment) 0%,
      var(--rabbit-cream) 100%);
  border-bottom: 1px solid transparent;
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: all 0.25s ease;
}

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

/* Summary 兔子箭头 */
summary::before {
  content: '🐰▸';
  font-size: 0.85em;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

details[open] > summary::before {
  content: '🐰▾';
}

summary:hover {
  background:
    linear-gradient(135deg,
      var(--parchment-dark) 0%,
      var(--parchment) 100%);
  color: var(--ink-black);
}

details[open] > summary {
  border-bottom: 1px solid var(--parchment-dark);
  background:
    linear-gradient(135deg,
      var(--rose-gold-glow) 0%,
      var(--parchment) 60%,
      var(--rabbit-cream) 100%);
  color: var(--ink-black);
}

/* 折叠面板内容 */
details > p,
details > div {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.88em;
  line-height: 1.75;
  color: var(--ink-soft);
}

details > p {
  margin: var(--spacing-xs) 0;
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px dotted rgba(200, 190, 170, 0.4);
}

details > p:first-of-type {
  padding-top: var(--spacing-md);
}

details > p:last-of-type {
  padding-bottom: var(--spacing-md);
  border-bottom: none;
}


/* ══════════════════════════════════════
   🔍 审查链面板 (特殊样式覆盖)
   ══════════════════════════════════════ */

details:has(> summary:first-child):first-of-type {
  border-color: var(--twilight-soft);
  background:
    linear-gradient(180deg,
      #f5f2ee 0%,
      #eae4da 100%);
}

/* 通过 summary 文本内容区分不同面板 */

/* 审查链 🔍 */
details:has(summary:is(:lang(审))) {
  border-left: 3px solid var(--twilight-blue);
}

/* ── 各面板图标主题色 ── */

/* 馆长档案 👤 */
details:nth-of-type(2) {
  border-left: 3px solid var(--forest-green);
}

details:nth-of-type(2) > summary {
  background:
    linear-gradient(135deg,
      #e8f0e8 0%,
      var(--rabbit-cream) 100%);
}

details:nth-of-type(2)[open] > summary {
  background:
    linear-gradient(135deg,
      #c8e0c8 0%,
      #e8f0e8 60%,
      var(--rabbit-cream) 100%);
}

/* 同行者 👥 */
details:nth-of-type(3) {
  border-left: 3px solid var(--bunny-pink);
}

/* 当前互动角色 💃 */
details:nth-of-type(4) {
  border-left: 3px solid var(--ruby-glow);
}

details:nth-of-type(4) > summary {
  background:
    linear-gradient(135deg,
      #f5e8ee 0%,
      var(--rabbit-cream) 100%);
}

details:nth-of-type(4)[open] > summary {
  background:
    linear-gradient(135deg,
      #f0c8d8 0%,
      #f5e8ee 60%,
      var(--rabbit-cream) 100%);
}

/* 回收进度 📚 */
details:nth-of-type(5) {
  border-left: 3px solid var(--antique-gold);
}

/* 名著互动 📖 */
details:nth-of-type(6) {
  border-left: 3px solid var(--rose-gold);
}

/* 在场NPC 🗡️ */
details:nth-of-type(7) {
  border-left: 3px solid #6a4a3a;
}

/* 背包 🎒 */
details:nth-of-type(8) {
  border-left: 3px solid #7a6a4a;
}

/* 图书馆总览 🔓 */
details:nth-of-type(9) {
  border-left: 3px solid var(--deep-purple);
}

details:nth-of-type(9) > summary {
  background:
    linear-gradient(135deg,
      #f0e8f5 0%,
      var(--rabbit-cream) 100%);
}

/* 当前任务 📋 */
details:nth-of-type(10) {
  border-left: 3px solid #4a7a6a;
}

/* 行动推荐 🎯 */
details:nth-of-type(11) {
  border-left: 3px solid var(--bunny-nose);
}

/* 世界观周目 🌍 */
details:nth-of-type(12) {
  border-left: 3px solid var(--twilight-blue);
}

/* 记忆区 📝 */
details:nth-of-type(13) {
  border-left: 3px solid #8a7a5a;
}


/* ══════════════════════════════════════
   🐰 兔子主题通用装饰
   ══════════════════════════════════════ */

/* 分隔线 */
hr {
  border: none;
  height: 1px;
  margin: var(--spacing-xl) 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--bunny-pink-soft) 20%,
      var(--rose-gold-light) 50%,
      var(--bunny-pink-soft) 80%,
      transparent 100%);
  position: relative;
}

hr::after {
  content: '🐇';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--rabbit-cream);
  padding: 0 var(--spacing-sm);
  font-size: 0.9em;
}

/* 粗体 */
strong, b {
  color: var(--ink-black);
  font-weight: 700;
  text-shadow: 0 0 0.5px rgba(26, 20, 18, 0.1);
}

/* 斜体 */
em, i {
  color: var(--rose-gold);
  font-style: italic;
}

/* 行内代码 / 特殊标记 */
code {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.9em;
  padding: 2px 6px;
  background: rgba(184, 134, 107, 0.1);
  border: 1px solid rgba(184, 134, 107, 0.2);
  border-radius: var(--radius-sm);
  color: var(--rose-gold);
}


/* ══════════════════════════════════════
   🎨 SEN 状态动态颜色类
   (可通过 HTML class 手动应用)
   ══════════════════════════════════════ */

.sen-transcend {
  /* SEN 101-150 超越清明 */
  color: #8ec8ff !important;
  text-shadow: 0 0 6px rgba(142, 200, 255, 0.4);
}

.sen-clear {
  /* SEN 80-100 理智清明 */
  color: var(--sen-high) !important;
}

.sen-disturbed {
  /* SEN 50-79 心神微扰 */
  color: var(--sen-mid) !important;
}

.sen-dark {
  /* SEN 20-49 暗流涌动 */
  color: var(--sen-low) !important;
  text-shadow: 0 0 4px rgba(196, 90, 58, 0.3);
}

.sen-abyss {
  /* SEN 1-19 深渊凝视 */
  color: var(--sen-critical) !important;
  text-shadow: 0 0 6px rgba(139, 26, 43, 0.5);
  animation: sen-flicker 3s infinite;
}

.sen-zero {
  /* SEN 0 完全疯狂 */
  color: #4a0a0a !important;
  text-shadow: 0 0 10px rgba(139, 26, 43, 0.8);
  animation: sen-collapse 1.5s infinite;
}

@keyframes sen-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
  75% { opacity: 0.9; }
}

@keyframes sen-collapse {
  0%, 100% { opacity: 1; transform: scale(1); }
  25% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 0.8; transform: scale(1.01); }
  75% { opacity: 0.5; transform: scale(0.99); }
}


/* ══════════════════════════════════════
   🐾 兔子脚印分隔装饰
   (可在 HTML 中用 <div class="bunny-divider"></div>)
   ══════════════════════════════════════ */

.bunny-divider {
  text-align: center;
  margin: var(--spacing-lg) 0;
  font-size: 0.8em;
  color: var(--bunny-pink);
  opacity: 0.5;
  letter-spacing: 6px;
  user-select: none;
}

.bunny-divider::before {
  content: '🐾 · 🐾 · 🐾 · 🐾 · 🐾';
}


/* ══════════════════════════════════════
   📊 表格样式 (属性面板等)
   ══════════════════════════════════════ */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--spacing-md) 0;
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  font-size: 0.88em;
}

thead {
  background:
    linear-gradient(135deg,
      var(--parchment) 0%,
      var(--parchment-dark) 100%);
}

th {
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 1px;
  color: var(--ink-soft);
  text-align: center;
  border-bottom: 2px solid var(--rose-gold-light);
}

td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  color: var(--ink-brown);
  border-bottom: 1px solid rgba(200, 190, 170, 0.3);
}

tr:last-child td {
  border-bottom: none;
}

tbody tr:nth-child(odd) {
  background: var(--rabbit-ivory);
}

tbody tr:nth-child(even) {
  background: var(--rabbit-cream);
}

tbody tr:hover {
  background: rgba(232, 160, 180, 0.08);
}


/* ══════════════════════════════════════
   🌍 世界观标识色
   ══════════════════════════════════════ */

/* 可用于 span class 标记不同世界观 */
.world-mokan { /* 墨卷长安 */
  color: #c43333;
  border-color: #c43333;
}

.world-grimm { /* 格林之森 */
  color: #2d8a4e;
  border-color: #2d8a4e;
}

.world-ukiyo { /* 浮世幻灯 */
  color: #7a4a8a;
  border-color: #7a4a8a;
}

.world-knight { /* 骑士黄昏 */
  color: #8a7a2a;
  border-color: #8a7a2a;
}

.world-fog { /* 雾都回廊 */
  color: #4a5a6a;
  border-color: #4a5a6a;
}


/* ══════════════════════════════════════
   📱 响应式适配
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .status-bar,
  p:has(+ div):first-of-type {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    font-size: 0.85em;
  }

  .status-bar::before,
  .status-bar::after,
  p:has(+ div):first-of-type::before,
  p:has(+ div):first-of-type::after {
    position: static;
    transform: none;
    display: inline;
  }

  .narrative,
  .status-bar + div {
    padding: var(--spacing-md);
  }

  bookchar, guardian {
    padding: var(--spacing-md);
  }

  options > p {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: calc(var(--spacing-md) + 20px);
  }

  summary {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.85em;
  }

  details > p {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    font-size: 0.82em;
  }
}

@media (max-width: 480px) {
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 20px;
  }

  .status-bar,
  p:has(+ div):first-of-type {
    border-radius: var(--radius-md);
    font-size: 0.8em;
  }

  bookchar::before, guardian::before {
    font-size: 0.75em;
    letter-spacing: 1px;
  }

  options::before {
    font-size: 0.75em;
  }
}


/* ══════════════════════════════════════
   ✨ 微动效 & 细节
   ══════════════════════════════════════ */

/* 折叠面板展开动画 */
details[open] > *:not(summary) {
  animation: fadeSlideIn 0.3s ease forwards;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 选项悬停的微弹 */
options > p {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* 名著卡/看守者卡闪光边框 */
bookchar {
  background-clip: padding-box;
}

/* 滚动条美化 (Webkit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--rabbit-cream);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg,
      var(--bunny-pink-soft) 0%,
      var(--rose-gold-light) 100%);
  border-radius: 4px;
  border: 1px solid var(--rabbit-cream);
}

::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg,
      var(--bunny-pink) 0%,
      var(--rose-gold) 100%);
}

/* Firefox 滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bunny-pink-soft) var(--rabbit-cream);
}


/* ══════════════════════════════════════
   🐇 额外兔子装饰辅助类
   ══════════════════════════════════════ */

/* 兔子引用框 — 用于角色对白 */
.rabbit-quote {
  position: relative;
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-left: calc(var(--spacing-lg) + 28px);
  background: rgba(232, 160, 180, 0.06);
  border-left: 3px solid var(--bunny-pink);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--ink-soft);
}

.rabbit-quote::before {
  content: '🐰';
  position: absolute;
  left: var(--spacing-sm);
  top: var(--spacing-md);
  font-size: 1.1em;
  font-style: normal;
}

/* 兔子高亮框 — 用于重要提示 */
.rabbit-highlight {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  background:
    linear-gradient(135deg,
      rgba(232, 160, 180, 0.1) 0%,
      rgba(212, 168, 140, 0.1) 100%);
  border: 1px dashed var(--bunny-pink-soft);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.9em;
}

/* 兔子徽章 — 用于成就 */
.rabbit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: var(--bunny-pink-soft);
  border: 1px solid var(--bunny-pink);
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--ruby-red);
}

.rabbit-badge::before {
  content: '🐾';
  font-size: 0.85em;
}