【10+童话故事融合，25+内置角色】色情童话大世界

/* ================================================
   格林巴德 · 涂鸦童话 × 波普轻纸质感 · 完整版
   色板参考：底 #f6f2e8 深纸 #efeadd 墨 #302b23
   红 #d64553 黄 #e0a01a 绿 #3ba05a 蓝 #3f52c4 粉 #dd6478
   ================================================ */

/* ==================== 卡片基础 · 多层纸感堆叠 ==================== */
.card {
  position: relative;
  margin: 34px 0;
  padding: 24px 22px 20px 22px;
  background-color: #f6f2e8;
  background-image:
    radial-gradient(ellipse 60% 40% at 18% 12%, rgba(255,240,210,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 82% 88%, rgba(180,140,80,0.07) 0%, transparent 60%),
    repeating-linear-gradient(91deg, rgba(160,130,70,0.022) 0px, rgba(160,130,70,0.022) 1px, transparent 2px, transparent 5px),
    repeating-linear-gradient(178deg, rgba(120,90,50,0.018) 0px, transparent 3px, transparent 7px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.15 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(178deg, #f6f2e8 0%, #efeadd 100%);
  border: 2.5px solid #302b23;
  border-right-width: 3px;
  border-bottom-width: 3.5px;
  border-radius: 6px 12px 5px 10px;
  box-shadow:
    3px 4px 0 #302b23,
    3px 4px 0 4px rgba(48,43,35,0.04),
    inset 0 0 32px rgba(180,140,80,0.035);
  color: #2c2820;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14.5px;
  line-height: 1.78;
  transition: box-shadow 0.35s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow:
    5px 6px 0 #302b23,
    5px 6px 0 4px rgba(48,43,35,0.05),
    inset 0 0 32px rgba(180,140,80,0.035);
}

/* 右上角 · 折角 */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg,
    transparent 46%,
    #302b23 46%, #302b23 50%,
    #e5dabe 50%, #d4c898 100%);
  border-radius: 0 12px 0 6px;
  z-index: 2;
}

/* 左上角 · 和纸胶带（每张卡片都有一小截） */
.card::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 26px;
  width: 58px;
  height: 18px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 3px,
      transparent 3px, transparent 7px),
    linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 35%);
  background-color: #e6b8b8;
  border-top: 1.5px dashed rgba(48,43,35,0.38);
  border-bottom: 1.5px dashed rgba(48,43,35,0.38);
  box-shadow: 1px 1px 3px rgba(48,43,35,0.15);
  transform: rotate(-3deg);
  opacity: 0.88;
  z-index: 1;
}

