/* 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;
        /* Initialize the closed drawer without animating from the no-JS nav. */
        transition: none;
    }

    .er33t-header[data-er33t-enhanced][data-er33t-ready] .er33t-header__nav {
        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;
    }

    /* The drawer owns the viewport while open. Keep the preference prompt
       available again as soon as the drawer closes, without covering links. */
    html[data-er33t-nav-open='true'] .er33t-analytics-consent {
        display: none !important;
    }
}

@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 live in the Explore panel. */
.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; }

/* Explore: a grouped panel in the eR33t shell (near-black, electric-green
   keyline, Chakra/Grotesk/Mono roles). <details> keeps it usable without JS;
   site-header.js adds hover intent, outside-click and Escape handling. */
.er33t-header__explore { position: relative; }
.er33t-header__explore details { position: relative; }
.er33t-header__explore summary::-webkit-details-marker { display: none; }
.er33t-header__explore-summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 40px;
    padding-inline: .7rem .6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--er33t-header-muted);
    font: 600 13px/1 'Space Grotesk', system-ui, sans-serif;
    list-style: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.er33t-header__explore-summary:hover,
.er33t-header__explore details[open] > .er33t-header__explore-summary {
    color: var(--er33t-header-text);
    background: var(--er33t-header-soft);
}
.er33t-header__explore details[open] > .er33t-header__explore-summary {
    color: var(--er33t-header-signal);
    border-color: var(--er33t-header-line);
    background: rgba(157, 255, 34, .08);
}
.er33t-header__explore-summary:focus-visible { outline: 2px solid var(--er33t-header-signal); outline-offset: 3px; }
.er33t-header__chevron { flex: 0 0 auto; opacity: .75; transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .18s ease; }
.er33t-header__explore details[open] .er33t-header__chevron { transform: rotate(180deg); opacity: 1; }

.er33t-header__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 5;
    width: min(560px, calc(100vw - 2rem));
    padding: .85rem .85rem .7rem;
    border: 1px solid rgba(157, 255, 34, .22);
    border-radius: 14px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(157, 255, 34, .07), transparent 55%),
        linear-gradient(180deg, #0d120e 0%, #080b09 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .7),
        0 28px 64px rgba(0, 0, 0, .6),
        inset 0 1px 0 rgba(245, 247, 245, .05);
    transform-origin: top right;
    animation: er33t-panel-in .2s cubic-bezier(.2, .7, .2, 1) both;
}
.er33t-header__panel::before {
    content: '';
    position: absolute;
    inset: -1px 16px auto auto;
    width: 96px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--er33t-header-signal) 35%, var(--er33t-header-signal) 65%, transparent);
    opacity: .9;
}
.er33t-header__panel::after {
    content: '';
    position: absolute;
    top: -7px;
    right: 28px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(157, 255, 34, .3);
    border-left: 1px solid rgba(157, 255, 34, .3);
    background: #0d120e;
    transform: rotate(45deg);
}
@keyframes er33t-panel-in {
    from { opacity: 0; transform: translateY(-6px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.er33t-header__panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
}
.er33t-header__panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.er33t-header__group {
    display: grid;
    gap: .1rem;
    align-content: start;
    padding: .2rem;
}
.er33t-header__group + .er33t-header__group { border-left: 1px solid rgba(226, 233, 226, .08); }
.er33t-header__panel li { display: block; min-width: 0; }
.er33t-header__eyebrow {
    padding: .3rem .7rem .4rem;
    color: rgba(157, 255, 34, .72);
    font: 500 10px/1 'JetBrains Mono', 'Space Grotesk', monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.er33t-header__nav a.er33t-header__item {
    display: grid;
    gap: .18rem;
    justify-content: stretch;
    justify-items: start;
    min-height: 0;
    padding: .55rem .7rem .6rem;
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    border-radius: 10px;
    color: var(--er33t-header-text);
    text-align: left;
    white-space: normal;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.er33t-header__nav a.er33t-header__item:hover,
.er33t-header__nav a.er33t-header__item:focus-visible {
    background: rgba(157, 255, 34, .07);
    border-left-color: var(--er33t-header-signal);
    transform: translateX(2px);
}
.er33t-header__nav a.er33t-header__item[aria-current='page'] {
    background: rgba(157, 255, 34, .1);
    border-color: transparent;
    border-left-color: var(--er33t-header-signal);
}
.er33t-header__item-title {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font: 600 14px/1.15 'Chakra Petch', 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -.005em;
    color: var(--er33t-header-text);
}
.er33t-header__nav a.er33t-header__item:hover .er33t-header__item-title,
.er33t-header__nav a.er33t-header__item[aria-current='page'] .er33t-header__item-title { color: var(--er33t-header-signal); }
.er33t-header__item-ext { font-size: 11px; opacity: .6; }
.er33t-header__item-blurb {
    font: 400 12px/1.35 'Space Grotesk', system-ui, sans-serif;
    color: var(--er33t-header-muted);
}

.er33t-header__panel-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(226, 233, 226, .09);
}
.er33t-header__nav .er33t-header__panel-foot a {
    min-height: 32px;
    padding-inline: .6rem;
    border-radius: 6px;
    color: rgba(226, 233, 226, .55);
    font: 500 10.5px/1 'JetBrains Mono', 'Space Grotesk', monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.er33t-header__nav .er33t-header__panel-foot a::before { content: '\2192\00a0'; opacity: .7; }
.er33t-header__nav .er33t-header__panel-foot a:hover,
.er33t-header__nav .er33t-header__panel-foot a[aria-current='page'] { color: var(--er33t-header-signal); background: rgba(157, 255, 34, .06); }

/* Drawer and no-JS narrow layouts: the panel becomes an inline section. */
@media (max-width: 1199px) {
    .er33t-header__explore,
    .er33t-header__explore details { width: 100%; display: block; }
    .er33t-header__explore-summary {
        display: flex;
        width: 100%;
        justify-content: space-between;
        min-height: 44px;
        margin-top: .35rem;
        padding-inline: .9rem;
        border-radius: .65rem;
        color: rgba(157, 255, 34, .78);
        font: 500 10.5px/1 'JetBrains Mono', 'Space Grotesk', monospace;
        letter-spacing: .18em;
        text-transform: uppercase;
    }
    .er33t-header__explore details[open] > .er33t-header__explore-summary { background: transparent; border-color: transparent; }
    .er33t-header__panel {
        position: static;
        width: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        animation: none;
    }
    .er33t-header__panel::before,
    .er33t-header__panel::after { display: none; }
    .er33t-header__panel-grid { grid-template-columns: 1fr; gap: .2rem; }
    .er33t-header__group { padding: 0; gap: .35rem; }
    .er33t-header__group + .er33t-header__group { border-left: 0; margin-top: .35rem; }
    .er33t-header__eyebrow { padding: .5rem .9rem .2rem; }
    .er33t-header[data-er33t-enhanced] .er33t-header__nav a.er33t-header__item {
        min-height: 44px;
        padding: .55rem .9rem .6rem;
        border: 1px solid rgba(226, 233, 226, .12);
        border-left: 2px solid rgba(157, 255, 34, .35);
        border-radius: .65rem;
    }
    .er33t-header__nav a.er33t-header__item:hover { transform: none; }
    .er33t-header__panel-foot { justify-content: flex-start; margin-top: .6rem; padding: .55rem 0 0; }
    .er33t-header[data-er33t-enhanced] .er33t-header__nav .er33t-header__panel-foot a { min-height: 40px; border: 0; }
}