/* ============================================================
   SAIMBI GAMES — Core Design System
   ============================================================
   Palette:
     --bg-primary:   #e8ecf6  (cool off-white)
     --bg-secondary: #dce3f2  (soft blue tint)
     --accent-1:     #0553FF  (signature blue)
     --accent-2:     #f59e0b  (golden amber)
     --accent-3:     #facc15  (bright yellow)
     --text-primary: #0f1734  (deep navy-black)
     --text-secondary:#4b5563  (warm gray)

   Typography:
     Headings & body → Montserrat  (Google Fonts, weights 400-900)
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Core: Blue (#0553FF) · Gold/Yellow · White */
  --white: #ffffff;
  --black: #0a0d16;
  --bg-primary: #e8ecf6;
  /* Stronger off-white/blue-tinted background for better contrast */
  --bg-secondary: #dce3f2;
  --bg-card: #ffffff;
  --bg-card-hover: #f7faff;
  --accent-1: #0553FF;
  --accent-1-light: #e6edff;
  --accent-2: #f59e0b;
  --accent-3: #facc15;
  --gradient-main: linear-gradient(135deg, #0553FF, #4d8bff, #a8c3ff);
  --gradient-vibrant: linear-gradient(135deg, #0553FF, #3d78ff);
  --gradient-gold: linear-gradient(135deg, #f59e0b, #facc15, #fef08a);
  --text-primary: #0f1734;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --border-light: rgba(5, 83, 255, 0.1);
  --border-card: rgba(5, 83, 255, 0.08);
  --shadow-soft: 0 4px 24px rgba(5, 83, 255, 0.08);
  --shadow-card: 0 8px 32px rgba(5, 83, 255, 0.06);
  --shadow-glow: 0 4px 30px rgba(5, 83, 255, 0.15);
  --nav-bg: rgba(255, 255, 255, 0.6);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.92);
  --hero-bg-dark: var(--bg-primary);
  --hero-bg-light: var(--accent-1-light);
  --glow-1: rgba(5, 83, 255, 0.04);
  --glow-2: rgba(245, 158, 11, 0.03);
  --skeleton-bar: rgba(5, 83, 255, 0.04);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s ease;
  --transition-slow: 0.6s ease;
  --font-heading: 'Montserrat', sans-serif;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --max-width: 1200px;
  --max-width-wide: 1600px;
  /* Cinematic layer */
  --scrim: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.92) 100%);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg-primary: #05070f;
  --bg-secondary: #0b1020;
  --bg-card: rgba(11, 16, 32, 0.75);
  --bg-card-hover: rgba(11, 16, 32, 0.95);
  --accent-1: #4d8bff;
  --accent-1-light: rgba(77, 139, 255, 0.15);
  --accent-2: #fef08a;
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #8fb0ff;
  --border-light: rgba(77, 139, 255, 0.12);
  --border-card: rgba(77, 139, 255, 0.15);
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 4px 30px rgba(77, 139, 255, 0.2);
  --nav-bg: rgba(5, 7, 15, 0.6);
  --nav-bg-scrolled: rgba(5, 7, 15, 0.92);
  --hero-bg-dark: var(--bg-primary);
  --hero-bg-light: #0a1836;
  --glow-1: rgba(77, 139, 255, 0.08);
  /* stronger for dark */
  --glow-2: rgba(254, 240, 138, 0.04);
  --skeleton-bar: rgba(77, 139, 255, 0.08);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

/* Subtle decorative background blobs */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 600px at 15% 25%, var(--glow-1), transparent),
    radial-gradient(ellipse 500px 500px at 85% 75%, var(--glow-2), transparent);
  pointer-events: none;
  z-index: 0;
}

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

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

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

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
}

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

p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

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

ul,
ol {
  list-style: none;
}

/* ---------- Utility Classes ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5rem 0;
  position: relative;
  z-index: 1;
}

/* Small uppercase tag used above major headings — "01 / GAMES" style */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 0.9rem;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent-1);
  box-shadow: 0 0 8px var(--accent-1);
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title .eyebrow {
  justify-content: center;
}

.section-title h2 {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.6rem;
}

.section-title p {
  max-width: 600px;
  margin: 0 auto;
}

.gradient-text {
  background: var(--gradient-vibrant);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gold-text {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient-vibrant);
  color: #fff;
  box-shadow: 0 4px 20px rgba(5, 83, 255, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(5, 83, 255, 0.4);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--accent-1);
  border: 2px solid var(--accent-1);
}

