/**
 * ==========================================================================
 * RESPONSIVE CSS FOUNDATION
 * Noteworthy News - Modern Responsive Architecture
 * ==========================================================================
 *
 * This file establishes the design token system for fluid, accessible
 * responsive design. All values use rem/clamp() to respect user preferences.
 *
 * Architecture: Mobile-first with content-based breakpoints
 * Supports: 360px → 1440px+ viewports, 200% zoom, reduced-motion
 *
 * Table of Contents:
 *   1. Breakpoint Reference
 *   2. Color Tokens
 *   3. Typography Scale (Fluid)
 *   4. Spacing Scale (Fluid)
 *   5. Layout Tokens
 *   6. Animation Tokens
 *   7. Base Styles
 *   8. Responsive Utilities
 *   9. Accessibility: Reduced Motion
 *   10. Accessibility: High Contrast
 *   11. Responsive Breakpoint Examples
 *   12. Layout Components
 *   13-15. Section Components
 *   16. CSS Cascade Layers (Specificity Management)
 *   17. Container Queries (Component-Level Responsiveness)
 *   18. Migration Notes & Deduplication Guide
 *
 * ==========================================================================
 */

/* ==========================================================================
   1. BREAKPOINT REFERENCE
   ==========================================================================
   
   CSS custom properties CANNOT be used in media query conditions.
   These are documented here for reference and used in JavaScript if needed.
   
   Content-first breakpoints (rem-based for zoom support):
   
   --bp-sm: 36rem   → 576px  - Compact phones → standard phones
   --bp-md: 48rem   → 768px  - Phones → tablets  
   --bp-lg: 64rem   → 1024px - Tablets → desktop
   --bp-xl: 80rem   → 1280px - Desktop → wide screens
   
   Usage in media queries:
   @media (min-width: 36rem)  { ... }  /* sm and up */
   @media (min-width: 48rem)  { ... }  /* md and up */
   @media (min-width: 64rem)  { ... }  /* lg and up */
   @media (min-width: 80rem)  { ... }  /* xl and up */
   
   ========================================================================== */

:root {
  /* Breakpoint values for JS access (cannot use in CSS media queries) */
  --bp-sm: 36rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;
}

/* ==========================================================================
   2. COLOR TOKENS
   ==========================================================================
   
   Preserving the existing Noteworthy News color palette.
   Using CSS custom properties for consistency and theming capability.
   
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #4A90E2;
  --color-primary-light: #4FACFE;
  --color-primary-dark: #3A7BC8;
  
  /* Background Colors */
  --color-bg-dark: #07152a;
  --color-bg-darker: #0d1f3a;
  --color-bg-card: rgba(255, 255, 255, 0.05);
  --color-bg-card-hover: rgba(255, 255, 255, 0.08);
  --color-bg-overlay: rgba(0, 0, 0, 0.85);
  
  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.85);
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-subtle: rgba(255, 255, 255, 0.6);
  
  /* Accent Colors */
  --color-accent-warning: #ffcc00;
  --color-accent-success: #4ade80;
  --color-accent-error: #ef4444;
  --color-accent-info: #4FACFE;
  
  /* Accent Gradient System - Cyan to Blue */
  --accent-cyan: #06B6D4;
  --accent-blue: #3B82F6;
  --accent-gradient: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  --glow-cyan: rgba(6, 182, 212, 0.5);
  --glow-blue: rgba(59, 130, 246, 0.5);
  
  /* Border Colors */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.05);
  --color-border-focus: var(--accent-cyan);
}

/* ==========================================================================
   3. TYPOGRAPHY SCALE (Fluid)
   ==========================================================================
   
   Fluid typography using clamp() eliminates the need for font-size 
   media queries. Values scale smoothly from 360px to 1440px viewports.
   
   Formula: clamp(min, preferred, max)
   - min: Smallest acceptable size (at narrow viewports)
   - preferred: Fluid calculation using vw
   - max: Largest acceptable size (at wide viewports)
   
   Based on a modular scale with ratio ~1.2 (minor third)
   
   ========================================================================== */

:root {
  /* Base font size - browser default is 16px = 1rem */
  --fs-base-px: 16;
  
  /* 
   * Typography Scale
   * Each step uses clamp() for fluid scaling between min and max
   * The middle value (preferred) uses viewport width for smooth transitions
   */
  
  /* Extra Small: Labels, captions, timestamps */
  /* 12px → 14px */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  
  /* Small: Secondary text, metadata */
  /* 14px → 16px */
  --fs-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  
  /* Base: Body text, paragraphs */
  /* 16px → 18px */
  --fs-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  
  /* Medium: Emphasized text, card titles */
  /* 18px → 20px */
  --fs-md: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  
  /* Large: Section headings (h3) */
  /* 24px → 32px */
  --fs-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  
  /* Extra Large: Page headings (h2) */
  /* 32px → 48px */
  --fs-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  
  /* 2X Large: Hero headings (h1) */
  /* 40px → 64px */
  --fs-2xl: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);
  
  /* Line Heights */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --lh-loose: 1.8;
  
  /* Font Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  
  /* Font Families */
  --ff-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --ff-serif: 'Source Serif 4', 'Century Schoolbook', Georgia, serif;
  --ff-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Consolas, monospace;
}

/* ==========================================================================
   4. SPACING SCALE (Fluid)
   ==========================================================================
   
   Fluid spacing using clamp() for consistent rhythm across viewports.
   Spacing scales proportionally with viewport width.
   
   Usage:
   - padding: var(--space-md);
   - gap: var(--space-sm);
   - margin-bottom: var(--space-lg);
   
   ========================================================================== */

:root {
  /* 
   * Spacing Scale
   * Each step uses clamp() for fluid scaling
   * Maintains visual rhythm from mobile to desktop
   */
  
  /* Extra Small: Tight spacing, icon gaps */
  /* 4px → 8px */
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  
  /* Small: Button padding, inline gaps */
  /* 8px → 12px */
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  
  /* Medium: Card padding, form spacing */
  /* 16px → 24px */
  --space-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
  
  /* Large: Section padding */
  /* 24px → 40px */
  --space-lg: clamp(1.5rem, 1.15rem + 1.75vw, 2.5rem);
  
  /* Extra Large: Major section gaps */
  /* 32px → 64px */
  --space-xl: clamp(2rem, 1.25rem + 3.75vw, 4rem);
  
  /* 2X Large: Hero/page sections */
  /* 48px → 96px */
  --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);
  
  /* Fixed spacing for elements that shouldn't scale (e.g., borders, outlines) */
  --space-px: 1px;
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
}

/* ==========================================================================
   5. LAYOUT TOKENS
   ==========================================================================
   
   Container widths, grid settings, and layout measurements.
   
   ========================================================================== */

:root {
  /* Container Max Widths */
  --container-sm: 36rem;   /* 576px - Narrow content */
  --container-md: 48rem;   /* 768px - Standard content */
  --container-lg: 64rem;   /* 1024px - Wide content */
  --container-xl: 80rem;   /* 1280px - Full width content */
  --container-2xl: 90rem;  /* 1440px - Maximum content */
  
  /* Content Width (for readable text) */
  --content-width: 42.5rem; /* ~680px - optimal reading width */
  
  /* Gutter/Gap */
  --gutter: var(--space-md);
  
  /* Border Radius */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-2xl: 1.5rem;  /* 24px */
  --radius-full: 9999px; /* Pill shape */
  
  /* Z-Index Scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-skip-link: 900;
  
  /* Touch Target Minimum (WCAG 2.5.5) */
  --touch-target-min: 44px;
  
  /* Header Height */
  --header-height: 80px;
  --header-height-mobile: 60px;
}

/* ==========================================================================
   6. ANIMATION TOKENS
   ==========================================================================
   
   Duration and easing functions for consistent motion design.
   Respects prefers-reduced-motion automatically via base styles.
   
   ========================================================================== */

:root {
  /* Durations */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  
  /* Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Common Transitions */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-in-out);
  --transition-slow: var(--duration-slow) var(--ease-in-out);
}

/* ==========================================================================
   7. BASE STYLES
   ==========================================================================
   
   Reset and base element styles using the token system.
   Mobile-first approach - base styles are for smallest screens.
   
   ========================================================================== */

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

/* Prevent font size inflation on mobile */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Base body styles */
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%);
  background-color: var(--color-bg-dark);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings - Using Sora display font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

/* Paragraphs */
p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* Links */
a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
}

/* Images */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements inherit font */
input, button, textarea, select {
  font: inherit;
}

/* Remove default button styles */
button {
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Lists */
ul, ol {
  list-style: none;
}

/* ==========================================================================
   8. RESPONSIVE UTILITIES
   ==========================================================================
   
   Utility classes for responsive behavior.
   Mobile-first: base styles apply to all, then progressively enhance.
   
   ========================================================================== */

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--z-skip-link);
}

.skip-link:focus {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  width: auto;
  height: auto;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-dark);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-focus);
  border-radius: var(--radius-md);
  z-index: var(--z-skip-link);
}

/* Focus visible styles (for keyboard navigation) */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Container utility */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Responsive display utilities */
/* Hide on mobile, show on larger screens */
.hide-mobile {
  display: none;
}

@media (min-width: 48rem) {
  .hide-mobile {
    display: initial;
  }
}

/* Show on mobile, hide on larger screens */
.show-mobile {
  display: initial;
}

@media (min-width: 48rem) {
  .show-mobile {
    display: none;
  }
}

/* ==========================================================================
   9. ACCESSIBILITY: REDUCED MOTION
   ==========================================================================
   
   Respect user's motion preferences.
   Disables animations and transitions for users who prefer reduced motion.
   
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   10. ACCESSIBILITY: HIGH CONTRAST
   ==========================================================================
   
   Enhanced styles for users who prefer high contrast.
   
   ========================================================================== */

@media (prefers-contrast: high) {
  :root {
    --color-border: rgba(255, 255, 255, 0.3);
    --color-text-muted: rgba(255, 255, 255, 0.9);
    --color-text-subtle: rgba(255, 255, 255, 0.85);
  }
}

/* ==========================================================================
   11. RESPONSIVE BREAKPOINT EXAMPLES
   ==========================================================================
   
   Demonstration of mobile-first responsive patterns.
   These serve as templates for component-level styles.
   
   Media Query Reference (use actual values, not custom properties):
   
   @media (min-width: 36rem)  → sm: 576px and up
   @media (min-width: 48rem)  → md: 768px and up  
   @media (min-width: 64rem)  → lg: 1024px and up
   @media (min-width: 80rem)  → xl: 1280px and up
   
   ========================================================================== */

/* Example: Responsive container widths */
.container--narrow {
  max-width: var(--container-sm);
}

.container--wide {
  max-width: var(--container-lg);
}

@media (min-width: 64rem) {
  .container--wide {
    max-width: var(--container-xl);
  }
}

