* {
  padding: 0px;
  margin: 0px;
}
/* Sidebar/menu CSS removed per user request. */

/* Sidebar/menu rules removed — starting clean slate */
@font-face {
  font-family: "Nunito";
  src: url("nunito/Nunito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("nunito/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("nunito/Nunito-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("nunito/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("nunito/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("nunito/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-0: #0c0d14; /* Deep black background */
  --fg-0: #e4e4e7; /* Soft neutral text for readability */
  --muted: rgba(228, 228, 231, 0.08); /* Soft overlays */
  --glass: rgba(12, 13, 20, 0.82); /* Translucent glass */
  --glass-strong: rgba(12, 13, 20, 0.95); /* Stronger glass */
  --accent: #9b5de5; /* Primary violet — elegant and vibrant */
  --accent-dk: #6a3fc2; /* Deep violet for hover/focus states */
  --accent-bg: rgba(
    155,
    93,
    229,
    0.12
  ); /* Accent background for cards/buttons */
  --accent-border: rgba(155, 93, 229, 0.3); /* Subtle border glow */
  --accent-glow: rgba(155, 93, 229, 0.08); /* Soft glow effect */
  --card-shadow: rgba(2, 6, 23, 0.4); /* Slightly deeper for gaming depth */
  --card-border: var(--accent-border); /* Unified border tone */
  --card-glow: var(--accent-glow); /* Unified glow tone */

  --radius-lg: 16px;
  --radius-md: 12px;
  --gap: 16px;
  --max-read: 1100px;
  --sidebar-width: 200px;
  --sidebar-collapsed: 56px;
  --header-height: 80px;
  --nav-height: 60px;
  --nav-height-landscape: 50px;
  --header-height-landscape: 64px;
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-top: env(safe-area-inset-top);
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* vertical rhythm used between major sections for consistent spacing */
  --vr: clamp(12px, 3vw, 20px);

  --font-sm: clamp(0.875rem, 1vw, 1rem);
  --font-md: clamp(1rem, 1.2vw, 1.125rem);
  --font-lg: clamp(1.25rem, 2vw, 1.5rem);
  --content-gap: clamp(
    12px,
    1.2vw,
    20px
  ); /* gap between sidebar and main content */
  /* Hero thumbnail sizing (centralized values used across hero sections)
     These variables are overridden by media queries to control
     tablet/desktop sizing so Recent and other hero thumbs match. */
  --hero-thumb-min: 180px;
  --hero-thumb-width: min(260px, 22vw);
  /* Missing color fallbacks used elsewhere */
  --bg-1: #0f1117;
  --fg-1: rgba(228, 228, 231, 0.9);
  --text-light: rgba(228, 228, 231, 0.95);
}

/* -------------------------
   Responsive Navigation (fresh implementation)
   Mobile-first overlay + desktop persistent sidebar
   ------------------------- */

/* Base: overlay hidden off-canvas */
#menu-overlay {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: min(320px, 78%);
  max-width: 360px;
  height: calc(100vh - var(--header-height));
  transform: translateX(-100%);
  /* mobile: slide/opacity. width transition is declared for desktop where relevant */
  transition: transform 320ms var(--ease), opacity 220ms var(--ease);
  will-change: transform, width, opacity;
  /* Make sidebar transparent by default while keeping the backdrop blur.
     Specific states (mobile open / desktop expanded) will get a stronger
     translucent background so content remains readable. */
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
  /* Keep the sidebar under the header so it never overlaps the header UI */
  z-index: 90;
  overflow-y: auto;
}

/* Elegant scrollbar for the menu rail/overlay (WebKit + Firefox) */
#menu-overlay {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 93, 229, 0.9) rgba(255, 255, 255, 0.02);
}

#menu-overlay::-webkit-scrollbar {
  width: 10px;
}

#menu-overlay::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 999px;
  margin: 8px 0; /* create breathing room at top/bottom */
}

#menu-overlay::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(155, 93, 229, 0.95),
    rgba(106, 63, 194, 0.95)
  );
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  background-clip: padding-box; /* keep rounded border visible */
}

/* Keep a constant scrollbar gutter on desktop to avoid layout jumps when
   the sidebar is hovered. We visually hide the thumb when collapsed and
   reveal it on hover, but do not change the scrollbar width itself. */
#menu-overlay::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.92);
}

@media (min-width: 1024px) {
  /* Reserve a thin scrollbar gutter (WebKit) so the sidebar width doesn't
     reflow when the thumb appears. The thumb is transparent when collapsed
     and gains a visible style on hover. */
  #menu-overlay::-webkit-scrollbar {
    width: 10px; /* constant gutter */
  }

  /* Collapsed: keep gutter but hide the thumb visually (transparent). For
     Firefox, set scrollbar-color to transparent to achieve a similar effect. */
  .page-body.sidebar-collapsed #menu-overlay {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .page-body.sidebar-collapsed #menu-overlay::-webkit-scrollbar-thumb {
    background: transparent; /* invisible but occupies space */
  }

  /* On hover reveal a styled thumb without changing gutter width */
  .page-body.sidebar-collapsed #menu-overlay:hover {
    scrollbar-color: rgba(155, 93, 229, 0.95) rgba(0, 0, 0, 0.06);
  }

  .page-body.sidebar-collapsed #menu-overlay:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(
      180deg,
      rgba(155, 93, 229, 0.95),
      rgba(106, 63, 194, 0.95)
    );
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.12);
  }
}

/* When menu is open on mobile the page-body gets `.menu-open` */
.page-body.menu-open #menu-overlay {
  transform: translateX(0);
  /* Use the same translucent, glassy tint as the desktop expanded rail so
     mobile menu feels consistent while still showing page context. */
  background: rgba(12, 13, 20, 0.28); /* translucent tint of #0c0d14 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48);
  border-right: 1px solid rgba(255, 255, 255, 0.03);
}

@media (max-width: 1023px) {
  /* Mobile: overlay should start at viewport top and content sit just
     under the sticky header so there's no visible gap between header
     and the opened menu. */
  #menu-overlay {
    /* Place overlay at the very top and include header height as internal
       padding so the overlay content begins beneath the header. Use
       border-box so `height: 100vh` includes the padding and the menu
       doesn't exceed the viewport (prevents bottom clipping). */
    top: 0 !important;
    padding-top: var(--header-height) !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

#menu-overlay[aria-hidden="true"] {
  pointer-events: none;
  opacity: 0.98;
}
#menu-overlay[aria-hidden="false"] {
  pointer-events: auto;
}

#menu-overlay .menu-list {
  list-style: none;
  margin: 0;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#menu-overlay .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 10px;
  color: var(--fg-0);
  font-weight: 700;
  cursor: pointer;
  background: transparent;
}

/* Ensure anchor-based menu items inherit the menu color (fix About/Submit mismatch) */
#menu-overlay .menu-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#menu-overlay .menu-link .menu-text {
  color: inherit;
  font-weight: 700;
}

#menu-overlay .menu-item:focus {
  outline: none;
  box-shadow: 0 0 0 6px rgba(155, 93, 229, 0.06);
}

#menu-overlay .menu-emoji {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 1.15rem;
}

#menu-overlay .menu-text {
  opacity: 1;
  /* fade and slide labels with symmetric timing for expand/collapse */
  /* slightly shorter duration for snappier label motion while matching easing */
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  will-change: opacity, transform;
  white-space: nowrap;
}

/* Header toggle button */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
}

.menu-toggle i {
  font-size: 1.3rem;
  background: linear-gradient(135deg, #7302cf, #7e0496);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Desktop layout: persistent sidebar */
@media (min-width: 1024px) {
  /* sidebar collapsed by default on desktop; hover or expanded class shows full width */
  #menu-overlay {
    transform: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-collapsed);
    max-width: var(--sidebar-collapsed);
    height: calc(100vh - var(--header-height));
    /* allow vertical scrolling when content exceeds available height;
       allow visible overflow on the x-axis so the decorative right-side
       shadow (pseudo-element) can render outside the rail. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* smoother width transition and subtle shadow/backdrop changes */
    transition: width 360ms var(--ease), box-shadow 360ms var(--ease),
      backdrop-filter 360ms var(--ease);
    /* Desktop default: glassy tint using the site's base color (#0c0d14).
       Keep a subtle blur so the rail reads as glass over content. */
    background: rgba(12, 13, 20, 0.16) !important; /* #0c0d14 tinted */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    border-right: 1px solid rgba(255, 255, 255, 0.03);
  }

  /* Decorative right-side shadow to give the sidebar elegant depth on desktop.
     Implemented as a pseudo-element so it doesn't affect layout and can be
     tuned independently of the sidebar's box-shadow. */
  #menu-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    right: -18px; /* extend slightly beyond the rail */
    width: 18px;
    height: 100%;
    pointer-events: none;
    /* Add a combined dark + subtle light edge so the shadow reads on
       both dark and light backgrounds. z-index ensures it appears above
       nearby content but below the header (header z-index:100). */
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.18) 50%,
      rgba(255, 255, 255, 0.03) 85%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 0 10px 10px 0;
    mix-blend-mode: normal;
    z-index: 96;
  }

  /* Logo text styling: purple gradient, matches icon size and feels professional */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .logo .logo-text {
    font-family: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 800;
    line-height: 1;
    /* match icon height while staying responsive */
    font-size: clamp(18px, 3.2vw, 28px);
    background: linear-gradient(135deg, #7302cf, #7e0496);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.6px;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    text-shadow: 0 4px 18px rgba(106, 63, 194, 0.06);
  }

  /* Unified logo sizing: keeps icon and text proportional across pages
     Use clamp() so the logo scales gently on very small or large viewports. */
  .logo img,
  .logo .logo-icon,
  .logo-img {
    width: auto;
    height: clamp(20px, 3.2vw, 32px);
    max-height: 36px;
    object-fit: contain;
    vertical-align: middle;
  }

  .logo .logo-text,
  .logo-text {
    font-weight: 700;
    line-height: 1;
    font-size: clamp(16px, 2.6vw, 20px);
    letter-spacing: 0.4px;
    display: inline-block;
    vertical-align: middle;
  }
  /* When collapsed, reduce width and hide labels (default state) */
  .page-body.sidebar-collapsed #menu-overlay {
    width: var(--sidebar-collapsed);
  }

  /* Keep menu list full-width inside sidebar */
  #menu-overlay .menu-list {
    padding: 4px 6px; /* tighter padding on desktop */
    gap: 4px; /* reduce vertical space between items further */
  }

  /* More compact menu items on desktop: smaller padding and emoji size */
  #menu-overlay .menu-item {
    padding: 6px 6px;
    gap: 6px;
    border-radius: 6px;
  }

  #menu-overlay .menu-emoji {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 0.95rem;
  }

  /* Desktop: add hover/focus transitions and effects for menu items */
  #menu-overlay .menu-item {
    color: var(--fg-0);
    background: transparent;
    transition: background 160ms var(--ease), transform 180ms var(--ease),
      box-shadow 180ms var(--ease), color 140ms var(--ease);
    will-change: transform, background, box-shadow;
  }

  /* Keep container static; apply hover/focus effect only to the text */
  #menu-overlay .menu-item:hover,
  #menu-overlay .menu-item:focus {
    background: transparent;
  }

  /* no container transform on active */

  /* Text-level hover: color/gradient + slide for emphasis */
  #menu-overlay .menu-item:hover .menu-text,
  #menu-overlay .menu-item:focus .menu-text {
    display: inline-block; /* allow transform */
    transform: translateX(6px);
    transition: transform 180ms var(--ease), color 140ms var(--ease);
    background: linear-gradient(135deg, var(--accent), var(--accent-dk));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: inherit;
  }

  #menu-overlay .menu-item:active .menu-text {
    transform: translateX(3px) scale(0.998);
  }

  /* Labels fade when collapsed */
  .page-body.sidebar-collapsed #menu-overlay .menu-text {
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
  }

  /* Hover or explicit expanded class shows full width and labels. When
     hovered (or explicitly expanded) we make the rail translucent and
     let it overlay the main content rather than shifting the layout. */
  #menu-overlay:hover,
  .page-body.sidebar-expanded #menu-overlay {
    width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background: rgba(12, 13, 20, 0.28); /* translucent tint of #0c0d14 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48);
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    z-index: 95; /* sit above main but below header */
  }

  /* When the desktop rail is expanded we may darken the translucent
       background slightly so labels remain legible over page content. */
  .page-body.sidebar-expanded #menu-overlay {
    background: transparent;
  }

  /* Reveal labels with a small delay so the sidebar width expansion
       completes (or is visibly underway) before text slides in. This
       keeps the label reveal visually synchronized with the rail. */
  #menu-overlay:hover .menu-text,
  .page-body.sidebar-expanded #menu-overlay .menu-text {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    transition-delay: 32ms; /* short delay to keep reveal smooth without feeling laggy */
  }

  /* Hide the header menu toggle on larger screens; navigation is via hover */
  .menu-toggle {
    display: none;
  }

  /* Shift main content when sidebar present by adjusting layout margin
     so the sidebar does not overlap the page content. Use margin-left
     for a true layout shift (better for accessibility and stacking). */
  .page-body main {
    transition: margin-left 360ms var(--ease);
    margin-left: var(--sidebar-collapsed);
  }

  .page-body.sidebar-expanded main {
    /* Keep the main gutter stable when the rail expands — the rail will
       overlay the main content instead of shifting it. */
    margin-left: var(--sidebar-collapsed);
  }

  /* Ensure full-bleed sections (hero, widget, new-games) do not sit under the
     fixed sidebar on desktop. The standard full-bleed technique uses viewport
     centering (left:50% / margin-left:-50vw) which ignores the sidebar offset,
     so on desktop we shift the left origin and reduce the available width. */
  /* Keep outer wrappers truly full-bleed (edge-to-edge), and align the
     inner `.container` with the page gutter used by `main`. This avoids
     pushing the visible background away from the viewport edge while
     ensuring the content lines up with the main column and New Games. */
  .full-bleed.popular-outer,
  .full-bleed.widget-outer,
  .full-bleed.new-games-row {
    /* standard full-bleed technique: span viewport */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: none;
    padding-inline: clamp(10px, 3vw, 18px);
    box-sizing: border-box;
  }

  /* Align the inner container with the main content gutter so the visible
     content never hides under the sidebar. When collapsed, use the
     collapsed gutter; when expanded, use the expanded width. */
  .full-bleed .container {
    margin-left: var(--sidebar-collapsed);
    margin-right: 0;
    max-width: var(--max-read);
  }

  .page-body.sidebar-expanded .full-bleed .container {
    margin-left: var(--sidebar-width);
  }
}

