"Undefined SCSS variable silently kills panels at runtime"

Panels render as fully invisible on a published build — the opener UI fades for a modal that never appears, making the game look dead-ended. The build is GREEN (both headless and in-editor compile_status), no Code Error toast fires, and no red compile-time diagnostic appears anywhere.

An undefined SCSS variable ($var used but never declared in that .razor.scss sheet) is caught only at runtime. The SCSS parser emits a per-render console warning:

Skipping malformed rule in /ui/x.razor.scss: Unknown variable '$var'

But that warning lives only in the console log — no Code Error toast, no compile error. The sheet silently drops all rules referencing the undefined variable, which can make the entire panel invisible (not just one rule's effect).

This typically happens when a sweep or refactor copies a token name from another sheet. SCSS sheets in s&box share nothing — a variable defined in one sheet does not exist in another.

All three defenses, used together:

1. Define every $var in the sheet that uses it. Never assume a variable exists because another sheet declares it — each .razor.scss is self-contained.

2. Static pre-push lint. Diff used-vs-declared variables per sheet. A simple grep that flags $var references with no matching $var: declaration in the same file catches this in seconds with no editor.

3. In-editor smoke pass. Open each overlay/modal and assert a non-trivial rendered rect. This catches the entire invisible-panel failure class regardless of cause.

The SCSS parser in s&box is a runtime text processor, not a compile-time analyzer. Undefined variables produce a console warning and silently skip the affected rules — the sheet partially evaluates rather than failing hard. This is the same silent-parser family as the border-style: dashed and radial-gradient(... at ...) traps, but worse: those at least raise a red Code Error toast. This one only whispers to the console, where nobody looks during normal development.