/* Poolbaas mobile dock 1.0
   App-like, context-aware navigation for phones.
*/
.pb-mobile-dock-layer,
.pb-mobile-dock {
    display: none;
}

@media (max-width: 760px) {
    :root {
        --pb-dock-green: #39e58c;
        --pb-dock-green-strong: #16c96f;
        --pb-dock-bg: rgba(8, 27, 25, .965);
        --pb-dock-muted: rgba(235, 247, 243, .62);
        --pb-dock-white: #f7fffb;
        --pb-dock-height: 78px;
    }

    body:not(.admin-page) {
        padding-bottom:
            calc(var(--pb-dock-height) + 22px + env(safe-area-inset-bottom))
            !important;
    }

    body.pb-mobile-keyboard-open .pb-mobile-dock-layer {
        opacity: 0;
        visibility: hidden;
        transform: translateY(120%);
        pointer-events: none;
    }

    .pb-mobile-dock-layer {
        position: fixed;
        z-index: 5000;
        right: max(9px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        left: max(9px, env(safe-area-inset-left));

        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .22s cubic-bezier(.2, .8, .2, 1);

        pointer-events: none;
    }

    .pb-mobile-dock {
        position: relative;

        width: 100%;
        min-height: var(--pb-dock-height);

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(64px, 1.12fr)
            minmax(0, 1fr)
            minmax(0, 1fr);
        align-items: end;
        gap: 1px;

        margin: 0;
        padding: 8px 6px 7px;

        border: 1px solid rgba(255, 255, 255, .105);
        border-radius: 25px;
        background:
            linear-gradient(180deg, rgba(17, 43, 40, .99), var(--pb-dock-bg));
        box-shadow:
            0 18px 44px rgba(0, 19, 15, .30),
            0 5px 14px rgba(0, 19, 15, .22),
            inset 0 1px 0 rgba(255, 255, 255, .08);

        -webkit-backdrop-filter: blur(18px) saturate(135%);
        backdrop-filter: blur(18px) saturate(135%);
        isolation: isolate;
        pointer-events: auto;
    }

    .pb-mobile-dock::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: inherit;
        background:
            radial-gradient(circle at 50% -15%, rgba(57, 229, 140, .16), transparent 34%),
            linear-gradient(90deg, transparent, rgba(255, 255, 255, .025), transparent);
        pointer-events: none;
    }

    .pb-mobile-dock__item {
        position: relative;
        min-width: 0;
        min-height: 58px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;

        padding: 7px 2px 4px;
        border: 0;
        border-radius: 16px;
        background: transparent;
        color: var(--pb-dock-muted) !important;

        font-family: inherit;
        font-size: .64rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.01em;
        text-align: center;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;

        transition:
            color .16s ease,
            background .16s ease,
            transform .12s ease;
    }

    .pb-mobile-dock__item:active {
        transform: scale(.94);
    }

    .pb-mobile-dock__item:focus-visible {
        outline: 2px solid var(--pb-dock-green);
        outline-offset: 1px;
    }

    .pb-mobile-dock__item.is-active {
        color: var(--pb-dock-green) !important;
        background: rgba(57, 229, 140, .075);
    }

    .pb-mobile-dock__item.is-active::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 50%;
        width: 18px;
        height: 3px;
        border-radius: 999px;
        background: var(--pb-dock-green);
        box-shadow: 0 0 12px rgba(57, 229, 140, .58);
        transform: translateX(-50%);
    }

    .pb-mobile-dock__icon {
        width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
    }

    .pb-mobile-dock__icon svg {
        width: 24px;
        height: 24px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .pb-mobile-dock__label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pb-mobile-dock__item--primary {
        min-height: 70px;
        margin-top: -18px;
        padding-top: 0;
        color: var(--pb-dock-white) !important;
        overflow: visible;
    }

    .pb-mobile-dock__item--primary::after {
        content: none !important;
    }

    .pb-mobile-dock__primary-button {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;

        display: grid;
        place-items: center;

        border: 5px solid #102d29;
        border-radius: 50%;
        background:
            linear-gradient(145deg, #53ee9c, var(--pb-dock-green-strong));
        color: #06261b;
        box-shadow:
            0 10px 22px rgba(22, 201, 111, .32),
            0 0 0 1px rgba(255, 255, 255, .16),
            inset 0 1px 1px rgba(255, 255, 255, .55);

        transition:
            transform .16s ease,
            box-shadow .16s ease;
    }

    .pb-mobile-dock__item--primary:active {
        transform: none;
    }

    .pb-mobile-dock__item--primary:active .pb-mobile-dock__primary-button {
        transform: scale(.91);
        box-shadow:
            0 5px 13px rgba(22, 201, 111, .26),
            0 0 0 1px rgba(255, 255, 255, .12);
    }

    .pb-mobile-dock__item--primary.is-active .pb-mobile-dock__primary-button {
        background: linear-gradient(145deg, #75ffb4, #22db7d);
        box-shadow:
            0 12px 26px rgba(38, 224, 128, .43),
            0 0 0 1px rgba(255, 255, 255, .19),
            inset 0 1px 1px rgba(255, 255, 255, .62);
    }

    .pb-mobile-dock__primary-button svg {
        width: 27px;
        height: 27px;
        stroke-width: 2.3;
    }

    .pb-mobile-dock__item--primary .pb-mobile-dock__label {
        margin-top: 1px;
        color: var(--pb-dock-white);
        font-weight: 900;
    }

    /* Keep the language selector clear of the app dock. */
    body:has(.pb-mobile-dock) .pb-language-switcher {
        bottom:
            calc(var(--pb-dock-height) + 24px + env(safe-area-inset-bottom))
            !important;
    }
}

@media (max-width: 370px) {
    .pb-mobile-dock-layer {
        right: 5px;
        left: 5px;
    }

    .pb-mobile-dock {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            60px
            minmax(0, 1fr)
            minmax(0, 1fr);
        padding-inline: 3px;
        border-radius: 22px;
    }

    .pb-mobile-dock__item {
        font-size: .58rem;
    }

    .pb-mobile-dock__primary-button {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }
}

@media (display-mode: standalone) and (max-width: 760px) {
    .pb-mobile-dock-layer {
        bottom: max(5px, env(safe-area-inset-bottom));
    }
}

@media print {
    .pb-mobile-dock-layer {
        display: none !important;
    }
}

/* === POOLBAAS SINGLE GAME DOCK V1 START === */

@media (max-width: 760px) {
    :root {
        --pb-dock-accent: #ffdd66;
        --pb-dock-purple: #7f56ff;
        --pb-dock-purple-strong: #5733c8;
        --pb-dock-bg: rgba(20, 8, 59, .975);
        --pb-dock-muted: rgba(255, 255, 255, .60);
        --pb-dock-white: #ffffff;
    }

    .pb-mobile-dock {
        border-color: rgba(255, 255, 255, .12);
        background:
            radial-gradient(
                circle at 18% -45%,
                rgba(127, 86, 255, .43),
                transparent 46%
            ),
            linear-gradient(
                110deg,
                #14083b 0%,
                #211058 52%,
                #0e1632 100%
            );
        box-shadow:
            0 18px 44px rgba(12, 8, 40, .30),
            0 5px 14px rgba(12, 8, 40, .23),
            inset 0 1px 0 rgba(255, 255, 255, .09);
    }

    .pb-mobile-dock::before {
        background:
            radial-gradient(
                circle at 50% -18%,
                rgba(127, 86, 255, .23),
                transparent 38%
            ),
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, .035),
                transparent
            );
    }

    .pb-mobile-dock__item {
        color: var(--pb-dock-muted) !important;
    }

    .pb-mobile-dock__item:focus-visible {
        outline-color: var(--pb-dock-accent);
    }

    .pb-mobile-dock__item.is-active {
        color: var(--pb-dock-accent) !important;
        background: rgba(255, 221, 102, .085);
    }

    .pb-mobile-dock__item.is-active::after {
        background: var(--pb-dock-accent);
        box-shadow: 0 0 12px rgba(255, 221, 102, .40);
    }

    .pb-mobile-dock__primary-button {
        border-color: #1b0d47;
        background:
            linear-gradient(
                145deg,
                #9579ff,
                var(--pb-dock-purple-strong)
            );
        color: #ffffff;
        box-shadow:
            0 10px 24px rgba(91, 53, 205, .38),
            0 0 0 1px rgba(255, 255, 255, .17),
            inset 0 1px 1px rgba(255, 255, 255, .38);
    }

    .pb-mobile-dock__item--primary:active
    .pb-mobile-dock__primary-button {
        box-shadow:
            0 5px 14px rgba(91, 53, 205, .30),
            0 0 0 1px rgba(255, 255, 255, .14);
    }

    .pb-mobile-dock__item--primary.is-active
    .pb-mobile-dock__primary-button {
        background:
            linear-gradient(
                145deg,
                #a38cff,
                #6841dc
            );
        box-shadow:
            0 12px 27px rgba(105, 65, 220, .47),
            0 0 0 1px rgba(255, 255, 255, .20),
            inset 0 1px 1px rgba(255, 255, 255, .43);
    }
}

/* === POOLBAAS SINGLE GAME DOCK V1 END === */