/* The supplied sheet is an 8-column by 6-row grid (1536x1024). */
:is(.icon-fief, .icon-travel, .icon-combat, .icon-garrison, .icon-production,
    .icon-treasury, .icon-policies, .icon-infrastructure, .icon-population,
    .icon-character, .icon-market, .icon-grievances, .icon-stores, .icon-events, .icon-livestock,
    .icon-repair, .icon-charter, .icon-story),
.icon-link,
:is(
    a[href="fief.php"], a[href="garrison.php"], a[href="recruit.php"],
    a[href="market.php"], a[href="policies.php"], a[href="production.php"],
    a[href="infrastructure.php"], a[href^="building.php"], a[href^="upgrade.php"],
    a[href="upgrades.php"], a[href="population.php"], a[href="character.php"],
    a[href="treasury.php"], a[href="supplies.php"], a[href="events.php"],
    a[href="livestock.php"], a[href^="livestock_offer.php"], a[href="grievances.php"],
    a[href^="repair.php"], a[href="account.php"], a[href="about.php"]
):not(.brand):not(.event-banner) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.icon-link::before,
:is(.icon-fief, .icon-travel, .icon-combat, .icon-garrison, .icon-production,
    .icon-treasury, .icon-policies, .icon-infrastructure, .icon-population,
    .icon-character, .icon-market, .icon-grievances, .icon-stores, .icon-events, .icon-livestock,
    .icon-repair, .icon-charter, .icon-story)::before,
:is(
    a[href="fief.php"], a[href="garrison.php"], a[href="recruit.php"],
    a[href="market.php"], a[href="policies.php"], a[href="production.php"],
    a[href="infrastructure.php"], a[href^="building.php"], a[href^="upgrade.php"],
    a[href="upgrades.php"], a[href="population.php"], a[href="character.php"],
    a[href="treasury.php"], a[href="supplies.php"], a[href="events.php"],
    a[href="livestock.php"], a[href^="livestock_offer.php"], a[href="grievances.php"],
    a[href^="repair.php"], a[href="account.php"], a[href="about.php"]
):not(.brand):not(.event-banner)::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 22px;
    background-image: url("../images/gameIconSheet.png");
    background-repeat: no-repeat;
    background-position: var(--sprite-position, 0 0);
    background-size: 192px 128px;
}

.icon-fief, a[href="fief.php"] { --sprite-position: 0 0; }
.icon-travel { --sprite-position: -48px -106.667px; }
.icon-combat { --sprite-position: -48px 0; }
.icon-garrison, a[href="garrison.php"], a[href="recruit.php"] { --sprite-position: -72px 0; }
.icon-market, a[href="market.php"] { --sprite-position: -72px -21.333px; }
.icon-policies, a[href="policies.php"] { --sprite-position: -120px -64px; }
.icon-production, a[href="production.php"] { --sprite-position: -96px 0; }
.icon-infrastructure, a[href="infrastructure.php"], a[href^="building.php"], a[href^="upgrade.php"], a[href="upgrades.php"] { --sprite-position: -168px 0; }
.icon-population, a[href="population.php"] { --sprite-position: 0 -21.333px; }
.icon-character, a[href="character.php"] { --sprite-position: 0 -21.333px; }
.icon-treasury, a[href="treasury.php"] { --sprite-position: -120px 0; }
.icon-stores, a[href="supplies.php"] { --sprite-position: -168px -42.667px; }
.icon-events, a[href="events.php"] { --sprite-position: -24px -42.667px; }
.icon-livestock, a[href="livestock.php"], a[href^="livestock_offer.php"] { --sprite-position: -96px -64px; }
.icon-grievances, a[href="grievances.php"] { --sprite-position: -48px -21.333px; }
.icon-repair, a[href^="repair.php"] { --sprite-position: 0 -42.667px; }
.icon-charter, a[href="account.php"] { --sprite-position: -144px 0; }
.icon-story, a[href="about.php"] { --sprite-position: -24px -42.667px; }

@media (max-width: 700px) {
    body .site-bar {
        height: auto;
        min-height: 68px;
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    body .site-bar nav {
        flex: 1 1 180px;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px 12px;
    }
}