/* ===== Self-hosted Orbitron (works offline and on file:// previews) ===== */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/orbitron-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/orbitron-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/orbitron-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/orbitron-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/orbitron-900.woff2') format('woff2');
}

/* ===== Base ===== */

html {
  scroll-behavior: smooth;
}

body {
  --font-body: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Orbitron', system-ui, sans-serif;
  background: radial-gradient(circle at 16% -4%, rgba(255, 51, 102, 0.16), transparent 32%), radial-gradient(circle at 88% 10%, rgba(124, 58, 237, 0.16), transparent 36%), linear-gradient(180deg, #0b0b14 0%, #090910 48%, #0e0e17 100%);
  background-attachment: fixed;
  color: #f0eeee;
  font-family: var(--font-body);
  padding-top: 76px;
}

/* Mobile: navbar wraps to 2 rows (brand + search), needs extra top padding */
@media (max-width: 991.98px) {
  body {
    padding-top: 120px;
  }
}

/* ---- Russo One for all display/heading elements ---- */

h1, h2, h3, h4, h5, h6,
.card-title, .game-card .card-title,
.hero-title, .hero-featured-title,
.btn, .badge, .game-card-new-bubble,
.nav-link, .navbar-brand, .tag-badge,
.pi-section-title, .hv-section-title,
.pi-stencil, .pi-chip, .pi-section-num,
.pi-ticker, .pi-ticker-track,
.logo-xxx, .logo-xxx-footer {
  font-family: var(--font-display) !important;
}

/* ---- Body copy readability ---- */

p, .lead, .card-text, .hero-subtitle, .hero-featured-text,
.pi-text-cream, .pi-text-cream-72, .pi-text-cream-55,
.text-white-50, small, .faq-answer, .accordion-body,
.game-card .card-text, .game-card small {
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Base paragraph readability */
p, .card-text, .pi-text-cream-72, .pi-text-cream-55,
.accordion-body, .game-card .card-text {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 500;
  color: rgba(250, 248, 255, 0.88);
  letter-spacing: 0.01em;
}

/* Lead paragraph */
.lead, .hero-subtitle {
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 500;
  color: rgba(235, 240, 250, 0.85);
  letter-spacing: 0.005em;
}

/* Featured/muted text */
.hero-featured-text, .text-white-50 small,
.game-card small, .pi-text-cream-55 {
  font-size: 0.95rem;
  line-height: 1.65;
  font-weight: 500;
  color: rgba(230, 235, 250, 0.7);
}

/* Small text */
small, .tag-badge {
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 767.98px) {
  p, .card-text, .pi-text-cream-72, .accordion-body {
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .lead, .hero-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
  }
}

/* ===== Age Verification Modal ===== */

.age-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 18, 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: ageFadeIn 0.5s ease forwards;
}

.age-modal-overlay.hidden,
.age-prechecked .age-modal-overlay {
  display: none !important;
  animation: none;
}

.age-modal-card {
  max-width: 480px;
  width: 92%;
  margin: 1rem;
  background: rgba(16, 20, 38, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 64px rgba(3, 5, 12, 0.5), 0 0 32px rgba(40, 72, 125, 0.16);
  animation: ageScaleIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.age-modal-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 45%, rgba(220, 53, 69, 0.22));
  z-index: -1;
  pointer-events: none;
}

.age-modal-inner {
  position: relative;
  z-index: 1;
}

.age-modal-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.age-modal-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: #fff;
}

.age-modal-text {
  color: rgba(234, 234, 234, 0.65);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.age-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.age-btn-yes {
  transition: all 0.3s ease;
  box-shadow: 0 0 18px rgba(220, 53, 69, 0.25);
}

.age-btn-yes:hover {
  transform: scale(1.03);
  box-shadow: 0 0 30px rgba(220, 53, 69, 0.4);
}

.age-btn-no {
  transition: all 0.3s ease;
}

.age-btn-no:hover {
  transform: scale(1.03);
}

.age-modal-disclaimer {
  font-size: 0.8rem;
}

.age-modal-disclaimer a {
  text-decoration: underline;
  font-weight: 600;
}

@keyframes ageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ageScaleIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ageGlowPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* ===== Navbar (glass-morphism, distinct from cards) ===== */

.pi-ticker { display: none !important; }

.navbar {
  background: rgba(14, 4, 22, 0.75);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 35, 50, 0.25);
  box-shadow: 0 1px 25px rgba(255, 30, 40, 0.1), 0 4px 20px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991px) {
  .navbar {
    background: rgba(14, 4, 22, 0.75);
  }
}

.navbar .nav-link:hover {
  color: #ff3d4d !important;
  text-shadow: 0 0 14px rgba(255, 35, 50, 0.6), 0 0 24px rgba(255, 35, 50, 0.3);
}

.nav-link {
  position: relative;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
  color: rgba(240, 235, 250, 0.8);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #dc3545;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after, .nav-link:focus::after {
  width: 70%;
}

/* ---- Navbar scroll hide-on-scroll-down, show-on-scroll-up ---- */
.navbar.fixed-top {
  transition: transform 0.35s ease, background 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.navbar-hidden {
  transform: translateY(-100%);
}

/* ===== Hero ===== */

/* Hero morph animation: JS-driven fade through categories */
.hero-morph-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: rgba(255,255,255,0.5);
  background: none;
  -webkit-text-fill-color: rgba(255,255,255,0.5);
}
.hero-morph {
  display: block;
}
.hero-morph-word {
  background: linear-gradient(135deg, #e0e0e0 0%, #b0c8e0 40%, #c0a0b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
  display: inline-block;
}
@media (max-width: 575.98px) {
  .hero-morph-word {
    white-space: normal;
    font-size: 0.75em;
  }
}
.hero-morph-out .hero-morph-word {
  opacity: 0;
  transform: translateY(-0.3em);
  filter: blur(3px);
}
.morph-paused .hero-morph-word {
  transition: none;
}

/* Hero base background fallback */

.hero-title {
  background: linear-gradient(135deg, #e0e0e0 0%, #b0c8e0 40%, #c0a0b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(13, 202, 240, 0.5)) drop-shadow(0 0 28px rgba(255, 35, 50, 0.35));
}

.hero-subtitle {
  max-width: 680px;
  color: rgba(220, 240, 255, 0.75) !important;
  font-size: 1.15rem;
  line-height: 1.6;
  text-shadow: 0 0 20px rgba(13, 202, 240, 0.25);
}

.hero-section-divider {
  width: 100%;
  max-width: 200px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, #0dcaf0, #ff2d3d, #ffd266, transparent);
  box-shadow: 0 0 12px rgba(13, 202, 240, 0.6), 0 0 24px rgba(255, 35, 50, 0.4), 0 0 36px rgba(255, 210, 100, 0.2);
}

.hero-featured-title {
  background: linear-gradient(135deg, #0dcaf0 0%, #ff4455 40%, #ff2d3d 70%, #ffd266 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(13, 202, 240, 0.4)) drop-shadow(0 0 20px rgba(255, 35, 50, 0.25));
}

.hero-featured-text {
  max-width: 620px;
  color: rgba(200, 225, 250, 0.6) !important;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---- Hero Category Quick-Pills ---- */
.hero-category-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.hero-pill {
  background: linear-gradient(135deg, rgba(255, 35, 50, 0.2), rgba(220, 40, 50, 0.15)) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 35, 50, 0.3);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35em 0.75em;
  border-radius: 50px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.hero-pill:hover {
  background: linear-gradient(135deg, rgba(255, 35, 50, 0.35), rgba(255, 50, 70, 0.25)) !important;
  color: #fff !important;
  border-color: rgba(255, 35, 50, 0.6);
  box-shadow: 0 0 18px rgba(255, 35, 50, 0.35), 0 0 30px rgba(13, 202, 240, 0.12);
  transform: translateY(-1px);
}

.hero-pill.category-active {
  background: linear-gradient(135deg, rgba(255, 35, 50, 0.5), rgba(220, 40, 50, 0.4)) !important;
  color: #fff !important;
  border-color: rgba(255, 35, 50, 0.8);
  box-shadow: 0 0 22px rgba(255, 35, 50, 0.5), 0 0 40px rgba(13, 202, 240, 0.2);
}

[data-bs-theme="light"] .hero-pill {
  background: rgba(220, 53, 69, 0.12) !important;
  color: #1a1a2e !important;
  border-color: rgba(220, 53, 69, 0.3);
  font-weight: 600;
}

[data-bs-theme="light"] .hero-pill:hover {
  background: rgba(220, 53, 69, 0.22) !important;
  color: #000 !important;
  border-color: rgba(220, 53, 69, 0.5);
}

[data-bs-theme="light"] .hero-pill.category-active {
  background: #dc3545 !important;
  color: #fff !important;
  border-color: #dc3545;
  box-shadow: 0 0 14px rgba(220, 53, 69, 0.3);
}

/* ---- Home Genre Sidebar ---- */

.home-layout {
  width: 100%;
}

.genre-sidebar {
  width: 300px;
  flex-shrink: 0;
  align-self: stretch;
}

.genre-sidebar-inner {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
}

@supports (scrollbar-width: thin) {
  .genre-sidebar-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(220, 53, 69, 0.35) transparent;
  }
}

.genre-sidebar-inner::-webkit-scrollbar {
  width: 6px;
}

.genre-sidebar-inner::-webkit-scrollbar-thumb {
  background: rgba(220, 53, 69, 0.35);
  border-radius: 999px;
}

.genre-sidebar-inner::-webkit-scrollbar-track {
  background: transparent;
}

.genre-sidebar-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(240, 235, 250, 0.9);
  margin-bottom: 1rem;
}

.genre-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.genre-sidebar .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  margin: 0;
}

.genre-sidebar .hero-pill .bi {
  font-size: 0.95rem;
  opacity: 0.9;
}

.genre-tag-cloud .pill-xl { font-size: 1.1rem; padding: 0.6em 1em; }
.genre-tag-cloud .pill-lg { font-size: 0.95rem; padding: 0.55em 0.95em; }
.genre-tag-cloud .pill-md { font-size: 0.85rem; padding: 0.5em 0.9em; }
.genre-tag-cloud .pill-sm { font-size: 0.78rem; padding: 0.45em 0.8em; }
.genre-tag-cloud .pill-xs { font-size: 0.72rem; padding: 0.4em 0.7em; }

.genre-sidebar .genre-sidebar-all {
  display: inline-block;
  margin-top: 0.5rem;
}

[data-bs-theme="light"] .genre-sidebar-inner {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="light"] .genre-sidebar-title {
  color: #1a1a2e;
}

/* Mobile: sidebar becomes a centered pill strip above the grid */
@media (max-width: 991.98px) {
  .genre-sidebar {
    display: none;
  }
  .genre-sidebar-inner {
    position: static;
    padding: 0 0 0.5rem;
    margin-bottom: 1rem;
    background: none;
    border: none;
    text-align: center;
  }
  .genre-sidebar-title {
    margin-bottom: 0.6rem;
  }
  .genre-tag-cloud {
    justify-content: center;
  }
}

[data-bs-theme="light"] .hero-title,
[data-bs-theme="light"] .hero-morph-word {
  background: none;
  -webkit-text-fill-color: #1a0a2a;
  filter: none;
}

[data-bs-theme="light"] .hero-morph-label {
  color: rgba(0,0,0,0.45);
  -webkit-text-fill-color: rgba(0,0,0,0.45);
}

/* ===== Homepage Section Backgrounds ===== */

#games {
  position: relative;
  background: transparent;
  isolation: isolate;
  overflow: hidden;
}

