/*
Theme Name: Gaming Theme
Version: 1.0
*/

:root {
  /* BACKGROUND COLORS */
  --color-bg-primary: #1D2731;
  --color-bg-secondary: #242F3A;
  --color-bg-tertiary: #2A3847;
  --color-bg-hover: #323E4B;
  --color-bg-active: #3B4A5A;

  /* TEXT COLORS */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B8C5D6;
  --color-text-tertiary: #8A99AC;
  --color-text-muted: #6B7B8B;
  --color-text-disabled: #4A5A6A;

  /* ACCENT - PRIMARY (MAGENTA) */
  --color-accent-primary: #E04B9E;
  --color-accent-primary-hover: #D63A8E;
  --color-accent-primary-active: #C62A7E;
  --color-accent-primary-disabled: #8A3563;
  --color-accent-primary-light: #F0A8D1;

  /* ACCENT - SECONDARY (CYAN) */
  --color-accent-secondary: #00D4FF;
  --color-accent-secondary-hover: #00B8E0;
  --color-accent-secondary-active: #009CC7;
  --color-accent-secondary-light: #80ECFF;

  /* SEMANTIC - SUCCESS */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-success-dark: #065F46;

  /* SEMANTIC - WARNING */
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-warning-dark: #92400E;

  /* SEMANTIC - ERROR */
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;
  --color-error-dark: #7F1D1D;

  /* SEMANTIC - INFO */
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;
  --color-info-dark: #1E3A8A;

  /* BORDERS */
  --color-border-primary: #3B4A5A;
  --color-border-secondary: #2A3847;
  --color-border-light: #1F2A36;
  --color-border-accent: #E04B9E;
  --color-border-success: #10B981;
  --color-border-error: #EF4444;

  /* OVERLAYS */
  --color-overlay-dark: rgba(0, 0, 0, 0.6);
  --color-overlay-light: rgba(0, 0, 0, 0.3);

  /* GLOBAL DESIGN TOKENS (aliases) */
  --bg-canvas: var(--color-bg-primary);
  --bg-surface: var(--color-bg-secondary);
  --bg-surface-strong: var(--color-bg-tertiary);
  --accent-color: var(--color-accent-primary);
  --accent-color-secondary: var(--color-accent-secondary);
  --border-color: var(--color-border-primary);
  --text-main: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --text-color-primary: var(--color-text-primary);
  --text-color-secondary: var(--color-text-secondary);
  --radius-main: 10px;
  /* legacy alias */

  /* SHADOW SCALE (Design System §5) */
  --shadow-flat: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  --shadow-elevated: var(--shadow-md);
  /* legacy alias */

  /* TRANSITIONS (Design System §7) */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* LAYOUT (Design System §6) */
  --container-max-width: 1400px;
  --grid-gap-desktop: 24px;
  --grid-gap-tablet: 20px;
  --grid-gap-mobile: 16px;
  --page-padding-desktop: 32px;
  --page-padding-tablet: 24px;
  --page-padding-mobile: 16px;

  /* FONT FAMILY */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Courier New', monospace;

  /* DISPLAY */
  --font-display-size: 3.5rem;
  --font-display-weight: 700;
  --font-display-line-height: 1.1;
  --font-display-letter-spacing: -0.02em;

  /* H1 */
  --font-h1-size: 2.25rem;
  --font-h1-weight: 700;
  --font-h1-line-height: 1.2;
  --font-h1-letter-spacing: -0.01em;

  /* H2 */
  --font-h2-size: 1.875rem;
  --font-h2-weight: 700;
  --font-h2-line-height: 1.2;
  --font-h2-letter-spacing: 0em;

  /* H3 */
  --font-h3-size: 1.5rem;
  --font-h3-weight: 600;
  --font-h3-line-height: 1.3;
  --font-h3-letter-spacing: 0em;

  /* H4 */
  --font-h4-size: 1.25rem;
  --font-h4-weight: 600;
  --font-h4-line-height: 1.3;
  --font-h4-letter-spacing: 0em;

  /* BODY LARGE */
  --font-body-lg-size: 1.125rem;
  --font-body-lg-weight: 400;
  --font-body-lg-line-height: 1.6;
  --font-body-lg-letter-spacing: 0em;

  /* BODY */
  --font-body-size: 1rem;
  --font-body-weight: 400;
  --font-body-line-height: 1.5;
  --font-body-letter-spacing: 0em;

  /* BODY SMALL */
  --font-body-sm-size: 0.875rem;
  --font-body-sm-weight: 400;
  --font-body-sm-line-height: 1.5;
  --font-body-sm-letter-spacing: 0em;

  /* CAPTION */
  --font-caption-size: 0.75rem;
  --font-caption-weight: 500;
  --font-caption-line-height: 1.4;
  --font-caption-letter-spacing: 0.01em;

  /* LABEL */
  --font-label-size: 0.8125rem;
  --font-label-weight: 600;
  --font-label-line-height: 1.3;
  --font-label-letter-spacing: 0.01em;

  /* SPACING SCALE */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* COMPONENT SPACING */
  --spacing-button-vertical: var(--spacing-sm);
  --spacing-button-horizontal: var(--spacing-md);
  --spacing-card-padding: var(--spacing-lg);
  --spacing-section-gap: var(--spacing-2xl);
  --spacing-page-margin: var(--spacing-xl);

  /* GLOBAL UNIFIED SPACING TOKENS (Matches Categories, Blog & Homepage) */
  --spacing-hero-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  --spacing-section-primary: clamp(2rem, 4vw, 3rem);
  --spacing-section-header: clamp(1rem, 2vw, 1.35rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: var(--font-body-line-height);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
}

img,
svg {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

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

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

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

.site-shell {
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.site-main {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3.5rem) 0;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--spacing-md);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-line-height);
  letter-spacing: var(--font-h1-letter-spacing);
}

h2 {
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  line-height: var(--font-h2-line-height);
}

p {
  margin: 0 0 var(--spacing-md);
  color: var(--color-text-secondary);
}

/* =====================================================================
   SITE HEADER
   Desktop: logo | nav (center) | search + toggle (right)
   Mobile:  logo (left)        | toggle (right) — search inside drawer
   ===================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(29, 39, 49, 0.97);
  border-bottom: 1px solid var(--color-border-primary);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0.875rem var(--page-padding-desktop);
  height: 64px;
}

/* ---- Logo ---- */

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-primary);
  text-decoration: none;
  flex-shrink: 0;
  user-select: none;
}

.site-logo__mark {
  color: var(--color-accent-primary);
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.site-logo__text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.site-logo__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.site-logo__tagline {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ---- Desktop nav ---- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}

.site-nav__link,
.site-nav a {
  position: relative;
  padding: 0.45rem 0.8rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav a:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.site-nav__link.is-active,
.site-nav a.is-active {
  color: var(--color-accent-primary);
}

/* ---- Right slot: search + toggle ---- */

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* ---- Header search ---- */

.header-search {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search__icon {
  position: absolute;
  left: 0.7rem;
  color: var(--color-text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.header-search__input {
  width: 200px;
  padding: 0.5rem 0.9rem 0.5rem 2.1rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.8rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.header-search__input:focus {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(224, 75, 158, 0.1);
}

/* ---- Hamburger toggle (hidden desktop) ---- */

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-text-secondary);
  transform-origin: center;
  transition:
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 150ms ease,
    background 150ms ease;
}

.nav-toggle:hover .nav-toggle__bar {
  background: var(--color-text-primary);
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--color-accent-primary);
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--color-accent-primary);
}

/* =====================================================================
   MOBILE DROPDOWN NAV — Lewdzone style
   Drops DOWN from below the header bar, not a side drawer.
   ===================================================================== */

/* Backdrop — sits below the dropdown, above page content */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 58px;
  z-index: 150;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  /* invisible — must NOT block taps */
  cursor: pointer;
  transition: opacity var(--transition-normal);
}

.mobile-nav-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Dropdown panel */
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  /* directly below the header bar */
  left: 0;
  right: 0;
  z-index: 180;
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* animation — clipped + faded in */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0.25rem var(--page-padding-mobile) 0.5rem;
}

/* Search bar inside dropdown */
.mobile-nav__search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-secondary);
  margin-bottom: 0.25rem;
}

.mobile-nav__search svg {
  position: absolute;
  left: 0.75rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

.mobile-nav__search-input {
  width: 100%;
  padding: 0.45rem 0.9rem 0.45rem 2.1rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.825rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mobile-nav__search-input::placeholder {
  color: var(--color-text-muted);
}

.mobile-nav__search-input:focus {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(224, 75, 158, 0.1);
}

/* Nav link list */
.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__list li {
  margin: 0;
  border-bottom: 1px solid var(--color-border-secondary);
}

.mobile-nav__list li:last-child {
  border-bottom: none;
}

.mobile-nav__link {
  display: block;
  padding: 0.6rem 0.25rem;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.mobile-nav__link:hover {
  color: var(--color-accent-primary);
  padding-left: 0.5rem;
}

/* =====================================================================
   RESPONSIVE — show mobile nav elements at ≤768px
   ===================================================================== */

@media (max-width: 768px) {
  .site-header__inner {
    padding: 0 var(--page-padding-mobile);
    height: 58px;
  }

  /* hide desktop items */
  .site-nav,
  .header-search {
    display: none;
  }

  /* show toggle */
  .nav-toggle {
    display: flex;
  }

  .site-header__right {
    margin-left: auto;
  }

  /* activate mobile nav + backdrop */
  .mobile-nav,
  .mobile-nav-backdrop {
    display: block;
  }
}

@media (max-width: 480px) {
  .site-logo__tagline {
    display: none;
  }
}


.promo-carousel {
  position: relative;
  width: calc(100% - clamp(2.5rem, 6vw, 5rem));
  max-width: var(--container-max-width);
  margin: 0 auto clamp(2rem, 4vw, 3.5rem) auto;
  aspect-ratio: 16 / 5;
  /* scales with viewport — no gap */
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.promo-carousel__track {
  position: absolute;
  inset: 0;
}

.promo-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
  background-color: #111;
  z-index: 0;
}

.promo-slide--active {
  opacity: 1;
  position: absolute;
  /* stay absolute — track is the size reference */
  z-index: 1;
}

.promo-slide__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promo-slide__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.promo-slide__content {
  position: relative;
  max-width: 680px;
  padding: clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.promo-slide__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.promo-slide__link:focus,
.promo-slide__link:active {
  outline: none;
  box-shadow: none;
}

.promo-slide:hover {
  transform: scale(1.01);
}

.promo-slide {
  transition: opacity 0.9s ease, transform 0.35s ease;
}

.promo-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.promo-slide h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.promo-slide p {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 48rem;
  font-size: 1rem;
  line-height: 1.75;
}

.promo-slide__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.promo-slide__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 0.95rem 1.75rem;
  border-radius: 999px;
  background: var(--accent-color);
  color: var(--text-color-primary);
  border: 1px solid var(--border-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.promo-slide__cta--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-color-primary);
  border-color: rgba(255, 255, 255, 0.12);
}

.promo-slide__cta:hover {
  background: var(--color-accent-primary-hover);
}

.promo-slide__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.16);
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(14, 22, 34, 0.72);
  color: var(--text-color-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.carousel-control-prev {
  left: 1rem;
}

.carousel-control-next {
  right: 1rem;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background: rgba(28, 40, 56, 0.88);
}

.carousel-control-prev span,
.carousel-control-next span {
  font-size: 1.6rem;
  line-height: 1;
}

.carousel-indicators {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 2;
}

.carousel-indicator {
  width: 3.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.carousel-indicator.active {
  background: var(--accent-color);
  transform: scaleX(1.5);
}

@media (max-width: 900px) {
  .promo-carousel {
    min-height: 360px;
  }

  .promo-slide__content {
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }

  .promo-slide h2 {
    font-size: clamp(1.75rem, 4vw, 2.3rem);
  }
}

@media (max-width: 620px) {
  .promo-carousel {
    min-height: 300px;
  }

  .promo-slide__content {
    max-width: 100%;
    padding: 1.5rem;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 2.8rem;
    height: 2.8rem;
  }

  .carousel-indicators {
    gap: 0.5rem;
  }

  .carousel-indicator {
    width: 2rem;
  }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   GAMES SECTION & GRID (Nutaku-Inspired Design System & Spacing)
   ===================================================================== */

.games-section {
  padding: var(--spacing-section-primary) 0;
}

.games-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
}

/* Section Header (Nutaku pill accent bar + bold title + View More link) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-section-header);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-header__left {
  display: flex;
  align-items: center;
}

.section-header__title {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-header__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.2em;
  background: linear-gradient(180deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px rgba(224, 75, 158, 0.5);
}

.section-header__title-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.25s ease;
}

.section-header__title-link:hover {
  color: var(--color-accent-secondary);
}

.section-header__title-link svg {
  transition: transform 0.25s ease;
}

.section-header__title-link:hover svg {
  transform: translateX(4px);
}

.section-header__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

/* Top Right Dash Indicators */
.slider-dashes {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-dash {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.slider-dash--active {
  width: 32px;
  background: var(--color-accent-secondary);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

.section-header__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.section-header__more:hover {
  color: #FFFFFF;
  background: rgba(0, 212, 255, 0.2);
  border-color: var(--color-accent-secondary);
  transform: translateX(4px);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}

.section-header__more svg {
  transition: transform 0.25s ease;
}

.section-header__more:hover svg {
  transform: translateX(2px);
}

/* Horizontal Scrollable Games Carousel Wrapper */
.games-carousel-wrapper {
  position: relative;
  width: 100%;
  margin-top: 0.5rem;
}

/* Horizontal Scrollable Slider Track */
.games-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem 1.25rem 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.games-slider::-webkit-scrollbar {
  display: none;
}

/* Slider Cards Sizing (Sized to display exactly 6 cards per view row) */
.games-slider .game-card {
  flex: 0 0 clamp(155px, 15vw, 196px);
  scroll-snap-align: start;
}

.games-slider .game-card__thumb {
  aspect-ratio: 1 / 1;
}

.games-slider .game-card__body {
  padding: 0.65rem 0.75rem 0.75rem;
  gap: 0.3rem;
}

.games-slider .game-card__title {
  font-size: 0.86rem;
}

.games-slider .game-card__version {
  font-size: 0.68rem;
  padding: 1px 5px;
}

.games-slider .engine-badge {
  padding: 2px 6px;
  font-size: 0.62rem;
  top: 6px;
  right: 6px;
}

/* Slider Arrow Buttons (Prev / Next) */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-65%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 25, 35, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.slider-btn:hover:not(:disabled) {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  box-shadow: 0 8px 22px rgba(224, 75, 158, 0.45);
  transform: translateY(-65%) scale(1.1);
}

.slider-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
}

.slider-btn--prev {
  left: -22px;
}

.slider-btn--next {
  right: -22px;
}

/* Responsive Slider Breakpoints (Tablet & Mobile) */
@media (max-width: 1024px) {
  .games-slider .game-card {
    flex: 0 0 clamp(145px, 20vw, 175px);
  }

  .slider-btn--prev {
    left: -12px;
  }

  .slider-btn--next {
    right: -12px;
  }
}

@media (max-width: 768px) {
  .games-slider {
    gap: 10px;
    padding: 0.4rem 0.15rem 1rem 0.15rem;
  }

  .games-slider .game-card {
    flex: 0 0 calc(44% - 6px);
    /* ~2.3 cards visible to hint horizontal swipe */
    min-width: 138px;
  }

  .slider-btn {
    width: 36px;
    height: 36px;
  }

  .slider-btn--prev {
    left: -4px;
  }

  .slider-btn--next {
    right: -4px;
  }

  .slider-dashes {
    display: none;
  }
}

@media (max-width: 480px) {
  .games-slider .game-card {
    flex: 0 0 135px;
  }

  .games-slider .game-card__body {
    padding: 0.5rem 0.6rem 0.6rem;
  }

  .games-slider .game-card__title {
    font-size: 0.8rem;
  }
}

/* Grid Fallback */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

/* Game Card */
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-primary);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(224, 75, 158, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(224, 75, 158, 0.2);
}

.game-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Thumbnail Container */
.game-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #111B24;
}

.game-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.game-card:hover .game-card__img {
  transform: scale(1.08);
}

/* Engine Badges (Nutaku glassmorphism tags) */
.engine-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(15, 23, 34, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.badge--html {
  color: #00D4FF;
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.15);
}

.badge--unity {
  color: #C084FC;
  border-color: rgba(192, 132, 252, 0.4);
  background: rgba(192, 132, 252, 0.15);
}

.badge--renpy {
  color: #F472B6;
  border-color: rgba(244, 114, 182, 0.4);
  background: rgba(244, 114, 182, 0.15);
}

.badge--rpgm {
  color: #FBBF24;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.15);
}

/* Card Body & Information */
.game-card__body {
  padding: 0.85rem 1rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
}

.game-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.35;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card__version {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Meta info (Platforms + Views count) */
.game-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.game-card__platforms {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
}

.game-card__platforms svg {
  transition: color 0.2s ease;
  fill: currentColor;
}

.game-card:hover .game-card__platforms {
  color: var(--color-accent-secondary);
}

.game-card__views {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.game-card__views svg {
  opacity: 0.7;
}

/* Responsive grid adjustments */
@media (max-width: 600px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .game-card__body {
    padding: 0.65rem 0.75rem 0.75rem;
  }

  .game-card__title {
    font-size: 0.85rem;
  }
}

/* =====================================================================
   RECENTLY UPDATED GAMES SECTION (16 Cards Grid Layout)
   ===================================================================== */

.recently-updated-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 20px);
  width: 100%;
}

.updated-card {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
  min-width: 0;
  overflow: hidden;
}

.updated-card:hover {
  background: var(--color-bg-tertiary);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 212, 255, 0.12);
}

.updated-card__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
  min-width: 0;
}

/* Widescreen 16:9 Thumbnail */
.updated-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #111B24;
}

.updated-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.updated-card:hover .updated-card__img {
  transform: scale(1.06);
}

/* Update Sync Icon Overlay at bottom-right of image */
.update-icon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(14, 20, 28, 0.85);
  color: #F59E0B;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Meta Line 1: Views Count + Updated Date */
.updated-card__top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 4px 4px;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
  min-width: 0;
  gap: 4px;
}

