/*
 * 各遊戲共用的版面：遊戲內頂欄（chrome.mjs 的 gameBar()）、單欄 720px、隱藏網站導覽列。
 * 遊戲頁在 <body> 掛 class="woohop-game"，並用 data-game-mode 切換：
 *   browse  設定畫面、玩法頁：頂欄有「玩法」「設定」分頁與選單鍵，遊戲名靠左、可以點
 *   play    遊戲進行中、結算：只剩返回＋置中的遊戲名，不能點出去（誤點這一輪就沒了），頁尾也藏起來
 */

/* 遊戲頁不用網站導覽列，頂欄換成遊戲內頂欄 */
.woohop-game #site-nav { display: none; }
/* site.css 給每個 <section> 上下留白（首頁的大區塊），遊戲裡的區塊是卡片，不要。用 :where 壓低特異性，卡片自己的 padding 才蓋得過 */
:where(.woohop-game main) section { padding: 0; }
/* 拿在手上玩的東西：電腦上也是一欄、最寬 720px 置中，頂欄跟著同寬 */
.woohop-game .game-main, .woohop-game .game-bar-host { max-width: 720px; margin-left: auto; margin-right: auto; }
.woohop-game .game-main { padding-bottom: 40px; }
.woohop-game[data-game-mode="play"] .site-footer { display: none; }

/* ---------- 遊戲內頂欄：跟網站導覽列同一個位置、同一套外框（2px＋4px 底） ---------- */
.game-bar-host { position: sticky; top: 10px; z-index: 30; margin-top: 10px; }
.game-bar { container-type: inline-size; height: 64px; padding: 0 8px; background: var(--glass); backdrop-filter: blur(12px); border: 2px solid var(--edge-n); border-radius: var(--r-lg); box-shadow: var(--raise-n); }
.game-bar .btn-icon { --h: 44px; flex: none; }

/* 遊戲名：回遊戲主頁的連結，平常看起來就是標題；放不下時截成「⋯」，分頁不讓 */
.game-bar .title { flex: 0 1 auto; min-width: 0; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 900; text-align: left; color: var(--ink); text-decoration: none; border-radius: var(--r-sm); }
.game-bar .title:hover { color: var(--accent-text); }
.game-bar .title:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* 分頁（玩法、設定）：跟網站導覽列的連結同一種樣子；目前所在的分頁只換字色 */
.game-tabs { flex: none; margin-left: auto; display: flex; gap: 4px; }
.game-tabs a, .game-tabs button {
  height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--ink);
  font: inherit; font-weight: 800; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.game-tabs a:hover, .game-tabs button:hover { background: var(--hover); }
.game-tabs a[aria-current="page"], .sheet-list a[aria-current="page"] { color: var(--accent-text); }
.game-tabs .tab-count { font-size: 12px; font-weight: 800; padding: 0 8px; border-radius: var(--r-pill); background: var(--coral-face); color: var(--coral-text); }
.game-tabs .tab-count:empty { display: none; }

/* 選單鍵 */
.game-menu { flex: none; }
.game-menu > .btn { padding: 0; width: 44px; height: 44px; margin: 0; }
.game-menu > .btn svg { width: 22px; height: 22px; transform: none !important; }
.game-bar-spacer { width: 44px; flex: none; display: none; }

/* 窄的頂欄：字與左右留白縮小 */
@container (max-width: 560px) {
  .game-bar { gap: 2px; }
  .game-tabs { gap: 0; }
  .game-tabs a, .game-tabs button { padding: 0 9px; font-size: 14px; }
  .game-bar .title { font-size: 16px; }
}
/* 還是放不下（德文這類長字）時，game.js 分兩段換成圖示：is-compact 先換「設定」→齒輪、is-tight 再換「玩法」→書本 */
.game-tabs .tab-icon { display: none; width: 22px; height: 22px; }
.game-bar.is-compact #game-settings .tab-icon, .game-bar.is-tight .tab-rules .tab-icon { display: block; }
.game-bar.is-compact #game-settings .tab-text, .game-bar.is-tight .tab-rules .tab-text { display: none; }
.game-bar.is-compact #game-settings, .game-bar.is-tight .tab-rules { padding: 0 10px; }
/* 手機（頂欄窄到 560 以下）一律用圖示，不管遊戲名有沒有被截，各遊戲看起來才一致 */
@container (max-width: 560px) {
  .game-tabs .tab-icon { display: block; }
  .game-tabs .tab-text { display: none; }
  .game-tabs .tab-rules, .game-tabs #game-settings { padding: 0 10px; }
}

