/* ──────────────────────────────────────────────────────────────────────
   GameHood · Liquid Glass theme  (v5)
   Loaded last on every page. Consolidates the glass look, system type,
   and the fixes layered on top of styles.css / rockstar.css.

   Performance rules:
   - Live backdrop-filter only on floating surfaces (nav, hero bar, modal,
     promo pill). Cards use static glass.
   - Hover/scroll effects animate transform + opacity only.
   - No content-visibility (it produced blank frames + scroll jumps).
   ────────────────────────────────────────────────────────────────────── */

:root {
  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --lg-bg: #05060b;
  --lg-text: #f6f8fc;
  --lg-soft: rgba(236, 241, 255, 0.82);
  --lg-muted: rgba(236, 241, 255, 0.68);
  --lg-accent: #ccff00;
  --lg-fill: rgba(255, 255, 255, 0.07);
  --lg-fill-strong: rgba(255, 255, 255, 0.12);
  --lg-stroke: rgba(255, 255, 255, 0.15);
  --lg-stroke-strong: rgba(255, 255, 255, 0.28);
  --lg-highlight: rgba(255, 255, 255, 0.32);
  --lg-radius: 24px;
  --lg-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --lg-blur: blur(22px) saturate(180%);
  --lg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lg-card-grad: linear-gradient(160deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.07) 100%);

  --rs-font-display: var(--lg-font);
  --rs-font-body: var(--lg-font);
  --rs-text-secondary: var(--lg-soft);
  --rs-text-muted: var(--lg-muted);
  --rs-surface: var(--lg-fill);
  --rs-surface-raised: rgba(255, 255, 255, 0.09);
  --rs-surface-hover: var(--lg-fill-strong);
  --rs-border: var(--lg-stroke);
  --rs-border-strong: var(--lg-stroke-strong);
  --rs-radius-card: 24px;
  --text-muted: var(--lg-muted);
  --text-soft: var(--lg-soft);
}

/* ── Base ── */
html { background: var(--lg-bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--lg-font) !important;
  color: var(--lg-text) !important;
  background-color: transparent !important;
  background-image: none;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 52vh at 8% 0%, rgba(204, 255, 0, 0.15), transparent 62%),
    radial-gradient(56vw 58vh at 96% 8%, rgba(72, 140, 255, 0.22), transparent 62%),
    radial-gradient(62vw 60vh at 82% 98%, rgba(176, 96, 255, 0.2), transparent 62%),
    radial-gradient(48vw 52vh at 2% 88%, rgba(0, 214, 190, 0.14), transparent 62%),
    var(--lg-bg);
}
#lg-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--lg-font); font-weight: 700; letter-spacing: -0.022em; }
p { color: var(--lg-soft); }
::selection { background: rgba(204, 255, 0, 0.35); color: #fff; }
:focus-visible { outline: 2px solid rgba(204, 255, 0, 0.9); outline-offset: 3px; border-radius: 8px; }

/* Monospace / display leftovers → system type */
.badge-category, .badge-playable, .game-card-title, .game-card-meta .year, .game-card-score,
.masonry-label, .section-eyebrow, .filter-pill, .nav-links a, .nav-search-input, .results-count,
.btn, .btn-insert-coin, .sidebar-section-title, .rs-cat-btn, .rs-hero-tab-btn, .rs-tag-category,
.rs-tag-new, .rs-tag-rating, .rs-news-tag, .rs-news-date, .rs-video-duration, .rs-section-tag,
.rs-hero-trailer-label, .adsterra-label, .terminal-input, .rs-title-sub, #results-count,
.rs-poster-meta, .rs-link-more, .rs-footer-nav a, .rs-disclaimer, .hero-badge, .mission-card h3,
.stat-label, .stat-value, .ticker-item, #sb-floating-promo {
  font-family: var(--lg-font) !important;
}

/* ── Floating glass capsule nav ── */
.nav {
  top: 12px; left: 16px; right: 16px; width: auto;
  border-radius: 22px;
  background: rgba(18, 20, 30, 0.46) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-stroke);
  border-bottom: 1px solid var(--lg-stroke) !important;
  box-shadow: inset 0 1px 0 var(--lg-highlight), 0 12px 32px rgba(0, 0, 0, 0.34);
  transition: background-color 0.25s ease;
}
.nav.scrolled { background: rgba(14, 16, 24, 0.66) !important; }
.rs-brand, .nav-logo { flex-shrink: 0; }
.rs-brand .nav-logo-img, .nav-logo .nav-logo-img { flex-shrink: 0; max-width: none; width: auto; height: 40px; }
.nav-links { gap: 0.2rem; }
.nav-links a {
  font-family: var(--lg-font) !important;
  font-size: 0.86rem !important; font-weight: 600 !important;
  letter-spacing: -0.005em !important; text-transform: none !important;
  color: var(--lg-soft) !important;
  border-radius: 999px; padding: 0.5rem 0.95rem; border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.nav-links a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.1); }
