/* ============================================================================ lc-play-skin.css — the .cg-play skin, re-pointed; plus the intensity tiers (Tasks 2b + 5) ---------------------------------------------------------------------------- Requires lc-tokens.css. REPLACES the --cg-p-* declaration block at the top of wwwroot/css/games.css. Keep everything else in that file. games.css invited a retheme by editing its token block alone — the right seam, and it just needed to point somewhere. Names are preserved so the skin can still be lifted out wholesale; only the values are now shared. TWO SEPARATE THINGS, deliberately: .cg-play panel SKIN, on [data-cg-play-root]. Only Hangman and Memory have a play root, and only they need it. .cg-tier-* INTENSITY, on . So tier rules can reach the quiz score banner and the practice results table, which live on pages with no play root at all. Conflating them makes every arcade rule unreachable outside the two arcade games. games-look.js sets both — see the README. ========================================================================== */ /* ========================================================================== ALIAS LAYER — replaces the --cg-p-* block in games.css ========================================================================== */ .cg-play { --cg-p-surface: var(--lc-surface-2); /* was #f4f6f9 */ --cg-p-card: var(--lc-base); --cg-p-ink: var(--lc-text); --cg-p-muted: var(--lc-text-muted); /* was #6c757d — 4.33:1 FAIL on #f4f6f9 */ --cg-p-accent: var(--lc-primary); /* was #2563eb */ --cg-p-accent-ink: var(--lc-on-primary); --cg-p-good: var(--lc-success); --cg-p-good-tint: var(--lc-success-subtle); --cg-p-good-ink: var(--lc-success-emphasis); --cg-p-info: var(--lc-info); /* was #0d6efd */ --cg-p-info-tint: var(--lc-primary-subtle); --cg-p-info-ink: var(--lc-primary-emphasis); --cg-p-border: var(--lc-border); --cg-p-radius: var(--lc-radius-lg); --cg-p-shadow: var(--lc-shadow-2); background: var(--cg-p-surface); border-radius: var(--cg-p-radius); padding: var(--lc-space-5); } /* The 20px pseudo-pill stops being a pill when a German label wraps. */ .cg-play .cg-p-chip { border-radius: var(--lc-radius-pill); font-size: var(--lc-text-sm); padding: var(--lc-space-1) var(--lc-space-3); } /* ========================================================================== HANGMAN The dots stay — they are already a considered alternative to gallows imagery, and I would keep them at every tier (see README, tier 3). ========================================================================== */ /* Rendering a DEPLETING resource in the accent colour points the eye at the thing being lost. Lives become status, not alarm. Misses keep the informational blue, which games.css already got right. */ .cg-play .cg-hm-lives { color: var(--lc-text-muted); } .cg-hm-key { border-radius: var(--lc-radius-sm); font-weight: var(--lc-weight-semi); } .cg-hm-key:disabled { color: var(--lc-text-muted); /* was #6c757d on #f4f6f9 — 4.33:1 FAIL */ background: var(--lc-surface-2); } /* ========================================================================== MEMORY ========================================================================== */ /* Face-down tiles were a saturated accent FILL. Sixteen of them is the loudest surface in the product, and it made the board read as a game rather than a study aid. Face-down is now a quiet ground and the FACE-UP state carries the accent — so the accent marks "you revealed this" instead of "there is something here". Contrast improves and the noise goes. */ .cg-mem-tile { background: var(--lc-surface-3); color: var(--lc-text); border: 1px solid var(--lc-border-strong); border-radius: var(--lc-radius-md); font-weight: var(--lc-weight-medium); transition: background-color var(--lc-duration-fast) var(--lc-ease), border-color var(--lc-duration-fast) var(--lc-ease); } .cg-mem-tile.cg-up { background: var(--lc-base); color: var(--lc-text); border-color: var(--lc-primary); } .cg-mem-tile.cg-done { background: var(--lc-success-subtle); color: var(--lc-success-emphasis); border-color: var(--lc-success); } /* The hover LIFT is removed at the default tier. It was reduced-motion guarded, which is careful, but a tile that rises under the cursor is asking to be poked — and this is the one screen where that is exactly what the brief forbids. It returns at tier 2, opt-in. */ .cg-play .cg-mem-tile:not(:disabled):not(.cg-up):not(.cg-done):hover { transform: none; background: var(--lc-surface-2); border-color: var(--lc-text-muted); } /* The tiles and keys are