/*
 * 竹筍竹筍蹦蹦出自己的樣式。
 *
 * 色票、按鈕、選項卡、彈窗、輸入框、步驟教學、照著念都來自 Woohop 全站的 woohop.css＋game.css
 * （唯一來源在 apps/homepage/assets，build 時複製進來），這裡不重寫那些元件，只排這個遊戲的版面。
 * 跟首頁 site.css 在同一頁，class 避開首頁用過的名字（.hero、.stage、.field、.card、.game⋯）。
 */

/* 這個遊戲的代表色：薄荷綠（首頁 site.js 的 GAMES 也是 #4FB59A） */
.bamboo-app { --game-edge: var(--mint-edge); }

/* ---------- 帶領的步驟頭（每個畫面上方，app.js 的 renderLead） ----------
 * 步驟點＋「STEP 2 / 5」＋這一步的標題＋照著念。主持人一看就知道現在到哪、要說什麼。
 */
.lead-head { display: grid; gap: 6px; justify-items: center; text-align: center; margin: 20px 0 0; } /* 跟下面卡片的間距交給 .view 的 gap（16px），這裡不再加 */
.lead-head .step-dots i.done { background: var(--indigo); opacity: .45; }
.lead-head .step-no { font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--muted); margin-top: 4px; }
.lead-title { margin: 0; font-size: 26px; font-weight: 900; }
.lead-head .lead-say mark { font-weight: 900; }
.lead-head.no-say .lead-say { display: none; }
.lead-head .lead-say { max-width: none; width: 100%; margin-top: 12px; text-align: left; font-size: 18px; }
/* 第一個畫面上面已經有大標題，步驟頭不用再留那麼多空 */
#view-setup .lead-head { margin-top: 8px; }

/* ---------- 說明規則：三張插圖卡 ---------- */
.rule-cards { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.rule-card { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 12px 16px 12px 8px; background: var(--surface); border: 2px solid var(--edge-n); box-shadow: var(--raise-n); border-radius: var(--r-lg); }
.rule-card .illo { width: 112px; height: auto; overflow: visible; }
.rule-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 900; }
.rule-card p { margin: 0; color: var(--muted); line-height: 1.6; }

/* ---------- 主題：兩欄選項卡 ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } /* minmax(0,…)：不讓「Pas de nouveaux noms」這種長例子把格子撐出框 */
/* 八顆卡要擠在一畫面裡：右上角的打勾圈縮小；上下內距對稱，字才會在卡片正中間 */
.theme-grid .choice { min-width: 0; min-height: 92px; padding: 16px 8px; gap: 2px; }
/* 只有標題要讓開右上角的打勾圈；例子那一行用全寬、只排一行，太長就「⋯」 */
.theme-grid .choice-name { max-width: 100%; padding-inline: 16px; line-height: 1.25; overflow-wrap: break-word; }
.theme-grid .choice-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-grid .choice::after { top: 6px; right: 6px; width: 18px; height: 18px; background-size: 11px; }
@media (min-width: 560px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/*
 * 「開始取名」「大家都取好了」黏在畫面底部：不管上面多長，一載入就看得到出口。
 * 靠的是祖先都沒有 overflow: hidden（跟定時炸彈的 .btn-start 同一個做法）。
 */
.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; }

/* ---------- 取名 ---------- */
.name-card { display: grid; gap: 14px; padding: 20px; text-align: center; margin-top: 0; }
.name-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.name-turn { font-size: 22px; font-weight: 900; }
.reroll { justify-self: end; margin-top: -6px; }

/* 三個狀態一次只露一個（data-stage 由 app.js 的 setStage 設）。不叫 .stage：首頁 site.css 用過那個名字 */
.name-card .name-stage { display: none; gap: 12px; }
.name-card[data-stage="choose"] .stage-choose,
.name-card[data-stage="own"] .stage-own,
.name-card[data-stage="reveal"] .stage-reveal { display: grid; }

.draw-btn { --h: 80px; font-size: 24px; border-radius: var(--r-lg); }

/* ---------- 一疊名稱卡（抽牌） ----------
 * 插圖本體在 app.js 的 DECK_ART（跟網站其他插圖同一套畫法：粗描邊留缺口、色塊錯開露出白邊）。
 * 這裡只管動態：平常整疊輕輕浮動，提示「這裡可以抽」；按下「抽一個」時加上 .is-drawing，
 * 最上面那張（.deck-top）往上飛走，app.js 等動畫跑完才翻出名稱。
 */
