/* =========================================================================
Natteroo — Soft pastel
The eight game colours are fixed, saturated and loud. Everything around
them stays out of their way: a mint ground, white cards lifted by soft
shadows rather than drawn with outlines, sky-blue edges where an edge is
needed, and coral for the ONE primary action on a screen. Butter and
peach are tints, never buttons. No black or dark outline on anything —
elevation is a shadow, an edge is 1–2px of sky. (The rebrand to Natteroo,
from the "Soft pastel" direction on the design canvas — see
docs/STRATEGY.md.)
Two typefaces: Quicksand 600/700 for headings, buttons and the wordmark;
Lexend 300–700 for everything read — drawn to reduce visual stress for
developing readers, which is most of who uses this. Both from Google
Fonts by every page's (a local() @font-face only ever worked for
a visitor who had it installed).
========================================================================= */
:root {
/* Surface — mint, plain, no pattern anywhere. Work happens on white. */
--paper: #e9f6ef;
--card: #ffffff;
--card-raised: #ffffff;
--card-sunk: #f4faf7;
--line: #d5ecfb;
--line-strong: #b9dcf3;
/* Ink */
--ink: #2a3a34;
--ink-soft: #5f7069;
--ink-faint: #8a9a93;
/* Brand: coral is the one primary-action colour; the tint marks what is
selected; the dark is hover. --accent is the same thing under the
name the game screens have always used. */
--brand: #f08a7e;
--brand-dark: #d9736a;
--brand-tint: #fdece9;
--accent: var(--brand);
--accent-tint: var(--brand-tint);
/* Supporting tints */
--sky: #d5ecfb;
--sky-strong: #7fc8f8;
--butter: #f2c94c;
--peach: #ffe7b8;
--warn: #9a6b12;
--warn-tint: var(--peach);
/* The turn prompt's two pill colours only — a vivid, unmistakable green
and red nothing else in the interface uses, deliberately more
saturated than the app's own calmer palette so the two read as an
unambiguous "go" and "stop". Game mechanics, not brand: unchanged by
the rebrand. */
--go: #2e9e52;
--stop: #d64545;
--danger: #b3443a;
--danger-tint: #fdece9;
/* The pale plaque every picture sits on, so a dark drawing still reads
on the black square. */
--plaque: #ffffff;
/* The back of a Pairs card. Playing-card red, deliberately not one of the
game colours above — a board of sixteen of these is the most of any one
colour a child sees in this app, and it should not be a colour that
means something else somewhere. */
--pairs-back: #a8232b;
/* Game colours (mirrored from lib/game.js) — game mechanics, not brand */
--sq-red: #e4443c;
--sq-yellow: #f7c948;
--sq-green: #2e9e52;
--sq-blue: #2f6fd0;
--sq-pink: #f075a8;
--sq-purple: #7a4cc0;
--sq-black: #20262f;
--sq-white: #ffffff;
--r-sm: 12px;
--r-md: 16px;
--r-lg: 22px;
--r-xl: 28px;
/* Soft and low, in the ink's own hue. Elevation is all the edge a card
gets. */
--shadow-sm: 0 4px 10px rgba(42, 58, 52, 0.06);
--shadow-md: 0 8px 18px rgba(42, 58, 52, 0.08);
--shadow-lg: 0 12px 28px rgba(42, 58, 52, 0.10);
--shadow-brand: 0 8px 18px rgba(240, 138, 126, 0.35);
--font: 'Lexend', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Trebuchet MS', system-ui, sans-serif;
--font-display: 'Quicksand', var(--font);
--tap: 56px;
/* ---------------------------------------------------------------------
The rows of the child's screen.
Every one of these is fixed, and set from the VIEWPORT rather than from
what happens to be inside it. That is the whole point: the board takes
what is left over, so if any of its neighbours could grow — a message
rewrapping around a longer name — every coloured square would shift
under a child's finger mid-placement.
--------------------------------------------------------------------- */
--turnprompt-h: clamp(40px, 5.5vh, 56px);
--foot-h: clamp(46px, 7vh, 62px);
--tile-w: clamp(74px, 10.5vw, 108px);
--tray-h: calc(var(--tile-w) * 1.12 + 24px);
--game-gap: clamp(8px, 1.6vh, 16px);
--game-pad-y: clamp(10px, 2vh, 18px);
/* What is left for the board once every fixed row is taken out. Known in
advance, from the viewport alone — never from anything on the screen.
Four fixed rows now sit inside #screen-game itself (prompt, board,
tray, foot), so three gaps come out rather than two. */
--board-h: calc(100dvh - var(--turnprompt-h) - var(--tray-h)
- var(--foot-h) - 3 * var(--game-gap) - 2 * var(--game-pad-y));
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
font-family: var(--font);
background: var(--paper);
color: var(--ink);
font-size: 17px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
overscroll-behavior: none;
}
/* Kids tap fast and repeatedly; kill the blue flash and the double-tap zoom. */
button, .tappable {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 0.4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 700; }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 0.8em; }
a { color: var(--brand); }
.muted { color: var(--ink-soft); }
.tiny { font-size: 0.83rem; }
/* Text sitting directly on the page ground, outside any card, on its own
little plate — kept from the patterned days for the places that use it;
on mint it is simply a white card. */
.on-paper {
display: inline-block;
background: var(--card);
border-radius: var(--r-md);
padding: 10px 18px;
box-shadow: var(--shadow-sm);
}
/* ======================================================================
The front door — mint, two soft blobs behind the content (see
.page-blobs), the wordmark large, four real tiles, a footer.
====================================================================== */
.landing { width: min(1180px, 100%); margin: 0 auto; padding: clamp(28px, 6vh, 72px) clamp(14px, 3vw, 28px) 40px; }
/* The hero is one centred column: the wordmark, the eyebrow, the line,
the two buttons, the how-are-you-playing pills. */
.landing-hero { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 760px; margin: 0 auto 40px; }
.eyebrow { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.landing-hero h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 700; line-height: 1; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.landing-sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 32em; text-wrap: pretty; }
.landing-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 6px 0 0; }
.landing-how { display: grid; gap: 10px; justify-items: center; padding-top: 22px; margin-top: 8px; border-top: 1px solid var(--line); width: min(100%, 520px); }
.landing-toggles { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* The pills: white, lifted, no border; coral on hover. */
.pill-toggle {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
border: 0; background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.92rem;
}
.pill-toggle:hover { color: var(--brand-dark); box-shadow: var(--shadow-md); }
.pill-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Four real tiles in a row, the console's own tile. */
.landing-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.landing-tile { text-decoration: none; color: var(--ink); }
.landing-tile .game-card { cursor: pointer; }
.landing-header .btn { padding: 9px 18px; font-size: 0.95rem; min-height: 44px; }
.landing-header .btn.quiet { padding: 9px 10px; }
/* The join card under the tiles: a drawn code and QR on a sunk plate,
one line beside them. */
.landing-join { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 16px 20px; margin-top: 18px; }
.landing-join p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink-soft); }
.landing-join strong { color: var(--ink); }
.landing-join-code { display: grid; gap: 6px; justify-items: center; padding: 10px 14px; border-radius: var(--r-md); background: var(--card-sunk); }
.landing-join-code b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--brand); }
.landing-join-qr {
width: 44px; height: 44px; border-radius: 4px;
background:
linear-gradient(var(--ink), var(--ink)) 2px 2px / 12px 12px no-repeat,
linear-gradient(var(--ink), var(--ink)) 30px 2px / 12px 12px no-repeat,
linear-gradient(var(--ink), var(--ink)) 2px 30px / 12px 12px no-repeat,
repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px) 18px 18px / 24px 4px no-repeat,
repeating-linear-gradient(0deg, var(--ink) 0 4px, transparent 4px 8px) 30px 20px / 4px 22px no-repeat,
#fff;
}
.site-footer {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
width: min(1180px, 100%); margin: 0 auto; padding: 18px clamp(14px, 3vw, 28px) 28px;
color: var(--ink-soft); font-size: 0.85rem; border-top: 1px solid var(--line);
}
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { color: var(--ink-soft); font-weight: 500; text-decoration: none; }
.site-footer a:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
/* The footer sits at the foot: a page with one is a column, its main
part taking the height. */
body:has(> .site-footer) { min-height: 100dvh; display: flex; flex-direction: column; }
body:has(> .site-footer) > .wrap, body:has(> .site-footer) > .landing { flex: 1 0 auto; width: min(1180px, 100%); }
body:has(> .site-footer) > .site-footer { margin-top: auto; }
/* On the console the footer shows under the picker and the account pages
only — a live game screen is built to fit the screen, and a footer would
be the one thing pushing it into a scroll. */
body:has(> .wrap) > .site-footer { display: none; }
body:has(> .wrap > #screen-games:not(.hidden)) > .site-footer,
body:has(> .wrap > #screen-classes:not(.hidden)) > .site-footer,
body:has(> .wrap > #screen-picture-sets:not(.hidden)) > .site-footer,
body:has(> .wrap > #screen-guide:not(.hidden)) > .site-footer,
body:has(> .wrap > #screen-auth:not(.hidden)) > .site-footer,
body.printables-page > .site-footer, body.homework-page > .site-footer { display: flex; }
body.about-page > .site-footer { display: flex; }
/* /about: the story beside the cartoon, then privacy and contact. */
.about-wrap { max-width: 56rem; display: grid; gap: 18px; }
.about-card { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px; }
.about-card.is-text { grid-template-columns: 1fr; }
.about-adam { width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(15, 40, 38, 0.18)); }
.about-card h1 { margin-bottom: 12px; }
@media (max-width: 600px) { .about-card { grid-template-columns: 1fr; justify-items: center; text-align: left; } .about-adam { width: 140px; } }
@media (max-width: 860px) {
.landing-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.landing-tiles { gap: 10px; }
.landing-tile .game-logo-box { height: 84px; }
.landing-tile .game-logo { max-height: 84px; }
.landing-actions { width: 100%; }
.landing-actions .btn.big { width: 100%; }
.landing-join { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
/* A quiet way back, now that there is no header bar to click on. */
.link-back {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; font-size: 0.92rem; color: var(--ink);
text-decoration: none; padding: 6px 2px;
}
.link-back:hover { color: var(--brand-dark); }
/* A thin control strip — a set-up page's Back · title · Start bar, a live
screen's logo · buttons · QR bar. White, a sky edge, a soft shadow; the
sticky ones (`.is-sticky`) blur what scrolls under them. */
.topline {
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 10px 16px;
box-shadow: var(--shadow-sm);
}
.center { text-align: center; }
.hidden { display: none !important; }
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.wrap {
width: min(1180px, 100%);
margin: 0 auto;
padding: 20px clamp(14px, 3vw, 28px) 64px;
}
/* ----------------------------------------------------------- the wordmark */
/* The logo is the wordmark: "natteroo" in Quicksand 700, lowercase, in
three colours — nat coral, te butter, roo sky. As live text wherever a
font can be relied on (`natte
roo`); as paths in public/images/brand/
wordmark.svg everywhere else (favicons, the OG image, PDFs — built by
scripts/build-brand.mjs). Size it with font-size. */
.wordmark {
display: inline-block; font-family: var(--font-display); font-weight: 700;
letter-spacing: -0.01em; line-height: 1; white-space: nowrap; text-decoration: none;
}
.wordmark > span:nth-child(1) { color: var(--brand); }
.wordmark > span:nth-child(2) { color: var(--butter); }
.wordmark > span:nth-child(3) { color: var(--sky-strong); }
.wordmark.is-hero { font-size: clamp(2.6rem, 6vw, 4rem); text-shadow: 0 10px 20px rgba(42, 58, 52, 0.12); }
/* The mark: a coral rounded square (radius 30% of the side) with a white
lowercase n. The child's screens carry it as their only brand; the
favicons are the same thing from public/images/brand/mark.svg. Size it
with --side. */
.n-mark {
--side: 72px;
display: inline-grid; place-items: center; width: var(--side); height: var(--side);
border-radius: 30%; background: var(--brand); color: #fff;
font-family: var(--font-display); font-weight: 700; font-size: calc(var(--side) * 0.56); line-height: 1;
box-shadow: 0 10px 22px rgba(240, 138, 126, 0.35); text-decoration: none; user-select: none;
}
/* Two large soft blobs behind the content — the front door and the
console only, never a set-up page, a form or anything a child sees.
Peach on the left, sky on the right, at 70%, clipped by the page. */
.page-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.page-blobs::before, .page-blobs::after { content: ''; position: absolute; opacity: 0.7; }
.page-blobs::before { left: -140px; bottom: -120px; width: 440px; height: 440px; border-radius: 42% 58% 55% 45%; background: var(--peach); }
.page-blobs::after { right: -160px; top: 100px; width: 480px; height: 480px; border-radius: 55% 45% 40% 60%; background: var(--sky); }
body:has(> .page-blobs) > .wrap, body:has(> .page-blobs) > .landing { position: relative; z-index: 1; }
/* On the console the blobs sit behind the picker only — never a set-up
page, a form or a live screen. */
body:has(> .wrap) > .page-blobs { display: none; }
body:has(> .wrap > #screen-games:not(.hidden)) > .page-blobs { display: block; }
/* ---------------------------------------------------------------- buttons */
.btn {
appearance: none;
border: 0;
border-radius: var(--r-md);
background: var(--brand);
color: #fff;
text-decoration: none;
font: inherit;
font-family: var(--font-display);
font-weight: 700;
padding: 13px 24px;
min-height: var(--tap);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
box-shadow: var(--shadow-brand);
}
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 3px solid var(--sky-strong); outline-offset: 3px; }
/* Three buttons (Soft pastel): primary — coral, white text, the coral
shadow, and the ONE on a screen (.btn and .btn.go are the same thing);
secondary — white, ink text, a soft shadow, no border (.ghost and
.secondary are the same thing); and .quiet, a text link that underlines
on hover. Nothing here has an outline. */
.btn.ghost, .btn.secondary { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn.ghost:hover, .btn.secondary:hover { background: var(--card); color: var(--brand-dark); box-shadow: var(--shadow-md); }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: none; padding: 10px 14px; min-height: 44px; }
.btn.quiet:hover { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.btn.go { background: var(--brand); }
.btn.go:hover { background: var(--brand-dark); }
.btn.danger { background: var(--danger); box-shadow: var(--shadow-sm); }
.btn.big { font-size: 1.25rem; padding: 18px 34px; min-height: 68px; border-radius: var(--r-lg); }
.btn.wide { width: 100%; }
/* (The front door's four coloured .btn.role doors went with the rebrand.) */
/* ------------------------------------------------------------------ cards */
.card {
background: var(--card);
border: 0;
border-radius: var(--r-lg);
padding: clamp(16px, 2.4vw, 26px);
box-shadow: var(--shadow-lg);
}
.card + .card { margin-top: 16px; }
/* The sign-in card — the wordmark, the tagline, two fields. */
.auth-card { max-width: 26rem; margin: 0 auto; text-align: center; }
.auth-card .wordmark { font-size: 2.4rem; margin: 6px 0 4px; }
/* The sign-in card sits in the middle of the screen (the rebrand), not
pinned to the top with empty ground below. */
.wrap:has(> #screen-auth:not(.hidden)) { display: grid; align-content: center; }
.auth-card .stack { text-align: left; margin-top: 22px; }
.auth-mark {
width: 60px; height: 60px; margin: 0 auto 16px; display: grid;
grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px;
padding: 8px; background: var(--card-sunk); border-radius: 30%;
}
.auth-mark span { border-radius: 30%; display: block; }
.auth-title { margin: 0; font-size: clamp(1.4rem, 4vw, 1.7rem); }
.auth-links { text-align: center; margin: 14px 0 0; }
.card-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
background: var(--brand-tint);
color: var(--brand-dark);
font-size: 0.8rem;
font-weight: 700;
}
.pill.go { background: #e3f3e8; color: #1f6b3a; }
.pill.warn { background: var(--warn-tint); color: var(--warn); }
.pill.off { background: var(--card-sunk); color: var(--ink-faint); }
/* ----------------------------------------------------------------- inputs */
label.field { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; color: var(--ink-soft); }
input[type='text'], input[type='number'], input[type='password'], input[type='email'],
input[type='search'], textarea, select {
width: 100%;
font: inherit;
color: var(--ink);
background: var(--card);
border: 2px solid var(--line);
border-radius: var(--r-md);
padding: 12px 14px;
min-height: 52px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
/* A native select dressed like the other inputs (the rebrand): the browser's
own arrow replaced by a chevron in the padding. */
select {
appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235f7069' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
}
.field-help { margin: -4px 0 12px; }
/* A small delete: coral-tinted, never outlined. */
.btn.danger.tiny { background: var(--danger-tint); color: var(--danger); box-shadow: none; }
.btn.danger.tiny:hover { background: var(--danger); color: #fff; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.switch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--card-sunk); cursor: pointer; }
.switch input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.switch span { font-weight: 650; }
.switch small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.82rem; }
.seg { display: inline-flex; background: var(--card-sunk); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button {
appearance: none; border: none; background: transparent; font: inherit; font-weight: 700;
padding: 9px 18px; border-radius: 999px; cursor: pointer; color: var(--ink-soft); min-height: 44px;
}
.seg button[aria-pressed='true'] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
/* --------------------------------------------------------------- messages */
.notice {
border-radius: var(--r-md);
padding: 12px 16px;
font-weight: 600;
border: 0;
}
.notice.info { background: var(--sky); color: var(--ink); }
.notice.warn { background: var(--warn-tint); color: var(--warn); }
.notice.bad { background: var(--danger-tint); color: var(--danger); }
.notice.good { background: #e3f3e8; color: #1f6b3a; }
/* ================================================================ THE GAME */
/**
* The child's screen is a grid of FIXED rows, not a stack of flexible ones.
*
* This is the fix for squares that jumped under a child's finger. The board
* takes the space its neighbours leave, so while any neighbour could grow —
* the sentence frame gaining a word, the turn bar rewrapping around a longer
* name, the finish button appearing — the whole board resized mid-placement.
* Every other row now has a height set from the viewport, so the board's
* geometry cannot depend on what anybody says or does.
*/
.game-body {
background: var(--paper);
}
/**
* The live game only: pinned to the exact viewport, nothing scrolls, so the
* felt board's geometry can never move under a child's finger — see the
* comment above #screen-game. This used to be true of every screen, on the
* theory that a fixed body gives iOS nothing to scroll when the keyboard
* opens under a focused field. It over-reached: on real devices, a fixed,
* non-scrolling page combined with iOS's own keyboard/viewport handling
* produced exactly the clipped, half-missing joining screens it was meant
* to prevent — and the CSS Grid + `:has()` rebuild that followed, despite
* checking out in every simulation available while building it, made a
* real iPad render one of those screens as almost nothing at all: no
* card, no field, just a sliver of a rounded corner. Two comparatively
* recent CSS features stacked on top of each other were involved either
* way — `:has()` choosing the layout, `dvh` sizing it — and simulation
* cannot be trusted to say whether a given device supports either. So
* both are gone from this decision. Which layout applies now turns on a
* plain class, ".is-live", that play.js sets and clears itself in
* `show()` — an ordinary class selector, which has worked the same way
* in every browser for over twenty years — rather than asking the CSS
* engine to infer it from a sibling element's state.
*/
.game-body.is-live {
position: fixed;
inset: 0;
height: 100vh; /* the plain fallback, in case "dvh" itself is the */
height: 100dvh; /* unsupported piece — the safer line goes second. */
overflow: hidden;
display: flex;
flex-direction: column;
}
/* #screen-game is the only visible child here; it fills the space itself
rather than the body needing a second grid row for it. */
.game-body.is-live > .game-main { flex: 1; min-height: 0; }
/**
* The joining screens (code / name / lobby): the plainest possible page.
* No CSS Grid, no fixed positioning, nothing keyed to a viewport unit
* newer than "vh". Just ordinary block content that scrolls the ordinary
* way if it ever needs to, the way every other page on the web does.
*/
.game-body:not(.is-live) {
min-height: 100vh;
min-height: 100dvh;
}
/**
* There is no turn order any more, so this line no longer tries to referee
* one — the children work out between themselves, out loud, whose go it
* is. What's left is a single steady line above the board saying who's on
* this team: "You are on a team with William". It doesn't change while the
* game is being played, so it never needs the old go/stop colour coding —
* one calm, friendly fill throughout.
*
* The text sits on its own solid pill rather than directly on the paper
* background — plain coloured text on that pattern nearly vanished on a
* real screen. A solid fill behind it is legible regardless of what's
* behind it, without bringing back a full-width bar.
*/
.turn-prompt {
height: var(--turnprompt-h);
display: flex;
align-items: center;
justify-content: center;
padding: 0 clamp(12px, 2.5vw, 22px);
}
.turn-prompt span {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 22px;
border-radius: 999px;
font-weight: 800;
font-size: clamp(1.05rem, 3.2vw, 1.5rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--ink-faint);
color: #fff;
box-shadow: var(--shadow-sm);
}
.turn-prompt span.team { background: var(--accent); }
/* The connection pill still needs somewhere to live now the bar is gone —
tucked in the corner rather than given a row of its own, since it only
ever matters when it has bad news to deliver. */
.conn-corner {
position: absolute;
top: max(10px, env(safe-area-inset-top));
right: max(12px, env(safe-area-inset-right));
}
/* The live game's own exit, opposite the connection pill — small and quiet
so it never competes with the board for a child's attention, but always
there, unlike the auto-resume this app used to trap a child behind. */
.leave-corner {
position: absolute;
top: max(10px, env(safe-area-inset-top));
left: max(12px, env(safe-area-inset-left));
padding: 6px 12px;
min-height: 0;
font-size: 0.78rem;
background: rgba(255, 255, 255, 0.75);
border-radius: 999px;
}
.game-main {
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--game-gap);
padding: var(--game-pad-y) clamp(12px, 2.5vw, 22px);
}
/**
* The playing screen only. Four rows: the board takes what is left, and the
* other three — the turn prompt above it, the tray and the foot below it —
* are pinned, so no amount of text can move a coloured square. Positioned,
* so the connection pill (.conn-corner) has something to sit relative to.
*/
#screen-game {
position: relative;
display: grid;
grid-template-rows: var(--turnprompt-h) 1fr var(--tray-h) var(--foot-h);
gap: var(--game-gap);
min-height: 0;
}
/* --------------------------------------------------------------- the grid */
/**
* Rows are declared explicitly, and every one is 1fr.
*
* Without this, the rows are sized by whatever is inside them — so the moment
* a picture landed on a square, that row grew and the whole board jumped.
* The squares now take their size from the board, never from their contents.
*/
.board {
min-height: 0;
min-width: 0;
display: grid;
gap: clamp(8px, 1.4vw, 14px);
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
}
.board[data-squares='4'] { grid-template-rows: repeat(2, 1fr); }
.board[data-squares='6'] { grid-template-rows: repeat(3, 1fr); }
.board[data-squares='8'] { grid-template-rows: repeat(4, 1fr); }
@media (min-width: 700px) {
.board { grid-template-columns: repeat(4, 1fr); }
/* Four squares read better as a 2×2 block than as one wide strip. */
.board[data-squares='4'] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.board[data-squares='6'] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.board[data-squares='8'] { grid-template-rows: repeat(2, 1fr); }
}
.square {
position: relative;
border-radius: var(--r-lg);
border: none;
display: flex;
align-items: center;
justify-content: center;
/* Both zeros matter: they stop the contents setting the cell's size. */
min-height: 0;
min-width: 0;
cursor: pointer;
overflow: hidden;
transition: box-shadow 0.15s ease, outline-color 0.15s;
outline: 4px solid transparent;
outline-offset: 3px;
/* Pressed in, not sitting on top: a light lip along the top edge and a
shadow along the bottom, as felt behaves. */
box-shadow:
inset 0 3px 0 rgba(255, 255, 255, 0.22),
inset 0 -5px 0 rgba(0, 0, 0, 0.13);
/* The board never scrolls, so a finger on a square is always a drag. */
touch-action: none;
}
.square[data-colour='white'],
.square[data-colour='yellow'] {
box-shadow:
inset 0 3px 0 rgba(255, 255, 255, 0.55),
inset 0 -5px 0 rgba(0, 0, 0, 0.08);
}
.square[data-colour='white'] { box-shadow: inset 0 0 0 1px var(--line-strong),
inset 0 -5px 0 rgba(0, 0, 0, 0.07); }
.square.droppable { outline-color: rgba(18, 160, 138, 0.55); animation: nudge 1.8s ease-in-out infinite; }
.square.drop-target {
outline-color: var(--accent);
outline-width: 6px;
animation: none;
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.65), inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}
.square.locked { cursor: default; }
/* Class-mode result marking, once every board has been checked against the
leader's — the same visual language as the team-mode mini-board result
(.mini.miss / .mini .tick), scaled up to the full-size interactive board. */
.square.correct { box-shadow: inset 0 0 0 4px var(--accent); }
.square.miss { box-shadow: inset 0 0 0 4px var(--danger); }
.square .square-tick {
position: absolute; bottom: 8px; right: 8px; font-size: 1rem; line-height: 1;
background: rgba(255, 255, 255, 0.92); border-radius: 50%; padding: 4px;
display: grid; place-items: center;
}
@keyframes nudge {
0%, 100% { outline-color: rgba(18, 160, 138, 0.6); }
50% { outline-color: rgba(18, 160, 138, 0.18); }
}
@media (prefers-reduced-motion: reduce) { .square.droppable { animation: none; } }
.square .say {
position: absolute;
top: 6px;
right: 6px;
width: 40px; height: 40px;
border: none; border-radius: 50%;
background: rgba(255, 255, 255, 0.72);
font-size: 1.05rem; line-height: 1; cursor: pointer;
display: grid; place-items: center;
}
.square[data-colour='white'] .say, .square[data-colour='yellow'] .say { background: rgba(31, 39, 51, 0.1); }
.square .piece {
display: block;
width: 62%;
max-height: 70%;
aspect-ratio: 1;
line-height: 0;
animation: pop 0.28s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.square .piece svg, .square .piece .pic { width: 100%; height: 100%; display: block; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .square .piece { animation: none; } }
.square .piece-label {
position: absolute; bottom: 4px; left: 4px; right: 4px;
text-align: center; font-weight: 800;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
/* Off by default (see state.options.words in teacher.js) — a teacher who
turns this on wants it to actually help a child read the word, so it
is sized to be read across the room, not a quiet little caption. */
font-size: clamp(1rem, 3.4vw, 1.35rem);
opacity: 1;
}
/* ---------------------------------------------------------------- the tray */
/**
* The tray keeps the same height whatever is in it.
*
* Its contents change constantly — tiles leave as they are placed, and a
* locked child sees a note instead of tiles. If the tray were free to shrink,
* the board above it would grow to fill the gap and every square would jump
* under the child's finger. So the strip is given the height of one tile plus
* its padding, once, and everything inside is centred in that space.
*/
:root { --tile-w: clamp(78px, 11vw, 108px); --tray-h: calc(var(--tile-w) * 1.12 + 16px); }
.tray-wrap { height: var(--tray-h); min-height: 0; }
.tray {
display: flex;
align-items: center;
/* Centre the row of tiles when they all fit the width — a partly-used
tray (a hand with only two or three left) reads oddly hugging the
left edge. `safe` keeps the left-align fallback once the row is wider
than the tray and needs to scroll, so an overflowing hand never has
its first tile pushed out of scrolling reach. */
justify-content: safe center;
height: 100%;
gap: clamp(8px, 1.4vw, 14px);
overflow-x: auto;
overflow-y: hidden;
/* A picked tile lifts 6px, grows about 1px more from the scale, and
carries a 4px glow ring on top of that — about 11px of clearance
above its resting position. 6px of top padding was clipping the top
of that ring off (the chopped-off box around a selected tile); 14px
leaves it comfortable room. */
padding: 14px 2px 10px;
scrollbar-width: thin;
}
.tile {
flex: none;
position: relative;
width: var(--tile-w);
aspect-ratio: 1 / 1.12;
border-radius: var(--r-md);
border: 3px solid var(--line);
background: var(--card);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
cursor: pointer;
font: inherit;
transition: transform 0.14s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.15s, border-color 0.15s;
box-shadow: var(--shadow-sm);
}
.tile .pic { line-height: 0; display: block; }
.tile .pic svg { display: block; width: clamp(42px, 6vw, 62px); height: auto; }
.pic { line-height: 0; }
.pic svg { display: block; }
/* Every picture is a real photo now (an inside the SVG, not drawn
vector art), and a browser's own click-and-drag on an image is to drag
the image itself out — starting a native OS-level drag that pre-empts our
own pointer-based one before it ever crosses DRAG_THRESHOLD. That native
gesture leaves a plain tap still working (explaining "click works, drag
doesn't") while dragging a picture onto a square silently does nothing.
Switching it off here, on every picture and word tile wherever it
appears, is what makes our own drag win instead. */
.pic, .pic *, .piece, .piece *, .tile .pic, .tile .pic * {
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
user-select: none;
-webkit-user-select: none;
}
/* The word card is the same box a picture draws in, so it needs no sizing
rules of its own — only its text. */
.wc-text { font-family: var(--font); font-weight: 800; fill: var(--ink); }
/* On a tile the plaque is invisible against the tile itself, which is what
we want — the plaque only has to do work on a coloured square. */
.tile { --plaque: transparent; }
.set-pics svg { display: block; }
.tile .name {
/* Off by default, same setting as the board's own .piece-label — see
state.options.words in teacher.js. */
font-size: clamp(0.95rem, 2.6vw, 1.15rem);
font-weight: 800;
color: var(--ink-soft);
max-width: 100%;
padding: 0 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tile[aria-pressed='true'] {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-tint), var(--shadow-md);
transform: translateY(-6px) scale(1.04);
}
.tile .say { position: absolute; top: 2px; right: 2px; width: 34px; height: 34px; border: none; background: transparent; font-size: 0.95rem; cursor: pointer; border-radius: 50%; }
/* A tile a child can't currently place stays exactly as visible as any
other — the turn bar already says whose turn it is; a card fading out
read as something being taken away, not just paused. */
/* Once every picture is placed, this fills the tray in place of the cards
that were there — big and centred, rather than an empty strip below. A
full board submits itself (see .autosubmit-bar below), so there is
nothing to tap here any more — just a line saying what's about to
happen. */
.finished-box { width: 100%; height: 100%; font-size: clamp(1.2rem, 2.8vw, 1.6rem); }
/**
* The pop-up bar that counts a full board down to submitting. It sits
* fixed to the bottom of the screen rather than taking a row of the game
* grid — the four rows above (turn banner, board, tray, foot) are the ones
* "squares never jump" depends on, and this bar needs to be able to
* appear and disappear without disturbing any of them.
*/
.autosubmit-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 30;
padding: 14px clamp(12px, 2.5vw, 22px) calc(14px + env(safe-area-inset-bottom));
text-align: center;
font-weight: 800;
font-size: clamp(1rem, 2.6vw, 1.25rem);
color: #fff;
background: var(--accent);
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
animation: autosubmit-in 0.2s ease;
}
@keyframes autosubmit-in {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* ------------------------------------------------------------------ footer */
.game-foot {
height: var(--foot-h);
display: flex;
gap: 12px;
align-items: center;
min-height: 0;
overflow: hidden;
}
.game-foot .status { font-weight: 700; color: var(--ink-soft); }
/* ----------------------------------------------------------------- overlay */
.overlay {
position: fixed; inset: 0; z-index: 40;
background: rgba(28, 34, 45, 0.55);
backdrop-filter: blur(3px);
display: grid; place-items: center;
padding: 18px;
}
.sheet {
background: var(--card);
border-radius: var(--r-xl);
padding: clamp(20px, 3vw, 34px);
width: min(760px, 100%);
max-height: 92dvh;
overflow: auto;
box-shadow: var(--shadow-lg);
}
/* ----------------------------------------------------------------- results */
.result-boards { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 660px) { .result-boards { grid-template-columns: 1fr 1fr; } }
/* Rows never stretch: a card stretched to match a taller neighbour in the
.dash grid would otherwise hand the extra height to the board's rows and
pull every square out of shape (see .mini below). */
.mini-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: start; align-self: start; }
.mini-board[data-squares='6'] { grid-template-columns: repeat(3, 1fr); }
.mini-board[data-squares='4'] { grid-template-columns: repeat(4, 1fr); }
.mini {
aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center;
font-size: clamp(1.1rem, 3vw, 1.7rem); position: relative;
border: 2px solid rgba(31, 39, 51, 0.14);
/* An aspect-ratio item in a 1fr track has a min-content width TRANSFERRED
from whatever height the row happens to give it, and Chromium's grid
resolves that in a second pass — so a freshly rebuilt class-mode board
came out a frame or two wider than its card (Adam: "pop up bigger and
then drop down smaller… outside of their bubble"). Zero minimums: the
square is exactly a third (or a quarter) of the row, never its content. */
min-width: 0; min-height: 0;
}
.mini.miss { box-shadow: inset 0 0 0 3px var(--danger); }
.mini .tick {
position: absolute; bottom: 2px; right: 2px; font-size: 0.8rem; line-height: 1;
background: rgba(255, 255, 255, 0.9); border-radius: 50%; padding: 1px;
}
.stars { font-size: 2.6rem; letter-spacing: 6px; }
.score-big { font-size: clamp(2.6rem, 9vw, 4.2rem); font-weight: 800; line-height: 1; color: var(--accent); }
/* ------------------------------------------------------- drawing dictation */
/**
* Drawing Dictation's own live screen (#screen-draw). Same idea as
* #screen-game above — a row grid keyed off the viewport, not off whatever
* happens to be inside each row, so the canvas in the middle never resizes
* out from under a child's pencil — just its own rows: a status line and
* the canvas.
*/
:root {
--draw-status-h: clamp(30px, 4.5vh, 40px);
}
/* The tool/colour toolbar used to be its own row, stacked above the old
"I'm finished" button — on an iPad in landscape (the normal way this gets
used) that ate a big slice of the limited vertical space. It now lives
beside the canvas instead, in .draw-stage below, so the row grid only has
to make room for the status line and the canvas — there is no finish
button any more at all (see public/js/play.js's own comment on why, above
ensureDrawSurface). */
#screen-draw {
position: relative;
display: grid;
grid-template-rows: var(--draw-status-h) 1fr;
gap: var(--game-gap);
min-height: 0;
}
.draw-stage {
display: flex;
flex-direction: row;
gap: clamp(8px, 1.4vw, 14px);
min-height: 0;
min-width: 0;
}
.draw-status {
margin: 0;
height: var(--draw-status-h);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 700;
color: var(--ink-soft);
}
/* Picture-led mode's own target-words strip (see public/js/drawing-sets.js)
— a plain line of vocabulary, shown for either role. #screen-draw's fixed
row grid has no spare row to give this its own line without resizing the
board underneath it (the whole point of that grid — see its own doc
comment above), so this sits over the top edge of the stage below
instead, the same trick .conn-corner/.leave-corner already use on this
same screen. Hidden outright in free-draw mode, which has no picture set
to draw the words from — nothing then sits here to overlap anything. */
.draw-target-words {
position: absolute;
/* A few px clear of the status line above — .draw-status centres its own
text within a short fixed row and, being bold, can sit close enough to
that row's own bottom edge that this line touched it with no gap at
all. */
top: calc(var(--draw-status-h) + 10px);
left: 0;
right: 0;
margin: 0;
padding: 0 12px;
text-align: center;
font-size: 0.76rem;
line-height: 1.3;
color: var(--ink-soft);
pointer-events: none;
}
/* The frame hands the canvas whatever space is left, with a small padding
so the board reads as a card rather than butting straight into the page
edge — but the canvas itself is never bigger than one fixed 4:3 size
(see FIT_W/FIT_H in draw-ui.js, sized for a landscape iPad), and is
never stretched to a different shape than that either way. Earlier
versions tried a plain CSS aspect-ratio (which turned out not to
actually hold on a frame shaped very differently, leaving real board
space going unused) and then a full stretch-to-fill (which meant two
children on differently-shaped screens ended up with differently
distorted pictures of the same drawing). This version measures the
frame in JS and sets the canvas's exact pixel size directly — always
the same fixed shape, shrunk uniformly (never stretched on just one
axis) only as far as a genuinely small screen actually needs, and
centred here with blank space either side on any roomier screen, so
every child's board looks the same as every other child's, and matches
exactly what ends up on the teacher's dashboard and the reveal. */
.draw-frame {
min-height: 0;
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--card-sunk);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
padding: clamp(6px, 1.4vw, 12px);
}
.draw-canvas {
flex: none;
background: #fff;
/* Colouring dictation (v4.89.0): the outline to colour is a background
image on the canvas box — which fitToFrame keeps at exactly the
canvas's own 4:3 shape, so "contain, centred" here lands the picture
where renderPicture's lands it on every thumbnail and reveal. */
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
touch-action: none;
cursor: crosshair;
-webkit-user-select: none;
user-select: none;
}
/* Picture-led mode's describer screen (see #draw-stage-picture in
play.html) — the reference photo itself, sized to fit the same frame the
canvas uses without ever growing past it. The source images are not the
canvas's own 4:3 (they're closer to 16:9 — see lib/drawing-sets.js's
doc comment), so this scales by containment rather than the canvas's own
exact-pixel-box approach, which assumes one fixed shape. */
.draw-reference-img {
max-width: min(100%, 960px);
max-height: min(100%, 720px);
width: auto;
height: auto;
background: #fff;
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
object-fit: contain;
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* The tool/colour toolbar now runs down the left of the canvas rather than
across a row above or below it — freeing up vertical space, which matters
most on an iPad in landscape (the normal way this gets used), where every
row taken by controls is a row not spent on the picture itself. A fixed
column width keeps it out of the canvas's own space; it scrolls internally
on the rare screen too short to show everything at once. */
.draw-toolbar {
flex: none;
width: clamp(76px, 10vw, 112px);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(8px, 1.6vh, 14px);
padding: clamp(6px, 1vh, 10px) 6px;
min-height: 0;
overflow-y: auto;
background: var(--card);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.draw-tools {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--card-sunk);
border-radius: var(--r-md);
padding: 4px;
}
/* The selected tool sits on a filled rounded square, so the picture has to
fit INSIDE that square with room to spare. Adam, twice: "the icons for
the pencil, crayon, and rubber are clearly not in the centre of the
squares." They are centred — measured at every level, to 0.00 — but each
one is drawn at 45 degrees and reaches the corners of its own box, so a
picture that nearly fills the square has its tips poking out past the
square's rounded corners. That reads as an icon falling out of its box,
not as one sitting in the middle of it. The square is bigger and the
picture is smaller than they were, which leaves a real, even margin the
diagonal never crosses. */
.draw-tool {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border: none;
border-radius: var(--r-sm);
background: transparent;
color: var(--ink-soft);
cursor: pointer;
font: inherit;
}
.draw-tool:hover { background: var(--card); color: var(--ink); }
.draw-tool[aria-pressed='true'] {
background: var(--accent);
color: #fff;
box-shadow: var(--shadow-sm);
}
.draw-tool .ico { display: block; }
.draw-colours {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.draw-toolbar #btn-draw-clear {
width: 100%;
white-space: normal;
line-height: 1.2;
}
.draw-swatch {
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid var(--card);
box-shadow: 0 0 0 1.5px var(--line-strong);
cursor: pointer;
padding: 0;
}
.draw-swatch.picked { box-shadow: 0 0 0 2.5px var(--accent); }
/* Drawing Dictation's own reveal — everyone's picture, side by side, using
the same layout rules as .result-boards above so a group of three still
lands cleanly. No score sits alongside them; there's nothing to mark
right or wrong. */
.result-pictures { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 660px) { .result-pictures { grid-template-columns: 1fr 1fr; } }
.result-pictures[data-count='3'] { grid-template-columns: 1fr; }
@media (min-width: 760px) {
.result-pictures[data-count='3'] { grid-template-columns: repeat(3, 1fr); }
}
/* Whole-class mode's own reveal (#result-draw-class) has only ever one
picture — a child's own — so it never needs the two-up layout above,
which would otherwise leave it stranded in a half-width column. */
.result-pictures[data-count='1'] { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
/* The shared "Finishing in 3, 2, 1…" countdown (#result-draw-countdown) —
see public/js/play.js's startFinishingCountdown. */
.draw-countdown { font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 800; text-align: center; color: var(--accent); }
.result-picture {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.result-picture .who { font-weight: 700; color: var(--ink-soft); }
/* Shared by a drawn picture (an inline