html {
  font-family: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--font-md);
  background-color: var(--bg-0);
  color: var(--fg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    system-ui, sans-serif;
  background: linear-gradient(135deg, var(--bg-0), var(--bg-0));
  color: var(--fg-0);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  gap: var(--gap);
  box-sizing: border-box;
}

html,
body,
main {
  overscroll-behavior: contain;
}

main,
.games-grid {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x: hidden;
}

main::-webkit-scrollbar,
.games-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.games-grid {
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

main {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  overflow-y: auto;
}

@media (max-width: 1023px) {
  main {
    padding-top: var(--header-height);
  }
}

/* Mobile: compact menu spacing to match desktop density */
@media (max-width: 1023px) {
  #menu-overlay .menu-list {
    padding: 4px 6px;
    gap: 4px;
  }

  #menu-overlay .menu-item {
    padding: 6px 6px;
    gap: 6px;
    border-radius: 6px;
  }

  #menu-overlay .menu-emoji {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    font-size: 0.95rem;
  }

  /* Mobile: same text-level hover/press effect as desktop (touch uses :active) */
  #menu-overlay .menu-item:hover .menu-text,
  #menu-overlay .menu-item:focus .menu-text,
  #menu-overlay .menu-item:active .menu-text {
    display: inline-block; /* allow transform */
    transform: translateX(6px);
    transition: transform 180ms var(--ease), color 140ms var(--ease);
    background: linear-gradient(135deg, var(--accent), var(--accent-dk));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: inherit;
  }

  #menu-overlay .menu-item:active .menu-text {
    transform: translateX(3px) scale(0.998);
  }
}

/* -------------------------
   Utility / Accessibility
   ------------------------- */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

.hidden {
  display: none !important;
}

.container {
  max-width: var(--max-read);
  margin-inline: auto;
  padding-inline: 16px;
}

/* Prevent initial sidebar transition flicker while JS initializes.
   Pages should add `sidebar-collapsed` in HTML and JS will remove
   `.no-transitions` after setup to re-enable smooth transitions. */
.page-body.no-transitions #menu-overlay,
.page-body.no-transitions main,
.page-body.no-transitions .page-body,
.page-body.no-transitions .menu-toggle {
  transition: none !important;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

a:visited {
  color: color-mix(in srgb, var(--accent) 70%, black 30%);
}

a:hover,
a:focus {
  color: var(--accent-dk);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  outline: none;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--card-border);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------
   Shared Animations
   ------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 8px;
  max-height: 100dvh;
  height: var(--header-height);
  overflow: hidden;
  background: var(--glass-strong);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(168, 108, 240, 0.18);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Make header fixed on desktop so it remains stable while scrolling.
   Add equivalent top padding to `main` to prevent content from being
   covered by the fixed header. This only applies on wider screens. */
@media (min-width: 1024px) {
  header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 120;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }

  /* Ensure the page content starts below the fixed header on desktop */
  main {
    padding-top: calc(var(--header-height) + clamp(12px, 4vw, 16px));
  }
}

/* Ensure hero sections (Popular Now / Recently / Top Picks) are not
   visually hidden beneath the fixed header on desktop. Add a modest
   top margin so the first hero row sits comfortably below the header. */
@media (min-width: 1024px) {
  .hero-section {
    margin-top: calc(var(--header-height) + 10px);
  }
  /* Home tab: keep the hero section flush with the header (no extra margin) */
  #home .hero-section {
    margin-top: 0 !important;
  }
  /* If a full-bleed wrapper is used, make sure its inner container
     also receives the offset so alignment remains consistent. */
  .full-bleed.popular-outer,
  .full-bleed.widget-outer,
  .full-bleed.new-games-row {
    margin-top: calc(var(--header-height) + 10px);
  }
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Nunito", sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  color: var(--accent);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: var(--gap);
  letter-spacing: 0.5px;
}

/* Small icon that sits next to the site text logo */
.logo .logo-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 5px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* -------------------------
   Search (Responsive, No Junk)
   ------------------------- */
.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Header call-to-action (Suggest a Game) */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
  margin-left: 8px;
  box-shadow: 0 6px 18px rgba(106, 63, 194, 0.12);
}

/* Ensure header CTA never shows an underline, even on hover/focus */
.header-cta:hover,
.header-cta:focus,
.header-cta:active {
  text-decoration: none;
}

.header-cta:hover,
.header-cta:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(106, 63, 194, 0.16);
}

@media (max-width: 640px) {
  .header-cta {
    display: none; /* hide CTA on narrow screens to save space */
  }
}

.search-icon {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  /* purple gradient for icon glyphs (text/icon font) */
  background: linear-gradient(135deg, #7302cf, #7e0496);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  font-weight: 800;
  font-family: "Nunito", sans-serif;
  transition: transform 0.18s var(--ease);
}

.search-icon:hover {
  transform: scale(1.06);
}

/* Desktop: add a small, elegant right margin so the search icon breathes
   from nearby header elements (logo, menu toggle). Adjust with clamp()
   for responsiveness. */
@media (min-width: 1024px) {
  .search-container .search-icon {
    margin-right: clamp(8px, 1vw, 12px);
  }
}

.search-input {
  width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg-0);
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  border-radius: var(--radius-md);
  transition: all 0.22s var(--ease);
}

.search-container.expanded .search-input {
  width: clamp(160px, 40vw, 180px);
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.72));
  border: 1.5px solid var(--accent-dk);
  backdrop-filter: blur(6px);
  opacity: 1;
  pointer-events: auto;
}

main {
  flex: 1;
  padding: clamp(12px, 4vw, 16px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp 0.3s var(--ease) forwards;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

main > section {
  margin-block-end: 0;
}

#home {
  margin-block-end: 0;
}

.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.tab-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------
   Section Headings (Responsive Animation)
   ------------------------- */
.tab-content h2 {
  margin-block-end: clamp(10px, 3vw, 12px);
  color: var(--accent-dk);
  font-weight: 800;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);

  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp 0.4s var(--ease) forwards;
}

/* Unified heading styles for consistent alignment and appearance */
.unified-heading {
  margin-block-start: clamp(12px, 4vw, 16px);
  margin-block-end: clamp(8px, 2vw, 12px);
  color: var(--accent-dk);
  font-weight: 800;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  line-height: 1.12;
  max-width: var(--max-read);
  margin-left: 0;
  margin-right: auto;
  padding-inline: 0;
  box-sizing: border-box;
  text-align: left;
}

/* Make headers in full-bleed sections touch the edges */
.full-bleed .unified-heading {
  margin-left: calc(-1 * clamp(12px, 4vw, 24px));
  margin-right: calc(-1 * clamp(12px, 4vw, 24px));
  padding-left: clamp(12px, 4vw, 24px);
  padding-right: clamp(12px, 4vw, 24px);
}

/* Center hero sections on mobile devices */
@media (max-width: 768px) {
  .full-bleed.popular-outer {
    position: static;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding-inline: 16px;
  }

  .full-bleed .unified-heading {
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

.unified-heading .fire-icon {
  display: inline-block;
  margin-right: 8px;
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
}

.unified-heading .popular-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Slightly smaller headings on very small screens to avoid overpowering */
@media (max-width: 420px) {
  .unified-heading {
    padding-inline: 12px;
    font-size: clamp(1.2rem, 5vw, 1.4rem);
  }
}

.tab-content p {
  color: var(--fg-0);
  opacity: 0.95;
  margin-block-end: clamp(10px, 3vw, 12px);
  max-width: 62ch;
}

.games-grid,
.featured-games,
.categories-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: start;
  min-width: 0;
}

/* See All (games tab) should show square thumbnails in the grid view.
   Apply a square aspect ratio to the popular-game-item media so tiles
   render as squares regardless of source media dimensions. */
.games-grid.see-all-grid .popular-game-item {
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
}

.games-grid.see-all-grid .popular-game-item .popular-video,
.games-grid.see-all-grid .popular-game-item img.popular-video {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.games-grid.see-all-grid .popular-game-wrapper {
  display: block;
}

/* Elegant spacing and card frame for See All grid items */
.games-grid.see-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; /* consistent breathing room */
  padding: 12px; /* pad the grid inside the tab */
  align-items: start;
  box-sizing: border-box;
}

.games-grid.see-all-grid .popular-game-wrapper {
  padding: 8px; /* inner padding so the card feels framed */
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0)
  );
  box-shadow: 0 6px 22px rgba(2, 6, 23, 0.5);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.games-grid.see-all-grid .popular-game-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.58);
}

.games-grid.see-all-grid .popular-game-item {
  border-radius: 10px; /* keep media rounded inside the framed wrapper */
  overflow: hidden;
}

/* See All: show overlay only on hover and hide the play button inside overlay */
.games-grid.see-all-grid .popular-overlay {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  pointer-events: none; /* don't allow clicks on the overlay in grid */
  justify-content: center; /* center the title */
  padding: 8px 10px;
}

.games-grid.see-all-grid .popular-game-wrapper:hover .popular-overlay,
.games-grid.see-all-grid .popular-game-wrapper:focus-within .popular-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: none; /* overlay remains non-interactive (no button) */
}

/* Hide play button in See All overlay; only show title */
.games-grid.see-all-grid .popular-overlay .play-btn {
  display: none !important;
}

/* Ensure title remains visible and centered when the play button is hidden */
.games-grid.see-all-grid .popular-overlay h4 {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--fg-0);
}

/* All Games view: show a roomy 6-column grid on large screens, with
   responsive fallbacks for smaller viewports. This keeps All Games
   visually spacious compared to the tighter `see-all-grid`. */
.games-grid.games-grid--all {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 12px;
  box-sizing: border-box;
}

/* When a curated/menu-triggered view uses the roomy 6-col layout
   ensure each tile is square and inner media fills and crops to the
   square card. This overrides the landscape-focused rules used
   by the homepage Popular Now layout. */
.games-grid.games-grid--all .popular-game-wrapper,
.games-grid.games-grid--all .game-item,
.games-grid.games-grid--all .popular-game-item {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: block !important;
}

.games-grid.games-grid--all .popular-game-item .popular-video,
.games-grid.games-grid--all .popular-game-item img.popular-video,
.games-grid.games-grid--all .popular-game-wrapper .popular-video,
.games-grid.games-grid--all img.popular-video,
.games-grid.games-grid--all .game-placeholder img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

@media (min-width: 640px) {
  .games-grid.games-grid--all {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .games-grid.games-grid--all {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1100px) {
  .games-grid.games-grid--all {
    grid-template-columns: repeat(
      6,
      1fr
    ); /* target: 6 items per row on large screens */
  }
}
/* -------------------------
   Popular Now Section (Prominent, Horizontal Scroll)
   ------------------------- */
.popular-now-section {
  max-width: none;
  /* Ensure Popular Now fills the available content width and does not shift left */
  margin: 0;
  padding-inline: 0;
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.8));
  border-radius: var(--radius-lg);
  /* Make Popular Now visually match the widget-inner: centered, padded card */
  max-width: var(--max-read);
  margin-inline: auto;
  padding: 10px 16px;
  box-sizing: border-box;
  /* Use consistent vertical rhythm for balanced spacing */
  margin-block-end: var(--vr);
}

.popular-scroll {
  display: flex;
  gap: clamp(10px, 3vw, 14px);
  overflow-x: auto;
  padding: 0; /* remove extra horizontal padding so featured item can span full width */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  width: 100%;
  align-items: stretch;
}

.popular-scroll .popular-game-item {
  flex: 0 0 auto;
  width: min(260px, 72vw);
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  background: linear-gradient(
    135deg,
    rgba(12, 13, 20, 0.6),
    rgba(12, 13, 20, 0.5)
  );
}