.deck { display: block; width: 190px; height: auto; margin: 0 auto 4px; overflow: visible; animation: deck-float 2.4s ease-in-out infinite; }
.deck .deck-top { transform-box: fill-box; transform-origin: center; }
.deck.is-drawing { animation: none; }
.deck.is-drawing .deck-top { animation: card-fly .38s cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes deck-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes card-fly { to { transform: translateY(-90px) rotate(14deg) scale(1.08); opacity: 0; } }

/* 翻過來的那張卡：從側面轉正（rotateY），名稱在卡上 */
.drawn-card {
  padding: 18px 14px 20px; border: 2px solid var(--mint-edge); border-radius: var(--r-lg);
  background: var(--mint-face); box-shadow: 0 5px 0 var(--mint-edge);
  animation: card-flip .5s cubic-bezier(.2, 1.3, .4, 1) 1;
}
.drawn-card.pop { animation: card-flip .5s cubic-bezier(.2, 1.3, .4, 1) 1; }
@keyframes card-flip { from { transform: perspective(600px) rotateY(90deg) scale(.85); } to { transform: none; } }
.reveal-hint { margin: 0; color: var(--muted); font-size: 15px; font-weight: 700; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .deck, .deck .deck-top, .drawn-card { animation: none !important; } }
.pool-empty { margin: 0; }

/* 「傳給下一個人」＋「換一個」：照定時炸彈的 .pass-row（apps/bomb/app/app.css），只是「換一個」一直都在，不用滑進來 */
.pass-row { display: flex; align-items: stretch; gap: 10px; margin-top: 4px; }
.pass-row .pass-bar:not(.pass-redraw) { flex: 1; min-width: 0; }
.pass-bar { --h: 72px; font-size: 19px; padding-inline: 14px; border-radius: var(--r-lg); white-space: normal; line-height: 1.3; }
.pass-redraw { flex: none; padding: 0 18px; font-size: 16px; white-space: nowrap; }

.own-say { max-width: none; margin-top: 12px; text-align: left; font-size: 18px; }

.you-are { margin: 0; color: var(--mint-text); font-weight: 800; opacity: .8; }
/* 翻出來的名稱：全場要看得到，字越大越好；長名稱（大腸包小腸）自己縮 */
.drawn-name { margin: 0; font-size: clamp(36px, 11vw, 56px); font-weight: 900; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; color: var(--mint-text); }


.named { margin-top: 20px; }
.named h2 { margin: 0 0 8px; color: var(--muted); font-weight: 800; }
.named-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.named-chip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: var(--r-pill); border: 2px solid var(--edge-n); background: var(--surface); font-weight: 800; }
.chosen-remove { flex: none; width: 28px; height: 28px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.chosen-remove:hover { background: var(--coral-face); color: var(--coral-text); }

#need-more { margin-top: 16px; text-align: center; background: none; border: 0; padding: 0; color: var(--muted); font-weight: 700; }

/* ---------- 開始玩 ---------- */

.round-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* 口令的七個字，配樂打到哪一拍就亮哪一個 */
.chant { display: flex; justify-content: center; gap: 6px; min-width: 0; }
/*
 * 中文一格一個字，正方形；其他語言一格是一個音節（Bam、boo、ニョッ、나와、bout !），
 * 寬度跟著字走、高度固定，字級小一點，七格才放得進手機寬度（375px 實測）
 */
.chant span { flex: 1 1 0; min-width: 0; max-width: 44px; aspect-ratio: 1;  display: grid; place-items: center; border-radius: var(--r-md); border: 2px solid var(--edge-n); background: var(--sunken); font-size: 20px; font-weight: 900; color: var(--muted); transition: transform .08s, background .08s; }
.chant span.on { background: var(--mint); border-color: var(--mint-edge); color: var(--ink); transform: translateY(-4px) scale(1.12); }
.chant span.accent.on { background: var(--coral); border-color: var(--coral-edge); }
.chant:not(:lang(zh)) { gap: 4px; }
.chant:not(:lang(zh)) span { flex: 1 1 auto; max-width: none; aspect-ratio: auto; height: 40px; padding: 0 2px; font-size: 14px; white-space: nowrap; }
:root[data-theme="dark"] .chant span.on { color: #102a22; }

/* 外語的「按住結束」比較長：允許換成兩行、平衡斷行，不要被 .btn 的 nowrap 切掉 */
.round-btn { --h: 76px; position: relative; overflow: hidden; font-size: 22px; white-space: normal; line-height: 1.2; text-wrap: balance; padding-inline: 16px; border-radius: var(--r-lg); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
/* 玩的時候變成紅色（跟搶答鈕同一組紅），一看就知道這顆是「結束」不是「開始」 */
.round-btn.is-running { --face: #e0503c; --edge: #8f2f22; --text: #fff; }
/* 按住時從左到右填滿深紅色，填滿（HOLD_MS）就結束；放開就退回去 */
.round-btn::before { content: ""; position: absolute; inset: 0; background: #0000002e; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.round-btn.is-holding::before { transform: scaleX(1); transition: transform .8s linear; }
.play-hint { margin: 0; text-align: center; }

/* ---------- 這輪結束：分享拉霸 ---------- */
.end-card { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 28px 20px 24px; margin-top: 0; }
.end-card h1 { margin: 0; font-size: clamp(30px, 7vw, 40px); font-weight: 900; }
.end-desc { margin: 0; color: var(--muted); }

/*
 * 拉霸機：粗外框＋底部厚度（設計系統的按鈕語言），窗格一次看得到三列，中間那列是停下來的位置。
 * 列高 --row 是唯一要調的數字，app.js 從畫面量，不用跟著改。
 */
.slot {
  --row: 84px;
  position: relative; width: 100%; max-width: 420px; margin-top: 6px; padding: 10px;
  border: 2px solid var(--outline); border-radius: var(--r-lg); background: var(--yellow);
  box-shadow: 0 6px 0 var(--outline);
}
.slot-window {
  position: relative; height: calc(var(--row) * 3); overflow: hidden;
  border: 2px solid var(--outline); border-radius: var(--r-md); background: var(--surface);
}
/* 上下兩列蓋一層漸層淡出、中間那列墊一條淡黃：視線自然落在中間。
   用疊上去的漸層、不用 mask：mask 會讓外框的黃色透進來，字變得髒髒的 */
.slot-window::before, .slot-window::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.slot-window::before { z-index: 0; top: var(--row); height: var(--row); background: var(--yellow-face); border-block: 2px dashed var(--yellow-edge); }
.slot-window::after { z-index: 2; inset: 0; background: linear-gradient(var(--surface), transparent 34%, transparent 66%, var(--surface)); }
/* 中間那條：停下來的位置，左右各一個三角形指著 */
.slot::before, .slot::after {
  content: ""; position: absolute; z-index: 2; top: 50%; width: 0; height: 0;
  border: 10px solid transparent; transform: translateY(-50%);
}
.slot::before { left: -2px; border-left: 14px solid var(--outline); }
.slot::after { right: -2px; border-right: 14px solid var(--outline); }
.slot-reel { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; will-change: transform; }
.slot-reel li {
  height: var(--row); display: grid; place-content: center; justify-items: center; gap: 2px; padding: 0 18px;
  font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--muted); text-wrap: balance;
}
.slot-reel li.on { color: var(--ink); font-size: 21px; font-weight: 900; }
/* 「回答」「動作」小標籤：問題是藍、動作是珊瑚，停下來一眼就知道要說還是要做 */
.slot-kind { font-size: 12px; font-weight: 900; line-height: 1; padding: 3px 10px; border-radius: var(--r-pill); border: 2px solid var(--blue-edge); background: var(--blue-face); color: var(--blue-text); }
.slot-do .slot-kind { border-color: var(--coral-edge); background: var(--coral-face); color: var(--coral-text); }
.slot-text { display: block; }
.slot.is-spinning .slot-reel li { filter: blur(.5px); }
@media (prefers-reduced-motion: reduce) { .slot-reel { transition: none !important; } }
:root[data-theme="dark"] .slot { background: #a8861c; }

/* 真心話／隨機／大冒險（一排單選本體在 game.css 的 .seg）。拉霸在轉的時候不能換 */
.slot-mode { width: 100%; max-width: 420px; }
.slot-mode.is-locked { opacity: .55; pointer-events: none; }

.slot-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.end-card .btn { margin-top: 4px; }

@media (min-width: 760px) {
  .name-card { padding: 28px 36px; }
}

/* 頂欄的音樂開關只在開始遊戲之後出現：選主題時還沒有配樂，放一顆開關只會讓人以為少了什麼（2026-10-20 使用者要求） */
.bamboo-app[data-screen="setup"] .game-music { display: none; }

/*
 * 手機版拉霸：窄螢幕上長題目一定會折成兩行，加上上面的「真心話／大冒險」標籤，84px 放不下，
 * 會超出中間那條框。列高加到 104px、字縮一點、左右內距收窄。列高是 app.js 從畫面量的，不用跟著改程式。
 */
@media (max-width: 480px) {
  .slot { --row: 104px; padding: 8px; }
  .slot-reel li { padding: 0 10px; font-size: 16px; }
  .slot-reel li.on { font-size: 19px; }
}
.all-done { margin-top: 8px; }

/*
 * 確認框兩顆按鈕：woohop.css 是 1fr 1fr，但 1fr 的最小寬度是字的寬度，外語長一點就把右邊那顆擠出框外
 * （法文「Revenir au début」）。改成 minmax(0, 1fr)，字太長就換行，不撐破框
 */
dialog.modal .m-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
dialog.modal .m-actions .btn { min-width: 0; white-space: normal; line-height: 1.2; text-wrap: balance; }

/* 卡片內距統一 20px（共用 game.css 的 .panel 是 22px 24px 24px）：手機上主題那八張卡多一點寬度（使用者要求） */
.bamboo-app .panel { padding: 20px; }