#games::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 35, 50, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 50%, black 20%, transparent 70%);
  pointer-events: none;
}

.ai-section {
  position: relative;
  background: radial-gradient(ellipse at 80% 20%, rgba(13, 202, 240, 0.12) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(255, 35, 50, 0.08) 0%, transparent 55%), linear-gradient(180deg, #100818 0%, #0c0e14 50%, #100818 100%) !important;
  overflow: hidden;
}

/* ===== Section Padding ===== */

.section-padding {
  padding: 5rem 0;
}

/* Ensure hero section clears the fixed navbar when scrolled to */
#heroSection,
#gamesGrid,
#categories {
  scroll-margin-top: 90px;
}

/* ===== Candy AI Logo Wrapper ===== */

.candy-img-wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #131313;
  position: relative;
  overflow: hidden;
}

.candy-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(231, 82, 117, 0.2) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(231, 82, 117, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.candy-logo-svg {
  height: 60px;
  width: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(231, 82, 117, 0.3));
  transition: filter 0.4s ease;
}

.game-card:hover .candy-logo-svg {
  filter: drop-shadow(0 0 35px rgba(231, 82, 117, 0.6));
}

/* ===== CelebMaker AI Hero ===== */

.celebmaker-hero {
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 80, 80, 0.1) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(200, 50, 50, 0.08) 0%, transparent 50%), linear-gradient(180deg, #120808 0%, #0b0b0f 100%);
}

.celebmaker-hero-img-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(255, 80, 80, 0.12), 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 80, 80, 0.1);
}

/* ===== Shared Hero Image Styles ===== */
.celebmaker-hero-img,
.lovescape-hero-img,
.hornyvilla-hero-img,
.lustgoddess-hero-img,
.booty-hero-img,
.everlusting-hero-img,
.smutstone-hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Lovescape Hero ===== */

