/* 文章內文樣式（2026-11-07 從 site.css 搬出來）：前台文章頁與後台編輯器共用同一份，編輯時看到的就是前台的樣子。
   後台沒有 site.css，所以顏色、字型變數在 .prose 上自己帶一份（數值跟 site.css :root 一樣）。 */
.prose { --pn2: #211b14; --ln: #3a2f20; --ln2: #54442c; --gd: #d6a74b; --gd2: #f2d78f; --tx: #e9ddc5; --mu: #9b8d73; --r: 3px;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif; --sans: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  color: var(--tx); font-family: var(--sans); }
.prose img { max-width: 100%; height: auto; display: block; }
.prose h1, .prose h2, .prose h3 { text-wrap: balance; }
.prose { font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.prose h2 { font-family: var(--serif); color: var(--gd2); font-size: 22px; margin: 28px 0 10px; padding-left: 12px; border-left: 3px solid var(--gd); }
.prose h3 { color: var(--gd2); font-size: 18px; margin: 22px 0 8px; }
.prose a { color: var(--gd2); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--r); margin: 12px 0; }
.prose blockquote { margin: 16px 0; padding: 10px 16px; background: var(--pn2); border-left: 3px solid var(--ln2); color: #cfc2a6; }
.prose table { border-collapse: collapse; width: 100%; margin: 14px 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--ln); padding: 8px 10px; text-align: left; }
.prose th { background: var(--pn2); color: var(--gd2); white-space: nowrap; } /* 2026-11-07：表頭不折行（打狗棒十欄時「命中」被擠成直的） */
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r); }
.prose hr { border: 0; border-top: 1px solid var(--ln); margin: 24px 0; }
.prose img[width="32"] { display: inline-block; width: 32px; height: 32px; margin: 0 6px 0 0; vertical-align: middle; image-rendering: pixelated; background: #0b0907; border: 1px solid #6d5427; box-shadow: inset 0 0 0 1px #000; border-radius: 0; padding: 0; }
.prose img[width="48"] { display: inline-block; width: 48px; height: 48px; margin: 0 8px 0 0; vertical-align: middle; image-rendering: pixelated; background: #0b0907; border: 1px solid #6d5427; border-radius: 0; object-fit: contain; }
.prose img[width="64"] { display: inline-block; width: 64px; height: 64px; margin: 4px 8px 4px 0; vertical-align: middle; image-rendering: pixelated; object-fit: contain; background: radial-gradient(#2a2015, #0b0907); border: 1px solid #4d3c22; border-radius: 0; }
/* 2026-11-07 使用者：表格裡的圖一律 32×32（跟道具圖示一樣大，圖示不放大不失真；怪物圖、地圖縮進同一格） */
.prose td img, .prose td img[width] { display: inline-block; width: 32px; height: 32px; max-width: none; margin: 0 6px 0 0; padding: 0; vertical-align: middle;
  object-fit: contain; background: #0b0907; border: 1px solid #6d5427; box-shadow: inset 0 0 0 1px #000; border-radius: 0; image-rendering: auto; }
.prose td img[src*="/icons/"] { image-rendering: pixelated; } /* 道具圖示原本就是 32，保持像素清楚 */
.prose td img[src*="map_"] { object-fit: cover; } /* 地圖縮圖裁成方格 */
.prose td:has(> img:first-child) { min-width: 7em; } /* 圖＋名稱的格子至少留 7 個字寬，名稱不會被擠到圖下面；長文字照常換行、不會把表格撐爆 */
.prose figure { margin: 18px 0; padding: 6px; background: #0b0907; border: 1px solid #4d3c22; }
.prose figure img { width: 100%; margin: 0; border-radius: 0; }
.prose figcaption { padding: 6px 4px 2px; font-size: 13px; color: var(--mu); text-align: center; }
.prose blockquote b, .prose blockquote strong { color: var(--gd2); }
.prose table td { vertical-align: middle; }
.prose table { display: table; }
@media (max-width: 560px) { .prose table { display: block; font-size: 14px; } .prose th, .prose td { padding: 6px 7px; } }
.prose pre { background: #0a0908; padding: 12px; overflow-x: auto; border-radius: var(--r); }

/* 點開才展開（2026-11-07，大俠行囊與武功）：平常一行像物品欄，點了往下展開各級數值 */
.prose details { margin: 6px 0; background: var(--pn2); border: 1px solid var(--ln); border-radius: var(--r); }
.prose details[open] { border-color: var(--gd); }
.prose summary { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; cursor: pointer; list-style: none; user-select: none; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "▼"; margin-left: auto; font-size: 11px; color: var(--gd); transition: transform .2s; flex: none; }
.prose details[open] summary::after { transform: rotate(180deg); }
.prose summary img[width] { display: inline-block; width: 32px; height: 32px; margin: 0; flex: none; image-rendering: pixelated; background: #0b0907; border: 1px solid #6d5427; border-radius: 0; }
.prose summary b { color: var(--gd2); white-space: nowrap; }
.prose summary small { color: var(--mu); font-size: 13px; }
.prose summary em { font-style: normal; color: var(--tx); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.prose details > table { margin: 0; border-top: 1px solid var(--ln); }
.prose details > p { margin: 8px 12px; font-size: 14px; color: var(--mu); }
@media (max-width: 560px) { .prose summary em { display: none; } }