/*
 * The nav bar, on every page.
 *
 * WEB-12. These rules were in base.css, which only four pages load -- the
 * three sacred views and /lines. Everything on the other skeleton (upcoming,
 * the game detail page, and the five templates extending base.html) got a
 * second nav out of upcoming.css instead: a translucent panel of grey pills
 * with an orange "active" one. Two navs, restyled independently, and the one
 * on /upcoming had drifted furthest.
 *
 * Split out rather than folded into base.css, because base.css also carries
 * `h1` and `h1::after` and the other skeleton styles its heading through
 * `.main-title` -- loading base.css there would put a gradient underline under
 * every title on the site, which is a visual change to a sacred view and not
 * what was asked for. Same reasoning as controls.css (WEB-10).
 *
 * Loaded first, with the other shared sheets, so a page sheet can override.
 *
 * Flex, not `text-align: center` on inline-blocks. Six links need about
 * 1,250px; below that the sixth wrapped onto a second line whose line box was
 * shorter than the padded buttons, so the two rows overlapped -- visible on a
 * 1,200px laptop, which is not a width anyone thinks of as "mobile".
 *
 * Nothing moves at full width, and the two numbers that look wrong are what
 * keeps it that way. The 30px column gap is the `0 15px` margin the links used
 * to carry. The 18px margin is the old 30px minus the 12px the buttons used to
 * overflow their own container by: the old box was 18px tall and the buttons
 * hung outside it, which is the same defect as the overlap. Measured on
 * /weekly at 1400px -- buttons at y=133..174 before, y=133..175 after.
 */
.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 30px;
    margin: 18px 0;
}

.nav a {
    margin: 0;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

@media (max-width: 900px) {
    .nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin: 20px 0;
        padding: 0 10px;
    }

    .nav a {
        margin: 0;
        padding: 12px;
        font-size: 0.9em;
        text-align: center;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin: 20px 0;
        padding: 0 10px;
    }

    .nav a {
        margin: 0;
        padding: 14px 8px;
        font-size: 0.85em;
        text-align: center;
    }
}

@media (max-width: 480px) {
    /* Two columns, not one. Six links stacked full-width is 320px of nav
       before the page starts -- most of a phone screen spent on chrome. Two
       up fits "Current Rankings", the longest label, at this size, and keeps
       every target well over the 44px minimum. */
    .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .nav a {
        padding: 14px 6px;
        font-size: 0.8em;
        letter-spacing: 0;
    }
}