/* ══ Shared surface for the Brain Skills (cognitive) games ══════════════════ Added 9 Aug 2026. The activity boxes stay WHITE. What changed is the surface BEHIND them: it now carries a soft blue, so a white box reads as a raised object sitting on the page instead of a white shape on a white page. Why blue: of the hues studied, blue has the best support for alertness and sustained attention, and red is deliberately avoided as a field colour — exposure to red before a task is associated with avoidance motivation and poorer performance. Those hue effects are modest though, so the real visibility work here is done by SIZE, a defined EDGE and a soft SHADOW; the colour is the framing. NOT loaded by the dark-themed games (memory_grid, sequence_steps, listen_remember, daily_living_game) — a light blue surface would destroy their contrast. ═════════════════════════════════════════════════════════ */ :root{ --bs-field:#eaf1fa; /* soft blue surface */ --bs-field-deep:#dbe6f4; /* the page behind the app */ --bs-boxshadow:0 2px 5px rgba(28,55,95,.10), 0 8px 20px rgba(28,55,95,.07); /* ONE pair of numbers controls how big every activity box is. */ --bs-boxw:clamp(200px, 21vw, 340px); --bs-boxh:clamp(140px, 17vh, 280px); --bs-boxfs:clamp(16px, 1.5vw, 22px); --bs-boxpad:20px 16px; } body{background:var(--bs-field-deep);} .gw{background:var(--bs-field);} .gh{background:#fff;} /* backbtn.js drops two FIXED pills over the top-left corner — "← Games" at top:8px and "↺ Start over" at top:54px, together about 150x92px. They were sitting on top of this header, so "Follow the Pattern" read as "ow the Pattern" and the subtitle underneath was covered. Inset the header past them on a wide screen; on a narrow one there is no horizontal room to give, so the header drops below them instead. Added 23 Aug 2026 when the script went onto the 38 Brain Skills pages that had never had it. */ .gh{padding-left:152px;} @media (max-width:640px){ .gh{padding-left:0;padding-top:96px;} } .stage{background:var(--bs-field);} /* ── the activity boxes ──────────────────────────────────────────────────── Which buttons count as BOXES: · `:first-of-type:nth-last-of-type(n+3)` (plus its later siblings) matches a button only when it sits in a group of three or more — a row or grid of choices. A lone button in its own wrapper ("🔍 Another clue!") is a control, and sizing that one up turned it into a big empty card. · the named exclusions are the controls that can appear in a group. SPECIFICITY IS LOAD-BEARING. The structural pseudo-classes are wrapped in `:where()`, which contributes nothing, so each rule below scores about (0,1,1) — just enough to beat a game's resting tile style (usually one class), and deliberately NOT enough to beat its selected / correct / missed states (two classes). Without that, this sheet would repaint every game's feedback colours white. */ .stage button:where(:first-of-type:nth-last-of-type(n+3)):not(.nextb):not(.doneb):not(.judge):not(.jyes):not(.jno):not(.vbtn):not(.bs-start):not(.bs-again):not(.bs-setupbtn):not(.bs-csv):not(.fbtn):not(.bs-tile), .stage button:where(:first-of-type:nth-last-of-type(n+3)) ~ button:not(.nextb):not(.doneb):not(.judge):not(.jyes):not(.jno):not(.vbtn):not(.bs-start):not(.bs-again):not(.bs-setupbtn):not(.bs-csv):not(.fbtn):not(.bs-tile){ background:#fff; min-height:var(--bs-boxh); min-width:var(--bs-boxw); width:auto; /* fill the track; several games set a fixed width */ flex:1 1 var(--bs-boxw); /* ignored unless the container is a flex row */ padding:var(--bs-boxpad); border-radius:18px; font-size:var(--bs-boxfs); line-height:1.35; box-shadow:var(--bs-boxshadow); transition:box-shadow .15s ease, transform .15s ease; } /* ── how the box gets its size ───────────────────────────────────────────── Two different things look alike in the markup and must NOT be treated alike: A CHOICE SET (exactly 3–6 buttons) is a question. Its column count carries no meaning, so the container is given the page width and its track list is rewritten to fit boxes of --bs-boxw. That needs !important, because several games write the track list INLINE from JavaScript and an inline style outranks any stylesheet — without it the boxes demanded 302px inside 128px tracks and OVERLAPPED each other. A BOARD (7 or more) is a shape: a 5x5 route to memorise, an 8-wide scanning grid. Its track list is the game and must never be touched — so those get no width override at all, no minimum width, and only a taller cell. */ .stage :is(div,section,ul,ol,form):not(.fgrid):not(.bs-tiles):has(> button:first-of-type:is(:nth-last-of-type(3),:nth-last-of-type(4),:nth-last-of-type(5),:nth-last-of-type(6))){ width:100%; max-width:1180px; margin-left:auto; margin-right:auto; grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--bs-boxw)), 1fr)) !important; gap:16px; flex-wrap:wrap; } /* An arrangement per count, so a row is never left with one box dangling under it. All of these keep the choices on ONE row where possible: vertical space is the scarce resource here — a 2x2 for four options made the boxes widest but pushed games with two choice groups right off the bottom of the screen. */ .stage :is(div,section,ul,ol,form):not(.fgrid):not(.bs-tiles):has(> button:first-of-type:nth-last-of-type(3)){ grid-template-columns:repeat(3,1fr)!important; max-width:1140px; --bs-boxw:0px; } .stage :is(div,section,ul,ol,form):not(.fgrid):not(.bs-tiles):has(> button:first-of-type:nth-last-of-type(4)){ grid-template-columns:repeat(4,1fr)!important; max-width:1180px; --bs-boxw:0px; } .stage :is(div,section,ul,ol,form):not(.fgrid):not(.bs-tiles):has(> button:first-of-type:is(:nth-last-of-type(5),:nth-last-of-type(6))){ grid-template-columns:repeat(3,1fr)!important; max-width:1140px; --bs-boxw:0px; } /* ▶ THE OPT-OUT: .bs-tiles on the container and .bs-tile on the buttons. A game whose choices are PICTURE TILES rather than text says so with those two classes and keeps its own sizing. Faces and Names' .fgrid/.fbtn are the original, named case; .bs-tiles/.bs-tile is the general one, so the next game does not need a new pair of selectors here. ▶ Reach for it when the tile's SHAPE carries meaning — a square that holds a face or an object. A choice set's column count means nothing and the sheet is right to rewrite it; a picture tile stretched to 275x122 puts a 46px picture in the middle of an empty box. ▶ A THIRD SHAPE, added 23 Aug 2026: a PORTRAIT GRID (.fgrid / .fbtn). Faces and Names lays out square photo tiles, and its buttons come in threes, so the CHOICE SET rules above claimed it and forced repeat(3,1fr) — the tiles came out 369x129 with a 48px face marooned in the middle. A choice set's column count carries no meaning, but a portrait tile's SHAPE does: it has to stay square or the face shrinks to fit the height. Excluded by class above so the game keeps its own square sizing. */ /* boards: cells grow TALLER and keep whatever width the game laid out */ .stage :is(div,section,ul,ol,form):has(> button:first-of-type:nth-last-of-type(n+7)){ --bs-boxw:0px; --bs-boxh:clamp(88px, 11vh, 150px); --bs-boxfs:clamp(14px, 1.2vw, 18px); --bs-boxpad:12px 8px; } .stage :is(div,section,ul,ol,form):has(> button:first-of-type:nth-last-of-type(n+15)){ --bs-boxh:clamp(60px, 7.5vh, 104px); --bs-boxfs:clamp(13px, 1vw, 16px); --bs-boxpad:8px 6px; } /* On a short screen the header and prompt take a fixed ~250px that scaling by vh cannot recover, so a stack of five choice boxes tips over the fold. Give the boxes a slightly tighter allowance there. */ @media (max-height: 900px){ :root{ --bs-boxh:clamp(120px, 15vh, 240px); --bs-boxpad:14px 12px; } .stage :is(div,section,ul,ol,form):has(> button:first-of-type:nth-last-of-type(n+7)){ --bs-boxh:clamp(76px, 9.5vh, 130px); --bs-boxpad:10px 8px; } } /* A big box with a tiny picture in it looks like a mistake — and in these games the picture IS the item being judged. Grow it with the box. Scoped to choice boxes only, so the boards (which set their own cell art) are untouched. */ /* ▶ .bs-tile excluded here too. This sheet is linked AFTER a game's own