/* * Styling for the embedded Chromium dino game. * Not Chromium code — written for this site. * * The game's sprite sheet is dark grey artwork on a transparent canvas, so it * only reads correctly on a light background. We therefore invert the canvas * whenever the surrounding surface is dark. * * Two independent things can darken it: * .dark — the site theme (set by us on ) * .inverted — the game's own night mode (set by offline.js on ) * Exactly one of them means "invert"; both together cancel out. */ .runner-outer { position: relative; width: 100%; overflow: hidden; } .runner-container { position: relative; width: 100%; height: 150px; max-width: 600px; margin-inline: auto; outline: none; } .runner-canvas { display: block; width: 100%; height: auto; max-width: 600px; z-index: 2; filter: none; transition: filter 200ms ease; } :root.dark .runner-canvas, :root.inverted .runner-canvas { filter: invert(1); } :root.dark.inverted .runner-canvas { filter: none; } /* The sprite sheets are read by the game via getElementById, never displayed. */ #offline-resources { display: none; } /* * offline.js hides elements by adding this class (constants.js: HIDDEN_CLASS), * relying on Chromium's own stylesheet to define it. Without this rule the * game's accessibility "slow speed" checkbox shows up under the canvas. */ .hidden { display: none !important; } /* * The game's accessibility "slow speed" checkbox. It ships checked and its * label carries the hidden class, but showSpeedToggle() strips that class again * whenever the container receives focus — so hiding it needs its own rule. * The mode it controls is disabled anyway (see boot.js). */ .slow-speed-option { display: none !important; } /* Accessibility live region the game announces score changes through. */ .offline-runner-live-region { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Touch target the game injects on mobile. */ .runner-container .controller { position: absolute; inset: 0; z-index: 3; background: transparent; } /* Shown by the game if the easter egg is disabled — not used here. */ .snackbar { display: none; } @media (prefers-reduced-motion: reduce) { .runner-canvas { transition: none; } }