/*
 * Thela Labs Games — Shared Ad UI styles
 * ============================================================================
 * Deliberately neutral/dark so it doesn't visually clash with any one game's
 * palette. Every element is positioned to never overlap the canvas during
 * gameplay: banner + sponsor slots live inside title/game-over screens
 * (which already sit above the canvas as full-screen overlays in every
 * game), and the ad overlays only appear between runs.
 */

.thela-hidden { display: none !important; }


/* ---- ad anchor container -------------------------------------------------
 * The anchor ships as a bare <div id="thela-ad-anchor"> at the top of each
 * game's body. It was left unpositioned (position:static, z-index:auto) while
 * every game's #game canvas is position:fixed and the .screen overlays sit at
 * z-index 5. Positioned elements paint above non-positioned ones, so the
 * canvas and the screens both painted straight over the anchor: a real banner
 * creative was placed into a slot nothing could ever see. Measured across the
 * library, a 90px test creative was occluded in 15 of 16 games.
 *
 * Anchoring it as a fixed top band above the canvas and the screens makes the
 * slot actually visible. It stays below the interstitial/debug layers
 * (z-index 999+) so a full-screen ad still covers it.
 * -------------------------------------------------------------------------- */
#thela-ad-anchor {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* The band itself must not eat taps meant for the game; the creative re-enables. */
  pointer-events: none;
}
#thela-ad-anchor > * { pointer-events: auto; }

/* ---- banner slot ---------------------------------------------------- */
.thela-banner-slot {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 50px; /* reserved so a loaded creative never causes layout shift */
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
  pointer-events: auto;
}
.thela-banner-slot.thela-slot-bare {
  /* No creative and not debugging: reserve nothing visible. The height comes
     back the moment a real creative is appended. */
  background: none;
  border: 0;
  min-height: 0;
  margin: 0;
}

.thela-banner-placeholder {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

/* ---- sponsor slot ------------------------------------------------------ */
.thela-sponsor-slot {
  margin: 8px auto 0;
  display: flex;
  justify-content: center;
}
.thela-sponsor-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.thela-sponsor-label { opacity: 0.6; text-transform: uppercase; font-size: 9px; }
.thela-sponsor-logo { height: 16px; max-width: 90px; object-fit: contain; }
.thela-sponsor-name { font-weight: 700; }

/* ---- interstitial / rewarded overlay ----------------------------------- */
.thela-ad-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(4, 6, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.thela-ad-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.thela-ad-kicker {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
}
.thela-ad-spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.8);
  animation: thela-spin 0.9s linear infinite;
}
@keyframes thela-spin { to { transform: rotate(360deg); } }
.thela-ad-note {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* ---- rewarded CTA button ------------------------------------------------ */
.thela-rewarded-cta {
  margin-top: 14px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #04121a;
  background: #ffd400;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 4px 0 #a87c00;
  touch-action: manipulation;
}
.thela-rewarded-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #a87c00; }
.thela-rewarded-cta:disabled { opacity: 0.5; cursor: default; }

/* ---- dev/test panel (only rendered when testMode or ?ad_debug=1) ------- */
.thela-debug-panel {
  position: fixed;
  top: 6px;
  right: 6px;
  z-index: 1000;
  width: 220px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: 'Courier New', Courier, monospace;
  color: #cdeaff;
  font-size: 10px;
  pointer-events: auto;
}
.thela-debug-header {
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.thela-debug-body { padding: 0 8px 8px; }
.thela-debug-panel.thela-collapsed .thela-debug-body { display: none; }
.thela-debug-label { margin-top: 6px; opacity: 0.6; text-transform: uppercase; font-size: 9px; }
.thela-debug-row { padding: 2px 0; }
.thela-debug-btns { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.thela-debug-btns button, .thela-debug-action {
  font-family: inherit;
  font-size: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: #cdeaff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
}
.thela-debug-action { display: block; width: 100%; margin-top: 4px; }
.thela-debug-summary { white-space: pre-wrap; max-height: 140px; overflow: auto; font-size: 9px; opacity: 0.8; }