.app-dock {
    position: relative;
    z-index: 24;

    min-width: 0;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: clamp(6px, 0.9vw, 13px);

    padding:
        7px
        clamp(8px, 1.3vw, 17px);

    background:
        linear-gradient(
            180deg,
            #cb8630 0%,
            #a55d1f 100%
        );

    border-top: 4px solid #744318;

    border-radius:
        0
        0
        calc(
            var(--shell-radius) -
            var(--shell-border-width)
        )
        calc(
            var(--shell-radius) -
            var(--shell-border-width)
        );

    overflow: hidden;

    box-shadow:
        inset 0 3px 0 rgb(255 213 111 / 40%),
        0 -5px 15px rgb(0 0 0 / 28%);
}

.app-dock::before {
    content: "";

    position: absolute;
    inset: 3px 10px auto;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgb(255 230 150 / 44%),
            transparent
        );

    pointer-events: none;
}

.app-dock__button {
    --dock-accent: #4d8b43;
    --dock-paper: #e9b75e;

    position: relative;

    min-width: 0;
    min-height: 50px;

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

    gap: clamp(6px, 0.8vw, 13px);

    padding: 4px 10px;

    overflow: hidden;

    appearance: none;

    border: 3px solid #754619;
    border-radius: 14px;

    background:
        radial-gradient(
            circle at 21% 15%,
            rgb(255 255 255 / 32%),
            transparent 31%
        ),
        linear-gradient(
            155deg,
            color-mix(
                in srgb,
                var(--dock-paper),
                white 13%
            ),
            var(--dock-paper)
        );

    color: #34200d;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size: clamp(13px, 1.1vw, 17px);
    font-weight: 1000;

    cursor: pointer;

    box-shadow:
        0 4px 0 #633914,
        0 7px 11px rgb(0 0 0 / 22%),
        inset 0 0 0 2px rgb(255 244 194 / 25%);

    transition:
        translate 150ms ease,
        filter 150ms ease,
        box-shadow 150ms ease;
}

.app-dock__button::before {
    content: "";

    position: absolute;

    left: -18px;
    bottom: -21px;

    width: 47px;
    height: 47px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--dock-accent),
                transparent 62%
            ),
            transparent 70%
        );

    pointer-events: none;
}

.app-dock__button--start {
    --dock-accent: #2f783d;
    --dock-paper: #f1d37c;
}

.app-dock__button--plan {
    --dock-accent: #bd7a2d;
    --dock-paper: #e8ad55;
}

.app-dock__button--rsvp {
    --dock-accent: #b72d36;
    --dock-paper: #ef6b5d;
}

.app-dock__button[data-go="rsvp"] {
    --dock-accent: #b72d36;
    --dock-paper: #ef6b5d;
}

.app-dock__button--faq {
    --dock-accent: #397fc5;
    --dock-paper: #e6ad55;
}