.btn-outline:hover {
  background: var(--accent-1);
  color: #fff;
  transform: translateY(-2px);
}

.btn-gold {
  background: var(--gradient-gold);
  color: #0f1734 !important;
  /* Forces dark text even in dark mode */
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4);
  color: #0f1734 !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.3);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* ---------- Glass Card (now light elevated card) ---------- */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
}

.glass-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(5, 83, 255, 0.15);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

/* ---------- Navigation ----------
   Deliberately theme-invariant: a dark cinematic bar over any
   page, light or dark mode, so the site keeps one consistent
   "studio" frame while body content still respects the toggle. */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.4rem 0;
  transition: all var(--transition-base);
  background: linear-gradient(180deg, rgba(5, 6, 12, 0.65), transparent);
}

.navbar.scrolled {
  background: rgba(6, 7, 14, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(5, 83, 255, 0.18);
  padding: 0.75rem 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.navbar-brand::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: 0.6rem;
  border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 12px var(--accent-1);
}

.navbar-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
  /* Prevents the logo edges from being cropped out */
  background-color: #ffffff;
  /* Gives solid backing for JPGs */
  margin-right: 0.75rem;

  /* Light Mode: Yellow line, Purple glow */
  border: 1px solid rgba(245, 158, 11, 0.5);
  /* Yellow Line */
  box-shadow: 0 0 16px rgba(5, 83, 255, 0.45);
  /* Purple Glow */
  transition: all var(--transition-base);
}

[data-theme="dark"] .navbar-logo {
  /* Dark Mode: White line, Yellow glow (Reduced to balance with Light Mode) */
  border-color: rgba(255, 255, 255, 0.35);
  /* White Line */
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
  /* Yellow Glow */
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.navbar-links a {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  position: relative;
}

.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 1.1rem;
  width: 0;
  height: 2px;
  background: var(--accent-1);
  box-shadow: 0 0 8px var(--accent-1);
  transition: width var(--transition-base);
}

.navbar-links a:hover,
.navbar-links a.active {
  color: #ffffff;
}

.navbar-links a:hover::after,
.navbar-links a.active::after {
  width: calc(100% - 2.2rem);
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
  background: none;
  border: none;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: all var(--transition-base);
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--text-primary);
  transition: transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn:hover {
  transform: scale(1.1) rotate(10deg);
}

.navbar .theme-toggle-btn {
  color: #ffffff;
}


/* ---------- Hero Section (cinematic, full-bleed) ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding: 8rem 0 5rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg-dark);
}

/* Key-art layer — parallax driven by --hero-shift (set in shared.js).
   No photography asset exists yet, so the "art" is generated purely
   in CSS: angled light beams + a fine grid, in the brand blue. Drop
   a background-image on this element later to swap in real key art. */
.hero-media,
.page-header::before {
  position: absolute;
  inset: -8% 0 0;
  z-index: -2;
  background-size: cover;
  background-position: center 30%;
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.08);
  will-change: transform;
  background-color: #05060c;
  background-image:
    repeating-linear-gradient(115deg, rgba(5, 83, 255, 0.10) 0 2px, transparent 2px 140px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 64px),
    radial-gradient(ellipse 70% 55% at 78% 20%, rgba(5, 83, 255, 0.35), transparent 60%),
    radial-gradient(ellipse 55% 45% at 15% 85%, rgba(245, 158, 11, 0.12), transparent 65%);
}

.page-header::before {
  content: '';
  inset: 0;
}

/* ---------- Page Header (dark cinematic band for non-hero pages) ----------
   Gives every page a dark backdrop under the fixed nav, so the nav's
   white type stays legible before the user scrolls. */
.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 9.5rem 0 5rem;
  text-align: center;
  background: #05060c;
}

.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Text always ends exactly at the top of the bottom padding (that's
     just the CSS box model), so as long as this fade zone is smaller
     than the padding-bottom above, it can never reach into the text —
     on any page, regardless of content length. Previously the zone
     (200px) was bigger than the padding (72px), which is what ate
     into the paragraph text. Fades straight to the page's own
     background color in one smooth ramp, not a separate black tint
     first, so it blends seamlessly into the section below. */
  background: linear-gradient(180deg, transparent 0, transparent calc(100% - 56px), var(--bg-primary) 100%);
  pointer-events: none;
}

.page-header .eyebrow {
  justify-content: center;
  color: #ffffff;
  opacity: 0.85;
}

.page-header h1 {
  color: #ffffff;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.4);
}

.page-header p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0.75rem auto 0;
}

/* Cinematic vignette + bottom scrim so type always stays legible */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--scrim),
    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}

/* Colour wash ties the art to the brand blue */
.hero::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle 900px at 12% 88%, rgba(5, 83, 255, 0.28), transparent 70%),
    radial-gradient(circle 600px at 88% 12%, rgba(245, 158, 11, 0.10), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: heroFloat 22s ease-in-out infinite;
}

@keyframes heroFloat {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    transform: translate(20px, -20px) rotate(1deg);
  }

  66% {
    transform: translate(-15px, 15px) rotate(-1deg);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--accent-1-light);
  border: 1px solid rgba(5, 83, 255, 0.15);
  border-radius: 50px;
  color: var(--accent-1);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  background: var(--accent-2);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

.hero .eyebrow {
  color: #ffffff;
  opacity: 0.85;
}

.hero .eyebrow::before {
  background: var(--accent-1);
}

.hero h1 {
  color: #ffffff;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.98;
  margin-bottom: 1.5rem;
  letter-spacing: -0.5px;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.4);
}

.hero p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 0 2.5rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Scroll cue — bottom-center invitation to keep scrolling */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.hero-scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent);
  animation: scrollCueDrop 2s ease-in-out infinite;
}

/* .page-header is much shorter than the full-height hero, so the cue
   needs a smaller footprint here or it overlaps the text above it. */
.page-header .hero-scroll-cue {
  bottom: 0.75rem;
}

.page-header .hero-scroll-cue .line {
  height: 16px;
}

@keyframes scrollCueDrop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- Ticker Strip ---------- */
.ticker-strip {
  position: relative;
  overflow: hidden;
  background: #06070e;
  border-top: 1px solid rgba(5, 83, 255, 0.25);
  border-bottom: 1px solid rgba(5, 83, 255, 0.25);
  padding: 0.9rem 0;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  animation: tickerScroll 28s linear infinite;
  will-change: transform;
}

.ticker-track span {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  padding: 0 1.5rem;
}

.ticker-track span::after {
  content: '◆';
  margin-left: 1.5rem;
  color: var(--accent-1);
  font-size: 0.6rem;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .hero-scroll-cue .line { animation: none; }
}

/* ---------- Game Card ---------- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.game-card {
  background: #0b0d16;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out-expo), box-shadow var(--transition-base), border-color var(--transition-base);
  box-shadow: var(--shadow-soft);
  /* --tilt-x/--tilt-y are set inline by the mouse-follow tilt handler in shared.js (desktop only) */
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

.game-card:hover,
.game-card.anim-element.visible:hover {
  border-color: rgba(5, 83, 255, 0.5);
  box-shadow: 0 20px 50px rgba(5, 83, 255, 0.25);
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-6px);
  z-index: 2;
}

.game-card:active,
.game-card.anim-element.visible:active {
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-2px);
}

.game-card:focus {
  outline: none;
}

.game-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-bottom: none;
  background: #0b0d16;
  position: relative;
  overflow: hidden;
}

.game-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 7, 14, 0.92) 100%);
  pointer-events: none;
}

.game-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo), filter var(--transition-base);
}

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

.game-card-image .placeholder-icon {
  font-size: 4rem;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.game-card-body {
  padding: 1.5rem;
}

.game-card-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.game-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  font-family: var(--font-heading);
}

.tag-genre {
  background: var(--accent-1-light);
  color: var(--accent-1);
  border: 1px solid rgba(5, 83, 255, 0.15);
}

.tag-platform {
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent-2);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.tag-new {
  background: var(--gradient-gold);
  color: #0f1734;
  border: none;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.game-card-body .release-date {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.75rem;
}

.game-card-body .description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.5rem;
  line-height: 1.6;
}

/* Play Store button */
.game-card-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

/* ---------- Game Modal ---------- */
.game-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.game-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.game-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.game-modal-overlay.active .game-modal-content {
  transform: translateY(0) scale(1);
}

.game-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}

.game-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.game-modal-header {
  padding: 2rem;
  border-bottom: 1px solid var(--border-card);
}

.game-modal-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.game-modal-body {
  padding: 2rem;
}

.game-modal-body .description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 2rem;
}

/* ---------- News Timeline ---------- */
.news-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.news-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent-1), var(--accent-2), transparent);
  border-radius: 2px;
}

.news-item {
  position: relative;
  padding-left: 60px;
  margin-bottom: 3rem;
}

.news-item::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 8px;
  width: 16px;
  height: 16px;
  background: var(--gradient-vibrant);
  border-radius: 50%;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 0 10px rgba(5, 83, 255, 0.25);
}

