/* ================================================================
   styles.css — evundavis.com
   Shared styles used across ALL pages.
   ALL styles — shared and page-specific — live here.

   Sections:
     1.  CSS Variables (design tokens)
     2.  Reset & Base
     3.  Typography
     4.  Layout Utilities
     5.  Sidebar
     6.  Main Wrapper
     7.  Header / Hero (homepage)
     8.  Shared Page Header (inner pages)
     9.  Feature Cards Section
    10.  About Strip
    11.  Highlights Section
    12.  Stats Strip (homepage)
    13.  Shared Tag Pills
    14.  Footer
    15.  Buttons
    16.  Sidebar Tooltips (collapsed mode)
    17.  Scroll Animations
    18.  Responsive / Media Queries
    19.  Games Page
    20.  The Truth Page
    21.  Paradoxes Page
    22.  About Page
    23.  Contact Page
================================================================ */


/* ================================================================
   1. CSS VARIABLES — Design tokens
   Edit these to retheme the entire site at once.
================================================================ */
:root {
  /* -- Colors -- */
  --color-bg:           #f8f7f4;       /* Warm off-white page background */
  --color-surface:      #ffffff;       /* Card / panel backgrounds */
  --color-border:       #e2ddd8;       /* Subtle borders */
  --color-text:         #1c1917;       /* Primary text — near black */
  --color-text-muted:   #78716c;       /* Secondary / muted text */
  --color-accent:       #1a56db;       /* Blue accent — buttons, links, tags */
  --color-accent-dark:  #1239a0;       /* Darker blue — hover states */
  --color-accent-light: #dbeafe;       /* Light blue tint — tag backgrounds */
  --color-sidebar-bg:   #111827;       /* Dark sidebar background */
  --color-sidebar-text: #f9fafb;       /* Sidebar text */
  --color-sidebar-hover:#1f2937;       /* Sidebar link hover background */
  --color-sidebar-active:#1a56db;      /* Active link left-border color */
  --color-hero-bg:      #0f172a;       /* Hero section dark background */
  --color-hero-text:    #f1f5f9;       /* Hero section text */

  /* -- Typography -- */
  --font-display: 'Playfair Display', Georgia, serif;  /* Headings */
  --font-body:    'DM Sans', system-ui, sans-serif;    /* Body copy */
  --font-mono:    'DM Mono', monospace;                /* Code/formula snippets */

  /* -- Sidebar sizing -- */
  --sidebar-width:     240px;   /* Expanded sidebar width */
  --sidebar-collapsed:  64px;   /* Collapsed (icon-only) width */

  /* -- Layout -- */
  --container-max: 1100px;      /* Max content width */

  /* -- Spacing scale -- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 96px;

  /* -- Transitions -- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* -- Shadows -- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);

  /* -- Border radius -- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;
}


/* ================================================================
   2. RESET & BASE
   Normalize browser defaults for cross-browser consistency.
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;   /* Smooth anchor-link scrolling */
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  overflow-x: hidden;        /* Prevent sidebar from causing horizontal scroll */
}

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

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

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

ul {
  list-style: none;
}


/* ================================================================
   3. TYPOGRAPHY
   Global heading and text styles shared across all pages.
================================================================ */

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 65ch;           /* Comfortable reading line length */
}

/* Section title — centered by default, left-align variant available */
.section-title {
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  text-align: center;
}

.section-title.left-align {
  text-align: left;
}

.section-subtitle {
  text-align: center;
  margin-bottom: var(--space-lg);
  font-size: 1.05rem;
}

/* Eyebrow label above hero/page headings — uppercase small text */
.header-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  max-width: none;
}


/* ================================================================
   4. LAYOUT UTILITIES
   Reusable container for centering and constraining page content.
================================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}


/* ================================================================
   5. SIDEBAR
   Fixed left navigation panel — collapses to icon-only strip.
   JS (sidebar.js) toggles the .collapsed class.
================================================================ */

.sidebar {
  position: fixed;                      /* Always stuck to the left edge */
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background-color: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: 1000;                        /* Above all page content */
  transition: width var(--transition-slow);
  overflow: hidden;                     /* Hides text labels when collapsing */
  box-shadow: 4px 0 24px rgba(0,0,0,0.18);
}

/* Collapsed — shrinks to icon-only strip width */
.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

/* ---- Toggle button ---- */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-sidebar-text);
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.sidebar-toggle:hover {
  background: var(--color-sidebar-hover);
}

/* ---- Brand / logo area ---- */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Blue square with initial letter */
.brand-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* Brand name text — fades out when collapsed */
.brand-text {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: opacity var(--transition-base);
}

.sidebar.collapsed .brand-text {
  opacity: 0;
  pointer-events: none;
}

