/* 故事線審閱頁：對話、波可的誤會、拿到的文件 */
.cs-game .sr-dialog { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-2); }
.cs-game .sr-dialog li { padding: var(--cs-space-2) var(--cs-space-3); border-radius: var(--cs-radius-control); background: var(--cs-surface-muted); }
.cs-game .sr-intro p { margin: 0; }
.cs-game .sr-note { padding: var(--cs-space-3); border-radius: var(--cs-radius-control); background: var(--cs-warning-bg); display: grid; gap: var(--cs-space-1); }
.cs-game .sr-note p { margin: 0; }
.cs-game .sr-reward { display: flex; gap: var(--cs-space-2); align-items: flex-start; padding: var(--cs-space-3); border-radius: var(--cs-radius-control); background: var(--cs-success-bg); color: var(--cs-text); }
.cs-game .sr-reward p { margin: 0; }
.cs-game .sr-bad td { background: var(--cs-warning-bg); }
.cs-game .sr-toc { flex-wrap: wrap; gap: var(--cs-space-2); }
.cs-game .sr-toc a { padding: 2px var(--cs-space-2); border-radius: 999px; background: var(--cs-surface-muted); font-size: var(--cs-text-sm); }

/* 故事與星球鏈穿插：寬版地圖在左側黏著，故事在右側捲動；手機地圖黏在上方 */
.cs-game .sr-journey { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--cs-space-4); align-items: start; }
.cs-game .sr-journey__map { position: sticky; top: var(--cs-space-2); z-index: var(--cs-z-sticky); }
.cs-game .sr-journey__map .pc-embed { padding: 0; }
.cs-game .sr-journey__map .pc-stage { height: calc(100vh - 2 * var(--cs-space-2)); max-height: 860px; min-height: 420px; }
.cs-game .sr-interlude { margin: 0; padding: var(--cs-space-2) var(--cs-space-3); border-left: 4px solid var(--cs-primary); background: var(--cs-surface); border-radius: var(--cs-radius-control); color: var(--cs-text); }
.cs-game .sr-legend { margin: 0; }
@media (max-width: 900px) {
  .cs-game .sr-journey { grid-template-columns: minmax(0, 1fr); gap: var(--cs-space-3); }
  .cs-game .sr-journey__map { top: 0; }
  .cs-game .sr-journey__map .pc-stage { height: 40vh; min-height: 250px; border-radius: 0 0 18px 18px; }
}

/* 表格一律跟著外層文字色（沒有 doctype 的怪異模式下，表格不會繼承顏色而變成黑字） */
.cs-game table { color: inherit; font-size: inherit; }

/* 每關的學習說明：比故事卡更像講義，左側一條步驟色帶 */
.cs-game .sr-lesson { padding: var(--cs-space-4); border-radius: var(--cs-radius-control); background: var(--cs-surface-muted); color: var(--cs-text); border-left: 6px solid var(--cs-primary); }
.cs-game .sr-lesson h3 { margin: 0; font-size: var(--cs-text-md); color: var(--cs-text); }
.cs-game .sr-lesson p { margin: 0; }
.cs-game .sr-lesson__tag { font-size: var(--cs-text-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--cs-text-muted); }
.cs-game .sr-lesson__lead { font-weight: 600; }
.cs-game .sr-lesson__points { margin: 0; padding-left: 1.4em; display: grid; gap: var(--cs-space-2); }
.cs-game .sr-lesson__points p { color: var(--cs-text); }
.cs-game .sr-lesson__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--cs-space-3); }
.cs-game .sr-lesson__cols > div { background: var(--cs-surface); border-radius: var(--cs-radius-control); padding: var(--cs-space-3); display: grid; gap: var(--cs-space-1); align-content: start; }
.cs-game .sr-lesson__cols ul, .cs-game .sr-lesson__cols ol { margin: 0; padding-left: 1.3em; }