/* fish-zero.com 站台共用樣式。
 *
 * ⚠️ **這個檔案在磁碟上叫 site.css，但頁面引用的是 /assets/site.<8碼雜湊>.css。**
 * scripts/build-site.mjs 產生 HTML 時會依內容算雜湊並改寫網址，
 * lib/app.mjs 收到請求時再把雜湊剝掉對映回這個檔案（見 lib/assets.mjs 檔頭）。
 *
 * 所以：**改了這個檔案就一定要跑 `npm run build`**，否則 HTML 裡的雜湊會對不上內容，
 * `npm run build:check` 會紅燈（那是刻意的防護，不是誤報）。
 *
 * 好處是拿得到一年 immutable，而且改樣式時網址會變，
 * 不會再踩到「Cloudflare 邊緣送舊檔四小時」那個坑（見 INTRODUCTION.md §5）。
 */

:root {
    --bg: #1e1e2e;
    --fg: #cdd6f4;
    --muted: #a6adc8;
    --accent: #89b4fa;
    --surface: #313244;
    --border: #45475a;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #ffffff;
        --fg: #1f2430;
        --muted: #5c6370;
        --accent: #1e66f5;
        --surface: #f4f6fa;
        --border: #d8dee9;
    }
}

* { box-sizing: border-box; }

/* ⚠️⚠️ **不要加 `html { scroll-behavior: smooth }`。**
 * 手冊章節開頭有手寫的目錄，看起來很適合配平滑捲動 —— 2026-09-03 加過，當場實測發現
 * 它會讓這個站台的**錨點定位整個失效**：點目錄時網址列的 `#…` 會變、但畫面一動也不動
 * （連續採樣 2 秒，scrollY 一直是 0），直接開 `…/markdown-syntax#tables` 也一樣停在頁首。
 * 把同一頁的 scroll-behavior 改回 auto，同樣的點擊立刻正確跳到該標題。
 *
 * 根因（同一天連帶查出來的）：**業主那台 Chrome 停用了平滑捲動，而被指定成 smooth 的
 * 捲動不會退回瞬間捲動，是完全不動** —— JS 的 `scrollTo({ behavior: 'smooth' })` 同樣
 * 只挪幾十像素就停住。也就是說，只要訪客那邊關掉平滑捲動（作業系統的動畫設定、
 * chrome://flags 都可能造成），這條 CSS 就會讓他**整站的目錄與外部深連結全部失靈**。
 * ⚠️ 偵測不到：實測 `prefers-reduced-motion` 是 false，所以連「照顧減量偏好」的分支都救不了。
 * 症狀也完全無聲：沒有 console 錯誤，網址看起來還「對了」，很容易誤以為是自己 slug 寫錯。
 *
 * mdeditor 的預覽有平滑捲動，那是它自己用 scrollIntoView({behavior:'smooth'}) 做的，
 * 而且它失敗時只是「跳得比較硬」，不是跳不了 —— 不要拿來當成「站台也可以」的理由。 */

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.75;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 24px 24px 96px; }

