/* ad-banner.css */

/* Ensure the game container can create a stacking context if needed */
#game {
  position: relative; /* Crucial for absolute positioning of children like #ad-banner */
  /* Add other existing styles for #game if any */
}

/* If #game is inside .retrodiv, ensure .retrodiv is also positioned */
.retrodiv {
  position: relative; /* If .retrodiv is the direct parent */
  width: 100%;
  /* height: 618px; */ /* Height might be dynamic or set elsewhere */
}

/* Ad Banner Container */
#ad-banner {
  position: absolute; /* Overlay within the parent (#game or .retrodiv) */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for perfect centering */
  /* Use !important as a strong measure against potential overrides by game elements */
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0); /* Transparent background */
  width: 302px; /* Keep original requested width */
  height: 252px; /* Keep original requested height */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex; /* Use flexbox to center the ad content */
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  pointer-events: auto; /* Allow clicks on the ad and close button */
}

/* AdSense content container within the banner */
#ad-banner .ad-content {
  /* The AdSense <ins> tag defines its own size (300x250) */
  /* Flexbox in parent (#ad-banner) will center this */
  pointer-events: auto; /* Ensure ad inside is clickable */
}

/* Ensure the AdSense iframe itself is clickable if needed, though usually handled by AdSense */
#ad-banner .ad-content ins iframe {
    pointer-events: auto;
}


/* Close Button Styling */
#close-ad {
  position: absolute;
  top: -16px; /* Position above the ad banner */
  left: 0px; /* Position to the left of the ad banner */
  width: 15px;
  height: 15px;
  background: #ff5f5f;
  border: none;
  border-radius: 5%;
  color: white;
  font-size: 15px; /* Adjusted for better visibility of '×' */
  line-height: 15px; /* Center the '×' vertically */
  text-align: center; /* Center the '×' horizontally */
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  transition: background 0.3s;
  z-index: 10000; /* Ensure close button is above the ad content */
  pointer-events: auto; /* Ensure close button is clickable */
}

#close-ad:hover {
  background: #ff3b3b;
}