/* =================================================================
   builtInCss · 欲望型单角色卡 · 通用浅色版
   -----------------------------------------------------------------
   配色：暖灰底色 + 暖棕强调 + 深灰正文
   字体：Noto Serif SC（正文）+ JetBrains Mono（系统/裁决）
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700&display=swap');

:root {
  --bg: #f8f5f0;
  --bg-2: #f0ece6;
  --accent: #a07050;
  --accent-2: #8b5e3c;
  --warn: #c45c5c;
  --line: rgba(160,112,80,.12);
  --line-hi: rgba(160,112,80,.35);
  --text: #2b2218;
  --muted: #8a7a6a;
  --dim: #c0b0a0;
}

body {
  background: #f8f5f0;
  color: #2b2218;
  font-family: "Noto Serif SC", serif;
}

*, *::before, *::after {
  transition: border-color .22s, background-color .22s, box-shadow .22s, opacity .22s;
}

/* ---------- 正文 .story ---------- */
.story {
  padding: 28px 26px;
  font-size: 16px;
  line-height: 1.92;
  color: var(--text);
  letter-spacing: .3px;
  border-left: 1px solid rgba(160,112,80,.08);
  margin-left: 8px;
  animation: fadeIn .6s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.story p {
  margin: 0 0 15px;
  text-indent: 2em;
}

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

.story strong { color: var(--accent); font-weight: 700; }
.story em { color: var(--accent-2); font-style: italic; }

/* ---------- 分隔线 ---------- */
hr, .separator {
  border: none; height: auto;
  margin: 32px 0; text-align: center; position: relative; overflow: visible;
}

hr::before, .separator::before {
  content: "";
  position: absolute; left: 5%; right: 5%; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(160,112,80,.2) 15%, rgba(160,112,80,.4) 50%, rgba(160,112,80,.2) 85%, transparent 100%);
  transform: translateY(-50%);
}

hr::after, .separator::after {
  content: "剧本终 · 故事始";
  position: relative; display: inline-block;
  padding: 0 18px; background: var(--bg);
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .32em; color: rgba(160,112,80,.45);
}

/* ---------- 裁决块 ---------- */
details { margin: 8px 0; animation: fadeIn .5s ease both; }

details summary {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: .22em; color: rgba(160,112,80,.55);
  cursor: pointer; padding: 8px 12px; list-style: none;
  user-select: none; border-radius: 4px;
}

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

details summary::before {
  content: "●"; display: inline-block; margin-right: 8px; font-size: 8px;
  color: rgba(160,112,80,.4); animation: pulse 2.6s ease-in-out infinite; vertical-align: middle;
}

@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

details summary:hover { color: rgba(160,112,80,.85); background: rgba(160,112,80,.04); }

details[open] { margin-bottom: 20px; }

details[open] > *:not(summary) {
  font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.75;
  color: rgba(100,90,80,.7); padding: 12px 16px;
  background: rgba(240,236,230,.9); border: 1px solid rgba(160,112,80,.1);
  border-top: none; border-radius: 0 0 6px 6px; margin-top: -2px;
}

details[open] p, details[open] div {
  margin: 6px 0; padding-left: 12px; border-left: 2px solid rgba(160,112,80,.18);
}

details[open] > *:not(summary) > p:first-child,
details[open] > *:not(summary) > div:first-child {
  border-left-color: rgba(160,112,80,.4); color: rgba(160,112,80,.8);
}

/* ---------- 状态面板 ---------- */
.panel {
  margin: 18px 0; padding: 18px 20px;
  background: rgba(240,236,230,.85); border: 1px solid rgba(160,112,80,.12);
  border-radius: 8px; font-size: 14px; line-height: 1.8; color: #3a3028;
  box-shadow: 0 8px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.4);
  animation: slideUp .5s ease both;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.panel summary {
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700;
  letter-spacing: .24em; margin-bottom: 10px; cursor: pointer;
  list-style: none; user-select: none; padding: 4px 0;
}

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

.panel:not(.player):not(.npc) summary { color: var(--accent); }
.panel.player summary { color: var(--accent); }
.panel.npc summary { color: var(--accent-2); }

.panel .panel-line { margin: 6px 0; padding-left: 4px; line-height: 1.75; }
.panel .panel-line:hover { background: rgba(160,112,80,.03); border-radius: 4px; }

/* ---------- 行动建议 ---------- */
.suggestions {
  margin: 20px 0 8px; padding: 0; background: transparent; border: none;
  animation: slideUp .5s ease .1s both; counter-reset: sug;
}

.suggestions::before {
  content: "可选行动"; display: block;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .28em; color: rgba(140,120,100,.45);
  margin-bottom: 10px; padding-left: 4px;
}

.suggestions p {
  position: relative; padding: 14px 16px 14px 48px; margin: 8px 0;
  background: rgba(240,236,230,.8); border: 1px solid rgba(160,112,80,.14);
  border-radius: 6px; color: #3a3028; font-size: 14px; line-height: 1.7;
  cursor: pointer; counter-increment: sug;
}

.suggestions p::before {
  content: "[" counter(sug, decimal-leading-zero) "]";
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700;
  color: rgba(140,120,100,.4); letter-spacing: .08em;
}

.suggestions p:hover {
  background: rgba(232,225,215,.9); border-color: rgba(160,112,80,.4);
  transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,.08), 0 0 20px rgba(160,112,80,.06);
}

.suggestions p:hover::before { color: var(--accent); }

/* ---------- 通用 ---------- */
p { margin: 0 0 12px; }
ul, ol { padding-left: 20px; margin: 10px 0; }
li { margin: 5px 0; color: #3a3028; }

code, pre {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  background: rgba(240,236,230,.9); border: 1px solid rgba(160,112,80,.12);
  border-radius: 4px; color: rgba(160,112,80,.8);
}
code { padding: 2px 6px; }
pre { padding: 12px 16px; overflow-x: auto; margin: 12px 0; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(160,112,80,.25); }
a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

@media (max-width: 480px) {
  .story { padding: 18px 14px; font-size: 15px; line-height: 1.85; margin-left: 0; border-left: none; }
  .story p { text-indent: 1.5em; }
  .panel { padding: 14px 16px; }
  .panel summary { font-size: 12px; letter-spacing: .16em; }
  .suggestions p { padding: 12px 14px 12px 42px; font-size: 13px; }
  .suggestions p::before { font-size: 11px; left: 12px; }
  details summary { font-size: 10px; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}