/* ==========================================================================
 * ads.css — WordBlitz advertising (R1 display units + R2 rewarded/toast)
 * --------------------------------------------------------------------------
 * Loaded globally from _header.php. Scoped to .wb-ad* / .wr-ad* class names.
 * The placeholder styles are what you see in test mode (ADS_TEST_MODE); real
 * AdSense units reuse .wb-ad-wrap / .wb-ad__label for consistent spacing.
 * See config/config_ads.php and __docs/86-WordBlitz-monetization-web-game.md.
 * ========================================================================== */

/* Wrapper reserves vertical space so a filling ad doesn't cause layout shift. */
.wb-ad-wrap {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* "Advertisement" label above real units (AdSense-compliant, unobtrusive). */
.wb-ad__label {
  display: block;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a94ad;
  margin-bottom: 4px;
}

/* The <ins> (or placeholder) — reserve a sensible min-height for CLS. */
.wb-ad {
  display: block;
  width: 100%;
  min-height: 100px;
}

/* ── Test-mode placeholder box ─────────────────────────────────────────── */
.wb-ad--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 100px;
  padding: 14px;
  border: 1px dashed #c4bce4;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(108, 75, 244, .04),
      rgba(108, 75, 244, .04) 10px,
      rgba(108, 75, 244, .08) 10px,
      rgba(108, 75, 244, .08) 20px
    );
  color: #6c4bf4;
  user-select: none;
}
.wb-ad__tag {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}
.wb-ad__hint {
  font-size: 11px;
  font-weight: 600;
  color: #9a94ad;
}

/* Slightly taller leaderboard-style slots on wide viewports. */
@media (min-width: 768px) {
  .wb-ad,
  .wb-ad--placeholder { min-height: 90px; }
}

/* ── R2 rewarded button spacing on the game-over card ──────────────────── */
.wr-go-reward { width: 100%; }

/* ── Mock ad overlay (ADS_MODE = mock) ────────────────────────────────── */
.wb-mockad {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 14, 23, .78);
}
.wb-mockad__card {
  width: min(92vw, 420px);
  background: #fff;
  color: #1c1830;
  border-radius: 16px;
  padding: 22px 22px 20px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(20, 10, 60, .45);
}
.wb-mockad__title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.wb-mockad__body { font-size: 13px; color: #55506a; line-height: 1.55; margin-bottom: 12px; }
.wb-mockad__count { font-size: 12px; font-weight: 700; color: #6c4bf4; }
.wb-mockad__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wb-mockad__btn {
  border: 1px solid rgba(0, 0, 0, .16);
  background: #fff;
  color: #4a4560;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, background .15s;
}
.wb-mockad__btn:hover { background: rgba(0, 0, 0, .04); }
.wb-mockad__btn--primary { background: #6c4bf4; color: #fff; border-color: transparent; }
.wb-mockad__btn--primary:hover { filter: brightness(1.07); }

/* ── Rewarded-hint word chips ─────────────────────────────────────────── */
.wr-hint-chip {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6c4bf4, #8f6bff);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(108, 75, 244, .32);
}

/* ── Ad feedback toast (rewarded bonus, etc.) ─────────────────────────── */
.wr-ad-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  z-index: 2000;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 12px;
  background: #1c1830;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 34px rgba(20, 10, 60, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wr-ad-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}