/* ============================================================
   幸運草 — 綠金 × 科技 × 金錢感 主題
   premium fintech/casino style，疊加於 Bootstrap 5
   ============================================================ */

:root {
    --brand1:  #1faa59;   /* 幸運草綠 */
    --brand1d: #16864a;   /* 深綠 */
    --brand2:  #e8b923;   /* 金 */
    --brand3:  #b8860b;   /* 深金 */
    --cyan:    #16b9a6;   /* 科技青 */
    --gold:    #e8b923;
    --ink:     #16241c;   /* 主要文字（墨綠黑） */
    --ink-deep:#091310;   /* 深色區塊底 */
    --muted:   #69786f;   /* 次要文字 */
    --bg:      #f2f6f3;   /* 頁面底 */
    --card:    #ffffff;
    --line:    #e3eae5;
    --grad-main: linear-gradient(135deg, #1faa59 0%, #37c46f 45%, #e8b923 100%);
    --grad-gold: linear-gradient(135deg, #f9e08a 0%, #e8b923 50%, #b8860b 100%);
    --grad-green:linear-gradient(135deg, #1faa59 0%, #16864a 100%);
    --shadow:  0 14px 36px rgba(16, 120, 70, .16);
    --glow-gold: 0 0 24px rgba(232, 185, 35, .5);
    --grid: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
}

/* ---------- 基礎 ---------- */
html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(900px 480px at 88% -10%, rgba(232,185,35,.10), transparent 60%),
        radial-gradient(820px 440px at -8% 6%, rgba(31,170,89,.10), transparent 55%),
        var(--bg);
    color: var(--ink);
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    min-height: 100vh;
}
a { color: var(--brand1d); text-decoration: none; transition: color .2s; }
a:hover { color: var(--brand3); }
h1,h2,h3,h4,h5,h6 { color: var(--ink); font-weight: 800; letter-spacing: .2px; }
.text-muted, .text-secondary { color: var(--muted) !important; }
.text-gradient { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.text-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
::selection { background: var(--brand1); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e7ede9; }
::-webkit-scrollbar-thumb { background: #b9ccc1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand1); }

/* ---------- 導覽列（白底玻璃） ---------- */
.navbar.bg-white {
    background: rgba(255,255,255,.86) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 20px rgba(16,120,70,.06);
}
.navbar-brand { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; font-size: 1.3rem; }
.navbar .nav-link { color: var(--ink) !important; font-weight: 600; position: relative; }
.navbar .nav-link::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:3px; border-radius:3px; background: var(--grad-main); transform: scaleX(0); transform-origin:left; transition: transform .3s; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .nav-link.active { color: var(--brand1d) !important; }
.dropdown-menu { border-color: var(--line); box-shadow: var(--shadow); border-radius: 14px; }

/* ---------- Hero（深色科技感） ---------- */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(1000px 520px at 80% -20%, rgba(232,185,35,.28), transparent 55%),
        radial-gradient(900px 520px at 10% 120%, rgba(31,170,89,.40), transparent 55%),
        linear-gradient(160deg, #0d2018, var(--ink-deep)) !important;
    border-bottom: 1px solid rgba(232,185,35,.25);
}
.hero::before { /* 科技格線 */
    content:""; position:absolute; inset:0; background-image: var(--grid); background-size: 44px 44px;
    mask-image: radial-gradient(700px 380px at 50% 30%, #000 60%, transparent);
    opacity:.5;
}
.hero::after { /* 金色光暈 */
    content:""; position:absolute; inset:-40%;
    background: radial-gradient(circle at 70% 30%, rgba(232,185,35,.22), transparent 40%);
    animation: heroFloat 16s ease-in-out infinite alternate;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1, .hero .display-4 { background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow: 0 2px 30px rgba(232,185,35,.25); animation: fadeUp .8s ease both; }
.hero .lead { color: rgba(255,255,255,.82) !important; animation: fadeUp .8s .1s ease both; }
.hero form { animation: fadeUp .8s .2s ease both; }
.hero .badge.text-bg-light { background: rgba(255,255,255,.12) !important; color: #ffe9a8 !important; border: 1px solid rgba(232,185,35,.4); backdrop-filter: blur(4px); }
.hero .form-control { background: rgba(255,255,255,.95); border: none; }
.hero .text-secondary { color: rgba(255,255,255,.6) !important; }
.hero .badge.text-bg-secondary { background: rgba(255,255,255,.14) !important; color:#fff !important; }
@keyframes heroFloat { 0% { transform: translate(0,0) rotate(0); } 100% { transform: translate(3%,2%) rotate(6deg); } }

/* ---------- 卡片 ---------- */
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: var(--ink);
    box-shadow: 0 6px 18px rgba(16,120,70,.06);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #bfe6cf; }
a.card { color: inherit; }
.card-title, .card-body h2, .card-body h5, .card-body h6 { color: var(--ink); }
.card-footer { background: #f7faf8; border-top: 1px solid var(--line); }
.card-img-top { border-top-left-radius: 18px; border-top-right-radius: 18px; }

.casino-card { position: relative; overflow: hidden; }
.casino-card::after { content:""; position:absolute; inset:0; border-radius:18px; border:1px solid transparent; transition:border-color .25s; }
.casino-card:hover::after { border-color: rgba(232,185,35,.55); box-shadow: inset 0 0 22px rgba(232,185,35,.12); }
.casino-card::before { content:""; position:absolute; top:0; left:-120%; width:80%; height:100%; background: linear-gradient(120deg, transparent, rgba(232,185,35,.16), transparent); transform: skewX(-20deg); transition:left .6s; }
.casino-card:hover::before { left:130%; }
.casino-logo { object-fit: cover; border-radius: 12px; background:#fff; border:1px solid var(--line); }

/* ---------- 按鈕 ---------- */
.btn { border-radius: 999px; font-weight: 700; transition: transform .15s, box-shadow .25s, filter .2s; }
.btn:active { transform: scale(.96); }
/* 主要行動鈕（金，象徵金錢） */
.btn-warning { background: var(--grad-gold); border: none; color: #3a2c00; box-shadow: 0 8px 20px rgba(232,185,35,.4); }
.btn-warning:hover { color:#3a2c00; filter: brightness(1.06); transform: translateY(-2px); box-shadow: var(--glow-gold), 0 10px 26px rgba(232,185,35,.5); }
/* 次要鈕（綠） */
.btn-primary { background: var(--grad-green); border: none; color:#fff; box-shadow: 0 8px 20px rgba(31,170,89,.32); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31,170,89,.45); }
.btn-outline-primary { color: var(--brand1d); border-color: var(--brand1); }
.btn-outline-primary:hover { background: var(--brand1); color:#fff; }
.btn-outline-warning { color: #9a7400; border-color: var(--gold); }
.btn-outline-warning:hover { background: var(--gold); color: #3a2c00; }
.btn-outline-danger { color: #d33; border-color: #ef6a6a; }
.btn-outline-danger:hover { background: #e8553f; color:#fff; }
.btn-danger { background: #e8553f; border: none; }
.btn-success { background: var(--grad-green); border:none; }
.btn-outline-secondary, .btn-outline-dark { color: var(--ink); border-color: #c9d4cd; }
.btn-outline-secondary:hover, .btn-outline-dark:hover { background: #eaf1ec; color: var(--ink); }
.btn-dark { background: var(--ink); border: none; }
.btn-light { background:#fff; color: var(--ink); border:none; font-weight:700; }

/* ---------- 表單 ---------- */
.form-control, .form-select { background:#fff; border:1px solid #d6e0d9; color: var(--ink); border-radius: 12px; }
.form-control:focus, .form-select:focus { border-color: var(--brand1); color: var(--ink); box-shadow: 0 0 0 .25rem rgba(31,170,89,.18); }
.form-control::placeholder { color:#9fb0a6; }
.input-group-text { background:#eef4f0; border-color:#d6e0d9; color: var(--muted); }

/* ---------- 列表 / 表格 ---------- */
.list-group-item { background:#fff; border-color: var(--line); color: var(--ink); transition: background .2s, padding-left .2s; }
.list-group-item-action:hover { background:#eaf6ef; color: var(--ink); padding-left: 1.25rem; }
.list-group-item.active { background: var(--grad-green); border:none; color:#fff; }
.table { color: var(--ink); --bs-table-bg: transparent; }
.table > :not(caption) > * > * { background: transparent; color: var(--ink); }
.table-dark { --bs-table-bg: var(--ink); --bs-table-color:#fff; }
.table-dark th, .table-dark td, thead.table-dark th { background-color: var(--ink) !important; color:#fff !important; }
.table-dark a { color:#ffe9a8; }
.table-hover > tbody > tr:hover > * { background:#eaf6ef; }
.table-light, .table-light > * { --bs-table-bg:#eef4f0; color: var(--ink) !important; }

/* ---------- 徽章 ---------- */
.badge { border-radius: 999px; font-weight: 700; }
.text-bg-primary { background: var(--brand1) !important; }
.text-bg-warning { background: var(--gold) !important; color:#3a2c00 !important; }
.text-bg-success { background:#16a34a !important; color:#fff !important; }
.text-bg-info { background: var(--cyan) !important; color:#04241f !important; }
.text-bg-danger { background:#e8553f !important; color:#fff !important; }
.text-bg-secondary { background:#eaf1ec !important; color:#4f5e55 !important; }
.text-bg-light { background:#eef4f0 !important; color:#4f5e55 !important; }
.text-warning { color: var(--brand3) !important; }

/* ---------- 分頁 ---------- */
.pagination { flex-wrap: wrap; gap: 4px; }
.page-link { color: var(--brand1d); border-color: var(--line); border-radius: 10px !important; }
.page-link:hover { background: #eaf6ef; color: var(--brand1d); }
.page-item.active .page-link { background: var(--brand1); border-color: var(--brand1); color: #fff; }
.page-item.disabled .page-link { color: #b6c2ba; }

/* ---------- 麵包屑 / accordion ---------- */
.breadcrumb { background: transparent; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--muted); }
.accordion { --bs-accordion-bg:#fff; --bs-accordion-border-color: var(--line); }
.accordion-button { color: var(--ink); font-weight: 700; }
.accordion-button:not(.collapsed) { background:#eaf6ef; color: var(--brand1d); box-shadow:none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(31,170,89,.18); }

/* ---------- 警示 ---------- */
.alert { border-radius: 14px; border:1px solid transparent; }
.alert-success { background:#e6f7ee; border-color:#bce8d0; color:#0c7a44; }
.alert-danger  { background:#fdeceb; border-color:#f6c9c2; color:#b3402c; }
.alert-info    { background:#e6f7f4; border-color:#bce8e0; color:#0a6459; }
.alert-warning { background:#fbf3da; border-color:#f0e0a6; color:#8a6d08; }
.alert-secondary { background:#eef4f0; color:#4f5e55; }

/* ---------- 頁尾（深色 + 金頂線） ---------- */
footer.bg-dark { background: var(--ink-deep) !important; border-top: 3px solid transparent !important; border-image: var(--grad-gold) 1; }
footer .link-secondary { color:#9fb3a8 !important; }
footer .link-secondary:hover { color: var(--gold) !important; }
footer .text-white { color:#fff !important; }

/* ---------- 後台側欄（深墨綠） ---------- */
.admin-sidebar { flex:0 0 240px; width:240px; min-height:100vh; position:sticky; top:0; color:#fff;
    background: linear-gradient(180deg, #0f3d2e, var(--ink-deep)) !important; border-right:1px solid rgba(232,185,35,.22); }
.admin-sidebar .navbar-brand { -webkit-text-fill-color:#fff; background:none; }
.admin-sidebar .nav-link { border-radius:12px; color:#dCEAE0 !important; white-space:nowrap; transition: background .2s, padding-left .2s; }
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.10); padding-left:1.1rem; }
.admin-sidebar .nav-link.active { background: var(--grad-green); }
.admin-sidebar ~ .flex-grow-1 { min-width:0; }
@media (max-width:768px){ .admin-sidebar{flex:0 0 60px; width:60px; padding:.5rem !important;} .admin-sidebar .navbar-brand,.admin-sidebar .nav-link{font-size:0; text-align:center;} .admin-sidebar .nav-link::first-letter{font-size:1.3rem;} }
.bg-body-tertiary { background: var(--bg) !important; }

/* ---------- 文章內文 ---------- */
.article-body { font-size:1.06rem; line-height:1.95; color:#26352c; }
.article-body img { max-width:100%; height:auto; border-radius:12px; margin:.6rem 0; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { margin:1.6rem 0 .8rem; font-weight:700; line-height:1.4; }
.article-body h1 { font-size:1.6rem; } .article-body h2 { font-size:1.4rem; } .article-body h3 { font-size:1.2rem; }
.article-body h2, .article-body h3 { padding-left:.6rem; border-left:4px solid var(--brand, #1f9d55); }
.article-body p { margin:0 0 1rem; }
.article-body a { color:#0f7a45; text-decoration:underline; word-break:break-word; }
.article-body ul, .article-body ol { margin:0 0 1rem 1.2rem; }
.article-body blockquote { margin:1.2rem 0; padding:.6rem 1rem; border-left:4px solid #d9b73a;
    background:#faf7ec; border-radius:8px; color:#4a4636; }
/* 文章表格 */
.article-body .table-wrap { overflow-x:auto; margin:1.4rem 0; border-radius:10px; box-shadow:0 0 0 1px #e2e8e4; }
.article-body table { width:100%; border-collapse:collapse; font-size:.98rem; background:#fff; }
.article-body th, .article-body td { padding:.7rem .9rem; border:1px solid #e2e8e4; text-align:left; vertical-align:middle; }
.article-body thead th, .article-body tr:first-child td, .article-body tr:first-child th {
    background:linear-gradient(120deg,#0f3d2e,#13633f); color:#fff; font-weight:700; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td { background:#f6faf7; }
.article-body tbody tr:hover td { background:#eef7f0; }

/* ---------- 大平台元件 ---------- */
.page-hero { position:relative; overflow:hidden; color:#fff; padding:2.6rem 0; margin-bottom:1.8rem;
    background: radial-gradient(700px 320px at 85% -30%, rgba(232,185,35,.30), transparent 55%), linear-gradient(120deg, #0f3d2e, #0c2a20 60%, var(--ink-deep)) !important;
    border-bottom:3px solid transparent; border-image: var(--grad-gold) 1; }
.page-hero::before { content:""; position:absolute; inset:0; background-image: var(--grid); background-size:38px 38px; opacity:.4; }
.page-hero > .container { position:relative; z-index:1; }
.page-hero h1 { background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.page-hero .lead { color: rgba(255,255,255,.8) !important; }

.stats-band { background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow: var(--shadow); }
.stat-num { font-size:2.3rem; font-weight:900; line-height:1; background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-num.text-gradient, .stat-num.text-warning, .stat-num.text-info, .stat-num.text-danger, .stat-num.text-success { -webkit-text-fill-color:transparent; }

.section-head { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; font-weight:800; }
.section-head::after { content:""; flex:1; height:2px; background: linear-gradient(90deg, var(--gold), transparent); }

.feature-card { border-radius:18px; transition: transform .25s, box-shadow .25s; }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.feature-ico { width:58px; height:58px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; color:#fff;
    background: var(--grad-green); box-shadow: 0 10px 22px rgba(31,170,89,.35); border:1px solid rgba(232,185,35,.4); }

.cta-band { position:relative; overflow:hidden; border-radius:24px; color:#fff; padding:2.8rem;
    background: radial-gradient(600px 300px at 80% -40%, rgba(232,185,35,.35), transparent 55%), linear-gradient(120deg, #16864a, #0f3d2e) !important;
    box-shadow: 0 20px 44px rgba(15,61,46,.4); }
.cta-band::before { content:""; position:absolute; inset:0; background-image: var(--grid); background-size:40px 40px; opacity:.35; }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; }

.trust-item { display:flex; align-items:center; gap:.6rem; font-weight:700; color: var(--ink); }
.trust-item .ico { font-size:1.4rem; }

.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; gap:.8rem; width:max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-chip { white-space:nowrap; padding:.5rem 1rem; border-radius:999px; background:#fff; border:1px solid rgba(232,185,35,.4); color: var(--ink); font-weight:700; font-size:.9rem; box-shadow: 0 2px 10px rgba(232,185,35,.12); }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

.rank-badge { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:900; color:#fff; flex-shrink:0; }
.rank-1 { background: linear-gradient(135deg,#f9e08a,#e8b923); color:#3a2c00; }
.rank-2 { background: linear-gradient(135deg,#d7dee6,#9aa7b2); }
.rank-3 { background: linear-gradient(135deg,#e6a86b,#c47e3f); }

/* 會員中心選單 */
.member-menu { display:flex; gap:.4rem; }
.member-link { white-space:nowrap; color:var(--ink); text-decoration:none; padding:.55rem .9rem; border-radius:12px; font-weight:700; font-size:.95rem; border:1px solid transparent; transition: background .2s, color .2s; }
.member-link:hover { background:#eaf6ef; color: var(--brand1d); }
.member-link.active { background: var(--grad-green); color:#fff; box-shadow:0 6px 16px rgba(31,170,89,.3); }
@media (max-width:991.98px){ .member-menu{ flex-direction:row; overflow-x:auto; padding-bottom:.4rem; } .member-menu::-webkit-scrollbar{height:4px;} }
@media (min-width:992px){ .member-menu{ flex-direction:column; position:sticky; top:1rem; background:#fff; border:1px solid var(--line); border-radius:16px; padding:.5rem; box-shadow: 0 6px 18px rgba(16,120,70,.06);} }

/* 進場動畫 */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
@keyframes fadeUp { from { opacity:0; transform: translateY(22px);} to { opacity:1; transform:none;} }
.reveal.delay-1{transition-delay:.08s}.reveal.delay-2{transition-delay:.16s}.reveal.delay-3{transition-delay:.24s}
.fav-btn.just-faved { animation: pop .4s ease; }
@keyframes pop { 0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)} }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .reveal { opacity:1; transform:none; }
}

/* ── 彩券開獎號碼球（全遊戲統一大小，以賓果獎號為準） ── */
.lt-balls { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.lt-ball {
    display:inline-flex; align-items:center; justify-content:center;
    width:clamp(30px, 8vw, 40px); height:clamp(30px, 8vw, 40px); border-radius:50%; flex:0 0 auto;
    font-size:clamp(.85rem, 3.2vw, 1.05rem); font-weight:700; color:#fff;
    background:radial-gradient(circle at 32% 28%, #ff7a7a, #d62828 70%);
    box-shadow:0 1px 2px rgba(0,0,0,.25), inset 0 -2px 3px rgba(0,0,0,.15);
}
.lt-ball.special {
    color:#5a3e00;
    background:radial-gradient(circle at 32% 28%, #ffe28a, #f2a900 70%);
}
.lt-special-wrap { display:inline-flex; align-items:center; gap:.3rem; }
.lt-special-wrap .lbl { font-size:.8rem; color:#888; }

/* ── 彩券開獎卡片（手機友善，取代寬表格） ── */
.lt-draw { border:1px solid #eee; border-radius:.6rem; }
.lt-draw .lt-period { font-weight:700; }
.lt-draw .lt-new { background:#fff3cd; }
.lt-draw-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.25rem; margin-bottom:.5rem; }

.trust-band { background:#e7f7ee; }