.app-dock__button--info {
    --dock-accent: #925f32;
    --dock-paper: #e8ae58;
}
.app-dock__button--route { --dock-accent: #397fc5; --dock-paper: #d9e7ef; }
.app-dock__button--primary {
    min-height: 62px;
    isolation: isolate;
    border: 3px solid #791f2b;
    border-radius: 8px 8px 17px 17px;
    clip-path: polygon(10% 0, 90% 0, 100% 18%, 91% 100%, 9% 100%, 0 18%);
    background: linear-gradient(155deg, #ffb16f 0%, #e34a43 48%, #b92c3b 100%);
    box-shadow: 0 5px 0 #791f2b, 0 10px 17px rgb(0 0 0 / 31%), inset 0 0 0 2px rgb(255 244 203 / 50%);
}
.app-dock__button--primary:hover { filter: saturate(1.12) brightness(1.04); }
.app-dock__button--primary.is-active { border-color: #791f2b; background: linear-gradient(155deg, #ffd276, #ed5c45 55%, #bd2b3a); outline-color: rgb(255 223 123 / 76%); }
.app-dock__button--primary .app-dock__label { color: #fffbea; white-space: normal; text-align: center; line-height: .95; font-size: 1.09em; text-shadow: 0 2px 0 rgb(92 22 25 / 55%); }

.app-dock__icon {
    position: relative;
    z-index: 2;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    font-size: 30px;
    line-height: 1;

    filter:
        drop-shadow(0 2px 0 rgb(255 255 255 / 25%))
        drop-shadow(0 3px 2px rgb(57 31 11 / 38%));

    transform-origin: 50% 70%;
}

.app-dock__label {
    position: relative;
    z-index: 2;

    min-width: 0;

    line-height: 1;
    white-space: nowrap;

    text-shadow:
        0 1px 0 rgb(255 246 204 / 46%);
}

.app-dock__button:hover {
    filter: brightness(1.07);
}

.app-dock__button:hover .app-dock__icon {
    transform: rotate(-5deg) scale(1.06);
}

.app-dock__button:active {
    translate: 0 3px;

    box-shadow:
        0 1px 0 #633914,
        0 4px 8px rgb(0 0 0 / 19%),
        inset 0 0 0 2px rgb(255 244 194 / 25%);
}

.app-dock__button.is-active {
    translate: 0 -3px;

    border-color: #6b4219;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgb(255 255 255 / 55%),
            transparent 34%
        ),
        linear-gradient(
            155deg,
            #fff0ac,
            #ebc96f
        );

    outline:
        3px
        solid
        rgb(255 238 160 / 58%);

    box-shadow:
        0 6px 0 #5d3512,
        0 10px 16px rgb(0 0 0 / 25%),
        inset 0 0 0 2px rgb(255 255 255 / 35%);
}

.app-dock__button.is-active::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    bottom: 3px;

    height: 4px;

    border-radius: 999px;

    background: var(--dock-accent);

    box-shadow:
        0 0 7px
        color-mix(
            in srgb,
            var(--dock-accent),
            transparent 35%
        );
}

.app-dock__button[data-go="rsvp"] {
    --dock-accent: #b72d36;
    --dock-paper: #ef6b5d;
}

.app-dock__button:focus-visible {
    outline: 4px solid #fff4a9;
    outline-offset: 2px;
}

@media (max-width: 759px) {
    .app-dock {
        gap: 5px;

        padding:
            7px
            6px
            calc(
                7px +
                env(safe-area-inset-bottom)
            );
    }

    .app-dock__button {
        min-height: 62px;

        flex-direction: column;

        gap: 1px;

        padding: 3px 2px;

        border-width: 2px;
        border-radius: 11px;

        font-size: clamp(9px, 2.7vw, 12px);

        box-shadow:
            0 3px 0 #633914,
            0 5px 8px rgb(0 0 0 / 21%),
            inset 0 0 0 1px rgb(255 244 194 / 30%);
    }

    .app-dock__icon {
        width: 30px;
        height: 30px;

        font-size: 24px;
    }

    .app-dock__button.is-active {
        translate: 0 -2px;

        outline-width: 2px;

        box-shadow:
            0 4px 0 #5d3512,
            0 7px 10px rgb(0 0 0 / 23%),
            inset 0 0 0 1px rgb(255 255 255 / 38%);
    }

    .app-dock__button.is-active::after {
        left: 22%;
        right: 22%;
        bottom: 2px;

        height: 3px;
    }

    .app-dock__button[data-go="rsvp"] {
        --dock-accent: #b72d36;
        --dock-paper: #ef6b5d;
    }

    .app-dock__button--primary {
        min-height: 72px;
        padding-inline: 1px;
        border-radius: 8px 8px 15px 15px;
        font-size: clamp(10px, 2.75vw, 12px);
    }
}

@media (max-width: 370px) {
    .app-dock {
        gap: 3px;
        padding-inline: 4px;
    }

    .app-dock__button {
        font-size: 9px;
    }

    .app-dock__icon {
        width: 27px;
        height: 27px;

        font-size: 21px;
    }

    .app-dock__button[data-go="rsvp"] {
        --dock-accent: #b72d36;
        --dock-paper: #ef6b5d;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-dock__button {
        transition: none;
    }

    .app-dock__button:hover .app-dock__icon {
        transform: none;
    }
}

/* PJD MOD02 KIDS UI */

.app-dock__icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.app-dock__button--primary {
    z-index: 3;

    min-height: 67px;

    overflow: visible;

    clip-path: none;

    border: 4px solid #7c2723;
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 25% 12%,
            rgb(255 255 255 / 48%),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #ffb95f 0%,
            #f0644d 48%,
            #c83445 100%
        );

    box-shadow:
        0 6px 0 #76252b,
        0 10px 18px rgb(0 0 0 / 34%),
        0 0 0 3px rgb(255 220 112 / 42%),
        inset 0 0 0 2px rgb(255 247 205 / 42%);

    scale: 1.045;

    animation:
        dock-rsvp-glow
        2.6s ease-in-out infinite;
}

.app-dock__button--primary::before {
    display: none;
}

.app-dock__button--primary .app-dock__icon {
    width: 43px;
    height: 43px;
}

.app-dock__button--primary .app-dock__label {
    color: #fffce9;

    font-size: 1.12em;
    line-height: .96;

    white-space: normal;

    text-align: center;

    text-shadow:
        0 2px 0
        rgb(91 21 27 / 58%);
}

.app-dock__button--primary:hover {
    filter:
        saturate(1.1)
        brightness(1.06);

    scale: 1.065;
}

.app-dock__button--primary:active {
    translate: 0 3px;
    scale: 1.015;

    box-shadow:
        0 2px 0 #76252b,
        0 5px 10px rgb(0 0 0 / 24%),
        0 0 0 3px rgb(255 220 112 / 38%);
}

@keyframes dock-rsvp-glow {
    0%,
    100% {
        box-shadow:
            0 6px 0 #76252b,
            0 10px 18px rgb(0 0 0 / 34%),
            0 0 0 3px rgb(255 220 112 / 35%),
            inset 0 0 0 2px rgb(255 247 205 / 42%);
    }

    50% {
        box-shadow:
            0 6px 0 #76252b,
            0 10px 20px rgb(0 0 0 / 36%),
            0 0 0 6px rgb(255 220 112 / 56%),
            inset 0 0 0 2px rgb(255 247 205 / 52%);
    }
}

@media (max-width: 759px) {
    .app-dock__button--primary {
        min-height: 76px;

        border-radius: 18px;

        scale: 1.035;
    }

    .app-dock__button--primary .app-dock__icon {
        width: 36px;
        height: 36px;
    }

    .app-dock__button--primary .app-dock__label {
        font-size: 1.04em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-dock__button--primary {
        animation: none;
    }
}