.updated-card__views {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.updated-card__date {
  color: var(--color-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Meta Line 2: Engine Badge + Title + Version */
.updated-card__main {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 0 4px;
  min-width: 0;
  overflow: hidden;
}

.updated-card__main .engine-badge {
  position: static;
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 0.65rem;
}

.updated-card__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.updated-card__version {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* Meta Line 3: Author Name + Platform SVG icons */
.updated-card__bottom-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 4px 2px 4px;
  font-size: 0.78rem;
  min-width: 0;
  gap: 4px;
}

.updated-card__author {
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.updated-card__platforms {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
}

.updated-card:hover .updated-card__platforms {
  color: var(--color-accent-secondary);
}

/* Responsive Grid Breakpoints (Recently Updated) */
@media (max-width: 1100px) {
  .recently-updated-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 880px) {
  .recently-updated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .updated-card {
    padding: 6px;
  }

  .updated-card__top-meta {
    font-size: 0.7rem;
    padding: 5px 2px 2px 2px;
  }

  .updated-card__title {
    font-size: 0.85rem;
  }

  .updated-card__author {
    font-size: 0.72rem;
    max-width: 55%;
  }

  .updated-card__platforms svg {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .recently-updated-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .updated-card {
    padding: 5px;
    border-radius: var(--radius-lg);
  }

  .updated-card__thumb {
    border-radius: var(--radius-md);
  }

  .update-icon {
    width: 18px;
    height: 18px;
    bottom: 4px;
    right: 4px;
  }

  .update-icon svg {
    width: 9px;
    height: 9px;
  }

  .updated-card__top-meta {
    font-size: 0.65rem;
    padding: 4px 1px 1px 1px;
  }

  .updated-card__main {
    gap: 4px;
  }

  .updated-card__main .engine-badge {
    font-size: 0.58rem;
    padding: 1px 4px;
  }

  .updated-card__title {
    font-size: 0.78rem;
  }

  .updated-card__version {
    font-size: 0.65rem;
  }

  .updated-card__bottom-meta {
    margin-top: 4px;
    padding: 0 1px;
    font-size: 0.68rem;
  }
}

/* =====================================================================
   NEW XXX GAMES FEED SECTION (8.5 / 3.5 Split Grid & .item-line.games)
   ===================================================================== */

.new-games-grid-layout {
  display: grid;
  grid-template-columns: 8.5fr 3.5fr;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
}

.new-games-feed-col {
  min-width: 0;
}

/* Vertical list of compact game rows */
.new-games-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Compact game row item */
.item-line.games {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
  overflow: hidden;
}

.item-line.games:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-accent);
  transform: translateX(4px);
  box-shadow: var(--shadow-md), 0 0 14px rgba(224, 75, 158, 0.15);
}

/* Compact Thumbnail Container (Fixed 92x60px) */
.item-line__thumb-link {
  flex: 0 0 92px !important;
  width: 92px !important;
  max-width: 92px !important;
  height: 60px !important;
  max-height: 60px !important;
  border-radius: var(--radius-md);
  overflow: hidden !important;
  background: #111B24;
  display: block !important;
  position: relative;
}

.item-line__img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease;
}

.item-line.games:hover .item-line__img {
  transform: scale(1.08);
}

/* Content Column */
.item-line__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-line__row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.item-line__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-color-primary);
  line-height: 1.3;
  min-width: 0;
  flex: 1;
}

.item-line__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.item-line.games:hover .item-line__title a {
  color: var(--accent-color-secondary);
}

/* Nowrap truncation class */
.nowrap-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-line__version {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Status Badge (Ongoing / Finished) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status--ongoing {
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status--ongoing .status-dot {
  background: #F59E0B;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
}

.status--finished {
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status--finished .status-dot {
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
}

/* Bottom Row (Engine Badge + Platforms) */
.item-line__row-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.item-line__row-bottom .engine-badge {
  position: static;
  padding: 1px 6px;
  font-size: 0.62rem;
}

.item-line__platforms {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
}

.item-line.games:hover .item-line__platforms {
  color: var(--accent-color-secondary);
}

/* Far Right Release Date */
.item-line__date {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sidebar Column & Widgets */
.new-games-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.sidebar-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.sidebar-widget__title {
  margin: 0 0 16px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-widget__title svg {
  color: var(--accent-color);
}

.category-pills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cat-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  color: var(--text-color-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cat-pill:hover {
  background: var(--color-bg-tertiary);
  color: #FFFFFF;
  border-color: var(--accent-color-secondary);
  transform: translateX(3px);
}

.cat-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 7px;
  border-radius: 999px;
}

/* =====================================================================
   PROMO CARD VARIATIONS (Nutaku Inspired Promo Widgets)
   ===================================================================== */

/* Base Promo Card Container (Aligned with .sidebar-widget) */
.promo-card {
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* VARIATION 1: Nutaku Cyber-Glow Card */
.promo-card--v1 {
  background: linear-gradient(135deg, rgba(224, 75, 158, 0.16) 0%, rgba(21, 29, 40, 0.96) 65%, rgba(0, 212, 255, 0.08) 100%);
  border: 1px solid rgba(224, 75, 158, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.promo-card--v1:hover {
  border-color: rgba(224, 75, 158, 0.65);
  box-shadow: 0 12px 35px rgba(224, 75, 158, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.promo-card__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-primary);
  margin-bottom: 8px;
}

.promo-card__badge--cyan {
  color: var(--color-accent-secondary);
}

.promo-card__badge--amber {
  color: #F59E0B;
}

.promo-card__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.35;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.promo-card__desc {
  font-size: 0.84rem;
  color: var(--color-text-secondary);
  line-height: 1.52;
  margin: 0 0 16px 0;
}

/* Harmonized Pill CTA Button */
.promo-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.promo-card__btn--magenta {
  background: var(--color-accent-primary);
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(224, 75, 158, 0.45);
}

.promo-card__btn--magenta:hover {
  background: #E85BA9;
  box-shadow: 0 6px 24px rgba(224, 75, 158, 0.65);
  transform: translateY(-2px);
}

/* VARIATION 2: Nutaku Landscape Banner Card (Screenshot 2 Style) */
.promo-card--v2 {
  padding: 0;
  min-height: 210px;
  border: 1px solid rgba(0, 212, 255, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.promo-card__banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.promo-card--v2:hover .promo-card__banner-bg {
  transform: scale(1.05);
}

.promo-card__banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 20, 28, 0.15) 0%, rgba(14, 20, 28, 0.88) 100%);
}

.promo-card__banner-content {
  position: relative;
  z-index: 2;
  padding: 18px;
}

.promo-card__btn--cyan {
  background: var(--color-accent-secondary);
  color: #0E141C !important;
  box-shadow: 0 4px 18px rgba(0, 212, 255, 0.4);
}

.promo-card__btn--cyan:hover {
  background: #33DDFF;
  transform: translateY(-2px);
}

/* VARIATION 3: Glassmorphism Gradient Card */
.promo-card--v3 {
  background: rgba(21, 29, 40, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--color-accent-secondary);
}

.promo-card__btn--gradient {
  background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
  color: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}

/* VARIATION 4: Minimal High-Contrast Theme Card (Site Matched) */
.promo-card--v4 {
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 22px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.promo-card--v4:hover {
  border-color: rgba(0, 212, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 212, 255, 0.08);
}

.promo-card__badge--magenta {
  color: var(--color-accent-primary);
}

/* =====================================================================
   PLATFORM ABOUT SHOWCASE (Open Canvas Layout - No Outer Box Container)
   ===================================================================== */

.games-section--welcome {
  padding: clamp(1.75rem, 3.5vw, 3.25rem) 0;
  background: transparent;
}

.welcome-showcase-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
}

.welcome-showcase__content {
  min-width: 0;
}

.welcome-title {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.welcome-story-prose p {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 18px 0;
}

.welcome-showcase__visual {
  width: 100%;
}

@media (max-width: 992px) {
  .welcome-showcase-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Responsive Layout Breakpoints for New Games Feed & Sidebar */
@media (max-width: 992px) {
  .new-games-grid-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* On tablets, place sidebar widgets side-by-side in a 2-column row */
  .new-games-sidebar-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .new-games-sidebar-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Display category pills in a 2-column grid on mobile for easy tap targets */
  .category-pills-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .cat-pill {
    padding: 7px 10px;
    font-size: 0.8rem;
  }

  .cat-count {
    font-size: 0.7rem;
    padding: 1px 5px;
  }
}

@media (max-width: 600px) {
  .item-line.games {
    padding: 8px 10px;
    gap: 10px;
  }

  .item-line__thumb-link {
    width: 72px !important;
    height: 48px !important;
    flex: 0 0 72px !important;
    max-width: 72px !important;
    max-height: 48px !important;
  }

  .item-line__title {
    font-size: 0.84rem;
  }

  .item-line__version {
    font-size: 0.68rem;
    padding: 1px 4px;
  }

  .item-line__date {
    font-size: 0.7rem;
    padding-left: 6px;
  }

  .item-line__date svg {
    display: none;
    /* Hide calendar icon on narrow mobile to save space */
  }

  .status-text {
    display: none;
    /* Icon-only glowing status dot on mobile */
  }

  .status-badge {
    padding: 3px 5px;
  }
}

@media (max-width: 440px) {
  .category-pills-list {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   PLATFORM ABOUT & VISUAL SHOWCASE SECTION
   ===================================================================== */

.games-section--welcome {
  padding: clamp(1.75rem, 3.5vw, 3.25rem) 0;
  background: transparent;
}

.welcome-showcase-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}

.welcome-showcase__content {
  min-width: 0;
}

.welcome-title {
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, #FFFFFF 40%, rgba(0, 212, 255, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Story Narrative Prose */
.welcome-story-prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.welcome-story-prose p {
  font-size: clamp(0.92rem, 1.4vw, 1.04rem);
  color: var(--color-text-secondary);
  line-height: 1.68;
  margin: 0;
}

.welcome-story-prose strong {
  color: #FFFFFF;
}

/* Focused High-Converting CTA Block & Trust Bar */
.welcome-cta-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.welcome-cta-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.welcome-btn {
  padding: 12px 24px;
  font-size: 0.95rem;
  gap: 10px;
}

.btn-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.welcome-trust-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

/* Clean Inline Links (Prose style with subtle cyan hover) */
.inline-link {
  color: var(--color-accent-secondary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.2s ease;
}

.inline-link:hover {
  color: #FFFFFF;
  border-bottom-color: var(--color-accent-secondary);
}

/* Actions CTA Buttons */
.welcome-showcase__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.welcome-btn {
  padding: 11px 22px;
  font-size: 0.92rem;
  gap: 8px;
}

.button--primary.welcome-btn {
  background: var(--color-accent-primary);
  color: #FFFFFF !important;
  border: 1px solid var(--color-accent-primary);
  box-shadow: 0 4px 16px rgba(224, 75, 158, 0.35);
}

.button--primary.welcome-btn:hover {
  background: var(--color-accent-primary-hover);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(224, 75, 158, 0.5);
}

.button--secondary.welcome-btn {
  background: transparent;
  color: var(--color-accent-secondary) !important;
  border: 1px solid var(--color-accent-secondary);
  box-shadow: none;
}

.button--secondary.welcome-btn:hover {
  background: rgba(0, 212, 255, 0.1);
  color: var(--color-accent-secondary-hover) !important;
  border-color: var(--color-accent-secondary-hover);
  transform: translateY(-2px);
}

.button--ghost.welcome-btn {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.button--ghost.welcome-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* Right Side: Visual Card Showcase */
.welcome-showcase__visual {
  position: relative;
  min-width: 0;
}

.visual-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--color-bg-secondary);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 212, 255, 0.12);
}

.visual-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.visual-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 20, 28, 0.1) 0%, rgba(14, 20, 28, 0.75) 100%);
  pointer-events: none;
}

/* Floating Glassmorphism Badges overlaying visual */
.floating-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(14, 20, 28, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}

.floating-badge:hover {
  transform: scale(1.04);
}

.floating-badge--top-left {
  top: 18px;
  left: 18px;
  border-color: rgba(245, 158, 11, 0.35);
}

.floating-badge--center {
  top: 48%;
  right: 18px;
  transform: translateY(-50%);
  border-color: rgba(0, 212, 255, 0.35);
}

.floating-badge--bottom-right {
  bottom: 18px;
  left: 18px;
  border-color: rgba(224, 75, 158, 0.35);
}

.badge-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.badge-info {
  display: flex;
  flex-direction: column;
}

.badge-info strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}

.badge-info small {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
}

/* Responsive Media Queries for Welcome Showcase */
@media (max-width: 992px) {
  .welcome-showcase-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .welcome-showcase__visual {
    order: -1;
    /* Place visual artwork card above text on tablet/mobile */
  }

  .visual-card {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 600px) {
  .games-section__container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .welcome-title {
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
    margin-bottom: 12px;
  }

  .welcome-story-prose {
    gap: 12px;
    margin-bottom: 22px;
  }

  .welcome-story-prose p {
    font-size: 0.88rem;
    line-height: 1.6;
  }

  .welcome-cta-buttons {
    width: 100%;
  }

  .welcome-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
    font-size: 0.9rem;
  }

  .welcome-trust-bar {
    gap: 10px 14px;
    justify-content: flex-start;
  }

  .trust-item {
    font-size: 0.74rem;
  }

  .floating-badge {
    padding: 6px 10px;
    bottom: 12px;
    right: 12px;
  }

  .badge-info strong {
    font-size: 0.76rem;
  }

  .badge-info small {
    font-size: 0.62rem;
  }
}

/* =====================================================================
   LATEST BLOG / NEWS SECTION (Design Token Integration)
   ===================================================================== */

.blog-sec {
  padding: clamp(1.75rem, 3.5vw, 3.25rem) 0;
}

.blog-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
  margin-top: var(--spacing-md);
}

/* Left-Aligned Pagination Toolbar */
.catalog-pagination {
  margin-top: clamp(32px, 4vw, 44px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.catalog-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-pagination .page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.catalog-pagination .page-numbers:hover {
  color: #FFFFFF;
  border-color: rgba(0, 212, 255, 0.4);
  background: var(--color-bg-tertiary);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.catalog-pagination .page-numbers.current {
  color: #FFFFFF !important;
  background: var(--color-accent-primary) !important;
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 4px 16px rgba(224, 75, 158, 0.45) !important;
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .featured-ribbon-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .featured-ribbon-hero__thumb {
    width: 100%;
    height: 160px;
    flex: 0 0 160px;
  }
}

.item.blog-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.item.blog-card:hover {
  background: transparent;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: none;
}

.blog-card__thumb-link {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--color-bg-tertiary);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.item.blog-card:hover .blog-card__thumb-link {
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 212, 255, 0.08);
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.item.blog-card:hover .blog-card__img {
  transform: scale(1.05);
}

.blog-card__category {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-secondary);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-accent-secondary);
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: none;
}

.blog-card__body {
  padding: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
}

.blog-card__meta .meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-card__meta .meta-dot {
  color: rgba(255, 255, 255, 0.2);
}

.blog-card__title {
  font-size: 0.94rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.blog-card__title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card__title a:hover {
  color: var(--color-accent-secondary);
}

.blog-card__excerpt {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive Grid for Blog Cards */
@media (max-width: 1099px) {
  .blog-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 540px) {
  .blog-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .blog-card__body {
    padding: 10px 12px 12px 12px;
  }

  .blog-card__title {
    font-size: 0.88rem;
  }
}

/* =====================================================================
   FAQ ACCORDION SECTION (Design Token Integration)
   ===================================================================== */

.faq-sec {
  padding: clamp(1.75rem, 3.5vw, 3.25rem) 0;
}

/* Accordion Container */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--spacing-md);
}

.accordion-item {
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.accordion-item--active {
  background: var(--color-bg-tertiary);
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 16px rgba(0, 212, 255, 0.08);
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
}

.accordion-question {
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.4;
}

.accordion-item--active .accordion-question {
  color: var(--color-accent-secondary);
}

.accordion-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  display: grid;
  place-items: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease;
}

.accordion-item--active .accordion-icon {
  transform: rotate(180deg);
  background: rgba(0, 212, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--color-accent-secondary);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease;
  padding: 0 22px;
}

.accordion-item--active .accordion-body {
  max-height: 300px;
  opacity: 1;
  padding: 0 22px 20px 22px;
}

.accordion-body p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.68;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}

/* Responsive Accordion Breakpoints */
@media (max-width: 600px) {
  .accordion-header {
    padding: 14px 16px;
    gap: 12px;
  }

  .accordion-question {
    font-size: 0.9rem;
  }

  .accordion-icon {
    width: 26px;
    height: 26px;
  }

  .accordion-body {
    padding: 0 16px;
  }

  .accordion-item--active .accordion-body {
    padding: 0 16px 16px 16px;
  }

  .accordion-body p {
    font-size: 0.84rem;
    padding-top: 10px;
  }
}

/* =====================================================================
   FOOTER
   ===================================================================== */

.site-footer {
  margin-top: var(--spacing-3xl);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-primary);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  /* brand col wider */
  gap: var(--spacing-xl) var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

/* Heading sizes — override the global h2/h3 which are too large */
.site-footer__col h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-md);
  letter-spacing: -0.01em;
}

.site-footer__col h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Brand description */
.site-footer__col p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

/* Nav link lists */
.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__col li+li {
  margin-top: 0.6rem;
}

/* Footer links — muted, NOT the global cyan accent */
.site-footer__col a {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  transition: color var(--transition-fast);
}

.site-footer__col a:hover {
  color: var(--color-text-primary);
}

/* Bottom bar */
.site-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border-secondary);
}

.site-footer__bottom p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    /* 2 columns on tablet */
    gap: var(--spacing-lg);
  }

  /* Brand col spans full width */
  .site-footer__col:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    /* single column on mobile */
  }

  .site-footer__col:first-child {
    grid-column: auto;
  }
}

