/* ── 星爺大廳：夜空主頁 ──
   不論主題都是夜空（大廳本身就是一片星空），卡片用自己的 token；
   每張卡片用 --c / --c2 決定自己的星色。 */
.lb {
    --lb-bg: #070614;
    --lb-ink: #eef0fb;
    --lb-ink-2: #b9bdd6;
    --lb-ink-3: #8d91ad;
    --lb-glass: rgba(20, 20, 44, 0.62);
    --lb-glass-hi: rgba(32, 32, 66, 0.72);
    --lb-line: rgba(255, 255, 255, 0.09);
    --lb-line-hi: rgba(255, 255, 255, 0.18);
    --lb-gold: #ffd98a;
    --lb-ease: cubic-bezier(.16, 1, .3, 1);
    /* 夜空裡一律用深色：共用元件（Discord 提醒、反賭宣導、多人房卡）讀的是全站 token，在這裡改成深色值 */
    --color-surface: rgba(20, 20, 44, 0.62);
    --color-surface-elevated: rgba(36, 34, 70, 0.8);
    --color-border: rgba(255, 255, 255, 0.09);
    --color-text: #eef0fb;
    --color-text-secondary: #b9bdd6;
    --color-text-muted: #8d91ad;
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - var(--navbar-height));
    overflow: hidden;
    color: var(--lb-ink);
    background: transparent;   /* 夜空是全站的 body 背景＋#site-sky */
}
.lb-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) 20px 72px; }
.lb-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── 上方：問候＋今晚的天空 ── */
.lb-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(20px, 3vw, 40px); align-items: end; }
.lb-eyebrow { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.24em; color: var(--lb-gold); text-transform: uppercase; }
.lb-title { margin: 0; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.15; font-weight: 800; letter-spacing: 0.01em; }
.lb-name { background: linear-gradient(90deg, #ffe7a8, #f7a8ff 60%, #a5b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-sub { margin: 12px 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--lb-ink-2); }

.lb-status { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lb-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--lb-line-hi); background: var(--lb-glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--lb-ink); font: inherit; font-size: 0.92rem; text-decoration: none; cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .2s var(--lb-ease);
}
.lb-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-chip small { font-size: 0.8rem; color: var(--lb-ink-3); }
.lb-chip:hover { background: var(--lb-glass-hi); border-color: rgba(255, 255, 255, 0.3); }
.lb-chip:active { transform: scale(0.97); }
.lb-chip .lb-ico { width: 17px; height: 17px; color: var(--lb-gold); }
.lb-chip.is-cta { border-color: rgba(255, 217, 138, 0.55); background: linear-gradient(135deg, rgba(255, 196, 92, 0.22), rgba(240, 120, 170, 0.18)); font-weight: 700; }
.lb-chip.is-cta:hover { border-color: var(--lb-gold); }
.lb-chip.is-done { cursor: default; color: #a7f3c9; border-color: rgba(52, 211, 153, 0.35); }
.lb-chip.is-done .lb-ico { color: #34d399; }
.lb-chip.is-done:active { transform: none; }
.lb-chip[disabled] { opacity: .6; cursor: progress; }
.lb-streak { display: inline-flex; align-items: center; gap: 2px; color: #fdba74 !important; font-weight: 700; }
.lb-streak .lb-ico { width: 14px; height: 14px; color: #fb923c; }

.lb-tonight {
    position: relative; padding: 20px 22px; border-radius: 20px;
    border: 1px solid var(--lb-line); background: var(--lb-glass);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lb-tonight-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lb-tonight h2 { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; color: var(--lb-ink-2); text-transform: uppercase; }
.lb-clock { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lb-ink); }
.lb-moon-row { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.lb-moon { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 0 18px rgba(255, 240, 200, 0.25)); }
.lb-moon-facts { margin: 0; display: grid; gap: 6px; flex: 1; min-width: 0; }
.lb-moon-facts div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; }
.lb-moon-facts dt { color: var(--lb-ink-3); }
.lb-moon-facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.lb-advice { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 0.88rem; line-height: 1.5; color: var(--lb-ink); background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--adv, var(--lb-gold)); }
.lb-tonight-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; color: #93c5fd; font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.lb-tonight-link:hover { color: #bfdbfe; }
.lb-tonight-link .lb-ico { width: 16px; height: 16px; transition: transform .2s var(--lb-ease); }
.lb-tonight-link:hover .lb-ico { transform: translateX(3px); }

/* ── 目的地卡片 ── */
.lb-section-h { margin: clamp(36px, 5vw, 56px) 0 16px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2em; color: var(--lb-ink-3); text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.lb-section-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--lb-line-hi), transparent); }

.lb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lb-card {
    --c: #a78bfa; --c2: #f0abfc;
    position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 22px;
    border-radius: 20px; overflow: hidden;
    border: 1px solid var(--lb-line);
    background:
        radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%),
        var(--lb-glass);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: transform .3s var(--lb-ease), border-color .25s, box-shadow .3s;
}
.lb-card:hover, .lb-card:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent), 0 0 40px color-mix(in srgb, var(--c) 20%, transparent);
}
.lb-card-icon {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--c) 22%, transparent);
}
.lb-card-icon .lb-ico { width: 24px; height: 24px; }
.lb-card h3 { margin: 16px 0 6px; font-size: 1.22rem; font-weight: 800; line-height: 1.3; }
.lb-card-link { color: var(--lb-ink); text-decoration: none; }
.lb-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }   /* 整張卡都能點 */
.lb-card-link:focus-visible { outline: none; }
.lb-card:has(.lb-card-link:focus-visible) { outline: 2px solid var(--c); outline-offset: 3px; }
.lb-card-desc { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--lb-ink-2); }
.lb-card-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-stat { font-size: 0.92rem; color: var(--lb-ink-2); font-variant-numeric: tabular-nums; }
.lb-stat b { color: var(--lb-ink); font-weight: 800; }
.lb-stat-sub { font-size: 0.82rem; color: var(--lb-ink-3); }
.lb-go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--c); font-weight: 700; font-size: 0.92rem; }
.lb-go .lb-ico { transition: transform .25s var(--lb-ease); }
.lb-card:hover .lb-go .lb-ico { transform: translateX(4px); }
.lb-badge {
    position: absolute; top: 18px; right: 18px; z-index: 2;
    padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--lb-gold); background: rgba(255, 217, 138, 0.1); border: 1px solid rgba(255, 217, 138, 0.35);
}

