/* Set the body to center the game content */
body {
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;  /* Layout: column to place header, game content, and footer in order */
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Style for the header image */
#headerImage {
  width: 1152px;
  height: 88px;
  object-fit: cover; /* Ensures the image covers the header space without distortion */
}

/* Main container to center the number grid */
#main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Center the content vertically */
  align-items: center;
  flex-grow: 1; /* Make the main content grow to fill available space */
  width: 100%; /* Ensure the container takes up the full width */
}

/* The number container is centered on the screen */
#number-container {
  display: grid;
  grid-template-columns: repeat(10, 60px);
  grid-gap: 10px;
  justify-content: center;
  position: relative;
  margin-top: 20px;  /* Add a bit of space between header and number grid */
}

/* Styling for each number */
.number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  font-size: 24px; /* Increased font size to fit better in the circle */
  font-weight: bold;
  color: white;
  position: relative;
  transition: background-color 0.3s ease;
  font-family: Arial, sans-serif; /* Ensure a clean font family */
  text-align: center;
  line-height: 60px; /* Ensures the text is centered vertically */
}

/* Highlight the drawn number */
.number.highlight {
  background-color: #ffa800; /* Set the highlight color to yellow */
}

/* Optional: Set a specific color for the football */
#football {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffa800; /* Yellow color */
  position: absolute;
  display: none;        /* Initially hidden */
  pointer-events: none;
  transition: left 0.5s, top 0.5s;
}

/* Style for the footer image */
#footerImage {
  width: 1152px;
  height: 100px;
  object-fit: cover; /* Ensures the image covers the footer space without distortion */
  margin-top: 30px;  /* Add space between the game content and footer */
  position: relative;
  bottom: 0; /* Ensure the footer is fixed at the bottom */
}

@media (max-width: 760px) {
  header, footer { width: 100%; }
  #headerImage, #footerImage { width:100%; height:auto; object-fit:contain; }
  #number-container { width:100%; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; padding:6px; box-sizing:border-box; }
  .number { width:100%; height:auto; aspect-ratio:1; font-size:clamp(12px,3vw,24px); line-height:normal; }
}