/* Example: Responsive grid */
.grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr; /* Mobile: single column */
}

@media (min-width: 36rem) {
  .grid--2-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .grid--3-col {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid--4-col {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Example: Responsive flex */
.flex-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 48rem) {
  .flex-stack--row-md {
    flex-direction: row;
    align-items: center;
  }
}

/* ==========================================================================
   12. LAYOUT COMPONENTS
   ==========================================================================
   
   Mobile-first layout styles for core page components.
   Base styles = mobile, then progressively enhance at breakpoints.
   
   Components:
   - Header (nav collapse/expand)
   - Hero Section (stack vs side-by-side)
   - Feed (1-2 columns)
   - Game Cards (responsive grid)
   - Footer (stack → 2 cols → 4+ cols)
   
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 HEADER LAYOUT
   --------------------------------------------------------------------------
   Mobile: Fixed header with hamburger menu
   Tablet+: Full navigation visible
   -------------------------------------------------------------------------- */

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: var(--header-height-mobile);
  padding-block: var(--space-sm);
  background: rgba(7, 21, 42, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-fixed);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Body offset for fixed header */
body {
  padding-top: var(--header-height-mobile);
}

@media (min-width: 64rem) {
  body {
    padding-top: var(--header-height);
  }
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Header Left: Logo + Brand */
.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.header-logo {
  flex-shrink: 0;
}

.header-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

@media (min-width: 48rem) {
  .header-logo img {
    width: 40px;
    height: 40px;
  }
}

.brand-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.brand-info h1,
.brand-name {
  font-size: 0.95rem; /* Slightly smaller to prevent clipping */
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  white-space: nowrap;
  margin: 0;
  /* Don't truncate brand name - let it display fully */
  overflow: visible !important;
  text-overflow: clip !important;
}

.brand-info {
  overflow: visible !important;
  flex-shrink: 0; /* Prevent shrinking */
}

.header-left {
  overflow: visible !important;
  flex-shrink: 0; /* Prevent shrinking */
}

@media (min-width: 26rem) {
  .brand-info h1,
  .brand-name {
    font-size: var(--fs-md);
  }
}

/* Hide tagline on mobile */
.brand-info p,
.brand-tagline {
  display: none;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-tight);
  white-space: nowrap;
  margin: 0;
}

@media (min-width: 48rem) {
  .brand-info p,
  .brand-tagline {
    display: block;
  }
}

/* Header Center: Navigation */
.header-center {
  display: none; /* Hidden on mobile, shown via hamburger */
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

@media (min-width: 64rem) {
  .header-center {
    display: flex;
  }
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-nav ul {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 80rem) {
  .main-nav ul {
    gap: var(--space-lg);
  }
}

.main-nav .nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  padding: var(--space-xs) 0;
  transition: color var(--transition-fast);
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
  color: var(--color-primary);
}

/* Header Right: Actions */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Hide header-right buttons on mobile/tablet, show hamburger instead */
@media (max-width: 48rem) { /* ~768px - tablet and below */
  .header-right .auth-btn,
  .header-right .feedback-btn,
  .header-right .music-control-btn {
    display: none !important;
  }
  
  .header-right {
    gap: 0;
  }
}

@media (min-width: 48.0625rem) { /* Above tablet */
  .header-right .auth-btn,
  .header-right .feedback-btn,
  .header-right .music-control-btn {
    display: inline-flex !important;
  }
}

@media (min-width: 48rem) {
  .header-right {
    gap: var(--space-sm);
  }
}

/* Auth Buttons */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

@media (min-width: 36rem) {
  .auth-btn {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--fs-sm);
  }
}

.signin-btn {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.signin-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.signup-btn {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: var(--color-text-primary);
}

.signup-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

/* Icon Buttons (Music, Feedback) */
.music-control-btn,
.feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.music-control-btn:hover,
.feedback-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Maintenance Notice */
.last-update {
  display: none; /* Hidden on mobile */
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 204, 0, 0.1);
  border: 1px solid rgba(255, 204, 0, 0.3);
  border-radius: var(--radius-lg);
}

@media (min-width: 64rem) {
  .last-update {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none; /* Hidden by default on larger screens */
  justify-content: center;
  align-items: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background: rgba(74, 158, 255, 0.15);
  border: 1px solid rgba(74, 158, 255, 0.4);
  border-radius: 8px;
  cursor: pointer;
}

.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
}

/* Show hamburger on mobile/tablet when buttons are hidden */
@media (max-width: 48rem) { /* ~768px - tablet and below */
  .mobile-menu-toggle {
    display: flex !important;
  }
}

/* Ensure hamburger is hidden on larger screens */
@media (min-width: 48.0625rem) { /* Above tablet */
  .mobile-menu-toggle {
    display: none !important;
  }
}

.mobile-menu-toggle span {
  width: 24px;
  height: 3px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: all var(--transition-normal);
}

/* Hamburger → X animation */
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 42, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: calc(var(--z-fixed) - 1);
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--header-height-mobile);
}

.mobile-nav.active {
  transform: translateX(0);
}

@media (min-width: 64rem) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav-content {
  padding: var(--space-lg) var(--space-md);
}

.mobile-nav-content ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mobile-nav-content .nav-link {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.mobile-nav-content .nav-link:hover,
.mobile-nav-content .nav-link:active {
  background: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   12.2 HERO SECTION LAYOUT
   --------------------------------------------------------------------------
   Mobile: Stacked vertical layout
   Desktop: Side-by-side with decorative elements
   -------------------------------------------------------------------------- */

/* Remove container padding on mobile for full-width hero */
@media (max-width: 48rem) {
  .container,
  #main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

.hero-section {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  padding: var(--space-lg) 0 !important; /* Full width - no horizontal padding on mobile */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important; /* No gap between banner and hero */
  margin: 0 !important;
  margin-top: 0 !important; /* Ensure no gap above */
  margin-left: 0 !important; /* Start at left edge */
  margin-right: 0 !important;
  left: 0 !important;
  text-align: center;
  /* Fix: Allow stat cards to be fully visible - override inline overflow: hidden */
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Fade transition at bottom of hero section into newsletter */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100vw;
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, rgba(7, 21, 42, 0.5) 40%, var(--color-bg-primary, #07152a) 100%);
  pointer-events: none;
  z-index: 2;
}

@media (min-width: 48rem) {
  .hero-section {
    padding: var(--space-xl) var(--space-lg);
  }
}

@media (min-width: 64rem) {
  .hero-section {
    padding: var(--space-2xl) var(--space-xl);
    text-align: left;
  }
}

/* Hero decorative backgrounds - hide on mobile for performance */
.flags-background,
.welcome-background-image,
.rough-terrain-background,
.hero-logo,
.welcome-left-image,
.welcome-right-image {
  display: none;
}

@media (min-width: 64rem) {
  .flags-background,
  .welcome-background-image,
  .rough-terrain-background,
  .hero-logo {
    display: block;
  }
  
  .welcome-left-image,
  .welcome-right-image {
    display: block;
  }
}

/* Hero Title/Welcome Text */
.hero-title {
  margin-bottom: var(--space-md);
}

.welcome-text-container {
  width: 100%;
}

.welcome-text {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}

@media (min-width: 48rem) {
  .welcome-text {
    font-size: var(--fs-2xl);
  }
}

/* Hero Module (Breaking News Feature) */
.hero-module-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.hero-module-container:hover {
  background: var(--color-bg-card-hover);
}

@media (min-width: 48rem) {
  .hero-module-container {
    max-width: 600px;
    padding: var(--space-lg);
  }
}

@media (min-width: 64rem) {
  .hero-module-container {
    max-width: 720px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
}

.hero-module-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

@media (min-width: 64rem) {
  .hero-module-status {
    justify-content: flex-start;
  }
}

.hero-module-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-radius: var(--radius-sm);
}

.hero-module-updated {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.hero-module-headline {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

/* Animated loading dots for headlines */
.hero-module-headline.loading-dots,
.hero-module-headline[data-loading="true"] {
  display: inline-flex;
  align-items: baseline;
}

.hero-module-headline.loading-dots::after,
.hero-module-headline[data-loading="true"]::after {
  content: '';
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: loadingDots 1.4s steps(4, end) infinite;
}

/* Utility class for any element with animated loading dots */
.loading-dots-animated::after {
  content: '';
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: loadingDots 1.4s steps(4, end) infinite;
}

@media (min-width: 48rem) {
  .hero-module-headline {
    font-size: var(--fs-lg);
  }
}

/* Hero Stats Container */
.hero-stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  padding: var(--space-md) 0;
  /* Ensure stat cards aren't clipped during animations */
  overflow: visible;
  margin-top: var(--space-sm);
}

@media (min-width: 64rem) {
  .hero-stats-container {
    justify-content: flex-start;
    gap: var(--space-md);
  }
}

.hero-stat-card {
  flex: 1 1 calc(50% - var(--space-sm));
  min-width: calc(50% - var(--space-sm));
  max-width: calc(50% - var(--space-sm));
  padding: var(--space-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

@media (min-width: 36rem) {
  .hero-stat-card {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 180px;
    padding: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   12.3 FEED LAYOUT
   --------------------------------------------------------------------------
   Mobile: Single column, optimal reading width
   Desktop: Two-column grid
   -------------------------------------------------------------------------- */

.feed-container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-md);
}

@media (min-width: 80rem) {
  .feed-container {
    max-width: var(--container-xl);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

/* Feed Controls (Search/Filter) */
.feed-controls {
  position: sticky;
  top: var(--header-height-mobile);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  margin-bottom: var(--space-lg);
  background: rgba(15, 15, 35, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

@media (min-width: 64rem) {
  .feed-controls {
    top: var(--header-height);
    padding: var(--space-md);
    gap: var(--space-md);
  }
}

/* ==========================================================================
   ENHANCED NEWS SEARCH & FILTER SECTION
   ========================================================================== */

/* Search Container */
#globeSearchContainerPosts,
.breaking-news-search-bar {
  background: linear-gradient(135deg, rgba(15, 25, 45, 0.95) 0%, rgba(7, 21, 42, 0.98) 100%);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(74, 158, 255, 0.05) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

/* Decorative glow effect */
#globeSearchContainerPosts::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(74, 158, 255, 0.5) 20%,
    rgba(79, 172, 254, 0.8) 50%,
    rgba(74, 158, 255, 0.5) 80%,
    transparent 100%
  );
}

/* Search Input Wrapper */
.breaking-news-search-input-wrapper {
  position: relative;
  margin-bottom: var(--space-md);
}

/* Search Icon */
.breaking-news-search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(74, 158, 255, 0.7);
  pointer-events: none;
  z-index: 1;
}

/* Search Input */
#globeSearchInputPosts,
.breaking-news-search-input,
.globe-search-input-posts {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  padding-left: calc(var(--space-md) + 24px);
  font-size: var(--fs-base);
  font-family: var(--ff-sans);
  color: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(74, 158, 255, 0.15);
  border-radius: var(--radius-lg);
  outline: none;
  transition: all var(--transition-normal);
  min-height: 48px;
}

#globeSearchInputPosts::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

#globeSearchInputPosts:hover {
  border-color: rgba(74, 158, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
}

#globeSearchInputPosts:focus {
  border-color: rgba(74, 158, 255, 0.6);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 
    0 0 0 3px rgba(74, 158, 255, 0.1),
    0 0 20px rgba(74, 158, 255, 0.15) inset;
}

/* Sort Controls Container */
#feedSortControls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 36rem) {
  #feedSortControls {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Sort Buttons */
.feed-sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-family: var(--ff-sans);
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

/* Button hover effect */
.feed-sort-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(74, 158, 255, 0.1) 0%, 
    rgba(79, 172, 254, 0.05) 100%
  );
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.feed-sort-btn:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(74, 158, 255, 0.3);
  transform: translateY(-1px);
}

.feed-sort-btn:hover::before {
  opacity: 1;
}

/* Active/Selected state */
.feed-sort-btn.active,
.feed-sort-btn[aria-pressed="true"],
.feed-sort-btn.selected {
  color: var(--color-text-primary);
  background: linear-gradient(135deg, 
    rgba(74, 158, 255, 0.2) 0%, 
    rgba(79, 172, 254, 0.1) 100%
  );
  border-color: rgba(74, 158, 255, 0.5);
  box-shadow: 
    0 0 15px rgba(74, 158, 255, 0.2),
    0 0 0 1px rgba(74, 158, 255, 0.1) inset;
}

.feed-sort-btn.active::after,
.feed-sort-btn[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--color-primary-light), 
    transparent
  );
}

/* Button focus state */
.feed-sort-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Section Label */
.breaking-news-section-label,
.search-section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(74, 158, 255, 0.8);
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   FEED ERROR & EMPTY STATES
   ========================================================================== */

/* Container for error states - use :only-child when articles fail to load */
.breaking-news-grid:empty + .feed-error,
.feed-error-message,
.feed-empty-state,
#articlesTrack:has(> div:only-child:not([class*="feed"]):not([id])) > div:only-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  padding-top: calc(var(--space-xl) + 80px);
  text-align: center;
  min-height: 220px;
  background: linear-gradient(135deg, rgba(15, 25, 45, 0.8) 0%, rgba(7, 21, 42, 0.95) 100%);
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-radius: var(--radius-xl);
  margin: var(--space-md);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(255, 100, 100, 0.05) inset;
  position: relative;
}

/* Top accent border for error states */
.feed-error-message::before,
.feed-empty-state::before,
#articlesTrack:has(> div:only-child:not([class*="feed"]):not([id])) > div:only-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 150, 100, 0.4) 20%,
    rgba(255, 100, 100, 0.6) 50%,
    rgba(255, 150, 100, 0.4) 80%,
    transparent 100%
  );
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Warning icon for error states */
.feed-error-message::after,
.feed-empty-state::after,
#articlesTrack:has(> div:only-child:not([class*="feed"]):not([id])) > div:only-child::after {
  content: '⚠';
  position: absolute;
  top: var(--space-lg);
  left: 50%;
  transform: translateX(-50%) scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 100, 100, 0.15) 0%, rgba(255, 150, 100, 0.1) 100%);
  border: 1px solid rgba(255, 100, 100, 0.25);
  border-radius: 50%;
  animation: pulseSubtle 2s ease-in-out infinite;
}

