/*
 * 食物抽選器。
 *
 * 版面與 tools/food-words 是同一套語言（hero → 控制列 → 卡片牆），因為兩頁是同一
 * 條動線上的前後站：這裡決定吃什麼，那裡找形容詞。本頁改版前是自帶一整套硬編碼
 * 配色的孤島（#007bff / #f8f9fa / #333），深色模式只翻了頁面底色，卡片仍是白底；
 * 現在改成載入 css/style.css 吃站台 token，深色模式由 token 自動接手。
 *
 * 強調色比照 .fw-root 拆成三個變數而不是一個，因為兩種用途的對比要求不同：
 *   --fd-accent      當文字色（疊在 --bg-card 或 --fd-accent-soft 上）
 *   --fd-on-accent   當 --fd-accent 反過來當底色時，疊在上面的文字色
 *   --fd-muted-soft  疊在 --fd-accent-soft 上的次要文字（結果卡的空狀態提示）
 * 三組都必須 >= WCAG AA 的 4.5:1。深色模式的 --fd-accent 是亮橘，白字疊上去不夠，
 * 所以 --fd-on-accent 在深色模式改成深色。實測值（tests/foodDrawCards.js 會實算）：
 *   淺色 #c2410c on #fff 5.18:1、on --fd-accent-soft 4.64:1、白字 on accent 5.18:1
 *   深色 #fb923c on #1e293b 6.46:1、on --fd-accent-soft 6.59:1、#231207 on accent 7.99:1
 * --fd-muted-soft 存在的理由：站台的 --text-secondary（淺色 #64748b）疊在
 * --fd-accent-soft 的暖底上只有 4.26:1，過不了 AA，所以淺色改用壓深一階的
 * #5a687d（5.07:1）；深色的 #94a3b8 疊在 #3a2114 上是 5.82:1，直接沿用即可。
 * 刻意選 #c2410c／#fb923c 而不是沿用 food-words 的 #a83a22／#f0876b：兩頁互相連結，
 * 色調同家族但不同階，讀者才分得出自己在哪一頁。
 */

.fd-root {
    --fd-accent: #c2410c;
    --fd-accent-soft: #fdf0e8;
    --fd-on-accent: #fff;
    --fd-muted-soft: #5a687d;

    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    box-sizing: border-box;
    font-family: var(--font-main);
    color: var(--text-main);
}

:root[data-theme="dark"] .fd-root {
    --fd-accent: #fb923c;
    --fd-accent-soft: #3a2114;
    --fd-on-accent: #231207;
    --fd-muted-soft: #94a3b8;
}

/* --- 標題區 ------------------------------------------------------------ */

.fd-hero h1 {
    font-family: var(--font-heading);
    color: var(--text-heading);
    margin: 0 0 12px;
    font-size: 2rem;
}

.fd-subtitle {
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0 0 12px;
}

.fd-stats {
    color: var(--fd-accent);
    font-weight: 700;
    margin: 0;
}

/* --- 抽選區（按鈕 ＋ 轉盤 ＋ 結果） ------------------------------------- */

.fd-draw {
    margin: 28px 0 20px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.fd-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.fd-btn {
    /* 觸控目標 44px，理由同 .fw-chip：這排是全頁最常按的東西。 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-main);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.fd-btn:hover {
    border-color: var(--fd-accent);
    color: var(--fd-accent);
}

.fd-btn:disabled {
    opacity: 0.55;
    cursor: progress;
}

/*
 * 作者樣式的 display 會蓋掉瀏覽器預設的 [hidden] { display: none }，所以宣告了
 * display 的元件都得自己把 hidden 補回來。實測後果：#restore-btn 明明 hidden=true，
 * 「全部加回抽選池」在沒有任何排除項時照樣看得見（2026-09-06 本機瀏覽器實測）。
 * jsdom 測不到這件事（測試沒載入 style.css），所以另在 tests/foodDrawCards.js
 * 用靜態比對釘住這條規則。
 */
.fd-btn[hidden] {
    display: none;
}

.fd-btn-primary {
    background: var(--fd-accent);
    border-color: var(--fd-accent);
    color: var(--fd-on-accent);
    font-weight: 700;
}

.fd-btn-primary:hover {
    color: var(--fd-on-accent);
    filter: brightness(1.08);
}

/*
 * 轉盤縮小成抽選區的一部分（改版前是 360px、獨佔版面）。它仍然是「決定吃什麼」
 * 那一刻的儀式感來源，但不再是唯一的資訊來源——全部選項現在看得到，在下面的卡片牆。
 */
.wheel-container {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 16px;
}

/* padding-top 撐高，讓轉盤維持正方形，且不依賴 aspect-ratio（兼容舊版瀏覽器） */
.wheel-container::before {
    content: "";
    display: block;
    padding-top: 100%;
}

#wheel-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

.pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 24px solid var(--fd-accent);
    z-index: 10;
}

/*
 * 結果卡。外框是 .fd-result（虛線強調，比照 .fw-random），裡面的 #result 只放
 * 「結果：XXX」那一行純文字——它的 textContent 是 tests/foodDrawCustomItems.js
 * 直接比對的契約（`結果：${winner}`），所以任何附加文字（次數、提示）都必須放在
 * #result 之外的兄弟節點，不能塞進去。
 */
.fd-result {
    margin: 0;
    padding: 14px 16px;
    background: var(--fd-accent-soft);
    border: 2px dashed var(--fd-accent);
    border-radius: 12px;
}

#result {
    min-height: 2.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--fd-accent);
}