/* Make featured/main item fill full width (override earlier min-width rules) */
.popular-scroll .popular-main-item {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Playgama-like Popular Now behavior: ensure featured item spans full content width
   and the next two items stack directly underneath as rectangular cards */
.popular-now-section {
  padding-inline: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box;
}

.popular-scroll {
  padding: 0 !important; /* remove any horizontal padding that could offset the featured card */
  gap: clamp(10px, 3vw, 14px);
  width: 100%;
  align-items: stretch;
}

.popular-main-item {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Force the two smaller items to sit under the featured card and be rectangular */
.popular-row {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  row-gap: 6px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.popular-row .popular-game-item {
  min-width: 0 !important;
  width: 100% !important;
}

.popular-row .popular-game-item .popular-video,
.popular-row .popular-game-item img.popular-video {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: 160px !important;
  object-fit: cover !important;
}

/* Tighter spacing between featured tile and the two smaller items */
.popular-main-item {
  margin-bottom: 6px !important; /* small gap between featured and sub-items */
}

.popular-row {
  margin-top: 0 !important; /* ensure row sits directly beneath featured tile */
}

/* Prevent square or tall cards: enforce landscape aspect ratio for sub-items on wider viewports too */
.popular-row .popular-game-item {
  padding: 0 !important;
  max-width: none !important;
  display: block !important;
}

@media (min-width: 481px) {
  .popular-row .popular-game-item .popular-video,
  .popular-row .popular-game-item img.popular-video {
    aspect-ratio: 16 / 9 !important;
    max-height: 200px !important;
    height: auto !important;
  }
}

.popular-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.popular-header .fire-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  object-fit: contain;
  line-height: 1;
  vertical-align: middle;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: initial !important; /* restore native emoji rendering */
  color: inherit !important;
  mix-blend-mode: normal !important;
  transform: translateY(2px); /* nudge emoji visually to align with text */
}

/* 3D icon replacement: style small inline icons used in headers and menu */
.icon-3d {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

/* slightly larger icons used in the main menu on desktop */
@media (min-width: 1024px) {
  #menu-overlay .icon-3d {
    width: 22px;
    height: 22px;
  }
}

/* New Games header icon */
.new-header .new-emoji {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  object-fit: contain;
  vertical-align: middle;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
}

/* AI glyph used in headers via Remix Icon font */
.ai-emoji {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: 1.05rem; /* ensure icon scales nicely with text */
  line-height: 1;
  vertical-align: middle;
  color: var(--accent); /* tintable via CSS variables */
}

/* Featured gem emoji */
.featured-emoji {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: middle;
  filter: drop-shadow(0 0 8px rgba(102, 205, 255, 0.28));
}

/* Widget lightning emoji ("Your Next Obsession Starts Here") */
.widget-emoji {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.18));
}

/* Multiplayer handshake emoji */
.multi-emoji {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(120, 200, 120, 0.12));
}

/* Top Picks glowing star */
.top-emoji {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.popular-game-item {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease),
    box-shadow 0.28s var(--ease);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 0;
  margin: 0px;
}
/* Thumbnail cards used in horizontal scroll rows */
.thumb-card {
  position: relative;
  display: inline-block;
  border-radius: calc(var(--radius-md));
  overflow: hidden;
  background: rgba(12, 13, 20, 0.04);
}

.thumb-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-card .thumb-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px;
  /* Match the featured/main thumbnail overlay used above */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86), transparent);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  /* Hidden by default; reveal on hover/focus for a cleaner UI */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.thumb-card .thumb-overlay h4 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 0.88rem;
}

/* Left-align small thumbnail text inside hero sections (Popular Now, Top Picks, Featured)
   Use a specific selector so other thumbnail rows (if any) remain unaffected. */
.hero-section .thumb-card .thumb-overlay,
.hero-section .popular-scroll .thumb-card .thumb-overlay,
.hero-section .top-picks-scroll .thumb-card .thumb-overlay,
.hero-section .featured-grid .thumb-card .thumb-overlay {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding-left: 10px;
}

.hero-section .thumb-card .thumb-overlay h4 {
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Left-align overlay text for small thumbnails inside hero sections
   Ensure titles read from the left and any small play/button sits to the right. */
.popular-now-section .scroll-row .thumb-card .thumb-overlay,
.popular-now-section .popular-sub-thumbs .thumb-overlay,
.popular-now-section .popular-scroll .thumb-card .thumb-overlay,
.hero-subsection .scroll-row .thumb-card .thumb-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.thumb-card .thumb-overlay h4 {
  text-align: center;
  width: 100%;
}

/* Reveal overlay when user hovers or focuses the thumbnail (keyboard accessible) */
.thumb-card:hover .thumb-overlay,
.thumb-card:focus .thumb-overlay,
.thumb-card:focus-within .thumb-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure overlays sit directly over the thumbnail (covering its bottom area).
   Use a solid, slightly lighter-than-#0c0d14 base that fades upward. Do NOT use
   glass/backdrop effects — the overlay should be a clear, dark gradient. */
.popular-game-item .popular-overlay,
.game-placeholder .popular-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* sit flush at the bottom of the media */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  z-index: 60;
  pointer-events: auto;
  background: linear-gradient(
    to top,
    rgba(12, 13, 20, 0.98),
    rgba(12, 13, 20, 0)
  );
  box-shadow: none;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Keep the thumbnail strip visually below the main media and under overlays */
.popular-sub-thumbs {
  z-index: 1;
  margin-top: 8px;
}

/* Skeleton / shimmer placeholder for slow networks (improved contrast for dark backgrounds) */
.loading .popular-video,
.game-placeholder.loading img,
.game-placeholder.loading video,
.popular-game-item.loading .popular-video {
  /* grey texture with horizontal motion */
  background: linear-gradient(
    90deg,
    rgba(80, 80, 80, 0.8) 25%,
    rgba(100, 100, 100, 0.8) 50%,
    rgba(80, 80, 80, 0.8) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-bg 2s infinite;
  position: relative;
  color: transparent;
  pointer-events: none;
}

.loading .popular-video::after,
.game-placeholder.loading img::after,
.game-placeholder.loading video::after,
.popular-game-item.loading .popular-video::after {
  content: "";
  position: absolute;
  inset: 0;
  /* brighter shimmer for better visibility */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  transform: translateX(-100%);
  animation: shimmer 1s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen; /* help shimmer show on dark backgrounds */
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Hide overlays while media is loading to avoid visual flicker */
.popular-game-item.loading .popular-overlay {
  opacity: 0;
  pointer-events: none;
}

/* When media finishes loading, mark media as visible */
.popular-video.loaded,
.game-placeholder img.loaded {
  opacity: 1;
  transition: opacity 220ms ease-in;
}

/* -------------------------
   Reusable skeleton utilities
   ------------------------- */
:root {
  --skeleton-bg: rgba(40, 40, 44, 0.95);
  --skeleton-shimmer: rgba(255, 255, 255, 0.1);
  --skeleton-radius: 8px;
}

/* Base skeleton placeholder (can be applied to any element) */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(80, 80, 80, 0.8) 25%,
    rgba(100, 100, 100, 0.8) 50%,
    rgba(80, 80, 80, 0.8) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-bg 1s infinite;
  color: transparent !important;
  pointer-events: none;
}

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

/* Text-like skeletons */
.skeleton-text {
  height: 12px;
  border-radius: 6px;
  width: 100%;
  max-width: 100%;
}
.skeleton-title {
  height: 20px;
  border-radius: 8px;
  width: 70%;
}
.skeleton-subtitle {
  height: 14px;
  border-radius: 6px;
  width: 55%;
}

/* Avatar / square */
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* Button */
.skeleton-btn {
  height: 32px;
  width: 90px;
  border-radius: 999px;
}

/* Image placeholder - preserve aspect using CSS variables if desired */
.skeleton-image {
  width: 100%;
  height: auto;
  border-radius: var(--skeleton-radius);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

.popular-row .popular-game-item {
  margin: 0px;
  max-width: 100%;
}

.popular-main-item {
  width: 100%;
  margin-bottom: clamp(4px, 1vw, 8px);
}

.popular-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: clamp(8px, 2vw, 16px);
  margin-bottom: clamp(8px, 2vw, 16px);
  margin: 0px;
  padding: 0px clamp(8px, 2vw, 16px);
  justify-items: stretch;
  /* Removed debug border and rely on card shadows/borders for styling */
}

@media (max-width: 480px) {
  .popular-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.popular-row .popular-game-item {
  /* width: 100%; */
  min-width: 250px;
  max-width: 100%;
  border-radius: var(--radius-md);
  padding: 0 clamp(8px, 2vw, 16px);
}

.popular-row .popular-video {
  height: clamp(120px, 15vw, 160px);
}

.popular-game-item:hover {
  /* Avoid translating the parent to prevent layout shift —
     keep the interaction focused on the media element instead. */
  transform: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
}

.popular-game-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: stretch;
  width: 100%;
  height: 100%;
  position: relative;
}

.popular-game-info {
  text-align: left;
  padding: 8px;
}

.popular-game-info h4 {
  margin: 0 0 4px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-0);
}

.popular-game-info .play-btn {
  background: linear-gradient(135deg, #8a2be2, #a855f7);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  border: none;
  font-size: 0.8rem;
}

.popular-game-info .play-btn:hover {
  background: linear-gradient(135deg, #a855f7, #8a2be2);
  transform: scale(1.05);
}

.popular-video {
  width: 100%;
  height: clamp(200px, 25vw, 280px);
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Popular scroll container: mobile-first horizontal scroll with snap */
.popular-scroll {
  display: flex;
  gap: clamp(10px, 3vw, 14px);
  overflow-x: auto;
  padding: 12px 8px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.popular-scroll {
  width: 100%;
  align-items: stretch;
}

.popular-scroll .popular-game-item {
  flex: 0 0 auto;
  width: min(260px, 72vw);
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  background: linear-gradient(
    135deg,
    rgba(12, 13, 20, 0.6),
    rgba(12, 13, 20, 0.5)
  );
}

.popular-main-item {
  width: min(340px, 92vw);
}

.popular-scroll .popular-video,
.popular-scroll img.popular-video {
  height: clamp(140px, 36vw, 200px);
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Featured / main popular item: bigger, more prominent and responsive */
.popular-main-item {
  width: min(520px, 96vw);
  max-width: 960px;
  border-radius: calc(var(--radius-lg) + 4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  margin-bottom: 12px;
}

/* Featured/main tile base sizing (mobile-first). We keep this compact so
   mobile layout remains unchanged. The secondary featured tile will be
   hidden by default and revealed on desktop. */
.popular-main-item {
  width: min(520px, 96vw);
  max-width: 960px;
  border-radius: calc(var(--radius-lg) + 4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  margin-bottom: 12px;
  box-sizing: border-box;
}

/* Secondary featured tile: keep hidden on mobile to preserve existing
   mobile layout (single big featured card). */
.popular-main-item--secondary {
  display: none;
}

/* Tertiary featured tile: keep hidden on mobile; reveal on desktop */
.popular-main-item--tertiary {
  display: none;
}

/* Desktop: lay out the featured slot as a 2-column grid so two equal
   featured thumbnails appear side-by-side. Be specific to avoid being
   overridden by other popular-* rules. */
@media (min-width: 1024px) {
  .popular-now-section .popular-inner .featured-slot {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(10px, 2vw, 20px) !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* If a tertiary featured tile exists, expand to three columns. */
  .popular-now-section
    .popular-inner
    .featured-slot:has(.popular-main-item--tertiary) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* Reveal the secondary featured tile on desktop and ensure both
     featured tiles fill their grid cell. Use higher specificity to
     prevent accidental hiding by other rules. */
  .popular-now-section
    .popular-inner
    .featured-slot
    .popular-main-item--secondary {
    display: block !important;
  }

  .popular-now-section .popular-inner .featured-slot > .popular-main-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure left/right placement is deterministic: primary on left, secondary on right */
  .popular-now-section
    .popular-inner
    .featured-slot
    > .popular-main-item:first-child {
    grid-column: 1 / 2 !important;
  }
  .popular-now-section
    .popular-inner
    .featured-slot
    > .popular-main-item.popular-main-item--secondary {
    grid-column: 2 / 3 !important;
  }
  .popular-now-section
    .popular-inner
    .featured-slot
    > .popular-main-item.popular-main-item--tertiary {
    grid-column: 3 / 4 !important;
  }

  /* Make sure overlays and media adapt to the reduced horizontal
     space when two featured tiles are side-by-side. */
  .popular-now-section
    .popular-inner
    .featured-slot
    .popular-main-item
    .popular-video,
  .popular-now-section
    .popular-inner
    .featured-slot
    .popular-main-item
    img.popular-video {
    height: clamp(180px, 22vw, 340px) !important;
    object-fit: cover !important;
  }

  /* Apply Popular Now blueprint to other hero subsections on desktop */
  .featured-games-section .featured-inner .featured-slot,
  .new-games-section .new-inner .featured-slot,
  .multiplayer-section .multi-inner .featured-slot,
  .top-picks-section .top-picks-inner .featured-slot {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(12px, 2vw, 20px) !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Expand these section featured-slots to three columns only when a
     tertiary featured tile exists. This prevents reserving empty space
     when only two featured tiles are present. */
  .featured-games-section
    .featured-inner
    .featured-slot:has(.popular-main-item--tertiary),
  .new-games-section
    .new-inner
    .featured-slot:has(.popular-main-item--tertiary),
  .multiplayer-section
    .multi-inner
    .featured-slot:has(.popular-main-item--tertiary),
  .top-picks-section
    .top-picks-inner
    .featured-slot:has(.popular-main-item--tertiary) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* Reveal any secondary featured tile inside these sections on desktop */
  .featured-games-section
    .featured-inner
    .featured-slot
    .popular-main-item--secondary,
  .new-games-section .new-inner .featured-slot .popular-main-item--secondary,
  .multiplayer-section
    .multi-inner
    .featured-slot
    .popular-main-item--secondary,
  .top-picks-section
    .top-picks-inner
    .featured-slot
    .popular-main-item--secondary {
    display: block !important;
  }

  /* Ensure deterministic left/right placement */
  .featured-games-section
    .featured-inner
    .featured-slot
    > .popular-main-item:first-child,
  .new-games-section .new-inner .featured-slot > .popular-main-item:first-child,
  .multiplayer-section
    .multi-inner
    .featured-slot
    > .popular-main-item:first-child,
  .top-picks-section
    .top-picks-inner
    .featured-slot
    > .popular-main-item:first-child {
    grid-column: 1 / 2 !important;
  }
  .featured-games-section
    .featured-inner
    .featured-slot
    > .popular-main-item.popular-main-item--secondary,
  .new-games-section
    .new-inner
    .featured-slot
    > .popular-main-item.popular-main-item--secondary,
  .multiplayer-section
    .multi-inner
    .featured-slot
    > .popular-main-item.popular-main-item--secondary,
  .top-picks-section
    .top-picks-inner
    .featured-slot
    > .popular-main-item.popular-main-item--secondary {
    grid-column: 2 / 3 !important;
  }

  .featured-games-section
    .featured-inner
    .featured-slot
    > .popular-main-item.popular-main-item--tertiary,
  .new-games-section
    .new-inner
    .featured-slot
    > .popular-main-item.popular-main-item--tertiary,
  .multiplayer-section
    .multi-inner
    .featured-slot
    > .popular-main-item.popular-main-item--tertiary,
  .top-picks-section
    .top-picks-inner
    .featured-slot
    > .popular-main-item.popular-main-item--tertiary {
    grid-column: 3 / 4 !important;
  }
}

/* Make featured thumbnails in other hero sections match Popular Now height
   on desktop so the two large tiles have equal height across sections. */
@media (min-width: 1024px) {
  .featured-games-section
    .featured-inner
    .featured-slot
    .popular-main-item
    .popular-video,
  .featured-games-section
    .featured-inner
    .featured-slot
    .popular-main-item
    img.popular-video,
  .new-games-section
    .new-inner
    .featured-slot
    .popular-main-item
    .popular-video,
  .new-games-section
    .new-inner
    .featured-slot
    .popular-main-item
    img.popular-video,
  .multiplayer-section
    .multi-inner
    .featured-slot
    .popular-main-item
    .popular-video,
  .multiplayer-section
    .multi-inner
    .featured-slot
    .popular-main-item
    img.popular-video,
  .top-picks-section
    .top-picks-inner
    .featured-slot
    .popular-main-item
    .popular-video,
  .top-picks-section
    .top-picks-inner
    .featured-slot
    .popular-main-item
    img.popular-video {
    height: clamp(220px, 28vw, 420px) !important;
    /* cap to the same visual maximum as Popular Now */
    max-height: 420px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}

.popular-main-item .popular-video,
.popular-main-item img.popular-video {
  height: clamp(220px, 40vw, 420px);
  width: 100%;
  object-fit: cover;
  transition: height 0.18s var(--ease), transform 0.18s var(--ease);
}

.popular-main-item .popular-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 60 !important;
  /* Use the same overlay blueprint as small thumbnails to avoid visual gaps */
  padding: 8px 10px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;

  justify-content: space-between !important;
  pointer-events: auto !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.86),
    transparent
  ) !important;
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
}

.popular-main-item .popular-overlay h4 {
  /* Reduced font-size for better balance on big thumbnails */
  font-size: clamp(0.95rem, 2.6vw, 1.25rem) !important;
  font-weight: 800;
  margin: 0;
}

/* Stronger, non-transparent overlay for small thumbnail cards
   Targets thumbnail rows and scroll containers so featured/main
   overlays are not affected (they have their own rules). */
.popular-row .popular-game-item .popular-overlay,
.scroll-row .popular-game-item .popular-overlay,
.top-picks-scroll .popular-game-item .popular-overlay,
.category-scroll .popular-game-item .popular-overlay,
.widget-card .popular-game-item .popular-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important; /* anchor overlay to bottom of thumbnail */
  z-index: 60 !important;
  background: rgba(6, 8, 12, 0.94) !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  pointer-events: auto !important;
}

.popular-row .popular-game-item .popular-overlay h4,
.scroll-row .popular-game-item .popular-overlay h4,
.category-scroll .popular-game-item .popular-overlay h4,
.category-scroll .game-item .game-overlay h4,
.category-scroll .game-placeholder .game-overlay h4 {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.popular-row .popular-game-item .popular-overlay .play-btn,
.scroll-row .popular-game-item .popular-overlay .play-btn,
.top-picks-scroll .popular-game-item .popular-overlay .play-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

/* Ensure all text inside the Popular Now section is left-aligned
   This overrides earlier center-aligned rules and keeps button/layout
   positioning intact (overlay uses flex to place the play button). */
.popular-now-section .popular-game-info,
.popular-now-section .popular-game-info h4,
.popular-now-section .popular-overlay h4,
.popular-now-section .popular-header h2 {
  text-align: left !important;
}

/* Make the Playgama widget match the visible width of the Popular Now content
   by constraining the inner scroll/content area to the same max-width and
   centering it. This keeps both elements aligned responsively. */
.popular-now-section .popular-scroll {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-inline: 0; /* inner scroll uses the parent's padding now */
}

/* The widget is wrapped in a .container; remove extra padding so it aligns
   exactly with the Popular Now content (no extra left/right margin). */
.hero-section .container {
  margin: 0px;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#widget-playgama {
  /* Default: treat the widget as a block-level content area so any
     provider-injected cards stack vertically and fill the container.
     Specific horizontal scroll / card-row modes are enabled only when
     the widget receives the `.widget-card.widget-scroll` classes. */
  display: block;
  margin: 0;
  overflow-x: auto;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* Full-bleed outer wrapper: override the max-width and allow the widget to span the viewport
   Use a well-supported technique to expand to 100vw while staying horizontally centered */
.full-bleed.widget-outer,
.full-bleed.popular-outer,
.full-bleed.new-games-row {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: none;
  /* give the full-bleed wrapper responsive left/right gutters so the
     visible widget area doesn't touch the viewport edges on small screens.
     Uses clamp() to keep a comfortable margin across breakpoints. */
  padding-inline: clamp(6px, 1.6vw, 8px);
  box-sizing: border-box;
}

/* Inner wrapper used to align injected widget content to the site's content grid
   Keeps header aligned with other sections while letting outer element be full-bleed.
   Background removed so the widget visually blends with adjacent sections. */
.widget-inner {
  max-width: 100%;
  margin-inline: 0;
  padding: 0;
  box-sizing: border-box;
  background: transparent; /* removed colored skeleton background */
  border-radius: var(--radius-lg);
  margin-block-end: var(--vr);
  min-height: 200px; /* Ensure container is visible during loading */
  overflow-x: auto;
}

/* Ensure the inner, content-aligned widget stretches to the available width inside the full-bleed area */
.full-bleed.widget-outer > #widget-playgama.widget-inner {
  width: 100%;
}

/* Inner widget should not have a solid background color by default */
#widget-playgama.widget-inner {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 10px 0; /* remove horizontal padding so content can touch edges */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  overflow-x: auto; /* allow horizontal scrolling if the widget requests it */
  max-width: 100%;
  margin-inline: 0;
  width: 100%;
}

/* Ensure widget height matches the large featured/main thumbnail.
   Uses the same responsive clamp used by .popular-main-item .popular-video
   so the widget visually aligns with the big thumbnail across breakpoints. */
#widget-playgama.widget-inner {
  min-height: clamp(220px, 40vw, 420px);
}

/* Make any injected iframe/div fill the widget height so the embed appears
   the same size as the featured thumbnail. */
#widget-playgama.widget-inner > *,
#widget-playgama.widget-inner iframe,
#widget-playgama.widget-inner > iframe,
#widget-playgama.widget-inner > div {
  height: 100% !important;
  min-height: inherit !important;
  box-sizing: border-box !important;
}

@media (min-width: 1024px) {
  /* On desktop force a consistent height equal to the featured main item */
  #widget-playgama.widget-inner {
    min-height: 420px;
  }
}

/* Widget as a native game tile: match tile visuals and spacing so the
   widget reads as part of the same grid/flow as .game-item / .game-placeholder */
#widget-playgama.widget-inner.widget-card {
  /* use the same visual language as game tiles */
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.36);
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.72));
  padding: 8px 12px; /* modest inner padding so injected content has breathing room */
  /* Match spacing used between other major sections (tight but breathable) */
  margin-top: clamp(12px, 4vw, 16px);
  margin-bottom: clamp(12px, 4vw, 16px);
  display: block;
  align-self: stretch;
  overflow: hidden;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

/* subtle divider on the widget to separate it from the section above without
   using a heavy rule; helps with hierarchy and reads as intentional spacing */
#widget-playgama.widget-inner.widget-card {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Prevent unwanted hover transform that can shift surrounding layout */
#widget-playgama.widget-card:hover {
  transform: none;
}