/* ==================== 每类卡片的左边缘彩条 & 胶带色变化 ==================== */
.card.situation   { border-left: 6px solid #3f52c4; }
.card.protagonist { border-left: 6px solid #d64553; }
.card.companion   { border-left: 6px solid #dd6478; }
.card.npc         { border-left: 6px solid #3ba05a; }
.card.journey     { border-left: 6px solid #e0a01a; }
.card.story       { border-left: 6px solid #3f52c4; }
.card.memory      { border-left: 6px solid #d64553; }
.card.action      { border-left: 6px solid #3ba05a; }

.card.situation::after   { background-color: #b8c4e8; }
.card.protagonist::after { background-color: #e8b8b8; }
.card.companion::after   { background-color: #eec4cd; }
.card.npc::after         { background-color: #b8d8b8; }
.card.journey::after     { background-color: #ecd8a0; }
.card.story::after       { background-color: #c0c8e5; }
.card.memory::after      { background-color: #e5b8b8; }
.card.action::after      { background-color: #bcd8b8; }

/* ==================== summary · 标题行 ==================== */
.card summary {
  padding: 6px 0 14px 0;
  margin: 0 0 14px 0;
  font-weight: 700;
  font-size: 15.5px;
  color: #2c2820;
  cursor: pointer;
  list-style: none;
  outline: none;
  position: relative;
  border-bottom: 2px dashed #b8a988;
  user-select: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.card summary::-webkit-details-marker { display: none; }
.card summary::marker { content: ""; }
.card summary:hover { color: #1a1712; }

.card[open] > summary {
  border-bottom: 2.5px solid #302b23;
  margin-bottom: 16px;
}

/* summary 展开箭头 */
.card summary > span.arrow, /* 兼容 */
.card summary::after {
  content: "▼";
  float: right;
  font-size: 10.5px;
  color: #8a7d5f;
  padding: 3px 7px;
  border: 1.5px solid #b8a988;
  border-radius: 3px 6px 3px 5px;
  background: rgba(255,251,238,0.5);
  transform: rotate(-90deg);
  transition: transform 0.3s ease, color 0.2s ease, border-color 0.2s ease;
  margin-top: 2px;
}
.card[open] > summary::after {
  transform: rotate(0deg);
  color: #d64553;
  border-color: #d64553;
}

/* ==================== 波普标签 · 核心视觉锤 ==================== */
.card summary::before {
  display: inline-block;
  padding: 5px 12px 4px 12px;
  margin-right: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fdf8ec;
  border: 2px solid #1e1a14;
  border-radius: 3px 7px 4px 6px;
  box-shadow:
    2px 2px 0 #1e1a14,
    inset 0 -2px 0 rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  vertical-align: middle;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.28);
  background-image: linear-gradient(172deg, rgba(255,255,255,0.22) 0%, transparent 45%, rgba(0,0,0,0.14) 100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card summary:hover::before {
  transform: rotate(0deg) translateY(-3px) scale(1.04) !important;
}

.card.situation summary::before   { content: "📍 此刻"; background-color: #3f52c4; transform: rotate(-5deg); }
.card.protagonist summary::before { content: "⚔ 旅人"; background-color: #d64553; transform: rotate(-4deg); }
.card.companion summary::before   { content: "🌟 同行"; background-color: #dd6478; transform: rotate(-6deg); }
.card.npc summary::before         { content: "👤 在场"; background-color: #3ba05a; transform: rotate(-3deg); }
.card.journey summary::before     { content: "🗺 旅途"; background-color: #e0a01a; color: #2c2820; text-shadow: 1px 1px 0 rgba(255,255,255,0.28); transform: rotate(-5deg); }
.card.story summary::before       { content: "📖 故事"; background-color: #3f52c4; transform: rotate(-4deg); }
.card.memory summary::before      { content: "🧠 记忆"; background-color: #d64553; transform: rotate(-7deg); }
.card.action summary::before      { content: "✋ 抉择"; background-color: #3ba05a; transform: rotate(-5deg); }

/* ==================== markdown 文本装饰 ==================== */
.card strong {
  color: #1e1a14;
  font-weight: 700;
  padding: 0 2px;
  background-image: linear-gradient(180deg,
    transparent 65%,
    rgba(224,160,26,0.38) 65%,
    rgba(224,160,26,0.38) 92%,
    transparent 92%);
}
.card em {
  color: #a04532;
  font-style: normal;
  font-weight: 600;
  padding: 0 1px 1px 1px;
  border-bottom: 2px dotted #d64553;
}

/* 列表 · 手绘符号 */
.card ul {
  list-style: none;
  padding-left: 8px;
  margin: 8px 0;
}
.card ul li {
  position: relative;
  padding-left: 22px;
  margin: 4px 0;
}
.card ul li::before {
  content: "✦";
  position: absolute;
  left: 2px;
  top: 1px;
  color: #d64553;
  font-size: 12px;
  font-weight: 900;
  transform: rotate(10deg);
}
.card ul ul li::before { content: "◆"; color: #e0a01a; font-size: 10px; transform: none; }
.card ul ul ul li::before { content: "▪"; color: #3ba05a; }

.card ol {
  padding-left: 24px;
  margin: 8px 0;
}
.card ol li {
  margin: 4px 0;
  padding-left: 4px;
}
.card ol li::marker {
  color: #d64553;
  font-weight: 800;
}

/* 分隔线 · 圆点 + 中心装饰 */
.card hr {
  border: none;
  height: 12px;
  background: radial-gradient(circle, #b8a988 2px, transparent 2.5px) 0 50% / 14px 12px repeat-x;
  margin: 16px 0;
  position: relative;
}
.card hr::after {
  content: "❋";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d64553;
  background: #f6f2e8;
  padding: 0 10px;
  font-size: 13px;
}

/* ==================== 表格 · 涂鸦手账风 ==================== */
.card table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 10px 0;
  font-size: 13px;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(255,240,210,0.38) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,251,238,0.7) 0%, rgba(250,244,224,0.7) 100%);
  border: 2px solid #302b23;
  border-radius: 5px 8px 5px 7px;
  overflow: hidden;
  box-shadow:
    2px 2px 0 rgba(48,43,35,0.38),
    inset 0 0 20px rgba(180,140,80,0.05);
}
.card th {
  background: linear-gradient(180deg, #ede4cf 0%, #e0d3ae 100%);
  color: #2c2820;
  padding: 9px 11px;
  border-bottom: 2px solid #302b23;
  font-weight: 800;
  text-align: left;
  letter-spacing: 0.3px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}
.card th:not(:last-child) { border-right: 1px dashed #b8a988; }
.card td {
  padding: 8px 11px;
  border-bottom: 1px dashed #c5b895;
  color: #3a352b;
  transition: background 0.2s ease;
}
.card td:not(:last-child) { border-right: 1px dotted #d4c898; }
.card tr:last-child td { border-bottom: none; }
.card tr:nth-child(even) td { background: rgba(232,220,190,0.3); }
.card tr:hover td { background: rgba(224,160,26,0.13); }

/* ==================== 正文区 · 主叙事纸 ==================== */
.text {
  position: relative;
  margin: 34px 0;
  padding: 28px 30px 26px 44px;
  background-color: #faf6ea;
  background-image:
    radial-gradient(ellipse 55% 40% at 22% 15%, rgba(255,240,210,0.52) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 85%, rgba(160,120,60,0.07) 0%, transparent 60%),
    repeating-linear-gradient(91deg, rgba(160,130,70,0.022) 0px, transparent 2px, transparent 6px),
    repeating-linear-gradient(178deg, rgba(120,90,50,0.015) 0px, transparent 3px, transparent 8px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.15 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n2)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #faf6ea 0%, #f4efdf 100%);
  border: 2.5px solid #302b23;
  border-right-width: 3px;
  border-bottom-width: 3.5px;
  border-radius: 5px 10px 6px 9px;
  box-shadow:
    3px 4px 0 #302b23,
    3px 4px 0 4px rgba(48,43,35,0.045),
    inset 0 0 42px rgba(180,140,80,0.045);
  color: #2c2820;
  line-height: 2;
  font-size: 15.5px;
}

/* 左侧四色彩条 */
.text::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 20px;
  bottom: 20px;
  width: 5px;
  background: linear-gradient(180deg,
    #d64553 0%, #d64553 22%,
    #e0a01a 26%, #e0a01a 46%,
    #3ba05a 50%, #3ba05a 70%,
    #3f52c4 74%, #3f52c4 100%);
  border-radius: 3px;
  box-shadow: 1px 0 0 rgba(48,43,35,0.4), -1px 0 0 rgba(48,43,35,0.15);
}

/* 右上角描边星星 */
.text::after {
  content: "✦";
  position: absolute;
  top: -20px;
  right: 26px;
  font-size: 28px;
  color: #e0a01a;
  transform: rotate(18deg);
  text-shadow:
    -2px -2px 0 #302b23, 2px -2px 0 #302b23,
    -2px  2px 0 #302b23, 2px  2px 0 #302b23,
    3px 3px 0 rgba(48,43,35,0.3);
  z-index: 3;
}

.text p {
  margin: 0 0 16px 0;
  text-indent: 2em;
  color: #2c2820;
}
.text p:first-of-type { margin-top: 0; }
.text p:last-of-type  { margin-bottom: 0; }

/* 首字下沉 · 童话感 */
.text p:first-of-type::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.88;
  padding: 4px 10px 2px 0;
  margin: 4px 6px 0 0;
  color: #d64553;
  font-weight: 800;
  text-shadow: 2px 2px 0 #302b23;
  text-indent: 0;
}

.text strong {
  color: #1e1a14;
  font-weight: 700;
  background-image: linear-gradient(180deg,
    transparent 62%,
    rgba(224,160,26,0.42) 62%,
    rgba(224,160,26,0.42) 90%,
    transparent 90%);
  padding: 0 2px;
}
.text em {
  color: #a04532;
  font-style: normal;
  font-weight: 600;
  border-bottom: 2px dotted #d64553;
  padding-bottom: 1px;
}

/* ==================== 行动推荐 · 选项按钮化 ==================== */
.card.action ol {
  pa

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。