/* 首頁是產品入口，不沿用文件頁的窄欄版面。 */
.home-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, #795cff 18%, transparent), transparent 34rem),
        radial-gradient(circle at 92% 24%, color-mix(in srgb, #2bc9c2 13%, transparent), transparent 30rem),
        var(--bg);
}
.home-page::before {
    content: '';
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background-image:
        linear-gradient(color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.home-wrap { max-width: 1120px; padding: 20px 28px 96px; }

/* ⚠️ 2026-09-21 業主指定整塊縮小：改版前桌機實測 420px 高，首頁一開就被抬頭吃掉大半個
 * 螢幕，自家 App 輪播與工具卡都被推到摺線以下。現在約 240px —— 尺寸相關的數字
 * （min-height／padding／h1 字級／右側 logo 圓）都是成組調的，改一個就要順帶看其他幾個，
 * 也要一起看下面 860px 與 640px 兩個斷點。 */
.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .3fr);
    align-items: center;
    min-height: 190px;
    margin: 18px 0 22px;
    padding: clamp(22px, 3.4vw, 38px);
    border: 1px solid rgba(182, 176, 255, .32);
    border-radius: 26px;
    background:
        radial-gradient(circle at 84% 48%, rgba(87, 223, 212, .18), transparent 23%),
        radial-gradient(circle at 18% 0%, rgba(191, 108, 255, .22), transparent 42%),
        linear-gradient(135deg, #15142d 0%, #151f3d 54%, #102d3d 100%);
    box-shadow: 0 30px 70px rgba(7, 8, 24, .28), inset 0 1px 0 rgba(255, 255, 255, .13);
    color: #f8f7ff;
}
.home-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, .045) 18.2%, transparent 18.5%),
        linear-gradient(120deg, transparent 67%, rgba(255, 255, 255, .04) 67.2%, transparent 67.5%);
}
.home-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -8%;
    bottom: -75%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 210deg, rgba(73, 95, 255, .42), rgba(33, 225, 211, .34), rgba(142, 80, 255, .24), rgba(73, 95, 255, .42));
    filter: blur(65px);
    opacity: .72;
}
.home-hero__copy { position: relative; z-index: 1; }
.home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #a9f5ec;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .22em;
}
.home-hero__eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}
.home-hero h1 {
    margin: 4px 0 6px;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 850;
    letter-spacing: -.07em;
    line-height: .98;
    filter: drop-shadow(0 14px 25px rgba(7, 8, 25, .25));
}
.home-hero h1 span {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}
.home-wordmark__fish { background-image: linear-gradient(135deg, #fff 8%, #c9c7ff 55%, #a795ff 100%); }
.home-wordmark__dash {
    display: inline-block;
    margin-inline: .03em;
    background-image: linear-gradient(#dde0ff, #8cdded);
    transform: translateY(-.08em);
}
.home-wordmark__zero { background-image: linear-gradient(120deg, #b7edff 0%, #83f2e5 48%, #44d5c4 100%); }
.home-wordmark__zero::after {
    content: '';
    display: inline-block;
    width: .09em;
    height: .09em;
    margin: 0 0 .78em .06em;
    border-radius: 50%;
    background: #8ef9eb;
    box-shadow: 0 0 16px #8ef9eb;
    vertical-align: bottom;
}
.home-hero .tagline {
    max-width: 610px;
    margin: 10px 0 0;
    color: #c9c9de;
    font-size: clamp(.95rem, 1.4vw, 1.06rem);
    line-height: 1.6;
}
.home-hero .tagline strong { color: #fff; font-weight: 750; }
.home-hero__art {
    position: relative;
    justify-self: center;
    display: grid;
    place-items: center;
    width: clamp(140px, 15vw, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143, 244, 232, .17), rgba(113, 116, 255, .06) 45%, transparent 68%);
    filter: drop-shadow(0 24px 35px rgba(4, 8, 32, .38));
}
.home-hero__art::before {
    content: '';
    position: absolute;
    inset: 14%;
    border: 1px solid rgba(173, 247, 239, .22);
    border-radius: 38% 62% 48% 52% / 55% 44% 56% 45%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015));
    box-shadow: inset 0 0 32px rgba(106, 225, 215, .08), 0 0 40px rgba(103, 119, 255, .08);
    transform: rotate(-12deg);
}
.home-hero__art img {
    position: relative;
    z-index: 2;
    display: block;
    width: 88%;
    height: auto;
    filter: saturate(1.08) drop-shadow(0 15px 16px rgba(2, 10, 42, .42));
    animation: home-logo-float 5.2s ease-in-out infinite;
}
.home-hero__orbit {
    position: absolute;
    border: 1px solid rgba(175, 239, 237, .22);
    border-radius: 50%;
}
.home-hero__orbit--outer { inset: 0; transform: rotate(14deg) scaleY(.82); }
.home-hero__orbit--inner { inset: 12%; transform: rotate(-31deg) scaleX(.78); border-color: rgba(191, 166, 255, .2); }
.home-hero__art i,
.home-hero__art b {
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    background: #9ef6ec;
    box-shadow: 0 0 16px #9ef6ec;
}
.home-hero__art i { top: 11%; right: 12%; width: 9px; height: 9px; }
.home-hero__art b { bottom: 15%; left: 4%; width: 6px; height: 6px; background: #c6a8ff; box-shadow: 0 0 13px #c6a8ff; }
@keyframes home-logo-float {
    50% { transform: translateY(-8px) rotate(1.5deg); filter: saturate(1.13) drop-shadow(0 23px 20px rgba(2, 10, 42, .48)); }
}

.home-page .langbar {
    align-items: center;
    width: max-content;
    margin-left: auto;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    backdrop-filter: blur(12px);
}
.home-page .langbar a { padding: 4px 12px; border-color: transparent; }
.home-page .langbar a[aria-current="true"] { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }

/* 語言切換：純連結，不用 JS。爬蟲跟得上，沒有 JS 也能用 */
.langbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0 0;
    font-size: .9rem;
}
.langbar a {
    color: var(--muted);
    text-decoration: none;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
}
.langbar a:hover { color: var(--accent); border-color: var(--accent); }
.langbar a[aria-current="true"] {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

h1 { font-size: 2.1rem; line-height: 1.3; margin: 32px 0 12px; }
h2 { font-size: 1.35rem; margin: 40px 0 10px; }
.tagline { color: var(--muted); font-size: 1.1rem; margin: 0 0 32px; }
.meta { color: var(--muted); font-size: .9rem; margin: 0 0 8px; }

/* 站方自我宣傳（house ad）：與 AdSense 單元分開命名、分開呈現，避免誤認為 Google 廣告。
 * 2026-09-21 起是**多款 App 的輪播**：外層 .house-ads 一個、裡面一款一張 .house-ad。 */
.house-ads { margin: 8px 0 34px; }
.house-ad {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, #b99cff 64%, var(--border));
    border-radius: 20px;
    background:
        radial-gradient(circle at 10% 12%, rgba(246, 127, 191, .28), transparent 32%),
        radial-gradient(circle at 88% 105%, rgba(80, 135, 255, .25), transparent 43%),
        linear-gradient(135deg, #27143f 0%, #14152f 52%, #101d46 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 15px 34px rgba(13, 10, 36, .24);
    color: #fff8ff;
}
.house-ad::before,
.house-ad::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -100px 0 0;
    pointer-events: none;
    background-repeat: repeat;
}
.house-ad::before {
    opacity: .78;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .95) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(255, 255, 255, .74) 0 1.4px, transparent 2px),
        radial-gradient(circle, rgba(208, 225, 255, .9) 0 1.8px, transparent 2.4px);
    background-size: 89px 111px, 127px 153px, 173px 197px;
    background-position: 14px 4px, 63px 31px, 107px 72px;
    animation: house-ad-snow 9s linear infinite;
}
.house-ad::after {
    opacity: .42;
    filter: blur(.35px);
    background-image:
        radial-gradient(circle, #fff 0 1px, transparent 1.7px),
        radial-gradient(circle, #fff 0 1px, transparent 1.6px);
    background-size: 53px 71px, 97px 121px;
    background-position: 8px 21px, 44px 6px;
    animation: house-ad-snow 15s linear infinite reverse;
}
@keyframes house-ad-snow {
    to { background-position: 52px 115px, 26px 184px, 143px 269px; }
}
.house-ad__visual,
.house-ad__copy,
.house-ad__stores { position: relative; z-index: 1; }
.house-ad__visual {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06));
    box-shadow: 0 10px 24px rgba(6, 7, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
    animation: house-ad-float 4.2s ease-in-out infinite;
}
.house-ad__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
}
.house-ad__emoji {
    font-size: 2.1rem;
    line-height: 1;
}
@keyframes house-ad-float {
    50% { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 15px 29px rgba(6, 7, 28, .46), inset 0 1px 0 rgba(255, 255, 255, .5); }
}
.house-ad__copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.house-ad__label {
    color: #e8d8ff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.house-ad__title { margin-top: 2px; color: #fff; font-size: 1.08rem; text-shadow: 0 2px 12px rgba(255, 183, 224, .26); }
.house-ad__description { margin-top: 3px; color: #dddaf0; font-size: .88rem; }
.house-ad__stores { display: grid; gap: 9px; }
.house-ad__store {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    align-items: center;
    gap: 9px;
}
/* 沒有 QR 的連結（桌寵的 Windows 下載）只有按鈕，不留 96px 的空欄。 */
.house-ad__store--no-qr { grid-template-columns: minmax(0, 1fr); }
/* 卡片高度不一致時，輪播換卡下面整頁會上下跳。桌機版「兩個商店＋兩張 QR」的卡高度固定
 * （2×96 QR＋9 間距＋2×18 內距＋2 框＝239，實測），比它矮的卡（只有一個商店、橫幅卡）
 * 一律墊到這個高度；手機版卡片高度本來就隨文案長短變動，不處理。 */
@media (min-width: 621px) {
    .house-ad { min-height: 239px; }
}
/* 橫幅卡（桌寵）：左邊整張 8:3 美術圖貼齊卡片上、下、左緣，右邊是文字＋商店。
 * 圖高＝卡片內高 237px，寬度最多 632px（＝237×8/3，剛好不裁切）；卡片變窄時寬度縮到 60%，
 * 以 object-position: left 裁掉右側（左側有圖示與標題，是最不能丟的那一塊）。
 * 右緣用 mask 淡出，否則亮藍天空跟深色卡片底之間是一條硬邊。 */
.house-ad--banner {
    grid-template-columns: min(632px, 60%) minmax(0, 1fr);
    grid-template-areas: "art copy" "art stores";
    /* 兩列各吃一半高度，圖才會撐滿整張卡；用 align-content: center 的話列高只有內容高，
     * 圖變成卡片中間一條（實測 196 vs 237px）。文字靠下、商店靠上，視覺上一樣置中。 */
    grid-template-rows: 1fr 1fr;
    row-gap: 12px;
    padding: 0 20px 0 0;
}
.house-ad__banner { grid-area: art; align-self: stretch; position: relative; z-index: 1; }
/* 絕對定位貼滿格子：grid 的 stretch 不是「確定高度」，img 的 height:100% 會退回照比例算，
 * 結果圖比卡片矮一截、上下露出底色（實測 226 vs 237px）。 */
.house-ad__banner img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
}
.house-ad--banner .house-ad__copy { grid-area: copy; align-self: end; }
.house-ad--banner .house-ad__stores { grid-area: stores; align-self: start; }
/* 平板寬度右欄只剩 ~250px，英日文說明會多折兩行把卡片撐到 271px（實測），輪播又會跳。
 * 這個寬度下說明交給橫幅本身。 */
@media (min-width: 621px) and (max-width: 900px) {
    .house-ad--banner .house-ad__description { display: none; }
    /* 同一個寬度下按鈕只剩 ~210px，「從 Microsoft Store 下載」這種長度要能折成兩行，
     * 不然字會被 nowrap 擠出按鈕外。折一顆卡片仍是 239px（640～880px 三語實測）。 */
    .house-ad--banner .house-ad__cta { white-space: normal; }
}
.house-ad__cta {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 11px 15px;
    border: 1px solid #ffeaa0;
    border-radius: 11px;
    background: linear-gradient(180deg, #fff0a8 0%, #f7bd42 48%, #d88b13 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -3px 0 rgba(125, 66, 3, .24),
        0 5px 0 #8b560e,
        0 9px 20px rgba(5, 5, 24, .42),
        0 0 18px rgba(255, 195, 74, .24);
    color: #3b2104;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
    white-space: nowrap;
    transform: translateY(-2px);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.house-ad__cta::before {
    content: '';
    position: absolute;
    top: -65%;
    left: -55%;
    width: 34%;
    height: 230%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .94), transparent);
    filter: blur(1px);
    transform: rotate(24deg);
    animation: house-ad-shine 3.4s ease-in-out infinite;
}
.house-ad__cta > span { position: relative; z-index: 1; }
/* 按鈕文字前的商店標誌（Microsoft Store 的四色方塊）。墊一塊白底：黃色那一格直接放在
 * 金色按鈕上會融進底色，四格看起來只剩三格。 */
.house-ad__cta-icon {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    /* 上下負邊距：圖比字高，不抵掉的話這顆按鈕會比旁邊那顆高 1px（實測 43 vs 42） */
    margin: -.2em .45em -.2em 0;
    padding: .16em;
    border-radius: .28em;
    background: #fff;
    box-shadow: 0 1px 2px rgba(102, 53, 0, .3);
    vertical-align: middle;
}
.house-ad__cta:hover {
    filter: saturate(1.12) brightness(1.08);
    transform: translateY(-5px) scale(1.025);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -3px 0 rgba(125, 66, 3, .2),
        0 8px 0 #8b560e,
        0 14px 27px rgba(5, 5, 24, .5),
        0 0 27px rgba(255, 202, 91, .48);
}
.house-ad__cta:active {
    transform: translateY(2px) scale(.99);
    box-shadow: inset 0 2px 5px rgba(102, 53, 0, .26), 0 2px 0 #8b560e, 0 5px 12px rgba(5, 5, 24, .35);
}
.house-ad__cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.house-ad__qr {
    display: block;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(5, 5, 24, .36);
    transition: transform .2s ease, box-shadow .2s ease;
}
.house-ad__qr img { display: block; width: 100%; height: auto; }
.house-ad__qr:hover { transform: scale(1.07); box-shadow: 0 8px 20px rgba(5, 5, 24, .48); }
.house-ad__qr:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes house-ad-shine {
    0%, 24% { left: -55%; }
    52%, 100% { left: 135%; }
}
/* ⚠️ 這一條不可以拿掉：.house-ad 是 display:grid，grid 會蓋過 hidden 屬性預設的
 * display:none，沒有它三張卡會同時攤開在首頁上（而且完全沒有錯誤訊息）。 */
.house-ad[hidden] { display: none; }
/* 輪播圓點。整顆按鈕 24px 見方（手指點得到），視覺上的點由 ::before 畫 —— 直接把
 * 按鈕做成 8px 的圓等於做了一個點不到的按鈕。 */
.house-ads__dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
}
.house-ads__dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.house-ads__dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--muted) 55%, transparent);
    transition: width .18s ease, background-color .18s ease;
}
.house-ads__dot:hover::before { background: var(--muted); }
.house-ads__dot[aria-current="true"]::before { width: 20px; background: var(--accent); }
.house-ads__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 8px; }

