/* ============================================================================= * NCG GAMES — games.css · the games surface design language * Canonical source: sites/games/css/games.css · Docs: css/games.md * ============================================================================= * * WHAT THIS IS * ------------ * The approved games hub (`sites/games/index.html`) is the REFERENCE for this * surface. Its design language was read out of that file and written down here * so the three other games can wear it without anyone re-deriving it by eye: * * · cream paper ground with a fine rule, generous whitespace, calm rhythm * · hairline-bordered cards in a grid, ONE burgundy accent cell * · mono small-caps letter-spaced micro-labels as section eyebrows * · serif display (Fraunces) over sans body (Inter); mono (JetBrains Mono) * for data, keys, counts and code * · numbered curriculum steps with a thin rule and muted numerals * · explanatory cards in plain language * · muted crimson used sparingly as the SINGLE accent; status colours * reserved for status * * WHAT IT CONSUMES, AND WHAT IT MAY NOT DECLARE * --------------------------------------------- * `css/tokens.css` is the canonical palette, type scale, spacing, radii, motion * and focus contract. It is namespaced `--ncg-*`. THIS FILE DECLARES NO COLOUR * OF ITS OWN. Every `--games-*` property below is a POINTER at an `--ncg-*` * token, with the token's own literal as the `var()` fallback so the sheet still * renders if `tokens.css` fails to load — the same fallback convention * `components.css` uses. If you need a value this system does not have, add an * `--ncg-*` token to `sites/shared/tokens.css` and re-copy it; do not invent one * here. * * LOAD ORDER (both files must be served from this origin — see components.md * §1; a cross-origin is blocked by our own CSP): * * * * TWO PLACES WHERE THE HUB'S LITERAL AND THE TOKEN DIFFER — recorded, not hidden * ----------------------------------------------------------------------------- * 1. The hub's card surface is `--hub-surface:#FFFDF8`; the shared role is * `--ncg-surface-card:#FFFFFF`. Delta is 7/255 on blue — below a perceptual * threshold on a cream ground. The ROLE is used, so the games surface * consumes the shared contract unmodified rather than forcing a token edit * that every other property would have to re-sync for an invisible change. * 2. The hub's hairline is `--hub-line:#DED8CC`; the default role `--ncg-line` * is `#ECE9E0`, which is too faint to carry the hub's grid — on the hub the * grid IS the design. `--ncg-warm-line` (#E7E0D5) is the nearest shipped * token and is used for the hairline; `--ncg-warm-line-2` (#D8CFC0) for an * edge that has to be seen. Both are existing tokens. * * GROUNDS — burgundy is a FIRST-CLASS ground, not an exception * ------------------------------------------------------------ * A page declares its ground once, on : * * * * * Both grounds re-point the SAME aliases, so every class in this file and every * bridged engine surface renders correctly on either without a single forked * rule. Ciber Traversal's deep burgundy is deliberate — on the hub it is the one * accent cell among light cards, and that contrast is what marks it as the * destination. It is supported here on purpose so nobody later "harmonises" it * away as a bug. * * THE SEAM BETWEEN WORLD AND CHROME * --------------------------------- * Career and Interceptor render a 3D world. The world keeps its own scene * palette — sky, terrain, water, vehicle are not chrome. Everything the player * READS is chrome, and chrome is PAPER LAID OVER THE WORLD: a near-solid sheet * with a hairline border and a soft shadow, so the seam reads as deliberate. * * CONTRAST GUARANTEE (this is the reason for the number, see §7): * the sheet backing is 96% opaque, so the scene beneath can move the * composited surface by at most 4%. Measured worst cases on the paper ground — * #FAF9F6 over pure black composites to #F0EFEC, and body ink #1C1917 on that * is 15.2:1; over a white sky it is 16.6:1. On the burgundy ground, #3D1219 * over a white sky composites to #451C22 and its cream ink is 13.3:1. A * low-alpha wash would have inverted over pale terrain. This cannot. * * THE ENGINE BRIDGE (§8) * ---------------------- * `js/engine3d/hud.js`, `js/engine3d/a11y.js` and `js/games/career/overlay.js` * each inject their own