/* Mobile Menu Close Button */
.close-btn {
  background: none;
  border: none;
  cursor: pointer;
}

/* Hero Section - Floating Elements */
.floating-top-right {
  top: 25%;
  right: 25%;
}

.floating-bottom-right {
  bottom: 10%;
  right: 10%;
}

/* Features Section - Feature Icons */
.feature-icon-hatch {
  background: linear-gradient(to bottom right, #f59e0b, #f97316);
}

.feature-icon-collect {
  background: linear-gradient(to bottom right, #10b981, #059669);
}

.feature-icon-automate {
  background: linear-gradient(to bottom right, #3b82f6, #6366f1);
}

.feature-icon-expand {
  background: linear-gradient(to bottom right, #8b5cf6, #ec4899);
}

/* How to Play Section - Step Numbers */
.step-number-hatch {
  background-color: #f59e0b;
}

.step-number-grow {
  background-color: #10b981;
}

.step-number-earn {
  background-color: #3b82f6;
}

/* Showcase Section */
.barn {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.chicken-position {
  position: absolute;
  bottom: 3rem;
  left: 33%;
}

.truck-delivery {
  position: absolute;
  bottom: 3rem;
  left: -5rem;
}

.coins-position {
  position: absolute;
  top: 25%;
  right: 25%;
}

.coin-symbol {
  color: #f59e0b;
  font-size: 1.125rem;
}

.coin-delay-1 {
  animation-delay: 0.5s;
  margin-left: 20px;
}

.coin-delay-2 {
  animation-delay: 1s;
  margin-left: -10px;
  margin-top: 15px;
}

.stat-card-chickens {
  background-color: #fef9c3;
}

.stat-card-eggs {
  background-color: #ffedd5;
}

.stat-card-income {
  background-color: #ecfccb;
}

.stat-card-upgrades {
  background-color: #dbeafe;
}

/* Progression Section - Progression Numbers */
.progression-number-1 {
  background-color: #f59e0b;
}

.progression-number-2 {
  background-color: #10b981;
}

.progression-number-3 {
  background-color: #3b82f6;
}

.progression-number-4 {
  background-color: #8b5cf6;
}

/* CTA Section - Demo Egg Gradient */
.demo-egg stop[offset="0%"] {
  stop-color: #fef3c7;
}

.demo-egg stop[offset="100%"] {
  stop-color: #f59e0b;
}

/* Mobile Menu Close Button */
.close-btn {
  background: none;
  border: none;
  cursor: pointer;
}

/* Hero Section - Preview Icons */
.preview-icon-mechanics {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.preview-icon-automation {
  background: linear-gradient(135deg, #10b981, #059669);
}

.preview-icon-progression {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.preview-icon-expansion {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.preview-icon-advanced {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.start-learning-container {
  margin-top: 2rem;
}

.start-learning-btn {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* Basic Mechanics Section */
.crack-opacity {
  opacity: 0;
}

.egg-gradient-stop1 {
  stop-color: #fef3c7;
}

.egg-gradient-stop2 {
  stop-color: #f59e0b;
}

.click-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(251, 191, 36, 0.9);
  color: white;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
}

.chicken-lifecycle-demo {
  background: linear-gradient(135deg, #ecfccb, #d1fae5);
}

.lifecycle-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lifecycle-stage {
  text-align: center;
}

.lifecycle-emoji {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.lifecycle-label {
  font-size: 0.875rem;
  color: #6b7280;
}

.lifecycle-arrow {
  font-size: 2rem;
  color: #10b981;
}

.collection-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.collection-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.coin-display {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #f59e0b;
}

.collect-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

/* Automation Section */
.automation-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}

.chicken-1 {
  position: absolute;
  bottom: 80px;
  left: 20%;
  animation: float 3s ease-in-out infinite;
}

.chicken-2 {
  position: absolute;
  bottom: 80px;
  left: 40%;
  animation: float 3s ease-in-out infinite;
  animation-delay: 1s;
}

.chicken-3 {
  position: absolute;
  bottom: 80px;
  left: 60%;
  animation: float 3s ease-in-out infinite;
  animation-delay: 2s;
}

.chicken-emoji {
  font-size: 2rem;
}

.egg-1 {
  position: absolute;
  top: 30%;
  right: 20%;
  animation: float 2s ease-in-out infinite;
}

.egg-2 {
  position: absolute;
  top: 50%;
  right: 40%;
  animation: float 2s ease-in-out infinite;
  animation-delay: 0.5s;
}

.egg-emoji {
  font-size: 1.5rem;
}

.auto-collector {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.automation-icon-collector {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.automation-icon-booster {
  background: linear-gradient(135deg, #10b981, #059669);
}

.automation-icon-management {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

/* Progression Section */
.progression-node-1 {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.progression-node-2 {
  background: linear-gradient(135deg, #10b981, #059669);
}

.progression-node-3 {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.progression-node-4 {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

/* Farm Expansion Section */
.expansion-badge-basic {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(251, 191, 36, 0.9);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.expansion-badge-standard {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(16, 185, 129, 0.9);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.expansion-badge-industrial {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.expansion-badge-legendary {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.expansion-badge-commerce {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(16, 185, 129, 0.9);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.expansion-badge-research {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

/* Special Chickens Section */
.chicken-avatar-common {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.chicken-rarity-common {
  background: #6b7280;
}

.chicken-avatar-uncommon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.chicken-rarity-uncommon {
  background: #10b981;
}

.chicken-avatar-rare {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.chicken-rarity-rare {
  background: #3b82f6;
}

.chicken-avatar-epic {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.chicken-rarity-epic {
  background: #8b5cf6;
}

.chicken-avatar-legendary {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.chicken-rarity-legendary {
  background: #ef4444;
}

.chicken-avatar-mythic {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
}

.chicken-rarity-mythic {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.chicken-emoji {
  font-size: 3rem;
}

/* Statistics Section */
.dashboard-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: center;
}

.stat-icon-eggs {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.stat-icon-chickens {
  background: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon-income {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.stat-icon-eps {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.stat-icon-achievements {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.stat-icon-level {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.stat-icon-coops {
  background: linear-gradient(135deg, #84cc16, #65a30d);
}

.stat-icon-rare {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.achievements-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.achievement-icon-eggs {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.achievement-icon-chickens {
  background: linear-gradient(135deg, #10b981, #059669);
}

.achievement-icon-income {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.achievement-icon-tycoon {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.achievement-fill-eggs {
  width: 87%;
}

.achievement-fill-chickens {
  width: 100%;
}

.achievement-fill-income {
  width: 65%;
}

.achievement-fill-tycoon {
  width: 32%;
}

/* Strategy Tips Section */
.tip-icon-clicking {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.tip-icon-resources {
  background: linear-gradient(135deg, #10b981, #059669);
}

.tip-icon-progress {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.tip-icon-capacity {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.tip-icon-automation {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.tip-icon-prestige {
  background: linear-gradient(135deg, #10b981, #059669);
}

.tip-icon-events {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.tip-icon-expansion {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.tip-icon-legendary {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.tip-icon-research {
  background: linear-gradient(135deg, #10b981, #059669);
}

.tip-icon-market {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.tip-icon-competitive {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.tip-icon-optimization {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.tip-icon-time {
  background: linear-gradient(135deg, #10b981, #059669);
}

.tip-icon-synergy {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.tip-icon-meta {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

/* Advanced Features Section */
.feature-icon-genetic {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.feature-icon-ai {
  background: linear-gradient(135deg, #10b981, #059669);
}

.feature-icon-trading {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.feature-icon-prestige {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.feature-icon-quantum {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.feature-icon-minigame {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.advanced-features-cta {
  text-align: center;
  margin-top: 3rem;
}

.advanced-features-btn {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* Mobile Menu Close Button */
.close-btn {
  background: none;
  border: none;
  cursor: pointer;
}

/* Hero Section - Stat Values */
.stat-value-players {
  color: #f59e0b;
}

.stat-value-rating {
  color: #10b981;
}

.stat-value-downloads {
  color: #3b82f6;
}

/* Our Story Section */
.story-grid {
  align-items: center;
}

.story-title {
  text-align: left;
  margin-bottom: 1.5rem;
}

.story-paragraph {
  font-size: 1.125rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.story-location {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.story-icon {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(to bottom right, #f59e0b, #f97316);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-icon-svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

.story-location-text {
  color: var(--color-text);
  font-weight: 500;
}

.story-image {
  background: linear-gradient(to bottom right, #ecfccb, #dbeafe);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: var(--shadow-xl);
}

/* Team Section */
.team-grid {
  margin: 0 auto;
}

/* Development Process Section */
.timeline-text {
  color: var(--color-text-light);
}

/* Technology & Innovation Section */
.tech-grid {
  margin: 0 auto;
}

.tech-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.tech-text {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

/* Community Impact Section */
.community-grid {
  align-items: center;
}

.community-stats {
  background: linear-gradient(to bottom right, #ecfccb, #d1fae5);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: var(--shadow-xl);
}

.community-stats-grid {
  gap: 1rem;
}

.community-stat {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}

.community-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #10b981;
}

.community-stat-label {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.community-title {
  text-align: left;
  margin-bottom: 1.5rem;
}

.community-paragraph {
  font-size: 1.125rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.community-benefits {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.community-benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.benefit-icon {
  width: 2rem;
  height: 2rem;
  background-color: #ecfccb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-icon-svg {
  width: 1rem;
  height: 1rem;
  color: #10b981;
}

.benefit-text {
  color: var(--color-text);
}

/* Awards & Recognition Section */
.awards-grid {
  margin: 0 auto;
}

.award-icon {
  font-size: 3.75rem;
  margin-bottom: 1rem;
}

.award-text {
  color: var(--color-text-light);
}

/* Future Roadmap Section */
.roadmap-grid {
  margin: 0 auto;
}

.roadmap-card {
  background: linear-gradient(to bottom right, #dbeafe, #e0e7ff);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.roadmap-quarter {
  background-color: #3b82f6;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: var(--rounded-full);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.roadmap-text {
  color: var(--color-text-light);
}

/* Contact Section */
.contact-title {
  color: white;
}

.contact-description {
  color: #d1d5db;
}

.contact-info-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.contact-icon-email {
  background: linear-gradient(to bottom right, #f59e0b, #f97316);
}

.contact-icon-phone {
  background: linear-gradient(to bottom right, #10b981, #059669);
}

.contact-icon-address {
  background: linear-gradient(to bottom right, #3b82f6, #6366f1);
}

.contact-form-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}