@keyframes pulseSubtle {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* Retry button styling (if added dynamically) */
.feed-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.2) 0%, rgba(79, 172, 254, 0.1) 100%);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.feed-retry-btn:hover {
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.3) 0%, rgba(79, 172, 254, 0.2) 100%);
  border-color: rgba(74, 158, 255, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(74, 158, 255, 0.2);
}

/* Loading state */
.feed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  min-height: 200px;
}

.feed-loading::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid rgba(74, 158, 255, 0.2);
  border-top-color: rgba(74, 158, 255, 0.8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Post Cards - Enhanced with micro-interactions */
.feed-post-card {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
  background: rgba(255, 255, 255, 0.02);
  transition: 
    background var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    border-color var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  position: relative;
  overflow: hidden;
}

.feed-post-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-cyan, #06B6D4) 0%, var(--accent-blue, #3B82F6) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  pointer-events: none;
}

.feed-post-card:hover {
  background: var(--color-bg-card-hover, rgba(255, 255, 255, 0.08));
  transform: translateY(-4px);
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(6, 182, 212, 0.1);
  border-color: transparent;
}

.feed-post-card:hover::before {
  opacity: 1;
}

/* Image zoom effect on card hover */
.feed-post-card .feed-media-single img,
.feed-post-card .feed-media img {
  transition: transform var(--anim-duration-slow, 600ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.feed-post-card:hover .feed-media-single img,
.feed-post-card:hover .feed-media img {
  transform: scale(1.05);
}

/* Focus state for accessibility */
.feed-post-card:focus-visible {
  outline: 2px solid var(--accent-cyan, #06B6D4);
  outline-offset: 4px;
}

/* Container Query for Feed Cards */
@supports (container-type: inline-size) {
  .feed-post-card {
    container-type: inline-size;
    container-name: feed-card;
  }
  
  /* When card has more space, show more lines */
  @container feed-card (min-width: 400px) {
    .feed-post-text {
      -webkit-line-clamp: 8;
    }
  }
}

.feed-post-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--ff-serif);
}

@media (min-width: 48rem) {
  .feed-post-text {
    -webkit-line-clamp: 6;
  }
}

/* Feed Media */
.feed-media-single,
.feed-media-video {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-border-light);
}

.feed-media-single img,
.feed-media-video video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   12.4 GAME CARDS / FACT-CHECKER LAYOUT
   --------------------------------------------------------------------------
   Mobile: Single column, full width cards
   Tablet: 2 columns
   Desktop: 3 columns (for features grid)
   -------------------------------------------------------------------------- */

.fact-checker-section {
  padding: var(--space-lg) var(--space-md);
  margin: var(--space-lg) 0;
}

@media (min-width: 48rem) {
  .fact-checker-section {
    padding: var(--space-xl) var(--space-lg);
    margin: var(--space-xl) auto;
    max-width: var(--container-lg);
  }
}

@media (min-width: 64rem) {
  .fact-checker-section {
    padding: var(--space-xl);
    max-width: var(--container-xl);
  }
}

.fact-checker-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 64rem) {
  .fact-checker-content {
    flex-direction: row;
    align-items: flex-start;
  }
}

.fact-checker-text {
  flex: 1 1 auto;
}

.fact-checker-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-family: var(--ff-display);
  margin-bottom: var(--space-sm);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

@media (min-width: 48rem) {
  .fact-checker-title {
    font-size: var(--fs-xl);
  }
}

.fact-checker-description {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

@media (min-width: 48rem) {
  .fact-checker-description {
    font-size: var(--fs-base);
  }
}

/* Features Grid */
.fact-checker-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

@media (min-width: 36rem) {
  .fact-checker-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .fact-checker-features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

/* Feature/Game Cards - Enhanced with accent glow */
.feature-card,
.game-card {
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  transition: 
    background var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    border-color var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.feature-card::before,
.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-cyan, #06B6D4) 0%, var(--accent-blue, #3B82F6) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--anim-duration-normal, 400ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  pointer-events: none;
}

.feature-card:hover,
.game-card:hover {
  background: var(--color-bg-card-hover);
  transform: translateY(-6px);
  box-shadow: 
    0 16px 32px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(6, 182, 212, 0.15);
  border-color: transparent;
}

.feature-card:hover::before,
.game-card:hover::before {
  opacity: 1;
}

.feature-card:focus-visible,
.game-card:focus-visible {
  outline: 2px solid var(--accent-cyan, #06B6D4);
  outline-offset: 4px;
}

/* Container Query for Game Cards */
@supports (container-type: inline-size) {
  .game-card {
    container-type: inline-size;
    container-name: game-card;
  }
  
  @container game-card (min-width: 300px) {
    .game-card-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-md);
    }
  }
}

/* Play Buttons - Enhanced with accent gradient and glow */
.play-button-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  font-family: var(--ff-display);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  background: linear-gradient(135deg, var(--accent-cyan, #06B6D4) 0%, var(--accent-blue, #3B82F6) 100%);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 
    transform var(--anim-duration-fast, 200ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--anim-duration-fast, 200ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Shimmer effect on button */
.play-button-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
}

.play-button-large:hover::before {
  left: 100%;
}

@media (min-width: 36rem) {
  .play-button-large {
    width: auto;
    max-width: 280px;
  }
}

.play-button-large:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 10px 30px rgba(6, 182, 212, 0.4),
    0 0 20px rgba(59, 130, 246, 0.3);
}

.play-button-large:active {
  transform: translateY(-1px);
}

.play-button-large:focus-visible {
  outline: 2px solid var(--accent-cyan, #06B6D4);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   12.5 FOOTER LAYOUT
   --------------------------------------------------------------------------
   Mobile: Single column, stacked sections
   Tablet: 2 columns
   Desktop: 4-5 columns
   -------------------------------------------------------------------------- */

.site-footer {
  background: rgba(5, 12, 30, 0.8);
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) var(--space-md);
  margin-top: var(--space-2xl);
}

.footer-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 36rem) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .footer-content {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 80rem) {
  .footer-content {
    grid-template-columns: 2fr repeat(4, 1fr);
  }
}

.footer-section {
  min-width: 0;
}

.footer-section h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.footer-section h4 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.footer-section p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.footer-section ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-section ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-section ul a:hover {
  color: var(--color-primary-light);
}

/* Footer Bottom */
.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.footer-bottom p {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-sm);
}

.footer-bottom a {
  color: var(--color-primary-light);
}

/* Social Follow Link */
.social-follow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.social-follow-link:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
}

/* ==========================================================================
   13. BREAKING NEWS SECTION
   ==========================================================================
   
   News article grid with responsive card layout.
   
   ========================================================================== */

.news-section {
  padding: var(--space-lg) var(--space-md);
  background: #0a0f1a;
  position: relative;
  z-index: 1;
}

@media (min-width: 48rem) {
  .news-section {
    padding: var(--space-xl) var(--space-lg);
  }
}

.news-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-family: var(--ff-display);
  margin-bottom: var(--space-sm);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

@media (min-width: 48rem) {
  .news-title {
    font-size: var(--fs-xl);
  }
}

.news-subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 600px;
}

@media (min-width: 48rem) {
  .news-subtitle {
    font-size: var(--fs-base);
  }
}

/* Breaking News Grid */
.breaking-news-container {
  width: 100%;
}

.breaking-news-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

