/* NixonFamily - Premium Dark Theme */
/* Google Fonts loaded via <link> in HTML for performance */
:root {
  --background: #0a0e1a;
  --bg-primary: #0a0e1a;
  --bg-secondary: #0f1419;
  --bg-tertiary: #1a1f2e;
  --surface: #252b3d;
  --surface-hover: #2a3142;
  --text-primary: #ffffff;
  --text-secondary: #b8c5d1;
  --text-muted: #8892a6;
  --accent-primary: #ff6b35;
  --accent-secondary: #ff8f65;
  /* New header accent colors */
  --accent-yellow: #facc15; /* amber-400 */
  --accent-green: #22c55e;  /* emerald-500 */
  --accent-glow: rgba(255, 107, 53, 0.3);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.12);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  /* Purple accent tokens */
  --accent-purple-1: #a45eff;
  --accent-purple-2: #6c42f5;
  --accent-purple-3: #b07aff;
  color-scheme: dark;
  /* Background ambiance glows (used in body::before) */
  --bg-glow-1: rgba(255, 107, 53, 0.10);  /* orange */
  --bg-glow-2: rgba(138, 92, 255, 0.08);  /* purple */
  --bg-glow-3: rgba(72, 199, 255, 0.06);  /* cyan */
  /* Header breathing glows (used in .header::after) */
  --header-glow-1: rgba(164, 94, 255, 0.10);
  --header-glow-2: rgba(72, 199, 255, 0.08);
  --header-glow-3: rgba(255, 255, 255, 0.05);
}

/* Twilight pill: purple-focused palette */
.featured-modpacks-pill.pill-twilight {
  --fmp-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.58), rgba(88, 28, 135, 0.26), rgba(56, 189, 248, 0.12));
  --fmp-border: rgba(148, 163, 255, 0.55);
  --fmp-radius: 22px;
  --fmp-shadow: 0 18px 56px rgba(0, 0, 0, 0.55), 0 0 34px rgba(168, 85, 247, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --fmp-icon-shadow: rgba(168, 85, 247, 0.75);
  --fmp-title-gradient: linear-gradient(90deg, #c084fc, #6366f1, #38bdf8);
  --fmp-glow-bg: radial-gradient(120% 140% at 20% 20%, rgba(168, 85, 247, 0.34), rgba(99, 102, 241, 0.20) 45%, rgba(56, 189, 248, 0.14) 75%, rgba(0, 0, 0, 0) 100%);
  padding: 14px 26px;
  gap: 12px;
  border-color: transparent;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, filter 220ms ease;
}

.featured-modpacks-pill.pill-in-control {
  --fmp-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.62), rgba(6, 95, 70, 0.22), rgba(250, 204, 21, 0.10));
  --fmp-border: rgba(52, 211, 153, 0.55);
  --fmp-radius: 22px;
  --fmp-shadow: 0 18px 56px rgba(0, 0, 0, 0.55), 0 0 34px rgba(34, 197, 94, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --fmp-icon-shadow: rgba(34, 197, 94, 0.70);
  --fmp-title-gradient: linear-gradient(90deg, #34d399, #facc15, #22d3ee);
  --fmp-glow-bg: radial-gradient(120% 140% at 20% 20%, rgba(34, 197, 94, 0.30), rgba(250, 204, 21, 0.18) 45%, rgba(34, 211, 238, 0.14) 75%, rgba(0, 0, 0, 0) 100%);
  padding: 14px 26px;
  gap: 12px;
  border-color: transparent;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, filter 220ms ease;
}

.featured-modpacks-pill.pill-twilight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--fmp-radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.55), rgba(168, 85, 247, 0.75), rgba(255, 255, 255, 0.14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}

.featured-modpacks-pill.pill-in-control::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--fmp-radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.60), rgba(250, 204, 21, 0.70), rgba(34, 211, 238, 0.45), rgba(255, 255, 255, 0.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.72;
  pointer-events: none;
  z-index: 1;
}

.featured-modpacks-pill.pill-twilight::after {
  content: "";
  position: absolute;
  inset: -60% -70%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 58%);
  transform: translateX(-55%);
  opacity: 0;
  transition: transform 700ms ease, opacity 220ms ease;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}

.featured-modpacks-pill.pill-in-control::after {
  content: "";
  position: absolute;
  inset: -60% -70%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0) 58%);
  transform: translateX(-55%);
  opacity: 0;
  transition: transform 700ms ease, opacity 220ms ease;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}

.featured-modpacks-pill.pill-twilight:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.featured-modpacks-pill.pill-in-control:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.featured-modpacks-pill.pill-twilight:hover::after {
  transform: translateX(55%);
  opacity: 1;
}

.featured-modpacks-pill.pill-in-control:hover::after {
  transform: translateX(55%);
  opacity: 1;
}

#twilight-awakening .featured-modpacks-pill.pill-twilight .featured-modpacks-pill-glow {
  z-index: 0;
}

#twilight-in-control .featured-modpacks-pill.pill-in-control .featured-modpacks-pill-glow {
  z-index: 0;
}

#twilight-awakening .featured-modpacks-pill.pill-twilight .featured-modpacks-pill-icon,
#twilight-awakening .featured-modpacks-pill.pill-twilight .featured-modpacks-title {
  position: relative;
  z-index: 2;
}

#twilight-in-control .featured-modpacks-pill.pill-in-control .featured-modpacks-pill-icon,
#twilight-in-control .featured-modpacks-pill.pill-in-control .featured-modpacks-title {
  position: relative;
  z-index: 2;
}

#twilight-in-control .featured-modpacks-pill.pill-in-control .featured-modpacks-pill-icon {
  width: 34px;
  height: 34px;
  filter: none;
}

#twilight-awakening .featured-modpacks-pill.pill-twilight .featured-modpacks-pill-icon .icon {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.55));
}

#twilight-in-control .featured-modpacks-pill.pill-in-control .featured-modpacks-pill-icon .icon {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.45));
}

#twilight-awakening .featured-modpacks-pill.pill-twilight .featured-modpacks-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  #twilight-awakening .featured-modpacks-pill.pill-twilight {
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: var(--spacing-xs);
    --fmp-radius: 18px;
  }

  #twilight-awakening .featured-modpacks-pill.pill-twilight .featured-modpacks-pill-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  #twilight-in-control .featured-modpacks-pill.pill-in-control {
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: var(--spacing-xs);
    --fmp-radius: 18px;
  }

  #twilight-in-control .featured-modpacks-pill.pill-in-control .featured-modpacks-pill-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
}

/* Kaioken pill variant: dark red / bright red */
.featured-modpacks-pill.pill-kaioken {
  --fmp-bg: linear-gradient(135deg, rgba(127, 29, 29, 0.18), rgba(239, 68, 68, 0.14));
  --fmp-border: rgba(239, 68, 68, 0.50);
  --fmp-shadow: 0 10px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --fmp-icon-shadow: rgba(239, 68, 68, 0.65);
  --fmp-title-gradient: linear-gradient(90deg, #7f1d1d, #ef4444);
  --fmp-glow-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.26), rgba(127, 29, 29, 0.18));
}

/* Memorial pill variant: white / silver */
.featured-modpacks-pill.pill-memorial {
  --fmp-bg: linear-gradient(135deg, rgba(229, 231, 235, 0.12), rgba(156, 163, 175, 0.12));
  --fmp-border: rgba(229, 231, 235, 0.45);
  --fmp-shadow: 0 10px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --fmp-icon-shadow: rgba(229, 231, 235, 0.65);
  --fmp-title-gradient: linear-gradient(90deg, #f3f4f6, #9ca3af);
  --fmp-glow-bg: linear-gradient(135deg, rgba(229, 231, 235, 0.22), rgba(156, 163, 175, 0.20));
}

/* Silver button styles */
.btn-secondary.silver {
  background: linear-gradient(135deg, rgba(229, 231, 235, 0.12), rgba(156, 163, 175, 0.12));
  border-color: rgba(229, 231, 235, 0.45);
  color: var(--text-primary);
}
.btn-secondary.silver:hover {
  background: linear-gradient(135deg, rgba(229, 231, 235, 0.18), rgba(156, 163, 175, 0.18));
  border-color: rgba(229, 231, 235, 0.55);
}
.btn-secondary.silver:active {
  background: linear-gradient(135deg, rgba(229, 231, 235, 0.22), rgba(156, 163, 175, 0.22));
  border-color: rgba(229, 231, 235, 0.65);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

html.nocopy,
html.nocopy body,
html.nocopy body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html.nocopy input,
html.nocopy textarea,
html.nocopy select,
html.nocopy [contenteditable="true"],
html.nocopy .allow-copy,
html.nocopy .allow-copy * {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Hide scrollbars globally but keep scrolling */
html, body {
  -ms-overflow-style: none; /* IE and legacy Edge */
  scrollbar-width: none;    /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, Opera */
}

/* Optional utility: hide scrollbar on specific scrollable containers */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Background Effects */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, var(--bg-glow-1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, var(--bg-glow-2) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, var(--bg-glow-3) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* God-Centric Seasons Design */
.seasons-section {
  padding: var(--spacing-3xl) 0;
}

.seasons-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1.125rem;
  margin-bottom: var(--spacing-3xl);
  opacity: 0.8;
}

.seasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-2xl);
  max-width: 1200px;
  margin: 0 auto;
}

/* Animated Particles */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  /* Compositing/scroll artifact guard */
  transform: translateZ(0);
  contain: paint;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  /* Start hidden and off-screen so delayed animations don't show dots at 0,0 */
  opacity: 0;
  transform: translateY(100vh) translateX(0) rotate(0deg);
  will-change: transform, opacity;
  animation: float-particle 20s infinite linear;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.particle:nth-child(2n) {
  background: rgba(255, 255, 255, 0.5);
  animation-duration: 25s;
  animation-delay: -5s;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.particle:nth-child(3n) {
  background: rgba(255, 255, 255, 0.4);
  animation-duration: 30s;
  animation-delay: -10s;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

@keyframes float-particle {
  0% {
    transform: translateY(100vh) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100px) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

/* Hero Title Animation */
.hero-title {
  opacity: 0;
  transform: translateY(30px);
  animation: slideInFade 0.6s ease-out forwards;
}

@keyframes slideInFade {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: translateY(10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Gradient Text Effects: leave unopinionated here to avoid conflicts.
   Specific components (hero titles, season titles) define their own
   gradients and clipping rules. */
/* .gradient-text {} */

/* Pulsing Glow Button */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
  50% { box-shadow: 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow); }
}

.btn-primary.glowing {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Server Status Indicators */
.server-status {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  z-index: 5;
  white-space: nowrap;
  --status-dot-color: #48c7ff;
  --status-dot-pulse: pulse-dot 2s ease-in-out infinite;
  --status-orb-a: rgba(72, 199, 255, 0.95);
  --status-orb-b: rgba(164, 94, 255, 0.65);
  --status-orb-c: rgba(34, 197, 94, 0.55);
  --status-orb-spin: status-orb-spin 2.6s linear infinite;
  --status-orb-pulse: status-orb-pulse 1.8s ease-in-out infinite;
}

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

.status-wip {
  background: #48c7ff;
  box-shadow: 0 0 10px #48c7ff;
}

.status-unstable {
  background: #ff4757;
  box-shadow: 0 0 10px #ff4757;
}

.status-open {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

.status-offline {
  background: #ff4757;
  box-shadow: 0 0 10px #ff4757;
}

.featured-modpacks-section .card-image-wrapper {
  overflow: visible;
}

.featured-modpacks-section .status-dot {
  width: 10px;
  height: 10px;
  position: relative;
  background: var(--status-dot-color, #48c7ff);
  box-shadow: 0 0 10px var(--status-dot-color, #48c7ff);
  animation: var(--status-orb-pulse, status-orb-pulse 1.8s ease-in-out infinite);
}

.featured-modpacks-section .status-dot.status-offline {
  background: #ff4757;
  box-shadow: 0 0 10px #ff4757;
  animation: pulse-dot 2s ease-in-out infinite;
}

.featured-modpacks-section .status-dot.status-offline::before,
.featured-modpacks-section .status-dot.status-offline::after {
  content: none;
}

.featured-modpacks-section .status-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--status-dot-color, #48c7ff), #ffffff 10%) , color-mix(in srgb, var(--status-dot-color, #48c7ff), transparent 85%) 70%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-dot-color, #48c7ff), transparent 82%) inset;
}

.featured-modpacks-section .status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--status-dot-color, #48c7ff), transparent 25%), var(--status-orb-b, rgba(164, 94, 255, 0.65)), var(--status-orb-c, rgba(34, 197, 94, 0.55)), color-mix(in srgb, var(--status-dot-color, #48c7ff), transparent 25%));
  filter: blur(0.2px);
  opacity: 0.55;
  animation: var(--status-orb-spin, status-orb-spin 2.6s linear infinite);
  z-index: -1;
}

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

@keyframes status-orb-pulse {
  0%, 100% { transform: translateZ(0) scale(1); filter: brightness(1); }
  50% { transform: translateZ(0) scale(1.08); filter: brightness(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .featured-modpacks-section .status-dot,
  .featured-modpacks-section .status-dot::after {
    animation: none !important;
  }
}

/* Scroll Animations */
.fade-in {
  opacity: 0 !important;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  visibility: hidden;
}

.fade-in.visible {
  opacity: 1 !important;
  transform: translateY(0);
  visibility: visible;
}

.stagger-1 { transition-delay: 0.06s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.18s; }
.stagger-4 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  /* Respect reduced motion: no animations, but still gate visibility until scroll */
  .fade-in { transition: none !important; transform: none !important; }
  .fade-in:not(.visible) { opacity: 0 !important; visibility: hidden; }
  .fade-in.visible { opacity: 1 !important; visibility: visible; }
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  max-width: 500px;
  width: 90%;
  position: relative;
  animation: slideUp 0.3s ease;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--accent-primary);
}

.progress-bar {
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0;
}

.progress-fill {
  height: 8px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 10px;
  transition: width 2s ease;
  width: 0;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 26, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background 200ms ease, backdrop-filter 200ms ease, -webkit-backdrop-filter 200ms ease, box-shadow 220ms ease;
}

/* Subtle gradient border around header */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04), rgba(255,255,255,0.10));
  padding: 1px; /* hairline */
  border-radius: 0;
  /* show only as border using mask */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.35;
}

/* Breathing nebula glow behind header */
.header::after {
  content: "";
  position: absolute;
  inset: -8px -12px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 15% 50%, var(--header-glow-1), rgba(0,0,0,0) 60%),
    radial-gradient(60% 80% at 85% 50%, var(--header-glow-2), rgba(0,0,0,0) 60%),
    radial-gradient(80% 120% at 50% 100%, var(--header-glow-3), rgba(0,0,0,0) 70%);
  filter: blur(14px);
  opacity: 0.18;
  animation: none;
}

@keyframes nebula-breathe {
  0%, 100% { opacity: 0.28; filter: blur(14px); }
  50% { opacity: 0.42; filter: blur(20px); }
}

/* Accent bar under nav (shown when scrolled) */
.header .accent-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity 200ms ease, transform 400ms ease;
  /* Updated multi-color sweep: orange -> yellow -> green -> orange */
  background: linear-gradient(
    90deg,
    rgba(255,107,53,0) 0%,
    var(--accent-primary) 20%,
    var(--accent-yellow) 50%,
    var(--accent-green) 80%,
    rgba(255,107,53,0) 100%
  );
  background-size: 200% 100%;
  animation: accent-pan 8s linear infinite;
  display: none;
}
.header.scrolled .accent-bar {
  opacity: 1;
  transform: scaleX(1);
}
@keyframes accent-pan {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.header-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  box-sizing: border-box;
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 200ms ease;
  flex-wrap: nowrap;
  gap: var(--spacing-md);
}

/* Shrink + stronger blur on scroll */
.header.scrolled {
  background: rgba(10, 14, 26, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header.scrolled .header-content {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.logo .accent {
  color: var(--accent-primary);
}

/* Stylish interactive brand logo */
.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  transition: transform 200ms ease;
  text-shadow: none;
}

.logo,
.logo:hover,
.logo:focus,
.logo:active,
.logo:visited {
  text-decoration: none;
}

/* Split-brand gradients */
.logo .brand-nixon,
.logo .brand-family {
  display: inline-block;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
}

/* Blue animated gradient for "Nixon" */
.logo .brand-nixon {
  background-image: linear-gradient(90deg, #48c7ff, #6366f1, #38bdf8);
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: none;
  filter: none;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Orange animated gradient for "Family" */
.logo .brand-family {
  background-image: none;
  background-size: initial;
  animation: none;
  filter: none;
  margin-left: 2px; /* subtle spacing */
  color: var(--accent-primary);
}

/* Hover intensifies both halves */
.logo:hover .brand-nixon,
.logo:hover .brand-family {
  filter: none;
}

.logo:hover .brand-nixon {
  background-position: 100% 50%;
}

.logo:hover {
  transform: translateY(-1px);
  filter: none;
  text-shadow: none;
}

.logo:focus-visible {
  outline: none;
  text-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
}

.logo::after {
  content: "";
  position: absolute;
  left: 38px;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  display: block;
  background: linear-gradient(90deg,
    rgba(255,107,53,0) 0%,
    var(--accent-primary) 20%,
    var(--accent-purple-1) 50%,
    #48c7ff 72%,
    rgba(255,107,53,0) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  transform: scaleX(0.72);
  transform-origin: center;
  opacity: 0.45;
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background-position 600ms ease;
  pointer-events: none;
}

.logo:hover::after,
.logo:focus-visible::after {
  opacity: 0.95;
  transform: scaleX(1);
  background-position: 100% 50%;
}

/* Make "Family" clearly visible in solid Nixorite orange */
.logo .accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important; /* override parent's transparent fill */
  color: var(--accent-primary) !important;
  filter: none;
}

/* Inline logo image before brand text */
.logo-img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 6px 14px rgba(0,0,0,0.35);
  vertical-align: middle;
}
.logo:hover .logo-img,
.logo:focus-visible .logo-img {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 8px 18px rgba(0,0,0,0.45);
  filter: brightness(1.05);
}

@keyframes logo-pan {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .logo::after {
    animation: none !important;
    transition: none !important;
  }
}

.nav {
  --underline-gap: 6px; /* controls space between text and gradient underline */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 6px;
}

/* Remove spinning border - it was causing issues */

/* Nav link styles */
.nav-link {
  padding: 10px 14px; /* a bit taller for touch without pills */
  padding-bottom: 14px; /* tighter gap for underline */
  border-radius: 8px; /* small radius for focus ring clipping */
  color: var(--text-secondary);
  text-decoration: none !important; /* prevent UA underline */
  font-weight: 500;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  transition: color 200ms ease;
}

/* Never show default underline on any interactive state */
.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.nav-link:visited,
.nav-link[aria-current="page"] { text-decoration: none !important; }
/* Also strip underline from any nested spans/icons inside links */
.nav-link * { text-decoration: none !important; }
/* Keep visited color consistent */
.nav-link:visited { color: var(--text-secondary); }

/* Nav icon and text styling */
.nav-icon {
  font-size: 16px;
  line-height: 1;
  transition: transform 180ms ease;
}

.nav-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  position: relative;           /* needed for underline anchor */
  display: inline-block;        /* so ::after sizes to text width */
}

/* Gradient underline (hover/active) – text width only */
.nav-link::after { content: none !important; }

.nav-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--underline-gap, 12px)); /* larger gap below text */
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--accent-primary) 0%,
    var(--accent-purple-1) 35%,
    #48c7ff 70%,
    var(--accent-green) 100%
  );
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background-position 600ms ease;
  opacity: 0.95;
}

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

