/*
 * 食物抽選器。
 *
 * 版面與 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);
}

#result:empty::before {
    content: "還沒抽——上面挑一個餐別按下去";
    font-size: 0.95rem;
    font-weight: 400;
    font-family: var(--font-main);
    color: var(--fd-muted-soft);
}

.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;
}

.fd-group {
    margin: 0 0 32px;
}

.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;
}

.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-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;
}

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

.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;
}