/*
Theme Name: Slot Catalog BR
Theme URI: https://slotcatalog.dev
Author: Fire Studio
Author URI: https://firestudio.dev
Description: A modern, dark-themed slot game catalog WordPress theme optimized for the Brazilian market. Features custom post types for games, providers, and casinos with full GEO/SEO support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flavor
Tags: gaming, catalog, dark, modern, custom-post-types, responsive

Slot Catalog BR — Play Smart, Win Big.
*/

/* ====== Design Tokens ====== */
:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-card: #1a1f35;
  --bg-card-hover: #222845;
  --bg-surface: #151b2e;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent: #8b5cf6;
  --accent-glow: rgba(139, 92, 246, .4);
  --accent-secondary: #06b6d4;
  --accent-hot: #f43f5e;
  --accent-gold: #fbbf24;
  --accent-green: #22c55e;
  --border: rgba(255, 255, 255, .06);
  --border-hover: rgba(139, 92, 246, .3);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, .3);
  --shadow-glow: 0 0 30px rgba(139, 92, 246, .15);
  --transition: all .25s cubic-bezier(.4, 0, .2, 1);
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', var(--font-main);
  --container: 960px;
}

/* ====== Reset & Base ====== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #334155 #0b1220;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #0b1220;
}

*::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 999px;
  border: 2px solid #0b1220;
}

*::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: #a78bfa;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ====== Typography ====== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.section-title {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 32px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  border-radius: 2px;
}

.section-title.center {
  text-align: center;
}

.section-title.center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ====== Layout ====== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 60px 0;
}

.home-layout {
  padding: 36px 0;
}

.home-visuals {
  padding: 24px 0 10px;
}

.home-visuals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-visual-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(10, 14, 26, 0.7);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

.home-visual-card img,
.home-visual-card .ph-cover {
  width: 60px;
  height: 60px !important;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.home-visual-card:hover {
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
}

.home-visual-content strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.home-visual-content span {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.home-shell {
  padding: 26px 0 10px;
}

.home-shell-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}

.home-shell-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.home-shell-aside {
  position: relative;
}

.home-aside-sticky {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-aside-card {
  background: rgba(10, 14, 26, 0.75);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-glow);
}

.home-aside-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.home-aside-nav {
  display: grid;
  gap: 8px;
}

.home-aside-nav a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.92rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(15, 23, 42, 0.5);
  transition: var(--transition);
}

.home-aside-nav a:hover {
  color: var(--text-primary);
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.18);
}

.home-panel-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-panel-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.home-empty-panel {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.45);
}

.home-empty-title {
  font-weight: 600;
}

.home-empty-desc {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.home-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-panel {
  background: rgba(10, 14, 26, 0.7);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-glow);
}

#home-trends .home-panel {
  max-height: 288px;
  overflow-y: auto;
  padding-right: 12px;
}

.home-panel .section {
  padding: 0;
}

.home-panel .container {
  padding: 0;
  max-width: none;
}

.home-panel .section-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.home-panel p {
  margin: 0 0 10px;
}

.internal-links-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(6, 182, 212, 0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-glow);
}

.internal-links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.internal-links-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.internal-links-panel {
  background: rgba(10, 14, 26, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.internal-links-panel-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.internal-links-panel-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.internal-links-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.6);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
}

.internal-links-chip:hover {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.16);
  transform: translateY(-1px);
  color: var(--text-primary);
}

@media (max-width: 900px) {
  .home-visuals-grid {
    grid-template-columns: 1fr;
  }

  .home-visual-card {
    grid-template-columns: 1fr;
  }

  .home-shell-grid {
    grid-template-columns: 1fr;
  }

  .home-aside-sticky {
    position: static;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .internal-links-panels {
    grid-template-columns: 1fr;
  }

  .internal-links-card {
    padding: 16px;
  }
}

/* ====== Header ====== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(10, 14, 26, .92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 70px;
  max-width: var(--container);
  margin: 0 auto;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  text-decoration: none;
}

.site-logo-img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.site-logo .logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.site-logo span.highlight {
  color: var(--accent);
}

/* Navigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-nav a {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--text-primary);
  background: rgba(139, 92, 246, .1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-search {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 16px;
  gap: 8px;
  transition: var(--transition);
}

.header-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.header-search input {
  background: transparent !important;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  width: 180px;
  outline: none;
}

/* Fix for WebKit autofill / default search styles injecting white backgrounds */
.header-search input:-webkit-autofill,
.header-search input:-webkit-autofill:hover,
.header-search input:-webkit-autofill:focus,
.header-search input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--bg-secondary) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.header-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.header-search input::placeholder {
  color: var(--text-muted);
}

