/* ═══════════════════════════════════════════════════════════════════ gap-mobile.css — the small-screen layer for the Netlify build ONLY. Purely additive: everything here lives inside a media query (or the body.touch class), so on a normal desktop window this file changes nothing and gap.css behaves exactly as it always has. Two independent axes: • LAYOUT (single column, the bank docked bottom/side) keys off viewport size + orientation — a phone-shaped window. • INPUT (kill the cursor-follow chip, show which chip is "armed", collapse used chips) keys off POINTER type, not size — so a narrow desktop window keeps its floating chip, while a touch tablet gets tap feedback even in the roomier layout. ═══════════════════════════════════════════════════════════════════ */ /* ── Colour guard (all viewports) ─────────────────────────────────── The passage inherits its colour from . The shared, cross-origin redisco/style.css (loaded for the #controls bar) themes the body by attribute — body[data-theme="…"] { color: … } — and once script.js writes data-theme, that attribute selector OUT-SPECIFIES gap.css's plain `body { color: var(--gf-ink) }`. On a skin whose background doesn't match that theme's text colour, the result is invisible text (e.g. light ink on a light skin) even though the controls look right. Pinning the skin's ink at id-specificity makes the reading surfaces immune to whatever the body theme does. */ #fillout, #fillout-text, #fillout h2, #masthead, #fo-home, #fo-chooser, a.word { color: var(--gf-ink); } #fillout h2, #fo-home h2 { color: var(--gf-ink-strong); } /* ── Single column, ALWAYS (all viewports) ────────────────────────── This build was "single column always" from the start — the two-column passage is only the desktop beesknees version (which doesn't load this file). This must NOT be scoped to a phone width: a tablet, foldable, or any screen wider than a phone breakpoint would otherwise fall back to gap.css's two-column rule. Unconditional here fixes it everywhere. */ #fillout-text { columns: 1 !important; column-count: 1 !important; column-width: auto !important; column-rule: none !important; } /* ── Shared small-screen layout: phones and tablets ───────────────── Up to 1024px wide (covers tablets in portrait, foldables, big phones) or any short landscape viewport. Single column is already forced globally above; this block is the chrome: fixed controls, docked bank, bottom-sheet popup, bigger tap targets. */ @media (max-width: 1024px), (orientation: landscape) and (max-height: 500px) { body { padding: 0; -webkit-text-size-adjust: 100%; } .main-content { max-width: none; margin: 0; } /* the passage scrolls between the fixed bars */ #fillout-text { margin-bottom: 22px; } /* controls become a slim fixed top bar the passage scrolls under */ #controls { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 7px 12px; padding-top: calc(7px + env(safe-area-inset-top)); background: var(--gf-bg); border-bottom: 1px solid var(--gf-rule); z-index: 30; } #controls #entry-count { margin-right: auto; font-size: 12px; color: var(--gf-ink); opacity: 0.7; } /* roomier tap targets for the chips */ a.word { padding: 0.5em 1.05em; -webkit-tap-highlight-color: transparent; } /* the verdict popup becomes a bottom sheet, pinned to the viewport so it's always visible no matter where the passage is scrolled */ #milan-says { position: fixed; top: auto; left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; min-height: 0; border-radius: 14px 14px 0 0; padding: 1.25em 1.25em calc(1.25em + env(safe-area-inset-bottom)); z-index: 40; animation: gfSheetUp 0.18s ease-out; } @keyframes gfSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } } /* ── Portrait: the word bank docked along the bottom ───────────────── */ @media (max-width: 1024px) and (orientation: portrait) { #fillout { /* clear the fixed top bar; leave room at the bottom so the last lines can scroll clear of the docked bank */ padding: 58px 18px 36vh; } #masthead { margin-top: 2px; } #words { position: fixed; left: 0; right: 0; bottom: 2em; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--gf-bg); border-top: 2px solid var(--gf-rule); display: flex; align-items: flex-start; gap: 12px; max-height: 34vh; z-index: 25; } /* only the words scroll; the tools column stays put beside them */ #words ul { flex: 1; max-height: calc(34vh - 28px); overflow-y: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; gap: 9px; } #words-tools-side { padding-left: 12px; border-left: var(--gf-column-rule); } } /* ── Landscape phones: the bank becomes a right-hand rail ──────────── */ @media (orientation: landscape) and (max-height: 500px) { #fillout { padding: 50px 16px 16px; padding-right: calc(11.5em + 16px); /* clear the fixed rail */ } #masthead { margin-top: 2px; font-size: 10px; letter-spacing: 0.05em; } #words { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 11.5em; margin: 0; padding: 50px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--gf-bg); border-left: 2px solid var(--gf-rule); display: flex; flex-direction: column; align-items: stretch; gap: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 25; } #words ul { flex: 0 0 auto; max-height: none; overflow: visible; justify-content: flex-start; gap: 9px; } /* tools drop below the words, separated by a rule across the top rather than down the side */ #words-tools-side { flex-direction: row; justify-content: center; gap: 1.4rem; padding: 0.8rem 0 0; border-left: none; border-top: var(--gf-column-rule); } /* keep the bottom sheet clear of the rail */ #milan-says { right: 11.5em; } } /* ── Touch input model (pointer-based, NOT size-based) ────────────── Active on any coarse-pointer / no-hover device, whatever the layout. body.touch is added by boot.js on those same devices; the two agree, and the class is what lets us mark individual chips. */ @media (hover: none), (pointer: coarse) { /* the cursor-follow chip never makes sense without a cursor */ #mouser { display: none !important; } } /* the armed chip: the engine hides it (it "left" the bank to ride the cursor) — with no cursor to ride, we keep it in place and light it up instead, so there's clear "this word is in your hand" feedback */ body.touch a.word.armed { visibility: visible !important; background: var(--gf-accent); color: var(--gf-bg); border-color: var(--gf-accent); } /* a used chip collapses out of the bank entirely, freeing space and doubling as progress — but never during the intro reveal, when chips are legitimately hidden/shown as part of the animation */ body.touch:not(.intro-playing) #words li:has(a.word.used) { display: none; }