.nav-link:hover .nav-icon {
  transform: translateY(-1px) scale(1.06);
}

.nav-link:hover .nav-text::after { transform: scaleX(1); }
.nav-link.active .nav-text::after { transform: scaleX(1); }

/* Smooth click sweep across the underline (JS toggles .sweep class briefly) */
@keyframes underline-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.nav-link.sweep .nav-text::after { animation: underline-sweep 600ms ease; }

/* Remove white click effect */
.nav-link:active {
  background: transparent;
  transform: none;
}

/* Keyboard focus */
.nav-link:focus-visible {
  outline: none;
  color: var(--text-primary);
  background: transparent; /* no pills */
}

/* Ensure nav focus doesn't look like a pill (override global focus-visible block) */
.header .nav .nav-link:focus-visible {
  box-shadow: none !important;
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  background: transparent !important;
}

/* Active state */
.nav-link.active {
  color: var(--text-primary);
  font-weight: 700;
  background: transparent !important; /* remove pill */
}

/* Kill legacy nav artifacts (ensure no extra width or flash) */
.nav .nav-indicator,
.nav .nav-ripple { display: none !important; }

/* Remove default tap/click highlight */
.nav-link { -webkit-tap-highlight-color: transparent; }

/* Badge Chips ------------------------------------------------------------ */
.nav-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ecebff;
  background: linear-gradient(135deg, rgba(164,94,255,0.28), rgba(72,199,255,0.28));
  border: 1px solid rgba(255,255,255,0.12);
  line-height: 1;
}
.nav-link:hover .nav-chip { filter: brightness(1.08); }
.nav-chip.chip-new {
  background: linear-gradient(135deg, rgba(255,107,53,0.40), rgba(255,143,101,0.32));
  color: #fff7f3;
}
.nav-chip.chip-beta {
  background: linear-gradient(135deg, rgba(99,102,241,0.38), rgba(72,199,255,0.28));
  color: #eef2ff;
}
.nav-chip.chip-wip {
  background: linear-gradient(135deg, rgba(34,197,94,0.34), rgba(132,204,22,0.26));
  color: #ecfdf5;
}

/* Disabled nav items should never show the gradient underline */
.nav-link.disabled .nav-text::after,
.nav-link[aria-disabled="true"] .nav-text::after {
  content: none !important;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav::before {
    transition: none !important;
  }
  .nav-link {
    transition: color 0.01ms linear !important;
  }
  .nav-link:hover {
    transform: none !important;
  }
}

/* Ripple effect */
.nav-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
  transform: scale(0);
  animation: rippleAnimation 600ms ease-out;
  pointer-events: none;
}

@keyframes rippleAnimation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  width: 100%;
  box-sizing: border-box;
}

.hero {
  text-align: center;
  padding: var(--spacing-3xl) 0;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-md);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(6px, 2.2vw, 10px);
}

/* Buttons */
.btn-group {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-3xl);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  box-sizing: border-box; /* ensure borders don't change size */
  min-height: 44px;       /* consistent touch target */
  justify-content: center; /* center inner content (icons + text) */
  text-align: center;      /* center text nodes if any */
  background: transparent;
  transition: color 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  color: white;
  box-shadow: var(--shadow-md), 0 0 0 0 var(--accent-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow);
}

/* Green variant of primary button: same sizing/glow/hover, different gradient */
.btn-primary.btn-green {
  background: linear-gradient(135deg, var(--accent-green) 0%, #34d399 100%);
  /* Override glow color used by hover and pulse animation */
  --accent-glow: rgba(34, 197, 94, 0.35);
  color: #ffffff;
}

/* Yellow (amber) variant for the Load Video button */
.btn-primary.btn-yellow {
  background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%); /* amber-300 -> amber-500 */
  --accent-glow: rgba(250, 204, 21, 0.35); /* subtle amber glow */
  color: #111111; /* better contrast on yellow */
}

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

.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-2xl) 0;
  perspective: 800px;
}

.card {
  padding: var(--spacing-xl);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: 200% 200%;
  background-position: 0% 0%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out, background-position 0.4s ease-in-out;
  z-index: -1;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: transparent;
}

.card:hover::before {
  opacity: 1;
  background-position: 100% 100%;
}

/* Server Card Specific Effects - single, consistent glow using --ringGlow */
.card[data-server]:hover {
  /* Remove all shadows on hover */
  box-shadow: none;
}

@keyframes animated-border {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ring-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

/* Per-server glow animations (no rotation) */
@keyframes glow-nexus {
  0%, 100% {
    box-shadow:
      0 0 0 rgba(0, 198, 255, 0),
      0 0 18px rgba(0, 198, 255, 0.28),
      0 0 36px rgba(0, 114, 255, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 rgba(0, 198, 255, 0),
      0 0 24px rgba(0, 198, 255, 0.45),
      0 0 46px rgba(0, 114, 255, 0.35);
  }
}

@keyframes glow-twilight {
  0%, 100% {
    box-shadow:
      0 0 0 rgba(164, 94, 255, 0),
      0 0 18px rgba(164, 94, 255, 0.28),
      0 0 36px rgba(108, 66, 245, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 rgba(164, 94, 255, 0),
      0 0 24px rgba(164, 94, 255, 0.45),
      0 0 46px rgba(108, 66, 245, 0.35);
  }
}

.card-image-wrapper {
  width: 128px;
  height: 128px;
  margin: 0 auto var(--spacing-lg);
  border-radius: 14px; /* cube style */
  position: relative;
  background-size: 200% 200%;
  /* no sweeping animation; keep static ring */
  animation: none;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate;
  will-change: background-position, transform, filter;
}

.card[data-server="nexus"] {
  --ring1: #f8fcff;
  --ring2: #00c6ff;
  --ringGlow: rgba(0, 191, 255, 0.45);
}

.card[data-server="twilight"] {
  --ring1: #fdfcff;
  --ring2: #6c42f5;
  --ringGlow: rgba(164, 94, 255, 0.45);
}


/* Enhanced animation on hover */
.card[data-server]:hover .card-image-wrapper { 
  animation: border-rotate 2s ease-in-out infinite;
}

.card-image-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,107,53,0), rgba(255,143,101,0.95), rgba(255,107,53,0.95), rgba(255,107,53,0));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: opacity 220ms ease, transform 320ms ease;
  pointer-events: none;
}

.card-image {
  width: 122px;
  height: 122px;
  display: block;
  border-radius: 10px; /* cube style */
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Hover-only diagonal sheen over server image (no continuous motion) */
.card-image::before {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 55%);
  transform: translateX(-150%);
  pointer-events: none;
  filter: blur(0.5px);
}

.card[data-server]:hover .card-image::before {
  animation: sheen 900ms ease;
}

@keyframes sheen {
  from { transform: translateX(-150%); opacity: 0.6; }
  to { transform: translateX(150%); opacity: 0; }
}

@keyframes border-rotate {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.card-description {
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
}

/* Server card colors: white titles, light-grey descriptions */
.card[data-server] .card-title {
  color: var(--text-primary);
}
.card[data-server] .card-description {
  color: var(--text-secondary);
}

/* Video Hero */
.video-hero {
  position: relative;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}

/* Remove gap only when video hero directly follows header (Home page) */
.header + .video-hero {
  margin-top: 0;
}

/* Download page: hero should not add extra bottom gap (match Home) */
body.page-download .video-hero {
  margin-bottom: 0;
}

/* Standard gap between hero and main content across all pages */
.video-hero + .container { 
  margin-top: clamp(16px, 6vh, 72px);
}

/* For pages without a hero, ensure space after header */
.header + .container {
  margin-top: clamp(16px, 6vh, 72px);
}

/* Subtle vignette and top/bottom gradient for better text contrast */
.video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Layered gradients: top fade, bottom fade, and radial vignette */
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.30), rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.12) 65%, rgba(0,0,0,0.38)),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%);
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep base opacity same as visible to avoid darkening when video becomes playable */
  opacity: 0.18;
  transition: opacity 0.8s ease;
}

.bg-video.visible {
  opacity: 0.18;
}

/* Soft fade between hero and main content */
.fade-spacer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--accent-primary) 25%, 
    var(--accent-purple-1) 50%, 
    #48c7ff 75%, 
    transparent 100%);
  opacity: 0.6;
  z-index: 3;
  transform: translateY(6px);
  transition: transform 300ms ease, opacity 300ms ease;
}
.fade-spacer.visible {
  transform: translateY(0);
}
/* When the hero section itself becomes visible (via fade-in), reveal the spacer */
.video-hero.fade-in.visible .fade-spacer {
  transform: translateY(0);
}

.video-overlay {
  position: relative;
  z-index: 3;
  text-align: center;
  /* Keep transparency but prevent dynamic darkening from background by disabling backdrop blur */
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
  padding: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  border: none;
  /* Subtle inset ring avoids bright border pop while keeping definition */
  transition: backdrop-filter 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

/* Home hero spotlight (cursor-follow glow behind the overlay) */
body.page-home .video-hero {
  --spot-x: 50%;
  --spot-y: 35%;
  --spot-alpha: 0;
}

body.page-home .video-hero::before {
  content: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--spot-alpha, 0);
  transition: opacity 220ms ease;
  background:
    radial-gradient(460px 340px at var(--spot-x, 50%) var(--spot-y, 35%),
      rgba(72, 199, 255, 0.14) 0%,
      rgba(164, 94, 255, 0.12) 36%,
      rgba(255, 107, 53, 0.08) 62%,
      rgba(0, 0, 0, 0) 76%
    );
  filter: blur(22px);
  mix-blend-mode: screen;
}

body.page-home .video-hero.spotlight-on::before {
  opacity: var(--spot-alpha, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .video-hero::before {
    transition: none !important;
  }
}

@media (hover: none) {
  body.page-home .video-hero {
    --spot-x: 50% !important;
    --spot-y: 35% !important;
    --spot-alpha: 0.55 !important;
  }
  body.page-home .video-hero::before {
    opacity: var(--spot-alpha, 0.55) !important;
  }
}

/* Ensure overlay title is visible over video */
.video-overlay .hero-title {
  opacity: 1;
}

.video-overlay .privacy-title-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.25) 0%, 
    rgba(164, 94, 255, 0.22) 50%, 
    rgba(72, 199, 255, 0.20) 100%);
  border: 2px solid rgba(255, 107, 53, 0.5);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  backdrop-filter: blur(12px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  margin-bottom: var(--spacing-lg);
}

.video-overlay .privacy-title-pill .hero-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

/* Gradient text specifically for the video hero title (default e.g., Home) */
.video-overlay .hero-title.gradient-text {
  /* Two layers: 1) moving white sheen, 2) blue↔purple base gradient */
  background-image: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%),
    linear-gradient(90deg, #38bdf8, #6366f1, #a855f7, #38bdf8);
  background-size: 200% 100%, 400% 100%;
  background-position: -50% 0, 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important; /* override global .gradient-text */
  -webkit-text-fill-color: transparent; /* safari support */
  display: inline-block;
  animation: title-sheen 4.5s ease-in-out infinite, title-gradient-pan 12s ease-in-out infinite;
}

body.page-home .video-overlay .hero-title.gradient-text {
  --title-spot-x: 50%;
  --title-spot-y: 50%;
  --title-spot-alpha: 0;
  position: relative;
  z-index: 0;
}

body.page-home .video-overlay .hero-title.gradient-text::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  border-radius: 999px;
  opacity: 0.6;
}

/* Story page override: Green + Yellow gradient for The Chronicle */
.page-story .video-overlay .hero-title.gradient-text {
  background: linear-gradient(90deg, var(--accent-yellow), var(--accent-green), var(--accent-yellow));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: title-gradient-pan 12s ease-in-out infinite;
}

/* Download page override: Red/Pink gradient for "Nixorite Launcher" */
.page-download .video-overlay .hero-title.gradient-text {
  background: linear-gradient(90deg, #f43f5e, #f97316, #fb7185, #f43f5e);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: title-gradient-pan 12s ease-in-out infinite;
}

/* Privacy page override: Red + Yellow gradient for "Privacy Policy" */
.page-privacy .video-overlay .hero-title.gradient-text {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #facc15, #ef4444);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: title-gradient-pan 12s ease-in-out infinite;
}

/* Terms page override: Rose + Blue gradient for "Terms of Service" */
.page-terms .video-overlay .hero-title.gradient-text {
  background: linear-gradient(135deg, #ffffff, #e5e7eb, #9ca3af, #ffffff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: title-gradient-pan 12s ease-in-out infinite;
}

/* Season Overview: richer layout */
.season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

/* Animated gradient season titles (use same approach as hero title) */
.page-story .season-header .support-card-title.gradient-text {
  /* Two layers: 1) moving white sheen, 2) orange↔purple base gradient */
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
  background-size: 600% 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-color: transparent !important;
  display: inline-block !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: title-gradient-pan 2.6s linear infinite;
}

/* Pill background behind season titles */
.page-story .season-header .support-card-title.gradient-text::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  z-index: -1;
}

/* Per-season gradient overrides */
#season-1 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, #ff6b35, #f59e0b, #f97316, #ff8f65, #ff6b35); }
#season-2 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, #facc15, #22c55e, #22d3ee, #a78bfa, #facc15); }
#season-3 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, var(--accent-purple-1), var(--accent-purple-2), var(--accent-purple-3), #22d3ee, var(--accent-purple-1)); }
#season-4 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, #ef4444, #f97316, #f59e0b, #fb7185, #ef4444); }
#season-5 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, #06b6d4, #3b82f6, #22d3ee, #34d399, #06b6d4); }
#season-6 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, #10b981, #14b8a6, #22c55e, #84cc16, #10b981); }
#season-7 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, var(--accent-purple-1), #8b5cf6, #22d3ee, #f472b6, var(--accent-purple-1)); }
#season-8 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, #22c55e, #84cc16, #06b6d4, #a3e635, #22c55e); }
#season-9 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, #f59e0b, #f43f5e, #ef4444, #f97316, #f59e0b); }
#season-10 .season-header .support-card-title.gradient-text { background-image: linear-gradient(90deg, #eab308, #22d3ee, #60a5fa, #a78bfa, #eab308); }

.season-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.pill.no-shadow { box-shadow: none; }
.pill.status-active { background: rgba(34,197,94,0.18); color: #9be7b3; border-color: rgba(34,197,94,0.35); }
.pill.status-legacy { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.pill.status-concluded { background: rgba(250,204,21,0.15); color: #fde68a; border-color: rgba(250,204,21,0.35); }
.pill.year { background: linear-gradient(135deg, var(--accent-yellow), var(--accent-green)); color: #0a0e1a; border: none; }

.season-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-lg);
}

.season-aside {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}
.season-meta { list-style: none; padding: 0; margin: 0 0 var(--spacing-md); }
.season-meta li { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); margin-bottom: 6px; }
.season-meta li::before { content: '•'; color: var(--accent-secondary); opacity: 0.7; }

.progress-section { display: grid; gap: 10px; }
.progress-section > div { display: grid; gap: 6px; }
.progress-section span { font-size: 0.8rem; color: var(--text-secondary); }
.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-yellow));
  box-shadow: 0 0 12px rgba(34,197,94,0.35);
  transition: width 600ms ease;
}

@media (max-width: 900px) {
  .season-layout { grid-template-columns: 1fr; }
}


/* Focus-visible styles for accessibility */
.nav-link:focus-visible,
.btn:focus-visible,
.pill-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2);
  border-radius: 8px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .video-overlay .hero-title.gradient-text { animation: none !important; }
  .bg-video { transition: none !important; }
}

/* Contributors */
.contributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-2xl) 0;
}

.contributor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contributor-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg);
}

/* Server card micro-interactions */
.card[data-server] {
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
}

.card[data-server]:hover {
  transform: translateY(-4px) scale(1.02);
}

/* No wrapper drop-shadow or animation on hover */
.card[data-server]:hover .card-image-wrapper { animation: none; filter: none; }

.contributor-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--spacing-md);
  border: 3px solid var(--border);
  transition: all 0.3s ease;
}

.contributor-card:hover .contributor-avatar {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px var(--accent-glow);
}

.contributor-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.contributor-role {
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
}

.contributor-description {
  color: var(--text-secondary);
  line-height: 1.6;
}


/* Footer */
.footer {
  position: relative;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
  border-top: 1px solid transparent;
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
  margin-top: var(--spacing-3xl);
  overflow: hidden;
  isolation: isolate;
}

/* Animated RGB border */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  /* Softer, brighter pastel sweep for smoother transitions */
  background: linear-gradient(90deg,
    #46e3b7 0%,   /* teal */
    #5aa8ff 16.66%, /* sky blue */
    #a48bff 33.33%, /* soft purple */
    #ff7ad9 50%,  /* pink */
    #ffb86b 66.66%, /* peach */
    #ffe56b 83.33%, /* soft yellow */
    #46e3b7 100%   /* teal loop */
  );
  background-size: 300% 100%;
  animation: rgb-cycle 24s ease-in-out infinite;
  opacity: 0.95;
  filter: blur(0.4px);
  /* Neutral glow instead of red cast */
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

@keyframes rgb-cycle {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Nebula breathing glow behind footer */
.footer::after {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 20% 30%, var(--bg-glow-1), rgba(0,0,0,0) 70%),
    radial-gradient(50% 70% at 80% 70%, var(--bg-glow-2), rgba(0,0,0,0) 70%),
    radial-gradient(60% 80% at 50% 100%, var(--bg-glow-3), rgba(0,0,0,0) 80%);
  filter: blur(20px);
  opacity: 0.4;
  animation: footer-nebula-breathe 8s ease-in-out infinite;
}

@keyframes footer-nebula-breathe {
  0%, 100% { 
    opacity: 0.3; 
    filter: blur(18px);
    transform: scale(0.95);
  }
  50% { 
    opacity: 0.5; 
    filter: blur(24px);
    transform: scale(1.05);
  }
}