/* 玩的時候：只剩返回＋置中的遊戲名（右邊補一個等寬的空位讓名字真的置中），不能點出去 */
[data-game-mode="play"] .game-tabs, [data-game-mode="play"] .game-menu { display: none; }
[data-game-mode="play"] .game-bar-spacer { display: block; }
/* 玩的時候還要能開設定（例如房間大廳裡的主持人）：遊戲在 <body> 掛 data-game-settings，
   分頁只留「設定」、而且只剩齒輪圖示 */
[data-game-mode="play"][data-game-settings] .game-tabs { display: flex; }
[data-game-mode="play"][data-game-settings] .tab-rules { display: none; }
[data-game-mode="play"][data-game-settings] #game-settings { padding: 0 10px; }
[data-game-mode="play"][data-game-settings] #game-settings .tab-icon { display: block; }
[data-game-mode="play"][data-game-settings] #game-settings .tab-text { display: none; }
/* 身分標籤（例如「主持人」）：只在玩的時候、有字的時候出現，佔掉右邊那個空位 */
.game-bar-badge { display: none; flex: none; margin-right: 6px; }
[data-game-mode="play"] .game-bar-badge:not(:empty) { display: inline-flex; }
[data-game-mode="play"] .game-bar-badge:not(:empty) ~ .game-bar-spacer { display: none; }
/* 音樂開關（chrome.mjs gameBar 的 musicLabel）：玩的時候也在，剛好佔掉右邊那格平衡用的空白 */
.game-music svg { width: 22px; height: 22px; }
.game-music .music-off { display: none; }
.game-music[aria-pressed="false"] { color: var(--muted); }
.game-music[aria-pressed="false"] .music-off { display: inline; }
[data-game-mode="play"] .game-bar.has-music .game-bar-spacer { display: none; }
[data-game-mode="play"] .game-bar .title { flex: 1; text-align: center; padding-left: 0; pointer-events: none; }

/* ============================================================
   遊戲頁共用元件（定時炸彈、喜好二選一⋯）。每個遊戲在 body 上設自己的代表色：
     --game-edge  計數、玩法頁小標的字色（定時炸彈是珊瑚、二選一是粉紫）
   ============================================================ */
.woohop-game { --game-edge: var(--blue-edge); }
.woohop-game .view { display: flex; flex-direction: column; gap: 16px; }
.woohop-game .view[hidden] { display: none; }

/* 頁首：麵包屑＋標題＋一句說明 */
.game-main .page-head { padding: 28px 0 4px; }
.game-main .page-head h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.25; text-wrap: balance; margin: 8px 0; }
.game-main .page-head p { max-width: 40em; }
.game-main .page-head .crumbs { margin-bottom: 4px; }
/* 主標題拆成「遊戲名」＋「一句話」兩行（build 的 heroTitleHtml），冒號留在 HTML 給爬蟲、畫面上藏起來 */
.game-main .page-head h1 > span { display: block; }
.h1-name { font-size: 1.15em; }
.h1-line { color: var(--accent-text); font-size: .78em; margin-top: 2px; }
.sr-colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.game-main h1:lang(ja) { word-break: auto-phrase; }

