:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.page{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--background-color)}p,h1,h2,h3,h4,h5,h6{margin:0}body{margin:0;background-color:var(--background-color)}button{outline:none;border:none;padding:0}@font-face{font-family:SFProRounded;src:url(/fonts/SFProRounded-Semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:GoogleSans;src:url(/fonts/GoogleSans-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:GoogleSans;src:url(/fonts/GoogleSans-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@media(prefers-color-scheme:light),(min-width:568px){:root{--primary-text-color: #000000;--secondary-text-color: #1d1d1f;--tertiary-text-color: #333333;--subheader-text-color: #0000004d;--link-color: #0070c9;--background-color: #ffffff;--header-bg-color: rgba(250, 250, 252, .8);--nav-link-color: #000000cc;--nav-link-icons-color: #000000;--section-border-color: #e3e3e3;--footer-color: #f5f5f7;--footer-links: #000000b8;--footer-links-border: #0000001a;--card-bg: #f8f8f8;--instruction-sheet-bg: rgba(231, 231, 236, .7);--instruction-sheet-content-bg: #ffffff;--section-header-color: #1d1d1f;--appstore-background-color: #ffffff;--googleplay-background-color: #ffffff;--appstore-rating-color: #4c4c50;--appstore-rating-text: #636366;--appstore-star-filled: #000000;--appstore-star-outline: #ddd;--appstore-star-interactive: #1273ff;--appstore-review-bg: #ffffff;--appstore-review-border: #e5e5e7;--appstore-action-btn-bg: #f2f2f7;--appstore-action-btn-border: #d1d1d6;--appstore-action-btn-text: #000000;--appstore-action-btn-icon: #000000;--appstore-screenshot-bg: #ffffff;--appstore-device-text: #8e8e93;--appstore-age-rating-border: #636366;--appstore-age-rating-text: #636366;--appstore-subtitle-color: #666666;--appstore-pricing-color: #333333;--appstore-in-app-color: #636366;--appstore-share-btn-color: #007aff;--appstore-share-btn-hover: rgba(0, 122, 255, .1);--appstore-install-btn-bg: #368efa;--appstore-install-btn-hover: #0056cc;--appstore-bar-bg: #e5e5e7;--appstore-bar-fill: #666666;--appstore-info-border: #c6c6c8;--appstore-info-label: #969696;--appstore-info-value: #000000;--appstore-info-action: #007aff;--appstore-description-text: #1d1d1f;--appstore-description-toggle: #0070c9;--appstore-developer-name: #007aff;--appstore-developer-info: #8e8e93;--google-primary-text-color: #202124;--google-secondary-text-color: #5f6368;--google-play-device-tab-bg: #ffffff;--google-play-device-tab-border: #dadce0;--google-play-device-tab-active-bg: #0b57cf;--google-play-device-tab-active-color: #ffffff;--google-tag-text-color: #5f6368;--google-install-bg: #0147ed;--google-install-text: #ffffff;--google-blue-text: #0b57cf;--google-see-details-text: #0b57cf;--google-rating: #0b57cf;--google-nav-color: #0b57cf;--google-rating-bg: rgba(11, 87, 207, .08)}}@media(min-width:568px){:root{--google-play-device-tab-active-bg: #01875f;--google-install-bg: #01875f;--google-blue-text: #01875f;--google-see-details-text: #01875f;--google-rating: #01875f;--google-nav-color: #01875f;--google-rating-bg: rgba(1, 135, 95, .08)}}@media(prefers-color-scheme:dark)and (max-width:567px){:root{--primary-text-color: #ffffff;--secondary-text-color: #ffffff;--tertiary-text-color: #ffffff;--subheader-text-color: #8e8e93;--link-color: #007aff;--background-color: #000000;--header-bg-color: #232323;--nav-link-color: #ffffff;--nav-link-icons-color: #ffffff;--section-border-color: #393939;--footer-color: #232323;--footer-links: #ffffff;--footer-links-border: #ffffff;--card-bg: #1b1b1b;--instruction-sheet-bg: rgba(35, 35, 35, .4);--instruction-sheet-content-bg: #2e2e2e;--section-header-color: #f2f2f7;--appstore-background-color: #1c1c1e;--googleplay-background-color: #131313;--appstore-rating-color: #ffffff;--appstore-rating-text: #8e8e93;--appstore-star-filled: #ffffff;--appstore-star-outline: #8e8e93;--appstore-star-interactive: #007aff;--appstore-review-bg: #2c2c2e;--appstore-review-border: #2c2c2e;--appstore-action-btn-bg: #2c2c2e;--appstore-action-btn-border: #3a3a3c;--appstore-action-btn-text: #ffffff;--appstore-action-btn-icon: #ffffff;--appstore-screenshot-bg: #1c1c1e;--appstore-device-text: #8e8e93;--appstore-age-rating-border: #8e8e93;--appstore-age-rating-text: #8e8e93;--appstore-subtitle-color: #8e8e93;--appstore-pricing-color: #ffffff;--appstore-in-app-color: #8e8e93;--appstore-share-btn-color: #408ff7;--appstore-share-btn-hover: rgba(0, 122, 255, .1);--appstore-install-btn-bg: #408ff7;--appstore-install-btn-hover: #358af8;--appstore-bar-bg: #3a3a3c;--appstore-bar-fill: #8e8e93;--appstore-info-border: #3a3a3c;--appstore-info-label: #8e8e93;--appstore-info-value: #ffffff;--appstore-info-action: #408ff7;--appstore-description-text: #ffffff;--appstore-description-toggle: #408ff7;--appstore-developer-name: #408ff7;--appstore-developer-info: #8e8e93;--google-primary-text-color: #ffffff;--google-secondary-text-color: rgba(227, 227, 227, .6);--google-play-device-tab-bg: #ffffff26;--google-play-device-tab-border: transparent;--google-play-device-tab-active-bg: #a8c8fb;--google-play-device-tab-active-color: #033e9c;--google-tag-text-color: #ffffff;--google-install-bg: #a8c8fb;--google-install-text: #033e9c;--google-blue-text: #b4c4e7;--google-see-details-text: #a8c8fb;--google-rating: #a8c8fb;--google-nav-color: #a8c8fb;--google-rating-bg: rgba(255, 255, 255, .1)}}.app__root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center} /* pl: upstream .loading/.loading__spinner/.loading__text/@keyframes spin removed -- the page is server-rendered so there is no boot spinner, and `.loading` collides with the fake-download progress bar (css/style.css) that js/install.js drives. upstream `body.blocked{overflow:hidden}` removed -- in-app browsers are redirected to the tracker instead of being shown a block screen. */ /* pl: the fake-download progress bar has been removed -- the reference has no such animation, and the old "progress then Install again" cycle read as a dead button. js/install.js no longer references .loading/.runner. */ /* pl: breakpoint visibility helpers. Upstream decides these in JS (useMedia -> `!isMobile &&
`), which a server-rendered page cannot do. Every breakpoint variant is rendered and hidden here instead, using upstream's exact boundaries: mobile <= 567px tablet 568-959px desktop >= 960px These only ever set display:none, so an element keeps whatever display its own rule gives it (important for flex containers like .google-apps-sidebar). */ @media (max-width:567px){.pl-hide-mobile{display:none !important}} @media (min-width:568px) and (max-width:959px){.pl-hide-tablet{display:none !important}} @media (min-width:960px){.pl-hide-desktop{display:none !important}} /* pl: collapsible bodies. Contract with js/install.js: #text and per-review bodies toggle `.collapsed`. Upstream had no rule for this because the React build clamped in component state. */ .collapsed{max-height:100px;overflow:hidden} .google-about-game__description.collapsed{max-height:100px} .app-description__text.collapsed{max-height:110px} .ratings-and-reviews__review-content.collapsed{max-height:60px} @media (max-width:567px){.collapsed{max-height:120px}} /* pl: App Store breakpoint helpers. The App Store variant uses DIFFERENT boundaries from the Google Play one: its layout switches at 576px, and its header nav collapses at 1024px. Kept separate from .pl-hide-* so the two variants cannot drift into each other's breakpoints. */ @media (max-width:576px){.pl-as-hide-mobile{display:none !important}} @media (min-width:577px){.pl-as-only-mobile{display:none !important}} @media (max-width:1024px){.pl-as-hide-narrow{display:none !important}} @media (min-width:1025px){.pl-as-only-narrow{display:none !important}} /* Ratings section drops its top border on mobile upstream (withoutBorder). */ @media (max-width:576px){.pl-as-noborder-mobile{border-width:0 !important}} /* App Store section spacing. Upstream sets these as INLINE styles that only apply on mobile (marginX/paddingX/withoutBorder props); one server-rendered section serves both breakpoints, so they become classes here. */ @media (max-width:576px){ .pl-as-mx-mobile{margin-inline:20px} .pl-as-px-mobile{padding-inline:20px} .pl-as-border0-mobile{border-width:0 !important} } /* Upstream puts the install button directly inside .app-card__actions on mobile and wraps it in .app-card__install-section above 576px. display:contents dissolves the wrapper so the button becomes a direct flex child, matching the reference layout without rendering the button twice. */ @media (max-width:576px){.pl-as-only-mobile-unwrap{display:contents}}