/* Floating particles in footer */
.footer-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.footer-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  opacity: 0.6;
  animation: footer-float-particle 15s infinite linear;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.footer-particle:nth-child(2n) {
  background: rgba(255, 107, 53, 0.5);
  animation-duration: 18s;
  box-shadow: 0 0 6px rgba(255, 107, 53, 0.4);
}

.footer-particle:nth-child(3n) {
  background: rgba(164, 94, 255, 0.4);
  animation-duration: 20s;
  box-shadow: 0 0 8px rgba(164, 94, 255, 0.3);
}

@keyframes footer-float-particle {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-120px) translateX(20px) rotate(180deg);
    opacity: 0;
  }
}

.footer-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Enhanced social links section */
.social-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

/* Animated gradient border for social links */
.social-link::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    var(--accent-primary) 0%,
    var(--accent-purple-1) 33%,
    #48c7ff 66%,
    var(--accent-green) 100%
  );
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: -1;
  animation: social-gradient-rotate 6s linear infinite;
}

/* Glowing backdrop */
.social-link::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, var(--accent-primary) 0%, rgba(0,0,0,0) 70%);
  filter: blur(12px);
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: -2;
}

.social-link:hover::before {
  opacity: 1;
}

.social-link:hover::after {
  opacity: 0.6;
}

.social-link:hover {
  transform: translateY(-4px) scale(1.05);
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 107, 53, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.05);
}

/* Individual social platform colors on hover */
.social-link[href*="discord"]:hover::after {
  background: radial-gradient(circle, #5865f2 0%, rgba(0,0,0,0) 70%);
}

.social-link[href*="instagram"]:hover::after {
  background: radial-gradient(circle, #e4405f 0%, rgba(0,0,0,0) 70%);
}

.social-link[href*="github"]:hover::after {
  background: radial-gradient(circle, #f0f6fc 0%, rgba(0,0,0,0) 70%);
}

@keyframes social-gradient-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.social-icon {
  width: 28px;
  height: 28px;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  filter: brightness(0.8) saturate(0.7);
}

.social-link:hover .social-icon {
  filter: brightness(1.05) saturate(0.9) drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
  transform: scale(1.1) rotate(5deg);
}

/* Enhanced footer text with gradient */
.footer-text {
  position: relative;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: var(--spacing-lg);
  transition: color 400ms ease;
}

.footer-text::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, 
    rgba(255,107,53,0) 0%,
    var(--accent-primary) 50%,
    rgba(255,107,53,0) 100%
  );
  opacity: 0.6;
}

/* Copyright and links section */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all 300ms ease;
  position: relative;
}

.footer-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 1px;
  background: var(--accent-primary);
  transition: transform 300ms ease;
}

.footer-link:hover {
  color: var(--text-primary);
  text-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
}

.footer-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer {
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
  }
  
  .social-links {
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  
  .social-link {
    width: 48px;
    height: 48px;
  }
  
  .social-icon {
    width: 24px;
    height: 24px;
  }
  
  .footer-links {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .footer-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .social-links {
    gap: var(--spacing-sm);
  }
  
  .social-link {
    width: 44px;
    height: 44px;
  }
  
  .social-icon {
    width: 22px;
    height: 22px;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .footer::before,
  .footer::after,
  .footer-particle,
  .social-link::before {
    animation: none !important;
  }
  
  .social-link,
  .social-icon,
  .footer-link {
    transition: none !important;
  }
  
  .social-link:hover {
    transform: none !important;
  }
}

/* Achievement Badges */
.achievements {
  margin: var(--spacing-3xl) 0;
}

.achievements-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

/* Smaller pill-like background behind the Iconic Quotes heading */
#quotes .achievements-title {
  position: relative;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 18px rgba(255, 132, 0, 0.08);
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.badge:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg);
}

.badge:hover::before {
  transform: scaleX(1);
}

.badge-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
  display: block;
  text-align: center;
}

.badge-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.badge-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Support Section */
.support-section {
  margin: var(--spacing-3xl) 0;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  border: 1px solid var(--border);
}

/* Seasons Timeline */
.seasons-timeline {
  margin: var(--spacing-3xl) 0;
}

.seasons-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.seasons-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.seasons-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* When Seasons trigger requests everything to load at once */
body.reveal-all .fade-in {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}
body.reveal-all .fade-in.visible {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}

.season-card.locked {
  opacity: 0.6;
}

.season-card.locked .god-badge {
  opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .season-header {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .season-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .season-number {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: auto;
  }
  
  .season-dot {
    margin-bottom: 0;
  }
  
  .god-badge {
    align-self: flex-end;
    min-width: 70px;
  }
  
  .season-title {
    font-size: 1.25rem;
  }
}

.support-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.support-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: all 0.3s ease;
}

.support-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.support-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.support-card-content {
  color: var(--text-secondary);
  line-height: 1.6;
}

.support-card-content ul {
  list-style: none;
  padding: 0;
}

.support-card-content li {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.support-card-content li:last-child {
  border-bottom: none;
}

.support-card-content a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.support-card-content a:hover {
  color: var(--accent-secondary);
}


/* Quotes Carousel */
.section-note {
  color: var(--text-secondary);
  opacity: 0.85;
  font-size: 0.9rem;
  margin: 2px 0 10px;
}
.quotes-note { text-align: center; }
/* Make the note hug the heading in the quotes section */
#quotes .achievements-title { margin-bottom: 4px; }
#quotes .quotes-note { margin-top: 2px; }
.quotes-carousel {
  position: relative;
  overflow: hidden;
  padding: 16px 0; /* vertical padding only; horizontal handled by slides */
}
/* Animated gradient border */
.quotes-carousel::before {
  content: "";
  position: absolute;
  inset: -8px; /* extend outward for a natural halo */
  border-radius: var(--radius-md);
  background: radial-gradient(ellipse at center,
    rgba(255, 132, 0, 0.28) 0%,
    rgba(255, 132, 0, 0.18) 35%,
    rgba(255, 132, 0, 0.08) 60%,
    rgba(255, 132, 0, 0.0) 85%
  );
  filter: blur(12px);
  opacity: 0.9;
  pointer-events: none;
}
.quotes-carousel .qc-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  transition: transform 400ms ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  min-height: 88px;
}
.quotes-carousel .quote-item {
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* center horizontally */
  text-align: center; /* ensure all text inside centers consistently */
  padding: 4px 20px; /* horizontal spacing moved here */
}
.quotes-carousel figure {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quotes-carousel blockquote {
  margin: 0 0 6px 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0.95;
  text-align: center;
}
.quotes-carousel figcaption {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
}
/* Arrow buttons removed per spec */

.quotes-carousel .qc-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.quotes-carousel .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}
.quotes-carousel .dot.active {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-color: transparent;
  transform: scale(1.15);
}

/* Accessibility: clear focus ring for dots */
.quotes-carousel .dot:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}


/* Responsive */
@media (max-width: 768px) {
  .header-content {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .nav {
    gap: var(--spacing-xs);
  }
  
  .nav-link {
    padding: 10px 12px;
    font-size: 1rem;
  }
  
  .hero {
    padding: var(--spacing-2xl) 0;
  }
  
  .btn-group {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
  }
  
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .contributors-grid {
    grid-template-columns: 1fr;
  }
  
  .video-overlay {
    padding: var(--spacing-lg);
  }
  
  .social-links {
    gap: var(--spacing-sm);
  }
  
  .badges-grid {
    grid-template-columns: 1fr;
  }
  
  .support-grid {
    grid-template-columns: 1fr;
  }
  
  .achievements-title {
    font-size: 1.5rem;
  }
  
  .support-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  /* Support: tighter tabs on mobile */
  .support-tabs {
    gap: var(--spacing-xs);
  }
  .tab-btn {
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Timeline responsive */
  .seasons-title {
    font-size: 2rem;
  }

  .timeline-container::before {
    left: 30px;
    transform: none;
  }

  .timeline-item {
    flex-direction: row !important;
    margin-bottom: var(--spacing-xl);
  }

  .timeline-item:nth-child(even) {
    flex-direction: row !important;
  }

  .timeline-marker {
    min-width: 60px;
    margin-right: var(--spacing-md);
  }

  .timeline-content {
    margin: 0;
    max-width: none;
  }

  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    margin: 0;
  }

  .season-card {
    padding: var(--spacing-lg);
  }

  .season-title {
    font-size: 1.25rem;
  }

  .season-meta {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
}

/* Direction-aware shadow on downward scroll */
.header.shadow-down {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45),
              0 2px 8px rgba(0, 0, 0, 0.42);
}

/* Touch polish: larger hit targets and softer hover glow on touch devices */
@media (hover: none) {
  .nav-link { padding: 10px 14px; }
  .nav-link:hover { box-shadow: none; transform: none; text-shadow: none; }
}
@media (max-width: 768px) {
  .nav { gap: var(--spacing-sm); }
  .nav-link { padding: 10px 12px; }
}

/* Utility: prevent background scroll when mobile menu open */
body.no-scroll { overflow: hidden; }

/* Mobile nav toggle (hamburger) */
.nav-toggle {
  display: none; /* shown on mobile below */
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;              /* no box */
  background: transparent;   /* no background */
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: transform 260ms ease; /* spin */
}
.nav-toggle:hover { box-shadow: none; }
.nav-toggle:active { transform: scale(0.96); }
.nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-purple-1), transparent 55%), 0 0 0 6px color-mix(in srgb, var(--accent-purple-1), transparent 80%); }
/* hide the emoji label inside */
.theme-toggle .theme-icon { display: none; }

/* inner content: three theme dots (purple / orange / slate) using one element */
.theme-toggle::before {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #f59e0b; /* solar */
  box-shadow:
    -8px 0 0 0 #8b5cf6,  /* nebula */
     8px 0 0 0 #94a3b8;  /* noir */
  filter: drop-shadow(0 0 6px rgba(139,92,246,0.45)) drop-shadow(0 0 8px rgba(245,158,11,0.35));
  transition: transform 200ms ease, filter 200ms ease, box-shadow 200ms ease;
  animation: nebula-orbit 8s linear infinite;
}
.theme-toggle:hover::before { 
  transform: translate(-50%, -50%) scale(1.06) rotate(180deg); 
  filter: drop-shadow(0 0 12px rgba(139,92,246,0.7)) 
          drop-shadow(0 0 16px rgba(245,158,11,0.6))
          drop-shadow(0 0 20px rgba(148,163,184,0.4));
  animation: nebula-cosmic-pulse 1.2s ease-in-out infinite;
}
.theme-toggle.pulse::before { animation: theme-dots-pulse 1.2s ease-in-out 1; }

@keyframes theme-dots-pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -50%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes nebula-orbit {
  0% { 
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    filter: drop-shadow(0 0 6px rgba(139,92,246,0.45)) drop-shadow(0 0 8px rgba(245,158,11,0.35));
    box-shadow: -8px 0 0 0 #8b5cf6, 8px 0 0 0 #94a3b8;
  }
  25% { 
    transform: translate(-50%, -50%) rotate(90deg) scale(1.05);
    filter: drop-shadow(0 0 8px rgba(139,92,246,0.6)) drop-shadow(0 0 10px rgba(245,158,11,0.5));
    box-shadow: -8px 0 0 0 #f59e0b, 8px 0 0 0 #8b5cf6;
  }
  50% { 
    transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(139,92,246,0.7)) drop-shadow(0 0 12px rgba(245,158,11,0.6));
    box-shadow: -8px 0 0 0 #94a3b8, 8px 0 0 0 #f59e0b;
  }
  75% { 
    transform: translate(-50%, -50%) rotate(270deg) scale(1.05);
    filter: drop-shadow(0 0 8px rgba(139,92,246,0.6)) drop-shadow(0 0 10px rgba(245,158,11,0.5));
    box-shadow: -8px 0 0 0 #8b5cf6, 8px 0 0 0 #94a3b8;
  }
  100% { 
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    filter: drop-shadow(0 0 6px rgba(139,92,246,0.45)) drop-shadow(0 0 8px rgba(245,158,11,0.35));
    box-shadow: -8px 0 0 0 #8b5cf6, 8px 0 0 0 #94a3b8;
  }
}

@keyframes nebula-cosmic-pulse {
  0% { transform: translate(-50%, -50%) scale(1.06) rotate(180deg); }
  50% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); }
}

/* light adjustments per theme attribute */
html[data-theme="solar"] .theme-toggle { 
  background: transparent !important; 
}
html[data-theme="noir"] .theme-toggle { 
  background: transparent !important; 
}
.theme-toggle:hover { background: transparent !important; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
  .theme-toggle::before { transition: none; animation: none !important; }
}
@media (min-width: 769px) {
  .header .header-content { gap: var(--spacing-sm); }
  .nav-toggle { display: none; }
  .theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: transparent;
  background-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition: transform 160ms ease;
  }
  .theme-toggle:hover {
    box-shadow: none;
  }
  .theme-toggle:active { transform: scale(0.96); }
  .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-purple-1), transparent 55%), 0 0 0 6px color-mix(in srgb, var(--accent-purple-1), transparent 80%); }
}

/* Controls cluster (right side) */
.header .controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Nebula badge (pill) */
/* subtle border glow */


.nebula-badge .label { color: var(--text-secondary); }
/* Gradient emphasis for VelnorCore */
.nebula-badge .emph {
  background: linear-gradient(120deg, var(--accent-purple-1), #c084fc 45%, #8ab4ff 85%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nebulaSheen 4.5s ease-in-out infinite;
  text-shadow: 0 0 0 transparent;
}

@media (max-width: 1200px) {
  .nebula-badge .label { display: none; }

  .logo-img {
    margin-right: 6px;
  }

  .header-content {
    gap: var(--spacing-sm);
  }

  .header .controls {
    gap: 6px;
  }
}

@keyframes nebulaPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55), 0 0 14px rgba(34, 197, 94, 0.55), 0 0 28px rgba(34, 197, 94, 0.22); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0), 0 0 18px rgba(34, 197, 94, 0.65), 0 0 32px rgba(34, 197, 94, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55), 0 0 14px rgba(34, 197, 94, 0.55), 0 0 28px rgba(34, 197, 94, 0.22); }
}

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

@media (max-width: 768px) {
  .header .controls { gap: 6px; }
  .theme-toggle { width: 34px; height: 34px; padding: 0; }
  .nebula-badge { display: none; }
}

/* Emoji interaction overrides: disable animations/hover for 🌌 ⚡ 🤖 icons */
.theme-toggle .theme-icon,
.reqs-main-icon,
.dynamic-card .dynamic-card-icon {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  text-shadow: none !important;
  user-select: none;
}

.theme-toggle:hover .theme-icon,
.dynamic-card:hover .dynamic-card-icon,
.reqs-header-new:hover .reqs-main-icon {
  transform: none !important;
}

/* Chronicle Page Redesign Styles */
.chronicle-intro {
  text-align: center;
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(59, 130, 246, 0.05));
  border-radius: 24px;
  margin: 2rem 0 4rem;
  position: relative;
  overflow: hidden;
}

.chronicle-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent-purple-1), transparent 50%, var(--accent-blue-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.intro-content {
  position: relative;
  z-index: 1;
}

.intro-description {
  font-size: 1.25rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 1.5rem auto 0;
  line-height: 1.7;
}

/* Timeline Section */
.timeline-section {
  margin: 6rem 0;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 2rem;
}

.timeline-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.timeline-controls {
  display: flex;
  gap: 1rem;
}

.timeline-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.timeline-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-purple-1), var(--accent-blue-1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.timeline-btn:hover::before,
.timeline-btn.active::before {
  opacity: 0.1;
}

.timeline-btn:hover,
.timeline-btn.active {
  border-color: var(--accent-purple-1);
  color: var(--text-primary);
}

.timeline-container {
  position: relative;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent-purple-1), var(--accent-blue-1), transparent);
  transform: translateX(-50%);
}

/* Season Grid */
.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.season-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  border: 2px solid var(--border);
  transition: all 0.4s ease;
  overflow: hidden;
}

.season-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-purple-1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(139, 92, 246, 0.2);
}

.season-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-purple-1), var(--accent-blue-1), var(--accent-green));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.season-card:hover .season-glow {
  opacity: 0.15;
}

.season-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.season-number {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent-purple-1), var(--accent-blue-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.season-info {
  flex: 1;
}

.season-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.season-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.season-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.season-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.season-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-purple-1), var(--accent-blue-1));
  border-radius: 0 0 20px 20px;
}

/* Featured Quote Section */
.featured-quote-section {
  margin: 6rem 0;
  text-align: center;
}

.quote-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
}

.quote-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent-purple-1), transparent, var(--accent-blue-1));
  opacity: 0.1;
  pointer-events: none;
  animation: rotateGlow 8s ease-in-out infinite;
}

@keyframes rotateGlow {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
}

.featured-quote {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2rem;
  position: relative;
}

.quote-mark {
  font-size: 4rem;
  color: var(--accent-purple-1);
  line-height: 1;
  opacity: 0.6;
}