.news-date-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 50px;
  color: var(--accent-2);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-heading);
  margin-bottom: 0.75rem;
}

.news-item .glass-card {
  padding: 1.5rem;
}

.news-item h3 {
  margin-bottom: 0.25rem;
}

.news-item h4 {
  font-size: 1.1rem;
  color: var(--accent-1);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.news-item p {
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ---------- About Sections ---------- */
.page-header .subtitle {
  font-size: 1.15rem;
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* About Flow Section */
.about-flow {
  max-width: 800px;
  margin: 0 auto 3rem;
}

.about-flow-item {
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.about-flow-item .flow-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.about-flow-item .flow-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.about-flow-item h3 {
  font-size: 1.2rem;
  color: var(--accent-1);
}

.about-flow-item p {
  font-size: 0.95rem;
  line-height: 1.8;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.about-card {
  text-align: center;
  padding: 2rem 1.5rem;
}

.about-card .icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.about-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

.about-card p {
  font-size: 0.9rem;
}

/* ---------- Collapsible Sections (ToS / Privacy) ---------- */
.collapsible {
  margin-bottom: 1rem;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  user-select: none;
}

.collapsible-header:hover {
  border-color: rgba(5, 83, 255, 0.2);
  box-shadow: var(--shadow-soft);
}

.collapsible-header h3 {
  font-size: 1.1rem;
}

.collapsible-header .chevron {
  font-size: 1.2rem;
  transition: transform var(--transition-base);
  color: var(--text-muted);
}

.collapsible.open .collapsible-header {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-color: rgba(5, 83, 255, 0.2);
}

.collapsible.open .chevron {
  transform: rotate(180deg);
}

.collapsible-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.collapsible.open .collapsible-body {
  max-height: 3000px;
}

.collapsible-content {
  padding: 1.5rem;
}

.collapsible-content h4 {
  color: var(--accent-1);
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
}

.collapsible-content p,
.collapsible-content li {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.collapsible-content ul {
  padding-left: 1.25rem;
  list-style: disc;
  margin-bottom: 0.75rem;
}

.collapsible-content li {
  margin-bottom: 0.35rem;
}

/* ---------- Contact Section ---------- */
.contact-bar {
  text-align: center;
  padding: 2rem;
  margin-top: 2rem;
}

.contact-bar a {
  font-size: 1.05rem;
  font-weight: 600;
}

/* ---------- Footer ----------
   Theme-invariant dark bar, mirroring the navbar, so the site
   is bookended by the same cinematic studio frame. */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(5, 83, 255, 0.18);
  padding: 3.5rem 0 2rem;
  text-align: center;
  background: #06070e;
  margin-top: auto;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 60%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent-1), transparent);
  box-shadow: 0 0 20px var(--accent-1);
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  transition: all var(--transition-base);
}

.footer-social a:hover {
  background: var(--accent-1);
  color: #fff;
  border-color: var(--accent-1);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(5, 83, 255, 0.4);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent-1);
}

.footer p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
}

/* ---------- Scroll-triggered Animation Targets ---------- */
.anim-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.anim-element.visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-left {
  transform: translateX(-40px);
}

.anim-left.visible {
  transform: translateX(0);
}

.anim-right {
  transform: translateX(40px);
}

.anim-right.visible {
  transform: translateX(0);
}

.anim-scale {
  transform: scale(0.9);
}

.anim-scale.visible {
  transform: scale(1);
}

/* Staggered delays */
.anim-delay-1 {
  transition-delay: 0.1s;
}

.anim-delay-2 {
  transition-delay: 0.2s;
}

.anim-delay-3 {
  transition-delay: 0.3s;
}

.anim-delay-4 {
  transition-delay: 0.4s;
}

/* ---------- Loading Skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg,
      var(--skeleton-bar) 25%,
      var(--border-light) 50%,
      var(--skeleton-bar) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

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

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

.skeleton-card {
  height: 320px;
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
  width: 80%;
}

.skeleton-text.short {
  width: 50%;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .navbar-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 300px;
    height: 100vh;
    background: rgba(6, 7, 14, 0.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 5rem 2rem 2rem;
    gap: 0.5rem;
    transition: right var(--transition-base);
    border-left: 1px solid rgba(5, 83, 255, 0.18);
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.35);
  }

  .navbar-links.open {
    right: 0;
  }

  .navbar-links a {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
    width: 100%;
  }

  .hamburger {
    display: flex;
  }

  .hero {
    padding: 7rem 1.5rem 5rem;
    min-height: 92svh;
  }

  .hero-scroll-cue {
    display: none;
  }

  .ticker-track span {
    font-size: 0.7rem;
    padding: 0 1rem;
  }

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

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

  .news-timeline::before {
    left: 14px;
  }

  .news-item {
    padding-left: 45px;
  }

  .news-item::before {
    left: 7px;
    width: 14px;
    height: 14px;
  }

  .section {
    padding: 3rem 0;
  }
}

@media (max-width: 480px) {
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .footer-links {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ---------- Image Gallery & Dots Pagination ---------- */
.gallery-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.image-gallery {
  display: flex;
  gap: 0;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  padding: 0;
  margin: 0;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.image-gallery::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge hides native bar */
}

.image-gallery img {
  flex: 0 0 100%;
  /* Fully remove side boundary gaps! */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Prevents fast scrolling jumping past images */
  border-radius: 0;
  aspect-ratio: auto;
  max-height: 450px;
  /* Dynamic adaptation */
  object-fit: contain;
  border: none;
}

/* Trailer slide — a YouTube embed, always the first slide when present */
.gallery-video-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  aspect-ratio: 16 / 9;
  max-height: 450px;
  background: #000;
}

