/* ads.css - Quizetron Ad Styling FINAL PATCH */

/* Grid layout for banner ads on index page */
#ad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
  padding: 20px;
}

/* Each ad tile */
.ad-tile {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* AdSpace placeholder before real ad loads */
.ad-tile::before {
  content: "Ad Space";
  color: #999;
  font-size: 0.9rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  #ad-grid {
    grid-template-columns: 1fr;
  }
}

/* Top and bottom ad banners inside quizzes */
.ad-banner-top,
.ad-banner-bottom {
  margin: 20px auto;
  text-align: center;
}

.ad-banner-top ins,
.ad-banner-bottom ins {
  display: block;
  margin: auto;
  width: 320px;
  height: 100px;
}

/* Fullscreen video ad overlay */
#fullscreenAdOverlay {
  animation: fadeInOverlay 0.4s ease forwards;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

#fullscreenAdOverlay button:hover {
  background-color: #666;
}

/* Sponsored tiny label */
.sponsored-label {
  font-size: 0.8rem;
  color: #aaa;
  text-align: center;
  margin-bottom: -40px;
}