/* ─── ClaudeForge Ad Placeholders ─────────────────────────────────────────
   Non-intrusive ad slots: hub banners, game safe-zones, overlay banners.
   These containers hold real ad tags or remain as labeled placeholders.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Base slot ── */
.cf-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* "AD" micro-label — purely informational, barely visible */
.cf-ad-slot::before {
  content: "AD";
  position: absolute;
  top: 3px;
  left: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.18);
  font-family: "Inter", Arial, sans-serif;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}

/* Inner placeholder fill */
.cf-ad-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.12);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.008) 8px,
    rgba(255, 255, 255, 0.008) 9px
  );
}

/* ── Hub section wrapper ──────────────────────────────────────────────────── */
/* Wraps hub banners; stays in the page's normal flow between sections */
.cf-ad-hub-section {
  position: relative;
  z-index: 1;
  padding: 0.5rem 2rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* ── Hub leaderboard banner (728×90 → 320×50 mobile) ─────────────────────── */
.cf-ad-hub-banner {
  width: 100%;
  max-width: 728px;
  height: 90px;
}

@media (max-width: 740px) {
  .cf-ad-hub-banner {
    max-width: 320px;
    height: 50px;
  }
}

/* ── Game safe-zone banner (below game content, in-flow) ─────────────────── */
.cf-ad-game-banner {
  width: 100%;
  max-width: 468px;
  height: 60px;
  margin: 12px auto 8px;
}

@media (max-width: 480px) {
  .cf-ad-game-banner {
    max-width: 320px;
    height: 50px;
  }
}

/* ── Overlay (game-over / pause) ad slot ─────────────────────────────────── */
/* Inserted as a flex item inside the overlay column, before the CTA button */
.cf-ad-overlay {
  width: 300px;
  height: 60px;
  /* Visually separate from game stats above and CTA below */
  margin: 2px 0 4px;
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 360px) {
  .cf-ad-overlay {
    width: 240px;
    height: 50px;
  }
}

/* ── Vertical / skyscraper banner (160×600) ──────────────────────────────── */
/* Injected as a flex sibling inside flex-row game layouts */
.cf-ad-vert {
  width: 160px;
  height: 600px;
  flex-shrink: 0;
  align-self: center;
}

/* Shrink on short viewports */
@media (max-height: 700px) {
  .cf-ad-vert {
    height: 400px;
  }
}

/* Hide entirely when there isn't horizontal room */
@media (max-width: 900px) {
  .cf-ad-vert {
    display: none;
  }
}