/* 四個核心畫面的配置（規格第 04、10 節）。用 container query，畫面放在窄容器裡時也會用手機版排版 */
.cs-game .cs-screen { container: cs-screen / inline-size; display: flex; flex-direction: column; gap: var(--cs-space-6); min-width: 0; }

/* S01 小隊報到：手機依標題、簡介、角色、按鈕排列；寬版左主視覺、右選角 */
.cs-game .cs-s01 { display: grid; gap: var(--cs-space-6); }
.cs-game .cs-s01__hero { border-radius: var(--cs-radius-panel); overflow: hidden; aspect-ratio: 3 / 2; max-width: 100%; }
.cs-game .cs-s01__intro { max-width: 36em; }
.cs-game .cs-s01__actions { display: flex; flex-direction: column; gap: var(--cs-space-3); }
@container cs-screen (min-width: 960px) {
  .cs-game .cs-s01 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* S02 小鎮地圖：手機先「繼續第幾章」、章節清單，再展開地圖；寬版地圖為主、摘要側欄 */
.cs-game .cs-s02 { display: grid; gap: var(--cs-space-6); }
.cs-game .cs-s02__list { display: flex; flex-direction: column; gap: var(--cs-space-3); list-style: none; margin: 0; padding: 0; }
.cs-game .cs-s02__map summary { min-height: var(--cs-hit); display: flex; align-items: center; gap: var(--cs-space-2); font-weight: 700; cursor: pointer; color: var(--cs-primary); }
@container cs-screen (min-width: 960px) {
  .cs-game .cs-s02 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .cs-game .cs-s02__map { grid-column: 1; grid-row: 1 / span 2; }
}

/* S03 任務答題：內容最大 760px；插畫不超過內容區 30%；底部列不遮住最後一個選項 */
.cs-game .cs-s03 { max-width: var(--cs-width-task); margin-inline: auto; width: 100%; display: flex; flex-direction: column; gap: var(--cs-space-4); }
.cs-game .cs-s03__scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cs-space-4); align-items: start; }
.cs-game .cs-s03__guide { display: flex; gap: var(--cs-space-3); align-items: center; }
.cs-game .cs-s03__guide-art { width: 64px; height: 64px; flex: none; }
.cs-game .cs-s03__bar { position: sticky; bottom: 0; z-index: var(--cs-z-sticky); padding: var(--cs-space-3) 0 calc(var(--cs-space-3) + env(safe-area-inset-bottom, 0px)); background: var(--cs-bg); border-top: var(--cs-border-width) solid var(--cs-divider); }
@container cs-screen (min-width: 600px) {
  .cs-game .cs-s03__scene { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .cs-game .cs-s03__guide { flex-direction: column; text-align: center; }
  .cs-game .cs-s03__guide-art { width: 100%; height: auto; aspect-ratio: 1; max-width: 160px; }
}

/* S04 結果與回顧 */
.cs-game .cs-s04 { max-width: var(--cs-width-task); margin-inline: auto; width: 100%; display: flex; flex-direction: column; gap: var(--cs-space-6); }
.cs-game .cs-s04__summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--cs-space-4); align-items: center; }
.cs-game .cs-s04__badge { width: 96px; height: 96px; }
.cs-game .cs-s04__review { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cs-space-2); }
.cs-game .cs-s04__review li { display: flex; gap: var(--cs-space-3); align-items: flex-start; padding: var(--cs-space-3); border-radius: var(--cs-radius-control); background: var(--cs-surface-muted); }
.cs-game .cs-s04__review .is-right { color: var(--cs-success); }
.cs-game .cs-s04__review .is-wrong { color: var(--cs-error); }
.cs-game .cs-s04__actions { display: flex; flex-direction: column; gap: var(--cs-space-3); }
@container cs-screen (min-width: 600px) { .cs-game .cs-s04__actions { flex-direction: row; flex-wrap: wrap; } }

/* ---------- M3：正式遊戲畫面 ---------- */
.cs-game.cs-app { min-height: 100vh; }
.cs-game .cs-app__main { max-width: var(--cs-width-page); margin-inline: auto; }
.cs-game .cs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-3); }
.cs-game .cs-head__tools { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); align-items: center; }

