.site-nav {
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #dedede;
    background: #fff;
}

.site-nav-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(92%, 1100px);
    margin: 0 auto;
    padding: 8px 0;
}

.site-nav-link,
.site-nav-more summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 6px;
    color: #444;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}

.site-nav-link[aria-current],
.site-nav-more[data-current-section] summary {
    color: #222;
    background: #f0f0f0;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.site-nav-link[data-site-section="mcr"][aria-current] { color: var(--mcr-green); background: #eff5eb; }
.site-nav-link[data-site-section="riichi"][aria-current] { color: var(--riichi-red); background: #fff0ee; }
.site-nav a:hover, .site-nav-more summary:hover { background: #f4f4f4; color: #222; }
.site-nav :focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
.site-nav-more { position: relative; margin-left: auto; }
.site-nav-more summary { list-style: none; gap: 6px; }
.site-nav-more summary::-webkit-details-marker { display: none; }
.site-nav-chevron { transition: transform 120ms ease; }
.site-nav-more[open] .site-nav-chevron { transform: rotate(180deg); }
.site-nav-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 200px;
    padding: 6px;
    border: 1px solid #dedede;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
.site-nav-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 4px;
    color: #444;
    text-decoration: none;
}
.site-nav-menu a[aria-current] { font-weight: 700; text-decoration: underline; }
.ranking-return { margin: -12px 0 16px; }
.ranking-return a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .95rem; }

@media (max-width: 575.98px) {
    .site-nav-inner { width: calc(100% - 24px); gap: 2px; }
    .site-nav-link { flex: 1; }
    .site-nav-link, .site-nav-more summary { padding: 8px; font-size: .875rem; white-space: nowrap; }
    .site-nav-more { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .site-nav-chevron { transition: none; }
}

@media (max-width: 380px) {
    .site-nav-inner { width: calc(100% - 16px); gap: 0; }
    .site-nav-link, .site-nav-more summary { padding: 8px 6px; font-size: .8125rem; }
}