/* Shared site-wide navigation + footer for the standalone info/legal pages.
   Linked ONLY on the info pages (about, what-is, game-modes, how-to-play,
   privacy, terms) — never on the game (index.html) — so it cannot affect
   gameplay layout. Uses existing theme variables with safe fallbacks. */

.info-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--panel-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-lg, 12px);
    font-size: 0.9rem;
    line-height: 1.4;
}

.info-nav a {
    color: var(--text-color, #e2e8f0);
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.info-nav a:hover {
    text-decoration: underline;
}

.info-nav a[aria-current='page'] {
    color: var(--button-primary-bg, #2563eb);
    font-weight: 700;
}

.info-footer {
    margin: 36px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.9;
    color: var(--text-muted, #94a3b8);
}

.info-footer a {
    color: var(--text-color, #e2e8f0);
    text-decoration: none;
    margin: 0 6px;
}

.info-footer a:hover {
    text-decoration: underline;
}

.info-footer p {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
}