.nav-links a.active, .nav-links a[aria-current="page"] {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.nav-search-wrap form, .nav-search-wrap input {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--lg-stroke) !important;
  color: #fff !important;
  font-family: var(--lg-font) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.nav-search-wrap form input { border: none !important; background: transparent !important; box-shadow: none; }
.nav-search-wrap input:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08) !important; outline: none !important;
}
.nav-search-input::placeholder { color: var(--lg-muted); }
.nav-drawer { background: rgba(10, 12, 20, 0.86); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
.nav-drawer .nav-links a { font-size: 1.05rem !important; padding: 0.8rem 1rem; }

/* Blog / simple-page header as the same capsule */
.header {
  position: sticky; top: 12px; z-index: 1000; margin: 12px 16px 0;
  border-radius: 22px; background: rgba(18, 20, 30, 0.46);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-stroke);
  box-shadow: inset 0 1px 0 var(--lg-highlight), 0 12px 32px rgba(0, 0, 0, 0.34);
}
.header .nav-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1200px; margin: 0 auto; padding: 0.7rem 1.1rem; }
.header .logo { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; flex-shrink: 0; }
.header .logo-text span { color: var(--lg-accent); }
.header .nav-links { display: flex !important; align-items: center; gap: 0.25rem; }
.header .nav-link { padding: 0.5rem 0.95rem; border-radius: 999px; color: var(--lg-soft); font-weight: 600; font-size: 0.88rem; text-decoration: none; border: 1px solid transparent; transition: background-color 0.2s ease, color 0.2s ease; }
.header .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.header .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.header .nav-actions { flex-shrink: 0; }

/* ── Buttons ── */
.rs-btn-primary, .rs-btn-rockstar.rs-btn-play-game, .btn-primary, .btn-gold, .hero-cta-btn,
.footer-donate, .rs-poster-play-btn, .nav-cta.btn-gold {
  background: linear-gradient(180deg, #e6ff70 0%, #c4f000 100%) !important;
  color: #0b0e00 !important; border: none !important; border-radius: 999px !important;
  font-family: var(--lg-font) !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: -0.01em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 6px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(204, 255, 0, 0.26) !important;
  animation: none !important;
  transition: transform 0.18s var(--lg-ease), filter 0.18s ease !important;
}
.rs-btn-primary::before, .btn-primary::before, .nav-cta::before { display: none !important; }
.rs-btn-secondary, .rs-btn-rockstar:not(.rs-btn-play-game), .btn-secondary, .btn-ghost, .nav-cta, .nav-cta.btn {
  background: rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  color: #fff !important; border: 1px solid var(--lg-stroke-strong) !important; border-radius: 999px !important;
  font-family: var(--lg-font) !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: -0.01em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25) !important;
  animation: none !important;
  transition: transform 0.18s var(--lg-ease), background-color 0.2s ease !important;
}
.rs-btn-primary:hover, .rs-btn-rockstar.rs-btn-play-game:hover, .btn-primary:hover, .btn-gold:hover, .hero-cta-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.rs-btn-secondary:hover, .rs-btn-rockstar:not(.rs-btn-play-game):hover, .btn-secondary:hover, .btn-ghost:hover, .nav-cta:hover, .nav-cta.btn:hover { background: rgba(255, 255, 255, 0.2) !important; transform: translateY(-1px); }
.rs-btn-primary:active, .rs-btn-secondary:active, .rs-btn-rockstar:active, .btn:active { transform: scale(0.97); }
.btn-insert-coin { border-radius: 999px; text-transform: none; letter-spacing: -0.005em; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--lg-stroke); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }

/* ── Hero ── */
.rs-hero-overlay {
  background:
    linear-gradient(0deg, rgba(5, 6, 11, 0.94) 0%, rgba(5, 6, 11, 0.35) 34%, transparent 60%),
    linear-gradient(90deg, rgba(5, 6, 11, 0.6) 0%, rgba(5, 6, 11, 0.15) 50%, transparent 75%);
}
.rs-hero-media-wrap picture { position: absolute; inset: 0; }
.rs-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.rs-hero-video-bg { opacity: 0; transition: opacity 0.9s ease; }
.rs-hero-video-bg.is-playing { opacity: 1; }
.rs-hero-logo-lockup { display: none; }
.rs-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1rem; padding: 0.42rem 0.9rem 0.42rem 0.6rem;
  border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.1); border: 1px solid var(--lg-stroke);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.rs-hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--lg-accent); box-shadow: 0 0 10px rgba(204, 255, 0, 0.9); }
.rs-hero-headline, .rs-hero-title {
  letter-spacing: -0.035em !important; text-transform: none !important;
  font-size: clamp(2.1rem, 4.6vw, 4rem) !important; line-height: 1.02 !important; font-weight: 800 !important;
}
.rs-hero-title span { color: var(--lg-accent); }
.rs-hero-desc { font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 560px; }
.rs-hero-trailer-bar {
  background: rgba(18, 20, 30, 0.45) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important; backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-stroke) !important; border-radius: 999px !important;
  box-shadow: inset 0 1px 0 var(--lg-highlight), 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}
.rs-hero-trailer-label { text-transform: none !important; letter-spacing: 0 !important; color: var(--lg-soft) !important; font-weight: 600 !important; }
.rs-hero-tab-btn { border-radius: 999px !important; text-transform: none !important; letter-spacing: -0.005em !important; font-weight: 600 !important; color: var(--lg-soft) !important; }
.rs-hero-tab-btn.active { background: rgba(255, 255, 255, 0.92) !important; color: #05060b !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; }
.rs-dot { background: rgba(255, 255, 255, 0.35); transition: width 0.3s var(--lg-ease), background-color 0.3s ease; }
.rs-dot.active { background: #fff; box-shadow: none; }
.rs-hero-close-theater { border-radius: 999px !important; background: rgba(18, 20, 30, 0.5) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-stroke-strong) !important; text-transform: none !important; }

/* ── Section headers ── */
.rs-section { padding: 5.5rem 2rem; }
.rs-section-header { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 2rem !important; gap: 1.5rem; }
.rs-section-tag, .section-eyebrow, .rs-title-sub, .hero-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.75rem; border-radius: 999px;
  background: rgba(204, 255, 0, 0.1); border: 1px solid rgba(204, 255, 0, 0.28);
  color: #e3ff7a !important; font-size: 0.74rem !important; font-weight: 700 !important;
  letter-spacing: 0.02em !important; text-transform: none !important; margin-bottom: 0.8rem;
}
.rs-section-title, .rs-title-main, .section-title h2, .charts-title {
  text-transform: none !important; letter-spacing: -0.035em !important;
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important; font-weight: 800 !important; line-height: 1.02 !important;
}
.rs-link-more { text-transform: none !important; letter-spacing: -0.005em !important; font-weight: 600 !important; color: var(--lg-soft) !important; border-radius: 999px; padding: 0.5rem 0.9rem; transition: background-color 0.2s ease, color 0.2s ease; }
a.rs-link-more:hover { background: rgba(255, 255, 255, 0.1); color: #fff !important; }
.rs-meta-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--lg-stroke); color: var(--lg-soft); font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.rs-meta-pill b { color: var(--lg-accent); font-weight: 800; }