/* =====================================================================
   POPULAR GAMES SECTION
   ===================================================================== */

.games-section {
  margin-top: var(--spacing-2xl);
  /* gap above the section */
  padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.games-section__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding-desktop);
}

/* ---- Section header ---- */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-md);
}

.section-header__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.section-header__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-accent-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.section-header__more:hover {
  color: var(--color-text-primary);
  gap: 0.55rem;
}

.section-header__more svg {
  flex-shrink: 0;
}

/* ---- Games grid ---- */

.games-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-md) var(--spacing-sm);
}

/* ---- Game card ---- */

.game-card {
  min-width: 0;
}

.game-card__link {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  text-decoration: none;
}

.game-card__link:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-secondary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Thumbnail */

.game-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  /* portrait game cover ratio */
  overflow: hidden;
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
}

.game-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
}

.game-card__link:hover .game-card__img {
  transform: scale(1.04);
}

/* Engine badge */

.engine-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  padding: 0.18rem 0.42rem;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
}

/* Badge color variants */
.badge--renpy {
  background: rgba(232, 36, 113, 0.18);
  color: #f06095;
  border-color: rgba(232, 36, 113, 0.35);
}

.badge--unity {
  background: rgba(0, 140, 210, 0.18);
  color: #5ab4e8;
  border-color: rgba(0, 140, 210, 0.35);
}

.badge--rpgm {
  background: rgba(240, 160, 0, 0.18);
  color: #f0b330;
  border-color: rgba(240, 160, 0, 0.35);
}

.badge--html {
  background: rgba(65, 200, 120, 0.18);
  color: #4cde8a;
  border-color: rgba(65, 200, 120, 0.35);
}

/* Card body */

.game-card__body {
  padding: 0.55rem 0.6rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.game-card__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card__version {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

/* Post meta */

.game-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: auto;
}

.game-card__platforms {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.game-card__platforms svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: 0.7;
}

.game-card__views {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.game-card__views svg {
  opacity: 0.6;
}

/* ---- Grid breakpoints ---- */

@media (max-width: 1100px) {
  .games-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .games-section__container {
    padding: 0 var(--page-padding-mobile);
  }

  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
  }
}

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



/* Premium homepage hero */
.front-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.category-discovery {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-strong) 100%);
  box-shadow: var(--shadow-elevated);
}

.category-discovery__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.category-discovery__heading h2 {
  margin-bottom: 0;
}

.category-discovery__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.category-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  min-height: 160px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-color-primary);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.category-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-color);
  box-shadow: 0 12px 28px rgba(224, 75, 158, 0.16);
}

.category-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(0, 212, 255, 0.14);
  color: var(--accent-color-secondary);
  font-size: 1.2rem;
}

.category-card__body h3 {
  margin: 0 0 var(--spacing-xs);
  font-size: 1rem;
}

.category-card__body p {
  margin: 0;
  color: var(--text-color-secondary);
  font-size: 0.95rem;
}

.hero-showcase {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--spacing-xl);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  min-height: 520px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  background:
    linear-gradient(120deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.18) 100%),
    url('https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1800&q=80') center/cover;
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  position: relative;
}

.hero-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(224, 75, 158, 0.18), transparent 32%);
  pointer-events: none;
}

.hero-showcase__content,
.hero-showcase__panel {
  position: relative;
  z-index: 1;
}

.hero-showcase__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 680px;
}

.hero-showcase__eyebrow {
  margin: 0 0 var(--spacing-sm);
  color: var(--accent-color-secondary);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-showcase h1,
.hero-analysis h2 {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  margin-bottom: var(--spacing-md);
  line-height: 1.05;
}

.hero-showcase__intro,
.hero-analysis p,
.hero-analysis__card p {
  margin: 0 0 var(--spacing-md);
  color: var(--text-color-secondary);
  max-width: 540px;
}

.hero-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.1rem;
  border-radius: 4px;
  font-weight: 600;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 10px 24px rgba(224, 75, 158, 0.24);
}

.button--primary:hover {
  background: var(--color-accent-primary-hover);
  color: #fff;
}

.button--secondary {
  background: transparent;
  color: var(--color-accent-secondary);
  border: 1px solid var(--color-accent-secondary);
  box-shadow: none;
}

.button--secondary:hover {
  background: rgba(0, 212, 255, 0.1);
  color: var(--color-accent-secondary-hover);
  border-color: var(--color-accent-secondary-hover);
}

.button--ghost {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-color-primary);
}

.button--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-color-primary);
}

.hero-showcase__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  max-width: 560px;
}

.hero-showcase__stats div {
  padding: var(--spacing-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.hero-showcase__stats strong {
  display: block;
  color: var(--text-color-primary);
  font-size: 1.05rem;
}

.hero-showcase__stats span {
  color: var(--text-color-secondary);
  font-size: var(--font-caption-size);
}

.hero-showcase__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-md);
}

.hero-showcase__panel-card {
  padding: var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--radius-main) + 0.15rem);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
}

.hero-showcase__panel-card h2 {
  margin-bottom: var(--spacing-sm);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.hero-showcase__mini-grid {
  display: grid;
  gap: var(--spacing-sm);
}

.hero-mini-card {
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  background: rgba(36, 47, 58, 0.76);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero-mini-card span {
  color: var(--text-color-primary);
  font-weight: 600;
}

.hero-mini-card small {
  color: var(--text-color-secondary);
}

.hero-analysis {
  display: grid;
  gap: var(--spacing-lg);
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-strong) 100%);
  box-shadow: var(--shadow-elevated);
}

.featured-games {
  display: grid;
  gap: var(--spacing-lg);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.06));
  box-shadow: var(--shadow-elevated);
}

.featured-games__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.featured-games__header h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.featured-games__carousel {
  overflow: hidden;
  position: relative;
  border-radius: calc(var(--radius-main) + 0.125rem);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.16), rgba(0, 212, 255, 0.09));
  padding: 1rem 0;
}

.featured-games__carousel:hover .featured-games__track {
  animation-play-state: paused;
}

.featured-games__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: featured-games-scroll 32s linear infinite;
  will-change: transform;
}

.featured-game-card {
  min-width: 240px;
  max-width: 260px;
  border-radius: var(--radius-main);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  transform: translateZ(0);
}

.featured-game-card__image {
  min-height: 180px;
  background-size: cover;
  background-position: center;
}

.featured-game-card__body {
  padding: var(--spacing-md);
  display: grid;
  gap: 0.5rem;
}

.featured-game-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(224, 75, 158, 0.14);
  color: var(--color-accent-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.featured-game-card__title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-color-primary);
}

.featured-game-card__meta {
  margin: 0;
  color: var(--text-color-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}

@keyframes featured-games-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50%));
  }
}

.hero-analysis__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.hero-analysis__card {
  padding: var(--spacing-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.04);
}

.hero-analysis__card h3 {
  margin: 0 0 var(--spacing-sm);
  color: var(--text-color-primary);
}

.text-link {
  color: var(--accent-color-secondary);
  font-weight: 600;
}

.text-link:hover {
  color: var(--color-accent-secondary-hover);
}

.homepage-clean {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding: 0;
}

.homepage-banner {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 16% 14%, rgba(224, 75, 158, 0.22), transparent 24%),
    radial-gradient(circle at 86% 10%, rgba(0, 212, 255, 0.15), transparent 24%),
    linear-gradient(180deg, rgba(10, 16, 28, 0.98), rgba(18, 26, 38, 0.96));
  padding: clamp(2rem, 4vw, 3rem);
}

.homepage-banner__inner {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: var(--spacing-xl);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 520px;
}

.homepage-banner__copy {
  color: var(--text-color-primary);
  max-width: 640px;
}

.banner-eyebrow {
  display: inline-block;
  margin-bottom: var(--spacing-md);
  color: var(--accent-color-secondary);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.homepage-banner__copy h1 {
  margin: 0 0 var(--spacing-lg);
  font-size: clamp(2.8rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.homepage-banner__copy p {
  margin: 0 0 var(--spacing-xl);
  color: var(--text-color-secondary);
  max-width: 560px;
  font-size: 1.05rem;
}

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.banner-actions .button {
  min-width: 170px;
}

.banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.banner-stats div {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.06);
  min-width: 130px;
}

.banner-stats strong {
  display: block;
  color: var(--text-color-primary);
  font-size: 1.2rem;
}

.banner-stats span {
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

.homepage-banner__panel {
  display: flex;
  justify-content: center;
}

.banner-panel {
  width: 100%;
  max-width: 420px;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  border-radius: calc(var(--radius-main) + 0.2rem);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.16);
}

.banner-panel__label {
  display: inline-flex;
  margin-bottom: var(--spacing-sm);
  color: var(--accent-color-secondary);
  font-size: var(--font-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.banner-panel h2 {
  margin: 0 0 var(--spacing-sm);
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
}

.banner-panel p {
  margin: 0 0 var(--spacing-md);
  color: var(--text-color-secondary);
}

.featured-strip {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.featured-strip__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.featured-strip__top h2 {
  margin: 0;
  font-size: clamp(1.85rem, 2.5vw, 2.6rem);
}

.featured-strip__top p {
  margin: 0;
  color: var(--text-color-secondary);
  max-width: 520px;
}

.featured-strip__window {
  overflow: hidden;
  border-radius: calc(var(--radius-main) + 0.2rem);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
}

.featured-strip__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: featured-strip-scroll 28s linear infinite;
}

.featured-card {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  border-radius: var(--radius-main);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
}

.featured-card__visual {
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.featured-card--pink .featured-card__visual {
  background: linear-gradient(180deg, rgba(224, 75, 158, 0.96), rgba(28, 37, 58, 0.94));
}

.featured-card--blue .featured-card__visual {
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.92), rgba(14, 35, 59, 0.95));
}

.featured-card--teal .featured-card__visual {
  background: linear-gradient(180deg, rgba(85, 239, 196, 0.92), rgba(12, 30, 45, 0.95));
}

.featured-card--gold .featured-card__visual {
  background: linear-gradient(180deg, rgba(255, 184, 93, 0.95), rgba(32, 36, 63, 0.96));
}

.featured-card--purple .featured-card__visual {
  background: linear-gradient(180deg, rgba(155, 81, 224, 0.92), rgba(20, 28, 50, 0.95));
}

.featured-card__body {
  padding: 1rem;
  display: grid;
  gap: 0.6rem;
}

.featured-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.featured-card h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-color-primary);
}

.featured-card p {
  margin: 0;
  color: var(--text-color-secondary);
  line-height: 1.6;
}

@keyframes featured-strip-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 1024px) {
  .homepage-banner__inner {
    grid-template-columns: 1fr;
  }

  .homepage-banner__panel {
    order: -1;
  }
}

@media (max-width: 760px) {
  .featured-strip__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .banner-stats {
    flex-direction: column;
    gap: 0.75rem;
  }

  .featured-strip__window {
    padding: 0.75rem;
  }

  .featured-card {
    min-width: 220px;
  }

  .homepage-banner {
    padding: clamp(1.25rem, 3vw, 1.75rem);
  }

  .homepage-banner__copy h1 {
    font-size: clamp(2rem, 7vw, 2.8rem);
  }
}

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

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

  .category-discovery__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .banner-sec .row {
    grid-template-columns: 1fr;
  }

  .banner-sec .featured-margin-fix>.row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .site-main {
    padding: var(--spacing-md);
  }

  .hero-showcase {
    min-height: auto;
    padding: var(--spacing-lg);
  }

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

  .hero-showcase__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .button {
    width: 100%;
  }

  .category-discovery__heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

.banner-sec {
  padding: var(--spacing-xl) var(--spacing-lg);
  background: var(--bg-surface);
}

.banner-sec .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.banner-sec .col-md-6 {
  width: 100%;
}

@media (min-width: 992px) {
  .banner-sec .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.top-slider {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-elevated);
}

#featuredCarousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  min-height: 420px;
}

.carousel-item {
  position: relative;
}

.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  min-height: 420px;
}

.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--spacing-lg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(5, 11, 20, 0.92) 90%);
}

.carousel-caption h5 {
  margin: 0 0 0.5rem;
  color: var(--text-color-primary);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.carousel-caption p {
  margin: 0;
  color: var(--text-color-secondary);
  font-size: 0.96rem;
  max-width: 22rem;
}

.carousel-indicators {
  position: absolute;
  left: var(--spacing-lg);
  bottom: calc(var(--spacing-lg) + 0.5rem);
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.carousel-indicators button {
  width: 3rem;
  height: 0.4rem;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0.7;
}

.carousel-indicators button.active {
  background: var(--accent-color);
  opacity: 1;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  cursor: pointer;
}

.carousel-control-prev {
  left: var(--spacing-md);
}

.carousel-control-next {
  right: var(--spacing-md);
}

.carousel-control-prev span,
.carousel-control-next span {
  display: block;
  line-height: 1;
}

.promo-carousel .carousel-control-prev,
.promo-carousel .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(14, 22, 34, 0.72);
  color: var(--text-color-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.promo-carousel .carousel-control-prev {
  left: 1rem;
}

.promo-carousel .carousel-control-next {
  right: 1rem;
}

.promo-carousel .carousel-control-prev:hover,
.promo-carousel .carousel-control-next:hover {
  background: rgba(28, 40, 56, 0.88);
}

.promo-carousel .carousel-indicators {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 2;
}

.promo-carousel .carousel-indicators button {
  width: 3.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.promo-carousel .carousel-indicators button.active {
  background: var(--accent-color);
  transform: scaleX(1.5);
}

.featured-margin-fix>.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.banner-sec .card {
  position: relative;
  border-radius: var(--radius-main);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-elevated);
}

.banner-sec .card img {
  width: 100%;
  display: block;
  object-fit: cover;
  min-height: 180px;
}

.banner-sec .card-img-overlay {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 2;
}

.banner-sec .card-img-overlay span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.banner-sec .featured-info {
  padding: var(--spacing-md);
}

.banner-sec .title-small {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.banner-sec .title-small a {
  color: var(--text-color-primary);
  text-decoration: none;
}

.banner-sec .title-small a:hover {
  color: var(--accent-color);
}

@media (max-width: 720px) {
  .carousel-inner {
    min-height: 260px;
  }

  .carousel-caption {
    padding: var(--spacing-md);
  }

  .carousel-caption p {
    max-width: 100%;
  }

  .banner-sec {
    padding: var(--spacing-lg);
  }

  .category-discovery__row {
    grid-template-columns: 1fr;
  }
}

.simple-slider {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.simple-slider__header {
  margin-bottom: var(--spacing-lg);
}

.slider-eyebrow {
  display: inline-block;
  margin-bottom: var(--spacing-sm);
  color: var(--accent-color);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.simple-slider__header h1 {
  margin: 0 0 var(--spacing-md);
  color: var(--text-color-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.simple-slider__header p {
  margin: 0;
  color: var(--text-color-secondary);
  max-width: 40rem;
  font-size: 1rem;
}

.slider-frame {
  overflow: hidden;
  border-radius: var(--radius-main);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: var(--spacing-md);
}

.slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--spacing-md);
  animation: slide-loop 18s linear infinite;
}

.slider-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-main);
  overflow: hidden;
  min-width: 280px;
}

.slider-card img {
  width: 100%;
  display: block;
  object-fit: cover;
  min-height: 220px;
}

.slider-card__body {
  padding: var(--spacing-md);
}

.slider-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--accent-color);
  color: #fff;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-sm);
}

.slider-card h3 {
  margin: 0 0 0.5rem;
  color: var(--text-color-primary);
  font-size: 1.1rem;
}

.slider-card p {
  margin: 0;
  color: var(--text-color-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

@keyframes slide-loop {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 880px) {
  .slider-track {
    grid-auto-columns: minmax(240px, 1fr);
  }
}

@media (max-width: 640px) {
  .simple-slider {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .slider-track {
    animation-duration: 24s;
  }

  .slider-card {
    min-width: 240px;
  }
}


/* =============================================================
   HEADER SEARCH — spec: bg-tertiary input, border-secondary,
   accent-primary focus ring, radius-md
   ============================================================= */

.header-search {
  position: relative;
}

.header-search__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search__icon {
  position: absolute;
  left: 0.75rem;
  color: var(--color-text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.header-search__input {
  width: 200px;
  padding: 0.55rem 0.9rem 0.55rem 2.25rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-body-sm-size);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

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

.header-search__input:focus {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(224, 75, 158, 0.12);
}


/* =============================================================
   HAMBURGER BUTTON — hidden on desktop, visible on mobile
   Three bars animate to × when .is-active
   ============================================================= */

.hamburger {
  display: none;
  /* hidden desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hamburger:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.hamburger__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-text-secondary);
  transform-origin: center;
  transition:
    transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1),
    opacity var(--transition-fast),
    background var(--transition-fast);
}

.hamburger:hover .hamburger__bar {
  background: var(--color-text-primary);
}

/* Animate bars into × when active */
.hamburger.is-active .hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--color-accent-primary);
}

.hamburger.is-active .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.is-active .hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--color-accent-primary);
}


/* =============================================================
   DRAWER OVERLAY — full-screen backdrop
   ============================================================= */

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-overlay-dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  cursor: pointer;
}

.drawer-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}


/* =============================================================
   MOBILE DRAWER — slides in from the right
   Spec: bg-secondary surface, border-primary left edge, shadow-xl
   ============================================================= */

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(320px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border-left: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
  overflow: hidden;
}


/* --- Drawer Header --- */

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-secondary);
  flex-shrink: 0;
}

.site-branding--sm {
  gap: var(--spacing-sm);
}

.site-branding--sm .site-branding__mark {
  font-size: 1rem;
}

.site-branding--sm .site-branding__name {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.drawer-close:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.drawer-close:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}


/* --- Drawer Search --- */

.mobile-drawer__search {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-secondary);
  flex-shrink: 0;
}

.mobile-drawer__search .header-search__wrap {
  width: 100%;
}

.mobile-drawer__search .header-search__input {
  width: 100%;
}


/* --- Drawer Nav Links --- */

