/* ── Brand Palette (constant) ── */
:root {
    --color-deepest: #1D1A39;
    --color-deep-purple: #451952;
    --color-plum: #662549;
    --color-rose: #AE445A;
    --color-amber: #F39F5A;
    --color-blush: #E8BCB9;

    --font-primary: "TASA Explorer", system-ui, -apple-system, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 72px;
    --space-4xl: 96px;

    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 350ms ease;

    --container-max: 1080px;
    /* 含瀏海／狀態列的安全區：iOS 以 App 開啟（black-translucent 狀態列）時導覽列要往下讓，瀏覽器裡這個值是 0 */
    --navbar-top-gap: 0px;
    --navbar-height: calc(56px + env(safe-area-inset-top, 0px) + var(--navbar-top-gap));
}

/* ── 夜空底色（深色主題的 body 背景；大廳類頁面在亮色主題也用） ── */
:root {
    --night-bg:
        radial-gradient(1200px 640px at 85% -10%, rgba(99, 72, 190, 0.26), transparent 60%),
        radial-gradient(1000px 560px at -10% 105%, rgba(30, 90, 160, 0.22), transparent 60%),
        linear-gradient(180deg, #06050f 0%, #0b0a1e 55%, #110c28 100%);
}

/* ── Dark Theme (default) ── */
:root {
    --color-bg: #0c0a1a;
    --body-bg: var(--night-bg), var(--color-bg);
    /* 深色主題的面板是半透明的「液態玻璃」：透出後面的星空，配合下面的 backdrop-filter 模糊。
       elevated（選單、彈出層）比較不透明，蓋在文字上也讀得清楚 */
    --color-surface: rgba(22, 19, 44, 0.58);
    --color-surface-elevated: rgba(32, 28, 60, 0.9);
    --glass-blur: blur(16px) saturate(150%);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-subtle: rgba(255, 255, 255, 0.04);

    --color-text: #eae8f0;
    --color-text-secondary: #b3adc8;
    --color-text-muted: #8b85a5;        /* 5.6:1 on bg（HIG 4.5:1 門檻；舊值 3.6:1） */
    --color-text-faint: #6b6585;        /* 佔位字、停用狀態專用，不拿來寫資訊 */

    --color-accent: #F39F5A;
    --color-accent-hover: #f5b278;
    --color-accent-text: #0c0a1a;
    --color-accent-soft: rgba(243, 159, 90, 0.12);

    --navbar-bg: rgba(12, 10, 26, 0.85);
    --dropdown-bg: #1a1732;
    --dropdown-border: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── Light Theme ──
   Warm, layered palette drawn from the brand purples/blush rather than
   neutral grey. A tinted cream base lets white cards lift off the page,
   plum-tinted borders + shadows add depth, and a soft ambient wash on the
   body keeps large empty areas from reading as flat white. */
:root[data-theme="light"] {
    --color-bg: #f6efe9;
    --body-bg:
        radial-gradient(1100px 720px at 12% -8%, rgba(232, 188, 185, 0.42), transparent 62%),
        radial-gradient(1000px 680px at 92% 2%, rgba(243, 159, 90, 0.16), transparent 58%),
        radial-gradient(1200px 900px at 60% 108%, rgba(102, 37, 73, 0.06), transparent 60%),
        var(--color-bg);
    --color-surface: #fffdfb;
    --color-surface-elevated: #fdf5f0;
    --color-border: rgba(102, 37, 73, 0.14);
    --color-border-subtle: rgba(102, 37, 73, 0.07);

    --color-text: #2a1f38;
    --color-text-secondary: #675769;
    --color-text-muted: #74647a;        /* 4.6:1 on bg */
    --color-text-faint: #9a8996;

    --color-accent: #AE445A;
    --color-accent-hover: #93374b;
    --color-accent-text: #ffffff;
    --color-accent-soft: rgba(174, 68, 90, 0.10);

    --navbar-bg: rgba(250, 243, 238, 0.82);
    --dropdown-bg: #fffdfb;
    --dropdown-border: rgba(102, 37, 73, 0.12);

    --shadow-sm: 0 1px 2px rgba(69, 25, 82, 0.07);
    --shadow-md: 0 6px 18px rgba(69, 25, 82, 0.10);
    --shadow-lg: 0 16px 40px rgba(69, 25, 82, 0.14);
}

/* 全站預設深色：不再因為作業系統偏好亮色就自動切成亮色。
   想要亮色的人在導覽列的主題選單自己選，會存在 localStorage。 */


/* ── Astronomy Theme (red night-vision mode) ──
   Inherits the dark tokens (this selector is neither "light" nor the
   media-query default), then lays a red filter over the whole document to
   preserve dark adaptation at the eyepiece. */
:root[data-theme="astro"] {
    filter: brightness(0.55) grayscale(1) sepia(1) saturate(8) hue-rotate(-45deg) contrast(1.05);
}
/* Keep the fixed backdrop dark so the filter has near-black to tint. */
:root[data-theme="astro"] {
    --color-bg: #050307;
    --body-bg: var(--color-bg);
}

/* ── 全站星空（_base.html 的 #site-sky，畫在 js/sky.js）──
   墊在所有內容下面；頁面自己有背景圖（首頁橫幅等）的會直接蓋過去。
   亮色主題不顯示，除非頁面 body 加了 sky-always（大廳、遊戲大廳）；body.no-sky 的頁面完全不畫；body.sky-static 只畫靜態（RPG 戰場，不跟遊戲搶效能）。 */
.site-sky { position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none; }
:root[data-theme="light"] body:not(.sky-always) .site-sky,
body.no-sky .site-sky { display: none; }
:root[data-theme="light"] body.sky-always { background: var(--night-bg), #0c0a1a; background-attachment: fixed; }

/* ── 液態玻璃：主要的文字區塊／卡片在深色主題下模糊後面的星空 ──
   只挑「整塊放文字」的容器；圖片格（藝廊、成員頭像格）不加，那種一頁幾十個、模糊很吃 GPU 也沒必要。 */
:root:not([data-theme="light"]) :is(
    .card, .hw-card, .hn-item, .he-item, .login-card, .auth-card, .profile-equipment, .dash-card, .crop-modal-panel,
    .comment-login, .wl-bal, .wl-card, .al-card, .al-empty, .ac-card, .ac-myreg, .ac-reg-cta, .rf-block, .af-card,
    .fb-palette, .am-stat, .am-table-wrap, .am-q, .wx-card, .wx-tile, .wx-modal-box, .ev-hl-block, .ev-card,
    .about-card, .team-card, .search-form, .sl-item, .ev-dialog, .games-link-note, .game-card, .live-card, .age-card,
    .sp-card, .sp-dialog, .sp-card-box, .nf-list, .push-card, .push-help, .vp-sec, .vp-plotcard, .vp-details,
    .vp-static-box, .vp-modal-box, .ec-card, .ec-panel, .lb-messier, .lb-item, .lb-empty, .lb-cond-item, .px-dlg,
    .ar-card, .cl-dialog, .cl-toolbar, .cl-sort-menu, .cl-undo, .gallery-meta-grid, .astro-panel, .air-card,
    .air-search, .air-summary, .ck-card, .admin-table-wrap, .adm-card, .adm-panel, .sv-kpi, .sv-card, .admin-nav,
    .feed-post, .post-detail, .discord-hint, .gamble-notice, .pt-panel, .pt-nav, .pt-dialog, .pt-results
),
body.sky-always :is(.card, .live-card, .discord-hint, .gamble-notice, .ck-card, .air-card, .air-search, .air-summary) {
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Kill all transitions while the theme is switching (set briefly by setTheme),
   so colours jump straight to the new theme instead of fading through the old
   one — prevents the mobile menu text from momentarily reading as invisible. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
    transition: none !important;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    font-optical-sizing: auto;
    background: var(--body-bg);
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    transition: background var(--transition-base), color var(--transition-base);
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
::selection { background: var(--color-accent-soft); color: var(--color-text); }
::placeholder { color: var(--color-text-faint); opacity: 1; }
input:disabled, button:disabled, select:disabled, textarea:disabled { color: var(--color-text-faint); }

/* 減少動態：所有過場與動畫一律關掉（HIG motion.md：動作不能是唯一的意義載體，也要能關） */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
button { cursor: pointer; font-family: var(--font-primary); border: none; background: none; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-xl); }
@media (max-width: 768px) { .container { padding: 0 var(--space-md); } }

/* ── Bilingual ── */
[data-lang="en"] [data-i18n-zh],
[data-lang="zh"] [data-i18n-en] { display: none !important; }

/* ── Shared ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 8px 16px; border-radius: 10px;
    font-size: 0.84rem; font-weight: var(--font-weight-medium);
    transition: all var(--transition-base); line-height: 1.4;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-text); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-outline {
    background: transparent; color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.btn-outline:hover { border-color: var(--color-text-muted); color: var(--color-text); background: var(--color-surface); }

.card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 14px; padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.badge {
    display: inline-flex; align-items: center; padding: 2px 9px; min-height: 20px;
    border-radius: var(--radius-full); font-size: 0.72rem; font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
}
.badge-amber { background: rgba(243, 159, 90, 0.12); color: var(--color-amber); }
.badge-rose  { background: rgba(174, 68, 90, 0.12); color: #d4687a; }
.badge-purple { background: rgba(102, 37, 73, 0.15); color: var(--color-blush); }

.page-header {
    padding: var(--space-3xl) 0 var(--space-xl);
}
.page-header h1 {
    font-size: 1.75rem; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; line-height: 1.2;
}
.page-header p {
    color: var(--color-text-secondary); font-size: 0.9rem; margin-top: 8px; max-width: 560px; line-height: 1.6;
}

.section-title {
    font-size: 0.74rem; font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted); letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: var(--space-lg);
}

.avatar {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: var(--color-surface-elevated); border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 20px; height: 20px; color: var(--color-text-muted); }
.avatar-sm { width: 32px; height: 32px; }
.avatar-sm svg { width: 16px; height: 16px; }
.avatar-lg { width: 80px; height: 80px; }
.avatar-lg svg { width: 36px; height: 36px; }
.avatar-xl { width: 120px; height: 120px; }
.avatar-xl svg { width: 48px; height: 48px; }

.eyebrow {
    display: inline-block; font-size: 0.66rem; font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent);
    margin-bottom: 6px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Scroll reveal ──
   Elements with .reveal start slightly offset + transparent; global.js adds
   .is-in via IntersectionObserver. Without JS (or with reduced motion) they
   are simply visible. Stagger children with .reveal-stagger. */
/* 注意：不用 will-change: transform — 它會讓子元素的 position:fixed（燈箱、
   天氣頁 modal）改以此元素為定位基準而失效。 */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.7,.2,1); }
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-in > :nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger.is-in > :nth-child(2) { transition-delay: 60ms; }
.js .reveal-stagger.is-in > :nth-child(3) { transition-delay: 120ms; }
.js .reveal-stagger.is-in > :nth-child(4) { transition-delay: 180ms; }
.js .reveal-stagger.is-in > :nth-child(5) { transition-delay: 240ms; }
.js .reveal-stagger.is-in > :nth-child(6) { transition-delay: 300ms; }
.js .reveal-stagger.is-in > :nth-child(n+7) { transition-delay: 340ms; }

/* ── Page enter + navigation progress bar ──
   只淡入、不位移：main 若帶 transform 會成為 fixed 子元素的定位基準。 */
.js main { animation: page-in 0.3s ease-out both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
.nav-progress {
    position: fixed; top: env(safe-area-inset-top, 0px); left: 0; height: 2px; width: 0; z-index: 1000;
    background: linear-gradient(90deg, var(--color-accent), var(--color-blush));
    box-shadow: 0 0 8px var(--color-accent); opacity: 0; pointer-events: none;
    transition: width 0.25s ease, opacity 0.2s ease;
}
.nav-progress.is-on { opacity: 1; }

/* ── Toast ── */
.toast-wrap {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 900; display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none; width: min(92vw, 420px);
}
.toast {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-radius: var(--radius-lg); background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border); box-shadow: var(--shadow-lg);
    font-size: 0.8rem; color: var(--color-text); pointer-events: auto;
    animation: toast-in 0.3s cubic-bezier(.2,.9,.3,1.2) both; max-width: 100%;
}
.toast.is-out { animation: toast-out 0.25s ease forwards; }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-accent); }
.toast.success::before { background: #3fb37f; }
.toast.error::before { background: var(--color-rose); }
.toast a { color: var(--color-accent); font-weight: var(--font-weight-medium); margin-left: 4px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ── Search overlay (⌘K / navbar search) ── */
.search-overlay {
    position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh var(--space-md) var(--space-md);
    background: rgba(5, 4, 10, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base);
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-box {
    width: min(100%, 560px, calc(100vw - 24px)); background: var(--dropdown-bg); border: 1px solid var(--dropdown-border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
    transform: translateY(-8px) scale(0.98); transition: transform var(--transition-base);
}
.search-overlay.open .search-box { transform: none; }
.search-box-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--color-border); }
.search-box-row svg { width: 18px; height: 18px; color: var(--color-text-muted); flex-shrink: 0; }
.search-box-row input {
    flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 0;
    font-family: var(--font-primary); font-size: 1rem; color: var(--color-text); outline: none;
}
.search-box-row input::placeholder { color: var(--color-text-muted); }
.search-box-kbd {
    font-size: 0.62rem; color: var(--color-text-muted); padding: 3px 7px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); font-family: var(--font-primary); cursor: pointer;
}
.search-box-kbd:hover { color: var(--color-text); }
.search-box-hints { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; }
.search-box-hints-label { width: 100%; font-size: 0.66rem; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.search-hint {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-full);
    font-size: 0.74rem; color: var(--color-text-secondary); background: var(--color-surface-elevated);
    border: 1px solid var(--color-border); transition: all var(--transition-fast);
}
.search-hint:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.search-hint svg { width: 12px; height: 12px; opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .js .reveal, .js .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ── 尚未連結 Discord 提醒（_discord_hint.html） ── */
.discord-hint { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(88, 101, 242, 0.45); background: rgba(88, 101, 242, 0.10); color: inherit; font-size: 0.82rem; line-height: 1.5; }
.discord-hint-ic { font-size: 1.3rem; flex: 0 0 auto; }
.discord-hint-body { flex: 1; min-width: 0; }
.discord-hint-body b { display: block; font-weight: 700; color: #8b95ff; margin-bottom: 2px; }
.discord-hint-body code { padding: 1px 6px; border-radius: 6px; background: rgba(88, 101, 242, 0.18); font-family: "Courier New", monospace; font-size: 0.8em; }
.discord-hint-btn { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: #5865f2; color: #fff !important; font-weight: 700; text-decoration: none; font-size: 0.8rem; white-space: nowrap; }
.discord-hint-btn:hover { filter: brightness(1.1); }
@media (max-width: 640px) { .discord-hint { flex-wrap: wrap; } .discord-hint-btn { width: 100%; text-align: center; } }

/* ── 反賭宣導（_gamble_notice.html，所有遊戲廳底部） ── */
.gamble-notice { display: flex; gap: 12px; align-items: flex-start; margin: var(--space-xl) 0 var(--space-lg); padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(227, 93, 106, 0.4); background: rgba(227, 93, 106, 0.08); font-size: 0.78rem; line-height: 1.6; color: var(--color-text-secondary); }
.gamble-notice-ic { font-size: 1.2rem; flex: 0 0 auto; }
.gamble-notice-body b { display: block; color: #ff8b98; font-size: 0.86rem; margin-bottom: 4px; }
.gamble-notice-body p { margin: 0 0 4px; }
.gamble-notice-body p:last-child { margin: 0; }


/* ── 全站小字下限（HIG typography：桌面最小 10pt≈13px、資訊性小字不低於 12px）── */
.badge, .eyebrow, .section-title, .mini-stats, .feed-post-time, .feed-post-meta, .comment-meta, .comment-hint,
.gallery-info-meta, .member-joined, .member-stats, .member-handle, .team-handle, .profile-handle,
.hn-date, .he-left, .he-month, .ev-card-wd, .ev-cd-lbl, .sl-sub, .sg-meta, .fav-sub, .form-help, .field-status,
.wx-stat-name, .wx-updated, .wx-tile-src, .wx-legend, .wx-fact-label, .about-stat-lbl, .home-cta-lbl,
.footer-copy, .footer-credits, .footer-sub, .copyright, .tool-status, .tool-desc, .filter-btn {
    font-size: max(0.76rem, 12px);
}
.filter-btn, .sort-btn { min-height: 34px; }

/* ── PWA：以 App（獨立視窗）開啟時的手感（2026-09-23）── */
html.is-standalone, html.is-standalone body { overscroll-behavior-y: none; }   /* 不要整頁回彈、不要下拉重整 */
html.is-standalone { -webkit-tap-highlight-color: transparent; }
html.is-standalone .site-navbar, html.is-standalone button, html.is-standalone .btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pwa-banner {
    position: fixed; z-index: 1200; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 20px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
    width: min(520px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: rgba(24, 22, 40, .97); border: 1px solid rgba(120,140,255,.45); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); color: var(--color-text);
}
.pwa-banner.is-in { transform: translate(-50%, 0); opacity: 1; }
.pwa-banner { overflow: hidden; }
.pwa-banner-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(0); opacity: .8; }
.pwa-banner-timer.is-run { animation: pwa-idle 3s linear forwards; }
@keyframes pwa-idle { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.pwa-banner.is-flying { transition: transform .5s cubic-bezier(.5, 0, .75, 0), opacity .5s ease; transform-origin: center; pointer-events: none; }
/* 安裝步驟教學（2026-09-24） */
.pwa-guide { margin: auto; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--dropdown-bg); color: var(--color-text);
    padding: 20px; width: min(420px, calc(100vw - 32px)); }
.pwa-guide::backdrop { background: rgba(0, 0, 0, .55); }
.pwa-guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pwa-guide-head img { width: 44px; height: 44px; border-radius: 12px; }
.pwa-guide-head b { font-size: 1.02rem; }
.pwa-guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pwa-guide-steps li { display: flex; align-items: center; gap: 10px; font-size: .88rem; line-height: 1.5; }
.pwa-step-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-text);
    font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pwa-step-ico { flex: 0 0 32px; height: 32px; border-radius: 9px; background: var(--color-surface-elevated); color: var(--color-accent);
    display: inline-flex; align-items: center; justify-content: center; }
.pwa-guide-note { font-size: .78rem; color: var(--color-text-muted); margin: 14px 0 0; line-height: 1.6; }
.pwa-guide-acts { display: flex; justify-content: flex-end; margin-top: 16px; }
.pwa-banner-ico { width: 44px; height: 44px; flex: none; }
.pwa-banner-txt { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.45; }
.pwa-banner-txt b { display: block; }
.pwa-banner-txt small { display: block; color: var(--color-text-secondary); font-size: .78rem; }
.pwa-banner-acts { display: flex; gap: 6px; flex: none; }
@media (max-width: 480px) { .pwa-banner { flex-wrap: wrap; } .pwa-banner-acts { width: 100%; justify-content: flex-end; } }

/* 手機：navbar 上緣多留一點空白。iOS Safari 26 會在畫面最上緣做模糊漸層（液態玻璃的邊緣效果），
   按鈕離太近就被糊到；桌機 Chrome 模擬看不出來 */
@media (max-width: 768px) {
    :root { --navbar-top-gap: 12px; }
}

/* 影像藝廊的影片標記（藝廊列表、首頁精選共用） */
.gallery-thumb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%;
    background: rgba(10, 8, 24, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1; }
.gallery-thumb-play svg { width: 20px; height: 20px; margin-left: 2px; }