@media (max-width: 620px) {
    .house-ad { grid-template-columns: auto minmax(0, 1fr); gap: 13px; padding: 15px; }
    .house-ad__visual { width: 72px; height: 72px; border-radius: 19px; }
    .house-ad__image { border-radius: 15px; }
    .house-ad__stores { grid-column: 1 / -1; }
    .house-ad__store { grid-template-columns: minmax(0, 1fr) 88px; }
    .house-ad__store--no-qr { grid-template-columns: minmax(0, 1fr); }
    /* 手機：橫幅改成整條放最上面（不裁切、不淡出），文字與商店排在下面 */
    .house-ad--banner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "art" "copy" "stores";
        grid-template-rows: auto;
        padding: 0 0 15px;
    }
    .house-ad--banner .house-ad__copy,
    .house-ad--banner .house-ad__stores { padding: 0 15px; }
    .house-ad__banner img { position: static; height: auto; -webkit-mask-image: none; mask-image: none; }
    .house-ad__cta { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .house-ad::before,
    .house-ad::after,
    .house-ad__visual,
    .house-ad__cta::before { animation: none; }
    .house-ad__cta,
    .house-ad__qr,
    .house-ads__dot::before { transition: none; }
}

.cta {
    display: inline-block;
    background: var(--accent);
    color: #11111b;
    font-weight: 700;
    padding: 13px 30px;
    border-radius: 8px;
    text-decoration: none;
}
.cta:hover { filter: brightness(1.1); }