.mobile-drawer__nav {
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) 0;
  flex: 1;
}

.mobile-drawer__nav li {
  margin: 0;
}

.drawer-nav__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.85rem var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-body-size);
  font-weight: 500;
  border-left: 3px solid transparent;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.drawer-nav__link svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.drawer-nav__link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border-left-color: var(--color-accent-secondary);
}

.drawer-nav__link:hover svg {
  color: var(--color-accent-secondary);
}

.drawer-nav__link.is-active {
  color: var(--color-accent-primary);
  background: rgba(224, 75, 158, 0.08);
  border-left-color: var(--color-accent-primary);
}

.drawer-nav__link.is-active svg {
  color: var(--color-accent-primary);
}

.drawer-nav__link:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}


/* --- Drawer Footer --- */

.mobile-drawer__footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border-secondary);
  flex-shrink: 0;
}

.mobile-drawer__footer-label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-caption-size);
  font-weight: var(--font-caption-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* =============================================================
   RESPONSIVE — show hamburger, hide desktop nav on mobile
   Breakpoint: 768px (spec --breakpoint-md)
   ============================================================= */

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .site-nav {
    display: none;
    /* hidden on mobile — drawer takes over */
  }

  .header-search {
    flex: 1;
    min-width: 0;
  }

  .header-search__input {
    width: 100%;
  }

  .site-header__inner {
    flex-wrap: nowrap;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .site-header__actions {
    gap: var(--spacing-sm);
    flex: 1;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {

  /* On very small screens, collapse search into icon-only tap */
  .header-search__input {
    width: 130px;
  }
}

/* =====================================================================
   BLOG INDEX PAGE & FEATURED SPOTLIGHT STYLES (home.php)
   ===================================================================== */

.blog-hero {
  padding: clamp(1.75rem, 3.5vw, 2.25rem) 0 1.25rem 0;
  border-bottom: none;
  background: var(--color-bg-primary);
}

.catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}

.catalog-breadcrumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

.catalog-breadcrumbs .sep {
  color: rgba(255, 255, 255, 0.2);
}

.catalog-breadcrumbs .current {
  color: #FFFFFF;
  font-weight: 600;
}

.archive-hero__title {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 10px 0;
}

.archive-hero__desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0 0 20px 0;
  max-width: 750px;
  line-height: 1.6;
}

.blog-filter-bar {
  margin-top: 16px;
}

.filter-group--pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill {
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  color: #FFFFFF;
  border-color: rgba(0, 212, 255, 0.35);
  background: var(--color-bg-tertiary);
}

.filter-pill--active {
  color: #FFFFFF !important;
  background: var(--color-accent-primary) !important;
  border-color: var(--color-accent-primary) !important;
  box-shadow: 0 4px 12px rgba(224, 75, 158, 0.35);
}

/* Option Switcher Toolbar */
.featured-option-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.option-tab-btn {
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.option-tab-btn:hover,
.option-tab-btn--active {
  color: #FFFFFF;
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-secondary);
}

/* VARIATION 1: Modern Open Canvas (No Outer Box, 50/50 Split) */
.featured-option-v1 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
}

.featured-option-v1__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: block;
  border: 1px solid var(--border-color);
}

.featured-option-v1__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.featured-option-v1:hover .featured-option-v1__thumb img {
  transform: scale(1.04);
}

/* VARIATION 2: Cinematic Banner Overlay (Full-Width Artwork Banner) */
.featured-option-v2 {
  position: relative;
  width: 100%;
  min-height: 360px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  background: var(--color-bg-secondary);
}

.featured-option-v2__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-option-v2__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 20, 28, 0.95) 0%, rgba(14, 20, 28, 0.7) 60%, rgba(14, 20, 28, 0.25) 100%);
}

.featured-option-v2__content {
  position: relative;
  z-index: 2;
  max-width: 580px;
  padding: 36px;
}

/* VARIATION 3: Dual Spotlight Cards Grid (2 Side-by-Side Featured Cards) */
.featured-option-v3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dual-featured-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.dual-featured-card:hover {
  border-color: rgba(0, 212, 255, 0.35);
  transform: translateY(-3px);
}

.dual-featured-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
}

.dual-featured-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dual-featured-card:hover .dual-featured-card__thumb img {
  transform: scale(1.05);
}

.dual-featured-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* VARIATION 4: Compact Horizontal Ribbon Strip */
.featured-option-v4 {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  transition: border-color 0.25s ease;
}

.featured-option-v4:hover {
  border-color: rgba(0, 212, 255, 0.35);
}

.featured-option-v4__thumb {
  position: relative;
  width: 200px;
  height: 120px;
  flex: 0 0 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.featured-option-v4__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-option-v4__body {
  flex: 1;
  min-width: 0;
}

/* Featured Blog Post Spotlight Hero Card */
.featured-blog-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
  padding: 24px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s ease;
}

.featured-blog-card:hover {
  border-color: rgba(0, 212, 255, 0.35);
}

.featured-blog-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.featured-blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.featured-blog-card:hover .featured-blog-card__thumb img {
  transform: scale(1.04);
}

.featured-blog-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.featured-blog-card__title {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.3;
  margin: 10px 0 12px 0;
}

.featured-blog-card__title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.featured-blog-card__title a:hover {
  color: var(--color-accent-secondary);
}

.featured-blog-card__excerpt {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.read-article-btn {
  padding: 10px 20px;
  font-size: 0.88rem;
}

/* Responsiveness for Featured Blog Card */
@media (max-width: 850px) {
  .featured-blog-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =====================================================================
   GAME CATEGORIES DIRECTORY PAGE STYLES (page-categories.php)
   ===================================================================== */

.categories-hero {
  padding: clamp(1.75rem, 3.5vw, 2.25rem) 0 1.25rem 0;
  border-bottom: none;
  background: var(--color-bg-primary);
}

.categories-directory-section {
  padding: clamp(1.75rem, 3.5vw, 3.25rem) 0;
}

/* =====================================================================
   SIDE ARTWORK PREVIEW CATEGORIES DIRECTORY (page-categories.php)
   ===================================================================== */

.category-artwork-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--spacing-sm);
}

.category-artwork-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.category-artwork-card__thumb {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0E141C;
}

.category-artwork-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-artwork-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.category-artwork-card__title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}

.category-artwork-card__count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color 0.25s ease;
}

/* Hover Behavior */
.category-artwork-card:hover {
  border-color: var(--color-accent-secondary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
}

.category-artwork-card:hover .category-artwork-card__thumb img {
  transform: scale(1.12);
}

.category-artwork-card:hover .category-artwork-card__title {
  color: #FFFFFF;
}

.category-artwork-card:hover .category-artwork-card__count {
  color: var(--color-accent-secondary);
}

@media (max-width: 1100px) {
  .category-artwork-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 750px) {
  .category-artwork-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 440px) {
  .category-artwork-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   4 CREATIVE CATEGORY DESIGN CONCEPTS (page-categories.php)
   ===================================================================== */

/* CONCEPT 1: Cyber Neon Strip */
.concept1-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--spacing-sm);
}

.concept1-card {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.concept1-card__neon-line {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
  opacity: 0.8;
  transition: height 0.25s ease;
}

.concept1-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
}

.concept1-card__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.concept1-card__badge {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--color-accent-primary);
  background: rgba(224, 75, 158, 0.15);
  border: 1px solid rgba(224, 75, 158, 0.35);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.concept1-card__title {
  font-size: 1rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.concept1-card__count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
}

.concept1-card:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(224, 75, 158, 0.25);
}

.concept1-card:hover .concept1-card__neon-line {
  height: 5px;
}

/* CONCEPT 2: Side Artwork Preview */
.concept2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--spacing-sm);
}

.concept2-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all 0.25s ease;
}

.concept2-card__thumb {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

.concept2-card__body {
  display: flex;
  flex-direction: column;
}

.concept2-card__title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 3px 0;
}

.concept2-card__count {
  font-size: 0.76rem;
  color: var(--color-text-secondary);
}

.concept2-card:hover {
  border-color: var(--color-accent-secondary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
}

.concept2-card:hover .concept2-card__thumb img {
  transform: scale(1.12);
}

/* CONCEPT 3: Ambient Mesh Gradient */
.concept3-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--spacing-sm);
}

.concept3-card {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  text-decoration: none;
  overflow: hidden;
  padding: 18px 20px;
  transition: all 0.25s ease;
}

.concept3-card__mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.12) 0%, rgba(224, 75, 158, 0.1) 45%, transparent 80%);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.concept3-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.concept3-card__icon {
  color: var(--color-accent-secondary);
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
}

.concept3-card__info {
  display: flex;
  flex-direction: column;
}

.concept3-card__title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 2px 0;
}

.concept3-card__count {
  font-size: 0.76rem;
  color: var(--color-text-secondary);
}

.concept3-card:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(224, 75, 158, 0.22);
}

.concept3-card:hover .concept3-card__mesh {
  opacity: 1;
}

.concept3-card:hover .concept3-card__icon {
  color: var(--color-accent-primary);
  transform: scale(1.15);
}

/* CONCEPT 4: Tech Badge Stat Tile */
.concept4-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--spacing-sm);
}

.concept4-card {
  position: relative;
  padding: 18px 20px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  text-decoration: none;
  overflow: hidden;
  transition: all 0.25s ease;
}

.concept4-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.concept4-card__num {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-accent-primary);
  letter-spacing: 0.05em;
}

.concept4-card__count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
  background: rgba(0, 212, 255, 0.12);
  padding: 2px 10px;
  border-radius: 999px;
}

.concept4-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.concept4-card__underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));
  transition: width 0.3s ease;
}

.concept4-card:hover {
  border-color: rgba(224, 75, 158, 0.4);
  transform: translateY(-3px);
}

.concept4-card:hover .concept4-card__underline {
  width: 100%;
}

@media (max-width: 1100px) {

  .concept1-grid,
  .concept2-grid,
  .concept3-grid,
  .concept4-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 750px) {

  .concept1-grid,
  .concept2-grid,
  .concept3-grid,
  .concept4-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 440px) {

  .concept1-grid,
  .concept2-grid,
  .concept3-grid,
  .concept4-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PRIVACY POLICY PAGE STYLES (page-privacy.php)
   Uses strictly core design system variables:
   --bg-canvas, --bg-surface, --border-color, --radius-main, --text-main, --text-muted, --accent-color
   ========================================================================== */

.privacy-page {
  background-color: var(--bg-canvas);
  color: var(--text-main);
  padding-bottom: 60px;
}

.privacy-hero {
  padding: 32px 0 24px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 32px;
}

.privacy-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-main);
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.privacy-badge--accent {
  background-color: rgba(224, 75, 158, 0.12);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.privacy-badge__icon,
.privacy-hero__meta svg,
.privacy-toc-card__header svg,
.privacy-notice-box__title svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Layout Grid: 2 columns on desktop (Sticky TOC + Main Legal Cards), Stacked on Mobile */
.privacy-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 991px) {
  .privacy-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Table of Contents Sticky Box */
.privacy-toc-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  padding: 20px;
  position: sticky;
  top: 90px;
}

