/* pixel-bg.css — CSS-only pixel art backgrounds */
.bg-pixel-stars {
  background-color: #0a0e1a;
  background-image:
    radial-gradient(1.5px 1.5px at 3% 7%, #fff 100%, transparent),
    radial-gradient(1px 1px at 8% 23%, #fbbf24 100%, transparent),
    radial-gradient(2px 2px at 15% 45%, #60a5fa 100%, transparent),
    radial-gradient(1px 1px at 22% 68%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 30% 88%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 38% 12%, #fff 100%, transparent),
    radial-gradient(2px 2px at 45% 34%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 52% 55%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 58% 77%, #60a5fa 100%, transparent),
    radial-gradient(1px 1px at 65% 95%, #fff 100%, transparent),
    radial-gradient(2px 2px at 72% 18%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 78% 40%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 85% 62%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 92% 83%, #fff 100%, transparent),
    radial-gradient(2px 2px at 97% 5%, #60a5fa 100%, transparent),
    radial-gradient(1px 1px at 5% 50%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 12% 72%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 20% 92%, #fff 100%, transparent),
    radial-gradient(2px 2px at 28% 15%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 35% 38%, #60a5fa 100%, transparent),
    radial-gradient(1.5px 1.5px at 42% 60%, #fff 100%, transparent),
    radial-gradient(1px 1px at 50% 82%, #fbbf24 100%, transparent),
    radial-gradient(2px 2px at 57% 3%, #fff 100%, transparent),
    radial-gradient(1px 1px at 63% 28%, #a78bfa 100%, transparent),
    radial-gradient(1.5px 1.5px at 70% 52%, #fff 100%, transparent),
    radial-gradient(1px 1px at 76% 72%, #60a5fa 100%, transparent),
    radial-gradient(2px 2px at 83% 90%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 90% 10%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 95% 35%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 100% 58%, #fff 100%, transparent),
    radial-gradient(0.5px 0.5px at 10% 15%, rgba(255,255,255,0.4) 100%, transparent),
    radial-gradient(0.5px 0.5px at 25% 30%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(0.5px 0.5px at 40% 50%, rgba(255,255,255,0.4) 100%, transparent),
    radial-gradient(0.5px 0.5px at 55% 65%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(0.5px 0.5px at 70% 80%, rgba(255,255,255,0.4) 100%, transparent),
    radial-gradient(0.5px 0.5px at 85% 10%, rgba(255,255,255,0.3) 100%, transparent);
  background-size: 100% 100%;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.85; }
  100% { opacity: 1; }
}

.bg-pixel-grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px),
    linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 8px 8px, 8px 8px;
  position: relative;
}

.bg-pixel-grid::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(59,130,246,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(99,102,241,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.bg-pixel-checker {
  background-color: #0f172a;
  background-image:
    conic-gradient(from 0deg at 50% 50%, #1e293b 0deg 90deg, transparent 90deg 180deg, #1e293b 180deg 270deg, transparent 270deg 360deg),
    conic-gradient(from 45deg at 50% 50%, rgba(99,102,241,0.04) 0deg 90deg, transparent 90deg 180deg, rgba(99,102,241,0.04) 180deg 270deg, transparent 270deg 360deg);
  background-size: 20px 20px, 10px 10px;
  background-position: 0 0, 0 0;
}

.bg-pixel-circuit {
  background-color: #050d1a;
  background-image:
    linear-gradient(90deg, transparent 7px, #3b82f6 7px 8px, transparent 8px),
    linear-gradient(transparent 7px, #3b82f6 7px 8px, transparent 8px),
    linear-gradient(90deg, transparent 15px, #60a5fa 15px 16px, transparent 16px),
    linear-gradient(transparent 15px, #60a5fa 15px 16px, transparent 16px),
    linear-gradient(90deg, transparent 23px, #2563eb 23px 24px, transparent 24px),
    linear-gradient(transparent 23px, #2563eb 23px 24px, transparent 24px),
    radial-gradient(2px 2px at 0 0, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 8px 8px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 16px 0, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 24px 8px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 0 16px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 8px 24px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 16px 16px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 24px 24px, #93c5fd 100%, transparent);
  background-size: 32px 32px;
  position: relative;
}

.bg-pixel-circuit::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(59,130,246,0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 75%, rgba(99,102,241,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(37,99,235,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.bg-pixel-diamond {
  background-color: #0f172a;
  background-image:
    conic-gradient(from 45deg at 50% 50%, transparent 0deg 90deg, #1e293b 90deg 180deg, transparent 180deg 270deg, #1e293b 270deg 360deg),
    conic-gradient(from 0deg at 50% 50%, transparent 0deg 90deg, rgba(59,130,246,0.04) 90deg 180deg, transparent 180deg 270deg, rgba(59,130,246,0.04) 270deg 360deg);
  background-size: 32px 32px, 16px 16px;
  position: relative;
}

.bg-pixel-diamond::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(99,102,241,0.03) 8px, rgba(99,102,241,0.03) 9px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(99,102,241,0.03) 8px, rgba(99,102,241,0.03) 9px);
  background-size: 16px 16px;
  pointer-events: none;
}

.bg-pixel-rain {
  background-color: #080e1a;
  background-image:
    linear-gradient(transparent 3px, rgba(59,130,246,0.25) 3px 4px, transparent 4px),
    linear-gradient(transparent 5px, rgba(96,165,250,0.2) 5px 6px, transparent 6px),
    linear-gradient(transparent 7px, rgba(147,197,253,0.15) 7px 8px, transparent 8px),
    linear-gradient(90deg, transparent 3px, rgba(59,130,246,0.06) 3px 4px, transparent 4px),
    linear-gradient(90deg, transparent 5px, rgba(96,165,250,0.04) 5px 6px, transparent 6px);
  background-size: 100% 20px, 100% 28px, 100% 36px, 20px 100%, 28px 100%;
  animation: rain-drop 1.2s linear infinite;
  position: relative;
}

.bg-pixel-rain::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(transparent 2px, rgba(147,197,253,0.12) 2px 3px, transparent 3px);
  background-size: 100% 12px;
  animation: rain-drop 0.8s linear infinite;
  pointer-events: none;
}

@keyframes rain-drop {
  0% { background-position: 0 0, 8px 0, 4px 0, 0 0, 0 0; }
  100% { background-position: 0 20px, 8px 28px, 4px 36px, 0 0, 0 0; }
}

.bg-pixel-mountain {
  background-color: #0a0f1a;
  background-image:
    linear-gradient(135deg, transparent 20px, #1a2744 20px 40px, transparent 40px),
    linear-gradient(225deg, transparent 20px, #1a2744 20px 40px, transparent 40px),
    linear-gradient(135deg, transparent 15px, #233255 15px 30px, transparent 30px),
    linear-gradient(225deg, transparent 15px, #233255 15px 30px, transparent 30px),
    linear-gradient(135deg, transparent 10px, #2d3f66 10px 20px, transparent 20px),
    linear-gradient(225deg, transparent 10px, #2d3f66 10px 20px, transparent 20px),
    linear-gradient(135deg, transparent 6px, #3a5080 6px 12px, transparent 12px),
    linear-gradient(225deg, transparent 6px, #3a5080 6px 12px, transparent 12px);
  background-size: 80px 40px, 80px 40px, 60px 30px, 60px 30px, 44px 22px, 44px 22px, 28px 14px, 28px 14px;
  background-position: 0 60%, 40px 60%, 10px 50%, 40px 50%, 18px 40%, 42px 40%, 22px 32%, 44px 32%;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
  position: relative;
}

.bg-pixel-mountain::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(147,197,253,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(99,102,241,0.04) 0%, transparent 40%);
  pointer-events: none;
}

.bg-pixel-mountain::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background:
    linear-gradient(transparent, rgba(147,197,253,0.03)),
    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(147,197,253,0.04) 12px, rgba(147,197,253,0.04) 13px);
  pointer-events: none;
}

.bg-pixel-nebula {
  background-color: #0f0720;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 40%),
    conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(139, 92, 246, 0.05) 90deg,
                   transparent 180deg, rgba(59, 130, 246, 0.05) 270deg, transparent 360deg);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

.bg-pixel-matrix {
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(90deg, transparent 0px, transparent 7px, rgba(0, 255, 0, 0.06) 7px, rgba(0, 255, 0, 0.06) 8px, transparent 8px, transparent 16px),
    repeating-linear-gradient(transparent 0px, transparent 7px, rgba(0, 255, 0, 0.05) 7px, rgba(0, 255, 0, 0.05) 8px, transparent 8px, transparent 16px);
  background-size: 16px 16px;
  position: relative;
}

.bg-pixel-matrix::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 3% 8%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 8% 22%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 14% 35%, rgba(0, 255, 0, 0.6) 100%, transparent),
    radial-gradient(1px 1px at 20% 50%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1.5px 1.5px at 26% 65%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 32% 78%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 38% 90%, rgba(0, 255, 0, 0.6) 100%, transparent),
    radial-gradient(1px 1px at 44% 5%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1.5px 1.5px at 50% 18%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 56% 32%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 62% 45%, rgba(0, 255, 0, 0.6) 100%, transparent),
    radial-gradient(1px 1px at 68% 58%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1.5px 1.5px at 74% 72%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 80% 84%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 86% 96%, rgba(0, 255, 0, 0.6) 100%, transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1.5px 1.5px at 96% 26%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 100% 40%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1px 1px at 5% 45%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 12% 60%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 18% 75%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 24% 88%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 30% 2%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 36% 15%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 42% 30%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 48% 42%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 54% 55%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 60% 68%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 66% 80%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 72% 93%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 78% 8%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 84% 20%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 90% 33%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 94% 48%, rgba(0, 255, 0, 0.4) 100%, transparent);
  pointer-events: none;
  animation: matrix-fade 2.5s ease-in-out infinite alternate;
}

@keyframes matrix-fade {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ── High quality animated pixel art backgrounds ── */

.bg-pixel-cyberpunk {
  background-color: #0a0020;
  background-image:
    linear-gradient(90deg, transparent 19px, #ff00ff 19px 20px, transparent 20px),
    linear-gradient(transparent 19px, #ff00ff 19px 20px, transparent 20px),
    linear-gradient(90deg, transparent 39px, #00ffff 39px 40px, transparent 40px),
    linear-gradient(transparent 39px, #00ffff 39px 40px, transparent 40px),
    repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 0, 255, 0.03) 4px, rgba(255, 0, 255, 0.03) 5px),
    repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0, 255, 255, 0.03) 4px, rgba(0, 255, 255, 0.03) 5px);
  background-size: 60px 60px, 60px 60px, 80px 80px, 80px 80px, 5px 5px, 5px 5px;
  position: relative;
}

.bg-pixel-cyberpunk::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 0, 255, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 0, 0.04) 0%, transparent 60%);
  animation: cyberpunk-pulse 3s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes cyberpunk-pulse {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

.bg-pixel-aurora {
  background-color: #001522;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(0, 255, 128, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 30%, rgba(0, 200, 255, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 50%, rgba(200, 0, 255, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 60%, rgba(0, 255, 200, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255, 0, 128, 0.06) 0%, transparent 40%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
  background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  animation: aurora-drift 8s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0% { background-position: 0% 0%, 10% 5%, 20% 0%, 5% 10%, 15% 5%; }
  25% { background-position: 15% 10%, 30% 15%, 40% 10%, 25% 20%, 35% 15%; }
  50% { background-position: 30% 5%, 50% 10%, 60% 5%, 45% 15%, 55% 10%; }
  75% { background-position: 45% 15%, 70% 5%, 80% 15%, 65% 10%, 75% 5%; }
  100% { background-position: 60% 5%, 85% 10%, 100% 5%, 80% 15%, 90% 10%; }
}

.bg-pixel-galaxy {
  background-color: #05050f;
  background-image:
    radial-gradient(1px 1px at 5% 8%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 12% 25%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 20% 42%, #60a5fa 100%, transparent),
    radial-gradient(2px 2px at 28% 60%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 35% 78%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 42% 15%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 50% 35%, #60a5fa 100%, transparent),
    radial-gradient(2px 2px at 58% 55%, #fff 100%, transparent),
    radial-gradient(1px 1px at 65% 75%, #fbbf24 100%, transparent),
    radial-gradient(1.5px 1.5px at 72% 92%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 78% 10%, #60a5fa 100%, transparent),
    radial-gradient(2px 2px at 85% 30%, #fff 100%, transparent),
    radial-gradient(1px 1px at 92% 50%, #a78bfa 100%, transparent),
    radial-gradient(1.5px 1.5px at 97% 70%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 3% 45%, #60a5fa 100%, transparent),
    radial-gradient(1.5px 1.5px at 8% 65%, #fff 100%, transparent),
    radial-gradient(1px 1px at 16% 85%, #a78bfa 100%, transparent),
    radial-gradient(2px 2px at 24% 5%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 32% 22%, #60a5fa 100%, transparent),
    radial-gradient(1.5px 1.5px at 40% 40%, #fff 100%, transparent),
    radial-gradient(1px 1px at 48% 58%, #a78bfa 100%, transparent),
    radial-gradient(2px 2px at 56% 80%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 64% 95%, #60a5fa 100%, transparent),
    radial-gradient(1.5px 1.5px at 72% 18%, #fff 100%, transparent),
    radial-gradient(1px 1px at 80% 38%, #a78bfa 100%, transparent),
    radial-gradient(2px 2px at 88% 60%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 95% 82%, #60a5fa 100%, transparent),
    radial-gradient(0.5px 0.5px at 15% 30%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(0.5px 0.5px at 30% 50%, rgba(255,255,255,0.2) 100%, transparent),
    radial-gradient(0.5px 0.5px at 45% 70%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(0.5px 0.5px at 60% 10%, rgba(255,255,255,0.2) 100%, transparent),
    radial-gradient(0.5px 0.5px at 75% 40%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(0.5px 0.5px at 90% 90%, rgba(255,255,255,0.2) 100%, transparent);
  background-size: 100% 100%;
  position: relative;
}

.bg-pixel-galaxy::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(88, 28, 135, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 60%, rgba(59, 130, 246, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 40%);
  animation: galaxy-spin 20s linear infinite;
  pointer-events: none;
}

@keyframes galaxy-spin {
  0% { transform: rotate(0deg) scale(1); opacity: 0.6; }
  50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.6; }
}

.bg-pixel-sakura {
  background-color: #1a0a14;
  background-image:
    radial-gradient(3px 3px at 5% -5%, #ffb7c5 100%, transparent),
    radial-gradient(3px 3px at 15% -8%, #ff9cb0 100%, transparent),
    radial-gradient(3px 3px at 28% -3%, #ffb7c5 100%, transparent),
    radial-gradient(3px 3px at 40% -10%, #ff8ca0 100%, transparent),
    radial-gradient(3px 3px at 52% -6%, #ffb7c5 100%, transparent),
    radial-gradient(3px 3px at 65% -4%, #ff9cb0 100%, transparent),
    radial-gradient(3px 3px at 78% -9%, #ffb7c5 100%, transparent),
    radial-gradient(3px 3px at 90% -7%, #ff8ca0 100%, transparent),
    radial-gradient(3px 3px at 10% -15%, #ffccd5 100%, transparent),
    radial-gradient(3px 3px at 35% -12%, #ffb7c5 100%, transparent),
    radial-gradient(3px 3px at 60% -14%, #ffccd5 100%, transparent),
    radial-gradient(3px 3px at 85% -11%, #ffb7c5 100%, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: sakura-fall 6s linear infinite;
  position: relative;
}

@keyframes sakura-fall {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 8px 105%, -5px 108%, 12px 103%, -8px 110%, 6px 106%, -12px 104%, 10px 109%, -6px 107%, 4px 115%, -10px 112%, 14px 114%, -3px 111%; }
}

.bg-pixel-sakura::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 150, 180, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(255, 100, 150, 0.04) 0%, transparent 40%);
  pointer-events: none;
}

.bg-pixel-neon {
  background-color: #0a0a14;
  background-image:
    linear-gradient(rgba(255, 0, 128, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 0, 0.03) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 0, 255, 0.03) 2px, transparent 2px);
  background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
  position: relative;
}

.bg-pixel-neon::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 0, 128, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 75% 75%, rgba(0, 255, 255, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 0, 0.05) 0%, transparent 30%);
  animation: neon-glow 2s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes neon-glow {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.bg-pixel-ocean {
  background-color: #001a2e;
  background-image:
    linear-gradient(90deg, transparent 2px, rgba(0, 150, 255, 0.04) 2px, transparent 3px),
    linear-gradient(transparent 2px, rgba(0, 150, 255, 0.04) 2px, transparent 3px),
    repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0, 200, 255, 0.03) 10px, rgba(0, 200, 255, 0.03) 11px);
  background-size: 16px 16px, 16px 16px, 20px 20px;
  position: relative;
}

.bg-pixel-ocean::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background:
    radial-gradient(ellipse at 10% 100%, rgba(0, 100, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 90%, rgba(0, 200, 255, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 100%, rgba(0, 100, 255, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 95%, rgba(0, 200, 255, 0.04) 0%, transparent 40%);
  background-size: 200% 100%, 200% 100%, 200% 100%, 200% 100%;
  animation: ocean-wave 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes ocean-wave {
  0% { background-position: 0% 0%, 10% 0%, 20% 0%, 5% 0%; }
  100% { background-position: 30% 0%, 40% 0%, 50% 0%, 35% 0%; }
}

.bg-pixel-lava {
  background-color: #0a0500;
  background-image:
    linear-gradient(0deg, transparent 70%, rgba(255, 100, 0, 0.06) 75%, transparent 80%),
    linear-gradient(0deg, transparent 75%, rgba(255, 50, 0, 0.04) 80%, transparent 85%),
    linear-gradient(0deg, transparent 80%, rgba(255, 150, 0, 0.03) 85%, transparent 90%);
  background-size: 100% 20px, 100% 25px, 100% 30px;
  background-position: 0 0, 0 0, 0 0;
  animation: lava-rise 3s ease-in-out infinite alternate;
  position: relative;
}

@keyframes lava-rise {
  0% { background-position: 0 0, 5px 0, -3px 0; }
  100% { background-position: 10px 10px, 15px 8px, 7px 12px; }
}

.bg-pixel-lava::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255, 80, 0, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 85%, rgba(255, 150, 0, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(255, 200, 0, 0.04) 0%, transparent 30%);
  animation: lava-glow 2s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes lava-glow {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

.bg-pixel-city {
  background-color: #080c14;
  background-image:
    linear-gradient(90deg, transparent 7px, rgba(255, 200, 50, 0.04) 7px, transparent 8px),
    linear-gradient(90deg, transparent 15px, rgba(255, 255, 100, 0.03) 15px, transparent 16px),
    linear-gradient(90deg, transparent 23px, rgba(200, 220, 255, 0.02) 23px, transparent 24px);
  background-size: 16px 100%, 24px 100%, 32px 100%;
  background-position: 0 50%, 0 50%, 0 50%;
  background-repeat: repeat-y, repeat-y, repeat-y;
  position: relative;
}

.bg-pixel-city::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 14px,
      #1a1a2e 14px, #1a1a2e 18px, transparent 18px, transparent 28px),
    repeating-linear-gradient(90deg, transparent, transparent 22px,
      #16213e 22px, #16213e 26px, transparent 26px, transparent 36px),
    repeating-linear-gradient(90deg, transparent, transparent 30px,
      #0f3460 30px, #0f3460 34px, transparent 34px, transparent 44px);
  background-size: 48px 20px, 48px 30px, 48px 40px;
  background-position: 0 calc(100% - 40px), 0 calc(100% - 60px), 0 calc(100% - 80px);
  background-repeat: repeat, repeat, repeat;
  animation: city-lights 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes city-lights {
  0% { opacity: 0.7; }
  50% { opacity: 0.9; }
  100% { opacity: 0.7; }
}

.bg-pixel-forest {
  background-color: #0a1a0a;
  background-image:
    linear-gradient(135deg, transparent 25px, #0d2b0d 25px, #0d2b0d 30px, transparent 30px),
    linear-gradient(225deg, transparent 25px, #0d2b0d 25px, #0d2b0d 30px, transparent 30px),
    linear-gradient(135deg, transparent 18px, #0f330f 18px, #0f330f 22px, transparent 22px),
    linear-gradient(225deg, transparent 18px, #0f330f 18px, #0f330f 22px, transparent 22px),
    linear-gradient(135deg, transparent 12px, #123b12 12px, #123b12 15px, transparent 15px),
    linear-gradient(225deg, transparent 12px, #123b12 12px, #123b12 15px, transparent 15px);
  background-size: 60px 34px, 60px 34px, 44px 25px, 44px 25px, 30px 17px, 30px 17px;
  background-position: 0 calc(100% - 30px), 30px calc(100% - 30px), 8px calc(100% - 20px), 34px calc(100% - 20px), 15px calc(100% - 10px), 37px calc(100% - 10px);
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
  position: relative;
}

.bg-pixel-forest::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(34, 197, 94, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 60%, rgba(59, 130, 246, 0.03) 0%, transparent 40%);
  pointer-events: none;
}

.bg-pixel-forest::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  background:
    linear-gradient(transparent, rgba(34, 197, 94, 0.02)),
    repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(34, 197, 94, 0.03) 10px, rgba(34, 197, 94, 0.03) 11px);
  background-size: 100% 100%, 20px 100%;
  pointer-events: none;
}