.lovescape-hero {
  background: radial-gradient(ellipse at 30% 20%, rgba(7, 240, 255, 0.1) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(207, 122, 255, 0.08) 0%, transparent 50%), linear-gradient(180deg, #0a0f12 0%, #0b0b0f 100%);
}

/* ===== Horny Villa Hero ===== */

.hornyvilla-hero {
  background: radial-gradient(ellipse at 20% 30%, rgba(118, 71, 163, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(255, 100, 150, 0.1) 0%, transparent 50%), linear-gradient(180deg, #120a15 0%, #0b0b0f 100%);
}

/* ===== Lust Goddess Hero ===== */

.lustgoddess-hero {
  background: radial-gradient(ellipse at 20% 30%, rgba(230,55,124,0.2) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(180,60,140,0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(200,80,160,0.06) 0%, transparent 70%), linear-gradient(180deg, #1a0a18 0%, #0b0b0f 100%);
}

/* ===== Booty Heroes Hero ===== */

.booty-hero {
  background: radial-gradient(ellipse at 20% 30%, rgba(0,142,252,0.18) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(0,104,204,0.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(0,142,252,0.06) 0%, transparent 70%), linear-gradient(180deg, #0a1628 0%, #0b0b0f 100%);
}

/* ===== Everlusting Life Hero ===== */

.everlusting-hero {
  background: radial-gradient(ellipse at 20% 30%, rgba(220, 53, 69, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(255, 100, 150, 0.08) 0%, transparent 50%), linear-gradient(180deg, #0d0a12 0%, #0b0b0f 100%);
}

.browser-mockup {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(255, 35, 50, 0.2), 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 35, 50, 0.15);
  background: #1e1028;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: #12121a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.browser-dot-red {
  background: #ff5f56;
}

.browser-dot-yellow {
  background: #ffbd2e;
}

.browser-dot-green {
  background: #27c93f;
}

.browser-url {
  flex: 1;
  background: #0b0b0f;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Segoe UI', system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/* ===== Game Page Styles ===== */

.game-page-hero {
  min-height: 60vh;
  padding: 6rem 0 3rem;
  background: radial-gradient(ellipse at 20% 30%, rgba(13, 202, 240, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(255, 35, 50, 0.1) 0%, transparent 50%), linear-gradient(180deg, #0a0418 0%, #100820 100%);
}

.character-card {
  background: linear-gradient(145deg, #1c0e28, #1a1026);
  border: 1px solid rgba(255, 35, 50, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.character-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 35px rgba(255, 35, 50, 0.25);
}

.feature-card {
  background: linear-gradient(145deg, #1c0e28, #1a1026);
  border: 1px solid rgba(255, 35, 50, 0.12);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 35, 50, 0.3);
}

/* ===== PornWorks AI Hero ===== */

.pornworks-hero {
  background: radial-gradient(ellipse at 20% 30%, rgba(249, 115, 22, 0.1) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 70%, rgba(251, 146, 60, 0.08) 0%, transparent 50%),
              linear-gradient(180deg, #100c06 0%, #0b0b0f 100%);
}

.pw-browser-mockup {
  border-color: rgba(249, 115, 22, 0.15);
  box-shadow: 0 0 40px rgba(249, 115, 22, 0.1), 0 20px 60px rgba(0, 0, 0, 0.5);
}

.pw-logo-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: linear-gradient(180deg, #141008 0%, #1a140e 100%);
}

/* ===== OurDream AI Hero ===== */

.ourdream-hero {
  background: radial-gradient(ellipse at 20% 30%, rgba(13, 202, 240, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 70%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
              linear-gradient(180deg, #0a0c14 0%, #0b0b0f 100%);
}

.ourdream-hero-img-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(13, 202, 240, 0.12), 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(13, 202, 240, 0.1);
}

.ourdream-hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Swipey AI Hero ===== */

.swipey-hero {
  background: radial-gradient(ellipse at 20% 30%, rgba(13, 202, 240, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 70%, rgba(88, 28, 200, 0.06) 0%, transparent 50%),
              linear-gradient(180deg, #0a0c18 0%, #0b0b0f 100%);
}

.swipey-hero-img-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(13, 202, 240, 0.12), 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(13, 202, 240, 0.1);
  background: #1a0a2e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swipey-hero-img {
  width: 100%;
  max-height: 320px;
  height: auto;
  display: block;
  object-fit: contain;
  padding: 2rem;
}

.pw-hero-logo-img {
  max-height: 120px;
  width: auto;
  filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.3));
}

.pw-hero-video {
  width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
  object-fit: contain;
  background: #000;
}

/* ===== PornWorks AI Feature Card (ai-tools page) ===== */

.pw-ai-card-bg {
  background: linear-gradient(135deg, #1a140e, #1c1610);
  border: 1px solid rgba(249, 115, 22, 0.12);
}

.pw-ai-card-bg:hover {
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.12);
}

.game-screenshot {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.game-screenshot img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 420px;
  object-fit: cover;
}

/* ===== SmutStone Image Styling ===== */

.smutstone-img-wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #040b1a 0%, #0a1a33 30%, #061525 60%, #040b1a 100%);
  position: relative;
  overflow: hidden;
}

.smutstone-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 25%, rgba(0, 200, 255, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 75%, rgba(0, 255, 200, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(0, 255, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.smutstone-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.4rem 0.6rem;
  position: relative;
  z-index: 0;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.15));
}

.game-card:hover .smutstone-img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 18px rgba(0, 255, 255, 0.35));
}

/* ===== Game Card Video Hover ===== */

.game-card-media {
  position: relative;
  overflow: hidden;
  height: 200px;
  background: transparent;
}

.game-card-img, .game-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
  transition: opacity 0.4s ease;
}

/* ===== Game Cards ===== */

/* ---- Glass-morphism card ---- */
.game-card {
  background: linear-gradient(145deg, rgba(40, 15, 50, 0.5), rgba(25, 10, 35, 0.6));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 35, 50, 0.2);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.game-card:hover {
  background: linear-gradient(145deg, rgba(60, 20, 70, 0.6), rgba(35, 12, 50, 0.7));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: rgba(255, 35, 50, 0.55);
  box-shadow: 0 0 35px rgba(255, 30, 40, 0.3), 0 0 70px rgba(255, 30, 40, 0.12), 0 0 0 1px rgba(13, 202, 240, 0.15);
}

/* ---- Card image hover overlay (title + description) ---- */
.card-img-overlay-hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background: rgba(0,0,0,0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 5;
}
.game-card-media:hover .card-img-overlay-hover,
.smutstone-img-wrapper:hover .card-img-overlay-hover {
  opacity: 1;
}
.game-card-media:hover .card-img-overlay-hover .card-btn-play-overlay,
.smutstone-img-wrapper:hover .card-img-overlay-hover .card-btn-play-overlay {
  pointer-events: auto;
}
.card-title-overlay {
  color: #fff;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}
.card-text-overlay {
  color: rgba(255,255,255,0.75);
  margin-bottom: 0;
  line-height: 1.4;
  font-size: 0.8rem;
}
.card-btn-play-overlay {
  pointer-events: none;
  margin-top: 0.6rem;
  padding: 0.4rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 18px rgba(220, 53, 69, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-btn-play-overlay:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(220, 53, 69, 0.5);
}

/* ===== Card New Release Bubble ===== */

.game-card-new-bubble {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: linear-gradient(135deg, #ff2d3d, #ff4455);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 160, 210, 0.4);
  box-shadow: 0 0 20px rgba(255, 35, 50, 0.6), 0 0 40px rgba(220, 40, 50, 0.3);
  animation: newReleaseShimmer 1.6s ease-in-out 1 forwards;
  pointer-events: none;
}

@keyframes newReleaseShimmer {
  0% {
    box-shadow: 0 0 6px rgba(255, 35, 50, 0.3), 0 0 12px rgba(255, 35, 50, 0.1);
    transform: scale(0.95);
  }
  40% {
    box-shadow: 0 0 30px rgba(255, 35, 50, 0.8), 0 0 55px rgba(13, 202, 240, 0.45);
    transform: scale(1.06);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 35, 50, 0.6), 0 0 40px rgba(220, 40, 50, 0.3);
    transform: scale(1);
  }
}

.game-card-new-bubble.bubble-hot {
  background: linear-gradient(135deg, #fd7e14, #ff6b35);
  border: 1px solid rgba(255, 140, 50, 0.3);
  box-shadow: 0 0 15px rgba(253, 126, 20, 0.5), 0 0 25px rgba(255, 107, 53, 0.2);
}

.game-card-new-bubble.bubble-trending {
  background: linear-gradient(135deg, #0dcaf0, #00a8cc);
  color: #fff;
  border: 1px solid rgba(13, 202, 240, 0.3);
  box-shadow: 0 0 15px rgba(13, 202, 240, 0.5), 0 0 25px rgba(13, 202, 240, 0.2);
}

.game-card-new-bubble.bubble-popular {
  background: linear-gradient(135deg, #e6377c, #dc3545);
  border: 1px solid rgba(255, 142, 196, 0.3);
  box-shadow: 0 0 15px rgba(230, 55, 124, 0.5), 0 0 25px rgba(220, 53, 69, 0.2);
}

.game-card-new-bubble.bubble-updated {
  background: linear-gradient(135deg, #0d6efd, #0dcaf0);
  color: #fff;
  border: 1px solid rgba(25, 135, 84, 0.3);
  box-shadow: 0 0 15px rgba(25, 135, 84, 0.5), 0 0 25px rgba(32, 201, 151, 0.2);
}

/* ---- Neutral dark blend overlay: unifies light/dark cover art ---- */
.game-card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 8, 24, 0.08) 0%, rgba(16, 8, 24, 0.22) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ===== Sponsored Card Gold Glow ===== */

.sponsored-card .game-card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(25, 135, 84, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 75%, rgba(32, 201, 151, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(25, 135, 84, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ===== Card View Counter ===== */

.card-view-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(190, 210, 230, 0.55);
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}
.card-view-count .bi {
  font-size: 0.75rem;
}
.card-view-count .view-num {
  font-variant-numeric: tabular-nums;
}
.game-card:hover .card-view-count {
  color: rgba(210, 230, 245, 0.8);
}

/* Light theme view counter */
[data-bs-theme="light"] .card-view-count {
  color: rgba(60, 70, 90, 0.55);
}
[data-bs-theme="light"] .game-card:hover .card-view-count {
  color: rgba(40, 50, 70, 0.8);
}

/* ===== Card Like Button (thumbs-up rating) ===== */

.card-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.2rem 0.5rem;
  border-radius: 50rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(190, 210, 230, 0.5);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, transform 0.15s;
}
.card-like-btn:hover {
  color: rgba(225, 235, 250, 0.85);
  background: rgba(255, 255, 255, 0.06);
}
.card-like-btn.liked {
  color: #0dcaf0;
}
.card-like-btn.liked:hover {
  color: #3dd5f5;
  background: rgba(13, 202, 240, 0.12);
}
.card-like-btn.like-pulse {
  transform: scale(1.3);
}
.card-like-btn .bi {
  font-size: 0.85rem;
}
.card-like-btn .like-num {
  font-variant-numeric: tabular-nums;
}

/* Light theme like button */
[data-bs-theme="light"] .card-like-btn {
  color: rgba(60, 70, 90, 0.5);
}
[data-bs-theme="light"] .card-like-btn:hover {
  color: rgba(30, 40, 60, 0.85);
  background: rgba(0, 0, 0, 0.04);
}
[data-bs-theme="light"] .card-like-btn.liked {
  color: #0d6eb5;
}
[data-bs-theme="light"] .card-like-btn.liked:hover {
  color: #0b5a95;
  background: rgba(13, 110, 181, 0.1);
}
[data-bs-theme="light"] .card-like-btn.disliked {
  color: #b5450d;
}

/* Rating group container */
.card-rating-group {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

/* Score number between buttons */
.card-rating-score {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(200, 215, 235, 0.6);
  font-variant-numeric: tabular-nums;
  min-width: 2rem;
  text-align: center;
  transition: color 0.2s;
}
[data-bs-theme="light"] .card-rating-score {
  color: rgba(55, 65, 85, 0.6);
}

/* Dislike button */
.card-dislike-btn .bi {
  transform: scaleX(-1);
}
.card-dislike-btn.disliked {
  color: #f06a3d;
}
.card-dislike-btn.disliked:hover {
  color: #f48a65;
  background: rgba(240, 106, 61, 0.12);
}

/* Mobile: slightly larger for touch */
@media (max-width: 575.98px) {
  .card-view-count {
    font-size: 0.85rem;
    gap: 0.4rem;
  }
  .card-view-count .bi {
    font-size: 0.82rem;
  }
  .card-like-btn {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
  }
  .card-like-btn .bi {
    font-size: 0.9rem;
  }
}

/* ===== Card Favorite Button (heart + count) ===== */

.card-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.2rem 0.5rem;
  border-radius: 50rem;
  font-size: 0.8rem;
  color: rgba(190, 210, 230, 0.5);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, transform 0.15s;
}
.card-fav-btn:hover {
  color: #ff5c72;
  background: rgba(255, 92, 114, 0.12);
}
.card-fav-btn.active {
  color: #ff465a;
}
.card-fav-btn.fav-pulse {
  transform: scale(1.25);
}
.card-fav-btn .bi {
  font-size: 0.9rem;
}

.card-fav-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.card-fav-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(190, 210, 230, 0.55);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.card-fav-count .fav-num {
  font-variant-numeric: tabular-nums;
}

/* ===== Card Views Stat (Most Played page cards) ===== */

.card-views-count {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(190, 210, 230, 0.55);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.card-views-count .bi {
  font-size: 0.85rem;
}
.card-views-count .view-num {
  font-variant-numeric: tabular-nums;
}

/* Light theme */
[data-bs-theme="light"] .card-fav-btn {
  color: rgba(60, 70, 90, 0.5);
}
[data-bs-theme="light"] .card-fav-btn:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
}
[data-bs-theme="light"] .card-fav-btn.active {
  color: #dc3545;
}
[data-bs-theme="light"] .card-fav-count {
  color: rgba(60, 70, 90, 0.55);
}
[data-bs-theme="light"] .card-views-count {
  color: rgba(60, 70, 90, 0.55);
}

/* Mobile: slightly larger for touch */
@media (max-width: 575.98px) {
  .card-fav-btn {
    font-size: 0.9rem;
    padding: 0.25rem 0.6rem;
  }
  .card-fav-btn .bi {
    font-size: 0.95rem;
  }
  .card-fav-count {
    font-size: 0.85rem;
  }
  .card-views-count {
    font-size: 0.85rem;
  }
}

/* ===== Card Ad Badge (top-right, like AdChoices) ===== */

.game-card-ad-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  transition: color 0.2s ease, background 0.2s ease;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
}

.game-card-ad-badge:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 0.65);
}

/* Tooltip hidden by default, shown on hover */
.game-card-ad-badge .ad-badge-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(30, 30, 35, 0.95);
  color: #ccc;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
  font-family: var(--font-body);
}

.game-card-ad-badge:hover .ad-badge-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Card Sponsored Ribbon (top-right) ===== */

.game-card-ribbon {
  position: absolute;
  top: 18px;
  right: -34px;
  z-index: 10;
  width: 120px;
  padding: 0.25rem 0;
  background: linear-gradient(135deg, #198754, #20c997);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

/* ===== Genre Tag Badges ===== */

.tag-badge {
  font-size: 0.65rem;
}

.game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(13, 202, 240, 0.5);
  box-shadow: 0 20px 50px rgba(255, 30, 40, 0.25), 0 0 0 1px rgba(13, 202, 240, 0.25), 0 0 35px rgba(13, 202, 240, 0.12);
  will-change: transform;
}

.game-card .card-img-top {
  height: 200px;
  object-fit: contain;
  background: transparent;
  padding: 0.5rem;
}

.game-card .card-body {
  padding: 0.5rem 0.7rem;
}

/* ---- Genre badge: truncate on narrow cards ---- */
.game-card .badge {
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  padding: 0.25em 0.55em;
}

/* ---- Platform icons: compact ---- */
.game-card .small.d-flex.gap-1 {
  font-size: 0.75rem;
}

.game-card .card-title {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: #f5f0f8;
}

.game-card .btn {
  transition: all 0.25s ease;
  font-size: 0.8rem;
}

/* ===== Game Card Action Buttons (Play Now / More Info) ===== */

.card-btn-play {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  padding: 0.5rem 1rem !important;
  border: 1.5px solid rgba(255, 35, 50, 0.4) !important;
  background: linear-gradient(135deg, rgba(255, 35, 50, 0.1), rgba(220, 40, 55, 0.08)) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.card-btn-play:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 35, 50, 0.2), rgba(255, 50, 70, 0.15)) !important;
  border-color: rgba(255, 35, 50, 0.6) !important;
  color: #ff2d3d !important;
  box-shadow: 0 4px 20px rgba(255, 30, 40, 0.35), 0 0 40px rgba(255, 30, 40, 0.18);
}

.card-btn-play:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(255, 30, 40, 0.25);
}

.card-btn-info {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid rgba(13, 202, 240, 0.4) !important;
  color: rgba(200, 240, 255, 0.9) !important;
  background: linear-gradient(135deg, rgba(13, 202, 240, 0.08), rgba(0, 180, 220, 0.06)) !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.card-btn-info:hover {
  border-color: rgba(13, 202, 240, 0.7) !important;
  color: #3dd5f5 !important;
  background: linear-gradient(135deg, rgba(13, 202, 240, 0.18), rgba(0, 200, 240, 0.12)) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(13, 202, 240, 0.35), 0 0 50px rgba(0, 216, 255, 0.18);
}

.card-btn-info:active {
  transform: translateY(0);
}



/* ===== CelebMaker Image Styling ===== */

.celebmaker-img-wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a0a0a 0%, #2d0a0a 30%, #4a1515 100%);
  position: relative;
  overflow: hidden;
}

.celebmaker-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 12px rgba(255, 100, 100, 0.3));
  transition: all 0.4s ease;
}

.celebmaker-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(45, 10, 10, 0.4) 100%);
  pointer-events: none;
  z-index: 2;
}

.game-card:hover .celebmaker-img {
  filter: drop-shadow(0 0 22px rgba(255, 100, 100, 0.6));
  transform: scale(1.05);
}

/* ===== AI Section Animated Background ===== */

.ai-section {
  position: relative;
  overflow: hidden;
}

.ai-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ai-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: rgba(13, 202, 240, 0.35);
  border-radius: 50%;
  animation: aiFloat var(--dr, 8s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  box-shadow: 0 0 6px rgba(13, 202, 240, 0.2), 0 0 12px rgba(13, 202, 240, 0.1);
}

.ai-particle::after {
  content: '';
  position: absolute;
  inset: -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 202, 240, 0.15) 0%, transparent 70%);
  animation: aiPulse var(--dr, 8s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

@keyframes aiFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate(20px, -25px) scale(1.5);
    opacity: 0.2;
  }
}

@keyframes aiPulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ===== Tool Cards ===== */

/* ===== Category Cards ===== */

.category-card {
  background: linear-gradient(145deg, rgba(30, 12, 40, 0.7), rgba(18, 8, 28, 0.8));
  color: rgba(210, 235, 255, 0.75);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 35, 50, 0.14);
}

.category-card:hover {
  background: linear-gradient(145deg, rgba(50, 18, 60, 0.8), rgba(30, 10, 45, 0.9));
  color: #0dcaf0;
  border-color: rgba(13, 202, 240, 0.5);
  box-shadow: 0 0 25px rgba(13, 202, 240, 0.2), 0 0 50px rgba(255, 30, 40, 0.1);
  transform: scale(1.04);
}

.category-card.category-active {
  background: linear-gradient(145deg, rgba(60, 15, 30, 0.8), rgba(40, 8, 20, 0.9));
  color: #ff2d3d;
  border-color: rgba(255, 35, 50, 0.6);
  box-shadow: 0 0 30px rgba(255, 30, 40, 0.35), 0 0 60px rgba(255, 30, 40, 0.15);
  transform: scale(1.04);
}

/* Mobile: 2 per row for better density */
@media (max-width: 575.98px) {
  #categoriesGrid > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .category-card {
    padding: 1rem 0.75rem !important;
  }
  .category-card .small {
    font-size: 0.85rem;
  }
  .category-card .display-6 {
    font-size: 1.6rem;
  }
}

/* ===== Stats ===== */

/* ===== Sticky CTA Bar ===== */

.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  display: none;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow-x: hidden;
}

.sticky-cta-bar.visible {
  transform: translateY(0);
  opacity: 1;
}

.sticky-cta-inner {
  background: transparent;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sticky-cta-bar::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dc3545, transparent);
}

.sticky-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
}
@media (min-width: 400px) {
  .sticky-cta-btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
}
@media (min-width: 576px) {
  .sticky-cta-btn {
    font-size: 1rem;
    padding: 0.5rem 1.25rem;
  }
}