/* S01 主視覺 fallback：正式主視覺核准前，用小隊成員排成一列 */
.cs-game .cs-hero-fallback { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-space-3); padding: var(--cs-space-6); border-radius: var(--cs-radius-panel); background: var(--cs-surface-muted); }
.cs-game .cs-hero-fallback > * { aspect-ratio: 1; }

/* 開場對話 */
.cs-game .cs-talk { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--cs-space-3); align-items: start; }
.cs-game .cs-talk__art { width: 64px; height: 64px; }
.cs-game .cs-talk__bubble { position: relative; padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-card); border: var(--cs-border-width) solid var(--cs-border); background: var(--cs-surface); }
.cs-game .cs-talk__name { display: block; font-weight: 700; color: var(--cs-primary); font-size: var(--cs-text-xs); }
.cs-game .cs-formula { padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-control); border: var(--cs-border-selected) dashed var(--cs-border); background: var(--cs-surface-muted); font-family: var(--cs-font-display); font-size: var(--cs-text-md); text-align: center; }

/* 實戰關：階段、單據、清冊、長條圖 */
.cs-game .cs-stage { display: flex; gap: var(--cs-space-3); align-items: center; padding: var(--cs-space-2) var(--cs-space-3); border-radius: var(--cs-radius-control); background: var(--cs-surface-muted); }
.cs-game .cs-stage__art { width: 44px; height: 44px; flex: none; }
.cs-game .cs-doc { max-width: 26rem; padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-control); border: var(--cs-border-width) solid var(--cs-border); border-top: 6px solid var(--cs-primary); background: var(--cs-surface); font-variant-numeric: tabular-nums; }
.cs-game .cs-doc__title { font-weight: 700; padding-bottom: var(--cs-space-2); border-bottom: var(--cs-border-width) dashed var(--cs-divider); margin-bottom: var(--cs-space-1); }
.cs-game .cs-doc dl { margin: 0; }
.cs-game .cs-doc__row { display: flex; justify-content: space-between; gap: var(--cs-space-3); padding: 2px 0; }
.cs-game .cs-doc dt { color: var(--cs-text-muted); }
.cs-game .cs-doc dd { margin: 0; font-weight: 600; text-align: right; }
.cs-game .cs-tablebox { overflow-x: auto; max-width: 100%; }
.cs-game .cs-table { border-collapse: collapse; width: 100%; font-size: var(--cs-text-xs); font-variant-numeric: tabular-nums; }
.cs-game .cs-table caption { text-align: left; font-weight: 700; padding-bottom: var(--cs-space-2); }
.cs-game .cs-table th, .cs-game .cs-table td { padding: var(--cs-space-2); border-bottom: var(--cs-border-width) solid var(--cs-divider); text-align: left; white-space: nowrap; vertical-align: middle; }
.cs-game .cs-table th { color: var(--cs-text-muted); font-weight: 600; }
.cs-game .cs-table .is-num { text-align: right; }
.cs-game .cs-table tfoot td { font-weight: 700; border-bottom: 0; }
.cs-game .cs-chart { display: flex; flex-direction: column; gap: var(--cs-space-2); }
.cs-game .cs-chart__row { display: grid; grid-template-columns: minmax(6em, 8em) minmax(0, 1fr) auto; gap: var(--cs-space-3); align-items: center; font-size: var(--cs-text-xs); }
.cs-game .cs-chart__bar { height: 14px; border-radius: var(--cs-radius-pill); background: var(--cs-surface-muted); overflow: hidden; }
.cs-game .cs-chart__bar i { display: block; height: 100%; border-radius: var(--cs-radius-pill); }
.cs-game .cs-chart__bar .is-1 { background: var(--cs-scope1); }
.cs-game .cs-chart__bar .is-2 { background: var(--cs-scope2); }
.cs-game .cs-chart__bar .is-3 { background: var(--cs-scope3); }
.cs-game .cs-chart__value { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
@container cs-screen (max-width: 420px) {
  .cs-game .cs-chart__row { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-game .cs-chart__bar { grid-column: 1 / -1; grid-row: 2; }
}

/* 數據檢查表：每列一個核取方塊，結果以文字＋圖示表示 */
.cs-game .cs-audit td:first-child { width: 1%; }
.cs-game .cs-audit label { display: inline-flex; align-items: center; justify-content: center; min-width: var(--cs-hit); min-height: var(--cs-hit); cursor: pointer; }
.cs-game .cs-audit input { width: 22px; height: 22px; accent-color: var(--cs-primary); }
.cs-game .cs-audit label:has(input:focus-visible) { outline: var(--cs-focus-width) solid var(--cs-focus); outline-offset: calc(var(--cs-focus-offset) * -1); border-radius: var(--cs-radius-control); }
.cs-game .cs-audit tr.is-flagged { background: var(--cs-warning-bg); }
.cs-game .cs-audit .is-hit { color: var(--cs-success); font-weight: 700; }
.cs-game .cs-audit .is-miss { color: var(--cs-error); font-weight: 700; }

/* 排序題：點選替代拖曳 */
.cs-game .cs-steps-done { margin: 0; padding-left: var(--cs-space-6); display: flex; flex-direction: column; gap: var(--cs-space-2); }
.cs-game .cs-steps-done li { padding: var(--cs-space-2) var(--cs-space-3); border-radius: var(--cs-radius-control); background: var(--cs-success-bg); }
.cs-game .cs-step-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: var(--cs-space-3); }
.cs-game .cs-step-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--cs-hit); padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-control); border: var(--cs-border-width) solid var(--cs-border); background: var(--cs-surface); text-align: left; cursor: pointer; }
.cs-game .cs-step-btn:hover { background: var(--cs-surface-muted); }
.cs-game .cs-step-btn small { color: var(--cs-text-muted); font-size: var(--cs-text-xs); }
.cs-game .cs-step-btn.is-wrong { border: var(--cs-border-selected) solid var(--cs-error); background: var(--cs-error-bg); padding: calc(var(--cs-space-3) - 1px) calc(var(--cs-space-4) - 1px); }

