/* ═══════════════════════════════════════════════════════════════════════════════════════════════ PN-COLLECTIONS.CSS — THE STORE THEME ENGINE (CEO, 2026-08-11) ═══════════════════════════════════════════════════════════════════════════════════════════════ THE ORDER: "get a specialist agent to work on the store items, they need to fundamentally affect the visual gameplay." THE VERDICT ON WHAT WAS THERE: "ALL the store looks look the same no discernible difference — I'm disgusted by everything I am seeing." HE WAS RIGHT, AND HERE IS THE MEASUREMENT. Wearing TOKYO NIGHT instead of NOIR CLASSIC changed 0.63% of the pixels on the office dashboard (tools/theme-diff.mjs, 1440×900, before this file). Not "a subtle theme" — a rounding error. The collection card promised "Re-grades your Floor, portraits and dashboards"; it re-tinted one accent and swapped a photo nobody could see. THE ROOT CAUSE, precisely. A worn collection published exactly ONE colour — `--worn-a`, the look's hue — and the worn-mood block in style-01.css (~line 206) remapped the decorative accent tokens to it. Everything that actually BUILDS the room — `--mvc-bg` (the office canvas), `--glass-a`/`--glass-b` (every card in the game), `--mvc-fg*` (the ink), `--mvc-brd*` (the hairlines), `--glass-shadow` (the depth) — stayed pinned to the base theme. So ten collections rendered as one interface in ten hues. THE ARCHITECTURE. We do NOT invent tokens. The four base themes and the four paid theme packs already prove the contract: `[data-palette="pack-arcade"]` in mvc-os.css owns the FULL surface token set, and because `body{--rust-*: var(--mvc-*)}` (style-01.css ~6591) bridges every legacy office class onto those same tokens, one block repaints all ~5,155 rules for free. A collection is now exactly that object, hung on the attribute the runtime ALREADY sets — `document.body.dataset.collection` (script-01.js `applyCosmetics`) — so nothing in selection, purchase, ownership or persistence had to move. WHAT EACH COLLECTION OWNS (the contract — if a world doesn't set all of it, it isn't a world): · surface — `--mvc-bg`, `--glass-a`, `--glass-b`, `--glass-shadow`, `--glass-inset`, `--glass-hi`, `--track` · ink — `--mvc-fg`, `-70`, `-55`, `-40`, `-30` (AA-verified per world, per key) · hairline — `--mvc-brd`, `--mvc-brd-hi` · accent — `--p` (the one CTA fill + data endpoints), `--p2`, `--acc`, `--glow`, `--pn-on-p` (the ink that sits ON the fill), and `--accent`/`--accent2` · the ROOM — `--wl-base` / `--wl-light` / `--wl-motif`: the office canvas is composed from three layers, so each world has its own KEY LIGHT and its own signature GEOMETRY (halftone · graph paper · brass rules · structural grid · neon rain). This is what stops the shelf reading as "the same screen, different tint". · the PLATE — `--pn-plate` (the real env/store photograph behind the hero) + `--vibe-grade` (its colour grade) + `--pn-scrim` (its legibility scrim). The floor genuinely changes rooms. HARD LAWS OBSERVED (design/UX_RULES.md — every one of these is a gate, not a preference): · §1 LEGIBILITY — every ink/surface pair in every world, in BOTH keys, is measured, not eyeballed. The AA table is in the report; `tools/theme-diff.mjs` recomputes it from the LIVE DOM (composited through the real ancestor chain), so it cannot drift from what ships. · §3 LAYOUT — this file sets COLOUR, IMAGE, SHADOW and BORDER-COLOR only. No box model, no display, no position, no font-size, no border-width. A theme RE-PAINTS; it never RE-FLOWS. The acceptance test asserts identical element boxes across all ten worlds. · §5 THEME — a worn look repaints every management surface. The Vault is the one deliberate, recorded seam: a theme must never repaint the shop that sells it (CEO-74, PN_WEAR_VIEWS). · §11 MOTION — the plate carries a slow parallax drift (transform only), off under `prefers-reduced-motion`. · §12 ANTI-SLOP — the worlds are told apart by MOTIF and KEY LIGHT, not by hue. Swap the palettes between two of them and both stop working. That is the test of an owned look. TENANT/BRAND: this is a Campley surface, so the SST (design/STYLE_SOURCE_OF_TRUTH.md) governs — near-square radius, brutalist hairlines, mono micro-copy, photographic worlds. NO NEW FONTS: the CEO called the current state "font soup" and typography is being consolidated separately, so this file never touches `--mvc-disp`/`--mvc-f`. (The theme packs DO swap the display face; collections deliberately do not. Noted as a left-out in the report.) LOAD ORDER: linked LAST in play.html. Specificity ties with the worn-mood block in style-01.css (`html body[data-worn-mood="1"].pn-wear` = 0,2,2) are broken by source order; the light-key selectors carry an extra class and win outright. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────────────────────────── 1 · THE PLUMBING — how a world's variables become pixels. Three rules. Every collection below is pure data poured into these. ─────────────────────────────────────────────────────────────────────────────────────────────── */ /* 1a · THE ROOM. The office canvas is `body` (pn-ipad-shell makes body the device SCREEN), and the worn-mood block paints it with `background: … !important`. We beat that with the world's own three-layer recipe: MOTIF over KEY LIGHT over BASE. `!important` because the rule we are replacing is `!important` at equal specificity. */ html body.pn-wear[data-collection^="col-"]{ background: var(--wl-motif, none), var(--wl-light, none), var(--wl-base, var(--mvc-bg)) !important; /* the film-grain body::after and the fixed shader both stay — they read the world's own tokens */ } /* The topbar and the hub rail are chrome: they read --mvc-bg / --rust-card, which the world already owns, so they follow for free. Nothing to do here — recorded so the next reader doesn't add it. */ /* 1b · THE PLATE. The hero backdrop was ONE hardcoded film for every world (a brick-and-neon loft), which is the single most visible reason ten looks read as one. Each world now names its own photograph. The