/* ---- Sticky bar mobile: hide tagline, shrink brand ---- */
@media (max-width: 399px) {
  .sticky-brand {
    font-size: 0.8rem;
  }
}

@keyframes statusPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ---- Favorites System ---- */
.fly-heart {
  font-size: 1.8rem;
  color: #dc3545;
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 8px rgba(220,53,69,0.6));
}

.nav-link.fav-pulse {
  animation: favPulse 0.5s ease;
}
@keyframes favPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.fav-badge {
  display: inline-block;
  background: #dc3545;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  margin-left: 3px;
  vertical-align: top;
}

@media (max-width: 991.98px) {
  .nav-link .fav-label { display: none; }
}

/* ===== Footer ===== */

.logo-xxx-footer {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

footer {
  background: rgba(11, 11, 15, 0.95);
}

footer a:hover {
  color: #dc3545 !important;
  transition: color 0.2s ease;
}

/* ===== Content Container Widths ===== */

.content-container-narrow {
  max-width: 860px;
}

/* ===== Page Header Top Padding ===== */

.page-header-section {
  padding-top: 8rem;
}

/* ===== About / CTA Paragraph Max Width ===== */

.cta-text-max {
  max-width: 600px;
}

/* ===== Slug Message Style (404 page) ===== */

.slug-message {
  max-width: 500px;
  margin: 0 auto 1.5rem;
}

/* ===== 404 Page Main ===== */

.page-404-main {
  padding-top: 120px;
  padding-bottom: 80px;
}

/* ===== 404 Emoji ===== */

.icon-404-emoji {
  font-size: 5rem;
}

/* ===== 404 Title Font ===== */

.title-404 {
  font-family: 'Orbitron', sans-serif;
}

/* ===== Swipey AI Card Image ===== */

.swipey-card-img {
  object-fit: contain;
  padding: 2rem;
  background: #1a0a2e;
}

/* ===== AI Girlfriend Cards Row (Swipey AI Page) ===== */

.gf-cards-section {
  padding: 2rem 0 0;
  overflow: hidden;
}

.gf-cards-scroll-wrap {
  overflow-x: auto;
  -ms-overflow-style: none;
  padding-bottom: 0.5rem;
}
.gf-cards-scroll-wrap::-webkit-scrollbar { display: none; }

.gf-cards-row {
  display: flex;
  gap: 12px;
  padding: 4px 0 20px;
  width: max-content;
  min-width: 100%;
}

@media (min-width: 768px) {
  .gf-cards-row {
    gap: 20px;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
}

/* Individual Card */
.gf-card {
  flex: 0 0 170px;
  width: 170px;
}

@media (min-width: 768px) {
  .gf-card {
    flex: 0 0 236px;
    width: 236px;
  }
}

.gf-card-inner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.gf-card-inner:hover {
  transform: scale(1.03);
  border-color: rgba(139,92,246,0.5);
  box-shadow: 0 0 30px rgba(139,92,246,0.2);
}

@media (min-width: 768px) {
  .gf-card-inner {
    border-radius: 24px;
  }
}

/* Card Media Area */
.gf-card-media {
  aspect-ratio: 0.55 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.gf-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  transition: transform 0.3s ease;
}
.gf-card-inner:hover .gf-card-video {
  transform: scale(1.05);
}

.gf-card-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* Gradient overlay at bottom of media */
.gf-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 100%);
}

.gf-card-img-placeholder {
  font-size: 3rem;
  color: rgba(255,255,255,0.15);
}

@media (min-width: 768px) {
  .gf-card-img-placeholder {
    font-size: 4rem;
  }
}

/* Card Body */
.gf-card-body {
  padding: 14px 12px 16px;
  position: relative;
  z-index: 3;
}
.gf-card-inner:not(.gf-card-cta-inner) .gf-card-body {
  margin-top: -80px;
}

@media (min-width: 768px) {
  .gf-card-body {
    padding: 20px 20px 24px;
  }
  .gf-card-inner:not(.gf-card-cta-inner) .gf-card-body {
    margin-top: -100px;
  }
}

/* Link card: remove default anchor styles */
.gf-card-link {
  text-decoration: none !important;
  color: inherit;
}
.gf-card-link:hover {
  color: inherit;
}

.gf-card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}
@media (min-width: 768px) {
  .gf-card-name { font-size: 1.1rem; margin-bottom: 8px; }
}

.gf-card-desc {
  font-size: 0.7rem;
  line-height: 1.4;
  color: #D9D1DC;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .gf-card-desc { font-size: 0.8rem; }
}

.gf-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gf-tag {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  color: #eaeaea;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .gf-tag { font-size: 0.65rem; padding: 3px 10px; }
}