/* 白色卡片：Woohop 的浮起元件（2px 灰框＋4px 底部厚度） */
.panel { background: var(--surface); border: 2px solid var(--edge-n); box-shadow: var(--raise-n); border-radius: var(--r-lg); padding: 22px 24px 24px; margin-bottom: 4px; }
@media (min-width: 760px) { .panel { padding: 28px 32px 32px; } }
.panel h2 { margin: 0; font-size: 19px; font-weight: 900; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.counter { font-size: 14px; font-weight: 800; color: var(--game-edge); font-variant-numeric: tabular-nums; }

.woohop-game .hint { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.form-error { margin: 0; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid var(--coral-edge); background: var(--coral-face); color: var(--coral-text); font-weight: 700; }
/* 卡片裡的錯誤提示通常接在按鈕下面：按鈕有 4px 的底部厚度，再留一段距離才不會黏在一起 */
.panel .form-error { margin-top: 14px; }
.field-label { display: block; margin: 14px 0 8px; font-size: 14px; font-weight: 800; }
.field-label-gap { margin-top: 18px; }
.rules-link { margin: 4px 0 0; text-align: center; }
dialog.modal h2 { margin: 0 0 4px; font-size: 20px; }
dialog.modal .m-one { grid-template-columns: 1fr; }

/* 一排單選：長得跟 Woohop 的分段控制一樣（灰底軌道，選中的那格白色浮起來）。
   底層還是 <input type="radio">，鍵盤方向鍵與螢幕閱讀器都照舊，只是把圓點藏起來 */
.seg { display: grid; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--track); }
.seg-3 { grid-template-columns: repeat(3, 1fr); }
.seg-4 { grid-template-columns: repeat(4, 1fr); }
.seg-5 { grid-template-columns: repeat(5, 1fr); }
.seg-item {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 4px; border-radius: calc(var(--r-md) - 4px);
  font-size: 14px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: pointer; transition: background .12s, color .12s;
}
.seg-item input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-item:hover { color: var(--ink); }
.seg-item:has(input:checked) { background: var(--surface); color: var(--ink); font-weight: 800; box-shadow: 0 2px 0 var(--edge-mid); }
/* 深色：選中的那格用亮一階的灰浮起來，跟軌道、卡片分得出來 */
:root[data-theme="dark"] .seg-item:has(input:checked) { background: #3a3a48; color: #fff; box-shadow: 0 2px 0 #14141a; }
.seg-item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg-item:has(input:disabled) { color: var(--text-dim); cursor: not-allowed; }

/* ---------- 玩法頁（刻意精簡：一眼資訊、幾步怎麼玩、主持人怎麼帶） ---------- */
.game-rules { display: flex; flex-direction: column; gap: 20px; }
.prose h2 { margin-bottom: 10px; }
.prose ol, .prose ul { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.prose li { line-height: 1.8; }
.prose p { margin: 0 0 12px; color: var(--text-body); line-height: 1.85; }
.prose p:last-child { margin-bottom: 0; }
.rules-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rules-facts li { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--edge-n); }
.rules-facts span { font-size: 13px; font-weight: 800; color: var(--game-edge); letter-spacing: .04em; }
.rules-facts b { font-size: 16px; line-height: 1.45; }
/* 依人數的建議表（定時炸彈的引爆時間）：橫跨整列 */
.rules-facts .rules-time { grid-column: 1 / -1; gap: 6px; }
.rules-time table { border-collapse: collapse; width: 100%; max-width: 420px; }
.rules-time th, .rules-time td { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 16px; text-align: left; white-space: normal; }
.rules-time tr:last-child th, .rules-time tr:last-child td { border-bottom: 0; }
.rules-time th { font-weight: 700; color: var(--muted); width: 45%; }
.rules-time td { font-weight: 900; }
.rules-time small { font-size: 14px; color: var(--muted); }
/* 主持人怎麼帶：開場一句是「照著念」卡片（woohop.css 的 .prompt-card），底下是小提醒 */
.rules-lead .prompt-card { margin: 18px 0; max-width: none; font-size: 18px; }
.rules-back { margin: 8px 0 0; text-align: center; }