@media (min-width: 80rem) {
  .breaking-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

/* Article Cards */
.article-card {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.article-card:hover {
  background: var(--color-bg-card);
}

@media (min-width: 80rem) {
  .article-card {
    border-bottom: none;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
  }
}

/* ==========================================================================
   14. NEWSLETTER / CTA SECTION
   ==========================================================================
   
   Email subscription forms and call-to-action boxes.
   
   ========================================================================== */

.news-cta {
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(74, 144, 226, 0.05) 100%);
  border: 1px solid rgba(79, 172, 254, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
}

@media (min-width: 48rem) {
  .news-cta {
    padding: var(--space-xl);
    margin: var(--space-xl) auto;
    max-width: var(--container-md);
  }
}

.news-cta h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
}

@media (min-width: 48rem) {
  .news-cta h3 {
    font-size: var(--fs-lg);
  }
}

.news-cta p {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* Newsletter Form */
.newsletter-signup {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

@media (min-width: 36rem) {
  .newsletter-signup {
    flex-direction: row;
    max-width: 500px;
  }
}

.newsletter-input {
  flex: 1 1 auto;
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-md);
  font-size: 16px; /* Prevents iOS zoom on focus */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
}

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

.newsletter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.newsletter-btn {
  min-height: var(--touch-target-min);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.newsletter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

/* ==========================================================================
   15. LEADERBOARDS
   ==========================================================================
   
   Game leaderboard display with responsive layout.
   
   ========================================================================== */

.homepage-leaderboards-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
}

@media (min-width: 48rem) {
  .homepage-leaderboards-container {
    flex-direction: row;
    gap: var(--space-xl);
  }
}

.homepage-leaderboard {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.homepage-leaderboard-title {
  padding: var(--space-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  background: rgba(74, 144, 226, 0.1);
  border-bottom: 1px solid var(--color-border);
}

.homepage-leaderboard-list {
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   16. CSS CASCADE LAYERS (Specificity Management)
   ==========================================================================
   
   CSS Layers provide a clean way to manage specificity without !important.
   Styles in later layers override earlier layers regardless of specificity.
   
   Layer Order (lowest to highest priority):
   1. reset      - CSS reset and normalization
   2. tokens     - Custom properties and design tokens
   3. base       - Base element styles
   4. layout     - Layout and structural styles
   5. components - Component-specific styles
   6. utilities  - Utility classes (highest priority)
   
   Usage: When migrating from legacy styles.css, wrap new styles in layers.
   Legacy styles without layers will have medium priority.
   
   Note: Browser support is excellent (95%+), but legacy styles.css doesn't
   use layers, so we document this for future incremental migration.
   
   ========================================================================== */

/* 
 * Layer declaration (commented out until full migration):
 * 
 * @layer reset, tokens, base, layout, components, utilities;
 * 
 * @layer components {
 *   .feed-post-card { ... }
 * }
 * 
 * @layer utilities {
 *   .sr-only { ... }
 * }
 */

/* ==========================================================================
   17. CONTAINER QUERIES (Component-Level Responsiveness)
   ==========================================================================
   
   Container queries allow components to respond to their container size
   rather than the viewport. This is essential for components that appear
   in different layout contexts (e.g., feed cards in 1-col vs 2-col layouts).
   
   Browser Support: ~93% (fallback to viewport queries for older browsers)
   
   Components with container queries:
   - .feed-post-card  - Adjusts text clamp, media layout
   - .game-card       - Adjusts content direction
   - .hero-stat-card  - Adjusts padding, font size
   - .article-card    - Adjusts image/text ratio
   - .feature-card    - Adjusts icon/text layout
   
   ========================================================================== */

/* --------------------------------------------------------------------------
   17.1 Feed Post Card Container Query
   --------------------------------------------------------------------------
   Responds to available width within feed container.
   In 2-column layout, cards have less width → show fewer text lines.
   -------------------------------------------------------------------------- */

@supports (container-type: inline-size) {
  .feed-post-card {
    container-type: inline-size;
    container-name: feed-card;
  }
  
  /* Default (narrow): 5 lines of text */
  .feed-post-card .feed-post-text {
    -webkit-line-clamp: 5;
  }
  
  /* Medium container (400px+): 6 lines */
  @container feed-card (min-width: 25rem) {
    .feed-post-card .feed-post-text {
      -webkit-line-clamp: 6;
    }
    
    .feed-post-card .feed-media-single {
      max-height: 350px;
    }
  }
  
  /* Large container (500px+): 8 lines, larger media */
  @container feed-card (min-width: 31.25rem) {
    .feed-post-card .feed-post-text {
      -webkit-line-clamp: 8;
    }
    
    .feed-post-card .feed-media-single {
      max-height: 400px;
    }
  }
}

/* --------------------------------------------------------------------------
   17.2 Hero Stat Card Container Query
   --------------------------------------------------------------------------
   Stat cards appear in hero section with varying available widths.
   Adjusts padding and typography based on container.
   -------------------------------------------------------------------------- */

@supports (container-type: inline-size) {
  .hero-stats-container {
    container-type: inline-size;
    container-name: stats-container;
  }
  
  .hero-stat-card {
    container-type: inline-size;
    container-name: stat-card;
  }
  
  /* Compact stat card (under 120px) */
  @container stat-card (max-width: 7.5rem) {
    .hero-stat-card {
      padding: var(--space-xs);
    }
    
    .hero-stat-number-small {
      font-size: var(--fs-sm);
    }
    
    .hero-stat-label-small {
      font-size: var(--fs-xs);
    }
  }
  
  /* Standard stat card (120px - 180px) */
  @container stat-card (min-width: 7.5rem) {
    .hero-stat-card {
      padding: var(--space-sm);
    }
    
    .hero-stat-number-small {
      font-size: var(--fs-md);
    }
    
    .hero-stat-label-small {
      font-size: var(--fs-xs);
    }
  }
  
  /* Large stat card (180px+) */
  @container stat-card (min-width: 11.25rem) {
    .hero-stat-card {
      padding: var(--space-md);
    }
    
    .hero-stat-number-small {
      font-size: var(--fs-lg);
    }
    
    .hero-stat-label-small {
      font-size: var(--fs-sm);
    }
  }
}

/* --------------------------------------------------------------------------
   17.3 Game Card Container Query
   --------------------------------------------------------------------------
   Game cards appear in grids of 1, 2, or 3 columns.
   Adjusts icon/text layout based on available space.
   -------------------------------------------------------------------------- */

@supports (container-type: inline-size) {
  .game-card,
  .feature-card {
    container-type: inline-size;
    container-name: game-card;
  }
  
  /* Narrow: Stack icon above text */
  .game-card .game-card-content,
  .feature-card .feature-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
  }
  
  /* Wide (280px+): Icon beside text */
  @container game-card (min-width: 17.5rem) {
    .game-card .game-card-content,
    .feature-card .feature-card-content {
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      gap: var(--space-md);
    }
    
    .game-card .game-icon,
    .feature-card .feature-icon {
      flex-shrink: 0;
    }
  }
  
  /* Extra wide (400px+): More spacing */
  @container game-card (min-width: 25rem) {
    .game-card,
    .feature-card {
      padding: var(--space-lg);
    }
    
    .game-card .game-card-content,
    .feature-card .feature-card-content {
      gap: var(--space-lg);
    }
  }
}

/* --------------------------------------------------------------------------
   17.4 Article Card Container Query
   --------------------------------------------------------------------------
   Article cards in breaking news section.
   Adjusts image prominence based on available space.
   -------------------------------------------------------------------------- */

@supports (container-type: inline-size) {
  .article-card {
    container-type: inline-size;
    container-name: article-card;
  }
  
  /* Narrow: Image above content */
  .article-card .article-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  /* Medium (350px+): Side by side, text dominant */
  @container article-card (min-width: 21.875rem) {
    .article-card .article-layout {
      flex-direction: row;
      align-items: flex-start;
    }
    
    .article-card .article-image {
      flex: 0 0 35%;
      max-width: 35%;
    }
    
    .article-card .article-content {
      flex: 1 1 auto;
    }
  }
  
  /* Wide (500px+): Larger image */
  @container article-card (min-width: 31.25rem) {
    .article-card .article-image {
      flex: 0 0 40%;
      max-width: 40%;
    }
  }
}

/* --------------------------------------------------------------------------
   17.5 Footer Section Container Query
   --------------------------------------------------------------------------
   Footer sections adapt to available grid cell width.
   -------------------------------------------------------------------------- */

@supports (container-type: inline-size) {
  .footer-section {
    container-type: inline-size;
    container-name: footer-section;
  }
  
  /* Narrow footer section: compact layout */
  @container footer-section (max-width: 12.5rem) {
    .footer-section h4 {
      font-size: var(--fs-xs);
    }
    
    .footer-section ul a {
      font-size: var(--fs-xs);
      min-height: 36px;
    }
  }
}

/* ==========================================================================
   18. MIGRATION NOTES & DEDUPLICATION GUIDE
   ==========================================================================
   
   This section documents issues in the legacy styles.css that should be
   addressed during incremental migration.
   
   ========================================================================== */

/* --------------------------------------------------------------------------
   18.1 DUPLICATE CSS BLOCKS
   --------------------------------------------------------------------------
   
   The following blocks appear multiple times in styles.css and should be
   deduplicated. When migrating, keep only ONE canonical definition.
   
   DUPLICATE 1: Feed v2 Styles
   - First occurrence: styles.css lines 210-406 (~196 lines)
   - Second occurrence: styles.css lines 598-796 (~198 lines)
   - Action: Remove second occurrence, keep first
   - Risk: Low - identical code
   
   DUPLICATE 2: Feed Container + Controls
   - lines 221-234 and lines 611-624 (feed-container grid)
   - lines 287-302 and lines 627-642 (feed-controls)
   - Action: Consolidate to single definition
   
   DUPLICATE 3: Feed Post Card styles
   - lines 312-340 and lines 652-670
   - Action: Consolidate to single definition
   
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18.2 !IMPORTANT OVERRIDE ANALYSIS
   --------------------------------------------------------------------------
   
   styles.css contains 1162 !important declarations. These fall into categories:
   
   CATEGORY A: Legacy Override Wars (~40%)
   - Styles fighting against inline styles or earlier CSS
   - Solution: Remove inline styles from HTML, restructure CSS load order
   - Example: .hero-section { position: relative !important; }
   
   CATEGORY B: Mobile Overrides (~35%)
   - Styles inside @media (max-width: 768px) blocks
   - Solution: Convert to mobile-first (remove desktop styles, add at breakpoint)
   - Example: .hero-stat-card { flex: 0 0 calc(50% - 0.375rem) !important; }
   
   CATEGORY C: Component Resets (~15%)
   - Resetting unwanted styles from other sources
   - Solution: Use CSS layers or more specific selectors
   - Example: .feed-post-card { background: transparent !important; }
   
   CATEGORY D: Inline Style Overrides (~10%)
   - Fighting against style="" attributes in HTML
   - Solution: Remove inline styles from HTML templates
   - Example: img[style*="height: 40px"] { max-height: 35px !important; }
   
   MIGRATION STRATEGY:
   1. Load responsive.css AFTER styles.css
   2. New styles in responsive.css naturally override without !important
   3. Gradually move components from styles.css → responsive.css
   4. Remove !important as components migrate
   
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18.3 SPECIFICITY FIXES (No !important needed)
   --------------------------------------------------------------------------
   
   These selectors in responsive.css are designed to override legacy styles
   without using !important. They work because:
   
   1. responsive.css loads after styles.css
   2. Equal specificity = last one wins
   3. Slightly higher specificity where needed
   
   -------------------------------------------------------------------------- */

/* Override legacy feed-post-card styles */
.feed-container .feed-post-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-md);
  margin-left: 0;
}

.feed-container .feed-post-card:hover {
  background: var(--color-bg-card);
}

/* Override legacy article-card styles - use solid background for professional news look */
.breaking-news-grid .article-card,
.news-section .article-card {
  background: #111827;
  backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Professional solid cards for breaking news feed */
.breaking-news-grid .feed-post-card,
.news-section .feed-post-card {
  background: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: var(--space-md);
}

.breaking-news-grid .feed-post-card:hover,
.news-section .feed-post-card:hover {
  background: #1a2332 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.12);
}

.breaking-news-grid .feed-post-card::before,
.news-section .feed-post-card::before {
  opacity: 0;
}

/* Editorial card (AP/BBC style) */
.breaking-news-grid .editorial-card,
.news-section .editorial-card {
  background: #0f1419 !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.breaking-news-grid .editorial-card:hover,
.news-section .editorial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.editorial-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px 8px 0 0;
}

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

.editorial-card-placeholder {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
  border-radius: 8px 8px 0 0;
}

/* CRT-style placeholder for cards without media */
.editorial-card-placeholder-crt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0a0e14 0%, #141a24 30%, #0d1117 70%, #080c10 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.editorial-card-placeholder-crt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  opacity: 0.7;
}

.editorial-card-placeholder-crt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(74, 144, 226, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.editorial-card-placeholder-crt .crt-text {
  position: relative;
  z-index: 1;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(74, 144, 226, 0.9);
  text-shadow: 0 0 20px rgba(74, 144, 226, 0.5), 0 0 40px rgba(74, 144, 226, 0.3);
  animation: crt-flicker 4s ease-in-out infinite;
}

@keyframes crt-flicker {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0.85; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  98% { opacity: 1; }
}

.editorial-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.editorial-card-badge {
  display: inline-block;
  background: rgba(74, 144, 226, 0.2);
  border: 1px solid rgba(74, 144, 226, 0.4);
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4A90E2;
  border-radius: 4px;
  align-self: flex-start;
}

.editorial-card-headline {
  font-family: 'Georgia', 'Charter', 'Times New Roman', serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

.editorial-card-excerpt {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editorial-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.editorial-card-readmore {
  color: #4A90E2;
  text-decoration: none;
}

.editorial-card-readmore:hover {
  text-decoration: underline;
}

/* Override legacy feed-controls styles */
.feed-container .feed-controls {
  background: rgba(15, 15, 35, 0.95);
  border: 1px solid var(--color-border);
}

/* Override legacy hero-stat-card styles */
.hero-stats-container .hero-stat-card {
  flex: 1 1 calc(50% - var(--space-sm));
  min-width: calc(50% - var(--space-sm));
  padding: var(--space-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (min-width: 36rem) {
  .hero-stats-container .hero-stat-card {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 180px;
    padding: var(--space-md);
  }
}

/* ==========================================================================
   19. FLUID TYPOGRAPHY OVERRIDES
   ==========================================================================
   
   This section applies clamp()-based fluid typography to legacy selectors
   from styles.css. These override fixed font-size values without !important.
   
   Token Reference:
   --fs-xs:   12px → 14px  (labels, timestamps, badges)
   --fs-sm:   14px → 16px  (secondary text, metadata)
   --fs-base: 16px → 18px  (body text, paragraphs)
   --fs-md:   18px → 20px  (card titles, emphasized)
   --fs-lg:   24px → 32px  (section headings, h3)
   --fs-xl:   32px → 48px  (page headings, h2)
   --fs-2xl:  40px → 64px  (hero headings, h1)
   
   ========================================================================== */

/* --------------------------------------------------------------------------
   19.1 Feed Component Typography
   -------------------------------------------------------------------------- */

/* Feed post text - body copy */
.feed-post-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* Feed author and timestamp */
.feed-author-name {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.feed-timestamp {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* Feed badges */
.feed-pinned-badge {
  font-size: var(--fs-xs);
}

/* Image fallback text */
.image-fallback-title {
  font-size: var(--fs-sm);
}

.image-fallback-subtitle {
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   19.2 Header Typography
   -------------------------------------------------------------------------- */

.brand-info h1,
.brand-name {
  font-size: var(--fs-md);
}

.brand-info p,
.brand-tagline {
  font-size: var(--fs-xs);
}

.main-nav .nav-link {
  font-size: var(--fs-sm);
}

.last-update {
  font-size: var(--fs-xs);
}

/* Mobile nav */
.mobile-nav-content .nav-link {
  font-size: var(--fs-md);
}

/* --------------------------------------------------------------------------
   19.3 Hero Section Typography
   -------------------------------------------------------------------------- */

.welcome-text {
  font-size: var(--fs-xl);
}

@media (min-width: 48rem) {
  .welcome-text {
    font-size: var(--fs-2xl);
  }
}

.hero-module-label {
  font-size: var(--fs-xs);
}

.hero-module-updated {
  font-size: var(--fs-xs);
}

.hero-module-headline {
  font-size: var(--fs-md);
}

@media (min-width: 48rem) {
  .hero-module-headline {
    font-size: var(--fs-lg);
  }
}

/* Hero stat cards */
.hero-stat-number-small {
  font-size: var(--fs-md);
}

.hero-stat-label-small {
  font-size: var(--fs-xs);
}

@media (min-width: 36rem) {
  .hero-stat-number-small {
    font-size: var(--fs-lg);
  }
  
  .hero-stat-label-small {
    font-size: var(--fs-sm);
  }
}

/* --------------------------------------------------------------------------
   19.4 News Section Typography
   -------------------------------------------------------------------------- */

.news-title {
  font-size: var(--fs-lg);
}

@media (min-width: 48rem) {
  .news-title {
    font-size: var(--fs-xl);
  }
}

.news-subtitle {
  font-size: var(--fs-sm);
}

@media (min-width: 48rem) {
  .news-subtitle {
    font-size: var(--fs-base);
  }
}

/* --------------------------------------------------------------------------
   19.5 Fact-Checker / Game Section Typography
   -------------------------------------------------------------------------- */

.fact-checker-title {
  font-size: var(--fs-lg);
}

@media (min-width: 48rem) {
  .fact-checker-title {
    font-size: var(--fs-xl);
  }
}

.fact-checker-description {
  font-size: var(--fs-sm);
}

@media (min-width: 48rem) {
  .fact-checker-description {
    font-size: var(--fs-base);
  }
}

/* Play buttons */
.play-button-large {
  font-size: var(--fs-base);
}

/* --------------------------------------------------------------------------
   19.6 Newsletter / CTA Typography
   -------------------------------------------------------------------------- */

.news-cta h3 {
  font-size: var(--fs-md);
}

@media (min-width: 48rem) {
  .news-cta h3 {
    font-size: var(--fs-lg);
  }
}

.news-cta p {
  font-size: var(--fs-sm);
}

.newsletter-input {
  font-size: 16px; /* Fixed - prevents iOS zoom */
}

.newsletter-btn {
  font-size: var(--fs-base);
}

/* --------------------------------------------------------------------------
   19.7 Leaderboard Typography
   -------------------------------------------------------------------------- */

.homepage-leaderboard-title {
  font-size: var(--fs-md);
}

/* --------------------------------------------------------------------------
   19.8 Footer Typography
   -------------------------------------------------------------------------- */

.footer-section h3 {
  font-size: var(--fs-md);
}

.footer-section h4 {
  font-size: var(--fs-sm);
}

.footer-section p {
  font-size: var(--fs-sm);
}

.footer-section ul a {
  font-size: var(--fs-sm);
}

.footer-bottom p {
  font-size: var(--fs-xs);
}

.social-follow-link {
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   19.9 Modal / Overlay Typography
   -------------------------------------------------------------------------- */

.tip-modal-header h2 {
  font-size: var(--fs-md);
}

@media (min-width: 48rem) {
  .tip-modal-header h2 {
    font-size: var(--fs-lg);
  }
}

.tip-form-group label {
  font-size: var(--fs-sm);
}

.tip-form-group input,
.tip-form-group textarea,
.tip-form-group select {
  font-size: 16px; /* Fixed - prevents iOS zoom */
}

.tip-submit-button {
  font-size: var(--fs-base);
}

/* --------------------------------------------------------------------------
   19.10 Auth Button Typography
   -------------------------------------------------------------------------- */

.auth-btn {
  font-size: var(--fs-xs);
}

@media (min-width: 36rem) {
  .auth-btn {
    font-size: var(--fs-sm);
  }
}

/* --------------------------------------------------------------------------
   19.11 Maintenance Banner Typography
   -------------------------------------------------------------------------- */

.maintenance-banner {
  font-size: var(--fs-xs);
}

.maintenance-text {
  font-size: var(--fs-xs);
}

@media (min-width: 48rem) {
  .maintenance-banner {
    font-size: var(--fs-sm);
  }
  
  .maintenance-text {
    font-size: var(--fs-sm);
  }
}

/* --------------------------------------------------------------------------
   19.12 Global Small Text Elements
   -------------------------------------------------------------------------- */

/* Timestamps, metadata, badges throughout the site */
time,
.timestamp,
.meta,
.badge,
.label,
.caption {
  font-size: var(--fs-xs);
}

/* Secondary/muted text */
.text-muted,
.text-secondary,
.hint,
.helper-text {
  font-size: var(--fs-sm);
}

/* ==========================================================================
   20. SITUATION MONITOR FEATURED CARD
   ==========================================================================
   
   A premium feature card promoting the Situation Monitor dashboard.
   Uses glassmorphism, gradient effects, and interactive hover states.
   
   ========================================================================== */

.situation-monitor-feature {
  max-width: 1200px;
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-md);
}

.article-card.situation-monitor-card {
  position: relative;
  display: block;
  text-decoration: none;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(140deg, rgba(8, 20, 40, 0.98), rgba(16, 34, 58, 0.96));
  border: 1px solid rgba(69, 218, 255, 0.25);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
  transition: transform var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal) var(--ease-smooth);
}

.article-card.situation-monitor-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(63, 208, 255, 0.18), transparent 42%),
              radial-gradient(circle at 85% 0%, rgba(74, 158, 255, 0.12), transparent 35%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
}

.article-card.situation-monitor-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radius-lg) - 4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.article-card.situation-monitor-card:hover {
  transform: translateY(-6px);
  border-color: rgba(69, 218, 255, 0.45);
  box-shadow: 0 28px 55px rgba(34, 211, 238, 0.22);
}

.situation-monitor-glow {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.24), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

.situation-monitor-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.situation-monitor-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
}

.situation-monitor-icon {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  padding: 0.55rem;
  border-radius: var(--radius-md);
  background: rgba(9, 24, 44, 0.9);
  border: 1px solid rgba(69, 218, 255, 0.25);
  box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.18);
}

.situation-monitor-icon-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5fe1ff;
  text-transform: uppercase;
}

.situation-monitor-title h3 {
  margin: 0 0 0.3rem;
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5fe1ff;
}

.situation-monitor-title p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
}

.situation-monitor-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(18, 31, 52, 0.9);
  border: 1px solid rgba(74, 158, 255, 0.35);
  color: #9fd7ff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.situation-monitor-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 10px rgba(61, 220, 151, 0.75);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(61, 220, 151, 0.75); }
  50% { opacity: 0.7; box-shadow: 0 0 15px rgba(61, 220, 151, 0.9); }
}

.situation-monitor-description {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.situation-monitor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.monitor-tag {
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.06);
}

.monitor-tag.tag-cyan {
  color: #5fe1ff;
  border-color: rgba(95, 225, 255, 0.35);
  background: rgba(34, 211, 238, 0.16);
}

.monitor-tag.tag-blue {
  color: #8abaff;
  border-color: rgba(138, 186, 255, 0.3);
  background: rgba(74, 158, 255, 0.16);
}

.monitor-tag.tag-red {
  color: #ff8b8b;
  border-color: rgba(255, 139, 139, 0.3);
  background: rgba(255, 107, 107, 0.18);
}

.monitor-tag.tag-amber {
  color: #ffc66b;
  border-color: rgba(255, 198, 107, 0.35);
  background: rgba(255, 170, 0, 0.18);
}

.situation-monitor-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(69, 218, 255, 0.2);
  color: #5fe1ff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-xs);
}

.situation-monitor-cta .cta-arrow {
  font-size: var(--fs-md);
  transform: translateY(-1px);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.article-card.situation-monitor-card:hover .situation-monitor-cta .cta-arrow {
  transform: translate(4px, -1px);
}

/* --------------------------------------------------------------------------
   20.1 Situation Monitor Mobile Layout
   -------------------------------------------------------------------------- */

@media (max-width: 45rem) {
  .article-card.situation-monitor-card {
    padding: var(--space-md);
  }

  .situation-monitor-header {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-xs);
  }

  .situation-monitor-status {
    order: 3;
  }

  .situation-monitor-icon {
    width: 56px;
    height: 56px;
  }

  .situation-monitor-title h3 {
    font-size: var(--fs-sm);
  }
}

/* ==========================================================================
   21. VISUAL ENHANCEMENT - DYNAMIC & BOLD
   ==========================================================================
   
   Cinematic visual upgrade for Noteworthy News homepage.
   Features: gradients, glows, scroll animations, premium micro-interactions.
   
   Mobile-first implementation - enhancements scale up for larger screens.
   
   ========================================================================== */

/* --------------------------------------------------------------------------
   21.1 EXTENDED DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Gradient Palette - Vibrant & Bold */
  --gradient-primary: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
  --gradient-accent: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-hero: radial-gradient(ellipse at 20% 0%, rgba(79, 172, 254, 0.15) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 100%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
                   linear-gradient(180deg, rgba(7,21,42,0.98) 0%, rgba(13,31,58,0.95) 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-border: linear-gradient(90deg, transparent, rgba(79,172,254,0.6), transparent);
  --gradient-text: linear-gradient(135deg, #4FACFE 0%, #00F2FE 50%, #667eea 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  
  /* Glow Effects */
  --glow-cyan: 0 0 20px rgba(0, 242, 254, 0.4), 0 0 40px rgba(0, 242, 254, 0.2);
  --glow-blue: 0 0 20px rgba(79, 172, 254, 0.4), 0 0 40px rgba(79, 172, 254, 0.2);
  --glow-purple: 0 0 20px rgba(118, 75, 162, 0.4), 0 0 40px rgba(118, 75, 162, 0.2);
  --glow-text: 0 0 30px rgba(79, 252, 254, 0.5);
  --glow-subtle: 0 0 15px rgba(79, 172, 254, 0.25);
  
  /* Elevated Shadows */
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(79, 172, 254, 0.15);
  --shadow-glow-card: 0 0 0 1px rgba(79, 172, 254, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4);
  
  /* Animation Timing */
  --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* --------------------------------------------------------------------------
   21.2 ANIMATION KEYFRAMES
   -------------------------------------------------------------------------- */

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: var(--glow-cyan);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 242, 254, 0.6), 0 0 60px rgba(0, 242, 254, 0.3);
  }
}

@keyframes glowPulseSubtle {
  0%, 100% {
    box-shadow: var(--glow-subtle);
  }
  50% {
    box-shadow: 0 0 25px rgba(79, 172, 254, 0.4);
  }
}

@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes borderGlow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.6;
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ==========================================================================
   CREDIBILITY SECTION SVG ANIMATIONS
   ========================================================================== */

/* Heartbeat animation for likes */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
}