/*
 * 提示文字。內容寫在 HTML 裡（見 index.html 的 .fd-result-hint），不是這裡的
 * ::before——CSS 生成內容在 Chromium 的無障礙樹裡量不到（實測），視覺看得到、
 * 螢幕閱讀器讀不到。這裡只負責在抽出結果之後把它藏起來，作法同
 * tools/food-words 的 .fw-random-hint。
 */
.fd-result-hint {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 400;
    font-family: var(--font-main);
    color: var(--fd-muted-soft);
}

.fd-result:has(#result:not(:empty)) .fd-result-hint {
    display: none;
}

.fd-draw-count {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* --- 控制列 ------------------------------------------------------------ */

.fd-controls {
    margin: 0 0 20px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.fd-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.fd-search {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fd-label-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.fd-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-main);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.fd-filter-group {
    margin-top: 16px;
}

.fd-filter-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.fd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fd-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
}

.fd-chip:hover {
    border-color: var(--fd-accent);
}

.fd-chip[aria-pressed="true"] {
    background: var(--fd-accent);
    border-color: var(--fd-accent);
    color: var(--fd-on-accent);
    font-weight: 700;
}

.fd-chip-count {
    opacity: 0.75;
    font-size: 0.8em;
    margin-left: 4px;
}

/*
 * 被選中時不再稀釋數字：0.75 的白字合成到 --fd-accent 底色上只剩 3.58:1（淺色），
 * 過不了 AA。這個 opacity 是從 food-words 的 .fw-chip-count 沿用來的，那邊的
 * 配色組合剛好還過得去，這裡的不行。被選中的 chip 本來就該更醒目而不是更淡。
 */
.fd-chip[aria-pressed="true"] .fd-chip-count {
    opacity: 1;
}

/* --- 卡片牆 ------------------------------------------------------------ */

.fd-status {
    color: var(--text-secondary);
    margin: 0 0 16px;
}

/*
 * animation/opacity 是為了關掉 css/style.css 的全域 `section { animation: fade-in
 * 0.8s ease-out forwards; opacity: 0; }`。.fd-group 是 renderCards() 每次都重建的
 * <section>，不關的話每敲一個搜尋字、每點一次篩選鈕或卡片，整片卡片牆都會從全透明
 * 重跑一次 0.8 秒淡入（還有 section:nth-child 疊上去的 0.1s 起跳延遲），
 * 搜尋會感覺像壞掉。靜態的 .fd-draw / .fd-controls / .fd-notes 不在此列——
 * 那幾個只在載入時播一次，是站台原本就要的效果。
 */
.fd-group {
    margin: 0 0 32px;
    animation: none;
    opacity: 1;
}

.fd-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 14px;
}

.fd-group-head h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--text-heading);
    margin: 0;
}

.fd-group-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/*
 * 卡片比 food-words 窄（140px vs 260px）：那邊一張卡要放詞＋解釋＋例句，這邊只有
 * 一個菜名，用同樣寬度會變成一片空白。674 個選項用 140px 大約一排 6 欄。
 */
.fd-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fd-card {
    /* 整張卡就是按鈕（點一下排除／加回），所以要清掉 button 的預設外觀。 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;   /* 最後一道保險：徽章與標記永遠留在卡內 */
}

/*
 * 名稱要能收縮與斷行，否則拉丁長字（Cheeseburger、Frappuccino 這種很平常的
 * 口袋名單）會把「我加的」徽章與 ✕／↩ 標記整個擠到卡片框外面。
 * 375px 實測（Chromium）：Cheeseburger 卡右緣 183px，.fd-card-mark 卻落在
 * x=201–211，完全在卡外、還被右欄那張卡蓋住，使用者因此看不出那個選項
 * 現在是排除還是未排除（✕／↩ 是唯一的狀態圖示）。
 * 中文因為逐字可斷所以沒事，這條是拉丁字專屬的破圖。
 * overflow: hidden 是最後一道保險，確保徽章與標記永遠留在卡內。
 */
.fd-card-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-card:hover {
    border-color: var(--fd-accent);
}

/* aria-pressed="true" ＝ 已被排除出抽選池。 */
.fd-card[aria-pressed="true"] {
    color: var(--text-secondary);
    background: var(--bg-color);
    border-style: dashed;
    text-decoration: line-through;
}

