/* Shared page flow keeps navigation above content, including when links wrap. */
body.site-layout {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0 16px 40px;
    min-height: 100vh;
}

body.site-layout > main {
    width: 100%;
}

.site-nav,
.site-nav * {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    letter-spacing: 0;
}

.site-nav {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: calc(100% + 32px);
    margin: 0 0 28px;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid #dce5e2;
    color: #24352f;
    text-align: left;
}

.site-nav__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 20px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 20px;
}

.site-nav__links,
.site-nav__account {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.site-nav__links {
    position: relative;
}

.site-nav__group {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.site-nav__group > .site-nav__link {
    padding-right: 6px;
}

.site-nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #34473f;
    cursor: pointer;
}

.site-nav__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s;
}

.site-nav__submenu {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    display: none;
    width: max-content;
    min-width: 230px;
    max-width: min(320px, calc(100vw - 32px));
    max-height: min(520px, 70vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #dce5e2;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(36, 53, 47, .14);
}

.site-nav__submenu .site-nav__link {
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
}

.site-nav__group:focus-within > .site-nav__submenu,
.site-nav__group.is-open > .site-nav__submenu {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .site-nav__group:hover > .site-nav__submenu {
        display: block;
    }
}

.site-nav__group.is-open .site-nav__chevron {
    transform: translateY(2px) rotate(225deg);
}

.site-nav__account {
    margin-left: auto;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #34473f;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    overflow-wrap: anywhere;
    box-shadow: none;
    transform: none;
    transition: background-color .15s, color .15s;
}

.site-nav a:hover {
    background: #f0f5f3;
    color: #08674e;
}

.site-nav a[aria-current] {
    background: #e5f3ec;
    color: #08674e;
    box-shadow: inset 0 -3px #087f5b;
}

.site-nav__group.is-current > .site-nav__link {
    background: #e5f3ec;
    color: #08674e;
    box-shadow: inset 0 -3px #087f5b;
}

.site-nav__toggle:hover {
    background: #f0f5f3;
    color: #08674e;
}

.site-nav__toggle:focus-visible {
    outline: 3px solid #cf8b18;
    outline-offset: 2px;
}

.site-nav a.site-nav__logout {
    color: #a53242;
}

.site-nav a:focus-visible {
    outline: 3px solid #cf8b18;
    outline-offset: 2px;
}

body.site-layout.site-layout--canvas {
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: auto;
}

.site-layout--canvas .site-nav {
    width: 100%;
    margin-bottom: 0;
}

.site-layout--canvas #game {
    flex: 1 0 320px;
    width: 100%;
    height: auto;
    min-height: 320px;
}

@media (max-width: 760px) {
    .site-nav__inner {
        gap: 4px 12px;
        padding: 8px 16px;
    }

    .site-nav__links {
        flex-basis: 100%;
    }

    .site-nav a {
        padding-right: 10px;
        padding-left: 10px;
    }

    .site-nav__account {
        flex-basis: 100%;
        flex-wrap: wrap;
        padding-top: 6px;
        border-top: 1px solid #edf1ef;
    }

    .site-nav__submenu {
        top: 100%;
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
    }

    .site-nav__group {
        position: static;
    }
}

.site-layout--auth > .login-box,
.site-layout--auth > .register-box,
.site-layout--auth > .box {
    box-sizing: border-box;
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: auto;
}