/* Ad slots for the static game and marketing pages. * * The behaviour lives in /ads.js, which the Flutter game page already uses. * This file is only the reserved geometry, lifted from the inline block in * frontend/web/index.html so the static pages get identical slots instead of a * second implementation that drifts. * * WHY THESE PAGES HAD NO ADS AT ALL UNTIL 2026-09-08 * * scripts/apply_adsense.py puts the AdSense LOADER in every page's , * which is what Google's reviewer looks for. It does not place any units, and * nothing else did either, so /fill-the-grid and /storyboard loaded the script * and then rendered no ad. A loader with no slot earns nothing. * * Two rules here are not cosmetic. The height is RESERVED before the ad * arrives, because an ad that lands late and pushes the page down is a layout * shift, and Core Web Vitals feed search ranking: a bad CLS score costs more * organic traffic than the ad earns. And an unfilled slot COLLAPSES rather * than leaving a grey band, which ads.js handles. */ .ad-slot { display: none; margin: 0 auto; max-width: 820px; overflow: hidden; text-align: center; } .ad-slot--active { display: block; } #ad-top.ad-slot--active { min-height: 90px; padding: 8px 0; } #ad-bottom.ad-slot--active { min-height: 250px; padding: 16px 0; } /* Below 800px a leaderboard does not fit; reserve a mobile banner instead. */ @media (max-width: 800px) { #ad-top.ad-slot--active { min-height: 50px; } } /* The sticky bottom anchor. position:fixed keeps it out of the document flow, * so it contributes no layout shift, and the body gets matching padding while * it is shown so it never covers content. Both are Google policy, not taste. */ .ad-anchor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; max-width: none; background: var(--brand-surface, #14181f); border-top: 1px solid var(--brand-border, #2a2f3a); /* Clears the iOS home indicator, or the close button sits under the system gesture area and cannot be tapped. */ padding-bottom: env(safe-area-inset-bottom, 0px); } body.has-anchor { padding-bottom: 108px; } @media (max-width: 800px) { body.has-anchor { padding-bottom: 68px; } } .ad-dismiss { position: absolute; top: 2px; right: 4px; width: 22px; height: 22px; line-height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: var(--brand-text, #e8ecf3); font-size: 16px; cursor: pointer; }