/* Ensure provider-injected elements fill the tile cleanly */
#widget-playgama.widget-card > * {
  /* Default: make children fill the widget when not in scroll mode */
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Horizontal scroll mode: display children in a row and allow them to scroll */
#widget-playgama.widget-card.widget-scroll {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(8px, 3vw, 12px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-top: 8px; /* keep a bit of vertical padding inside the tile */
  padding-bottom: 8px;
}

#widget-playgama.widget-card.widget-scroll > * {
  /* Let each injected card size itself horizontally and remain inline */
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 200px; /* reasonable default tile width; adjust if you prefer */
  scroll-snap-align: start;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

#widget-playgama.widget-inner > * {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Playgama widget header (visible title above the embed) */

.widget-header:focus,
.widget-header:hover {
  opacity: 0.95;
}

/* Make the hero section use the same vertical spacing as other top-level sections
   so the widget sits flush vertically with headings and content blocks. */
.hero-section {
  margin-block-start: clamp(12px, 4vw, 16px);
  margin-block-end: 0;
  display: block;
}

/* Hero background reset: remove temporary red debug background */
.hero-section {
  background-color: transparent !important;
}

.hero-section .container {
  display: flex;
  flex-direction: column; /* stack header above widget */
  align-items: stretch; /* allow children (header + widget) to fill width */
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure the hero container has no inner horizontal padding so its
   child sections (Popular Now, Top Picks, New Games, etc.) can reach
   edge-to-edge. Keep vertical padding if needed. */
.hero-section .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
}

/* Also remove horizontal padding from direct children of the hero
   container to avoid inner gutters created by child wrappers. */
.hero-section .container > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Unified Hero Subsection Styles
   - Apply to any subsection that opts into the Popular Now blueprint by
     adding the `hero-subsection` class in the markup/JS.
   - Keep rules intentionally small and use higher-specificity media queries
     for desktop layout adjustments so they don't conflict with existing
     per-section rules unless the section specifically opts in. */
.hero-subsection {
  margin-block-end: var(--vr);
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.8));
  border-radius: var(--radius-lg);
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
}

.hero-subsection .featured-slot {
  /* Mobile-first: stack content; desktop will switch to two-column grid */
  display: block;
  gap: clamp(10px, 3vw, 14px);
}