.header-search button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
}

.header-search button:hover {
  color: var(--accent);
}

.header-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Main Navigation - Desktop */
.main-nav {
  display: flex !important;
  align-items: center;
  flex: 1;
  justify-content: center;
}

/* Mobile menu */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
}

/* ====== Hero Section ====== */
.hero {
  position: relative;
  padding: 80px 0 60px;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(139, 92, 246, .08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(6, 182, 212, .06) 0%, transparent 50%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  margin-bottom: 16px;
}

.hero h1 .gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-stat {
  text-align: center;
}

.hero-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-stat-label {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ====== Game Cards Grid ====== */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 16px;
  align-items: start;
}

.game-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.game-card:hover {
  transform: translateY(-6px) scale(1.02);
}

.game-card-image {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg-secondary);
}

.game-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.game-card:hover .game-card-image img {
  transform: scale(1.05);
}

.game-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}

.badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.badge-hot {
  background: var(--accent-hot);
  color: #fff;
}

.badge-new {
  background: var(--accent-green);
  color: #fff;
}

.badge-rank {
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  color: var(--accent-gold);
  font-size: 12px;
}

.game-card-provider {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 6px;
}

.game-card-provider img {
  height: 16px;
  width: auto;
}

.game-card-body {
  padding: 14px 16px 16px;
}

.game-card-header {
  padding: 10px 16px 0;
}

.game-card-title {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: calc(1.2em * 2);
}

.game-card-title a {
  color: var(--text-primary);
}

.game-card-title a:hover {
  color: var(--accent);
}

.game-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px 12px;
}

