/* * Moyako Games — Ad Slot + House Ad styling * ------------------------------------------------------------------ * Loaded once per page in alongside shared/styles.css. * * Dimensions come from CSS custom properties so breakpoints stay in * one place. Reserved height prevents Cumulative Layout Shift when * ads render or swap to house-ad fallback. v3 §ad-placement-matrix * is the source of truth for which breakpoint gets which format. */ :root { /* Reserved ad-slot heights by breakpoint — must match ads-config.js Moyako.adsConfig.breakpoints.*.bannerHeight values */ --ad-slot-h-phone: 60px; /* small-phone + phone (320x50 banner) */ --ad-slot-h-tablet: 90px; /* tablet portrait + landscape (728x90) */ --ad-slot-h-rail-w: 300px; /* desktop >= 1280 right-rail width */ --ad-slot-h-rail-h: 250px; /* desktop >= 1280 right-rail height */ /* Native in-feed / in-list cards grow to their content */ --ad-slot-h-native: auto; } /* ================================================================= Slot container — reserved dimension, never renders empty ================================================================= */ .moyako-ad-slot { position: relative; box-sizing: border-box; width: 100%; min-height: var(--ad-slot-h-phone); margin: 0; padding: 0; background: transparent; overflow: hidden; } /* Breakpoint: tablet portrait and up — use 728x90 banner height */ @media (min-width: 768px) { .moyako-ad-slot.moyako-ad-slot--banner { min-height: var(--ad-slot-h-tablet); } } /* Right-rail 300x250 medium rectangle — spec v4 §D.1 / D.3. Hidden below 1280. At >=1280 rendered as a fixed right-column anchored below the TopBar. position:fixed means inserting/removing the slot at the 1279<->1280 breakpoint does NOT reflow main content (no CLS). Live only on home, games list, leaderboard per v4 §D.3. */ .moyako-ad-slot.moyako-ad-slot--rightRail { display: none; } @media (min-width: 1280px) { .moyako-ad-slot.moyako-ad-slot--rightRail { display: block; position: fixed; top: 120px; /* clears the tallest fixed header (100px on index) + gutter */ right: 24px; width: var(--ad-slot-h-rail-w); min-height: var(--ad-slot-h-rail-h); z-index: 10; } /* Reserve right-gutter on content so it doesn't run under the fixed rail. Two scopes — v2 AppShell pages (games list, leaderboard) put the gutter on the scrollable .middle, while the homepage (which has no .page wrapper) uses body padding. Both guard on :has() of the rail slot so pages without a rail are untouched. */ body:has(> .page.scrollable .moyako-ad-slot--rightRail) .page.scrollable > .middle { padding-right: calc(var(--ad-slot-h-rail-w) + 48px); } body:has(.moyako-ad-slot--rightRail):not(:has(.page.scrollable)) { padding-right: calc(var(--ad-slot-h-rail-w) + 48px); } } .moyako-ad-slot.moyako-ad-slot--native { min-height: var(--ad-slot-h-native); } .moyako-ad-slot-label { position: absolute; top: 2px; right: 6px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); pointer-events: none; z-index: 2; } [data-theme="light"] .moyako-ad-slot-label { color: rgba(0, 0, 0, 0.45); } .moyako-ad-slot-content { display: block; width: 100%; min-height: inherit; } /* Hidden state — used when entering focus-mode (active gameplay or assessment-question). Dimension is preserved so state transitions don't trigger CLS. Three selectors: - [hidden] / .is-hidden — explicit per-slot opt-in (rare) - body[data-focus-mode="on"] — universal trigger set by shared/js/ moyako-focus.js (PR-6b.1). Hides the v2 .moyako-ad-slot, the legacy .ad-slot wrapper (chess), and the legacy #moyako-ad-bottom slot (all other games). ads.css is loaded on every game page, so the rule applies site-wide even where moyako-layout.css isn't. */ .moyako-ad-slot[hidden], .moyako-ad-slot.is-hidden, body[data-focus-mode="on"] .moyako-ad-slot, body[data-focus-mode="on"] .ad-slot, body[data-focus-mode="on"] #moyako-ad-bottom { visibility: hidden; pointer-events: none; } /* Sprint 5c Phase 4 (PR-6b.11) — hide the legacy #moyako-ad-bottom slot everywhere. The v2 .moyako-ad-slot--banner is now wired on every page that needs a bottom banner (chess, 6 games, assessment, games, leaderboard, profile), so the legacy slot became a visual duplicate that rendered mid-page or doubled-up at the bottom depending on viewport. Element stays in the DOM so MoyakoAds.showBanner() calls don't throw; they just inject into an invisible container until PR-6d physically removes it. */ #moyako-ad-bottom { display: none !important; } /* ================================================================= House-ad card — cross-promo fallback ================================================================= */ .moyako-house-ad { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: inherit; padding: 10px 16px; color: #fff; text-decoration: none; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); transition: filter 160ms ease; } .moyako-house-ad:hover { filter: brightness(1.08); } .moyako-house-ad:active { filter: brightness(0.95); } .moyako-house-ad-body { flex: 1 1 auto; min-width: 0; } .moyako-house-ad-title { font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moyako-house-ad-sub { font-size: 12px; opacity: 0.9; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moyako-house-ad-cta { flex: 0 0 auto; padding: 8px 14px; background: rgba(255, 255, 255, 0.25); border-radius: 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; } /* Right-rail shape — stack vertically instead of side-by-side */ .moyako-ad-slot--rightRail .moyako-house-ad { flex-direction: column; justify-content: flex-start; text-align: left; padding: 16px 14px; min-height: var(--ad-slot-h-rail-h); } .moyako-ad-slot--rightRail .moyako-house-ad-title { white-space: normal; font-size: 17px; } .moyako-ad-slot--rightRail .moyako-house-ad-sub { white-space: normal; font-size: 13px; margin-top: 8px; } .moyako-ad-slot--rightRail .moyako-house-ad-cta { margin-top: auto; align-self: flex-start; }