/* Mobile sticky-footer ad strip (see src/ads.js for the loading rules).
   Collapsed to 0 height with pointer-events:none until a creative actually
   fills, so an empty slot never leaves a gap and never eats gameplay taps. */
#adFooter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above all game chrome (game z-indexes top out at 8); the pause <dialog>
     renders in the browser top layer, so it still stacks above the ad. */
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 92%, black);
}

#adFooter.is-open {
  height: auto;
  min-height: 50px;
  padding: 4px 0;
  pointer-events: auto;
  border-top: 1px solid var(--line);
}

/* Single placement, mobile only. Must match MOBILE_MAX in src/ads.js. */
@media (min-width: 900px) {
  #adFooter {
    display: none;
  }
}

/* --ad-foot is the measured height of whatever ad strip is docked at the
   bottom (set by src/ads.js, 0px when none). Everything that touches the
   bottom edge subtracts it so content can never sit under the ad. body is
   border-box (global rule in styles.css), so the padding shrinks the content
   box instead of growing the page. */
body {
  padding-bottom: var(--ad-foot, 0px);
}

.app-shell {
  min-height: calc(100vh - var(--ad-foot, 0px));
}

.toast {
  bottom: calc(20px + var(--ad-foot, 0px));
}

/* ?adpreview=1 placeholder (src/ads.js) for checking layout without live ads. */
.ad-stub {
  width: 320px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px dashed var(--line);
}