:root {
    --brand: #16a34a; --brand-mid: #22c55e; --brand-dark: #15803d;
    --brand-pale: #f0faf4; --brand-pale-2: #dcfce7;
    --ink: #0f1117; --ink-2: #374151; --muted: #6b7280; --muted-light: #9ca3af;
    --surface: #f8fafb; --surface-2: #f1f5f9; --card-bg: #ffffff;
    --card-border: rgba(0,0,0,0.07);
    --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px var(--card-border);
    --card-shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 0 0 1px var(--card-border);
    --nav-bg: rgba(255,255,255,0.88); --nav-border: rgba(0,0,0,0.08);
    --radius-sm: 8px; --radius: 14px; --radius-lg: 20px;
    --transition-fast: 0.18s cubic-bezier(0.4,0,0.2,1);
    --font-display: 'Syne', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'Fira Code', monospace;
}
[data-bs-theme="dark"] {
    --brand-pale: rgba(22,163,74,.1); --brand-pale-2: rgba(22,163,74,.18);
    --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; --muted-light: #64748b;
    --surface: #0d1117; --surface-2: #161b27; --card-bg: #1a2035;
    --card-border: rgba(255,255,255,.07);
    --card-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 0 1px var(--card-border);
    --card-shadow-md: 0 4px 16px rgba(0,0,0,.35), 0 0 0 1px var(--card-border);
    --nav-bg: rgba(13,17,23,0.88); --nav-border: rgba(255,255,255,.07);
}
* { box-sizing: border-box; }
body { font-family: var(--font-body); background: var(--surface); color: var(--ink); transition: background .3s, color .3s; }
code, .mono { font-family: var(--font-mono); }

.bk-nav {
    background: var(--nav-bg); backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--nav-border); padding: .875rem 0;
    position: sticky; top: 0; z-index: 1030;
}
.bk-nav .navbar-brand {
    font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
    letter-spacing: -.03em; color: var(--brand) !important; text-decoration: none;
    display: flex; align-items: center; gap: .5rem;
}
.brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; animation: brand-pulse 3s ease-in-out infinite; }
@keyframes brand-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.6;transform:scale(.85);} }

.bk-game-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1.1rem; border-radius: 100px;
    border: 1px solid var(--card-border); background: var(--card-bg);
    box-shadow: var(--card-shadow); font-size: .82rem; font-weight: 700;
    color: var(--brand); text-decoration: none; transition: all var(--transition-fast);
}
.bk-game-btn:hover { border-color: rgba(22,163,74,.35); background: var(--brand-pale); color: var(--brand-dark); transform: translateY(-1px); }

.bk-pill-link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem 1rem; border-radius: 100px; font-size: .82rem; font-weight: 700;
    color: var(--ink-2); text-decoration: none; border: 1px solid transparent; transition: all var(--transition-fast);
}
.bk-pill-link:hover, .bk-pill-link.active { background: var(--brand-pale); color: var(--brand-dark); }

.theme-btn {
    width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--card-border);
    background: var(--card-bg); display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; cursor: pointer; box-shadow: var(--card-shadow); transition: transform var(--transition-fast);
}
.theme-btn:hover { transform: scale(1.08); background: var(--brand-pale); }

.glass-card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: var(--radius-lg); }
.eyebrow {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--brand); background: var(--brand-pale);
    border: 1px solid rgba(22,163,74,.18); border-radius: 100px; padding: .32rem .8rem;
}

.form-label { font-weight: 600; font-size: .85rem; color: var(--ink-2); }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--card-border); background: var(--surface-2); color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(22,163,74,.14); background: var(--card-bg); }

.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; border-radius: var(--radius-sm); }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { border: 1px solid var(--brand); color: var(--brand); font-weight: 700; border-radius: var(--radius-sm); background: transparent; }
.btn-outline-brand:hover { background: var(--brand-pale); color: var(--brand-dark); }

.badge-soft { background: var(--brand-pale); color: var(--brand-dark); border: 1px solid rgba(22,163,74,.18); border-radius: 100px; font-weight: 700; font-size: .68rem; padding: .3rem .6rem; text-transform: uppercase; letter-spacing: .05em; }

footer.bk-footer { margin-top: 4rem; border-top: 1px solid var(--card-border); background: var(--card-bg); padding: 2.5rem 0; }

/* ── Admin shell ─────────────────────────────────────────── */
.bk-admin-shell { display: flex; min-height: calc(100vh - 70px); }
.bk-admin-sidebar {
    width: 230px; flex-shrink: 0; border-right: 1px solid var(--card-border);
    background: var(--card-bg); padding: 1.5rem 1rem;
}
.bk-admin-sidebar a {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: var(--radius-sm);
    color: var(--muted); text-decoration: none; font-weight: 600; font-size: .85rem; margin-bottom: .2rem;
}
.bk-admin-sidebar a:hover { background: var(--brand-pale); color: var(--ink); }
.bk-admin-sidebar a.active { background: var(--brand-pale); color: var(--brand); }
.bk-admin-main { flex: 1; padding: 2rem; max-width: 1200px; }

.stat-tile { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--card-shadow); }
.stat-tile .val { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--ink); }
.stat-tile .lbl { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

.table-bk { --bs-table-bg: transparent; color: var(--ink); }
.table-bk thead th { color: var(--muted); text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; border-bottom-color: var(--card-border); }
.table-bk td, .table-bk th { border-color: var(--card-border); vertical-align: middle; }