/* 結果頁：建築綠化 */
.cs-game .cs-reveal { width: min(220px, 60%); margin-inline: auto; }
.cs-game .cs-reveal svg { width: 100%; height: auto; }
.cs-game .cs-concept { border: var(--cs-border-selected) solid var(--cs-primary); }
.cs-game .cs-s03 .cs-s03__bar { margin-top: var(--cs-space-2); }

/* 舊版 SVG 插畫的局部上色（原本由 legacy.css 提供） */
.cs-game .smoke { fill: var(--cs-border); }
.cs-game .win { fill: var(--cs-surface); }
.cs-game .cs-node { white-space: nowrap; }
.cs-game .cs-chapter-card__title { text-wrap: pretty; }

/* ---------- 題組學習短片 ---------- */
.cs-game .cs-lesson__stage { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--cs-radius-card); overflow: hidden; background: var(--cs-surface-muted); border: var(--cs-border-width) solid var(--cs-divider); }
.cs-game .cs-lesson__scene { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; padding: var(--cs-space-4) var(--cs-space-6); gap: var(--cs-space-4); }
.cs-game .cs-lesson__building { align-self: end; width: min(100%, 220px); justify-self: start; }
.cs-game .cs-lesson__building svg { width: 100%; height: auto; }
.cs-game .cs-lesson__char { width: min(45%, 150px); justify-self: end; align-self: end; aspect-ratio: 1; }
.cs-game .cs-lesson__chips { position: absolute; top: var(--cs-space-4); left: var(--cs-space-4); right: var(--cs-space-4); display: flex; flex-wrap: wrap; gap: var(--cs-space-2); justify-content: center; }
.cs-game .cs-lesson__chip { padding: var(--cs-space-1) var(--cs-space-3); border-radius: var(--cs-radius-pill); background: var(--cs-surface); border: var(--cs-border-selected) solid var(--cs-primary); color: var(--cs-primary); font-family: var(--cs-font-display); font-size: var(--cs-text-md); box-shadow: var(--cs-shadow-card); }
.cs-game .cs-lesson__headline { font-family: var(--cs-font-display); font-size: clamp(1.25rem, 4vw, 2rem); color: var(--cs-primary); text-align: center; text-wrap: balance; }
.cs-game .cs-lesson__scene.is-enter .cs-lesson__headline { animation: cs-rise var(--cs-duration-celebrate) var(--cs-ease) both; }
.cs-game .cs-lesson__chips { top: 18%; }
.cs-game .cs-lesson__caption { margin: 0; padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-control); background: var(--cs-text); color: var(--cs-surface); font-size: var(--cs-text-md); line-height: 1.6; min-height: calc(2 * 1.6em + 2 * var(--cs-space-3)); }
.cs-game .cs-lesson__speaker { display: block; font-size: var(--cs-text-xs); font-weight: 700; }
.cs-game .cs-lesson__progress { appearance: none; width: 100%; height: 8px; border: 0; border-radius: var(--cs-radius-pill); background: var(--cs-surface-muted); overflow: hidden; }
.cs-game .cs-lesson__progress::-webkit-progress-bar { background: var(--cs-surface-muted); }
.cs-game .cs-lesson__progress::-webkit-progress-value { background: var(--cs-primary); }
.cs-game .cs-lesson__progress::-moz-progress-bar { background: var(--cs-primary); }
.cs-game .cs-lesson__controls { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); align-items: center; }
.cs-game .cs-lesson__controls > :last-child { margin-left: auto; }
.cs-game .cs-lesson__takeaway { padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-control); background: var(--cs-success-bg); }
.cs-game .cs-lesson__video { width: 100%; border-radius: var(--cs-radius-card); background: var(--cs-text); }
.cs-game .cs-lesson__scene.is-enter .cs-lesson__char { animation: cs-lesson-bob var(--cs-duration-celebrate) var(--cs-ease) both; }
.cs-game .cs-lesson__scene.is-enter .cs-lesson__building { animation: cs-lesson-zoom 4s ease-out both; }
.cs-game .cs-lesson__scene.is-enter .cs-lesson__chip { animation: cs-pop var(--cs-duration-celebrate) var(--cs-ease) both; }
@keyframes cs-lesson-bob { 0% { transform: translateY(16px); opacity: 0; } 60% { transform: translateY(-6px); opacity: 1; } 100% { transform: none; } }
@keyframes cs-lesson-zoom { from { transform: scale(0.94); } to { transform: scale(1.02); } }
@container cs-screen (max-width: 420px) {
  .cs-game .cs-lesson__scene { padding: var(--cs-space-3); }
  .cs-game .cs-lesson__chip { font-size: var(--cs-text-xs); }
  .cs-game .cs-lesson__controls > :last-child { margin-left: 0; width: 100%; }
}