/* ---- Nav list ---- */
.sidebar-nav {
  flex: 1;
  padding: var(--space-md) 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Individual nav link */
.nav-link {
  position: relative;                  /* Needed for tooltip positioning */
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  border-left: 3px solid transparent;  /* Active page indicator */
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.nav-link:hover {
  background: var(--color-sidebar-hover);
  color: #fff;
}

/* Active page — blue left border, brighter text, tinted bg */
.nav-link.active {
  background: rgba(26, 86, 219, 0.15);
  color: #fff;
  border-left-color: var(--color-sidebar-active);
}

.nav-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Nav label text — fades out when sidebar is collapsed */
.nav-label {
  opacity: 1;
  white-space: nowrap;
  transition: opacity var(--transition-base);
}

.sidebar.collapsed .nav-label {
  opacity: 0;
  pointer-events: none;
  width: 0;
}

/* ---- Sidebar footer strip ---- */
.sidebar-footer {
  padding: 0;                              /* Button controls its own padding */
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.sidebar-footer-text {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  transition: opacity var(--transition-base);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.sidebar.collapsed .sidebar-footer-text {
  opacity: 0;
}


/* ================================================================
   6. MAIN WRAPPER
   The scrollable page content area to the right of the sidebar.
   JS adjusts margin-left to match the sidebar's current width.
================================================================ */

.main-wrapper {
  margin-left: var(--sidebar-width);
  transition: margin-left var(--transition-slow);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Applied by JS when sidebar is collapsed */
.main-wrapper.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed);
}


/* ================================================================
   7. HERO SECTION (homepage only)
   Dark full-width banner with large title and CTA buttons.
================================================================ */

.site-header {
  position: relative;
  background-color: var(--color-hero-bg);
  color: var(--color-hero-text);
  padding: var(--space-2xl) var(--space-lg);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.header-inner {
  position: relative;
  z-index: 2;                /* Sits above decorative shapes */
  max-width: 680px;
}

.header-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.header-tagline {
  font-size: 1.1rem;
  color: rgba(241, 245, 249, 0.72);
  max-width: 520px;
  margin-bottom: var(--space-lg);
}

/* CTA button row */
.header-cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Decorative circles in hero background — no interaction */
.hero-deco {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  background: var(--color-accent);
  pointer-events: none;
}

.hero-deco-1 { width: 500px; height: 500px; top: -150px; right: -100px; }
.hero-deco-2 { width: 300px; height: 300px; bottom: -80px; right: 250px; opacity: 0.04; }
.hero-deco-3 {
  width: 180px; height: 180px;
  top: 40px; right: 380px;
  opacity: 0.08;
  border-radius: var(--radius-md);
  transform: rotate(30deg);
}


/* ================================================================
   8. SHARED PAGE HEADER (inner pages)
   Used by Games, The Truth, Paradoxes, About, Contact pages.
   Each page overrides colors/padding in its own <style> block,
   but these shared rules prevent code duplication.
================================================================ */

/* Common dark banner used by inner page headers */
.page-header-shared {
  padding: 80px var(--space-lg) 56px;
  position: relative;
  overflow: hidden;
}

.page-header-shared h1 {
  margin-bottom: 12px;
}

.page-header-shared p {
  max-width: 520px;
}


/* ================================================================
   9. FEATURE CARDS SECTION
   Grid of cards on the homepage and about page.
================================================================ */

.featured-section {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
}

/* Auto-fill grid — fits as many 280px columns as possible */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* Individual card */
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);       /* Subtle lift on hover */
}

/* Colored icon square at top of each card */
.card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.card-icon {
  font-size: 1.5rem;
  color: var(--color-accent);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.card-desc {
  font-size: 0.93rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  max-width: none;
}

/* "Read more" link at the bottom of each card */
.card-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent);
  display: inline-block;
  transition: letter-spacing var(--transition-fast), color var(--transition-fast);
}

.card-link:hover {
  color: var(--color-accent-dark);
  letter-spacing: 0.02em;
}


/* ================================================================
   10. ABOUT STRIP
   Two-column section with text on the left and a decorative
   visual block on the right. Used on the homepage.
================================================================ */

.about-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2xl) 0;
}

/* Horizontal flex row inside the container */
.about-strip-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.about-strip-text {
  flex: 1;
}

.about-strip-text p {
  margin-bottom: var(--space-lg);
  font-size: 1.05rem;
  max-width: 55ch;
}

.about-strip-visual {
  flex-shrink: 0;
}

/* Tilted blue block with the "?" symbol */
.visual-block {
  width: 160px;
  height: 160px;
  background: var(--color-accent);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transform: rotate(-6deg);          /* Personality tilt */
}

.visual-symbol {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1;
  display: block;
}


/* ================================================================
   11. HIGHLIGHTS SECTION
   Horizontal list of content entries linking to site pages.
================================================================ */

.highlights-section {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
}

.highlights-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
}

/* Single row */
.highlight-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.highlight-item:first-child {
  border-top: 1px solid var(--color-border);
}

/* Pill tag (Game / Paradox / Truth) */
.highlight-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
}

/* Title column expands to fill space */
.highlight-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
}

.highlight-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

.highlight-link:hover {
  color: var(--color-accent-dark);
}


/* ================================================================
   12. STATS STRIP (homepage)
   Four horizontal numbers giving a sense of the site's content.
================================================================ */

.stats-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
}

/* Horizontal flex row with equal-spaced stat items */
.stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* Large number */
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

/* Label below the number */
.stat-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Vertical divider between stats */
.stat-divider {
  width: 1px;
  height: 48px;
  background: var(--color-border);
  flex-shrink: 0;
}


/* ================================================================
   13. SHARED TAG PILLS
   Category labels used on The Truth and Paradoxes pages.
   Defined here so they don't need to be duplicated per-page.
================================================================ */

/* Math — blue */
.tag-math {
  background: rgba(59,130,246,0.12);
  color: #2563eb;
}

/* Science — green */
.tag-science {
  background: rgba(16,185,129,0.12);
  color: #059669;
}

/* Logic — purple */
.tag-logic {
  background: rgba(168,85,247,0.12);
  color: #7c3aed;
}

/* History — amber */
.tag-history {
  background: rgba(251,191,36,0.12);
  color: #b45309;
}

/* Nature — teal */
.tag-nature {
  background: rgba(20,184,166,0.12);
  color: #0d9488;
}

/* Physics — indigo (for paradoxes page) */
.tag-physics {
  background: rgba(99,102,241,0.12);
  color: #4f46e5;
}

