/* Main site shell  -  same palette and components as the admin console (ax-*). */

:root {
  --ax-bg: rgb(12 16 43);
  --ax-sidebar-bg: rgb(12 16 43);
  --ax-surface: rgb(18 23 49);
  --ax-surface-2: rgb(24 30 60);
  --ax-surface-3: rgb(31 37 70);
  --ax-input-bg: rgb(7 11 35);
  --ax-border: rgba(148, 163, 184, 0.14);
  --ax-border-strong: rgba(148, 163, 184, 0.22);
  --ax-text: #f1f5f9;
  --ax-text-2: #94a3b8;
  --ax-text-3: rgb(118 127 170);
  --ax-accent: #2563eb;
  --ax-accent-hover: #3b82f6;
  --ax-accent-2: #93c5fd;
  --ax-accent-soft: rgba(37, 99, 235, 0.18);
  --ax-accent-ring: rgba(59, 130, 246, 0.5);
  --ax-radius: 14px;
  --ax-radius-sm: 10px;
  --ax-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --site-header-bg: var(--ax-bg);
  --site-bg: var(--ax-bg);
  --site-surface: var(--ax-surface);
  --bg-base: var(--ax-bg);
  --bg-elevated: var(--ax-surface);
  --bg-panel: var(--ax-surface-2);
  --text-primary: var(--ax-text);
  --text-secondary: var(--ax-text-2);
  --text-muted: var(--ax-text-3);
  --accent: var(--ax-accent);
  --tb-accent: var(--ax-accent);
}

html.site-ax-root {
  background: var(--ax-bg);
}

body.bg-dark-800,
body.text-light-000 {
  background-color: var(--ax-bg) !important;
  color: var(--ax-text);
  font-family: TT-Interphases-Pro, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.site-page-shell,
.site-page-shell > main {
  background-color: var(--ax-bg);
}

.site-footer {
  background: var(--ax-bg);
  border-top-color: var(--ax-border);
}

/* ---------- Topbar (admin-style) ---------- */
.site-header-themed.site-ax-header {
  background: var(--ax-bg) !important;
  border-bottom: 1px solid var(--ax-border) !important;
}

.site-ax-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px !important;
}

@media (min-width: 768px) {
  .site-ax-header__inner {
    padding: 0 24px !important;
  }
}

.site-ax-header__left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.site-ax-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.site-ax-brand .ax-brand__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ax-accent);
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
}

.site-ax-brand .ax-brand__name {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.site-ax-nav {
  display: none;
  align-items: center;
  gap: 2px;
}

@media (min-width: 1024px) {
  .site-ax-nav {
    display: flex;
  }
}

.site-ax-nav__link {
  padding: 8px 12px;
  border-radius: var(--ax-radius-sm);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ax-text-2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.site-ax-nav__link:hover {
  color: var(--ax-text);
  background: var(--ax-surface-2);
}

.site-ax-nav__link.is-active {
  color: var(--ax-accent-2);
  background: var(--ax-accent-soft);
}

#topbar-actions .topbar-auth-guest {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ax-radius-sm);
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid var(--ax-border-strong);
  background: var(--ax-surface-2);
  color: var(--ax-text);
}

#topbar-actions .topbar-auth-guest:hover {
  background: var(--ax-surface-3);
}

#navigation-header-register-button.topbar-auth-guest {
  border-color: transparent;
  background: var(--ax-accent);
  color: #fff;
}

#navigation-header-register-button.topbar-auth-guest:hover {
  background: var(--ax-accent-hover);
}

.topbar-user-chip {
  border-color: var(--ax-border-strong);
  background: var(--ax-surface);
}

.topbar-user-dropdown {
  border-color: var(--ax-border-strong);
  background: var(--ax-surface);
  border-radius: var(--ax-radius-sm);
}

.topbar-user-dropdown__item:hover {
  background: var(--ax-surface-2);
}

#nav-admin[hidden] {
  display: none !important;
}

/* Shared buttons (admin panel) */
.site-ax-root .ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ax-radius-sm);
  border: 1px solid var(--ax-border-strong);
  background: var(--ax-surface-2);
  color: var(--ax-text);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.site-ax-root .ax-btn:hover {
  background: var(--ax-surface-3);
}

.site-ax-root .ax-btn--primary {
  border-color: transparent;
  background: var(--ax-accent);
  color: #fff;
}

.site-ax-root .ax-btn--primary:hover {
  background: var(--ax-accent-hover);
}

.site-ax-root .ax-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ax-accent-2);
}

.site-ax-root .ax-btn--ghost:hover {
  background: var(--ax-accent-soft);
}

.site-ax-root .ax-card {
  border-radius: var(--ax-radius);
  border: 1px solid var(--ax-border);
  background: var(--ax-surface);
}

.home-hero--splash {
  background: var(--ax-surface);
  border-color: var(--ax-border);
}

.home-feature,
.games-grid-card {
  border-color: var(--ax-border);
  background: var(--ax-surface);
}

/* Phones: logo + coin picker + Login + Register didn't fit in 390px, so Register wrapped
   onto a second line below the header. Tighten everything into one row. */
@media (max-width: 479px) {
  .site-ax-header__inner {
    padding: 0 10px !important;
    gap: 8px;
  }
  #topbar-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0;
  }
  #topbar-actions .topbar-auth-guest {
    padding: 0 10px !important;
    height: 36px;
    font-size: 0.8125rem !important;
    white-space: nowrap;
  }
  #topbar-actions .currency-picker__sym {
    display: none;
  }
  .site-ax-brand .ax-brand__name {
    font-size: 1.05rem;
  }
}