/*
 * 比手畫腳自己的樣式。步驟頭、規則卡、抽卡（.namer）、分段控制、勾選卡、進度條、按鈕都在全站共用的 woohop.css＋game.css，
 * 這裡只排這個遊戲的版面。跟首頁 site.css 在同一頁，class 避開首頁用過的名字（.hero、.stage、.card⋯）。
 */

/* 這個遊戲的代表色：藍 */
.charades-app { --game-edge: var(--blue-edge); }
.charades-app .panel { padding: 20px; }

/* 「開始遊戲」「下一步」黏在畫面底部（祖先不能有 overflow: hidden） */
.btn-start { position: sticky; bottom: 16px; z-index: 2; margin-top: 4px; }
.btn-start.btn-solid:not(:active) { box-shadow: 0 5px 0 var(--edge), 0 10px 28px #252c4b33; }

/* ---------- 開場：題目類型（可複選的勾選卡）、每題時間 ---------- */
.setup-panel .field-label:first-child { margin-top: 0; }
.setup-panel .hint { margin: 2px 0 10px; }
/* 人數和每人幾題並排（照倒放猜猜看的 .setup-row）；電腦版每人幾題自己一行 */
.setup-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.setup-row .field-label { margin-top: 0; }
.per-field { flex: 1 1 140px; }
@media (min-width: 600px) {
  .setup-row { gap: 18px 12px; }
  .per-field { flex-basis: 100%; }
}
.setup-row .stepper button { width: 44px; height: 48px; }
.setup-row .stepper button:disabled { opacity: .4; cursor: default; }
.setup-row .stepper output { min-width: 48px; }
.per-field .seg-item { padding: 0 2px; }
#rounds-hint { margin: 10px 0 0; }
.setup-panel .field-label-gap { margin-top: 20px; }
/* 九類：共用 .choice 的最小高度 136px 排起來太長，改成三欄的小卡（例子只留一行，太長就省略） */
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.category-choice { min-height: 0; padding: 12px 6px 10px; gap: 2px; }
.category-choice .choice-name { font-size: 16px; }
.category-choice .choice-sub { max-width: 100%; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-choice::after { width: 20px; height: 20px; top: -7px; right: -7px; background-size: 12px; }

/* ---------- 上台：只露這一段的區塊（app.js 的 setPhase） ---------- */
#view-play:not([data-phase="draw"]) .phase-draw,
#view-play:not([data-phase="ready"]) .phase-ready,
#view-play:not([data-phase="acting"]) .phase-acting { display: none; }

/* 第幾題・輪到第幾個人＋進度條（照倒放猜猜看的 .round-progress） */
.round-progress { display: grid; gap: 8px; margin-top: 20px; }
.round-no { margin: 0; font-size: 14px; font-weight: 800; color: var(--muted); }
.round-progress .progress { max-width: none; }
.round-progress .progress[hidden] { display: none; }

/*
 * 題卡：照抽卡取名（.namer 的樣式在 game.css）。抽卡取名只有 choose／own／reveal 三面，
 * 這裡多了 draw（同 choose）與 result（猜中／時間到），自己開。
 */
.charades-app .namer .name-card[data-stage="draw"] .stage-draw,
.charades-app .namer .name-card[data-stage="result"] .stage-result { display: grid; }
.charades-app .namer .stage-draw .hint { margin: 0; }
/* 翻出來的卡換成這個遊戲的藍色；題目是詞組，拿掉 keep-all 才會平均斷行 */
.charades-app .namer .drawn-card { display: grid; justify-items: center; gap: 10px; border-color: var(--blue-edge); background: var(--blue-face); box-shadow: 0 5px 0 var(--blue-edge); }
.charades-app .namer .drawn-name { color: var(--blue-text); word-break: normal; text-wrap: balance; }
/* 英德法西的題目常是一整句（Kein warmes Wasser unter der Dusche），字縮小一點才不會排到五行；中日韓維持大字 */
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .charades-app .namer .drawn-name,
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .charades-app .result-answer { font-size: clamp(26px, 7.5vw, 36px); }
/* 字母語言的提示方塊一個字母一格，數量多，縮小才排得下 */
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .charades-app .hint-mask { font-size: clamp(22px, 6.5vw, 30px); gap: .08em; }
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .charades-app .mask-box { border-width: 2px; border-radius: 5px; }
.charades-app .namer .drawn-card .badge { background: var(--surface); color: var(--blue-text); border-color: var(--blue-edge); }

/*
 * 題卡兩種樣子（app.js 的 syncCard，#drawn 的 data-view）：
 *   word 看得到題目（ready、按住偷看）；covered 開始比之後蓋起來，有給提示就顯示提示（類型、只露出幾個字）
 */
.charades-app .hint-lines { display: none; }
.charades-app .drawn-card[data-view="covered"] #card-kind,
.charades-app .drawn-card[data-view="covered"] .drawn-name { display: none; }
.charades-app .drawn-card[data-view="covered"] .hint-lines { display: grid; justify-items: center; gap: 10px; padding: 6px 0; }
/* 類型提示：黃色標籤直接寫類型，比一般標籤大（使用者要求） */
.charades-app .namer .drawn-card .hint-badge { padding: 6px 16px; font-size: 18px; background: var(--yellow-face); color: var(--yellow-text); border-color: var(--yellow-edge); }
.charades-app .namer .drawn-card .hint-badge[hidden] { display: none; }
.hint-mask { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .12em; margin: 0; font-size: clamp(36px, 11vw, 56px); font-weight: 900; line-height: 1.2; color: var(--blue-text); }
/* 沒露出來的字：跟字一樣大的方塊，粗描邊＋淺色底（設計系統的 2px 線條） */
.mask-box { display: inline-block; width: .9em; height: .9em; border: 3px solid currentColor; border-radius: 8px; background: var(--surface); opacity: .85; }
.hint-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint-row .btn:disabled { opacity: .45; cursor: default; }
/* 外語的按鈕字比較長（Buchstabe verraten），讓它換行，不要把卡片撐出畫面 */
.hint-row .btn { min-width: 0; height: auto; min-height: var(--h, 48px); padding: 8px 10px; white-space: normal; line-height: 1.25; text-wrap: balance; }
/* 一個單字一組不換行；單字之間的空白給固定寬度（flex 會把空白字吃掉） */
.mask-word { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }
.mask-space { display: inline-block; width: .35em; }
/* 再偷看一次：跟倒放猜猜看一樣的小按鈕，置中 */
/* 卡片下面：「猜中了！」大按鈕，下面置中的小按鈕「再偷看一次」 */
.got-it { --h: 72px; font-size: 20px; }
.peek-btn { justify-self: center; align-self: center; width: auto; margin-inline: auto; }

/* result：大字標題＋答案 */
.stage-result { justify-items: center; text-align: center; }
.result-title { margin: 0; font-size: 22px; font-weight: 900; }
.result-answer { margin: 0; font-size: clamp(32px, 10vw, 52px); font-weight: 900; line-height: 1.2; color: var(--blue-text); text-wrap: balance; }
.stage-result .hint { margin: 0; }

/* 結束鍵：紅色、要按住 0.8 秒（跟果園菜園動物園的 .end-btn 同一個做法），按住時從左到右填滿 */
.end-btn {
  --face: #e0503c; --edge: #8f2f22; --text: #fff; --h: 68px;
  position: relative; overflow: hidden; font-size: 20px; white-space: normal; line-height: 1.2; text-wrap: balance;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.end-btn::before { content: ""; position: absolute; inset: 0; background: #0000002e; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.end-btn.is-holding::before { transform: scaleX(1); transition: transform .8s linear; }

/* 比到一半回來看題目時不能跳過（app.js 的 started）：按鈕樣式會蓋過 hidden，自己補 */
#skip[hidden] { display: none; }

/* 有設題數時藏起「結束遊戲」（app.js 的 renderRound）：按鈕樣式會蓋過 hidden，自己補 */
.end-btn[hidden] { display: none; }