.quote-text {
  background: linear-gradient(135deg, var(--text-primary), var(--accent-purple-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.quote-author {
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-style: normal;
}

.quote-accent {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-purple-1), var(--accent-blue-1));
  border-radius: 2px;
}

/* Legacy Stats */
.legacy-stats {
  margin: 6rem 0;
}

.stats-header {
  text-align: center;
  margin-bottom: 3rem;
}

.stats-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.stat-card {
  text-align: center;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  border: 2px solid var(--border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-purple-1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-purple-1), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover::before {
  opacity: 0.05;
}

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

.stat-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--accent-purple-1), var(--accent-blue-1));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-card .stat-label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .chronicle-intro {
    padding: 3rem 1.5rem;
    margin: 1rem 0 3rem;
  }
  
  .intro-description {
    font-size: 1.1rem;
  }
  
  .timeline-header {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .timeline-title {
    font-size: 2rem;
  }
  
  .timeline-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .season-grid {
    grid-template-columns: 1fr;
  }
  
  .season-card {
    padding: 1.5rem;
  }
  
  .season-number {
    font-size: 2.5rem;
  }
  
  .featured-quote {
    font-size: 1.8rem;
  }
  
  .quote-mark {
    font-size: 3rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .stat-card {
    padding: 1.5rem;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
}

/* Theme: Solar (brighter, warm) */
html[data-theme="solar"] {
  color-scheme: light;
  --background: #0d1220;
  --bg-primary: #0d1220;
  --bg-secondary: #141a29;
  --surface: #1f2638;
  --surface-hover: #232b3f;
  --text-primary: #f5f7fb;
  --text-secondary: #cdd3e1;
  --accent-primary: #ff8a3c;
  --accent-secondary: #ffb085;
  --accent-yellow: #ffd166;
  --accent-green: #34d399;
  --accent-glow: rgba(255, 138, 60, 0.35);
  --border: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.18);
  /* Warmer/brighter background and header glows */
  --bg-glow-1: rgba(255, 166, 100, 0.14);
  --bg-glow-2: rgba(255, 214, 102, 0.10);
  --bg-glow-3: rgba(124, 201, 255, 0.10);
  --header-glow-1: rgba(124, 201, 255, 0.12);
  --header-glow-2: rgba(255, 255, 255, 0.08);
  --header-glow-3: rgba(255, 214, 102, 0.10);
}

/* Theme: Noir (high contrast, desaturated) */
html[data-theme="noir"] {
  color-scheme: dark;
  --background: #08090c;
  --bg-primary: #08090c;
  --bg-secondary: #0b0e12;
  --surface: #0d1016;
  --surface-hover: #101522;
  --text-primary: #e9edf5;
  --text-secondary: #aab2c0;
  --accent-primary: #ff6b35;
  --accent-secondary: #ff885e;
  --accent-yellow: #facc15;
  --accent-green: #22c55e;
  --accent-glow: rgba(255, 107, 53, 0.28);
  --border: rgba(255, 255, 255, 0.10);
  --border-hover: rgba(255, 255, 255, 0.16);
  /* Darker, subtler ambiance */
  --bg-glow-1: rgba(255, 107, 53, 0.08);
  --bg-glow-2: rgba(124, 130, 150, 0.06);
  --bg-glow-3: rgba(80, 140, 200, 0.05);
  --header-glow-1: rgba(124, 130, 150, 0.10);
  --header-glow-2: rgba(80, 140, 200, 0.08);
  --header-glow-3: rgba(255, 255, 255, 0.04);
}

/* Smooth theme transitions */
html.theme-anim *, html.theme-anim, html.theme-anim .header, html.theme-anim .card, html.theme-anim .nav-link, html.theme-anim .footer {
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}


.nav-toggle:active { transform: scale(0.96); }
.nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-purple-1), transparent 55%), 0 0 0 6px color-mix(in srgb, var(--accent-purple-1), transparent 80%); }
.nav-toggle .bar,
.nav-toggle .bar::before {
  position: absolute;
  left: 50%;
  top: 50%;
  content: '';
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.70);
  box-shadow: none;
  transition: transform 260ms ease, background 200ms ease, box-shadow 200ms ease;
}
.nav-toggle .bar { width: 22px; height: 3px; transform: translate(-50%, -50%); }
.nav-toggle .bar::before { width: 3px; height: 22px; transform: translate(-50%, -50%); }
.nav-toggle .bar::after { content: ''; display: none; }

/* Spin and morph to X when open */
.header.nav-open .nav-toggle,
.header.menu-open .nav-toggle { transform: rotate(202deg); }

.header.nav-open .nav-toggle .bar,
.header.menu-open .nav-toggle .bar { transform: translate(-50%, -50%) rotate(45deg); }

.header.nav-open .nav-toggle .bar::before,
.header.menu-open .nav-toggle .bar::before { transform: translate(-50%, -50%) rotate(-45deg); }
/* Mobile dropdown nav */
@media (max-width: 768px) {
  .header .header-content { gap: var(--spacing-sm); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* Convert nav to glassy dropdown */
  .header .nav {
    position: absolute;
    top: 100%;
    right: 12px;          /* anchor to the hamburger/control side */
    left: auto;           /* avoid stretching across the viewport */
    margin: 8px 0 0;
    width: min(360px, calc(100% - 24px));
    padding: 10px;
    display: flex;
    gap: var(--spacing-xs);
    flex-direction: column;
    background: color-mix(in srgb, var(--surface), transparent 10%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 
      0 24px 80px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
    z-index: 100; /* above hero */
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: transform, opacity;
  }
  .header .nav .nav-link { 
    padding: 12px 14px; 
    border-radius: 10px;
    width: 100%;
    justify-content: flex-start;
  }
  
  /* Hide sliding indicator on mobile */
  .header .nav::before {
    display: none;
  }
  
  /* Mobile active state */
  .header .nav .nav-link.active { 
    background: transparent !important;
    box-shadow: none !important;
  }
  
  .header .nav .nav-indicator { display: none !important; }
}

/* Open state */
.header .nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Desktop nav layout adjustments not applied on mobile */
.header .header-content { position: relative; }
.header .controls { position: relative; z-index: 2; }

/* Reduce gap between hero divider and main content on mobile */
@media (max-width: 768px) {
  .video-hero {
    height: 52vh;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .video-hero + .container {
    margin-top: 35px;
  }
  
  /* Fix button spacing to prevent divider overlap */
  .btn-group {
    margin-bottom: var(--spacing-lg);
  }
  
  /* Reduce Load Video button size on mobile */
  .btn-primary.btn-yellow,
  #twl-load {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.9rem;
  }
  
  /* Reduce hero elements size on mobile */
  .hero-title {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }
  
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: var(--spacing-lg);
  }
  
  /* Reduce main action buttons size on mobile */
  .btn-group .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.9rem;
  }
  /* Prefer dynamic viewport units when supported to avoid URL bar jumps */
  @supports (height: 1dvh) {
    .video-hero { height: 50dvh; }
  }
}

/* Reduced motion: avoid large transforms */
@media (prefers-reduced-motion: reduce) {
  .header .nav { transition: none !important; transform: none !important; }
}

/* True center the nav on desktop regardless of side widths */
@media (min-width: 769px) {
  .header .header-content { position: relative; }
  .header .nav {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    z-index: auto;
    order: 2;
    margin: 0 auto;
  }
  .header .controls { position: relative; z-index: 2; order: 3; }
}

/* Header layout */
.header .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: nowrap;
}

/* Group brand (logo + theme toggle) on the left */
.header .header-content > .brand-group { display: inline-flex; gap: var(--spacing-sm); align-items: center; }

/* Theme toggle button */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  transition: transform 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.theme-toggle:hover {
  box-shadow: none;
}
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-purple-1), transparent 55%), 0 0 0 6px color-mix(in srgb, var(--accent-purple-1), transparent 80%); }
.theme-toggle:hover,
.theme-toggle:focus,
.theme-toggle:active {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

/* Divided Section Layout */
.divided-section {
  margin: var(--spacing-2xl) 0;
}

/* Downloads: match Home by adding a viewport-based top gap before first content */
body.page-download .container > .divided-section:first-child {
  margin-top: 5px;
}

/* Download page (new merged design) */
body.page-download .container > .download-merge-section:first-child {
  margin-top: 5px;
}

/* Keep the first section below the fold on common breakpoints (Download) */
@media (max-width: 1024px) {
  body.page-download .container > .divided-section:first-child { margin-top: 35px; }
}
@media (max-width: 768px) {
  body.page-download .container > .divided-section:first-child { margin-top: 35px; }
}
@media (max-width: 480px) {
  body.page-download .container > .divided-section:first-child { margin-top: clamp(8px, 2vh, 24px); }
}

@media (max-width: 1024px) {
  body.page-download .container > .download-merge-section:first-child { margin-top: 35px; }
}
@media (max-width: 768px) {
  body.page-download .container > .download-merge-section:first-child { margin-top: 35px; }
  body.page-download .container > .download-merge-section:first-child { margin-top: clamp(8px, 2vh, 24px); }
}

.download-merge-section {
  padding: clamp(18px, 2.8vw, 26px);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
   radial-gradient(120% 110% at 18% 18%, rgba(244, 63, 94, 0.12), rgba(0,0,0,0) 58%),
   radial-gradient(120% 110% at 86% 50%, rgba(72, 199, 255, 0.10), rgba(0,0,0,0) 62%),
   linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.download-merge-section::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg,
   rgba(255,107,53,0),
   rgba(244, 63, 94, 0.35),
   rgba(250,204,21,0.30),
   rgba(34,197,94,0.30),
   rgba(72,199,255,0.30),
   rgba(164,94,255,0.30),
   rgba(255,107,53,0)
  );
  opacity: 0.55;
  pointer-events: none;
}

.download-merge-render-left {
  position: absolute;
  right: 20px;
  bottom: -54px;
  width: min(560px, 58%);
  height: auto;
  opacity: 0.24;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
}

.download-merge-section > *:not(.download-merge-render-left) {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .download-merge-render-left {
   right: -34px;
   bottom: -46px;
   width: min(460px, 70%);
   opacity: 0.20;
  }
}

@media (max-width: 520px) {
  .download-merge-render-left {
   width: min(420px, 92%);
   opacity: 0.16;
  }
}

.download-merge-header {
  margin-bottom: var(--spacing-lg);
}

.download-merge-header-inner {
  display: grid;
  justify-items: center;
}

.download-merge-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fb7185, #f97316, #48c7ff, #a45eff);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.download-merge-underline {
  margin-top: 10px;
  height: 2px;
  width: min(420px, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg,
   rgba(251,113,133,0),
   rgba(251,113,133,0.95),
   rgba(249,115,22,0.92),
   rgba(72,199,255,0.90),
   rgba(164,94,255,0.90),
   rgba(251,113,133,0)
  );
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
}

.download-merge-subtitle {
  margin: 10px 0 0;
  color: var(--text-secondary);
  max-width: 56ch;
  line-height: 1.55;
  text-align: center;
}

.download-merge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 20px);
  align-items: start;
}

@media (max-width: 980px) {
  .download-merge-grid {
   grid-template-columns: 1fr;
  }
}

.download-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.2vw, 18px);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
}

.download-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
   radial-gradient(120% 120% at 12% 10%, rgba(244, 63, 94, 0.09), rgba(0,0,0,0) 55%),
   radial-gradient(120% 120% at 88% 40%, rgba(72, 199, 255, 0.07), rgba(0,0,0,0) 60%);
  opacity: 1;
}

.download-panel > * {
  position: relative;
  z-index: 1;
}

.download-panel-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.download-panel-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
}

.download-panel-icon .icon {
  width: 30px;
  height: 30px;
  display: inline-block;
}

.download-panel-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.download-panel-underline {
  margin-top: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
   rgba(255,107,53,0),
   rgba(244, 63, 94, 0.75),
   rgba(72,199,255,0.70),
   rgba(255,107,53,0)
  );
  opacity: 0.65;
}

.download-panel-subtitle {
  margin: 10px 0 0;
  color: var(--text-secondary);
  line-height: 1.5;
  opacity: 0.92;
}

.download-panel .card-grid {
  margin: 0;
}

.download-offers {
  display: grid;
  gap: 12px;
}

.download-offer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 14px;
}

.download-offer-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
}

.download-offer-icon .icon {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.download-offer-title {
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
}

.download-offer-text {
  margin-top: 6px;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 520px) {
  .download-offer {
   grid-template-columns: 1fr;
   justify-items: center;
   text-align: center;
  }
}

@media (max-width: 520px) {
  .download-panel-header {
   grid-template-columns: 1fr;
   justify-items: center;
   text-align: center;
  }
}

.download-faq-section {
  margin-top: var(--spacing-xl);
  padding: clamp(14px, 2.4vw, 18px) clamp(18px, 2.8vw, 22px) clamp(18px, 2.8vw, 22px);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
   radial-gradient(120% 110% at 18% 18%, rgba(164, 94, 255, 0.12), rgba(0,0,0,0) 58%),
   radial-gradient(120% 110% at 86% 50%, rgba(34, 197, 94, 0.10), rgba(0,0,0,0) 62%),
   linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
 }

.download-faq-section::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg,
   rgba(255,107,53,0),
   rgba(164,94,255,0.35),
   rgba(34,197,94,0.30),
   rgba(72,199,255,0.30),
   rgba(255,107,53,0)
  );
  opacity: 0.55;
  pointer-events: none;
 }

.download-faq-render {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  width: min(860px, 92%);
  height: auto;
  max-height: 420px;
  opacity: 0.30;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
 }

@media (max-width: 900px) {
  .download-faq-render {
   bottom: 0px;
   width: min(760px, 96%);
   opacity: 0.22;
  }
 }

@media (max-width: 520px) {
  .download-faq-render {
   display: none;
  }
 }

.download-faq-section > *:not(.download-faq-render) {
  position: relative;
  z-index: 1;
}

.download-faq-header {
  margin-bottom: 16px;
}

.download-faq-header-inner {
  display: grid;
  justify-items: center;
}

.download-faq-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.download-faq-underline {
  margin-top: 10px;
  height: 2px;
  width: min(420px, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg,
   rgba(164,94,255,0),
   rgba(164,94,255,0.95),
   rgba(72,199,255,0.90),
   rgba(34,197,94,0.90),
   rgba(164,94,255,0)
  );
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
}

.download-faq-subtitle {
  margin: 6px 0 0;
  color: var(--text-secondary);
  max-width: 56ch;
  line-height: 1.55;
  text-align: center;
}

.download-faq-grid {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.download-faq-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  padding: 16px;
}

.download-faq-question {
  color: var(--text-primary);
  font-weight: 850;
  letter-spacing: -0.01em;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.download-faq-answer {
  color: var(--text-secondary);
  line-height: 1.6;
  opacity: 0.9;
}

.divided-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.divided-left,
.divided-right {
  position: relative;
}

.divided-left .reqs-container {
  margin: 0;
}

.divided-right .features-header {
  margin-bottom: var(--spacing-xl);
}

/* Stylish Divider */
.section-divider {
  position: relative;
  width: 2px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, 
    transparent 0%,
    rgba(255, 107, 53, 0.3) 10%,
    rgba(164, 94, 255, 0.4) 30%,
    rgba(72, 199, 255, 0.5) 50%,
    rgba(164, 94, 255, 0.4) 70%,
    rgba(255, 107, 53, 0.3) 90%,
    transparent 100%);
  border-radius: 2px;
  animation: divider-pulse 4s ease-in-out infinite;
}

.yt-frame::before {
  display: none; /* Disable gradient border */
}

@keyframes twl-angle-rotate {
  to {
    --twl-angle: 360deg;
  }
}

.divider-glow {
  position: absolute;
  width: 20px;
  height: 60px;
  background: radial-gradient(ellipse, 
    rgba(255, 107, 53, 0.4) 0%,
    rgba(164, 94, 255, 0.3) 50%,
    transparent 100%);
  border-radius: 50%;
  animation: divider-glow-float 6s ease-in-out infinite;
  filter: blur(8px);
}

@keyframes divider-pulse {
  0% { background: linear-gradient(180deg, 
    transparent 0%,
    rgba(255, 107, 53, 0.3) 10%,
    rgba(164, 94, 255, 0.4) 30%,
    rgba(72, 199, 255, 0.5) 50%,
    rgba(164, 94, 255, 0.4) 70%,
    rgba(255, 107, 53, 0.3) 90%,
    transparent 100%);
    transform: scaleY(1);
  }
  50% { background: linear-gradient(180deg, 
    transparent 0%,
    rgba(255, 107, 53, 0.5) 10%,
    rgba(164, 94, 255, 0.6) 30%,
    rgba(72, 199, 255, 0.7) 50%,
    rgba(164, 94, 255, 0.6) 70%,
    rgba(255, 107, 53, 0.5) 90%,
    transparent 100%);
    transform: scaleY(1.05);
  }
}

@keyframes divider-glow-float {
  0%, 100% {
    transform: translateY(-10px);
    opacity: 0.6;
  }
  33% {
    transform: translateY(10px);
    opacity: 0.8;
  }
  66% {
    transform: translateY(-5px);
    opacity: 0.7;
  }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .divided-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  
  .section-divider {
    display: none;
  }
  
  .divided-right .features-pill {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .divided-container {
    gap: var(--spacing-xl);
  }
  
  .divided-left .reqs-container,
  .divided-right .features-header {
    padding: var(--spacing-lg);
  }
}

/* System Requirements Styling - New Design */
.reqs-section {
  margin: var(--spacing-2xl) 0;
}

.reqs-container {
  max-width: 900px;
  margin: 0 auto;
  /* Theme-aware background and border */
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary, var(--surface)) 100%);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 16px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.reqs-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--accent-primary) 50%, 
    transparent 100%);
  opacity: 0.8;
}

.reqs-header-new {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.reqs-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, 
    rgba(255, 107, 53, 0.2) 0%, 
    rgba(164, 94, 255, 0.1) 70%, 
    transparent 100%);
  border: 2px solid var(--accent-glow);
  border-radius: 50%;
  margin-bottom: var(--spacing-sm);
  position: relative;
}

.reqs-icon-wrapper::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(45deg, 
    rgba(255, 107, 53, 0.3), 
    rgba(164, 94, 255, 0.2), 
    rgba(72, 199, 255, 0.2));
  z-index: -1;
  opacity: 0;
  transition: opacity 300ms ease;
}

.reqs-container:hover .reqs-icon-wrapper::after {
  opacity: 1;
}

.reqs-main-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.8));
}

.reqs-main-title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, 
    var(--accent-primary) 0%,
    var(--accent-purple-1) 50%,
    #48c7ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.reqs-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  opacity: 0.9;
  text-align: center;
}

.reqs-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

.spec-card {
  /* Theme-aware surface and border */
  background: rgba(255, 107, 53, 0.05);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  transition: none;
  position: relative;
  overflow: hidden;
  /* Center content in System Requirements cards */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spec-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--accent-primary) 50%, 
    transparent 100%);
  opacity: 1;
  transition: none;
}

.spec-card:hover {
  background: rgba(255, 107, 53, 0.05);
  border-color: var(--accent-glow);
  transform: none;
  box-shadow: none;
 }

.spec-card:hover::before {
  opacity: 1;
 }

.spec-icon {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-sm);
  display: block;
  text-align: center;
  filter: drop-shadow(0 0 8px rgba(164, 94, 255, 0.4));
}

.spec-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spec-value {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
}

@media (max-width: 768px) {
  .reqs-container {
    padding: var(--spacing-lg);
  }
  
  .reqs-specs-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  
  .reqs-main-title {
    font-size: 1.5rem;
  }
  
  .reqs-icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .reqs-main-icon {
    font-size: 1.75rem;
  }
  
  .spec-card {
    padding: var(--spacing-sm);
  }
}

/* Features Section Styling */
.features-section {
  margin: var(--spacing-2xl) 0;
}

.features-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.features-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, 
    rgba(56, 189, 248, 0.14) 0%,
    rgba(164, 94, 255, 0.12) 45%,
    rgba(255, 107, 53, 0.10) 100%);
  border: 1px solid rgba(56, 189, 248, 0.30);
  border-radius: 999px;
  padding: var(--spacing-md) var(--spacing-xl);
  backdrop-filter: blur(8px);
  box-shadow: 
    0 10px 38px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(56, 189, 248, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.features-pill-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.55));
}

.features-pill-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #48c7ff, var(--accent-purple-1), var(--accent-primary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.features-pill-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(120% 140% at 20% 20%, rgba(56, 189, 248, 0.18), rgba(164, 94, 255, 0.10) 55%, rgba(255, 107, 53, 0.08) 100%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.features-pill:hover .features-pill-glow {
  opacity: 1;
}

