/* ── 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;
    --navbar-height: 56px;
}

/* ── Dark Theme (default) ── */
:root {
    --color-bg: #0c0a1a;
    --body-bg: var(--color-bg);
    --color-surface: #151229;
    --color-surface-elevated: #1e1a36;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-subtle: rgba(255, 255, 255, 0.04);

    --color-text: #eae8f0;
    --color-text-secondary: #a9a3be;
    --color-text-muted: #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: #6a5a6e;
    --color-text-muted: #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);
}

/* ── 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;
}
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; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-md);
    font-size: 0.82rem; font-weight: var(--font-weight-medium);
    transition: all var(--transition-base); line-height: 1.4;
}
.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); }

.card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); 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 8px;
    border-radius: var(--radius-full); font-size: 0.7rem; 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.5rem; font-weight: var(--font-weight-bold); letter-spacing: -0.02em;
}
.page-header p {
    color: var(--color-text-muted); font-size: 0.85rem; margin-top: 6px; max-width: 520px;
}

.section-title {
    font-size: 0.7rem; 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: 0; 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; }