/* Dark-page tag variants (used on The Truth dark theme) */
.tag-math-dark    { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.tag-science-dark { background: rgba(16,185,129,0.12);  color: #34d399; }
.tag-logic-dark   { background: rgba(168,85,247,0.12);  color: #c084fc; }
.tag-history-dark { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.tag-nature-dark  { background: rgba(52,211,153,0.12);  color: #6ee7b7; }


/* ================================================================
   14. FOOTER
   Three-column: branding | nav links | contact info + copyright
================================================================ */

.site-footer {
  background: var(--color-sidebar-bg);
  color: rgba(255,255,255,0.6);
  padding: var(--space-xl) 0 var(--space-lg);
  margin-top: auto;                  /* Push footer to the bottom of flex column */
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  display: block;
  margin-bottom: var(--space-xs);
}

.footer-brand .footer-tagline {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  max-width: none;
}

/* Center column: nav links */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

.footer-nav a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: #fff;
}

/* Right column: contact + copyright */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-end;
  text-align: right;
}

.footer-contact-item {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--transition-fast);
}

.footer-contact-item:hover {
  color: #fff;
}

.footer-contact-icon {
  font-size: 0.9rem;
}

.footer-copyright {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  margin-top: var(--space-xs);
  max-width: none;
}


/* ================================================================
   15. BUTTONS
   Reusable button styles. Applied via .btn + variant class.
================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* Solid filled — primary actions */
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}

/* Ghost on dark backgrounds */
.btn-secondary {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

/* Outline on light backgrounds */
.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-outline:hover {
  background: var(--color-accent);
  color: #fff;
}


/* ================================================================
   16. SIDEBAR TOOLTIPS (collapsed mode)
   When the sidebar is collapsed, hovering a nav icon shows
   a small tooltip with the page name to the right of the icon.
   JS in sidebar.js adds data-tooltip attributes automatically,
   but the CSS handles all the visual rendering.
================================================================ */

/* Tooltip element — created and positioned via CSS pseudo-element */
.nav-link[data-tooltip]::after {
  content: attr(data-tooltip);         /* Reads text from data-tooltip attribute */
  position: absolute;
  left: calc(100% + 12px);            /* Appears to the right of the icon */
  top: 50%;
  transform: translateY(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--shadow-md);
  transition: opacity var(--transition-fast);
  z-index: 1001;
}

/* Tooltip arrow pointing left */
.nav-link[data-tooltip]::before {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #1f2937;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 1001;
}

/* Only show tooltips when the sidebar is collapsed */
.sidebar.collapsed .nav-link[data-tooltip]:hover::after,
.sidebar.collapsed .nav-link[data-tooltip]:hover::before {
  opacity: 1;
}


/* ================================================================
   17. SCROLL ANIMATIONS
   Shared fade-in animation used by JS IntersectionObserver.
   Applied by sidebar.js to .feature-card, .highlight-item, etc.
================================================================ */

/* Initial hidden state — JS sets this via inline style */
/* The visible state is applied by JS adding opacity:1 / translateY(0) */
/* These keyframes are available for any page to use with animation: */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ================================================================
   18. RESPONSIVE / MEDIA QUERIES
   Breakpoint adjustments for tablet and mobile screens.
================================================================ */

/* ---- Tablet (≤ 900px) ---- */
@media (max-width: 900px) {

  /* Auto-collapse sidebar on tablets */
  .sidebar {
    width: var(--sidebar-collapsed);
  }

  .brand-text,
  .nav-label,
  .sidebar-footer-text {
    opacity: 0;
    pointer-events: none;
    width: 0;
  }

  /* Main content offset matches collapsed width */
  .main-wrapper {
    margin-left: var(--sidebar-collapsed);
  }

  /* Footer stacks vertically */
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-contact {
    align-items: center;
    text-align: center;
  }

  .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* About strip stacks */
  .about-strip-inner {
    flex-direction: column;
    text-align: center;
  }

  .about-strip-text .section-title {
    text-align: center;
  }

  .about-strip-text p {
    margin-left: auto;
    margin-right: auto;
  }

  /* Stats strip wraps on tablet */
  .stats-inner {
    gap: var(--space-lg);
  }

  .stat-divider {
    display: none;                   /* Hide dividers when wrapping */
  }
}

/* ---- Mobile (≤ 600px) ---- */
@media (max-width: 600px) {

  /* Sidebar hides off-screen — JS slides it in as overlay on button tap */
  .sidebar {
    width: 0;
    overflow: hidden;
  }

  /* Class added by JS when mobile sidebar is open */
  .sidebar.mobile-open {
    width: var(--sidebar-width);
  }

  /* Full-width content on mobile */
  .main-wrapper {
    margin-left: 0;
  }

  /* Stack hero CTA buttons */
  .header-cta {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  /* Single column cards on mobile */
  .cards-grid {
    grid-template-columns: 1fr;
  }

  /* Wrap highlight items */
  .highlight-item {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* Smaller visual block */
  .visual-block {
    width: 100px;
    height: 100px;
  }

  .visual-symbol {
    font-size: 4rem;
  }

  /* Stats wrap into 2x2 grid on mobile */
  .stats-inner {
    gap: var(--space-md);
  }
}

/* ================================================================
   19. GAMES PAGE
   Password gate overlay, game cards, game viewer iframe modal.
================================================================ */

/* ---- Password Gate Overlay ----
   Covers the full page until correct password is entered. */
#password-gate {
  position: fixed;
  inset: 0;
  background: var(--color-hero-bg);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Gate fades out when unlocked class is added by JS */
#password-gate.unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gate-box {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.gate-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 16px;
}

.gate-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 8px;
}

.gate-subtitle {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 28px;
  max-width: none;
}

/* Password input — spaced letters, centered */
.gate-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 16px;
}

.gate-input:focus {
  border-color: var(--color-accent);
}

/* Shake animation on wrong password */
.gate-input.error {
  border-color: #ef4444;
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}

.gate-error-msg {
  color: #ef4444;
  font-size: 0.82rem;
  min-height: 18px;
  margin-bottom: 8px;
  display: block;
}

.gate-btn {
  width: 100%;
  padding: 14px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.gate-btn:hover  { background: var(--color-accent-dark); transform: translateY(-1px); }
.gate-btn:active { transform: translateY(0); }

/* ---- Games Page Header ---- */
.games-header {
  background: var(--color-hero-bg);
  color: #fff;
  padding: 72px var(--space-lg) 48px;
  position: relative;
  overflow: hidden;
}

.games-header h1 { color: #fff; margin-bottom: 8px; }
.games-header p  { color: rgba(255,255,255,0.6); max-width: 500px; }

/* ---- Games Grid ---- */
.games-section {
  padding: var(--space-2xl) 0;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* Utility class for left-aligned section titles */
.section-title-left {
  text-align: left;
}

/* Paragraph with no bottom margin (used in list intros) */
.p-no-margin {
  margin-bottom: 0;
}

/* Individual game card */
.game-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Colored gradient thumbnail at the top of each card */
.game-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  overflow: hidden;
}

.thumb-blue   { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.thumb-green  { background: linear-gradient(135deg, #064e3b, #10b981); }
.thumb-orange { background: linear-gradient(135deg, #7c2d12, #f97316); }
.thumb-purple { background: linear-gradient(135deg, #4c1d95, #8b5cf6); }
.thumb-red    { background: linear-gradient(135deg, #7f1d1d, #ef4444); }
.thumb-teal   { background: linear-gradient(135deg, #134e4a, #14b8a6); }

.game-info { padding: 20px; }

.game-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 6px;
}

.game-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  max-width: none;
}

.game-tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 14px;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  transition: gap 0.2s, color 0.15s;
}

.play-btn:hover { gap: 10px; color: var(--color-accent-dark); }

/* ---- Game Viewer Modal ----
   Fullscreen iframe overlay opened when a game card is clicked. */
#game-viewer {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1500;
  flex-direction: column;
}

#game-viewer.open { display: flex; }

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #111827;
  color: #fff;
  flex-shrink: 0;
}

.viewer-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #fff;
}

.viewer-close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

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

/* Iframe fills remaining height of the viewer */
#game-frame {
  flex: 1;
  border: none;
  width: 100%;
}


/* ================================================================
   20. THE TRUTH PAGE
   Dark editorial style; big numbered statements with vote buttons.
================================================================ */

.truth-header {
  background: #0a0a0a;
  padding: 80px var(--space-lg) 56px;
  border-bottom: 1px solid #222;
  position: relative;
  overflow: hidden;
}

/* Subtle red radial glow in corner */
.truth-header::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(220,38,38,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.truth-header h1 {
  color: #fff;
  font-style: italic;
  margin-bottom: 12px;
}

.truth-header p {
  color: rgba(255,255,255,0.5);
  max-width: 540px;
  font-size: 1rem;
}

/* Red uppercase eyebrow label */
.truth-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ef4444;
  margin-bottom: 12px;
  display: block;
}

/* Banner strip between header and entries */
.truth-banner {
  background: #111;
  border-bottom: 1px solid #222;
  padding: 14px var(--space-lg);
  text-align: center;
}

.truth-banner p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  max-width: none;
  text-align: center;
}

/* Dark background section for all truth entries */
.truths-section {
  background: #0f0f0f;
  min-height: 60vh;
  padding: var(--space-2xl) 0;
}

/* Two-column: big number | statement + explanation + votes */
.truth-entry {
  border-bottom: 1px solid #1f1f1f;
  padding: var(--space-xl) 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-lg);
  align-items: start;
  /* Entries are visible by default — JS adds .animated class to opt
     into the fade-in effect only after confirming the page is ready */
}

/* JS adds .animated to enable the fade-in when IntersectionObserver fires */
.truth-entry.animated {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.truth-entry.animated.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Red index number on the left */
.truth-number {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: #ef4444;
  line-height: 1;
  opacity: 0.6;
  text-align: right;
  padding-top: 6px;
}

/* Heading statement */
.truth-statement {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: #fff;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.3;
}

/* Supporting explanation text */
.truth-explanation {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
  max-width: 65ch;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Row of agree/disagree buttons */
.truth-votes {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s, transform 0.15s;
  background: transparent;
}

.vote-btn:hover  { transform: scale(1.04); }
.vote-btn:active { transform: scale(0.98); }

.vote-agree { color: #10b981; border-color: rgba(16,185,129,0.3); }
.vote-agree:hover, .vote-agree.voted { background: rgba(16,185,129,0.12); }

.vote-disagree { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.vote-disagree:hover, .vote-disagree.voted { background: rgba(239,68,68,0.1); }

/* Vote count number inside the button */
.vote-count {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.25);
  font-weight: 400;
}

/* Category tag pill above each entry */
.truth-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* Dark variants of tag colors for Truth page dark background */
.tag-math    { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.tag-science { background: rgba(16,185,129,0.12);  color: #34d399; }
.tag-logic   { background: rgba(168,85,247,0.12);  color: #c084fc; }
.tag-history { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.tag-nature  { background: rgba(52,211,153,0.12);  color: #6ee7b7; }

/* Footer on truth page gets a dark top border */
.truth-page .site-footer {
  border-top: 1px solid #1a1a1a;
}


/* ================================================================
   21. PARADOXES PAGE
   Header, featured paradox card, accordion list, quiz.
================================================================ */

.paradox-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  padding: 80px var(--space-lg) 56px;
  position: relative;
  overflow: hidden;
}

/* Rotating ∞ symbol as background decoration */
.paradox-header::after {
  content: '∞';
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18rem;
  color: rgba(255,255,255,0.03);
  font-family: var(--font-display);
  line-height: 1;
  pointer-events: none;
  animation: spin-slow 30s linear infinite;
}

@keyframes spin-slow {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

.paradox-header h1 { color: #fff; margin-bottom: 12px; position: relative; z-index: 1; }
.paradox-header p  { color: rgba(255,255,255,0.55); max-width: 520px; position: relative; z-index: 1; }

.paradox-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 12px;
  display: block;
}

/* ---- Featured Paradox ---- */
.featured-paradox-section {
  background: #f1f0ed;
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-border);
}

.featured-paradox-section .section-title { text-align: left; }

.featured-paradox-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: var(--space-lg);
}

/* Purple gradient accent strip at top of the featured card */
.featured-top-strip {
  height: 6px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
}

.featured-content { padding: var(--space-xl); }

.featured-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6366f1;
  background: rgba(99,102,241,0.1);
  padding: 3px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 20px;
}

.featured-paradox-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.2;
}

.featured-paradox-teaser {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 65ch;
  margin-bottom: 24px;
}

/* Full explanation — hidden until expand button is clicked */
.featured-paradox-full {
  display: none;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: 65ch;
  line-height: 1.75;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  margin-top: 4px;
  margin-bottom: 20px;
}

.featured-paradox-full.open {
  display: block;
  animation: fade-down 0.3s ease;
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Button that toggles the full explanation */
.expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #6366f1;
  background: transparent;
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 999px;
  padding: 7px 18px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s;
}

.expand-btn:hover { background: rgba(99,102,241,0.08); }

.expand-icon {
  display: inline-block;
  transition: transform 0.25s;
}

.expand-btn.open .expand-icon { transform: rotate(180deg); }

/* ---- Paradox Accordion List ---- */
.paradox-list-section {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
}

.paradox-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paradox-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.paradox-row:hover { box-shadow: var(--shadow-sm); }

/* Clickable header for each accordion item */
.paradox-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  gap: 16px;
}

.paradox-row-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.paradox-row-icon {
  font-size: 1.4rem;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.paradox-row-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-text);
  font-weight: 600;
}

.paradox-row-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 9px;
  border-radius: 999px;
}

/* Chevron rotates when row is open */
.paradox-chevron {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  transition: transform 0.25s;
  flex-shrink: 0;
}

.paradox-row.open .paradox-chevron { transform: rotate(180deg); }

/* Collapsible explanation body */
.paradox-row-body {
  display: none;
  padding: 0 24px 20px 76px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  border-top: 1px solid var(--color-border);
}

.paradox-row.open .paradox-row-body {
  display: block;
  animation: fade-down 0.25s ease;
}

/* Monospaced formula block used inside paradox explanations */
.paradox-formula {
  font-family: var(--font-mono);
  background: #f1f5f9;
  border-left: 3px solid #6366f1;
  padding: 10px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  color: #334155;
  margin: 12px 0;
  display: inline-block;
}

/* ---- Quiz Section ---- */
.quiz-section {
  background: #0f172a;
  padding: var(--space-2xl) 0;
}

.quiz-section .section-title   { color: #fff; text-align: left; }
.quiz-section .section-subtitle { color: rgba(255,255,255,0.45); text-align: left; }

.quiz-card {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-top: var(--space-lg);
  max-width: 680px;
}

/* Thin progress bar at the top of the quiz card */
.quiz-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin-bottom: 28px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: #818cf8;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.quiz-q-num {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}

.quiz-question {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 28px;
  line-height: 1.35;
}

.quiz-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.quiz-opt-btn {
  flex: 1;
  min-width: 120px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.quiz-opt-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

.quiz-opt-btn.correct { background: rgba(16,185,129,0.15); border-color: #10b981; color: #6ee7b7; }
.quiz-opt-btn.wrong   { background: rgba(239,68,68,0.12);  border-color: #ef4444; color: #fca5a5; }

.quiz-feedback {
  margin-top: 20px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  min-height: 24px;
}

/* Next question / Restart button inside the quiz */
.quiz-next-btn {
  margin-top: 24px;
  display: none;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.quiz-next-btn:hover  { background: #4f46e5; transform: translateY(-1px); }

/* Score display on the results screen */
.quiz-complete { text-align: center; }

.quiz-score {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: #818cf8;
  display: block;
  margin-bottom: 8px;
}

.quiz-complete p {
  color: rgba(255,255,255,0.5);
  max-width: none;
  text-align: center;
}

/* Inline "display:inline-block" utility — replaces last inline style in quiz JS */
.d-inline-block { display: inline-block; }


/* ================================================================
   22. ABOUT PAGE
   Two-column layout with narrative text and sticky fact cards.
================================================================ */

.about-header {
  background: var(--color-hero-bg);
  padding: 80px var(--space-lg) 56px;
  position: relative;
  overflow: hidden;
}

/* Large decorative ◇ in corner */
.about-header::after {
  content: '◇';
  position: absolute;
  right: 60px;
  bottom: -40px;
  font-size: 22rem;
  color: rgba(255,255,255,0.02);
  font-family: var(--font-display);
  line-height: 1;
  pointer-events: none;
}

.about-header h1 { color: #fff; margin-bottom: 12px; }
.about-header p  { color: rgba(255,255,255,0.55); max-width: 520px; }

.about-main { padding: var(--space-2xl) 0; }

/* Main two-column grid: text | sticky facts */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-xl);
  align-items: start;
}

.about-text h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 16px;
  color: var(--color-text);
}

.about-text p {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 58ch;
  margin-bottom: 20px;
  line-height: 1.8;
}

.about-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 32px 0;
}

/* Right column sticks as you scroll */
.about-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 24px;
}

.sidebar-fact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.fact-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 10px;
  display: block;
}

.fact-card-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.4;
}

/* Section below with site overview tiles */
.site-sections-list {
  padding: var(--space-xl) 0;
  background: #f1f0ed;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Clickable tile linking to each section */
.section-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
}

.section-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.tile-icon  { font-size: 2rem; display: block; margin-bottom: 12px; }

.tile-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
  display: block;
}

.tile-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  max-width: none;
}

/* About page fact-card email link styling */
.fact-card-link {
  font-size: 0.95rem;
  color: var(--color-accent);
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 820px) {
  .about-grid          { grid-template-columns: 1fr; }
  .about-sidebar       { position: static; }
}


/* ================================================================
   23. CONTACT PAGE
   Two-column layout: form on the left, info panel on the right.
================================================================ */

.contact-header {
  background: var(--color-hero-bg);
  padding: 80px var(--space-lg) 56px;
  position: relative;
  overflow: hidden;
}

/* Large decorative ✉ symbol in corner */
.contact-header::after {
  content: '✉';
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16rem;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
  line-height: 1;
}

.contact-header h1 { color: #fff; margin-bottom: 12px; }
.contact-header p  { color: rgba(255,255,255,0.55); max-width: 480px; }

.contact-section { padding: var(--space-2xl) 0; }

/* Two-column: form | info panel */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-xl);
  align-items: start;
}

/* Form card wrapper */
.contact-form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.contact-form-wrap h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 6px;
  color: var(--color-text);
}

.contact-form-wrap > p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.form-group { margin-bottom: 20px; }

.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* All text inputs, textareas share this base style */
.form-control {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(26,86,219,0.1);
}

.form-control::placeholder { color: #a8a29e; }

textarea.form-control {
  resize: vertical;
  min-height: 130px;
}

/* Side-by-side name + email inputs */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-top: 8px;
}

.form-submit-btn:hover  { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.form-submit-btn:active { transform: translateY(0); }

/* Success screen replaces the form after valid submission */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-xl) 0;
}

.form-success.visible { display: block; }

.success-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 16px;
}