.hero-subsection .scroll-row,
.hero-subsection .top-picks-scroll,
.hero-subsection .popular-scroll,
.hero-subsection .new-games-scroll,
.hero-subsection .multi-scroll {
  display: flex;
  gap: clamp(10px, 3vw, 14px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 10px 8px;
}

@media (min-width: 1024px) {
  /* On desktop apply the Popular Now two-column featured layout to any
     subsection that opts in via `.hero-subsection`. This mirrors the
     `.popular-now-section` blueprint while remaining easy to override. */
  .hero-subsection .featured-slot {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(12px, 2vw, 20px) !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* If any hero subsection actually includes a tertiary featured tile,
     expand that subsection to three columns so the layout only reserves
     space when the item exists. */
  .hero-subsection .featured-slot:has(.popular-main-item--tertiary) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .hero-subsection .popular-main-item,
  .hero-subsection .popular-main-item .popular-video,
  .hero-subsection .popular-main-item img.popular-video {
    height: clamp(220px, 28vw, 420px) !important;
    max-height: 420px !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  /* Make the small thumbnail cards inside hero subsections rectangular (16:9)
     on desktop so all hero thumb strips match Recent/Popular sizing. */
  .hero-section .thumb-card {
    aspect-ratio: 16 / 9 !important;
    min-width: 160px !important;
    width: min(240px, 20vw) !important;
    height: auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: inline-block !important;
  }

  .hero-section .thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Recent row: ensure it remains a horizontal flex strip on desktop.
     Some popular-scroll rules switch to grid on desktop; override that
     for the recently-played instance so it stays horizontally scrollable. */
  .recent-games-section .recent-scroll.popular-scroll {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 6px !important;
  }

  .recent-games-section .recent-scroll .thumb-card {
    aspect-ratio: 4 / 3 !important;
    min-width: 96px !important;
    width: min(160px, 18vw) !important;
    flex: 0 0 auto !important;
  }
  /* Make thumb-cards inside other hero subsections match Recently Played sizing */
  .hero-section .scroll-row .thumb-card,
  .hero-section .popular-scroll .thumb-card,
  .hero-section .top-picks-scroll .thumb-card,
  .hero-section .featured-grid .thumb-card,
  .hero-section .new-games-scroll .thumb-card,
  .hero-section .multiplayer-scroll .thumb-card {
    aspect-ratio: 16 / 9 !important;
    min-width: 180px !important;
    width: min(260px, 22vw) !important;
    flex: 0 0 auto !important;
  }

  /* Also ensure popular-row / popular-game-item thumbnails match the same sizing
     so two-item rows or non-scrolling rows look consistent with the recent row. */
  .popular-row .popular-game-item,
  .popular-scroll .popular-game-item,
  .hero-section .popular-game-wrapper {
    aspect-ratio: 16 / 9 !important;
    min-width: 180px !important;
    width: min(260px, 22vw) !important;
    flex: 0 0 auto !important;
  }

  .popular-row .popular-game-item .popular-video,
  .popular-row .popular-game-item img.popular-video,
  .popular-game-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Ensure any image inside these thumb-cards fills and crops correctly */
  .hero-section .scroll-row .thumb-card img,
  .hero-section .popular-scroll .thumb-card img,
  .hero-section .top-picks-scroll .thumb-card img,
  .hero-section .featured-grid .thumb-card img,
  .hero-section .new-games-scroll .thumb-card img,
  .hero-section .multiplayer-scroll .thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Ensure both secondary and tertiary featured tiles are revealed on desktop
     when present in the DOM. Kept generic so each section can control which
     items it appends via JS. */
  .popular-main-item--secondary,
  .popular-main-item--tertiary {
    display: block !important;
  }
}

/* Tablet: show two featured columns (>=768px && <=1023px)
   Ensure hero subsections reveal the secondary featured tile on tablet
   while keeping tertiary hidden (tertiary only appears on desktop >=1024px). */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-subsection .featured-slot {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(10px, 2.5vw, 18px) !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Reveal secondary tile on tablet when present */
  .hero-subsection
    .featured-slot
    > .popular-main-item.popular-main-item--secondary {
    display: block !important;
  }

  /* Keep tertiary hidden on tablet; tertiary should only show on desktop */
  .hero-subsection
    .featured-slot
    > .popular-main-item.popular-main-item--tertiary {
    display: none !important;
  }

  /* If JS fallback toggles `.has-tertiary`, ensure it does not expand to 3 cols on tablets */
  .hero-subsection .featured-slot.has-tertiary {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Make featured media size appropriate for tablet widths */
  .hero-subsection .popular-main-item,
  .hero-subsection .popular-main-item .popular-video,
  .hero-subsection .popular-main-item img.popular-video {
    height: clamp(200px, 30vw, 380px) !important;
    max-height: 380px !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  /* Tablet: make thumbnail strips and scroll-row thumbs use a landscape 16:9
     aspect so Top Picks, New Games, Featured, Multiplayer and Popular thumb
     strips visually match the Recently Played row on tablet viewports. */
  .hero-section .thumb-card,
  .scroll-row .thumb-card,
  .popular-scroll .thumb-card,
  .top-picks-scroll .thumb-card,
  .featured-grid .thumb-card,
  .new-games-scroll .thumb-card,
  .multiplayer-scroll .thumb-card {
    aspect-ratio: 16 / 9 !important;
    min-width: var(--hero-thumb-min) !important;
    width: var(--hero-thumb-width) !important;
    flex: 0 0 auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .hero-section .thumb-card img,
  .scroll-row .thumb-card img,
  .popular-scroll .thumb-card img,
  .top-picks-scroll .thumb-card img,
  .featured-grid .thumb-card img,
  .new-games-scroll .thumb-card img,
  .multiplayer-scroll .thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Ensure popular-row items adopt the same tablet sizing */
  .popular-row .popular-game-item,
  .popular-scroll .popular-game-item,
  .popular-game-wrapper {
    aspect-ratio: 16 / 9 !important;
    min-width: 150px !important;
    width: min(220px, 30vw) !important;
    flex: 0 0 auto !important;
  }

  .popular-row .popular-game-item .popular-video,
  .popular-row .popular-game-item img.popular-video,
  .popular-game-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* Make hero subsections stretch to the hero (red) background edges so
   they visually touch the red container. This removes any remaining
   horizontal gutters from those sections and their inner scroll/grid rows. */
.hero-section .container > .popular-now-section,
.hero-section .container > .top-picks-section,
.hero-section .container > .featured-games-section,
.hero-section .container > .new-games-section,
.hero-section .container > .multiplayer-section {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

.hero-section .container > .popular-now-section .popular-scroll,
.hero-section .container > .top-picks-section .top-picks-scroll,
.hero-section .container > .featured-games-section .featured-grid,
.hero-section .container > .new-games-section .new-games-scroll,
.hero-section .container > .multiplayer-section .multiplayer-scroll {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Desktop padding override removed (undo). */

.widget-section {
  border-radius: var(--radius-lg);
  padding: 0;
  box-sizing: border-box;
  margin-block-end: var(--vr);
  min-height: 200px; /* Ensure container is visible during loading */
}

/* Skeleton for Playgama widget during loading */
.widget-inner:empty {
  background: transparent;
  color: transparent;
  pointer-events: none;
}

/* Remove any implicit vertical spacing inside the widget so it aligns with
   the adjacent sections' top/bottom edges. */
#widget-playgama,
#widget-playgama > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Aggressively reset any spacing inside third-party widget wrappers so the
   embed content can fill the container width without extra left/right gaps. */
#widget-playgama,
#widget-playgama * {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure iframes or injected div wrappers fill the container exactly */
#widget-playgama iframe,
#widget-playgama div,
#widget-playgama > iframe,
#widget-playgama > div {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
}

/* If the widget injects its own iframe/content, ensure it doesn't overflow */
#widget-playgama > iframe,
#widget-playgama > div,
#widget-playgama iframe,
#widget-playgama div {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Recently Played subsection (client-side, localStorage) */
.recent-games-section {
  border-radius: var(--radius-lg);
  padding: 4px 0; /* reduced vertical padding */
  margin-block-end: var(--vr);
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.8));
}
.recent-games-section .category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}
.recent-games-section .featured-slot {
  display: none; /* we only show a horizontal thumb strip here */
}
.recent-games-section .recent-scroll {
  display: flex;
  gap: clamp(14px, 3vw, 22px); /* increased gap between recent cards */
  overflow-x: auto;
  padding: 6px 12px 10px 12px; /* slightly reduced vertical padding to reduce overall height */
  -webkit-overflow-scrolling: touch;
  /* Force horizontal flex layout and center alignment for recent items */
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.recent-games-section .recent-scroll .thumb-card {
  /* Compact, landscape thumbnails for Recently Played (further reduced width) */
  min-width: 100px; /* smaller minimum to fit more items */
  width: min(140px, 18vw); /* even smaller responsive cap */
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 96px; /* keep reduced height */
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto; /* keep thumbs inline in the horizontal strip */
}
.recent-games-section .recent-scroll .thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recent-games-section .empty-recent {
  color: rgba(228, 228, 231, 0.7);
  padding: 8px 12px;
}

/* Desktop: ensure Popular Now shows the featured item with the two
   smaller items stacked underneath (three visible cards). Some layouts
   use a horizontal flex for small screens; on large viewports we want
   a vertical flow so the featured tile sits above the two sub-items. */
@media (min-width: 1024px) {
  .popular-scroll {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: clamp(8px, 2vw, 16px) !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding-inline: 0 !important;
    align-items: stretch;
  }

  .popular-main-item {
    grid-area: main;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: clamp(6px, 1vw, 12px) !important;
  }

  .popular-row {
    grid-area: row;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(8px, 2vw, 16px) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .popular-row .popular-game-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
}

/* -------------------------
   Hero subsection layouts
   Top Picks: compact 4x2 grid
   Featured Games: large multi-column grid (6 cols, 2 rows)
   Popular Now: row of 3 large cards on desktop
   New Games: 6-column grid with two rows on desktop
   Multiplayer: 6-column single-row grid
   Widget: full-width block aligned with content
   ------------------------- */
.top-picks-section .top-picks-scroll {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
  padding: 12px 0;
}

.featured-games-section .featured-grid {
  /* Mirror Top Picks layout: use the same 4-column compact grid so
     Featured Games visually matches the Top Picks blueprint. JS also
     inserts a `.scroll-row` into this element; that strip is handled
     by a spanning rule added earlier. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
  padding: 12px 0;
}

/* If JS appends a horizontal thumbnail strip (.scroll-row) into the
   featured grid, ensure that strip spans the full grid width instead
   of being constrained to a single grid column. This keeps the
   small thumbnails horizontally aligned under the featured tiles. */
.featured-games-section .featured-grid > .scroll-row {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  padding: 8px 0;
  box-sizing: border-box;
}

/* Popular Now: three large cards side-by-side on desktop; fall back to scroll on small */
.popular-now-section .popular-scroll {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  align-items: stretch;
  overflow-x: auto;
  padding: 12px 0;
}

/* Generic scroll-row for thumbnail strips inserted by JS.
   This provides a consistent horizontal-scrolling thumbnail row used by
   Popular Now, Top Picks, Featured Games, New Games and Multiplayer. */
.scroll-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.scroll-row .thumb-card {
  flex: 0 0 140px;
  width: 140px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  border: none;
  background: linear-gradient(
    135deg,
    rgba(12, 13, 20, 0.6),
    rgba(12, 13, 20, 0.5)
  );
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.scroll-row .thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide horizontal scrollbars visually but keep scrolling functional
   across browsers for all thumbnail/scroll containers used on the site. */
.scroll-row,
.popular-scroll,
.top-picks-scroll,
.category-scroll,
.featured-games-section .featured-grid,
.new-games-scroll,
.multiplayer-scroll {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scroll-row::-webkit-scrollbar,
.popular-scroll::-webkit-scrollbar,
.top-picks-scroll::-webkit-scrollbar,
.category-scroll::-webkit-scrollbar,
.featured-games-section .featured-grid::-webkit-scrollbar,
.new-games-scroll::-webkit-scrollbar,
.multiplayer-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
  height: 0; /* ensure horizontal track takes no space */
}

/* Ensure a scroll-row appended by JS sits below the featured card and is
   horizontally scrollable on small screens. Scoped under .popular-scroll so
   it doesn't affect other scroll rows. */
.popular-scroll .scroll-row {
  /* keep the scoped overrides for Popular Now if present */
  gap: 12px;
  overflow-x: auto;
  padding: 8px 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* Scoped rules: ensure Featured Games and Multiplayer thumbnail strips
   (the `.scroll-row` appended by JS) behave as horizontal flex scrollers. */
.featured-games-section .scroll-row,
.multiplayer-section .scroll-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 8px 6px;
}

@media (min-width: 1024px) {
  .popular-now-section .popular-scroll {
    overflow-x: visible;
    flex-wrap: nowrap;
  }
  .popular-now-section .popular-scroll .popular-game-item {
    flex: 0 0 calc((100% - 2 * 20px) / 3);
    max-width: none;
  }
  .popular-now-section .popular-game-item .popular-video,
  .popular-now-section .popular-game-item img.popular-video {
    height: 320px;
    object-fit: cover;
  }
}

/* Apply Popular Now thumbnail sizing to other hero thumbnail strips on desktop
   so Top Picks, Featured, New Games and Multiplayer use the same responsive
   thumb-card dimensions and cropping behavior. */
@media (min-width: 1024px) {
  .top-picks-scroll .thumb-card,
  .featured-grid .thumb-card,
  .new-games-scroll .thumb-card,
  .multiplayer-scroll .thumb-card {
    /* Match Recently Played sizing on desktop */
    aspect-ratio: 16 / 9 !important;
    min-width: 180px !important;
    width: min(260px, 22vw) !important;
    flex: 0 0 auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .top-picks-scroll .thumb-card img,
  .featured-grid .thumb-card img,
  .new-games-scroll .thumb-card img,
  .multiplayer-scroll .thumb-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

.new-games-section .new-games-scroll {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
  padding: 12px 0;
}

.multiplayer-section .multiplayer-scroll {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
  padding: 12px 0;
}

/* Remove inner gutters so grids touch the edges of their section */
.top-picks-section,
.featured-games-section,
.popular-now-section,
.new-games-section,
.widget-section,
.multiplayer-section {
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

/* Removed temporary debug borders (lawngreen) from hero subsections. */
.hero-section .container > .popular-now-section,
.hero-section .container > .top-picks-section,
.hero-section .container > .new-games-section,
.hero-section .container > .featured-games-section,
.hero-section .container > .multiplayer-section {
  border: none !important;
  box-sizing: border-box !important;
}

.top-picks-section .top-picks-scroll,
.featured-games-section .featured-grid,
.popular-now-section .popular-scroll,
.new-games-section .new-games-scroll,
.multiplayer-section .multiplayer-scroll {
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

/* Make section headings align with the grid edges */
.top-picks-section > h3,
.featured-games-section > h3,
.popular-now-section > h3,
.new-games-section > h3,
.widget-section > h3,
.multiplayer-section > h3 {
  margin-left: 0;
  margin-right: 0;
  padding-inline: 6px;
  color: var(--accent); /* match See All link color */
  opacity: 0.95;
}

/* Elegant vertical rhythm between hero subsections */
.hero-section > div {
  margin-block-end: var(--vr); /* consistent spacing between sections */
  padding-top: clamp(6px, 1.5vw, 10px);
  padding-bottom: clamp(6px, 1.5vw, 10px);
}

/* Slight visual divider to separate sections without heavy rules */
.hero-section > div:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

/* Header styling inside sections: keep header content aligned and airy */
.hero-section .category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
}

.hero-section .category-header h3 {
  margin: 0;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 700;
}

/* Ensure category header titles use the accent color like the See All link
   and override any text-gradient rules that may apply in other contexts. */
.hero-section .category-header h3 {
  color: var(--accent) !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}

/* Make section header titles and the See All link use accent color */
.hero-section .category-header h3,
.hero-section .see-all-link {
  color: #973deb !important;
  -webkit-text-fill-color: #973deb !important;
}

/* Ensure hero-section header titles are bold */
.hero-section .category-header h3 {
  font-weight: 800 !important;
}

.hero-section .see-all-link {
  font-size: 0.9rem;
  color: var(--accent);
  opacity: 0.95;
}

@media (min-width: 1024px) {
  /* Slightly larger gaps on desktop for breathing room */
  .hero-section > div {
    margin-block-end: calc(var(--vr) * 1.1);
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Widget block: keep full-width content-aligned card */
.widget-section .widget-inner {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: 12px 0; /* keep vertical padding but remove horizontal gutters */
}

/* Final centralized overrides: ensure hero thumbs match Recently Played sizing
   across tablet and desktop by using the CSS variables defined earlier. These
   rules are intentionally placed late in the file so they override earlier
   conflicting rules. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    /* Match Recently Played tablet blueprint: use the same responsive width
       so other hero rows copy Recently Played sizing on tablet viewports */
    --hero-thumb-min: 150px;
    --hero-thumb-width: min(260px, 28vw);
  }
}

@media (min-width: 1024px) {
  :root {
    --hero-thumb-min: 180px;
    --hero-thumb-width: min(260px, 22vw);
  }
}

/* Apply the variable-driven sizing to recent and other hero thumbs */
.recent-games-section .recent-scroll .thumb-card,
.hero-section .thumb-card,
.scroll-row .thumb-card,
.popular-scroll .thumb-card,
.top-picks-scroll .thumb-card,
.featured-grid .thumb-card,
.new-games-scroll .thumb-card,
.multiplayer-scroll .thumb-card,
.popular-row .popular-game-item,
.popular-scroll .popular-game-item,
.hero-section .popular-game-wrapper {
  aspect-ratio: 16 / 9 !important;
  min-width: var(--hero-thumb-min) !important;
  width: var(--hero-thumb-width) !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

.recent-games-section .recent-scroll .thumb-card img,
.hero-section .thumb-card img,
.scroll-row .thumb-card img,
.popular-scroll .thumb-card img,
.top-picks-scroll .thumb-card img,
.featured-grid .thumb-card img,
.new-games-scroll .thumb-card img,
.multiplayer-scroll .thumb-card img,
.popular-row .popular-game-item img,
.popular-game-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Responsive fallbacks for narrower screens */
@media (max-width: 1023px) {
  .top-picks-section .top-picks-scroll,
  .featured-games-section .featured-grid,
  .new-games-section .new-games-scroll,
  .multiplayer-section .multiplayer-scroll {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 4vw, 12px);
  }
  .popular-now-section .popular-scroll {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Mobile phones: show 3 cards per row for compact thumb-friendly scanning */
@media (max-width: 480px) {
  .top-picks-section .top-picks-scroll,
  .featured-games-section .featured-grid,
  .new-games-section .new-games-scroll,
  .multiplayer-section .multiplayer-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding-inline: 6px !important;
  }

  /* Ensure cards remain tappable and proportionate */
  .game-placeholder {
    aspect-ratio: 4/5 !important;
  }

  /* Popular Now stays stacked full-width on mobile */
  .popular-now-section .popular-scroll {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Make selected hero sections mirror the Popular Now mobile layout:
   - first tile spans full width (highlight)
   - remaining tiles flow in a 3-column grid for quick scanning
   - disable horizontal scroll on very small screens so content flows vertically
*/
@media (max-width: 480px) {
  .top-picks-section .top-picks-scroll,
  .featured-games-section .featured-grid,
  .new-games-section .new-games-scroll,
  .multiplayer-section .multiplayer-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto;
    gap: 8px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding-inline: 6px !important;
  }

  .top-picks-section .game-item:first-child,
  .featured-games-section .game-item:first-child,
  .new-games-section .game-item:first-child,
  .multiplayer-section .game-item:first-child {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0 !important;
  }

  .top-picks-section .game-item,
  .featured-games-section .game-item,
  .new-games-section .game-item,
  .multiplayer-section .game-item {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Ensure media fits and the highlight (first item) reads as a block */
  .top-picks-section .game-placeholder:first-child,
  .featured-games-section .game-placeholder:first-child,
  .new-games-section .game-placeholder:first-child,
  .multiplayer-section .game-placeholder:first-child {
    aspect-ratio: 16/9 !important;
  }
}
.popular-main-item .popular-overlay .play-btn {
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: 8px;
}

@media (min-width: 1024px) {
  /* On large screens allow the featured item to stretch across the area */
  .popular-main-item {
    width: 100%;
    max-width: var(--max-read);
  }

  .popular-main-item .popular-video {
    height: clamp(220px, 40vw, 420px);
  }
  /* Desktop: Popular Now section - two big thumbnails side-by-side using grid
     Keep mobile-first behavior intact; reveal secondary tile on desktop. */
  .popular-now-section .popular-inner .featured-slot {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: start !important;
    justify-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 18px;
  }

  .popular-now-section
    .popular-inner
    .featured-slot:has(.popular-main-item--tertiary) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .popular-now-section .popular-inner .featured-slot > .popular-main-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .popular-now-section
    .popular-inner
    .featured-slot
    > .popular-main-item
    .popular-video,
  .popular-now-section
    .popular-inner
    .featured-slot
    > .popular-main-item
    img.popular-video {
    height: clamp(220px, 28vw, 420px) !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Secondary featured tile: hidden on small screens, visible on desktop */
  .popular-main-item--secondary {
    display: none;
  }
  @media (min-width: 1024px) {
    .popular-main-item--secondary {
      display: block !important;
    }
  }

  /* Scroll row for smaller thumbnails below the big ones */
  .popular-now-section .popular-scroll {
    display: flex;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    padding: 0 8px;
    margin-top: 0;
    scroll-snap-type: x mandatory;
  }

  .popular-now-section .popular-scroll .thumb-card,
  .popular-now-section .popular-scroll .popular-thumb-btn {
    flex: 0 0 clamp(120px, 14vw, 180px);
    width: clamp(120px, 14vw, 180px);
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    background: #181828;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    border: none;
    cursor: pointer;
    margin-bottom: 0;
  }

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

/* Global header offset: ensure content and headings are visible below
   a fixed header on desktop when switching tabs or rendering curated views. */
:root {
  --header-height: 64px; /* safe default; adjust if your header is a different height */
}

@media (min-width: 1024px) {
  /* Reserve space so active tab content isn't hidden under the fixed header */
  main {
    padding-top: calc(var(--header-height) + 12px) !important;
  }

  /* When jumping to anchors or programmatically focusing headings, ensure
     headings sit below the fixed header. Applies across tabs. */
  .tab-content,
  #home,
  #games {
    scroll-padding-top: calc(var(--header-height) + 12px) !important;
  }

  /* Headings and hero section headers shouldn't be occluded when shown */
  .tab-content h2,
  .hero-section .category-header,
  .hero-section .category-header h3 {
    scroll-margin-top: calc(var(--header-height) + 12px) !important;
  }
}

.top-picks-section .top-picks-scroll,
.featured-games-section .featured-grid,
.new-games-section .new-games-scroll,
.multiplayer-section .multiplayer-scroll {
  display: flex !important;
  flex-direction: row;
  gap: clamp(10px, 3vw, 16px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-inline: 0 !important; /* remove inner gutters so items touch edges */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Tile sizing for scroll rows */
.top-picks-section .game-item,
.new-games-section .game-item,
.multiplayer-section .game-item {
  flex: 0 0 clamp(120px, 30vw, 180px);
  width: clamp(120px, 30vw, 180px) !important;
  scroll-snap-align: start;
}

/* Featured uses slightly larger tiles to feel prominent */
.featured-games-section .game-item {
  flex: 0 0 clamp(160px, 36vw, 240px);
  width: clamp(160px, 36vw, 240px) !important;
  scroll-snap-align: start;
}

/* Ensure media inside tiles fills the tile area cleanly */
.top-picks-section .game-placeholder img,
.featured-games-section .game-placeholder img,
.new-games-section .game-placeholder img,
.multiplayer-section .game-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide native scrollbars when possible but keep scrolling usable */
.top-picks-section .top-picks-scroll::-webkit-scrollbar,
.featured-games-section .featured-grid::-webkit-scrollbar,
.new-games-section .new-games-scroll::-webkit-scrollbar,
.multiplayer-section .multiplayer-scroll::-webkit-scrollbar {
  height: 8px;
}
.top-picks-section .top-picks-scroll::-webkit-scrollbar-thumb,
.featured-games-section .featured-grid::-webkit-scrollbar-thumb,
.new-games-section .new-games-scroll::-webkit-scrollbar-thumb,
.multiplayer-section .multiplayer-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

@media (min-width: 1024px) {
  /* On desktop we can show slightly larger tiles while keeping horizontal scroll */
  .top-picks-section .game-item,
  .new-games-section .game-item,
  .multiplayer-section .game-item {
    flex: 0 0 clamp(160px, 18vw, 220px);
    width: clamp(160px, 18vw, 220px) !important;
  }
  .featured-games-section .game-item {
    flex: 0 0 clamp(220px, 24vw, 320px);
    width: clamp(220px, 24vw, 320px) !important;
  }
}

.popular-game-item:hover .popular-video {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  border-color: rgba(155, 93, 229, 0.4);
}

/* Mobile specific tweaks for Popular Now to improve spacing/readability */
@media (max-width: 480px) {
  .popular-header h2 {
    font-size: clamp(1.2rem, 6vw, 1.6rem);
    padding-inline: 8px;
  }

  .popular-scroll {
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }

  /* Stack the main popular item with the two-row items underneath on small screens */
  .popular-scroll {
    /* mobile-first: use a grid so the featured item spans full width
       and the related row sits directly underneath */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "row";
    gap: 8px;
    overflow-x: visible; /* allow the row inside to control horizontal layout */
    scroll-snap-type: none;
    padding-left: 12px;
    padding-right: 12px;
  }

  .popular-main-item {
    width: 100%;
    max-width: 100%;
  }

  /* Small thumbnail strip under featured cards */
  .popular-sub-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 6px 6px 6px;
    align-items: center;
  }

  .popular-sub-thumbs .popular-thumb-btn {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
  }

  .popular-sub-thumbs .popular-thumb {
    width: 120px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }

  /* On larger viewports show the sub-thumbs as a horizontal row without overflow */
  .popular-sub-thumbs {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 10px;
  }

  .popular-sub-thumbs .popular-thumb {
    width: 140px;
    height: 88px;
  }
  /* place elements into the grid areas */
  .popular-main-item {
    grid-area: main;
  }

  .popular-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px; /* reduced gap as requested */
    width: 100%;
    padding: 0;
    margin: 0;
    align-items: start;
  }

  .popular-row {
    grid-area: row;
  }

  .popular-row .popular-game-wrapper {
    width: 100%;
  }

  .popular-row .popular-game-item {
    width: 100%;
    min-width: 0;
  }

  /* Make the two smaller items rectangular (landscape) */
  .popular-row .popular-game-item .popular-video,
  .popular-row .popular-game-item img.popular-video {
    /* prefer a wider aspect ratio */
    aspect-ratio: 16 / 9;
    height: auto; /* let aspect-ratio handle sizing */
    max-height: 160px;
    object-fit: cover;
  }

  .popular-game-info {
    padding: 8px 10px;
  }

  .popular-game-info h4 {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .popular-game-info .play-btn {
    padding: 6px 10px;
    font-size: 0.78rem;
    border-radius: 8px;
  }

  /* Make the overlay more compact on phones */
  .popular-overlay {
    padding: 0.4rem 0.6rem;
    gap: 6px;
  }

  .popular-overlay h4 {
    font-size: 0.95rem;
  }

  .popular-row .popular-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.86), transparent);
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: white;
  }

  .popular-row .popular-overlay .play-btn {
    display: none;
  }
}

.play-now-btn {
  background: #8a2be2;
  color: white;
  padding: 0.5rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
  cursor: pointer;
  border: none;
}

.play-now-btn:hover {
  background: #a855f7;
}

/* -------------------------
   Category Showcase (Responsive)
   ------------------------- */
.category-showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 5vw, 24px);
  margin-block-start: 0;
}

.category-row {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 3vw, 12px);
}

.category-row:has(.category-header h3:contains("Shooting")),
/* Special styling for Action, Shooting, Racing categories */
/* Special styling for Action, Shooter, Racing categories */
.category-row:has(.category-header h3:contains("Action")),
.category-row:has(.category-header h3:contains("Shooter")),
.category-row:has(.category-header h3:contains("Racing")) {
  background: linear-gradient(
    135deg,
    rgba(155, 93, 229, 0.05),
    rgba(106, 63, 194, 0.03)
  );
  border-radius: var(--radius-lg);
  padding: clamp(12px, 4vw, 16px);
  border: 1px solid rgba(155, 93, 229, 0.1);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: clamp(12px, 4vw, 16px);
}

/* Remove horizontal padding for hero-section headers so they touch edges */
.hero-section .category-header {
  padding-inline: 0 !important;
}

.category-header h3 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.1rem, 4vw, 1.2rem);
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-emoji {
  color: var(--fg-0);
  margin-right: 6px;
}

/* Make category header titles and See All links use accent color for consistency */
.category-header h3 {
  color: #973deb !important;
  -webkit-text-fill-color: #973deb !important;
}
.category-header .see-all-link {
  color: #973deb !important;
  -webkit-text-fill-color: #973deb !important;
}
/* Make See All match the section title weight/size */
.category-header .see-all-link,
.hero-section .see-all-link {
  font-weight: 600 !important;
  font-size: clamp(1.05rem, 3.6vw, 1.1rem) !important;
}

.category-name {
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 3s ease-in-out infinite;
}

.category-header h3 i {
  font-size: clamp(1.2rem, 4vw, 1.4rem);
}

/* Ensure category names in other sections use the same accent color */
.category-name,
.category-group h3 {
  color: #973deb !important;
  -webkit-text-fill-color: #973deb !important;
  background: none !important;
}

.see-all-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  transition: color 0.2s ease;
}

.see-all-link:hover {
  color: var(--accent-dk);
  text-decoration: underline;
}

/* -------------------------
   Horizontal Scroll (Responsive, Touch-Optimized)
   ------------------------- */
.category-scroll {
  display: flex;
  gap: clamp(10px, 3vw, 16px);
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: clamp(12px, 5vw, 16px);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.category-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.category-scroll .game-item {
  flex: 0 0 auto;
  width: clamp(100px, 22vw, 140px);
  min-width: clamp(100px, 22vw, 140px);
}

.game-item {
  animation: scaleIn 0.36s var(--ease) both;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
  min-width: 0;
}

.game-placeholder {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.7));
  border: 2px solid transparent;
  aspect-ratio: 9 / 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  will-change: transform;
}

.game-placeholder:hover {
  border-color: var(--accent);
}

.game-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: transform 0.28s var(--ease);
  will-change: transform;
}

/* Default image scale on hover — small, subtle, and applied to the media
   so overlays and wrappers don't shift. Media queries may override this. */
.game-placeholder:hover img {
  transform: scale(1.03);
}

@media (min-width: 481px) and (max-width: 1024px) {
  .games-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 3vw, 14px);
  }

  .game-placeholder {
    transition: transform 0.28s var(--ease);
  }

  .game-placeholder:hover img {
    transform: scale(1.04);
  }
}

/* -------------------------
   Game Overlay (Responsive, No Overflow)
   ------------------------- */
.game-placeholder {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.game-placeholder:hover {
  /* Don't scale the wrapper — scale the image inside instead to
     preserve overlays and avoid layout movement. */
  transform: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.game-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Smooth upward gradient overlay (base) */
.popular-overlay {
  /* Base overlay uses the same upward-fading gradient used by small thumbnails.
     This ensures the overlay sits flush at the bottom of the media without
     visible gaps and keeps a single visual blueprint across thumbnail sizes. */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86), transparent);
  box-shadow: none;
  transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
  will-change: transform, opacity;
  pointer-events: auto;
}

/* Game title */
.popular-overlay h4 {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Play button */
.popular-overlay .play-btn {
  background: linear-gradient(135deg, #8a2be2, #a855f7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  border: none;
}

.popular-overlay .play-btn:hover {
  background: linear-gradient(135deg, #a855f7, #8a2be2);
  transform: scale(1.05);
}

/* Section-specific overlay polish: larger padding and clearer hierarchy */
/* Section-specific overlay polish removed to keep `.popular-main-item .popular-overlay` as the single source of truth for big thumbnail overlays. */

/* Disable overlay lift on thumbnail hover so overlays remain fixed */
@media (hover: hover) and (pointer: fine) {
  .popular-game-item:hover .popular-overlay,
  .game-item:hover .popular-overlay {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Ensure category .game-overlay uses the same small-thumbnail overlay
   styles and hover/focus reveal as .popular-overlay so category rows
   (Action, etc.) show overlays correctly. Targets both .game-overlay
   and legacy .popular-overlay when used inside category/scroll rows. */
.category-scroll .game-item .game-overlay,
.category-scroll .game-item .popular-overlay,
.scroll-row .game-item .game-overlay,
.scroll-row .game-item .popular-overlay,
.top-picks-scroll .game-item .game-overlay,
.top-picks-scroll .game-item .popular-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 60 !important;
  /* Match hero small-thumbnail overlay: subtle gradient that fades upward */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.86),
    transparent
  ) !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
  color: #ffffff !important;
  pointer-events: auto !important;
  /* Start hidden for clean UI; reveal on hover or keyboard focus */
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}

.category-scroll .game-item:hover .game-overlay,
.category-scroll .game-item:focus-within .game-overlay,
.category-scroll .game-item:hover .popular-overlay,
.category-scroll .game-item:focus-within .popular-overlay,
.scroll-row .game-item:hover .game-overlay,
.scroll-row .game-item:focus-within .game-overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Typography and small button styles for category overlays to match hero */
.category-scroll .game-item .game-overlay h4,
.category-scroll .game-item .popular-overlay h4,
.scroll-row .game-item .game-overlay h4,
.scroll-row .game-item .popular-overlay h4 {
  margin: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  line-height: 1.05 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.category-scroll .game-item .game-overlay .play-btn,
.category-scroll .game-item .popular-overlay .play-btn,
.scroll-row .game-item .game-overlay .play-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* -------------------------
   Category Tiles (Responsive Animation)
   ------------------------- */
.category-group {
  padding: clamp(12px, 4vw, 16px);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;

  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.7));
  border: 2px solid transparent; /* reserved to prevent layout shift */
  box-shadow: 0 10px 30px var(--card-shadow), 0 0 20px var(--card-glow);

  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  animation: fadeInUp 0.34s var(--ease) both;
}

.category-group:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 36px var(--card-shadow), 0 0 28px rgba(168, 108, 240, 0.1);
}

.category-group h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 2vw, 10px);
  color: var(--accent-dk);
  font-weight: 700;
  font-size: clamp(0.95rem, 3vw, 1.1rem);

  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.category-group h3 i,
.category-icon {
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  color: var(--accent);
}

/* -------------------------
   Subcategory Grid (Responsive)
   ------------------------- */
.subcategories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(8px, 2.5vw, 14px);
}

/* -------------------------
   Category Item (Responsive Hover)
   ------------------------- */
.category-item {
  padding: clamp(8px, 3vw, 12px);
  border-radius: var(--radius-md);
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(0, 107, 0, 0.04),
    rgba(0, 107, 0, 0.02)
  );
  border: 1px solid rgba(0, 107, 0, 0.12);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

.category-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 107, 0, 0.06);
  border-color: rgba(0, 107, 0, 0.18);
}

.category-item span {
  color: var(--fg-0);
  font-weight: 500;
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
}

/* -------------------------
   Submit Form (Responsive, Animated)
   ------------------------- */
.submit-form {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 4vw, 20px);
  max-width: 100%;
  animation: fadeInUp 0.36s var(--ease) both;
}

