/* eR33t Gaming shared public shell. Kept fully namespaced so page-local
   headers, menus, and game surfaces can be retired independently. */
.er33t-header {
    --er33t-header-height: 64px;
    --er33t-header-bg: rgba(7, 9, 11, 0.97);
    --er33t-header-line: rgba(173, 255, 35, 0.2);
    --er33t-header-text: #f4f6f2;
    --er33t-header-muted: rgba(226, 233, 226, 0.68);
    --er33t-header-soft: rgba(226, 233, 226, 0.08);
    --er33t-header-signal: #9dff22;
    position: sticky;
    inset: 0 0 auto;
    z-index: 40;
    width: 100%;
    min-height: var(--er33t-header-height);
    height: var(--er33t-header-height);
    border-bottom: 1px solid var(--er33t-header-line);
    background: var(--er33t-header-bg);
    color: var(--er33t-header-text);
}

.er33t-header,
.er33t-header *,
.er33t-header *::before,
.er33t-header *::after {
    box-sizing: border-box;
}

.er33t-header[data-er33t-fixed] {
    position: fixed;
}

body[data-er33t-login-shell] {
    padding-top: calc(64px + 24px);
}

.er33t-header[data-er33t-open] {
    z-index: 100;
}

/* Editorial/game shells keep their local context controls under the shared
   header. Once the local duplicate brand is removed, the remaining controls
   can occupy the right edge without changing the article hero typography. */
.er33t-editorial-article > .hero > .nav .brand {
    display: none;
}

.er33t-editorial-article > .hero > .nav {
    justify-content: flex-end;
}

.er33t-header__inner {
    width: min(100%, 1440px);
    height: 100%;
    min-height: var(--er33t-header-height);
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2.25rem);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 1.8vw, 1.5rem);
}

.er33t-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .65rem;
    min-height: 44px;
    padding-block: .25rem;
    color: var(--er33t-header-text);
    text-decoration: none;
    white-space: nowrap;
}

.er33t-header__brand img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Inline brand marks sit directly on the page, without avatar framing. */
.site-footer .footer-brand .brand img,
.site-footer .footer-brand > img,
img[data-er33t-brand-mark] {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
}

.er33t-header__brand-copy {
    display: grid;
    gap: .12rem;
    line-height: 1;
}

.er33t-header__brand-copy strong {
    color: var(--er33t-header-text);
    font-family: 'Chakra Petch', 'Space Grotesk', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
}

.er33t-header__brand-copy small {
    color: var(--er33t-header-muted);
    font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.er33t-header__nav {
    min-width: 0;
    margin-left: auto;
}

.er33t-header__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.er33t-header__list > li {
    display: flex;
    align-items: center;
    min-width: 0;
}

.er33t-header__cluster {
    gap: .1rem;
    margin-inline: .25rem;
    padding-inline: .25rem;
    border-inline: 1px solid rgba(226, 233, 226, 0.14);
}

.er33t-header__nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding-inline: .6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--er33t-header-muted);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.er33t-header__nav a:hover,
.er33t-header__nav a:focus-visible {
    color: var(--er33t-header-text);
    background: var(--er33t-header-soft);
}

.er33t-header__nav a[aria-current='page'] {
    color: var(--er33t-header-text);
    border-color: var(--er33t-header-line);
    background: rgba(173, 255, 35, 0.08);
}

.er33t-header__brand:focus-visible,
.er33t-header__toggle:focus-visible,
.er33t-header__scrim:focus-visible,
.er33t-header__nav a:focus-visible {
    outline: 2px solid var(--er33t-header-signal);
    outline-offset: 3px;
}

.er33t-header__toggle {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--er33t-header-line);
    border-radius: 999px;
    background: transparent;
    color: var(--er33t-header-text);
    cursor: pointer;
}

.er33t-header__toggle > span {
    position: absolute;
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .15s ease;
}

.er33t-header__toggle > span:nth-child(1) { transform: translateY(-6px); }
.er33t-header__toggle > span:nth-child(3) { transform: translateY(6px); }
.er33t-header[data-er33t-open] .er33t-header__toggle > span:nth-child(1) { transform: rotate(45deg); }
.er33t-header[data-er33t-open] .er33t-header__toggle > span:nth-child(2) { opacity: 0; }
.er33t-header[data-er33t-open] .er33t-header__toggle > span:nth-child(3) { transform: rotate(-45deg); }

.er33t-header__scrim {
    display: none;
    position: fixed;
    inset: var(--er33t-header-height) 0 0;
    z-index: 1;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .58);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
}