/* Grow bars animation for impressions chart */
@keyframes barGrow {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.1);
  }
}

/* Bounce animation for engagement */
@keyframes bounceIcon {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  75% {
    transform: translateY(2px);
  }
}

/* Network pulse for shares */
@keyframes networkPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(79, 172, 254, 0.4));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(79, 172, 254, 0.8));
  }
}

/* Refresh spin for reposts */
@keyframes refreshSpin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Wave animation for followers */
@keyframes waveHello {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(8deg);
  }
  60% {
    transform: rotate(-5deg);
  }
  80% {
    transform: rotate(5deg);
  }
}

/* Glow pulse animation */
@keyframes glowIntensify {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(155, 89, 182, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(155, 89, 182, 0.9));
  }
}

/* Animated loading dots */
@keyframes loadingDots {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66% {
    content: '...';
  }
  100% {
    content: '.';
  }
}

@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   21.3 UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Scroll-triggered reveal - initial state */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-smooth-out), 
              transform 0.6s var(--ease-smooth-out);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children - each child delays by index */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-smooth-out), 
              transform 0.5s var(--ease-smooth-out);
}

.stagger-children.revealed > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(n+7) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }

/* Hover lift effect */
.hover-lift {
  transition: transform 0.3s var(--ease-smooth-out), 
              box-shadow 0.3s var(--ease-smooth-out);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* Glow border effect */
.glow-border {
  position: relative;
}

.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-border:hover::before {
  opacity: 1;
}

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

/* Shimmer text effect */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--color-text-primary) 0%,
    rgba(79, 252, 254, 0.8) 50%,
    var(--color-text-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* Glassmorphism card */
.glass-card {
  background: rgba(13, 31, 58, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-glow-card);
}

/* --------------------------------------------------------------------------
   21.4 HERO SECTION ENHANCEMENT
   -------------------------------------------------------------------------- */

/* Animated gradient background overlay */
.hero-section {
  position: relative;
  /* IMPORTANT: Keep overflow visible so stat cards aren't clipped when animated */
  overflow: visible !important;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  z-index: 0;
}

/* Floating glow orbs - decorative */
.hero-section::after {
  content: '';
  position: absolute;
  top: 10%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: floatSubtle 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Hero title enhancement */
.hero-title .welcome-text,
.welcome-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(79, 252, 254, 0.3));
  position: relative;
  z-index: 1;
}

