/* 碳盤查小隊（晶圓廠篇十關）：角色舞台、對話泡泡、學習說明。只用 tokens，深淺色都可讀 */
.cs-game.fp-app { min-height: 100vh; background: var(--cs-bg); color: var(--cs-text); }
.cs-game .fp-main { max-width: 860px; margin: 0 auto; padding: var(--cs-space-4) var(--cs-space-4) 96px; }
.cs-game.fp-app { overflow-x: hidden; overflow-x: clip; padding: 0; } /* clip 不會把外框變成捲動區，整頁捲動與底部固定按鈕才正常 */
.cs-game .fp-screen { gap: var(--cs-space-4); }
.cs-game .fp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--cs-space-2); }
.cs-game .fp-head > div { flex: 1; min-width: 0; }
.cs-game .fp-head > .cs-btn { flex: none; min-height: 40px; padding-inline: var(--cs-space-3); }
.cs-game .fp-head h1 { margin: 0; font-size: var(--cs-text-xl); line-height: 1.3; }
.cs-game .fp-head .cs-eyebrow { margin: 0 0 var(--cs-space-1); }
.cs-game .fp-bar { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); }
.cs-game .fp-bar > .cs-btn--block { flex: 1 1 240px; }

/* 角色舞台 */
.cs-game .fp-stage { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 96px)); justify-content: center; align-items: end; gap: var(--cs-space-2); padding: var(--cs-space-3); border-radius: var(--cs-radius-card); background: var(--cs-surface-muted); min-height: 150px; }
.cs-game .fp-actor { margin: 0; display: grid; justify-items: center; gap: 4px; min-width: 0; transition: transform 0.25s ease, opacity 0.25s ease; animation: fp-enter 0.35s ease both; }
.cs-game .fp-actor__art { position: relative; width: min(80px, 100%); aspect-ratio: 1; }
.cs-game .fp-actor img { width: 100%; height: 100%; border-radius: 20px; display: block; }
.cs-game .fp-actor figcaption { display: grid; justify-items: center; text-align: center; font-size: var(--cs-text-xs); line-height: 1.3; }
.cs-game .fp-actor figcaption span { color: var(--cs-text-muted); }
.cs-game .fp-actor.is-speaking { transform: translateY(-6px) scale(1.12); }
.cs-game .fp-actor.is-speaking img { box-shadow: 0 0 0 3px var(--cs-primary); }
.cs-game .fp-actor.is-dim img { opacity: 0.5; filter: saturate(0.6); }
.cs-game .fp-actor.is-remote img { box-shadow: 0 0 0 3px var(--cs-border); border-radius: 50%; }
.cs-game .fp-actor.is-remote.is-speaking img { box-shadow: 0 0 0 3px var(--cs-primary); }
.cs-game .fp-antenna { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); white-space: nowrap; font-size: 0.7rem; font-weight: 700; padding: 0 6px; border-radius: 999px; }
.cs-game .fp-antenna.is-ok { background: var(--cs-success-bg); color: var(--cs-text); box-shadow: 0 0 0 2px var(--cs-primary); }
.cs-game .fp-antenna.is-bad { background: var(--cs-warning-bg); color: var(--cs-text); box-shadow: 0 0 0 2px var(--cs-border); }
@keyframes fp-enter { from { opacity: 0; transform: translateY(12px); } }

/* 對話泡泡 */
.cs-game .fp-bubble { background: var(--cs-surface); border: 2px solid var(--cs-border); border-radius: var(--cs-radius-card); padding: var(--cs-space-3) var(--cs-space-4); position: relative; }
.cs-game .fp-bubble p { margin: 0; }
.cs-game .fp-bubble__who { font-weight: 700; font-size: var(--cs-text-xs); color: var(--cs-text-muted); margin-bottom: 4px !important; }
.cs-game .fp-bubble__text { font-size: var(--cs-text-md); line-height: 1.7; }
.cs-game .fp-count { margin: 0; text-align: right; }
.cs-game .fp-interlude { margin: 0; padding: var(--cs-space-2) var(--cs-space-3); border-left: 4px solid var(--cs-primary); background: var(--cs-surface-muted); border-radius: var(--cs-radius-control); }
.cs-game .fp-stage-label { margin: 0; }

