/*
 * Mobile navigation for pages using the legacy .navbar / .nav-menu markup
 * (product-detail and the per-game landing pages).
 *
 * css/style.css hides .nav-menu completely below 768px. While the site blocked
 * mobile devices that went unnoticed; with the block removed those pages had no
 * way to navigate on a phone. js/mobile-nav.js injects a toggle button at
 * runtime (so no page markup changes) and this stylesheet renders it plus the
 * open state.
 *
 * Desktop rendering is untouched: everything here is inside a max-width query,
 * and the closed state still relies on style.css hiding the menu.
 */

.zc-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--neon-cyan, #00d4ff);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .zc-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /*
     * Higher specificity than style.css's `.nav-menu { display: none }`, so the
     * open state wins regardless of the order the stylesheets are loaded in.
     * .navbar is position:fixed, so absolute positioning anchors to it.
     */
    .nav-menu.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1.25rem 1.5rem 1.75rem;
        background: rgba(10, 14, 26, 0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0, 153, 255, 0.2);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .nav-menu.is-open .nav-link,
    .nav-menu.is-open .auth-btn {
        display: block;
        width: 100%;
        padding: 0.6rem 0;
    }
}