/* Hero module (breaking news card) - glass + glow */
.hero-module-container {
  position: relative;
  background: rgba(13, 31, 58, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(79, 172, 254, 0.25);
  box-shadow: var(--shadow-glow-card);
  z-index: 1;
  overflow: hidden;
}

.hero-module-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.hero-module-container:hover {
  border-color: rgba(79, 172, 254, 0.5);
  box-shadow: var(--shadow-hover), var(--glow-subtle);
  transform: translateY(-4px);
}

.hero-module-container:hover::before {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, transparent 50%);
}

/* Hero module label - glowing badge */
.hero-module-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: rgba(79, 172, 254, 0.15);
  border: 1px solid rgba(79, 172, 254, 0.3);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #4FACFE;
  text-transform: uppercase;
  animation: glowPulseSubtle 3s ease-in-out infinite;
}

.hero-module-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #00F2FE;
  border-radius: 50%;
  box-shadow: 0 0 8px #00F2FE;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* Hero module headline */
.hero-module-headline {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: var(--space-sm) 0;
}

/* Hero CTA buttons - Enhanced with accent gradient */
.hero-module-btn {
  position: relative;
  overflow: hidden;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: 
    transform var(--anim-duration-fast, 200ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--anim-duration-fast, 200ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    background var(--anim-duration-fast, 200ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.hero-module-btn-primary {
  background: linear-gradient(135deg, var(--accent-cyan, #06B6D4) 0%, var(--accent-blue, #3B82F6) 100%);
  color: #ffffff;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

/* Shimmer effect */
.hero-module-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
}

.hero-module-btn-primary:hover::after {
  left: 100%;
}

.hero-module-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 10px 30px rgba(6, 182, 212, 0.4),
    0 0 20px rgba(59, 130, 246, 0.3);
}

.hero-module-btn-primary:focus-visible {
  outline: 2px solid var(--accent-cyan, #06B6D4);
  outline-offset: 4px;
}

.hero-module-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-shimmer);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  opacity: 0.5;
}

.hero-module-btn-secondary {
  background: transparent;
  border: 1px solid rgba(79, 172, 254, 0.4);
  color: #4FACFE;
}

.hero-module-btn-secondary:hover {
  background: rgba(79, 172, 254, 0.1);
  border-color: rgba(79, 172, 254, 0.6);
}

/* Hero stats enhancement */
.hero-stat-card {
  background: rgba(13, 31, 58, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s var(--ease-smooth-out);
}

.hero-stat-card:hover {
  background: rgba(13, 31, 58, 0.8);
  border-color: rgba(79, 172, 254, 0.3);
  transform: translateY(-4px);
  box-shadow: var(--glow-subtle);
}

.hero-stat-value {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   21.5 NEWS FEED CARDS ENHANCEMENT
   -------------------------------------------------------------------------- */

/* Feed post cards - elevated on hover with gradient accent */
.feed-post-card {
  position: relative;
  border-radius: var(--radius-lg);
  transition: all 0.3s var(--ease-smooth-out);
}

.feed-post-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feed-post-card:hover {
  background: rgba(13, 31, 58, 0.6);
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px);
}

.feed-post-card:hover::before {
  opacity: 1;
}

/* Feed media enhancement */
.feed-media-single,
.feed-media-video {
  position: relative;
  overflow: hidden;
}

.feed-media-single img,
.feed-media-video video {
  transition: transform 0.4s var(--ease-smooth-out), 
              filter 0.4s var(--ease-smooth-out);
}

.feed-post-card:hover .feed-media-single img,
.feed-post-card:hover .feed-media-video video {
  transform: scale(1.03);
  filter: brightness(1.1);
}

/* Feed post text glow on hover */
.feed-post-text {
  transition: color 0.3s ease;
}

.feed-post-card:hover .feed-post-text {
  color: var(--color-text-primary);
}

/* Breaking news grid cards - solid professional style */
.breaking-news-grid .article-card,
.news-section .article-card {
  position: relative;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s var(--ease-smooth-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.breaking-news-grid .article-card:hover,
.news-section .article-card:hover {
  background: #1a2332;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* News section title enhancement */
.news-title {
  position: relative;
  display: inline-block;
}

.news-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   21.6 GAME SECTIONS - IRRESISTIBLE CTAs
   -------------------------------------------------------------------------- */

/* Fact checker section enhancement */
.fact-checker-section {
  position: relative;
  background: rgba(7, 21, 42, 0.6);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.fact-checker-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(102, 126, 234, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Interactive badge - animated */
.fact-checker-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(102, 126, 234, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.4);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #a78bfa;
  text-transform: uppercase;
  animation: glowPulseSubtle 4s ease-in-out infinite;
}

.fact-checker-badge::before {
  content: '✦';
  font-size: 0.7em;
  animation: floatSubtle 2s ease-in-out infinite;
}

/* Fact checker title */
.fact-checker-title {
  background: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Play button - glowing CTA */
.play-button-large {
  position: relative;
  background: var(--gradient-primary);
  color: #07152a;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 20px rgba(79, 172, 254, 0.4);
  overflow: hidden;
}

.play-button-large::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-shimmer);
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
  opacity: 0.6;
}

.play-button-large::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--gradient-primary);
  z-index: -1;
  filter: blur(15px);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.play-button-large:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(79, 172, 254, 0.6);
}

.play-button-large:hover::after {
  opacity: 0.8;
}

/* Pulse ring effect on button */
.play-button-large .pulse-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(79, 172, 254, 0.6);
  border-radius: inherit;
  animation: pulseRing 2s ease-out infinite;
}

/* Feature cards in game section */
.feature-card {
  background: rgba(13, 31, 58, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: all 0.3s var(--ease-smooth-out);
}

.feature-card:hover {
  background: rgba(13, 31, 58, 0.7);
  border-color: rgba(79, 172, 254, 0.2);
  transform: translateY(-4px);
  box-shadow: var(--glow-subtle);
}

.feature-title {
  color: #4FACFE;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* Leaderboard enhancement */
.homepage-leaderboard {
  background: rgba(7, 21, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   21.7 NEWSLETTER SECTION - GRADIENT BAND
   -------------------------------------------------------------------------- */

.newsletter-section,
[class*="newsletter"] {
  position: relative;
}

/* Newsletter container enhancement */
.newsletter-signup-section,
.newsletter-section {
  position: relative;
  background: linear-gradient(135deg, rgba(13, 31, 58, 0.9) 0%, rgba(7, 21, 42, 0.95) 100%);
  border-top: 1px solid rgba(79, 172, 254, 0.2);
  border-bottom: 1px solid rgba(79, 172, 254, 0.2);
  overflow: hidden;
}

.newsletter-signup-section::before,
.newsletter-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-border);
  animation: borderGlow 3s ease-in-out infinite;
}

.newsletter-signup-section::after,
.newsletter-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-border);
  animation: borderGlow 3s ease-in-out infinite 1.5s;
}

/* Newsletter floating particles */
.newsletter-signup-section .floating-particle,
.newsletter-particles {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(79, 172, 254, 0.4);
  border-radius: 50%;
  animation: particleFloat 6s ease-in-out infinite;
}

/* Newsletter input enhancement */
.newsletter-input,
input[type="email"].newsletter-input {
  background: rgba(7, 21, 42, 0.8);
  border: 1px solid rgba(79, 172, 254, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  transition: all 0.3s var(--ease-smooth-out);
}

.newsletter-input:focus,
input[type="email"].newsletter-input:focus {
  border-color: rgba(79, 172, 254, 0.6);
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.15), var(--glow-subtle);
  outline: none;
}

/* Newsletter submit button */
.newsletter-btn,
.newsletter-submit,
button[type="submit"].newsletter-btn {
  background: var(--gradient-primary);
  color: #07152a;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
  transition: all 0.3s var(--ease-smooth-out);
}

.newsletter-btn:hover,
.newsletter-submit:hover,
button[type="submit"].newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(79, 172, 254, 0.5);
}

/* --------------------------------------------------------------------------
   21.8 FOOTER ENHANCEMENT
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  overflow: hidden;
}

/* Animated gradient top border */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(79, 172, 254, 0.5), 
    rgba(102, 126, 234, 0.5), 
    rgba(79, 172, 254, 0.5), 
    transparent
  );
  background-size: 200% 100%;
  animation: gradientShift 4s linear infinite;
}

/* Footer section enhancement */
.footer-section {
  position: relative;
}

.footer-section h3,
.footer-section h4 {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-sm);
}