/* Card gradient backgrounds */
.gf-card-grad-1 { background: linear-gradient(135deg, #2d1b4e 0%, #1a0a2e 40%, #0d1b3e 100%); }
.gf-card-grad-2 { background: linear-gradient(135deg, #1a3a2e 0%, #0d2818 40%, #1a2e0d 100%); }
.gf-card-grad-3 { background: linear-gradient(135deg, #3e1a1a 0%, #2e0d0d 40%, #1a1a0d 100%); }
.gf-card-grad-4 { background: linear-gradient(135deg, #3e2e1a 0%, #2e1e0d 40%, #1a2e1a 100%); }
.gf-card-grad-5 { background: linear-gradient(135deg, #2e1a3e 0%, #1e0d2e 40%, #1a1a3e 100%); }

/* CTA Cards */
.gf-card-cta-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
}
@media (min-width: 768px) {
  .gf-card-cta-inner { min-height: 420px; }
}

.gf-card-cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #0d1b3e 100%);
  z-index: 0;
}
.gf-card-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(139,92,246,0.3) 0%, transparent 70%);
  animation: gfCtaPulse 3s ease-in-out infinite;
}
.gf-card-cta-bg-alt {
  background: linear-gradient(135deg, #1a0a2e 0%, #3e1a2e 50%, #2e1a0d 100%);
}
.gf-card-cta-bg-alt::after {
  background: radial-gradient(ellipse at center, rgba(236,72,153,0.3) 0%, transparent 70%);
}

.gf-card-cta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.6;
}

.gf-card-cta-content {
  position: relative;
  z-index: 1;
  padding: 16px 14px;
  text-align: center;
}
@media (min-width: 768px) {
  .gf-card-cta-content { padding: 24px 20px; }
}

.gf-card-cta-title {
  font-family: 'Anton', var(--font-display);
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 400;
  white-space: pre-line;
}
@media (min-width: 768px) {
  .gf-card-cta-title { font-size: 1.5rem; }
}

@keyframes gfCtaPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* Responsive: tablet and up; allow wrapping */
@media (min-width: 768px) {
  .gf-cards-scroll-wrap {
    overflow-x: visible;
    padding-bottom: 0;
  }
  .gf-cards-row {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

/* ===== Hero Browser Mockup Shared ===== */

.browser-mockup-booty {
  box-shadow: 0 0 40px rgba(189,51,118,0.15), 0 20px 60px rgba(0,0,0,0.5);
  border-color: rgba(189,51,118,0.1);
}

/* ===== Responsive tweaks ===== */

@media (max-width: 767.98px) {
  .display-3 {
    font-size: 2.2rem;
  }
  .display-5 {
    font-size: 1.75rem;
  }
  .section-padding {
    padding: 3rem 0;
  }
  .game-card .card-img-top {
    height: 180px;
    padding: 0.4rem;
  }
  .candy-img-wrapper {
    height: 130px;
  }
  /* Ensure hero section h1 clears the fixed navbar + mobile search bar */
  #heroSection {
    scroll-margin-top: 140px;
  }
}

/* ===== Passion Industry Hero (shared class defined in passion-theme.css) ===== */

/* ===== Glow Button (Phaser-inspired) ===== */

.btn-glow {
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 24px 3px rgba(220, 53, 69, 0.25);
}

.btn-glow:hover {
  transform: scale(1.04);
  box-shadow: 0 0 42px 8px rgba(220, 53, 69, 0.45);
}

.btn-glow-info {
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 24px 3px rgba(13, 202, 240, 0.2);
}

.btn-glow-info:hover {
  transform: scale(1.04);
  box-shadow: 0 0 42px 8px rgba(13, 202, 240, 0.4);
}

/* ===== Card Lazy-Load Reveal Animation ===== */

.game-card-reveal,
.pi-panel:not(.pi-hero-img-wrapper) {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.game-card-reveal.visible,
.pi-panel:not(.pi-hero-img-wrapper).visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Custom scrollbar ===== */

/* ===== Lazy-Load Image Shimmer & Reveal ===== */
/* Image is hidden (opacity: 0) until fully loaded, then fades in.
   A shimmer animation plays on the wrapper as a placeholder. */

@keyframes img-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Shimmer placeholder on the image itself (falls back to wrapper below) */
img.img-shimmer:not(.img-loaded) {
  opacity: 0;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.12) 37%,
    rgba(255,255,255,0.04) 50%
  );
  background-size: 200% 100%;
  animation: img-shimmer 2.8s ease-in-out infinite;
  transition: opacity 0.45s ease;
  min-height: 180px;
}

img.img-loaded {
  opacity: 1;
  background: transparent;
  animation: none;
}

/* Wrapper-level shimmer for game cards, panels, screenshots */
.game-card-media:has(img.img-shimmer:not(.img-loaded)),
.pi-panel:has(img.img-shimmer:not(.img-loaded)),
.smutstone-img-wrapper:has(img.img-shimmer:not(.img-loaded)),
.celebmaker-hero-img-wrapper:has(img.img-shimmer:not(.img-loaded)),
.celebmaker-img-wrapper:has(img.img-shimmer:not(.img-loaded)),
.candy-img-wrapper:has(img.img-shimmer:not(.img-loaded)),
.play-hero:has(img.img-shimmer:not(.img-loaded)),
.play-similar-card:has(img.img-shimmer:not(.img-loaded)) {
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.10) 37%,
    rgba(255,255,255,0.03) 50%
  );
  background-size: 200% 100%;
  animation: img-shimmer 2.8s ease-in-out infinite;
  border-radius: inherit;
}

/* Fallback for browsers that don't support :has() — min-height on wrappers */
.pi-panel img.img-shimmer:not(.img-loaded),
.game-card-media img.img-shimmer:not(.img-loaded),
.celebmaker-hero-img-wrapper img.img-shimmer:not(.img-loaded),
.celebmaker-img-wrapper img.img-shimmer:not(.img-loaded),
.candy-img-wrapper img.img-shimmer:not(.img-loaded),
.smutstone-img-wrapper img.img-shimmer:not(.img-loaded),
.play-hero img.img-shimmer:not(.img-loaded),
.play-similar-card img.img-shimmer:not(.img-loaded) {
  min-height: 200px;
}

/* ===== Navbar Search ===== */

/* Override Bootstrap's space-between so margin-left:auto works predictably */
.navbar > .container {
  justify-content: flex-start;
}

.navbar-search {
  position: relative;
  margin-left: 1rem;
}

.navbar-search-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(220,53,69,0.25);
  color: #eaeaea;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 2.5rem 0.45rem 1rem;
  border-radius: 999px;
  width: 200px;
  cursor: text;
  transition: width 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  outline: none;
}

.navbar-search-input::placeholder {
  color: rgba(234,234,234,0.35);
  font-size: 0.78rem;
  transition: color 0.3s ease;
}

/* Subtle border lift on hover */
.navbar-search:hover .navbar-search-input {
  border-color: rgba(220,53,69,0.45);
}

/* Expand on focus (extra room while typing) */
.navbar-search-input:focus {
  width: 260px;
  border-color: rgba(220,53,69,0.6);
  background: rgba(220,53,69,0.08);
  box-shadow: 0 0 18px rgba(220,53,69,0.15), 0 0 0 1px rgba(220,53,69,0.15);
}

.navbar-search-input:focus::placeholder {
  color: rgba(234,234,234,0.35);
}

.navbar-search-icon {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(220,53,69,0.6);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
  transition: color 0.3s ease;
}

.navbar-search:hover .navbar-search-icon,
.navbar-search-input:focus ~ .navbar-search-icon {
  color: #dc3545;
}

[data-bs-theme="light"] .navbar-search-input {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.18);
  color: #1a1a2e;
}

[data-bs-theme="light"] .navbar-search-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

[data-bs-theme="light"] .navbar-search-input:focus {
  background: rgba(220, 53, 69, 0.04);
  border-color: rgba(220, 53, 69, 0.4);
}

[data-bs-theme="light"] .navbar-search .navbar-search-icon {
  color: rgba(0, 0, 0, 0.4);
}

/* ---- Autocomplete Dropdown ---- */

.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #14141a;
  border: 1px solid rgba(220,53,69,0.2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(220,53,69,0.08);
  z-index: 1060;
  max-height: 340px;
  overflow-y: auto;
  display: none;
}

.search-dropdown.active {
  display: block;
}

.search-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  text-decoration: none;
  color: #eaeaea;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s ease;
}

.search-dropdown-item:last-child {
  border-bottom: none;
}

.search-dropdown-item:hover,
.search-dropdown-item.active {
  background: rgba(220,53,69,0.12);
}

.search-dropdown-item .search-item-icon {
  font-size: 1rem;
  color: rgba(220,53,69,0.7);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.search-dropdown-item .search-item-text {
  display: flex;
  flex-direction: column;
}

.search-dropdown-item .search-item-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.search-dropdown-item .search-item-sub {
  font-size: 0.7rem;
  color: rgba(234,234,234,0.45);
  margin-top: 1px;
}

.search-dropdown-item .search-item-badge {
  margin-left: auto;
  font-size: 0.62rem;
  font-family: var(--font-display);
  padding: 0.15em 0.55em;
  border-radius: 99px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.search-dropdown-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: rgba(234,234,234,0.35);
  font-size: 0.8rem;
}

.search-dropdown mark {
  background: rgba(220,53,69,0.3);
  color: #eaeaea;
  padding: 0 2px;
  border-radius: 2px;
}

@media (max-width: 991.98px) {
  .navbar-search {
    margin-left: 0;
    margin-top: 0.5rem;
    width: 100%;
  }
  .navbar-search-input {
    width: 100%;
    padding: 0.45rem 2.5rem 0.45rem 1rem;
    background: rgba(255,255,255,0.06);
    border-color: rgba(220,53,69,0.25);
    cursor: text;
  }
  .navbar-search-input:focus {
    width: 100%;
  }
  .navbar-search-input::placeholder {
    color: rgba(234,234,234,0.35);
  }
}

/* Mobile light theme — visible search bar */
@media (max-width: 991.98px) {
  [data-bs-theme="light"] .navbar-search .navbar-search-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.18);
    cursor: text;
  }
  [data-bs-theme="light"] .navbar-search .navbar-search-input:focus {
    background: rgba(220, 53, 69, 0.04);
    border-color: rgba(220, 53, 69, 0.4);
  }
  [data-bs-theme="light"] .navbar-search .navbar-search-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
  }
  [data-bs-theme="light"] .navbar-search .navbar-search-icon {
    color: rgba(0, 0, 0, 0.4);
  }
}

/* Mobile genre dropdown next to search */
.mobile-search-row .navbar-search {
  margin-left: 0;
  margin-top: 0;
}

/* ---- Mobile search: slides open from a search icon, inside the navbar row ----
   Below 992px the navbar is reduced to just the logo + the search row (`.navbar-ai`,
   `.navbar-fav` and the mobile theme toggle are all `display: none !important`), so
   the search used to own a permanent second line and made the navbar 77px tall
   instead of 44px, pushing page content down. It now expands inside the navbar row
   and the logo gives way only when the screen can't fit both.
   State lives in a visually-hidden checkbox and the icon is its <label>, so this
   needs no JS - the site's other nav controls (side-nav, theme, AI dropdown) are
   already JS, and a CSS-only toggle also fails open: if this stylesheet is ever
   stale the row simply renders visible rather than being unreachable. */