.gallery-video-slide iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.gallery-dots {
  position: absolute;
  bottom: 8px;
  /* Overlay internally like Instagram */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0.35rem 0.7rem;
  background-color: rgba(255, 255, 255, 0.4);
  /* Light colored round cornered square */
  border-radius: 14px;
  width: fit-content;
  margin: 0;
}

.gallery-dots .dot {
  width: 6px;
  height: 6px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: none;
  border-radius: 50%;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.gallery-dots .dot.active {
  background-color: var(--accent-1);
  /* Purple/Themed */
  transform: scale(1.4);
}

/* ---------- Gallery Arrows (desktop prev/next) ----------
   Mobile already gets native swipe for free from the scroll-snap
   track above, so arrows only appear for mouse/trackpad users and
   fade in on hover rather than sitting on screen permanently. */
.gallery-arrow {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(6, 7, 14, 0.55);
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%) scale(0.85);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
    pointer-events: none;
  }

  .gallery-wrapper:hover .gallery-arrow {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
  }

  .gallery-arrow:hover {
    background: var(--accent-1);
  }

  .gallery-arrow-prev {
    left: 10px;
  }

  .gallery-arrow-next {
    right: 10px;
  }
}

/* Media query cleanup */
@media (min-width: 600px) {
  .hero-content {
    flex-direction: row;
  }
}

/* ============================================================
   RICH TEXT OUTPUT (native admin editor → public pages)
   ============================================================
   The admin editor stores plain HTML from a contenteditable
   field (see initRTE in js/admin.js). These rules render that
   HTML on the public site.
   ============================================================ */

.rich-text,
.description {
  overflow-wrap: break-word;
}

/* ---------- Headings ---------- */
.rich-text h1,
.rich-text h2,
.rich-text h3 {
  color: var(--text-primary);
  margin: 1.6rem 0 0.75rem;
  line-height: 1.25;
}

.rich-text h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.rich-text h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.rich-text h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }

.rich-text > :first-child { margin-top: 0; }

.rich-text p {
  margin-bottom: 0.9rem;
}

/* ---------- Lists ---------- */
.rich-text ol,
.rich-text ul,
.description ol,
.description ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.rich-text li,
.description li {
  margin-bottom: 0.4rem;
  color: var(--text-secondary);
}

.rich-text ul li::marker,
.description ul li::marker {
  color: var(--accent-1);
}

.rich-text ol li::marker,
.description ol li::marker {
  color: var(--accent-1);
  font-weight: 600;
}

/* ---------- Links ---------- */
.rich-text a,
.description a {
  color: var(--accent-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Quote ---------- */
.rich-text blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid var(--accent-1);
  background: var(--accent-1-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
  font-style: italic;
}

/* ---------- Note / callout ---------- */
.rich-text .rte-callout {
  display: flex;
  gap: 0.6rem;
  margin: 1.25rem 0;
  padding: 0.8rem 1.1rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.rich-text .rte-callout::before {
  content: '📝';
  flex-shrink: 0;
}

/* ---------- Table ---------- */
.rich-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.25rem 0;
  font-size: 0.925rem;
}

.rich-text table td {
  border: 1px solid var(--border-light);
  padding: 0.55rem 0.8rem;
  vertical-align: top;
  color: var(--text-secondary);
}