/* 標題頁與結局 */
.cs-game .fp-lineup { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cs-space-2); }
.cs-game .fp-lineup img { width: 64px; height: 64px; border-radius: 16px; }
.cs-game .fp-cast__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cs-game .fp-cast__list li { display: flex; gap: var(--cs-space-2); align-items: center; }
.cs-game .fp-cast__list img { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.cs-game .fp-cast__list p { margin: 0; }
.cs-game .fp-cast h2, .cs-game .fp-methods h2 { margin: 0; font-size: var(--cs-text-lg); }
.cs-game .fp-methods ul { margin: 0; padding-left: 1.2em; }
.cs-game .fp-methods p { margin: 0; }

/* 星球鏈地圖：常駐背景，介面面板疊在上面（寬螢幕在右邊、手機在下面） */
.cs-game .fp-sky { position: fixed; inset: 0; z-index: 0; padding: 0; border-radius: 0; gap: 0; }
.cs-game .fp-sky .pc-stage { flex: 1; height: 100%; min-height: 0; border-radius: 0; }
.cs-game .fp-main { position: relative; z-index: 1; background: var(--cs-bg); color: var(--cs-text); }
@media (min-width: 900px) {
  .cs-game .fp-main { position: fixed; top: 16px; right: 16px; bottom: 16px; width: min(500px, 42vw); max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--cs-space-4) var(--cs-space-4) var(--cs-space-6, 32px); border-radius: var(--cs-radius-card); box-shadow: 0 18px 48px rgb(0 0 0 / 45%); }
  .cs-game .fp-sky .pc-hud { right: calc(min(500px, 42vw) + 32px); }
}
/* 手機：地圖固定在上方 36vh；面板接在下面，跟著整頁一起往上捲、蓋過地圖。
   用整頁捲動，不用固定位置的內嵌捲動框：手機 App（例如 Claude）內建的瀏覽器常常捲不動內嵌框，會卡在第一個畫面 */
@media (max-width: 899px) {
  .cs-game .fp-sky { bottom: auto; height: 36vh; min-height: 220px; }
  .cs-game .fp-main { position: relative; max-width: none; margin: 0; background: transparent; pointer-events: none;
    padding: calc(max(36vh, 220px) - 20px) 0 0; }
  .cs-game .fp-main > .fp-screen { pointer-events: auto; background: var(--cs-bg); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgb(0 0 0 / 35%);
    padding: var(--cs-space-4) var(--cs-space-4) calc(var(--cs-space-12) + env(safe-area-inset-bottom, 0px)); min-height: calc(100vh - max(36vh, 220px) + 20px); }
}
}
.cs-game .fp-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-2); }
.cs-game .fp-levels li { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--cs-space-2); align-items: center; background: var(--cs-surface); border-radius: var(--cs-radius-control); padding: var(--cs-space-2) var(--cs-space-3); }
.cs-game .fp-levels li > span:nth-child(2) { display: grid; }
.cs-game .fp-levels__no { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-primary); color: var(--cs-on-primary); font-weight: 700; }

/* 學習說明與結果 */
.cs-game .fp-lesson { padding: var(--cs-space-4); border-radius: var(--cs-radius-card); background: var(--cs-surface); border-left: 6px solid var(--cs-primary); }
.cs-game .fp-lesson h2 { margin: 0; font-size: var(--cs-text-lg); }
.cs-game .fp-lesson p { margin: 0; }
.cs-game .fp-lesson__tag { font-size: var(--cs-text-xs); font-weight: 700; color: var(--cs-text-muted); }
.cs-game .fp-lesson__lead { font-weight: 600; }
.cs-game .fp-lesson__points { margin: 0; padding-left: 1.4em; display: grid; gap: var(--cs-space-2); }
.cs-game .fp-lesson__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--cs-space-3); }
.cs-game .fp-lesson__cols > div { background: var(--cs-surface-muted); border-radius: var(--cs-radius-control); padding: var(--cs-space-3); }
.cs-game .fp-lesson__cols ul, .cs-game .fp-lesson__cols ol { margin: var(--cs-space-1) 0 0; padding-left: 1.3em; }
.cs-game .fp-verdict { margin: 0; display: flex; align-items: center; gap: var(--cs-space-2); font-weight: 700; font-size: var(--cs-text-md); padding: var(--cs-space-2) var(--cs-space-3); border-radius: var(--cs-radius-control); color: var(--cs-text); }
.cs-game .fp-verdict span { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; }
.cs-game .fp-verdict.is-correct { background: var(--cs-success-bg); }
.cs-game .fp-verdict.is-correct span { background: var(--cs-primary); color: var(--cs-on-primary); }
.cs-game .fp-verdict.is-incorrect { background: var(--cs-warning-bg); }
.cs-game .fp-verdict.is-incorrect span { background: var(--cs-text); color: var(--cs-bg); }
.cs-game .fp-recap { background: var(--cs-surface); border-radius: var(--cs-radius-control); padding: var(--cs-space-2) var(--cs-space-3); }
.cs-game .fp-recap summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.cs-game .fp-recap .fp-lesson__points { margin-top: var(--cs-space-2); }
.cs-game .fp-recap p { margin: 0; }
.cs-game .fp-result { display: grid; justify-items: center; gap: var(--cs-space-1); }
.cs-game .fp-result p { margin: 0; }
.cs-game .fp-reward { display: grid; gap: var(--cs-space-1); }

