/* ===================================================== THE GAME SCREEN IS ONE SCREEN Phase 3. css/kid-games.css lays a game out as a DOCUMENT — a column that grows to whatever is in it — and says so in as many words: "a flex item only grows into free space, so a page with none ... a mounted game taller than the viewport ... is left exactly as it was." Measured at 390x844, seven of the eight games were exactly that: story-order 2112px star-map 1231 word-trek 1150 stage-lights 972 colour-creatures 1066 letter-trace 874 puppy-count 849 THE COST IS NOT THE SCROLLING, IT IS WHAT THE SCROLLING SEPARATES. A game asks a question at the top of the column and puts the answers at the bottom of it. At 2112px story-order could not show the picture she was placing and the slot she was placing it into at the same time: she scrolled down to find the tray, and the row of slots — the thing that says what the move even is — left the screen while she chose. Every game here is built on a spoken prompt and a visible target, and a screen that cannot hold both at once has broken the pairing the whole design rests on. SO THE FRAME IS FIXED AND THE CONTENT FITS INSIDE IT. While a game is mounted the document is exactly one viewport tall. The header, the jar, the companion row, the prompt card and the toolbar keep their natural heights and never move. Exactly one region per game — the one marked .kg-fit — is given whatever height is left and lays itself out inside that. WHY ONE REGION AND NOT A GLOBAL SHRINK. Most of what is on a game screen must not shrink: .kg-target has a floor (57px for Abby, 76px for Bella) that is a brief requirement, not a preference, and the prompt card is the sentence being spoken. The only thing that can honestly absorb a smaller screen is the play area itself, so that is the only thing asked to. NOTHING IS EVER TRAPPED. This sets `height`, not `overflow: hidden`. A screen too small for even the fitted layout — landscape, a large text-zoom setting — overflows the body and scrolls exactly as it does today. The fitted layout is the good case, not a cage. ===================================================== */ /* ---------------- The frame ---------------- js/kidgames/host.js adds .kg-playing to in showGame() and takes it off in showHub(), beside the meterCompact() call that already marks the same moment. The hub keeps the growing column it was designed around — kid-hub.css centres .kg-main in the leftover space and that only works while there IS leftover space. */ /* `height`, where .storybody sets `min-height`. A definite height is the whole mechanism: a flex child cannot be asked to shrink inside a parent that is still sizing itself to its contents. */ .kg-playing { height: 100dvh; } /* min-height: 0 on every link in the chain. Without it a flex item's automatic minimum size is its CONTENT size, and the tray simply pushes the column open again — the single most common way a layout like this silently does nothing. */ .kg-playing .kg-main { min-height: 0; /* kid-hub.css centres this column for the hub. On a game screen the mount takes the slack instead, so there is nothing left to centre and packing from the top is what keeps the prompt card in the same place round to round. */ justify-content: flex-start; } /* THE LINK THAT IS EASY TO MISS. The two screens share one grid cell so motion.js's transitionScreens() can overlap them (css/kid-hub.css's .kg-stage-shell), and that grid sits between .kg-main and the mount. Left alone it is `flex: 0 1 auto` with `min-height: auto` and `align-items: start` — it neither takes the slack nor lets its cell shrink, so every rule below it was correct and did nothing. Measured: main bounded at 776px, the stage 941px inside it. `start` is right for the hub, where the scene should sit at its own height at the top of the cell. On a game screen the mount IS the cell. */ .kg-playing .kg-stage-shell { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; } /* A grid item's automatic minimum size is its content, exactly as a flex item's is. The sheet already zeroes min-width here for the same reason in the other axis. */ .kg-playing .kg-stage-shell > * { min-height: 0; } .kg-playing .kg-mount { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .kg-playing .kg-game-root { flex: 1 1 auto; min-height: 0; } /* ONLY THE ELASTIC REGION IS ELASTIC. A flex item's default is `flex-shrink: 1`, so the moment the column is bounded EVERY band becomes negotiable — and flexbox took the height out of the text first. word-trek opened with "Welcome to the trailhead. Tap a word, then tap the pack it belongs in." squashed into a 28px box with the second line spilling behind the head card, which paints an opaque white background over it. It read as a truncated sentence, and it was on screen for the whole first round. The prompt is the spoken line printed. Nothing about it is slack, and the same goes for the legends, the head and the toolbar. They keep their natural height; .kg-fit below re-declares its own shrink because it is the one thing here that is allowed to give. */ .kg-playing .kg-game-root > * { flex-shrink: 0; } /* ---------------- The one region that absorbs it ---------------- A game marks its play area .kg-fit — the canvas, the star field, the pad grid, the picture tray. One class, one line per game, the same shape as the companion's per-game scaffold call: the game says which of its own regions is the elastic one, because only the game knows. */ .kg-playing .kg-fit { /* Re-declared after the shrink lock above: this is the region that gives. */ flex: 1 1 auto; /* NOT min-height: 0, WHICH IS THE TRAP THIS RULE EXISTS TO AVOID. Zeroing the minimum is what lets the chain above shrink at all, so the obvious thing is to zero it here too — and then the elastic region absorbs every last pixel of overflow and the page "fits". Measured with min-height 0: the word-trek tray came out 8px tall and story-order's 18px. Both games passed a document-height check while being impossible to play. A play area is not slack. The floor is one row of targets at the size the brief requires, plus the slop they are tapped by: below that there is nothing a move could be made in, and a page that overflows is a far smaller failure than a game that cannot be played. Games whose pieces are bigger than a target — story-order places whole illustrations — raise it in their own sheet. */ min-height: calc(var(--kg-target, 57px) + 2 * var(--kg-slop, 8px) + 8px); } /* Regions that CAN scale — an