/* ── 遊戲大廳 ── */
.games-page { padding-bottom: var(--space-2xl); }
.games-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.wallet-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-full);
    background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}
.wallet-pill svg { width: 18px; height: 18px; color: var(--color-accent); }
.wallet-pill-amount { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.wallet-pill-unit { font-size: 0.72rem; color: var(--color-text-muted); }

.games-link-note {
    display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-lg);
    border-radius: var(--radius-xl); background: var(--color-surface); border: 1px dashed var(--color-border);
    margin-bottom: var(--space-xl);
}
.games-link-note > svg { width: 32px; height: 32px; color: #5865F2; flex-shrink: 0; }
.games-link-note b { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.games-link-note p { font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--space-sm); }
.games-link-note code { font-family: ui-monospace, Menlo, monospace; background: var(--color-surface-elevated); padding: 1px 6px; border-radius: 4px; }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); }
.game-card {
    display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden;
    background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
}
.game-card.is-live:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.game-card.is-soon { opacity: 0.7; }
.game-card-art { height: 140px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 2.6rem; position: relative; overflow: hidden; }
.game-art-slots { background: radial-gradient(600px 200px at 50% 120%, rgba(243,159,90,0.35), transparent 60%), linear-gradient(160deg, #2a1440, #451952 60%, #662549); }
.game-art-reel { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 76px; border-radius: 10px; background: rgba(255,255,255,0.92); box-shadow: inset 0 -8px 16px rgba(0,0,0,0.15), 0 6px 18px rgba(0,0,0,0.35); animation: art-bob 2.4s ease-in-out infinite; }
.game-art-reel:nth-child(2) { animation-delay: 0.2s; } .game-art-reel:nth-child(3) { animation-delay: 0.4s; }
@keyframes art-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.game-art-soon { background: var(--color-surface-elevated); color: var(--color-text-muted); font-size: 2.2rem; }
.game-card-body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.game-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.game-card h2 { font-size: 1.05rem; font-weight: var(--font-weight-semibold); }
.game-card p { font-size: 0.82rem; line-height: 1.6; color: var(--color-text-secondary); }
.game-card-jackpot { margin-top: 10px; font-size: 0.76rem; color: var(--color-text-muted); }
.game-card-jackpot b { color: var(--color-accent); font-variant-numeric: tabular-nums; }

.game-art-bj { background: radial-gradient(500px 200px at 50% 110%, rgba(245,197,107,0.25), transparent 60%), linear-gradient(160deg, #17513a, #0b2e21); gap: 0; }
.game-art-bj .art-card { display: inline-block; margin-left: -22px; transform: rotate(calc((var(--i) - 1) * 10deg)) translateY(calc(abs(var(--i) - 1) * 4px)); filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45)); animation: art-bob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.15s); }
.game-art-bj .art-card:first-child { margin-left: 0; }
.game-art-sicbo { background: radial-gradient(500px 200px at 50% 110%, rgba(208,38,62,0.3), transparent 60%), linear-gradient(160deg, #3a1a2e, #1f0f22); gap: 14px; }
.game-art-sicbo .svg-die { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5)); animation: art-bob 2.4s ease-in-out infinite; }
.game-art-sicbo .svg-die:nth-child(2) { animation-delay: 0.2s; } .game-art-sicbo .svg-die:nth-child(3) { animation-delay: 0.4s; }

.games-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rules-btn { display: inline-flex; align-items: center; gap: 6px; }
.rules-btn svg { width: 14px; height: 14px; }
.btn-cluster { display: inline-flex; gap: 6px; }

/* ═══════════════ 星爺遊戲大廳（版面共用 lobby.css 的 .lb 夜空與卡片） ═══════════════ */
.gm-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0 8px; color: var(--lb-ink-2); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.gm-back:hover { color: var(--lb-ink); }
.gm-back .lb-ico { width: 16px; height: 16px; transition: transform .2s var(--lb-ease); }
.gm-back:hover .lb-ico { transform: translateX(-3px); }

/* 獎池看板 */
.gm-pot-ico { width: 22px; height: 22px; color: var(--lb-gold); }
.gm-pot-total { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gm-pot-total b { font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1;
    background: linear-gradient(90deg, #ffe7a8, #ffb86b 55%, #ff8fab); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gm-pot-total small { font-size: 0.82rem; color: var(--lb-ink-3); }
.gm-pot-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.gm-pot-list a { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--lb-ink); text-decoration: none; transition: background-color .2s; }
.gm-pot-list a:hover { background: rgba(255, 255, 255, 0.06); }
.gm-pot-star { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 2px #fff inset; }
.gm-pot-name { font-size: 0.92rem; font-weight: 600; }
.gm-pot-bet { font-size: 0.76rem; color: var(--lb-ink-3); font-variant-numeric: tabular-nums; }
.gm-pot-list b { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c); min-width: 7ch; text-align: right; }

.gm-notice { margin-top: 24px; padding: 16px 18px; border-radius: 16px; border: 1px dashed rgba(255, 217, 138, 0.4); background: rgba(255, 217, 138, 0.06); }
.gm-notice b { display: block; margin-bottom: 4px; color: var(--lb-gold); }
.gm-notice p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--lb-ink-2); }
.gm .discord-hint { margin-top: 16px; }

/* 遊戲卡：上方插圖窗＋內文 */
.gm-card { padding: 0; }
.gm-card .lb-card-foot { padding-top: 14px; }
.gm-body { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 20px; }
.gm-body h3 { margin-top: 0; }
.gm-art { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
    border-bottom: 1px solid var(--lb-line);
    background: radial-gradient(260px 120px at 50% 120%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.25)); }