@media (max-width: 520px) {
  .cs-game .fp-actor figcaption { font-size: 0.72rem; }
  .cs-game .fp-stage { min-height: 120px; padding: var(--cs-space-2); }
}
@media (prefers-reduced-motion: reduce) { .cs-game .fp-actor { animation: none; transition: none; } }
/* 本關規則與過關下載 */
.cs-game .fp-rule { margin: 0; display: grid; gap: 2px; padding: var(--cs-space-2) var(--cs-space-3); border-left: 5px solid var(--cs-primary); background: var(--cs-success-bg); border-radius: var(--cs-radius-control); color: var(--cs-text); }
.cs-game .fp-rule strong { font-size: var(--cs-text-xs); }
.cs-game .fp-download { padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-card); background: var(--cs-surface); border: 2px dashed var(--cs-border); }
.cs-game .fp-download h2 { margin: 0; font-size: var(--cs-text-lg); }
.cs-game .fp-download p { margin: 0; }

/* 結局：要補強的關卡；第 9 關演習未通過 */
.cs-game .fp-weak { border-top: 1px solid var(--cs-border); padding-top: var(--cs-space-3); }
.cs-game .fp-weak h3 { margin: 0; font-size: var(--cs-text-md, 1rem); }
.cs-game .fp-weak__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-2); }
.cs-game .fp-weak__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-2); flex-wrap: wrap; }
.cs-game .fp-result--fail { border: 2px solid var(--cs-border); }
.cs-game .fp-fail { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--cs-text); }

/* 手機：主要按鈕列固定在面板底部；頭像列縮小，騰出空間給題目 */
@media (max-width: 899px) {
  .cs-game .fp-bar--main { position: sticky; bottom: 0; z-index: 3; margin: 0 calc(var(--cs-space-4) * -1); padding: var(--cs-space-2) var(--cs-space-4) calc(var(--cs-space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--cs-bg); box-shadow: 0 -8px 16px -8px rgb(0 0 0 / 25%); }
  .cs-game .fp-main > .fp-screen { padding-bottom: var(--cs-space-4); }
}
@media (max-width: 520px) {
  .cs-game .fp-stage { grid-template-columns: repeat(var(--n, 3), minmax(0, 68px)); min-height: 96px; }
  .cs-game .fp-actor.is-speaking { transform: translateY(-3px) scale(1.06); }
}

/* 結局預覽列 */
.cs-game .fp-preview { background: var(--cs-surface-muted); border-radius: var(--cs-radius-control); padding: var(--cs-space-2) var(--cs-space-3); }
.cs-game .fp-preview p { margin: 0; }
.cs-game .fp-preview__btns { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); }

/* 玩完後的選關 */
.cs-game .fp-chapters { background: var(--cs-surface); border-radius: var(--cs-radius-card); padding: var(--cs-space-3) var(--cs-space-4); }
.cs-game .fp-chapters h2, .cs-game .fp-chapters p { margin: 0; }
.cs-game .fp-chapters__ends { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); }
.cs-game .fp-chapters__group h3 { margin: var(--cs-space-2) 0 var(--cs-space-1); font-size: var(--cs-text-md); display: flex; align-items: center; gap: var(--cs-space-2); }
.cs-game .fp-chapters__iso { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--cs-primary); color: var(--cs-on-primary); font-size: 0.95rem; }
.cs-game .fp-chapters__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-space-2); }
.cs-game .fp-chapters__btn { width: 100%; min-height: var(--cs-hit, 44px); display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--cs-space-2); text-align: left;
  padding: var(--cs-space-2) var(--cs-space-3); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-control); background: var(--cs-bg); color: var(--cs-text); font: inherit; cursor: pointer; }
.cs-game .fp-chapters__btn:hover { border-color: var(--cs-primary); }
.cs-game .fp-chapters__btn:focus-visible { outline: var(--cs-focus-width, 3px) solid var(--cs-focus, var(--cs-primary)); outline-offset: 2px; }
.cs-game .fp-chapters__no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-surface-muted); font-weight: 700; }
.cs-game .fp-chapters__name { display: grid; min-width: 0; } .cs-game .fp-chapters__name small { color: var(--cs-text-muted); }
.cs-game .fp-chapters__stars { color: var(--cs-primary); letter-spacing: 1px; white-space: nowrap; }