.game-card-metrics .metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-card-metrics .metric-label {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.game-card-metrics .metric-value {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.game-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.game-meta-item {
  display: flex;
  flex-direction: column;
}

.game-meta-label {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.game-meta-value {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.game-meta-value.rtp-high {
  color: var(--accent-green);
}

.game-meta-value.rtp-low {
  color: var(--accent-hot);
}

.game-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  color: #fff;
  flex: 1;
}

.btn-primary:hover {
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
  color: #fff;
}

.btn-outline {
  border: 1px solid var(--border);
  color: var(--text-secondary);
  flex: 1;
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 15px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.btn-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn svg {
  width: 16px;
  height: 16px;
}

/* ====== Filters Bar ====== */
.filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.filter-group {
  position: relative;
}

.filter-select {
  appearance: none;
  background: #121826;
  border: 1px solid var(--border);
  color: #f8fafc;
  font-family: var(--font-main), "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
  padding: 8px 36px 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.filter-select option {
  background: #0f172a;
  color: #f8fafc;
  font-family: var(--font-main), "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

.market-selector {
  background: #121826;
  color: #f8fafc;
  border: 1px solid var(--border);
  font-family: var(--font-main), "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

.market-selector option {
  background: #0f172a;
  color: #f8fafc;
  font-family: var(--font-main), "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

.filter-select optgroup,
.market-selector optgroup {
  background: #0f172a;
  color: #cbd5f5;
}

.filter-select:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.filter-select option:hover {
  background: #1e293b;
  color: #ffffff;
}

.market-dropdown {
  position: relative;
  width: 100%;
}

.market-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #121826;
  border: 1px solid var(--border);
  color: #f8fafc;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-main), "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

.market-dropdown-toggle:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.market-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #0f172a;
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 340px;
  overflow: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 60;
}

.market-dropdown.open .market-dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.market-dropdown:focus-within .market-dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.market-dropdown-group-label {
  padding: 8px 12px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.market-dropdown-item {
  width: 100%;
  background: transparent;
  border: 0;
  color: #e2e8f0;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-main), "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
}

.market-dropdown-item:hover {
  background: #1e293b;
  color: #ffffff;
  transform: translateX(2px);
}

.market-dropdown-caret {
  color: #94a3b8;
}

.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.filter-chip:hover,
.filter-chip.active {
  background: rgba(139, 92, 246, .15);
  border-color: var(--accent);
  color: var(--accent);
}

.results-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
}

/* ====== Single Game Page ====== */
.game-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px 0;
  align-items: start;
}

.game-preview {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  aspect-ratio: 16/10;
}

.game-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-preview .play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
}

.game-preview:hover .play-overlay {
  opacity: 1;
}

.play-btn-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px var(--accent-glow);
  transition: var(--transition);
}

.play-btn-circle:hover {
  transform: scale(1.1);
}

.play-btn-circle svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  margin-left: 4px;
}

.game-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-title-block h1 {
  margin-bottom: 8px;
  font-size: 2rem;
}

.game-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-stars {
  display: flex;
  gap: 2px;
  color: var(--accent-gold);
}

.rating-stars svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.rating-value {
  font-weight: 700;
  font-size: 1.1rem;
}

.rating-count {
  color: var(--text-muted);
  font-size: .85rem;
}

.game-attributes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.game-attr {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-attr-label {
  font-size: .75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.game-attr-value {
  font-size: 1rem;
  font-weight: 700;
}

.game-attr-value.highlight {
  color: var(--accent);
}

.game-attr-value.green {
  color: var(--accent-green);
}

.game-attr-value.gold {
  color: var(--accent-gold);
}

.game-cta-buttons {
  display: flex;
  gap: 12px;
}

.game-cta-buttons .btn {
  padding: 12px 28px;
  font-size: 15px;
}

/* ====== Provider Section ====== */
.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.provider-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  transition: var(--transition);
}

.provider-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-glow);
}

.provider-card img {
  height: 40px;
  margin: 0 auto 12px;
  object-fit: contain;
}

.provider-card-name {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 4px;
}

.provider-card-count {
  color: var(--text-muted);
  font-size: .8rem;
}

/* ====== Sidebar / Widgets ====== */
/* ====== Sidebar / Widgets ====== */
.content-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

.game-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
  .content-with-sidebar {
    grid-template-columns: 1fr;
  }

  .game-content {
    padding: 24px;
  }
}

.sidebar .widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  transition: var(--transition);
}

.sidebar .widget:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.widget-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ====== Footer ====== */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 48px 0 24px;
  margin-top: 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand {
  max-width: 280px;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: .9rem;
  margin-top: 12px;
  line-height: 1.6;
}

.footer-col h4 {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul a {
  color: var(--text-secondary);
  font-size: .9rem;
}

.footer-col ul a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8rem;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition);
}

.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer-social a svg {
  width: 16px;
  height: 16px;
}

/* ====== Pagination ====== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.pagination a,
.pagination span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}

.pagination a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination .current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ====== Responsible Gaming Banner ====== */
.rg-banner {
  background: linear-gradient(135deg, rgba(244, 63, 94, .1), rgba(139, 92, 246, .1));
  border: 1px solid rgba(244, 63, 94, .2);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

.rg-banner-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.rg-banner p {
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.5;
}

.rg-banner a {
  color: var(--accent-hot);
  text-decoration: underline;
}

/* ====== Contact Hub ====== */
.contact-hub {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

.contact-hub-trigger {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--accent-glow);
  transition: var(--transition);
  animation: pulse-glow 2s ease-in-out infinite;
}

.contact-hub-trigger:hover {
  transform: scale(1.1);
}

.contact-hub-trigger svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 4px 20px var(--accent-glow);
  }

  50% {
    box-shadow: 0 4px 30px rgba(139, 92, 246, .6);
  }
}

.contact-hub-menu {
  position: absolute;
  bottom: 68px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: var(--transition);
}

.contact-hub.open .contact-hub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.contact-hub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  cursor: pointer;
}

.contact-hub-item:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.contact-hub-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ai-chat-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: none;
  z-index: 9999;
  overflow: hidden;
}