@media (max-width: 768px) {
  .features-pill {
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: var(--spacing-xs);
  }
  
  .features-pill-title {
    font-size: 1.25rem;
  }
  
  .features-pill-icon {
    font-size: 1.25rem;
  }
}

/* Dynamic Feature Cards */
.dynamic-card {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(20, 25, 40, 0.9) 0%, 
    rgba(30, 35, 55, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  transform: translateY(0);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dynamic-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 107, 53, 0.4);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(255, 107, 53, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dynamic-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, 
    rgba(255, 107, 53, 0.1) 0%, 
    rgba(164, 94, 255, 0.05) 50%, 
    transparent 100%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.dynamic-card:hover .dynamic-card-glow {
  opacity: 1;
}

.dynamic-card-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  display: block;
  text-align: center;
  filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.6));
  animation: float 3s ease-in-out infinite;
}

.dynamic-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  text-align: center;
  background: linear-gradient(135deg, 
    var(--accent-primary) 0%,
    var(--accent-purple-1) 50%,
    #48c7ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 300ms ease;
}

.dynamic-card-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
  text-align: center;
  transition: color 300ms ease;
}

.dynamic-card:hover .dynamic-card-description {
  color: var(--text-primary);
}

.dynamic-card-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    var(--accent-primary) 0%, 
    var(--accent-purple-1) 50%, 
    #48c7ff 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.dynamic-card:hover .dynamic-card-accent {
  transform: scaleX(1);
}

/* Specific card animations */
.dynamic-card[data-feature="lightning"]:hover .dynamic-card-icon {
  animation: lightning-pulse 1s ease-in-out infinite;
}

.dynamic-card[data-feature="nyx"]:hover .dynamic-card-icon {
  animation: nyx-rotate 2s linear infinite;
}

.dynamic-card[data-feature="nebula"]:hover .dynamic-card-icon {
  animation: nebula-glow 2s ease-in-out infinite alternate;
}

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

@keyframes lightning-pulse {
  0%, 100% { 
    filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.6));
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.8));
    transform: scale(1.1);
  }
}

@keyframes nyx-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes nebula-glow {
  0% { 
    filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.6));
  }
  100% { 
    filter: drop-shadow(0 0 20px rgba(164, 94, 255, 0.8));
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dynamic-card {
    padding: var(--spacing-lg);
  }
  
  .dynamic-card-icon {
    font-size: 2.5rem;
  }
  
  .dynamic-card-title {
    font-size: 1.25rem;
  }
  
  .dynamic-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
}

/* Privacy Policy Page Styles */
.privacy-single-card {
  max-width: 800px;
  margin: var(--spacing-2xl) auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
}

.privacy-section {
  margin-bottom: var(--spacing-2xl);
}

.privacy-section:last-child {
  margin-bottom: 0;
}

.privacy-section-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.privacy-section > p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
  text-align: center;
}

.privacy-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.privacy-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
}

.privacy-bullet {
  font-size: 1rem;
  min-width: 0;
  text-align: center;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

.privacy-item div {
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
}

.privacy-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.privacy-contact-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.privacy-contact-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.privacy-contact-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.contact-icon {
  font-size: 1.2rem;
  min-width: 20px;
  text-align: center;
  filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.4));
}

.privacy-last-updated {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.update-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.4));
}

.privacy-footer {
  text-align: center;
  margin: var(--spacing-2xl) 0;
}

/* Specific card hover effects */
.privacy-card[data-section="collection"]:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 107, 53, 0.3);
}

.privacy-card[data-section="usage"]:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(164, 94, 255, 0.3);
}

.privacy-card[data-section="sharing"]:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 71, 87, 0.3);
}

.privacy-card[data-section="security"]:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(34, 197, 94, 0.3);
}

.privacy-card[data-section="rights"]:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(72, 199, 255, 0.3);
}

.privacy-card[data-section="contact"]:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(250, 204, 21, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .privacy-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
  }
  
  .privacy-card-header {
    padding: var(--spacing-lg);
  }
  
  .privacy-card-content {
    padding: var(--spacing-lg);
  }
  
  .privacy-icon {
    width: 50px;
    height: 50px;
  }
  
  .privacy-card-title {
    font-size: 1.2rem;
  }
  
  .privacy-contact-links {
    gap: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  .privacy-card-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
  
  .privacy-card-title {
    font-size: 1.1rem;
  }
  
  .privacy-item {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .privacy-bullet {
    align-self: flex-start;
  }
}

/* Reduced motion for privacy page */
@media (prefers-reduced-motion: reduce) {
  .privacy-card,
  .privacy-card::before,
  .privacy-icon,
  .privacy-item,
  .privacy-contact-link {
    animation: none !important;
    transition: none !important;
  }
  
  .privacy-card:hover,
  .privacy-card:hover .privacy-icon,
  .privacy-item:hover,
  .privacy-contact-link:hover {
    transform: none !important;
  }
}

/* Modpacks Pill Styling */
.modpacks-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.modpacks-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.14), rgba(244, 63, 94, 0.10));
  border: 1px solid rgba(244, 63, 94, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(244, 63, 94, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.modpacks-pill:hover {
  border-color: rgba(244, 63, 94, 0.55);
}

.modpacks-pill-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.55));
}

.modpacks-pill .modpacks-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #ff6b35, #f43f5e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modpacks-pill-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(120% 140% at 30% 20%, rgba(255, 107, 53, 0.22), rgba(244, 63, 94, 0.18) 60%, rgba(0, 0, 0, 0.0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.modpacks-pill:hover .modpacks-pill-glow {
  opacity: 1;
}

@media (max-width: 768px) {
  .modpacks-pill {
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: var(--spacing-xs);
  }
  
  .modpacks-pill .modpacks-title {
    font-size: 1.25rem;
  }
  
  .modpacks-pill-icon {
    font-size: 1.25rem;
  }
}

/* New Featured Modpacks Pill Styling */
.featured-modpacks-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  margin-top: 0;
}

.featured-modpacks-section {
  margin-top: var(--spacing-3xl);
  padding: clamp(16px, 2.8vw, 24px);
  border-radius: calc(var(--radius-lg) + 4px);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  position: relative;
  overflow: hidden;
 }

 .featured-modpacks-render {
  position: absolute;
  right: -46px;
  bottom: -58px;
  width: min(520px, 80%);
  height: auto;
  opacity: 0.26;
  pointer-events: none;
  z-index: 0;
  filter:
    drop-shadow(0 0 28px rgba(244, 114, 182, 0.14))
    drop-shadow(0 0 38px rgba(167, 139, 250, 0.12));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 100%);
 }

 .featured-modpacks-section > *:not(.featured-modpacks-render) {
  position: relative;
  z-index: 1;
 }

 @media (max-width: 900px) {
  .featured-modpacks-render {
   right: -34px;
   bottom: -46px;
   width: min(460px, 92%);
   opacity: 0.22;
  }
 }

 @media (max-width: 520px) {
  .featured-modpacks-render {
   right: -26px;
   bottom: -44px;
   width: min(420px, 98%);
   opacity: 0.18;
  }
 }

.featured-modpacks-section::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,107,53,0), rgba(255,107,53,0.45), rgba(250,204,21,0.35), rgba(34,197,94,0.35), rgba(72,199,255,0.35), rgba(164,94,255,0.35), rgba(255,107,53,0));
  opacity: 0.55;
  pointer-events: none;
}

.featured-modpacks-grid {
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 2.4vw, 20px);
  justify-items: center;
}

.featured-modpacks-grid > .card {
  width: 100%;
  max-width: 520px;
}

@media (max-width: 768px) {
  .featured-modpacks-grid {
    grid-template-columns: 1fr;
  }
}

.featured-modpacks-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  --fmp-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(132, 204, 22, 0.18));
  --fmp-border: rgba(34, 197, 94, 0.9);
  --fmp-radius: 50px;
  --fmp-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --fmp-icon-shadow: rgba(34, 197, 94, 0.7);
  --fmp-title-gradient: linear-gradient(90deg, #22c55e, #a3e635);
  --fmp-glow-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(132, 204, 22, 0.25));
  background: var(--fmp-bg);
  border: 1px solid var(--fmp-border);
  border-radius: var(--fmp-radius);
  backdrop-filter: blur(10px);
  box-shadow: 
    var(--fmp-shadow);
}

.featured-modpacks-pill.pill-featured-modpacks {
  --fmp-bg: rgba(15, 20, 25, 0.72);
  --fmp-border: rgba(255, 255, 255, 0.10);
  --fmp-radius: var(--radius-lg);
  --fmp-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  --fmp-icon-shadow: rgba(255, 107, 53, 0.35);
  --fmp-title-gradient: linear-gradient(90deg, var(--accent-primary), var(--accent-purple-1), #48c7ff);
  --fmp-glow-bg: linear-gradient(135deg, rgba(255, 107, 53, 0.14), rgba(164, 94, 255, 0.10), rgba(72, 199, 255, 0.08));
  backdrop-filter: blur(14px);
}

.featured-modpacks-pill-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 10px var(--fmp-icon-shadow));
}

.featured-modpacks-pill .featured-modpacks-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--fmp-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.featured-modpacks-pill-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--fmp-glow-bg);
  border-radius: var(--fmp-radius);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.featured-modpacks-section .card::before {
  display: none;
}

.featured-modpacks-section .card:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

.featured-modpacks-section .card[data-server]:hover {
  box-shadow: none;
}

.featured-modpacks-section .card-image-wrapper {
  animation: none;
}

.get-started-section {
  margin: 0 0 var(--spacing-2xl) 0;
  padding: clamp(18px, 2.8vw, 26px);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
    radial-gradient(120% 110% at 18% 18%, rgba(255, 107, 53, 0.12), rgba(0,0,0,0) 58%),
    radial-gradient(120% 110% at 86% 50%, rgba(72, 199, 255, 0.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
 }

 .get-started-render {
  position: absolute;
  right: 640px;
  bottom: -64px;
  width: min(600px, 60%);
  height: auto;
  opacity: 0.26;
  pointer-events: none;
  z-index: 0;
  filter:
   drop-shadow(0 0 26px rgba(239, 68, 68, 0.10))
   drop-shadow(0 0 34px rgba(255, 107, 53, 0.10));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
 }

 .get-started-render-mid {
  position: absolute;
  left: 66.666%;
  bottom: -18px;
  transform: translateX(-50%);
  width: min(1000px, 42%);
  height: auto;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
  filter:
   drop-shadow(0 0 26px rgba(72, 199, 255, 0.12))
   drop-shadow(0 0 34px rgba(164, 94, 255, 0.10));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
 }

 .get-started-section > *:not(.get-started-render):not(.get-started-render-mid) {
  position: relative;
  z-index: 1;
 }

 @media (max-width: 900px) {
  .get-started-render {
   right: -34px;
   bottom: -52px;
   width: min(460px, 78%);
   opacity: 0.20;
  }

  .get-started-render-mid {
   display: none;
  }
 }

 @media (max-width: 520px) {
  .get-started-render {
   right: -26px;
   bottom: -44px;
   width: min(380px, 92%);
   opacity: 0.16;
  }
 }

 .get-started-section::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,107,53,0),
    rgba(255,107,53,0.35),
    rgba(250,204,21,0.30),
    rgba(34,197,94,0.30),
    rgba(72,199,255,0.30),
    rgba(164,94,255,0.30),
    rgba(255,107,53,0)
  );
  opacity: 0.55;
  pointer-events: none;
 }

 .get-started-header {
  margin-bottom: var(--spacing-lg);
 }

 .get-started-header-inner {
  display: grid;
  justify-items: center;
 }

 .get-started-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ef4444, #f97316, var(--accent-primary), #f59e0b, #ef4444);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
 }

 .get-started-underline {
  margin-top: 10px;
  height: 2px;
  width: min(420px, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(239,68,68,0),
    rgba(239,68,68,0.95),
    rgba(255,107,53,0.92),
    rgba(245,158,11,0.90),
    rgba(239,68,68,0.95),
    rgba(239,68,68,0)
  );
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
 }

 .get-started-subtitle {
  margin: 10px 0 0;
  color: var(--text-secondary);
  max-width: 56ch;
  line-height: 1.55;
  text-align: center;
 }

 .get-started-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 20px);
 }

 @media (max-width: 980px) {
  .get-started-grid {
   grid-template-columns: 1fr;
  }

  .get-started-render-mid {
   display: none;
  }
 }

 .get-started-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.2vw, 18px);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, filter 220ms ease;
 }

 .get-started-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 12% 10%, rgba(255, 107, 53, 0.08), rgba(0,0,0,0) 55%),
    radial-gradient(120% 120% at 88% 40%, rgba(72, 199, 255, 0.07), rgba(0,0,0,0) 60%);
  opacity: 1;
 }

 .get-started-card > * {
  position: relative;
  z-index: 1;
 }

 .get-started-card:hover {
  transform: translateY(-4px);
  border-color: rgba(72, 199, 255, 0.22);
  filter: brightness(1.03);
 }

 .get-started-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
 }

 .get-started-card-title {
  margin: 12px 0 0;
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text-primary);
 }

 .get-started-card-text {
  margin: 8px 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
  opacity: 0.92;
 }

 .get-started-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
 }

 .get-started-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 143, 101, 0.35);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(255, 107, 53, 0.24), rgba(245, 158, 11, 0.18));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, filter 220ms ease, border-color 220ms ease;
 }

 .get-started-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.22), rgba(255,255,255,0));
  transform: translateX(-80%);
  opacity: 0;
  transition: transform 650ms ease, opacity 220ms ease;
  pointer-events: none;
 }

 .get-started-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 143, 101, 0.55);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 0 18px rgba(255, 107, 53, 0.12);
  filter: brightness(1.04);
 }

 .get-started-btn:hover::before {
  transform: translateX(80%);
  opacity: 0.95;
 }

 .get-started-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
 }

 @media (max-width: 980px) {
  .get-started-actions {
   justify-content: center;
  }
 }

.twilight-overview {
  margin: 0 0 var(--spacing-2xl) 0;
}

.twilight-overview-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: var(--spacing-lg);
  align-items: stretch;
}

.twilight-overview-card,
.twilight-creator-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.twilight-overview-card::before,
.twilight-creator-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,107,53,0), rgba(164,94,255,0.55), rgba(72,199,255,0.45), rgba(255,107,53,0));
  opacity: 0.8;
}

.twilight-overview-text {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-secondary);
}

.twilight-overview-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-secondary);
  display: grid;
  gap: 8px;
}

.twilight-overview-list .twl-bullet-title {
  color: #ffffff;
  font-weight: 800;
}

body.page-home #twilight-lore-overview .twilight-overview-list .twl-bullet-title[data-twl="awakening"],
body.page-home #twilight-lore-overview .twilight-overview-list .twl-bullet-title[data-twl="control"] {
  color: #86efac;
}

.twilight-creator-card {
  z-index: 0;
  background: rgba(255, 255, 255, 0.03);
}

.twilight-creator-card > * {
  position: relative;
  z-index: 1;
}

.twilight-creator-card::after {
  content: none;
}

.twilight-creator-skin {
  position: absolute;
  right: -26px;
  bottom: -18px;
  width: 260px;
  height: auto;
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 26px rgba(56, 189, 248, 0.18)) drop-shadow(0 0 34px rgba(168, 85, 247, 0.12));
}

@media (max-width: 900px) {
  .twilight-overview-grid {
   grid-template-columns: 1fr;
  }
  .twilight-creator-skin {
   width: 240px;
   right: -18px;
   bottom: -12px;
   opacity: 0.30;
  }
}

@media (max-width: 520px) {
  .twilight-overview-card,
  .twilight-creator-card {
   padding: var(--spacing-lg);
  }
}

#twilight-media {
  margin-top: var(--spacing-2xl);
}

.twilight-media-section {
  padding: clamp(18px, 2.8vw, 26px);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
    radial-gradient(120% 110% at 12% 10%, rgba(168, 85, 247, 0.12), rgba(0,0,0,0) 55%),
    radial-gradient(120% 110% at 88% 40%, rgba(56, 189, 248, 0.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
 }

 .twilight-media-section::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,107,53,0),
    rgba(255,107,53,0.35),
    rgba(250,204,21,0.35),
    rgba(34,197,94,0.35),
    rgba(72,199,255,0.35),
    rgba(164,94,255,0.35),
    rgba(255,107,53,0)
  );
  opacity: 0.55;
  pointer-events: none;
 }

 .twilight-media-header {
  margin-bottom: var(--spacing-lg);
 }

 .twilight-media-header-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(14px, 2.2vw, 22px);
  align-items: center;
 }

 .twilight-media-header-copy {
  min-width: 0;
 }

 .twilight-media-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #c084fc, #60a5fa, #34d399, #facc15);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
 }

 .twilight-media-underline {
  margin-top: 10px;
  height: 2px;
  width: min(420px, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,107,53,0),
    rgba(250,204,21,0.95),
    rgba(34,197,94,0.95),
    rgba(72,199,255,0.95),
    rgba(164,94,255,0.95),
    rgba(255,107,53,0)
  );
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
 }

 .twilight-media-subtitle {
  margin: 10px 0 0;
  color: var(--text-secondary);
  max-width: 56ch;
  line-height: 1.55;
 }

 .twilight-media-header-render {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
 }

 .twilight-media-render {
  width: min(420px, 100%);
  height: auto;
  opacity: 0.38;
  filter:
    drop-shadow(0 0 26px rgba(56, 189, 248, 0.18))
    drop-shadow(0 0 34px rgba(168, 85, 247, 0.14));
 }

 @media (max-width: 900px) {
  .twilight-media-header-inner {
   grid-template-columns: 1fr;
  }
  .twilight-media-header-render {
   justify-content: center;
  }
  .twilight-media-render {
   width: min(360px, 92%);
   opacity: 0.30;
  }
 }

 .twilight-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: clamp(14px, 2.4vw, 20px);
 }