.submit-form input,
.submit-form select,
.submit-form textarea {
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.72));
  backdrop-filter: blur(6px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: clamp(10px, 3vw, 14px);
  color: var(--fg-0);
  font-size: clamp(0.95rem, 3vw, 1rem);
  box-shadow: 0 2px 8px var(--card-shadow);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.submit-form textarea {
  min-height: 120px;
  resize: vertical;
}

.submit-form input:focus,
.submit-form textarea:focus {
  border-color: rgba(168, 108, 240, 0.75);
  box-shadow: 0 0 0 6px rgba(123, 63, 201, 0.06);
  transform: translateY(-2px);
}

.submit-form button {
  padding: clamp(10px, 3vw, 14px);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: var(--bg-0);
  font-weight: 800;
  font-size: clamp(0.95rem, 3vw, 1rem);
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 107, 0, 0.08);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

.submit-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 107, 0, 0.12);
}

/* -------------------------
   Submit Button Hover (Refined)
   ------------------------- */
.submit-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 107, 0, 0.12);
}

/* ------------------------- */
/* Terms and Privacy Content Spacing */
/* ------------------------- */
.terms-content h2 {
  margin-bottom: 24px;
  color: var(--accent);
}

.terms-content h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
}

.terms-content p {
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ------------------------- */
/* Select Dropdown Styling */
/* ------------------------- */
.submit-form select {
  appearance: none; /* Remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' 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 10px center;
  background-size: 16px;
  cursor: pointer;
}

.submit-form select::-webkit-scrollbar {
  width: 8px;
}

.submit-form select::-webkit-scrollbar-track {
  background: rgba(12, 13, 20, 0.8);
  border-radius: var(--radius-md);
}

.submit-form select::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: var(--radius-md);
}

.submit-form select::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dk);
}

/* Dropdown list styling for webkit browsers */
.submit-form select::-webkit-list-box {
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.9));
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 12px var(--card-shadow);
  padding: 4px;
}