ul { padding-left: 1.3em; }
li { margin: 9px 0; }
a { color: var(--accent); }

code {
    background: var(--surface);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .92em;
}

.note, .lead {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 15px 19px;
    margin: 30px 0;
}
.note { color: var(--muted); font-size: .94rem; }

figure { margin: 32px 0; }
figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
figcaption { color: var(--muted); font-size: .88rem; margin-top: 8px; text-align: center; }

hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0; }

footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .88rem;
}

/* ── 以下是 scripts/build-site.mjs 產生的手冊頁面用到的樣式 ───────────────
 * 這些 class 由產生器與 lib/markdown.mjs 決定，改名前先搜尋那兩個檔案。
 */

.muted { color: var(--muted); }
h3 { font-size: 1.08rem; margin: 30px 0 8px; }

/* 麵包屑：手冊頁面用，故意做得很淡，不跟 h1 搶注意力 */
.crumbs { color: var(--muted); font-size: .85rem; margin: 16px 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

blockquote {
    margin: 28px 0;
    padding: 2px 18px;
    background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
}
blockquote p { margin: 14px 0; }

pre {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    overflow-x: auto;
    line-height: 1.6;
}
pre code {
    background: none;
    padding: 0;
    font-size: .87rem;
    white-space: pre;
}

/* 寬表格自己橫向捲動 —— 讓整頁跟著橫捲是手機上最常見的版面破法 */
.table-wrap { overflow-x: auto; margin: 26px 0; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
th { background: var(--surface); font-weight: 600; }

li.task { list-style: none; margin-left: -1.35em; }
li.task input { margin-right: 6px; }

/* 手冊目錄 */
.chapters { list-style: none; padding: 0; }
.chapters li {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 12px 0;
    line-height: 1.6;
}
.chapters li:hover { border-color: var(--accent); }
.chapters a { text-decoration: none; }
.chapters strong { font-size: 1.05rem; }

/* 回到頂端（右下角，捲過 0.6 個視窗高之後才淡入；HTML 與行為在 build-site.mjs 的 backToTop()）。
 * ⚠️ 用 visibility 而不是只調 opacity —— 只有 opacity: 0 的話按鈕仍然接得到點擊、
 *    也仍然排在 Tab 順序裡，變成「畫面上看不到卻會被鍵盤走到、還會擋住右下角連結」的東西。 */
.to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--fg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s, background .18s, color .18s;
}

.to-top.is-visible { opacity: .92; visibility: visible; }
.to-top:hover { background: var(--accent); color: var(--bg); opacity: 1; }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; opacity: 1; }

