:root { --bg: #111113; --bg-panel: #202023; --bg-panel-alt: #2e2e30; --border: #2b2b2e; --text: #f0f0f0; --text-dim: #96969a; --accent: hsl(353, 63%, 26%); /* Separate from --accent: prose links on the credits page used to just be var(--accent), same red as every button/nav-active-state/focus-ring in the app, easy to miss as clickable text. Cool icy blue reads unambiguously as "hyperlink" and doesn't sit near --accent or the orange/red tier-2x/tier-4x weakness colors. */ --link: #6fc7ff; --tier-4x: #9c0113; --tier-2x: #e07a1f; --tier-1x: #4c4c50; --tier-half: #2f8f5b; --tier-quarter: #1f6b45; --tier-immune: #6a4bc9; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* ---- accessibility baseline (Phase 5 of the 1.0 roadmap) ---- Global, not per-page-CSS-file, since it has to apply everywhere: the skip link and focus ring are cross-cutting concerns, not specific to any one route's own visual design. */ /* Screen-reader-only text -- present in the accessibility tree and reachable by keyboard/AT, but takes up no visual space and never shows for a sighted pointer user. The clip-path + 1px-box technique (not display:none/ visibility:hidden, which would remove it from the accessibility tree too, defeating the entire purpose) is the standard approach: keeps the element laid out (so it can still receive focus) while making it visually undetectable. Used for each page's own

(this app's visual design never had on-page titles, and adding big visible ones now would be a whole separate design change outside this pass's scope) and for a handful of icon-only controls whose accessible name needs to be richer than their aria-label alone conveys. `.visually-hidden-focusable` is the same idea but REVEALS itself once focused -- used for the skip link, which is exactly the one case where a sighted keyboard user (not just a screen reader) needs to see it appear. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 8px; z-index: 100; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 0 0 6px 6px; font-weight: 600; /* translateY(-100%) hides it by exactly its own rendered height, whatever that turns out to be -- a fixed `top: -40px` (the original approach) silently under-hid it whenever the actual box (padding + font metrics) came out taller than 40px, leaving a sliver visible at the very top of the page even with nothing focused. Percentage transforms are relative to the element's own box, so this can't drift out of sync the same way. */ transform: translateY(-100%); transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); } /* A consistent, clearly-visible keyboard focus ring across every custom interactive element in the app (dex cards, evo-tree nodes, filter- clickable badges, sortable column heads, ...) -- most of these are
/ with `tabindex="0"` rather than a real