/* Category / filter pills → segmented glass */
.rs-category-bar, .category-filter { gap: 0.5rem; margin-bottom: 2rem !important; }
.rs-cat-btn, .filter-pill {
  border-radius: 999px !important; background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--lg-stroke) !important; color: var(--lg-soft) !important;
  text-transform: none !important; letter-spacing: -0.005em !important; font-weight: 600 !important;
  padding: 0.55rem 1.05rem !important; font-size: 0.9rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.rs-cat-btn:hover, .filter-pill:hover { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
.rs-cat-btn.active, .filter-pill.active { background: rgba(255, 255, 255, 0.92) !important; color: #05060b !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important; }

/* ── Cards (static glass) ── */
.rs-poster-card, .rs-news-card, .rs-video-card, .game-card, .related-card, .library-sidebar > div,
.blog-card, .post-card, .arcade-card, .why-card, .mission-card, .chart-item, .charts-list > a, .rs-modal-dialog {
  background: var(--lg-card-grad) !important;
  border: 1px solid var(--lg-stroke) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 var(--lg-highlight), inset 0 -1px 0 rgba(255, 255, 255, 0.04), var(--lg-shadow) !important;
  transition: transform 0.35s var(--lg-ease), border-color 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform;
}
.rs-poster-card:hover, .rs-news-card:hover, .rs-video-card:hover, .game-card:hover, .related-card:hover, .blog-card:hover, .post-card:hover, .mission-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.36) !important;
  box-shadow: inset 0 1px 0 var(--lg-highlight), 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(204, 255, 0, 0.12) !important;
}
.rs-poster-card { aspect-ratio: 3 / 4 !important; }
.rs-poster-img { transition: transform 0.6s var(--lg-ease) !important; }
.rs-poster-card:hover .rs-poster-img { transform: scale(1.06); }
.rs-poster-gradient { background: linear-gradient(180deg, rgba(5, 6, 11, 0.05) 0%, rgba(5, 6, 11, 0.1) 40%, rgba(5, 6, 11, 0.86) 78%, rgba(5, 6, 11, 0.97) 100%) !important; }
.rs-poster-content { padding: 1.2rem 1.2rem 1.25rem !important; gap: 0.45rem !important; }
.rs-poster-title { text-transform: none !important; letter-spacing: -0.02em !important; font-size: 1.12rem !important; font-weight: 700 !important; line-height: 1.2 !important; }
.rs-poster-meta { text-transform: none !important; font-weight: 500 !important; color: var(--lg-muted) !important; font-size: 0.8rem !important; }
.rs-poster-meta span[style] { color: #e3ff7a !important; font-weight: 700 !important; }
.rs-poster-play-btn { justify-content: center; padding: 0.6rem 1rem !important; font-size: 0.9rem !important; margin-top: 0.55rem !important; }
.rs-poster-top-badges { top: 14px !important; left: 14px !important; right: 14px !important; }
.rs-tag-new, .rs-tag-category, .rs-tag-rating, .badge-category, .badge-playable, .rs-news-tag {
  border-radius: 999px !important; padding: 4px 10px !important;
  font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.01em !important; text-transform: none !important;
}
.rs-tag-category, .rs-tag-rating, .badge-category, .badge-playable, .rs-news-tag, .game-card-score, .rs-video-duration {
  background: rgba(10, 12, 20, 0.55) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--lg-stroke) !important; color: #fff !important;
}
.rs-tag-rating { color: #ffd166 !important; }
.rs-tag-new { background: linear-gradient(135deg, #ff2d6f, #ff5e8a) !important; box-shadow: 0 6px 16px rgba(255, 45, 111, 0.35); }
.rs-news-thumb, .rs-video-thumb-wrap, .game-card-thumb, .rs-poster-img-wrap { border-radius: 23px 23px 0 0; }
.rs-poster-img-wrap { border-radius: 23px; }
.rs-news-thumb img, .rs-video-thumb-wrap img { transition: transform 0.6s var(--lg-ease); }
.rs-news-card:hover .rs-news-thumb img, .rs-video-card:hover .rs-video-thumb-wrap img { transform: scale(1.05); }
.rs-news-title, .rs-video-title { letter-spacing: -0.02em !important; text-transform: none !important; }
.rs-news-date, .rs-disclaimer, .adsterra-label, .game-card-meta .year { color: var(--lg-muted) !important; text-transform: none !important; letter-spacing: 0 !important; }
.rs-play-circle { background: rgba(255, 255, 255, 0.92) !important; color: #05060b !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.game-card-title { text-transform: none; letter-spacing: -0.012em; font-size: 1.05rem; font-weight: 650; }
.game-card-thumb { height: auto; aspect-ratio: 16 / 10; }
.game-card-thumb img { filter: none; }

/* ── Grids / layout ── */
.rs-games-grid { gap: 1.6rem !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }
.games-grid, #games-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 1.5rem !important; background: transparent !important; border: none !important; }
.section, .rs-section, .quote-section { background: transparent !important; }
.section-header { border-bottom: none; }
.rs-show-more-wrap { display: flex; justify-content: center; margin-top: 2.25rem; }
.rs-show-more-wrap[hidden] { display: none; }
.rs-show-more { min-width: 220px; justify-content: center; padding: 0.85rem 1.6rem !important; font-size: 0.95rem !important; }

/* Sidebar / search / counters */
.library-sidebar h3 { text-transform: none !important; letter-spacing: -0.01em !important; color: #fff !important; border-bottom: none !important; }
.sidebar-section-title { text-transform: none; letter-spacing: -0.01em; color: #fff; font-size: 1.05rem; border-bottom-color: var(--lg-stroke); }
.search-input, .terminal-input, #catalog-search, #catalog-sort {
  border-radius: 999px !important; background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--lg-stroke) !important; color: #fff !important;
  font-family: var(--lg-font) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
#catalog-sort option { background: #10121c; }
.library-sidebar select.terminal-input { border-radius: 14px !important; }
#results-count, .results-count { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; color: var(--lg-muted) !important; }

/* ── Modals ── */
.rs-modal-backdrop { background: rgba(5, 6, 11, 0.55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rs-modal-dialog { background: rgba(22, 24, 34, 0.7) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border-color: var(--lg-stroke-strong) !important; border-radius: 28px !important; }
.rs-modal-title { text-transform: none !important; letter-spacing: -0.02em !important; }

/* ── Footer ── */
.rs-footer, .footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
  border-top: 1px solid var(--lg-stroke) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  margin-top: 2rem !important;
}
.rs-footer-nav a { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: 0.92rem !important; border-radius: 999px; padding: 0.4rem 0.8rem; }
.rs-footer-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff !important; }

/* ── Floating promo pill (ad-manager injects inline styles; override) ── */
#sb-floating-promo {
  background: rgba(18, 20, 30, 0.6) !important;
  border: 1px solid var(--lg-stroke-strong) !important;
  color: #fff !important;
  font-size: 0.85rem !important; font-weight: 600 !important;
  padding: 0.6rem 1.1rem 0.6rem 0.9rem !important;
  -webkit-backdrop-filter: var(--lg-blur) !important; backdrop-filter: var(--lg-blur) !important;
  box-shadow: inset 0 1px 0 var(--lg-highlight), 0 12px 30px rgba(0, 0, 0, 0.45) !important;
  animation: none !important;
  transition: transform 0.2s var(--lg-ease), background-color 0.2s ease !important;
}
#sb-floating-promo:hover { background: rgba(255, 255, 255, 0.92) !important; color: #05060b !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5) !important; }

/* ── Ads: reserve space while loading, collapse if nothing arrives ── */
.ad-slot { display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 100%; overflow: hidden; transition: min-height 0.3s ease; }
.ad-slot iframe { max-width: 100%; }
.ad-slot.is-empty { display: none !important; min-height: 0 !important; }
.adsterra-native-wrap { border-radius: 24px; }
.adsterra-label { font-size: 0.72rem !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0.02em !important; }

/* ── Legacy reveal: visible by default; motion.js animates instead ── */
.reveal { opacity: 1; transform: none; }

/* ── Comprehensive Mobile Responsiveness & Theme Fixes ── */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box !important;
}
img, video, iframe {
  max-width: 100%;
}

/* ── Centered floating glass nav (Desktop baseline) ── */
:root { --nav-h: 68px; }
.nav {
  height: 56px !important; top: 14px !important;
  left: 0 !important; right: 0 !important;
  margin: 0 auto !important;
  width: min(1120px, calc(100% - 48px)) !important;
}
.nav-inner { padding: 0 0.6rem 0 1rem !important; gap: 0.75rem; min-width: 0; }
.rs-brand .nav-logo-img, .nav-logo .nav-logo-img { height: 30px; }
.nav-links { flex-shrink: 0; }
.nav-links a { padding: 0.36rem 0.8rem !important; font-size: 0.82rem !important; }
.nav-search-wrap { flex: 1 1 auto !important; min-width: 0 !important; max-width: 260px !important; margin-left: 0.25rem !important; }
.nav-search-wrap form, .nav-search-wrap input { width: 100%; min-width: 0; height: 34px; }
.nav-cta, .nav-cta.btn { flex-shrink: 0; white-space: nowrap; padding: 0.4rem 0.95rem !important; font-size: 0.82rem !important; }
.header { top: 14px; margin: 14px auto 0 !important; max-width: 1120px; width: calc(100% - 48px); }
.header .nav-container { padding: 0.45rem 0.9rem; }
.header .nav-link { padding: 0.36rem 0.8rem; font-size: 0.82rem; }

.rs-hero-section { padding-top: 0 !important; }
.rs-hero-slide { top: 0 !important; transition: opacity 0.45s ease, visibility 0.45s !important; }

/* Native ad block: label on its own line */
.adsterra-native-wrap { display: block !important; padding: 1rem 1.25rem 1.25rem !important; background: var(--lg-card-grad); border: 1px solid var(--lg-stroke); }
.adsterra-native-wrap .adsterra-label { display: block; margin: 0 0 0.6rem; color: var(--lg-muted) !important; }

/* Scroll reveal states driven by motion.js */
.lg-hidden { opacity: 0; transform: translate3d(0, 14px, 0); transition: none !important; }
.lg-hidden.lg-in {
  opacity: 1; transform: none;
  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

@media (max-width: 1199px) {
  .nav-search-wrap { display: none !important; }
}
@media (max-width: 1180px) {
  .nav-links a { padding: 0.34rem 0.62rem !important; }
}

@media (max-width: 1023px) {
  .rs-section { padding: 4rem 1.25rem; }
}

/* ── Mobile Devices Viewport Breakpoint (<= 768px) ── */
@media (max-width: 768px) {
  :root { --nav-h: 58px; }

  /* Navbar */
  .nav {
    width: calc(100% - 20px) !important;
    left: 10px !important; right: 10px !important;
    top: 8px !important;
    height: 50px !important;
    border-radius: 18px !important;
  }
  .nav-inner { padding: 0 0.35rem 0 0.8rem !important; }
  .rs-brand .nav-logo-img, .nav-logo .nav-logo-img { height: 24px !important; }
  .nav-links { display: none !important; }
  .nav-cta.btn, .nav-cta {
    width: 38px !important; height: 38px !important; padding: 0 !important;
    border-radius: 999px !important; font-size: 0 !important; gap: 0 !important;
    justify-content: center !important;
  }
  .nav-cta svg, .nav-cta i { width: 16px; height: 16px; }
  .nav-hamburger {
    display: flex !important;
    width: 38px !important; height: 38px !important;
    padding: 0 !important;
    align-items: center !important; justify-content: center !important;
  }
  .header { width: calc(100% - 20px); margin: 8px auto 0 !important; border-radius: 18px; }
  .header .nav-container { padding: 0.45rem 0.7rem; }

  .nav-drawer {
    top: 66px !important;
    width: calc(100% - 20px) !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 20px !important;
    padding: 0.85rem !important;
  }
  .nav-drawer .nav-links { display: grid !important; }
  .nav-drawer .nav-links a { font-size: 0.95rem !important; padding: 0.75rem 0.9rem !important; }

  /* ── Hero Section (Mobile Optimized) ── */
  .rs-hero-section {
    position: relative !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 520px !important;
    max-height: 820px !important;
    overflow: hidden !important;
  }
  .rs-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .rs-hero-poster {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: brightness(0.92) contrast(1.05);
  }
  .rs-hero-overlay {
    background: linear-gradient(180deg, rgba(5, 6, 11, 0.4) 0%, rgba(5, 6, 11, 0.6) 45%, rgba(5, 6, 11, 0.96) 92%) !important;
  }
  .rs-hero-content {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    padding: calc(var(--nav-h) + 1.25rem) 1.25rem max(2rem, env(safe-area-inset-bottom, 20px)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  .rs-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
  .rs-hero-eyebrow {
    font-size: 0.72rem !important;
    padding: 0.35rem 0.75rem 0.35rem 0.55rem !important;
    margin-bottom: 0.55rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    background: rgba(204, 255, 0, 0.12) !important;
    border: 1px solid rgba(204, 255, 0, 0.3) !important;
    color: #e3ff7a !important;
    border-radius: 999px !important;
  }
  .rs-hero-eyebrow .dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: var(--lg-accent) !important;
    box-shadow: 0 0 8px rgba(204, 255, 0, 0.8) !important;
  }
  .rs-hero-headline, .rs-hero-title {
    font-size: clamp(1.55rem, 6.8vw, 2.25rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.55rem !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95) !important;
  }
  .rs-hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1.2rem !important;
    max-width: 100% !important;
    color: rgba(236, 241, 255, 0.88) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95) !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Responsive Action Button Grid */
  .rs-btn-row, .rs-gta-btn-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 !important;
  }
  .rs-btn-rockstar.rs-btn-play-game {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 0.8rem 1.2rem !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  .rs-btn-rockstar:not(.rs-btn-play-game) {
    width: 100% !important;
    padding: 0.65rem 0.6rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    white-space: nowrap !important;
    gap: 0.4rem !important;
  }

  /* Sleek Floating Dots */
  .rs-hero-dots {
    display: flex !important;
    position: absolute !important;
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    right: 16px !important;
    left: auto !important;
    transform: none !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    background: rgba(10, 12, 20, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;
    z-index: 10 !important;
  }
  .rs-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    border: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .rs-dot.active {
    width: 20px !important;
    background: var(--lg-accent) !important;
  }
  .rs-hero-close-theater {
    top: 14px !important;
    right: 14px !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.75rem !important;
  }

  /* ── Category Bar Horizontal Touch Scroll ── */
  .rs-category-bar, .category-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0.25rem 0.25rem 0.6rem !important;
    scrollbar-width: none !important;
  }
  .rs-category-bar::-webkit-scrollbar, .category-filter::-webkit-scrollbar {
    display: none !important;
  }
  .rs-cat-btn, .filter-pill {
    padding: 0.45rem 0.9rem !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
  }

  /* ── Games Grid (2-Column Mobile) ── */
  .rs-games-grid, .games-grid, #games-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .rs-poster-card, .game-card {
    border-radius: 16px !important;
  }
  .rs-poster-content {
    padding: 0.75rem !important;
    gap: 0.35rem !important;
  }
  .rs-poster-title {
    font-size: 0.85rem !important;
    line-height: 1.22 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rs-poster-play-btn {
    padding: 0.45rem 0.6rem !important;
    font-size: 0.75rem !important;
    margin-top: 0.35rem !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .rs-poster-top-badges {
    top: 8px !important; left: 8px !important; right: 8px !important;
  }
  .rs-tag-new, .rs-tag-category, .rs-tag-rating {
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
  }
  .rs-poster-card:hover, .rs-news-card:hover, .rs-video-card:hover, .game-card:hover {
    transform: none !important;
  }

  /* ── Newswire & Video Grid (1-Column Mobile) ── */
  .rs-newswire-grid, .rs-video-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .rs-news-card, .rs-video-card {
    border-radius: 18px !important;
    width: 100% !important;
  }
  .rs-news-body, .rs-video-info {
    padding: 1.2rem !important;
  }
  .rs-news-title, .rs-video-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }
  .rs-news-desc, .rs-video-desc {
    font-size: 0.86rem !important;
    line-height: 1.48 !important;
    margin-bottom: 1rem !important;
  }

  /* ── Section Headers on Mobile ── */
  .rs-section {
    padding: 3.5rem 1.1rem !important;
  }
  .rs-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    margin-bottom: 1.5rem !important;
  }
  .rs-section-title, .rs-title-main {
    font-size: clamp(1.75rem, 6vw, 2.3rem) !important;
  }
  .rs-link-more {
    font-size: 0.82rem !important;
    padding: 0.35rem 0.75rem !important;
  }

  /* ── Footer on Mobile ── */
  .rs-footer, .footer {
    padding: 3rem 1.1rem 2rem !important;
    margin-top: 2rem !important;
  }
  .rs-footer-top {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
  .rs-footer-nav {
    justify-content: center !important;
    gap: 0.5rem 1rem !important;
  }
  .rs-footer-nav a {
    font-size: 0.82rem !important;
    padding: 0.35rem 0.65rem !important;
  }
  .rs-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
    padding-top: 1.5rem !important;
  }
  .rs-disclaimer {
    text-align: center !important;
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
  }

  /* ── Blog & Catalog Pages on Mobile ── */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 0 1.1rem !important;
  }
  .blog-index-hero {
    padding: calc(var(--nav-h) + 2rem) 1.1rem 2rem !important;
  }
  .blog-index-hero h1 {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
  }
  .blog-article {
    padding: 0 1.1rem !important;
    margin: calc(var(--nav-h) + 1.5rem) auto 3rem !important;
  }
  .blog-title {
    font-size: clamp(1.75rem, 6.5vw, 2.5rem) !important;
  }
  .blog-thumbnail {
    margin-bottom: 1.5rem !important;
  }
  .blog-content h2 {
    font-size: 1.45rem !important;
    margin: 2rem 0 0.8rem !important;
  }
  .blog-content p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* ── Modals & Ad Slots on Mobile ── */
  .rs-modal-backdrop {
    padding: 0.75rem !important;
  }
  .rs-modal-dialog {
    border-radius: 20px !important;
  }
  .ad-slot {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .ad-slot iframe {
    max-width: 100% !important;
  }
  #sb-floating-promo {
    display: none !important;
  }
}

/* ── Ultra-narrow devices (<= 380px) ── */
@media (max-width: 380px) {
  .rs-hero-headline, .rs-hero-title {
    font-size: 1.5rem !important;
  }
  .rs-games-grid, .games-grid, #games-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .rs-poster-content {
    padding: 0.6rem !important;
  }
  .rs-poster-title {
    font-size: 0.78rem !important;
  }
  .rs-btn-row, .rs-gta-btn-row {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-poster-card, .rs-news-card, .rs-video-card, .game-card, .rs-hero-video-bg, .rs-poster-img { transition: none !important; }
  #lg-canvas { display: none; }
}


/* ── Consistency pass (Oct 2026): labels read as text, not pills ───────────────────────────── */
.rs-title-sub, .rs-section-tag, .section-eyebrow, .hero-badge {
  display: inline !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: var(--lg-muted) !important;
  font-size: 0.95rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
}
.rs-title-sub b { color: #fff; font-weight: 700; }
.game-info-meta { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.35rem 0 !important; }
.game-info-meta .badge, .game-info-meta .tag {
  display: inline-flex !important; align-items: center !important; gap: 0.35rem !important;
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--lg-soft) !important;
  font-size: 0.92rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
}
.game-info-meta .badge-category { color: #fff !important; font-weight: 600 !important; }
.game-info-meta > * + *::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--lg-muted); margin: 0 0.75rem; flex: none; }
.game-info-meta .tag svg, .game-info-meta .tag i { width: 14px !important; height: 14px !important; opacity: 0.7; }
.rs-tag-new { display: none !important; }
.rs-tag-category, .rs-tag-rating {
  border-radius: 6px !important; padding: 3px 7px !important; border: 0 !important; box-shadow: none !important;
  background: rgba(5, 6, 11, 0.66) !important; color: #fff !important; font-size: 0.7rem !important; font-weight: 600 !important;
}

/* One type system everywhere: the site sans in natural case. Monospace stays only for keys and code. */
.blog-meta, .blog-play-now-btn, #launcher-overlay, #launcher-btn, .btn-secondary, .launcher-hint, .launcher-title,
.blog-alt-btn, .blog-table th, .blog-cta-btn, .blog-cta-sublink, th, #pp-launch-overlay, .pp-overlay-title, #pp-launch-btn, .pp-hint,
.cheats-table th, .cta-btn, .play-cta-btn, .adsterra-label, .loader-logo, .btn, .game-card-score, .game-card-title, .game-card-meta .year,
.btn-insert-coin, .filter-pill, .search-input, .ctrl-btn, .fullscreen-countdown, .game-info h1, .tag, .sidebar-section-title,
.related-meta, .footer-col h4, .footer-bottom, .footer-donate, .arcade-card-title, .arcade-play-btn, .mission-card h3, .form-label,
.form-input, .form-textarea, .meta-btn, .action-btn, .stat-num, .stat-label, .post-section-title, .post-nav-dir, .comment-form label,
.comment-date, .comment-submit, .ticker-track, .hero-features-label, .hero-headline, .hero-cta-label, .hero-cta-btn, .masonry-label,
.charts-title, .chart-name, .chart-platform, .chart-play-btn, .quote-name, .mission-text h3, .mario-overlay-title, #mario-launch-btn,
.mario-hint, .rs-detail-title, .rs-meta-item strong, .about-hero h1, .rs-brand-text, .rs-modal-title, .rs-news-footer,
.blog-content .toc > p, .blog-content .toc > strong, .blog-content .toc > h2, .blog-content .toc > span, .font-mono {
  font-family: var(--lg-font) !important; text-transform: none !important;
}
.launcher-title, .pp-overlay-title, .mario-overlay-title, .game-info h1, .rs-detail-title, .about-hero h1 {
  letter-spacing: -0.03em !important; font-weight: 800 !important; line-height: 1.05 !important;
}
.launcher-hint, .pp-hint, .mario-hint { letter-spacing: 0 !important; font-size: 0.86rem !important; color: var(--lg-muted) !important; }
#launcher-btn, #pp-launch-btn, #mario-launch-btn, .btn-insert-coin, .btn-secondary, .cta-btn, .play-cta-btn, .blog-cta-btn, .blog-play-now-btn {
  letter-spacing: 0 !important; font-weight: 650 !important;
}
.footer-col h4, .sidebar-section-title, .post-section-title { letter-spacing: 0.02em !important; }
kbd, code, .ctrl-key, .cheats-table code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; }

/* Mobile: single-column grids may not grow past the screen because of a wide child */
.player-main, .gta-layout > *, .blog-mid-cta > *, .blog-hero-cta > * { min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
  .player-page, .gta-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .player-controls { flex-wrap: wrap !important; }
  .blog-mid-cta { padding: 1.25rem !important; }
}