/* Container for background and button */
body {
  margin: 0; /* remove default browser spacing */
  padding: 0;
  min-height: 100vh;

  background-image: radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.1),
      transparent
    ),
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.08)),
    url("../images/Background_Image.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
}
#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;
  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;
}

/* 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;
  }
}