.fd-card-mark {
    flex: none;
    font-size: 0.8rem;
    color: var(--fd-accent);
    text-decoration: none;
}

.fd-card-badge {
    flex: none;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--fd-accent-soft);
    color: var(--fd-accent);
    border: 1px solid var(--fd-accent);
    text-decoration: none;
}

/* 抽中的那張卡在牆上高亮，讓「轉盤轉出來的東西」在全量清單裡有個著落。 */
.fd-card-won {
    background: var(--fd-accent);
    border-color: var(--fd-accent);
    color: var(--fd-on-accent);
    font-weight: 700;
}

.fd-card-won .fd-card-mark,
.fd-card-won .fd-card-badge {
    color: var(--fd-on-accent);
    background: none;
    border-color: var(--fd-on-accent);
}

/*
 * 「抽中」與「已排除」會同時出現在同一張卡上（抽中之後又把它排除）。
 * .fd-card[aria-pressed="true"] 的特異度（0,2,0）贏過 .fd-card-won（0,1,0），
 * 底色會變成 --bg-color，但底下 `.fd-card-won .fd-card-mark` 那條仍套 --fd-on-accent，
 * 實測對比只有 1.01:1（深色）／1.05:1（淺色）——標記等於隱形。
 * 這裡讓排除狀態完整勝出：連子元素的顏色一起收回來。
 */
.fd-card[aria-pressed="true"].fd-card-won .fd-card-mark,
.fd-card[aria-pressed="true"].fd-card-won .fd-card-badge {
    color: var(--fd-accent);
    background: none;
    border-color: var(--fd-accent);
}

.fd-hit {
    background: var(--fd-accent-soft);
    color: var(--fd-accent);
    font-weight: 700;
}

/* 抽中卡本身已是 accent 底，命中標色若仍用 accent-soft 底會糊在一起（同 .fw-tag
   的處理），改用反白。 */
.fd-card-won .fd-hit {
    background: var(--fd-on-accent);
    color: var(--fd-accent);
    border-radius: 3px;
    padding: 0 2px;
}

/*
 * 組合狀態（抽中 ＋ 已排除）：卡片底色其實是 --bg-color 而不是 accent
 *（`.fd-card[aria-pressed="true"]` 的特異度贏過 `.fd-card-won`），
 * 上面那條反白的標色底疊上去會糊掉——淺色實測 #fff on #f8fafc 只有 1.03:1，
 * 整個 <mark> 的底等於消失，搜尋命中片段看不出被標色。
 * 這與第一輪修掉的 .fd-card-mark 隱形是同一個 bug，當時漏了 .fd-hit 這個子元素。
 * 狀態可達：搜「麵」→ 抽中一個麵 → 把它排除。
 */
.fd-card[aria-pressed="true"].fd-card-won .fd-hit {
    background: var(--fd-accent-soft);
    color: var(--fd-accent);
}

/* --- 自訂清單 ---------------------------------------------------------- */

.custom-section {
    margin-top: 8px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: left;
}

.custom-section summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-heading);
}

.custom-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.custom-form select,
.custom-form input {
    font-family: inherit;
    font-size: 1rem;
    padding: 10px 12px;
    color: var(--text-main);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-sizing: border-box;
}

.custom-form input {
    flex: 1;
    min-width: 10rem;
}

.custom-hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-height: 1.25rem;
    margin: 0.5rem 0 0;
}

.custom-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 10px 0 0;
}

.custom-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 4px 8px 4px 12px;
    font-size: 0.875rem;
    color: var(--text-main);
}

.custom-list .item-category {
    color: var(--fd-accent);
}

.custom-list .item-remove,
.custom-clear {
    font-family: inherit;
    background: none;
    border: none;
    color: var(--fd-accent);
    padding: 0;
    cursor: pointer;
}

.custom-list .item-remove {
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
}

.custom-clear {
    font-size: 0.875rem;
    margin-top: 12px;
    text-decoration: underline;
}


/* --- 說明 -------------------------------------------------------------- */

.fd-notes {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.fd-notes h2 {
    font-family: var(--font-heading);
    color: var(--text-heading);
    font-size: 1.2rem;
}

.fd-notes li {
    line-height: 1.8;
    margin-bottom: 6px;
}

@media (width <= 600px) {
    .fd-root {
        padding: 20px 14px 48px;
    }

    .fd-hero h1 {
        font-size: 1.6rem;
    }

    .fd-cards {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/*
 * 焦點樣式集中放在全檔最後：它們的選擇器帶了 :focus-visible，特異度一定高於
 * 對應的基礎規則（如 .fd-search input vs .custom-form input），寫在中間會踩到
 * stylelint 的 no-descending-specificity。
 */
.fd-search input:focus-visible,
.fd-btn:focus-visible,
.fd-chip:focus-visible,
.fd-card:focus-visible,
.custom-list .item-remove:focus-visible,
.custom-clear:focus-visible {
    outline: 3px solid var(--fd-accent);
    outline-offset: 2px;
}