.privacy-toc-card__header {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacy-toc-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.privacy-toc-card__link {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 150ms ease, color 150ms ease;
}

.privacy-toc-card__link:hover,
.privacy-toc-card__link:focus {
  background-color: rgba(224, 75, 158, 0.1);
  color: var(--accent-color);
}

/* ==========================================================================
   ULTRA-MINIMAL POLICY PAGES (disclaimer, privacy, terms)
   ========================================================================== */

.policy-page-minimal {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.policy-document {
  max-width: 760px;
  margin: 0;
  text-align: left;
}

.policy-header {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-title {
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.policy-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.policy-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.policy-section h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.policy-section p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
}

.policy-section p:last-child {
  margin-bottom: 0;
}

.policy-section ul,
.policy-section ol {
  margin: 8px 0 12px 20px;
  padding: 0;
  color: var(--color-text-secondary);
}

.policy-section li {
  font-size: 0.925rem;
  line-height: 1.6;
  margin-bottom: 6px;
}

.policy-section li strong {
  color: #FFFFFF;
}

.policy-section a {
  color: var(--color-accent-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.policy-section a:hover {
  color: var(--color-accent-primary-hover);
}

/* Rating Badge System */
.rating-pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.rating-pill-card {
  background-color: var(--bg-canvas);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-main);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rating-pill-card__tag {
  font-size: 0.85rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.rating-pill-card__tag--pegi3 {
  background-color: #10B981;
}

.rating-pill-card__tag--pegi12 {
  background-color: #3B82F6;
}

.rating-pill-card__tag--pegi16 {
  background-color: #F59E0B;
}

.rating-pill-card__tag--pegi18 {
  background-color: #EF4444;
}

.rating-pill-card__desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ==========================================================================
   CANVAS-BASED CONTACT PAGE STYLES (page-contact.php)
   ========================================================================== */

.contact-page-canvas {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.contact-canvas-wrapper {
  max-width: 720px;
  margin: 0;
  text-align: left;
}

/* Canvas Hero Header (Left Aligned) */
.contact-canvas-hero {
  margin-bottom: var(--spacing-hero-bottom);
  text-align: left;
}

.contact-canvas-hero__title {
  font-size: clamp(1.85rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.contact-canvas-hero__desc {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.contact-canvas-hero__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.contact-canvas-hero__note a {
  color: var(--color-accent-primary);
  font-weight: 600;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.contact-canvas-hero__note a:hover {
  color: var(--color-accent-primary-hover);
}

/* Canvas Form - Sitting Directly on Page Canvas (Left Aligned, No Outer Box) */
.contact-canvas-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 680px;
  margin-bottom: 40px;
}

.contact-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.contact-field-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.required-star {
  color: var(--color-accent-primary);
}

.contact-field-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.contact-field-input,
.contact-field-select,
.contact-field-textarea {
  width: 100%;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  font-size: 0.925rem;
  color: var(--color-text-primary);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.contact-field-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A99AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.contact-field-input::placeholder,
.contact-field-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.75;
}

.contact-field-input:hover,
.contact-field-select:hover,
.contact-field-textarea:hover {
  border-color: rgba(224, 75, 158, 0.4);
}

.contact-field-input:focus,
.contact-field-select:focus,
.contact-field-textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(224, 75, 158, 0.18);
  background-color: var(--color-bg-tertiary);
}

.contact-field-textarea {
  resize: vertical;
  min-height: 170px;
  line-height: 1.5;
}

.contact-form-actions {
  margin-top: 6px;
  text-align: left;
}

/* Theme Style Guide Button (Compact Pill Accent Button) */
.contact-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  background-color: var(--color-accent-primary);
  color: #FFFFFF;
  font-size: 0.925rem;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 4px 14px rgba(224, 75, 158, 0.35);
}

.contact-pill-btn:hover {
  background-color: var(--color-accent-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(224, 75, 158, 0.5);
}

.contact-pill-btn:active {
  transform: translateY(0);
}

.contact-pill-btn svg {
  transition: transform var(--transition-fast);
}

.contact-pill-btn:hover svg {
  transform: translateX(3px);
}

.contact-form-alert-box {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid var(--color-success);
  color: var(--color-success);
  border-radius: var(--radius-md, 8px);
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
}

/* ==========================================================================
   MINIMAL CENTERED ZERO-SEARCH-RESULTS PAGE STYLES (search.php)
   ========================================================================== */

.search-empty-minimal {
  text-align: center;
  max-width: 680px;
  margin: clamp(2rem, 4vw, 3.5rem) auto clamp(2.5rem, 5vw, 4rem) auto;
  padding: 0 16px;
}

.search-empty-minimal__title {
  font-size: clamp(1.8rem, 3.5vw, 2.3rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.search-empty-minimal__title span {
  color: var(--color-accent-primary);
}

.search-empty-minimal__text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.search-empty-minimal__text a {
  color: var(--color-accent-primary);
  font-weight: 700;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.search-empty-minimal__text a:hover {
  color: var(--color-accent-primary-hover);
}

/* ==========================================================================
   MINIMAL 404 PAGE NOT FOUND STYLES (404.php)
   ========================================================================== */

.page-404-canvas {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.error-404-minimal {
  text-align: center;
  max-width: 680px;
  margin: clamp(2.5rem, 5vw, 4.5rem) auto clamp(2.5rem, 5vw, 4rem) auto;
  padding: 0 16px;
}

.error-404-badge {
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 25px rgba(224, 75, 158, 0.35));
}

.error-404-title {
  font-size: clamp(1.8rem, 3.5vw, 2.3rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.error-404-text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.error-404-text a {
  color: var(--color-accent-primary);
  font-weight: 700;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.error-404-text a:hover {
  color: var(--color-accent-primary-hover);
}

/* Fallback Games Grid */
.fallback-games-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .fallback-games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.fallback-game-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl, 14px);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.fallback-game-card:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.fallback-game-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0E141C;
}

.fallback-game-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.fallback-game-card:hover .fallback-game-card__thumb img {
  transform: scale(1.06);
}

.fallback-game-card__engine {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(14, 22, 34, 0.85);
  color: var(--color-accent-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.fallback-game-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fallback-game-card__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fallback-game-card__meta {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   MINIMALIST GAME DETAIL PAGE STYLES (single.php & single-game.php)
   ========================================================================== */

.single-game-page {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* 2-Column Grid Layout */
.minimal-game-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 991px) {
  .minimal-game-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.main-content-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* COMPONENT 3.1: HEADER */
.minimal-game-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 24px;
  border-bottom: none;
}

.title-version-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.minimal-game-title {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.version-badge {
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--color-accent-secondary);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full, 999px);
}

.meta-subline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.creator-link {
  color: var(--color-text-primary);
  font-weight: 700;
  text-decoration: none;
}

.creator-link:hover {
  color: var(--color-accent-primary);
}

.dot-sep {
  color: var(--color-text-muted);
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-success);
  font-weight: 700;
  font-size: 0.8rem;
}

.jump-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-accent-primary);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-full, 999px);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(224, 75, 158, 0.35);
}

.jump-download-btn:hover {
  background-color: var(--color-accent-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(224, 75, 158, 0.5);
  color: #FFFFFF;
}

/* COMPONENT 3.2: PREMIUM VISUAL SHOWCASE GALLERY */
.visual-showcase-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.showcase-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.showcase-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.showcase-label {
  font-size: 0.86rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}

.gallery-count-badge {
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.25);
  color: #00d4ff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.showcase-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.showcase-stage__main {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.showcase-stage__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(10, 16, 26, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0.85;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.gallery-nav-btn:hover {
  opacity: 1;
  background: rgba(0, 212, 255, 0.25);
  border-color: #00d4ff;
  color: #00d4ff;
  transform: translateY(-50%) scale(1.08);
}

.gallery-nav-btn--prev {
  left: 14px;
}

.gallery-nav-btn--next {
  right: 14px;
}

.stage-tag {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: rgba(10, 16, 26, 0.82);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.stage-hd-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(0, 212, 255, 0.18);
  backdrop-filter: blur(8px);
  color: #00d4ff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  letter-spacing: 0.5px;
}

.showcase-stage__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.showcase-thumb-btn {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08);
  padding: 0;
  cursor: pointer;
  background: #0E141C;
  opacity: 0.65;
  transition: all 0.2s ease;
}

.showcase-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-thumb-btn:hover {
  opacity: 0.95;
  border-color: rgba(0, 212, 255, 0.5);
  transform: translateY(-2px);
}

.showcase-thumb-btn.active {
  opacity: 1;
  border-color: #00d4ff;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.35);
  transform: translateY(-2px);
}

/* COMPONENT 3.3: AT-A-GLANCE TECH SPECS & TAG BAR */
.tech-specs-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl, 14px);
  padding: 16px 20px;
  margin-bottom: 14px;
}

.tech-spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.spec-value {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.highlight-cyan {
  color: var(--color-accent-secondary);
}

.engine-tag {
  color: var(--color-accent-primary);
}

.save-status-tag {
  color: var(--color-success);
  font-size: 0.82rem;
}

.spec-platforms-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.platform-chip {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.tech-tags-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tags-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.group-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.tag-button {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full, 999px);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.tag-button:hover {
  border-color: var(--color-accent-primary);
  color: #FFFFFF;
}

.cw-warning-tag {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #EF4444;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

/* COMPONENT 3.4: LORE, STORY & CHANGELOGS */
.lore-heading {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 10px 0;
}

.lore-synopsis-block p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 14px 0;
}

.lore-subheading {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 18px 0 8px 0;
}

.lore-bullet-list {
  margin: 0 0 20px 20px;
  padding: 0;
  color: var(--color-text-secondary);
}

.lore-bullet-list li {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 6px;
}

.lore-bullet-list li strong {
  color: #FFFFFF;
}

.changelog-accordion {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl, 14px);
  overflow: hidden;
}

.changelog-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  font-weight: 800;
  color: var(--color-text-primary);
}

.changelog-accordion__summary:hover {
  background: rgba(255, 255, 255, 0.02);
}

.changelog-accordion__content {
  padding: 0 20px 18px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.changelog-list {
  margin: 12px 0 0 20px;
  padding: 0;
}

.changelog-list li {
  margin-bottom: 4px;
}

/* COMPONENT 3.5: THE ACTION ZONE (DOWNLOADS, PATCHES & SAVES) */
.action-zone-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-zone-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}

.action-zone-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.os-downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.os-download-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.os-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.os-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.os-file-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.os-card-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dl-mirror-btn {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full, 999px);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.dl-mirror-btn--primary {
  background-color: var(--color-accent-primary);
  color: #FFFFFF;
}

.dl-mirror-btn--primary:hover {
  background-color: var(--color-accent-primary-hover);
  color: #FFFFFF;
}

.dl-mirror-btn--secondary {
  background-color: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.25);
  color: var(--color-accent-secondary);
}

.dl-mirror-btn--secondary:hover {
  background-color: rgba(0, 212, 255, 0.25);
  color: #FFFFFF;
}

/* Save & Patches Ecosystem */
.save-patches-ecosystem {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ecosystem-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 16px;
  border-radius: var(--radius-md, 8px);
  flex-wrap: wrap;
}

.ecosystem-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eco-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-accent-secondary);
}

.eco-desc {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.eco-dl-btn {
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(0, 212, 255, 0.15);
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--color-accent-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-full, 999px);
  text-decoration: none;
  white-space: nowrap;
}

.eco-dl-btn:hover {
  background: rgba(0, 212, 255, 0.25);
  color: #FFFFFF;
}

.eco-dl-btn--patch {
  background: rgba(224, 75, 158, 0.15);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.eco-dl-btn--patch:hover {
  background: var(--color-accent-primary);
  color: #FFFFFF;
}

.save-path-tooltip {
  display: flex;
  gap: 10px;
  background: rgba(14, 22, 34, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.save-path-tooltip code {
  display: block;
  color: var(--color-accent-secondary);
  font-family: monospace;
  margin-top: 2px;
  word-break: break-all;
}

/* COMPONENT 3.6: COMMUNITY COMMENTS & REVIEWS */
.comments-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.comments-heading {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
}

.rating-aggregate-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  padding: 6px 14px;
  border-radius: var(--radius-full, 999px);
}

.rating-score {
  font-weight: 900;
  color: #F59E0B;
  font-size: 0.9rem;
}

.rating-votes {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.comments-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl, 14px);
  padding: 14px 18px;
  display: flex;
  gap: 14px;
}

.comment-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-author {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.comment-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.comment-text {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* COMPONENT 3.7: BOTTOM EXPLORATION GRID */
.bottom-exploration-section {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bottom-games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 991px) {
  .bottom-games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bottom-game-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl, 14px);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.bottom-game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(224, 75, 158, 0.4);
}

.bottom-game-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0E141C;
  overflow: hidden;
}

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

.engine-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(14, 22, 34, 0.85);
  color: var(--color-accent-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.bottom-game-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bottom-game-card__title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bottom-game-card__meta {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* RIGHT COLUMN: DISCOVERY SIDEBAR (IMAGE HIGHLIGHTS) */
.discovery-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 20px;
}

.discovery-widget {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: none;
}

.discovery-widget-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.discovery-widget-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
}

.discovery-widget-subtitle {
  font-size: 0.72rem;
  color: var(--color-accent-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.discovery-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Image-First Discovery Card */
.discovery-card-visual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-tertiary, #121924);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.discovery-card-visual:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 212, 255, 0.1);
}

.discovery-card-visual .discovery-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #0E141C;
}

.discovery-card-visual .discovery-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.discovery-card-visual:hover .discovery-card__cover img {
  transform: scale(1.06);
}

.discovery-card__overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}

/* Floating Chips inside Image */
.visual-rating-chip {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(14, 20, 28, 0.88);
  backdrop-filter: blur(8px);
  color: #F59E0B;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.discovery-card-visual .engine-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 2;
  font-size: 0.65rem;
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.discovery-card-visual .discovery-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 4px 2px;
}

.discovery-card-visual .discovery-card__title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.discovery-card-visual:hover .discovery-card__title {
  color: var(--color-accent-secondary);
}

.discovery-card-visual .discovery-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
}

.ver-tag {
  background: rgba(0, 212, 255, 0.1);
  color: var(--color-accent-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.7rem;
}

.views-tag {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

/* =====================================================================
   BOTTOM EXPLORATION GRID (IMAGE-FIRST CARDS)
   ===================================================================== */

.bottom-exploration-section {
  margin-top: 32px;
}

.bottom-games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 992px) {
  .bottom-games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .bottom-games-grid {
    grid-template-columns: 1fr;
  }
}

.bottom-game-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.bottom-game-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.bottom-game-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0E141C;
}

.bottom-game-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.bottom-game-card:hover .bottom-game-card__thumb img {
  transform: scale(1.06);
}

.bottom-game-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bottom-game-card__title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.bottom-game-card:hover .bottom-game-card__title {
  color: var(--color-accent-secondary);
}

.bottom-game-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
}

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

/* =====================================================================
   MINIMAL COMMENTS & REVIEWS SECTION
   ===================================================================== */

.comments-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl, 14px);
  padding: 24px;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.comments-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.comments-header-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.comments-heading {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
}

.comments-count {
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
  font-weight: 600;
}

.rating-aggregate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 5px 12px;
  border-radius: 20px;
}

.rating-star {
  color: #F59E0B;
  font-size: 0.95rem;
}

.rating-score {
  font-size: 0.9rem;
  font-weight: 800;
  color: #FFFFFF;
}

.rating-scale {
  font-size: 0.76rem;
  color: var(--color-text-tertiary);
}

/* Minimal Comment Submission Box */
.comment-form-minimal {
  display: flex;
  gap: 14px;
  background: var(--color-bg-tertiary, #0e141c);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
}

.comment-user-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.comment-form-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-textarea:focus {
  border-color: var(--color-accent-secondary);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
}

.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rating-select-chips {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chip-label {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  margin-right: 2px;
}

.star-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.star-chip:hover,
.star-chip.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #F59E0B;
}

.comment-submit-btn {
  background: linear-gradient(135deg, #00d4ff, #0088ff);
  color: #040914;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.comment-submit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Comments Feed */
.comments-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.comment-card:hover {
  background: rgba(255, 255, 255, 0.04);
}

.comment-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.15);
  color: var(--color-accent-secondary);
  border: 1px solid rgba(0, 212, 255, 0.3);
  font-size: 0.78rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.comment-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comment-author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-author {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.comment-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.comment-badge--verified {
  background: rgba(76, 222, 138, 0.15);
  color: #4cde8a;
  border: 1px solid rgba(76, 222, 138, 0.3);
}

.comment-badge--supporter {
  background: rgba(224, 75, 158, 0.15);
  color: #e04b9e;
  border: 1px solid rgba(224, 75, 158, 0.3);
}

.comment-rating {
  color: #F59E0B;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.comment-time {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.comment-text {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.comment-like-btn,
.comment-reply-btn {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.comment-like-btn:hover,
.comment-reply-btn:hover {
  color: var(--color-accent-secondary);
}

/* =====================================================================
   LIVE STYLE SWITCHER BARS
   ===================================================================== */

.style-switcher-bar {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(224, 75, 158, 0.08));
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.switcher-label span {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-accent-secondary);
  letter-spacing: 0.06em;
  margin-right: 6px;
}

.switcher-label strong {
  font-size: 0.85rem;
  color: #FFFFFF;
}

.switcher-label small {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.switcher-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.switcher-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-secondary);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.switcher-tab:hover,
.switcher-tab.active {
  background: var(--color-accent-primary, #00d4ff);
  color: #040914;
  border-color: var(--color-accent-primary, #00d4ff);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}

.sidebar-switcher {
  margin-bottom: 14px;
  padding: 14px;
}

.switcher-tabs-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.switcher-tab-v {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.switcher-tab-v:hover,
.switcher-tab-v.active {
  background: rgba(0, 212, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.4);
  color: var(--color-accent-secondary);
}

/* =====================================================================
   5 DISTINCT SIDEBAR CARD STYLES
   ===================================================================== */

/* STYLE OPTION 1: POSTER COVER ROW (3:4 Vertical Uncropped Cover) */
.card-style-1 {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: var(--color-bg-secondary, #121924);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card-style-1:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.cs1-cover {
  position: relative;
  width: 76px;
  height: 102px;
  flex: 0 0 76px;
  border-radius: 8px;
  overflow: hidden;
  background: #0E141C;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cs1-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.card-style-1:hover .cs1-cover img {
  transform: scale(1.06);
}

.cs1-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

.cs1-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.cs1-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.card-style-1:hover .cs1-title {
  color: var(--color-accent-secondary);
}

.cs1-rating {
  color: #F59E0B;
  font-size: 0.78rem;
  font-weight: 800;
}

.cs1-views {
  color: var(--color-text-tertiary);
  font-weight: 400;
  font-size: 0.72rem;
}

.cs1-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs1-updated {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* STYLE OPTION 2: HERO FULL OVERLAY & CARD-LESS IMAGE HIGHLIGHT */
.sidebar-image-highlight,
.card-style-2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.25s ease;
}

.sidebar-image-highlight:hover,
.card-style-2:hover {
  transform: translateY(-3px);
}

.sih-media,
.cs2-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0E141C;
  overflow: hidden;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.sih-media img,
.cs2-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.sidebar-image-highlight:hover .sih-media img,
.card-style-2:hover .cs2-media img {
  transform: scale(1.05);
}

.sih-rating,
.cs2-rating {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(14, 20, 28, 0.88);
  backdrop-filter: blur(8px);
  color: #F59E0B;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.sih-info,
.cs2-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px;
}

.sih-title,
.cs2-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.sidebar-image-highlight:hover .sih-title,
.card-style-2:hover .cs2-title {
  color: var(--color-accent-secondary, #00d4ff);
}

.sih-meta,
.cs2-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}

.sih-views,
.cs2-views {
  color: var(--color-text-tertiary);
  font-size: 0.72rem;
}


.cs2-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.cs2-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs2-views {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
}

/* STYLE OPTION 3: CYBER GLASS BANNER (Translucent Frosted Bottom Bar) */
.card-style-3 {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.2);
  background: var(--color-bg-secondary);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-style-3:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.25);
}

.cs3-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.cs3-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs3-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.cs3-glass-bar {
  padding: 10px 12px;
  background: rgba(14, 20, 28, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs3-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.cs3-rating {
  color: #F59E0B;
  font-size: 0.76rem;
  font-weight: 800;
}

.cs3-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs3-views {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
}

/* STYLE OPTION 4: MINIMALIST HORIZONTAL STRIP (Square 1:1 Thumb) */
.card-style-4 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.card-style-4:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.cs4-thumb {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border-radius: 8px;
  overflow: hidden;
  background: #0E141C;
}

.cs4-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs4-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cs4-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.cs4-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs4-badge {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

.cs4-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
}

.cs4-ver {
  color: var(--color-accent-secondary);
  font-weight: 700;
}

.cs4-rating {
  color: #F59E0B;
  font-weight: 700;
}

/* STYLE OPTION 5: SPLIT ARCADE CARD (Neon Accent Border Left) */
.card-style-5 {
  display: flex;
  position: relative;
  text-decoration: none;
  background: var(--color-bg-secondary);
  border-radius: 0 10px 10px 0;
  border: 1px solid var(--color-border-primary);
  border-left: none;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.card-style-5:hover {
  transform: translateX(4px);
}

.cs5-accent-line {
  width: 4px;
  background: linear-gradient(180deg, #00d4ff, #e04b9e);
  flex: 0 0 4px;
}

.cs5-inner {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  flex: 1;
  align-items: center;
}

.cs5-thumb {
  position: relative;
  width: 60px;
  height: 70px;
  flex: 0 0 60px;
  border-radius: 6px;
  overflow: hidden;
}

.cs5-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs5-rating {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.85);
  color: #F59E0B;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

.cs5-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.cs5-engine {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
}

.cs5-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs5-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
}

.cs5-views {
  color: var(--color-text-muted);
}

/* =====================================================================
   3 COMMENT SECTION LIVE LAYOUT VARIATIONS
   ===================================================================== */

.comments-section-container {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 14px;
  padding: 22px;
  margin-top: 28px;
}

/* VERSION A: ULTRA-CLEAN MINIMAL THREADED */
.comments-feed-minimal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.comment-row-minimal {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.c-avatar-circle {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.12);
  color: var(--color-accent-secondary);
  border: 1px solid rgba(0, 212, 255, 0.25);
  font-size: 0.78rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.c-content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-username {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.c-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.c-badge--verified {
  background: rgba(76, 222, 138, 0.15);
  color: #4cde8a;
  border: 1px solid rgba(76, 222, 138, 0.3);
}

.c-badge--supporter {
  background: rgba(224, 75, 158, 0.15);
  color: #e04b9e;
  border: 1px solid rgba(224, 75, 158, 0.3);
}

.c-stars {
  color: #F59E0B;
  font-size: 0.75rem;
}

.c-time {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  margin-left: auto;
}

.c-text {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.c-actions-line {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

.c-action-btn {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.c-action-btn:hover {
  color: var(--color-accent-secondary);
}

/* VERSION B: STEAM DARK BUBBLE CARDS */
.comments-feed-bubbles {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.bubble-comment-card {
  background: #141c26;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bubble-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bubble-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.bubble-author {
  display: block;
  font-size: 0.9rem;
  color: #FFFFFF;
}

.bubble-role {
  display: block;
  font-size: 0.72rem;
  color: var(--color-accent-secondary);
}

.bubble-score-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 4px 10px;
  border-radius: 20px;
}

.bubble-score-tag .stars {
  color: #F59E0B;
  font-size: 0.75rem;
}

.bubble-score-tag .score-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: #FFFFFF;
}

.bubble-card-body p {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.bubble-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bubble-time {
  font-size: 0.74rem;
  color: var(--color-text-tertiary);
}

.bubble-like-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

/* VERSION C: COMPACT EDITORIAL REVIEW ROWS */
.comments-feed-editorial {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.editorial-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--color-accent-secondary);
  border-radius: 0 8px 8px 0;
}

.quote-mark {
  font-size: 1.8rem;
  color: var(--color-accent-secondary);
  line-height: 1;
  opacity: 0.6;
}

.editorial-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editorial-quote {
  font-size: 0.88rem;
  color: var(--color-text-primary);
  margin: 0;
  font-style: italic;
}

.editorial-byline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--color-text-tertiary);
}

.ed-author {
  font-weight: 700;
  color: var(--color-text-secondary);
}

.ed-rating {
  color: #F59E0B;
  font-weight: 700;
}

.editorial-upvote {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

/* =====================================================================
   ULTRA-MINIMAL REDDIT-STYLE THREADED COMMENTS (NO CARDS / BORDERLESS)
   ===================================================================== */

.comments-section-reddit {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reddit-comment-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.reddit-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px 12px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}

.reddit-textarea:focus {
  border-color: var(--color-accent-secondary, #00d4ff);
}

.reddit-box-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reddit-submit-btn {
  background: var(--color-accent-secondary, #00d4ff);
  color: #040914;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.reddit-submit-btn:hover {
  opacity: 0.9;
}

/* Reddit Thread Feed */
.reddit-thread-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

.reddit-comment {
  display: flex;
  gap: 12px;
  position: relative;
}

.reddit-reply {
  margin-top: 14px;
  margin-left: 12px;
}

.reddit-line-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
  flex: 0 0 32px;
}

.reddit-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.15);
  color: var(--color-accent-secondary, #00d4ff);
  font-size: 0.72rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 212, 255, 0.3);
  z-index: 2;
}

.reddit-avatar--sm {
  width: 26px;
  height: 26px;
  font-size: 0.65rem;
}

.reddit-thread-line {
  flex: 1;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 6px;
  border-radius: 1px;
}

.reddit-comment:hover>.reddit-line-guide>.reddit-thread-line {
  background: rgba(0, 212, 255, 0.3);
}

.reddit-comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.reddit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reddit-author {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.reddit-author:hover {
  color: var(--color-accent-secondary, #00d4ff);
}

.reddit-stars {
  color: #F59E0B;
  font-size: 0.75rem;
}

.reddit-time {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
}

.reddit-text {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.reddit-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.reddit-vote-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reddit-vote-btn:hover {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--color-accent-secondary, #00d4ff);
}

.reddit-reply-btn {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.reddit-reply-btn:hover {
  color: var(--color-accent-secondary, #00d4ff);
}

/* =====================================================================
   ULTRA-MINIMAL TO-THE-POINT COMMENTS (NO STARS, NO UPVOTES, NO BADGES)
   ===================================================================== */

.comments-section-clean {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clean-comment-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clean-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}

.clean-textarea:focus {
  border-color: var(--color-accent-secondary, #00d4ff);
}

.clean-box-footer {
  display: flex;
  justify-content: flex-end;
}

.clean-submit-btn {
  background: var(--color-accent-secondary, #00d4ff);
  color: #040914;
  border: none;
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.clean-submit-btn:hover {
  opacity: 0.9;
}

.clean-thread-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 6px;
}

.clean-comment {
  display: flex;
  gap: 12px;
}

.clean-reply {
  margin-top: 12px;
}

.clean-line-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
  flex: 0 0 32px;
}

.clean-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.12);
  color: var(--color-accent-secondary, #00d4ff);
  font-size: 0.74rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 212, 255, 0.25);
  z-index: 2;
}

.clean-avatar--sm {
  width: 26px;
  height: 26px;
  font-size: 0.65rem;
}

.clean-thread-line {
  flex: 1;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 6px;
  border-radius: 1px;
}

.clean-comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.clean-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clean-author {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.clean-time {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
}

.clean-text {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.clean-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.clean-reply-btn {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.clean-reply-btn:hover {
  color: var(--color-accent-secondary, #00d4ff);
}

/* =====================================================================
   2-COLUMN SIDEBAR GRID LAYOUT (OPTION B ENGINE OVERLAY + CLEAN SPACING)
   ===================================================================== */

.discovery-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 10px;
  margin-top: 14px;
}

.wide-2col-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  min-width: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wide-2col-card:hover {
  transform: translateY(-4px);
}

.w2c-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #0E141C;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.w2c-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.wide-2col-card:hover .w2c-thumb img {
  transform: scale(1.08);
}

.w2c-thumb .p2c-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.w2c-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 4px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.wide-2col-card:hover .w2c-title {
  color: var(--color-accent-secondary, #00d4ff);
}

.w2c-meta {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}


/* V3: 2-COLUMN COMPACT STRIPS */
.strip-2col-card {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease;
}

.strip-2col-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.s2c-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 6px;
  overflow: hidden;
  background: #0E141C;
}

.s2c-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s2c-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.s2c-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2c-meta {
  font-size: 0.68rem;
  color: var(--color-accent-secondary, #00d4ff);
  font-weight: 700;
}

.bottom-exploration-section {
  margin-top: 36px;
  padding-top: 0;
  border-top: none !important;
}

/* Card Style Switcher Tabs */
.card-demo-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-tab-btn {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary, #8A99AD);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-tab-btn.active,
.card-tab-btn:hover {
  background: rgba(0, 212, 255, 0.15);
  color: var(--color-accent-secondary, #00d4ff);
}

/* Dedicated Engine Overlay Badge */
.card-engine-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(6, 12, 20, 0.85);
  color: var(--color-accent-secondary, #00d4ff);
  border: 1px solid rgba(0, 212, 255, 0.35);
  backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Dedicated Version Overlay Badge (Option 2 Permanent) */
.card-version-overlay {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 212, 255, 0.22);
  color: #FFFFFF;
  border: 1px solid rgba(0, 212, 255, 0.45);
  backdrop-filter: blur(6px);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.64rem;
  font-weight: 800;
  z-index: 2;
  display: inline-block;
}

/* Bottom Exploration Grid */
.bottom-games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 14px;
  margin-top: 14px;
}

@media (max-width: 992px) {
  .bottom-games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.bottom-game-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.bottom-game-card:hover {
  transform: translateY(-4px);
}

.bottom-game-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0E141C;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.bottom-game-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.bottom-game-card:hover .bottom-game-card__thumb img {
  transform: scale(1.08);
}

.bottom-game-card__title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 2px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.bottom-game-card:hover .bottom-game-card__title {
  color: var(--color-accent-secondary, #00d4ff);
}

/* =====================================================================
   CLEAN FLOATING CARD META & GLASS CORNER BADGE (PERMANENT)
   ===================================================================== */
.engine-badge-corner {
  display: block;
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(10, 16, 26, 0.82);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #00d4ff;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bottom-game-card__meta,
.w2c-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.73rem;
  color: var(--color-text-tertiary, #8A99AD);
  margin-top: 2px;
}

.bottom-game-card__meta .ver-tag,
.w2c-meta .ver-tag {
  color: #00d4ff;
  font-weight: 700;
}

.meta-slash {
  display: none !important;
}

/* =====================================================================
   ULTRA-MINIMAL COMMENTS SECTION (COMPACT SPACING)
   ===================================================================== */

.comments-section-clean {
  margin-top: 16px;
  padding-top: 0px;
}

.comments-section-header {
  margin-bottom: 4px;
}

.comments-heading {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comments-count {
  font-size: 0.84rem;
  color: var(--color-text-tertiary);
  font-weight: 600;
}

/* Minimal Comment Form */
.clean-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.clean-author-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .clean-author-fields {
    grid-template-columns: 1fr;
  }
}

.clean-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 7px 10px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.83rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.clean-input:focus {
  border-color: var(--color-accent-secondary, #00d4ff);
}

/* Breadcrumb Navigation */
.catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-tertiary, #8A99AD);
  margin-top: 0px;
  margin-bottom: 12px !important;
}

.catalog-breadcrumbs a {
  color: #8A99AD;
  text-decoration: none;
  transition: color 0.2s ease;
}

.catalog-breadcrumbs a:hover {
  color: #00d4ff;
}

.catalog-breadcrumbs .sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
}

.catalog-breadcrumbs .current {
  color: #FFFFFF;
  font-weight: 700;
}

.clean-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 52px;
  outline: none;
  transition: border-color 0.2s ease;
}

.clean-textarea:focus {
  border-color: var(--color-accent-secondary, #00d4ff);
}

.clean-box-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0px;
}

.clean-submit-btn {
  background: var(--color-accent-secondary, #00d4ff);
  color: #040914;
  border: none;
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.clean-submit-btn:hover {
  opacity: 0.9;
}

/* Threaded Comments List */
.clean-thread-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clean-comment {
  display: flex;
  gap: 10px;
}

.clean-reply {
  margin-top: 8px;
}

.clean-line-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 28px;
  flex: 0 0 28px;
}

.clean-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.12);
  color: var(--color-accent-secondary, #00d4ff);
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 212, 255, 0.25);
  z-index: 2;
}

.clean-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 0.62rem;
}

.clean-thread-line {
  flex: 1;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  border-radius: 1px;
}

.clean-comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.clean-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.clean-author {
  font-size: 0.85rem;
  font-weight: 800;
  color: #FFFFFF;
}

.clean-time {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
}

.clean-text {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 0;
}

.clean-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1px;
}

.clean-reply-btn {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: 0.73rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.clean-reply-btn:hover {
  color: var(--color-accent-secondary, #00d4ff);
}

/* Inline Reply Form */
.reply-form-inline {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 8px;
  animation: fadeIn 0.2s ease-in-out;
}

.reply-author-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.reply-textarea-inline {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 8px 10px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.84rem;
  resize: vertical;
  outline: none;
}

.reply-textarea-inline:focus {
  border-color: var(--color-accent-secondary, #00d4ff);
}

.reply-actions-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.reply-cancel-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-text-tertiary);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.reply-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.reply-submit-btn-inline {
  background: var(--color-accent-secondary, #00d4ff);
  color: #040914;
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.reply-submit-btn-inline:hover {
  opacity: 0.9;
}

/* Markdown Elements in Comments */
.comment-quote {
  margin: 8px 0;
  padding: 8px 14px;
  background: rgba(0, 212, 255, 0.05);
  border-left: 3px solid var(--color-accent-secondary, #00d4ff);
  color: #E2E8F0;
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

.comment-code {
  background: rgba(0, 212, 255, 0.1);
  color: #00d4ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.84rem;
}

/* =====================================================================
   INLINE MINIMAL COMMENT RULES & NATURAL COMMENTS CONTAINER
   ===================================================================== */
.comments-section-clean {
  width: 100%;
  max-width: 100%;
}

.comment-rules-inline {
  margin-top: 2px;
  margin-bottom: 6px;
}

.comment-rules-title {
  font-size: 0.83rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 3px 0;
  letter-spacing: 0.2px;
}

.comment-rules-ol {
  margin: 0;
  padding-left: 18px;
  font-size: 0.77rem;
  color: #8A99AD;
  line-height: 1.5;
}

.comment-rules-ol li {
  margin-bottom: 2px;
}

.comment-rules-ol li:last-child {
  margin-bottom: 0;
}

/* =====================================================================
   5 PRO DESIGN OPTIONS FOR DOWNLOAD ZONE (NUTAKU / F95 INSPIRED)
   ===================================================================== */

/* Top Option Selector Bar */
.dl-options-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: rgba(13, 17, 23, 0.65);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dl-opt-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9EABB6;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dl-opt-tab:hover {
  background: rgba(229, 49, 85, 0.15);
  color: #FFFFFF;
  border-color: rgba(229, 49, 85, 0.4);
}

.dl-opt-tab.active {
  background: linear-gradient(135deg, #E53155 0%, #C21839 100%);
  color: #FFFFFF;
  border-color: #E53155;
  box-shadow: 0 4px 12px rgba(229, 49, 85, 0.35);
}

/* Common Help Notice */
.dl-help-notice {
  font-size: 0.9rem;
  color: #9EABB6;
  margin-bottom: 18px;
}

.dl-help-notice a {
  color: #E5A93C;
  font-weight: 700;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.dl-help-notice a:hover {
  opacity: 0.85;
}


/* ---------------------------------------------------------------------
   OPTION 1: SCREENSHOT PILL GRID (EXACT MATCH TO YOUR IMAGE)
   --------------------------------------------------------------------- */
.dl-main-tabs-row {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

.dl-main-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: #7E8B9B;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dl-main-tab:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.03);
}

.dl-main-tab.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid #00B4D8;
}

.dl-sub-tabs-row {
  display: flex;
  gap: 22px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
  padding-bottom: 8px;
}

.dl-sub-tab {
  background: transparent;
  border: none;
  color: #7E8B9B;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0 0 6px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.dl-sub-tab:hover {
  color: #FFFFFF;
}

.dl-sub-tab.active {
  color: #FFFFFF;
  border-bottom: 2px solid #00B4D8;
}

.dl-pill-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

@media (max-width: 768px) {
  .dl-pill-grid-2col {
    grid-template-columns: 1fr;
  }
}

.dl-pill-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0E141D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  position: relative;
  transition: all 0.2s ease;
  min-width: 0;
}

.dl-pill-card:hover {
  border-color: rgba(0, 180, 216, 0.4);
  background: #131C29;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.dl-pill-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.dl-pill-icon--cyan {
  color: #00D4FF;
}

.dl-pill-icon--green {
  color: #00E676;
}

.dl-pill-icon--gold {
  color: #FFC107;
}

.dl-pill-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #E2E8F0;
}

.dl-pill-card:hover .dl-pill-text {
  color: #FFFFFF;
}

.dl-pill-badge {
  font-size: 0.72rem;
  color: #00B4D8;
  flex-shrink: 0;
  background: rgba(0, 180, 216, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}


/* ---------------------------------------------------------------------
   OPTION 2: NUTAKU-STYLE HERO ACTION HUB
   --------------------------------------------------------------------- */
.nutaku-hero-card {
  background: linear-gradient(135deg, rgba(229, 49, 85, 0.08) 0%, rgba(13, 17, 23, 0.95) 100%);
  border: 1px solid rgba(229, 49, 85, 0.3);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.nutaku-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.nutaku-hero-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nutaku-badge-hot {
  background: #E53155;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nutaku-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.nutaku-cta-btn {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  transition: all 0.25 ease;
}

.nutaku-cta-btn:hover {
  background: rgba(229, 49, 85, 0.12);
  border-color: #E53155;
  transform: translateY(-2px);
}

.nutaku-cta-main {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.nutaku-cta-sub {
  font-size: 0.78rem;
  color: #9EABB6;
}

.nutaku-mirror-pills {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.nutaku-pill-link {
  background: rgba(255, 255, 255, 0.06);
  color: #00D4FF;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.nutaku-pill-link:hover {
  background: rgba(0, 212, 255, 0.2);
}


/* ---------------------------------------------------------------------
   OPTION 3: TABBED PLATFORM SUITE
   --------------------------------------------------------------------- */
.suite-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.suite-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9EABB6;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.suite-tab-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.suite-tab-btn.active {
  background: #00B4D8;
  color: #0D1117;
  border-color: #00B4D8;
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
}

.suite-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0E141D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  gap: 12px;
}

.suite-row-info {
  display: flex;
  flex-direction: column;
}

.suite-row-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
}

.suite-row-meta {
  font-size: 0.78rem;
  color: #9EABB6;
}

.suite-dl-btn {
  background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease;
  white-space: nowrap;
}

.suite-dl-btn:hover {
  transform: translateY(-1px);
}


/* ---------------------------------------------------------------------
   OPTION 4: SPLIT DUAL CARDS (OFFICIAL VS COMMUNITY)
   --------------------------------------------------------------------- */
.split-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.split-card-box {
  background: rgba(14, 20, 29, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
}

.split-card-box--official {
  border-top: 3px solid #00E676;
}

.split-card-box--community {
  border-top: 3px solid #00B4D8;
}

.split-card-head {
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ---------------------------------------------------------------------
   OPTION 5: MINIMAL TAG MATRIX
   --------------------------------------------------------------------- */
.matrix-group-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #9EABB6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.matrix-tags-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.matrix-tag-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0E141D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.matrix-tag-pill:hover {
  border-color: #00D4FF;
  background: rgba(0, 212, 255, 0.1);
}

/* Nutaku Minimal Styling Additions */
.nutaku-minimal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nutaku-minimal-row:hover {
  background: rgba(229, 49, 85, 0.06);
  border-color: rgba(229, 49, 85, 0.3);
}

.nutaku-btn-primary {
  background: #E53155;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nutaku-btn-primary:hover {
  background: #FF3B62;
  box-shadow: 0 4px 12px rgba(229, 49, 85, 0.35);
}

.nutaku-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #9EABB6;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nutaku-btn-secondary:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}


/* =====================================================================
   5 NEW DOWNLOAD SECTION VARIANTS (REAL-WORLD GAME SITE STYLES)
   ===================================================================== */

.dl-options-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #182028;
  border: 1px solid #3B4A5A;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 24px;
}

.dl-selector-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: #E04B9E;
  margin-right: 4px;
  white-space: nowrap;
}

.dl-opt-tab {
  background: #242F3A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #B8C5D6;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dl-opt-tab:hover {
  color: #FFFFFF;
  border-color: #00D4FF;
}

.dl-opt-tab.active {
  background: #E04B9E;
  border-color: #E04B9E;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(224, 75, 158, 0.35);
}

.dl-variant-block {
  animation: fadeInDl 0.3s ease-in-out;
}

@keyframes fadeInDl {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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


/* --- VARIANT 1: OS BRAND COLORED PILLS --- */
.dl-support-dev-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.dl-support-label {
  color: #B8C5D6;
}

.dl-support-sep {
  color: #4A5A6A;
}

.dl-support-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #E04B9E;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
}

.dl-support-link:hover {
  color: #00D4FF;
}

.dl-os-group {
  margin-bottom: 24px;
}

.dl-os-heading {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
  text-transform: uppercase;
}

.dl-os-heading--purple {
  color: #A855F7;
}

.dl-os-heading--grey {
  color: #9CA3AF;
}

.dl-os-heading--green {
  color: #22C55E;
}

.dl-os-pills-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dl-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 30px;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dl-brand-pill:hover {
  transform: translateY(-2px);
}

.dl-brand-pill--purple {
  background: #8B5CF6;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}

.dl-brand-pill--purple:hover {
  background: #7C3AED;
}

.dl-brand-pill--grey {
  background: #6B7280;
  box-shadow: 0 4px 14px rgba(107, 114, 128, 0.35);
}

.dl-brand-pill--grey:hover {
  background: #4B5563;
}

.dl-brand-pill--green {
  background: #16A34A;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.dl-brand-pill--green:hover {
  background: #15803D;
}

.dl-guide-callout-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 14px 20px;
  margin-top: 16px;
}

.dl-guide-link {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  text-decoration: none;
}

.dl-guide-link:hover {
  color: #00D4FF;
}


/* --- VARIANT 2: MINIMAL INLINE LINKS & STARS --- */
.dl-minimal-container {
  background: #0E141D;
  border: 1px solid #2A3847;
  border-radius: 12px;
  padding: 28px;
  text-align: center;
}

.dl-minimal-group {
  margin-bottom: 24px;
}

.dl-minimal-header {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #8A99AC;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.dl-minimal-line {
  font-size: 0.92rem;
  color: #FFFFFF;
  margin: 4px 0;
}

.dl-minimal-line strong {
  color: #B8C5D6;
}

.dl-minimal-line a {
  color: #00D4FF;
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dl-minimal-line a:hover {
  color: #E04B9E;
  text-decoration: underline;
}

.dl-star-rating-box {
  border-top: 1px solid #2A3847;
  padding-top: 24px;
  margin-top: 24px;
}

.dl-star-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 4px 0;
}

.dl-star-sub {
  font-size: 0.82rem;
  color: #8A99AC;
  margin: 0 0 12px 0;
}

.dl-stars-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 1.8rem;
  color: #FACC15;
  cursor: pointer;
  margin-bottom: 8px;
}

.star-icon:hover {
  transform: scale(1.15);
  transition: transform 0.2s ease;
}

.dl-star-score {
  font-size: 0.85rem;
  color: #B8C5D6;
  margin: 0;
}


/* --- VARIANT 3: DARK CARD BOX WITH HOST GRID --- */
.dl-card-container {
  background: #111720;
  border: 1px solid #2A3847;
  border-radius: 14px;
  padding: 24px;
}

.dl-card-main-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 16px 0;
}

.dl-card-sub-box {
  background: #1A232E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.dl-card-game-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #C084FC;
  margin-bottom: 20px;
}

.dl-card-platform-section {
  margin-bottom: 18px;
}

.dl-card-platform-section:last-child {
  margin-bottom: 0;
}

.dl-card-os-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 10px;
}

.dl-card-buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.dl-card-host-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #242F3A;
  border: 1px solid rgba(192, 132, 252, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  color: #C084FC;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dl-card-host-btn:hover {
  background: rgba(192, 132, 252, 0.15);
  border-color: #C084FC;
  color: #FFFFFF;
  transform: translateY(-2px);
}


/* --- VARIANT 4: TABBED FILE TABLE WITH METADATA --- */
.dl-table-wrapper {
  background: #111720;
  border: 1px solid #2A3847;
  border-radius: 12px;
  padding: 20px;
}

.dl-table-tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #2A3847;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.dl-table-tab {
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 800;
  color: #8A99AC;
  cursor: pointer;
  padding: 4px 8px;
  position: relative;
  transition: color 0.2s ease;
}

.dl-table-tab:hover {
  color: #FFFFFF;
}

.dl-table-tab.active {
  color: #E04B9E;
}

.dl-table-tab.active::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 0;
  right: 0;
  height: 2px;
  background: #E04B9E;
}

.dl-file-table-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dl-file-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1A232E;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.dl-file-table-row:hover {
  background: #242F3A;
  border-color: #E04B9E;
}

.dl-file-col-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dl-file-os-icon {
  font-size: 1.1rem;
}

.dl-file-details {
  display: flex;
  flex-direction: column;
}

.dl-file-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF;
}

.dl-file-domain {
  font-size: 0.76rem;
  color: #8A99AC;
}

.dl-file-col-meta {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: #B8C5D6;
  font-weight: 600;
}

.dl-file-action-btn {
  background: rgba(224, 75, 158, 0.15);
  border: 1px solid #E04B9E;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dl-file-action-btn:hover {
  background: #E04B9E;
  box-shadow: 0 4px 12px rgba(224, 75, 158, 0.35);
}

.dl-table-notice {
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.82rem;
  color: #00D4FF;
  margin-top: 16px;
}


/* --- VARIANT 5: ACCORDION COLLAPSIBLE PLATFORM BARS --- */
.dl-accordion-main-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 16px 0;
}

.dl-accordion-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dl-accordion-item {
  background: #182028;
  border: 1px solid #2A3847;
  border-radius: 8px;
  overflow: hidden;
}

.dl-accordion-head {
  width: 100%;
  text-align: left;
  background: #242F3A;
  border: none;
  padding: 14px 18px;
  color: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease;
}

.dl-accordion-head:hover {
  background: #2A3847;
}

.dl-accordion-arrow {
  font-size: 0.8rem;
  color: #8A99AC;
}

.dl-accordion-body {
  padding: 16px 18px;
  border-top: 1px solid #2A3847;
}

.dl-cloud-btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dl-cloud-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.dl-cloud-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.dl-cloud-btn--green {
  background: #10B981;
}

.dl-cloud-btn--cyan {
  background: #00B4D8;
}

.dl-cloud-btn--blue {
  background: #1D4ED8;
}

.dl-cloud-btn--gold {
  background: #D97706;
}


/* --- PILL VARIANT 2: GLASS CARDS & BADGES --- */
.dl-glass-pill-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dl-glass-support-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #182028;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
}

.support-badge-label {
  color: #B8C5D6;
  font-weight: 800;
}

.glass-dev-btn {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #FFFFFF;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.glass-dev-btn--patreon {
  background: #FF424D;
}

.glass-dev-btn--itch {
  background: #FA5C5C;
}

.glass-dev-btn:hover {
  filter: brightness(1.2);
}

.dl-glass-os-card {
  background: #111720;
  border: 1px solid #2A3847;
  border-radius: 10px;
  padding: 16px;
}

.glass-os-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 900;
  margin-bottom: 12px;
}

.glass-os-header--purple {
  color: #C084FC;
}

.glass-os-header--grey {
  color: #9CA3AF;
}

.glass-os-header--green {
  color: #4ADE80;
}

.glass-os-size {
  margin-left: auto;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  color: #B8C5D6;
}

.glass-pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dl-glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1A232E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 8px 18px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dl-glass-pill:hover {
  transform: translateY(-2px);
  background: #242F3A;
}

.dl-glass-pill--purple:hover {
  border-color: #A855F7;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
}

.dl-glass-pill--grey:hover {
  border-color: #00D4FF;
  box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}

.dl-glass-pill--green:hover {
  border-color: #22C55E;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
}

.pill-host-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF;
}

.pill-badge {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: #00D4FF;
  padding: 2px 8px;
  border-radius: 10px;
}


/* --- PILL VARIANT 3: DUAL-TONE GRADIENT GLOW PILLS --- */
.dl-gradient-pill-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dl-grad-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 30px;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dl-grad-pill:hover {
  transform: translateY(-3px) scale(1.02);
}

.dl-grad-pill--purple {
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}

.dl-grad-pill--purple:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.6);
}

.dl-grad-pill--cyan {
  background: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.4);
}

.dl-grad-pill--cyan:hover {
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.6);
}

.dl-grad-pill--green {
  background: linear-gradient(135deg, #16A34A 0%, #10B981 100%);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.4);
}

.dl-grad-pill--green:hover {
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.6);
}

.grad-pill-icon {
  font-size: 1rem;
}

.grad-pill-text {
  font-size: 0.9rem;
  font-weight: 800;
}

.grad-pill-arrow {
  font-size: 0.8rem;
  opacity: 0.8;
}


/* =========================================================
   GAME INFO SECTION VARIANTS & STYLES
   ========================================================= */

/* Selector Bar */
.info-style-selector-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #111720;
  border: 1px solid #2A3847;
  border-radius: 8px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.info-selector-label {
  font-size: 0.82rem;
  font-weight: 900;
  color: #00D4FF;
  letter-spacing: 0.5px;
}

.info-opt-tab {
  background: #1A232E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #B8C5D6;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.info-opt-tab:hover {
  background: #242F3A;
  color: #FFFFFF;
}

.info-opt-tab.active {
  background: #9333EA;
  color: #FFFFFF;
  border-color: #A855F7;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
}


/* --- VARIANT 1: TABBED SUITE (STRICT UNIFIED THEME DESIGN TOKENS) --- */
.dik-tabbed-container {
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border-primary) !important;
  border-radius: 6px;
  overflow: hidden;
}

.dik-tabs-header {
  display: flex;
  background: var(--color-bg-tertiary) !important;
  border-bottom: 1px solid var(--color-border-primary) !important;
}

.dik-tab-btn {
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-text-tertiary);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dik-tab-btn:hover {
  color: var(--color-text-primary);
}

.dik-tab-btn.active {
  color: var(--color-accent-secondary);
  border-bottom-color: var(--color-accent-secondary);
  background: var(--color-bg-secondary) !important;
}

.dik-tab-body {
  padding: 16px;
  background: var(--color-bg-secondary) !important;
}




.dik-intro-text {
  color: #E2E8F0;
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0 0 8px 0;
}

.dik-sub-heading {
  color: #00D4FF;
  font-size: 0.95rem;
  font-weight: 800;
  margin: 16px 0 10px 0;
}

.dik-bullet-list {
  margin: 0;
  padding-left: 20px;
  color: #CBD5E1;
  font-size: 0.9rem;
  line-height: 1.7;
}

.dik-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dik-info-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 0.9rem;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dik-info-row:last-child {
  border-bottom: none;
}

.dik-info-label {
  font-weight: 800;
  color: #8A99AC;
  min-width: 110px;
}

.dik-info-val {
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1.5;
}

.dik-info-val.highlight-green {
  color: #4ADE80;
}

.dik-dev-link {
  color: #00D4FF;
  font-weight: 800;
  text-decoration: none;
}

.dik-dev-link:hover {
  text-decoration: underline;
}

.dik-genre-links a {
  color: #00D4FF;
  font-weight: 700;
  text-decoration: none;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 3px 10px;
  border-radius: 12px;
  display: inline-block;
  margin: 2px 2px;
  transition: all 0.2s ease;
}

.dik-genre-links a:hover {
  background: #00D4FF;
  color: #0B0F14;
}

.dik-ver-title {
  color: #00D4FF;
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 8px 0;
}



/* --- VARIANT 2: DARK CARD SPEC GRID (INSPIRED BY SCREENSHOT 1) --- */
.dark-grid-container {
  background: #131A24;
  border: 1px solid #232E3C;
  border-radius: 12px;
  padding: 24px;
}

.dark-grid-game-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 10px 0;
}

.dark-stars-rating-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.stars-gold {
  color: #F59E0B;
  font-size: 1.05rem;
}

.stars-score-text {
  color: #8A99AC;
}

.dark-dev-spotlight-box {
  background: #1C2634;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.dev-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #FFFFFF;
}

.dev-title a {
  color: #00D4FF;
  text-decoration: none;
}

.dev-subtext {
  font-size: 0.82rem;
  color: #94A3B8;
  font-style: italic;
  margin: 4px 0 0 0;
}

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

@media (max-width: 640px) {
  .dark-spec-pills-grid {
    grid-template-columns: 1fr;
  }
}

.dark-spec-pill {
  background: #18212D;
  border: 1px solid #263345;
  border-radius: 8px;
  padding: 12px 18px;
  color: #E2E8F0;
  font-size: 0.86rem;
  font-weight: 700;
}


/* --- VARIANT 3: MINIMALIST SPLIT LIST (INSPIRED BY SCREENSHOT 2) --- */
.minimal-split-container {
  display: grid;
  grid-template-columns: 40% 58%;
  gap: 2%;
  background: #111720;
  border: 1px solid #2A3847;
  border-radius: 12px;
  padding: 24px;
}

@media (max-width: 768px) {
  .minimal-split-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.minimal-spec-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid #2A3847;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .minimal-spec-col {
    border-right: none;
    border-bottom: 1px solid #2A3847;
    padding-right: 0;
    padding-bottom: 20px;
  }
}

.min-spec-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.min-spec-key {
  font-size: 0.72rem;
  font-weight: 900;
  color: #64748B;
  letter-spacing: 0.8px;
}

.min-spec-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFFFFF;
}

.minimal-story-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.min-story-heading {
  font-size: 1.05rem;
  font-weight: 900;
  color: #00D4FF;
  margin: 0 0 10px 0;
}

.min-story-text {
  font-size: 0.88rem;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.min-patch-tag {
  background: rgba(147, 51, 234, 0.15);
  border: 1px solid rgba(147, 51, 234, 0.4);
  padding: 8px 14px;
  border-radius: 6px;
  color: #D8B4FE;
  font-size: 0.82rem;
  font-weight: 700;
}


/* --- VARIANT 4: STACKED ACCORDION PANELS --- */
.accordion-info-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-acc-item {
  background: #111720;
  border: 1px solid #2A3847;
  border-radius: 8px;
  overflow: hidden;
}

.info-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #161E28;
  border: none;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.info-acc-arrow {
  color: #00D4FF;
  font-size: 0.8rem;
}

.info-acc-body {
  padding: 20px;
  border-top: 1px solid #2A3847;
}

/* Telegram Support Link Styling */
.dl-support-telegram {
  color: #0088CC !important;
}

.dl-support-telegram:hover {
  color: #38BDF8 !important;
  text-decoration: underline;
}

/* Unified Spec Card Container (Wraps Developer Box + 6 Pills + Tech Specs Bar inside ONE Card) */
.tech-specs-card-container {
  background: var(--color-bg-secondary, #242F3A);
  border: 1px solid var(--color-border-primary, #3B4A5A);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.dev-support-card {
  background: #151D26;
  border: 1px solid var(--color-border-primary, #3B4A5A);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.dev-card-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #FFFFFF;
}

.dev-card-title a {
  color: #00D4FF;
  text-decoration: none;
}

.dev-card-title a:hover {
  text-decoration: underline;
}

.dev-card-subtitle {
  margin: 6px 0 0 0;
  font-style: italic;
  font-size: 0.88rem;
  color: #8A99AC;
  line-height: 1.4;
}

.spec-pills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .spec-pills-grid {
    grid-template-columns: 1fr;
  }
}

.spec-pill-chip {
  background: #151D26;
  border: 1px solid var(--color-border-primary, #3B4A5A);
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.spec-pill-label {
  color: #94A3B8;
  font-weight: 600;
}

.spec-pill-val {
  color: #FFFFFF;
  font-weight: 800;
}

.spec-card-divider {
  border-top: 1px solid var(--color-border-primary, #3B4A5A);
  margin: 20px 0;
}

/* Cardless / Flat Styling for Recently Updated Games (.updated-card) */
.updated-card,
.updated-card__link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.updated-card:hover,
.updated-card__link:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.updated-card__thumb {
  border-radius: 6px !important;
  overflow: hidden !important;
}

.updated-card__img {
  transition: transform 0.3s ease !important;
}

.updated-card:hover .updated-card__img {
  transform: scale(1.04) !important;
}

.updated-card__title {
  transition: color 0.2s ease !important;
}

.updated-card:hover .updated-card__title {
  color: var(--color-accent-secondary, #00D4FF) !important;
}

/* Enhanced Grid & Slider Spacing */
.recently-updated-grid {
  gap: 34px 30px !important;
  /* 34px vertical gap, 30px horizontal gap */
}

.games-slider {
  gap: 30px !important;
}


/* Fix Notification Badge & Meta Bar Text Clipping */
.updated-card__top-meta,
.updated-card__main,
.updated-card__bottom-meta {
  overflow: visible !important;
}

.updated-card__top-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 4px 2px 4px !important;
  font-size: 0.75rem !important;
  color: var(--color-text-tertiary, #8A99AC) !important;
}

.updated-card__main {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
}

.updated-card__main .engine-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  height: 20px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.updated-card__title {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 0.90rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.updated-card__version {
  display: inline !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  color: var(--color-text-tertiary, #8A99AC) !important;
  margin-left: 4px !important;
}

.updated-card__bottom-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 4px !important;
  padding: 0 4px 2px 4px !important;
  font-size: 0.78rem !important;
  min-width: 0 !important;
  gap: 8px !important;
}

.updated-card__author {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 !important;
  color: var(--color-text-secondary, #B8C5D6) !important;
  font-weight: 600 !important;
}

.updated-card__platforms {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  color: var(--color-text-muted, #8A99AC) !important;
}

.updated-card__platforms svg {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}

/* Cardless Categories Directory Styling */
.category-artwork-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
}

.category-artwork-card:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

.category-artwork-card__thumb {
  border-radius: 6px !important;
  overflow: hidden !important;
}

.category-artwork-card:hover .category-artwork-card__title {
  color: var(--color-accent-secondary, #00D4FF) !important;
}

/* Cardless Categories Grid (5 & 6 Columns Layout) */
.category-artwork-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px 24px !important;
}

@media (min-width: 1400px) {
  .category-artwork-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Responsive Mobile Grid Rules (2-3 items per row on mobile/tablets) */
@media (max-width: 1200px) {
  .category-artwork-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px 20px !important;
  }
}

@media (max-width: 900px) {
  .category-artwork-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
  }
}

@media (max-width: 600px) {
  .category-artwork-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }

  .category-artwork-card {
    gap: 10px !important;
  }

  .category-artwork-card__thumb {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .category-artwork-card__title {
    font-size: 0.88rem !important;
  }

  .category-artwork-card__count {
    font-size: 0.72rem !important;
  }
}

/* =========================================================
   RESPONSIVE CONTACT US PAGE (MOBILE & TABLET)
   ========================================================= */
@media (max-width: 768px) {
  .contact-canvas-wrapper {
    max-width: 100% !important;
  }

  .contact-canvas-hero {
    margin-bottom: 20px !important;
  }

  .contact-canvas-hero__title {
    font-size: 1.75rem !important;
  }

  .contact-canvas-hero__desc {
    font-size: 0.90rem !important;
    line-height: 1.55 !important;
  }

  .contact-canvas-form {
    gap: 16px !important;
    max-width: 100% !important;
  }

  .contact-field-input,
  .contact-field-select,
  .contact-field-textarea {
    font-size: 0.92rem !important;
    padding: 13px 14px !important;
    border-radius: 6px !important;
  }

  .contact-field-textarea {
    min-height: 140px !important;
  }

  .contact-pill-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 24px !important;
    font-size: 0.92rem !important;
    border-radius: 6px !important;
  }
}

/* =========================================================
   COMPACT & RESPONSIVE BLOG CARDS (MOBILE & TABLET)
   ========================================================= */
.blog-card__title {
  font-size: 0.90rem !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.blog-card__excerpt {
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: var(--color-text-muted, #8A99AC) !important;
}

.blog-card__body {
  padding-top: 8px !important;
}

/* Responsive Grid Breakpoints for Blog Page */
@media (max-width: 1024px) {
  .blog-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 14px !important;
  }
}

@media (max-width: 768px) {
  .blog-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 12px !important;
  }

  .blog-filter-bar .filter-group--pills {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 6px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch;
  }

  .blog-filter-bar .filter-pill {
    flex-shrink: 0 !important;
    font-size: 0.78rem !important;
    padding: 6px 14px !important;
  }
}

@media (max-width: 480px) {
  .blog-card__title {
    font-size: 0.85rem !important;
  }

  .blog-card__excerpt {
    display: none !important;
    /* Hide excerpt on small mobile screens for compact list height */
  }
}

/* =========================================================
   RESPONSIVE GAMES FINDER DIRECTORY (page-games.php)
   ========================================================= */
.item-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.item-title-row h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}

.item-title-row h3 a {
  color: var(--color-text-primary, #FFFFFF);
  text-decoration: none;
  transition: color 0.15s ease;
}

.item-title-row h3 a:hover {
  color: var(--color-accent-secondary, #00D4FF);
}

.version-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted, #8A99AC);
}

.developer-tag {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted, #8A99AC);
}

.developer-tag a {
  color: var(--color-text-secondary, #B8C5D6);
  text-decoration: none;
  font-weight: 700;
}

.developer-tag a:hover {
  color: var(--color-accent-secondary, #00D4FF);
}

/* Hide scrollbars globally on tag strips */
.item-tags-strip::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.item-tags-strip {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* =========================================================
   GAMES FINDER DIRECTORY MASTER LAYOUT (page-games.php)
   ========================================================= */
.games-master-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.finder-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--color-bg-secondary, #242F3A);
  border: 1px solid var(--color-border-primary, #3B4A5A);
  border-radius: 6px;
  padding: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.finder-results-col {
  flex: 1;
  min-width: 0;
}

.filter-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.page-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .games-master-layout {
    flex-direction: column !important;
    gap: 36px !important;
    /* Generous vertical gap between filter box and catalog heading */
  }

  .finder-sidebar {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
  }

  .finder-sidebar form {
    gap: 10px !important;
  }

  .finder-sidebar .filter-group label {
    margin-bottom: 4px !important;
    font-size: 0.78rem !important;
  }

  .finder-sidebar input,
  .finder-sidebar select {
    padding: 8px 26px 8px 10px !important;
    font-size: 0.82rem !important;
  }

  .finder-results-col {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  .filter-row-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .page-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

.finder-sidebar .filter-group {
  min-width: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.finder-sidebar input,
.finder-sidebar select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background-color: #1D2731 !important;
  color: #FFFFFF !important;
  border: 1px solid #3B4A5A !important;
  border-radius: 6px !important;
}

.finder-sidebar select {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: #1D2731 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300D4FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center / 11px !important;
  padding: 9px 24px 9px 10px !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.finder-sidebar select option {
  background-color: #1D2731 !important;
  color: #FFFFFF !important;
  padding: 8px !important;
}

/* =========================================================
   APPLY BUTTON & RESULTS UPDATE ANIMATIONS
   ========================================================= */
@keyframes filterListUpdate {
  0% {
    opacity: 0.3;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes badgePulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
    color: #00D4FF;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
  }

  100% {
    transform: scale(1);
  }
}

.seamless-games-updating {
  animation: filterListUpdate 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.count-badge-pulse {
  display: inline-block;
  animation: badgePulse 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes buttonPressBounce {
  0% {
    transform: translateY(0) scale(1);
  }

  35% {
    transform: translateY(3px) scale(0.93);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.5) !important;
    border-color: var(--color-accent-secondary, #00D4FF) !important;
    color: var(--color-accent-secondary, #00D4FF) !important;
  }

  75% {
    transform: translateY(-1px) scale(1.02);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.btn-press-motion {
  animation: buttonPressBounce 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#btn-apply-filters:active {
  transform: translateY(2px) scale(0.95) !important;
}

/* Disabled Pagination Buttons Styling */
.catalog-pagination button:disabled,
.catalog-pagination button[disabled] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background: var(--color-bg-secondary, #242F3A) !important;
  color: var(--color-text-muted, #6B7B8B) !important;
  border-color: rgba(59, 74, 90, 0.4) !important;
  pointer-events: none !important;
}



/* Cardless Mobile Game Item Stack (1 Game Per Line, Flat Canvas) */
@media (max-width: 640px) {
  .finder-results-col>div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin-bottom: 14px !important;
  }

  #page-title-heading {
    font-size: 1.2rem !important;
  }

  #seamless-games-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .seamless-game-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 0 18px 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 16:9 Thumbnail Cover (Max Height Capped for Compact Footprint) */
  .item-thumb-box {
    width: 100% !important;
    min-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 6px !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }

  .item-thumb-box>div {
    display: block !important;
  }

  .item-details-box {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Inline Title + Version + Developer Row */
  .item-title-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  .item-title-row h3 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .item-title-row h3 a {
    color: #FFFFFF !important;
  }

  .version-tag {
    font-size: 0.80rem !important;
    color: var(--color-accent-secondary, #00D4FF) !important;
    font-weight: 700 !important;
  }

  .developer-tag {
    font-size: 0.80rem !important;
    color: var(--color-text-muted, #8A99AC) !important;
  }

  /* Compact 2-Line Synopsis Paragraph */
  .item-details-box p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.83rem !important;
    line-height: 1.45 !important;
    margin: 2px 0 6px 0 !important;
    color: var(--color-text-secondary, #B8C5D6) !important;
  }

  .item-tags-strip {
    display: none !important;
  }

  .item-footer-meta>div:last-child {
    display: none !important;
  }

  /* Sleek Footer: Engine Pill + OS Icons + View Count */
  .item-footer-meta {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 4px !important;
    font-size: 0.74rem !important;
  }

  .item-footer-meta>div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
}

/* =========================================================
   INNER BLOG PAGE & TYPOGRAPHY SYSTEM (single-post.php)
   ========================================================= */

/* Header & Badges */
.blog-article-header {
  margin-bottom: 24px;
}

.blog-article-header__badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.blog-article-badge {
  font-size: 0.70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  background: var(--color-accent-primary, #E04B9E);
  padding: 3px 10px;
  border-radius: 4px;
}

.blog-article-badge--alt {
  background: rgba(0, 212, 255, 0.12);
  color: var(--color-accent-secondary, #00D4FF);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.blog-article-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--color-text-primary, #FFFFFF);
  margin: 0 0 14px 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--color-text-tertiary, #8A99AC);
}

.meta-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar-placeholder {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E04B9E, #00D4FF);
  color: #FFFFFF;
  font-size: 0.70rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meta-author .author-name {
  color: var(--color-text-primary, #FFFFFF);
}

/* Master 2-Column Article Layout */
.blog-article-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.blog-article-main {
  flex: 1;
  min-width: 0;
}

.blog-article-sidebar {
  width: 320px;
  flex-shrink: 0;
}

/* Featured Banner Stage */
.blog-article-featured-image {
  margin-bottom: 28px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border-primary, #3B4A5A);
  background: var(--color-bg-secondary, #242F3A);
}

.blog-article-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.featured-caption {
  font-size: 0.78rem;
  color: var(--color-text-muted, #8A99AC);
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--color-border-primary, #3B4A5A);
}

/* Standardized Content Typography */
.blog-article-content {
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--color-text-secondary, #B8C5D6);
}

.blog-article-content p {
  margin: 0 0 20px 0;
}

.blog-article-content .lead-paragraph {
  font-size: 1.08rem;
  line-height: 1.65;
  color: #D0DCED;
  font-weight: 500;
  margin-bottom: 24px;
}

.blog-article-content h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-text-primary, #FFFFFF);
  margin: 36px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-primary, #3B4A5A);
  letter-spacing: -0.01em;
}

.blog-article-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-secondary, #00D4FF);
  margin: 28px 0 12px 0;
}

.blog-article-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary, #FFFFFF);
  margin: 20px 0 10px 0;
}

/* Quote Callout Box */
.article-callout-quote {
  margin: 28px 0;
  padding: 18px 22px;
  background: var(--color-bg-secondary, #242F3A);
  border-left: 4px solid var(--color-accent-primary, #E04B9E);
  border-radius: 0 8px 8px 0;
}

.article-callout-quote .quote-text {
  font-size: 1.02rem;
  font-style: italic;
  color: #FFFFFF;
  line-height: 1.6;
  margin-bottom: 8px;
}

.article-callout-quote cite {
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 700;
  color: var(--color-accent-secondary, #00D4FF);
}

/* Table of Contents Callout Box */
.article-toc-box {
  background: var(--color-bg-secondary, #242F3A);
  border: 1px solid var(--color-border-primary, #3B4A5A);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0 28px 0;
}

.article-toc-box .toc-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 10px;
}

.article-toc-box .toc-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
}

.article-toc-box .toc-list a {
  color: var(--color-accent-secondary, #00D4FF);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.article-toc-box .toc-list a:hover {
  text-decoration: underline;
}

/* Article Highlight Spotlight Card */
.article-game-spotlight-card {
  background: linear-gradient(135deg, rgba(224, 75, 158, 0.08), rgba(0, 212, 255, 0.08));
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin: 28px 0;
}

.article-game-spotlight-card .spotlight-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--color-accent-primary, #E04B9E);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.article-game-spotlight-card h3 {
  margin: 0 0 8px 0 !important;
  color: #FFFFFF !important;
  font-size: 1.2rem !important;
}

.article-game-spotlight-card p {
  margin: 0 0 14px 0 !important;
  font-size: 0.90rem !important;
}

.spotlight-btn {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent-primary, #E04B9E);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.spotlight-btn:hover {
  opacity: 0.9;
}

/* Alert Boxes */
.article-alert-box {
  padding: 16px 20px;
  border-radius: 8px;
  margin: 24px 0;
  border: 1px solid transparent;
}

.article-alert-box--info {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.3);
}

.article-alert-box .alert-header {
  font-size: 0.90rem;
  font-weight: 800;
  color: var(--color-accent-secondary, #00D4FF);
  margin-bottom: 6px;
}

.article-alert-box .alert-body {
  font-size: 0.88rem;
  color: var(--color-text-secondary, #B8C5D6);
  line-height: 1.5;
}

/* Lists & Code Blocks */
.article-styled-list,
.article-numbered-list {
  margin: 0 0 24px 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-styled-list li,
.article-numbered-list li {
  line-height: 1.6;
}

.article-styled-list li strong,
.article-numbered-list li strong {
  color: #FFFFFF;
}

.article-code-block {
  background: var(--color-bg-primary, #1D2731);
  border: 1px solid var(--color-border-primary, #3B4A5A);
  border-radius: 8px;
  overflow: hidden;
  margin: 24px 0;
}

.article-code-block .code-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted, #8A99AC);
  background: var(--color-bg-secondary, #242F3A);
  padding: 6px 14px;
  border-bottom: 1px solid var(--color-border-primary, #3B4A5A);
}

.article-code-block pre {
  margin: 0;
  padding: 14px 16px;
  font-family: Consolas, Monaco, monospace;
  font-size: 0.85rem;
  color: var(--color-accent-secondary, #00D4FF);
  overflow-x: auto;
}

/* Article Footer: Tags & Author Bio Card */
.blog-article-footer {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-primary, #3B4A5A);
}

.article-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.article-tags-row .tags-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text-primary, #FFFFFF);
  margin-right: 4px;
}

.author-bio-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-bg-secondary, #242F3A);
  border: 1px solid var(--color-border-primary, #3B4A5A);
  border-radius: 8px;
  padding: 20px;
}

.author-avatar-large {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E04B9E, #00D4FF);
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-name-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
}

.author-bio-desc {
  font-size: 0.86rem;
  color: var(--color-text-secondary, #B8C5D6);
  line-height: 1.5;
  margin: 0;
}

/* Sidebar Widgets */
.blog-sidebar-widget {
  background: var(--color-bg-secondary, #242F3A);
  border: 1px solid var(--color-border-primary, #3B4A5A);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 24px;
}

.blog-sidebar-widget .widget-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-primary, #3B4A5A);
}

.widget-posts-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.widget-post-item {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
}

.widget-post-thumb {
  width: 68px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.widget-post-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 3px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s ease;
}

.widget-post-item:hover .widget-post-title {
  color: var(--color-accent-secondary, #00D4FF);
}

.widget-post-meta {
  font-size: 0.72rem;
  color: var(--color-text-muted, #8A99AC);
}

.widget-categories-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.widget-cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary, #B8C5D6);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--color-bg-primary, #1D2731);
  transition: all 0.15s ease;
}

.widget-cat-item:hover {
  color: #FFFFFF;
  background: var(--color-bg-tertiary, #2A3847);
}

.widget-cat-item .cat-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-accent-secondary, #00D4FF);
}

/* Mobile Responsiveness for Inner Blog Page */
@media (max-width: 900px) {
  .blog-article-layout {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .blog-article-sidebar {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .blog-article-header {
    margin-bottom: 18px !important;
  }

  .blog-article-badge {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
  }

  .blog-article-title {
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  .blog-article-meta {
    font-size: 0.76rem !important;
    gap: 6px 8px !important;
  }

  .blog-article-featured-image {
    margin-bottom: 20px !important;
    border-radius: 6px !important;
  }

  .featured-caption {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
  }

  .blog-article-content {
    font-size: 0.91rem !important;
    line-height: 1.65 !important;
  }

  .blog-article-content .lead-paragraph {
    font-size: 0.98rem !important;
    line-height: 1.58 !important;
    margin-bottom: 18px !important;
  }

  .blog-article-content h2 {
    font-size: 1.25rem !important;
    margin: 26px 0 12px 0 !important;
    padding-bottom: 6px !important;
  }

  .blog-article-content h3 {
    font-size: 1.08rem !important;
    margin: 20px 0 10px 0 !important;
  }

  .blog-article-content h4 {
    font-size: 0.98rem !important;
  }

  .article-toc-box {
    padding: 12px 14px !important;
    margin: 18px 0 22px 0 !important;
  }

  .article-toc-box .toc-title {
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
  }

  .article-toc-box .toc-list {
    padding-left: 14px !important;
    font-size: 0.82rem !important;
    gap: 5px !important;
  }

  .article-callout-quote {
    padding: 14px 16px !important;
    margin: 20px 0 !important;
  }

  .article-callout-quote .quote-text {
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
  }

  .article-game-spotlight-card {
    padding: 16px !important;
    margin: 20px 0 !important;
  }

  .article-game-spotlight-card h3 {
    font-size: 1.1rem !important;
  }

  .spotlight-btn {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .article-alert-box {
    padding: 12px 14px !important;
    margin: 18px 0 !important;
  }

  .article-styled-list,
  .article-numbered-list {
    margin: 0 0 18px 14px !important;
    font-size: 0.88rem !important;
  }

  .article-code-block {
    margin: 18px 0 !important;
  }

  .article-code-block pre {
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }

  .author-bio-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .author-avatar-large {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.95rem !important;
  }
}

  /* ══════════════════════════════════════════════════════════════
   CODED GRADIENT THUMBNAILS & CUSTOM EMPTY STATE CARD COMPONENTS
   ══════════════════════════════════════════════════════════════ */
  .blog-card__coded-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 16px;
    text-align: center;
  }

  .blog-card__coded-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
  }

  .blog-card__coded-thumb-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  }

  .blog-card__coded-thumb-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Empty State Custom Card Component */
  .empty-state-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #111827 0%, #1F2937 50%, #111827 100%);
    border: 1px dashed rgba(224, 75, 158, 0.4);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-secondary);
    padding: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .empty-state-thumb::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.02) 10px,
        rgba(255, 255, 255, 0.02) 20px);
    pointer-events: none;
  }

  .empty-state-thumb__icon {
    width: 38px;
    height: 38px;
    color: var(--color-accent-primary);
    opacity: 0.8;
  }

  .empty-state-thumb__title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-primary);
  }

  .empty-state-thumb__sub {
    font-size: 0.72rem;
    color: var(--color-text-tertiary);
  }

/* =====================================================================
   COMPREHENSIVE MOBILE OPTIMIZATIONS FOR INNER GAME PAGE (SINGLE.PHP)
   ===================================================================== */
@media (max-width: 768px) {
  /* Hide Top Trending Sidebar & Related Games Exploration Grid on Mobile */
  .bottom-exploration-section,
  .discovery-sidebar-col {
    display: none !important;
  }

  /* 1. Main Page Layout Padding & Spacing */
  .single-game-layout {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 2. Download Action Zone Mobile Touch Optimization */
  #download-action-zone > div {
    padding: 14px 12px !important;
  }

  #download-action-zone .dl-brand-pill {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    min-height: 40px;
  }

  /* 3. Report Broken Link & Copyright Disclaimer Stacking */
  #download-action-zone div[style*="align-items: flex-end"] {
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* 4. Comment Form Fields Mobile Stacking */
  .clean-author-fields {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .clean-author-fields .clean-input {
    width: 100% !important;
  }

  .clean-submit-btn {
    width: 100% !important;
    padding: 10px 16px !important;
  }

  /* 5. Game Information Table Mobile Responsiveness */
  .minimal-section table {
    display: block;
    width: 100%;
  }

  .minimal-section table tbody {
    display: block;
    width: 100%;
  }

  .minimal-section table tr {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .minimal-section table td {
    width: 50% !important;
    padding: 4px 6px !important;
    box-sizing: border-box;
  }

  /* 6. Walkthrough Links Touch Targets */
  .action-zone-section p {
    line-height: 1.6;
    word-break: break-word;
  }

  /* 7. Image Showcase Gallery Mobile Aspect Ratio */
  .showcase-stage__main {
    max-height: 280px !important;
  }
}

@media (max-width: 480px) {
  #download-action-zone .dl-brand-pill {
    flex: 1 1 100%;
    width: 100%;
  }

  .minimal-section table td {
    width: 100% !important;
  }
}