/* The floating "Game info" button that js/game-info.js appends to . It shows the answer key, so it only ever appears in a teacher preview or for a student with a linked teacher — never for a child playing on their own. This file is the single source of truth for it. The rule used to live in css/layout_2021-7.css, which only the ~147 legacy pages load, so on the 512 modern game pages (common/games/partials/head.php) and on every racearama page the button had no rule at all: it rendered as a plain browser-default button in normal flow at the very bottom of the page. Loaded from head.php's $default_css for modern game pages, and by an explicit on the legacy game pages that hand-roll their own . position: fixed, not absolute. The button is appended to , so `absolute` resolves against the initial containing block and scrolls away with the page — on the game pages that do scroll it would leave the corner as soon as a child scrolled. `fixed` pins it to the viewport, which is what "top right" means here. Hand-written, not gulp output — there is no src/scss source for this file. */ #game-info { position: fixed; top: 10px; right: 10px; /* Above the knowyourroll/tugofwar start overlay (z-index: 100), which at the inherited 99 painted straight over the button until the game started. Deliberately still below Bootstrap's backdrop/modal (1050/1055) — the info modal this button opens has to cover it. */ z-index: 101; padding: 8px; font-size: 24px; /* The button holds a single 30px icon; without this it also reserves a text line box and sits ~6px taller than the icon it contains. */ line-height: 0; background-color: #ffd848; border: none; border-radius: 10px; box-shadow: 3px 3px #733381; cursor: pointer; } /* 50px of inset is a big share of a phone screen, and games keep score, timer and pause controls in their top corners. Tuck the button in rather than let it sit on top of the board. */ @media screen and (max-width: 576px) { #game-info { top: 10px; right: 10px; padding: 6px; } #game-info img { width: 22px; } }