.mobile-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  order: 3;                      /* trails the row, so it sits at the right edge */
  margin-left: auto;
  padding: 0.3rem 0.45rem;
  font-size: 1.05rem;
  line-height: 1;
  color: rgba(234, 234, 234, 0.75);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s ease;
}
.mobile-search-toggle:hover { color: #ff3d4d; }
.mobile-search-icon-close { display: none; }

/* Icon becomes a close X while the search is open */
#mobileSearchToggle:checked ~ .mobile-search-toggle .mobile-search-icon-open { display: none; }
#mobileSearchToggle:checked ~ .mobile-search-toggle .mobile-search-icon-close { display: inline-block; }

/* The checkbox is visually hidden but still focusable (Space toggles it) */
#mobileSearchToggle:focus-visible ~ .mobile-search-toggle {
  outline: 2px solid #0dcaf0;
  outline-offset: 2px;
}
[data-bs-theme="light"] .mobile-search-toggle { color: rgba(0, 0, 0, 0.55); }
[data-bs-theme="light"] .mobile-search-toggle:hover { color: #dc3545; }

@media (max-width: 991.98px) {
  /* The floating hamburger (#sideNavToggle) is `position: fixed; top: 9px;
     right: 14px; width: 38px; z-index: 1120`, so it owns the top-right corner of the
     viewport. That is exactly why the original search lived on a second line - inline
     it would sit underneath the hamburger. Reserve the corner so the icon stays
     clickable next to it instead of behind it. */
  .mobile-search-toggle {
    margin-right: 3.75rem;
  }
  /* Collapsed = zero width, so the navbar stays ONE row tall and nothing below it
     shifts. `visibility: hidden` keeps the collapsed input out of the tab order. */
  .mobile-search-row {
    order: 2;                    /* between the logo and the toggle */
    /* flex-basis 0 is load-bearing: with `auto` the flex base size is the input's
       intrinsic width, which makes the item's hypothetical size larger than the
       line, so `flex-wrap: wrap` drops it to a second line BEFORE flex-shrink gets a
       chance to run - and a second line is exactly the layout shift we're removing.
       A zero basis keeps it on the navbar line and lets it grow into the free space. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: max-width 0.34s ease, opacity 0.2s ease, visibility 0s linear 0.34s;
  }
  #mobileSearchToggle:checked ~ .mobile-search-row {
    max-width: 100%;
    opacity: 1;
    overflow: visible;           /* else the autocomplete dropdown would be clipped */
    pointer-events: auto;
    visibility: visible;
    transition: max-width 0.34s ease, opacity 0.2s ease, visibility 0s;
  }
}

/* Under 400px there is not room for the logo AND a usable input, so the logo yields
   and the search takes the row. With the logo out of the way it all fits on one
   navbar line, so the navbar height (and the page content below it) never moves.
   Note: this MUST stay a top-level media query - nesting @media inside @media is
   invalid in plain CSS and the whole block gets dropped. */
@media (max-width: 399.98px) {
  .navbar > .container:has(#mobileSearchToggle:checked) .navbar-brand {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.34s ease, opacity 0.2s ease;
  }
}

/* index.html packs a genre <select> (128px, `flex: 0 0 auto`, `min-width: 128px`)
   into this same row, which starves the input down to ~78px at 480px wide. Search is
   the primary action, so on narrow screens the filter gives way; above 576px there is
   room for both. */
@media (max-width: 575.98px) {
  #mobileSearchToggle:checked ~ .mobile-search-row .navbar-genre-select {
    display: none;
  }
}

.navbar-genre-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 128px;
  font-size: 0.8rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #eaeaea;
  cursor: pointer;
  padding: 0.45rem 2rem 0.45rem 0.9rem;
  color-scheme: dark;
}

.navbar-genre-select option {
  background-color: #1a1028;
  color: #eaeaea;
}

[data-bs-theme="light"] .navbar-genre-select {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.18);
  color: #1a1a2e;
  color-scheme: light;
}

[data-bs-theme="light"] .navbar-genre-select option {
  background-color: #ffffff;
  color: #1a1a2e;
}

/* =====================================================================
   LIGHT THEME OVERRIDES
   ===================================================================== */

[data-bs-theme="light"] {
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Orbitron', sans-serif;
}

/* ---- Theme toggle icons ---- */
.theme-toggle {
  font-size: 1.15rem;
  padding: 0.35rem 0.5rem;
  color: rgba(234,234,234,0.6);
  transition: color 0.25s;
  border: none;
  background: none;
}
.theme-toggle:hover {
  color: #eaeaea;
}
[data-bs-theme="light"] .theme-toggle {
  color: rgba(0,0,0,0.45);
}
[data-bs-theme="light"] .theme-toggle:hover {
  color: #1a1a1a;
}
.theme-icon-light { display: none; }
.theme-icon-dark  { display: inline; }
[data-bs-theme="light"] .theme-icon-light { display: inline; }
[data-bs-theme="light"] .theme-icon-dark  { display: none; }

.side-nav .theme-icon-light { display: inline; }
.side-nav .theme-icon-dark { display: none; }
[data-bs-theme="light"] .side-nav .theme-icon-light { display: none; }
[data-bs-theme="light"] .side-nav .theme-icon-dark { display: inline; }

.side-top-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.side-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---- Body ---- */
[data-bs-theme="light"] body {
  background: #ececf0;
  color: #1a1a2e;
}

/* ---- Navbar ---- */
[data-bs-theme="light"] .navbar {
  background: rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
[data-bs-theme="light"] .navbar .nav-link {
  color: #333 !important;
}
[data-bs-theme="light"] .navbar .nav-link:hover {
  color: #dc3545 !important;
}
[data-bs-theme="light"] .navbar-toggler-icon {
  filter: invert(1);
}

/* ---- Hero ---- */
[data-bs-theme="light"] .hero-section {
  background: linear-gradient(180deg, #e8e8ee 0%, #e0e0e8 50%, #ececf0 100%);
}
[data-bs-theme="light"] .hero-section-divider {
  background: linear-gradient(90deg, transparent, rgba(220,53,69,0.3), transparent);
}
[data-bs-theme="light"] .hero-particle {
  background: rgba(220,53,69,0.12);
}

/* ---- Game Cards ---- */
[data-bs-theme="light"] .game-card {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-bs-theme="light"] .game-card:hover {
  border-color: rgba(13,202,240,0.5);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08), 0 0 0 1px rgba(13,202,240,0.25);
}
[data-bs-theme="light"] .game-card .card-img-top {
  background: #fafafa;
}
[data-bs-theme="light"] .game-card-media {
  background: #fafafa;
}

/* ---- Text overrides ---- */
[data-bs-theme="light"] .text-white-50 {
  color: rgba(0,0,0,0.5) !important;
}
[data-bs-theme="light"] .card-text {
  color: rgba(0,0,0,0.55) !important;
}
[data-bs-theme="light"] .card-title {
  color: #1a1a2e !important;
}

/* ---- Sponsored Glow (lighter gold for light bg) ---- */
[data-bs-theme="light"] .sponsored-card .game-card-media::before {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(25, 135, 84, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 75%, rgba(32, 201, 151, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(25, 135, 84, 0.03) 0%, transparent 70%);
}

/* ---- Ad Badge (light theme) ---- */
[data-bs-theme="light"] .game-card-ad-badge {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.1);
}
[data-bs-theme="light"] .game-card-ad-badge:hover {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.18);
}
[data-bs-theme="light"] .game-card-ad-badge .ad-badge-tooltip {
  background: rgba(255, 255, 255, 0.95);
  color: #555;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ---- SmutStone ---- */
[data-bs-theme="light"] .smutstone-img-wrapper {
  background: linear-gradient(135deg, #e8ecf2 0%, #dde3ed 30%, #e8ecf2 60%, #f0f2f5 100%);
}
[data-bs-theme="light"] .smutstone-img-wrapper::before {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(0, 150, 200, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 75%, rgba(0, 200, 180, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 180, 220, 0.04) 0%, transparent 70%);
}

/* ---- Category Cards ---- */
[data-bs-theme="light"] .category-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  color: #333;
}
[data-bs-theme="light"] .category-card:hover {
  background: #fafafa;
  border-color: rgba(220,53,69,0.2);
  color: #dc3545;
}

[data-bs-theme="light"] .category-card.category-active {
  background: #fff5f5;
  border-color: rgba(220,53,69,0.5);
  color: #dc3545;
  box-shadow: 0 0 16px rgba(220,53,69,0.15);
  transform: scale(1.04);
}

/* ---- FAQ ---- */
[data-bs-theme="light"] .faq-wrapper {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}
[data-bs-theme="light"] .faq-btn {
  color: #1a1a2e !important;
}
[data-bs-theme="light"] .faq-circle {
  border-color: rgba(0,0,0,0.15) !important;
  color: #555 !important;
}
[data-bs-theme="light"] .faq-hr {
  border-color: rgba(0,0,0,0.06);
}

/* ---- Sticky CTA Bar ---- */
[data-bs-theme="light"] .sticky-cta-inner {
  background: transparent;
}
[data-bs-theme="light"] .sticky-brand,
[data-bs-theme="light"] .sticky-label,
[data-bs-theme="light"] .sticky-tagline {
  color: #333 !important;
}
[data-bs-theme="light"] .sticky-dot {
  background: #198754;
}

/* ---- Footer ---- */
[data-bs-theme="light"] footer {
  background: #fff;
  border-top-color: rgba(0,0,0,0.06) !important;
}
[data-bs-theme="light"] footer .text-white-50 {
  color: rgba(0,0,0,0.45) !important;
}

/* ---- Age Modal ---- */
[data-bs-theme="light"] .age-modal-overlay {
  background: rgba(0,0,0,0.5);
}
[data-bs-theme="light"] .age-modal-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}
[data-bs-theme="light"] .age-modal-title {
  color: #1a1a2e !important;
}
[data-bs-theme="light"] .age-modal-text {
  color: rgba(0,0,0,0.6) !important;
}
[data-bs-theme="light"] .age-modal-disclaimer {
  color: rgba(0,0,0,0.45) !important;
}
[data-bs-theme="light"] .age-btn-no {
  border-color: rgba(0,0,0,0.15) !important;
  color: #333 !important;
}
[data-bs-theme="light"] .age-btn-no:hover {
  background: rgba(0,0,0,0.04);
  color: #111 !important;
}

/* ---- Search ---- */
[data-bs-theme="light"] .navbar-search-input {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.18);
  color: #1a1a2e;
}
[data-bs-theme="light"] .navbar-search:hover .navbar-search-input {
  background: rgba(0,0,0,0.06);
  border-color: rgba(220,53,69,0.4);
}
[data-bs-theme="light"] .navbar-search-input::placeholder {
  color: rgba(0,0,0,0.4);
}
[data-bs-theme="light"] .navbar-search:hover .navbar-search-input::placeholder,
[data-bs-theme="light"] .navbar-search-input:focus::placeholder {
  color: rgba(0,0,0,0.45);
}
[data-bs-theme="light"] .navbar-search-input:focus {
  background: rgba(220,53,69,0.04);
  border-color: rgba(220,53,69,0.4);
  box-shadow: 0 0 12px rgba(220,53,69,0.08);
}
[data-bs-theme="light"] .navbar-search-icon {
  color: rgba(0,0,0,0.45);
}
[data-bs-theme="light"] .navbar-search:hover .navbar-search-icon,
[data-bs-theme="light"] .navbar-search-input:focus ~ .navbar-search-icon {
  color: rgba(220,53,69,0.7);
}
[data-bs-theme="light"] .search-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
[data-bs-theme="light"] .search-dropdown-item {
  color: #333;
  border-bottom-color: rgba(0,0,0,0.04);
}
[data-bs-theme="light"] .search-dropdown-item:hover,
[data-bs-theme="light"] .search-dropdown-item.active {
  background: rgba(220,53,69,0.06);
}
[data-bs-theme="light"] .search-dropdown-item .search-item-sub {
  color: rgba(0,0,0,0.4);
}
[data-bs-theme="light"] .search-dropdown-empty {
  color: rgba(0,0,0,0.3);
}

