/* Ads scaffold styles — linked only on pages that carry an .ad-slot/.ad-break.
   Kept out of styles.css deliberately. With an inert config slots keep the
   [hidden] attribute and render nothing; the sponsor frame (eyebrow + shell)
   is added by ads.js ONLY when a real unit mounts, so no empty labeled boxes.

   Network ad policy lives in ADS.md (repo root). Reserved heights per shell:
   slot 728x90 desktop / 320x100 mobile; break 300x250. Eyebrow row ~20px. */

.ad-slot, .ad-break {
  display: block;
  width: min(748px, 100%);
  margin: clamp(1.4rem, 4vh, 2.4rem) auto 0;
  padding: 8px 10px 10px;
  border: 1px solid rgba(121, 87, 255, 0.28);
  border-radius: 10px;
  background: rgba(10, 10, 16, 0.6);
  text-align: center;
  overflow: hidden;
}

/* [hidden] must win over the display:block above (default UA rule would lose). */
.ad-slot[hidden], .ad-break[hidden] { display: none; }

/* Deliberately boring chrome: dim, no hover lift, no glow — never CTA-like. */
.sponsor-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(233, 236, 255, 0.4);
  user-select: none;
}
.sponsor-eyebrow a {
  color: rgba(105, 221, 255, 0.62);
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: none;
}
.sponsor-eyebrow a:hover { color: rgba(105, 221, 255, 0.9); }

/* Light inset behind creatives so white/light ads don't bleed into the page. */
.sponsor-shell {
  display: block;
  width: 100%;
  height: 90px;
  border-radius: 6px;
  background: #111;
  overflow: hidden;
}
.sponsor-shell iframe, .sponsor-shell .adsbygoogle {
  display: block;
  width: 100%;
  height: 100%;
}

/* Game-over break panel: medium rectangle, centered, in normal flow below the
   play area (never over controls; primary CTA stays above in the canvas UI). */
.ad-break { width: min(340px, 100%); margin-top: 1rem; }
.ad-break .sponsor-shell { width: min(300px, 100%); height: 250px; margin: 0 auto; }

/* Narrow viewports: mobile-banner shell for margin slots; tighter margins so
   the top slot costs less vertical space above the fold (mobile audit). */
@media (max-width: 520px) {
  .ad-slot { width: min(340px, 100%); margin: 0.5rem auto 0; }
  .ad-slot .sponsor-shell { height: 100px; }
}