@media (max-width: 768px) {
  .twilight-media-grid {
   grid-template-columns: 1fr;
  }
}

 .twilight-media-grid .featured-video {
  margin-top: 0;
 }

 .twilight-media-grid #twilight-awakening {
  margin-top: 0;
 }

 .twilight-media-grid #memorial-video {
  margin-top: 0;
  grid-column: 1 / -1;
  max-width: 760px;
  justify-self: center;
 }

 .twilight-media-grid .featured-video-header {
  display: none;
 }

 .twilight-media-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.2vw, 18px);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
 }

 .twilight-media-card-render {
  position: absolute;
  top: auto;
  bottom: -26px;
  width: min(240px, 55%);
  height: auto;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
  filter:
    drop-shadow(0 0 26px rgba(56, 189, 248, 0.14))
    drop-shadow(0 0 34px rgba(168, 85, 247, 0.12));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
 }

 #twilight-in-control .twilight-media-card-render.render-in-control {
  left: -70px;
 }

 #twilight-awakening .twilight-media-card-render.render-awakening {
  right: -72px;
 }

 #memorial-video .twilight-media-card-render.render-memorial {
  left: 50%;
  transform: translateX(-50%);
 }

 @media (max-width: 900px) {
  .twilight-media-card-render {
   bottom: -22px;
   width: min(220px, 62%);
   opacity: 0.26;
  }
  #twilight-in-control .twilight-media-card-render.render-in-control { left: -54px; }
  #twilight-awakening .twilight-media-card-render.render-awakening { right: -54px; }
  #memorial-video .twilight-media-card-render.render-memorial { left: 50%; transform: translateX(-50%); }
 }

 @media (max-width: 520px) {
  .twilight-media-card-render {
   bottom: -18px;
   width: min(200px, 70%);
   opacity: 0.20;
  }
 }

 .twilight-media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 12% 10%, rgba(168, 85, 247, 0.09), rgba(0,0,0,0) 55%),
    radial-gradient(120% 120% at 88% 40%, rgba(56, 189, 248, 0.07), rgba(0,0,0,0) 60%);
  opacity: 1;
 }

 .twilight-media-card > *:not(.twilight-media-card-render) {
  position: relative;
  z-index: 1;
 }

 .twilight-media-card-header {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
 }

 .twilight-media-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text-primary);
 }

 .twilight-media-card-underline {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.10)
  );
  opacity: 0.9;
 }

 .twilight-media-card-underline.underline-control {
  background: linear-gradient(90deg, rgba(34,197,94,0), rgba(34,197,94,0.85), rgba(250,204,21,0.75), rgba(34,197,94,0));
  background-size: 200% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
 }

 .twilight-media-card-underline.underline-awakening {
  background: linear-gradient(90deg, rgba(168,85,247,0), rgba(168,85,247,0.85), rgba(56,189,248,0.75), rgba(168,85,247,0));
  background-size: 200% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
 }

 .twilight-media-card-underline.underline-memorial {
  background: linear-gradient(90deg, rgba(229,231,235,0), rgba(229,231,235,0.85), rgba(156,163,175,0.75), rgba(229,231,235,0));
  background-size: 200% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
 }

 .twilight-media-card-underline.underline-kaioken {
  background: linear-gradient(90deg, rgba(239,68,68,0), rgba(239,68,68,0.95), rgba(87,216,255,0.92), rgba(239,68,68,0.90), rgba(239,68,68,0));
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
 }

 @keyframes underline-rgb-breathe {
  0%, 100% {
   background-position: 0% 50%;
   opacity: 0.70;
   filter: saturate(1);
  }
  50% {
   background-position: 100% 50%;
   opacity: 0.95;
   filter: saturate(1.12);
  }
 }

 .player-caption .cap-nixon { color: var(--accent-purple-1); }
 .player-caption .cap-earl { color: #fb923c; }

 .featured-modpacks-header-inner {
  display: grid;
  justify-items: center;
  gap: 10px;
 }

 .featured-modpacks-header-inner .featured-modpacks-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fb7185, #f472b6, #a78bfa);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
 }

 .featured-modpacks-underline {
  height: 2px;
  width: min(420px, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(251,113,133,0),
    rgba(251,113,133,0.95),
    rgba(244,114,182,0.95),
    rgba(167,139,250,0.90),
    rgba(251,113,133,0)
  );
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
 }

 .twilight-galaxy {
  background-image:
    radial-gradient(circle at 18% 35%, rgba(255,255,255,0.78) 0 1px, rgba(255,255,255,0) 2px),
    radial-gradient(circle at 62% 20%, rgba(255,255,255,0.68) 0 1px, rgba(255,255,255,0) 2px),
    radial-gradient(circle at 78% 62%, rgba(255,255,255,0.58) 0 1px, rgba(255,255,255,0) 2px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,0.52) 0 1px, rgba(255,255,255,0) 2px),
    linear-gradient(90deg, #c084fc, #a855f7, #7c3aed, #4f46e5, #a78bfa);
  background-size: 240% 100%;
  background-position: 0% 50%;
  animation: twilight-galaxy-cycle 14s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
 }

 @keyframes twilight-galaxy-cycle {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
 }

 @media (prefers-reduced-motion: reduce) {
  .twilight-galaxy { animation: none !important; }
 }

 .featured-modpacks-section .featured-modpacks-pill {
  display: none;
 }

 .twilight-media-card .yt-player-shell {
  border: none;
  padding: 0;
 }

 .twilight-media-card .player-caption {
  margin-top: 10px;
  opacity: 0.88;
  line-height: 1.45;
 }

#kaioken-audio {
  margin-top: calc(var(--spacing-2xl) + 220px);
}

 .kaioken-audio-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
 }

 .kaioken-audio-header-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-top: 54px;
  isolation: isolate;
 }

 .kaioken-header-render {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -58%, 0);
  width: min(360px, 92%);
  height: auto;
  opacity: 0.30;
  pointer-events: none;
  z-index: 0;
  filter: none;
  image-rendering: auto;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 26%, rgba(0,0,0,1) 60%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 26%, rgba(0,0,0,1) 60%);
 }

 .kaioken-audio-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 2;
 }

 .kaioken-audio-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ef4444, #22d3ee, #ef4444);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
 }

 .kaioken-audio-underline {
  position: relative;
  height: 2px;
  width: min(420px, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(239,68,68,0),
    rgba(239,68,68,0.95),
    rgba(34,211,238,0.92),
    rgba(239,68,68,0.90),
    rgba(239,68,68,0)
  );
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
  z-index: 2;
 }

#twilight-awakening {
  margin-top: var(--spacing-2xl);
}

 #velnor-heart {
  margin: var(--spacing-2xl) 0;
 }

 .velnor-heart-section {
  padding: clamp(18px, 2.8vw, 26px);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
    radial-gradient(120% 110% at 18% 18%, rgba(88, 101, 242, 0.14), rgba(0,0,0,0) 58%),
    radial-gradient(120% 110% at 86% 50%, rgba(72, 199, 255, 0.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
 }

 .velnor-heart-section::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,107,53,0),
    rgba(88,101,242,0.40),
    rgba(72,199,255,0.35),
    rgba(164,94,255,0.35),
    rgba(255,107,53,0)
  );
  opacity: 0.55;
  pointer-events: none;
 }

 .velnor-heart-header {
  margin-bottom: var(--spacing-lg);
 }

 .velnor-heart-header-inner {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(14px, 2.2vw, 22px);
  align-items: center;
 }

 .velnor-heart-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #5865f2, #60a5fa, #a855f7, #22c55e);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
 }

 .velnor-heart-underline {
  margin-top: 10px;
  height: 2px;
  width: min(420px, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,107,53,0),
    rgba(88,101,242,0.95),
    rgba(72,199,255,0.90),
    rgba(164,94,255,0.90),
    rgba(255,107,53,0)
  );
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
 }

 .velnor-heart-subtitle {
  margin: 10px 0 0;
  color: var(--text-secondary);
  max-width: 56ch;
  line-height: 1.55;
 }

 .velnor-heart-header-media {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: none;
 }

 .velnor-heart-discord-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  opacity: 0.70;
  filter: drop-shadow(0 0 18px rgba(88, 101, 242, 0.25));
 }

 .velnor-heart-render {
  position: absolute;
  top: 0;
  right: 0;
  width: min(220px, 46%);
  height: auto;
  opacity: 0.42;
  filter:
   drop-shadow(0 0 26px rgba(56, 189, 248, 0.10))
   drop-shadow(0 0 34px rgba(168, 85, 247, 0.08));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
 }

 .velnor-heart-render[src=""],
 .velnor-heart-render:not([src]) {
  display: none;
 }

 .velnor-heart-grid {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: clamp(14px, 2.4vw, 20px);
  align-items: stretch;
 }

 .velnor-heart-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.2vw, 18px);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
 }

 .velnor-heart-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 12% 10%, rgba(88, 101, 242, 0.10), rgba(0,0,0,0) 58%),
    radial-gradient(120% 120% at 88% 40%, rgba(72, 199, 255, 0.07), rgba(0,0,0,0) 62%);
  opacity: 1;
 }

 .velnor-heart-card > * {
  position: relative;
  z-index: 1;
 }

 .velnor-heart-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--spacing-md);
 }

 .velnor-heart-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
 }

 .velnor-heart-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 10px rgba(148,163,184,0.55);
 }

 .velnor-heart-section.vhn-online .velnor-heart-badge-dot {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.55);
 }

 .velnor-heart-section.vhn-offline .velnor-heart-badge-dot {
  background: #ff4757;
  box-shadow: 0 0 10px rgba(255,71,87,0.55);
 }

 .velnor-heart-badge-text {
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
 }

 .velnor-heart-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(88,101,242,0.40);
  background: linear-gradient(135deg, rgba(88,101,242,0.22), rgba(72,199,255,0.12));
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 800;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, filter 220ms ease;
 }

 .velnor-heart-join:hover {
  transform: translateY(-1px);
  border-color: rgba(88,101,242,0.70);
  filter: brightness(1.05);
 }

 .velnor-heart-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
 }

 .velnor-heart-stat {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.08);
 }

 .velnor-heart-stat-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
 }

 .velnor-heart-stat-value {
  margin-top: 4px;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
 }

 .velnor-heart-stat-value.vhn-typing,
 .velnor-heart-badge-text.vhn-typing,
 .velnor-heart-note.vhn-typing {
  position: relative;
 }

 .velnor-heart-stat-value.vhn-typing::after,
 .velnor-heart-badge-text.vhn-typing::after,
 .velnor-heart-note.vhn-typing::after {
  content: "|";
  display: inline-block;
  margin-left: 2px;
  transform: translateY(-0.06em);
  opacity: 0.95;
  color: color-mix(in srgb, var(--text-primary), transparent 12%);
  animation: vhn-caret-blink 860ms steps(1, end) infinite;
 }

 @keyframes vhn-caret-blink {
  0%, 49% { opacity: 0.05; }
  50%, 100% { opacity: 0.95; }
 }

 .velnor-heart-note {
  margin-top: var(--spacing-md);
  color: var(--text-secondary);
  opacity: 0.88;
  text-align: center;
 }

 .velnor-heart-side-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--text-primary);
 }

 .velnor-heart-side-text {
  margin: 10px 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
 }

 .velnor-heart-side-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--spacing-md);
 }

 .velnor-heart-card.vhn-side {
  position: relative;
 }

 .velnor-heart-corner-gif {
  position: absolute;
  top: 200px;
  right: 0px;
  width: 160px;
  height: auto;
  opacity: 0.42;
  pointer-events: none;
  filter:
   drop-shadow(0 0 26px rgba(56, 189, 248, 0.10))
   drop-shadow(0 0 34px rgba(168, 85, 247, 0.08));
  z-index: 10;
 }

 @media (max-width: 900px) {
  .velnor-heart-corner-gif {
   width: 180px;
   top: -80px;
   right: -40px;
  }
 }

 @media (max-width: 520px) {
  .velnor-heart-corner-gif {
   width: 140px;
   top: -60px;
   right: -30px;
  }
 }

 .velnor-heart-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 800;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, color 220ms ease;
 }

 .velnor-heart-link:hover {
  transform: translateY(-1px);
  border-color: rgba(88,101,242,0.45);
  color: var(--text-primary);
 }

 @media (max-width: 900px) {
  .velnor-heart-header-inner {
   grid-template-columns: 1fr;
  }
  .velnor-heart-header-media {
   justify-content: center;
  }
  .velnor-heart-grid {
   grid-template-columns: 1fr;
  }
 }

 @media (max-width: 520px) {
  .velnor-heart-stats {
   grid-template-columns: 1fr;
  }
 }

 /* Kaioken: red/blue controls theme */
#kaioken-audio .player-controls.controls-twilight {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.9);
 }

 #kaioken-audio .player-controls.controls-twilight::before {
  background: linear-gradient(120deg, rgba(239, 68, 68, 0.78), rgba(34, 211, 238, 0.66));
 }

 #kaioken-audio .controls-twilight .pc-icon {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(239, 68, 68, 0.40);
 }

 #kaioken-audio .controls-twilight .pc-icon:hover {
  border-color: rgba(34, 211, 238, 0.85);
 }

 #kaioken-audio .controls-twilight .pc-icon.active {
  border-color: rgba(239, 68, 68, 0.70);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35) inset, 0 10px 22px rgba(0,0,0,0.28);
 }

 #kaioken-audio .controls-twilight .pc-icon::before {
  background: conic-gradient(from 0deg, #ef4444, #22d3ee, #ef4444);
 }

 #kaioken-audio .controls-twilight .pc-icon:focus-visible {
  outline: 2px solid rgba(239, 68, 68, 0.55);
  outline-offset: 2px;
 }

 #kaioken-audio .pc-range {
  accent-color: #ef4444;
 }

 #kaioken-audio .controls-twilight .range-twilight {
  background: linear-gradient(90deg, rgba(239,68,68,0.60) 0%, rgba(239,68,68,0.60) var(--p, 60%), rgba(255,255,255,0.20) var(--p, 60%));
 }

 #kaioken-audio .controls-twilight .range-twilight::-webkit-slider-thumb {
  background: linear-gradient(135deg, #ef4444, #22d3ee);
  box-shadow: 0 0 10px rgba(239,68,68,0.45), 0 0 18px rgba(34,211,238,0.28);
 }

 #kaioken-audio .controls-twilight .range-twilight::-moz-range-thumb {
  background: linear-gradient(135deg, #ef4444, #22d3ee);
  box-shadow: 0 0 10px rgba(239,68,68,0.45), 0 0 18px rgba(34,211,238,0.28);
 }

 #kaioken-audio .controls-twilight .range-twilight:focus-visible {
  outline: 2px solid rgba(239, 68, 68, 0.55);
  outline-offset: 2px;
 }

.featured-video-header .featured-modpacks-pill {
  justify-content: center;
}

.featured-video-header .featured-modpacks-pill-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#twilight-awakening .featured-video-header {
  justify-content: center;
}

/* ... */

/* Server status repositioning */
.featured-video-pill:hover .featured-video-pill-glow { opacity: 1; }

.yt-player-shell {
  background: transparent; /* avoid darkening the area when reaching video */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}
.yt-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: transparent; /* no base darkening */
  border-radius: 12px;
  overflow: hidden;
}
.yt-aspect::before {
  content: "";
  position: absolute;
  inset: -15% -25% -10% -25%;
  background: none;
  filter: none;
  opacity: 0;
  animation: nebulaFloat 18s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Animated twilight border: OUTSIDE the video, non-intrusive */
.yt-frame {
  position: relative;
  overflow: hidden;
}
.yt-frame::before {
  position: absolute;
  border-radius: inherit;

  /* Mask out the inside so only the border shows */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* Safari */
  mask-composite: exclude; /* Chrome/Firefox */
}

/* Video sits on top */
.yt-frame iframe,
.yt-frame video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Soft outer glow that follows the ring */
.yt-frame::after { content: none; }

/* Remove any nebula/glow overlay once the player is loaded so the video stays clean */
.yt-player-shell.loaded .yt-aspect::before,
.yt-player-shell.loaded .yt-aspect::after { display: none !important; }

/* Animate the angle only, keeping the panel static */
@property --twl-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes twl-angle-rotate { to { --twl-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .yt-aspect::after { animation: none; }
  .yt-frame::before,
  .yt-frame::after { animation: none; }
}

/* Consistent sizing for SVG icons in nav and twilight gate */
.nav .nav-icon .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.1em; }
@media (max-width: 768px) {
  .nav .nav-icon .icon { width: 1em; height: 1em; vertical-align: -0.1em; }
}
.yt-gate-icon .icon { width: 48px; height: 48px; display: inline-block; vertical-align: middle; }
@keyframes nebulaFloat {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2%, 1%, 0) scale(1.03); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.06); }
}
#twilight-awakening .player-caption > span:last-child {
  color: var(--accent-purple-1);
}



#memorial-awakening .player-caption > span:last-child {
  color: #fff;
}

.yt-iframe-target { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* Twilight Awakening: solid purple Load Video button */
#twilight-awakening #twl-load {
  background: #7c3aed;
  --accent-glow: rgba(168, 85, 247, 0.45);
  color: #f5f3ff;
  border: none;
}

#twilight-in-control #tci-load {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --accent-glow: rgba(34, 197, 94, 0.45);
  color: #ecfdf5;
  border: none;
}

#twilight-awakening #twl-load:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.95),
    0 0 20px rgba(168, 85, 247, 0.55);
}

#twilight-in-control #tci-load:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.95),
    0 0 20px rgba(34, 197, 94, 0.45);
}

/* Twilight Awakening: controls in matching blue/purple glass */
#twilight-awakening .player-controls.controls-twilight {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 255, 0.55);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.9);
}

#twilight-in-control .player-controls.controls-twilight {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.9);
}

#twilight-awakening .player-controls.controls-twilight::before {
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.8), rgba(99, 102, 241, 0.8));
}

#twilight-in-control .player-controls.controls-twilight::before {
  background: linear-gradient(120deg, rgba(34, 197, 94, 0.8), rgba(250, 204, 21, 0.8));
}

#twilight-awakening .controls-twilight .pc-icon {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 255, 0.6);
}

#twilight-in-control .controls-twilight .pc-icon {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(52, 211, 153, 0.6);
}

#twilight-awakening .controls-twilight .pc-icon:hover {
  border-color: rgba(129, 140, 248, 0.95);
}

#twilight-in-control .controls-twilight .pc-icon:hover {
  border-color: rgba(250, 204, 21, 0.95);
}

#twilight-awakening .controls-twilight .pc-icon::before {
  background: conic-gradient(from 0deg, #38bdf8, #6366f1, #a855f7, #38bdf8);
}

#twilight-in-control .controls-twilight .pc-icon::before {
  background: conic-gradient(from 0deg, #22c55e, #facc15, #22d3ee, #22c55e);
}

#twilight-awakening .pc-range {
  accent-color: #38bdf8;
}

#twilight-in-control .pc-range {
  accent-color: #22c55e;
}

#twilight-awakening .controls-twilight .range-twilight {
  background: linear-gradient(90deg, rgba(56,189,248,0.55) 0%, rgba(56,189,248,0.55) var(--p, 60%), rgba(255,255,255,0.20) var(--p, 60%));
}

#twilight-in-control .controls-twilight .range-twilight {
  background: linear-gradient(90deg, rgba(34,197,94,0.55) 0%, rgba(34,197,94,0.55) var(--p, 60%), rgba(255,255,255,0.20) var(--p, 60%));
}

#twilight-awakening .controls-twilight .range-twilight::-webkit-slider-thumb {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
}

#twilight-awakening .controls-twilight .range-twilight::-moz-range-thumb {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
}

#twilight-in-control .controls-twilight .range-twilight::-webkit-slider-thumb {
  background: linear-gradient(135deg, #22c55e, #facc15);
}