.gm-art::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 78% 30%, #fff, transparent),
                      radial-gradient(1px 1px at 40% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 78%, #fff, transparent),
                      radial-gradient(1px 1px at 60% 12%, #fff, transparent); }
.gm-art > * { position: relative; }
.gm-art-slots span { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 66px; border-radius: 10px; font-size: 1.9rem;
    background: linear-gradient(180deg, #fff, #e9e4f5); box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.15), 0 8px 18px rgba(0, 0, 0, 0.4); animation: art-bob 2.4s ease-in-out infinite; }
.gm-art-slots span:nth-child(2) { animation-delay: .25s; } .gm-art-slots span:nth-child(3) { animation-delay: .5s; }
.gm-art-felt .art-card { display: inline-block; margin-left: -20px; transform: rotate(calc(var(--i) * 10deg - 10deg)) translateY(calc(var(--i) * -2px)); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); transition: transform .3s var(--lb-ease); }
.gm-art-felt .art-card:first-child { margin-left: 0; }
.gm-art-poker .art-card { transform: rotate(calc(var(--i) * 14deg - 7deg)); }
.gm-card:hover .gm-art-felt .art-card { transform: rotate(calc(var(--i) * 14deg - 14deg)) translateY(-4px); }
.gm-art-dice .art-die { display: inline-block; animation: art-bob 2s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
.gm-art-turf { gap: 4px; }
.gm-art-turf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 26px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 10px, transparent 10px 20px); }
.gm-art-turf span { font-size: 2.3rem; transform: scaleX(-1); animation: gm-run .9s ease-in-out infinite; animation-delay: calc(var(--i) * .2s); }
@keyframes gm-run { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-5px); } }

/* 拉霸是主打：橫跨兩欄，插圖放左邊 */
.gm-card-slots { grid-column: span 2; flex-direction: row; }
.gm-card-slots .gm-art { width: 46%; height: auto; min-height: 200px; border-bottom: none; border-right: 1px solid var(--lb-line); }
.gm-card-slots .gm-body { padding: 26px; }
.gm-card-slots h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }

/* 多人房 */
.gm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: gm-pulse 2s ease-out infinite; order: -1; }
@keyframes gm-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }
.gm-live-sub { margin: -6px 0 14px; font-size: 0.88rem; color: var(--lb-ink-3); }
.gm .live-card { background: var(--lb-glass); border-color: var(--lb-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-height: 44px; }
.gm .room-empty { color: var(--lb-ink-3); border-color: var(--lb-line-hi); }
.gm-foot { margin-top: 40px; }

@media (max-width: 960px) {
    .gm-card-slots { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .gm-card-slots { flex-direction: column; }
    .gm-card-slots .gm-art { width: auto; min-height: 120px; border-right: none; border-bottom: 1px solid var(--lb-line); }
    .gm-card-slots .gm-body { padding: 18px 22px 20px; }
    .gm-art-slots span { width: 46px; height: 56px; font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .gm-art-slots span, .gm-art-dice .art-die, .gm-art-turf span, .gm-live-dot { animation: none; }
}

/* ═══ 遊戲大廳下方：多人房即時狀態 ═══ */
.live-wrap { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
.live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-md); }
.live-sub { font-size: 0.74rem; color: var(--color-text-muted); }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); }
.live-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); text-decoration: none; color: inherit; transition: transform 0.2s, border-color 0.2s; }
.live-card:hover { transform: translateY(-3px); border-color: #f5c56b; }
.live-card.is-bj { border-left: 4px solid #7cf5b0; } .live-card.is-poker { border-left: 4px solid #86b4f5; }
.live-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--color-text-muted); }
.live-phase { padding: 2px 8px; border-radius: 999px; background: rgba(124,245,176,0.12); color: #7cf5b0; font-weight: 600; }
.live-card.is-full .live-phase { background: rgba(255,107,122,0.12); color: #ff8b98; }
.live-name { font-size: 0.95rem; }
.live-sub2 { font-size: 0.72rem; color: var(--color-text-secondary); }
.live-players { font-size: 0.74rem; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-cta { margin-top: 4px; font-size: 0.74rem; font-weight: 700; color: #f5c56b; }
.room-empty { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: 14px; font-size: 0.82rem; }
@media (max-width: 640px) { .live-wrap { padding: var(--space-lg) 12px var(--space-2xl); } }

/* ═══ 18 歲驗證 ═══ */
.age-gate { min-height: calc(100vh - var(--navbar-height)); display: flex; align-items: center; justify-content: center; padding: var(--space-xl) var(--space-md); background: radial-gradient(800px 400px at 50% 0%, rgba(227,93,106,0.18), transparent 60%); }
.age-card { width: min(560px, 100%); text-align: center; padding: 36px 32px 28px; border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.age-badge { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; border: 4px solid #e35d6a; color: #e35d6a; font-weight: 900; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 14px; }
.age-card h1 { font-size: 1.5rem; margin: 0 0 12px; }
.age-card p { font-size: 0.88rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 10px; }
.age-note { font-size: 0.76rem !important; color: var(--color-text-muted) !important; }
.age-actions { display: grid; gap: 10px; margin: 22px 0 14px; }
.age-actions form { display: contents; }
.age-yes { width: 100%; padding: 14px 18px; font-size: 1rem; font-weight: 700; }
.age-no { width: 100%; padding: 12px 18px; }
.age-back { font-size: 0.78rem; color: var(--color-text-muted); text-decoration: none; }
.age-back:hover { color: var(--color-text); }
@media (max-width: 480px) { .age-card { padding: 28px 18px 22px; } .age-card h1 { font-size: 1.25rem; } }