/* 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; }

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

.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, .44fr);
    align-items: center;
    min-height: 300px;
    margin: 26px 0 30px;
    padding: clamp(34px, 6vw, 64px);
    border: 1px solid rgba(182, 176, 255, .32);
    border-radius: 34px;
    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: 8px 0 10px;
    font-size: clamp(3.5rem, 8vw, 6.4rem);
    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: 20px 0 0;
    color: #c9c9de;
    font-size: clamp(1rem, 2vw, 1.22rem);
    line-height: 1.75;
}
.home-hero .tagline strong { color: #fff; font-weight: 750; }
.home-hero__art {
    position: relative;
    justify-self: center;
    display: grid;
    place-items: center;
    width: clamp(210px, 23vw, 278px);
    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 廣告。 */
.house-ad {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 8px 0 34px;
    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;
}
.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; }
.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%; }
}

@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__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 { 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; }

/* 下載本頁 .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) 190px; }
    .home-hero__art { width: 190px; }
}

@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: 18px; padding: 34px 26px; border-radius: 25px; }
    .home-hero__art { position: absolute; right: -32px; bottom: -36px; width: 166px; opacity: .38; }
    .home-hero h1 { font-size: clamp(3.4rem, 20vw, 5.2rem); }
    .home-hero .tagline { max-width: 88%; font-size: .98rem; }
    .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,
    .tool-card.has-cover .tool-cover img { transition: none; }
    .home-hero__art img { animation: none; }
    .tool-card:hover { transform: none; }
}