@media (max-width: 620px) {
    .to-top { right: 14px; bottom: 14px; width: 38px; height: 38px; }
}

/* 下載本頁 .md */
.dl {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 13px 17px;
    font-size: .92rem;
}

/* 上一章／下一章 */
.pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 44px 0 20px;
    font-size: .95rem;
}
.pager a {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    text-decoration: none;
    line-height: 1.6;
}
.pager a:hover { border-color: var(--accent); }
.pager a:last-child { text-align: right; }
.pager .muted { font-size: .82rem; }

/* ── 首頁的工具卡格線 ────────────────────────────────────────────────────────
   由 scripts/build-site.mjs 的 `:::tools` 區塊產生（資料來自 site-config 的 TOOLS）。

   ⚠️ 這一段是 2026-08-13 為了解決「首頁像一頁式廣告」加的。當時的實測：整頁 5082px＝
      6.5 個螢幕，其中 83% 是單一產品的行銷長文，而「工具索引」只是加粗的連結加段落，
      跟內文長得一模一樣、掃不了。索引要能被掃視，就必須在視覺上跟內文分開。 */
.tool-grid {
    list-style: none;
    margin: 1.4rem 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.tool-grid--game { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-card {
    --card-accent: var(--accent);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-height: 235px;
    padding: 1.35rem 1.4rem 1.4rem;
    border: 1px solid color-mix(in srgb, var(--card-accent) 20%, var(--border));
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-accent) 13%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--fg)), var(--surface));
    box-shadow: 0 14px 34px rgba(8, 9, 25, .1), inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tool-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
    opacity: .75;
}
.tool-card:hover {
    border-color: color-mix(in srgb, var(--card-accent) 64%, var(--border));
    box-shadow: 0 22px 46px rgba(8, 9, 25, .18), 0 0 28px color-mix(in srgb, var(--card-accent) 10%, transparent);
    transform: translateY(-6px);
}
.tool-card[data-tool-id="mdeditor"] { --card-accent: #8f9cff; }
.tool-card[data-tool-id="stock-calc"] { --card-accent: #4fd4a5; }
.tool-card[data-tool-id="lucky-wheel"] { --card-accent: #ffb84d; }
.tool-card[data-tool-id="media-viewer"] { --card-accent: #f07ac3; }
.tool-card[data-tool-id="ball-tracking"] { --card-accent: #55c8ff; }
.tool-card[data-tool-id="number-grid"] { --card-accent: #ac8cff; }
.tool-card[data-tool-id="billiards"] { --card-accent: #6ed791; }
.tool-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: .2rem;
    border: 1px solid color-mix(in srgb, var(--card-accent) 38%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--card-accent) 12%, var(--surface));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent), 0 8px 20px color-mix(in srgb, var(--card-accent) 12%, transparent);
    color: var(--card-accent);
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: .94rem;
    font-weight: 850;
    letter-spacing: -.04em;
}
.tool-card h3 { margin: 0; font-size: 1.18rem; line-height: 1.4; }
.tool-card h3 a { color: var(--fg); text-decoration: none; }
.tool-card h3 a::after { content: ''; position: absolute; inset: 0; }
.tool-card p { margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.72; }
.tool-card p strong { color: var(--fg); }
.tool-card .tool-links {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: .75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    font-size: .9rem;
}
.tool-card .tool-links a {
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--card-accent) 22%, var(--border));
    border-radius: 999px;
    color: var(--muted);
    line-height: 1.3;
    text-decoration: none;
}
.tool-card .tool-links a:hover { color: var(--fg); border-color: var(--card-accent); }
.tool-card .tool-open {
    border-color: transparent !important;
    background: var(--card-accent);
    color: #10121b !important;
    font-weight: 800;
    box-shadow: 0 6px 15px color-mix(in srgb, var(--card-accent) 20%, transparent);
}
.tool-card .tool-open::after { content: ' →'; }

/* 有封面圖的卡片（`TOOLS[].cover`，見 build-site.mjs 的 toolCards()／coverBlock()）——
   沿用 tea-bot 官網遊戲牆的視覺：圖 + 對角緞帶。⚠️ 這是「有圖才長這樣」的加成款，
   不是取代 .tool-card 的基礎樣式，所以沒有 cover 的卡片完全不受影響。 */
.tool-card.has-cover { padding: 0; overflow: hidden; }
.tool-card.has-cover .tool-cover {
    position: relative; z-index: 1; display: block; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--bg);
}
.tool-card.has-cover .tool-cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s ease;
}
.tool-card.has-cover:hover .tool-cover img { transform: scale(1.06); }
.tool-ribbon {
    position: absolute; top: 12px; right: -30px; width: 130px;
    transform: rotate(38deg); text-align: center;
    background: var(--accent); color: var(--bg);
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    padding: .25rem 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    pointer-events: none;
}
.tool-card.has-cover h3 { margin-top: .7rem; padding-inline: 1.3rem; }
.tool-card.has-cover p { padding-inline: 1.3rem; }
.tool-card.has-cover .tool-links { padding-inline: 1.3rem; padding-bottom: 1.25rem; }

