/* Bodek Games — site-specific styles only (app pages: hub, AI players, tables).
   Navbar, logo, app grid, buttons, dropdowns, form inputs, footer and the design tokens come from
   /shared/bodek.css (loaded before this file). */
:root { --bt-accent: var(--bd-accent); --bt-radius: var(--bd-radius-md); }
:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
    --bt-bg: var(--bd-bg); --bt-surface: var(--bd-surface); --bt-surface-2: var(--bd-surface-2);
    --bt-border: var(--bd-border); --bt-muted: var(--bd-muted);
}
[data-bs-theme="dark"] { --bt-border: #2f2f33; --bs-body-bg: #121212; --bs-body-color: #e0e0e0; }
[data-bs-theme="light"] { --bs-body-bg: #f4f6fa; --bs-body-color: #1a1a1a; }

body { -webkit-font-smoothing: antialiased; }
.text-secondary { color: var(--bt-muted) !important; }

/* Avatars rendered by header.php + account-switch.js (no inline styles: CSP forbids them) */
.bt-av { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bt-av-24 { width: 24px; height: 24px; line-height: 24px; font-size: .8rem; }
.bt-av-32 { width: 32px; height: 32px; line-height: 32px; }
.bt-av-40 { width: 40px; height: 40px; line-height: 40px; font-size: 1.1rem; }
@media (max-width: 767px) { .bf-navbar .bt-av-32 { width: 28px; height: 28px; line-height: 28px; } }

/* Forms */
.form-control-color { max-width: 3.2rem; padding: .3rem; }
.bt-colour .form-control.font-monospace { max-width: 7.5rem; }

/* Layout */
.bt-section { margin-top: 2rem; }
.bt-narrow { max-width: 860px; }
.bt-h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; }
.bt-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); }
.bt-card-title { font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 992px) { .bt-sticky { position: sticky; top: 90px; } }

/* Home */
.bt-hero { padding: 3.5rem 0 2rem; text-align: center; background: radial-gradient(1200px 300px at 50% 0, rgba(var(--bd-brand-rgb), .16), transparent); }
.bt-hero h1 { font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.02em; }
.bt-hero-lead { max-width: 640px; margin: .5rem auto 0; font-size: 1.05rem; }
.bt-hero-search { position: relative; max-width: 480px; margin: 1.5rem auto 0; }
.bt-hero-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--bt-muted); }
.bt-hero-search input { width: 100%; padding: .7rem 1rem .7rem 2.6rem; border-radius: 12px; border: 1px solid var(--bt-border); background: var(--bt-surface); color: inherit; }
.bt-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.bt-tool-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem; border-radius: var(--bt-radius); border: 1px solid var(--bt-border); background: var(--bt-surface); color: inherit !important; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.bt-tool-card:hover { border-color: var(--bt-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.bt-tool-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.bt-tool-title { font-weight: 600; font-size: 1.1rem; }
.bt-tool-desc { color: var(--bt-muted); font-size: .93rem; flex: 1; }
.bt-tool-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.bt-tag { background: var(--bt-surface-2); color: var(--bt-muted); border: 1px solid var(--bt-border); font-weight: 500; }
.bt-tag-save { color: var(--bs-primary); }
.bt-tool-open { color: var(--bt-accent); font-weight: 600; font-size: .92rem; margin-top: .3rem; }
.bt-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.bt-info > div { display: flex; gap: .8rem; padding: 1rem 1.1rem; border-radius: var(--bt-radius); border: 1px solid var(--bt-border); background: var(--bt-surface); font-size: .93rem; }
.bt-info i { font-size: 1.3rem; color: var(--bt-accent); }


/* Saved lists */
.bt-saved-list { display: flex; flex-direction: column; gap: .4rem; }
.bt-saved-row { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; border: 1px solid var(--bt-border); border-radius: 12px; background: var(--bt-surface); }
.bt-saved-thumb { width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0; }
.bt-saved-name { flex: 1; min-width: 0; font-weight: 500; }
.bt-saved-actions { display: inline-flex; gap: .1rem; flex-shrink: 0; }
@media (max-width: 575px) { .bt-saved-row > .text-nowrap { display: none; } }
.bt-empty { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--bt-border); border-radius: var(--bt-radius); }
.bt-empty > i { font-size: 2.4rem; color: var(--bt-muted); }