/* ===== RMX Evolution webclient navbar (injected via evolve.rmx317.com) ===== */
/* Sibling of theme.css, which does the same job for play.rmx317.com.        */
/* Edit this file, not the Apache vhost.                                      */

:root {
    --evo: #3dff6a;
}

#evobar {
    font-family: system-ui, sans-serif;
    background: rgba(8, 14, 10, 0.96);
    border-bottom: 1px solid #1f2b23;
    box-shadow:
        0 1px 0 rgba(61, 255, 106, 0.55),
        0 6px 24px rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    position: relative;
    z-index: 50;
}

#evobar .evobrand {
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: #f2f0ea;
    text-shadow: 2px 2px 0 #05320f;
    text-decoration: none;
    white-space: nowrap;
}

#evobar .evobrand b { color: var(--evo); }

#evobar .evolinks {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

#evobar a.evolink {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.15s;
}

#evobar a.evolink:hover { color: #fff; }

/* the pop-out arrow on World Map */
#evobar a.evolink .evopop {
    font-size: 0.72em;
    opacity: 0.65;
    margin-left: 3px;
}

#evobar a.evolink:hover .evopop { opacity: 1; }

@media (max-width: 760px) {
    #evobar { gap: 0.9rem; padding: 0.5rem 0.7rem; }
    #evobar .evolinks { gap: 0.9rem; justify-content: flex-start; }
    #evobar a.evolink { font-size: 0.82rem; }
    #evobar .evobrand { font-size: 0.88rem; }
}