.ai-chat-panel.open {
  display: flex;
  flex-direction: column;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.ai-chat-title {
  font-weight: 600;
}

.ai-chat-close {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ai-chat-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
}

.ai-chat-message {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: .9rem;
  line-height: 1.4;
}

.ai-chat-bot {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.ai-chat-user {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
}

.ai-chat-footer {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

/* Lead gate: CSS display must not override [hidden] */
.ai-chat-panel.is-lead-gate .ai-chat-body,
.ai-chat-panel.is-lead-gate .ai-chat-footer,
.ai-chat-body[hidden],
.ai-chat-footer[hidden],
.ai-chat-lead[hidden] {
  display: none !important;
}
.ai-chat-panel.is-chatting .ai-chat-lead {
  display: none !important;
}
.ai-chat-panel.is-lead-gate .ai-chat-lead {
  display: flex !important;
}

.ai-chat-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.ai-chat-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
}

.ai-chat-upload span {
  font-size: 16px;
}

.ai-chat-file {
  display: none;
}

.ai-chat-send {
  border: 0;
  background: var(--accent);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ai-chat-lead {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ai-chat-lead-intro {
	margin: 0 0 4px;
	font-size: 0.92em;
	line-height: 1.4;
	opacity: 0.9;
}
.ai-chat-lead-input {
	width: 100%;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	font: inherit;
}
.ai-chat-lead-hint {
	margin: 0;
	font-size: 0.8em;
	opacity: 0.7;
}
.ai-chat-lead-error {
	margin: 0;
	color: #b00020;
	font-size: 0.85em;
}
.ai-chat-lead-submit {
	border: 0;
	background: var(--accent);
	color: #fff;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font: inherit;
}
.ai-chat-lead-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}
.ai-chat-links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
.ai-chat-links a {
	color: #0b6e4f;
	text-decoration: underline;
	word-break: break-all;
	font-size: 0.92em;
}
.ai-chat-bot a {
	color: #0b6e4f;
	word-break: break-all;
}
.ai-chat-thinking {
	opacity: 0.75;
	font-style: italic;
}
.ai-chat-send:disabled {
	opacity: 0.6;
	cursor: wait;
}
.ai-chat-send:hover {
  filter: brightness(1.05);
}

/* ====== Breadcrumbs ====== */
.breadcrumbs {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  font-size: .85rem;
  color: var(--text-muted);
}

.breadcrumbs a {
  color: var(--text-secondary);
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumbs .sep {
  margin: 0 8px;
  opacity: .5;
}

/* ====== Demo Iframe ====== */
.game-demo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000;
}

.game-demo-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-xl);
}

.demo-player-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.demo-player-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.demo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-card));
}

.demo-placeholder-icon {
  font-size: 3.5rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}

.demo-placeholder h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.demo-placeholder-info {
  color: var(--text-muted);
  font-size: .85rem;
  margin: 0;
}

.demo-placeholder-info strong {
  color: var(--text-secondary);
}

.demo-placeholder-text {
  color: var(--text-secondary);
  font-size: .9rem;
  max-width: 400px;
  line-height: 1.6;
  margin: 4px 0 12px;
}

.demo-placeholder .btn {
  margin-top: 4px;
}

/* ====== Casino Bonus Cards (Enhanced) ====== */
.casino-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  transition: var(--transition);
}

.casino-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow);
}

.casino-card-logo {
  width: 80px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-surface);
  padding: 4px;
}

.casino-card-info {
  flex: 1;
  min-width: 0;
}

.casino-card-name {
  font-weight: 700;
  font-size: .95rem;
}

.casino-card-bonus {
  color: var(--accent-gold);
  font-size: .85rem;
  font-weight: 600;
  margin-top: 2px;
}

.casino-card-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(139, 92, 246, .15);
  color: var(--accent);
  margin-top: 4px;
}

/* ====== Game Gallery ====== */
.game-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.game-gallery-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  aspect-ratio: 16/10;
}

.game-gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.game-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ====== Lightbox ====== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, .2);
}

/* ====== Skeleton Loading ====== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ====== LGPD Cookie Banner ====== */
.lgpd-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .3);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.lgpd-banner.show {
  transform: translateY(0);
}

.lgpd-banner p {
  color: var(--text-secondary);
  font-size: .85rem;
  flex: 1;
  line-height: 1.5;
}

.lgpd-banner p a {
  color: var(--accent);
  text-decoration: underline;
}

