/* Cabeçalho do portal. Escopo separado para preservar o tema e o menu do jogo. */
@font-face {
    font-family: Knewave;
    src: url('fonts/knewave.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.site-header {
    position: relative;
    isolation: isolate;
    z-index: 5;
    background: #060708;
    border: 0;
    box-shadow: none;
}
.site-header::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 103px;
    background: url('header/manga-background.png') center top / 1920px 151px no-repeat;
    pointer-events: none;
}
.site-header::after {
    content: none;
}
.site-header .header-inner {
    position: relative;
    width: min(1280px, calc(100% - 48px));
    min-height: 120px;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.site-header .portal-logo {
    position: relative;
    z-index: 2;
    flex: 0 0 268px;
    align-self: flex-start;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 4px 0 -11px;
    text-decoration: none;
    transition: transform .18s ease;
}
.portal-logo img {
    display: block;
    width: 268px;
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 3px 1px #0007);
}
.portal-logo-caption {
    margin-top: -1px;
    padding: 2px 18px 3px;
    background: #090a0b;
    color: #ffd152;
    font: 12px/1.2 Knewave, Bangers, sans-serif;
    letter-spacing: 1.1px;
    transform: rotate(-2deg);
    clip-path: polygon(3% 0, 100% 0, 96% 100%, 0 100%);
}
.portal-logo:hover {
    transform: translateY(-2px);
}
.site-header .header-controls {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    min-height: 76px;
    margin-top: 25px;
    padding: 4px 17px 4px 25px;
    gap: 15px;
}
.header-controls::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -13px -15px -9px -32px;
    background: #060708;
    clip-path: polygon(0 14%, 21% 11%, 18% 6%, 93% 7%, 100% 0, 97% 17%, 96% 69%, 100% 62%, 94% 88%, 63% 93%, 60% 100%, 61% 90%, 7% 95%, 9% 75%, 3% 81%, 6% 27%);
}
.site-header .header-inner .ninja-menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 1;
    min-width: 0;
    min-height: 58px;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 17px;
    background: transparent;
    border: 0;
    clip-path: none;
    transform: none;
    order: initial;
}
.site-header .header-inner .ninja-menu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 52px;
    min-width: 0;
    color: #fff;
    font: 17px/1.35 Knewave, Bangers, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 2px 1px #000;
    white-space: nowrap;
    transform: none;
    transition: color .16s, transform .16s;
}
.site-header .ninja-menu svg {
    flex: 0 0 27px;
    width: 27px;
    height: 29px;
    fill: currentColor;
    stroke: none;
    color: #ed2029;
    overflow: visible;
}
.site-header .ninja-menu .nav-gold {
    color: #ffd126;
}
.site-header .ninja-menu svg:has(use[href="#team"]) { fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-header .header-inner .ninja-menu a:hover,
.site-header .header-inner .ninja-menu a.active,
.site-header .header-inner .ninja-menu a[aria-current="page"] {
    color: #ffd126;
}
.site-header .header-inner .ninja-menu a:hover {
    transform: translateY(-2px);
}
.site-header .header-session {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 4px 0 15px;
    border: 0;
    border-left: 1px solid #ffffff30;
    border-radius: 0;
    color: #fff;
    background: transparent;
    font: 15px/1.2 Knewave, Bangers, sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.header-session svg {
    width: 25px;
    height: 25px;
    stroke: currentColor;
    fill: none;
}
.header-session:not(.header-enter) span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.site-header .header-enter {
    color: #ffd126;
}
.site-header .header-session:hover {
    color: #ffd126;
    background: #ffffff09;
}
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}
.site-header .ninja-menu-home span {
    display: none;
}

@media (min-width: 1921px) {
    .site-header::before { background-size: 100% 151px; }
}
@media (min-width: 981px) and (max-width: 1190px) {
    .site-header .header-inner { width: calc(100% - 40px); gap: 20px; }
    .site-header .portal-logo { flex-basis: 225px; margin-top: 12px; }
    .site-header .header-controls { padding-left: 13px; gap: 8px; }
    .site-header .header-inner .ninja-menu { gap: 12px; }
    .site-header .header-inner .ninja-menu a { font-size: 14px; gap: 5px; }
    .site-header .ninja-menu svg { flex-basis: 23px; width: 23px; height: 25px; }
}
@media (max-width: 980px) {
    .site-header { background: #060708; }
    .site-header::before {
        height: 96px;
        background-size: 1600px 126px;
        background-position: 34% top;
    }
    .site-header .header-inner {
        width: 100%;
        min-height: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }
    .site-header .portal-logo {
        flex-basis: 205px;
        width: 205px;
        margin: 5px 0 8px 24px;
    }
    .portal-logo-caption { font-size: 10px; padding: 1px 13px 3px; }
    .site-header .header-controls { display: contents; }
    .header-controls::before { content: none; }
    .site-header .header-inner .ninja-menu {
        flex: 0 0 100%;
        position: relative;
        isolation: isolate;
        order: 3;
        width: 100%;
        margin: 0;
        padding: 0 18px 5px;
        min-height: 62px;
        gap: 12px;
        justify-content: space-around;
    }
    .site-header .ninja-menu::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: -10px 0 -6px;
        background: #060708;
        clip-path: polygon(0 12%, 31% 7%, 29% 0, 75% 5%, 100% 0, 100% 90%, 70% 88%, 68% 100%, 40% 93%, 0 97%);
    }
    .site-header .header-inner .ninja-menu a { font-size: 15px; min-height: 56px; }
    .site-header .header-session {
        position: absolute;
        top: 29px;
        right: 24px;
        min-height: 44px;
        padding: 8px 12px;
        border: 0;
        color: #fff;
        background: #08090b;
        font-size: 13px;
    }
    .header-session:not(.header-enter) span {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
        font: 600 11px/1.2 'Segoe UI', sans-serif;
    }
    .site-header .header-enter { color: #ffd126; }
    .header-session svg { width: 21px; height: 21px; }
    .site-header .ninja-menu-home span { display: block; }
}
@media (max-width: 600px) {
    .site-header .portal-logo { flex-basis: 180px; width: 180px; margin: 5px 0 10px 14px; }
    .portal-logo-caption { font-size: 9px; }
    .site-header .header-session { top: 27px; right: 14px; gap: 5px; padding: 8px 9px; }
    .site-header .header-inner .ninja-menu { padding: 1px 8px 5px; gap: 0; min-height: 70px; align-items: stretch; }
    .site-header .header-inner .ninja-menu a {
        flex: 1 1 0;
        flex-direction: column;
        justify-content: flex-start;
        padding: 4px 2px;
        gap: 4px;
        min-height: 64px;
        font-size: clamp(11px, 2.8vw, 14px);
        line-height: 1.3;
        text-align: center;
        white-space: normal;
    }
    .site-header .ninja-menu svg { flex: 0 0 24px; width: 24px; height: 24px; }
    .site-header .ninja-menu span { max-width: 100%; }
}
@media (max-width: 350px) {
    .site-header .header-inner .ninja-menu a { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header *, .site-header *::before { transition: none !important; }
}