/* S02 3D 群島：滿版場景，站點按鈕浮在島上，任務卡固定在下方；手機改直式比例 */
.cs-game .cs-island { aspect-ratio: 16 / 10; max-height: 78vh; border: 0; border-radius: var(--cs-radius-panel); background: linear-gradient(var(--cs-sky-top), var(--cs-sky-low) 70%); box-shadow: var(--cs-shadow-card); }
.cs-game .cs-island__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.cs-game .cs-island__canvas:active { cursor: grabbing; }
.cs-game .cs-island__pins { position: absolute; inset: 0; pointer-events: none; }
.cs-game .cs-island .cs-node { pointer-events: auto; transform: translate(-50%, -100%); white-space: nowrap; }
.cs-game .cs-island .cs-node.is-selected { box-shadow: 0 0 0 4px var(--cs-accent), var(--cs-shadow-card); }
.cs-game .cs-island .cs-node.is-offscreen { opacity: 0; pointer-events: none; }
.cs-game .cs-island .cs-node.is-offscreen:focus-visible { opacity: 1; }
.cs-game .cs-island__sheet { position: absolute; left: var(--cs-space-3); right: var(--cs-space-3); bottom: var(--cs-space-3); display: flex; align-items: center; gap: var(--cs-space-3); padding: var(--cs-space-3); border-radius: var(--cs-radius-card); background: var(--cs-surface); color: var(--cs-text); box-shadow: var(--cs-shadow-card); }
.cs-game .cs-island__num { width: 48px; height: 48px; flex: none; border-radius: var(--cs-radius-control); display: grid; place-items: center; background: var(--cs-success-bg); color: var(--cs-success); font-weight: 700; font-size: var(--cs-text-lg); }
.cs-game .cs-island__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-game .cs-island__title { font-family: var(--cs-font-display); font-weight: 400; font-size: var(--cs-text-md); line-height: 1.3; }
.cs-game .cs-island__action { flex: none; }
@container cs-screen (max-width: 639px) {
  .cs-game .cs-island { aspect-ratio: 4 / 5; max-height: none; }
  .cs-game .cs-island .cs-node > span[aria-hidden="true"]:not(.cs-node__num) { display: none; }
  .cs-game .cs-island .cs-node { padding: var(--cs-space-1); }
  .cs-game .cs-island__num { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cs-game .cs-island__canvas { cursor: default; } }

/* 學習卡（進站前先讀、知識庫重讀） */
.cs-game .cs-study { background: var(--cs-surface); color: var(--cs-text); border: var(--cs-border-selected) solid var(--cs-primary); border-radius: var(--cs-radius-card, var(--cs-radius-control)); padding: var(--cs-space-3) var(--cs-space-4); }
.cs-game .cs-study.is-locked { border-style: dashed; border-color: var(--cs-text-muted); background: var(--cs-surface-muted); }
.cs-game .cs-study__summary { display: flex; gap: var(--cs-space-2); align-items: center; cursor: pointer; margin: 0; min-height: 44px; }
.cs-game .cs-study.is-locked .cs-study__summary { cursor: default; color: var(--cs-text-muted); }
.cs-game .cs-study__summary > span { display: grid; }
.cs-game .cs-study__eyebrow { font-size: var(--cs-text-xs); color: var(--cs-text-muted); font-weight: 600; }
.cs-game .cs-study__title { font-weight: 700; font-size: var(--cs-text-md); }
.cs-game .cs-study__body { margin-top: var(--cs-space-3); }
.cs-game .cs-study__body p { margin: 0; }
.cs-game .cs-study__lead { font-weight: 600; }
.cs-game .cs-study__points { margin: 0; padding-left: 1.4em; display: grid; gap: var(--cs-space-2); }
.cs-game .cs-study__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--cs-space-3); }
.cs-game .cs-study__box { background: var(--cs-surface-muted); border-radius: var(--cs-radius-control); padding: var(--cs-space-3); display: grid; gap: var(--cs-space-1); align-content: start; }
.cs-game .cs-study__box ul, .cs-game .cs-study__box ol { margin: 0; padding-left: 1.3em; }
.cs-game .cs-study__h { font-weight: 700; }
.cs-game .cs-library { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-3); }
.cs-game .cs-study__points li.is-highlight { background: var(--cs-success-bg); border-radius: var(--cs-radius-control); padding: var(--cs-space-2); margin-left: calc(-1 * var(--cs-space-2)); }
.cs-game .cs-study__tpl { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); align-items: center; justify-content: space-between; border-top: 1px solid var(--cs-border); padding-top: var(--cs-space-3); }
.cs-game .cs-study__tpl p { flex: 1 1 240px; }
.cs-game .cs-study-link { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); align-items: center; justify-content: space-between; padding: var(--cs-space-2) var(--cs-space-3); border-radius: var(--cs-radius-control); background: var(--cs-surface-muted); color: var(--cs-text); }
.cs-game .cs-study-link p { margin: 0; flex: 1 1 220px; }
.cs-game .cs-glossary { margin: 0; display: grid; gap: var(--cs-space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cs-game .cs-glossary__item { background: var(--cs-surface-muted); border-radius: var(--cs-radius-control); padding: var(--cs-space-3); }
.cs-game .cs-glossary dd { margin: var(--cs-space-1) 0 0; display: grid; gap: var(--cs-space-1); }
.cs-game .cs-glossary dd p { margin: 0; }