.lgpd-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ====== GEO: TLDR Box ====== */
.geo-tldr {
  background: linear-gradient(135deg, rgba(139, 92, 246, .08), rgba(6, 182, 212, .06));
  border: 1px solid rgba(139, 92, 246, .2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 20px 0;
}

.geo-tldr-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 6px;
}

.geo-tldr p {
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}

/* ====== GEO: FAQ ====== */
.geo-faq {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 12px 0;
  overflow: hidden;
}

.geo-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-surface);
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  transition: var(--transition);
}

.geo-faq-q:hover {
  background: var(--bg-card-hover);
}

.geo-faq-q::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform .2s;
}

.geo-faq.open .geo-faq-q::after {
  transform: rotate(45deg);
}

.geo-faq-a {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  color: var(--text-secondary);
  line-height: 1.6;
}

.geo-faq.open .geo-faq-a {
  max-height: 500px;
  padding: 14px 18px;
}

/* ====== GEO: HowTo ====== */
.geo-howto {
  margin: 20px 0;
}

.geo-howto-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.geo-howto-step {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.geo-howto-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  flex-shrink: 0;
}

.geo-howto-text {
  flex: 1;
}

.geo-howto-text strong {
  display: block;
  margin-bottom: 4px;
}

/* ====== GEO: Expert Quote ====== */
.geo-expert {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 20px 0;
}

.geo-expert-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.geo-expert-name {
  font-weight: 700;
}

.geo-expert-title {
  font-size: .8rem;
  color: var(--text-muted);
}

.geo-expert-text {
  margin-top: 8px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
}

/* ====== GEO: Citation ====== */
.geo-cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(139, 92, 246, .1);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .85rem;
}

.geo-cite a {
  color: var(--accent);
  text-decoration: underline;
}

/* ====== GEO: Table of Contents ====== */
.toc-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 24px 0;
}

.toc-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.toc-list {
  list-style: none;
  padding: 0;
}

.toc-list li {
  margin-bottom: 6px;
}

.toc-list a {
  color: var(--text-secondary);
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: var(--transition);
}

.toc-list a:hover {
  color: var(--accent);
}

.toc-list a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: .5;
}

/* ====== GEO: Reading Time ====== */
.reading-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: .85rem;
}

.reading-time svg {
  width: 14px;
  height: 14px;
}

/* ====== Author Box (E-E-A-T) ====== */
.author-box {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 32px 0;
}

.author-box-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-box-name {
  font-weight: 700;
  font-size: 1rem;
}

.author-box-role {
  font-size: .8rem;
  color: var(--accent);
}

.author-box-bio {
  color: var(--text-secondary);
  font-size: .9rem;
  margin-top: 6px;
  line-height: 1.5;
}

/* ====== PIX Display ====== */
.pix-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.pix-key {
  font-family: monospace;
  color: var(--accent-green);
  font-weight: 600;
}

/* ====== Responsive ====== */
@media (max-width: 1024px) {
  .content-with-sidebar {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .game-hero {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .main-nav {
    display: none !important;
  }

  .menu-toggle {
    display: flex !important;
  }

  .main-nav.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 16px;
    gap: 4px;
  }

  .header-search input {
    width: 120px;
  }

  .hero {
    padding: 40px 0 30px;
  }

  .hero-stats {
    gap: 24px;
  }

  .hero-stat-value {
    font-size: 1.5rem;
  }

  .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
  }

  .game-card-meta {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .game-meta-label {
    font-size: .65rem;
  }

  .game-meta-value {
    font-size: .78rem;
  }

  .filters-bar {
    gap: 8px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .providers-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .game-attributes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .games-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .game-card-body {
    padding: 10px 12px 12px;
  }

  .game-card-title {
    font-size: .85rem;
  }

  .game-card-actions {
    flex-direction: column;
  }
}

/* ====== FIXED LAYOUT ALIGNMENT ====== */
.game-hero {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 40px !important;
  align-items: start;
  margin-bottom: 40px;
}

.content-with-sidebar {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 40px !important;
  align-items: start;
}

/* Ensure Game Preview fits the column */
.game-preview {
  width: 100%;
  aspect-ratio: 16/9;
}

/* Ensure Game Info fits the column */
.game-info {
  width: 100%;
}

/* Mobile Responsive Override */
@media (max-width: 1024px) {

  .game-hero,
  .content-with-sidebar {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* ====== New SlotCatalog Style Layout ====== */

/* 1. Full Width Header */
.game-header-full {
  background: #0f1322;
  border-bottom: 1px solid var(--border);
  padding: 30px 0;
  margin-bottom: 30px;
  background-image: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.1), transparent 70%);
}

.game-header-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gh-main {
  text-align: center;
}

.gh-main h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #fff, #cbd5e1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gh-meta {
  color: var(--text-muted);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gh-stats-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
}

.gh-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.gh-stat-item .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.gh-stat-item .value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gh-stat-item .value.green {
  color: var(--accent-green);
}

.gh-stat-item .value.gold {
  color: var(--accent-gold);
}

.gh-stat-item .value.purple {
  color: var(--accent);
}

/* 2. Main Layout Grid */
.content-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}

