.game-hc-header-space { height: 35px; }

/* Keeps the shared Hunted Cow header independent of Gothador's page rules. */
/* The shared sheet has `.hc-main-menu ol, ul`, whose second selector leaks into
   game content. Keep this reset at element specificity so existing game classes
   and inline list styles retain priority over it. */
:where(body) ul:not(:where(.hc-header *)) {
    list-style: revert;
    top: revert;
    margin: revert;
    padding: revert;
}

.hc-header {
    font: 13px Helvetica, Arial, sans-serif;
}

.hc-header a:link,
.hc-header a:visited,
.hc-header a:hover,
.hc-header a:active {
    text-decoration: none;
}

.hc-header .hc-menu-toggle {
    display: none;
}

.hc-header > svg {
    position: absolute;
    width: 0;
    height: 0;
}

@media (max-width: 1023px) {
    .hc-header .hc-container {
        min-height: 35px;
        padding-top: 0;
        padding-bottom: 0;
        gap: 12px;
        flex-wrap: wrap;
    }

    .hc-header .hc-menu-toggle {
        position: absolute;
        top: -30px;
        right: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 28px;
        border: 1px solid #ffffff;
        border-radius: 3px;
        background: #0d0d0d;
        color: #ffffff;
        pointer-events: auto;
        cursor: pointer;
    }

    .hc-header .hc-menu-toggle__bar,
    .hc-header .hc-menu-toggle__bar::before,
    .hc-header .hc-menu-toggle__bar::after {
        position: absolute;
        width: 16px;
        height: 2px;
        background: currentColor;
    }

    .hc-header .hc-menu-toggle__bar::before,
    .hc-header .hc-menu-toggle__bar::after {
        content: '';
        left: 0;
    }

    .hc-header .hc-menu-toggle__bar::before {
        top: -5px;
    }

    .hc-header .hc-menu-toggle__bar::after {
        top: 5px;
    }

    .hc-header--open {
        padding-bottom: 16px;
        background: #0d0d0d;
        pointer-events: auto;
    }

    .hc-header--open .hc-main-menu,
    .hc-header--open .hc-social-menu {
        pointer-events: auto;
    }

    .hc-header--open .hc-menu-list,
    .hc-header--open .hc-social-list {
        top: 0;
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    .hc-header--open .hc-menu-list {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hc-header--open .hc-menu-item::after {
        display: none;
    }
}