.form-success h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 10px;
}

.form-success p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: none;
}

/* Inline error message below form fields */
.form-error-msg {
  color: #ef4444;
  font-size: 0.83rem;
  margin-bottom: 10px;
  min-height: 18px;
  display: block;
}

/* Right column: info panel */
.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 24px;
}

/* Individual contact info card */
.contact-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Square icon container inside each info card */
.info-icon-wrap {
  width: 44px;
  height: 44px;
  background: var(--color-accent-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.info-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 4px;
}

.info-card-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.info-card-value a {
  color: var(--color-text);
  font-weight: 600;
  transition: color 0.15s;
}

.info-card-value a:hover { color: var(--color-accent); }

/* Blue note card at bottom of info panel */
.contact-note {
  background: var(--color-accent-light);
  border: 1px solid rgba(26,86,219,0.15);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.contact-note p {
  font-size: 0.85rem;
  color: #1e40af;
  max-width: none;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 820px) {
  .contact-grid        { grid-template-columns: 1fr; }
  .contact-info-panel  { position: static; }
  .form-row            { grid-template-columns: 1fr; }
}


/* ================================================================
   24. FEATURED PARADOX ROTATION CONTROLS
   Dot indicators, prev/next arrows, and slide transition animations
   injected into the featured paradox card by paradoxes.js.
================================================================ */

/* ---- Navigation row: [‹] [• • • • • •] [›] ---- */
.featured-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

/* ---- Dot indicators ---- */
.featured-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;                          /* Fills space between the two arrow buttons */
}

/* Individual dot — inactive state */
.featured-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
  flex-shrink: 0;
}

