/* =========================================
   MOBILE BOTTOM TASKBAR (app-style nav)
   Shortcuts: Quiz, Movie News, Calendar, Explore
========================================= */

.fc-bottom-nav {
    display: none;
}

@media (max-width: 768px) {

    .fc-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;

        height: 64px;
        padding-bottom: env(safe-area-inset-bottom, 0);

        background: rgba(13, 13, 13, 0.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        border-top: 1px solid rgba(255, 255, 255, 0.09);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
    }

    .fc-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;

        color: #a5a5a5;
        text-decoration: none;
        font-family: inherit;

        transition: color 0.2s ease, transform 0.2s ease;
    }

    .fc-bottom-nav-item i {
        font-size: 19px;
        line-height: 1;
    }

    .fc-bottom-nav-item span {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .fc-bottom-nav-item:active {
        transform: scale(0.92);
    }

    .fc-bottom-nav-item.active {
        color: #ffd21c;
    }

    .fc-bottom-nav-item.active i {
        text-shadow: 0 0 14px rgba(255, 210, 28, 0.55);
    }

    /* keep page content (and any existing fixed footers/buttons)
       clear of the taskbar */
    body.has-fc-bottom-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    }
}