/* Dropdown list background and options */
.submit-form select option {
  background: linear-gradient(135deg, var(--glass), rgba(12, 13, 20, 0.9));
  color: var(--fg-0);
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: clamp(0.9rem, 3vw, 1rem);
  transition: background 0.18s var(--ease);
}

.submit-form select option:hover,
.submit-form select option:focus {
  background: rgba(8, 203, 0, 0.1);
  color: var(--accent);
}

/* -------------------------
   Menu Overlay (Slide-in from left, under header, Fixed for Mobile/Desktop)
   ------------------------- */
/* Sidebar/menu rules removed — starting clean slate */

/* -------------------------
   No Results (Responsive)
   ------------------------- */
.no-results {
  text-align: center;
  padding: clamp(20px, 6vw, 32px) clamp(12px, 5vw, 20px);
  color: var(--fg-0);
}

.no-results p {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.2rem);
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -------------------------
   Control Bar (Responsive, Below Iframe)
   ------------------------- */
.play-page .control-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 4vw, 16px);
  padding: clamp(6px, 2vw, 12px);
  background: var(--glass-strong);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0, 107, 0, 0.18);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, pointer-events 0.3s ease;
  z-index: 90;
}

.play-page .control-bar .control-btn i {
  font-size: clamp(1.3rem, 5vw, 1.5rem);
  color: var(--accent);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

.play-page .control-bar .control-btn:hover i {
  color: var(--accent-dk);
  transform: scale(1.1);
}

/* -------------------------
   Desktop / Tablet Breakpoints
   Layered Enhancements Only (Mobile-First)
   ------------------------- */
/* Tablet responsive header */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    min-height: 100vh;
    padding-bottom: 0;
    padding-top: var(--header-height);
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-strong);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  /* Mobile: keep sidebar off-canvas and full-width when opened */

  .logo {
    font-size: 1.8rem;
    margin: 0;
    flex-shrink: 1;
  }

  .search-container {
    flex: 0 0 auto;
    max-width: 400px;
    margin-left: 20px;
    flex-shrink: 1;
  }

  main,
  .main-content {
    position: relative;
    /* keep the existing vertical and right padding, but add a
       responsive left gap so content breathes from the sidebar */
    padding: 28px 40px 28px calc(40px + var(--content-gap));
    overflow-y: auto;
    left: 0;
    width: 100%;
    transition: left 0.3s ease, width 0.3s ease;
  }

  .games-grid,
  .featured-games {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
  }

  .categories-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }

  .about-stats {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat .number {
    font-size: 2.5rem;
  }

  .game-placeholder {
    position: relative;
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-1);
  }

  .game-placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }

  .game-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.86), transparent);
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.2;
  }

  #widget-playgama {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
}

@media screen and (orientation: landscape) and (max-width: 900px) {
  :root {
    --header-height: 50px;
  }

  header {
    height: var(
      --header-height
    ); /* Increased height for better touch comfort and spacing */
    padding: 6px 12px; /* More padding for breathing room */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--glass-strong);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  }

  .logo {
    width: 32px; /* Smaller logo to save space */
    height: 32px;
    margin: 0;
    flex-shrink: 0;
  }

  .notification-bar {
    flex-shrink: 0;
    padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 8px);
  }

  .notification-text {
    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  }

  .search-container {
    flex-shrink: 0;
  }

  .search-container.expanded .search-input {
    width: clamp(120px, 25vw, 140px); /* Smaller search input */
  }

  .hero-title {
    font-size: 1rem;
    line-height: 1.2;
    margin-left: 8px;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  header {
    height: 60px;
    padding: 0px 4px;
  }

  .logo {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }

  .notification-bar {
    flex: 0 1 200px;
    padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 10px);
  }

  .notification-text {
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  }

  .search-container.expanded .search-input {
    width: clamp(120px, 30vw, 140px);
  }

  /* Enhanced mobile responsiveness for grids */
  .games-grid,
  .categories-list {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: clamp(8px, 2vw, 12px);
  }

  .game-placeholder {
    aspect-ratio: 9 / 10;
    border-radius: var(--radius-md);
  }

  .category-group {
    padding: clamp(8px, 3vw, 12px);
  }

  .category-group h3 {
    font-size: clamp(0.9rem, 3vw, 1rem);
  }

  .category-emoji,
  .category-icon {
    font-size: clamp(1rem, 4vw, 1.2rem);
  }

  /* Category scroll adjustments */
  .category-scroll {
    padding-inline: clamp(8px, 3vw, 12px);
  }

  .category-scroll .game-item {
    width: clamp(80px, 20vw, 120px);
    min-width: clamp(80px, 20vw, 120px);
  }

  /* Bottom nav enhancements */
  .bottom-nav {
    padding-block: 2px;
    padding-inline: 4px;
  }

  .nav-item {
    padding: 1px;
    font-size: 0.8rem;
  }

  .nav-item i {
    font-size: 1.2rem;
  }

  /* Hero section mobile */
  .hero-section {
    padding: clamp(8px, 2.2vw, 14px) clamp(4px, 1.6vw, 8px);
  }

  #widget-playgama {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .hero-title {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }

  .hero-subtitle {
    font-size: clamp(0.85rem, 3vw, 0.95rem);
  }

  /* Tab content */
  .tab-content h2 {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
    margin-block-end: clamp(8px, 3vw, 12px);
  }

  .tab-content p {
    font-size: clamp(0.9rem, 3vw, 1rem);
    margin-block-end: clamp(8px, 3vw, 12px);
  }

  /* About section */
  .about-stats {
    gap: clamp(16px, 5vw, 24px);
  }

  .stat .number {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  .stat .label {
    font-size: clamp(0.8rem, 3vw, 0.9rem);
  }

  .about-links {
    gap: clamp(6px, 2vw, 12px);
  }

  .about-link {
    font-size: clamp(0.85rem, 3vw, 0.95rem);
  }

  /* Popular Now section mobile responsiveness */
  .popular-row {
    gap: clamp(8px, 3vw, 16px);
    margin-bottom: clamp(12px, 4vw, 24px);
  }

  .popular-row .popular-game-item {
    min-width: 100px;
    max-width: 160px;
  }

  .popular-game-wrapper {
    gap: clamp(6px, 2vw, 12px);
  }

  .popular-game-info h4 {
    font-size: 0.8rem;
  }

  .popular-game-info .play-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  /* Further reduce on very small screens */
  @media (max-width: 320px) and (orientation: portrait) {
  }
}

