/* Browser-only navigation. Native shells supply their own tabs. */
@media (max-width: 767px) {
    :root {
        --mobile-dock-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mobile-dock-height: calc(108px + var(--mobile-dock-safe-bottom));
        --mobile-dock-bottom: 0px;
        --mobile-dock-clearance: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 12px);
    }

    html:has(body.is-browser) { scroll-padding-bottom: var(--mobile-dock-clearance); }
    body.is-browser { padding-bottom: var(--mobile-dock-clearance); }
    body.is-browser :is(input, select, textarea, button, a, summary, [tabindex]) { scroll-margin-bottom: var(--mobile-dock-clearance); }

    .mobile-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) 86px repeat(2, minmax(0, 1fr));
        align-items: end;
        position: fixed;
        z-index: 120;
        bottom: var(--mobile-dock-bottom);
        left: 0;
        right: 0;
        width: 100%;
        height: var(--mobile-dock-height);
        padding: 0 max(4px, env(safe-area-inset-right, 0px)) calc(6px + var(--mobile-dock-safe-bottom)) max(4px, env(safe-area-inset-left, 0px));
        isolation: isolate;
        pointer-events: none;
    }

    /* Extend the blue surface beneath the home indicator, keeping controls above it. */
    .mobile-bar::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: auto 0 0;
        height: var(--mobile-dock-safe-bottom);
        background: #0b3aa9;
        pointer-events: none;
    }

    .mobile-bar-surface {
        position: absolute;
        inset: 28px 0 auto;
        z-index: -1;
        width: 100%;
        height: 80px;
        overflow: visible;
        filter: drop-shadow(0 -1px 0 #5280e6) drop-shadow(0 7px 12px #0e4cd324);
        pointer-events: none;
    }

    .mobile-bar-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        align-self: end;
        gap: 4px;
        min-width: 0;
        min-height: 62px;
        padding: 0 1px;
        border-radius: 12px;
        color: #e0eaff;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto;
    }

    .mobile-bar-link:hover,
    .mobile-bar-link[aria-current="page"] { color: #fff; }
    .mobile-bar-link:focus-visible { outline: 3px solid var(--club-pink); outline-offset: 3px; }
    .mobile-bar-label { display: block; min-height: 26px; overflow-wrap: anywhere; }

    .mobile-bar-icon {
        display: grid;
        place-items: center;
        width: 38px;
        height: 32px;
        border-radius: 11px;
        transition: background-color .2s ease, transform .2s ease;
    }

    .mobile-bar-icon svg { display: block; width: 21px; height: 21px; }
    .mobile-bar-link[aria-current="page"] .mobile-bar-icon { background: #ffffff24; }
    .mobile-bar-link:active .mobile-bar-icon { transform: scale(.94); }

    .mobile-bar-featured { gap: 4px; color: #fff; font-weight: 650; }
    .mobile-bar-orbit {
        position: relative;
        display: grid;
        place-items: center;
        width: 74px;
        height: 74px;
        padding: 5px;
        flex: none;
        transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    }

    .mobile-bar-disc {
        position: relative;
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        border: 1px solid #ee2d85;
        border-radius: 50%;
        background: linear-gradient(155deg, #ff52a1 0%, #f22384 48%, #d51369 100%);
        box-shadow: inset 0 1px 1px #ffffff8c, inset 0 -2px 3px #ae0a4d30, 0 7px 13px #b50d5c26;
    }

    .mobile-bar-disc::after { content: ""; position: absolute; inset: 4px; border: 1px solid #ffffff38; border-radius: 50%; pointer-events: none; }
    .mobile-bar-disc svg { display: block; width: 28px; height: 28px; }
    .mobile-bar-featured[aria-current="page"] .mobile-bar-disc { box-shadow: inset 0 1px 1px #ffffff8c, inset 0 -2px 3px #ae0a4d30, 0 8px 15px #b50d5c2e; }
    .mobile-bar-featured:active .mobile-bar-orbit { transform: translateY(-3px) scale(.97); }

    .mobile-bar-count {
        position: absolute;
        z-index: 1;
        top: -1px;
        right: -3px;
        display: grid;
        place-items: center;
        min-width: 23px;
        height: 23px;
        padding-inline: 3px;
        border: 2px solid #f5f7ff;
        border-radius: 14px;
        background: var(--club-blue);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 1px 3px #0b1a3c1a;
    }

    .mobile-bar-halo {
        position: absolute;
        inset: 5px;
        border: 1px solid #ff2d8b55;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
    }

    body.is-browser .analytics-choice {
        bottom: var(--mobile-dock-clearance);
        max-height: calc(100dvh - var(--mobile-dock-clearance) - 24px);
    }
}

@media (max-width: 767px) and (hover: hover) {
    .mobile-bar-link:hover .mobile-bar-icon { background: #ffffff15; transform: translateY(-2px); }
}

/* One quiet reminder on arrival; tapping remains responsive without a loop. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .mobile-bar-halo { animation: mobile-dock-halo 5s ease-out 2; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-bar-icon,
    .mobile-bar-orbit { transition: none; }
    .mobile-bar-halo { animation: none; }
}

@keyframes mobile-dock-halo {
    0%, 60%, 100% { transform: scale(1); opacity: 0; }
    66% { opacity: .65; }
    90% { transform: scale(1.18); opacity: 0; }
}