/* ==========================================================
   BrightSteps v2
   Premium Navbar
========================================================== */

/* ==========================
   Navbar
========================== */

.topbar {
    position: sticky;
    top: 16px;
    z-index: 1000;

    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0.85rem 1.5rem;

    background: rgba(255,255,255,.88);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.45);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-md);

    transition: var(--transition);
}

/* ==========================
   Brand
========================== */

.brand{

    display:flex;
    align-items:center;
    gap:1rem;

    text-decoration:none;

    color:var(--text);

}

.brand:hover{

    transform:translateY(-2px);

}

.brand-mark{

    width:60px;
    height:60px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    font-size:1.7rem;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}

.brand:hover .brand-mark{

    transform:rotate(-12deg) scale(1.08);

}

.brand-copy{

    display:flex;
    flex-direction:column;

}

.brand-copy h1{

    margin:0;

    font-size:1.45rem;

    font-weight:700;

    line-height:1;

    color:var(--text);

}

.brand-copy p{

    margin-top:.2rem;

    font-size:.8rem;

    color:var(--text-light);

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==========================
   Navigation
========================== */

.activity-tabs{

    display:flex;
    align-items:center;
    gap:.75rem;

}

/* ==========================
   Navigation Button
========================== */

.nav-tab{

    display:flex;
    align-items:center;
    gap:.5rem;

    padding:.85rem 1.3rem;

    border:none;

    border-radius:999px;

    background:transparent;

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    color:var(--text-light);

    transition:var(--transition);

}

.nav-tab:hover{

    background:#EEF4FF;

    color:var(--primary);

    transform:translateY(-2px);

}

.nav-tab.active{

    background:var(--gradient-primary);

    color:#fff;

    box-shadow:var(--shadow-md);

}

/* Icon */

.tab-icon{

    font-size:1.15rem;

}

/* ==========================
   Focus
========================== */

.nav-tab:focus-visible,
.brand:focus-visible{

    outline:3px solid var(--primary-light);

    outline-offset:4px;

}

/* ==========================
   Responsive
========================== */

@media (max-width: 992px){

    .topbar{

        flex-direction:column;

        gap:1rem;

    }

    .activity-tabs{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

    }

    .player-status{

    width:100%;

    justify-content:center;

    flex-wrap:wrap;

}

}

@media (max-width: 576px){

    .topbar{

        padding:1rem;

    }

    .activity-tabs{

        gap:.5rem;

    }

    .nav-tab{

        padding:.75rem 1rem;

        font-size:.9rem;

    }

    .brand-mark{

        width:52px;
        height:52px;

        font-size:1.4rem;

    }

    .brand-copy h1{

        font-size:1.2rem;

    }

}

/* ==========================================================
   Player Status
========================================================== */

.player-status{

    display:flex;

    align-items:center;

    gap:1rem;

}

.status-pill{

    display:flex;

    align-items:center;

    gap:.45rem;

    padding:.7rem 1rem;

    border-radius:999px;

    background:#F5F8FF;

    border:1px solid #E7EEFF;

    font-weight:700;

    color:var(--text);

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.status-player{

    display:flex;

    align-items:center;

    gap:.5rem;

    padding:.7rem 1.2rem;

    border-radius:999px;

    background:var(--gradient-primary);

    color:white;

    font-weight:700;

    box-shadow:var(--shadow-md);

}

.status-player span{

    white-space:nowrap;

}