/* Social links with glow */
.social-follow-link,
.footer a[href*="twitter"],
.footer a[href*="facebook"],
.footer a[href*="linkedin"] {
  transition: all 0.3s var(--ease-smooth-out);
}

.social-follow-link:hover,
.footer a[href*="twitter"]:hover {
  color: #1DA1F2;
  text-shadow: 0 0 15px rgba(29, 161, 242, 0.5);
  transform: translateY(-2px);
}

/* Footer links hover glow */
.footer-section ul a:hover {
  color: #4FACFE;
  text-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

/* Footer bottom enhancement */
.footer-bottom {
  position: relative;
}

.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: var(--gradient-border);
}

/* --------------------------------------------------------------------------
   21.9 SECTION DIVIDERS & VISUAL RHYTHM
   -------------------------------------------------------------------------- */

/* Section divider utility */
.section-divider {
  position: relative;
  height: 1px;
  background: transparent;
  margin: var(--space-xl) 0;
}

.section-divider::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--gradient-border);
}

/* About section enhancement */
.about-section {
  position: relative;
  background: rgba(7, 21, 42, 0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(79, 172, 254, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

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

/* Credibility section enhancement */
.credibility-section {
  position: relative;
}

.credibility-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(102, 126, 234, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Animated SVG Icons in Credibility Section */

/* Main hero stat icon - impressions chart */
.hero-stat-main .hero-stat-icon svg {
  animation: glowIntensify 3s ease-in-out infinite, barGrow 2.5s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Surrounding stat icons - base animation styles */
.stat-card.surrounding .stat-icon svg {
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Engagements - chat bubble bounce */
.stat-card.surrounding[data-metric="engagements"] .stat-icon svg {
  animation: bounceIcon 2s ease-in-out infinite;
}

/* Likes - heartbeat animation */
.stat-card.surrounding[data-metric="likes"] .stat-icon svg {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* Shares - network pulse */
.stat-card.surrounding[data-metric="shares"] .stat-icon svg {
  animation: networkPulse 2.5s ease-in-out infinite;
}

/* Reposts - refresh spin wiggle */
.stat-card.surrounding[data-metric="reposts"] .stat-icon svg {
  animation: refreshSpin 3s ease-in-out infinite;
  transform-origin: center center;
}

/* Followers - wave hello */
.stat-card.surrounding[data-metric="followers"] .stat-icon svg {
  animation: waveHello 4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Hover enhancements for stat icons */
.stat-card.surrounding:hover .stat-icon svg {
  transform: scale(1.15);
  filter: drop-shadow(0 0 15px currentColor);
}

/* Pause animations on hover for better UX */
.stat-card.surrounding:hover .stat-icon svg {
  animation-play-state: paused;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-stat-main .hero-stat-icon svg,
  .stat-card.surrounding .stat-icon svg {
    animation: none !important;
  }
}

/* Globe section enhancement */
.globe-section {
  position: relative;
  overflow: hidden;
}

.globe-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Hide "Most Active Regions" panel on mobile - prioritize globe display */
@media (max-width: 48rem) { /* ~768px */
  #globe-active-regions,
  .globe-active-regions {
    display: none !important;
  }
  
  /* Make globe take full width when regions panel is hidden */
  .globe-layout {
    flex-direction: column;
  }
  
  #globe-container,
  .globe-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Hide spotlight culture/flag images on mobile - only generate on desktop */
@media (max-width: 48rem) { /* ~768px */
  /* Hide all image wrappers */
  #culture1-image-wrapper,
  #culture2-image-wrapper,
  #flag-image-wrapper {
    display: none !important;
  }
  
  /* Hide the entire images grid container on mobile */
  .spotlight-images-grid,
  .spotlight-images-container {
    display: none !important;
  }
  
  /* Hide individual image cards as fallback */
  .spotlight-image-card {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   21.10 LOADING STATES & MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */

/* Enhanced loading spinner */
.loading-spinner-small,
.loading-spinner {
  border: 2px solid rgba(79, 172, 254, 0.2);
  border-top-color: #4FACFE;
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

/* Skeleton loading glow */
.skeleton,
[class*="skeleton"] {
  background: linear-gradient(
    90deg,
    rgba(13, 31, 58, 0.5) 25%,
    rgba(79, 172, 254, 0.1) 50%,
    rgba(13, 31, 58, 0.5) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* Button active state */
button:active,
.btn:active,
a.btn:active {
  transform: scale(0.98);
}

/* Focus glow for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.3), var(--glow-subtle);
}

/* --------------------------------------------------------------------------
   21.11 REDUCED MOTION - Respect User Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .stagger-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .hero-section::after,
  .play-button-large::before,
  .hero-module-label,
  .fact-checker-badge,
  .shimmer-text,
  .newsletter-signup-section::before,
  .newsletter-signup-section::after,
  .footer::before {
    animation: none;
  }
  
  .hover-lift:hover {
    transform: none;
  }
}

/* ==========================================================================
   22. ULTIMATE VISUAL ENHANCEMENT - PRODUCTION POLISH
   ==========================================================================
   
   Comprehensive styling upgrade for premium look and feel.
   Applied to both desktop and mobile for publish-ready appearance.
   
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.0 X/TWITTER BANNER - MOBILE ONLY
   -------------------------------------------------------------------------- */

/* Hidden by default on desktop */
.x-banner-mobile {
  display: none;
}

/* Show on mobile/tablet */
@media (max-width: 48rem) { /* ~768px */
  .x-banner-mobile {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #000000 0%, #14171a 100%);
    overflow: visible !important; /* Prevent clipping */
    margin: 0 !important;
    padding: 0;
    line-height: normal;
    min-height: fit-content;
  }
  
  .x-banner-image {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important; /* No max-height constraint */
    min-height: auto;
    object-fit: contain; /* Show full image without cropping */
    object-position: center;
    margin: 0;
    padding: 0;
    vertical-align: bottom; /* Prevent gap at bottom */
  }
  
  /* Hide ad between banner and hero on mobile */
  .x-banner-mobile ~ .adsbygoogle,
  .x-banner-mobile ~ ins.adsbygoogle {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure container touches the banner */
  .container,
  #main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   22.1 ENHANCED ROOT VARIABLES
   -------------------------------------------------------------------------- */

:root {
  /* Premium Gradients */
  --gradient-premium: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-ocean: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
  --gradient-sunset: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-midnight: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  --gradient-aurora: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
  
  /* Enhanced Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(74, 158, 255, 0.3);
  --shadow-glow-strong: 0 0 40px rgba(74, 158, 255, 0.5);
  
  /* Premium Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   22.2 GLOBAL POLISH
   -------------------------------------------------------------------------- */

/* Smooth scrolling with native feel */
html {
  scroll-behavior: smooth;
}

/* Premium body background with subtle texture */
body {
  background: 
    radial-gradient(ellipse at 20% 0%, rgba(74, 158, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    var(--color-bg-dark);
  min-height: 100vh;
}

/* Selection styling */
::selection {
  background: rgba(74, 158, 255, 0.4);
  color: white;
}

/* --------------------------------------------------------------------------
   22.3 PREMIUM HEADER
   -------------------------------------------------------------------------- */

.main-header {
  background: linear-gradient(180deg, 
    rgba(7, 21, 42, 0.98) 0%, 
    rgba(7, 21, 42, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(74, 158, 255, 0.15);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.main-header.scrolled {
  background: rgba(7, 21, 42, 0.98);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 0 60px rgba(74, 158, 255, 0.05);
}

/* Brand name styling - solid color for reliability */
.brand-name {
  color: #4FACFE;
  font-weight: var(--fw-bold);
  display: inline-block;
  overflow: visible !important;
  position: relative;
  /* No text-shadow to prevent rendering artifacts */
}

/* Ensure brand-name container has room for the text */
.brand-info h1 {
  overflow: visible !important;
  display: inline-flex;
  align-items: center;
  padding-right: 4px;
}

.brand-info {
  overflow: visible !important;
  padding-right: 4px;
}

/* CRITICAL: Override overflow:hidden on header-left that clips the brand name */
/* Using maximum specificity to override styles.css line 2202 */
html body header.main-header .header-container .header-left,
html body .main-header .header-container .header-left,
header.main-header .header-container .header-left,
.main-header .header-container .header-left,
.header-left {
  overflow: visible !important;
  max-width: none !important; /* Also remove max-width constraint */
}

@keyframes shimmerText {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Navigation links */
.main-nav a {
  position: relative;
  padding: 0.5rem 1rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-aurora);
  transform: translateX(-50%);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.main-nav a:hover {
  color: var(--color-text-primary);
}

.main-nav a:hover::after {
  width: 80%;
}

/* --------------------------------------------------------------------------
   22.4 PREMIUM BUTTONS
   -------------------------------------------------------------------------- */

/* Primary button - Used for main CTAs */
.btn-primary,
.auth-btn.signup-btn,
button[type="submit"],
.cta-button,
.view-all-btn {
  background: linear-gradient(135deg, #4FACFE 0%, #00f2fe 100%);
  border: none;
  color: #000;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.auth-btn.signup-btn::before,
.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before,
.auth-btn.signup-btn:hover::before,
.cta-button:hover::before {
  left: 100%;
}

.btn-primary:hover,
.auth-btn.signup-btn:hover,
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.5);
}

/* Secondary button - Used for secondary actions */
.btn-secondary,
.auth-btn.signin-btn {
  background: transparent;
  border: 1px solid rgba(79, 172, 254, 0.5);
  color: var(--color-primary-light);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover,
.auth-btn.signin-btn:hover {
  background: rgba(79, 172, 254, 0.1);
  border-color: var(--color-primary-light);
  box-shadow: 0 0 20px rgba(79, 172, 254, 0.2);
  transform: translateY(-1px);
}

/* Ghost button */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.btn-ghost:hover {
  color: var(--color-primary-light);
}

/* --------------------------------------------------------------------------
   22.5 PREMIUM CARDS
   -------------------------------------------------------------------------- */

/* Base card styling */
.card,
.feed-post-card,
.game-card,
.stat-card,
.situation-monitor-card,
.spotlight-card {
  background: linear-gradient(145deg, 
    rgba(15, 25, 50, 0.8) 0%, 
    rgba(7, 21, 42, 0.95) 100%);
  border: 1px solid rgba(74, 158, 255, 0.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.card::before,
.feed-post-card::before,
.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-aurora);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover,
.feed-post-card:hover,
.game-card:hover {
  transform: translateY(-4px);
  border-color: rgba(74, 158, 255, 0.3);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(74, 158, 255, 0.1);
}

.card:hover::before,
.feed-post-card:hover::before,
.game-card:hover::before {
  opacity: 1;
}

/* News card image */
.feed-post-card .feed-post-image,
.feed-post-card img {
  transition: transform 0.5s ease, filter 0.3s ease;
}

.feed-post-card:hover .feed-post-image,
.feed-post-card:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   22.6 HERO SECTION ENHANCEMENT
   -------------------------------------------------------------------------- */

.hero-section {
  position: relative;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

/* Hero welcome text */
.welcome-text,
h1.welcome-text,
.hero-title {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #4FACFE 50%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* Hero stat cards */
.hero-stat-card {
  background: linear-gradient(145deg, 
    rgba(74, 158, 255, 0.15) 0%, 
    rgba(74, 158, 255, 0.05) 100%);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  transition: all 0.3s ease;
}

.hero-stat-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(74, 158, 255, 0.4);
  box-shadow: 0 10px 30px rgba(74, 158, 255, 0.2);
}

/* Hero module / Breaking news card */
.hero-module-container {
  background: linear-gradient(145deg, 
    rgba(15, 25, 50, 0.9) 0%, 
    rgba(7, 21, 42, 0.98) 100%);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(74, 158, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Breaking news label */
.hero-module-label,
.breaking-label {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-block;
  animation: pulseLabel 2s ease-in-out infinite;
}

@keyframes pulseLabel {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); }
}

/* --------------------------------------------------------------------------
   22.7 FORM ELEMENTS
   -------------------------------------------------------------------------- */

/* Input fields */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
.search-input,
.globe-search-input-posts {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1.25rem;
  color: var(--color-text-primary);
  font-size: 1rem;
  transition: all 0.3s ease;
}

input:focus,
textarea:focus,
.search-input:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.15), var(--shadow-glow);
  background: rgba(0, 0, 0, 0.4);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   22.8 SECTION DIVIDERS
   -------------------------------------------------------------------------- */

.section-divider,
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(74, 158, 255, 0.3) 50%, 
    transparent 100%);
  margin: 3rem 0;
}

/* Section headers */
.section-title,
.news-title,
h2.section-header {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.section-title::after,
.news-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-aurora);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   22.9 FOOTER ENHANCEMENT
   -------------------------------------------------------------------------- */

.footer,
footer {
  background: linear-gradient(180deg, 
    rgba(7, 21, 42, 0.95) 0%, 
    rgba(5, 15, 35, 1) 100%);
  border-top: 1px solid rgba(74, 158, 255, 0.1);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(74, 158, 255, 0.5) 50%, 
    transparent 100%);
}

/* Footer links */
.footer a,
footer a {
  color: var(--color-text-muted);
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.footer a:hover,
footer a:hover {
  color: var(--color-primary-light);
  transform: translateX(3px);
}

/* Social icons */
.social-icons a,
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.2);
  transition: all 0.3s ease;
}

.social-icons a:hover,
.footer-social a:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3);
}

/* --------------------------------------------------------------------------
   22.10 NEWSLETTER SECTION
   -------------------------------------------------------------------------- */

.newsletter-signup-section,
.newsletter-section {
  background: linear-gradient(135deg, 
    rgba(74, 158, 255, 0.1) 0%, 
    rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: var(--radius-2xl);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.newsletter-signup-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.05) 0%, transparent 70%);
  animation: rotateGradient 20s linear infinite;
}

@keyframes rotateGradient {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   22.11 LOADING STATES
   -------------------------------------------------------------------------- */

.loading,
.skeleton {
  background: linear-gradient(90deg, 
    rgba(74, 158, 255, 0.1) 25%, 
    rgba(74, 158, 255, 0.2) 50%, 
    rgba(74, 158, 255, 0.1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Loading spinner */
.spinner,
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(74, 158, 255, 0.2);
  border-top-color: var(--color-primary-light);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* --------------------------------------------------------------------------
   22.12 TOOLTIPS & POPOVERS
   -------------------------------------------------------------------------- */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 0.75rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* --------------------------------------------------------------------------
   22.13 BADGES & TAGS
   -------------------------------------------------------------------------- */

.badge,
.tag,
.category-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: rgba(74, 158, 255, 0.15);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge.new,
.tag.live {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.badge.breaking,
.tag.urgent {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* --------------------------------------------------------------------------
   22.14 MOBILE-SPECIFIC POLISH
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  /* Tighter spacing on mobile */
  .hero-section {
    padding: 1.5rem 1rem;
  }
  
  /* Full-width cards on mobile */
  .feed-post-card,
  .game-card {
    border-radius: var(--radius-lg);
  }
  
  /* Improved touch targets */
  .btn-primary,
  .btn-secondary,
  button {
    min-height: 48px;
    padding: 0.875rem 1.5rem;
  }
  
  /* Better mobile header */
  .main-header {
    padding: 0.5rem 0;
  }
  
  /* Mobile menu button styling */
  .mobile-menu-toggle {
    background: rgba(74, 158, 255, 0.15) !important;
    border: 1px solid rgba(74, 158, 255, 0.3) !important;
    border-radius: 10px !important;
  }
  
  .mobile-menu-toggle svg path {
    stroke: #4FACFE;
  }
  
  /* Stack elements nicely */
  .hero-stats-container {
    gap: 0.75rem;
  }
  
  .hero-stat-card {
    padding: 0.875rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   22.15 DESKTOP-SPECIFIC POLISH
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  /* Larger spacing on desktop */
  .hero-section {
    padding: 4rem 2rem;
  }
  
  /* Better card hover effects */
  .feed-post-card:hover,
  .game-card:hover {
    transform: translateY(-8px);
  }
  
  /* Side-by-side layouts */
  .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   22.16 PRINT STYLES
   -------------------------------------------------------------------------- */

@media print {
  .main-header,
  .footer,
  .mobile-menu-toggle,
  .newsletter-section,
  .noteworthy-chat-widget {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  a {
    color: black;
    text-decoration: underline;
  }
}

/* ==========================================================================
   END OF ULTIMATE VISUAL ENHANCEMENT
   ========================================================================== */