/* * BossLevel shared ad styles. * * Banner: lives immediately above

on every game page. * Full-width gray strip that matches the footer's background, so banner + footer * read as one continuous "bottom" zone regardless of the game's theme above it. * Without this, dark-themed games (dont-touch-red, water-sort, block-drop) * would render the banner area in their canvas colour and the footer in gray — * a hard colour split between the two. * * The ad slot inside is capped at 960px to match footer-content width. * * Interstitial: see #bl-interstitial styles at the bottom of this file. One * shared full-screen overlay, injected once into by /assets/ads.js. */ /* width:100% + box-sizing:border-box are defensive: 3 games (block-drop, * knife-hit, tap-upgrade-explode) set `body { display:flex; align-items:center }`, * which sizes flex children to their content width and centers them. Without * width:100% the banner would be a narrow strip with the dark body bg leaking * on either side — same hazard as the old margin-top gap. * * No margin-top: banner sits flush against whatever's above (usually the * .seo-wrapper, which is the same #F8F9FA gray). The 1px border-top is the * only visible separator. */ .bl-banner-ad { display: block; width: 100%; box-sizing: border-box; background: #F8F9FA; border-top: 1px solid #E5E7EB; padding: 2rem 1.5rem 1rem; font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; } .bl-banner-ad__label { font-size: 0.7rem; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; margin-bottom: 0.5rem; } .bl-banner-ad ins.adsbygoogle { display: block; min-height: 50px; max-width: 960px; margin: 0 auto; } /* When the banner sits immediately above the footer, eliminate the gap (no * margin) but KEEP the footer's 1px top border — it acts as a clean separator * between the Advertisement section and the site links underneath, so users * can still see the two as distinct zones. Static pages with no banner are * unaffected — footer keeps its own top border + margin there. */ .bl-banner-ad + footer.bl-footer { margin-top: 0; /* border-top inherited from /assets/footer.css — acts as separator */ } /* ==================================================================== * Interstitial overlay (#bl-interstitial) * * One shared overlay, injected into by /assets/ads.js on first use. * Two triggers (auto on every 3rd game over, manual via "Continue (Watch * Ad)" buttons) both use the same overlay — no per-page markup needed. * * z-index 9999 sits above most game UI. Games with their own overlays * (pause menus, modals) at z-index >= 9999 should ensure they hide before * calling BossLevelAds, otherwise the interstitial may render behind them. * ==================================================================== */ .bl-interstitial { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 15, 25, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; } .bl-interstitial[hidden] { display: none; } /* Lock body scroll while the overlay is open. Games that already lock * scroll during gameplay won't notice; menu/static contexts will. */ body.bl-interstitial-open { overflow: hidden; } .bl-interstitial__inner { background: #FFFFFF; border-radius: 16px; padding: 1rem 1rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 340px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .bl-interstitial__label { font-size: 0.7rem; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; } /* The slot is sized to the 300x250 medium rectangle by ads.js (the * style attr). This wrapper just centers it. */ .bl-interstitial__slot { display: flex; align-items: center; justify-content: center; min-width: 300px; min-height: 250px; } .bl-interstitial__footer { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; } .bl-interstitial__timer { font-size: 0.875rem; color: #6B7280; font-weight: 600; } .bl-interstitial__timer[hidden] { display: none; } .bl-interstitial__close { appearance: none; -webkit-appearance: none; background: #FF6B4A; color: #1A1A2E; /* C3.2 2026-05-18: was #FFFFFF (2.82:1 on warm-accent, failed AA). Now 6.05:1. */ border: none; border-radius: 10px; padding: 0.75rem 1.75rem; font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .bl-interstitial__close:hover { background: #E85A3A; } .bl-interstitial__close:active { transform: translateY(1px); } .bl-interstitial__close[hidden] { display: none; } @media (max-width: 360px) { /* On narrow viewports the 300px slot still fits but the inner padding * shrinks so the card doesn't overflow its 1rem outer padding. */ .bl-interstitial__inner { padding: 0.75rem 0.5rem 1rem; } }