/* Background Animation Keyframes */
@keyframes backgroundParallax {
  0% {
    background-position: 
      center center,
      0 0,
      center 80%;
  }
  100% {
    background-position: 
      center center,
      100px 100px,
      center 100%;
  }
}

/* Common background styles */
.background-style {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover, auto, cover;
  background-position: center center, center center, center bottom;
  background-repeat: no-repeat, repeat, no-repeat;
  background-attachment: fixed;
  background-blend-mode: overlay, overlay, normal;
  z-index: 1;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.background-style.active {
  opacity: 1;
  animation: backgroundParallax 30s ease-in-out infinite alternate;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .background-style {
    animation: none !important;
  }
  
  .background-style.active {
    animation: mobileParallax 40s ease-in-out infinite alternate !important;
  }
  
  @keyframes mobileParallax {
    0% {
      background-position: 
        center center,
        0 0,
        center 90%;
      background-size: 110% auto, auto, cover;
    }
    100% {
      background-position: 
        center center,
        50px 50px,
        center 100%;
      background-size: 120% auto, auto, cover;
    }
  }
}

/* Individual background images with optimized animations */
.background-1 {
  background-image: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 30%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"),
    url("../images/Background_Image1.jpg");
}

.background-2 {
  background-image: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 30%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"),
    url("../images/Background_Image2.jpg");
}

.background-3 {
  background-image: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 30%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"),
    url("../images/Background_Image3.jpg");
}

.background-4 {
  background-image: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 30%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"),
    url("../images/Background_Image4.jpg");
}

.background-5 {
  background-image: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 30%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"),
    url("../images/Background_Image5.jpg");
}

/* Container for background and button */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  
  /* Background with multiple layers for depth */
  background: 
    /* Dark overlay for better text contrast */
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.3) 100%
    ),
    /* Subtle pattern overlay */
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.03) 75%,
      rgba(255, 255, 255, 0.03)
    ),
    /* Main background image */
    url("../images/Background_Image.png");
  
  /* Background properties */
  background-size: 
    auto, /* For pattern overlay */
    30px 30px, /* Pattern size */
    cover; /* For main background */
  background-position: center center;
  background-repeat: no-repeat, repeat, no-repeat;
  background-attachment: fixed;
  background-blend-mode: overlay, normal, normal;
  
  /* Smooth transitions */
  transition: background-position 0.3s ease-in-out;
  
  display: flex;
  flex-direction: column;
  
  /* Image rendering optimizations */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Add a subtle animation */
  animation: backgroundMove 20s ease-in-out infinite alternate;
}

/* Background animation */
@keyframes backgroundMove {
  from {
    background-position: 
      center center,
      0 0,
      center center;
  }
  to {
    background-position: 
      center center,
      30px 30px,
      center 10%;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    background-size: 
      auto,
      20px 20px,
      cover;
  }
  
  @keyframes backgroundMove {
    from, to {
      background-position: 
        center center,
        0 0,
        center center;
    }
  }
}
#game-area {
  flex: 1; /* grow to fill space */
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center; /* vertical center */
  min-height: 60vh;
  position: relative;

  margin: 0; /* no gap */
  background: none; /* ✅ remove background here */
  box-shadow: none;
}

/* Button styling */
#game-area button {
  padding: 12px 24px;
  min-width: 180px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
  border: none;
  background: #4caf50;
  color: white;
  transition: background 0.3s ease, transform 0.2s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  box-sizing: border-box;
}

/* Hover effect */
#game-area button:hover {
  background: #45a049;
  transform: translate(-50%, -50%) scale(1.05);
}
.mobile-text {
  display: none; /* default hidden */
  font-family: "Shrikhand", cursive;
  color: #ffffff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  text-align: center; /* center text */
  width: 100%;
}
/* Mobile responsive */
@media (max-width: 600px) {
  #game-area {
    min-height: 400px;
  }

  #game-area button {
    font-size: 16px;
    padding: 10px 20px;
  }
}
/* Mobile responsive fix */
@media (max-width: 520px) {
  .desktop-logo {
    display: none; /* hide image */
  }
  .mobile-text {
    display: flex; /* use flex to fill container */
    justify-content: center;
    align-items: center;
    width: 100%; /* full width */
    height: 100%; /* fill the account-head container */
    margin: 0;
    padding: 20px 10px; /* text padding inside bg */
    font-family: "Shrikhand", cursive;
    font-size: 1.5rem;
    color: #ffcc00; /* bright text */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);

    /* Gradient background fills container */
    background: linear-gradient(135deg, #4b1e4d, #6a1b9a);
    border-radius: 0; /* full width, no rounding */
  }
  #game-area {
    margin: 1%; /* remove side margins */
    border-radius: 1%; /* flush edge-to-edge */
    min-height: 70.2vh; /* take full mobile screen height */
    height: 10vh; /* force exact viewport height */
    box-shadow: none; /* optional: remove heavy shadow on mobile */
  }
  .account-head {
    background-image: none !important; /* remove inline background */
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    background: linear-gradient(
      135deg,
      #4caf50,
      #81c784
    ); /* optional fallback */
    padding: 40px 10px;
  }

  #game-area button {
    font-size: 16px; /* smaller text */
    padding: 10px 18px; /* balanced padding */
    width: 30%; /* make button wider on narrow screens */
    max-width: 300px; /* cap button width */
  }

  .hud {
    font-size: 12px;
    flex-wrap: wrap;
  }

  .controls {
    gap: 6px;
  }
}