/* ---- Shimmer (lighter for light bg) ---- */
[data-bs-theme="light"] img.img-shimmer:not(.img-loaded) {
  background: linear-gradient(110deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.10) 37%, rgba(0,0,0,0.04) 50%);
  background-size: 200% 100%;
  opacity: 0;
}

[data-bs-theme="light"] .game-card-media:has(img.img-shimmer:not(.img-loaded)),
[data-bs-theme="light"] .pi-panel:has(img.img-shimmer:not(.img-loaded)),
[data-bs-theme="light"] .smutstone-img-wrapper:has(img.img-shimmer:not(.img-loaded)),
[data-bs-theme="light"] .play-hero:has(img.img-shimmer:not(.img-loaded)),
[data-bs-theme="light"] .play-similar-card:has(img.img-shimmer:not(.img-loaded)) {
  background: linear-gradient(110deg, rgba(0,0,0,0.03) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.03) 50%);
  background-size: 200% 100%;
}

/* ---- Buttons (outline variants) ---- */
[data-bs-theme="light"] .btn-outline-light {
  border-color: rgba(0,0,0,0.15);
  color: #333;
}
[data-bs-theme="light"] .btn-outline-light:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.25);
  color: #111;
}

/* ---- Index Page Specific ---- */
[data-bs-theme="light"] #indexFaq .faq-wrapper {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}
[data-bs-theme="light"] #indexFaq .faq-btn {
  color: #1a1a2e !important;
}
[data-bs-theme="light"] #indexFaq .faq-hr {
  border-color: rgba(0,0,0,0.08);
}
[data-bs-theme="light"] .sticky-pill {
  background: rgba(25,135,84,0.08);
  border-color: rgba(25,135,84,0.2);
}
[data-bs-theme="light"] .sticky-brand {
  color: #1a1a2e !important;
}
[data-bs-theme="light"] .sticky-tagline {
  color: rgba(0,0,0,0.4);
}
[data-bs-theme="light"] .sticky-label {
  color: #198754;
}
[data-bs-theme="light"] .sticky-dot {
  background: #198754;
  box-shadow: 0 0 6px rgba(25,135,84,0.4);
}

/* ---- Hero title: drop gradient in light for readability ---- */
[data-bs-theme="light"] .hero-title {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #1a1a2e;
  filter: none;
}

/* ---- Bottom CTA text ---- */
[data-bs-theme="light"] #bottom-cta .text-white-50 {
  color: rgba(0,0,0,0.5) !important;
}

/* ---- Section padding bg ---- */
[data-bs-theme="light"] .section-padding {
  background: transparent;
}

/* ---- Logo (navbar & footer) ---- */
[data-bs-theme="light"] .logo-xxx {
  color: #1a1a2e;
}
[data-bs-theme="light"] .logo-games {
  color: #333;
}
[data-bs-theme="light"] .logo-xxx-footer .logo-games {
  color: #333;
}
/* The "XXX" red previously had NO light-theme value, so #ff2d3d landed on the
   near-white navbar and measured only 3.69:1. That fails AA once the logo drops
   to 16px at the max-width:575.98px breakpoint - 16px bold is not "large text",
   so it needs 4.5:1, not 3:1. #d61f2f measures 5.09:1 on white.
   The glow is dropped as well: neon only reads against a dark surface, and on a
   light navbar it just muddied the letterforms. The flicker keyframes animate
   text-shadow, so `animation: none` is required or the glow returns via the
   animation's forwards fill. */
[data-bs-theme="light"] .logo-xxx .logo-xxx-highlight {
  color: #d61f2f;
  animation: none;
  text-shadow: none;
}
/* Drop the underline's glow on light; the 2px gradient bar itself reads fine. */
[data-bs-theme="light"] .logo-xxx::after {
  box-shadow: none;
}

/* ---- Card action buttons ---- */
[data-bs-theme="light"] .card-btn-play {
  color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.12) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
  box-shadow: none;
}
[data-bs-theme="light"] .card-btn-play:hover {
  color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.2) !important;
  border-color: rgba(220, 53, 69, 0.45) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(220, 53, 69, 0.25);
}
[data-bs-theme="light"] .card-btn-info {
  color: #0a5a73 !important;
  background: rgba(13, 202, 240, 0.12) !important;
  border-color: rgba(13, 202, 240, 0.45) !important;
}
[data-bs-theme="light"] .card-btn-info:hover {
  color: #08799b !important;
  background: rgba(13, 202, 240, 0.2) !important;
  border-color: rgba(13, 202, 240, 0.6) !important;
}

/* ---- Footer ---- */
[data-bs-theme="light"] footer {
  background: #fff;
}
[data-bs-theme="light"] footer a:hover {
  color: #dc3545 !important;
}

/* ---- Bottom CTA buttons ---- */
[data-bs-theme="light"] .hero-btn-glow {
  color: #1a1a2e !important;
  background: rgba(220, 53, 69, 0.06) !important;
  border-color: rgba(220, 53, 69, 0.35) !important;
}
[data-bs-theme="light"] .hero-btn-glow:hover {
  color: #dc3545 !important;
}
[data-bs-theme="light"] .hero-btn-glow-outline {
  color: #1a3a4a !important;
  border-color: rgba(13, 202, 240, 0.35) !important;
  background: rgba(13, 202, 240, 0.06) !important;
}
[data-bs-theme="light"] .hero-btn-glow-outline:hover {
  color: #0a7a9c !important;
}

/* ===== Animated Game Count ===== */

.game-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 700;
  animation: countPulse 2s ease-in-out infinite;
}

@keyframes countPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(220, 53, 69, 0.4), 0 0 16px rgba(220, 53, 69, 0.15); }
  50% { text-shadow: 0 0 16px rgba(220, 53, 69, 0.7), 0 0 32px rgba(220, 53, 69, 0.3); }
}

@keyframes countPulseLight {
  0%, 100% { text-shadow: 0 0 8px rgba(220, 53, 69, 0.3), 0 0 16px rgba(220, 53, 69, 0.1); }
  50% { text-shadow: 0 0 16px rgba(220, 53, 69, 0.5), 0 0 32px rgba(220, 53, 69, 0.2); }
}

/* =====================================================================
   NAVBAR AI BUTTON & DROPDOWN
   ===================================================================== */

.navbar-ai {
  position: relative;
  margin-left: auto;
}

.navbar-ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  width: auto;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 35, 50, 0.4);
  background: linear-gradient(135deg, rgba(255, 35, 50, 0.1), rgba(220, 40, 55, 0.08));
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0 0.9rem;
  outline: none;
  position: relative;
  text-transform: uppercase;
}

.navbar-ai-btn:hover,
.navbar-ai-btn.active {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 35, 50, 0.2), rgba(255, 50, 70, 0.15));
  border-color: rgba(255, 35, 50, 0.6);
  color: #ff2d3d;
  box-shadow: 0 4px 20px rgba(255, 30, 40, 0.35), 0 0 40px rgba(255, 30, 40, 0.18);
}

.navbar-ai-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(255, 30, 40, 0.25);
}

.ai-btn-text {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.ai-btn-icon {
  display: none;
}

/* ---- AI Dropdown Panel ---- */

.ai-dropdown-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1069;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

.ai-dropdown-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ai-dropdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.14), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(255, 51, 102, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    #1a0d24;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 35, 50, 0.35);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 10px 30px rgba(255, 51, 102, 0.18), 0 0 40px rgba(124, 58, 237, 0.15);
  z-index: 1070;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

.ai-dropdown.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ai-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.25rem;
  cursor: pointer;
  text-decoration: none;
  color: #eaeaea;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.15s ease;
}

.ai-dropdown-item:first-child {
  border-radius: 16px 16px 0 0;
}

.ai-dropdown-item:last-child {
  border-radius: 0 0 16px 16px;
  border-bottom: none;
}

.ai-dropdown-item:hover {
  background: rgba(255, 51, 102, 0.08);
  color: #fff;
}

.ai-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 70, 90, 0.15);
  border: 1.5px solid rgba(255, 70, 90, 0.4);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ai-item-icon-text {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
}

.ai-dropdown-item:hover .ai-item-icon {
  background: rgba(255, 70, 90, 0.28);
  border-color: rgba(255, 70, 90, 0.7);
}

.ai-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ai-item-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-item-sub {
  font-size: 0.7rem;
  color: rgba(234,234,234,0.45);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: sidebar drawer holds the AI entry, hide the navbar duplicate */
@media (max-width: 991.98px) {
  .navbar-ai {
    display: none !important;
  }
  .navbar-fav {
    display: none !important;
  }

  /* Theme toggle lives in the drawer on mobile */
  .navbar .theme-toggle.d-lg-none {
    display: none !important;
  }
}

/* Desktop: sidebar is visible, hide top navbar duplicates */
@media (min-width: 992px) {
  .navbar-ai,
  .navbar-fav {
    display: none !important;
  }

  /* Search leaves room for theme toggle on its right */
  .navbar-search.d-none.d-lg-block {
    margin-right: 44px;
  }

  /* Move desktop theme toggle to right side, next to search */
  .navbar > .container {
    position: relative;
  }
  #themeToggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }
}

@media (max-width: 575.98px) {
  .ai-dropdown {
    width: calc(100vw - 32px);
  }
}

/* =====================================================================
   NAVBAR FAVORITES BUTTON (icon-only, expands on hover)
   ===================================================================== */

.navbar-fav {
  display: flex;
  align-items: center;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  color: rgba(240, 235, 250, 0.6);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, padding 0.3s ease;
  flex-shrink: 0;
  padding: 0;
  margin-left: 0.35rem;
  cursor: pointer;
}

.navbar-fav i {
  font-size: 1rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  transition: color 0.3s ease;
}

.navbar-fav .fav-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
  margin-right: 0;
}

.navbar-fav .fav-badge {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  background: #dc3545;
  color: #fff;
  border-radius: 99px;
  padding: 0.1em 0.45em;
  line-height: 1.4;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.25s ease;
}