/* Active dot — expands into a pill to show current position */
.featured-dot.active {
  background: #6366f1;
  width: 22px;                      /* Pill shape */
  border-radius: 4px;
  transform: none;
}

.featured-dot:hover:not(.active) {
  background: #a5b4fc;
  transform: scale(1.3);
}

/* ---- Prev / Next arrow buttons ---- */
.featured-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  font-family: var(--font-body);
}

.featured-nav-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
  transform: scale(1.08);
}

.featured-nav-btn:active {
  transform: scale(0.96);
}

/* ---- Slide transition animations ---- */
/* Exit: content fades and shifts slightly left */
.featured-content.slide-exit {
  animation: slide-out 0.25s ease forwards;
}

/* Enter: content fades in and shifts into position from the right */
.featured-content.slide-enter {
  animation: slide-in 0.35s ease forwards;
}

@keyframes slide-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-16px); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* quiz result message paragraph */
.quiz-result-msg {
  color: rgba(255,255,255,0.5);
  max-width: none;
  text-align: center;
  margin-bottom: 20px;
}

/* ================================================================
   25. FOOTER VERSION NUMBER
   Small version tag shown below the copyright line.
================================================================ */
.footer-version {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.2);
  max-width: none;
  letter-spacing: 0.06em;
  margin-top: 2px;
}