/* 主打：星穹遠征，帶軌道動畫 */
.lb-card-rpg { grid-column: span 2; min-height: 260px; padding: 28px; }
.lb-card-rpg h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.lb-card-rpg .lb-card-desc { max-width: 30em; }
.lb-card-rpg .lb-card-icon { width: 56px; height: 56px; border-radius: 16px; }
.lb-card-rpg .lb-badge { right: auto; left: 100px; top: 40px; }
.lb-orbit { position: absolute; right: -60px; top: 50%; width: 340px; height: 340px; transform: translateY(-50%); pointer-events: none; opacity: .9; }
.lb-orbit i { position: absolute; inset: var(--in); border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c) 30%, transparent); animation: lb-spin var(--t) linear infinite; }
.lb-orbit i::before { content: ''; position: absolute; top: 50%; left: -5px; width: var(--s); height: var(--s); margin-top: calc(var(--s) / -2); border-radius: 50%; background: var(--p); box-shadow: 0 0 12px var(--p); }
.lb-orbit i:nth-child(1) { --in: 110px; --t: 14s; --s: 8px; --p: #fcd34d; }
.lb-orbit i:nth-child(2) { --in: 62px; --t: 26s; --s: 11px; --p: #f0abfc; }
.lb-orbit i:nth-child(3) { --in: 14px; --t: 44s; --s: 7px; --p: #93c5fd; }
.lb-orbit b { position: absolute; inset: 146px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7d6, #ffb54a 55%, #e0632b); box-shadow: 0 0 40px rgba(255, 170, 70, 0.6), 0 0 90px rgba(255, 120, 60, 0.3); }
@keyframes lb-spin { to { transform: rotate(360deg); } }
/* 內容疊在軌道動畫上面；標題不能設 relative，不然整卡連結的 ::after 只會蓋住標題那一行 */
.lb-card-rpg > :not(.lb-orbit):not(.lb-badge):not(h3) { position: relative; }
.lb-card-rpg .lb-card-link::after { z-index: 2; }
.lb-card-rpg .lb-card-foot { max-width: 60%; }

/* 觀星台：子連結要壓在整卡連結上面 */
.lb-card-obs { grid-row: span 1; }
.lb-sublinks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 2; margin-top: auto; padding-top: 16px; }
.lb-sublinks a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--lb-ink);
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--lb-line);
    transition: background-color .2s, border-color .2s;
}
.lb-sublinks a:hover { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: color-mix(in srgb, var(--c) 50%, transparent); }

/* 未開放 */
.lb-card.is-locked { filter: saturate(.4); }
.lb-card.is-locked .lb-card-link { cursor: not-allowed; }
.lb-card.is-locked:hover { transform: none; box-shadow: none; border-color: var(--lb-line); }

/* ── 版面斷點 ── */
@media (max-width: 960px) {
    .lb-top { grid-template-columns: 1fr; align-items: stretch; }
    .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lb-card-rpg .lb-card-foot { max-width: none; }
}
@media (max-width: 640px) {
    .lb-wrap { padding: 28px 16px 56px; }
    .lb-grid { grid-template-columns: 1fr; }
    .lb-card-rpg { grid-column: auto; }
    .lb-orbit { right: -150px; opacity: .45; }
    .lb-card-rpg .lb-badge { left: auto; right: 18px; top: 18px; }
    .lb-card { min-height: 0; }
    .lb-moon { width: 76px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .lb-orbit i { animation: none; }
    .lb-card, .lb-chip, .lb-go .lb-ico { transition: none; }
    .lb-card:hover, .lb-card:focus-within { transform: none; }
}