/* ============================================
   民国戏曲风格 · 淡色雅致版 · 戏韵盎然
   板块分明 · 如临戏台 · 如阅戏折
   ============================================ */

/* 全局基调：老戏票底纹 */
body {
  background: #efe6d8 !important;
  color: #2e241f !important;
  padding: 30px 20px !important;
  font-family: 'Georgia', 'Times New Roman', '宋体', 'SimSun', '楷体', serif !important;
  line-height: 1.78 !important;
  position: relative !important;
}

/* 仿宣纸暗纹 */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(circle at 25% 40%, rgba(200,170,130,0.03) 2px, transparent 2px) !important;
  background-size: 28px 28px !important;
  z-index: 0 !important;
}

body > * {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ===== 标题体系：戏牌/匾额风格 ===== */
h1, h2, h3, h4 {
  color: #a03d2a !important;
  border-left: 6px solid #c9873e !important;
  padding-left: 20px !important;
  margin: 40px 0 24px 0 !important;
  font-family: 'Georgia', '楷体', 'KaiTi', '华文楷书', serif !important;
  letter-spacing: 3px !important;
  font-weight: 500 !important;
  text-shadow: 1px 1px 0 rgba(180,120,70,0.1) !important;
  background: linear-gradient(90deg, rgba(200,160,120,0.05), transparent) !important;
  border-radius: 0 8px 8px 0 !important;
}
h1 { font-size: 2rem !important; letter-spacing: 4px !important; }
h2 { font-size: 1.6rem !important; }
h3 { font-size: 1.3rem !important; }
h4 { font-size: 1.1rem !important; }

/* ===== 主故事框：戏台幕布展开 ===== */
.story-text {
  background: #fffef7 !important;
  padding: 36px 40px !important;
  border-radius: 32px 32px 28px 28px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255,250,230,0.9) !important;
  border: 1px solid #e2d2bc !important;
  margin-bottom: 36px !important;
  position: relative !important;
}

/* 戏台帘幕装饰 - 上下仿古 */
.story-text::before {
  content: "✦ 戏 · 文 · 一 · 折 ✦" !important;
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #fff3e6 !important;
  padding: 2px 24px !important;
  font-size: 0.7rem !important;
  letter-spacing: 3px !important;
  color: #c9873e !important;
  border-radius: 30px !important;
  font-family: '楷体', serif !important;
  white-space: nowrap !important;
  border: 1px solid #e2cfb5 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.story-text::after {
  content: "✦ 幕 · 落 ✦" !important;
  position: absolute !important;
  bottom: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #fff3e6 !important;
  padding: 2px 20px !important;
  font-size: 0.65rem !important;
  letter-spacing: 2px !important;
  color: #b87a4a !important;
  border-radius: 30px !important;
  font-family: '楷体', serif !important;
  border: 1px solid #e2cfb5 !important;
}

/* 段落：戏文分行韵味 */
p {
  margin-bottom: 20px !important;
  line-height: 1.88 !important;
  text-indent: 2em !important;
  font-size: 1.02rem !important;
}

/* 引用：念白/唱词腔调 */
blockquote {
  border-left: 5px solid #c9873e !important;
  background: #fef6ec !important;
  padding: 18px 28px !important;
  margin: 28px 0 !important;
  font-style: italic !important;
  color: #6b3f2a !important;
  font-family: '楷体', 'Georgia', serif !important;
  border-radius: 0 28px 28px 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
  position: relative !important;
}

blockquote::before {
  content: "「" !important;
  font-size: 1.8rem !important;
  color: #c9873e !important;
  opacity: 0.5 !important;
  position: absolute !important;
  left: 10px !important;
  top: 5px !important;
}

blockquote::after {
  content: "」" !important;
  font-size: 1.8rem !important;
  color: #c9873e !important;
  opacity: 0.5 !important;
  position: absolute !important;
  right: 10px !important;
  bottom: 0px !important;
}

/* ===== 表格：戏折子/戏单样式 ===== */
table {
  display: block !important;
  overflow-x: auto !important;
  width: 100% !important;
  margin: 30px 0 !important;
  border-collapse: collapse !important;
  background: #fffcf5 !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #eadbc4 !important;
}
th, td {
  border: 1px solid #e6d5bc !important;
  padding: 12px 16px !important;
  background: #fffcf5 !important;
  color: #3e2c1f !important;
}
th {
  background: #f5ecdf !important;
  color: #a03d2a !important;
  font-weight: 600 !important;
  font-family: 'Georgia', '楷体', serif !important;
  letter-spacing: 1px !important;
}