/* ================================================================
   26. DARK / LIGHT MODE — CSS VARIABLES
   All colors are redefined here for dark vs light theme.
   The [data-theme] attribute on <html> controls which set is active.
   sidebar.js sets this on page load based on OS preference or saved choice.
================================================================ */

/* Light theme (default) */
html[data-theme="light"] {
  --color-bg:           #f8f7f4;
  --color-surface:      #ffffff;
  --color-border:       #e2ddd8;
  --color-text:         #1c1917;
  --color-text-muted:   #78716c;
  --color-accent:       #1a56db;
  --color-accent-dark:  #1239a0;
  --color-accent-light: #dbeafe;
  --color-sidebar-bg:   #111827;
  --color-sidebar-text: #f9fafb;
  --color-sidebar-hover:#1f2937;
  --color-sidebar-active:#1a56db;
  --color-hero-bg:      #0f172a;
  --color-hero-text:    #f1f5f9;
}

/* Dark theme */
html[data-theme="dark"] {
  --color-bg:           #0f1117;
  --color-surface:      #1a1d27;
  --color-border:       #2a2d3a;
  --color-text:         #e8e6e1;
  --color-text-muted:   #9b98a0;
  --color-accent:       #4d7fff;
  --color-accent-dark:  #3366ee;
  --color-accent-light: #1a2a4a;
  --color-sidebar-bg:   #0d1018;
  --color-sidebar-text: #f9fafb;
  --color-sidebar-hover:#161b28;
  --color-sidebar-active:#4d7fff;
  --color-hero-bg:      #070a10;
  --color-hero-text:    #f1f5f9;
}