/* Expand on hover */
.navbar-fav:hover {
  max-width: 180px;
  border-color: rgba(220, 53, 69, 0.3);
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
  padding-right: 8px;
}

.navbar-fav:hover .fav-label {
  max-width: 80px;
  opacity: 1;
  margin-right: 5px;
}

.navbar-fav:hover .fav-badge {
  opacity: 1;
}

/* Active state (on favorites page) */
.navbar-fav.active {
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.15);
  background: rgba(220, 53, 69, 0.06);
}

.navbar-fav.active i {
  color: #dc3545;
}

/* Click/tap pulse animation */
.navbar-fav:active i {
  animation: favPulse 0.35s ease;
}

/* JS-triggered pulse (when favorite is added/removed) */
.navbar-fav.fav-pulse i,
.side-nav-item.fav-pulse i {
  animation: favPulse 0.4s ease;
}

@keyframes favPulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.35); }
  50%  { transform: scale(0.9); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===== Shared utilities (replace inline styles) ===== */
#favNavCount { display: none; }
.play-page-container { max-width: 1200px; }
.rta-badge-img { height: 26px; width: auto; vertical-align: middle; opacity: 0.9; }
.play-h1 { font-family: 'Orbitron', system-ui, sans-serif; font-size: 2.2rem; }
.play-h2 { font-family: 'Orbitron', system-ui, sans-serif; font-size: 1.8rem; }
.play-subtitle { color: rgba(255, 255, 255, 0.5); font-size: 0.95rem; }
.play-desc-p { color: rgba(255, 255, 255, 0.75); line-height: 1.8; }
.shot-thumb { aspect-ratio: 16 / 9; object-fit: cover; }
[data-bs-theme="light"] .play-subtitle { color: rgba(0, 0, 0, 0.55); }
[data-bs-theme="light"] .play-desc-p { color: rgba(0, 0, 0, 0.72); }

/* Light theme */
[data-bs-theme="light"] .navbar-fav {
  color: rgba(0, 0, 0, 0.45);
}

[data-bs-theme="light"] .navbar-fav:hover {
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.06);
  color: #c0392b;
}

[data-bs-theme="light"] .navbar-fav.active {
  color: #c0392b;
  border-color: rgba(220, 53, 69, 0.15);
  background: rgba(220, 53, 69, 0.05);
}

/* ---- Light Theme Overrides ---- */

[data-bs-theme="light"] .navbar-ai-btn {
  color: #1a1a2e;
  background: rgba(220, 53, 69, 0.04);
  border-color: rgba(220, 53, 69, 0.25);
}

[data-bs-theme="light"] .navbar-ai-btn:hover,
[data-bs-theme="light"] .navbar-ai-btn.active {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
  box-shadow: 0 4px 20px rgba(220, 53, 69, 0.2), 0 0 40px rgba(220, 53, 69, 0.1);
}

[data-bs-theme="light"] .ai-dropdown-backdrop {
  background: rgba(0, 0, 0, 0.3);
}

[data-bs-theme="light"] .ai-dropdown {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(13, 202, 240, 0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.2), 0 0 24px rgba(13, 202, 240, 0.05);
}

[data-bs-theme="light"] .ai-dropdown-item {
  color: #333;
  border-bottom-color: rgba(0,0,0,0.04);
}

[data-bs-theme="light"] .ai-dropdown-item:hover {
  background: rgba(13, 202, 240, 0.05);
  color: #111;
}

[data-bs-theme="light"] .ai-item-sub {
  color: rgba(0,0,0,0.4);
}

[data-bs-theme="light"] .ai-item-icon {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-bs-theme="light"] .ai-item-icon-text {
  color: #111;
}

[data-bs-theme="light"] .ai-dropdown-item:hover .ai-item-icon {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}

/* =====================================================================
   RETRACTABLE SIDE NAVIGATION (desktop)
   ===================================================================== */

.side-nav {
  position: fixed;
  top: 76px;
  left: 0;
  bottom: 0;
  width: 56px;
  z-index: 1025;
  background: rgba(14, 4, 22, 0.75);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0 18px 18px 0;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0;
  overflow: hidden;
  transition: width 0.25s ease;
}

.side-nav:hover {
  width: 200px;
}

.side-nav-inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 8px;
}

.side-nav-item {
  display: flex;
  align-items: center;
  gap: 0;
  height: 42px;
  min-height: 42px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: rgba(240, 235, 250, 0.6);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease;
  width: 100%;
}

.side-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.side-nav-item.active {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.side-nav-item i {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-nav-item i::before {
  vertical-align: baseline;
  line-height: 1;
}

.side-nav-item .side-nav-ai {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  color: inherit;
}

.side-nav-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-left: 4px;
}

.side-nav:hover .side-nav-label {
  opacity: 1;
}

/* Spacer to push bottom items down */
.side-nav-spacer {
  flex-grow: 1;
}

/* Body offset for sidebar on desktop */
@media (min-width: 992px) {
  body {
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* Light theme */
[data-bs-theme="light"] .side-nav {
  background: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="light"] .side-nav-item {
  color: rgba(0, 0, 0, 0.45);
}

[data-bs-theme="light"] .side-nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #111;
}

/* =====================================================================
   MOBILE SIDE-NAV DRAWER (shared across all pages)
   ===================================================================== */

.side-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 9px;
  right: 14px;
  z-index: 1120;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  color: #f0eeee;
  font-size: 1.5rem;
  line-height: 1;
}

[data-bs-theme="light"] .side-nav-toggle {
  color: #222;
}

.side-nav-backdrop {
  display: none;
}

@media (max-width: 991.98px) {
  .side-nav {
    display: flex !important;
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: 168px;
    padding: 60px 0 0.75rem;
    z-index: 1110;
    border-radius: 18px 0 0 18px;
    background: rgba(12, 4, 19, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform: translateX(108%);
    transition: transform 0.28s ease;
    overflow-y: auto;
  }

  .side-nav.side-nav-open {
    transform: translateX(0);
  }

  /* No hover expansion for the drawer */
  .side-nav:hover {
    width: 168px;
  }

  .side-nav .side-nav-label {
    opacity: 1;
  }

  .side-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1105;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .side-nav-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Briefly reveal the navbar favorites heart as the fly-heart target */
  .navbar-fav.fav-temp-show {
    display: flex !important;
    position: fixed;
    top: 7px;
    right: 64px;
    z-index: 1120;
    margin: 0;
    border-radius: 0;
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .navbar-fav.fav-temp-show i {
    font-size: 1.15rem;
    color: #dc3545;
    filter: drop-shadow(0 0 6px rgba(220, 53, 69, 0.65));
  }
}

[data-bs-theme="light"] .navbar-fav.fav-temp-show {
  background: transparent;
  border-color: transparent;
}

[data-bs-theme="light"] .navbar-fav.fav-temp-show i {
  color: #c0392b;
  filter: drop-shadow(0 0 6px rgba(220, 53, 69, 0.35));
}

[data-bs-theme="light"] .side-nav-item.active {
  background: rgba(220, 53, 69, 0.1);
  color: #c0392b;
}

/* ===== Footer (nav links + RTA badge) ===== */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 1rem; }
@media (min-width: 768px) { .footer-nav { justify-content: flex-end; } }
.footer-link { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s ease; }
.footer-link:hover { color: #dc3545; }
.footer-rta { display: inline-block; margin-top: 0.65rem; }
@media (min-width: 768px) { .footer-rta { margin-top: 0; margin-left: 1rem; } }
.footer-rta img { height: 25px; width: auto; opacity: 0.9; transition: opacity 0.2s ease; }
.footer-rta:hover img { opacity: 1; }
[data-bs-theme="light"] .footer-link { color: rgba(26, 26, 46, 0.6); }

/* ===== Rolling count animation (plays / favorites) ===== */
.top-pick-num,
.fav-num,
.play-stat-num {
  display: inline-block;
}
.count-roll {
  animation: countPop 0.45s ease;
}
@keyframes countPop {
  0% { transform: scale(1.15); color: #ff4d6d; }
  100% { transform: scale(1); }
}

/* ===== AI Offer Pages - Light Theme ===== */
[data-bs-theme="light"] .feature-card {
  background: #ffffff;
  border-color: rgba(220, 53, 69, 0.18);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.06);
}
[data-bs-theme="light"] .character-card {
  background: #ffffff;
  border-color: rgba(220, 53, 69, 0.18);
}
[data-bs-theme="light"] .pornworks-hero {
  background: radial-gradient(ellipse at 20% 30%, rgba(249, 115, 22, 0.08) 0%, transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f5f0ea 100%);
}
[data-bs-theme="light"] .pw-shield-card,
[data-bs-theme="light"] .pw-stats-wrapper {
  background: #ffffff;
  border-color: rgba(249, 115, 22, 0.2);
}

/* =====================================================================
   Bootstrap gutter overflow on narrow screens
   ---------------------------------------------------------------------
   .row.g-4 / .row.g-5 set a 48px gutter, so the row pulls itself out by
   24px on each side (margin-left/right: calc(-.5 * --bs-gutter-x)), while
   the enclosing .container only offers 12px of padding. The container has
   centring slack above its max-width, which absorbs that - except when it
   is effectively full-width, and the arithmetic only goes wrong at all
   because classic scrollbars make the layout ~15px narrower than the
   media query that picks the container's max-width. Measured on the
   landing pages: 387px of document on a 375px viewport (12px of phantom
   horizontal scroll on every phone).
   Capping the row's HORIZONTAL gutter to the container's own padding makes
   the row land exactly inside it. --bs-gutter-y is untouched, which is what
   the design actually uses g-4/g-5 for, and at these widths those grids are
   single-column anyway.
   NOTE: overflow-x on html/body is deliberately NOT used as the fix. In this
   browser html{overflow-x:clip} and bare body{overflow-x:hidden} both leave
   the 2px scroll intact (only the html+body hidden pair suppresses it), and
   that pair turns body into a scroll container, which breaks the three
   position: sticky rules in index-page.css, styles.css and xg-components.css.
   Residual: at 993-998px wide windows (same scrollbar artefact, container
   max-width 960) about 3px of scroll remains. Not worth a second breakpoint.
   ===================================================================== */
@media (max-width: 599.98px) {
  .row.g-4,
  .row.g-5,
  .row.gx-4,
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
}