/*
 * 果園菜園動物園自己的樣式。步驟頭、規則卡、拉霸、節拍器、按鈕、選項卡都在全站共用的 woohop.css＋game.css，
 * 這裡只排這個遊戲的版面。跟首頁 site.css 在同一頁，class 避開首頁用過的名字（.hero、.stage、.card⋯）。
 */

/* 這個遊戲的代表色：橘（首頁 site.js 的 GAMES 也是 #FF9419） */
.orchard-app { --game-edge: var(--orange-edge); }
.orchard-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; }

/* ---------- 主題：大大的主題名稱，下面是隨機換和自己選 ---------- */
.topic-panel { display: grid; gap: 10px; }
.topic-card {
  position: relative; display: grid; justify-items: center; text-align: center; padding: 18px 52px;
  border: 2px solid var(--orange-edge); border-radius: var(--r-md); background: var(--orange-face); color: var(--orange-text);
  box-shadow: 0 4px 0 var(--orange-edge);
}
.topic-card strong { font-size: 34px; line-height: 1.2; font-weight: 900; color: var(--ink); text-wrap: balance; }
.topic-text { display: grid; gap: 2px; }
.topic-text span { font-size: 16px; font-weight: 700; }
/* 右上角的骰子鍵：只有圖示（名稱給螢幕閱讀器），左右內距 52px 讓主題字不會壓到它 */
.topic-shuffle { position: absolute; top: 10px; right: 10px; width: 36px; padding: 0; }
.topic-shuffle svg { width: 18px; height: 18px; }
/* 「自己選主題」收合鍵：顏色與滑過樣式用全站的 .link（深色模式會自動換色），這裡只排版＋箭頭；跟定時炸彈的「自訂區間」一樣 */
.topic-toggle {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800;
}
.topic-toggle::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.topic-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 開始玩 ---------- */
/* 結束鍵：紅色、要按住 0.8 秒（跟竹筍的 .round-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; }

/* 頂欄的聲音開關在第 1 步藏起來：還沒有聲音（跟竹筍、定時炸彈一樣） */
.orchard-app[data-screen="setup"] .game-music { display: none; }