/* Smooth transition when switching themes */
body, .feature-card, .contact-form-wrap, .sidebar-fact-card,
.featured-paradox-card, .paradox-row, .game-card, .contact-info-card,
.about-strip, .stats-strip, .site-footer, .highlights-section,
.featured-section, .paradox-list-section, .games-section,
.about-main, .site-sections-list, .contact-section {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode form controls */
html[data-theme="dark"] .form-control {
  background: #0f1117;
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] .form-control::placeholder {
  color: #555;
}

/* Dark mode stats strip */
html[data-theme="dark"] .stats-strip {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Dark mode about strip */
html[data-theme="dark"] .about-strip {
  background: var(--color-surface);
}

/* Dark mode paradox formula */
html[data-theme="dark"] .paradox-formula {
  background: #0f1117;
  color: #a5b4fc;
  border-left-color: #6366f1;
}

/* Dark mode featured paradox section bg */
html[data-theme="dark"] .featured-paradox-section {
  background: #0d1018;
}

/* Dark mode site-sections-list */
html[data-theme="dark"] .site-sections-list {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Dark mode contact note */
html[data-theme="dark"] .contact-note {
  background: rgba(77,127,255,0.1);
  border-color: rgba(77,127,255,0.2);
}
html[data-theme="dark"] .contact-note p { color: #93b4ff; }

/* Dark mode search inputs */
html[data-theme="dark"] .games-search-input,
html[data-theme="dark"] .truth-search-input,
html[data-theme="dark"] .paradox-search-input {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] .games-search-input::placeholder,
html[data-theme="dark"] .truth-search-input::placeholder,
html[data-theme="dark"] .paradox-search-input::placeholder {
  color: #555;
}

/* ---- Theme toggle button inside sidebar ---- */
.theme-toggle-btn {
  /* Mirrors .nav-link exactly — padding, gap, border-left offset all match */
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 10px var(--space-md);
  background: transparent;
  border: none;
  border-left: 3px solid transparent; /* matches nav-link so icon aligns */
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.theme-toggle-btn:hover {
  background: var(--color-sidebar-hover);
  color: #fff;
}

/* Icon wrapper — exactly matches .nav-icon sizing so it lines up */
#theme-toggle-icon {
  width: 24px;                   /* same as .nav-icon */
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* SVG crisp at any sidebar width */
#theme-toggle-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  display: block;
  flex-shrink: 0;
}

.theme-toggle-label {
  font-size: 0.9rem;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--transition-base);
}

/* Hide label text when sidebar is collapsed — same pattern as .nav-label */
.sidebar.collapsed .theme-toggle-label {
  opacity: 0;
  pointer-events: none;
  width: 0;
  overflow: hidden;
}


/* ================================================================
   27. SEARCH BARS (games, truths, paradoxes)
================================================================ */

/* ---- Games search ---- */
.games-search-wrap {
  position: relative;
  margin-bottom: var(--space-md);
  max-width: 400px;
}

.games-search-input {
  width: 100%;
  padding: 11px 40px 11px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.games-search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.games-search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: 1rem;
}

/* ---- Games filter tabs ---- */
.games-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.games-filter-btn {
  padding: 6px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.games-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.games-filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.games-no-results {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  padding: var(--space-xl) 0;
  text-align: center;
  max-width: none;
}

/* ---- Truth search ---- */
.truth-search-wrap {
  background: #111;
  padding: 14px 0;
  border-bottom: 1px solid #222;
  position: relative;
}

.truth-search-input {
  width: 100%;
  max-width: 480px;
  padding: 11px 40px 11px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.truth-search-input:focus {
  border-color: rgba(255,255,255,0.35);
}

.truth-search-input::placeholder { color: rgba(255,255,255,0.3); }

.truth-search-icon {
  position: absolute;
  right: calc(var(--space-lg) + 14px);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.3);
  pointer-events: none;
  font-size: 1rem;
}

.truth-no-results {
  color: rgba(255,255,255,0.35);
  font-size: 0.95rem;
  padding: var(--space-xl) 0;
  text-align: center;
  max-width: none;
}

/* ---- Paradox search ---- */
.paradox-search-wrap {
  position: relative;
  margin-bottom: var(--space-lg);
  max-width: 420px;
}

.paradox-search-input {
  width: 100%;
  padding: 11px 40px 11px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.paradox-search-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

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

.paradox-search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: 1rem;
}

.paradox-no-results {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  padding: var(--space-xl) 0;
  text-align: center;
  max-width: none;
}

/* ---- Additional game thumb colors ---- */
.thumb-yellow { background: linear-gradient(135deg, #78350f, #f59e0b); }
.thumb-brown  { background: linear-gradient(135deg, #431407, #b45309); }
.thumb-pink   { background: linear-gradient(135deg, #831843, #ec4899); }

/* Hidden utility — replaces inline style="display:none" */
[hidden] { display: none !important; }


/* ================================================================
   28. PATCH NOTES PAGE
   Version history log with colored type tags and item bullets.
================================================================ */

/* ---- Page header ---- */
.patch-header {
  background: var(--color-hero-bg);
  padding: 80px var(--space-lg) 56px;
  position: relative;
  overflow: hidden;
}

.patch-header::after {
  content: "v";
  position: absolute;
  right: 40px;
  bottom: -60px;
  font-family: var(--font-mono);
  font-size: 20rem;
  color: rgba(255,255,255,0.02);
  line-height: 1;
  pointer-events: none;
}

.patch-header h1 { color: #fff; margin-bottom: 12px; }
.patch-header p  { color: rgba(255,255,255,0.55); max-width: 520px; }

/* ---- Main section ---- */
.patch-section {
  padding: var(--space-2xl) 0;
}

/* ---- Individual version entry ---- */
.patch-entry {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.patch-entry.visible {
  opacity: 1;
  transform: translateY(0);
}

.patch-entry:last-child {
  border-bottom: none;
}

/* Meta row: version number + type tag */
.patch-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Version number badge — monospace, accent colored */
.patch-version {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
}

/* Type tags */
.patch-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.patch-tag-feature { background: rgba(16,185,129,0.12); color: #059669; }
.patch-tag-fix     { background: rgba(239,68,68,0.10);  color: #dc2626; }
.patch-tag-launch  { background: rgba(99,102,241,0.12); color: #4f46e5; }

/* Dark mode tag colors */
html[data-theme="dark"] .patch-tag-feature { color: #34d399; }
html[data-theme="dark"] .patch-tag-fix     { color: #f87171; }
html[data-theme="dark"] .patch-tag-launch  { color: #a5b4fc; }

/* Patch entry title */
.patch-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

/* ---- Item list ---- */
.patch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.patch-item {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  padding-left: 22px;
  position: relative;
  max-width: 72ch;
}

/* Colored bullet dot */
.patch-item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.patch-feature::before { background: #10b981; }
.patch-fix::before     { background: #ef4444; }

/* Inline code snippets inside patch items */
.patch-item code {
  font-family: var(--font-mono);
  font-size: 0.83rem;
  background: var(--color-accent-light);
  color: var(--color-accent);
  padding: 1px 6px;
  border-radius: 4px;
}

html[data-theme="dark"] .patch-item code {
  background: rgba(77,127,255,0.12);
  color: #93b4ff;
}


/* ================================================================
   28. PATCH NOTES PAGE
   Timeline layout with version entries, type badges, and dev log
   sections. Mix of changelog, patch notes, and narrative dev log.
================================================================ */

/* ---- Page header ---- */
.patch-header {
  background: var(--color-hero-bg);
  padding: 80px var(--space-lg) 56px;
  position: relative;
  overflow: hidden;
}

/* Decorative background symbol */
.patch-header::after {
  content: '\2139';
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18rem;
  color: rgba(255,255,255,0.025);
  font-family: var(--font-display);
  line-height: 1;
  pointer-events: none;
}

.patch-header h1 {
  color: #fff;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.patch-header p {
  color: rgba(255,255,255,0.55);
  max-width: 560px;
  position: relative;
  z-index: 1;
}

.patch-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  display: block;
  position: relative;
  z-index: 1;
}

/* Current version badge in the header */
.patch-current-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-md);
  padding: 8px 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  position: relative;
  z-index: 1;
}

.patch-current-badge strong {
  color: #fff;
  font-weight: 700;
}

/* ---- Timeline wrapper ---- */
.patch-timeline {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
}

/* ---- Individual version entry ---- */
.patch-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}

.patch-entry:last-child {
  border-bottom: none;
}

/* ---- Left column: version number + type badge ---- */
.patch-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  position: sticky;         /* Sticks while scrolling through a long entry */
  top: 24px;
}

/* Version number — large and prominent */
.patch-version {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

/* Type badge pill */
.patch-type {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.patch-type-feature { background: rgba(26,86,219,0.12); color: var(--color-accent); }
.patch-type-fix     { background: rgba(239,68,68,0.12);  color: #ef4444; }
.patch-type-launch  { background: rgba(16,185,129,0.12); color: #10b981; }

/* ---- Right column: entry body ---- */
.patch-body {}

.patch-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-text);
  margin-bottom: 10px;
  font-weight: 700;
}

/* Summary line below the title */
.patch-summary {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 60ch;
  line-height: 1.6;
}

/* ---- Section within an entry (e.g. Games, CSS, etc.) ---- */
.patch-section {
  margin-bottom: var(--space-lg);
}

.patch-section-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* Bullet list of changes */
.patch-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.patch-list li {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  padding-left: 20px;
  position: relative;
}

/* Custom bullet dot */
.patch-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.6;
}

/* Inline code snippets within list items */
.patch-list code,
.patch-devlog code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--color-accent-light);
  color: var(--color-accent);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ---- Dev log block — narrative/story tone ---- */
.patch-devlog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}

.patch-devlog p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 65ch;
  margin-bottom: var(--space-sm);
}

.patch-devlog p:last-child {
  margin-bottom: 0;
}

/* Dark mode adjustments */
html[data-theme="dark"] .patch-devlog {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  border-left-color: var(--color-accent);
}

html[data-theme="dark"] .patch-list code,
html[data-theme="dark"] .patch-devlog code {
  background: rgba(77,127,255,0.15);
  color: #93b4ff;
}

/* Responsive stacking */
@media (max-width: 700px) {
  .patch-entry {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .patch-meta {
    flex-direction: row;
    align-items: center;
    position: static;
  }
}