#twilight-in-control .controls-twilight .range-twilight::-moz-range-thumb {
  background: linear-gradient(135deg, #22c55e, #facc15);
}

#memorial-awakening .player-controls.controls-twilight {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(229, 231, 235, 0.35);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.9);
}

#memorial-awakening .player-controls.controls-twilight::before {
  background: linear-gradient(120deg, rgba(243, 244, 246, 0.55), rgba(156, 163, 175, 0.45));
}

#memorial-awakening .controls-twilight .pc-icon {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(229, 231, 235, 0.35);
}

#memorial-awakening .controls-twilight .pc-icon:hover {
  border-color: rgba(243, 244, 246, 0.75);
}

#memorial-awakening .controls-twilight .pc-icon::before {
  background: conic-gradient(from 0deg, #f3f4f6, #9ca3af, #e5e7eb, #f3f4f6);
}

#memorial-awakening .pc-range {
  accent-color: #e5e7eb;
}

.player-controls {
  margin-top: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.player-controls.controls-twilight {
  position: relative;
  padding: 12px 14px;
  border-radius: 14px;
  /* Reduce darkening: make background ultra‑light glass and remove blur */
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Overlay controls positioning - smaller and more transparent */
.player-controls.controls-overlay {
  position: absolute;
  bottom: 20px !important; /* raised to avoid YouTube watermark area */
  top: auto !important; /* never stick to the top */
  left: 50%;
  right: auto;
  --overlay-ty: 0px;
  transform: translateX(-50%) translateY(var(--overlay-ty));
  width: fit-content;
  max-width: calc(100% - 24px);
  margin-top: 0;
  z-index: 10;
  /* Slightly darker on the right to mask the YouTube logo behind our overlay */
  padding: 8px 12px;
  flex-wrap: nowrap;
 }

/* Keep overlay controls compact: remove spacer that splits the bar */
.player-controls.controls-overlay .pc-spacer {
  display: none;
 }

/* Occlude YouTube watermark behind the controls (bottom-right) */
.player-controls.controls-overlay::after {
  content: none; /* disable mask (fallback kept below but will not render) */
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 190px;
  height: 70px;
  pointer-events: none;
  /* Radial plate that is most opaque at the corner and fades inward */
  background: radial-gradient(140px 70px at right bottom,
    rgba(0,0,0,0.96) 0%,
    rgba(0,0,0,0.90) 55%,
    rgba(0,0,0,0.75) 75%,
    rgba(0,0,0,0.00) 100%
  );
  border-bottom-right-radius: 8px;
  filter: saturate(0.9);
  opacity: 0; /* hidden by default */
  transition: opacity .25s ease;
}

/* Only show occluder while controls are visible or when paused */
.yt-player-shell.controls-visible .player-controls.controls-overlay::after,
.yt-player-shell.paused.loaded .player-controls.controls-overlay::after { opacity: 1; }

/* Controls are allowed to render at all times; JS will auto-hide/show */
.player-controls.controls-twilight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px; /* gradient hairline border */
  background: linear-gradient(120deg, rgba(138, 92, 255, 0.6), rgba(34, 197, 94, 0.45));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.65;
}
.pc-btn {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 700;
  line-height: 1;
  transition: background 160ms ease, transform 120ms ease, border-color 160ms ease;
  cursor: pointer;
}
.pc-btn:hover { background: var(--surface-hover); border-color: var(--border-hover); transform: translateY(-1px); }
.pc-btn:active { transform: translateY(0); }
.pc-range { width: clamp(90px, 22vw, 180px); accent-color: var(--accent-primary); }
.pc-spacer { flex: 1; }
.player-caption { margin-top: var(--spacing-sm); color: var(--text-secondary); opacity: 0.9; text-align: center; }

/* Twilight control buttons – smaller, more transparent */
.controls-twilight .pc-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  min-width: 32px; min-height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.controls-twilight .pc-icon:hover {
  transform: translateY(-1px);
  border-color: rgba(138,92,255,0.35);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
.controls-twilight .pc-icon:active { transform: translateY(0); }
.controls-twilight .pc-icon.active {
  border-color: rgba(138,92,255,0.6);
  box-shadow: 0 0 0 1px rgba(138,92,255,0.35) inset, 0 10px 22px rgba(0,0,0,0.28);
}
.controls-twilight .pc-icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, #ffd700, #7c3aed, #ffd700);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .18s ease;
}
.controls-twilight .pc-icon:hover::before, .controls-twilight .pc-icon.active::before { opacity: 0.4; }

/* Tooltips */
.controls-twilight .pc-icon[data-tip] { position: relative; }
.controls-twilight .pc-icon[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%) translateY(6px);
  padding: 6px 8px;
  background: rgba(15,17,25,0.9);
  color: #fff; font-size: 12px; letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.controls-twilight .pc-icon:hover::after, .controls-twilight .pc-icon:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Volume slider (twilight) - smaller and more subtle */
.controls-twilight .range-twilight {
  appearance: none;
  height: 6px;
  width: clamp(80px, 20vw, 160px);
  background: linear-gradient(90deg, rgba(138,92,255,0.5) 0%, rgba(138,92,255,0.5) var(--p, 60%), rgba(255,255,255,0.2) var(--p, 60%));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  outline: none; cursor: pointer;
}
.controls-twilight .range-twilight::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #8a5cff, #22c55e);
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 10px rgba(138,92,255,0.5), 0 0 18px rgba(34,197,94,0.3);
}
.controls-twilight .range-twilight::-moz-range-thumb {
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: linear-gradient(135deg, #8a5cff, #22c55e);
  box-shadow: 0 0 10px rgba(138,92,255,0.5), 0 0 18px rgba(34,197,94,0.3);
}
.controls-twilight .range-twilight:focus-visible { outline: 2px solid rgba(138,92,255,0.45); outline-offset: 2px; }

/* Accessible focus ring for icons */
.controls-twilight .pc-icon:focus-visible {
  outline: 2px solid rgba(138,92,255,0.45);
  outline-offset: 2px;
}

/* Gate overlay */
.yt-gate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: none; /* keep nebula visible; no darkening */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 3;
}
.yt-player-shell.loaded .yt-gate,
.yt-player-shell.error .yt-gate { 
  display: none !important; 
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide controls until the player is loaded */
.yt-player-shell:not(.loaded) .player-controls.controls-overlay {
  display: none !important;
}

/* Keep controls hidden during loading; they will appear on ready */
.yt-player-shell.loading .player-controls.controls-overlay { display: none !important; }
.yt-aspect:has(.yt-iframe-target iframe) .yt-gate {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* When loaded, always show the overlay controls */
.yt-player-shell.loaded .player-controls.controls-overlay {
  display: flex !important; /* let visibility be controlled by visible/hidden classes */
}
.yt-gate-inner { text-align: center; padding: 14px 18px; }
.yt-gate-icon { font-size: 2rem; margin-bottom: 10px; filter: drop-shadow(0 0 8px rgba(164,94,255,0.5)); }
.yt-gate-note { margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary); opacity: 0.9; }

/* Fallback overlay (shown when embedding is blocked) */
.yt-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: none; /* keep area bright if fallback shows */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 4; /* Above gate and border ring */
}
.yt-player-shell.error .yt-fallback { display: grid; }

/* Branded loading animations */
@keyframes twilightPulse {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1);
    box-shadow: 0 0 20px rgba(138,92,255,0.3);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(138,92,255,0.6), 0 0 50px rgba(34,197,94,0.3);
  }
}

@keyframes magicOrb {
  0% { transform: rotate(0deg) translateX(0px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(15px) rotate(-360deg); }
}

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

/* Enhanced Load Video button loading state */
.yt-player-shell.loading #twl-load {
  pointer-events: none;
  position: relative;
  background: linear-gradient(135deg, rgba(138,92,255,0.2), rgba(34,197,94,0.2));
  animation: twilightPulse 2s ease-in-out infinite;
  overflow: hidden;
}

.yt-player-shell.loading #twl-load::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: inherit;
}

.yt-player-shell.loading #twl-load::after {
  display: none;
}

.yt-player-shell.loading #tci-load {
  pointer-events: none;
  position: relative;
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(34,211,238,0.18));
  animation: twilightPulse 2s ease-in-out infinite;
  overflow: hidden;
}

.yt-player-shell.loading #tci-load::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: inherit;
}

.yt-player-shell.loading #tci-load::after {
  display: none;
}

/* Loading skeleton for video area - keep dark appearance */
.yt-player-shell.loading .yt-aspect::after {
  display: none;
}

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

/* Magical loading particles */
.yt-player-shell.loading .yt-gate::before {
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  background: rgba(138,92,255,0.8);
  border-radius: 50%;
  top: 20%; left: 20%;
  animation: floatParticle1 4s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(138,92,255,0.5);
}

.yt-player-shell.loading .yt-gate::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px;
  background: rgba(34,197,94,0.8);
  border-radius: 50%;
  top: 70%; right: 30%;
  animation: floatParticle2 3.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
}

@keyframes floatParticle1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  25% { transform: translate(20px, -15px) scale(1.2); opacity: 1; }
  50% { transform: translate(-10px, -30px) scale(0.8); opacity: 0.6; }
  75% { transform: translate(15px, -10px) scale(1.1); opacity: 0.9; }
}

@keyframes floatParticle2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33% { transform: translate(-25px, 20px) scale(1.3); opacity: 1; }
  66% { transform: translate(10px, -25px) scale(0.9); opacity: 0.8; }
}

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

/* Minimal, touch-friendly layout for mobile */
@media (max-width: 640px) {
  .player-controls.controls-twilight {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    margin-top: var(--spacing-sm);
  }

  .player-controls.controls-overlay {
    bottom: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(var(--overlay-ty));
    width: calc(100% - 24px);
    padding: 8px 12px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.7);
  }
  .controls-twilight .pc-icon {
    width: 36px; height: 36px;
    min-width: 36px; min-height: 36px;
    font-size: 0.9rem;
    margin: 0 2px;
  }
  .controls-twilight .range-twilight {
    width: clamp(120px, 35vw, 200px);
    height: 6px;
    margin: 0 4px;
  }
  /* Hide less-used controls on very small screens */
  #twl-stop, #twl-vol-down, #twl-vol-up, #tci-stop, #tci-vol-down, #tci-vol-up, #mem-stop, #mem-vol-down, #mem-vol-up { display: none; }

  /* Ensure proper spacing in video container */
  .yt-player-shell {
    margin-bottom: var(--spacing-md);
  }
}

/* Disable hover tooltips on touch devices */
@media (hover: none) {
  .controls-twilight .pc-icon[data-tip]::after { display: none !important; }
}

 /* Fullscreen styles (all devices) */
 .yt-player-shell:-webkit-full-screen,
 .yt-player-shell:fullscreen {
   width: 100vw !important;
   height: 100vh !important;
   max-width: none !important;
   max-height: none !important;
   margin: 0 !important;
   padding: 0 !important;
   border: 0 !important;
   border-radius: 0 !important;
   background: #000 !important;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 9999 !important;
   overflow: hidden !important;
 }
 
 .yt-player-shell:-webkit-full-screen .yt-aspect,
 .yt-player-shell:fullscreen .yt-aspect {
   width: 100vw !important;
   height: 100vh !important;
   padding-bottom: 0 !important;
   position: relative !important;
   border-radius: 0 !important;
   background: #000 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
 }
 
 .yt-player-shell:-webkit-full-screen .yt-iframe-target,
 .yt-player-shell:fullscreen .yt-iframe-target {
   position: relative !important;
   /* Preserve aspect ratio: center a 16:9 surface within the viewport */
   width: min(100vw, calc(100vh * 16 / 9)) !important;
   height: min(100vh, calc(100vw * 9 / 16)) !important;
   margin: 0 !important;
   padding: 0 !important;
 }
 
 .yt-player-shell:-webkit-full-screen iframe,
 .yt-player-shell:fullscreen iframe {
   width: 100% !important;
   height: 100% !important;
   min-width: 0 !important;
   min-height: 0 !important;
   position: relative !important;
   margin: 0 !important;
   padding: 0 !important;
   border: 0 !important;
   transform: none !important;
 }
 
 .yt-player-shell:-webkit-full-screen .player-controls.controls-overlay,
 .yt-player-shell:fullscreen .player-controls.controls-overlay {
   position: fixed !important;
   left: 50% !important;
   right: auto !important;
   transform: translateX(-50%) !important;
   width: min(900px, calc(100vw - 24px)) !important;
   bottom: calc(14px + env(safe-area-inset-bottom)) !important;
   background: rgba(0, 0, 0, 0.75) !important;
   backdrop-filter: blur(10px) !important;
   z-index: 10000 !important;
 }

/* Mobile fullscreen styles - aggressive approach */
@media (max-width: 768px) {
  .yt-player-shell:-webkit-full-screen,
  .yt-player-shell:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    overflow: hidden !important;
  }
  
  .yt-player-shell:-webkit-full-screen *,
  .yt-player-shell:fullscreen * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  
  .yt-player-shell:-webkit-full-screen .yt-aspect,
  .yt-player-shell:fullscreen .yt-aspect {
    width: 100vw !important;
    height: 100vh !important;
    padding-bottom: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .yt-player-shell:-webkit-full-screen .yt-iframe-target,
  .yt-player-shell:fullscreen .yt-iframe-target {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* Preserve aspect ratio: center a 16:9 surface within the viewport */
    width: min(100vw, calc(100vh * 16 / 9)) !important;
    height: min(100vh, calc(100vw * 9 / 16)) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .yt-player-shell:-webkit-full-screen iframe,
  .yt-player-shell:fullscreen iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
  }
  
  .yt-player-shell:-webkit-full-screen .player-controls.controls-overlay,
  .yt-player-shell:fullscreen .player-controls.controls-overlay {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(900px, calc(100vw - 24px)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 10000 !important;
  }
}

/* Landscape orientation styles for mobile fullscreen */
@media (max-width: 768px) and (orientation: landscape) {
  .yt-player-shell:-webkit-full-screen,
  .yt-player-shell:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
  }
  
  .yt-player-shell:-webkit-full-screen .player-controls.controls-overlay,
  .yt-player-shell:fullscreen .player-controls.controls-overlay {
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: min(980px, calc(100vw - 40px)) !important;
    padding: 6px 12px !important;
  }
  
  .yt-player-shell:-webkit-full-screen .controls-twilight .pc-icon,
  .yt-player-shell:fullscreen .controls-twilight .pc-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 0.8rem !important;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .yt-player-shell.loading #twl-load,
  .yt-player-shell.loading .yt-aspect::after,
  .yt-player-shell.loading .yt-gate::before,
  .yt-player-shell.loading .yt-gate::after {
    animation: none !important;
  }
  .yt-player-shell.loading #twl-load::after {
    animation: spin 2s linear infinite;
  }
}

/* Auto-hide controls animation for overlay */
.player-controls.controls-overlay {
  opacity: 1;
  --overlay-ty: 0px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.yt-player-shell.controls-hidden .player-controls.controls-overlay {
  opacity: 0;
  --overlay-ty: 20px;
  pointer-events: none;
}

.yt-player-shell.controls-visible .player-controls.controls-overlay {
  opacity: 1;
  --overlay-ty: 0px;
  pointer-events: auto;
}

/* Show controls on hover over the entire player area */
.yt-player-shell:hover .player-controls.controls-overlay {
  opacity: 1;
  --overlay-ty: 0px;
  pointer-events: auto;
}

/* Ensure controls are always visible when video is paused or loading (but only if loaded) */
.yt-player-shell.paused.loaded .player-controls.controls-overlay,
.yt-player-shell.loading.loaded .player-controls.controls-overlay {
  opacity: 1;
  --overlay-ty: 0px;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .featured-video-title { font-size: 1.25rem; }
  .featured-video-pill { padding: var(--spacing-sm) var(--spacing-lg); }
}

/* New Community Achievements underline header + redesigned card grid styles for the new achievements-community markup, keeping legacy pill styles unused. */
.community-achievements-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.community-achievements-header-inner {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.community-achievements-header-inner .community-achievements-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, rgba(34,211,238,1), rgba(34,197,94,1), rgba(72,199,255,1));
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.community-achievements-underline {
  height: 2px;
  width: min(420px, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(34,211,238,0),
    rgba(34,211,238,0.95),
    rgba(34,197,94,0.90),
    rgba(72,199,255,0.90),
    rgba(34,211,238,0)
  );
  background-size: 220% 100%;
  animation: underline-rgb-breathe 30s ease-in-out infinite;
  opacity: 0.85;
}

.achievements-community {
  margin: var(--spacing-3xl) 0;
}

.community-achievements-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 18px);
}

@media (max-width: 980px) {
  .community-achievements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .community-achievements-grid {
    grid-template-columns: 1fr;
  }
}

.community-achievement-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2.4vw, 18px);
  overflow: hidden;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 260ms ease, filter 220ms ease;
  isolation: isolate;
}

.community-achievement-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 12% 10%, rgba(34, 211, 238, 0.10), rgba(0,0,0,0) 55%),
    radial-gradient(120% 120% at 88% 40%, rgba(34, 197, 94, 0.09), rgba(0,0,0,0) 60%);
  opacity: 1;
  z-index: 0;
}

.community-achievement-card::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,0.75), rgba(34,197,94,0.70), rgba(72,199,255,0.70), rgba(34,211,238,0));
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.community-achievement-card > * {
  position: relative;
  z-index: 1;
}

.community-achievement-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.30);
  filter: brightness(1.03);
}

.community-achievement-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.community-achievement-icon .icon {
  width: 30px;
  height: 30px;
  display: inline-block;
}

.community-achievement-title {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.community-achievement-desc {
  margin: 8px 0 0;
  text-align: center;
  color: var(--text-secondary);
  line-height: 1.5;
  opacity: 0.92;
}

/* Legacy pill styles - unused */
.community-achievements-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 211, 238, 0.12), rgba(255, 107, 53, 0.06));
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(34, 211, 238, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.community-achievements-pill-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.55));
}

.community-achievements-pill .community-achievements-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #22d3ee, #22c55e, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.community-achievements-pill-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(120% 140% at 25% 20%, rgba(34, 211, 238, 0.22), rgba(34, 197, 94, 0.16) 60%, rgba(0, 0, 0, 0.0) 100%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.community-achievements-pill:hover .community-achievements-pill-glow {
  opacity: 1;
}

@media (max-width: 768px) {
  .featured-modpacks-pill {
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: var(--spacing-xs);
  }
  
  .featured-modpacks-pill .featured-modpacks-title {
    font-size: 1.25rem;
  }
  
  .featured-modpacks-pill-icon {
    font-size: 1.25rem;
  }

  .community-achievements-pill {
    padding: var(--spacing-sm) var(--spacing-lg);
    gap: var(--spacing-xs);
  }
  
  .community-achievements-pill .community-achievements-title {
    font-size: 1.25rem;
  }
  
  .community-achievements-pill-icon {
    font-size: 1.25rem;
  }
}