/* ===== 分割线：珠帘/水袖 ===== */
hr {
  border: none !important;
  height: 2px !important;
  background: repeating-linear-gradient(90deg, #c9873e, #dbb88c 20px, #e2cfb5 40px, #dbb88c 60px, #c9873e 80px) !important;
  margin: 42px 0 !important;
  position: relative !important;
}

hr::before {
  content: "✦" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: -10px !important;
  background: #efe6d8 !important;
  padding: 0 10px !important;
  color: #c9873e !important;
  font-size: 0.9rem !important;
}

/* ============================================
   状态栏 · 戏班名角挂牌风格
   ============================================ */
.state-container {
  background: #fffaf3 !important;
  border: 1px solid #ddcdb2 !important;
  border-radius: 36px !important;
  margin: 42px 0 !important;
  overflow: hidden !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
}

/* 状态栏仿戏台楣头 */
.state-container::before {
  content: "🎭 角 · 儿 · 上 · 场 🎭" !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #fdf3e6 !important;
  padding: 2px 28px !important;
  font-size: 0.7rem !important;
  letter-spacing: 3px !important;
  color: #b87844 !important;
  border-radius: 30px !important;
  font-family: '楷体', serif !important;
  border: 1px solid #e2cfb5 !important;
  white-space: nowrap !important;
}

/* 各状态板块：戏目分场 */
.state-section {
  padding: 24px 32px !important;
  border-bottom: 1px solid #eedbc6 !important;
  background: linear-gradient(135deg, #fffdf8 0%, #fff8ef 100%) !important;
  position: relative !important;
}

.state-section:last-child {
  border-bottom: none !important;
}

/* 板块标题：戏牌子 */
.state-title {
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  color: #b87a4c !important;
  margin-bottom: 20px !important;
  font-weight: 500 !important;
  font-family: 'Georgia', '楷体', serif !important;
  border-left: 4px solid #d4a373 !important;
  padding-left: 16px !important;
  background: linear-gradient(90deg, rgba(200,160,120,0.08), transparent) !important;
}

/* 状态行 */
.state-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
  font-size: 0.96rem !important;
  padding: 4px 0 !important;
}
.state-label {
  width: 110px !important;
  color: #9b7b5c !important;
  font-weight: normal !important;
  letter-spacing: 1.5px !important;
  font-size: 0.9rem !important;
}
.state-value {
  flex: 1 !important;
  color: #3c2a1f !important;
  font-weight: 500 !important;
  border-bottom: 1px dotted #f0e0cc !important;
}

/* 主角与慕寒斯 · 左右并台 */
.state-dual {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 8px !important;
}
.state-dual > div {
  flex: 1 !important;
  min-width: 210px !important;
  background: #fffef9 !important;
  border-radius: 28px !important;
  padding: 16px 20px !important;
  border: 1px solid #eadbc4 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
  transition: all 0.2s !important;
}
.state-dual > div:hover {
  border-color: #d4b48c !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* 内心想法 · 戏文引子/独白条 */
.inner-thought {
  background: #fef3e8 !important;
  padding: 14px 24px !important;
  border-radius: 48px !important;
  font-style: italic !important;
  color: #bc6f42 !important;
  font-size: 0.9rem !important;
  margin-top: 18px !important;
  text-align: center !important;
  font-family: '楷体', 'KaiTi', serif !important;
  border: 1px solid #eedbc6 !important;
  box-shadow: inset 0 0 0 1px rgba(255,250,240,0.8), 0 2px 6px rgba(0,0,0,0.03) !important;
  position: relative !important;
}

.inner-thought::before {
  content: "🎵" !important;
  margin-right: 10px !important;
  opacity: 0.7 !important;
}

.inner-thought::after {
  content: "🎵" !important;
  margin-left: 10px !important;
  opacity: 0.7 !important;
}

/* 红玉/名字点缀 */
.red-jade {
  color: #c44a2a !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #fff0e6, transparent) !important;
  padding: 0 6px !important;
  border-radius: 20px !important;
  display: inline-block !important;
}

/* 信任值模拟条 */
.trust-bar {
  display: inline-block !important;
  background: #ecdcc8 !important;
  border-radius: 30px !important;
  height: 6px !important;
  width: 80px !important;
  vertical-align: middle !important;
  margin-left: 12px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05) !important;
}
.trust-bar-fill {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: #b54a2c !important;
  border-radius: 30px !important;
  box-shadow: 0 0 3px #e09870 !important;
}

/* ============================================
   折叠记忆区 · 戏本/老唱片封套
   ============================================ */
details {
  background: #fffdf5 !important;
  border: 1px solid #ddcdb2 !important;
  border-radius: 28px !important;
  margin: 36px 0 !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}

details[open] {
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

summary {
  background: #f7efe2 !important;
  padding: 18px 32px !important;
  font-weight: 600 !important;
  color: #a03d2a !important;
  cursor: pointer !important;
  list-style: none !important;
  border-bottom: 1px solid #e6d5bc !important;
  font-family: 'Georgia', '楷体', serif !important;
  letter-spacing: 2px !important;
  font-size: 1rem !important;
}

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

summary::before {
  content: "📖" !important;
  display: inline-block !important;
  margin-right: 14px !important;
  font-size: 1.1rem !important;
  transition: transform 0.25s !important;
}

details[open] summary::before {
  transform: rotate(5deg) !important;
  content: "🎋" !important;
}

details > :not(summary) {
  padding: 22px 30px !important;
}

/* 记忆区表格戏韵 */
details table {
  margin: 16px 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
}

/* ============================================
   选项区域 · 戏票/花签/扇面
   ============================================ */
.options-area {
  margin: 40px 0 28px !important;
  padding: 28px 32px !important;
  background: #fffaf0 !important;
  border-radius: 48px 48px 40px 40px !important;
  border: 1px solid #e2cfb5 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,250,230,0.6) !important;
  position: relative !important;
}

.options-area::before {
  content: "🎫 请 · 择 · 一 · 折 🎫" !important;
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #fef3e6 !important;
  padding: 2px 28px !important;
  font-size: 0.7rem !important;
  letter-spacing: 3px !important;
  color: #b87a4a !important;
  border-radius: 30px !important;
  font-family: '楷体', serif !important;
  border: 1px solid #e2cfb5 !important;
  white-space: nowrap !important;
}

.options-title {
  font-size: 0.85rem !important;
  color: #b87a4c !important;
  letter-spacing: 4px !important;
  margin-bottom: 22px !important;
  text-align: center !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

.options-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
}

.option-btn {
  flex: 1 !important;
  min-width: 170px !important;
  background: #fffdf7 !important;
  border: 1.5px solid #e0ceb0 !important;
  border-radius: 60px !important;
  padding: 12px 18px !important;
  font-size: 0.92rem !important;
  color: #4e3624 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  font-family: '楷体', 'Georgia', serif !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  position: relative !important;
  overflow: hidden !important;
}

.option-btn::before {
  content: "🎭" !important;
  margin-right: 6px !important;
  opacity: 0.5 !important;
  font-size: 0.8rem !important;
}

.option-btn:hover {
  background: #f5e8d8 !important;
  border-color: #c9873e !important;
  color: #a03d2a !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08) !important;
}

.option-btn:hover::before {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* 隐藏标记 */
.hidden-marker {
  display: none !important;
}

/* ===== 戏曲小装饰 ===== */
/* 特定强调的边角花 */
.state-section:first-child {
  border-top: 2px solid #eedbc6 !important;
  background: linear-gradient(115deg, #fffefa 0%, #fff5e8 100%) !important;
}

/* ===== 响应式：手机戏楼 ===== */
@media (max-width: 640px) {
  body {
    padding: 16px 12px !important;
  }
  .story-text {
    padding: 24px 20px !important;
  }
  .story-text::before,
  .story-text::after,
  .state-container::before,
  .options-area::before {
    font-size: 0.55rem !important;
    padding: 2px 14px !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
  }
  p {
    text-indent: 1.5em !important;
    font-size: 0.95rem !important;
  }
  .state-section {
    padding: 18px 20px !important;
  }
  .state-label {
    width: 85px !important;
    font-size: 0.82rem !important;
  }
  .state-dual {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .state-dual > div {
    padding: 12px 16px !important;
  }
  .option-btn {
    min-width: 100% !important;
    padding: 10px 14px !important;
  }
  .options-area {
    padding: 20px 20px !important;
  }
  th, td {
    padding: 8px 10px !important;
    font-size: 0.72rem !important;
  }
  summary {
    padding: 14px 22px !important;
  }
  blockquote {
    padding: 14px 20px !important;
  }
  .inner-thought {
    font-size: 0.8rem !important;
    padding: 10px 16px !important;
  }
}

/* 滚动条：老木雕花 */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #eaddcc;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #bc7a4a;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a03d2a;
}