/* Ad slots: the one shared ad box for the arcade's hub and info pages (Doug, 6 Oct: "lets get analytics and ads up
   and running everywhere, and if not live ads yet, the slots ads will be should have ad placeholders").
   Markup: <div class="ad-slot" data-ad-placeholder="below-tool|in-article|page-end" data-arcade aria-hidden="true"></div>
   - Never on a game, room, lobby, TV/big-screen or adults-only page (test/ad-slots.test.js checks it).
   - data-arcade hides it inside RightPlace's frame (public/from.js): their app, their rules.
   - No AdSense script loads yet (the site isn't approved). When it is, the <ins class="adsbygoogle"> goes inside the
     box (non-personalized: kids play here) and AdSense's data-ad-status="filled" swaps "Ad space" for a small
     "Advertisement" label. "unfilled" keeps the placeholder.
   Colors come from the page's own tokens (games.css or app.css + its look), so it fits every page's dark theme. */
.ad-slot {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 280px; /* reserved, so nothing jumps when an ad fills */
  margin: 30px 0;
  overflow: hidden;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  background: color-mix(in srgb, var(--panel) 45%, transparent);
}
@media (min-width: 768px) {
  .ad-slot { min-height: 250px; }
}
/* The words live in CSS, not the HTML, so search and AI readers never see them as page text. */
.ad-slot::after {
  content: 'Ad space';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--soft);
  opacity: .75;
  pointer-events: none;
}
.ad-slot > ins { display: block; width: 100%; }
.ad-slot:has(ins[data-ad-status="filled"]) { border-color: transparent; background: none; padding-top: 18px; }
.ad-slot:has(ins[data-ad-status="filled"])::after { content: none; }
.ad-slot:has(ins[data-ad-status="filled"])::before {
  content: 'Advertisement';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  line-height: 18px;
  color: var(--soft);
}