.game-content-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* 3. Embedded Demo Section */
.game-demo-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 10px;
  border: 1px solid var(--border);
  margin-bottom: 30px;
}

.game-preview-box {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.demo-cover:hover .cover-img {
  transform: scale(1.03);
}

.demo-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-placeholder-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-card));
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-overlay-big {
  background: var(--accent);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 0 30px var(--accent-glow);
  transition: transform 0.2s;
}

.play-overlay-big:hover {
  transform: scale(1.05);
}

.game-actions-bar {
  margin-top: 15px;
}

.pulse-btn {
  animation: pulse-gold 2s infinite;
}

/* 4. Content Elements */
.game-gallery-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.game-gallery-strip img {
  height: 80px;
  width: auto;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.game-gallery-strip img:hover {
  border-color: var(--accent);
}

.game-themes {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* FAQ */
.game-faq-section h2 {
  margin-bottom: 20px;
}

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
}

.faq-item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.faq-item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Response Overrides */
@media (max-width: 900px) {
  .content-with-sidebar {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .gh-stats-row {
    gap: 15px;
  }
}

/* Vue Utilities */
[v-cloak] {
  display: none;
}

.game-preview-box.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
}

.fs-toggle-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.fs-toggle-btn:hover {
  background: var(--accent);
  transform: scale(1.1);
}

/* --- PHASE 6.5: HERO SPLIT GRID --- */
.game-hero-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
  align-items: start;
}

@media (max-width: 900px) {
  .game-hero-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Media Column */
.gh-media {
  display: block;
}

/* Ensure the preview box inside gh-media has correct aspect */
.gh-media .game-preview-box {
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Info Panel */
.gh-info {
  display: flex;
  flex-direction: column;
}

.gh-title {
  font-size: 2.5rem;
  line-height: 1.1;
  margin-bottom: 10px;
  background: linear-gradient(to right, #fff, #bbb);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gh-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  font-size: 0.9rem;
  color: #ccc;
}

.gh-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  line-height: 1;
}

.gh-updated time {
  color: #f8bd63;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.gh-rating-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 12px;
}

.gh-rating-stars .score {
  color: #fff;
  font-weight: bold;
}

/* Stats Grid */
.gh-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-box {
  background: #181b29;
  border: 1px solid #2a2f45;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s;
}

.stat-box:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: #1e2235;
}

.stat-box .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6da2bd;
  font-weight: 600;
}

.stat-box .value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.stat-box.rank-box {
  grid-column: span 2;
  background: linear-gradient(135deg, #181b29 0%, #2a1b3d 100%);
  border-color: #4c1d95;
}

.stat-box.rank-box .value {
  font-size: 1.3rem;
}

/* Colors */
.value.green {
  color: #4ade80;
}

.value.gold {
  color: #fbbf24;
}

.value.purple {
  color: #d8b4fe;
}

/* Mobile Actions */
.gh-actions {
  margin-top: 15px;
}

/* Feature Tags */
.gh-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px;
}