/* Icon sizing for SVG replacements */
.badge-icon .icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
}

.featured-modpacks-pill-icon .icon,
.community-achievements-pill-icon .icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}

.reqs-main-icon .icon {
  width: 2rem;
  height: 2rem;
  display: inline-block;
}

.spec-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
}

.features-pill-icon .icon {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.dynamic-card-icon .icon {
  width: 3rem;
  height: 3rem;
  display: inline-block;
}

/* Privacy bullets: SVG icon sizing/alignment */
.privacy-bullet img {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto; /* center in both desktop and mobile bullets */
}
.contact-icon img {
  width: 20px;
  height: 20px;
  display: block;
}
.update-icon img {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -2px;
}

@media (max-width: 640px) {
  .page-privacy .privacy-item,
  .page-terms .privacy-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-sm);
  }
  .page-privacy .privacy-bullet,
  .page-terms .privacy-bullet {
    display: flex;                /* center the icon container */
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    align-self: center !important; /* override earlier flex-start */
  }
  .page-privacy .privacy-bullet img,
  .page-terms .privacy-bullet img {
    display: block;
    margin: 0 auto;               /* ensure the SVG centers inside */
  }
}

  /* Center the server status pill above card images on mobile only, to avoid overlap and match the previously centered placement. */
  @media (max-width: 540px) {
    /* Center the server status pill above the image on mobile */
    .card-grid:not(.featured-modpacks-grid) .card .server-status {
      left: 50%;
      right: auto;
      top: 6px; /* slightly higher per spec */
      transform: translateX(-50%);
    }
    /* Nudge image down a bit to avoid overlap with the pill */
    .card-grid:not(.featured-modpacks-grid) .card .card-image-wrapper {
      margin-top: 2px;
    }
  }

  /* Performance: defer rendering of large, below-the-fold sections until near viewport */
  .content-late {
    content-visibility: auto;
    contain-intrinsic-size: 800px 600px; /* reserve space to avoid layout shift */
  }

  /* Nixorite Terminal Overlay -------------------------------------------------- */
  .nebula-badge { cursor: pointer; }
  .nebula-badge:hover .emph { text-decoration-color: currentColor; }

  #nix-terminal-overlay,
  #nix-cheat-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none; /* toggled to flex when shown */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
  }
  #nix-terminal-overlay.show,
  #nix-cheat-overlay.show { display: flex; }

  .nix-term,
  .nix-cheat-card {
    width: min(720px, calc(100vw - 32px));
    max-height: min(70vh, 680px);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .nix-term-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0));
  }
  .nix-term-title { font-weight: 800; letter-spacing: 0.02em; }
  .nix-term-close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 32px; height: 32px; border-radius: 8px;
    cursor: pointer;
  }
  .nix-term-close:hover { color: var(--text-primary); border-color: var(--border-hover); }

  .nix-term-body { display: flex; flex-direction: column; padding: 12px; gap: 10px; }
  .nix-term-output {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95rem;
    line-height: 1.4;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    min-height: 160px;
    max-height: 420px;
    overflow: auto;
    white-space: pre-wrap;
  }
  .nix-term-output .ok { color: #34d399; }
  .nix-term-output .warn { color: #f59e0b; }
  .nix-term-output .err { color: #ff6b6b; }

  .nix-term-input-row { display: flex; align-items: center; gap: 8px; }
  .nix-term-prompt { color: var(--accent-primary); font-weight: 700; }
  #nix-term-input {
    flex: 1;
    min-height: 40px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    outline: none;
  }
  #nix-term-input::placeholder { color: var(--text-muted); }

  /* Cheat/Secret Gate card */
  .nix-cheat-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
  .nix-cheat-title { font-size: 1.15rem; font-weight: 800; }
  .nix-cheat-note { color: var(--text-secondary); }
  .nix-cheat-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .nix-btn { 
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-primary); cursor: pointer; text-decoration: none;
    min-height: 40px; min-width: 120px;
  }
  .nix-btn.primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-color: transparent; }
  .nix-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

  @media (max-width: 520px) {
    .nix-term, .nix-cheat-card { width: calc(100vw - 20px); }
    .nix-term-output { max-height: 300px; }
  }
/* Silver (Memorial) variant for the Load Video button */
.btn-primary.btn-silver {
  background: linear-gradient(135deg, #f3f4f6 0%, #9ca3af 100%); /* gray-100 -> gray-400 */
  --accent-glow: rgba(156, 163, 175, 0.35); /* subtle silver glow */
  color: #111111; /* better contrast on light silver */
}

/* Mobile sizing for Memorial Load Video button (match Twilight) */
@media (max-width: 768px) {
  .btn-primary.btn-silver,
  #mem-load {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.9rem;
  }
}

/* Memorial: silver nebula background instead of orange */
#memorial-awakening .yt-aspect::before {
  background:
    radial-gradient(70% 90% at 50% 10%, rgba(209,213,219,1), rgba(0,0,0,0) 70%);
}

/* Memorial loading state: mirror Twilight animations (silver theme) */
.yt-player-shell.loading #mem-load {
  pointer-events: none;
  position: relative;
  background: linear-gradient(135deg, rgba(243,244,246,0.2), rgba(156,163,175,0.2));
  animation: twilightPulse 2s ease-in-out infinite;
  overflow: hidden;
}
.yt-player-shell.loading #mem-load::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: inherit;
}
.yt-player-shell.loading #mem-load::after {
  display: none;
}

/* Mobile sizing parity for silver Load Video button */
@media (max-width: 768px) {
  .btn-primary.btn-silver,
  #mem-load {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.9rem;
  }
}

/* Memorial controls: ensure always clickable and above overlays */
#memorial-awakening .player-controls {
  z-index: 5;
  pointer-events: auto;
}
#memorial-awakening .player-controls .pc-icon,
#memorial-awakening .player-controls input[type=range] {
  pointer-events: auto;
}
#memorial-awakening .yt-iframe-target { z-index: 1; }
#memorial-awakening .yt-aspect::before,
#memorial-awakening .yt-aspect::after { pointer-events: none; }

/* Memorial controls: neutral white/silver theme (not blue/purple) */
#memorial-awakening .player-controls.controls-twilight {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(229, 231, 235, 0.35);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.9);
}

#memorial-awakening .player-controls.controls-twilight::before {
  background: linear-gradient(120deg, rgba(243, 244, 246, 0.55), rgba(156, 163, 175, 0.45));
}

#memorial-awakening .controls-twilight .pc-icon {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(229, 231, 235, 0.35);
}

#memorial-awakening .controls-twilight .pc-icon:hover {
  border-color: rgba(243, 244, 246, 0.75);
}

#memorial-awakening .controls-twilight .pc-icon::before {
  background: conic-gradient(from 0deg, #f3f4f6, #9ca3af, #e5e7eb, #f3f4f6);
}

#memorial-awakening .pc-range {
  accent-color: #e5e7eb;
}

#memorial-awakening .yt-frame { position: relative; }

/* Memorial should use the shared responsive overlay rules (no fixed left/right overrides) */
#memorial-awakening .player-controls.controls-overlay {
  pointer-events: auto;
}

@media (max-width: 640px) {
  #memorial-awakening .player-controls.controls-overlay {
    bottom: 12px;
  }
}

#memorial-awakening.paused .yt-iframe-target iframe + div,
#memorial-awakening.paused .yt-iframe-target ~ div {
  display: none !important; /* hide any overlay siblings YouTube injects */
}

/* Hard fallback: cover with a transparent layer when paused */
#memorial-awakening.paused .yt-aspect::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0); /* click-through cover */
  pointer-events: none;
}

/* Memorial: hide YouTube pause shelf by overlaying bottom area when paused */
#memorial-awakening.paused .yt-iframe-target{ position:absolute; z-index:2; }
#memorial-awakening.paused .yt-iframe-target::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 38%;
  background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.0) 100%);
  pointer-events: none;
  z-index:3;
}

/* Memorial: strong mask to hide YouTube 'More videos' pause shelf */
#memorial-awakening { position: relative; }
#memorial-awakening.paused::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Cover bottom area where the shelf renders */
  height: 44%;
  background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.0) 100%);
  z-index: 9; /* above iframe (z:1) and below controls (z:10) */
  pointer-events: none;
}
/* Keep controls above the mask while paused */
#memorial-awakening.paused .player-controls.controls-overlay { z-index: 11; }

@media (max-width: 768px) {
  #memorial-awakening.paused::after { height: 52%; }
}

/* Memorial pause cover: clean thumbnail, no dark overlay */
#memorial-awakening .yt-pause-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: none;
  z-index: 8; /* below controls (10), above iframe (1) */
}
#memorial-awakening.paused .yt-pause-cover { display: block !important; }
#memorial-awakening.paused .yt-iframe-target { visibility: hidden !important; }

/* Disable previous dark masks on pause */
#memorial-awakening.paused::after,
#memorial-awakening.paused .yt-aspect::after,
#memorial-awakening.paused .yt-iframe-target::after { content: none !important; background: none !important; }

/* Reset Memorial to be identical to Twilight: remove any paused overlays/covers */
#memorial-awakening.paused::after,
#memorial-awakening.paused .yt-aspect::after,
#memorial-awakening.paused .yt-iframe-target::after,
#memorial-awakening .yt-pause-cover { display: none !important; background: none !important; height: 0 !important; }
#memorial-awakening.paused .yt-iframe-target { visibility: visible !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; }

/* Nixorite Terminal  site-aligned design */
#nix-terminal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 26, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1200;
}
#nix-terminal-overlay.show { display: flex; animation: fadeIn 200ms ease-out; }

/* Prevent body scroll when overlay open */
.no-scroll { overflow: hidden !important; }

html.technoblade-crash {
  --tb-sx: 0px;
  --tb-sy: 0px;
  --tb-hue: 0;
  --tb-g: 0.0;
}

html.technoblade-crash body {
  overflow-x: hidden;
}

html.technoblade-crash .header {
  z-index: 200;
}

#technoblade-crash-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(110% 90% at 50% 15%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 55%),
    radial-gradient(90% 70% at 30% 85%, rgba(255, 0, 92, 0.14), rgba(0, 0, 0, 0) 55%),
    radial-gradient(90% 70% at 70% 85%, rgba(0, 224, 255, 0.14), rgba(0, 0, 0, 0) 55%),
    rgba(0, 0, 0, 0.05);
  opacity: 0.92;
  mix-blend-mode: normal;
}

#technoblade-crash-overlay::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 1px,
      rgba(0, 0, 0, 0) 3px,
      rgba(0, 0, 0, 0) 6px
    );
  opacity: 0.30;
  transform: translate3d(var(--tb-sx), var(--tb-sy), 0);
}

#technoblade-crash-overlay::after {
  content: "";
  position: absolute;
  inset: -12%;
  filter: saturate(1.30) contrast(1.20);
}

.technoblade-crash-p {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.98); /* Increased base color opacity */
  opacity: 0.98; /* Increased overall opacity */
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.70)) contrast(1.30); /* Stronger shadow */
  animation: tbParticle 2.6s ease-out forwards;
}

@keyframes tbParticle {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--tb-r, 0deg)) scale(calc(var(--tb-s, 1) * 0.9)); }
  10% { opacity: 0.98; } /* Increased opacity at 10% */
  100% { opacity: 0; transform: translate3d(var(--tb-dx, 0px), var(--tb-dy, 0px), 0) rotate(var(--tb-r, 0deg)) scale(var(--tb-s, 1)); }
}

html.technoblade-crash-s1 body {
  filter: none;
}

html.technoblade-crash-s2 body {
  filter: contrast(1.05) saturate(1.12);
}

html.technoblade-crash main,
html.technoblade-crash section,
html.technoblade-crash footer {
  transform: translate3d(0,0,0);
  will-change: transform, filter;
}

html.technoblade-crash-s2 main,
html.technoblade-crash-s2 section,
html.technoblade-crash-s2 footer {
  animation: tbWobble1 420ms ease-in-out infinite;
}

html.technoblade-crash-s3 main,
html.technoblade-crash-s3 section,
html.technoblade-crash-s3 footer {
  animation: tbWobble2 260ms ease-in-out infinite;
  filter: blur(0.15px) contrast(1.02);
}

html.technoblade-crash-s4 main,
html.technoblade-crash-s4 section,
html.technoblade-crash-s4 footer {
  animation: tbWobble3 160ms linear infinite;
  filter: blur(0.25px) contrast(1.04);
}

@keyframes tbWobble1 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(0.6px, -0.4px, 0) rotate(0.02deg); }
  50% { transform: translate3d(-0.5px, 0.7px, 0) rotate(-0.03deg); }
  75% { transform: translate3d(0.3px, 0.3px, 0) rotate(0.02deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes tbWobble2 {
  0% { transform: translate3d(0, 0, 0) skewX(0deg) skewY(0deg); }
  20% { transform: translate3d(1.2px, -0.8px, 0) skewX(0.12deg) skewY(-0.10deg); }
  40% { transform: translate3d(-1.0px, 0.9px, 0) skewX(-0.14deg) skewY(0.10deg); }
  60% { transform: translate3d(0.8px, 0.5px, 0) skewX(0.10deg) skewY(0.08deg); }
  80% { transform: translate3d(-0.6px, -0.6px, 0) skewX(-0.10deg) skewY(-0.10deg); }
  100% { transform: translate3d(0, 0, 0) skewX(0deg) skewY(0deg); }
}

@keyframes tbWobble3 {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) skewX(0deg); }
  10% { transform: translate3d(2.2px, -1.2px, 0) rotate(0.05deg) skewX(0.25deg); }
  20% { transform: translate3d(-1.6px, 1.8px, 0) rotate(-0.06deg) skewX(-0.22deg); }
  30% { transform: translate3d(1.4px, 1.0px, 0) rotate(0.04deg) skewX(0.18deg); }
  40% { transform: translate3d(-2.0px, -1.0px, 0) rotate(-0.05deg) skewX(-0.20deg); }
  50% { transform: translate3d(0.8px, -1.8px, 0) rotate(0.05deg) skewX(0.22deg); }
  60% { transform: translate3d(-1.0px, 1.2px, 0) rotate(-0.04deg) skewX(-0.18deg); }
  70% { transform: translate3d(1.8px, 0.6px, 0) rotate(0.04deg) skewX(0.19deg); }
  80% { transform: translate3d(-1.4px, -1.4px, 0) rotate(-0.05deg) skewX(-0.21deg); }
  90% { transform: translate3d(0.9px, 1.6px, 0) rotate(0.04deg) skewX(0.17deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) skewX(0deg); }
}

html.technoblade-crash-s3 #technoblade-crash-overlay,
html.technoblade-crash-s4 #technoblade-crash-overlay {
  animation: tbOverlayFlicker 420ms steps(2, end) infinite;
}

@keyframes tbOverlayFlicker {
  0% { opacity: 0.92; }
  50% { opacity: 0.96; }
  100% { opacity: 0.90; }
}

@media (prefers-reduced-motion: reduce) {
  html.technoblade-crash-s3 #technoblade-crash-overlay,
  html.technoblade-crash-s4 #technoblade-crash-overlay {
    animation: none !important;
  }
  html.technoblade-crash-s2 main,
  html.technoblade-crash-s2 section,
  html.technoblade-crash-s2 footer,
  html.technoblade-crash-s3 main,
  html.technoblade-crash-s3 section,
  html.technoblade-crash-s3 footer,
  html.technoblade-crash-s4 main,
  html.technoblade-crash-s4 section,
  html.technoblade-crash-s4 footer {
    animation: none !important;
    filter: none !important;
  }
  .technoblade-crash-p {
    animation: none !important;
    opacity: 0.0 !important;
  }
}

.nix-term {
  width: clamp(340px, 86vw, 760px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15, 20, 25, 0.85), rgba(15, 20, 25, 0.92));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  overflow: hidden;
  position: relative;
}
/* Gradient hairline border */
.nix-term::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255,107,53,0.35), rgba(250,204,21,0.25), rgba(34,197,94,0.30), rgba(164,94,255,0.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.55;
}

.nix-term-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.gradient-text {
  background: linear-gradient(90deg, #5f72be, #9667e0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nix-term-title {
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-purple-1));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.nix-term-close {
  appearance: none; border: 1px solid var(--border); background: rgba(255,255,255,0.06);
  color: var(--text-primary); width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  transition: transform .12s ease, border-color .18s ease, background .18s ease;
}
.nix-term-close:hover { transform: translateY(-1px); border-color: var(--border-hover); background: rgba(255,255,255,0.10); }

.nix-term-body { padding: 12px 14px 14px; }

#nix-term-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  max-height: min(48vh, 420px);
  overflow: auto;
  padding: 10px 10px;
  margin: 0 0 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 10px;
}
#nix-term-output > .ok   { color: #86efac; }
#nix-term-output > .warn { color: #fde68a; }
#nix-term-output > .err  { color: #fca5a5; }

.nix-term-input-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.nix-term-prompt {
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--accent-purple-1), var(--accent-green));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
#nix-term-input {
  flex: 1; min-width: 140px; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-weight: 600;
  caret-color: var(--accent-primary);
}
#nix-term-input::placeholder { color: var(--text-muted); opacity: .85; font-weight: 500; }

/* Overlay focus ring when typing */
#nix-term-input:focus-visible { outline: none; }
.nix-term-input-row:focus-within { box-shadow: none; }

/* Cheat overlay alignment (minor polish) */
#nix-cheat-overlay .nix-cheat-card {
  background: linear-gradient(180deg, rgba(15,20,25,0.92), rgba(15,20,25,0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Center terminal title with grid while keeping close button on right */
#nix-terminal-overlay .nix-term-header { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
#nix-terminal-overlay .nix-term-title { grid-column: 2; justify-self: center; text-align: center; }
#nix-terminal-overlay .nix-term-close { grid-column: 3; justify-self: end; }

#admin-editor-toolbar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px;
  width: min(420px, calc(100vw - 24px));
  background: rgba(15, 20, 25, 0.86);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.admin-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-editor-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, background 180ms ease, border-color 180ms ease;
}

.admin-editor-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--border-hover);
}

.admin-editor-btn:active {
  transform: translateY(0);
}

.admin-editor-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-editor-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

#admin-editor-toolbar input[type="checkbox"] {
  transform: translateY(1px);
}

#admin-editor-toolbar input[type="text"],
#admin-editor-toolbar input[type="number"] {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  outline: none;
}

#admin-editor-toolbar input[type="text"] { width: min(360px, 100%); }
#admin-editor-toolbar input[type="number"] { width: 90px; }

#admin-editor-toolbar input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
}

html.admin-editing [data-admin-key] {
  cursor: move;
}

html.admin-editing [data-admin-key]:active {
  cursor: grabbing;
}

html.admin-editing [data-admin-key].admin-selected {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}