/* Visible article below the game — see lib/wrapper/features/content.ts. Must stay visible: this is the indexed content of the page. */ /* The shell locks the page to one non-scrolling screen: snax-shell.css has `html, body { height: 100%; overflow: hidden }` and `#snax-layout { height: 100dvh }`. The article is a sibling after the layout, so without these overrides it starts at y=100dvh and is clipped with no way to scroll to it — in the DOM, invisible to a reader, and hidden text to a rendering crawler. This file is only linked when the content feature is enabled, and it loads after snax-shell.css, so these turn the page into a scrolling document without affecting games that ship without a content section. The game keeps its fixed one-screen box (#snax-game-wrap sets its own height); only the page around it is allowed to grow. overflow-x stays hidden so a game that paints past its box can't introduce a horizontal scrollbar. Only the element scrolls; stays `overflow: visible`. Making BOTH scroll (the state this file shipped with) triggers an iOS Safari bug where the nested scrollers fight and touch scrolling freezes after the first gesture — the reported "can't scroll on mobile" symptom. The scrollbar is hidden (scrollbar-width / ::-webkit-scrollbar) so the article doesn't paint a desktop track down the side of the game. */ html { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; } html::-webkit-scrollbar { display: none; } body { height: auto; min-height: 100%; overflow: visible; } #snax-layout { height: auto; min-height: 100dvh; } /* Floating pills — two mutually-exclusive modes sharing one bottom-center spot. Game mode: the single "How to play" cue floats over the frame. Read mode (scrolled into the article): the cluster with "Back to game" + "Tips". content.js toggles `.show` on exactly one of them by scroll position. */ #snax-content-cue, #snax-content-pills { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%) translateY(12px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1); } #snax-content-cue.show, #snax-content-pills.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } #snax-content-pills { display: inline-flex; gap: 8px; } /* Shared pill look — the cue button and each button inside the cluster. */ #snax-content-cue, #snax-content-pills button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(20, 20, 30, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #f0f0ff; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } #snax-content-cue:hover, #snax-content-pills button:hover { background: rgba(28, 28, 40, 0.95); } /* The cue is the positioned element, so its press-state must keep the centering transform; the cluster buttons are static children and just scale. */ #snax-content-cue:active { transform: translateX(-50%) scale(0.97); } #snax-content-pills button:active { transform: scale(0.97); } #snax-content { max-width: 720px; margin: 0 auto; padding: 32px 20px 56px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #cacae0; font-size: 15px; line-height: 1.75; scroll-margin-top: 56px; } #snax-content h1 { font-size: 26px; line-height: 1.2; font-weight: 800; color: #fff; margin: 0 0 14px; } #snax-content h2 { font-size: 17px; font-weight: 700; color: #fff; margin: 30px 0 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); } #snax-content p { margin: 0 0 14px; } .snax-content-lead { font-size: 16px; color: #fff; font-weight: 500; } .snax-content-steps, .snax-content-tips { margin: 0 0 14px; padding-left: 20px; } .snax-content-steps li, .snax-content-tips li { margin-bottom: 8px; } .snax-content-nav { display: flex; flex-wrap: wrap; gap: 16px; margin: 32px 0 16px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); } #snax-content a { color: #a8ff3e; text-decoration: none; } #snax-content a:hover { text-decoration: underline; } .snax-content-foot { font-size: 13px; color: #8a8aa3; } @media (max-width: 600px) { #snax-content { padding: 24px 16px 40px; font-size: 14px; } #snax-content h1 { font-size: 22px; } }