/* Dark theme for the Games area — Bootstrap-first, higher contrast */
:root {
  --games-bg: #071021;
  --games-card: #1a4149; /* noticeably lighter so cards pop on dark background */
  --games-hero: #234f56; /* lighter hero card color (matches navbar family, but brighter) */
  --games-text: #f6fbff; /* bright text */
  --games-muted: #d3dfe6; /* higher-contrast muted color */
  --games-accent: #0d6efd; /* Bootstrap primary blue */
  --games-navbar: #0b2e3b; /* brighter navbar to separate it from page */
}

html, body {
  height: auto;
  overflow-y: auto;
}

.games-theme {
  background: linear-gradient(180deg, #071021 0%, #0b1324 100%);
  color: var(--games-text);
  min-height: 100vh;
}
.games-theme .navbar-brand.small { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.2px; }
.games-theme .navbar {
  background-color: var(--games-navbar) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 20px rgba(2,8,16,0.75);
}
.games-theme .navbar .nav-link { color: var(--games-text); opacity: 1; font-weight: 500; }
.games-theme .navbar .nav-link:hover,
.games-theme .navbar .nav-link:focus { color: var(--games-accent); }
.games-theme .card {
  background-color: var(--games-card);
  color: var(--games-text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(2,8,16,0.65);
  transition: transform .15s ease, box-shadow .15s ease;
}
.games-theme .card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,8,16,0.7); }

/* Hero cards use a slightly lighter tint so they stand out from standard cards and
   visually relate to the navbar color family. */
.games-theme .hero-card {
  /* Use a slightly transparent hero background to match visual weight of regular cards */
  background-color: rgba(35,79,86,0.90); /* approx of var(--games-hero) with alpha */
  color: var(--games-text);
  border: 1px solid rgba(255,255,255,0.12); /* match .card border opacity */
  border-radius: .6rem;
  box-shadow: 0 10px 30px rgba(2,8,16,0.65); /* match main card shadow for consistent weight */
  transition: transform .15s ease, box-shadow .15s ease;
}
.games-theme .hero-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,8,16,0.7); }
.games-theme .text-muted { color: var(--games-muted) !important; }
.games-theme a { color: var(--games-accent); text-decoration: none; }
.games-theme a:hover { color: var(--games-accent); opacity: 0.9; }
.games-theme .btn-primary { background-color: var(--games-accent); border-color: rgba(0,0,0,0.15); color: #fff; }
.games-theme .btn-primary:hover { filter: brightness(0.95); }
.games-theme .btn-outline-secondary { color: var(--games-text); border-color: rgba(255,255,255,0.08); }
.games-theme .card .lead { color: var(--games-muted); }

/* Auth pages: clearer labels and a focused panel so signup/login fields are readable */
.games-theme.auth-page main.container {
  max-width: 720px;
}
.games-theme.auth-page .auth-panel {
  max-width: 560px;
  margin: 0 auto;
  padding: 1.75rem;
  border-radius: 1rem;
  background: rgba(9, 16, 31, 0.76);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 50px rgba(2,8,16,0.55);
}
.games-theme.auth-page .auth-panel h1,
.games-theme.auth-page .auth-panel h2,
.games-theme.auth-page .auth-panel p,
.games-theme.auth-page .auth-panel .alert { color: var(--games-text); }
.games-theme.auth-page .auth-panel .form-label {
  color: var(--games-text);
  font-weight: 600;
}
.games-theme.auth-page .auth-panel .form-control {
  background: rgba(255,255,255,0.96);
  color: #101828;
  border-color: rgba(255,255,255,0.18);
}
.games-theme.auth-page .auth-panel .form-control:focus {
  border-color: rgba(13,110,253,0.65);
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.18);
}
.games-theme.auth-page .auth-panel .btn-outline-secondary {
  color: var(--games-text);
  border-color: rgba(255,255,255,0.16);
}

/* Badge color tweaks to better fit the dark games theme */
.games-theme .badge.bg-success {
  background-color: rgba(46, 160, 106, 0.95); /* softer, desaturated green */
  color: #ffffff;
  box-shadow: none;
}
.games-theme .badge.bg-secondary {
  background-color: rgba(255,255,255,0.10); /* subtle pale pill for Private */
  color: var(--games-text);
  border: 1px solid rgba(255,255,255,0.04);
}

/* Keep action buttons on one line inside cards to avoid reflow when labels change */
.games-theme .action-controls { gap: 0.5rem; flex-wrap: nowrap; }
.games-theme .action-controls .btn { white-space: nowrap; }
.games-theme .toggle-visibility { min-width: 110px; }

/* Layout helpers that play nicely with Bootstrap */
.games-theme main.container-lg { max-width: 1100px; }
.games-empty { max-width: 720px; margin: 3rem auto; text-align: center; }
.games-empty .btn { margin-top: 1rem; }

/* Brand small tagline inside games nav */
.games-theme .navbar-brand .brand-name { font-weight: 600; color: var(--games-text); }
.games-theme .navbar-brand .brand-tagline { font-size: 0.7rem; line-height: 1; color: var(--games-muted); }

/* Like button styling */
.games-theme .btn-outline-heart {
  color: var(--games-text);
  border-color: rgba(255,255,255,0.08);
  background-color: transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s ease;
}
.games-theme .btn-outline-heart:hover {
  border-color: rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.05);
}
.games-theme .btn-outline-heart.liked {
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.3);
  background-color: rgba(255,107,107,0.1);
}
.games-theme .btn-outline-heart.liked:hover {
  border-color: rgba(255,107,107,0.5);
  background-color: rgba(255,107,107,0.15);
}
.games-theme .like-icon {
  transition: color 0.2s ease;
}