@media (max-width: 1199px) {
    .er33t-header {
        --er33t-header-height: 56px;
    }

    body[data-er33t-login-shell] {
        padding-top: calc(56px + 24px);
    }

    .er33t-header[data-er33t-enhanced] .er33t-header__toggle {
        display: inline-flex;
    }

    /* Without JS the list stays visible and horizontally scrollable. This
       gives keyboard users a complete fallback instead of a blank header. */
    .er33t-header:not([data-er33t-enhanced]) .er33t-header__nav {
        flex: 1 1 auto;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .er33t-header:not([data-er33t-enhanced]) .er33t-header__list {
        width: max-content;
        min-width: 100%;
    }

    .er33t-header[data-er33t-enhanced] .er33t-header__nav {
        position: fixed;
        inset: var(--er33t-header-height) 0 0 auto;
        z-index: 1;
        width: min(88vw, 360px);
        height: calc(100svh - var(--er33t-header-height));
        padding: .75rem;
        overflow-y: auto;
        border-left: 1px solid var(--er33t-header-line);
        background: rgba(7, 9, 11, .99);
        box-shadow: -16px 0 32px rgba(0, 0, 0, .28);
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .22s ease, visibility .22s ease;
    }

    .er33t-header[data-er33t-enhanced] .er33t-header__list {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: .35rem;
    }

    .er33t-header[data-er33t-enhanced] .er33t-header__list > li,
    .er33t-header[data-er33t-enhanced] .er33t-header__cluster {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .35rem;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .er33t-header[data-er33t-enhanced] .er33t-header__nav a {
        justify-content: flex-start;
        min-height: 44px;
        padding-inline: .9rem;
        border-color: rgba(226, 233, 226, .12);
        border-radius: .65rem;
        font-size: .84rem;
    }

    .er33t-header[data-er33t-enhanced] .er33t-header__scrim {
        display: block;
    }

    .er33t-header[data-er33t-enhanced][data-er33t-open] .er33t-header__nav {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .er33t-header[data-er33t-enhanced][data-er33t-open] .er33t-header__scrim {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    html[data-er33t-nav-open='true'] {
        overflow: hidden;
    }
}

@media (max-width: 760px) {
    .er33t-header {
        --er33t-header-height: 48px;
    }

    body[data-er33t-login-shell] {
        padding-top: calc(48px + 24px);
    }

    .er33t-header__inner {
        padding-inline: .75rem;
    }

    .er33t-header__brand {
        gap: .5rem;
    }

    .er33t-header__brand img {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .er33t-header__brand-copy strong {
        font-size: 16px;
    }

    .er33t-header__brand-copy small {
        font-size: 9px;
    }

    .er33t-header[data-er33t-enhanced] .er33t-header__nav {
        width: min(90vw, 340px);
    }
}

/* Keep the poker focus viewport aligned with the shared 44px header, including
   releases whose older game stylesheet reserved a taller legacy header. */
@media (max-width: 720px) {
    body.mobile-game-mode:has(> .er33t-header) > main {
        padding-top: calc(44px + env(safe-area-inset-top));
    }

    body.mobile-game-mode .er33t-header {
        --er33t-header-height: calc(44px + env(safe-area-inset-top));
        position: fixed;
        padding-top: env(safe-area-inset-top);
    }

    body.mobile-game-mode .er33t-header__inner {
        min-height: 44px;
        height: 44px;
    }

    body.mobile-game-mode .er33t-header[data-er33t-enhanced] .er33t-header__nav {
        inset: var(--er33t-header-height) 0 0 auto;
        height: calc(100svh - var(--er33t-header-height));
    }

    body.mobile-game-mode .er33t-header[data-er33t-enhanced] .er33t-header__scrim {
        inset: var(--er33t-header-height) 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .er33t-header,
    .er33t-header *,
    .er33t-header *::before,
    .er33t-header *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Primary community paths stay visible; projects are a native disclosure. */
.er33t-header__nav a.er33t-header__join { background: #9dff22; color: #10140d; border-radius: .45rem; }
.er33t-header__nav a.er33t-header__join:hover { background: #b8ff64; color: #10140d; }
.er33t-header__explore { position: relative; }
.er33t-header__explore summary { cursor: pointer; padding: .85rem; min-height: 44px; font: 600 13px 'Space Grotesk', sans-serif; }
.er33t-header__explore summary:focus-visible { outline: 2px solid #9dff22; outline-offset: 2px; }
.er33t-header__explore details > ul { position: absolute; right: 0; top: 100%; min-width: 200px; padding: .65rem; list-style: none; background: #10140f; border: 1px solid #34402c; border-radius: .6rem; }
.er33t-header__explore details > ul > li { display: grid; }
.er33t-header__explore details > ul > li.er33t-header__cluster { display: flex; border: 0; margin: 0; padding: 0; }
@media(max-width:1199px) { .er33t-header__explore, .er33t-header__explore details { width: 100%; } .er33t-header__explore details > ul { position: static; border: 0; padding: 0; display: grid; gap: .4rem; } }