.feature-tag {
  background: rgba(109, 162, 189, 0.15);
  /* Muted blue tint */
  color: #6da2bd;
  border: 1px solid rgba(109, 162, 189, 0.3);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.feature-tag:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ====== Game Cover & Play Button ====== */
.demo-cover {
  position: relative;
  width: 100%;
  height: 100%;
}

.cover-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.demo-placeholder-bg {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--card-bg, #1a1a2e);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.play-overlay-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background: rgba(108, 92, 231, 0.85);
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(4px);
  z-index: 10;
}

.play-overlay-circle:hover {
  transform: translate(-50%, -50%) scale(1.045);
  background: rgba(108, 92, 231, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.play-overlay-circle .play-icon {
  font-size: 2.2rem;
  color: #fff;
  line-height: 1;
}

.play-overlay-circle .play-text {
  font-size: 0.8rem;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.coming-soon-badge-big {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #ffd700;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  z-index: 10;
}

/* Game Preview Box */
.game-preview-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #0a0a1a;
  border-radius: 14px;
  overflow: hidden;
}

.game-demo-frame {
  width: 100%;
  height: 100%;
}

.game-demo-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.fs-toggle-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 20;
}

/* FIX: SlotCatalog Menu Styles (Force Horizontal) */
.sc-menu {
  display: flex !important;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-direction: row !important;
  /* Force row */
}

.sc-menu li {
  margin: 0;
  padding: 0;
}

.sc-menu li a {
  color: #cbd5e0;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  padding: 8px 0;
  display: block;
  white-space: nowrap;
}

.sc-menu li a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.sc-menu li a strong {
  color: #fff;
  font-weight: 900;
}

/* FIX: Sticky Header Override */
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  border-bottom: 1px solid #2d3748;
  background: rgba(10, 14, 26, 0.97) !important;
  backdrop-filter: blur(20px);
}

/* FIX: Ensure container allows full width for menu */
.header-inner {
  max-width: 1400px;
  /* Expand header width */
}

/* GAME CARD EXPANDABLE STYLES */
.game-card-top {
  position: relative;
  padding-bottom: 30px;
  /* Space for the toggle */
}

.game-card-primary-action {
  padding: 0 12px;
  margin-bottom: 8px;
}

.game-card-primary-action .btn {
  background: #FFD700;
  /* Gold */
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.game-card-primary-action .btn:hover {
  background: #ffea00;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 215, 0, 0.3);
}

.game-card-footer-toggle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2));
}

.gamble-text {
  font-size: 0.6rem;
  color: #718096;
  margin-right: auto;
  padding-left: 12px;
}

.toggle-details {
  background: none;
  border: none;
  color: #cbd5e0;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.3s;
}

.toggle-details:hover {
  color: #fff;
  transform: scale(1.2);
}

.game-card.expanded .toggle-details {
  transform: rotate(180deg);
}

.game-card-expanded-details {
  display: none;
  background: #1a202c;
  border-top: 1px solid #2d3748;
  padding: 12px;
}

.game-card.expanded .game-card-expanded-details {
  display: block;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.attributes-table {
  margin-top: 12px;
  font-size: 0.8rem;
}

.attr-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.attr-label {
  color: #718096;
}

.attr-value {
  color: #e2e8f0;
  font-weight: 600;
  text-align: right;
}

.provider-link {
  color: var(--accent);
}

.max-win {
  color: #48bb78;
  /* Green */
}

/* FIX: Standard Pagination (Non-AJAX) */
.standard-pagination .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  margin: 0 4px;
  background: #2d3748;
  color: #a0aec0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}

.standard-pagination .page-numbers.current,
.standard-pagination .page-numbers:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.standard-pagination .page-numbers.dots {
  background: transparent;
  color: #718096;
  border: none;
}

/* ====== PREMIUM MEGA MENU ====== */
.mega-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  flex-direction: row !important;
}

.mega-item {
  position: relative;
}

.mega-item>a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  color: #cbd5e0;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
  white-space: nowrap;
  position: relative;
}

.mega-item>a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #f6e05e);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
}

.mega-item>a:hover,
.mega-item.has-dropdown:hover>a {
  color: #fff;
}

.mega-item>a:hover::after,
.mega-item.has-dropdown:hover>a::after {
  transform: scaleX(1);
}

.mega-item .dd-arrow {
  transition: transform 0.3s;
  opacity: 0.5;
}

.mega-item.has-dropdown:hover .dd-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.mega-hot>a {
  color: #ff4d4d !important;
  animation: hotPulse 2s ease-in-out infinite;
}

