CSS: split monolithic stylesheet into focused sub-files and introduce design tokens

[Copilot]

app/style.css (663 lines) mixed reset rules, layout, game cards, history panel, and shared game components. Game-specific stylesheets hardcoded the same hex values used by the main theme and in several cases fully duplicated shared component rules.

Changes

app/style.css → @import hub

The entry-point file is now 21 lines. All rules moved to app/styles/:

File	Responsibility
variables.css	48 CSS custom properties — bg, text, border, focus, buttons, status colours, game component palette, trend chart, radii, transitions, chart bar palette
base.css	Reset, body, skip-link, .sr-only, global focus ring
layout.css	App shell (header, nav, main, footer, game-selector grid)
game-card.css	Game card + play-time bar
history.css	History modal, bar chart, summary table
game-shared.css	.game-welcome, .game-end-panel, .game-results, .game-btn, .game-trend

Design tokens

All hardcoded hex values replaced with semantic variables:

/* before */
background: #005fcc;
border: 1px solid #dee2e6;

/* after */
background: var(--btn-primary-bg);
border: 1px solid var(--border-color);

Game stylesheet cleanup

All 9 game stylesheets updated to reference theme variables. Removed outright duplications:

• otter-stop — deleted .os-btn, .os-end-panel, .os-results (exact copies of shared classes; HTML already applied both)
• fast-piggie — removed .fp-instructions, .fp-btn, end-panel card block
• high-speed-memory — removed .hsm-instructions, .hsm-btn, end-panel block
• field-of-view — removed .fov-trend (use .game-trend)
• orbit-sprite-memory — removed .osm-btn duplicates
• _template — cleaned up to serve as the canonical starting point

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• redirector.gvt1.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --enable-crash-reporter=6f5da0e9-e8cb-46fd-a1ba-018dd7a8e13f,no_channel --user-data-dir=/home/REDACTED/.config/brain-speed-exercises --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,14876888237444472711,6537178274358955157,262144 --enable-features=PdfUseShowSaveFilePicker --disable-features=LocalNetworkAccessChecks,ScreenAIOCREnabled,SpareRendererForSitePerProcess,TraceSiteInstanceGetProcessCreation --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /home/REDACTED/work/BrainSpeedExercises/BrainSpeedExercises/node_modules/electron/dist/electron /home/REDACTED/work/BrainSpeedExercises/BrainSpeedExercises/node_modules/electron/dist/electron --no-sandbox . (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)