/* === Slime Battle Theme - Cartoon / Vibrant === */
.theme-slime { background: #f0fdf4; color: #1a3a2a; }

/* Hero */
.slime-hero {
  background: linear-gradient(160deg, #0d9f6e 0%, #34d399 40%, #6ee7b7 70%, #a7f3d0 100%);
  color: #fff; position: relative;
}
.slime-bg {
  position: absolute; inset: 0; opacity: 0.12;
  background-image:
    radial-gradient(circle 80px at 15% 30%, #fff 0%, transparent 100%),
    radial-gradient(circle 120px at 75% 60%, #fff 0%, transparent 100%),
    radial-gradient(circle 60px at 50% 80%, #fff 0%, transparent 100%),
    radial-gradient(circle 40px at 85% 20%, #fff 0%, transparent 100%);
}
.slime-hero .hero-title {
  text-shadow: 0 4px 24px rgba(0,80,40,0.3);
  font-size: 3.5rem; letter-spacing: -1px;
}
.slime-hero .platform-badge {
  background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.slime-hero .download-btn { box-shadow: 0 4px 16px rgba(0,60,30,0.2); }

/* Features */
.slime-features { background: #fff; }
.slime-features .features-title { color: #065f46; }
.slime-feature-card {
  background: #ecfdf5; border: 1px solid #d1fae5; border-radius: 16px;
}
.slime-feature-card .feature-name { color: #065f46; }

/* Screenshots */
.screenshots {
  padding: 60px 24px; background: #f0fdf4;
}
.screenshots .features-title { color: #065f46; }
.screenshot-scroll {
  display: flex; gap: 16px; overflow-x: auto; padding: 0 24px;
  max-width: 1000px; margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}
.screenshot-placeholder {
  flex: 0 0 280px; height: 180px; border-radius: 12px;
  background: linear-gradient(135deg, #a7f3d0, #6ee7b7);
  display: flex; align-items: center; justify-content: center;
  color: #065f46; font-weight: 600; font-size: 14px;
}

/* CTA */
.cta-section {
  padding: 80px 24px; text-align: center;
  background: linear-gradient(160deg, #065f46, #0d9f6e);
  color: #fff;
}
.cta-title {
  font-size: 2rem; font-weight: 700; margin-bottom: 24px;
}

/* Mobile */
@media (max-width: 768px) {
  .slime-hero .hero-title { font-size: 2.2rem; }
  .screenshot-placeholder { flex: 0 0 220px; height: 140px; }
}