@media (max-width: 320px) and (orientation: portrait) {
  header {
    height: 50px;
    padding: 0px 2px;
  }

  .logo {
    width: 28px;
    height: 28px;
  }

  .notification-bar {
    flex: 0 1 150px;
    padding: clamp(2px, 0.5vw, 6px) clamp(4px, 1vw, 8px);
  }

  .notification-text {
    font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  }

  .search-container.expanded .search-input {
    width: clamp(100px, 25vw, 120px);
  }
}

/* Ensure logo text on mobile matches desktop appearance exactly.
   Place this after other mobile overrides so it wins specificity. */
@media (max-width: 1023px) {
  .logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    flex-shrink: 0 !important;
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
  }

  .logo .logo-text {
    font-family: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    /* reduce size on mobile so logo doesn't overpower header controls */
    font-size: 1rem !important; /* ~16px */
    background: linear-gradient(135deg, #7302cf, #7e0496) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    letter-spacing: 0.6px !important;
    text-transform: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-shadow: 0 4px 18px rgba(106, 63, 194, 0.06) !important;
  }

  .logo .logo-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.18)) !important;
  }
}

/* -------------------------
   Play Page Styles (Fullscreen Game Page)
   ------------------------- */
.play-page {
  margin: 0;
  padding: 0 !important;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  overflow: hidden;
  touch-action: manipulation;
  overscroll-behavior: none;
  isolation: isolate;
}

/* Portrait orientation overlay */
.portrait-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: rgba(12, 13, 20, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-0);
  padding: 20px;
  text-align: center;
}

/* Portrait message box */
.portrait-message {
  max-width: 300px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.portrait-message i {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}

.portrait-message h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.portrait-message p {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.4;
}

.portrait-message i {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.portrait-message h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.portrait-message p {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.5;
  color: var(--fg-1);
  max-width: 280px;
  margin: 0 auto;
}

#game-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
  transform: translateZ(0); /* Prevent subpixel bleed */
  backface-visibility: hidden;
}

@media (max-width: 520px) {
  .play-frame-wrap {
    margin: 4px;
    padding: 4px;
    border-radius: 8px;
    height: calc(100vh - var(--header-height) - 36px);
    min-height: 228px;
    background: var(--bg-0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
  }

  .play-frame-inner {
    height: 100%;
    min-height: 168px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  #game-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: transparent;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

@media (max-width: 520px) and (orientation: landscape) {
  .play-frame-wrap {
    height: calc(100vh - var(--header-height) - 24px);
    min-height: 100px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: var(--bg-0);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
    isolation: isolate;
  }

  .play-frame-inner {
    width: 100%;
    height: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  #game-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: transparent;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

.play-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--glass-strong);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(168, 108, 240, 0.2);
  z-index: 1500;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  isolation: isolate;
  transform: translateZ(0);
}

.unavailable {
  display: none; /* toggled via JS when no game URL is present */
  height: calc(100% - 20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: var(--fg-0);
  background: var(--bg-0);
  isolation: isolate;
  z-index: 1000;
}

.unavailable h2 {
  margin: 0;
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.unavailable p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.5;
}

.unavailable-card {
  width: 100%;
  max-width: 760px;
  padding: 28px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px) saturate(120%);
  text-align: center;
  box-sizing: border-box;
  isolation: isolate;
  transform: translateZ(0);
}

.unavailable-illus {
  color: var(--accent);
  opacity: 0.95;
  font-size: 2.5rem;
  line-height: 1;
}

.unavailable-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.3px;
}

.unavailable-desc {
  max-width: 640px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fg-1);
  opacity: 0.85;
}

.unavailable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
    filter 0.12s ease;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  isolation: isolate;
}

.btn:active {
  transform: scale(0.985);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: white;
  box-shadow: 0 6px 18px rgba(168, 108, 240, 0.08);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-secondary {
  background: transparent;
  color: var(--fg-0);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 520px) {
  .unavailable-card {
    padding: 18px;
    border-radius: 12px;
    gap: 12px;
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.25);
    transform: translateZ(0);
    isolation: isolate;
  }

  .unavailable-title {
    font-size: 1.1rem;
    line-height: 1.3;
    letter-spacing: 0.2px;
  }

  .unavailable-desc {
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 0.85;
  }
}

.back-button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1600;
  isolation: isolate;
}

.back-button:hover {
  background: rgba(8, 203, 0, 0.1);
  transform: scale(1.05);
}

#game-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg-0);
  flex: 1;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spacer {
  width: 40px; /* Match back button width for centering */
  flex-shrink: 0;
}

.play-main {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  padding: 12px;
  padding-top: calc(var(--header-height) + 12px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--bg-0);
  isolation: isolate;
  transform: translateZ(0);
}

.play-frame-wrap {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto 20px auto;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid rgba(6, 166, 0, 0.3);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  height: calc(var(--dynamic-vh, 100vh) - var(--header-height) - 12px);
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  transform: translateZ(0);
}

.play-page .play-main {
  margin-top: calc(var(--header-height) + 12px);
  padding-bottom: 40px; /* ensures bottom spacing even if wrap margin collapses */
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
  transform: translateZ(0);
}

.play-page .play-frame-wrap {
  margin-bottom: 40px;
  height: calc(100vh - var(--header-height) - 32px);
  max-height: 880px;
  min-height: 520px;
  width: 100%;
  max-width: 1600px;
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid rgba(6, 166, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  transform: translateZ(0);
  isolation: isolate;
}

.back-button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.2rem;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  z-index: 1600;
}

.back-button:hover {
  background: rgba(8, 203, 0, 0.1);
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .play-main {
    padding: 20px;
    margin: 0;
    padding-top: calc(var(--header-height) + 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    isolation: isolate;
    transform: translateZ(0);
  }

  .play-page .play-main {
    padding-top: calc(var(--header-height) + 20px);
  }

  .play-page .play-frame-wrap {
    margin-bottom: 40px;
    height: calc(100vh - var(--header-height) - 40px);
    max-height: 880px;
    min-height: 520px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    border-radius: 14px;
    overflow: hidden;
    transform: translateZ(0);
    isolation: isolate;
  }
}

@media (min-width: 768px) {
  .play-page .play-frame-wrap {
    margin-bottom: 40px;
    height: calc(100vh - var(--header-height) - 62px);
    max-height: 880px;
    min-height: 520px;
    transform: translateZ(0);
    isolation: isolate;
  }

  .loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--fg-0);
    z-index: 1000;
    pointer-events: none;
    user-select: none;
    isolation: isolate;
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(168, 108, 240, 0.2);
    border-top: 4px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
    transform: translateZ(0);
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

@media (min-width: 768px) {
  .play-header {
    padding: 16px 24px;
    gap: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    isolation: isolate;
    transform: translateZ(0);
  }

  #game-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.new-games-row .category-header {
  margin-bottom: 16px;
  padding-inline: 0;
}

.new-games-row .category-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}

.new-games-row .game-item {
  flex: 0 0 auto;
  width: 160px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.new-games-row .game-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.new-games-row .game-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--muted);
  border-radius: 12px;
  overflow: hidden;
}

.new-games-row .game-placeholder img,
.new-games-row .game-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* `new-games-row` previously had its own overlay rules. Removed to reuse the canonical
   `.popular-overlay` / `.popular-main-item .popular-overlay` styles as the single template
   for big thumbnail overlays across hero subsections. */

.new-games-row .category-name {
  color: var(--fg-0);
  font-weight: 700;
  font-size: 1.1em;
}

.new-games-row .see-all-link {
  color: var(--accent);
  font-weight: 600;
  font-size: clamp(1.05rem, 3.6vw, 1.1rem);
}

.new-games-row .see-all-link:hover {
  color: var(--accent-dk);
  text-decoration: underline;
}

/* Balance spacing around new games row */
.new-games-row {
  margin-block-start: 0;
  margin-block-end: 0;
  width: 100%;
  max-width: var(--max-read);
}

.new-games-row .category-scroll {
  padding-inline: 0;
}

/* Make hero section touch the new games row above it */
.hero-section {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Last-resort tablet override: ensure all hero thumbs match Recently Played blueprint */
@media (min-width: 768px) and (max-width: 1023px) {
  .recent-games-section .recent-scroll .thumb-card,
  .popular-now-section .popular-scroll .thumb-card,
  .popular-now-section .popular-scroll .scroll-row .thumb-card,
  .popular-now-section .popular-inner .popular-row .popular-game-item,
  .popular-row .popular-game-item,
  .top-picks-section .top-picks-scroll .thumb-card,
  .featured-games-section .featured-grid .thumb-card,
  .new-games-section .new-games-scroll .thumb-card,
  .multiplayer-section .multiplayer-scroll .thumb-card,
  .scroll-row .thumb-card,
  .hero-section .thumb-card {
    aspect-ratio: 16/9 !important;
    min-width: var(--hero-thumb-min) !important;
    width: var(--hero-thumb-width) !important;
    flex: 0 0 auto !important;
    height: auto !important;
  }
}

/* Mobile override: ensure hero thumbs follow the same 16:9 blueprint on small screens */
@media (max-width: 767px) {
  :root {
    /* mobile-friendly sizes (smaller than tablet) */
    --hero-thumb-min: 120px;
    --hero-thumb-width: min(180px, 42vw);
  }

  .recent-games-section .recent-scroll .thumb-card,
  .popular-now-section .popular-scroll .thumb-card,
  .popular-now-section .popular-scroll .scroll-row .thumb-card,
  .popular-now-section .popular-inner .popular-row .popular-game-item,
  .popular-row .popular-game-item,
  .top-picks-section .top-picks-scroll .thumb-card,
  .featured-games-section .featured-grid .thumb-card,
  .new-games-section .new-games-scroll .thumb-card,
  .multiplayer-section .multiplayer-scroll .thumb-card,
  .scroll-row .thumb-card,
  .hero-section .thumb-card {
    aspect-ratio: 16/9 !important;
    min-width: var(--hero-thumb-min) !important;
    width: var(--hero-thumb-width) !important;
    flex: 0 0 auto !important;
    height: auto !important;
  }
}

/* Make sure Recently Played thumbnails fully fill their card like other hero thumbs */
.recent-games-section .recent-scroll .thumb-card {
  display: block;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 16/9;
  min-width: var(--hero-thumb-min);
  width: var(--hero-thumb-width);
  flex: 0 0 auto;
}

.recent-games-section .recent-scroll .thumb-card img,
.recent-games-section .recent-scroll .thumb-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-games-section .recent-scroll .thumb-card .thumb-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  color: #fff;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure thumbnail media always fill their card containers and crop gracefully.
   This override applies across breakpoints and uses !important to win over
   legacy rules that may enforce square dimensions. */
.popular-game-item img.popular-video,
.popular-game-item video.popular-video,
.popular-game-item img,
.popular-game-item video,
.thumb-card img,
.thumb-card video,
.recent-games-section .recent-scroll .thumb-card img,
.recent-games-section .recent-scroll .thumb-card video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Clear any stray aspect-ratio forcing on inner media so they don't remain square */
.popular-game-item img[style],
.thumb-card img[style] {
  aspect-ratio: auto !important;
}

/* Compact Recently Played override (end of file) */
.recent-games-section .recent-scroll.popular-scroll,
.recent-games-section .recent-scroll {
  gap: 4px !important;
}

.recent-games-section .recent-scroll .thumb-card,
.recent-games-section .thumb-card {
  aspect-ratio: 4 / 3 !important;
  min-width: 96px !important;
  width: min(160px, 18vw) !important;
  padding: 0 !important;
}

.recent-games-section .thumb-card .thumb-overlay h4 {
  font-size: 0.66rem !important;
  padding-right: 3px !important;
}

@media (max-width: 420px) {
  .recent-games-section .recent-scroll .thumb-card,
  .recent-games-section .thumb-card {
    min-width: 72px !important;
    width: min(140px, 36vw) !important;
  }
}

/* Strong, specific overrides to ensure Recently Played thumbs fit well
   Use center-crop and a 4:3 landscape aspect so images fill the card. */
.recent-games-section .recent-scroll .thumb-card {
  aspect-ratio: 4 / 3 !important;
  min-width: 96px !important;
  width: min(160px, 18vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.recent-games-section .recent-scroll .thumb-card img,
.recent-games-section .recent-scroll .thumb-card video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Ensure the thumb-overlay doesn't force extra height */
.recent-games-section .recent-scroll .thumb-card .thumb-overlay {
  bottom: 0 !important;
  padding: 6px 8px !important;
}