@keyframes hotPulse {

  0%,
  100% {
    text-shadow: 0 0 4px rgba(255, 77, 77, 0.3);
  }

  50% {
    text-shadow: 0 0 12px rgba(255, 77, 77, 0.6);
  }
}

/* Dropdown Panel */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 600px;
  background: rgba(15, 20, 35, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 9999;
  pointer-events: none;
}

.mega-panel-sm {
  min-width: 260px;
}

.mega-item.has-dropdown:hover .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-panel-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  padding: 20px;
}

.mega-panel-sm .mega-panel-inner {
  grid-template-columns: 1fr;
}

/* Column */
.mega-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-heading {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 8px 0;
  padding: 0 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mega-col>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  color: #a0aec0;
  text-decoration: none;
  font-size: 0.82rem;
  border-radius: 8px;
  transition: all 0.15s;
}

.mega-col>a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateX(4px);
}

.mega-count {
  font-size: 0.7rem;
  color: #4a5568;
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.mega-col>a:hover .mega-count {
  color: var(--accent);
  background: rgba(var(--accent-rgb, 139, 92, 246), 0.15);
}

/* Provider Grid */
.mega-providers-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

.mega-provider-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #a0aec0;
  text-decoration: none;
  font-size: 0.8rem;
  border-radius: 8px;
  transition: all 0.15s;
}

.mega-provider-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateY(-1px) scale(1.02);
}

.mega-provider-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(0.7);
  border-radius: 4px;
}

.mega-provider-item:hover img {
  filter: brightness(0) invert(1);
}

.mega-provider-initial {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d3748;
  color: #a0aec0;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
}

.mega-see-all {
  grid-column: 1 / -1;
  text-align: center;
  padding: 10px;
  color: var(--accent) !important;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 6px;
  transition: color 0.2s;
}

.mega-see-all:hover {
  color: #fff !important;
}

/* Mobile: stack menu vertically — no mega dropdown panels (they float / leak PROVEDORES) */
@media (max-width: 768px) {
  .mega-menu {
    flex-direction: column !important;
    width: 100%;
  }

  .mega-item {
    width: 100%;
  }

  .mega-item > a {
    width: 100%;
    justify-content: flex-start;
  }

  .mega-item .dd-arrow {
    display: none !important;
  }

  .mega-item .mega-panel {
    display: none !important;
  }

  .mega-panel {
    position: static;
    min-width: 100%;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .mega-panel-inner {
    grid-template-columns: 1fr !important;
  }

  .mega-providers-grid {
    grid-template-columns: 1fr !important;
  }

  .mega-item.has-dropdown:hover .mega-panel {
    display: none !important;
  }
}

/* Resgates pagination — always full-width row under cards (PC + mobile) */
.slot-code-pagination,
.slot-code-pagination .navigation,
.slot-code-pagination .nav-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  position: static !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.slot-code-pagination .page-numbers {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  margin: 0 !important;
  padding: 0 12px;
  background: var(--bg-card, #2d3748);
  color: var(--text-secondary, #a0aec0);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.slot-code-pagination .page-numbers.current,
.slot-code-pagination .page-numbers:hover {
  background: var(--accent, #8b5cf6);
  color: #fff;
  border-color: transparent;
}

/* Social share wrap for narrow screens */
.flavor-social-share {
  flex-wrap: wrap !important;
}


/* ====== DEMO FAILED OVERLAY ====== */
.demo-failed-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: blur(12px);
  z-index: 50;
  border-radius: var(--radius-lg, 16px);
}

.demo-failed-content {
  text-align: center;
  padding: 30px;
}

.demo-failed-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}

.demo-failed-text {
  color: #a0aec0;
  font-size: 0.95rem;
  margin: 0 0 20px;
}

.demo-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent, #8b5cf6), #6d28d9);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.demo-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}

/* ====== CASINO CARD STYLES ====== */
.casino-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
  color: var(--text-primary);
  height: 100%;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.casino-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  background: linear-gradient(to bottom, var(--bg-card), rgba(139, 92, 246, 0.05));
}

.casino-card img {
  transition: transform 0.3s;
}

.casino-card:hover img {
  transform: scale(1.05);
}

.casino-detail {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}