/* Shared public navigation; retains visible links when JavaScript is unavailable. */
.material-symbols-outlined { max-width: 1em; overflow: hidden; flex-shrink: 0; }
.mobile-nav-toggle, .mobile-nav-home { display: none; }
.gh-nav-dropdown:focus-within .gh-nav-dropdown-menu { display: block; }
.mobile-nav-toggle {
    align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; padding: 10px; border-radius: 9px;
    border: 1px solid var(--tournament-border, rgba(226,232,240,.22));
    background: var(--tournament-tint, rgba(255,255,255,.05));
    color: var(--text, #f1f5f9); cursor: pointer;
}
.mobile-nav-toggle svg { width: 22px; height: 22px; }
.mobile-nav-close { display: none; }
.topnav .theader-user-chip { color: #cbd5e1; }
.topnav .theader-login-btn { color: #a5b4fc; }
.nav-open .mobile-nav-bars { display: none; }
.nav-open .mobile-nav-close { display: block; }
[data-mobile-header] a:focus-visible,
[data-mobile-header] button:focus-visible { outline: 2px solid var(--primary, #cbd5e1); outline-offset: 3px; }

@media (max-width: 1100px) {
    [data-mobile-header] .topbar-inner {
        height: auto; min-height: 64px; padding: 8px 20px; gap: 12px;
        flex-wrap: wrap;
    }
    [data-mobile-header] .brand-name { display: inline; }
    [data-mobile-header].nav-ready .mobile-nav-toggle { display: inline-flex; margin-left: auto; }
    [data-mobile-header] [data-mobile-nav] {
        display: flex; flex-direction: column; align-items: stretch;
        order: 3; flex: 0 0 100%; width: 100%; min-width: 0;
        padding: 8px 0; gap: 4px; overflow-x: visible;
    }
    [data-mobile-header].nav-ready [data-mobile-nav] {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        padding: 12px 20px max(20px, env(safe-area-inset-bottom));
        max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
        overflow-y: auto; overscroll-behavior: contain;
        background: var(--tournament-surface, #09090e);
        border-bottom: 1px solid var(--tournament-border, rgba(255,255,255,.12));
        box-shadow: 0 16px 28px rgba(0,0,0,.45);
    }
    [data-mobile-header].nav-open [data-mobile-nav] { display: flex; }
    [data-mobile-header] [data-mobile-nav] a {
        display: flex; align-items: center; justify-content: flex-start;
        min-height: 44px; padding: 12px 14px; margin: 0;
        font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
    }
    [data-mobile-header] .gh-topnav .gh-hide-sm { display: flex; }
    [data-mobile-header] .mobile-nav-home { display: flex; }
    [data-mobile-header] .tnav-back { display: flex; }
    [data-mobile-header] .tnav-sep { display: none; }
    [data-mobile-header] .gh-nav-label-desktop { display: inline; }
    [data-mobile-header] .gh-nav-label-mobile { display: none; }
    [data-mobile-header] .gh-nav-dropdown { flex-direction: column; align-items: stretch; }
    [data-mobile-header] .gh-nav-dropdown-btn {
        padding: 12px 14px 4px; color: #94a3b8; font-size: 12px; cursor: default;
    }
    [data-mobile-header] .gh-nav-dropdown-btn svg { display: none; }
    [data-mobile-header] .gh-nav-dropdown-menu {
        display: block; position: static; min-width: 0; padding: 0;
    }
    [data-mobile-header] .gh-nav-dropdown-menu-inner {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        background: transparent; border: 0; box-shadow: none; padding: 0;
    }
    [data-mobile-header] .gh-nav-user,
    [data-mobile-header] .theader-user {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
        margin: 8px 0 0; padding: 12px 0 0; border-left: 0;
        border-top: 1px solid var(--border, rgba(255,255,255,.1));
    }
    [data-mobile-header] .gh-user-chip,
    [data-mobile-header] .theader-user-chip { min-width: 0; max-width: 100%; }
}
@media (max-width: 768px) {
    [data-mobile-header] .topbar-inner { padding-inline: 16px; }
    .hero-inner { padding: 24px 16px 20px; gap: 16px; }
    .hero-text { min-width: 0; overflow-wrap: anywhere; }
    .hero-logo { width: 52px; height: 52px; }
    .hero-cta { width: 100%; }
    .hero-cta .btn-discord { width: 100%; justify-content: center; white-space: normal; }
    .hero-pills .hpill { max-width: 100%; overflow-wrap: anywhere; }
    .site-footer { padding: 24px 16px; }
}
@media (max-width: 480px) {
    [data-mobile-header] .gh-brand-name { font-size: 16px; letter-spacing: 2px; }
    [data-mobile-header] .brand-name { font-size: 15px; letter-spacing: 2px; }
    [data-mobile-header] .gh-brand { gap: 10px; }
    .t-hero .hero-title { font-size: 28px; line-height: 1.15; }
}