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

/* 這個遊戲的代表色：綠（比手畫腳是藍） */
.relay-app { --game-edge: var(--mint-edge); }
.relay-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; }

/* 頂欄的聲音開關在開場藏起來：還沒有聲音，放一顆開關只會讓人以為少了什麼（跟竹筍、定時炸彈一樣） */
.relay-app[data-screen="setup"] .game-music { display: none; }

/* ---------- 開場 ---------- */
.setup-panel .field-label:first-child { margin-top: 0; }
.setup-panel .hint { margin: 2px 0 10px; }
.setup-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 12px; }
.setup-row .field-label { margin-top: 0; }
/* 每隊幾分鐘自己一行（老闆 11/03 要求），跟下面的每個人比幾秒一樣滿版 */
.per-field { flex: 1 1 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; }
/* 每隊幾分鐘五個選項擠一排：字小一點、不換行 */
#min-seg .seg-item { padding: 0 2px; font-size: 14px; white-space: nowrap; }
.per-field .seg-item { padding: 0 2px; }
.setup-panel .field-label-gap { display: block; margin-top: 18px; }
#rounds-hint { margin: 10px 0 0; }
.category-bar { margin-top: 16px; }
.category-bar .tool-toggle { font-size: 15px; }
#category-panel[hidden] { display: none; }
.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 的 PLAY_LEAD：draw、reveal） */
#view-play[data-phase="word"] .play-lead,
#view-play[data-phase="relay"] .play-lead,
#view-play[data-phase="guess"] .play-lead { display: none; }

.round-progress { display: grid; gap: 8px; margin-top: 20px; }
/* 第幾題｜碼錶 一行排開（猜中幾題只在結束畫面說） */
.round-meta { display: flex; align-items: baseline; gap: 12px; }
.round-no { margin: 0; font-size: 14px; font-weight: 800; color: var(--muted); }
/* 這一隊還剩多少時間：最後 10 秒變紅；抽題目、答案揭曉時停住，顏色變淡 */
.clock { margin: 0 0 0 auto; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.clock.is-paused { color: var(--muted); }
.clock.is-urgent { color: var(--danger); }
.round-progress .progress { max-width: none; }

/* 題卡五面（app.js 的 setPhase 設 data-stage） */
.relay-app .namer .name-card[data-stage="draw"] .stage-draw,
.relay-app .namer .name-card[data-stage="word"] .stage-word,
.relay-app .namer .name-card[data-stage="relay"] .stage-relay,
.relay-app .namer .name-card[data-stage="guess"] .stage-guess,
.relay-app .namer .name-card[data-stage="reveal"] .stage-reveal-answer { display: grid; }
.relay-app .namer .name-stage .hint { margin: 0; }
.relay-app .namer .drawn-card { display: grid; justify-items: center; gap: 10px; border-color: var(--mint-edge); background: var(--mint-face); box-shadow: 0 5px 0 var(--mint-edge); }
.relay-app .namer .drawn-name { color: var(--mint-text); word-break: normal; text-wrap: balance; }
.relay-app .namer .drawn-card .badge { background: var(--surface); color: var(--mint-text); border-color: var(--mint-edge); }

/* relay：第幾棒、誰比給誰、倒數圈 */
.stage-relay { justify-items: center; }
.pass-no { margin: 0; font-size: 34px; font-weight: 900; line-height: 1.1; color: var(--mint-text); }
.pass-who { margin: 0; font-size: 18px; font-weight: 800; text-wrap: balance; }
.relay-app .timer-ring { width: 150px; height: 150px; margin: 4px 0; }
.relay-app .timer-ring .num { font-size: 46px; }
.stage-relay .btn-block { width: 100%; }

/* guess：一個字一個方塊＋兩種提示（照比手畫腳 games/charades/app/app.css，顏色換成這個遊戲的綠） */
.relay-app .namer .guess-card { min-height: 120px; padding: 18px 12px; align-content: center; }
.relay-app .namer .guess-card .hint-badge { padding: 6px 16px; font-size: 18px; background: var(--yellow-face); color: var(--yellow-text); border-color: var(--yellow-edge); }
.relay-app .namer .guess-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(--mint-text); }
.mask-box { display: inline-block; width: .9em; height: .9em; border: 3px solid currentColor; border-radius: 8px; background: var(--surface); opacity: .85; }
.mask-word { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }
.mask-space { display: inline-block; width: .35em; }
/* 自動提示的倒數：「5 秒後提示類型」 */
.hint-next { min-height: 1.5em; text-align: center; font-weight: 800; }

/* 卡片下面：猜中了！、沒猜到，公布答案（只在 guess） */
.guess-actions { display: grid; justify-items: center; gap: 12px; margin-top: 16px; }
#view-play:not([data-phase="guess"]) .guess-actions { display: none; }
#got-right { --h: 72px; font-size: 20px; }

/* reveal：猜中了／答案是＋大字答案＋下一題 */
.stage-reveal-answer { justify-items: center; text-align: center; }
.stage-reveal-answer .btn-block { width: 100%; }
.result-title { margin: 0; font-size: 18px; font-weight: 900; color: var(--muted); }
.result-answer { margin: 0; font-size: clamp(32px, 10vw, 52px); font-weight: 900; line-height: 1.2; color: var(--mint-text); text-wrap: balance; }

/* ---------- 遊戲結束 ---------- */
/* 猜中幾題、總共花多久：兩格大數字（2px 線＋4px 底，設計系統的線條） */
.final-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.final-stat {
  display: grid; justify-items: center; gap: 4px; padding: 14px 8px;
  border: 2px solid var(--mint-edge); border-radius: var(--r-md); background: var(--mint-face);
  box-shadow: 0 4px 0 var(--mint-edge); color: var(--mint-text); text-align: center;
}
.final-stat span { font-size: 14px; font-weight: 800; }
.final-stat b { font-size: clamp(22px, 7vw, 32px); font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.final-stat-time { border-color: var(--yellow-edge); background: var(--yellow-face); box-shadow: 0 4px 0 var(--yellow-edge); color: var(--yellow-text); }

/* 這次的題目：一題一列，猜中綠底、沒猜到紅底（11/03 老闆要求），後面的標籤兩種樣式一樣、只換顏色 */
.history-panel { margin-top: 14px; }
.history-panel[hidden] { display: none; }
.history-panel h2 { margin: 0 0 10px; font-size: 18px; }
.history { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.history-item {
  --hf: var(--coral-face); --he: var(--coral-edge); --ht: var(--coral-text);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px;
  border: 2px solid var(--he); border-radius: var(--r-md); background: var(--hf);
}
.history-item.is-right { --hf: var(--mint-face); --he: var(--mint-edge); --ht: var(--mint-text); }
.history-word { min-width: 0; font-size: 17px; font-weight: 800; color: var(--ht); text-wrap: balance; }
.history-mark { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--ht); font-size: 14px; font-weight: 800; }