.home-page h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 52px 0 0;
    font-size: clamp(1.35rem, 3vw, 1.65rem);
    letter-spacing: -.02em;
}
.home-page h2::before {
    content: '';
    width: 7px;
    height: 25px;
    border-radius: 99px;
    background: linear-gradient(#a899ff, #66ddd0);
    box-shadow: 0 0 16px rgba(124, 220, 211, .28);
}
.home-page h2::after {
    content: '';
    flex: 1;
    height: 1px;
    margin-left: 4px;
    background: linear-gradient(90deg, var(--border), transparent);
}
.home-page .tool-grid + p {
    max-width: 720px;
    margin: -4px 0 42px;
    padding-left: 15px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 46%, var(--border));
    color: var(--muted);
    font-size: .91rem;
}
.home-page footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 70px;
    padding: 24px 26px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.home-page footer p { margin: 0; }

@media (max-width: 860px) {
    .tool-grid--game { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-hero { grid-template-columns: minmax(0, 1fr) 150px; }
    .home-hero__art { width: 150px; }
}

@media (max-width: 640px) {
    .home-wrap { padding: 14px 16px 64px; }
    .home-page .langbar { margin-top: 0; font-size: .78rem; }
    .home-page .langbar a { padding: 3px 8px; }
    .home-hero { grid-template-columns: 1fr; min-height: 0; margin-top: 14px; padding: 22px 20px; border-radius: 20px; }
    .home-hero__art { position: absolute; right: -26px; bottom: -28px; width: 124px; opacity: .38; }
    .home-hero h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
    .home-hero .tagline { max-width: 88%; font-size: .92rem; }
    .tool-grid,
    .tool-grid--game { grid-template-columns: 1fr; gap: 14px; }
    .tool-card { min-height: 0; }
    .home-page h2 { margin-top: 42px; }
    .home-page footer { flex-direction: column; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero__art img,
    .tool-card,
    .to-top,
    .tool-card.has-cover .tool-cover img { transition: none; }
    .home-hero__art img { animation: none; }
    .tool-card:hover { transform: none; }
}