/*
 * The page shell: the column everything sits in, and the explanatory block at
 * the foot of a page.
 *
 * Hoisted out of `upcoming.css` for the same reason `base.css` was hoisted out
 * of three page sheets at WEB-1 -- except this time the drift had already
 * happened rather than being waited for. `.container` and `.footer-info` were
 * defined only in `upcoming.css`, and `/tracker` rendered both while loading
 * the other skeleton's sheets. So the tracker had no width limit and no footer
 * panel: its content ran the full width of the window where every other page
 * sits in a 1200px column, and its explanatory text rendered as bare body copy.
 *
 * Neither half of that looked wrong on its own. The classes were styled
 * somewhere and the sheets were all loaded by someone, which is why
 * `test_no_page_renders_a_class_none_of_its_own_sheets_style` had to be written
 * from the other direction to see it.
 *
 * The values are `upcoming.css`' own, moved rather than rewritten, so the page
 * they came from renders byte for byte what it did -- which the golden render
 * is what says. `/upcoming` keeps one rule of its own on top of these: the gold
 * emphasis on its last footer line, which is that page's game count and not a
 * shared idea.
 *
 * Colours come from theme.css. This sheet writes no hex value -- WEB-13's rule.
 */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* The block of explanation a page closes with. A panel rather than loose text,
   because it is qualification of the figures above it and has to read as
   attached to them rather than as the end of the scroll. */
.footer-info {
    text-align: center;
    padding: 30px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
}

.footer-info p {
    color: var(--text-faint);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.footer-info p:last-child {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .container {
        padding: 15px;
    }
}