/* Ten Second Games — top Display ad strip */
:root {
  --fg-ad-h: 0px;
}

#fg-ad-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  box-sizing: border-box;
  height: var(--fg-ad-h);
  padding-top: env(safe-area-inset-top, 0px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0614;
  border-bottom: 1px solid rgba(0, 240, 255, 0.22);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  transition: height 0.18s ease, opacity 0.18s ease, border-width 0.18s ease;
  pointer-events: auto;
}

#fg-ad-banner.fg-ad-hidden {
  height: 0 !important;
  opacity: 0;
  border-bottom-width: 0;
  pointer-events: none;
}

#fg-ad-banner .fg-ad-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#fg-ad-banner.fg-ad-320 .fg-ad-inner,
#fg-ad-banner.fg-ad-320 .fg-ad-frame {
  width: 320px;
  height: 50px;
}

#fg-ad-banner.fg-ad-728 .fg-ad-inner,
#fg-ad-banner.fg-ad-728 .fg-ad-frame {
  width: 728px;
  height: 90px;
}

#fg-ad-banner .fg-ad-frame {
  display: block;
  border: 0;
  overflow: hidden;
  background: transparent;
}

#fg-ad-banner .fg-ad-placeholder {
  width: min(100%, 320px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(0, 240, 255, 0.45);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 45, 149, 0.06) 0 6px,
      rgba(0, 240, 255, 0.04) 6px 12px
    );
  color: rgba(0, 240, 255, 0.75);
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  user-select: none;
}

/* Adsterra ad container will be inserted here */

/* Push page content down when reserve mode is on (hub / puzzle chrome). */
body.fg-ads-reserve {
  padding-top: var(--fg-ad-h);
}

/*
 * Letterbox shells only (Hoops / Skeeball / Moon Base Zero).
 * Heights use vh → dvh (never %) so iOS gets a definite used height.
 */
body.fg-ads-offset #arena {
  top: var(--fg-ad-h) !important;
  height: calc(100vh - var(--fg-ad-h)) !important;
  height: calc(100dvh - var(--fg-ad-h)) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/*
 * Full-bleed root canvases (Hexabombs #board, Save Pinky #game, Chopper #c):
 * ONLY nudge `top`. Never force width/height — those games size the box in JS,
 * and !important dimensions were collapsing / clipping the playfield on mobile.
 */
body.fg-ads-offset > #board,
body.fg-ads-offset > #game,
body.fg-ads-offset > #c {
  top: var(--fg-ad-h) !important;
}

/* Keep fixed depot links below the strip when it is visible. */
body.fg-ads-offset #depotLink {
  top: calc(10px + var(--fg-ad-h)) !important;
}

/* Hexagons HUD sits under the strip while paused / on end screens. */
body.fg-ads-offset #hud {
  margin-top: var(--fg-ad-h);
}

/* Save Pinky: keep chrome below the ad strip */
body.fg-ads-offset #pauseBtn,
body.fg-ads-offset #gearBtn,
body.fg-ads-offset #helpBtn,
body.fg-ads-offset #score,
body.fg-ads-offset #heartsHud {
  top: calc(2.5vh + var(--fg-ad-h)) !important;
}

/* Chopper Madness corner controls */
body.fg-ads-offset #cornerBtns {
  top: calc(max(12rem, env(safe-area-inset-top, 0rem)) + var(--fg-ad-h)) !important;
}

body.fg-ads-offset .overlay {
  padding-top: var(--fg-ad-h);
}