/**
 * 詞彙學習 - 分類／範圍挑選頁的膠囊按鈕（自訂課程 / 綜合複習 / 小試身手）
 *
 * 這幾頁的按鈕掛 .bt-color-7 或 .bt-color-8，但專案原本沒有定義這兩個 class，
 * 導致按鈕呈現瀏覽器預設 <button> 灰底。這裡只補「顏色」，
 * 尺寸／字級／圓角仍由各頁自己的 utility class（p-2 / p-4 / fs-3 / w-200px…）控制。
 *
 * 以 #container 前綴提高優先級（避免被站台其他 `#id button` 規則蓋掉）；
 * 本檔只在有 @push('head-link') 引入的頁面載入，不影響 sentence_game 等其他用到 bt-color-7 的頁面。
 * 顏色沿用各站 --custom-color-* token，未定義時給 mintung fallback。
 */

#container .bt-color-7,
#container .bt-color-8 {
    background-color: #fff;
    color: var(--custom-color-6, #266375);
    line-height: 1.4;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

#container .bt-color-7:hover,
#container .bt-color-7:focus-visible,
#container .bt-color-8:hover,
#container .bt-color-8:focus-visible {
    background-color: var(--custom-color-5, #f0efe6);
    color: var(--custom-color-1, #b53c32);
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3);
    transform: translateY(-1px);
}

#container .bt-color-7:active,
#container .bt-color-8:active {
    transform: translateY(0);
}

/* 去掉預設 focus 藍框，focus 態改用上面的 :focus-visible 呈現 */
#container .bt-color-7:focus:not(:focus-visible),
#container .bt-color-8:focus:not(:focus-visible) {
    outline: none;
}

/* 小試身手：模式選擇區（隨機出題 / 自訂範圍）背景改米白，不用 bg-white */
#container #buttons_1 {
    background-color: #f8f6f2;
}