/* ========================================================================== BASE: reset, background scene, typography primitives, focus states, and reduced-motion handling. ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { min-height: 100%; scroll-behavior: smooth; } body { min-height: 100vh; min-height: 100dvh; background: var(--scene-bg); color: var(--text); font-family: var(--font-body); font-weight: 500; overflow-x: hidden; padding: 1.1rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); transition: background 0.45s ease, color 0.45s ease; } button, input { font: inherit; } button { user-select: none; -webkit-tap-highlight-color: transparent; } /* Decorative theme-aware background layers. */ .bg-grid { position: fixed; inset: 0; z-index: -3; background-image: linear-gradient(var(--scene-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--scene-grid-line) 1px, transparent 1px); background-size: var(--scene-grid-size) var(--scene-grid-size); mask-image: radial-gradient(ellipse at center, black 0%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 74%); opacity: var(--scene-grid-opacity); pointer-events: none; transition: opacity 0.45s ease; } .bg-glow { position: fixed; inset: 0; z-index: -2; background: var(--scene-glow); pointer-events: none; transition: background 0.45s ease; } .bg-texture { position: fixed; inset: 0; z-index: -1; background: var(--scene-texture); opacity: var(--scene-texture-opacity); pointer-events: none; transition: opacity 0.45s ease; } /* Typography helpers. */ .section-title, .module-title, .sheet-title, .modal-title { font-family: var(--font-display); text-transform: uppercase; } kbd { border: 1px solid var(--border); border-radius: 0.35rem; background: var(--surface); color: var(--text-dim); font-family: var(--font-display); font-size: 0.72em; padding: 0.12rem 0.45rem; white-space: nowrap; } /* Accessibility primitives. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: fixed; top: 0.6rem; left: 0.6rem; z-index: 200; border-radius: var(--radius-sm); background: var(--surface-hi); border: 1px solid var(--border-strong); color: var(--text); padding: 0.6rem 1rem; text-decoration: none; transform: translateY(-200%); transition: transform 0.2s ease; } .skip-link:focus-visible { transform: translateY(0); } :is(button, input, a, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 3px; border-radius: var(--radius-sm); } .hidden-file { display: none; } /* Reduced motion: honored both for the system preference and the in-game setting (mirrored onto as data-reduced-motion="true"). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } } [data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }